/* =============================================================================
   ITALIAN STORIES — Foglio di stile principale
   Un podcast di Italia Refinement

   INDICE
   1.  Font auto-ospitati (@font-face)
   2.  Design token (:root)
   3.  Reset
   4.  Base e tipografia
   5.  Utility di layout
   6.  Componenti
   7.  Header
   8.  Hero
   9.  About
   10. Our Values — i due pilastri
   11. Numbers
   12. Episodes
   12b. Our Guests — il carosello
   13. Voices
   14. Listen
   15. Marquee
   16. Italia Refinement (raccordo)
   17. Footer
   17b. Torna su
   18. Pagine di testo (policy)
   19. Media query
   19b. Arrivo su una sezione dall'indirizzo
   19c. Intro di caricamento — "Il taglio"
   20. prefers-reduced-motion
============================================================================= */


/* =============================================================================
   1. FONT AUTO-OSPITATI
   I font sono di Google Fonts (open source, uso commerciale libero come da
   brand book Italia Refinement §4), ma li serviamo dal nostro dominio invece
   che dal CDN di Google: piu' veloce, funziona offline e non invia l'IP
   dell'utente a server terzi (GDPR).
============================================================================= */

@font-face {
  font-family: "Bellefair";
  src: url("../fonts/bellefair-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pinyon Script";
  src: url("../fonts/pinyon-script-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Instrument Sans e' un "variable font": un solo file copre tutti i pesi
   da 400 a 700, per questo il font-weight indica un intervallo. */
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}


/* =============================================================================
   2. DESIGN TOKEN
   Unico punto di verita' del progetto: qui si cambia un valore e cambia
   ovunque. I nomi dei colori sono quelli ufficiali del brand book, cosi'
   il codice e il brand book parlano la stessa lingua.
============================================================================= */

:root {

  /* --- Palette ufficiale — brand book Italia Refinement §3.1, pag. 13 ------ */
  --vino:       #460504;   /* superficie primaria di Italian Stories        */
  --pomodoro:   #CC1702;   /* accento di Italian Stories                    */
  --avorio:     #F9F0E1;   /* testo su fondo scuro / superficie chiara      */
  --bottiglia:  #025040;   /* SOLO nel blocco di raccordo Italia Refinement */
  --inchiostro: #141414;   /* testo su fondo chiaro                         */

  /* Varianti derivate, usate per bordi e stati hover */
  --vino-chiaro:     #5C0F0D;
  --pomodoro-scuro:  #A81201;
  --avorio-ombra:    rgba(249, 240, 225, 0.14);
  --avorio-tenue:    rgba(249, 240, 225, 0.62);

  /* --- REGOLA DI CONTRASTO (verificata WCAG 2.1) ---------------------------
     avorio pieno su vino       14.47:1  OK
     avorio pieno su pomodoro    5.03:1  OK
     avorio pieno su bottiglia   8.35:1  OK
     pomodoro su avorio          5.03:1  OK
     pomodoro su vino            2.87:1  NON CONFORME
     vino su pomodoro            2.87:1  NON CONFORME
     inchiostro su pomodoro      3.24:1  NON CONFORME

     Due conseguenze operative.

     1. Il Pomodoro non va MAI usato come testo o bordo significativo sul
        fondo Vino. Sul Vino il Pomodoro si usa solo come RIEMPIMENTO, con
        il testo in Avorio sopra.

     2. Sul fondo Pomodoro passa SOLO l'Avorio pieno. Le versioni smorzate
        che usiamo altrove per la gerarchia non reggono:
           avorio 0.85 -> 3.93:1     avorio 0.75 -> 3.31:1
           avorio 0.62 -> 2.62:1     (--avorio-tenue)
        Nella sezione Our Values la gerarchia si costruisce quindi con
        corpo, peso e spaziatura delle lettere, mai con la trasparenza.
  ------------------------------------------------------------------------- */

  /* --- Tipografia — brand book §4 ----------------------------------------- */
  --font-heading: "Bellefair", "Times New Roman", Georgia, serif;
  --font-accent:  "Pinyon Script", "Snell Roundhand", cursive;
  --font-body:    "Instrument Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Scala tipografica. clamp() = minimo, valore fluido, massimo:
     il testo scala con la finestra senza bisogno di breakpoint intermedi. */
  /* Il valore centrale (8vw) non e' estetico, e' vincolante.
     "FROM MADE IN ITALY" e' la prima riga, ed e' forzata dal <br>: deve
     stare su una riga sola a QUALSIASI larghezza, altrimenti il titolo si
     spezza in tre righe sbilenche e la frase perde il suo perno.
     Misurata sul carattere reale, quella stringa e' larga 10.08 em, cioe'
     l'80.6% della finestra quando il corpo e' 8vw. Lo spazio disponibile,
     tolti i 24 px di margine per lato, e' l'85% a 320 px e sale da li'.
     Il titolo quindi entra sempre, con un margine che non si assottiglia
     mai al restringersi dello schermo. */
  /* Il minimo e' 1.5rem e non un valore piu' comodo perche' sotto i 350 px
     un minimo piu' alto tornerebbe a vincolare, annullando proprio lo
     scaling proporzionale che garantisce la riga unica. */
  --text-hero:    clamp(1.5rem, 8vw, 5.5rem);

  /* L'affermazione di About torna accanto al testo, come nella prima
     versione, e per starci deve rimpicciolirsi: e' aritmetica, non gusto.
     "MADE ACCESSIBLE TO THE WORLD." misura 16.58 em, e in mezza colonna
     lo spazio disponibile e' 440 px a 1024 e 528 px a 1280. Il corpo
     massimo che tiene le tre righe e' quindi 26.5 px e 31.8 px: il clamp
     qui sotto resta sotto entrambi i limiti a ogni larghezza. */
  --text-statement: clamp(1.5rem, 2.4vw, 1.9rem);
  --text-h2:      clamp(2.25rem, 5vw, 4.25rem);
  --text-h3:      clamp(1.625rem, 2.6vw, 2.25rem);
  --text-lead:    clamp(1.0625rem, 1.5vw, 1.25rem);
  --text-body:    1rem;
  --text-small:   0.9375rem;
  --text-eyebrow: 0.75rem;

  --tracking-eyebrow: 0.18em;
  --tracking-heading: 0.02em;
  --leading-heading:  1.1;

  /* --- INTERLINEA DEI TITOLI ------------------------------------------------
     1.32 non e' un valore scelto a occhio: e' calcolato sulle metriche reali
     dei due caratteri, misurate con measureText sui file effettivamente
     caricati.

     Il problema. Il Pinyon Script ha aste ascendenti alte 0.779 em, e lo
     usiamo a 1.22 em di corpo per compensarne l'altezza-x minuscola: l'asta
     della h di "humans" sale quindi 0.950 em sopra la propria linea di base.
     La riga precedente scende di 0.232 em (la y di "Italy"). Sommando, due
     righe consecutive hanno bisogno di 1.182 em solo per non sovrapporsi.
     Con l'interlinea precedente di 1.06 em l'inchiostro si sovrapponeva
     davvero, di circa 5 px: e' il difetto segnalato dal founder in fase di
     presentazione. Non era un problema di dispositivo — sul suo monitor
     sembrava a posto solo perche' a corpo maggiore i 5 px pesavano meno.

     Il caso peggiore non e' pero' la hero: e' il passaggio dalla seconda
     alla terza riga di "SERVED WITH Elegance / MADE ACCESSIBLE...", dove la
     g di Elegance scende di 0.468 em contro maiuscole alte 0.740 em, per un
     totale di 1.208 em.

     1.32 lascia in ogni caso almeno 0.11 em di respiro. Essendo espressa in
     em e non in pixel, la garanzia vale identica su ogni corpo e quindi su
     ogni dispositivo: e' questo che rende la regola verificabile invece che
     "sistemata finche' non sembra giusta".
  ------------------------------------------------------------------------- */
  --leading-title:    1.32;
  --leading-body:     1.7;

  /* --- Spaziatura, scala a base 8px --------------------------------------- */
  --space-1:  0.5rem;    /*  8px */
  --space-2:  1rem;      /* 16px */
  --space-3:  1.5rem;    /* 24px */
  --space-4:  2.5rem;    /* 40px */
  --space-5:  4rem;      /* 64px */
  --space-6:  7rem;      /* 112px */
  --space-7:  8.75rem;   /* 140px */

  /* --- Layout -------------------------------------------------------------- */
  --container:    75rem;   /* 1200px */
  --container-sm: 48rem;   /*  768px */

  /* La larghezza che resta al testo dentro .container, tolti i margini
     laterali. Serve ai titoli che DEVONO stare su un numero preciso di
     righe (vedi .hero__title--adatta e .pillars__title): il corpo si
     calcola da qui, invece di sperare che ci stia. A 64rem cambia insieme
     al margine di .container. */
  --misura-utile: calc(100vw - 2 * var(--space-3));
  --radius-pill:  999px;
  --border-thin:  1px;

  --transition: 220ms ease;
}


/* =============================================================================
   3. RESET
============================================================================= */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;     /* evita che l'header sticky copra le ancore */
  -webkit-text-size-adjust: 100%;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}


/* =============================================================================
   4. BASE E TIPOGRAFIA
============================================================================= */

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--inchiostro);
  background-color: var(--avorio);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  /* Interlinea sicura per tutti i titoli, non solo per quelli che oggi
     vanno a capo. "Two pillars, one obsession." sta su una riga sola sul
     portatile e su due sul telefono: se la regola valesse solo per i casi
     noti, il difetto ricomparirebbe sulle dimensioni non previste. */
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
}

h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

p {
  max-width: 65ch;    /* misura di riga leggibile */
}

a {
  color: inherit;
  text-decoration: none;
}

strong {
  font-weight: 600;
}

/* Il focus deve essere SEMPRE visibile: e' l'unico modo in cui chi naviga
   da tastiera sa dove si trova. Mai rimuoverlo. */
:focus-visible {
  outline: 2px solid var(--pomodoro);
  outline-offset: 3px;
  border-radius: 2px;
}

.section--vino :focus-visible,
.section--pomodoro :focus-visible,
.section--bottiglia :focus-visible {
  outline-color: var(--avorio);   /* sul fondo scuro il pomodoro non si vede */
}

/* Link per saltare direttamente al contenuto: primo elemento del body,
   invisibile finche' non riceve il focus da tastiera. */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-small);
  color: var(--avorio);
  background-color: var(--vino);
  border-radius: var(--radius-pill);
  transform: translateY(-200%);
  transition: transform var(--transition);
}

.skip-link:focus {
  transform: translateY(0);
}


/* =============================================================================
   5. UTILITY DI LAYOUT
============================================================================= */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.container--narrow {
  max-width: var(--container-sm);
}

.section {
  padding-block: var(--space-6);
}

/* Ogni sezione dichiara la coppia sfondo + testo con una sola classe.
   Cosi' i contrasti restano corretti per costruzione: non e' possibile
   scrivere per sbaglio testo scuro su fondo scuro. */
.section--avorio {
  color: var(--inchiostro);
  background-color: var(--avorio);
}

.section--vino {
  color: var(--avorio);
  background-color: var(--vino);
}

.section--bottiglia {
  color: var(--avorio);
  background-color: var(--bottiglia);
}

/* Superficie Pomodoro. E' la piu' esigente della tavolozza: come misurato
   sopra, l'unico testo conforme su questo fondo e' l'Avorio pieno. Per
   questo qui sotto non compare nessuna trasparenza. */
.section--pomodoro {
  color: var(--avorio);
  background-color: var(--pomodoro);
}

/* Occhiello: la piccola etichetta in maiuscolo sopra i titoli.
   Ricorre su tutto il sito madre, e' un elemento di famiglia. */
.eyebrow {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--pomodoro);
}

.section--vino .eyebrow,
.section--bottiglia .eyebrow {
  color: var(--avorio-tenue);   /* il pomodoro sul vino non e' leggibile */
}

/* Sul Pomodoro l'occhiello resta Avorio pieno: smorzarlo lo porterebbe a
   2.62:1, e l'occhiello e' testo piccolo, dove il margine e' gia' minimo. */
.section--pomodoro .eyebrow {
  color: var(--avorio);
}

/* La parola-accento in corsivo dentro i titoli: la firma tipografica
   della famiglia Italia Refinement (brand book §4.2 e §4.4). */
.accent {
  font-family: var(--font-accent);
  font-size: 1.22em;        /* il Pinyon Script ha un'altezza-x molto piccola */
  text-transform: none;     /* "Elegance" va con la maiuscola, come richiesto */
  letter-spacing: 0;
  /* Interlinea 1, non 0.8: con 0.8 la casella di riga e' piu' corta del
     glifo e le aste ascendenti (la h di "humans", la E di "Elegance")
     escono verso l'alto e vanno a toccare la riga precedente. */
  line-height: 1;
}

