/* ===========================================================================
   WoH Forum — homepage
   Traduzione del frame Figma "homepage definitiva" (node 314:5129).
   Le misure nei commenti sono quelle del frame a 1440px di larghezza.
   =========================================================================== */

/* ---------- Font ----------------------------------------------------------
   Il kit Adobe Fonts `qjj4epd` è collegato con un <link> in testa a
   index.html. Le famiglie si chiamano "ivyepic" e "ivypresto-display"
   (minuscole): sono i nomi che serve Typekit, non quelli di Figma.

   Il kit però contiene oggi solo quattro tagli — ivyepic 900 tondo, ivyepic
   800 e 900 corsivo, ivypresto-display 700 corsivo — e il design non ne usa
   nessuno dei quattro. Se si punta alle famiglie Typekit adesso, il matching
   CSS ripiega sull'unico taglio disponibile e l'intero sito viene in IvyEpic
   Black, con la citazione in corsivo grassetto.

   Perciò le due variabili in `:root` restano sui ripieghi di sistema, e le
   famiglie Typekit si accendono da sole: `main.js` controlla quali tagli il
   kit dichiara davvero e, solo se ci sono tutti e dieci, mette `font-kit` su
   <html>. Nessuna riga da scambiare a mano — appena il progetto web viene
   pubblicato completo, al ricarico successivo il sito usa i font veri.
   La lista dei dieci è in assets/README.md.

   Nota sui pesi: Adobe numera IvyPresto Display Thin come **100**, non 200.
   Quindi la citazione e i sottotitoli lo chiedono a 100. Ivy Epic invece
   segue la numerazione attesa: Light 300, Regular 400, Medium 500,
   SemiBold 600, Bold 700.

   Il ripiego del sans è Avenir Next, non Optima: Optima ha le aste svasate e
   dà a tutto il sito un'aria calligrafica che con IvyEpic non c'entra nulla.
   Avenir Next è geometrico-umanista come IvyEpic e regge il confronto molto
   meglio. Per il serif Didot resta la scelta giusta: è quello col contrasto
   più alto fra i font di sistema, vicino al carattere di IvyPresto.

   Suisse Intl (--font-ui, solo le etichette della fascia loghi) non è nel
   kit e non è su Adobe Fonts: resta comunque sul fallback.                */


/* ---------- I font installati sul computer ---------------------------------
   Chi ha IvyEpic e IvyPresto Display attivi via Adobe Creative Cloud li ha
   installati come font di sistema: e' il motivo per cui Figma li mostra
   giusti. Il browser puo' usarli, ma va chiesto per nome — e non con il nome
   `ivyepic`, che il kit Typekit ha gia' occupato: lo dichiara con soli
   quattro tagli e oscurerebbe quelli locali. Da qui il nome distinto.

   Se il font non e' installato la sorgente `local()` fallisce e si passa alla
   famiglia successiva della pila: nessun effetto collaterale.

   ATTENZIONE: questo vale solo su chi ha i font installati — chi progetta.
   Per i visitatori del sito non cambia nulla: a loro i font arrivano solo dal
   progetto web Adobe. Vedi assets/README.md.                                */

@font-face { font-family: 'IvyEpic Locale'; src: local('IvyEpic-Light');    font-weight: 300; font-style: normal; }
@font-face { font-family: 'IvyEpic Locale'; src: local('IvyEpic-Regular');  font-weight: 400; font-style: normal; }
@font-face { font-family: 'IvyEpic Locale'; src: local('IvyEpic-Medium');   font-weight: 500; font-style: normal; }
@font-face { font-family: 'IvyEpic Locale'; src: local('IvyEpic-SemiBold'); font-weight: 600; font-style: normal; }
@font-face { font-family: 'IvyEpic Locale'; src: local('IvyEpic-Bold');     font-weight: 700; font-style: normal; }
/* IvyEpic Medium Italic non risulta installato: per "Magnifica Humanitas" il
   browser inclina da se' il Medium. Non dichiariamo una faccia corsiva con
   sorgente tonda, altrimenti resterebbe dritta. */

@font-face { font-family: 'IvyPresto Locale'; src: local('IvyPrestoDisplay-Thin');        font-weight: 100; font-style: normal; }
@font-face { font-family: 'IvyPresto Locale'; src: local('IvyPrestoDisplay-Light');       font-weight: 300; font-style: normal; }
@font-face { font-family: 'IvyPresto Locale'; src: local('IvyPrestoDisplay-LightItalic'); font-weight: 300; font-style: italic; }
@font-face { font-family: 'IvyPresto Locale'; src: local('IvyPrestoDisplay-Regular');     font-weight: 400; font-style: normal; }

/* ---------- Variabili di tema --------------------------------------------- */

:root {
  --sand:       #d8d8ca;
  --sand-soft:  rgba(216, 216, 201, .6);
  --red:        #ba4637;   /* box primo dialogo, accenti */
  --red-warm:   #bb4637;   /* bottone hero, "forum" nel titolo */
  --grey:       #d9d9d9;   /* quadrato dietro al chevron dell'intro */
  --verdino:    #dadaca;   /* fondo del footer */
  --ink:        #000;
  --ink-soft:   #1d1d1b;   /* etichette e filetti della fascia loghi */
  --on-red:     #fff;
  --btn-text:   #f2f1df;   /* testo del bottone "Vai al programma" */
  --on-panel:   #fcfcf9;   /* testo sui pannelli delle card */
  --ardesia:    #2e3b46;   /* banda della citazione, Versione 2 */

  --font-sans:  'IvyEpic Locale', 'Avenir Next', 'Avenir', 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'IvyPresto Locale', 'Didot', 'Bodoni 72', Georgia, serif;
  --font-ui:    'Suisse Intl', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* Larghezza del frame Figma. I margini di 50px li fa il padding dei
     contenitori, non questa misura: sottrarli qui li conterebbe due volte e
     spingerebbe tutto il contenuto verso il centro. */
  --maxw:   1440px;
  --gutter: clamp(20px, 3.5vw, 50px);
}

/* Acceso da main.js solo quando il kit Adobe dichiara tutti i tagli che il
   design usa. Finché ne manca uno restano i ripieghi: meglio un carattere di
   sistema coerente che IvyEpic Black su tutto il sito. */
html.font-kit {
  --font-sans:  "ivyepic", 'IvyEpic Locale', 'Avenir Next', 'Avenir', 'Segoe UI', system-ui, sans-serif;
  --font-serif: "ivypresto-display", 'IvyPresto Locale', 'Didot', 'Bodoni 72', Georgia, serif;
}

/* ---------- Base ----------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;   /* il chevron dell'intro porta al sito */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.4;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, h4, p, ul, blockquote, figure { margin: 0; }
ul { padding: 0; list-style: none; }

.accent { color: var(--red); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Testata -------------------------------------------------------
   Versione 2, frame 580:8420. La landing si apre su questa composizione: nella
   Versione 1 era la schermata di intro a parte, con la sua lastra a tutto
   schermo e il chevron. Qui e' una banda normale nel flusso, su bianco.

   Il frame e' 1440x982 e tutto dentro sta in posizione assoluta. Per non
   inseguire i numeri uno per uno c'e' una sola scala, `--u`, che vale 1/1440
   della larghezza utile: ogni misura e' il numero di Figma moltiplicato per
   `--u`, e sopra i 1440 la composizione smette di crescere e si centra.
   Marchi 81x81 a (172,50) e (62,150), logotipo 665x285 a (163,280),
   mappamondo 759 a x=856 — che sborda di 175px oltre il bordo.            */

.testata {
  position: relative;
  overflow-x: clip;            /* il mappamondo sborda a destra */
  background: #fff;
}

.testata-inner {
  --u: calc(min(100vw, var(--maxw)) / 1440);
  position: relative;
  /* la larghezza segue la scala: riducendo `--u` la composizione rimpicciolisce
     e resta centrata, invece di appoggiarsi al margine sinistro */
  width: calc(1440 * var(--u));
  max-width: 100%;
  margin-inline: auto;
  height: calc(982 * var(--u));
}

/* ---- i due marchi ---- */

/* I due marchi sono una coppia gia' composta dentro a un file solo: la forma
   in alto a destra e quella in basso a sinistra stanno nella stessa immagine.
   Il riquadro e' largo 191 — la distanza fra il bordo sinistro dell'asterisco
   (x=62) e quello destro della croce (x=253) nel frame — cosi' ogni forma
   viene 81, la misura del frame. */
.marchi {
  position: absolute;
  z-index: 1;
  left: calc(62 * var(--u));
  top: calc(50 * var(--u));
  width: calc(191 * var(--u));
  aspect-ratio: 370 / 312;
  display: block;
}

.marchi img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- il logotipo ---- */

/* Il logotipo e' una griglia 2x3: tre righe da 333x95 dentro a un riquadro di
   665x285. WORDS a sinistra, of HOPE a destra, FORUM a sinistra. A tutta
   larghezza le righe verrebbero alte il doppio e il blocco sconfinerebbe sul
   testo sotto. */
.wordmark {
  position: absolute;
  z-index: 1;
  left: calc(163 * var(--u));
  top: calc(197 * var(--u));
  width: calc(665 * var(--u));
  height: calc(285 * var(--u));
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0;
}

.wordmark img { width: 100%; height: auto; display: block; }
.wordmark-words   { grid-area: 1 / 1; }
.wordmark-of-hope { grid-area: 2 / 2; }
.wordmark-forum   { grid-area: 3 / 1; }

/* ---- il pulsante del menu ----
   In alto a destra della composizione, a filo del margine: 52x21 — la misura
   dell'artwork della Versione 1 — a (1338,50) nel frame. Il mappamondo
   comincia a y=112, quindi non ci finisce sotto. */

.testata-menu {
  position: absolute;
  z-index: 2;
  right: calc(50 * var(--u));
  top: calc(50 * var(--u));
  width: calc(52 * var(--u));
}

.testata-menu img { width: 100%; height: auto; display: block; }

/* ---- il titolo esteso e il payoff ----
   Stanno fra il logotipo e "Primo dialogo": (163,522) nella schermata
   desktop, larghi 640 perche' il titolo cada su due righe come li'. */

.testata-claim {
  position: absolute;
  z-index: 1;
  left: calc(163 * var(--u));
  top: calc(522 * var(--u));
  width: calc(640 * var(--u));
}

.testata-titolo {
  font-weight: 700;
  font-size: calc(34 * var(--u));
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--ink-soft);
}

/* Le due schermate spezzano il titolo in punti diversi: due righe sul
   desktop, dove l'a capo lo fa da solo la colonna da 640, e tre su mobile,
   dopo "Innovation:" e dopo "for". Quelli sono a capo voluti, non di
   larghezza — a 353 il testo starebbe su due righe — quindi stanno
   nell'HTML e qui restano spenti.

   Lo spazio prima di ogni `<br>` serve: spegnendolo con `display: none`
   l'a capo sparisce e con lui l'unico stacco fra le due parole, che
   finivano attaccate ("Innovation:Words"). Su mobile e' uno spazio a fine
   riga, che non si vede. */
.testata-titolo br { display: none; }

.testata-payoff {
  margin-top: calc(10 * var(--u));
  font-weight: 400;
  font-size: calc(20 * var(--u));
  line-height: 1.2;
  color: var(--ink-soft);
}

/* ---- quando e dove ---- */

.testata-quando {
  position: absolute;
  z-index: 1;
  left: calc(163 * var(--u));
  top: calc(652 * var(--u));
  width: calc(600 * var(--u));
}

/* Tagli letti dal frame: etichetta SemiBold 16, "23-25" SemiBold 45 in rosso,
   il mese SemiBold 40. Stavano nel blocco dell'intro e vanno rimessi qui. */
.intro-label {
  font-weight: 600;
  font-size: calc(16 * var(--u));
  line-height: 1.375;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.intro-dates {
  margin-top: calc(13 * var(--u));
  display: flex;
  align-items: baseline;
  gap: calc(14 * var(--u));
  line-height: 1;
}

.intro-day   { font-weight: 600; font-size: calc(45 * var(--u)); color: var(--red-warm); }
.intro-month { font-weight: 600; font-size: calc(40 * var(--u)); color: var(--ink-soft); }

/* Il bottone: 215x39 nel frame, e il testo non scala con --u perche' sotto
   una certa misura diventerebbe illeggibile. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(215 * var(--u));
  height: calc(39 * var(--u));
  padding-inline: calc(22 * var(--u));
  background: var(--red-warm);
  color: var(--btn-text);
  font-weight: 600;
  font-size: max(12px, calc(16 * var(--u)));
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
}

.btn:hover { background: var(--red); }

.testata-luogo {
  margin-top: calc(19 * var(--u));
  font-weight: 700;
  font-size: calc(25 * var(--u));
  line-height: 1.05;
  color: var(--ink-soft);
}

.testata-luogo span {
  font-weight: 400;
  font-size: calc(20 * var(--u));
  text-transform: uppercase;
}

.testata-quando .btn { margin-top: calc(34 * var(--u)); }

/* ---- il mappamondo ----
   Il fondo della testata e' bianco come il filmato, quindi qui non serve ne'
   la maschera ne' la fusione: il bianco del video sparisce da solo.        */

.testata-globe {
  position: absolute;
  z-index: 0;               /* su mobile il logotipo gli passa sopra */
  /* Ancorato a destra e centrato in verticale, non fissato con l'angolo in
     alto a sinistra. Nel frame e' gia' cosi' — sborda di 175 oltre il blocco e
     il suo centro cade a meta' banda — e serve perche' rimpicciolendolo non
     scappi verso l'alto e verso sinistra. */
  left: auto;
  right: calc(-175 * var(--u));
  top: 50%;
  translate: 0 -50%;
  /* `--globo` permette di ridurre il mappamondo piu' del resto, senza toccare
     la scala della composizione */
  width: calc(759 * var(--u) * var(--globo, 1));
  aspect-ratio: 1;
  margin: 0;
  pointer-events: none;
}

.testata-globe video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* mai reso trasparente: Safari nega l'autoplay agli elementi invisibili */
}

