/* Comune a tutte le pagine: tokens, reset, tipografia, preloader,
   cursore, barra, menu, footer. Estratto da index.html. */

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ink:#060708;
  --ink-2:#0d0f12;
  --paper:#d2d2d2;
  --white:#f4f4f2;
  --dim:#8a8a8a;
  --orange:#d8882a;        /* accento del marchio */
  --orange-dim:#b8711f;

  /* Objektiv Mk1 per il sans, Ivy Mode per il serif. Nessuna terza famiglia. */
  --f-display:"objektiv-mk1",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-serif:"ivymode",Georgia,"Times New Roman",serif;
  --f-mono:"objektiv-mk1",ui-monospace,"SF Mono",Menlo,monospace;
  --w-display:500;   /* Objektiv Medium */
  --w-serif:300;     /* Ivy Mode Light */

  --pad:clamp(20px,3.4vw,56px);
  --nav-h:84px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
/* Niente parole isolate sull'ultima riga: i titoli si bilanciano su tutte
   le righe, i paragrafi solo sull'ultima (piu' leggero per i testi lunghi).
   Dove il browser non supporta ancora text-wrap, il testo va semplicemente
   a capo come prima: nessun rischio. */
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
body{
  background:var(--ink);
  color:var(--white);
  font-family:var(--f-display);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%}
/* Con prefers-reduced-motion Lenis non parte, quindi i link interni tornano
   a essere salti nativi del browser: senza questo margine il titolo della
   sezione finisce sotto la barra fissa. Vale anche per chi arriva da un
   indirizzo con l'ancora gia' dentro. */
main > section, main{scroll-margin-top:var(--nav-h)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--orange);color:var(--ink)}

/* Focus da tastiera: prima non c'era nulla e chi naviga col Tab era cieco.
   currentColor perche' la pagina alterna fondi scuri e chiari. */
:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
  border-radius:2px;
}
.pill:focus-visible{outline-offset:4px}
/* il puntatore finto non deve coprire il focus */
#cursor{z-index:900}

/* salta al contenuto: utile con lo scroll guidato */
.skip{
  position:absolute;left:var(--pad);top:-100px;z-index:1100;
  background:var(--orange);color:var(--ink);
  padding:12px 18px;border-radius:var(--radius-l,4px);
  font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  transition:top .2s var(--ease);
}
.skip:focus{top:14px}

.mono{font-family:var(--f-mono);font-weight:400;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-variant-numeric:tabular-nums}

/* ============================================================
   PRELOADER
   ============================================================ */
#preloader{
  position:fixed;inset:0;z-index:1000;background:var(--ink);
  display:flex;align-items:flex-end;justify-content:space-between;padding:var(--pad);
}
/* Il nome in serif. Tre cose cambiano insieme rispetto al sans: la crenatura
   scende da -.05em a -.012em, perche' a quel valore Ivy Mode attacca le grazie;
   il corpo sale dell'8% (48->52, 9->9.8vw, 120->132), perche' l'altezza x piu'
   bassa lo fa sembrare piu' piccolo a parita' di misura; il peso e' il 300 del
   Light, l'unico che il serif porta qui. */
#preloader .pl-mark{
  font-family:var(--f-serif);font-weight:var(--w-serif);
  font-size:clamp(52px,9.8vw,132px);letter-spacing:-.012em;
  line-height:.9;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em;
}
#preloader .pl-mark span{display:block;transform:translateY(110%)}
#pl-count{
  font-family:var(--f-display);font-weight:500;font-size:clamp(48px,9vw,120px);
  letter-spacing:-.03em;line-height:.9;font-variant-numeric:tabular-nums;
}
#pl-bar{position:absolute;left:0;bottom:0;height:1px;width:100%;background:rgba(255,255,255,.14)}
#pl-bar i{display:block;height:100%;width:0;background:var(--orange)}