/* --- Testo giustificato ----------------------------------------------------
   Richiesta esplicita del founder per tutti i testi correnti.

   Giustificato SENZA sillabazione, e la seconda meta' e' una regola di casa,
   non un dettaglio: nessuna parola va mai spezzata a fine riga. Il prezzo e'
   noto — su colonne strette la giustificazione senza trattini apre spazi
   piu' larghi fra le parole — e si accetta: una parola intera che scende
   alla riga dopo si legge sempre; una parola tagliata a meta' con il
   trattino ("finis-hed", "sto-ry") interrompe la lettura ogni volta. */
.justify,
.about__quote p,
.pillar__text,
.doc p,
.doc li {
  text-align: justify;
  text-justify: inter-word;
  hyphens: none;
}

.lead {
  font-size: var(--text-lead);
  color: var(--inchiostro);
}

.section--vino .lead,
.section--pomodoro .lead,
.section--bottiglia .lead {
  color: var(--avorio);
}


/* =============================================================================
   6. COMPONENTI
============================================================================= */

/* --- Bottone a pillola, nelle tre varianti ---------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.8rem 1.75rem;
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  border: var(--border-thin) solid transparent;
  border-radius: var(--radius-pill);
  transition: background-color var(--transition),
              color var(--transition),
              border-color var(--transition);
}

/* Primaria: riempimento Pomodoro con testo Avorio.
   E' l'unico modo conforme di usare il Pomodoro sul fondo Vino (5.03:1).

   Comportamento al passaggio del mouse riportato a quello della prima
   versione, su richiesta: il fondo passa semplicemente al Pomodoro scuro.
   Il riempimento che saliva dal basso e' stato tolto. Vale per tutte le
   CTA primarie della pagina — Listen now, Spotify — che restano cosi'
   una famiglia sola. */
.btn--primary {
  color: var(--avorio);
  background-color: var(--pomodoro);
  border-color: var(--pomodoro);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--pomodoro-scuro);
  border-color: var(--pomodoro-scuro);
}

/* Secondaria: contorno sottile, come la CTA del sito madre. */
.btn--outline {
  color: var(--avorio);
  border-color: var(--avorio-ombra);
}

.btn--outline:hover {
  border-color: var(--avorio);
  background-color: var(--avorio);
  color: var(--vino);
}

/* Terza variante: riempimento Avorio con testo Vino, 14.47:1.

   Serve sulle due bande Pomodoro (Our Values e Italia Refinement), dove una
   CTA rossa sparirebbe sul proprio stesso fondo. Le due CTA — "Follow us on
   social media" e "Discover Italia Refinement" — usano questa classe e si
   comportano quindi in modo identico, come richiesto.

   L'animazione e' diversa da quella delle CTA primarie ed e' orizzontale:
   il colore entra da sinistra e attraversa il bottone, invece di salire dal
   basso. Il riempimento e' Vino chiaro (#5C0F0D) e non Vino pieno: il Vino
   pieno, isolato su un fondo rosso acceso, viene letto come nero. Il Vino
   chiaro resta riconoscibile come un rosso vino, che era il punto.

   Il testo commuta da Vino ad Avorio in 100 ms a partire dai 140, cioe'
   mentre l'onda gli passa sopra: ne' prima, quando sarebbe avorio su
   avorio, ne' dopo, quando sarebbe scuro su scuro. */
.btn--light {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--vino);
  background-color: var(--avorio);
  border-color: var(--avorio);
  transition: color 100ms linear 140ms;
}

.btn--light::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--vino-chiaro);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn--light:hover::before,
.btn--light:focus-visible::before {
  transform: scaleX(1);
}

.btn--light:hover,
.btn--light:focus-visible {
  color: var(--avorio);
  border-color: var(--vino-chiaro);
}

/* Su fondo chiaro il contorno diventa scuro. */
.btn--outline-dark {
  color: var(--inchiostro);
  border-color: rgba(20, 20, 20, 0.22);
}

.btn--outline-dark:hover {
  color: var(--avorio);
  background-color: var(--vino);
  border-color: var(--vino);
}

/* --- Filetto decorativo ---------------------------------------------------- */
.rule {
  width: 3.5rem;
  height: 2px;
  margin-bottom: var(--space-3);
  background-color: var(--pomodoro);
  border: 0;
}

.section--vino .rule,
.section--bottiglia .rule {
  background-color: var(--avorio-ombra);
}

.section--pomodoro .rule {
  background-color: var(--avorio);
}

/* --- COREOGRAFIA DELLO SCORRIMENTO ------------------------------------------

   La pagina si compone un pezzo alla volta man mano che si scende.

   La grammatica e' ricavata dal riferimento indicato dal founder
   (stevenbartlett.com), misurata sul sito stesso. Tre caratteristiche, e
   sono meno ovvie di quanto sembri:

     1. E' quasi tutta OPACITA'. Quattordici elementi su quindici usano una
        semplice dissolvenza, uno solo entra da destra. Niente elementi che
        scivolano da tutte le direzioni: il contenuto si materializza.
     2. E' LENTA. Duemila millisecondi, in qualche punto duemilacinquecento.
        Una dissolvenza di due secondi non si legge come "un'animazione":
        si legge come una pagina che prende corpo.
     3. E' SFALSATA a scalini di 250 millisecondi. Gli elementi affiancati
        non compaiono insieme ma uno dopo l'altro, ed e' da qui che nasce
        la sensazione di procedere per passi.

   Il movimento verticale qui e' 12px, non 18: con due secondi di durata uno
   spostamento maggiore diventa uno scivolamento evidente e tradirebbe il
   punto 1. Serve solo a dare una direzione alla dissolvenza.

   Lo stato di partenza lo applica JavaScript (classe .is-revealable), non il
   CSS: se JS non parte, il contenuto resta semplicemente visibile. Non e'
   un dettaglio, e' la differenza fra una pagina che si anima e una pagina
   che sparisce.

   Nota sulle prestazioni: si animano solo opacity e transform, le due
   proprieta' che il browser puo' affidare alla scheda grafica senza
   ricalcolare l'impaginazione. E' la ragione per cui si puo' aggiungere
   tutto questo senza rimettere lo scorrimento a scatti.
--------------------------------------------------------------------------- */

.is-revealable {
  opacity: 0;
  transform: translate3d(var(--reveal-x, 0), var(--reveal-y, 12px), 0);
}

.is-revealed {
  animation: reveal-in var(--reveal-duration, 1400ms)
             cubic-bezier(0.22, 0.61, 0.36, 1)
             var(--reveal-delay, 0ms) both;
}

@keyframes reveal-in {
  from { opacity: 0; transform: translate3d(var(--reveal-x, 0), var(--reveal-y, 12px), 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* --- PERCHE' animation E NON transition -------------------------------------

   La prima versione usava una transizione, ed era sbagliata per due motivi
   che si vedono solo misurando, non guardando.

   Primo: il conflitto. Diversi componenti dichiarano gia' una propria
   transition — .pillar per l'ombra al passaggio del mouse, .episode, .house,
   .btn. La proprieta' transition non si somma, si sostituisce, e vince
   l'ultima dichiarazione a parita' di specificita': essendo quelle regole
   piu' avanti nel foglio, cancellavano la transizione di comparsa. Il
   risultato misurato era una durata di 0.22s invece di 1.4s e i ritardi a
   scalini semplicemente ignorati: le schede comparivano tutte insieme, cioe'
   proprio l'effetto che questa sezione serve a evitare.

   Secondo: l'innesco. Una transizione parte solo se lo stato cambia in un
   fotogramma successivo a quello in cui e' stato impostato lo stato
   iniziale, il che obbliga ad aspettare due giri di requestAnimationFrame.
   Ma requestAnimationFrame viene sospeso quando la pagina non sta
   ridisegnando — scheda in secondo piano, finestra ridotta a icona,
   anteprima incorporata — e in quel caso la transizione non parte mai e il
   contenuto resta a opacita' zero. Invisibile.

   Un'animazione non ha nessuno dei due problemi: la proprieta' animation e'
   indipendente da transition, e parte da sola nel momento in cui la classe
   viene applicata, senza bisogno di attendere un fotogramma. Lo stato
   iniziale e' scritto nel fotogramma "from", quindi si possono applicare
   entrambe le classi nello stesso istante.

   A fine corsa JavaScript toglie tutte e due le classi: l'elemento torna al
   proprio stato naturale e non resta nessuna regola di animazione a
   litigare con le transizioni al passaggio del mouse.
--------------------------------------------------------------------------- */

/* --- Le varianti, dichiarate nell'HTML ------------------------------------ */

/* "slow": i due secondi pieni del riferimento. Riservato ai momenti in cui
   la pagina cambia argomento, non alle singole schede. */
[data-reveal="slow"] {
  --reveal-duration: 2000ms;
}

/* "fade": dissolvenza pura, senza alcuno spostamento. */
[data-reveal="fade"] {
  --reveal-y: 0;
}

/* "right": l'unica entrata direzionale, come l'unico fade-right del
   riferimento. Da usare con parsimonia, altrimenti smette di significare. */
[data-reveal="right"] {
  --reveal-x: -28px;
  --reveal-y: 0;
}


/* --- BARRA DI AVANZAMENTO ---------------------------------------------------
   Un filo di Pomodoro alto due pixel che cresce lungo il bordo superiore
   mentre si scende. Dice due cose in silenzio: quanto manca alla fine, e
   che la pagina e' una sequenza con un ordine, non un mucchio di sezioni.

   Sta sopra l'header (z-index piu' alto) perche' l'header e' appiccicato in
   cima e altrimenti lo coprirebbe. transform-origin: left fa crescere la
   barra da sinistra invece che dal centro.
--------------------------------------------------------------------------- */

.progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 100%;
  height: 2px;
  background-color: var(--pomodoro);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  pointer-events: none;
}


/* =============================================================================
   7. HEADER
============================================================================= */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  color: var(--avorio);
  background-color: var(--vino);
  border-bottom: var(--border-thin) solid var(--avorio-ombra);
}

.header__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Altezza 2rem = 32 px, misurata sul sito madre: il loro marchio nella
   testata e' un SVG reso a 188x32. Il nostro ha proporzione 5.65 contro la
   loro 5.88, quindi a pari altezza viene 181x32 — praticamente sovrapponibile.
   Combaciano le altezze e non le larghezze perche' e' l'altezza a stabilire
   il peso ottico di un marchio in una testata; la larghezza dipende solo da
   quante lettere ha il nome. */
.header__logo img {
  /* l'altezza governa la dimensione, la larghezza segue le proporzioni */
  height: 2rem;
  width: auto;
}

.header__nav {
  display: none;             /* su mobile e' nel pannello a scomparsa */
  align-items: center;
  gap: var(--space-4);
}

.header__nav a {
  font-size: var(--text-small);
  color: var(--avorio-tenue);
  transition: color var(--transition);
}

.header__nav a:hover {
  color: var(--avorio);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* --- Selettore di lingua ---------------------------------------------------

   Due pastiglie, English e Italiano, con lo stesso comportamento del comando
   "All episodes" della sezione Episodes: contorno sottile a riposo, e al
   passaggio del mouse il colore entra a riempire mentre il testo si inverte,
   nella stessa durata.

   Cambia solo la coppia di colori, e non e' una scelta ma un vincolo: "All
   episodes" sta su fondo Avorio, quindi ha testo Inchiostro e si riempie di
   Vino; qui la testata e' su fondo Vino, dove l'Inchiostro sarebbe
   illeggibile. Il testo e' percio' Avorio e il riempimento e' Avorio con
   testo Vino — 14,47:1, la coppia piu' forte della tavolozza.

   La lingua corrente non e' un collegamento: e' gia' riempita, cioe' mostra
   in permanenza lo stato che l'altra raggiunge solo al passaggio del mouse.
   E' il modo piu' breve per dire "sei qui" senza aggiungere una spiegazione.

   Il corpo e' piu' piccolo delle CTA di sezione perche' una testata non e'
   il posto dove chiedere un'azione: e' il posto dove renderla disponibile. */
.lang {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* DOVE STA IL SELETTORE, E PERCHE' CAMBIA POSTO.

   Da 768 px in su sta nella testata, in alto a destra. Sotto, no: misurato a
   320 px, il marchio occupa 181 px, l'hamburger 44 e i margini 48, cioe' 273
   dei 320 disponibili. Anche con le sigle ENG e ITA le due pastiglie ne
   chiedono 126, e la testata sfonderebbe facendo comparire lo scorrimento
   orizzontale su tutta la pagina.

   Rimpicciolire il marchio avrebbe toccato un elemento gia' approvato. Il
   selettore va invece dove su mobile vive gia' tutta la navigazione: dentro
   il pannello a scomparsa. E' un tocco in piu', ed e' il posto dove il
   visitatore lo cerca. */
.header .lang {
  display: none;
}

.mobile-nav .lang {
  margin-top: var(--space-3);
}

/* Larghezza minima comune: ENG misura 58 px e ITA 50, e due pastiglie
   gemelle di larghezza diversa sembrano un errore. Cosi' sono uguali. */
.lang__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.75rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--avorio);
  border: var(--border-thin) solid var(--avorio-ombra);
  border-radius: var(--radius-pill);
  transition: background-color var(--transition),
              color var(--transition),
              border-color var(--transition);
}

.lang__link:hover,
.lang__link:focus-visible {
  color: var(--vino);
  background-color: var(--avorio);
  border-color: var(--avorio);
}

/* La lingua in cui la pagina e' gia' scritta. E' un <span>, non un <a>:
   un collegamento alla pagina su cui ci si trova gia' non porta da nessuna
   parte, e i lettori di schermo lo annuncerebbero comunque come navigabile. */
.lang__link[aria-current] {
  color: var(--vino);
  background-color: var(--avorio);
  border-color: var(--avorio);
  cursor: default;
}

/* NOTA. .header__cta non e' piu' usata nell'header: la CTA "Listen" e'
   stata rimossa perche' duplicava "Listen now" della hero. La regola resta
   perche' la classe potrebbe servire di nuovo, ma oggi non seleziona nulla. */
.header__cta {
  display: none;
}

/* --- Pulsante hamburger ---------------------------------------------------- */
.header__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.75rem;
}

