/* Small copy on the campaign green: #502314 / #03bf62 = 5.42:1.
   Real Gotham Medium/Bold faces are already registered in fonts.css.
   Weight helps legibility; the AA contrast comes from the color pair. */
.hero-sequence .hero-top > .eyebrow,
.hero-sequence .scroll-cue > .cue-copy,
.social-statement > .eyebrow,
.social-showcase > .visual-index,
.social-phone-dots button,
.qa-caption,
.outdoor-intro > .eyebrow,
.outdoor figcaption,
.campaign-banner .banner-brand,
.campaign-banner .banner-hint,
.campaign-banner .test-answer .reset-test {
  font-weight: 700;
  font-size: 11px;
}
.hero-tagline,
.qa-heading > .body-copy,
.outdoor-intro > p:last-child,
.outdoor-copy > .body-copy,
.campaign-banner .test-answer > p:not(.display),
.banner-suspense > span,
.banner-nojs { font-weight: 500; }
.hero-tagline { font-size: clamp(11px, 1vw, 14px); }
.qa-center-label { color: var(--brown); }
.hero-sequence .scroll-cue > .cue-arrow {
  flex-shrink: 0;
  border-width: 2px;
}
.ui-arrow { display: block; width: 24px; height: 24px; flex-shrink: 0; }
.cue-arrow .ui-arrow { width: 20px; height: 20px; }
.social-statement .social-arrow {
  width: clamp(48px, 7vw, 100px);
  height: auto;
  color: var(--brown);
}
.social-arrow .ui-arrow { width: 100%; height: auto; }
.social-phone-controls button { color: var(--brown); }
.social-phone-dots button,
.social-phone-dots button[aria-pressed="true"] {
  border: 2px solid var(--brown);
}
.outdoor-intro .chapter-number { border-width: 2px; font-weight: 700; }
.campaign-banner .test-answer .reset-test {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-bottom-width: 2px;
}
.reset-test .ui-arrow { width: 14px; height: 14px; }
.banner-cta .ui-arrow { width: 20px; height: 20px; }
@media (max-width: 740px) {
  .hero-sequence .hero-top > .eyebrow { font-size: 10px; line-height: 1.5; }
  .hero-sequence .scroll-cue > .cue-copy { max-width: 105px; line-height: 1.45; }
  .hero-sequence .scroll-cue > .cue-arrow { width: 32px; height: 32px; }
  .hero-tagline { max-width: 48%; }
  .social-showcase > .visual-index { right: 24px; line-height: 1.5; }
  .outdoor figcaption { flex-wrap: wrap; gap: 4px 16px; }
}

/* Telefono (fino a 740 px): niente testi sotto i 10 px e aree di tocco di almeno 44 px.
   Le misure visibili restano quelle di prima dove possibile: i link si allargano con un
   padding compensato da un margine negativo, così l'impaginazione non si sposta. */
@media (max-width: 740px) {
  /* Didascalie delle foto (affissioni, banner) e note: da 8-10 px a 11 px. */
  .ooh figcaption,
  .banner-visual figcaption {
    flex-wrap: wrap;
    gap: 2px 16px;
    font-size: 11px;
    line-height: 1.5;
  }
  .section-heading > .small-note,
  .story-footnote,
  .closing > .eyebrow { font-size: 11px; }
  .section-heading > .small-note { max-width: 150px; }
  .whopper-signoff { font-size: 10px; }

  /* Footer: nomi a 12 px anche sui telefoni stretti, occhielli a 10 px, ultima riga a 11 px. */
  .footer-top { font-size: 12px; }
  .footer-top .eyebrow,
  .project-link .eyebrow { font-size: 10px; line-height: 1.5; text-wrap: balance; }
  .footer-bottom { font-size: 11px; row-gap: 0; align-items: center; }
  .footer-bottom a,
  .footer-bottom .site-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-bottom > a:last-child { justify-content: flex-end; }
  .footer-bottom .site-legal a { padding-inline: 4px; }
  .footer-bottom .site-legal { margin-left: -4px; }
  .footer-top > div:last-child > a {
    padding-block: 12px;
    margin-block: 10px -12px;
  }

  /* Freccia «Scorri» nell'apertura: area di tocco alta 44 px. */
  .hero-sequence .scroll-cue {
    padding-block: 6px;
    margin-block: -6px;
  }

  /* Intestazione: logo toccabile su 44 × 44 px; capitoli più facili da toccare (stessa
     distanza visiva tra le voci) e una sfumatura a destra che fa capire che la riga scorre. */
  .project-header .signature {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
  }
  .project-header .project-chapters {
    gap: 8px;
    padding-inline: calc(var(--project-header-gutter) - 10px) calc(var(--project-header-gutter) + 16px);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
  }
  .project-header .project-chapters a {
    padding-inline: 10px;
  }
  .project-header .project-chapters a::after {
    inset: auto 10px 7px;
  }
  .footer-top > .signature {
    padding-block: 9px;
    margin-block: -9px;
  }

  /* Domande della community (sticker Instagram): più grandi, così il testo si legge; il
     riquadro si allunga per lasciare spazio all'hamburger e alla scritta finale. */
  .qa-orbit { height: 730px; }
  .question { width: 56%; }
  .q-one { left: -1%; top: 0; }
  .q-two { right: -1%; top: 13%; }
  .q-three { left: -1%; bottom: 23%; }
  .q-four { right: -1%; bottom: 12%; }
  .qa-burger { top: 46%; }
}