/* Il marchio in mezzo. Le dieci righe si accendono una alla volta: lo
   sfasamento e' un decimo del ciclo, quindi a ogni istante una e' accesa e
   l'onda non ha buchi ne' un inizio da aspettare.

   Il motore e' CSS e non GSAP di proposito. Il ticker dorme insieme alla
   finestra, e chi apre il sito in una scheda di sfondo troverebbe un marchio
   fermo in mezzo allo schermo, che si legge come una pagina bloccata: qui
   sta davanti al contenuto, quindi e' l'unico posto dove quel difetto
   costa quanto un errore. */
#pl-logo{
  /* Il grigio spento sta qui e non fra i token: vive solo dentro al
     preloader, ed e' l'unico posto del sito dove il marchio si vede spento. */
  --pl-spento:#2e3238;
  /* Occupa tutto e centra col grid invece di stare al 50% con una
     `translate`: l'uscita lo scala con GSAP, che riscrive la `transform`
     per intero e si porterebbe via il centramento. */
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
}
/* La misura parte da quella del marchio 3D della hero e ne prende tre quarti.
   Il numero grande non e' a occhio: il gruppo 3D e' scalato a 3,4 unita' di
   mondo, la camera ha un campo di 38 gradi a distanza 9, quindi inquadra
   2*9*tan(19) = 6,198 unita' in altezza su una tela alta quanto la hero,
   cioe' il 54.86%% dello schermo; qui sta al 75%% di quello. A dimensione
   piena il marchio arrivava sotto al nome e il preloader diventava una
   pagina piena invece di un'attesa. Sotto i 700px il marchio 3D si riduce a
   0,6 (RESP in init3D) e questo lo segue.

   `svh` e non `vh` perche' la hero e' alta `min-height:100svh`: su iOS le due
   non coincidono finche' la barra dell'indirizzo non si ritira, e il marchio
   seguirebbe un'altezza che la hero non ha. La riga in `vh` resta prima come
   ripiego per chi non conosce `svh`. Un controllo rifa' tutto il conto dalle
   costanti della camera. */
#pl-logo svg{width:41.14vh;width:41.14svh;height:auto;display:block}
@media (max-width:699px){ #pl-logo svg{width:24.69vh;width:24.69svh} }
#pl-logo path{
  fill:var(--pl-spento);
  animation:pl-onda 1.9s linear infinite;
  animation-delay:calc(var(--i) * .19s);
}
@keyframes pl-onda{
  0%, 100%{fill:var(--pl-spento)}
  8%      {fill:var(--orange)}
  34%     {fill:var(--pl-spento)}
}
/* Senza movimento resta il marchio pieno: un logo fermo, non dieci righe
   spente che sembrano un caricamento a meta'. */
@media (prefers-reduced-motion: reduce){
  #pl-logo path{animation:none;fill:var(--orange)}
}

/* ============================================================
   VELO DI TRANSIZIONE
   Le lamelle che coprono lo schermo fra una pagina e l'altra.
   Le muove initTransizioni() in comune.js.

   Il contenitore sta nel markup delle pagine che non hanno il preloader —
   le dodici di progetti/ e contatti.html — e non lo scrive JavaScript: in
   arrivo deve essere nero dal primo disegno, e uno script in fondo al body
   arriva dopo che la pagina si e' gia' vista. La home non ce l'ha: li' lo
   schermo lo copre #preloader, che nel markup c'e' gia'.

   Il fondo nero sta sul contenitore finche' le lamelle non esistono: le
   scrive JavaScript, e prima di allora un velo trasparente non coprirebbe
   niente. Con .pronto il nero passa alle lamelle, che sono quelle che si
   aprono.
   ============================================================ */
#velo{
  position:fixed;inset:0;z-index:1200;background:var(--ink);
  pointer-events:none;

  /* Rete di sicurezza, la stessa idea del setTimeout dentro initPreloader():
     se JavaScript non arriva — spento, in errore, un file mancante aprendo
     col doppio clic — il velo si toglie da solo dopo un secondo. Senza,
     resterebbe uno schermo nero e la pagina sarebbe irraggiungibile.
     initTransizioni() la spegne appena prende in mano il velo. */
  animation:velo-salvagente .35s var(--ease) .9s forwards;
}
@keyframes velo-salvagente{ to{ opacity:0; visibility:hidden; } }
#velo.pronto{ background:none; animation:none; }
#velo.chiuso{ pointer-events:auto; }   /* mentre copre, non si clicca sotto */