.header__toggle span {
  display: block;
  height: 1px;
  background-color: var(--avorio);
  transition: transform var(--transition), opacity var(--transition);
}

.header__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.header__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.header__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* --- Pannello di navigazione mobile ----------------------------------------- */
.mobile-nav {
  position: fixed;
  inset: 4.75rem 0 auto 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3) var(--space-5);
  color: var(--avorio);
  background-color: var(--vino);
  border-bottom: var(--border-thin) solid var(--avorio-ombra);
}

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

.mobile-nav a {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  text-transform: uppercase;
}

.mobile-nav .btn {
  align-self: flex-start;
  margin-top: var(--space-2);
}


/* =============================================================================
   8. HERO
   Versione tipografica: il titolo E' la grafica. Nessuna immagine, nessun
   video, quindi la pagina si apre istantaneamente.
============================================================================= */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - 4.75rem);
  /* Spaziatura ridotta sopra e sotto: serve a far rientrare nella prima
     schermata anche l'invito a scorrere in fondo. Un invito a scorrere che
     si vede solo dopo aver scorso non serve a niente. */
  padding-block: var(--space-5) var(--space-4);
  color: var(--avorio);
  background-color: var(--vino);
  text-align: center;
  overflow: hidden;
}

/* --- Sfondo video -----------------------------------------------------------
   Il livello esiste sempre nel documento ma resta vuoto finche' JavaScript
   non ci inserisce il video, e lo fa solo se HERO_VIDEO e' valorizzata in
   assets/js/episodes.js. Finche' e' vuota qui non arriva nulla: nessun file
   da scaricare, nessuna richiesta di rete, nessun riquadro rotto.

   Il velo scuro sopra il video non e' decorativo. Un montaggio di interviste
   ha inquadrature chiare e inquadrature scure che si alternano: senza il velo
   il contrasto del titolo cambierebbe di secondo in secondo, e per qualche
   fotogramma il testo diventerebbe illeggibile. Con il velo il fondo resta
   sempre almeno Vino, quindi il rapporto di contrasto misurato (14.47:1)
   vale in ogni istante del filmato. */
.hero__media {
  position: absolute;
  /* il livello e' piu' alto della hero (-8% sopra, -8% sotto) perche' la
     parallasse lo fa scorrere: senza il margine in eccesso, scorrendo si
     scoprirebbe il bordo e comparirebbe una striscia vuota */
  inset: -8% 0;
  z-index: 0;
  overflow: hidden;
  background-color: var(--vino);
  will-change: transform;
}

.hero__media video {
  transform: translateZ(0);
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Il fotogramma e' desaturato e virato dal fondo Vino sottostante:
     stesso trattamento duotone delle miniature degli episodi, cosi' il
     video appartiene alla pagina invece di sembrarci appoggiato sopra. */
  filter: grayscale(1) contrast(1.05);
  mix-blend-mode: luminosity;
  /* 0.68 e non 0.55: con il velo qui sotto, a 0.55 il filmato contribuiva
     circa il 22% della luminosita' al centro e si intravedeva appena. Alzato
     fin dove il titolo resta nettamente leggibile, verificato a schermo. */
  opacity: 0.68;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Due strati con compiti diversi. Il lineare scurisce dall'alto verso il
     basso, dove stanno le CTA e l'invito a scorrere, che sono gli elementi
     piu' piccoli e quindi i piu' fragili. Il radiale scurisce i bordi e
     lascia respirare il centro, dove sta il titolo: e' il motivo per cui il
     filmato si legge proprio dietro le parole e non ai lati. */
  background:
    linear-gradient(rgba(70, 5, 4, 0.42), rgba(70, 5, 4, 0.74)),
    radial-gradient(ellipse at center, rgba(70, 5, 4, 0.04) 0%, rgba(70, 5, 4, 0.8) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
}

/* La pillola "Season two" che stava qui e' stata rimossa: spingeva in basso
   tutto il contenuto della hero e faceva finire sotto la piega l'invito a
   scorrere, che nella prima versione si vedeva. L'annuncio della stagione
   due e' ora una chiamata all'azione dentro la pagina, dove porta a
   qualcosa invece di limitarsi ad annunciarlo. */

.hero__title {
  margin-bottom: var(--space-4);
  /* spaziatura fra le lettere azzerata: su un corpo cosi' grande la
     spaziatura positiva non serve alla leggibilita' e costa 0.36 em di
     larghezza, che sul telefono e' esattamente il margine che serve */
  letter-spacing: 0;
  /* le due righe sono decise dal <br>, non dal browser */
  text-wrap: initial;
}

.hero__title .accent {
  color: var(--avorio);
}

/* Titolo italiano: "l'eccellenza italiana." e' la riga piu' lunga della
   hero, 11.92 em. Al corpo pieno non entra nella propria riga dal tablet in
   giu', e andrebbe a capo spezzando proprio "eccellenza / italiana". Qui il
   corpo scende quanto basta perche' ci stia sempre (12.3 lascia un 3% di
   margine per le differenze di resa fra browser); dove c'e' spazio, cioe'
   da circa 1150 px in su, resta quello di sempre. */
.hero__title--adatta {
  font-size: min(var(--text-hero), var(--misura-utile) / 12.3);
}

.hero__text {
  max-width: 52ch;
  line-height: 1.55;
  margin-inline: auto;
  margin-bottom: var(--space-4);
  font-size: var(--text-lead);
  color: var(--avorio-tenue);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.hero__scroll {
  /* inline-flex, altrimenti il margine verticale su un elemento inline
     verrebbe ignorato e la scritta resterebbe incollata ai bottoni */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-height: 24px;
  /* Stessa distanza che separa il sottotitolo dalle due CTA, su richiesta:
     sotto i 1024 px il sottotitolo ha margine inferiore --space-4, sopra
     passa a --space-5. L'invito a scorrere segue la stessa scala, cosi' i
     tre stacchi verticali della hero restano in rapporto fra loro invece di
     essere tre numeri scelti separatamente. */
  margin-top: var(--space-4);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--avorio-tenue);
  transition: color var(--transition);
}

.hero__scroll svg {
  width: 18px;
  height: 18px;
  animation: nudge-down 2.4s ease-in-out infinite;
}

.hero__scroll:hover {
  color: var(--avorio);
}

@keyframes nudge-down {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}


/* =============================================================================
   9. ABOUT
============================================================================= */

/* Affermazione a sinistra, testo a destra: l'impaginazione della prima
   versione, ripristinata su richiesta. Le due colonne si affiancano solo
   da 1024 px in su: a 768 px mezza colonna sarebbe larga 288 px e le tre
   righe dell'affermazione non ci starebbero a un corpo leggibile. */
.about__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.about__statement {
  font-family: var(--font-heading);
  font-size: var(--text-statement);
  text-transform: uppercase;
  letter-spacing: 0;
  /* nessun max-width: la larghezza la decide il contenitore, e le tre
     righe sono decise dai <span> nell'HTML, non dal browser */
  text-wrap: initial;
}

/* Ogni frase e' un blocco. Con i <br> una frase troppo lunga per lo schermo
   andrebbe a capo confondendosi con la successiva; cosi' invece resta
   riconoscibile come una delle tre anche quando, sul telefono, occupa due
   righe. */
.about__statement span {
  display: block;
}

.about__body {
  margin-top: var(--space-5);
}

/* --- La citazione a destra --------------------------------------------------
   Tutto il blocco e' fra virgolette e in corsivo: e' la voce dell'host, non
   un testo istituzionale. Il corsivo lo dichiara prima ancora che si legga.

   Corpo ridotto a 1rem, su richiesta: serve a far stare le quattro parti
   accanto all'affermazione senza allungare la colonna. Tutte le parti hanno
   lo stesso corpo, compresa "No pitch. No press release.", che nella
   versione precedente era piu' grande e in maiuscolo. Ora si stacca solo
   per la propria brevita' e per lo spazio che ha intorno — che e'
   esattamente come funziona una pausa. */
.about__quote {
  font-size: var(--text-body);
  font-style: italic;
  line-height: 1.72;
  color: rgba(20, 20, 20, 0.88);
  border-left: 2px solid var(--pomodoro);
  padding-left: var(--space-3);
}

.about__quote p {
  max-width: 52ch;
}

/* Lo stacco fra le quattro parti. E' generoso di proposito: sono le righe
   vuote che il founder ha disegnato nel riscontro, e senza quelle il blocco
   torna a essere un muro di testo unico. */
.about__quote p + p {
  margin-top: var(--space-3);
}

/* --- Firma dell'host --------------------------------------------------------
   La foto e' facoltativa: se il file non esiste ancora, JavaScript rimuove
   l'immagine e resta la sola riga di firma, senza buchi nel layout.

   Il file consegnato e' un ritaglio a mezzo busto su fondo trasparente,
   della stessa famiglia dei quindici ritratti di Our Guests — non una
   fototessera quadrata. Un cerchio con object-fit: cover, che era il
   trattamento precedente, avrebbe tagliato il busto in un punto arbitrario
   e lasciato mezzo cerchio di fondo vuoto attorno a una figura fuori
   centro. Qui invece il ritaglio non viene mascherato: e' dimensionato in
   altezza, la larghezza segue da sola, e il bordo trasparente del PNG resta
   l'unico contorno. align-items: flex-end allinea il busto alla stessa
   linea di terra del testo, coerente con il trattamento delle persone
   altrove nella pagina. */
.signature {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid rgba(20, 20, 20, 0.12);
}

/* La fotografia sta a destra della firma ed e' a colori: e' l'unico volto
   della pagina che appartiene alla redazione e non agli ospiti, e va letto
   cosi' com'e', senza filtri.

   IL TONDINO. Richiesta del founder: dietro al ritratto un cerchio Pomodoro
   sfumato, sulla falsariga delle foto profilo di Instagram e LinkedIn.
   Un disco pieno, a gradiente radiale con la luce in alto a sinistra, che
   da' volume senza bisogno di ombre marcate.

   La prima versione aveva un anello sottile staccato dal disco da 3,5 px
   di Avorio, come le storie di Instagram. Il founder ha chiesto di
   togliere quel bordo chiaro: ora il rosso riempie tutto il cerchio,
   fino al bordo, senza stacchi ne' filetti di luce.

   Il busto sta dentro il disco e ne segue il bordo: la base piatta del
   ritaglio sparisce sotto la curva, come in una foto profilo vera.
   Il markup lo costruisce initHostPortrait() in script.js. */
.signature__ritratto {
  position: relative;
  flex: 0 0 auto;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  box-shadow: 0 14px 28px -18px rgba(70, 5, 4, 0.55);
}

.signature__disco {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(120% 120% at 30% 18%, #EE5A3E 0%, var(--pomodoro) 45%, #8E1002 100%);
}

.signature__photo {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 93%;
  width: auto;
  transform: translateX(-50%);
}

.signature__name {
  font-size: var(--text-lead);
  font-weight: 600;
}

.signature__name em {
  font-weight: 400;
  font-style: italic;
}


/* =============================================================================
   10. OUR VALUES — I DUE PILASTRI
   I due pilastri che definiscono il progetto: heritage e storie personali.
   E' la sezione che distingue Italian Stories dal racconto generalista
   del Made in Italy.

   La sezione e' su fondo Pomodoro pieno: e' l'unica banda rossa a tutta
   larghezza della pagina, e cade esattamente dove il progetto dichiara il
   proprio perimetro. Il Pomodoro e' il colore che il sito madre quasi non
   usa: qui diventa la firma del sub-brand.

   Le schede non sono riquadri pieni ma perimetri sottili in Avorio: un
   riempimento le farebbe leggere come due rettangoli appoggiati sopra il
   rosso, e il rosso smetterebbe di essere il colore della sezione. Cosi'
   invece il fondo resta continuo e le schede lo attraversano.

   Su questo fondo tutto il testo e' Avorio pieno: e' l'unico valore
   conforme (5.03:1), vedi la tabella dei contrasti in cima al file. La
   gerarchia si fa quindi con corpo, peso e spaziatura, mai con la
   trasparenza.
============================================================================= */

/* "Due pilastri, una sola missione." su una riga sola, come richiesto dal
   founder: 16.38 em, che al corpo pieno dei titoli sfiorano la larghezza
   del contenitore (1114 px su 1120 a 1440). Il corpo si ferma quindi a
   1/16.9 della misura utile: da 1330 px in su perde il 2.5%, sotto non
   cambia nulla.

   Sul telefono una riga sola vorrebbe un corpo di 20 px, la meta' degli
   altri titoli. Li' le righe sono due, spezzate dopo la virgola dove la
   frase fa gia' pausa, e mai tre: "una sola missione." (9.28 em) resta
   intera, con lo stesso calcolo. Il <br> che le separa esiste solo sotto i
   48rem. */
.pillars__title {
  font-size: min(var(--text-h2), var(--misura-utile) / 9.6);
}

@media (min-width: 48rem) {
  .pillars__title {
    font-size: min(var(--text-h2), var(--misura-utile) / 16.9);
  }

  .pillars__title br {
    display: none;
  }
}

.pillars__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

/* Schede in Vino pieno sul fondo Pomodoro, su richiesta. I perimetri
   trasparenti della versione precedente lasciavano la sezione troppo
   piatta: due rettangoli scuri su rosso danno la profondita' che mancava.

   Effetto collaterale positivo, misurato: il testo passa da Avorio su
   Pomodoro (5.03:1) ad Avorio su Vino (14.47:1). Il contrasto quasi
   triplica, e con esso la leggibilita' del testo piu' lungo della pagina. */
.pillar {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  color: var(--avorio);
  background-color: var(--vino);
  border: var(--border-thin) solid var(--vino);
  border-radius: 2px;
  transition: box-shadow var(--transition), transform var(--transition);
}

.pillar:hover {
  box-shadow: 0 16px 34px rgba(70, 5, 4, 0.36);
  transform: translateY(-3px);
}

/* --- La striscia di immagini in cima alla scheda ----------------------------
   Tre riquadri affiancati, in duotone sul Vino della scheda. Al passaggio
   del mouse quello puntato si allarga e gli altri due cedono spazio: e' la
   stessa idea dell'interazione della sezione delle persone, cioe' l'elemento
   puntato che si stacca dal gruppo, ripetuta qui perche' la pagina abbia un
   solo modo di dire "questo" invece di due.

   flex-basis in percentuale e non larghezza fissa: cosi' la somma resta
   sempre il 100% della scheda, a qualunque larghezza, e l'allargamento di
   uno e' esattamente il restringimento degli altri due. */
/* aspect-ratio 2/1 sulla striscia, non un'altezza fissa.

   Le fotografie sono verticali, 900x1350, cioe' 2:3. Tre affiancate occupano
   ciascuna un terzo della larghezza, quindi perche' nessuna venga tagliata
   l'altezza deve valere un terzo della larghezza diviso 0.667, cioe' meta'
   della larghezza esatta: 2:1. Espresso come proporzione e non come altezza
   in pixel, il conto resta giusto a ogni larghezza di schermo — con
   un'altezza fissa sarebbe corretto su un monitor e sbagliato su un
   telefono, dove le stesse tre foto sono molto piu' strette. */
.pillar__strip {
  display: flex;
  gap: 3px;
  aspect-ratio: 2 / 1;
  margin-bottom: var(--space-3);
  border-radius: 2px;
  overflow: hidden;
}

.pillar__strip span {
  flex: 1 1 33.333%;
  height: 100%;
  overflow: hidden;
  transition: flex-basis 420ms cubic-bezier(0.4, 0, 0.2, 1),
              flex-grow 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.pillar__strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  opacity: 0.72;
  transition: filter var(--transition), opacity var(--transition);
}

@media (hover: hover) {
  .pillar__strip:hover span {
    flex-grow: 0.7;
  }

  .pillar__strip span:hover {
    flex-grow: 1.6;
  }

  .pillar__strip span:hover img {
    filter: grayscale(0) contrast(1.02);
    opacity: 1;
  }
}

.pillar__number {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  /* sul fondo Vino il Pomodoro tornerebbe illeggibile (2.87:1): resta
     Avorio smorzato, che sul Vino misura 9.1:1 */
  color: var(--avorio-tenue);
}

.pillar__title {
  margin-bottom: var(--space-2);
}

/* Avorio pieno, non smorzato: e' testo corrente su fondo Pomodoro. */
.pillar__text {
  color: var(--avorio);
  max-width: none;   /* la larghezza la decide la scheda */
}

/* Ogni pilastro e' ora piu' di un paragrafo solo, come la citazione di The
   Podcast: lo stacco fra le parti e' cio' che da' ritmo alla lettura, non
   lo spessore del testo. */
.pillar__text + .pillar__text {
  margin-top: var(--space-2);
}

/* L'enfasi resta dentro il corpo del testo: niente cambio di font, niente
   maiuscolo. Grassetto e corsivo si alternano di paragrafo in paragrafo e
   bastano da soli a dare il ritmo; il maiuscolo spezzava la riga e faceva
   leggere il corsivo come un titolo invece che come un accento. */
.pillar__text strong {
  font-weight: 700;
}

.pillar__text em {
  font-style: italic;
}

/* NOTA. Qui stavano .pillar__examples (le pastiglie con i nomi degli
   ospiti) e .pillar__cta (i due link "Watch the ... stories"). Rimossi su
   richiesta: le due schede devono spiegare i pilastri e basta, senza
   elenchi e senza chiamate all'azione che dividevano l'attenzione con
   quella unica in fondo alla sezione. */

/* Chiusura della sezione: la riga che accoglie le nicchie future e la
   chiamata ai social. */
.pillars__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-thin) solid var(--avorio-ombra);
  text-align: center;
}

