/* Contact: contenuti aperti sopra la scena, satelliti in ordine di lettura. */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.contact-layout > * { min-width: 0; }
#contact-title {
  font-size: clamp(56px, 7.4vw, 112px);
  line-height: .95;
  letter-spacing: -4px;
  margin: 0 0 32px;
  font-weight: 700;
}
.contact-message {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.1vw, 44px);
  font-weight: 600;
  line-height: 1.2;
}
.contact-message em { font-style: italic; color: var(--cyan); }
.contact-satellites {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px clamp(20px, 3vw, 48px);
  align-self: center;
  align-content: center;
}
.contact-satellites li { min-width: 0; }
.contact-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 10px 8px;
  text-align: center;
}
.contact-visual {
  display: block;
  width: min(100%, 288px);
  animation: satellite-float 6.4s ease-in-out infinite;
  animation-play-state: paused;
}
.contact-visual img { display: block; width: 100%; height: auto; image-rendering: pixelated; animation: satellite-glow 3.2s ease-in-out infinite; animation-play-state: inherit; }
.contact-satellites li:nth-child(2) .contact-visual { animation-duration: 7.2s; animation-delay: -2.1s; }
.contact-satellites li:nth-child(3) .contact-visual { animation-duration: 5.8s; animation-delay: -3.4s; }
.contact-satellites li:nth-child(4) .contact-visual { animation-duration: 7.8s; animation-delay: -1.3s; }
.contact-satellites li:nth-child(2) .contact-visual img { animation-delay: -1.6s; }
.contact-visual.is-floating { animation-play-state: running; }
.contact-channel:is(:hover, :focus-within) .contact-visual { animation-play-state: paused; }
.contact-plate { display: block; width: min(100%, 260px); height: auto; margin-top: 12px; image-rendering: pixelated; transition: filter .2s ease, transform .2s ease; }
.contact-status { color: var(--muted); font-size: 12px; line-height: 1.5; }
.contact-channel[href]:is(:hover, :focus-visible) .contact-plate { filter: brightness(1.2); transform: translateY(-2px); }
.contact-channel[href]:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }
@keyframes satellite-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes satellite-glow { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 8px rgba(0, 229, 255, .45)); } }

/* Contact resta consultabile anche mentre la parabola raggiunge la postazione. */
.journey #contact { padding-top: clamp(20px, 4vh, 44px); padding-bottom: 24px; }
.journey #contact-title { font-size: clamp(56px, min(7.4vw, 11.5vh), 112px); }

/* Contact: prima il testo, poi due colonne; una sui telefoni più stretti. */
@media (max-width: 1100px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .contact-satellites { width: 100%; max-width: 700px; justify-self: center; }
  #contact-title, .journey #contact-title { font-size: clamp(48px, 10vw, 85px); letter-spacing: -2px; }
}
@media (min-width: 900px) {
  .contact-visual { width: min(100%, 220px); }
  .contact-plate { width: min(100%, 200px); }

  /* The page has a definite height above the stage. Size the artwork from
     that content box, reserving room for two plaques, statuses and spacing.
     Keep overflow auto as an accessibility fallback, not as the desktop layout. */
  .journey #contact {
    container-type: size;
    padding-top: clamp(12px, 2vh, 24px);
    padding-bottom: clamp(12px, 2vh, 24px);
  }
  .journey .contact-layout {
    --contact-plate-width: clamp(160px, 32cqh, 200px);
    --contact-art-width: clamp(56px, calc((100cqh - var(--contact-plate-width) * .45 - 88px) / 1.25), 220px);
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr);
    gap: clamp(24px, 3vw, 48px);
  }
  .journey #contact-title {
    font-size: clamp(48px, min(7.4vw, 20cqh), 112px);
    margin-bottom: clamp(12px, 5cqh, 28px);
  }
  .journey .contact-message { font-size: clamp(22px, min(3.1vw, 10cqh), 40px); }
  .journey .contact-satellites { gap: 12px clamp(16px, 2vw, 32px); }
  .journey .contact-channel { padding: 6px 4px; }
  .journey .contact-visual { width: min(100%, var(--contact-art-width)); }
  .journey .contact-plate { width: min(100%, var(--contact-plate-width)); margin-top: 4px; }
}
@media (max-width: 360px) {
  .contact-satellites { grid-template-columns: minmax(0, 1fr); }
  .contact-visual { max-width: 240px; }
}
@media (min-width: 361px) and (max-width: 600px) {
  .contact-satellites { column-gap: 16px; }
  .contact-channel { padding-inline: 0; }
}