#velo .velo-lamella{
  position:absolute;left:0;width:100%;
  background:var(--ink);
  will-change:transform;
}

/* ============================================================
   CURSOR
   ============================================================ */
#cursor{
  position:fixed;top:0;left:0;z-index:900;width:12px;height:12px;border-radius:50%;
  border:1px solid var(--white);pointer-events:none;
  transition:width .35s var(--ease),height .35s var(--ease),background .35s,opacity .3s;
  mix-blend-mode:difference;opacity:0;
}
#cursor.is-on{opacity:1}
#cursor.is-hover{width:56px;height:56px;background:rgba(255,255,255,.1)}
@media (hover:none),(pointer:coarse){#cursor{display:none}}

/* ============================================================
   NAV / MENU
   ============================================================ */
#nav{
  position:fixed;top:0;left:0;width:100%;z-index:800;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);
  /* niente mix-blend-mode: sull'arancione la differenza vira al blu.
     Il colore viene invertito a mano in base allo sfondo sotto la barra. */
  color:var(--white);
  transition:color .35s var(--ease);
  pointer-events:none;                    /* serve a leggere cosa c'è sotto */
}
#nav > *{pointer-events:auto}
#nav .brand .mark{color:var(--orange);transition:color .35s var(--ease)}

/* Velo dietro la barra. Senza, il marchio finisce sopra ai titoli e alle card
   mentre scorrono. Compare solo fuori dalla hero e prende il tono della sezione. */
#nav::before{
  content:"";position:absolute;top:0;left:0;right:0;
  height:calc(var(--nav-h) * 1.9);
  pointer-events:none;z-index:-1;
  background:linear-gradient(to bottom, rgba(10,10,11,.92) 0%, rgba(10,10,11,.62) 45%, rgba(10,10,11,0) 100%);
  opacity:0;transition:opacity .45s var(--ease);
}
#nav.veiled::before{opacity:1}
#nav.on-light::before{
  background:linear-gradient(to bottom, rgba(207,207,203,.94) 0%, rgba(207,207,203,.64) 45%, rgba(207,207,203,0) 100%);
}

/* sezioni chiare: marchio nero, testo nero */
#nav.on-light{color:var(--ink)}
#nav.on-light .brand .mark{color:var(--ink)}
#nav.on-light .pill{border-color:rgba(34,34,33,.35)}
#nav.on-light .pill.solid{border-color:var(--orange)}
#nav .brand{display:flex;align-items:center}
/* stessa altezza dei pulsanti della nav (40px): il marchio si allarga di conseguenza */
#nav .brand .mark{display:block;height:40px;color:var(--orange)}
#nav .brand .mark svg{display:block;height:100%;width:auto}
.nav-right{display:flex;align-items:center;gap:10px}
.pill{
  display:inline-flex;align-items:center;gap:12px;height:40px;padding:0 20px;border-radius:100px;
  border:1px solid rgba(255,255,255,.48);
  transition:border-color .35s var(--ease);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
}
.pill.solid{background:var(--orange);color:var(--ink);border-color:var(--orange);transition:background .3s var(--ease)}
.pill.solid:hover{background:var(--orange-dim)}
.pill .burger{display:flex;flex-direction:column;gap:4px;width:15px}
.pill .burger i{display:block;height:1px;width:100%;background:currentColor;transition:transform .4s var(--ease)}
#btn-menu.open .burger i:nth-child(1){transform:translateY(2.5px) rotate(45deg)}
#btn-menu.open .burger i:nth-child(2){transform:translateY(-2.5px) rotate(-45deg)}