.pillars__foot-text {
  margin-inline: auto;
  max-width: none;
  font-family: var(--font-heading);
  /* piu' piccola del titolo di sezione, su richiesta: deve stare su una
     riga sola accanto alla CTA, non competere con essa */
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  line-height: var(--leading-heading);
  text-transform: uppercase;
  letter-spacing: var(--tracking-heading);
}


/* =============================================================================
   11. NUMBERS — Season one

   Questa sezione sta fra due sezioni Avorio: sommando la spaziatura di
   chiusura di quella sopra e quella di apertura di questa, il vuoto
   diventava enorme e la pagina sembrava spezzata. Qui la spaziatura
   verticale e' quindi ridotta di proposito: la sezione si appoggia a
   quella precedente invece di staccarsene.
============================================================================= */

.numbers {
  padding-block: var(--space-4);
}

/* --- La distribuzione dei tre dati ------------------------------------------

   Prima le tre colonne erano di larghezza uguale e distanziate di 40 px
   l'una dall'altra. Sulla carta e' equidistante; a vedersi non lo era per
   niente, perche' cio' che l'occhio misura non e' la distanza fra i bordi
   invisibili delle colonne ma il bianco fra una cifra e la successiva. E le
   tre cifre hanno larghezze molto diverse: misurate a 1280 px, "+2.5
   Millions" occupa 324 px, "+14.1K" 167 e "+3" appena 67. Lo spazio visibile
   risultava quindi di 63 px fra il primo e il secondo dato e di 219 fra il
   secondo e il terzo: tre volte e mezzo tanto.

   La correzione: ogni blocco si dimensiona sul proprio contenuto invece che
   su una griglia uguale per tutti, e lo spazio avanzato viene diviso in due
   parti identiche. Cosi' l'uguaglianza vale su cio' che si vede, non su cio'
   che e' scritto nel foglio di stile.

   Funziona perche' nei primi due blocchi la cifra e' l'elemento piu' largo,
   quindi il bordo del blocco coincide con il bordo della cifra; nel terzo e'
   l'etichetta a essere piu' larga, ma la cifra e' allineata a sinistra e
   parte comunque dal bordo del blocco. In tutti e tre i casi lo spazio fra
   le cifre e' esattamente lo spazio fra i blocchi.
--------------------------------------------------------------------------- */

.numbers__grid {
  display: flex;
  flex-direction: column;    /* sul telefono i tre dati stanno incolonnati */
  align-items: center;       /* e incolonnati vanno centrati */
  gap: var(--space-4);
  margin-top: var(--space-5);
}

/* Sul telefono ogni dato e' una riga a se': centrarne il testo e' l'unico
   modo in cui "al centro" ha un significato, e non ha conseguenze sugli
   spazi perche' fra un dato e l'altro lo stacco e' verticale. */
.numbers__grid > .number {
  text-align: center;
}

.number {
  /* larghezza del contenuto, non una quota fissa: e' il presupposto perche'
     lo spazio distribuito risulti uguale a vedersi */
  flex: 0 0 auto;
}

.number__value {
  display: block;
  font-family: var(--font-heading);
  /* Il valore centrale e' 5.5vw e non 5vw, e non e' una rifinitura estetica:
     e' cio' che rende ESATTA l'uguaglianza degli spazi invece che fortunata.

     Perche' i due spazi risultino identici serve che nei primi due blocchi
     sia la CIFRA a dettare la larghezza, non la sua etichetta: solo cosi' il
     bordo destro del blocco coincide con la fine della cifra e non avanza
     nulla che finisca dentro lo spazio successivo. Il terzo blocco puo'
     invece avere l'etichetta piu' larga senza danno, perche' la cifra e'
     allineata a sinistra e parte comunque dal bordo del blocco.

     Il caso stretto e' il secondo: "YouTube subscribers" misura 142 px fissi.
     Con 5vw, a 1024 px la cifra "+14.1K" ne misurava 134 e perdeva, lasciando
     8 px di scarto fra i due spazi. Con 5.5vw il tetto di 3.5rem entra in
     vigore gia' a 1018 px, cioe' prima dei 1024 in cui i tre dati si
     affiancano: da li' in poi la cifra vale 146 px fissi contro 142, e vince
     a ogni larghezza. Non e' piu' una coincidenza che regge su un monitor e
     cede su un altro. */
  font-size: clamp(2.25rem, 5.5vw, 3.5rem);
  line-height: 1;
  color: var(--pomodoro);
  /* Le cifre cambiano una a una durante il conteggio. Con le cifre a
     larghezza variabile il numero "ballerebbe" da sinistra a destra a ogni
     fotogramma; font-variant-numeric le rende tutte della stessa larghezza,
     quindi il numero cresce restando fermo. */
  font-variant-numeric: tabular-nums;
}

/* Cifre e lettere sono un blocco solo, tutto Pomodoro: "+2.5Millions" si
   legge come un dato unico, non come una cifra con due note a margine.
   L'unica differenza e' il "+", appena piu' piccolo — resta un segno, non
   una cifra — e allineato in alto perche' a corpo ridotto, sulla linea di
   base, cadrebbe in un buco visivo alla sinistra del numero. */
.number__plus {
  font-size: 0.72em;
  vertical-align: 0.06em;
}

.number__label {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-small);
  color: rgba(20, 20, 20, 0.66);
}

/* Lo stato di partenza del conteggio. La classe la mette JavaScript, non il
   CSS: se JS non parte, nell'HTML c'e' gia' il valore finale scritto per
   esteso e non succede nulla di strano. */
.is-counting {
  opacity: 0.92;
}


/* =============================================================================
   12. EPISODES
   Le card sono generate da assets/js/episodes.js, ma le tre principali
   esistono anche nell'HTML: senza JavaScript la sezione funziona comunque.
============================================================================= */

/* --- SPIA DI REGISTRAZIONE "SEASON 2 ON AIR" -------------------------------

   Sostituisce il riquadro "Season two is here" che stava sopra la sezione.
   L'idea e' la spia rossa di una videocamera professionale in registrazione:
   dice che la stagione due e' in corso adesso, e lo dice con un oggetto che
   appartiene al mestiere raccontato dal podcast invece che alla pubblicita'.

   Rettangolo Pomodoro pieno con testo Avorio: 5.03:1, conforme AA. Il
   carattere e' quello di testo e non Bellefair, perche' a 11 px con la
   spaziatura ampia il maiuscolo di un carattere con grazie diventa
   faticoso da leggere.

   Il pallino pulsa: e' l'unico elemento della pagina che si muove da solo
   a riposo, come lo era la pillola che questa spia sostituisce. Uno si
   nota, due si annullerebbero a vicenda.
--------------------------------------------------------------------------- */

/* La riga che ospita la spia: sta fra l'intestazione e le schede.
   Centrandola nel contenitore finisce esatta sopra la scheda di mezzo, perche'
   in una griglia di tre colonne uguali separate da due spazi uguali il centro
   della colonna centrale coincide con il centro del contenitore. E' un fatto
   aritmetico, non un allineamento a occhio, e resta vero a ogni larghezza. */