.testata-globe::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url('../assets/img/mondo.jpg') center / cover no-repeat;
  transition: opacity .4s ease;
}

.testata-globe.sta-suonando::before { opacity: 0; }

.testata-globe video::-webkit-media-controls,
.testata-globe video::-webkit-media-controls-enclosure,
.testata-globe video::-webkit-media-controls-start-playback-button { display: none !important; }

/* ---------- Testata: sequenza di composizione -----------------------------
   E' la stessa della schermata di intro della Versione 1: i marchi entrano,
   poi il logotipo riga per riga, poi le scritte. Qui in piu' entrano anche il
   luogo e il bottone, che nella Versione 1 stavano nella hero.            */

@keyframes intro-pop     { from { opacity: 0; scale: .72; }         to { opacity: 1; scale: 1; } }
@keyframes intro-from-l  { from { opacity: 0; translate: -28px 0; } to { opacity: 1; translate: 0; } }
@keyframes intro-from-r  { from { opacity: 0; translate: 28px 0; }  to { opacity: 1; translate: 0; } }
@keyframes intro-rise    { from { opacity: 0; translate: 0 18px; }  to { opacity: 1; translate: 0; } }

.marchi                 { animation: intro-pop    .5s ease-out  .10s both; }
.wordmark-words         { animation: intro-from-l .6s ease-out  .45s both; }
.wordmark-of-hope       { animation: intro-from-r .6s ease-out  .62s both; }
.wordmark-forum         { animation: intro-from-l .6s ease-out  .79s both; }
.testata-claim          { animation: intro-rise   .5s ease-out  .90s both; }
.intro-label            { animation: intro-rise   .5s ease-out 1.00s both; }
.intro-dates            { animation: intro-rise   .5s ease-out 1.12s both; }
.testata-luogo          { animation: intro-rise   .5s ease-out 1.24s both; }
.testata-quando .btn    { animation: intro-rise   .5s ease-out 1.40s both; }

/* Il mappamondo entra in dissolvenza come gli altri, ma l'opacita' NON puo'
   stare sul riquadro: e' il contenitore del <video>, e un contenitore
   trasparente fa rifiutare l'autoplay ai browser che lo condizionano alla
   visibilita'. Quindi il riquadro resta sempre opaco e a sfumare e' un velo
   bianco sopra: stesso effetto a schermo, nessun effetto sull'autoplay.   */
.testata-globe::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  pointer-events: none;
  z-index: 2;
  animation: velo-via 1.1s ease-out .50s both;
}

@keyframes velo-via { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {

  .marchi,
  .wordmark img,
  .testata-claim,
  .intro-label,
  .intro-dates,
  .testata-luogo,
  .testata-quando .btn {
    animation: none;
    opacity: 1;
    translate: none;
    scale: none;
  }

  .testata-globe::after  { animation: none; opacity: 0; }
  .testata-globe::before { opacity: 1; }
}

/* ---------- Citazione -----------------------------------------------------
   Blocco 1263px a (49, 960). Testo IvyPresto Thin 50/55.                   */

.quote {
  background: var(--ardesia);
  color: #fff;
  padding-block: clamp(40px, 5.56vw, 80px) clamp(56px, 9.72vw, 140px);
}

.quote-inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* nel frame il blocco della citazione e' largo 1263 e parte dallo stesso
   margine sinistro di tutto il resto */
.quote blockquote { max-width: 1263px; }

.quote blockquote p {
  font-family: var(--font-serif);
  font-weight: 100;
  font-size: clamp(24px, 3.5vw, 50px);
  line-height: 1.1;
}

.quote blockquote footer {
  margin-top: clamp(20px, 2.7vw, 39px);
  font-family: var(--font-serif);
  font-weight: 400;
}

.quote-source {
  display: block;
  font-style: normal;
  font-size: clamp(16px, 1.74vw, 25px);
  line-height: 1.33;
}

.quote-author {
  display: block;
  margin-top: clamp(12px, 1.6vw, 23px);
  font-size: clamp(19px, 2.1vw, 30px);
  line-height: 1.08;
  text-transform: uppercase;
}

/* ---------- Un forum, tre tappe -------------------------------------------
   Banda sabbia a tutta larghezza, y 1470 -> 2732.
   Titolo a (51, 87), testo a (51, 172), card a (50, 431).                  */

/* Versione 2: la sezione sta sul bianco della pagina. Nella Versione 1 aveva
   il fondo sabbia; nel frame 580:8420 fra la banda scura della citazione e il
   box rosso non c'e' nessun rettangolo, e il frame e' bianco. */
.forum {
  /* Nel frame la banda scura finisce a 1550 e il titolo comincia a 1688:
     138px. Prima erano 248, perche' al margine si sommava il padding interno
     della sezione — che serviva a dare aria dentro la banda sabbia, e senza
     quella banda non ha piu' motivo di esserci. */
  margin-top: clamp(56px, 9.58vw, 138px);
}

.forum-inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  /* niente padding sopra: lo stacco lo fa il margine della sezione. Sotto,
     nel frame fra le card e il box rosso restano 137px. */
  padding: 0 var(--gutter) clamp(60px, 9.5vw, 137px);
}

.forum h2 {
  font-weight: 500;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.1;
  letter-spacing: -.03em;
}

.forum h2 .accent { color: var(--red-warm); }

/* I due paragrafi hanno la larghezza del riquadro di testo del frame, 821px,
   corpo 22 e interlinea 26. Gli a capo pero' stanno nell'HTML: alla stessa
   larghezza, corpo e crenatura, a video il testo rende un filo piu' stretto
   che in Figma, e il primo paragrafo si prendeva una parola in piu' per riga.
   Nessuna larghezza andava bene per tutti e due — al primo servivano 740, al
   secondo 821 — quindi gli a capo sono espliciti. */
.forum-intro p {
  margin-top: clamp(14px, 1.39vw, 20px);
  max-width: 821px;
  font-weight: 300;
  font-size: clamp(16px, 1.53vw, 22px);
  line-height: 1.18;
  letter-spacing: -.03em;
}

/* Gli a capo forzati valgono solo dove la colonna arriva davvero agli 821px
   del frame; sotto, il testo si riadatta da solo come qualunque paragrafo. */
.forum-intro br { display: none; }

@media (min-width: 1000px) {
  .forum-intro br { display: inline; }
}

.cards {
  margin-top: clamp(40px, 6.5vw, 94px);
  display: grid;
  gap: clamp(16px, 1.75vw, 25px);
}

/* I segni di posizione del carosello esistono solo su mobile: qui restano
   fuori campo, cosi' `main.js` puo' costruirli senza condizioni. */
.cards-punti { display: none; }

/* Le card hanno due facce. A riposo la foto con il marchio; al passaggio del
   mouse (o col focus da tastiera) un pannello a tinta piena con etichetta,
   titolo, foto e luogo — variante "Variant2" dei componenti Figma
   233:960, 243:1195 e 243:1300.

   Le misure del pannello sono quelle del frame, dove la card e' larga
   429,824px, espresse in `cqw`: 1cqw = 1% della larghezza della card, quindi
   il pannello si riscala con la card senza media query. Per questo la card
   dichiara `container-type: inline-size`.                                  */

.card {
  position: relative;
  aspect-ratio: 429.824 / 661.206;
  overflow: hidden;
  container-type: inline-size;
}

.card-inner {
  position: absolute;
  inset: 0;
  display: block;
  color: var(--on-panel);
  text-decoration: none;
}

/* ---- faccia a riposo ---- */

.card-cover { position: absolute; inset: 0; }

.card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* velature piatte sopra la foto, come nel frame */
.card-cover::after {
  content: '';
  position: absolute;
  inset: 0;
}

.card--simeri       { --panel: #bb4737; }
.card--sanfrancisco { --panel: #2d3b46; }
.card--gandolfo     { --panel: #3a2c28; }

.card--simeri       .card-cover::after { background: linear-gradient(rgba(186, 70, 55, .2), rgba(186, 70, 55, .2)), rgba(0, 0, 0, .3); }
.card--sanfrancisco .card-cover::after { background: linear-gradient(rgba(45, 59, 70, .5), rgba(45, 59, 70, .5)), rgba(0, 0, 0, .05); }
.card--gandolfo     .card-cover::after { background: linear-gradient(rgba(57, 43, 40, .5), rgba(57, 43, 40, .5)), rgba(0, 0, 0, .03); }

.card--gandolfo .card-bg { object-position: 30% center; }

.card-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 1;
  width: 24%;
  height: auto;
}

/* ---- faccia al passaggio del mouse ---- */

.card-panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 8.67cqw 5.61cqw 6cqw;      /* 37,27 e 24,1 nel frame */
  background: var(--panel);
  opacity: 0;
  transition: opacity .35s ease;
}

.card:hover .card-panel,
.card:focus-within .card-panel { opacity: 1; }

/* La data in cima alla card: nella Versione 2 ogni tappa la porta sopra
   all'etichetta (frame mobile, y32 contro y70). Come il resto del pannello e'
   in `cqw`, cioe' in percentuale della larghezza della card. */
.card-data {
  display: block;
  margin-bottom: 1.86cqw;             /* 8 */
  font-weight: 700;
  font-size: 5.95cqw;                 /* 21 su 353 */
  line-height: 1.15;
}

.card-tag {
  font-weight: 700;
  font-size: 4.67cqw;                 /* 20,085 */
  line-height: 1.29;
  letter-spacing: .01em;
  text-transform: uppercase;
}

/* Il filetto sta **fra la data e l'etichetta**, non sotto: nel frame Line 6
   cade a y77 e "PRIMO DIALOGO" a y85. */
.card-rule {
  display: block;
  width: 84.3cqw;                     /* 362,338 */
  margin-bottom: 1.86cqw;             /* 8 */
  border-top: 1px solid currentColor;
}

/* `margin-block: auto` centra il titolo fra l'etichetta e la fotografia, come
   nel frame, e fa una cosa in piu' che e' il motivo vero per cui sta qui: con
   due margini automatici uguali la quota della foto diventa
   `catena fissa in alto + (altezza libera)/2 + titolo + (altezza libera)/2`,
   dove l'altezza libera contiene il titolo col segno meno — i due termini si
   annullano e **la foto cade sempre alla stessa quota, qualunque sia il numero
   di righe del titolo**. E' cosi' che le tre card restano allineate anche se
   il secondo titolo ha una riga in piu'. */
.card-title {
  margin-block: auto;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 7.24cqw;                 /* 31,108 */
  line-height: .976;                  /* 30,367 / 31,108 */
}

.card-title-sub { font-weight: 100; }

/* La fotografia ha **misura fissa**, uguale in tutte e tre le card: 378x245
   nel frame, cioe' 87,85% e 57,01% della larghezza della card. Prima l'altezza
   la dava `aspect-ratio`, che pero' in una colonna flex non fissa la misura
   sull'asse principale: la foto si prendeva lo spazio avanzato e veniva 256,
   254 e 285 nelle tre card — era questo il "la prima e' piu' grande".

   `min-height: 0` resta, ed e' la rete di sicurezza: la card ha proporzioni
   fisse e `overflow: hidden`, quindi quello che non ci sta sparisce, e a
   sparire sarebbe il piede. Senza, un flex item non scende sotto la sua
   altezza naturale; con il ripiego Didot (kit Adobe non caricato) il titolo
   passa da 3 righe a 5 e "Tiriolo -" restava tagliato a meta'. Ora a cedere e'
   la fotografia; il ritaglio lo fa `object-fit: cover`. */
.card-photo {
  width: 87.85cqw;                    /* 377,602 */
  height: 57.01cqw;                   /* 245,04 */
  flex: 0 1 auto;                     /* non cresce mai, si accorcia solo se serve */
  min-height: 0;
  object-fit: cover;
}

.card--gandolfo .card-photo { object-position: 40% center; }

/* Nel frame "vai al programma" non sta accanto al luogo: sta **sotto**, a
   destra (y620, mentre CATANZARO finisce a 611). E il `min-height` riserva
   quello spazio in tutte e tre le card, anche nelle due senza pulsante: se no
   il piede sarebbe piu' basso li' e la fotografia scenderebbe, rompendo
   l'allineamento fra le tre. */
.card-foot {
  margin-top: 7.21cqw;                /* 31 */
  min-height: 17cqw;                  /* 73: luogo + citta' + pulsante */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2.1cqw;                        /* 9 */
}

.card-where { align-self: stretch; }

.card-place {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 7.2cqw;                  /* 30,958 */
  line-height: .91;
}

.card-city {
  display: block;
  margin-top: 1.9cqw;
  font-size: 2.45cqw;                 /* 10,532 */
  line-height: 1.14;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* `line-height: 1` e niente padding: il pulsante deve stare dentro ai 73px che
   il piede riserva (`min-height` su `.card-foot`), se no e' la card col
   pulsante ad avere il piede piu' alto e la sua fotografia sale di 7px
   rispetto alle altre due. Nel frame il testo e' alto 13. */
.card-cta {
  display: inline-flex;
  align-items: center;
  gap: 1.6cqw;
  font-size: 2.99cqw;                 /* 12,855 */
  line-height: 1;
  white-space: nowrap;
}

.card-cta img { width: 3.55cqw; height: auto; }

.card-inner:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .card-panel { transition-duration: .01ms; }
}

/* ---------- Primo dialogo -------------------------------------------------
   Box rosso 1196x563 a (121, 2682): risale di 50px dentro la banda sabbia. */

/* Nella Versione 1 il box rosso risaliva sopra la banda sabbia con un margine
   negativo. Senza quella banda l'accavallamento non ha piu' senso: il box
   segue le card alla distanza del frame. */
.dialogo {
  position: relative;
  padding-inline: var(--gutter);
}

/* Il padding sta in tre variabili perche' la fotografia deve annullarlo: nel
   frame arriva a filo dei bordi del box, non dentro al suo margine. */
.dialogo-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1196px;
  margin-inline: auto;
  --pad-x: clamp(22px, 5.2vw, 69px);
  --pad-t: clamp(24px, 2.9vw, 37px);
  --pad-b: clamp(32px, 5.1vw, 74px);
  padding: var(--pad-t) var(--pad-x) var(--pad-b);
  background: var(--red);
  color: var(--on-red);
  /* colonna flex per poter spostare la fotografia con `order`: nell'HTML sta
     prima di tutto, ma la sua posizione cambia col formato */
  display: flex;
  flex-direction: column;
}