#menu{
  position:fixed;inset:0;z-index:790;background:var(--ink-2);
  clip-path:inset(0 0 100% 0);display:flex;flex-direction:column;justify-content:center;
  padding:var(--nav-h) var(--pad) var(--pad);visibility:hidden;
}
/* I due `margin-top:auto` — qui e sul piede — si dividono lo spazio libero
   in parti uguali, quindi la lista sta in mezzo fra la barra e il piede.
   Col solo auto sul piede la lista restava incollata sotto al marchio. */
/* Il varco fra una voce e l'altra non scende sotto gli 8px: a 375 il vecchio
   `clamp(2px,1vw,10px)` ne dava 4, e con righe alte quanto tutta la colonna
   due bersagli attaccati si sbagliano col pollice. Sopra i 1000px il valore
   non cambia, quindi il menu grande resta quello di prima. */
#menu ul{list-style:none;display:flex;flex-direction:column;gap:clamp(8px,1vw,10px);margin-top:auto}
/* padding + margine negativo: allarga il box di ritaglio sotto la linea di base
   così le discendenti (g, p, q) non vengono tagliate dall'overflow.
   Il font-size va dichiarato QUI, altrimenti gli `em` del padding si calcolano
   sui 16px ereditati dal body invece che sul corpo del titolo. */
#menu li{
  font-size:clamp(38px,8.5vw,110px);
  overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em;
}
/* Serif, come il titolo della tendina e quello dei contatti. Il serif ha aste
   piu' sottili: a -.045em le grazie si toccano, quindi la crenatura sale a
   -.012em. Ivy Mode ha anche l'altezza x piu' bassa, percio' a parita' di
   corpo la voce sembra piu' piccola: il corpo resta quello del sans. */
#menu li a{
  display:block;font-family:var(--f-serif);font-size:inherit;
  font-weight:var(--w-serif);letter-spacing:-.012em;
  line-height:1.02;transform:translateY(130%);transition:color .4s;
}
#menu li a:hover{color:var(--dim)}
/* Sotto i 520px il corpo si ferma sul pavimento del clamp, 38px, e con
   `line-height:1.02` ogni voce resta alta 39: larga quanto la colonna e sotto
   i 44 che un dito chiede. Il respiro lo da' l'interlinea, che qui e' l'unica
   leva che non passa dall'`overflow:hidden` del li — un padding sull'anchor
   verrebbe ritagliato insieme al resto e l'area guadagnata non si potrebbe
   toccare. Sopra quella soglia il corpo cresce da solo e non serve niente. */
@media (max-width:520px){ #menu li a{line-height:1.16} }
/* L'anello di fuoco qui si vedeva come una riga sola a tutta larghezza:
   l'anchor e' `display:block`, e `overflow:hidden` sul li taglia i tre lati
   lasciando solo quello basso. Succede all'apertura, perche' openMenu()
   porta il fuoco sul primo link. Al posto dell'anello, il colore. */
#menu li a:focus{outline:none}
#menu li a:focus-visible{outline:none;color:var(--orange)}
/* Apertura senza GSAP: se la libreria non arriva, il menu si apre lo stesso
   e la transizione la fa il CSS. Con GSAP questa classe non viene mai messa. */
#menu.aperto{clip-path:inset(0 0 0% 0);visibility:visible;transition:clip-path .6s var(--ease)}
#menu.aperto li a{transform:translateY(0)}
#menu .menu-foot{
  margin-top:auto;padding-top:40px;display:flex;flex-wrap:wrap;gap:32px;
  justify-content:space-between;color:var(--dim);
}
#menu .menu-foot a:hover{color:var(--white)}

/* ============================================================
   ARCHIVIO — la lista dei progetti, con l'anteprima al puntatore
   Sta qui e non in index.html perche' la usano tutte e due i posti in cui
   compare: la sezione #work della home e la coda delle pagine progetto.
   Prima le pagine progetto avevano una lista loro (.caso-lista): stessi dati,
   altro impaginato, e all'hover cambiava soltanto il colore del titolo.
   ============================================================ */