.episodes__onair {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.onair {
  display: inline-flex;
  align-items: center;
  /* La spia non deve stirarsi a tutta larghezza dentro il proprio
     contenitore flex: senza questo diventava un rettangolo rosso da bordo a
     bordo, che non e' una spia di registrazione ma un'insegna. */
  flex: 0 0 auto;
  gap: 0.55rem;
  max-width: none;
  padding: 0.45rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--avorio);
  background-color: var(--pomodoro);
  border-radius: 2px;
}

.onair__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--avorio);
  animation: rec-pulse 1.6s ease-in-out infinite;
}

/* Il ritmo e' quello di una spia di registrazione: acceso a lungo, un
   affievolimento breve. Una pulsazione simmetrica sembrerebbe un caricamento
   in corso, che e' il significato opposto. */
@keyframes rec-pulse {
  0%, 55%, 100% { opacity: 1;    transform: scale(1); }
  75%           { opacity: 0.25; transform: scale(0.7); }
}

/* --- Pastiglia NEW sul nuovo episodio --------------------------------------
   In alto a sinistra sulla miniatura, come nel riferimento indicato dal
   founder, adattata alla nostra tavolozza: Pomodoro pieno con testo Avorio,
   5.03:1, e maiuscolo del carattere di testo per restare leggibile a corpo
   molto piccolo. Il maiuscolo di Bellefair, a 11 px, non lo sarebbe. */
.episode__new {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 0.3rem 0.7rem;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--avorio);
  background-color: var(--pomodoro);
  /* Nessun angolo arrotondato e nessuno scostamento: la pastiglia combacia
     con lo spigolo della miniatura. Staccata di 10 px finiva a ridosso del
     volto e del nome dell'ospite, e sembrava appoggiata sull'immagine invece
     che applicata alla scheda. Agganciata allo spigolo diventa parte del
     riquadro, e libera la fascia dove il ritratto ha la testa. */
  border-radius: 0;
}

.episodes__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.episodes__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.episode {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: var(--border-thin) solid rgba(20, 20, 20, 0.14);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition);
}

.episode:hover {
  border-color: var(--pomodoro);
  transform: translateY(-3px);
}

/* Facciata dell'episodio: mostra la miniatura, l'iframe di YouTube viene
   creato solo al clic. Evita di caricare gli script di terze parti (e i
   relativi cookie) a ogni visita. */
/* contain + translateZ isolano il riquadro in un livello a se'.
   Senza, il browser ricalcola la fusione mix-blend-mode dell'immagine
   contro tutto cio' che ha sotto a ogni fotogramma di scorrimento: e' una
   delle cause tipiche dello scorrimento a scatti su pagine con duotone. */
.episode__media {
  position: relative;   /* ancora per la pastiglia NEW */
  contain: paint;
  transform: translateZ(0);
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background-color: var(--vino);
  overflow: hidden;
}

.episode__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* mix-blend-mode luminosity prende la luminosita' dall'immagine e
     la tinta dal fondo Vino: un duotone vero, senza ritoccare i file. */
  filter: grayscale(1) contrast(1.12);
  mix-blend-mode: luminosity;
  opacity: 0.92;
  transition: filter var(--transition), opacity var(--transition);
}

.episode:hover .episode__media img,
.episode__play:focus-visible img {
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
}

/* Segnaposto tipografico usato finche' non arrivano le fotografie. */
.episode__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-3);
  font-family: var(--font-accent);
  font-size: 2.5rem;
  color: var(--avorio-tenue);
  text-align: center;
}

.episode__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
}

/* Velo scuro sopra la miniatura: senza, il pulsante di play sparisce
   sulle immagini chiare. */
.episode__play-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(70, 5, 4, 0.34);
  transition: background-color var(--transition);
}

.episode__play:hover .episode__play-overlay {
  background-color: rgba(70, 5, 4, 0.12);
}

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

/* L'iframe sostituisce il pulsante solo dopo il clic. */
.episode__iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.episode__play svg {
  position: relative;   /* sopra il velo */
  width: 3.5rem;
  height: 3.5rem;
  padding: 1rem;
  color: var(--avorio);
  background-color: var(--pomodoro);
  border-radius: 50%;
  transition: transform var(--transition);
}

.episode__play:hover svg {
  transform: scale(1.08);
}

.episode__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-2);
  padding: var(--space-3);
}

.episode__number {
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--pomodoro);
}

.episode__guest {
  font-size: 1.375rem;
}

/* Dicitura della lingua dell'intervista. Non e' un dettaglio di servizio:
   il pubblico che questa pagina vuole conquistare e' internazionale, e per
   chi non parla italiano sapere in anticipo se una puntata e' in inglese
   decide se cliccare o no. Meglio dirlo prima del clic che dopo. */
.episode__lang {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-left: 0.5rem;
  padding: 0.1rem 0.45rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  vertical-align: 0.15em;
  color: var(--pomodoro);
  border: var(--border-thin) solid rgba(204, 23, 2, 0.4);
  border-radius: 2px;
}

.episode__role {
  font-size: var(--text-small);
  color: rgba(20, 20, 20, 0.66);
  margin-top: calc(var(--space-1) * -1);
}

/* Il titolo vero dell'episodio, in italiano: la lingua in cui la
   conversazione e' avvenuta davvero. Su una pagina in inglese diventa
   un segnale di autenticita', non un'incoerenza. */
.episode__title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  line-height: 1.25;
  text-transform: none;
  color: rgba(20, 20, 20, 0.78);
}

.episode__hook {
  font-size: var(--text-small);
}

.episode__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}

.episode__link {
  /* inline-flex + altezza minima: WCAG 2.2 chiede bersagli di almeno
     24x24px, e un semplice link di testo resterebbe sotto. */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pomodoro);
  box-shadow: inset 0 -1px 0 currentColor;
  transition: color var(--transition);
}

.episode__link:hover {
  color: var(--vino);
}

/* Episodio registrato ma non ancora pubblicato: stessa forma degli altri
   link, ma spento e non cliccabile. */
.episode__link--soon {
  color: rgba(20, 20, 20, 0.45);
  box-shadow: none;
}


/* =============================================================================
   12b. OUR GUESTS — il carosello

   Quindici ritratti che attraversano lo schermo su piu' piani di profondita'.
   Non e' una fila: e' una composizione a gradini, dove ogni carta ha una
   quota e una distanza proprie, e la profondita' e' vera prospettiva, non
   una scala simulata.

   COME E' FATTO, DALL'ESTERNO VERSO L'INTERNO

     .wheel__stage    porta la prospettiva. Una sola, condivisa: tutte le
                      carte hanno lo stesso punto di fuga e appartengono
                      quindi alla stessa scena, non a quindici scene diverse.

     .wplane          un piano di profondita'. Ce ne sono CINQUE, uno per
                      ogni quota del motivo. E' l'unico elemento che si
                      muove: JavaScript ne aggiorna la trasformazione a ogni
                      fotogramma. Cinque scritture per fotogramma, non
                      quarantacinque.

     .gcard           la carta, ferma dentro il proprio piano. Posizione,
                      altezza e profondita' vengono scritte una volta sola
                      quando il nastro viene costruito.

     .gcard__body     la reazione al passaggio del mouse. Sta su un elemento
                      separato dalla carta perche' i due movimenti non devono
                      mescolarsi: la carta e' governata dal nastro, il corpo
                      dal cursore.

   PERCHE' CINQUE PIANI E NON UN NASTRO SOLO

   Con una prospettiva condivisa, due carte a profondita' diverse che si
   spostano della stessa quantita' NON si spostano ugualmente a schermo: la
   piu' vicina corre di piu'. E' parallasse, ed e' bella da vedere — ma se il
   nastro fosse uno solo le distanze fra le carte cambierebbero durante la
   corsa, fino a farle compenetrare. Raggruppandole invece per profondita' e
   spostando ogni gruppo di una quantita' proporzionale alla propria scala
   (T diviso la scala del piano), lo spostamento a schermo torna identico per
   tutte: le distanze restano quelle calcolate, e la parallasse resta solo
   dove serve, cioe' nella grandezza delle carte.

   IL PUNTO DI GIUNZIONE

   Il motivo di profondita' e' lungo cinque quote e gli ospiti sono quindici:
   quindici e' multiplo di cinque, quindi la composizione si richiude su se
   stessa. Il gruppo viene ripetuto tre volte e il nastro, arrivato in fondo
   a una ripetizione, torna indietro esattamente di una: il fotogramma prima
   e il fotogramma dopo il salto sono identici pixel per pixel. La giunzione
   non esiste come istante osservabile.

   Nessuna sfumatura ai bordi: le carte entrano ed escono con un taglio
   netto, come il nastro del payoff sopra il footer.
============================================================================= */

.people {
  border-top: var(--border-thin) solid rgba(20, 20, 20, 0.12);
  overflow: hidden;
}

.people__head {
  max-width: 46rem;
}

/* Le misure del carosello stanno tutte qui, e JavaScript le LEGGE da qui:
   non c'e' un secondo elenco di numeri nel codice da tenere allineato a
   questo. Cambiare la larghezza di una carta in un media query e' quindi
   sufficiente perche' l'intera geometria si ricalcoli da sola. */
.wheel {
  --gcard-w: 10.5rem;      /* larghezza della carta                        */
  --gcard-ratio: 1.3;      /* altezza = larghezza x questo                 */
  --gcard-gap: 1.25rem;    /* spazio fra due carte, misurato A SCHERMO     */
  --gcard-lift: 91px;      /* di quanto si avvicina la carta sotto il mouse */
  /* Velocita' in pixel al secondo, misurata a schermo. Il riferimento e' il
     nastro con il payoff sopra il footer, misurato a 71,29 px/s: il founder
     aveva chiesto che gli ospiti corressero il dieci per cento piu' in
     fretta, cioe' 78. Sul telefono e sul tablet il valore scende in
     proporzione allo schermo, altrimenti la stessa velocita' assoluta su
     una finestra stretta si legge come una corsa. */
  --wheel-speed: 58;       /* px al secondo                                */

  position: relative;
  margin-top: var(--space-5);
  overflow: hidden;
}

.wheel__stage {
  position: relative;
  height: 21rem;
  /* La prospettiva sta qui e non sulle carte: dichiarata sul contenitore,
     tutte le carte condividono lo stesso punto di fuga. 1500px e' una
     distanza dell'osservatore lunga: la profondita' si legge, ma nessuna
     carta arriva a deformarsi. */
  perspective: 1500px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  /* pan-y lascia al browser lo scorrimento verticale della pagina e tiene
     per noi solo il trascinamento orizzontale: sul telefono il carosello
     non ruba mai lo scroll. */
  touch-action: pan-y;
  cursor: grab;
}

.wheel__stage.is-dragging {
  cursor: grabbing;
}

/* Un piano di profondita'. Ha dimensione zero ed e' ancorato al centro del
   palco: le carte dentro si posizionano rispetto a quel centro, cosi' la
   composizione resta centrata a qualunque larghezza di finestra. */
.wplane {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.gcard {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--gcard-w);
  height: calc(var(--gcard-w) * var(--gcard-ratio));
  /* meta' carta in su e a sinistra: cosi' la trasformazione scritta da
     JavaScript posiziona il CENTRO della carta, non il suo spigolo */
  margin: calc(var(--gcard-w) * var(--gcard-ratio) / -2) 0 0
          calc(var(--gcard-w) / -2);
  transform-style: preserve-3d;
}

/* Il corpo della carta: e' questo che reagisce al cursore, avvicinandosi.
   translateZ e non scale, e la differenza si vede: con la prospettiva
   condivisa avvicinarsi lungo Z produce un ingrandimento prospettico vero,
   con la carta che si stacca dal piano; scale sarebbe stato un disegno che
   diventa piu' grande restando dov'era. */
.gcard__body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(0);
  transition: transform 520ms cubic-bezier(0.22, 0.68, 0.24, 1);
}

/* Quanto si avvicina non e' un numero fisso: scala con la carta, come tutto
   il resto della geometria. JavaScript legge lo stesso valore per sapere
   quanto la carta crescera' e tenerne conto nel centrare la composizione —
   una misura sola, letta da tutti e due. */
.gcard.is-active .gcard__body {
  transform: translateZ(var(--gcard-lift));
}

/* La cornice. Il fondo Avorio diventa Vino: e' il primo dei tre strati che
   fanno virare la carta al bordeaux. */
.gcard__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 3px;
  background-color: var(--avorio);
  border: 1px solid rgba(20, 20, 20, 0.12);
  box-shadow: 0 2px 10px rgba(20, 20, 20, 0.07);
  transition: background-color 520ms ease,
              border-color 520ms ease,
              box-shadow 520ms ease;
}