.dialogo-head { display: block; }

.dialogo-date {
  font-weight: 700;
  font-size: clamp(17px, 1.55vw, 22.3px);
  line-height: 1.29;
}

.dialogo-label {
  font-weight: 400;
  font-size: clamp(13px, 1.12vw, 16px);
  line-height: 1.17;
  text-transform: uppercase;
}

/* "Location" e i due indirizzi, che sono link a Google Maps. Su mobile stanno
   sotto alla data, sul desktop di fianco (vedi il blocco da 900px). */
.dialogo-dove {
  margin-top: clamp(18px, 2vw, 26px);
}

.dialogo-dove-titolo {
  font-weight: 700;
  font-size: clamp(17px, 1.55vw, 22.3px);
  line-height: 1.29;
}

.dialogo-dove p + p { margin-top: 2px; }

.dialogo-dove a {
  font-weight: 400;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.17;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dialogo-dove a:hover,
.dialogo-dove a:focus-visible { text-decoration-thickness: 2px; }

.dialogo-rule {
  height: 0;
  margin: clamp(14px, 1.7vw, 22px) 0 0;
  border: 0;
  /* `<hr>` porta un colore proprio dal browser — grigio — quindi
     `currentColor` non ereditava il bianco del box: la riga veniva grigia su
     fondo rosso. `color: inherit` lo riallinea al testo. */
  color: inherit;
  border-top: 1px solid currentColor;
}

/* freccia sul filetto, a metà della sua larghezza */
.dialogo-body {
  margin-top: clamp(28px, 2.85vw, 41px);   /* filetto 138 -> titolo 179 */
  display: grid;
  gap: clamp(24px, 3vw, 40px);
}

.dialogo-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: .96;
}

.dialogo-title span { display: block; }
.dialogo-title-sub { font-weight: 100; }

.dialogo-copy p {
  margin-top: clamp(14px, 1.3vw, 18px);
  max-width: 701px;
  font-size: clamp(14px, 1.12vw, 16px);
  line-height: 1.11;
}

.dialogo-testo-inner > p:first-child { margin-top: clamp(20px, 2.4vw, 34px); }

/* Il pulsante "Continua a leggere" serve solo su schermo stretto: da 700px
   in su il testo e' sempre aperto e il pulsante non esiste a video. */
.dialogo-piu { display: none; }

/* La fotografia del box. Nel frame arriva a filo dei bordi: a tutta larghezza
   in fondo su mobile e tablet, a filo destro e per tutta l'altezza sul
   desktop. I margini negativi annullano il padding del box. */
.dialogo-foto {
  order: 1;                     /* in fondo al box: e' il caso del tablet */
  margin: 28px calc(-1 * var(--pad-x)) calc(-1 * var(--pad-b));
}

.dialogo-foto img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Pattern -------------------------------------------------------
   Fascia decorativa 1440x246 ricomposta dai 417 elementi del frame.        */

/* Versione 2: il pattern arriva da Figma come un solo SVG (nodo `580:9127`,
   1440x255,6). Vettoriale, quindi resta nitido a ogni misura e pesa meno del
   PNG che c'era prima. La fascia nel frame e' alta 256, non 246.

   **Si ripete un tassello, non il file intero.** Il motivo ha un passo di
   **78,961** unita' e il file e' largo 1440, che non ne e' un multiplo: ne
   stanno 18,24, quindi a ogni ripetizione avanzavano 18,9 unita' e il disegno
   si spezzava e ricominciava. Si vedeva su ogni schermo piu' largo di 1440.

   `pattern-tassello.svg` e' lo stesso file con un `viewBox` di **un periodo
   solo**, preso da x=55,83 dove cade il primo motivo. Verificato affiancando
   tre copie e confrontando le colonne a cavallo del giunto: **scarto zero**.
   `pattern.svg` resta in cartella, e' la sorgente da cui il tassello e'
   ritagliato. */
.pattern {
  margin-top: clamp(40px, 5.2vw, 75px);
  height: clamp(96px, 17.78vw, 256px);
  background: url('../assets/img/pattern-tassello.svg') repeat-x center / auto 100%;
}

/* ---------- Loghi ---------------------------------------------------------
   Etichette Suisse Intl 19.6px #1d1d1b, filetto 0.73px #1d1d1b.            */

/* Fra l'ultimo logo e il footer il frame lascia 321px; prima erano 58. */
.loghi-inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(80px, 13vw, 188px) var(--gutter) clamp(120px, 22.3vw, 321px);
}

.loghi-band + .loghi-band,
.loghi-duo + .loghi-band,
.loghi-band + .loghi-duo { margin-top: clamp(40px, 4.6vw, 66px); }

.loghi h3 {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(16px, 1.36vw, 19.6px);
  line-height: 1.28;
  color: var(--ink-soft);
}

.loghi-row {
  margin-top: clamp(16px, 1.9vw, 27px);
  padding-top: clamp(16px, 1.9vw, 27px);
  border-top: 1px solid var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  --stacco: clamp(28px, 4.4vw, 64px);
  gap: var(--stacco);
}

/* Capo riga dentro a un contenitore flex: un elemento largo quanto la riga e
   alto zero. Serve alla fascia dei media partner, che sul desktop va 5 + 3
   mentre da sola ne metterebbe sei sulla prima riga. Su telefono sparisce. */
.loghi-row li.loghi-acapo {
  flex: 0 0 100%;
  height: 0;
}

/* Quel capo riga aggiunge pero' una riga in mezzo, e il `row-gap` finisce
   contato due volte: una sopra e una sotto. Non si rimedia con un margine
   negativo sul segnaposto — la riga di un contenitore flex non puo' essere
   piu' bassa di zero, quindi il meno sparisce e restano i due stacchi interi
   (127px invece di 53, ed e' lo spazio bianco che si vedeva sotto ad
   Avvenire). Qui il `row-gap` e' meta' di quello voluto: sommandosi da' i
   53px che il frame lascia fra le due righe dei media partner. */
.loghi-band--media .loghi-row { row-gap: clamp(8px, 1.04vw, 15px); }

/* la misura del logo sta sul li: dentro un flex item a larghezza indeterminata
   una width in percentuale ricadrebbe sulla dimensione intrinseca dell'immagine */
.loghi-row li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}

.loghi-row img {
  width: var(--logo-w, 160px);
  max-width: 100%;
  height: auto;
}

.tbc {
  font-style: normal;
  font-family: var(--font-ui);
  font-size: 28px;
  line-height: 1;
  color: var(--ink-soft);
  align-self: flex-start;
}

.loghi-note {
  margin-top: clamp(24px, 3vw, 42px);
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--ink-soft);
  text-align: right;
}

/* ---------- Footer --------------------------------------------------------
   Banda grigia 1440x414. Logo a (50, 90); colonne a x=500, 838, 1175.      */

.site-footer {
  background: var(--verdino);
  color: var(--ink-soft);
  padding: clamp(40px, 6.3vw, 91px) 0 clamp(24px, 2.4vw, 34px);
}

