/* ============ Arcata — il sistema, modo scuro ============ */
/* La galleria che state costruendo e' un interno buio con le vetrine accese.
   Il sito e' la stessa cosa: fondo ink, e la luce solo dove c'e' qualcosa da
   vendere o da sapere. Da qui viene il lavoro dell'oro: ogni campitura piena
   e' una vetrina illuminata, e per questo se ne contano al massimo tre per
   pagina. Non decora, indica dove guardare.

   Cinque colori e nessuna derivata. I rapporti sono misurati sull'ink.
   Il modo chiaro esiste ma non e' questo: e' per i documenti, dove si legge
   a lungo. Qui si guarda. */
:root{
  /* Alabastro: bianco freddo, appena grigio. Mai crema — il crema legge
     carta di giornale, questo legge showroom. Ed e' la temperatura giusta
     per i nostri render, che sono marmo pallido e luce di giorno. */
  --canvas:#F0F1F0;
  --panel:#E4E6E5;         /* cemento — un solo livello di rientro, mai due */
  --raised:#E4E6E5;
  --ink:#111418;           /* 16,3:1 */
  --text-primary:#111418;
  --text-secondary:#4E585F;/* grafite — 6,4:1, prende il posto del gesso */
  --line:rgba(17,20,24,.16);
  --line-strong:rgba(17,20,24,.9);
  /* L'ORO NON FA IL TESTO. Sul chiaro sta a 2,1:1, quindi lavora solo in
     campitura piena (testo ink sopra, 7,7:1) e in filetto da 2px. E' il
     vincolo che gli da' eleganza: l'oro diventa materiale, non inchiostro. */
  --gold:#C9A24B;
  --gold-light:#C9A24B;
  --gold-soft:rgba(201,162,75,.16);
  --accent:#111418;
  --accent-hover:#4E585F;
  --accent-muted:rgba(17,20,24,.08);
  --green:#4E585F;
  /* La vestibilita'. L'aderente prende la campitura piena in tutti e due i
     modi: e' il risultato giusto, quindi e' la vetrina. Sul chiaro la
     terracotta scende di luminosita' per reggere i 5,5:1. */
  --fit-comodo:#4E585F;
  --fit-aderente:#C9A24B;
  --fit-tira:#A4402E;
  --tshadow:none;
  --tshadow-dark:none;
  --ease-out:cubic-bezier(.22,.9,.24,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --display:"Archivo Black",system-ui,sans-serif;
  --body:"Archivo",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Niente scorrimento morbido globale: fa a pugni con l'aggancio, perché il
   browser anima il suo movimento e poi l'aggancio ne applica un altro, e si
   vede come un micro-scatto dopo l'arrivo. Ai link interni la morbidezza la
   diamo noi, spegnendo l'aggancio per il tempo del salto. */
html{color-scheme:light;scroll-behavior:auto}
html,body{overflow-x:hidden;overflow-x:clip}
body{
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:opacity .8s var(--ease-soft);
}
body.boot{opacity:0}
body.boot.ready{opacity:1}

/* Un solo ambiente: layer fisso di respiro dietro tutto */
body::before{
  content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  /* Niente aloni: nessun gradiente, nessun bagliore. Il buio e' pieno, e
     l'unica luce della pagina sono le campiture oro. */
  background:none;
}
@keyframes breathe{from{transform:translate3d(-1.5%,-1%,0) scale(1)}to{transform:translate3d(1.5%,1.5%,0) scale(1.05)}}

::selection{background:var(--gold-soft);color:var(--ink)}
a{color:inherit}
img,svg{max-width:100%}

.skip{position:fixed;top:-48px;left:16px;z-index:99;background:var(--accent);color:#111418;
  padding:10px 18px;border-radius:10px;font-weight:600;text-decoration:none;transition:top .25s var(--ease-out)}
.skip:focus-visible{top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ============ Tipografia ============ */
/* Tre famiglie, nessuna eccezione. Archivo Black sui titoli, sempre
   maiuscolo e con tracking negativo: e' un grottesco nero, e in maiuscolo
   stretto diventa architettura invece che voce. Archivo per il corpo.
   IBM Plex Mono per ogni cifra, senza deroghe — un numero e' una misura, e
   le misure si scrivono con lo strumento. */
.display{font-family:var(--display);font-weight:400;line-height:1.0;letter-spacing:-.025em;
  text-transform:uppercase;font-size:clamp(1.7rem,3.6vw,2.4rem);text-wrap:balance}
.display.xl{letter-spacing:-.035em;line-height:.9;
  font-size:clamp(2.6rem,8vw,6.5rem)}
.display.giant{font-size:clamp(2.1rem,5.2vw,3.6rem);letter-spacing:-.03em}
/* Il kicker sul chiaro non puo' essere oro come testo. Nelle sezioni resta
   grafite; nell'hero diventa campitura oro con testo ink — e' la traduzione
   che il sistema prescrive: quello che sullo scuro e' testo oro, sul chiaro
   e' pastiglia oro. Piu' forte, non piu' debole. */
.kicker{font-family:var(--mono);font-size:.69rem;letter-spacing:.3em;color:var(--text-secondary);
  font-weight:500;text-transform:uppercase}
.kicker.chip{background:var(--gold);color:#111418;border:0;font-weight:600}
.lede{font-size:1.12rem;color:var(--text-secondary);max-width:56ch}
em.neon{font-style:normal;background:var(--gold);color:#111418;padding:0 .18em}

/* Il chip e' un'etichetta di strumento, non una pastiglia: filetto e mono. */
.chip{display:inline-block;background:transparent;border:1px solid var(--line-strong);
  border-radius:0;padding:.45em .8em;text-shadow:none}

/* ============ Bottoni ============ */
/* Primario: campitura oro piena con testo ink, 7,7:1. Nessun raggio, nessuna
   ombra, nessuna transizione di colore — la campitura oro e' una vetrina
   illuminata, e una vetrina non pulsa.
   Al massimo tre campiture per pagina: se ne conti quattro, una non era una
   vetrina. Per questo il secondario e' un filetto e il terziario e' solo una
   riga sotto. */
.btn{display:inline-block;background:var(--gold);color:#111418;
  font-family:var(--display);font-size:.86rem;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;line-height:1.1;
  padding:1.15em 2em;border-radius:0;border:0;text-shadow:none;
  transition:background .25s var(--ease-out)}
.btn:hover{background:#111418;color:#F0F1F0}
.btn-big{font-size:.96rem;padding:1.25em 2.4em}
.btn-ghost{display:inline-block;color:var(--ink);text-decoration:none;
  font-family:var(--body);font-size:.86rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:1.1em 1.8em;border-radius:0;border:1px solid var(--ink);background:transparent;
  transition:background .25s var(--ease-out),color .25s var(--ease-out)}
.btn-ghost:hover{background:var(--ink);color:var(--canvas)}
.cta-row{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}
@media (pointer:coarse){.btn,.btn-ghost,.nav-links a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ============ Nav ============ */
/* Niente sfumatura: sopra l'hero la barra è invisibile, e diventa una barra
   vera solo quando c'è del contenuto che le scorre sotto. */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:baseline;gap:26px;
  padding:16px clamp(18px,4vw,44px);background:transparent;
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease-soft),border-color .45s var(--ease-soft),
             backdrop-filter .45s var(--ease-soft),padding .45s var(--ease-soft)}
.nav.solid{background:rgba(240,241,240,.92);border-bottom-color:var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding-top:12px;padding-bottom:12px}
/* Il marchio non dipende dal nome: parola in nero pesante, maiuscolo,
   tracking stretto, una lettera in oro. Regge qualsiasi parola. */
.brand{font-family:var(--display);font-size:1.12rem;text-decoration:none;
  text-transform:uppercase;letter-spacing:.02em}
/* Sullo scuro la lettera del marchio e' oro come testo; sul chiaro l'oro
   come testo sta a 2,12:1, quindi diventa campitura con la lettera in ink.
   E' la stessa traduzione di tutto il resto: quel che era inchiostro
   diventa materia. */
.brand b{background:var(--gold);color:#111418;font-weight:inherit;padding:0 .18em}
.nav-links{display:flex;gap:22px;margin-left:auto}
.nav-links a{font-family:var(--body);font-size:.78rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;padding:.4em .1em;
  color:var(--text-secondary);transition:color .25s var(--ease-out)}
.nav-links a:hover{color:var(--text-primary)}
/* La voce attiva e' in campitura oro piena, non sottolineata: e' la stessa
   grammatica del dato e della vestibilita' — pieno significa "questo". */
.nav-links a[aria-current]{background:var(--gold);color:#111418;padding:.45em .75em}
.btn-nav{padding:.72em 1.2em;font-size:.72rem}
@media (max-width:720px){.nav-links{display:none}.nav{align-items:center}.btn-nav{margin-left:auto}}

/* ============ Hero: due impaginazioni per lo stesso testo ============

   La BASE è il viaggio a pannelli: sei fotogrammi con la loro battuta, uno
   sotto l'altro. È quello che vedono i telefoni, chi ha il JavaScript
   spento, chi ha chiesto meno movimento, e chiunque se il filmato non parte.
   Non è un ripiego con meno cose da leggere: è lo stesso racconto per intero,
   sfogliato invece che attraversato.

   Sopra, quando c'e' il JavaScript, la classe .viaggio trasforma le stesse
   battute in sovrimpressioni su una schermata sola: col dito sul telefono
   (.film, il filmato va avanti da se'), col rotolino sul desktop (.trascina,
   il filmato segue lo scroll fotogramma per fotogramma).

   Il verso di questa gerarchia conta: tutto ciò che è caro — i 15 MB di
   filmato, il palco appiccicato, le tappe alte una schermata — vive dentro
   .viaggio, e i 15 MB dentro .trascina: il telefono non li incontra. Prima era il
   contrario, e la versione mobile era la versione a cui era stato tolto
   qualcosa.                                                               */
.hero{position:relative}
/* Lo spazio per la barra fissa sta qui e non sulla prima battuta: dentro il
   palco la prima battuta non è il primo elemento del suo tipo — lo è il
   contenitore del filmato — quindi :first-of-type non la coglierebbe. */
.stage{counter-reset:tappa;padding-top:clamp(96px,14vh,140px)}
.hero.viaggio .stage{padding-top:0}

/* --- Il viaggio a pannelli --- */
.band{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:14px;
  --k:1;max-width:620px;margin:0 auto;
  padding:0 clamp(20px,5vw,44px) clamp(58px,9vh,86px)}

/* Il numero della tappa con la sua riga. Qui la numerazione è informazione:
   sono sei momenti in fila e l'ordine è il racconto, non un ornamento. */
.band::before{counter-increment:tappa;content:counter(tappa,decimal-leading-zero);
  width:100%;padding-bottom:11px;border-bottom:2px solid var(--gold);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;color:var(--ink)}

/* 9:16, la forma di uno schermo di telefono: è lì che questo riquadro
   diventa tutto il vetro. Sugli schermi larghi — dove i pannelli restano il
   ripiego di chi non può avere il filmato — la stessa immagine sta in
   colonna, e allora va tenuta stretta o diventa una torre. */
.shot{position:relative;overflow:hidden;
  width:100%;max-width:392px;aspect-ratio:9/16;border-radius:18px;background-size:cover;
  background-position:center;background-color:var(--panel);margin:4px 0 6px;
  box-shadow:0 2px 6px rgba(34,30,23,.06),0 20px 50px rgba(34,30,23,.11)}

/* Lo spezzone si sovrappone alla fotografia della tappa, e il suo primo
   fotogramma È quella fotografia: la dissolvenza non si vede, serve solo a
   non far comparire un riquadro nero mentre il file arriva. Se lo spezzone
   non parte — rete lenta, risparmio dati, riproduzione automatica negata —
   sotto resta la fotografia, che è già il pannello finito. */
.shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s linear}
.shot.gira video{opacity:1}

/* La fotografia della tappa è un <img> e non uno sfondo del foglio di stile,
   per una ragione sola: così il browser può rimandarla da sé. Come sfondo,
   sei fotografie sono 256KB che partono tutti insieme all'apertura, anche le
   cinque che stanno sotto l'orizzonte. Come immagini pigre partono quando ci
   si avvicina — e continuano a farlo senza JavaScript, che è il caso in cui
   sono l'unica cosa che resta. Sotto il filmato il riquadro è spento, quindi
   lì non ne parte nessuna. */
.shot .fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block}

/* Arrivo del pannello: la stessa entrata delle sezioni sotto, per non avere
   due grammatiche di movimento nella stessa pagina.
   Vale solo dove c'è il JavaScript, perché è lui a togliere il nascondiglio
   quando il pannello entra in vista: senza di lui questa regola lascerebbe
   sei riquadri vuoti, ed è meglio nessuna animazione che nessun contenuto. */
html.js .band .shot,html.js .band .display,html.js .band .sub,
html.js .band .kicker,html.js .band .cta-row{
  opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
/* Stesso prefisso html.js qui sopra e qui sotto: senza, la regola che
   nasconde vincerebbe per specificità su quella che mostra. */
html.js .band.vista .shot,html.js .band.vista .display,html.js .band.vista .sub,
html.js .band.vista .kicker,html.js .band.vista .cta-row{opacity:1;transform:none}
html.js .band.vista .display{transition-delay:.08s}
html.js .band.vista .sub{transition-delay:.16s}
html.js .band.vista .cta-row{transition-delay:.24s}

/* Le tappe e la via d'uscita esistono solo per l'aggancio dello scorrimento:
   senza filmato non hanno niente da agganciare e non devono occupare spazio. */
.tappe,.fermata-uscita,.fermata-inizio,.stage-3d,.cue,.hud{display:none}

/* --- Sovrimpressione sul filmato --- */
/* Ogni battuta è un blocco alto --passo. Blocchi veri e non segnaposto da un
   pixel, perché il browser aggancia elementi veri in modo molto più
   prevedibile; e perché così l'altezza del passo diventa la manopola della
   velocità. Una schermata per tappa è il gesto che il browser esegue meglio:
   alzarla allunga lo scatto e lo rende pesante. La lentezza del filmato non
   dipende da qui ma dai tempi scelti in main.js. */
:root{--passo:100vh}
/* svh e non vh: su un telefono la barra del browser le rende diverse, e il
   palco e' gia' in svh. Con il passo in vh ogni blocco risultava piu' alto
   della schermata visibile e l'errore si accumulava a ogni fermata, finche'
   l'aggancio e il filmato non parlavano piu' della stessa cosa.
   La riga sopra resta come ripiego per i browser che svh non lo conoscono. */
@supports (height:100svh){:root{--passo:100svh}}
.hero.viaggio .tappe{display:block}
.hero.viaggio .tappe div{height:var(--passo);scroll-snap-align:start;scroll-snap-stop:always}
.hero.viaggio .stage-3d{display:block}
.hero.viaggio .cue{display:block}
/* flex e non block: l'indicatore ha la barra oro davanti, e la barra e' un
   figlio del pseudo-elemento che va allineato alla riga */
.hero.viaggio .hud{display:flex}

/* La via d'uscita vale come una tappa a tutti gli effetti: anche lei vieta lo
   scavalcamento. Senza, un gesto partito dall'ultima battuta saltava sia lei
   sia l'inizio della sezione e atterrava a caso in mezzo, con mezzo hero
   ancora in alto e la sezione già dentro: sembrava rotto. */
.hero.viaggio .fermata-inizio{display:block;height:1px;margin-bottom:-1px;
  scroll-snap-align:start;scroll-snap-stop:always}
.hero.viaggio ~ .fermata-uscita{display:block;height:1px;margin-top:-1px;
  scroll-snap-align:start;scroll-snap-stop:always}

/* Niente rimbalzo elastico finche' l'aggancio e' acceso. Sul telefono, oltre
   la cima il dito tira comunque e la pagina rimbalza: al rilascio il motore
   d'aggancio rivaluta da una posizione che non esiste piu' e sceglie la
   fermata sbagliata, cioe' scende da solo. Senza rimbalzo non c'e' niente da
   rivalutare. Vale solo dentro l'hero: sotto, la pagina rimbalza normale e
   il gesto di ricarica torna al suo posto. */
html.aggancio{scroll-snap-type:y mandatory;overscroll-behavior-y:none}
html.aggancio body{overscroll-behavior-y:none}
@media (prefers-reduced-motion: reduce){html.aggancio{scroll-snap-type:none}}

/* Il palco occupa la sua schermata nel flusso, senza margini negativi.
   Il margine negativo che avevo usato prima azzerava la sua altezza, e un
   elemento appiccicato alto zero non viene MAI spinto via dal fondo del
   contenitore: restava incollato sopra la sezione successiva e la copriva.
   Occupando il suo spazio, invece, il palco è anche la prima fermata: la
   sua posizione di aggancio è zero, cioè l'inizio della pagina. */
/* Il palco NON e' un punto d'aggancio, ed e' il difetto che impediva di
   risalire: essendo appiccicato sta sempre in vista, quindi il browser se lo
   trovava fra i candidati insieme ai blocchi delle tappe. Scendendo vinceva
   il blocco dopo, salendo vinceva il palco — e ti riportava in cima.
   I bersagli sono solo i blocchi, che sono alti una schermata l'uno. */
.hero.viaggio .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.stage-3d{position:absolute;inset:0;background:var(--canvas)}
.poster{position:absolute;inset:0;background-size:cover;background-position:center}
/* NESSUNA transizione sull'opacita'. Con una dissolvenza, nell'istante dello
   scambio fra andata e rovescio i due sono entrambi semitrasparenti e dietro
   si vede il poster: era quello il lampo a ogni cambio di direzione. I due
   mostrano lo stesso identico fotogramma quando si danno il cambio, quindi
   uno scambio secco non si vede — una dissolvenza si'. */
#hero-video,#hero-video-rev{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;will-change:transform;transform:translateZ(0)}
/* Lo scambio fra andata e rovescio non e' una dissolvenza: e' uno scambio
   secco, perche' i due mostrano lo stesso fotogramma nell'istante in cui si
   danno il cambio. Una dissolvenza li farebbe vedere tutti e due. */
.stage-3d.video-ready #hero-video,.stage-3d.video-ready #hero-video-rev{opacity:1}
.stage-3d #hero-video.spento,.stage-3d #hero-video-rev.spento{opacity:0}
.ring{position:absolute;left:50%;top:calc(50% + 26vh);transform:translate(-50%,-50%);
  width:44px;height:44px;color:var(--ink);opacity:.7;transition:opacity .5s var(--ease-soft)}
.ring circle{transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .12s linear}
.stage-3d.video-ready .ring,.stage-3d.video-failed .ring{opacity:0}
/* Il filmato è in pieno giorno, quindi lo scrim di base schiarisce invece di
   scurire: il testo dell'hero è inchiostro scuro su velo chiaro. */
.scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(250,247,240,0) 30%,rgba(250,247,240,.5) 100%)}
.bloom{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 80% 60% at 50% 46%,rgba(255,248,236,.95),rgba(199,154,69,.32) 55%,transparent 75%)}

/* Band. Il filmato è in pieno giorno, quindi di base il testo è inchiostro
   scuro su un velo chiaro. Ogni battuta può essere invertita con
   data-tone="dark" quando il suo tratto di filmato risulta scuro: si decide
   guardando i fotogrammi veri, non a priori. */
.band .btn,.band .btn-ghost{text-shadow:none;pointer-events:auto}
.band .sub{font-size:clamp(1.05rem,1.9vw,1.35rem);max-width:44ch}
.band .kicker{color:var(--text-secondary)}
/* Nei pannelli il testo sta sulla carta della pagina, non su un fotogramma:
   colore secondario e nessuna ombra, come il resto del sito. */
.band .sub:not(.split-sub){color:var(--text-secondary)}
.band .split-sub{color:var(--text-secondary)}

/* --- Le stesse battute, sovrapposte al filmato --- */
/* L'aggancio va tolto qui. A pannelli ogni battuta è una schermata e il suo
   punto d'aggancio è giusto; qui invece le battute sono tutte sovrapposte
   nello stesso punto, in cima all'hero — e il browser, trovandoci sei punti
   d'aggancio coincidenti, riportava lo scorrimento all'inizio a ogni gesto.
   I punti d'aggancio veri sono i blocchi delle tappe. */
.hero.viaggio .band{scroll-snap-align:none;
  position:absolute;inset:0;justify-content:center;gap:18px;
  max-width:none;margin:0;padding:0 clamp(22px,6vw,80px);
  opacity:0;visibility:hidden;pointer-events:none;
  color:var(--ink);text-shadow:var(--tshadow)}
.hero.viaggio .band .shot{display:none}
/* nessun ritardo di entrata qui: il movimento lo comanda lo scorrimento */
/* Serviva a spegnere l'entrata dei pannelli sopra il filmato. Ora l'entrata
   sopra il filmato ce l'ha, quindi qui si toglie solo l'opacita' dei
   pannelli e si lascia stare il resto: era questa regola a rendere muta
   l'animazione scritta piu' sotto. */
html.js .hero.viaggio .band .display,html.js .hero.viaggio .band .sub,
html.js .hero.viaggio .band .kicker,html.js .hero.viaggio .band .cta-row{
  opacity:1;color:inherit}
.hero.viaggio .band.center{align-items:center;text-align:center}
.hero.viaggio .band.left{align-items:flex-start;text-align:left;padding-right:min(52vw,760px)}
.hero.viaggio .band.right{align-items:flex-end;text-align:right;padding-left:min(52vw,760px)}
.hero.viaggio .band .display{max-width:16ch}
.hero.viaggio .band .sub{opacity:.88}
.hero.viaggio .band .kicker{color:inherit;opacity:.7}
/* Il velo chiaro sotto il testo. In modalità pannelli lo stesso ::before fa
   il numero della tappa, quindi qui va riscritto da capo. */
.hero.viaggio .band::before{content:"";position:absolute;inset:-4%;width:auto;padding:0;border:0;
  pointer-events:none;z-index:-1;counter-increment:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 74% 62% at 50% 50%,rgba(250,247,240,.9) 0%,rgba(250,247,240,.62) 46%,rgba(250,247,240,0) 76%)}
.hero.viaggio .band.left::before{background:radial-gradient(ellipse 52% 66% at 26% 50%,rgba(250,247,240,.92) 0%,rgba(250,247,240,.64) 46%,rgba(250,247,240,0) 76%)}
.hero.viaggio .band.right::before{background:radial-gradient(ellipse 52% 66% at 74% 50%,rgba(250,247,240,.92) 0%,rgba(250,247,240,.64) 46%,rgba(250,247,240,0) 76%)}
.hero.viaggio .band.settle{justify-content:flex-start;padding-top:22vh}
.hero.viaggio .band.settle::before{background:radial-gradient(ellipse 70% 62% at 50% 34%,rgba(250,247,240,.94) 0%,rgba(250,247,240,.66) 46%,rgba(250,247,240,0) 78%)}

/* Variante per i tratti di filmato scuri */
.hero.viaggio .band[data-tone="dark"]{color:#f6f2e9;text-shadow:var(--tshadow-dark)}
.hero.viaggio .band[data-tone="dark"]::before{background:radial-gradient(ellipse 74% 62% at 50% 50%,rgba(20,16,10,.66) 0%,rgba(20,16,10,.44) 46%,rgba(20,16,10,0) 76%)}
.hero.viaggio .band.left[data-tone="dark"]::before{background:radial-gradient(ellipse 52% 66% at 26% 50%,rgba(20,16,10,.7) 0%,rgba(20,16,10,.46) 46%,rgba(20,16,10,0) 76%)}
.hero.viaggio .band.right[data-tone="dark"]::before{background:radial-gradient(ellipse 52% 66% at 74% 50%,rgba(20,16,10,.7) 0%,rgba(20,16,10,.46) 46%,rgba(20,16,10,0) 76%)}
.hero.viaggio .band.settle[data-tone="dark"]::before{background:radial-gradient(ellipse 70% 62% at 50% 34%,rgba(20,16,10,.74) 0%,rgba(20,16,10,.48) 46%,rgba(20,16,10,0) 78%)}

/* Split: parole e caratteri */
.split .w{display:inline-block;white-space:pre}
.split .c{display:inline-block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Le entrate legate allo scorrimento valgono solo sopra il filmato: nei
   pannelli il testo è già composto e arriva con la stessa entrata delle
   sezioni sotto. */
/* Entrance: rise (parola per parola, dal basso) */
.hero.viaggio .band[data-entrance="rise"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*26px))}
.hero.viaggio .band[data-entrance="rise"] .sub{opacity:calc(clamp(0,(var(--k,0) - .5)*3,1));
  transform:translateY(calc((1 - clamp(0,(var(--k,0) - .5)*3,1))*14px))}
/* Entrance: depth (avvicinamento, come la camera che spinge in avanti) */
.hero.viaggio .band[data-entrance="depth"] .split{display:block;opacity:var(--k,0);
  transform:scale(calc(.84 + .16*var(--k,0)));transform-origin:inherit}
.hero.viaggio .band.right[data-entrance="depth"] .split{transform-origin:right center}
/* Entrance: grid (caratteri che scattano in riga, come misure che si allineano) */
.hero.viaggio .band[data-entrance="grid"] .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))}
/* Entrance: scatter (caratteri che si ricompongono, come il guardaroba) */
.hero.viaggio .band[data-entrance="scatter"] .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))
           rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