.gcard.is-active .gcard__frame {
  background-color: var(--vino);
  border-color: var(--vino);
  box-shadow: 0 26px 54px rgba(70, 5, 4, 0.4);
}

/* Il ritratto. E' un ritaglio su fondo trasparente: appoggia sul bordo
   inferiore della cornice e la riempie in altezza, senza mai essere
   tagliato ai lati. */
.gcard__img {
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 95%;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  /* Secondo strato del viraggio. L'elenco delle funzioni e' IDENTICO nei due
     stati, valori neutri a riposo: e' la condizione perche' il browser possa
     interpolare un filtro invece di scambiarlo di colpo. seppia porta
     l'immagine su un bruno caldo, hue-rotate lo sposta verso il rosso del
     Vino, saturate lo scava. */
  filter: grayscale(1) sepia(0) hue-rotate(0deg) saturate(1)
          brightness(1) contrast(1.02);
  transition: filter 560ms ease;
}

.gcard.is-active .gcard__img {
  filter: grayscale(1) sepia(0.62) hue-rotate(-26deg) saturate(2.3)
          brightness(0.84) contrast(1.12);
}

/* Terzo strato: il Vino che sale dal basso. E' una sfumatura, non una
   velatura piena — il bordeaux diventa dominante progressivamente, piu'
   fitto sui piedi della carta e appena accennato all'altezza del volto, e
   fa da fondo alla didascalia senza bisogno di una barra opaca. */
.gcard__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(70, 5, 4, 0.96) 0%,
              rgba(70, 5, 4, 0.78) 26%,
              rgba(70, 5, 4, 0.22) 62%,
              rgba(70, 5, 4, 0) 88%);
  opacity: 0;
  transition: opacity 560ms ease;
  pointer-events: none;
}

.gcard.is-active .gcard__wash {
  opacity: 1;
}

.gcard__label {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--space-2);
  text-align: left;
}

/* Nome e casa entrano sfalsati, il nome per primo. Il ritardo sta SOLO
   nello stato attivo: all'uscita e' quindi zero per entrambi, e la
   didascalia si ritira di colpo invece di trascinarsi dietro al cursore.
   Un ingresso in due tempi e un'uscita in uno sono cio' che fa sembrare la
   carta reattiva; il contrario la farebbe sembrare lenta. */
.gcard__name,
.gcard__house {
  display: block;
  color: var(--avorio);
  opacity: 0;
  transform: translateY(0.7rem);
  transition: opacity 380ms ease, transform 380ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Il nome domina: carattere dei titoli, corpo maggiore, colore pieno. */
.gcard__name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.14;
}

/* La casa e' la nota: senza grazie, piccola, maiuscoletto spaziato. */
.gcard__house {
  margin-top: 0.2rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--avorio-tenue);
}

.gcard.is-active .gcard__name {
  opacity: 1;
  transform: none;
  transition-delay: 70ms;
}

.gcard.is-active .gcard__house {
  opacity: 1;
  transform: none;
  transition-delay: 170ms;
}

/* DOVE STANNO I NOMI, PER CHI NON PUO' PASSARE COL MOUSE

   Il carosello e' dichiarato decorativo (aria-hidden sul palco) e non
   contiene nulla di focalizzabile: le carte non fanno niente se cliccate, e
   trasformarle in pulsanti avrebbe promesso un'azione che non esiste,
   oltre a mettere quindici fermate del tabulatore dentro un nastro che
   scorre. L'informazione vive quindi in due posti che non dipendono dal
   cursore: l'elenco qui sotto, che i lettori di schermo leggono per intero,
   e — su ogni dispositivo senza passaggio del mouse — le didascalie sempre
   accese (vedi @media (hover: none) piu' avanti).

   L'elenco e' fuori dalla vista ma dentro il documento: non display: none,
   che lo toglierebbe anche a loro. */
.wheel__roster {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  list-style: none;
}

.wheel__noscript {
  padding: var(--space-4) var(--space-3);
  text-align: center;
}

/* -----------------------------------------------------------------------
   DOVE IL MOUSE NON C'E'

   Sul telefono e sul tablet il passaggio del cursore non esiste: se le
   didascalie restassero legate a quello, nome e casa non comparirebbero
   mai. Qui sono quindi sempre accese, insieme al viraggio al bordeaux —
   che diventa l'aspetto normale della carta invece che una reazione.

   Non le si accende con un tocco di proposito: il tocco sul palco e' gia'
   il gesto per trascinare il nastro, e i due si darebbero fastidio.
----------------------------------------------------------------------- */

@media (hover: none) {

  .gcard__frame {
    background-color: var(--vino);
    border-color: var(--vino);
  }

  .gcard__img {
    filter: grayscale(1) sepia(0.5) hue-rotate(-26deg) saturate(1.9)
            brightness(0.88) contrast(1.08);
  }

  .gcard__wash {
    opacity: 1;
  }

  .gcard__name,
  .gcard__house {
    opacity: 1;
    transform: none;
  }
}

/* -----------------------------------------------------------------------
   LA VERSIONE FERMA

   Con prefers-reduced-motion il carosello non parte affatto: JavaScript
   mette questa classe e costruisce una fila piatta, scorrevole a mano,
   senza prospettiva e con le didascalie sempre visibili. Non e' una
   versione ridotta della stessa cosa: e' l'altra cosa, quella giusta per
   chi ha chiesto di non vedere movimento.
----------------------------------------------------------------------- */

.wheel--calmo .wheel__stage {
  height: auto;
  display: flex;
  gap: var(--gcard-gap);
  padding: 0 var(--space-3) var(--space-2);
  perspective: none;
  transform-style: flat;
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: auto;
  cursor: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.wheel--calmo .gcard {
  position: relative;
  flex: 0 0 auto;
  top: auto;
  left: auto;
  margin: 0;
  transform: none !important;
  scroll-snap-align: center;
}

.wheel--calmo .gcard__body,
.wheel--calmo .gcard__img {
  transition: none;
}

.wheel--calmo .gcard__frame {
  background-color: var(--vino);
  border-color: var(--vino);
}

.wheel--calmo .gcard__wash {
  opacity: 1;
}

.wheel--calmo .gcard__name,
.wheel--calmo .gcard__house {
  opacity: 1;
  transform: none;
}


/* =============================================================================
   13. VOICES — le frasi degli ospiti

   Tre citazioni testuali, fornite dal founder. Non sono state inventate ne'
   ritoccate: sono parole di persone reali e vanno riportate come sono.

   La sezione e' su fondo Vino, e non e' una scelta decorativa. Fra i Numeri
   e le Case c'erano quattro sezioni Avorio di fila: il tratto piu' piatto
   della pagina. Una banda scura a meta' di quel percorso rimette un respiro,
   e cade nel punto giusto — subito dopo gli episodi, dove il visitatore ha
   appena visto CHI parla ed e' pronto a leggere COSA dice.

   Le citazioni hanno un peso diverso fra loro: la seconda e' lunga il doppio
   delle altre. Affiancate (da 64rem) le colonne hanno comunque la stessa
   altezza, e il vuoto delle due corte si raccoglie sopra il nome, che sta
   in fondo: cosi' i tre nomi si allineano e i tre filetti finiscono insieme.
   Vedi la regola nella sezione 64rem.
============================================================================= */

.voices__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

/* Scheda semplice: nessuno sfondo proprio, solo il filetto rosso a
   sinistra. Il Vino lo fornisce gia' la sezione (.section--vino),
   e una foto dietro il testo era stata provata e poi tolta su richiesta:
   qui il testo porta il peso da solo, con l'aiuto del grassetto sotto. */
.voice {
  padding: var(--space-4) var(--space-3);
  border-left: 2px solid var(--pomodoro);
}

/* Base in Instrument Sans, come nelle tavole Instagram: non e' un titolo,
   e' parlato. Il Bellefair che c'era prima faceva leggere le tre citazioni
   come tre sottotitoli di sezione, e soprattutto non reggeva l'enfasi —
   carica solo il peso 400, quindi grassetto e corsivo sarebbero stati
   entrambi sintetizzati dal browser. Instrument Sans e' variabile: qui il
   grassetto e' un peso vero e il corsivo un'inclinazione pulita. */
.voice__text {
  font-family: var(--font-body);
  font-size: var(--text-h3);
  line-height: 1.34;
  text-transform: none;
  /* niente giustificazione qui: su righe cosi' corte aprirebbe voragini
     fra le parole, e una citazione va letta come e' stata detta */
  text-align: left;
  /* niente sillabazione: nessuna parola spezzata a fine riga */
  hyphens: none;
  max-width: 30ch;
  /* Righe di lunghezza simile invece di una lunga e una monca: il bordo
     destro si legge come una forma, non come un seghettato casuale. */
  text-wrap: balance;
  /* VIRGOLETTA APPESA. Le virgolette d'apertura escono dal margine, cosi'
     la prima lettera della citazione sta sulla stessa verticale delle
     righe sotto. Senza, "La" rientrava di 0,41 em rispetto a "gastronomia":
     la colonna aveva due bordi sinistri. 0,409 em e' la larghezza misurata
     della virgoletta in Instrument Sans; il margine interno della scheda
     (24 px) la accoglie a ogni corpo. */
  text-indent: -0.409em;
}

/* I tre livelli di enfasi. Grassetto sulla frase portante, corsivo sulla
   coda, e una parola in Pinyon Script. */
.voice__text strong {
  font-weight: 700;
}

.voice__text em {
  font-style: italic;
}

/* La parola in Pinyon Script. Stesse ragioni di .accent — altezza-x molto
   piccola, quindi corpo maggiorato — ma qui il rapporto e' 1.3 e non 1.22,
   perche' accanto a un carattere senza grazie a peso pieno lo scritto ha
   bisogno di un po' piu' di corpo per pesare uguale.

   line-height: 0 E display: inline, E NON inline-block CON line-height: 1.

   E' la differenza fra un'interlinea regolare e una che salta. Un
   inline-block entra nella riga con tutta la propria altezza, e a corpo 1.3em
   quell'altezza e' maggiore della riga che lo ospita: la riga si allargava di
   3,86 px, e solo quella. Misurato sul blocco intero, le tre citazioni erano
   alte 4,08 - 7,08 - 5,08 interlinee invece di 4 - 7 - 5: un gradino
   visibile, sempre in corrispondenza della parola scritta.

   Un elemento inline con interlinea zero, invece, non contribuisce alcuna
   altezza alla riga: il glifo viene disegnato lo stesso — il testo in linea
   non viene mai ritagliato — ma la riga resta quella di tutte le altre.
   Verificato: 4,000 - 6,999 - 4,999 interlinee. */
.voice__script {
  font-family: var(--font-accent);
  font-size: 1.3em;
  font-style: normal;
  display: inline;
  line-height: 0;
  letter-spacing: 0;
  vertical-align: -0.06em;
}

.voice__source {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-small);
  color: var(--avorio-tenue);
}

.voice__source strong {
  display: block;
  color: var(--avorio);
  font-weight: 600;
}


/* =============================================================================
   14. LISTEN
============================================================================= */

.listen {
  text-align: center;
}

.listen__platforms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.listen__follow {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-thin) solid var(--avorio-ombra);
}

.listen__follow-label {
  /* senza margin auto il paragrafo, largo al massimo 65ch, resterebbe
     appoggiato a sinistra dentro un contenitore piu' largo */
  margin-inline: auto;
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--avorio-tenue);
}

.listen__socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* I social sono icone, non bottoni di testo come le piattaforme: il
   trattamento diverso dice, senza doverlo scrivere, che sono un invito
   diverso. L'area cliccabile e' 48x48 px, ben oltre il minimo di 24x24
   previsto dalle WCAG 2.2, perche' un'icona senza etichetta va colpita
   al primo tentativo anche col pollice. */
.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* flex: 0 0 auto e non solo width: dentro un contenitore flex la
     larghezza dichiarata e' solo un punto di partenza, e un elemento che
     contiene una sola icona senza testo non ha nulla che ne impedisca la
     compressione. Su schermo molto stretto il cerchio si schiaccerebbe
     fino a diventare una fessura, restando cliccabile ma invisibile. */
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  color: var(--avorio-tenue);
  border: var(--border-thin) solid var(--avorio-ombra);
  border-radius: 50%;
  transition: color var(--transition),
              border-color var(--transition),
              background-color var(--transition),
              transform var(--transition);
}

.social svg {
  width: 22px;
  height: 22px;
}

.social:hover,
.social:focus-visible {
  color: var(--vino);
  background-color: var(--avorio);
  border-color: var(--avorio);
  transform: translateY(-2px);
}


/* =============================================================================
   15. MARQUEE
   Puramente decorativo: e' marcato aria-hidden nell'HTML perche' ripetere
   otto volte la stessa frase a uno screen reader non ha alcun senso.
============================================================================= */

.marquee {
  padding-block: var(--space-3);
  overflow: hidden;
  white-space: nowrap;
  color: var(--avorio);
  background-color: var(--vino);
  border-block: var(--border-thin) solid var(--avorio-ombra);
}