.sec-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;
  padding-bottom:clamp(36px,6vh,72px);border-bottom:1px solid rgba(255,255,255,.14);
}
.sec-head h2{
  font-family:var(--f-serif);font-weight:var(--w-serif);
  font-size:clamp(36px,5.9vw,90px);letter-spacing:-.012em;line-height:1;max-width:16ch;
}
.wlist{list-style:none;isolation:isolate}
/* La griglia sta sulla riga, e passa all'anchor quando la riga e' un link:
   `display:contents` non gli dava nessun box, quindi da cliccare c'erano le
   tre parole e non la riga. Su una riga alta 124px che al passaggio si accende
   tutta, due punti su tre cadevano nel vuoto — misurato a 375. La classe la
   mette montaArchivio() quando scrive l'anchor, cosi' non serve `:has()`: qui
   una regola che non arriva non sposterebbe un colore, smonterebbe l'archivio. */
.wrow,
.wrow--link .wlink{
  display:grid;grid-template-columns:64px 1fr auto;
  align-items:center;gap:clamp(14px,3vw,40px);
  padding:clamp(20px,2.6vw,34px) 0;
}
.wrow{
  position:relative;z-index:0;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.wrow--link{display:block;padding:0}
.wrow--link .wlink{color:inherit}
.wrow .idx{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--dim)}
.wrow .ttl{font-size:clamp(22px,3.6vw,54px);font-weight:500;letter-spacing:-.04em;line-height:1.05;transition:transform .55s var(--ease),color .4s}
.wrow .cat{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-align:right}
.wrow::before{
  content:"";position:absolute;left:-2vw;right:-2vw;top:0;bottom:0;background:var(--orange);
  transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s var(--ease);z-index:-1;
}
.wrow:hover::before{transform:scaleY(1);transform-origin:50% 0%}
.wrow:hover .ttl{transform:translateX(18px);color:var(--ink)}
.wrow:hover .idx,.wrow:hover .cat{color:var(--ink)}
.wpeek{
  position:fixed;top:0;left:0;z-index:500;width:min(24vw,300px);aspect-ratio:4/3;
  border-radius:3px;overflow:hidden;pointer-events:none;opacity:0;will-change:transform,opacity;
}
@media (max-width:760px){.wpeek{display:none}.wrow,.wrow--link .wlink{grid-template-columns:44px 1fr}.wrow .cat{grid-column:2;text-align:left}}

/* ---- il riquadro copertina, condiviso ----
   Lo monta phMarkup() e da lui passano tre posti: le card di #showcase sulla
   home, l'anteprima al puntatore dell'archivio, e adesso anche quella delle
   pagine progetto. Le regole che riguardano solo la card della vetrina
   (.sc-card .ph) restano in index.html: sono di quella griglia, non del
   riquadro. */
.ph-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  z-index:0;            /* sopra il gradiente di riserva, sotto al testo */
}
/* velo: con una foto sotto, titolo e categoria devono restare leggibili.
   Va dal basso e anche dall'alto, perche' la categoria sta in cima.
   Il verso dipende dal tono della card: scuro sotto testo chiaro, chiaro sotto testo scuro. */
.ph::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:0;transition:opacity .3s var(--ease);
}
.ph:has(.ph-img)::after{opacity:1}
.ph.dark:has(.ph-img)::after{
  background:
    linear-gradient(to top,   rgba(0,0,0,.70) 0%, rgba(0,0,0,.16) 30%, transparent 50%),
    linear-gradient(to bottom,rgba(0,0,0,.42) 0%, transparent 17%);
}
.ph.light:has(.ph-img)::after{
  background:
    linear-gradient(to top,   rgba(245,245,242,.82) 0%, rgba(245,245,242,.20) 30%, transparent 50%),
    linear-gradient(to bottom,rgba(245,245,242,.58) 0%, transparent 17%);
}
.ph > .ph-m, .ph > .ph-r{position:relative;z-index:2}
.ph{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(14px,1.6vw,24px);background:var(--g);
}
.ph .ph-t{font-size:clamp(15px,1.5vw,26px);font-weight:500;letter-spacing:-.03em;line-height:1.05;max-width:12ch}
/* 9.5px a opacita' .65 sopra una foto velata scendeva sotto il rapporto
   minimo: la categoria si leggeva a fatica proprio sulle card scure.
   Un corpo appena piu' grande e meno trasparenza, restando una didascalia. */