/* Entrance: drift (parole che scendono, come il pacco) */
.hero.viaggio .band[data-entrance="drift"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-24px))}
/* Entrance: settle (arrivo in tre tempi) */
.hero.viaggio .band[data-entrance="settle"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*22px))}
.hero.viaggio .band[data-entrance="settle"] .sub{opacity:clamp(0,(var(--k,0) - .55)*3.2,1);
  transform:translateY(calc((1 - clamp(0,(var(--k,0) - .55)*3.2,1))*12px))}
.hero.viaggio .band[data-entrance="settle"] .cta-row{opacity:clamp(0,(var(--k,0) - .72)*4,1);
  transform:translateY(calc((1 - clamp(0,(var(--k,0) - .72)*4,1))*12px))}
/* Sub comuni alle band non-settle */
.hero.viaggio .band[data-entrance="depth"] .sub,.hero.viaggio .band[data-entrance="grid"] .sub,
.hero.viaggio .band[data-entrance="scatter"] .sub,.hero.viaggio .band[data-entrance="drift"] .sub{
  opacity:clamp(0,(var(--k,0) - .45)*2.8,1)}

/* HUD e cue */
.hud{position:absolute;left:clamp(18px,4vw,44px);bottom:24px;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.18em;color:var(--text-secondary)}
.cue{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:6px;opacity:.8;transition:opacity .6s var(--ease-out)}
.hero.scrolled .cue{opacity:0}
.cue-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.3em;color:var(--text-secondary)}
.chev{width:10px;height:10px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);animation:chev 2.4s var(--ease-soft) -1.2s infinite}
@keyframes chev{0%,100%{transform:translateY(0) rotate(45deg);opacity:.9}50%{transform:translateY(7px) rotate(45deg);opacity:.4}}
@media (max-height:560px){.cue,.hud{display:none}}
/* Il "scorri" e l'indicatore di tappa appartengono al filmato: senza di lui
   non hanno niente da indicare, e l'ancora a cui sono appesi non esiste.
   Vanno spenti qui e non lassù insieme agli altri, perché .cue si dichiara
   display:flex più sotto e vincerebbe a parità di peso. */