.marquee__track {
  /* dichiarare in anticipo che questa proprieta' cambiera' permette al
     browser di preparare il livello una volta sola invece di ricrearlo */
  will-change: transform;
  display: inline-flex;
  /* Il doppio di prima (--space-4 era 2.5rem): la richiesta era esplicita,
     "distanziate il doppio", per alleggerire una scritta ripetuta troppe
     volte troppo vicina a se stessa. */
  gap: calc(var(--space-4) * 2);
  padding-left: var(--space-4);
  /* La durata sale insieme al vuoto in piu' fra le scritte, cosi' la
     VELOCITA' resta quella di riferimento (71.29 px/s, misurata quando la
     ruota di Our Guests e' stata tarata al 10% in piu' di questa): senza
     alzarla, lo stesso testo su un nastro piu' largo nello stesso tempo
     avrebbe significato scorrere piu' veloce, spostando anche il traguardo
     della ruota senza che nessuno l'avesse chiesto. */
  animation: marquee-scroll 35.4s linear infinite;
}

.marquee__item {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--avorio-tenue);
}

.marquee__item .accent {
  color: var(--avorio);
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* =============================================================================
   16. ITALIA REFINEMENT — blocco di raccordo

   Fondo Pomodoro, confermato dal founder.

   La richiesta era "sfondo Vino o Pomodoro" e "CTA rossa con la stessa
   animazione di Spotify". Scelto il Pomodoro, le due cose non stanno
   insieme: un bottone rosso su fondo rosso non si vede. Delle due si e'
   tenuta quella che porta il significato — l'animazione, che rende le CTA
   una famiglia riconoscibile — e si e' cambiato il colore, che era
   l'unica variabile a non poter restare. La CTA e' quindi .btn--light:
   stesso movimento, Avorio su Vino invece che Avorio su Pomodoro.
============================================================================= */

/* Sezione piu' corta, su richiesta: chiude la pagina, non deve competere in
   peso con quelle che raccontano. La spaziatura verticale e' quindi ridotta
   rispetto alle altre sezioni. */
.refinement {
  padding-block: var(--space-5);
  text-align: center;
}

/* NOTA. Qui c'era un secondo blocco .section--pomodoro, scritto quando il
   Pomodoro era ancora solo un'ipotesi di riserva per questa sezione. Portava
   con se' una regola .section--pomodoro .eyebrow in Avorio smorzato, che
   stando piu' in basso nel file vinceva silenziosamente su quella corretta
   della sezione 5 e riportava l'occhiello a 2.62:1, cioe' sotto lo standard.
   Il blocco e' stato rimosso: la superficie Pomodoro e' definita una volta
   sola, fra le utility di layout, insieme a tutte le altre.

   Vale come promemoria: due dichiarazioni dello stesso selettore in punti
   diversi del foglio non danno nessun errore, e la piu' in basso vince
   comunque. E' il tipo di difetto che si trova misurando, non guardando. */

/* Due righe, e due righe soltanto. Ogni <span> e' un blocco: cosi' il punto
   fermo cade sempre a fine riga anche quando la finestra si stringe, invece
   di lasciare parole orfane sulla riga successiva.

   Il vincolo che comanda e' la prima riga, che e' la piu' lunga: 57
   caratteri, cioe' 26.8 em in Bellefair. Perche' stia su una riga sola,
   come richiesto, il corpo non puo' superare la larghezza del contenitore
   diviso 26.8. Con il contenitore pieno (1120 px su desktop) il limite e'
   41 px; il valore massimo del clamp qui sotto e' 34 px, quindi resta
   dentro con margine. Sotto i 1024 px non ci sta a nessun corpo leggibile
   e va a capo: e' il compromesso corretto, perche' l'alternativa sarebbe
   rimpicciolire il testo fino a renderlo una didascalia. */
.refinement__quote {
  max-width: none;
  margin-inline: auto;
  margin-bottom: var(--space-4);
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 2.6vw, 2.125rem);
  line-height: var(--leading-title);
  text-transform: none;
  /* text-wrap: balance ridistribuirebbe le righe di sua iniziativa: qui la
     divisione e' decisa dai due <span>, non dal browser */
  text-wrap: initial;
}

.refinement__quote span {
  display: block;
}

.refinement__quote span + span {
  margin-top: var(--space-2);
}

.refinement__quote .accent {
  font-size: 1.15em;
}


/* =============================================================================
   17. FOOTER
============================================================================= */

.footer {
  padding-block: var(--space-5);
  color: var(--avorio);
  background-color: var(--vino);
}

.footer__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer__logo {
  height: 2rem;
  width: auto;
}


.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* I social del footer sono icone, come nella sezione Listen: la pagina ha
   un solo modo di rappresentarli invece di due. Qui sono piu' piccoli perche'
   il footer e' una zona di servizio e non una chiamata all'azione. */
.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.social--sm {
  width: 2.5rem;
  height: 2.5rem;
}

.social--sm svg {
  width: 18px;
  height: 18px;
}

.footer__links a {
  font-size: var(--text-small);
  color: var(--avorio-tenue);
  transition: color var(--transition);
}

.footer__links a:hover {
  color: var(--avorio);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  justify-content: space-between;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  font-size: var(--text-eyebrow);
  color: var(--avorio-tenue);
  border-top: var(--border-thin) solid var(--avorio-ombra);
}


/* =============================================================================
   17b. TORNA SU

   Compare solo dopo la prima schermata: prima non serve, e un pulsante che
   galleggia sulla hero le ruberebbe attenzione. Fisso in basso a destra su
   tutte le dimensioni, con l'accortezza mobile di stare sopra la barra del
   browser (env(safe-area-inset-bottom) tiene conto della zona di sistema
   sugli iPhone senza tasto fisico).
============================================================================= */

.to-top {
  position: fixed;
  right: var(--space-2);
  bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  z-index: 40;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;

  color: var(--avorio);
  background-color: var(--vino);
  border: var(--border-thin) solid var(--avorio-ombra);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(20, 20, 20, 0.22);

  /* Stato di riposo: invisibile e leggermente piu' in basso.
     pointer-events: none evita che intercetti i clic mentre e' nascosto. */
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity var(--transition),
              transform var(--transition),
              background-color var(--transition);
}

.to-top svg {
  width: 20px;
  height: 20px;
}

.to-top.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.to-top:hover,
.to-top:focus-visible {
  background-color: var(--pomodoro);
  border-color: var(--pomodoro);
}

/* Su schermo largo il pulsante si allontana un po' dal bordo e cresce. */
@media (min-width: 48rem) {
  .to-top {
    right: var(--space-4);
    bottom: var(--space-4);
    width: 3rem;
    height: 3rem;
  }
}


/* =============================================================================
   18. PAGINE DI TESTO (privacy e cookie policy)
============================================================================= */

.doc {
  padding-block: var(--space-5) var(--space-6);
}

.doc h1 {
  font-size: var(--text-h2);
  margin-bottom: var(--space-2);
}

.doc h2 {
  font-size: var(--text-h3);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

.doc p,
.doc li {
  margin-bottom: var(--space-2);
}

.doc ul {
  list-style: disc;
  padding-left: var(--space-3);
}

.doc a {
  color: var(--pomodoro);
  border-bottom: var(--border-thin) solid currentColor;
}

.doc__meta {
  font-size: var(--text-small);
  color: rgba(20, 20, 20, 0.66);
  margin-bottom: var(--space-4);
}

/* Nota redazionale visibile solo finche' i testi non sono definitivi. */
.doc__todo {
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--text-small);
  background-color: rgba(204, 23, 2, 0.08);
  border-left: 3px solid var(--pomodoro);
}


/* =============================================================================
   19. MEDIA QUERY
   Il progetto e' scritto "mobile first": gli stili qui sopra valgono per i
   telefoni, queste regole aggiungono spazio man mano che lo schermo cresce.
============================================================================= */

@media (min-width: 48rem) {          /* 768px — tablet */

  :root {
    --space-6: 9rem;
  }

  /* Misura intermedia del carosello. Sul tablet il dito c'e' ancora ma lo
     schermo e' largo: carte piu' grandi del telefono, corsa un poco piu'
     svelta, e il resto invariato. */
  .wheel {
    --gcard-w: 12.5rem;
    --gcard-gap: 1.75rem;
    --gcard-lift: 108px;
    --wheel-speed: 68;
  }

  .wheel__stage {
    height: 25rem;
  }

  .header {
    padding-inline: var(--space-4);
  }

  .header__nav,
  .header__cta {
    display: flex;
  }

  /* Da qui in su c'e' spazio nella testata: il selettore di lingua risale
     accanto al menu, e quello del pannello a scomparsa sparisce. */
  .header .lang {
    display: flex;
  }

  .mobile-nav .lang {
    display: none;
  }

  .header__toggle,
  .mobile-nav {
    display: none;
  }

  .pillars__grid {
    flex-direction: row;
  }

  .pillar {
    flex: 1;
    padding: var(--space-5) var(--space-4);
  }

  .pillars__foot {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  .pillars__foot-text {
    margin-inline: 0;
    max-width: 24ch;
  }

  /* Sopra i 768px la citazione dell'host puo' respirare: la colonna e'
     larga a sufficienza perche' 52 caratteri per riga restino comodi. */
  .about__quote {
    padding-left: var(--space-4);
  }

  .about__quote p {
    max-width: 52ch;
  }

  .episodes__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

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


  .footer__grid {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

@media (min-width: 64rem) {          /* 1024px — desktop */

  :root {
    --misura-utile: calc(min(100vw, var(--container)) - 2 * var(--space-4));
  }

  .container {
    padding-inline: var(--space-4);
  }

  /* Le due colonne di About si affiancano solo qui, non gia' a 768 px:
     a quella larghezza mezza colonna sarebbe di 288 px e le tre righe
     dell'affermazione non ci starebbero a un corpo leggibile. */
  .about__grid {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-5);
  }

  .about__statement,
  .about__body {
    flex: 1;
  }

  /* La frase della chiusura di Our Values sta su una riga sola accanto
     alla CTA, come richiesto. */
  .pillars__foot-text {
    white-space: nowrap;
  }

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

  /* LE TRE CITAZIONI AFFIANCATE: SOLO DA QUI, NON GIA' DA 768 PX.

     A 768 px ogni colonna lasciava al testo 165 px, cioe' una parola per
     riga a corpo pieno: "La cucina e / la / gastronomia", con un "la"
     rimasto solo. Sul tablet le citazioni stanno quindi una sotto l'altra,
     come sul telefono, e si affiancano solo quando c'e' la misura per farlo.

     Le colonne hanno ora la stessa altezza e il nome di chi parla scende in
     fondo (margin-top: auto): i tre nomi stanno sulla stessa linea e i tre
     filetti rossi hanno la stessa lunghezza. Prima ogni scheda finiva dove
     finiva il proprio testo, e la riga dei nomi scendeva a gradini.

     Il margine destro della scheda si azzera: la colonna e' gia' separata
     dalla successiva dallo spazio fra le due, e quei 24 px servono al
     testo, che cosi' tiene due o tre parole per riga invece di una. */
  .voices__grid {
    flex-direction: row;
    align-items: stretch;
  }

  .voice {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    padding-right: 0;
  }

  /* Corpo dedicato alle citazioni affiancate: 36 px su una colonna di
     300 lasciavano otto caratteri per riga. Scende quanto basta perche'
     ogni riga porti un pensiero. Si ferma a 28 px, e non per caso: da
     1200 px in su il contenitore smette di allargarsi, quindi la colonna
     resta di 323 px, e un corpo che continuasse a crescere tornerebbe a
     spezzare le righe (a 1920 px la seconda citazione tornava a 7). */
  .voice__text {
    font-size: clamp(1.5rem, 0.9rem + 1.05vw, 1.75rem);
  }

  .voice__source {
    margin-top: auto;
    padding-top: var(--space-3);
  }

  /* ALLINEARE I NOMI, NON LE DIDASCALIE.

     Con la sola colonna flessibile i nomi si allineano finche' le tre
     didascalie hanno la stessa altezza. A 1024 px "CEO e Presidente, Kiton
     e Pitti Immagine" va su due righe, la sua didascalia e' piu' alta, e il
     nome di De Matteis saliva di 26 px rispetto agli altri due.

     Con subgrid le tre schede condividono le stesse due righe di griglia:
     la prima e' alta quanto la citazione piu' lunga, la seconda comincia
     alla stessa quota per tutte. I nomi stanno cosi' sempre sulla stessa
     linea, e il ruolo piu' lungo va a capo verso il basso senza spostare
     niente. Dove subgrid non c'e', resta la versione flessibile qui sopra. */
  @supports (grid-template-rows: subgrid) {
    .voices__grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: auto auto;
      gap: 0 var(--space-4);
    }

    .voice {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
    }

    .voice__source {
      margin-top: 0;
    }
  }

  /* Carte piu' grandi da desktop: il carosello deve leggersi come ritratti,
     non come francobolli. Si cambiano solo queste misure: la geometria — le
     posizioni, le distanze, la lunghezza del giro, quante ripetizioni
     servono a coprire lo schermo — JavaScript la ricalcola da sola leggendo
     proprio questi valori. */
  .wheel {
    --gcard-w: 15rem;
    --gcard-gap: 2.125rem;
    --gcard-lift: 130px;
    --wheel-speed: 78;
  }

  .wheel__stage {
    height: 29rem;
  }

  .gcard__name {
    font-size: 1.5rem;
  }


  /* I tre dati si affiancano solo da qui, non gia' a 768 px, e la ragione e'
     misurata. Lo spazio fra le cifre risulta uguale quando la larghezza di
     ogni blocco e' dettata dalla cifra e non dalla sua etichetta. A 768 px
     non lo e': "+14.1K" occupa 100 px mentre "YouTube subscribers" ne occupa
     142, quindi il blocco si allarga sull'etichetta e la cifra resta corta
     di 42 px rispetto al bordo destro — 42 px che finiscono tutti nello
     spazio successivo e lo rendono diverso dal precedente.

     Non e' aggiustabile a quella larghezza: perche' "+14.1K" superi la
     propria etichetta servirebbe un corpo di 54 px, e con quel corpo
     "+2.5 Millions" sfonderebbe il contenitore. E' una contraddizione fra i
     contenuti, non un errore di impaginazione.

     Da 1024 px in su lo spazio c'e' e le cifre dettano la larghezza. Sotto,
     i tre dati restano incolonnati: uno sotto l'altro non esiste nessuno
     spazio orizzontale da pareggiare, quindi il problema non si pone. */
  /* I tre dati si affiancano da qui in su.

     Distanza fissa e uguale invece di spazio distribuito ai bordi: prima
     erano spinti agli estremi del contenitore e distavano 253 px, che li
     faceva leggere come tre cose separate. Ravvicinati si leggono come una
     riga sola, che e' cio' che sono. */
  .numbers__grid {
    flex-direction: row;
    align-items: flex-start;
    /* Il gruppo dei tre dati e' centrato nel contenitore, come richiesto. */
    justify-content: center;
    gap: var(--space-5);
    /* L'etichetta esce dal flusso normale (vedi .number__label qui sotto):
       il contenitore non la vede piu' come contenuto e non riserverebbe
       spazio per lei da solo. Questo padding lo fa al posto suo. */
    padding-bottom: 2.75rem;
  }

  /* LA CIFRA DETTA LA LARGHEZZA DEL BLOCCO — SEMPRE, NON PIU' "FINCHE'".

     La versione precedente si appoggiava a una coincidenza: funzionava solo
     finche', in tutti e tre i blocchi, la cifra restava piu' larga della
     propria etichetta. Una sola prova di corpo diverso sul "+" e sul
     suffisso l'aveva fatta saltare ovunque insieme — misurato: 135 contro
     177, 110 contro 142, 72 contro 153 — e lo spazio visibile era tornato
     diseguale, 101 px contro 120.

     Invece di ritarare i numeri una terza volta, tolgo l'etichetta dal
     calcolo: position: absolute la porta fuori dal flusso, quindi la sua
     larghezza non entra mai piu' nella larghezza del blocco. Il bordo del
     blocco coincide sempre con il bordo della cifra, e lo spazio fra le
     cifre e' sempre esattamente lo spazio fra i blocchi — non piu' una
     proprieta' che dipende da quali parole scriviamo nell'etichetta. */
  .number {
    position: relative;
  }

  .number__label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 16rem;   /* se un domani l'etichetta si allunga molto, va a capo invece di invadere il vicino */
    text-align: center;
  }

  .numbers__grid > .number {
    text-align: center;
  }

  .hero__text {
    margin-bottom: var(--space-5);
  }

  /* vedi la nota su .hero__scroll: qui accompagna --space-5 del sottotitolo */
  .hero__scroll {
    margin-top: var(--space-5);
  }
}