.ph .ph-m{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.82}
.ph .ph-r{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.ph.dark{color:#f4f4f2}
.ph.light{color:#141414}

/* ============================================================
   FOOTER — la hero che ritorna
   Tre fasce: crediti in alto, nome ai due bordi in mezzo, dati in fondo.
   ============================================================ */
#footer{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;background:#000;color:var(--white);
  padding:clamp(70px,12vh,140px) var(--pad) var(--pad);
  display:flex;flex-direction:column;
}
/* Il video e' 1284x716: su un footer a tutta altezza va ritagliato, non
   deformato. object-fit:cover fa il lavoro a qualsiasi proporzione. */
#ft-video{
  position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block;
  object-fit:cover;pointer-events:none;
}
/* Due veli sovrapposti. Il radiale e' quello della hero e tiene i bordi
   scuri; quello verticale serve al video, che nella sua meta' bassa e'
   chiaro e mangerebbe il nome. Misurati per restare sopra 4.5:1. */
#footer::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to top, rgba(6,7,8,.88) 0%, rgba(6,7,8,.62) 34%, rgba(6,7,8,.38) 62%, rgba(6,7,8,.58) 100%),
    radial-gradient(120% 90% at 50% 45%,transparent 40%,rgba(6,7,8,.78) 100%);
}

.ft-alto{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.ft-tit{color:var(--dim)}
.ft-col ul{list-style:none;margin-top:16px;display:grid;gap:7px}
.ft-col a{position:relative}
.ft-col a::after{
  content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease);
}
.ft-col a:hover::after{transform:scaleX(1);transform-origin:0 50%}

/* Il nome ai due bordi, come "Juan / Mora": una riga sola, le due parole
   spinte agli estremi. Il corpo e' in vw perche' "Veramonti" e' lungo la
   meta' in piu' di "Andrea": a corpo fisso le due parole si toccherebbero.
   Il vuoto in mezzo va rimisurato a ogni cambio di carattere. Su 1327px
   disponibili a 1440 di larghezza:
     Objektiv  8.7vw -> 1327px di lettere, vuoto 0, parole attaccate
     Objektiv  7.8vw -> vuoto 134px
     Ivy Mode  7.8vw -> vuoto 330px, le due parole si sganciano
     Ivy Mode  9.4vw -> vuoto 126px
   Ivy Mode e' piu' stretto e ha l'altezza x piu' bassa, quindi a parita' di
   ritmo ottico vuole qualche punto in piu': da qui il 9.4vw.
   La crenatura scende a -.012em perche' a -.045em le grazie si toccano.

   Il tappo era il vero freno. A 1440 il nome riempiva gia' quasi tutto, ma
   sopra i 1600 di larghezza il corpo restava inchiodato a 150px e il vuoto in
   mezzo cresceva senza fine: a 2000 erano 557px, cioe' un buco largo quanto
   una delle due parole. Misurato con Ivy Mode, corpo in px contro il vuoto
   che resta fra le due parole:
              1440 (1342 disp.)   1680 (1568)   2000 (1888)
     135px         145                371           691
     141px          91                317           637
     150px          12                237           557
     165px           0                104           424
     196px           0                  0           149
   La riga tiene finche' il vuoto resta sopra i 90px: sotto, le due parole si
   leggono come una sola. 9.8vw sta su quel filo a ogni misura (141 / 165 /
   196), e il tappo sale da 150 a 260px: prima mordeva gia' a 1600, adesso
   entra solo oltre i 2650. Sopra quella misura il vuoto ricomincia a
   crescere, ed e' l'unico punto rimasto da rivedere il giorno che serve. */