.footer-inner,
.footer-bottom {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.footer-inner {
  display: grid;
  gap: clamp(28px, 3vw, 40px);
}

.footer-brand img { width: clamp(110px, 10.8vw, 156px); height: auto; }

.footer-col h4 {
  font-weight: 600;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: .825;            /* 16,5 su 20 */
}

.footer-col ul { margin-top: clamp(16px, 2.3vw, 33px); }

.footer-col li + li { margin-top: 15px; }

/* `display: block` non e' un dettaglio: da inline l'interlinea non governa
   l'altezza della riga, che restava quella ereditata dal body (1.4) e
   distanziava le voci molto piu' del frame. */
.footer-col a {
  display: block;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: .92;             /* 16,5 su 18 */
  text-decoration: none;
}

.footer-col a:hover { text-decoration: underline; }

.footer-bottom {
  margin-top: clamp(40px, 8.2vw, 118px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 40px;
  font-size: 14px;
  line-height: 1.14;
}

.footer-legal a { text-decoration: none; }
.footer-legal a:hover { text-decoration: underline; }

/* ===========================================================================
   Mobile — traduzione del frame `mobile` (384:891), 393x5461
   Tre comportamenti che il desktop non ha: le card diventano un carosello che
   si scorre col dito, il testo del primo dialogo parte chiuso, i loghi vanno
   su due colonne. Tutto dentro a max-width 699px: il desktop non si tocca.
   =========================================================================== */

@media (max-width: 699px) {

  /* ---- 1. Le tappe: carosello a scorrimento ----
     Nel frame la pista parte dal margine di sinistra e sborda a destra fino al
     bordo dello schermo (card 353 su 393). I margini negativi le fanno
     attraversare il contenitore; `flex: 0 0 100%` da' alla card esattamente la
     larghezza del contenitore meno i due margini, cioe' i 353 del frame. */
  .cards {
    display: flex;
    gap: 20px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;   /* lo swipe non torna indietro nella cronologia */
    scrollbar-width: none;
  }

  .cards::-webkit-scrollbar { display: none; }

  .card {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  /* Nel frame mobile le card si vedono gia' aperte: niente stato a riposo,
     il pannello e' sempre a video. Le sue misure sono in `cqw`, quindi a 353px
     di card cadono da sole sui valori del frame. */
  .card-cover { display: none; }
  .card-panel { opacity: 1; }

  /* I segni di posizione sotto la pista (Group 105 nel frame): li costruisce
     `main.js`, cosi' non restano comandi morti se il JS non parte. */
  .cards-punti {
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    list-style: none;
  }

  .cards-punto {
    width: 24px;
    height: 8px;
    padding: 0;
    border: 1px solid var(--ink-soft);
    border-radius: 4px;
    background: none;
    cursor: pointer;
    transition: background-color .25s ease;
  }

  .cards-punto.is-corrente { background: var(--ink-soft); }

  .cards-punto:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

  /* ---- 2. Primo dialogo: il testo si apre verso il basso ----
     La classe la mette `main.js`. Senza JS questo blocco non si applica: il
     testo resta aperto e il pulsante invisibile, come sul desktop. */
  .dialogo-collassabile .dialogo-piu {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: clamp(16px, 4vw, 22px);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.93;
    letter-spacing: -.03em;
    text-decoration: underline;
    cursor: pointer;
  }

  .dialogo-collassabile .dialogo-piu-freccia {
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    rotate: 45deg;                 /* punta in giu': il testo si apre sotto */
    translate: 0 -2px;
    transition: rotate .3s ease, translate .3s ease;
  }

  .dialogo-collassabile.is-aperto .dialogo-piu-freccia {
    rotate: 225deg;                /* aperto: la punta torna su */
    translate: 0 1px;
  }

  .dialogo-collassabile .dialogo-piu:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

  /* Il passaggio 0fr -> 1fr anima l'altezza senza doverla misurare in JS. */
  .dialogo-collassabile .dialogo-testo {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .45s ease;
  }

  .dialogo-collassabile.is-aperto .dialogo-testo { grid-template-rows: 1fr; }

  .dialogo-collassabile .dialogo-testo-inner { overflow: hidden; }

  /* ---- 3. Loghi: due colonne, come nel frame ----
     Nel frame le colonne stanno a x=1 e x=183, larghe circa 170. La misura la
     porta gia' `--logo-w` sul singolo logo: dentro una cella di griglia il
     `max-width: 100%` la limita alla colonna, e i loghi grandi — fino a 340px
     sul desktop — rientrano senza doverli riscrivere uno per uno. */
  .loghi-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(22px, 6vw, 30px) 12px;
    align-items: center;
  }

  /* Ogni logo ha la sua misura anche qui: `--logo-m`, letta dal frame mobile.
     Limitarli alla colonna non basterebbe — tutti quelli piu' larghi della
     colonna finirebbero appiattiti sulla stessa misura, e nel frame invece
     vanno da 34px (UNDP) a 170px (Entopan). */
  .loghi-row img { width: var(--logo-m, var(--logo-w, 160px)); }

  .loghi-row li { justify-self: start; }

  /* Su telefono i loghi stanno al massimo su due colonne, media partner
     compresi: la fascia usa la griglia come tutte le altre e il capo riga del
     desktop va tolto di mezzo. Il selettore porta due classi perche'
     `.loghi-row li` e' piu' specifico di `.loghi-acapo` da solo: senza, il
     segnaposto resterebbe a video — invisibile ma largo mezza colonna. */
  .loghi-row li.loghi-acapo { display: none; }

  /* **Il `row-gap` dimezzato della fascia media partner qui va disfatto.**
     Serve solo dove c'e' il segnaposto del capo riga, che fa contare lo
     stacco due volte; su telefono il segnaposto e' spento, quindi il
     dimezzamento non compensa piu' niente e lascia solo le righe attaccate —
     si vedeva bene su Key4Biz, l'ultimo arrivato, incollato a LaC Network.
     Il selettore ha due classi perche' quello che dimezza ne ha due: con una
     sola questa regola perderebbe, e i media query non aggiungono
     specificita'. */
  .loghi-band--media .loghi-row { row-gap: clamp(22px, 6vw, 30px); }

  /* La prima riga dei media partner sta piu' stretta delle altre: ANSA e'
     quadrata e alta 59, quindi col suo bordo arriva fin sotto, mentre gli
     altri loghi sono bassi e, centrati nella riga, lasciano aria da soli.
     Cinque pixel sotto ai primi due bastano a staccarla dalla seconda. */
  .loghi-band--media .loghi-row > li:nth-child(-n+2) { padding-bottom: 5px; }
}

/* Nella home la testata ha `padding-bottom: 0` perche' la banda sabbia
   prosegue senza stacco nell'hero. Nelle pagine di servizio sotto non c'e'
   nulla, quindi la banda finirebbe di netto sulla base del logo: qui il
   respiro sotto e' lo stesso che c'e' sopra.
   La classe sta sul `<body>` e non sulla testata di proposito — la testata e'
   copiata da `index.html`, e una classe li' si perderebbe alla prima
   ricopiatura. */
/* La testata delle pagine di servizio. Nella Versione 1 stava anche in
   `index.html` e prendeva i suoi stili di la'; nella Versione 2 la home ha
   `.testata` al suo posto e quelle regole se ne sono andate con lei, cosi'
   il logo restava incollato all'angolo e tagliato in cima. Qui torna
   allineato al resto della pagina: stesso `--maxw` e stesso `--gutter` dei
   contenitori, come dice la convenzione. */
.site-header {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(24px, 3vw, 44px) var(--gutter) 0;
}

.site-header .logo img {
  width: clamp(72px, 7vw, 102px);
  height: auto;
}

.pagina-servizio .site-header { padding-bottom: clamp(20px, 2.8vw, 40px); }

/* ---------- Menu a tutto schermo -------------------------------------------
   Torna dalla Versione 1 (ramo `master`, frame `menu_desktop_open` 503:1381)
   con le voci nuove: Home e Contatti portano a due sezioni della landing,
   Relatori alla pagina delle voci. Il pannello e' #bb4737 di 1363x760 a
   (25,5 / 27,7) dentro il frame 1440x1024, voci IvyEpic in color panna,
   filetti bianchi, chiusura a X in alto a destra. Le misure sono in
   percentuale del riquadro, cosi' il menu segue la finestra invece di una
   griglia fissa.

   Il colore delle voci e' `--btn-text`: la stessa panna del bottone del
   programma, non un colore nuovo.                                          */

html.menu-open,
html.menu-open body { overflow: hidden; }

.menu-toggle {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Il pannello prende **tutta la finestra**, su richiesta: niente piu' il
   riquadro rientrato del frame, che lasciava scoperta la pagina sotto.

   Il movimento e' una tendina: il pannello si scopre dall'alto verso il basso
   entrando e si richiude verso l'alto uscendo. Lo fa `clip-path`, non
   l'altezza: cosi' il contenuto non si deforma mentre il velo scorre, resta
   fermo al suo posto e viene semplicemente svelato.

   **I due versi hanno accelerazioni diverse**, come chiesto: `ease-in` in
   ingresso, `ease-out` in uscita. La regola sta nei due punti giusti — il
   tempo d'ingresso sullo stato aperto, perche' una transizione prende i
   valori dallo stato di arrivo; quello d'uscita sullo stato base, dove si
   torna quando la classe viene tolta. */
.site-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .42s ease-out;        /* uscita */
}

.site-nav.is-aperto {
  clip-path: inset(0 0 0 0);
  transition-timing-function: ease-in;        /* ingresso */
}

.site-nav[hidden] { display: none; }

.site-nav-panel {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  /* stesso allineamento dei contenitori del sito: le voci cadono sulla
     verticale del logo e del testo, anche ora che il rosso arriva ai bordi */
  --nav-pad-x: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  padding-inline: var(--nav-pad-x);
  /* Il padding alto serve due volte — qui e nel margine delle voci — quindi
     sta in una variabile: se cambia in un posto solo le voci si spostano. */
  --nav-pad-t: clamp(18px, 2.4vw, 34px);
  /* Quota della prima voce, misurata sul pannello rosso del disegno: su
     telefono la riga comincia a 121 su 453, sul desktop a 177,5 su 552. */
  --nav-voci-top: 26.7vh;
  padding-block: var(--nav-pad-t) clamp(40px, 7vh, 70px);
  background: var(--red-warm);
  color: var(--btn-text);
}

/* la X: due tratti incrociati, come nel frame */
.site-nav-close {
  position: absolute;
  top: clamp(18px, 6.8vh, 62px);
  right: var(--nav-pad-x);
  width: clamp(44px, 7.4vw, 107px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.site-nav-close::before,
.site-nav-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #fff;
}

.site-nav-close::before { rotate: 45deg; }
.site-nav-close::after  { rotate: -45deg; }

.site-nav-close:focus-visible,
.site-nav-voci a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* Il logotipo in alto a sinistra, che le schermate mostrano dentro al rosso.
   **Sta fuori dal flusso**, come la X: se fosse nel flusso la sua altezza si
   sommerebbe al margine delle voci e le spingerebbe giu', mentre quel margine
   e' misurato dal bordo alto del pannello.

   E' lo stesso logotipo del sito in una versione chiara — `-chiaro.svg`: il
   rettangolo di fondo (sabbia in WORDS e of HOPE, rosso in FORUM) diventa un
   filetto e le lettere passano al colore del testo, cosi' il rosso del
   pannello si vede attraverso.

   **L'impaginato non e' quello della testata**: qui le tre parole stanno su
   **una riga sola** sul desktop e **incolonnate** su telefono, non nella
   griglia 2x3 della home ne' nella 2x2 della pagina dei relatori. Le misure
   vengono dal pannello rosso: 452 su 990 di larghezza sul desktop, 76 su 256
   su telefono. */
.site-nav-logo {
  position: absolute;
  top: var(--nav-pad-t);
  left: var(--nav-pad-x);
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  width: clamp(104px, 29.7vw, 117px);
}

.site-nav-logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* **Le voci non stanno piu' nel terzo inferiore.** Prima erano spinte in
   basso da un `margin-top: auto`, che assorbiva tutto lo spazio sopra: a
   1440x900 la prima riga cadeva a 579, cioe' al 64% dell'altezza, e l'ultimo
   filetto a 63px dal fondo della finestra. Il disegno nuovo le vuole molto
   piu' su.

   La quota e' presa dal pannello rosso, l'unica parte che conta nelle
   schermate: la prima riga comincia al 32,2% dell'altezza sul desktop
   (177,5 su 552) e al 26,7% su telefono (121 su 453). Qui e' percio' una
   percentuale dell'altezza della finestra, non un numero di pixel: il
   pannello **e'** la finestra, e le due schermate non hanno le stesse
   proporzioni di uno schermo vero, quindi la proporzione e' l'unica cosa che
   si puo' portare di la'. (In `vh`, non in `%`: un margine in percentuale si
   misura sulla larghezza del contenitore, non sull'altezza.)

   Lo spazio avanzato va tutto sotto (`margin-bottom: auto`), non sopra. */
.site-nav-voci {
  margin-top: calc(var(--nav-voci-top) - var(--nav-pad-t));
  margin-bottom: auto;
  width: 97.8%;
}

.site-nav-voci a {
  display: block;
  padding-bottom: clamp(4px, .7vw, 10px);
  border-bottom: 1px solid #fff;
  /* Il frame porta IvyEpic Regular 64/86, ma a video risultava pesante: il
     peso scende a 300 e il corpo a circa tre quarti. */
  font-weight: 300;
  font-size: clamp(22px, 3.3vw, 47px);
  line-height: 1.344;           /* 86 / 64 */
  text-transform: uppercase;
  text-decoration: none;
}

.site-nav-voci li + li { margin-top: clamp(8px, 1.25vw, 18px); }

.site-nav-voci a:hover,
.site-nav-voci a:focus-visible { opacity: .72; }

/* Il frame descrive solo il desktop. Su schermo stretto il pannello lascerebbe
   un terzo vuoto in alto e scoprirebbe la pagina in basso: qui copre quasi
   tutto e parte dal bordo della finestra, se no si vede spuntare il logo. */
@media (max-width: 699px) {
  .site-nav-voci { width: 100%; }
}

/* Dal desktop la prima riga scende un po' — 32,2% invece di 26,7% — e il
   logotipo si distende su una riga sola. */
@media (min-width: 900px) {
  .site-nav-panel { --nav-voci-top: 32.2vh; }

  .site-nav-logo {
    grid-template-columns: repeat(3, 1fr);
    width: clamp(420px, 45.7vw, 658px);
  }
}

/* A movimento ridotto la tendina non scorre: il pannello c'e' o non c'e'.
   E la pista dei relatori non gira: `main.js` non la tocca affatto, quindi
   niente cloni, niente comandi e niente trascinamento. Il puntatore torna
   percio' quello di sempre, se no prometterebbe un gesto che non c'e'. */
@media (prefers-reduced-motion: reduce) {
  .site-nav { transition: none; }

  .relatori-pista,
  .relatori-pista .relatori-scheda { cursor: auto; }

  .relatori-pista .relatori-scheda { cursor: pointer; }
}

/* ---------- Mappa del sito (sitemap.html) ---------------------------------
   Pagina di servizio, non un frame Figma: riusa la testata e il footer di
   index.html e la scala tipografica gia' in uso, senza inventare misure.   */

.sitemap { padding-block: clamp(48px, 7vw, 100px) clamp(60px, 9vw, 130px); }

.sitemap h1 {
  font-weight: 500;
  font-size: clamp(32px, 3.85vw, 55px);
  line-height: 1;
  letter-spacing: -.03em;
}

.sitemap h1 em {
  font-style: italic;
  color: var(--red);
}

.sitemap-nota {
  margin-top: clamp(14px, 1.3vw, 18px);
  max-width: 52ch;
  font-weight: 300;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.25;
}

.sitemap-griglia {
  margin-top: clamp(40px, 5vw, 72px);
  display: grid;
  gap: clamp(32px, 4vw, 56px);
}

.sitemap-gruppo h2 {
  padding-bottom: 14px;
  border-bottom: 1px solid currentColor;
  font-weight: 600;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: .825;
}

.sitemap-gruppo ul {
  margin-top: 20px;
  display: grid;
  gap: 14px;
  list-style: none;
  padding: 0;
}

.sitemap-gruppo a {
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.1;
  text-decoration: none;
}

.sitemap-gruppo a:hover { text-decoration: underline; }

.sitemap-tipo {
  margin-left: 8px;
  font-size: 12px;
  letter-spacing: .06em;
  vertical-align: 2px;
}

/* Voci senza destinazione: restano testo, non link morti. Niente colore
   nuovo — la palette e' quella, qui basta smorzarle. */
.sitemap-attesa li {
  opacity: .5;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.1;
}

/* ---------- Relatori (nella landing) --------------------------------------
   Dieci voci del primo dialogo, sotto al box rosso. **Non e' piu' una banda
   rossa**: il disegno nuovo e' su bianco, con testata a due colonne, filetto,
   griglia 5x2 di ritratti e il pulsante in fondo.

   La larghezza e' quella del box del primo dialogo — stesso `--gutter`, stesso
   `max-width: 1196` — cosi' i due blocchi restano incolonnati anche adesso che
   il secondo non ha piu' un fondo suo.

   **Un solo elenco per due impaginati**: su telefono e' una pista che scorre
   da sola, dal desktop una griglia ferma. A cambiare e' solo il CSS, l'HTML e'
   lo stesso.                                                              */

.relatori {
  padding-inline: var(--gutter);
  padding-block: clamp(46px, 6.5vw, 94px) clamp(50px, 7vw, 100px);
}

.relatori-inner {
  width: 100%;
  max-width: 1196px;
  margin-inline: auto;
}

/* Tagli dati dal committente: l'occhiello e il testo Regular, il titolo
   Medium. Tutti e due sono fra quelli che `main.js` pretende dal kit, quindi
   la verifica dei font non cambia. */
.relatori-occhiello {
  font-weight: 400;
  font-size: clamp(12px, 1.1vw, 14px);
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.relatori-titolo {
  margin-top: clamp(4px, .5vw, 7px);
  font-weight: 500;
  font-size: clamp(30px, 3.35vw, 40px);
  line-height: 1.05;
  letter-spacing: -.02em;
}

.relatori-testo {
  margin-top: clamp(16px, 1.5vw, 22px);
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.35;
}

.relatori-pista-wrap {
  margin-top: clamp(26px, 3.2vw, 44px);
}

/* ---- I segni di pagina -----------------------------------------------------
   Dicono che la riga continua oltre il bordo, e permettono di saltare. Li
   costruisce `main.js`, come i segni del carosello delle tappe, cosi' senza JS
   non restano comandi morti.

   **Le frecce ai lati del ritratto non ci sono piu'**: quel compito ce l'ha il
   puntatore, che dice DRAG, ed erano un doppione.

   Dal desktop i segni spariscono: li' basta il puntatore.

   Stessa famiglia dei segni delle tappe, ma piu' piccoli: li' sono tre, qui
   anche dodici, e le pastiglie da 24 non ci starebbero in una riga sola. */
.relatori-punti {
  margin: clamp(14px, 2.6vw, 20px) 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
}

.relatori-punto {
  width: 12px;
  height: 6px;
  padding: 0;
  border: 1px solid var(--ink-soft);
  border-radius: 3px;
  background: none;
  cursor: pointer;
  transition: background-color .25s ease;
}

.relatori-punto.is-corrente { background: var(--ink-soft); }
.relatori-punto:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* I segni di pagina si vedono **a ogni larghezza**, su richiesta: dal desktop
   il puntatore dice che la riga si trascina, ma non dice quanto e' lunga ne' a
   che punto si e'. */

/* Su telefono la pista scorre e i ritratti sbordano fino al bordo dello
   schermo, come il carosello delle tappe. Niente `scroll-snap` ne'
   `scroll-behavior: smooth`: la pista si muove da sola un pixel per volta, e
   tutti e due glielo impedirebbero. */
.relatori-pista {
  display: flex;
  gap: clamp(10px, 1vw, 12px);
  overflow-x: auto;
  scrollbar-width: none;
  margin-right: calc(-1 * var(--gutter));
  padding-right: var(--gutter);
}

.relatori-pista::-webkit-scrollbar { display: none; }

/* Mentre si trascina non si seleziona il testo: senza, il gesto evidenzia
   nomi e ruoli invece di muovere la riga. La classe la mette `main.js`. */
.relatori-pista.is-trascinata,
.relatori-pista.is-trascinata * { user-select: none; }

/* **Il puntatore dice che la riga si trascina.** Sopra alla pista diventa una
   pastiglia rossa 88x38 con la parola DRAG — come quella del sito indicato
   come riferimento, che e' bianca. Le due frecce che c'erano dentro sono state
   tolte: dicevano la stessa cosa della parola.

   **Vale a ogni larghezza, non solo dal desktop.** Su un telefono vero il
   cursore non esiste e la regola non fa nulla; ma una finestra stretta su un
   computer il mouse ce l'ha, e tenendo la regola nel blocco del desktop li'
   tornava la freccia di sistema. Il trascinamento, del resto, funziona a
   qualunque larghezza.

   Due cose sul file:

   - il `, grab` in coda non e' di contorno: e' il ripiego se la pastiglia non
     arriva, o se il browser rifiuta i cursori immagine — alcuni li tengono
     entro 32x32, e questa e' 88x38;
   - la parola e' un `<text>`, non un tracciato. Un SVG disegnato come cursore
     gira in modalita' ristretta: verificato che con una pila di font di
     sistema il testo ci sia davvero. **Ora che le frecce non ci sono piu', se
     il testo non uscisse resterebbe una pastiglia muta**: se un domani si
     cambia font, vale la pena rifare la prova — si disegna il file su una tela
     e si contano i pixel chiari al centro.

   **Va messo anche sulle schede, non basta la pista.** Ogni scheda e' un
   link, e il foglio del browser da' a un link `cursor: pointer`: quella
   regola vince su quella ereditata dalla pista, quindi la pastiglia si vedeva
   solo negli spazi fra una scheda e l'altra — cioe' quasi mai. Anche il sito
   di riferimento la mette sulle singole lastre. */
.relatori-pista {
  --scheda: clamp(150px, 46vw, 200px);
  --cursore: url('../assets/img/cursore-scorri.svg') 44 19, grab;
  --cursore-giu: url('../assets/img/cursore-scorri.svg') 44 19, grabbing;
}

.relatori-pista,
.relatori-pista .relatori-scheda { cursor: var(--cursore); }

.relatori-pista:active,
.relatori-pista .relatori-scheda:active,
.relatori-pista.is-trascinata,
.relatori-pista.is-trascinata .relatori-scheda { cursor: var(--cursore-giu); }

.relatori-pista li {
  flex: 0 0 auto;
  width: var(--scheda);
}

/* Ogni scheda porta alla voce di quella persona nell'elenco completo, gia'
   aperta sulla biografia: il link e' tutta la scheda — ritratto, nome e ruolo
   — perche' su telefono un bersaglio piccolo si manca. */
.relatori-scheda {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Il velo rosso sul ritratto. Non e' una fusione ma un rosso pieno con
   trasparenza: sulle fotografie in bianco e nero schiarisce i neri invece di
   lasciarli tali, ed e' cosi' che lo mostra il disegno. */
.relatori-ritratto {
  position: relative;
  display: block;
  overflow: hidden;
}

.relatori-ritratto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--red);
  opacity: 0;
  transition: opacity .25s ease;
}

.relatori-scheda:hover .relatori-ritratto::after,
.relatori-scheda:active .relatori-ritratto::after,
.relatori-scheda:focus-visible .relatori-ritratto::after { opacity: .62; }

.relatori-scheda:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* `height: auto` non e' di contorno: gli attributi `width`/`height`
   dell'`<img>` arrivano come altezza vera e battono l'`aspect-ratio`, che vale
   solo quando una delle due misure e' automatica. */
.relatori-pista img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.relatori-nome {
  display: block;
  margin-top: clamp(10px, 1.1vw, 14px);
  font-weight: 600;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.2;
  letter-spacing: -.01em;
}

/* Il ruolo e' piu' chiaro del nome. Non e' un colore nuovo: e' lo stesso
   inchiostro smorzato, come le voci in attesa della mappa del sito. */
.relatori-ruolo {
  display: block;
  margin-top: clamp(3px, .4vw, 5px);
  opacity: .62;
  font-weight: 400;
  font-size: clamp(14px, 1.25vw, 15px);
  line-height: 1.25;
}

.relatori-cta {
  margin-top: clamp(30px, 3.6vw, 50px);
}

/* Il pulsante e' il contrario di quello del programma: fondo bianco e filetto,
   non rosso pieno. */
.relatori-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(200px, 19vw, 260px);
  height: clamp(42px, 3.4vw, 50px);
  padding-inline: clamp(20px, 1.8vw, 26px);
  border: 1px solid currentColor;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: clamp(13px, 1.11vw, 16px);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}

.relatori-cta a:hover {
  background: var(--ink-soft);
  color: #fff;
}

@media (min-width: 900px) {

  /* Testata a due colonne col filetto sotto, come nel disegno desktop. */
  .relatori-testa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 48px);
    align-items: start;
    padding-bottom: clamp(20px, 2.2vw, 30px);
    border-bottom: 1px solid currentColor;
  }

  .relatori-testa .relatori-testo { margin-top: 0; }

  /* **La pista scorre anche qui.** Su richiesta i ritratti girano sempre, a
     ogni larghezza: la griglia ferma 5x2 del disegno non c'e' piu'. Non c'e'
     quindi niente da ridichiarare — la pista resta quella di telefono, flex e
     `overflow-x: auto`, e sborda a destra del margine come li'.

     L'unica cosa che cambia e' la misura della scheda, tenuta a quella delle
     colonne di prima: 230px, cioe' cinque schede dentro ai 1196 del blocco,
     cosi' il ritratto non rimpicciolisce passando da telefono a schermo
     grande. */
  .relatori-pista li { width: clamp(200px, 16vw, 230px); }

  .relatori-cta { text-align: center; }
}

/* ---------- Voci (voci.html) ----------------------------------------------
   L'elenco dei relatori: ogni riga e' un pannello che si apre sulla
   biografia. Chiusa mostra ritratto, nome, ente e una freccia in giu';
   aperta gira la freccia e fa scendere il testo.

   I due disegni cambiano l'impaginato della riga, non il contenuto: su
   telefono nome ed ente stanno incolonnati accanto al ritratto, sul desktop
   l'ente si sposta in una colonna sua a destra. Da qui le `grid-template-
   areas`, che riordinano senza toccare l'HTML.

   La riga e' un `<button>`, non un `<div>` con un listener: cosi' si apre
   anche da tastiera e lo screen reader annuncia lo stato con `aria-expanded`.

   Come per il box del primo dialogo, l'altezza si anima col passaggio
   `grid-template-rows: 0fr -> 1fr`, che evita di doverla misurare in JS.  */

/* Nel disegno il titolo cade a y=455 e la targa finisce a 408: lo stacco e'
   47 su 1440. */
.voci { padding-block: clamp(26px, 2.8vw, 40px) clamp(60px, 9vw, 130px); }

/* Il titolo della pagina e' la targa rossa nella testata; qui c'e'
   l'occhiello, in neretto maiuscoletto come nel disegno. */
.voci-occhiello {
  font-weight: 700;
  font-size: clamp(14px, 1.18vw, 17px);
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.voci-nota {
  margin-top: clamp(14px, 1.53vw, 22px);
  max-width: calc(795 / 1340 * 100%);
  font-weight: 400;
  font-size: clamp(15px, 1.18vw, 17px);
  line-height: 1.35;
}

/* `--voce-foto` sta qui e non su `.voce`: `.voci-lista` la usa per il rientro
   e le variabili scendono, non salgono. Il filetto e' `currentColor` come
   quello delle card e della fascia loghi — nessun colore nuovo. */
.voci-lista {
  --voce-foto: clamp(64px, 19vw, 100px);
  margin-top: clamp(30px, 4vw, 56px);
  border-top: 1px solid currentColor;
}

.voce { border-bottom: 1px solid currentColor; }

.voce-riga {
  width: 100%;
  padding: clamp(14px, 2.4vw, 22px) 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: var(--voce-foto) minmax(0, 1fr) auto;
  grid-template-areas:
    "foto nome    freccia"
    "foto ente    freccia";
  align-items: center;
  column-gap: clamp(14px, 2.4vw, 26px);
}

/* Come per i ritratti della banda: senza `height: auto` l'altezza arriva
   dall'attributo dell'`<img>` e l'`aspect-ratio` non vale piu'. */
.voce-foto {
  grid-area: foto;
  align-self: start;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
}

/* Il disegno stesso mostra come si presenta una voce senza ritratto: un
   riquadro grigio pieno. Non e' un errore di caricamento. */
.voce-foto--vuota { background: var(--grey); }

/* Nome e cognome: IvyEpic Regular il nome, Medium il cognome — non Light e
   Bold come nella prima stesura. L'ente sotto e' Regular come il nome. Tutti
   e tre i tagli sono fra quelli che `main.js` pretende dal kit, quindi la
   verifica non cambia. */
.voce-nome {
  grid-area: nome;
  align-self: end;
  font-weight: 400;
  font-size: clamp(22px, 5.6vw, 30px);
  line-height: 1.1;
  letter-spacing: -.02em;
}

.voce-nome b { font-weight: 500; }

.voce-ente {
  grid-area: ente;
  align-self: start;
  margin-top: .45em;
  font-weight: 400;
  font-size: clamp(13px, 3.6vw, 16px);
  line-height: 1.25;
}

/* Su telefono l'ente va a capo da solo: l'a capo del disegno desktop qui
   spezzerebbe la riga in un punto sbagliato. Lo spazio prima del `<br>` nel
   sorgente serve: spegnendolo sparisce anche l'unico stacco fra le due parole
   — la stessa trappola del titolo in testata. */
.voce-ente br { display: none; }

.voce-freccia {
  grid-area: freccia;
  width: clamp(16px, 4.6vw, 22px);
  display: block;
  transition: rotate .3s ease;
}

.voce-freccia svg {
  width: 100%;
  height: auto;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.voce.is-aperta .voce-freccia { rotate: 180deg; }

.voce-bio {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s ease;
}

.voce.is-aperta .voce-bio { grid-template-rows: 1fr; }

.voce-bio-inner { overflow: hidden; }

.voce-bio p {
  /* incolonnato col nome, non col ritratto: il rientro e' la larghezza della
     fotografia piu' lo stacco della griglia */
  margin-left: calc(var(--voce-foto) + clamp(14px, 2.4vw, 26px));
  padding-bottom: clamp(22px, 3vw, 34px);
  max-width: 56ch;
  font-weight: 400;
  font-size: clamp(14px, 3.7vw, 16px);
  line-height: 1.5;
}

/* ---- la testata della pagina dei relatori ----
   Non e' quella di `sitemap.html`: banda color sabbia col logotipo **su due
   righe** a sinistra — "WORDS of HOPE" sopra, "FORUM" sotto, non la griglia
   2x3 della home — il mappamondo che la riempie a destra, il pulsante del menu
   e la targa rossa "Relatori" appoggiata a cavallo del bordo basso.

   Misure dal disegno, su 1440: banda alta 265, logotipo 442x130 a (48,60),
   mappamondo 740 di diametro centrato a x=915, targa 216x82 da y=213 — che
   sborda quindi di 30 sotto la banda. La targa sta fuori dalla banda, non
   dentro: e' l'elemento successivo con un margine negativo, cosi' lo scavalco
   e' una misura sola e si legge.                                          */

.voci-banda {
  position: relative;
  /* il mappamondo e' piu' grande della banda e va tagliato sopra e sotto */
  overflow: hidden;
  background: var(--sand-soft);
  /* stesso allineamento dei contenitori centrati, senza rinunciare alla banda
     a tutta larghezza */
  padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  padding-block: clamp(26px, 4.17vw, 60px) clamp(30px, 5.2vw, 75px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 40px);
}

/* Il mappamondo dello sfondo. **Non serve piu' nessuna maschera**: i due file
   arrivano gia' tagliati alla calotta superiore della sfera e con la
   trasparenza.

   Sono **WebP**, ed e' una scelta: in PNG pesavano mezzo mega l'uno, e
   appoggiarli sul colore della banda — che li avrebbe portati a 46 e 32 KB —
   li avrebbe legati a quel colore, con la trappola gia' pagata sulle
   fotografie del box del primo dialogo, che se cambia `--red` vanno rifatte.
   In WebP con la trasparenza pesano 76 e 57 KB e non dipendono da niente.

   Sta **appoggiato al fondo della banda**, non centrato: nel disegno la sfera
   si vede dalla cima fino al taglio, ed e' li' che viene tagliata.

   Le misure sono agganciate al blocco centrato, non alla finestra: oltre i
   1440 il globo resta della sua misura e accompagna il blocco invece di
   allargarsi e scappare a destra. `50% - blocco/2` e' il bordo sinistro del
   blocco; il resto sono i numeri del disegno, 600 di larghezza a x=625. */
.voci-banda { --blocco: min(100vw, var(--maxw)); }

.voci-globo {
  position: absolute;
  z-index: 0;
  bottom: 0;
  /* I due numeri non sono piu' quelli del disegno: l'artwork e' cambiato e
     taglia la sfera piu' in alto (la calotta visibile passa da 0,468 a 0,375
     del diametro), e la sfera dentro al file non e' piu' larga uguale — 0,815
     della larghezza invece di 0,893 — ne' centrata allo stesso punto. Le due
     misure sono state ricalcolate **perche' la sfera resti grande come prima
     e col centro nello stesso punto**: 776 di larghezza a x=635, al posto di
     708 a x=652. Senza, veniva il 9% piu' piccola e spostata. */
  left: calc(50% - var(--blocco) / 2 + 635 / 1440 * var(--blocco));
  width: calc(776 / 1440 * var(--blocco));
  margin: 0;
  pointer-events: none;
}

/* **`closest-side` non e' un dettaglio.** Senza, le percentuali di un
   `radial-gradient` si misurano sul raggio predefinito, che e' la distanza
   dall'angolo piu' lontano: su un riquadro quadrato e' la mezza diagonale,
   cioe' il 70,7% del lato. Il 48,6% di quella e' il 34,4% del lato, e la
   maschera tagliava la sfera a poco piu' di due terzi — 515px su 740 invece
   di 719. Con `closest-side` il raggio e' mezzo lato e le due misure tornano
   a essere quelle del fotogramma: opaca fino al 48,6% del lato (97,2% di
   mezzo lato), trasparente al 49,1% (98,2%). La sfera riempie il 98,2% del
   file — misurato, non stimato — quindi ci sta tutta e non resta bianco. */
.voci-globo img {
  width: 100%;
  height: auto;
  display: block;
}

/* Il logotipo su due righe: "WORDS" e "of HOPE" affiancati sopra, "FORUM"
   sotto a sinistra. Le tre immagini sono le stesse della home — 333x95
   ciascuna — ma le `grid-area` qui sono altre, quindi vanno riscritte: quelle
   di `.wordmark-*` valgono per la griglia 2x3 della testata. */
.voci-logo {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  max-width: calc(442 / 1340 * 100%);
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  aspect-ratio: 442 / 130;
}

.voci-logo .wordmark-words   { grid-area: 1 / 1; }
.voci-logo .wordmark-of-hope { grid-area: 1 / 2; }
.voci-logo .wordmark-forum   { grid-area: 2 / 1; }

.voci-logo img { width: 100%; height: auto; display: block; }

/* l'hamburger, la stessa misura della landing */
.voci-banda .menu-toggle {
  position: relative;
  z-index: 1;
  flex: none;
  width: clamp(38px, 3.6vw, 52px);
}

.voci-banda .menu-toggle img { width: 100%; height: auto; display: block; }

.voci-targa-riga {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  /* scavalca il bordo basso della banda: 265 - 213 nel disegno */
  margin-top: calc(-52 / 1440 * min(100vw, var(--maxw)));
}

/* **La targa la fa il testo, non una larghezza fissa.** Prima era larga 216
   col testo allineato a destra: sul desktop tornava per combinazione, ma
   ovunque altrove restava del rosso vuoto a sinistra e sotto, e la parola
   sembrava scentrata. Ora e' padding tutto intorno, e i 216x82 del disegno
   vengono da soli: "Relatori" a corpo 38 misura 150, piu' .87em per lato fa
   216; l'altezza e' 38 piu' .58em per lato, cioe' 82. */
.voci-targa {
  padding: .58em .87em;
  background: var(--red);
  color: var(--btn-text);
  font-weight: 400;
  font-size: clamp(26px, 2.64vw, 38px);
  line-height: 1;
  letter-spacing: -.01em;
  text-align: center;
}

/* Di questa pagina esiste solo il disegno desktop. Su schermo stretto tre
   misure prese di la' non reggono: il logotipo, che a un terzo della colonna
   diventa illeggibile; la larghezza del paragrafo, che a 795 su 1340
   lascerebbe una colonna di duecento pixel; e il mappamondo, che con una
   banda molto piu' bassa resterebbe un filo di sfera. */
@media (max-width: 899px) {

  /* Nella schermata mobile il logotipo occupa il 44,6% della larghezza dello
     schermo, cioe' meta' della colonna: era al 64% e veniva troppo grande. */
  .voci-logo { max-width: 50%; }

  .voci-banda .menu-toggle { width: clamp(38px, 10vw, 46px); }

  /* Su telefono l'altro file, piu' schiacciato. **La larghezza qui non e'
     scritta: e' l'altezza a comandare**, tenuta pari alla banda, e la
     larghezza viene dal rapporto dell'immagine. Il file arriva gia' tagliato
     a quello che si deve vedere, quindi alto come la banda sta esatto; e se la
     banda cambia, il globo la segue da solo. Il bordo sinistro della sfera al
     31,8% della larghezza, come nella schermata. */
  .voci-globo {
    left: 31.8%;
    width: auto;
    height: 100%;
  }

  .voci-globo img { width: auto; height: 100%; }

  /* la banda nella schermata mobile e' alta il 30,7% della larghezza dello
     schermo: qui ci arriva il padding */
  .voci-banda { padding-block: clamp(26px, 8.1vw, 46px) clamp(30px, 9.4vw, 54px); }

  .voci-nota { max-width: none; }
}

@media (min-width: 900px) {

  /* Sul desktop l'ente lascia la colonna del nome e si mette in una sua, a
     destra; il ritratto torna quadrato e la riga si allinea sull'asse. */
  .voci-lista {
    --voce-foto: clamp(80px, 7.6vw, 110px);
  }

  .voce-riga {
    padding: clamp(22px, 2.4vw, 34px) 0;
    grid-template-columns: var(--voce-foto) minmax(0, 1fr) minmax(0, 34%) auto;
    grid-template-areas: "foto nome ente freccia";
    column-gap: clamp(20px, 2.6vw, 36px);
  }

  .voce-foto {
    align-self: center;
    aspect-ratio: 1;
  }

  .voce-nome {
    align-self: center;
    font-size: clamp(26px, 2.7vw, 38px);
  }

  .voce-ente {
    align-self: center;
    margin-top: 0;
    font-size: clamp(14px, 1.15vw, 16px);
  }

  .voce-ente br { display: inline; }

  .voce-freccia { width: clamp(18px, 1.6vw, 22px); }

  .voce-bio p {
    margin-left: calc(var(--voce-foto) + clamp(20px, 2.6vw, 36px));
  }
}

/* ===========================================================================
   Breakpoint — i media query aggiungono, non sottraggono
   =========================================================================== */

/* ---- 700px: card a tre colonne, footer a due ---- */
@media (min-width: 700px) {

  .cards { grid-template-columns: repeat(3, 1fr); }

  .sitemap-griglia { grid-template-columns: repeat(3, 1fr); }

  .footer-inner { grid-template-columns: repeat(2, 1fr); }
}

/* ---- 900px: layout desktop ---- */
@media (min-width: 900px) {

  /* Promosso da / Co-promosso da: nel frame desktop stanno sulla stessa riga
     sotto a un filetto solo. Qui sono due fasce affiancate — il filetto ce
     l'ha ognuna, ma le due etichette sono alte uguali, quindi i due tratti
     cadono alla stessa quota e senza stacco fra le colonne si leggono come
     una riga sola. Colonne allineate al frame: x=50, 798 e 1140. */
  /* Due fasce affiancate. Nel frame **ognuna tiene il suo filetto** e fra le
     due colonne resta un vuoto: da qui le tre colonne, quella di mezzo e' lo
     stacco. Le misure sono quelle del frame, riferite ai 1340 della colonna. */
  .loghi-duo {
    display: grid;
    align-items: start;
  }

  .loghi-duo > .loghi-band + .loghi-band {
    margin-top: 0;
    grid-column: 3;
  }

  .loghi-duo .loghi-row > li { justify-content: flex-start; }

  /* Co-promosso da / Con il gratuito patrocinio di: filetti 0..496 e 618..1340 */
  .loghi-duo--patrocinio {
    grid-template-columns: minmax(0, 496fr) minmax(0, 122fr) minmax(0, 722fr);
  }

  /* Partner "Words of Hope Forum" / Con la partecipazione istituzionale di:
     filetti 0..778 e 901..1340 */
  .loghi-duo--partner {
    grid-template-columns: minmax(0, 778fr) minmax(0, 123fr) minmax(0, 439fr);
  }

  /* I quattro loghi devono stare nei 778 del filetto: 152 + 138 + 105 + 194
     fanno 589, quindi tre stacchi da 63 al massimo. Qui 59, per non stare al
     pelo: con quello di serie (63,4) il quarto andava a capo. */
  .loghi-duo--partner > .loghi-band:first-child .loghi-row {
    --stacco: clamp(24px, 4.1vw, 59px);
  }


  /* La fotografia sta in posizione assoluta sul fianco destro, quindi il testo
     deve fermarsi prima da solo. Le misure sono **percentuali del box**, non
     pixel: sotto i 1196 del frame — un iPad orizzontale, per dire — il box si
     stringe, e con misure fisse il testo finiva sotto all'immagine.
     Attenzione: non si puo' fare col padding del box, perche' un padding in
     percentuale si misura sul contenitore e non su se stesso, e cresceva con
     la finestra. Per questo il testo ha un contenitore suo e il box, qui,
     rinuncia al padding orizzontale. Nel frame: testo da 69 a 771, foto da
     778 — su 1196 fanno 5,77%, 58,7% e 65,05%. */
  .dialogo-box { padding-inline: 0; }

  .dialogo-testo-col {
    margin-left: 5.77%;
    width: 58.7%;
  }

  /* Nel frame la testata ha "Location" a x=429, cioe' 360 dopo il bordo del
     testo, su una colonna utile di 702: non e' allineata a destra. */
  .dialogo-head {
    display: grid;
    grid-template-columns: minmax(0, 360fr) minmax(0, 342fr);
    align-items: start;
  }

  .dialogo-dove { margin-top: 0; }

  /* La fotografia esce dal flusso e si prende il fianco destro del box, dal
     bordo alto a quello basso: 418 su 1196 nel frame. */
  .dialogo-foto {
    position: absolute;
    inset: 0 0 0 auto;
    width: 34.95%;
    margin: 0;
  }

  .dialogo-foto img {
    height: 100%;
    object-fit: cover;
  }

  /* il filetto nel frame e' 638 su una colonna utile di 702 */
  .dialogo-rule { max-width: 90.9%; }

  /* colonne alle ascisse del frame: logo a 50, poi 500, 838, 1175 */
  .footer-inner,
  .footer-bottom {
    display: grid;
    /* cinque colonne da quando c'e' anche Contatti: la sua e' piu' larga
       perche' deve contenere l'indirizzo per intero senza andare a capo */
    grid-template-columns: 340fr 250fr 220fr 220fr 310fr;
    gap: 0;
  }

  /* nel frame la riga legale parte dalla colonna "Link utili" (x=838) */
  .footer-legal { grid-column: 3 / -1; }
}

/* ---------- Contatti (contatti.html) --------------------------------------
   Traduzione dei due frame indicati dal committente: `1292:1094` per il
   desktop, `1304:1132` per il telefono. La testata e il footer sono quelli
   della pagina dei relatori, quindi qui c'e' solo il corpo.

   Il rosso del disegno e' `#bb4737`, che e' `--red-warm`; il nero dei testi
   `#1d1d1b`, che e' `--ink-soft`; il fondo della fascia delle sedi `#f2f1df`,
   che e' `--btn-text`. Il bruno dei testi secondari e' nuovo.

   Mobile-first come il resto del foglio: i valori di base sono quelli del
   frame a 393, il blocco a 900 porta quelli del frame a 1440. */
.contatti { --bruno: #48322d; }

.ct-occhiello {
  margin: 0;
  color: var(--red-warm);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.ct-titolo-sez {
  margin: 14px 0 0;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.23;
  letter-spacing: -.03em;
}

.ct-titolo-sez em { font-style: normal; color: var(--red-warm); }

/* ---- L'apertura ---- */
.ct-apertura { padding-block: 40px; }

.ct-apertura-titolo {
  margin: 16px 0 0;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -.03em;
}

/* ---- I due recapiti ----
   Su telefono l'indirizzo scende sotto l'etichetta; dal desktop torna di
   fianco, in una colonna da 420 come nel frame. Il filetto sopra e sotto e'
   un bordo, non un elemento: nel frame sono rettangoli alti un pixel. */
.ct-recapiti { padding-bottom: 56px; }

.ct-recapito {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding-block: 20px;
  border-top: 1px solid var(--ink-soft);
  color: inherit;
  text-decoration: none;
}

.ct-recapiti .ct-recapito:last-child { border-bottom: 1px solid var(--ink-soft); }

.ct-recapito-et {
  grid-column: 1 / -1;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.ct-recapito-mail {
  color: var(--red-warm);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
}

.ct-recapito-freccia {
  align-self: center;
  font-weight: 300;
  font-size: 22px;
  line-height: 1;
  transition: translate .25s ease;
}

.ct-recapito:hover .ct-recapito-freccia,
.ct-recapito:focus-visible .ct-recapito-freccia { translate: 6px 0; }

.ct-recapito:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

/* ---- Le sedi ---- */
.ct-sedi {
  padding-block: 44px 52px;
  background: var(--btn-text);
}

.ct-sedi-lista {
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 24px;
  list-style: none;
}

.ct-sede-link {
  display: grid;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

/* La fotografia porta il velo scuro del disegno: non una fusione, un piano
   pieno al 18% che smorza il contrasto senza cambiare i colori. */
.ct-sede-foto {
  position: relative;
  display: block;
  margin-bottom: 8px;
  overflow: hidden;
}

.ct-sede-foto img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.ct-sede-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(57, 43, 40, .18);
}

.ct-sede-quando {
  color: var(--red-warm);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.ct-sede-nome {
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.ct-sede-dove { color: var(--bruno); font-size: 14px; line-height: 1.3; }

.ct-sede-nota {
  color: var(--ink-soft);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -.02em;
}

.ct-sede-cta {
  margin-top: 8px;
  color: var(--red-warm);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.ct-sede-link:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

/* ---- Il modulo ----
   I campi non hanno riquadro: solo l'etichetta sopra e un filetto sotto,
   come nel frame. Il segnaposto e' il testo grigio del disegno. */
.ct-modulo { padding-block: 52px; }
.ct-form { margin-top: 28px; display: grid; gap: 28px; }
.ct-form-riga { display: grid; gap: 28px; }

.ct-campo { margin: 0; display: grid; gap: 10px; }

.ct-campo label {
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.ct-campo input,
.ct-campo select,
.ct-campo textarea {
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid var(--ink-soft);
  border-radius: 0;
  background: none;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.35;
}

.ct-campo textarea { resize: vertical; min-height: 92px; }

.ct-campo input::placeholder,
.ct-campo textarea::placeholder { color: var(--bruno); opacity: 1; }

/* La freccina del menu a tendina: quella di sistema non si puo' vestire, e
   nel disegno e' un triangolino rosso allineato a destra del filetto. */
.ct-campo select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: right 6px top 10px, right 1px top 10px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.ct-campo input:focus-visible,
.ct-campo select:focus-visible,
.ct-campo textarea:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* Il campo trappola sta fuori dallo schermo, non `display: none`: alcuni
   programmi saltano quello che e' nascosto cosi', e la trappola non
   scatterebbe. */
.ct-trappola {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ct-form-piede { display: grid; gap: 24px; }

.ct-privacy {
  margin: 0;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
}

.ct-privacy input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--red-warm);
}

.ct-privacy label { color: var(--bruno); font-size: 14px; line-height: 1.3; }

.ct-invia {
  justify-self: start;
  padding: 11px 24px;
  border: 0;
  background: var(--red-warm);
  color: var(--btn-text);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}

.ct-invia:focus-visible { outline: 2px solid var(--ink-soft); outline-offset: 3px; }

.ct-form-esito {
  margin: 0;
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 14px;
}

/* Quando qualcosa non e' andato il messaggio passa al rosso: e' l'unico
   segnale, perche' il modulo non ha altri modi di dire che non ce l'ha
   fatta. */
.ct-form-esito.is-male { color: var(--red-warm); }

/* ---- Le domande frequenti ----
   Stessa meccanica dell'elenco dei relatori: l'altezza si anima col passaggio
   `grid-template-rows: 0fr -> 1fr`, che evita di doverla misurare in JS.
   Senza JS le risposte restano chiuse, ed e' il prezzo dell'animazione. */
.ct-faq { padding-bottom: 56px; }
.ct-faq-lista { margin: 24px 0 0; padding: 0; list-style: none; }
.ct-faq-voce { border-top: 1px solid var(--ink-soft); }
.ct-faq-lista .ct-faq-voce:last-child { border-bottom: 1px solid var(--ink-soft); }

.ct-faq-dom {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -.02em;
  text-align: left;
  cursor: pointer;
}

.ct-faq-segno {
  flex: 0 0 auto;
  color: var(--red-warm);
  font-weight: 300;
  font-size: 24px;
  line-height: 1;
}

.ct-faq-segno::before { content: '+'; }
.ct-faq-dom[aria-expanded="true"] .ct-faq-segno::before { content: '\2212'; }

.ct-faq-risp {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s ease;
}

.ct-faq-voce.is-aperta .ct-faq-risp { grid-template-rows: 1fr; }
.ct-faq-risp-inner { overflow: hidden; }

.ct-faq-risp p {
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.37;
  letter-spacing: -.02em;
}

.ct-faq-link a {
  color: var(--red-warm);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
}

.ct-faq-dom:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }

/* ---- Il dialogo continua ---- */
.ct-prossimi { padding-bottom: 56px; }
.ct-prossimi-nota {
  margin: 14px 0 0;
  color: var(--ink-soft);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.37;
  letter-spacing: -.02em;
}

.ct-prossimi-cta { margin: 14px 0 0; }

.ct-prossimi-cta a {
  color: var(--red-warm);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
}

/* Le due card sono quelle della home: stesso markup, e l'aspetto gliel'
   da' `.card`, che non dipende dal contenitore. Il contenitore pero' **non
   porta la classe `cards`**, che `main.js` cerca per costruire il carosello
   delle tappe: con quella comparivano i pallini di una pista che qui non
   c'e'. Qui si imposta solo come stanno in riga. */
.ct-prossimi-card {
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 20px;
  list-style: none;
}

/* ---------- Contatti: il layout da schermo grande ------------------------ */
@media (min-width: 900px) {
  .ct-occhiello { font-size: 16px; }
  .ct-titolo-sez { margin-top: 14px; font-size: 40px; line-height: 1.2; }

  .ct-apertura { padding-block: 110px 90px; }
  .ct-apertura-titolo { font-size: 52px; line-height: 1.115; }

  /* Nel frame l'etichetta sta in una colonna da 420 e l'indirizzo comincia
     li', con la freccia a filo del margine destro.

     **Sotto all'ultimo filetto ci vuole aria.** Nel frame la fascia dei
     recapiti e' alta 319 e l'ultimo filetto cade a 208: restano 111 unita' di
     bianco, piu' le 21 che separano la fascia da quella delle sedi. Senza,
     il fondo sabbia comincia attaccato al filetto. */
  .ct-recapiti { padding-bottom: 130px; }

  .ct-recapito {
    grid-template-columns: 420px 1fr auto;
    gap: 0;
    align-items: center;
    padding-block: 34px;
  }

  .ct-recapito-et { grid-column: auto; font-size: 20px; }
  .ct-recapito-mail { font-size: 28.7px; line-height: 1.15; }
  .ct-recapito-freccia { font-size: 40px; }

  .ct-sedi { padding-block: 100px 110px; }
  .ct-sedi-lista { margin-top: 56px; grid-template-columns: 1fr 1fr; gap: 20px; }
  .ct-sede-foto img { height: 380px; }
  .ct-sede-quando { font-size: 16px; }
  .ct-sede-nome { font-size: 22px; }
  .ct-sede-dove { font-size: 16px; }
  .ct-sede-nota { font-size: 18px; }
  .ct-sede-cta { font-size: 14px; }

  /* Titolo a sinistra e campi a destra, 420 e 840 nel frame. */
  .ct-modulo {
    padding-block: 110px;
    display: grid;
    grid-template-columns: 420px minmax(0, 840px);
    justify-content: space-between;
    align-items: start;
    gap: 40px;
  }

  .ct-form { margin-top: 0; gap: 40px; }
  .ct-form-riga { grid-template-columns: 1fr 1fr; gap: 40px; }
  .ct-campo label { font-size: 14px; }
  .ct-campo input, .ct-campo select, .ct-campo textarea { font-size: 18px; }
  .ct-campo textarea { min-height: 120px; }

  .ct-form-piede {
    grid-template-columns: 520px auto;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  .ct-invia { justify-self: end; font-size: 16px; }

  /* Anche qui titolo a sinistra e domande a destra. */
  .ct-faq {
    padding-bottom: 110px;
    display: grid;
    grid-template-columns: 420px minmax(0, 840px);
    justify-content: space-between;
    align-items: start;
    gap: 40px;
  }

  .ct-faq-lista { margin-top: 0; }
  .ct-faq-dom { padding: 22px 0; font-size: 20px; }
  .ct-faq-segno { font-size: 28px; }
  .ct-faq-risp p { font-size: 18px; line-height: 1.22; max-width: 760px; }
  .ct-faq-link a { font-size: 14px; }

  .ct-prossimi {
    padding-bottom: 110px;
    display: grid;
    grid-template-columns: 420px auto;
    justify-content: space-between;
    align-items: start;
    gap: 40px;
  }

  .ct-prossimi-nota { font-size: 18px; line-height: 1.22; }
  .ct-prossimi-cta a { font-size: 14px; }
  .ct-prossimi-card { margin-top: 0; grid-template-columns: repeat(2, 430px); }
}

/* ---------- Il visualizzatore dei documenti (programma, rassegna) ---------
   Le pagine del PDF sono disegnate su `<canvas>` da `js/visualizzatore.js`:
   qui c'e' solo il contorno. Niente barra del lettore, perche' non c'e'
   nessun lettore — c'e' una pagina del sito che disegna.
   Vedi "I due PDF" in CLAUDE.md per cosa questo ottiene e cosa no. */

.doc-corpo { background: #efefe8; min-height: 100vh; display: flex; flex-direction: column; }

/* La barra resta attaccata in cima mentre si scorre: con 108 pagine, tornare
   su per sapere a che punto si e' sarebbe una penitenza. */
.doc-barra {
  position: sticky; top: 0; z-index: 10;
  background: var(--sand);
  padding: 12px var(--gutter);
  display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(29,29,27,.14);
}
.doc-logo { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.doc-logo img { display: block; height: 22px; width: auto; }
.doc-titolo {
  font-family: var(--font-sans); font-weight: 500; font-size: 15px;
  color: var(--ink-soft); margin: 0; flex: 1 1 auto; line-height: 1.2;
}
.doc-contatore {
  font-family: var(--font-sans); font-size: 14px; color: var(--ink-soft);
  opacity: .7; flex: 0 0 auto; font-variant-numeric: tabular-nums;
}
.doc-chiudi {
  font-family: var(--font-sans); font-size: 14px; color: var(--red);
  text-decoration: none; border-bottom: 1px solid currentColor;
  flex: 0 0 auto; line-height: 1.2;
}
.doc-chiudi:hover, .doc-chiudi:focus-visible { opacity: .75; }

.doc-pagine {
  flex: 1 1 auto;
  width: 100%; max-width: 1000px; margin-inline: auto;
  padding: 20px var(--gutter) 60px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}

/* Il riquadro ha gia' le proporzioni della pagina prima che il disegno arrivi:
   cosi' la barra di scorrimento nasce della lunghezza giusta e non si allunga
   sotto le dita mentre si legge. */
.doc-pagina {
  width: 100%; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.14);
  position: relative; overflow: hidden;
}
.doc-pagina canvas { display: block; width: 100%; height: auto; }
.doc-pagina:not(.is-pronta)::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, #fff 30%, #f4f4ef 50%, #fff 70%);
  background-size: 300% 100%;
  animation: doc-attesa 1.4s ease-in-out infinite;
}
@keyframes doc-attesa { from { background-position: 100% 0 } to { background-position: 0 0 } }
@media (prefers-reduced-motion: reduce) {
  .doc-pagina:not(.is-pronta)::after { animation: none; }
}

.doc-stato {
  font-family: var(--font-sans); font-size: 15px; color: var(--ink-soft);
  text-align: center; padding: 60px var(--gutter);
}
.doc-stato--errore { color: var(--red); }
.doc-stato a { color: inherit; }

/* Il testo non si seleziona: sulla tela non c'e' testo da selezionare, ma il
   trascinamento accidentale evidenzierebbe mezza pagina. */
.doc-pagine { user-select: none; -webkit-user-select: none; }

@media (max-width: 599px) {
  /* Su schermo stretto le quattro cose non stanno in riga, e lasciarle andare
     a capo da sole dava un risultato sgangherato: "Chiudi" finiva prima del
     titolo. Qui la barra diventa una griglia di due righe per due colonne, e
     ognuno sa dove sta: marchio e numero di pagina sopra, titolo e "Chiudi"
     sotto. Con `flex-wrap` non si ottiene lo stesso senza forzare un'
     interruzione finta. */
  .doc-barra {
    display: grid; grid-template-columns: 1fr auto;
    gap: 5px 14px; padding: 10px var(--gutter);
  }
  .doc-logo      { grid-area: 1 / 1; }
  .doc-contatore { grid-area: 1 / 2; justify-self: end; }
  .doc-titolo    { grid-area: 2 / 1; font-size: 13px; }
  .doc-chiudi    { grid-area: 2 / 2; justify-self: end; }
  .doc-logo img  { height: 18px; }
  .doc-pagine    { padding-top: 14px; gap: 12px; }
}

/* ---------- Testata: le due misure di schermo grande --------------------- */

/* Sui portatili la composizione risultava ingombrante: scende di un decimo, e
   il mappamondo un po' di piu'. */
@media (min-width: 1280px) and (max-width: 1699px) {
  .testata-inner  { --u: calc(min(100vw, var(--maxw)) / 1440 * .9); }
  .testata-globe  { --globo: .86; }
}

/* Fra 1700 e 1919 il mappamondo veniva a piena misura e risultava ingombrante:
   scende un po' e si sposta leggermente a destra. */
@media (min-width: 1700px) and (max-width: 1919px) {
  .testata-globe {
    --globo: .85;
    right: calc(-215 * var(--u));
  }
}

/* Da 1920 in su la composizione smette di crescere e il blocco da 1440 resta
   centrato: il mappamondo finirebbe lontano dal bordo, con una fascia bianca a
   destra. Qui si rimpicciolisce ancora e si aggancia al bordo della finestra
   invece che a quello del blocco. */
@media (min-width: 1920px) {
  .testata-globe {
    --globo: .88;
    right: calc((var(--maxw) - 100vw) / 2 + 40px);
  }
}

/* ---------- Testata: la versione da telefono -------------------------------
   Frame mobile `384:891`, largo 393. E' una composizione diversa da quella
   desktop, non la stessa rimpicciolita: i marchi sono piu' piccoli, il
   logotipo occupa quasi tutta la larghezza e **il mappamondo gli sta dietro**
   invece che di fianco.

   Stessa tecnica del desktop: una sola scala `--u`, qui 1/393 della larghezza.
   Oltre i 520px smette di crescere e la composizione resta centrata, se no su
   un tablet verrebbe enorme.                                              */

@media (max-width: 899px) {

  .testata-inner {
    --u: calc(min(100vw, 520px) / 393);
    width: calc(393 * var(--u));
    max-width: none;
    /* Nel frame la banda finisce a 710, cioe' 130px sotto al bottone. E'
       sembrato troppo vuoto: qui lo stacco e' dimezzato a 65, su richiesta.
       E' una differenza voluta rispetto al frame. */
    height: calc(662 * var(--u));
  }

  /* Il pulsante del menu: in alto a destra, sopra al mappamondo. Qui non c'e'
     una misura di frame — la composizione mobile non lo prevedeva — quindi
     sta al margine (20) e poco sotto la quota dei marchi. */
  .testata-menu {
    right: calc(20 * var(--u));
    top: calc(14 * var(--u));
    width: calc(40 * var(--u));
  }

  /* marchi 40x40 a (91,10) e (38,110-60): il riquadro li contiene entrambi */
  .marchi {
    left: calc(38 * var(--u));
    top: calc(10 * var(--u));
    width: calc(93 * var(--u));
  }

  /* Mappamondo e logotipo sono **un gruppo solo**, e su richiesta qui stanno
     al 90% del frame mobile per lasciare piu' aria al titolo: globo da 278 a
     250, logotipo da 352x151 a 317x136. La riduzione e' presa dall'angolo in
     alto a sinistra del gruppo — x=20, cioe' il margine, e y=52, cioe' il
     bordo alto del globo — cosi' i due restano concentrici come nel frame
     (centro del logotipo 177, centro del globo 177). Ridurne uno solo li
     scentrerebbe.

     **Il gruppo e' poi centrato in larghezza**, su richiesta e solo qui: nel
     frame il logotipo e' a filo di margine (x=20) e dopo la riduzione lasciava
     tutto il vuoto a destra. Centrarlo vuol dire spostare tutti e due della
     stessa quantita' — logotipo a 38, globo a 71,5 — cosi' i due centri
     restano appaiati sulla meta' dello schermo, 196,5 su 393. Il testo sotto
     resta invece allineato a sinistra al margine, come nel frame. */
  .testata-globe {
    left: calc(71.5 * var(--u));
    right: auto;
    top: calc(52 * var(--u));
    translate: none;
    width: calc(250 * var(--u));
  }

  .wordmark {
    left: calc(38 * var(--u));
    top: calc(109 * var(--u));
    width: calc(317 * var(--u));
    height: calc(136 * var(--u));
  }

  /* il titolo esteso: qui va su tre righe invece che due, e il payoff sotto.
     Nella schermata mobile il blocco parte a (20,328). */
  .testata-claim {
    left: calc(20 * var(--u));
    top: calc(324 * var(--u));
    width: calc(353 * var(--u));
  }

  /* Nella schermata mobile il titolo e' 17 su 22: la larghezza delle tre
     righe lo dice al pixel. A video pero' veniva minuto — e' il nome del
     forum, la seconda voce della testata dopo la data — quindi **su richiesta
     e' portato a 24**, in due giri, col passo stretto a 1,15 perche' un corpo
     piu' grande ne vuole meno. Il payoff sale con lui, da 12 a 14. A 24 le tre
     righe misurano 250, 214 e 262: la colonna e' 353, quindi c'e' ancora
     margine prima che vadano a capo da sole. */
  .testata-titolo {
    font-size: calc(24 * var(--u));
    line-height: 1.15;
  }

  .testata-titolo br { display: inline; }

  .testata-payoff {
    margin-top: calc(12 * var(--u));
    font-size: calc(14 * var(--u));
  }

  .testata-quando {
    left: calc(20 * var(--u));
    top: calc(450 * var(--u));
    width: calc(353 * var(--u));
  }

  /* tagli letti dal frame mobile: qui "23-25" e il mese hanno lo stesso corpo,
     mentre sul desktop sono 45 e 40 */
  .intro-label { font-size: calc(12 * var(--u)); }
  .intro-dates { margin-top: calc(6 * var(--u)); gap: calc(8 * var(--u)); }
  .intro-day,
  .intro-month { font-size: calc(27 * var(--u)); }

  .testata-luogo {
    margin-top: calc(13 * var(--u));
    font-size: calc(15 * var(--u));
  }

  .testata-luogo span { font-size: calc(12 * var(--u)); }

  .testata-quando .btn {
    margin-top: calc(25 * var(--u));
    min-width: calc(176 * var(--u));
    height: calc(32 * var(--u));
    font-size: max(10px, calc(12 * var(--u)));
  }

  /* ---- Il box del programma, misure del frame mobile ----
     Nel frame (`box_primodialogo`, 353x857) il blocco e' piu' arioso di come
     veniva coi valori del desktop rimpiccioliti: "Location" a 105, il filetto
     a 199, il titolo a 234, "Continua a leggere" a 326 e la fotografia a 372,
     alta 484 e a filo dei tre bordi del box.                                 */
  .dialogo-box { --pad-x: 20px; --pad-t: 33px; --pad-b: 0px; }

  /* Nel frame la fotografia e' a filo dei tre bordi del box — 353x484 su un
     box largo 353 — e sta 19px sotto a "Continua a leggere". */
  .dialogo-foto { margin-top: 19px; }

  /* nel frame data, etichetta e luogo stanno incolonnati a sinistra: il
     `text-align: right` del desktop qui faceva sembrare "CATANZARO (ITALIA)"
     centrato sotto al luogo */
  .dialogo-head {
    display: block;
  }

  .dialogo-date  { font-size: 20px; line-height: 1.2; }
  .dialogo-label { font-size: 16px; line-height: 1.375; }

  /* nel frame: "Location" a y105, cioe' 26px sotto all'etichetta */
  .dialogo-dove { margin-top: 26px; }
  .dialogo-dove-titolo { font-size: 20px; line-height: 1.2; }
  .dialogo-dove a { font-size: 16px; line-height: 1.375; }

  .dialogo-rule  { margin-top: 26px; }

  /* `.dialogo-body` porta un margine sopra e un `gap` che si sommavano ai
     valori del frame. Qui li azzera: lo stacco lo fanno le misure sotto. */
  .dialogo-body {
    margin-top: 0;
    gap: 0;
  }

  .dialogo-title {
    margin-top: 35px;
    font-size: 26px;
    line-height: 1.05;
  }

  .dialogo-collassabile .dialogo-piu { margin-top: 20px; }

  /* L'etichetta della fascia e' lunga: su schermo stretto il luogo va a capo
     tutto intero, invece di lasciare "Crichi" da solo sulla seconda riga.
     Sul desktop resta su una riga sola, come nel frame. */
  .loghi-luogo { display: block; }



}