/* =============================================================================
   19b. ARRIVO SU UNA SEZIONE DALL'INDIRIZZO

   Chi arriva da "it/index.html#pillars" — il cambio di lingua lo fa, vedi
   la sezione 14 di script.js — deve trovare il titolo della sezione sotto
   la testata appiccicata, non nascosto dietro. Vale per il salto nativo del
   browser; lo scorrimento guidato da JavaScript fa gia' il proprio conto.
============================================================================= */

main section[id] {
  scroll-margin-top: 5rem;
}

main section#top {
  scroll-margin-top: 0;
}


/* =============================================================================
   19c. INTRO DI CARICAMENTO — "IL TAGLIO"

   Progettata con Claude Design, sul modello dell'intro dei video del canale
   (00:10-00:24 di ogni puntata): fondo Vino, il logo che si scrive a mano
   da sinistra a destra. Poi il gesto che la rende nostra: un filo Pomodoro
   attraversa lo schermo lungo il logo e il fondo si apre in due lungo quel
   filo, come una stoffa sotto le forbici del sarto, scoprendo la hero.

   SECONDA VERSIONE — PIU' LENTA E PIU' MORBIDA, su richiesta del founder:
   il ritmo della prima versione si leggeva meccanico. Due correzioni,
   non una sola:
     - il tempo. Ogni passaggio dura di piu' e fra un passaggio e il
       successivo c'e' una breve sosta, invece che il battito successivo a
       incalzare quello precedente: e' quella sosta a far leggere il gesto
       come compiuto, non solo come finito;
     - la curva. Il taglio usava cubic-bezier(0.77,0,0.18,1), una curva
       che accelera e frena di scatto: bella su un gesto veloce, meccanica
       su uno lento. Ora usa la stessa decelerazione morbida del filo
       (0.22,1,0.36,1): un'unica famiglia di movimento per tutta l'intro,
       che e' anche cio' che la fa leggere come un solo gesto e non tre.

     0,00 s   fondo Vino con una vignettatura appena accennata, una pausa
              prima che qualcosa cominci a muoversi
     0,45 s   il logo si scrive, 1,95 s, con un bordo di penna inclinato
     2,10 s   il filo comincia a correre (si sovrappone alla coda della
              scrittura, cosi' il movimento non si ferma mai del tutto),
              1,2 s, con una decelerazione morbida
     3,30 s   il filo e' disteso da un bordo all'altro: un istante di sosta
     3,35 s   il taglio: le due meta' si separano, 1,35 s, la stessa
              decelerazione del filo; ciascuna porta con se' meta' del logo
              e un orlo Pomodoro sul bordo tagliato
     4,80 s   l'intro non c'e' piu'

   Una volta per sessione, mai con la riduzione del movimento, mai quando si
   arriva su una sezione precisa (cambio di lingua, link condiviso): lo
   decide lo script in linea nella <head>, che mette con-intro su <html>.
   Senza quella classe questo blocco non esiste. Tutto il movimento e'
   trasformazione, opacita' e maschera: niente che ricalcoli l'impaginazione
   della pagina sotto. La hero intanto si compone con i suoi tempi di
   sempre, cosi' il taglio la scopre gia' pronta e l'elemento piu' grande
   della prima schermata e' visibile subito, come prima dell'intro.
============================================================================= */

.intro {
  display: none;
}

.con-intro .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1000;
  /* a fine corsa sparisce da sola, anche se JavaScript non arrivasse mai */
  animation: intro-fine 0s linear 4.8s forwards;
}

/* Le due meta' del fondo. Il gradiente e' uno solo, disegnato alto il
   doppio di ciascuna e agganciato una volta in alto e una in basso: da
   chiuse, le due meta' si leggono come un unico piano. */
.intro__meta {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  background: radial-gradient(ellipse 75% 85% at 50% 50%, #5A0A07 0%, var(--vino) 55%, #2E0302 100%);
  background-size: 100% 200%;
  will-change: transform;
}

.intro__meta--su {
  top: 0;
  background-position: 50% 0;
  animation: intro-su 1.35s cubic-bezier(0.22, 1, 0.36, 1) 3.35s forwards;
}

.intro__meta--giu {
  bottom: 0;
  background-position: 50% 100%;
  animation: intro-giu 1.35s cubic-bezier(0.22, 1, 0.36, 1) 3.35s forwards;
}

/* L'orlo del taglio: compare nell'istante in cui il filo si spegne, cosi'
   il filo sembra dividersi in due e partire con le due meta'. */
.intro__meta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--pomodoro);
  opacity: 0;
  animation: intro-accendi 0.25s linear 3.3s forwards;
}

.intro__meta--su::after { bottom: 0; }
.intro__meta--giu::after { top: 0; }

/* Il logo, due volte: una copia per meta', ciascuna centrata sul bordo del
   taglio. Chiuse, le due copie coincidono al pixel e si legge un logo solo.

   La scrittura e' una maschera che scorre: nera (visibile) a sinistra,
   trasparente a destra, con un bordo sfumato del 6% inclinato a 100 gradi
   — la punta di una penna, non una tendina. */
.intro__firma {
  position: absolute;
  left: 50%;
  width: min(34rem, 72vw);
  height: auto;
  transform: translate(-50%, -50%);
  -webkit-mask-image: linear-gradient(100deg, #000 47%, transparent 53%);
          mask-image: linear-gradient(100deg, #000 47%, transparent 53%);
  -webkit-mask-size: 300% 100%;
          mask-size: 300% 100%;
  -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
  animation: intro-scrivi 1.95s cubic-bezier(0.65, 0, 0.35, 1) 0.45s forwards;
}

.intro__meta--su .intro__firma { top: 100%; }
.intro__meta--giu .intro__firma { top: 0; }

/* Il filo. Parte da sinistra come la scrittura, e sfuma alle due estremita'
   per non tagliare di netto il bordo dello schermo. */
.intro__filo {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  margin-top: -0.5px;
  background: linear-gradient(90deg, rgba(204, 23, 2, 0), var(--pomodoro) 12%, #E0391F 50%, var(--pomodoro) 88%, rgba(204, 23, 2, 0));
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: intro-filo 1.2s cubic-bezier(0.22, 1, 0.36, 1) 2.1s forwards,
             intro-spegni 0.35s linear 3.35s forwards;
}

/* Il visitatore ha toccato, cliccato, scorso o premuto un tasto prima del
   taglio: si va dritti all'apertura, piu' svelta ma con la stessa
   decelerazione morbida del percorso normale, mai un semplice scatto.
   Nomi di animazione diversi da quelli del percorso normale, perche' il
   browser le faccia partire da zero invece di riprendere le vecchie. */
.con-intro .intro--via {
  animation: intro-fine 0s linear 0.95s forwards;
}

.intro--via .intro__firma {
  animation: none;
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
}

.intro--via .intro__filo {
  animation: none;
  opacity: 0;
}

.intro--via .intro__meta::after {
  animation: none;
  opacity: 1;
}

.intro--via .intro__meta--su {
  animation: intro-su-via 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.intro--via .intro__meta--giu {
  animation: intro-giu-via 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes intro-scrivi {
  to {
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
  }
}

@keyframes intro-filo    { to { transform: scaleX(1); } }
@keyframes intro-spegni  { to { opacity: 0; } }
@keyframes intro-accendi { to { opacity: 1; } }
@keyframes intro-su      { to { transform: translateY(-101%); } }
@keyframes intro-giu     { to { transform: translateY(101%); } }
@keyframes intro-su-via  { from { transform: none; } to { transform: translateY(-101%); } }
@keyframes intro-giu-via { from { transform: none; } to { transform: translateY(101%); } }
@keyframes intro-fine    { to { visibility: hidden; } }

@media print {
  .intro {
    display: none !important;
  }
}


/* =============================================================================
   20. PREFERS-REDUCED-MOTION
   Chi ha attivato la riduzione del movimento nel sistema operativo spesso
   lo fa per disturbi vestibolari o emicrania: qui fermiamo davvero tutto,
   compreso lo scorrimento morbido e il marquee.
============================================================================= */

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

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .marquee__track {
    animation: none;
    transform: none;
  }

  /* Il carosello non parte affatto: JavaScript se ne accorge da solo e
     costruisce la versione ferma (.wheel--calmo, sezione 12b). Qui basta
     spegnere le transizioni rimaste, nel caso la classe arrivi un istante
     dopo il primo disegno. */
  .gcard__body,
  .gcard__frame,
  .gcard__img,
  .gcard__wash,
  .gcard__name,
  .gcard__house {
    transition: none;
  }

  .is-revealable {
    opacity: 1;
    transform: none;
  }

  /* La freccia della hero smette di muoversi, il video di fondo si ferma
     sul primo fotogramma (lo mette in pausa JavaScript) e il pulsante
     "torna su" compare senza scivolare. */
  .hero__scroll svg {
    animation: none;
  }

  .to-top {
    transform: none;
  }
}