.hero:not(.viaggio) .cue,.hero:not(.viaggio) .hud{display:none}

/* Non esiste più un hero statico separato, né i cinque gate che lo
   accendevano: il viaggio a pannelli qui sopra è già la versione che regge
   da sola, quindi c'era un intero blocco di pagina da mantenere in doppia
   copia e da tenere allineato a mano. I gate restano solo in main.js, dove
   decidono se aggiungere .trascina — cioè se scaricare o no i 15 MB. */

/* ============ Sezioni ============ */
/* La barra in alto è fissa: senza questo margine, un link interno porta il
   titolo della sezione a finire sotto la barra. */
.section{position:relative;padding:clamp(90px,14vh,150px) 0;scroll-margin-top:76px}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,5vw,44px)}

/* Entrance di sezione, con ritiro dei delay */
.reveal .rv{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal.in .rv{opacity:1;transform:none}
.reveal.in .rv:nth-child(2),.reveal.in .cards .rv:nth-child(2){transition-delay:.12s}
.reveal.in .rv:nth-child(3),.reveal.in .cards .rv:nth-child(3){transition-delay:.24s}
.reveal.in .rv:nth-child(4),.reveal.in .cards .rv:nth-child(4){transition-delay:.36s}
.reveal.settled .rv{transition-delay:0s !important}

/* Divider ad arco che si disegna */
.divider{width:180px;height:auto;overflow:visible}
.divider .arc{fill:none;stroke:var(--gold-light);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:520;stroke-dashoffset:520;transition:stroke-dashoffset 1.4s var(--ease-soft) .2s}
.reveal.in .divider .arc{stroke-dashoffset:0}
.divider .arc-glow{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;opacity:0;
  filter:blur(6px)}
.reveal.live .divider .arc-glow{animation:archpulse 6s var(--ease-soft) -2s infinite}
@keyframes archpulse{0%,100%{opacity:0}50%{opacity:.5}}

/* L'idea: editoriale a due colonne */
.idea-grid{display:grid;grid-template-columns:220px 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.idea-left{display:flex;flex-direction:column;gap:18px;position:sticky;top:110px}
.idea-right{display:flex;flex-direction:column;gap:22px}
.idea-right .display{max-width:18ch}
@media (max-width:860px){.idea-grid{grid-template-columns:1fr}.idea-left{position:static;flex-direction:row;align-items:baseline;gap:24px}.divider{width:120px}}

/* Come funziona: griglia di card */
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:46px;max-width:64ch}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.card{background:var(--raised);border:1px solid var(--line);border-radius:18px;
  padding:0;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(34,30,23,.04),0 8px 26px rgba(34,30,23,.05);
  transition:transform .45s var(--ease-out),border-color .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.card:hover{transform:translateY(-4px);border-color:var(--line-strong);
  box-shadow:0 2px 4px rgba(34,30,23,.05),0 16px 40px rgba(34,30,23,.09)}
.card h3{font-family:var(--display);font-weight:700;font-size:1.16rem;letter-spacing:-.01em;
  line-height:1.14;text-wrap:balance}
.card p{color:var(--text-secondary);font-size:.98rem}
/* Sul chiaro l'oro non fa il testo: l'etichetta resta ink e l'oro passa nel
   filetto sotto. E' la stessa traduzione del bottone terziario. */
.card-n{font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;color:var(--ink);
  align-self:flex-start;background:transparent;border:0;border-bottom:2px solid var(--gold);
  border-radius:0;padding:.35em 0}
.card-shot{flex:none;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
.card-body{padding:22px 26px 28px;display:flex;flex-direction:column;gap:12px}

/* L'idea: la fotografia che chiude la sezione */
.idea-figure{margin-top:clamp(48px,7vh,80px);padding:0 clamp(20px,5vw,44px);max-width:1120px;
  margin-left:auto;margin-right:auto}
.idea-figure img{width:100%;height:auto;display:block;border-radius:18px;
  box-shadow:0 2px 6px rgba(34,30,23,.06),0 24px 60px rgba(34,30,23,.1)}
.idea-figure figcaption{margin-top:14px;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  color:var(--text-secondary);text-align:center}

/* La scansione */
.scan-sec{background:linear-gradient(var(--panel),transparent 70%)}
.scan-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.scan-wrap .display{max-width:26ch}
.scan-stage{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:16px}
.garment{width:130px;height:auto}
.g-ghost{fill:none;stroke:var(--line-strong);stroke-width:1.5;stroke-dasharray:4 6;stroke-linecap:round}
.g-line{fill:rgba(199,154,69,.1);stroke:var(--text-secondary);stroke-width:2;
  stroke-dasharray:420;stroke-dashoffset:calc(420*(1 - var(--hold,0)));transition:fill .8s var(--ease-soft)}
.g-waist{fill:none;stroke:var(--text-secondary);stroke-width:2;opacity:var(--hold,0)}
.g-beam{fill:var(--gold-light);opacity:0;transform:translateY(calc(var(--hold,0)*150px))}
.scan-sec.holding .g-beam{opacity:.8}
.scan-sec.scanned .g-line{fill:rgba(199,154,69,.24);stroke:var(--accent)}
.scan-sec.scanned .g-waist{stroke:var(--accent)}
.hold-btn{position:relative;display:inline-flex;align-items:center;gap:14px;cursor:pointer;
  background:var(--panel);color:var(--text-primary);border:1px solid var(--line-strong);
  border-radius:999px;padding:14px 26px;font-family:var(--body);font-size:1rem;font-weight:500;
  transition:border-color .3s var(--ease-out),background .3s var(--ease-out);touch-action:none;
  -webkit-user-select:none;user-select:none}
.hold-btn:hover{border-color:var(--accent)}
.scan-sec.scanned .hold-btn{border-color:var(--accent);background:rgba(10,101,128,.08)}
.hold-ring{width:26px;height:26px;display:grid;place-items:center}
.hold-ring svg{width:26px;height:26px;transform:rotate(-90deg)}
.hold-ring circle{fill:none;stroke:var(--gold-light);stroke-width:4;stroke-dasharray:126;
  stroke-dashoffset:calc(126*(1 - var(--hold,0)));stroke-linecap:round}
.scan-note{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--text-secondary)}
.scan-done{font-family:var(--display);font-weight:700;font-size:1.1rem;letter-spacing:-.01em;color:var(--accent);
  opacity:0;transform:translateY(8px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.scan-sec.scanned .scan-done{opacity:1;transform:none}
.strip{display:flex;gap:10px;margin-top:6px}
.slot{width:34px;height:46px;border-radius:8px;border:1px solid var(--line-strong);background:var(--panel);
  transition:background .5s var(--ease-out),border-color .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.slot.got,.scan-sec.scanned .slot{background:rgba(199,154,69,.2);border-color:var(--accent-muted)}
.scan-sec.scanned .slot:nth-child(1){transition-delay:.05s}
.scan-sec.scanned .slot:nth-child(2){transition-delay:.15s}
.scan-sec.scanned .slot:nth-child(3){transition-delay:.25s}
.scan-sec.scanned .slot:nth-child(4){transition-delay:.35s}
.scan-sec.scanned .slot:nth-child(5){transition-delay:.45s}
.scan-sec.scanned .slot:nth-child(6){transition-delay:.55s;box-shadow:0 0 18px rgba(199,154,69,.45)}

/* Collabora: righe di ruolo */
.collab-grid{display:flex;flex-direction:column;gap:34px}
.roles{list-style:none;border-top:1px solid var(--line)}
.role{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:22px 6px;border-bottom:1px solid var(--line);
  transition:padding-left .35s var(--ease-out),background .35s var(--ease-out)}
.role:hover{padding-left:18px;background:rgba(199,154,69,.07)}
.role-name{font-family:var(--display);font-size:clamp(1.05rem,2.1vw,1.5rem);font-weight:700;letter-spacing:-.01em}
.role-arrow{color:var(--accent);font-size:1.2rem}
.invest{font-size:1.15rem;color:var(--text-secondary);max-width:56ch}

/* Contatti */
.contact{padding-bottom:clamp(110px,16vh,180px)}
.contact-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.divider.small{width:130px}
.mail-plain{font-size:.95rem;color:var(--text-secondary)}
.mail-link{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-muted);
  transition:border-color .25s var(--ease-out)}
.mail-link:hover{border-color:var(--accent)}

/* Footer */
.footer{border-top:1px solid var(--line);padding:44px 0 60px;color:var(--text-secondary);font-size:.9rem}
.foot-grid{display:flex;flex-wrap:wrap;gap:10px 34px;align-items:baseline}
.foot-brand{font-family:var(--display);font-weight:800;font-size:.95rem;color:var(--ink);
  text-transform:uppercase;letter-spacing:.12em}

/* ============ Pausa globale (tab nascosta) ============ */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* ============ Reduced motion: stati finali, niente drive ============ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important;transition-delay:0s !important}
  body{opacity:1}
  body::before{animation:none}
  .reveal .rv{opacity:1;transform:none}
  .divider .arc{stroke-dashoffset:0}
  .divider .arc-glow{opacity:.25}
  .scan-sec .g-line{stroke-dashoffset:0;fill:rgba(199,154,69,.24);stroke:var(--accent)}
  .scan-sec .g-waist{opacity:1;stroke:var(--accent)}
  .scan-sec .scan-done{opacity:1;transform:none}
  .scan-sec .slot{background:rgba(199,154,69,.2);border-color:var(--accent-muted)}
  .scan-sec .hold-btn{display:none}
  .scan-sec .scan-note{display:none}
  .hold-ring circle{stroke-dashoffset:0}
  html.js .band .shot,html.js .band .display,html.js .band .sub,
  html.js .band .kicker,html.js .band .cta-row{opacity:1;transform:none}
}

/* ============ Schermi stretti ============ */
/* Solo respiro e corpi: la struttura non cambia, perché il viaggio a pannelli
   e le sezioni a una colonna sono già la forma giusta per un telefono. */
@media (max-width:560px){
  body{font-size:16px}
  .section{padding:clamp(62px,9vh,150px) 0}
  .band{padding-bottom:clamp(48px,7vh,86px)}
  .band .sub{font-size:1.02rem}
  /* Syne in maiuscolo ExtraBold è larghissima: "ARCATA" occupa circa 7,6 em,
     quindi su 375 px il corpo massimo che ci sta nella colonna è 11vw. */
  .display.xl{font-size:min(11vw,3.1rem)}
  .lede{font-size:1.05rem}
  .sec-head{margin-bottom:32px}
  .cards{gap:14px}
  .card-body{padding:20px 20px 24px}
  .card-shot{aspect-ratio:16/9}
  .idea-figure{margin-top:40px}
  .role{padding:18px 2px}
  .scan-stage{gap:18px}
  .garment{width:104px}
  .strip{gap:8px}
  .slot{width:30px;height:40px}
  .foot-grid{gap:8px 22px}
  .btn-big{font-size:1.05rem;padding:.9em 1.9em}
}

/* ============ Sul telefono ogni tappa è una schermata intera ============ */
/* Il riquadro con il bordo tondo e l'ombra è un modo di dire "qui c'è una
   fotografia". Ma queste non sono fotografie a corredo: sono il posto. Un
   posto va attraversato, non guardato dentro una cornice — e su uno schermo
   di telefono l'unica cornice onesta è lo schermo.
   Quindi qui l'immagine è tutto il vetro, il testo ci sta sopra come sul
   desktop, e ogni gesto porta alla tappa dopo.
   La condizione è la forma dello schermo e non la sua larghezza: serve un
   vetro alto almeno quanto il ritaglio verticale del filmato, se no
   riempirlo vorrebbe dire tagliarlo una seconda volta. Un tablet in
   verticale (3:4) resta ai pannelli, dove le immagini si vedono intere. */
@media (max-aspect-ratio: 7/10){
  .stage{padding-top:0}

  .band{position:relative;min-height:100svh;justify-content:flex-end;gap:11px;
    max-width:none;margin:0;
    padding:0 clamp(22px,7vw,44px) clamp(58px,12vh,104px);
    color:#f6f2e9;text-shadow:var(--tshadow-dark);
    scroll-snap-align:start}
  .band > *{position:relative;z-index:1}

  .shot{position:absolute;inset:0;z-index:0;
    width:100%;height:100%;max-width:none;aspect-ratio:auto;
    border-radius:0;margin:0;box-shadow:none}
  /* Il velo. Senza, il testo bianco finisce sopra il marmo chiaro del
     pavimento e sparisce. Scurisce dove sta il testo e lascia stare il
     centro dell'inquadratura, che è quello che si deve guardare. */
  /* Non una sfumatura: una fascia. Il sistema non ammette gradienti, e una
     fascia netta col filetto oro sopra e' lo stesso gesto delle campiture —
     un blocco pieno che dice "qui si legge". */
  .shot::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;pointer-events:none;
    background:rgba(17,20,24,.7);border-top:2px solid var(--gold)}
  /* L'immagine è già a posto da ferma: farla scivolare su di 22px
     scoprirebbe una striscia di pagina in fondo allo schermo. */
  html.js .band .shot{opacity:1;transform:none;transition:none}

  /* Il numero della tappa va in alto, come l'indicatore del desktop: in
     fondo servirebbe spazio al testo, e la riga sotto non ha più senso
     quando non separa un pannello dal successivo. */
  .band::before{position:absolute;z-index:1;
    top:calc(72px + env(safe-area-inset-top,0px));left:clamp(22px,7vw,44px);
    /* Campitura oro con la cifra ink: come testo l'oro non reggerebbe ne'
       sul marmo chiaro ne' sul cielo. */
    width:auto;padding:.35em .6em;border:0;
    background:var(--gold);color:#111418}

  .hero .band .sub,.hero .band .split-sub{color:rgba(246,242,233,.88);font-size:1.06rem}
  .hero .band .kicker{color:rgba(246,242,233,.9)}
  .band .chip{background:rgba(16,13,8,.34);border-color:rgba(246,242,233,.3);
    backdrop-filter:blur(6px);text-shadow:none}
  /* "ARCATA" in Syne ExtraBold maiuscola è larga 7,19 em misurate: dentro
     una colonna larga quanto lo schermo meno i margini, il corpo massimo
     che ci sta è 11,7vw. Sopra, la A finale esce dal vetro. */
  .display.xl{font-size:min(11.7vw,3.4rem)}
  .band .cta-row{margin-top:6px}

  /* Obbligatorio anche qui, come sul desktop. Morbido voleva dire che uno
     swipe corto ti lasciava a meta' fra due fermate, e serviva un secondo
     gesto per finire il segmento: e' quello che rendeva l'esperienza a
     scatti. Le sezioni lunghe sotto non rischiano piu' niente, perche'
     l'aggancio e' gia' spento fuori dall'hero dalla classe .aggancio. */
  html.aggancio{scroll-snap-type:y mandatory}
}

/* ============ Il telefono: una schermata sola che va avanti ============ */
/* Stessa impaginazione del desktop — palco appiccicato, battute in
   sovrimpressione, una fermata per gesto — con tre differenze che vengono
   tutte dalla forma dello schermo:
   il testo sta in basso e non al centro, perché su un telefono il centro è
   dove sta il soggetto dell'inquadratura e il basso è dove sta il pollice;
   il velo è una fascia dritta invece di un alone, perché il testo occupa
   tutta la larghezza e un alone tondo lascerebbe scoperti gli angoli;
   e l'anello di caricamento non c'è, perché qui il filmato arriva a pezzi
   mentre già si guarda, invece che tutto prima di cominciare. */
.hero.viaggio.film .ring{display:none}

/* Stessa ancora del caso largo: dall'alto, a quota fissa. Questa regola
   pesa piu' di quella generale e prima la contraddiceva, rimettendo il
   testo in basso — ed e' per questo che la posizione continuava a ballare
   fra una fermata e l'altra. */
.hero.viaggio.film .band,
.hero.viaggio.film .band.center,
.hero.viaggio.film .band.left,
.hero.viaggio.film .band.right,
.hero.viaggio.film .band.settle{
  justify-content:flex-end;align-items:flex-start;text-align:left;gap:11px;
  padding:0 clamp(22px,7vw,44px) clamp(30px,4.5vh,52px);
  max-width:none;color:#f6f2e9;text-shadow:var(--tshadow-dark)}
.hero.viaggio.film .band > *{position:relative;z-index:1}
.hero.viaggio.film .band .display{max-width:none}
.hero.viaggio.film .band .sub{opacity:1;color:rgba(246,242,233,.88);font-size:.98rem;max-width:34ch}
.hero.viaggio.film .band .kicker{opacity:1;color:rgba(246,242,233,.9)}
.hero.viaggio.film .band .chip{background:transparent;border-color:var(--line-strong)}
/* "ARCATA" in Syne ExtraBold maiuscola è larga 7,19 em misurate: dentro una
   colonna larga quanto lo schermo meno i margini, il corpo massimo che ci
   sta è 11,7vw. Sopra, la A finale esce dal vetro. */
.hero.viaggio.film .display.xl{font-size:min(11.7vw,3.4rem)}

.hero.viaggio.film .band::before,
.hero.viaggio.film .band[data-tone="dark"]::before,
.hero.viaggio.film .band.left::before,
.hero.viaggio.film .band.right::before,
.hero.viaggio.film .band.settle::before{
  /* La fascia era al 42% e mangiava mezzo vetro. Al 27% copre le righe di
     testo e basta: il soggetto dell'inquadratura — la cupola, il corpo, la
     vetrina — resta libero, che e' il motivo per cui il filmato sta li'. */
  inset:auto 0 0 0;height:23%;z-index:0;
  background:rgba(17,20,24,.72);border-top:2px solid var(--gold);
  opacity:calc(.3 + .7*var(--k,1))}
/* l'indicatore di tappa in alto, in oro: sotto ci passano sia la cupola
   bianca sia il marmo scuro, e la crema sparirebbe sulla prima */
.hero.viaggio.film .hud{top:calc(70px + env(safe-area-inset-top,0px));
  left:clamp(22px,7vw,44px);right:auto;bottom:auto}

/* ============ La verità sulla vestibilità ============ */
.verita .sec-head .display{max-width:22ch}

/* Il dato e' la vetrina principale della pagina: campitura oro piena, cifra
   in mono su ink. E' l'unico blocco identico pixel per pixel nei due modi —
   e' il pezzo che tiene insieme il sistema. La fonte resta in pagina: fa
   parte della credibilita', non e' una nota a pie' di pagina. */
.dato{display:block;background:var(--gold);color:#111418;
  padding:clamp(28px,4vw,38px) clamp(24px,4vw,34px);margin:0}
.dato-n{font-family:var(--mono);font-weight:500;line-height:.85;letter-spacing:-.05em;
  font-size:clamp(4.4rem,12vw,7.5rem);color:#111418;margin-bottom:16px}
.dato-n span{font-size:.44em;vertical-align:baseline;margin-left:.02em}
.dato figcaption{max-width:46ch}
.dato-t{font-size:clamp(1.02rem,1.8vw,1.18rem);font-weight:500;line-height:1.5;margin-bottom:10px}
.dato-s{font-family:var(--mono);font-size:.78rem;line-height:1.6;color:#111418;opacity:.75}
.dato-s a{color:#111418;text-decoration:underline;text-underline-offset:2px}

.mappa{margin-top:clamp(34px,5vw,56px)}
.mappa-intro{font-size:1.06rem;color:var(--text-secondary);max-width:54ch;margin-bottom:22px}
.mappa-legenda{list-style:none;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.fit{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--tinta);
  border-radius:12px;padding:16px 18px;font-size:.95rem;color:var(--text-secondary)}
.fit b{grid-column:2;font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta)}
.fit-p{grid-row:1 / span 2;width:11px;height:11px;border-radius:50%;margin-top:5px;
  background:var(--tinta);box-shadow:0 0 0 4px color-mix(in srgb,var(--tinta) 18%,transparent)}
.fit-comodo{--tinta:var(--fit-comodo)}
.fit-aderente{--tinta:var(--fit-aderente)}
.fit-tira{--tinta:var(--fit-tira)}

.verita-chiusa{margin-top:clamp(30px,4vw,46px);max-width:58ch;
  font-size:clamp(1.02rem,1.7vw,1.18rem);color:var(--text-primary)}
@media (max-width:560px){
  .dato{gap:14px}
  .dato-n{font-size:clamp(4rem,22vw,6rem)}
  .verita .sec-head .display{font-size:clamp(1.6rem,6.4vw,2.2rem)}
}


/* ============ L'indicatore di tappa ============ */
/* Mono, oro, con una barra piena da 2px davanti: e' un indice di posizione,
   e un indice si scrive con lo strumento. Niente pastiglia: la campitura
   oro e' riservata alle tre vetrine della pagina, e questo non e' una. */
.hud{display:flex;align-items:center;gap:0;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:#111418;background:var(--gold);border:0;border-radius:0;padding:.45em .8em}
.hud::before{content:"";width:0}

/* ============ Il testo sopra il filmato ============ */
/* Sullo scuro il testo non ha piu' bisogno di ombre per staccare: c'e' la
   fascia. Le ombre erano un rimedio al fondo chiaro, e sono sparite coi token. */
/* La fascia sotto le battute resta ink anche col sito chiaro, e dentro la
   fascia valgono le regole dello scuro: avorio sul testo, gesso sul
   sottotitolo. Il documento lo dice — dove c'e' un render, il fondo e' ink.
   Qui il render e' chiaro, quindi la fascia e' l'unica superficie scura, ed
   e' esattamente cio' che rende leggibile il testo sopra il marmo. */
.hero.viaggio .band{text-shadow:none;color:#F1EDE4}
.hero.viaggio.film .band .sub{color:#8FA7B8}
.hero.viaggio.film .band .kicker{background:var(--gold);color:#111418;border:0}

/* ============ Il problema · la prova · i brand ============ */
/* Tre sezioni con tre funzioni diverse, e si vede dal trattamento.
   Il problema apre il corpo: il dato in campitura oro e' la vetrina della
   pagina, e sopra ci sta solo un titolo.
   La prova e' una stanza dichiarata vuota: si vede che manca qualcosa, ed e'
   meglio di far finta che non serva.
   I brand hanno un tono a parte — qui non si racconta, si calcola — e per
   questo stanno su cemento invece che su alabastro: e' un documento dentro
   il sito, non una sua sezione narrativa. */
.problema .dato{margin:6px 0 26px}
.problema-lede{max-width:52ch}

.prova-vuoto{border:1px solid var(--line-strong);padding:clamp(30px,5vw,52px) clamp(22px,4vw,40px);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.prova-taglie{display:flex;gap:2px}
.prova-taglie span{width:64px;height:52px;display:grid;place-items:center;
  font-family:var(--mono);font-size:1rem;letter-spacing:.1em;
  background:var(--panel);color:var(--text-secondary)}
.prova-taglie span:nth-child(2){background:var(--gold);color:#111418}
.prova-attesa{font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);border-bottom:2px solid var(--gold);padding-bottom:6px}
.prova-nota{color:var(--text-secondary);max-width:52ch;font-size:.98rem}

.brand-sec{background:var(--panel)}
.brand-tesi{font-size:clamp(1.06rem,1.9vw,1.24rem);max-width:58ch;margin-top:18px}
.brand-due{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(24px,4vw,52px);margin-top:clamp(34px,5vw,54px)}
.brand-h{font-family:var(--display);font-size:1.02rem;text-transform:uppercase;letter-spacing:-.01em;
  padding-bottom:10px;border-bottom:2px solid var(--gold);margin-bottom:16px}
.brand-col p{color:var(--text-secondary)}
.brand-lista{list-style:none;display:flex;flex-direction:column;gap:12px;color:var(--text-secondary)}
.brand-lista li{padding-left:20px;position:relative}
.brand-lista li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--gold)}
.brand-mercato{margin-top:clamp(34px,5vw,54px);border-left:3px solid var(--gold);
  padding:20px 0 20px 24px;display:flex;flex-direction:column;gap:12px;
  color:var(--text-secondary);font-size:.98rem;max-width:70ch}
.brand-mercato-t{font-family:var(--display);font-size:.96rem;text-transform:uppercase;color:var(--ink)}
.brand-mercato-c{color:var(--ink)}
.brand-cta{justify-content:flex-start;margin-top:clamp(28px,4vw,44px)}


/* ============ Le battute sopra il filmato ============ */
/* Una posizione sola per tutte e cinque. Prima ognuna aveva la sua —
   centro, sinistra, destra — e a ogni fermata il testo saltava da una parte
   all'altra dello schermo: si leggeva come un difetto, non come un ritmo.
   Un viaggio ha una voce sola, e una voce sta ferma.

   E una dissolvenza sola, fatta qui e non a mano fotogramma per fotogramma.
   La battuta accesa e' quella della fermata piu' vicina: entra salendo di
   pochi pixel, esce senza muoversi. Uscire in movimento raddoppiava il
   movimento proprio mentre il filmato ne aveva gia' il suo. */
.hero.viaggio .band,
.hero.viaggio .band.center,
.hero.viaggio .band.left,
.hero.viaggio .band.right,
.hero.viaggio .band.settle{
  /* Ancorate in ALTO a una quota fissa, non in basso. Ancorandole in basso
     il bordo superiore si spostava con il numero di righe del titolo: due
     righe partivano piu' in basso di tre, e a ogni fermata il testo cambiava
     posto. Dall'alto, la prima riga del titolo cade sempre sulla stessa
     riga dello schermo e il blocco cresce verso il basso, dove c'e' spazio. */
  justify-content:flex-start;align-items:flex-start;text-align:left;
  padding:0 clamp(22px,7vw,80px) clamp(34px,5vh,58px);
  max-width:min(46ch,72vw);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s var(--ease-out),visibility 0s linear .5s}
.hero.viaggio .band.attiva{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .55s var(--ease-out),visibility 0s}

/* Il testo entra salendo, ma solo entrando. */
html.js .hero.viaggio .band .display,
html.js .hero.viaggio .band .sub,
html.js .hero.viaggio .band .kicker,
html.js .hero.viaggio .band .cta-row{
  transform:translateY(14px);transition:transform .55s var(--ease-out)}
html.js .hero.viaggio .band.attiva .display,
html.js .hero.viaggio .band.attiva .sub,
html.js .hero.viaggio .band.attiva .kicker,
html.js .hero.viaggio .band.attiva .cta-row{transform:none}
.hero.viaggio .band.attiva .sub{transition-delay:.06s}
.hero.viaggio .band.attiva .cta-row{transition-delay:.12s}

/* Via l'assemblaggio lettera per lettera: era la parte che faceva sembrare
   il testo rotto. Le lettere restano dove sono. */
.hero.viaggio .band .w,.hero.viaggio .band .c,.hero.viaggio .band .split{
  opacity:1 !important;transform:none !important;filter:none !important}

/* La fascia sotto il testo resta ferma: era legata a --k, che non esiste piu'. */
.hero.viaggio .band::before{opacity:1}
.hero.viaggio.film .band::before,
.hero.viaggio.film .band[data-tone="dark"]::before,
.hero.viaggio.film .band.left::before,
.hero.viaggio.film .band.right::before,
.hero.viaggio.film .band.settle::before{opacity:1}


/* Sul telefono le righe vanno a capo di piu', quindi la fascia e' un po' piu'
   alta della versione larga. Resta comunque sotto la meta': il soggetto
   dell'inquadratura - la cupola, il corpo, la vetrina - non si tocca. */
@media (max-aspect-ratio: 7/10){
  .hero.viaggio .band::before,
  .hero.viaggio.film .band::before,
  .hero.viaggio.film .band[data-tone="dark"]::before,
  .hero.viaggio.film .band.settle::before{height:31%}
}


/* ============ La fascia aderisce al testo ============ */
/* Una percentuale fissa non puo' andare bene per tutte: la battuta piu'
   corta lasciava trecento pixel di fascia vuota sotto, e quella con il
   bottone sfondava sopra. La fascia ora e' la riga di testo stessa, e cresce
   con lei — e' lo stesso gesto delle campiture oro del sistema, un blocco
   pieno che dice "qui si legge", solo in ink invece che in oro.
   box-decoration-break:clone perche' su piu' righe il blocco va ripetuto su
   ognuna, se no si chiude solo in cima e in fondo. */
.hero.viaggio .band .display,
.hero.viaggio .band .sub{
  background:rgba(17,20,24,.84);
  box-shadow:.32em 0 0 rgba(17,20,24,.84),-.32em 0 0 rgba(17,20,24,.84);
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  padding:.06em 0;display:inline;line-height:1.28}
.hero.viaggio .band .sub{line-height:1.5}
/* Il filetto oro non corre piu' per tutto lo schermo: sta sotto la battuta,
   dove serve a chiudere il blocco. */
.hero.viaggio .band::before{display:none}
.hero.viaggio .band .cta-row{margin-top:14px}


/* ============ La barra sopra il filmato ============ */
/* Le voci erano in GRAFITE, cioe' un grigio di mezzo: su un render chiaro
   sta poco sopra i 2:1 e si perde. Non serviva una barra sotto — bastava
   l'inchiostro pieno, che sulle cinque fermate regge sempre perche' in
   cima sono tutte chiare: cielo, cupola bianca, architettura bianca,
   soffitto caldo. Cosi' il viaggio resta senza cornice, che era la scelta.
   Il grigio torna solo quando la barra si solidifica, dove sotto non c'e'
   piu' un'immagine ma la pagina. */
.nav .brand,.nav .nav-links a{color:var(--ink)}
.nav .nav-links a:hover{color:var(--ink)}
.nav.solid .nav-links a{color:var(--text-secondary)}
.nav.solid .nav-links a:hover{color:var(--text-primary)}