.ft-name{
  margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;
  font-family:var(--f-serif);font-weight:var(--w-serif);
  font-size:clamp(40px,9.8vw,260px);
  line-height:1;letter-spacing:-.012em;text-transform:uppercase;
}
.ft-name .line{overflow:hidden;display:block;padding-bottom:.15em;margin-bottom:-.15em;white-space:nowrap}
.ft-name .line > span{display:block;transform:translateY(130%)}
/* Lettere elastiche. Ognuna e' un blocco a se': il JS le allarga in
   orizzontale vicino al cursore e le stringe lontano, poi le rimette in fila
   traslandole, perche' scaleX non sposta le vicine. transform-origin a
   sinistra cosi' la lettera cresce verso destra e i conti tornano. */
.ft-l{display:inline-block;transform-origin:0% 50%;will-change:transform}

.ft-base{
  margin-top:clamp(24px,4vh,50px);display:flex;justify-content:space-between;
  gap:24px;flex-wrap:wrap;color:var(--dim);
}
.ft-base p:last-child{text-align:right}
.ft-base span{color:var(--white);margin-left:16px}

/* Il nome grande e' un gesto di larghezza: due parole tirate ai due bordi,
   con le lettere che si allargano sotto al puntatore. Su un telefono non c'e'
   nessuna delle due cose — le parole si impilano a sinistra e il puntatore
   non esiste — e quello che resta e' il nome scritto grande per la terza
   volta, dopo il marchio in cima e la riga del copyright qui sotto. Sparisce.
   Resta nel markup perche' il footer ci si intitola: aria-labelledby legge
   anche un elemento nascosto, e la riga del nome se ne va dallo schermo
   senza portarsi via il nome della regione. */
@media (max-width:700px){
  .ft-name{display:none}
  /* Era .ft-name a portare il margin-top:auto che spinge in fondo la riga
     dei dati. Sparito lui, il compito passa a lei. */
  .ft-base{margin-top:auto;flex-direction:column;gap:10px}
  .ft-base p:last-child{text-align:left}
  .ft-base span{display:block;margin-left:0}
}

/* ============================================================
   FOOTER NERO — variante in prova sulla home
   Stessa impalcatura del footer col video, senza il video: fondo pieno,
   fascia in alto su tre colonne, e in mezzo la scia di copertine che
   segue una curva. Il nome resta identico, maschere ed elastico compresi,
   perche' il markup non cambia.
   I due veli di #footer::after esistono per schiarire il video: senza
   video sono solo due strati che scuriscono il nero, e vanno spenti.
   ============================================================ */
#footer.ft-nero{background:var(--ink);color:var(--white)}
#footer.ft-nero::after{content:none}

/* Le due colonne di sinistra restano appaiate anche quando la terza va a
   capo: etichetta a sinistra e voci a destra, ripetuto tre volte. */
.ft-nero .ft-alto{align-items:flex-start;gap:clamp(28px,5vw,90px)}
.ft-nero .ft-col{display:flex;gap:clamp(18px,2.6vw,44px)}
.ft-nero .ft-col--dx{margin-left:auto;text-align:right}
.ft-nero .ft-tit{
  color:var(--dim);font-size:13px;letter-spacing:.06em;
  padding-top:.55em;white-space:nowrap;
}
.ft-nero .ft-col ul{margin-top:0;gap:2px;font-size:clamp(18px,1.5vw,25px)}
.ft-nero .ft-col a::after{background:currentColor}
.ft-nero .ft-name{color:var(--white)}
.ft-nero .ft-base{color:var(--dim)}

/* ---- la scia di copertine ----
   Il componente di partenza e' React piu' Tailwind e usa motion/react per
   scrivere offset-distance a ogni fotogramma. Qui la meccanica e' la stessa
   ma senza libreria: offset-path porta le lettere del percorso, offset-distance
   la posizione lungo la curva, e il ciclo sta in comune.js.
   .ft-scia e' la fascia elastica; .ft-scia-piano e' il rettangolo alle misure
   del viewBox (996x330), scalato da JS per stare nella fascia. Le coordinate
   di offset-path sono in pixel del sistema dell'elemento, quindi il piano non
   puo' essere ridimensionato: va scalato. */
.ft-scia{
  position:relative;flex:1 1 auto;min-height:0;
  margin:clamp(10px,2.4vh,34px) calc(var(--pad) * -1) 0;
  overflow:hidden;
}
/* Il piano prende tutta la fascia: e' il percorso a essere riscritto alle
   sue misure, non il piano a essere scalato. */
.ft-scia-piano{position:absolute;inset:0}
.ft-scia-piano > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ft-scia-piano > svg path{stroke:none;fill:none}
.ft-scia-tratto{stroke:rgba(244,244,242,.14)!important;stroke-width:1}
/* offset-rotate sta a auto per impostazione predefinita, e le copertine si
   inclinano seguendo la tangente della curva: nel giro in mezzo finiscono
   a testa in giu'. Su una copertina si legge come uno storto, non come un
   effetto, quindi restano dritte. */
/* La misura sale con la larghezza perche' sale anche il percorso: la
   distanza fra una copertina e l'altra e' la lunghezza della curva divisa
   venti, cioe' circa il 7% della larghezza. Stando sotto quel numero le
   copertine non si toccano a nessuna misura di finestra. */
.ft-scia-el{
  position:absolute;top:0;left:0;width:clamp(76px,6.2vw,128px);
  offset-rotate:0deg;
  will-change:offset-distance;backface-visibility:hidden;
}
.ft-scia-el img{
  width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;border-radius:3px;
  transition:transform .3s var(--ease);
}
/* ---- la traccia sotto il puntatore ----
   La fascia tiene il posto in mezzo al footer come fa la scia, ma le
   copertine escono dal suo riquadro: si accendono ovunque passi il cursore,
   e devono poter arrivare sopra i link e dietro il nome. Quindi overflow
   visibile qui, e testo alzato di z-index sotto. */
.ft-traccia{position:relative;flex:1 1 auto;min-height:0;pointer-events:none}
.ft-traccia img{
  position:absolute;top:0;left:0;
  width:clamp(140px,13vw,240px);aspect-ratio:8/5;object-fit:cover;border-radius:3px;
  transform:translate(-50%,-50%) scale(0);opacity:0;
  transition:transform .5s cubic-bezier(.19,1,.22,1),opacity .4s var(--ease);
}
.ft-traccia img[data-stato="accesa"]{transform:translate(-50%,-50%) scale(1);opacity:1}
/* Le copertine hanno uno z-index proprio, quindi passerebbero sopra al testo,
   che e' statico. Il footer resta leggibile perche' il testo sta piu' su. */
.ft-nero .ft-alto,
.ft-nero .ft-name,
.ft-nero .ft-base{position:relative;z-index:30}
/* Le copertine possono arrivare oltre il bordo del footer: qui si tagliano. */
#footer.ft-nero{overflow:hidden}

.ft-scia--presa{cursor:grab}
.ft-scia--presa.is-tirata{cursor:grabbing}
/* Il puntatore del sito e' un cerchio disegnato, e sopra la scia diventa
   una presa: senza questo l'utente vede il cerchio e non capisce di poter
   trascinare. */
.ft-scia:hover .ft-scia-el img{transform:scale(1.06)}

@media (max-width:860px){
  .ft-nero .ft-col--dx{margin-left:0;text-align:left}
}
@media (max-width:700px){
  .ft-nero .ft-col{flex-direction:column;gap:6px}
  .ft-nero .ft-tit{padding-top:0}
  /* Sotto i 700px la curva si schiaccia a una striscia di 40px e le
     copertine si accavallano: meglio niente. */
  .ft-scia{display:none}
}

/* ============================================================
   CONSENSO
   ============================================================ */
.consenso{
  position:fixed;left:0;right:0;bottom:0;z-index:1000;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  padding:20px var(--pad);
  background:var(--ink-2);
  border-top:1px solid rgba(244,244,242,.14);
}
.consenso p{
  flex:1 1 420px;max-width:640px;
  font-size:14px;line-height:1.5;color:var(--white);
}
.consenso p a{text-decoration:underline;text-underline-offset:3px}
.consenso-azioni{display:flex;gap:12px;flex-shrink:0}

[data-rev]{opacity:0;transform:translateY(26px)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}