/* ==========================================================================
   Camilla Brossa — sistema visivo
   Fondo scuro, tipografia grande, scorrimento morbido, transizioni a cerchio.

   La grammatica del moto, valida per ogni pezzo del sito:

   - Entrare: --wave, .95s, scarto di 2.1em; dentro un gruppo le comparse
     si scaglionano di .62s (le parole di una frase di .78s). Le classi
     sono .fade, .rise, .lift, .words: non se ne aggiungono altre.
   - Uscire o ritirarsi: --wave-via, tra .32s e .52s.
   - Rispondere alla mano: --entra (.68s --wave) per entrare, --esce (.52s
     --wave-via) per lasciare. Gli inseguimenti con inerzia usano lerp .16
     (calamite, schede) o .10 (la mano sul volume); a riposo il JS azzera
     transform e will-change.
   - Legato allo scorrimento: view-timeline sul contenitore, durata 1ms,
     lineare, fill both, sempre dentro @supports (animation-timeline) e
     @media (prefers-reduced-motion: no-preference). Il riposo e lo stato
     finale, cosi senza orologio non manca niente.
   - Proprieta: solo transform, opacity e clip-path. Niente letture di
     layout per fotogramma: le misure si prendono su resize, gli stati li
     danno gli osservatori. Fanno eccezione dichiarata le lame del lavoro
     (max-height) e il piede (border-radius), che vengono da prima.
   - Cicli: due soli, gli strati iridescenti e la goccia dell'invito.
   - Tinta: --tinta colora filo del capitolo, filetto delle schede-link,
     tappa attiva del filo e pallino del seguito.
   ========================================================================== */

/* ------------------------------------------------------------------ font */
@font-face { font-family: 'Switzer'; src: url('../fonts/switzer-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('../fonts/switzer-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('../fonts/switzer-400i.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('../fonts/switzer-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('../fonts/switzer-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------------------------------------------------------------- valori */
:root {
  --dark: #1C1D20;
  --dark-2: #141517;
  --white: #FFFFFF;
  --gray: #999D9E;
  --lightgray: #E9EAEB;
  --blue: #455CE9;
  --blue-dark: #334BD3;
  --text: #1C1D20;
  --border: rgba(28, 29, 32, .175);
  --border-light: rgba(255, 255, 255, .2);

  --e: cubic-bezier(.7, 0, .3, 1);
  --t-fast: .3s var(--e);
  --t: .5s var(--e);
  --t-smooth: .7s var(--e);
  --t-slow: .9s var(--e);

  --pad: clamp(2.5rem, 8vw, 8rem);
  --gap: clamp(1.5rem, 4vw, 2.5rem);
  --sec: clamp(5rem, 21vh, 12rem);
  --maxw: 1600px;

  /* mezza onda: salita unica, senza rimbalzo */
  /* neumorfismo scavato: la luce viene da sopra-sinistra, quindi l'ombra
     sta dentro quel lato e il filo chiaro sul lato opposto */
  --carve-dark: rgba(0, 0, 0, .74);
  --carve-lite: rgba(255, 255, 255, .055);
  --carve: inset 3px 3px 8px var(--carve-dark), inset -2px -2px 6px var(--carve-lite);
  --carve-deep: inset 6px 6px 14px var(--carve-dark), inset -3px -3px 10px var(--carve-lite);
  --carve-soft: inset 2px 2px 5px rgba(0, 0, 0, .55), inset -1px -1px 4px var(--carve-lite);
  /* Il rovescio dell'incavo, stessa luce da sopra-sinistra: il filo chiaro
     sul lato illuminato e l'ombra portata su quello opposto, fuori invece
     che dentro. Cosi il blocco sporge dal fondo. */
  --relief: -3px -3px 10px rgba(255, 255, 255, .05), 8px 9px 24px rgba(0, 0, 0, .62);
  --relief-alto: -4px -4px 12px rgba(255, 255, 255, .07), 10px 12px 30px rgba(0, 0, 0, .68);

  /* Corsia libera a destra del pannello: il cerchio del menu ci sta dentro,
     di fianco alle schede e non sopra. */
  --corsia: calc(var(--bar-h) + var(--gap) + 1.1rem);

  /* L'onda che passa sotto la pelle: un giro di tinta continuo fra
     petrolio, turchese, oro, oro rosa, rosa, viola, indaco e ritorno.
     Ogni passo sposta la tinta di poco, cosi nessuna coppia deve
     attraversare il grigio per raggiungere la successiva. Tinte cupe e
     sature di proposito: le luci che vengono sopra si sommano, e su una
     base gia chiara arrivavano al bianco slavato invece che al bagliore.
     Orizzontale, non inclinata: la fascia si ripete per scorrere, e una
     fascia inclinata ha i due lati di colore disuguale, cosi ogni
     giunzione fra una copia e l'altra lascerebbe una riga netta.
     L'inclinazione la portano il lustro e le file di scaglie. */
  --iride-onda: linear-gradient(90deg,
    #04454F 0%, #046B6D 6%, #08918A 12%, #0FB49E 18%,
    #2ACFB4 24%, #63DCC6 29%, #A8CE9A 33%, #C9A45C 37%,
    #D9973A 42%, #CE7A54 48%, #C05F72 54%, #9C4F92 61%,
    #6E4BB4 68%, #4A47B8 75%, #2A55A0 82%, #12657F 89%,
    #04454F 100%);

  /* Tre luci colorate, ognuna col suo passo. I passi non hanno divisori
     in comune, cosi le tre non ricadono mai insieme e la miscela cambia
     da un punto all'altro e da un istante all'altro: e da qui che viene
     l'iridescenza, non dall'onda sotto, che da solo la tonalita.
     Ognuna si spegne all'84% del proprio raggio invece che al bordo
     della cella: se arriva a zero proprio sul taglio, l'alpha e
     continua ma la pendenza no, e la giunzione lascia una riga netta. */
  --iride-luce-a: radial-gradient(closest-side at 50% 50%,
    rgba(0, 205, 190, .80) 0%, rgba(0, 155, 152, .34) 48%, rgba(0, 0, 0, 0) 84%);
  --iride-luce-b: radial-gradient(closest-side at 50% 50%,
    rgba(240, 180, 72, .94) 0%, rgba(205, 135, 45, .40) 48%, rgba(0, 0, 0, 0) 84%);
  --iride-luce-c: radial-gradient(closest-side at 50% 50%,
    rgba(120, 80, 225, .70) 0%, rgba(70, 50, 180, .26) 48%, rgba(0, 0, 0, 0) 84%);

  /* Banda di luce larga che attraversa la pelle. */
  --iride-lustro: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, .14) 45%,
    rgba(255, 255, 255, .26) 50%,
    rgba(255, 255, 255, .14) 55%,
    rgba(255, 255, 255, 0) 70%);

  /* Dall'alto: le tre luci, il lustro, l'onda in fondo. */
  --iride: var(--iride-luce-a), var(--iride-luce-b), var(--iride-luce-c),
    var(--iride-lustro), var(--iride-onda);
  /* Passi calibrati sulle superfici che portano il riempimento, tutte
     piccole (il pallino misura 67px): piu larghi e ogni superficie prende
     una tinta sola e piatta, piu stretti e si vede la griglia. */
  --iride-size: 43px 29px, 61px 37px, 53px 31px, 200% 100%, 480% 100%;
  --iride-pos: 0 0, 0 0, 0 0, 0 0, 0 0;
  /* Le tre luci si sommano per accendere il colore. Il lustro resta in
     soft-light, altrimenti slava invece di accendere. */
  --iride-blend: screen, screen, screen, soft-light, normal;

  /* Altezza dell'immagine, non del riquadro che la contiene: il riquadro
     sporge in alto per il parallasse e viene poi ingrandito del 4% per il
     movimento col puntatore. */
  --foto-h: 96%;

  /* Solo la figura: la foto viene ritagliata sulla propria sagoma, cosi
     porta con se il rettangolo del suo fondo. Sotto resta un grigio solo,
     preso dal fondo della foto, esteso a tutta la schermata. */
  --grigio: #8698AE;
  /* il tono (contrasto, luce, saturazione) e gia nel file: come filtro CSS
     il browser lo ricalcolava su tutta la foto a ogni fotogramma */
  --scena: url('../img/hero-5-tono.jpg');
  --scena-size: auto var(--foto-h);
  /* Non al centro: la sagoma ha il suo asse al 52,7% della fotografia,
     quindi centrando l'immagine lei restava spostata a destra. Il 46,25%
     rimette il suo asse sull'asse della schermata - misurato sulla
     maschera, riga per riga. */
  --scena-pos: 46.25% bottom;

  --wave: cubic-bezier(.22, 1, .36, 1);
  --wave-t: .95s;
  /* Curva di ritorno. --wave arriva frenando, quindi va bene per quello
     che entra; qui serve il contrario: partire piano e prendere velocita
     uscendo, cosi la chiusura non ha lo strappo del primo fotogramma. */
  --wave-via: cubic-bezier(.55, 0, .8, .16);
  /* La coppia della mano: entrare e ritirarsi. Le usa tutto cio che
     risponde al puntatore - filetti, frecce, tappe, pallini - cosi un
     gesto solo ha un tempo solo in tutto il sito. */
  --entra: .68s var(--wave);
  --esce: .52s var(--wave-via);

  /* asse destro condiviso da bottone del menu e pallini dell'indice */
  --rail: clamp(3.2rem, 4.2vw, 3.8rem);

  --bar-h: 5.5rem;
  --bar-top: clamp(1.1em, 2.2vw, 1.9em);
}

/* ----------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
  /* barra nascosta: lo scorrimento resta, sparisce solo il cursore */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 0; height: 0; display: none; }
body {
  margin: 0;
  /* Ogni voce del menu porta la sua tinta, dichiarata sull'elemento radice. */
  background: var(--tinta, var(--dark));
  color: var(--text);
  font-family: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* Bloccare lo scorrimento non deve accorciare il documento. Con
   height: 100% il documento diventava alto quanto la finestra, la
   posizione di scorrimento non aveva piu dove stare e il browser la
   riportava a zero: aprendo il menu si finiva in cima al sito e
   chiudendolo ci si restava. Basta togliere lo scorrimento.

   E va tolto alla sola radice. Sul corpo, overflow: hidden su tutti e
   due gli assi lo fa diventare un contenitore di scorrimento fermo, e
   allora position: sticky dentro di lui non ha piu niente a cui
   agganciarsi: il perno della casa si staccava e la scheda usciva dallo
   schermo, cosi dietro al menu restava il fondo vuoto invece della
   pagina da cui si era partiti. Il corpo tiene il suo overflow-x:
   hidden, che lascia scorrevole l'asse verticale e non rompe niente. */
html.is-locked { touch-action: none; }
/* Fermandosi, Lenis mette overflow: clip sulla radice. Un elemento
   ritagliato non ha piu un riquadro di scorrimento, e position: sticky
   dentro di lui non ha piu niente a cui agganciarsi: il perno della casa
   si staccava e la scheda usciva dallo schermo, cosi dietro al menu
   restava il fondo vuoto invece della pagina da cui si era partiti. Qui
   si rimette com'era - un tipo piu due classi batte due classi, quindi
   vale a prescindere dall'ordine dei fogli. A trattenere il moto restano
   Lenis per la rotella, il touch-action qui sopra per il dito e il
   guardiano dei tasti nello script. */
html.lenis.lenis-stopped { overflow: visible; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; font-weight: 400; }
::selection { background: var(--blue); color: var(--white); }
.no-select { user-select: none; -webkit-user-select: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; z-index: 999; background: var(--white); color: var(--dark); padding: 1em; }
.skip:focus { left: 1em; top: 1em; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ------------------------------------------------------------ tipografia */
.h1, h1 {
  font-size: clamp(3.4rem, 11.6vw, 12rem);
  line-height: .95;
  letter-spacing: -.02em;
  font-weight: 400;
}
.h2, h2 {
  font-size: clamp(2.4rem, 6.4vw, 5.6rem);
  line-height: 1.06;
  letter-spacing: -.015em;
}
.h3, h3 {
  font-size: clamp(1.9rem, 4.4vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -.01em;
}
.h4, h4 {
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  line-height: 1.25;
  letter-spacing: -.005em;
}
.h5, h5 {
  font-size: .6rem;
  line-height: 1.065;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gray);
}
.big-p { font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.55; }
em { font-style: italic; }

/* -------------------------------------------------------------- impianto */
.section { position: relative; padding: var(--sec) 0; }
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.container.medium { max-width: 1400px; }
.row { display: flex; flex-wrap: wrap; gap: var(--gap); }
.col { flex: 1 1 0; min-width: 0; }
.stripe { height: 1px; width: 100%; background: var(--border); transform-origin: left center; }
/* fila di bottoni a filo: va a capo da sola quando la riga finisce */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--gap) 1.4em; padding-top: clamp(2.4em, 5vw, 4em); }
.theme-dark { background: var(--dark); color: var(--white); }
.theme-dark .stripe { background: var(--border-light); }
.theme-dark .h5, .theme-dark h5 { color: var(--gray); }
.overlay { position: absolute; inset: 0; }

/* freccia in cerchio */
.arrow { width: 14px; height: 14px; flex: 0 0 auto; transition: transform var(--esce); }
.arrow svg { width: 100%; height: 100%; }
.arrow--big { width: 20px; height: 20px; }
/* Un gesto solo per ogni collegamento: la freccia avanza di un soffio
   verso dove porta. */
html.fine a:hover .arrow, a:focus-visible .arrow, html.fine button:hover .arrow, button:focus-visible .arrow {
  transform: translate3d(.12em, -.12em, 0);
  transition: transform var(--entra);
}

/* Riempimento iridescente, gia in moto senza bisogno del puntatore.
   Un solo posto per tutte le superfici che lo portano, cosi la pelle
   resta la stessa ovunque. */
.iride,
.menu-btn__fill,
.hero__name .h1 .sep,
.hanger__ball,
.btn-round--blue {
  background-image: var(--iride);
  background-size: var(--iride-size);
  background-position: var(--iride-pos);
  background-blend-mode: var(--iride-blend);
  animation: iride 14s linear infinite;
}
.iride--testo {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Ogni strato torna al punto di partenza a fine giro, cosi non c'e
   scatto al ricomincio: ciascuno percorre un numero intero di celle o di
   periodi. Le tre luci corrono a passi diversi, ed e il loro incrociarsi
   a far cambiare il colore; l'onda fa un giro intero di palette sotto. */
@keyframes iride {
  to {
    background-position: 86px -87px, 122px -37px, 106px -62px,
      -200% 0, -378.947% 0;
  }
}

/* ------------------------------------------------------------ gli strati
   Spostare il fondo (background-position) non e un'animazione che il
   browser sappia fare da solo: a ogni fotogramma ridisegna l'elemento e
   con lui lo strato che lo contiene - per il disco del bottone la pagina
   intera, per il trattino del nome tutto il nastro. Con cinque o sei
   superfici in moto insieme, la pagina si ridisegnava sessanta volte al
   secondo anche da ferma, e tutto quello che le passava sopra - il
   sipario che si alza, la testata che entra - andava a scatti.

   Qui la pelle e la stessa - le stesse cinque immagini, le stesse fusioni,
   gli stessi passi - ma ogni immagine sta su un figlio suo, che si sposta
   con transform. Quella il compositore la muove da solo: zero ridisegni.
   I figli li aggiunge il JS; senza JS resta il fondo fermo di sopra.

   Ogni figlio e piu largo del riquadro di un giro intero e si sposta di
   un giro: a fine corsa e dove era all'inizio, e il ricomincio non si
   vede. Il mosaico e allineato all'origine del riquadro perche il passo e
   un numero intero di celle. Le due immagini in percentuale seguono la
   stessa regola: 200% di riquadro per il lustro, 480% per l'onda, che fa
   tre giri interi (14.4 larghezze) come faceva prima.

   Tre classi per vincere sulle regole di ogni singola superficie, che
   sono piu specifiche di una classe sola. */
.strati.strati.strati {
  overflow: hidden;
  isolation: isolate;
  background-image: none;
  animation: none;
}
/* Passi e celle stanno sulla radice, non sulla regola a tre classi: cosi
   una superficie con celle sue - la scheda del menu - li ridefinisce con
   una classe sola. */
:root {
  --passo-a-x: 86px; --passo-a-y: 87px; --cella-a: 43px 29px;
  --passo-b-x: 122px; --passo-b-y: 37px; --cella-b: 61px 37px;
  --passo-c-x: 106px; --passo-c-y: 62px; --cella-c: 53px 31px;
  --giro: 14s;
}
.strati > i {
  position: absolute;
  z-index: -1;
  display: block;
  pointer-events: none;
  background-repeat: repeat;
  will-change: transform;
  animation: var(--giro) linear infinite;
}
/* ferme dove non si vedono: fuori schermo, a menu o posta chiusi */
.strati.is-fuori > i,
html:not(.nav-open) .nav-full .strati > i,
html:not(.posta-open) .posta .strati > i,
html:not(.posta-open) .posta__pista,
html:not(.posta-open) .posta__pista i { animation-play-state: paused; }
.strati > .strato-a { inset: 0 0 calc(-1 * var(--passo-a-y)) calc(-1 * var(--passo-a-x)); background-image: var(--iride-luce-a); background-size: var(--cella-a); mix-blend-mode: screen; animation-name: strato-a; }
.strati > .strato-b { inset: 0 0 calc(-1 * var(--passo-b-y)) calc(-1 * var(--passo-b-x)); background-image: var(--iride-luce-b); background-size: var(--cella-b); mix-blend-mode: screen; animation-name: strato-b; }
.strati > .strato-c { inset: 0 0 calc(-1 * var(--passo-c-y)) calc(-1 * var(--passo-c-x)); background-image: var(--iride-luce-c); background-size: var(--cella-c); mix-blend-mode: screen; animation-name: strato-c; }
.strati > .strato-d { top: 0; bottom: 0; left: -200%; width: 300%; background-image: var(--iride-lustro); background-size: 66.6667% 100%; mix-blend-mode: soft-light; animation-name: strato-d; }
.strati > .strato-e { top: 0; bottom: 0; left: -1440%; width: 1540%; background-image: var(--iride-onda); background-size: 31.1688% 100%; animation-name: strato-e; }
@keyframes strato-a { to { transform: translate(var(--passo-a-x), calc(-1 * var(--passo-a-y))); } }
@keyframes strato-b { to { transform: translate(var(--passo-b-x), calc(-1 * var(--passo-b-y))); } }
@keyframes strato-c { to { transform: translate(var(--passo-c-x), calc(-1 * var(--passo-c-y))); } }
@keyframes strato-d { to { transform: translateX(66.6667%); } }
@keyframes strato-e { to { transform: translateX(93.5065%); } }
@media (prefers-reduced-motion: reduce) {
  .iride,
  .menu-btn__fill,
  .hero__name .h1 .sep,
  .hanger__ball,
  .btn-round--blue,
  .btn-round__fill,
  .cursor,
  .nav-card--news,
  .strati > i,
  html.nav-open .nav-ch > i { animation: none; }
  .nav-ch > i::after { transition: none; }
}

/* ================================================================ SIPARIO */
.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--dark-2);
  display: grid;
  place-items: center;
  pointer-events: none;
}
.loader__line {
  position: relative;
  display: grid;
  place-items: center;
  width: 94vw;
  text-align: center;
  /* il colore lo mette il sipario stesso, calcolato sul contrasto con la
     sua tinta: su una tinta chiara il bianco non si leggerebbe */
  color: inherit;
  line-height: .8;
  font-weight: 400;
  letter-spacing: -.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Il corpo lo decide il JS: ogni parola riempie la riga per conto suo.
   Nessuna dissolvenza: le lettere stanno gia fuori dalla loro finestra,
   quindi la parola e invisibile finche non sale. */
.loader__word {
  grid-area: 1 / 1;
  font-size: var(--fs, 8rem);
}

/* l'onda: ogni lettera sale dentro la sua finestra, sfalsata da --wd */
.loader__ch {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .06em;
  margin-bottom: -.06em;
}
.loader__ch > i {
  display: inline-block;
  font-style: normal;
  transform: translateY(105%);
  transition: transform 1s var(--wave);
}
.loader__word.is-on .loader__ch > i {
  transform: translateY(0);
  transition-delay: var(--wd, 0s);
}
/* La prima parola esce dall'alto. L'uscita e compatta e senza
   scaglionamento: sfalsata durava troppo e le due parole si
   intrecciavano a meta strada, illeggibili. */
.loader__word.is-gone .loader__ch > i {
  transform: translateY(-105%);
  transition: transform .5s var(--e);
  transition-delay: 0s;
}

.loader.is-out .loader__word.is-on {
  transform: translateY(-58%);
  transition: transform 1s cubic-bezier(.7, 0, .3, 1);
}
.loader.is-out .loader__word.is-on .loader__ch > i { transition-delay: 0s; }

/* ------------------------------------------------------------ il sipario
   Si alza, e non e un rettangolo che scorre via: sotto porta una falda
   curva, un'ellisse molto piu larga che alta. Cosi l'ellisse si stacca
   dai bordi solo negli ultimi centimetri di corsa e il taglio diritto
   del telo non compare mai come una riga attraverso la schermata. La
   parola parte nello stesso istante e con la stessa curva: lo accompagna
   invece di essere portata via ferma. */
.loader__curtain {
  position: absolute;
  left: 0; right: 0;
  height: 0;
  overflow: hidden;
  transition: height .45s var(--e);
}
.loader__curtain--bottom { top: 100%; }
.loader__curtain i {
  position: absolute;
  left: 50%;
  width: 300vw;
  height: 60vh;
  margin-left: -150vw;
  border-radius: 50%;
  /* stessa tinta del sipario: e il suo bordo curvo, non un altro piano */
  background: var(--tinta, var(--dark-2));
  display: block;
}
.loader__curtain--bottom i { bottom: 0; }
html.no-js .loader { display: none; }

/* velo di uscita: sale dal basso con il bordo curvo */
.veil {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: var(--dark-2);
  transform: translateY(calc(100% + 11vh));
  transition: transform .62s var(--e);
  pointer-events: none;
}
.veil i {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 170vw; height: 50vh;
  margin-left: -85vw;
  border-radius: 50%;
  background: var(--dark-2);
  transform: translateY(80%);
}
.veil.is-on { transform: translateY(0); pointer-events: auto; }

/* La pagina di passaggio prima della schermata della posta. Il velo e lo
   stesso che il sito stende fra una pagina e l'altra: qui pero non porta
   via da nessuna parte, sale, dice la parola e si ritira scoprendo la
   schermata. La parola sale lettera per lettera come quella del sipario,
   perche e la stessa meccanica - .nav-ch - e non una sua imitazione. */
.veil__parola {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 var(--pad);
  color: var(--white);
  font-size: clamp(2.6rem, 9vw, 8rem);
  line-height: 1;
  letter-spacing: -.03em;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
}
.veil.is-posta .veil__parola { opacity: 1; }
.veil.is-posta .nav-ch > i {
  transform: translateY(0);
  transition: transform .85s var(--wave);
  transition-delay: var(--wd, 0s);
}
@media (prefers-reduced-motion: reduce) {
  .veil.is-posta .nav-ch > i { transition: none; }
}

/* =============================================================== PUNTATORE */
.cursor {
  position: fixed;
  left: 0; top: 0;
  z-index: 150;
  pointer-events: none;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  /* Lo stesso riempimento che prendono le voci del menu al passaggio: il
     puntatore e un ritaglio di quella superficie, non una pastiglia blu a
     parte. Da piccolo mostra una tinta sola che cambia col tempo, da
     grande si vede la trama intera. */
  background-image: var(--iride);
  background-size: var(--iride-size);
  background-position: var(--iride-pos);
  background-blend-mode: var(--iride-blend);
  animation: iride 14s linear infinite;
  /* un piano suo: il disco si muove a ogni fotogramma e non deve
     trascinarsi dietro il resto della pagina */
  will-change: transform;
  opacity: 0;
  transition: opacity .3s, width var(--t-fast), height var(--t-fast), margin var(--t-fast);
}
html.fine .cursor.is-here { opacity: 1; }
.cursor.is-big { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
/* La croce compare solo quando il puntatore e fuori dal pannello: sopra
   le voci, l'invito o i marchi il comando e quello, non la chiusura, e un
   disco con la croce coprirebbe proprio cio che si sta per scegliere. Lo
   stato lo decide il JS guardando cosa c'e sotto il puntatore. */
html.fine .cursor.is-x { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
html.fine .cursor.is-x::before,
html.fine .cursor.is-x::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 2px;
  margin: -1px 0 0 -13px;
  border-radius: 2px;
  background: var(--white);
  box-shadow: 0 1px 5px rgba(6, 8, 12, .45);
}
html.fine .cursor.is-x::before { transform: rotate(45deg); }
html.fine .cursor.is-x::after { transform: rotate(-45deg); }
.cursor__label {
  position: fixed;
  left: 0; top: 0;
  z-index: 152;
  pointer-events: none;
  color: var(--white);
  font-size: .7rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  transform: translate(-50%, -50%) scale(.4);
  will-change: transform;
  opacity: 0;
  /* la posa la scrive il JS a ogni fotogramma: qui si interpola solo
     l'opacita, altrimenti la transizione combatterebbe con l'inseguimento */
  transition: opacity .3s var(--e);
}
.cursor__label.is-on { opacity: 1; }

/* ==================================================== BOTTONE HAMBURGER */
.menu-btn {
  position: fixed;
  top: var(--bar-top);
  right: calc(var(--rail) - var(--bar-h) / 2);
  z-index: 120;
  width: var(--bar-h);
  height: var(--bar-h);
  opacity: 0;
  transform: scale(.5);
  transition: opacity .7s var(--wave) .34s, transform .9s var(--wave) .34s;
}
html.is-open .menu-btn, html.no-js .menu-btn { opacity: 1; transform: none; }
/* Scendendo il bottone si ritira, risalendo torna. In discesa si sta
   leggendo e un disco fermo in un angolo e solo un ostacolo; in salita
   si sta cercando un'uscita, ed e allora che serve.
   Il ritardo del suo ingresso vale solo la prima volta, quando il
   sipario si alza: da li in poi va e viene senza attesa, o al ritorno
   arriverebbe un terzo di secondo dopo il gesto. */
html.mosso .menu-btn { transition: opacity .42s var(--wave), transform .55s var(--wave); }
html.scende .menu-btn { opacity: 0; transform: scale(.72); pointer-events: none; }
/* Aperto il menu, il bottone si ritira: la croce passa al puntatore, che
   e sempre dove guarda l'utente. Solo dove un puntatore vero esiste; su
   schermo tattile non c'e cursore da trasformare e il bottone resta.
   Non si nasconde alla vista della tastiera: chi arriva col tabulatore se
   lo ritrova al suo posto. */
/* Aperto il menu il bottone se ne va e non torna: niente eccezioni che
   potrebbero riaccenderlo al suo posto. La visibilita lo toglie anche dal
   giro del tabulatore; per chiudere restano il clic e il tasto Esc. */
html.nav-open .menu-btn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s var(--wave-via), visibility 0s linear .28s;
}
.menu-btn__hit {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--dark);
  overflow: hidden;
  color: var(--white);
  will-change: transform;
  box-shadow: var(--carve-deep);
  transition: box-shadow var(--t-smooth);
}
.menu-btn__hit:hover { box-shadow: var(--carve-soft); }
.menu-btn__fill {
  position: absolute;
  inset: 0;
  place-self: stretch;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: translateY(101%);
  transition: transform .52s var(--wave-via);
}
.menu-btn__hit:hover .menu-btn__fill { transform: translateY(0); transition: transform .68s var(--wave); }
/* tre righe uguali: stessa larghezza, stessa altezza, stesso passo */
.menu-btn__bars {
  position: relative;
  width: 28px;
  height: 16px;
}
.menu-btn__bars > i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .5s var(--wave-via), opacity .26s var(--e);
}
.menu-btn__bars > i:nth-child(1) { top: 0; }
.menu-btn__bars > i:nth-child(2) { top: 7px; }
.menu-btn__bars > i:nth-child(3) { top: 14px; }
html.nav-open .menu-btn__bars > i { transition: transform .68s var(--wave), opacity .26s var(--e); }
html.nav-open .menu-btn__bars > i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
html.nav-open .menu-btn__bars > i:nth-child(2) { opacity: 0; }
html.nav-open .menu-btn__bars > i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
html.nav-open .menu-btn__hit .menu-btn__bars { opacity: 1; transform: none; }
html.nav-open .menu-btn__hit .menu-btn__label { opacity: 0; transform: translateY(60%); }
html.nav-open .menu-btn__fill { transform: translateY(0); transition: transform .68s var(--wave); }
.menu-btn__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  opacity: 0;
  transform: translateY(60%);
  transition: opacity var(--t-fast), transform var(--t-smooth);
}
.menu-btn__hit:hover .menu-btn__bars { opacity: 0; transform: translateY(-60%); transition: opacity var(--t-fast), transform var(--t-smooth); }
.menu-btn__hit:hover .menu-btn__label { opacity: 1; transform: translateY(0); }

/* ================================================================= IL FILO
   Un punto solo sull'asse del bottone menu. Stato A: l'invito a scorrere,
   finche non ci si e mossi. Stato B: le tappe della pagina, finche si
   legge - ne in testata ne nel finale, ne col menu o la posta aperti.
   Solo opacity e transform. */
.filo {
  position: fixed; right: var(--rail); top: 50%; z-index: 100;
  transform: translate(50%, -50%);
  display: grid; justify-items: center;
  color: var(--su, var(--white)); pointer-events: none;
}
html.legge .filo { color: var(--dark); }
.filo__scorri, .filo__tappe { grid-area: 1 / 1; }
.filo__scorri {
  display: flex; flex-direction: column; align-items: center; gap: .9em;
  pointer-events: auto; color: inherit; text-decoration: none;
  opacity: 0;
  transition: opacity .7s var(--wave) .9s, transform .9s var(--wave) .9s, visibility 0s;
}
html.is-open .filo__scorri, html.no-js .filo__scorri { opacity: 1; }
.filo__scorri-t { writing-mode: vertical-rl; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; }
.filo__scorri-l { position: relative; width: 1px; height: 3.2em; overflow: hidden; }
.filo__scorri-l::before { content: ''; position: absolute; inset: 0; background: currentColor; opacity: .22; }
/* la goccia: scende lungo il filo e ricomincia */
.filo__scorri-l b { position: absolute; inset: 0; background: currentColor; transform: translateY(-100%); animation: filo-goccia 2.2s var(--wave) infinite; }
@keyframes filo-goccia { 0% { transform: translateY(-100%) } 55% { transform: translateY(0) } 100% { transform: translateY(100%) } }
html.mosso .filo__scorri {
  opacity: 0; transform: translateY(.6em); visibility: hidden; pointer-events: none;
  transition: opacity .42s var(--wave-via), transform .42s var(--wave-via), visibility 0s linear .42s;
}
html.mosso .filo__scorri-l b { animation-play-state: paused; }
.filo__tappe {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: clamp(.5em, 1.2vh, .95em);
  opacity: 0; transform: translate3d(.6em, 0, 0); visibility: hidden;
  transition: opacity .42s var(--wave-via), transform .42s var(--wave-via), visibility 0s linear .42s;
}
html.legge:not(.nav-open):not(.posta-open) .filo__tappe {
  opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  transition: opacity .7s var(--wave), transform .9s var(--wave), visibility 0s;
}
.filo__tappa { position: relative; display: grid; place-items: center; width: 1.5em; height: 1.5em; color: inherit; }
.filo__tappa i { width: .42em; height: .42em; border-radius: 50%; background: currentColor; opacity: .34; transition: opacity var(--t-fast), transform var(--esce); }
.filo__tappa[aria-current="true"] i { opacity: 1; transform: scale(1.7); background: var(--tinta); transition: opacity var(--t-fast), transform var(--entra); }
.filo__et {
  position: absolute; right: calc(100% + .55em); top: 50%; white-space: nowrap;
  font-size: .6rem; letter-spacing: .05em; text-transform: uppercase;
  opacity: 0; transform: translate3d(.4em, -50%, 0);
  transition: opacity .3s var(--wave-via), transform var(--esce);
}
html.fine .filo__tappa:hover .filo__et, .filo__tappa:focus-visible .filo__et { opacity: 1; transform: translate3d(0, -50%, 0); transition: opacity .3s, transform var(--entra); }
/* riga di avanzamento: al posto delle tappe sotto 860px. Scura, perche
   su tinte chiare sarebbe illeggibile sul bianco dei capitoli. */
.filo__riga {
  display: none; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100;
  background: var(--dark-2); transform-origin: left; transform: scaleX(0);
  opacity: 0; transition: opacity .5s var(--wave);
}
html.legge .filo__riga { opacity: 1; }
@supports (animation-timeline: scroll()) {
  .filo__riga { animation: filo-riga linear both; animation-timeline: scroll(root block); animation-duration: 1ms; }
}
@keyframes filo-riga { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@media (max-width: 860px) { .filo__tappe { display: none; } .filo__riga { display: block; } }
@media (prefers-reduced-motion: reduce) {
  .filo__scorri-l b { animation: none; transform: translateY(-50%); }
  .filo__riga { animation: none; opacity: 0 !important; }
}

/* Il seguito: sotto il rullo, la pagina successiva col suo pallino. */
.commiato__poi { display: flex; align-items: center; justify-content: center; gap: 1.2em; padding-top: clamp(1.6em, 3vh, 2.6em); }
.seguito { display: inline-flex; align-items: center; gap: .6em; color: var(--white); text-decoration: none; font-size: clamp(1rem, 1.3vw, 1.2rem); }
.seguito__pt { width: .55em; height: .55em; border-radius: 50%; background: var(--pt); transform: scale(.8); transition: transform var(--esce); }
html.fine .seguito:hover .seguito__pt, .seguito:focus-visible .seguito__pt { transform: scale(1.15); transition: transform var(--entra); }

/* ================================================================= MENU */
/* Il velo e pieno, e uguale su ogni pagina e a ogni misura: trasparente
   lasciava passare la tinta e i titoli della pagina sotto, e il menu
   sembrava un altro su ognuna. Il nero e un filo piu scuro delle schede,
   che cosi restano appoggiate e non ci si sciolgono dentro. */
.nav-back {
  position: fixed;
  inset: 0;
  z-index: 108;
  background: #0A0B0D;
  opacity: 0;
  visibility: hidden;
  /* la visibilita non si interpola: la si sposta in fondo con un ritardo,
     cosi il velo resta cliccabile per tutta la dissolvenza e sparisce
     solo quando e gia trasparente */
  transition: opacity .74s var(--wave-via), visibility 0s linear .74s;
}
html.nav-open .nav-back {
  opacity: 1;
  visibility: visible;
  transition: opacity .9s var(--wave), visibility 0s;
}
/* Non piu una lastra nera piena: tre riquadri appoggiati uno sull'altro,
   ognuno con la sua superficie. Il pannello resta il contenitore che
   entra da destra, ma non ha piu un fondo suo: sotto passa il velo. */
.nav-full {
  position: fixed;
  top: 0; right: 0;
  z-index: 110;
  width: min(41rem, 100vw);
  height: 100%;
  color: var(--white);
  /* Il pannello non scivola come un blocco: era la sua corsa a coprire lo
     scaglionamento delle schede. Resta fermo e tutto il movimento lo fanno
     le tre schede una dopo l'altra.
     Niente visibility: hidden. Con quella, alla prima apertura il
     sottoalbero non era mai stato reso e il browser non aveva uno stato di
     partenza da cui transire: le schede comparivano di scatto, e solo
     dalla seconda volta in poi si scaglionavano. Fuori dal giro del
     tabulatore ci va con inert, che non tocca la resa. */
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  /* Sopra e sotto lo stesso margine, preso dal bordo alto del cerchio: la
     prima scheda comincia dove comincia lui, l'ultima finisce alla stessa
     distanza dal fondo. */
  padding: var(--bar-top) var(--corsia) var(--bar-top) clamp(1.5rem, 3vw, 2.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Ogni scheda arriva da fuori a destra e un filo dal basso, e se ne
   torna di la. Lo scarto fra una e l'altra e quasi la meta della corsa:
   sotto quella soglia le tre si sovrappongono e leggono come una. */
.nav-card {
  border-radius: 1.7rem;
  padding: 1.7rem 1.9rem;
  box-shadow: var(--relief);
  opacity: 0;
  transform: translate(2.2em, .8em);
  transition: opacity .38s var(--wave-via), transform .38s var(--wave-via);
}
html.nav-open .nav-card {
  opacity: 1;
  transform: none;
  transition: opacity .62s var(--wave), transform .68s var(--wave);
}
/* Aprendo entrano dall'alto in basso, chiudendo escono dal basso in alto:
   lo scarto sta anche sullo stato a riposo, altrimenti alla chiusura il
   ritardo tornerebbe a zero e le tre partirebbero insieme. */
.nav-card--voci { transition-delay: .26s; }
.nav-card--news { transition-delay: .13s; }
.nav-card--soc { transition-delay: 0s; }
html.nav-open .nav-card--voci { transition-delay: 0s; }
html.nav-open .nav-card--news { transition-delay: .13s; }
html.nav-open .nav-card--soc { transition-delay: .26s; }
/* la scheda delle voci si allunga fino a riempire la colonna */
.nav-card--voci {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  background: #101114;
}
/* Il blocco dei social e diviso in quattro parti uguali, una per marchio:
   niente titolo sopra, i segni bastano. I quarti sono zone dello stesso
   blocco, separati da un filo e non da uno spazio, cosi il rilievo resta
   di un pezzo solo. */
.nav-card--soc { background: #101114; padding: 0; overflow: hidden; }
.nav-foot { display: grid; grid-template-columns: repeat(4, 1fr); }
.marchio {
  display: grid;
  place-items: center;
  height: 4.7rem;
  color: rgba(255, 255, 255, .74);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .07);
  transition: background .4s var(--wave), color .4s var(--wave);
}
.marchio:first-child { box-shadow: none; }
.marchio svg { width: 1.45rem; height: 1.45rem; display: block; }
.marchio:hover, .marchio:focus-visible { background: var(--marca, #FFFFFF); color: #0B0C0E; }
html.nav-open .nav-full { pointer-events: auto; }
.nav-full__curve {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 0;
  overflow: hidden;
  pointer-events: none;
}
.nav-full__curve i {
  position: absolute;
  right: 0;
  top: 50%;
  width: 100vw;
  height: 150vh;
  margin-top: -75vh;
  border-radius: 50%;
  background: var(--dark);
}
/* un solo incavo intorno all'elenco: le voci ci stanno dentro, nude */
.nav-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: .1em;
}
.nav-links li { display: block; width: 100%; }
/* La voce prende tutta la riga e il pallino le sta all'altro capo: dentro
   un riquadro un pallino appeso a sinistra finirebbe fuori dal bordo. */
.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6em;
  width: 100%;
  /* Il corpo segue l'altezza della schermata, non solo la larghezza: sei
     voci dentro una scheda che arriva al fondo, il vincolo e verticale.
     Legata alla sola larghezza, su schermi bassi la colonna sfondava. */
  font-size: clamp(2.1rem, min(5.6vw, 6.4vh), 4.6rem);
  line-height: 1.2;
  letter-spacing: -.026em;
}

/* stessa meccanica dell'apertura: ogni lettera sale dalla sua finestra */
.nav-ch {
  display: inline-block;
  overflow: hidden;
  overflow-clip-margin: 0;
  vertical-align: bottom;
  line-height: 1.2;
}

/* Ogni lettera e ritagliata sul riempimento iridescente, lo stesso che
   portano il segnaposto e i bottoni tondi: una superficie sola per tutto
   il sito invece di uno shader a parte solo per il menu. */
.nav-ch > i {
  position: relative;
  display: inline-block;
  font-style: normal;
  transform: translateY(105%);
  /* Stato a riposo, cioe anche la chiusura. Lo scarto fra una lettera e
     l'altra e lo stesso dell'apertura ma compresso: senza, alla chiusura
     il ritardo tornerebbe a zero e tutte le lettere cadrebbero insieme. */
  transition: transform .58s var(--wave-via);
  transition-delay: calc(var(--wd, 0s) * .3);
  background-image: var(--iride);
  background-size: var(--iride-size);
  background-position: var(--iride-pos);
  background-blend-mode: var(--iride-blend);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Il riempimento si muove solo a menu aperto, e solo dopo che le lettere
   sono arrivate. Fermo, ogni lettera e una stampa sola che il compositore
   trasla senza ridipingere; in moto, ognuna rifa cinque strati di
   gradiente ritagliati sulla forma del carattere a ogni fotogramma. Con
   trentotto lettere qui e trentatre nei social erano trecentocinquanta
   strati per fotogramma, in corsa anche a menu chiuso: e da li che veniva
   lo scatto in apertura e in chiusura. */
html.nav-open .nav-ch > i {
  animation: iride 14s linear infinite;
  animation-delay: 1.5s;
}

/* Il bianco a riposo e una copia della lettera stesa sopra il colore.
   Serve separata perche il riempimento e gia impegnato dall'animazione
   dell'onda: una seconda animazione sullo stesso background-position
   avrebbe vinto sulla transizione dell'hover. Al passaggio del puntatore
   questa copia viene mangiata dal basso e sotto resta il colore. */
.nav-ch > i::after {
  content: attr(data-c);
  position: absolute;
  left: 0;
  top: 0;
  white-space: pre;
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
  clip-path: inset(0 0 0 0);
  transition: clip-path .55s var(--e);
}
.nav-link:hover .nav-ch > i::after,
.nav-link:focus-visible .nav-ch > i::after {
  clip-path: inset(0 0 100% 0);
  transition-delay: var(--hd, 0s);
}

html.nav-open .nav-ch > i {
  transform: translateY(0);
  transition: transform 1.1s var(--wave);
  transition-delay: var(--wd, 0s);
}

/* il pallino a lato della voce */
/* Misura in pixel interi e non in em: a corpo variabile il tondo cadeva
   su frazioni di pixel e si leggeva schiacciato. aspect-ratio lo tiene
   quadro anche se il flex prova a comprimerlo. */
.nav-link::before {
  content: '';
  order: 2;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pt, #2EE6C5);
  transform: scale(0);
  transition: transform .4s var(--wave);
}
.nav-link:hover::before,
.nav-link:focus-visible::before,
.nav-link[aria-current="page"]::before { transform: scale(1); }

/* ---------------------------------------------------- anteprima del menu
   Lo spazio a sinistra del pannello non resta un velo vuoto: ci si apre la
   pagina della voce indicata. Per il DOM sta nel pannello (inert, giro del
   tabulatore, chiusura al clic), per la resa e fissa sulla schermata. Non
   prende il puntatore, tranne i capitoli: il vuoto intorno resta velo, e
   un clic li richiude il menu come altrove. Le righe del titolo salgono
   dalla loro finestra come le lettere delle voci; il resto entra dopo.
   Solo transform e opacity. Sotto i 1100px lo spazio non c'e. */
.nav-anteprima { display: none; }
@media (min-width: 1100px) and (min-height: 560px) {
  .nav-anteprima {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    right: min(41rem, 100vw);
    display: grid;
    align-items: center;
    padding: var(--bar-top) clamp(2.5rem, 5vw, 6rem);
    container-type: inline-size;
    pointer-events: none;
  }
}
.nav-ant {
  grid-area: 1 / 1;
  max-width: 46rem;
  visibility: hidden;
  transition: visibility 0s linear .52s;
}
.nav-ant.is-on { visibility: visible; transition: visibility 0s; }
.nav-ant__k {
  display: flex; align-items: center; gap: .7em;
  margin: 0 0 1.4rem;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.nav-ant__k i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--pt); }
.nav-ant__h {
  margin: 0;
  font-size: clamp(2.4rem, 13cqi, 6.4rem);
  line-height: .92;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.nav-ant__r { display: block; overflow: hidden; padding-bottom: .04em; }
.nav-ant__r > span { display: block; transform: translateY(105%); transition: transform .52s var(--wave-via); }
.nav-ant__r:nth-child(2) > span { --i: 1; }
.nav-ant__r:nth-child(3) > span { --i: 2; }
.nav-ant__s {
  margin: 1.4rem 0 0;
  max-width: 38ch;
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, .66);
  text-wrap: pretty;
}
.nav-ant__d { margin-top: 2rem; display: grid; gap: .75rem; }
.nav-ant__et { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .4); }
.nav-ant__d ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.nav-ant__d a {
  pointer-events: auto;
  display: inline-flex;
  padding: .5em 1em;
  border-radius: 999px;
  font-size: .88rem;
  color: rgba(255, 255, 255, .72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  transition: color .3s var(--wave), background-color .3s var(--wave), box-shadow .3s var(--wave);
}
.nav-ant__d a:hover,
.nav-ant__d a:focus-visible { color: #0B0C0E; background-color: #FFFFFF; box-shadow: inset 0 0 0 1px #FFFFFF; }
.nav-ant__k, .nav-ant__s, .nav-ant__d {
  opacity: 0;
  transform: translateY(.6rem);
  transition: opacity .32s var(--wave-via), transform .52s var(--wave-via);
}
/* All'apertura aspetta le schede; da aperto, passando da una voce
   all'altra, risponde subito. */
html.nav-open .nav-ant.is-on .nav-ant__r > span {
  transform: none;
  transition: transform 1.1s var(--wave) calc(var(--parte, .32s) + var(--i, 0) * .06s);
}
html.nav-open .nav-ant.is-on :is(.nav-ant__k, .nav-ant__s, .nav-ant__d) {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--wave) calc(var(--parte, .32s) + var(--dopo)), transform .9s var(--wave) calc(var(--parte, .32s) + var(--dopo));
}
.nav-ant__k { --dopo: .1s; }
.nav-ant__s { --dopo: .2s; }
.nav-ant__d { --dopo: .28s; }
.nav-anteprima.is-viva { --parte: 0s; }

/* ================================================== RILIEVO MAGNETICO
   Solo sui social. La lastra si inclina verso il puntatore ma la luce
   resta ferma: e l'ombra dentro l'incavo a spostarsi, quindi la pillola
   si comporta come un oggetto vero. L'etichetta galleggia sopra il fondo. */
/* Un incavo solo per tutti i social. Il rilievo magnetico passa dalla
   singola pillola al blocco intero: si inclina la lastra, non i pezzi. */
/* Riga dei social: nessun incavo e nessuna inclinazione, solo i nomi.
   Il colore lo mette l'hover, uguale a quello delle voci del menu. */

/* ------------------------------------------------------ riquadro invito
   L'unica superficie accesa della pila: l'onda iridescente degli hover
   portata a fondo, con le celle raddoppiate perche a questa misura quelle
   piccole si impastano e leggono come rumore invece che come squame. */
.nav-card--news {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background-image: var(--iride);
  background-size: 86px 58px, 122px 74px, 106px 62px, 200% 100%, 480% 100%;
  background-position: var(--iride-pos);
  background-blend-mode: var(--iride-blend);
  animation: iride-grande 18s linear infinite;
  --passo-a-x: 172px; --passo-a-y: 174px; --cella-a: 86px 58px;
  --passo-b-x: 244px; --passo-b-y: 74px; --cella-b: 122px 74px;
  --passo-c-x: 212px; --passo-c-y: 124px; --cella-c: 106px 62px;
  --giro: 18s;
}
/* A menu chiuso la scheda e a opacita zero, non nascosta: si muoveva
   comunque, per nessuno. Ferma finche non si apre. */
html:not(.nav-open) .nav-card--news,
html:not(.nav-open) .nav-card--news > i { animation-play-state: paused; }
/* ogni strato percorre un numero intero di celle: il giro si richiude
   senza scatto al ricomincio */
@keyframes iride-grande {
  to { background-position: 172px -174px, 244px -74px, 212px -124px, -200% 0, -378.947% 0; }
}
/* Un velo sopra le scaglie: l'onda passa dal petrolio all'oro e ne' il
   bianco ne' lo scuro reggerebbero su tutte e due. Il velo abbassa tutta
   la scala quanto basta perche il bianco tenga ovunque.
   Alleggerito: era .40 in cima e .13 in fondo, e la scheda leggeva
   spenta. Ora si spegne del tutto in basso ma resta carico nella fascia
   alta, dove sta il titolo: li il fondo misurato sta gia sotto il 3:1
   che il testo grande vorrebbe, e schiarirlo uniformemente avrebbe
   peggiorato. Il resto lo tiene l'ombra del titolo, rinforzata sotto.
   Misurata sulla pagina resa: la scheda legge il 34% piu accesa. */
.nav-card--news::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg,
    rgba(6, 8, 12, .34) 0%, rgba(6, 8, 12, .18) 30%, rgba(6, 8, 12, 0) 100%);
  pointer-events: none;
}
.nav-news__in { position: relative; }
.nav-news__t {
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  line-height: 1.14;
  letter-spacing: -.02em;
  text-wrap: balance;
  padding-bottom: .8em;
  /* Due aloni invece di uno: quello stretto stacca le lettere dalle
     scaglie chiare, quello largo abbassa il fondo attorno. Serve perche
     il velo sopra e stato alleggerito. */
  text-shadow: 0 1px 3px rgba(4, 6, 10, .62), 0 2px 18px rgba(4, 6, 10, .58);
}
/* La pastiglia e un solco scavato nelle scaglie: grigia, con l'ombra
   dentro sul lato illuminato. Il disco invece sporge, ed e l'unico
   rilievo dentro una scheda. */
.nav-news {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: .45em .45em .45em 1.3em;
  border-radius: 100px;
  background: #DEDDDA;
  color: var(--dark-2);
  font-size: 1.05rem;
  font-weight: 500;
  box-shadow: inset 3px 3px 7px rgba(96, 94, 90, .85), inset -2px -2px 6px rgba(255, 255, 255, .9);
  transition: background .45s var(--wave), box-shadow .45s var(--wave);
}
.nav-news:hover, .nav-news:focus-visible {
  background: #E7E6E3;
  box-shadow: inset 2px 2px 5px rgba(96, 94, 90, .7), inset -1px -1px 4px rgba(255, 255, 255, .9);
}
.nav-news i {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  background: var(--dark-2);
  color: var(--white);
  box-shadow: -2px -2px 6px rgba(255, 255, 255, .55), 4px 5px 12px rgba(84, 82, 78, .8);
  transition: transform .45s var(--wave);
}
.nav-news i svg { width: 40%; height: 40%; }
.nav-news:hover i, .nav-news:focus-visible i { transform: rotate(45deg); }
/* Lo stesso riempimento delle voci del menu: la lettera e ritagliata sul
   colore iridescente e sopra le sta una copia bianca, che al passaggio del
   puntatore viene mangiata dal basso una lettera alla volta. Il bianco
   deve stare in una copia a parte perche il riempimento sotto e gia
   mosso dall'animazione dell'onda. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* Le voci del lavoro tengono il riempimento di prima: stanno su fondo
     chiaro, dove una copia bianca a riposo sarebbe invisibile. */
  .slat .soc-ch {
    display: inline-block;
    background-image: linear-gradient(to top, var(--blue) 50%, currentColor 50%);
    background-size: 100% 202%;
    background-position: 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position .5s var(--e);
  }
  .slat:hover .soc-ch,
  .slat:focus-visible .soc-ch {
    background-position: 0 100%;
    transition-delay: var(--hd, 0s);
  }
}


/* ================================================================= TESTA */
/* Il fondo lo mette la tinta della voce: la figura e ritagliata e non
   porta piu con se il proprio sfondo. */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 40em;
  overflow: hidden;
  background: var(--grigio);
  color: var(--white);
  isolation: isolate;
}
/* La foto sta tutta dentro l'altezza, al centro; i vuoti ai lati li
   riempiono due copie della stessa immagine stirate all'inverosimile e
   ancorate ai bordi, che mostrano quindi solo la loro colonna di bordo.
   La scena continua fino ai margini senza stacchi e senza dover tenere
   in giro una seconda immagine allargata. */
/* Sporge solo in alto: la figura e ritagliata e poggia sul bordo basso
   della schermata, quindi sotto non serve margine. */
.hero__back {
  position: absolute;
  inset: -6% 0 0;
  height: 106%;
  z-index: 0;
  overflow: hidden;
  will-change: opacity;
  opacity: 0;
  /* La dissolvenza lunga serviva ad accompagnare il sipario che si alzava.
     Ora la rivelazione la fa la finestra, e la fotografia deve essere gia
     tutta li quando quella si apre sugli occhi. */
  transition: opacity .32s var(--wave);
}
html.is-open .hero__back, html.no-js .hero__back { opacity: 1; }
.hero__back > i {
  position: absolute;
  inset: 0;
  background-image: var(--scena);
  background-size: var(--scena-size);
  background-position: var(--scena-pos);
  background-repeat: no-repeat;
  -webkit-mask-image: url('../img/hero-mask.svg');
  mask-image: url('../img/hero-mask.svg');
  -webkit-mask-size: auto var(--foto-h);
  mask-size: auto var(--foto-h);
  -webkit-mask-position: var(--scena-pos);
  mask-position: var(--scena-pos);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* il puntatore muove la scena di poco */
  transform: scale(1.04) translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -10px), 0);
  will-change: transform;
  backface-visibility: hidden;
}

/* La stessa foto una seconda volta, ritagliata sulla sagoma di Camilla e
   stesa sopra il nome che scorre: il nastro le passa dietro e riappare
   dall'altra spalla. Sopra e sotto il ritaglio l'immagine e la stessa,
   allineata allo stesso modo, quindi il bordo della sagoma non si vede
/* Su finestre alte e strette la foto viene ingrandita da cover finche la
   figura non tocca i due bordi: il nastro le finirebbe dietro per intero
   e il nome sparirebbe. Sotto questo rapporto il ritaglio si spegne e il
/* La stessa velatura che copre la hero, ripetuta dentro il ritaglio: il
   ritaglio sta sopra di essa e senza questa la figura resterebbe piu
   chiara del resto della scena, con lo stacco lungo tutta la sagoma.
   Il layer e alto il 112% della hero e sporge del 6% sopra, quindi la
   velatura parte dal 5.357% e ne copre l'89.286%: cosi ricade

/* alone che segue il puntatore */
.hero__spot {
  position: absolute;
  left: 0; top: 0;
  width: 68vw; height: 68vw;
  margin: -34vw 0 0 -34vw;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  transition: opacity .6s var(--e);
  background: radial-gradient(circle closest-side,
    rgba(255, 255, 255, .12) 0%, rgba(69, 92, 233, .07) 38%, rgba(255, 255, 255, 0) 70%);
  will-change: transform, opacity;
}
html.fine .hero.is-live .hero__spot { opacity: 1; }

/* velatura sopra i due strati, per far leggere il testo */
/* La velatura laterale sta sotto il nastro del nome: sopra, lo
   spegneva a un contrasto da non leggersi. Quella verticale resta sopra
   tutto, che serve al ruolo e alla barra. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(20, 21, 23, .84) 0%, rgba(20, 21, 23, .52) 22%, rgba(20, 21, 23, .18) 38%, rgba(20, 21, 23, 0) 56%, rgba(20, 21, 23, .3) 100%);
}
.hero__wash {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 21, 23, .66) 0%, rgba(20, 21, 23, .18) 15%, rgba(20, 21, 23, 0) 38%, rgba(20, 21, 23, .2) 72%, rgba(20, 21, 23, .88) 100%);
}
.hero__bar {
  position: absolute;
  top: var(--bar-top); left: 0; right: 0;
  z-index: 6;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 0 calc(var(--pad) + var(--bar-h) + clamp(1.2em, 2.6vw, 2.6em)) 0 var(--pad);
}

.hero__links { display: flex; align-items: center; gap: clamp(1.1em, 2.2vw, 2.2em); font-size: 1.9rem; line-height: 1; }
.hero__links a { position: relative; }
.hero__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--t-fast);
}
.hero__links a:hover::after, .hero__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }
.hero__links .is-menu { display: none; }

.hero__mid {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 0; right: 0;
  transform: translateY(-56%);
  padding: 0 var(--pad);
}
.hero__kicker { display: inline-flex; align-items: center; gap: .9em; margin-bottom: .7em; color: var(--white); }
/* il ruolo resta a sinistra del pannello nitido, non ci finisce sopra */
.hero__role { max-width: 13ch; font-size: clamp(1.6rem, 3.05vw, 2.6rem); }
.hero__role .thin { color: var(--gray); }

/* Il nastro del nome passa davanti alla figura e sopra la velatura del
   fondo, che sotto le lettere scurisce il grigio e le tiene leggibili. */
.hero__name {
  position: absolute;
  z-index: 4;
  left: 0; right: 0;
  bottom: clamp(1.4em, 3.4vh, 2.6em);
  overflow: hidden;
  white-space: nowrap;
}
.hero__name-track { display: flex; width: max-content; will-change: transform; }
.hero__name .h1 { display: inline-flex; align-items: center; padding-right: 0; }
.hero__name .h1 .sep {
  display: inline-block;
  padding: 0 .28em;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Con gli strati il segno resta nel testo - tiene il posto e la misura -
   ma il colore lo danno i figli, ritagliati alla barra del trattino.
   Misure dell'inchiostro del trattino di Switzer a corpo 400 dentro la
   riga a .95: barra da .342em a .422em dal fondo del riquadro, da .06em a
   .94em dell'avanzamento di 1em, piu il rientro di .28em per lato. Se
   cambiano carattere o interlinea del titolo, cambiano anche queste. */
.hero__name .h1 .sep.strati {
  position: relative;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  clip-path: inset(.528em .34em .342em .34em);
}

/* etichetta a gancio */
/* alta quanto il bottone del menu, cosi la barra ha due estremi pari */
/* Linguetta agganciata al bordo dello schermo: il margine negativo
   annulla il rientro della barra, cosi il lato piatto tocca il bordo. */
.hanger {
  display: inline-flex;
  align-items: center;
  gap: 1em;
  min-height: var(--bar-h);
  margin-left: calc(-1 * var(--pad));
  padding: .55rem 3.2rem .55rem 1.15rem;
  background: var(--dark);
  border-radius: 0 var(--bar-h) var(--bar-h) 0;
  color: var(--white);
  font-size: clamp(1.6rem, 3.05vw, 2.6rem);
  line-height: 1.2;
  box-shadow: var(--carve);
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
}
/* Si srotola in due tempi: entra il solo segnaposto, poi la pillola si
   allunga e scopre il nome. Parte una volta sola, quando il sipario si
   alza, e "both" ne trattiene l'ultimo fotogramma. */
html.is-open .hanger { animation: tagRoll 1.45s var(--e) .3s both; }
html.is-open .hanger__txt { animation: tagName .5s var(--e) 1.05s both; }
html.no-js .hanger { opacity: 1; }
html.no-js .hanger__txt { opacity: 1; }
@keyframes tagRoll {
  0%   { opacity: 1; transform: translateX(-100%); max-width: 5.6rem; }
  38%  { opacity: 1; transform: translateX(0); max-width: 5.6rem; }
  100% { opacity: 1; transform: translateX(0); max-width: 22rem; }
}
@keyframes tagName {
  from { opacity: 0; transform: translateX(-.7em); }
  to   { opacity: 1; transform: translateX(0); }
}
.hanger__txt { opacity: 0; }
.hanger__txt { display: flex; flex-direction: column; }
.hanger__txt span:last-child { color: inherit; }
.hanger__ball {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.2rem; height: 4.2rem;
  border-radius: 50%;
  color: #0B2F33;
  flex: 0 0 auto;
}
.hanger__ball svg { width: 58%; height: 58%; }

/* ============================================================== DICHIARO */
.intro { background: var(--white); }

/* ------------------------------------------------ presentazione in casa
   Dentro il mazzo il pannello e alto quanto la finestra, ma la sezione
   dentro no: finiva prima e sotto restava una fascia scura, che era il
   fondo della pagina a vedersi. Qui la sezione riempie il pannello e il
   contenuto ci sta in mezzo. */
/* ------------------------------------------------------- la serranda
   La testata si richiude verso il centro e scopre Chi sono, che sotto
   c'era gia. Il contenuto della testata non si rimpicciolisce: resta
   alla sua misura e a stringersi e solo la finestra, per questo a meta
   corsa il ruolo si legge tagliato e non ridotto.

   Lo stato di riposo e quello senza serranda: le due sezioni in fila,
   una schermata ciascuna. La serranda si aggiunge dove si puo fare -
   dove il browser lega le animazioni allo scorrimento, dove non si
   chiede meno moto, e dove lo schermo e largo abbastanza perche i
   margini scoperti tengano del testo leggibile. Cosi il ripiego non e
   una cosa da ricordarsi: e il punto di partenza. */
.scena { position: relative; }
/* Dove la serranda non gira - telefoni, tavolette, meno moto, browser
   senza orologio dello scorrimento - il perno e un contenitore in flusso:
   alto una finestra e ritagliato teneva la testata fuori dal riquadro, e
   la casa cominciava dalle lame senza fotografia ne nome. */
.scena > .perno { position: static; height: auto; overflow: visible; }
.scena .hero { position: relative; }
.scena .presenta { position: relative; }
/* Dentro la scena l'opacita la governa la serranda, non il sistema di
   rivelazione allo scorrimento: i due si contendevano gli stessi
   elementi e dopo un ricaricamento l'occhiello restava spento perche
   l'osservatore non era mai scattato su di lui. Qui si nasce visibili. */
.scena .fade,
.scena .rise,
.scena .lift > *,
.scena .words .word > span { opacity: 1; transform: none; }

/* Il punto d'arrivo e misurato sulla sagoma, non scelto a occhio: le
   spalle sono larghe il 92,5% della fotografia, che alla scala in cui
   sta qui vale il 54% della finestra - da cui il 23% di ritaglio per
   lato. In alto la corona sta all'11,4% della fotografia, cioe al 9,9%
   della schermata: il ritaglio si ferma al 6% e sopra i capelli resta
   aria. Sotto lo stesso 6%, cosi il bianco e uguale sopra e sotto - le
   spalle ci rimettono una fetta, ma una cornice pari si legge come una
   cornice e non come un taglio.

   Si chiude entro il 62% della corsa e poi tiene: il resto serve a
   leggere quello che compare, senza che la sezione dopo arrivi addosso. */
@keyframes serranda {
  0% { clip-path: inset(0% 0% 0% 0% round 0px) }
  62%, 100% { clip-path: inset(6% 23% 6% 23% round 14px) }
}
/* Dentro la scheda il contenuto della testata si spegne: alla fine resta
   il ritratto, che e quello che la scheda deve mostrare. */
@keyframes serranda-spegni {
  0%, 22% { opacity: 1 }
  50%, 100% { opacity: 0 }
}
/* Chi sono si scopre in ritardo sulla chiusura: comparire insieme
   sarebbe una cosa sola invece di due che si danno il cambio.

   Il testo si limita ad accendersi. Il bottone no: sale da sotto il
   margine, per mezza altezza sua, e si ferma al centro della colonna
   che la serranda ha lasciato scoperta. Parte anche un po' piu
   piccolo, cosi l'arrivo si legge come un avvicinarsi e non come uno
   scivolare. La corsa e su una curva, non lineare come il resto: e un
   oggetto che arriva e si posa. */
@keyframes serranda-scopri {
  0%, 50% { opacity: 0; transform: translateY(52%) scale(.93) }
  78%, 100% { opacity: 1; transform: none }
}
/* La battitura ha un tempo suo - sedici millesimi per lettera, che a
   centoquarantasei fanno poco piu di due secondi: il passo di chi
   scrive, non di chi scorre. La fa lo script scrivendo nel nodo di
   testo, non il foglio di stile: qui non c'e niente da animare perche
   non ci sono elementi per lettera, e non ce ne sono perche la
   sillabazione non lavora attraverso i confini di un elemento. Senza
   script, o con meno moto chiesto, la frase e gia li per intero. */

/* Fascia senza ingombro: dice dove comincia la battitura. Larga un
   pixel ma alta da li al fondo della scena - alta uno, un salto secco
   (fine pagina, un'ancora, il ripristino del browser) la scavalcherebbe
   senza mai attraversarla e la frase resterebbe spenta.

   Stava al 62%, che e dove la serranda finisce di chiudersi nella sua
   corsa - ma la corsa non e la scena. La scena e alta quattro schermate
   e la corsa e quello che resta tolta la finestra, tre: il 62% della
   corsa cade al 71,5% della scena. Al 62% della scena la fascia entrava
   in schermo mentre la fotografia si stava ancora stringendo, e la
   frase partiva sotto una scheda in movimento. */
.scena__via {
  position: absolute;
  left: 0;
  top: 72%;
  bottom: 0;
  width: 1px;
  pointer-events: none;
}

@supports (animation-timeline: view()) {
  @media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
    /* La corsa e lunga due schermate e mezzo perche il gesto si legga.
       Il perno sta fermo e dentro cambia una proprieta sola, il
       ritaglio, che il compositore sa muovere senza toccare il layout. */
    .scena {
      height: 400vh;
      height: 400svh;
      view-timeline-name: --serranda;
      view-timeline-axis: block;
    }
    .scena > .perno { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; z-index: 0; }
    .scena .hero {
      position: absolute;
      inset: 0;
      z-index: 2;
      height: 100%;
      min-height: 0;
      clip-path: inset(0 0 0 0 round 0px);
      will-change: clip-path;
    }
    .scena .presenta { position: absolute; inset: 0; }

    .scena .hero,
    .scena .hero__mid,
    .scena .hero__name,
    .scena .hero__bar,
    .scena .presenta__testo,
    .scena .presenta__lato {
      animation-timeline: --serranda;
      animation-range: contain;
      animation-fill-mode: both;
      animation-timing-function: linear;
      animation-duration: 1ms;
    }
    .scena .hero { animation-name: serranda }
    .scena .hero__mid, .scena .hero__name, .scena .hero__bar { animation-name: serranda-spegni }
    .scena .presenta__lato { animation-name: serranda-scopri }
    /* Il gruppo va lineare perche il ritaglio deve seguire il dito. Il
       bottone e l'unico che arriva: a lui la curva, che vale piu della
       fedelta al gesto. */
    .scena .presenta__lato { animation-timing-function: var(--wave); }
    /* Il blocco del testo compare tutto insieme; sono le lettere dentro
       ad avere ciascuna il proprio tratto. */
    .scena .presenta__testo { animation: none; opacity: 1; transform: none }

  }
}
@supports (animation-timeline: view()) {
  @media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {

    /* Tre colonne: il testo nel margine sinistro, il varco centrale dove
       arriva la scheda, il bottone nel margine destro. Le due di lato
       sono esattamente il 29% che la serranda lascia scoperto, cosi
       niente finisce sotto di lei. */
    /* Le colonne devono misurarsi sulla stessa cosa su cui si misura il
       ritaglio: la finestra. Il contenitore ha un tetto di larghezza, e
       oltre quel tetto le due misure divergevano - a 1855 il testo
       finiva 78 pixel sotto la scheda. Qui il tetto si toglie. */
    /* Le colonne di lato sono esattamente il ritaglio che la serranda
       lascia scoperto - 23% per parte, come nei fotogrammi chiave. Se le
       due misure divergono il testo finisce sotto la scheda. */
    .scena .presenta__in {
      grid-template-columns: 23% 54% 23%;
      gap: 0;
      max-width: none;
      width: 100%;
      padding: 0;
    }
    /* Testo e bottone stanno al centro del margine che la serranda
       lascia scoperto: rientro uguale sui due lati e blocco centrato
       dentro. Le righe restano allineate a sinistra - centrarle
       renderebbe frastagliati tutti e due i bordi. */
    .scena .presenta__testo {
      /* Rientro uguale sui due lati: il blocco sta al centro del vano
         che la serranda lascia scoperto, come la riga sopra il bottone
         nel vano di destra. Prima era piu largo a sinistra, e il testo
         risultava spinto verso la scheda. */
      /* Il rientro della colonna si stringe di quello che il riquadro si
         prende: filo piu imbottitura. La misura del testo dentro resta
         quella di prima, che e gia il minimo per una riga giustificata. */
      padding: 0 clamp(.4em, .7vw, .8em);
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    /* Nessun tetto: la colonna e gia stretta, e togliere altra larghezza
       peggiora la giustificazione. */
    .scena .presenta__testo > * { width: 100%; }
    /* Impaginate come una pagina di libro: giustificate, con l'ultima
       riga a bandiera sinistra come la lascia la stampa. Senza
       sillabazione, che il trattino non si vuole - e la spaziatura fra
       le parole a farsi carico della riga piena.

       L'ultima riga a sinistra serve anche mentre si battono: la riga in
       crescita e sempre l'ultima, e giustificarla la farebbe allargare e
       stringere a ogni lettera. */
    .scena .presenta__claim,
    .scena .presenta__nota {
      text-align: justify;
      text-align-last: left;
      text-wrap: normal;
      hyphens: none;
      -webkit-hyphens: none;
      overflow-wrap: normal;
      word-break: normal;
    }
    .scena .presenta__claim {
      font-size: clamp(1.35rem, 2vw, 2.1rem);
      line-height: 1.28;
      padding-top: 0;
    }
    .scena .presenta__lato {
      grid-column: 3;
      padding: 0 clamp(1.2em, 2vw, 2.2em);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    /* Dentro la colonna scoperta la riga sta larga quanto il vano, non
       quanto le trentadue battute: sono trecento pixel, e un tetto in
       battute li sprecherebbe. E porta il corpo della frase: sono le due
       facce della stessa schermata, una per vano, e a corpi diversi
       sarebbero una principale e una nota a pie di pagina. */
    .scena .presenta__nota {
      max-width: none;
      width: 100%;
      font-size: clamp(1.35rem, 2vw, 2.1rem);
      line-height: 1.28;
      padding-bottom: clamp(1.1em, 2.4vh, 1.7em);
    }
    .scena .presenta__vai { padding-top: 0; }
  }
}

.presenta {
  background: var(--white);
  /* La schermata e alta quanto la finestra. In unita di viewport e non
     in percentuale: adesso la casa scorre e non c'e piu un pannello di
     altezza fissa da cui ereditare, quindi il 100% si risolveva in auto
     e la sezione finiva a 731 pixel invece che a 900. */
  min-height: 100svh;
  display: grid;
  align-items: center;
}
.presenta__in {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--gap) clamp(2em, 5vw, 6em);
  width: 100%;
}
.presenta__testo { min-width: 0; }
.presenta__lato { min-width: 0; }
@media (max-width: 900px) { .presenta__in { grid-template-columns: 1fr } }
/* Un corpo suo, piu piccolo del titolo di pagina: la frase deve stare in
   quattro righe, non in otto, o la schermata non la contiene. */
.presenta__claim {
  font-size: clamp(1.8rem, 3.3vw, 3rem);
  line-height: 1.12;
  letter-spacing: -.018em;
  max-width: 22ch;
  padding-top: .5em;
  text-wrap: pretty;
}

/* La colonna di destra e una pila: la riga, poi il bottone. */
.presenta__lato { display: flex; flex-direction: column; align-items: flex-start; }
.presenta__nota {
  font-size: clamp(1rem, 1.15vw, 1.18rem);
  line-height: 1.55;
  max-width: 32ch;
  color: var(--dark-2);
  padding-bottom: clamp(1.4em, 3vh, 2.2em);
}
.presenta__vai { display: flex; }
@media (max-width: 900px) { .presenta__vai { padding-top: 1em; } }
.intro__grid { display: flex; flex-wrap: wrap; gap: var(--gap) clamp(2em, 6vw, 7em); }
.intro__lead { flex: 1 1 34em; min-width: 0; }
.intro__side { flex: 0 1 26em; min-width: 0; display: flex; flex-direction: column; gap: 2.4em; align-self: flex-end; }
.intro__side p { color: var(--dark); }

.words { display: block; }
.word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; margin-bottom: -.06em; }
.word > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform var(--wave-t) var(--wave);
  transition-delay: var(--wd, 0s);
}
.words.is-in .word > span { transform: translateY(0); }
.word + .word { margin-left: .26em; }

.lift { display: block; overflow: hidden; }
.lift > * {
  display: block;
  transform: translateY(110%);
  transition: transform var(--wave-t) var(--wave);
  transition-delay: var(--wd, 0s);
}
.is-in .lift > *, .lift.is-in > * { transform: translateY(0); }

/* ogni elemento sale sulla stessa curva, sfalsato dalla sua posizione */
.fade, .rise {
  opacity: 0;
  transform: translate3d(0, 2.1em, 0);
  transition: opacity calc(var(--wave-t) * .85) var(--wave), transform var(--wave-t) var(--wave);
  transition-delay: var(--wd, 0s);
}
.fade.is-in, .rise.is-in { opacity: 1; transform: none; }
.fade, .rise, .entry, .word > span, .lift > * { backface-visibility: hidden; }

/* i gradini fissi restano come riserva: il calcolo a onda li scavalca */
.d1 { --wd: .06s } .d2 { --wd: .12s } .d3 { --wd: .18s }
.d4 { --wd: .24s } .d5 { --wd: .3s } .d6 { --wd: .36s }

/* =============================================================== BOTTONI */
.btn-round {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(9em, 13vw, 12.5em);
  height: clamp(9em, 13vw, 12.5em);
  border-radius: 50%;
  background: var(--dark);
  color: var(--white);
  overflow: hidden;
  text-align: center;
  will-change: transform;
}
.btn-round--blue { color: #0B2F33; }
.btn-round { box-shadow: var(--carve-deep); transition: box-shadow var(--t-smooth); }
.btn-round:hover, .btn-round:focus-visible { box-shadow: var(--carve-soft); }
/* Il riempimento sale dal basso ed e l'onda iridescente, la stessa del
   cerchio del menu e delle voci: il bottone tondo non e piu un disco
   piatto che non cambia al passaggio. */
.btn-round__fill {
  position: absolute;
  inset: 0;
  /* Il bottone e una griglia con place-items: center, e quel centraggio
     arriva anche al figlio assoluto: senza una misura esplicita il
     riempimento si accartoccia e non si e mai visto. */
  place-self: stretch;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-image: var(--iride);
  background-size: var(--iride-size);
  background-position: var(--iride-pos);
  background-blend-mode: var(--iride-blend);
  transform: translateY(101%);
  transition: transform var(--t-smooth);
}
.btn-round:hover .btn-round__fill,
.btn-round:focus-visible .btn-round__fill {
  transform: translateY(0);
  /* l'onda si muove solo mentre si vede: da ferma sarebbe una ridipintura
     continua per un disco nascosto */
  animation: iride 14s linear infinite;
}
/* Il riempimento e anche lui uno span dentro il bottone: senza escluderlo
   questa regola gli rimetteva position: relative, che vince su absolute
   per specificita. Tornava un elemento di griglia alto quel che avanzava,
   e il riempimento non e mai salito. */
.btn-round > span:not(.btn-round__fill) {
  position: relative;
  z-index: 1;
  font-size: 1rem;
  transition: color .42s var(--wave);
}
/* sull'onda il bianco si perde sull'oro: l'etichetta passa allo scuro */
.btn-round:hover > span:not(.btn-round__fill),
.btn-round:focus-visible > span:not(.btn-round__fill) { color: #0B2F33; }

.btn-line {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: 1.1em 1.9em;
  border: 1px solid var(--border);
  border-radius: 3em;
  overflow: hidden;
  font-size: .95rem;
}
.theme-dark .btn-line, .hero .btn-line { border-color: var(--border-light); }
.foot .btn-line, .top .btn-line {
  border-color: transparent;
  box-shadow: var(--carve);
  transition: box-shadow var(--t-smooth), color var(--t-fast);
}
.foot .btn-line:hover, .top .btn-line:hover { box-shadow: var(--carve-soft); }
.btn-line__fill {
  position: absolute;
  inset: 0;
  border-radius: 3em;
  background: var(--dark);
  transform: translateY(101%);
  transition: transform var(--t-smooth);
}
.theme-dark .btn-line__fill, .hero .btn-line__fill { background: var(--white); }
.btn-line span, .btn-line .arrow { position: relative; z-index: 1; transition: color var(--t-fast); }
.btn-line:hover .btn-line__fill { transform: translateY(0); }
.btn-line:hover { color: var(--white); }
.theme-dark .btn-line:hover, .hero .btn-line:hover { color: var(--dark); }
.btn-line:hover .arrow svg * { stroke: currentColor; }
.btn-line .arrow svg * { stroke: currentColor; transition: stroke var(--t-fast); }

.btn-center { display: flex; justify-content: center; }

/* ============================================================== ELENCHI */
.work { background: var(--white); padding-top: clamp(3em, 12vh, 7em); }
.work__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap); padding-bottom: clamp(2em, 4vw, 3.4em); }
/* ===================================================== SOFFIETTO
   Sei lame a tutta altezza: il titolo sta per lungo finche la lama e
   stretta, si raddrizza quando si apre. Tutta la sezione sta in una
   schermata, invece di scendere in colonna per il triplo dello schermo. */
.slats {
  display: flex;
  gap: 2px;
  height: min(72vh, 40rem);
  min-height: 26rem;
  background: var(--border);
  border-radius: .6em;
  overflow: hidden;
}
/* a schermo pieno: nessun rientro, nessun angolo, tutta l'altezza */
.work--full { padding: 0; height: 100%; }
.slats--full {
  height: 100%;
  min-height: 0;
  border-radius: 0;
  gap: 1px;
}
.work__head--over {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
  padding: clamp(1.6em, 3vw, 2.4em) calc(var(--pad) + var(--bar-h) + 1.5em) clamp(1.6em, 3vw, 2.4em) var(--pad);
  pointer-events: none;
}
/* il titoletto cade sopra le lame: gli serve un fondo per staccarsi */
.work--full::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(6em, 12vh, 9em);
  z-index: 1;
  background: linear-gradient(to bottom, var(--white) 34%, rgba(255, 255, 255, 0));
  pointer-events: none;
}
/* le lame partono sotto il titoletto, non dietro */
.slats--full .slat { padding-top: clamp(5.5em, 11vh, 8em); }
.slat {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .9em;
  padding: clamp(1em, 1.8vw, 1.6em);
  background: var(--lightgray);
  color: var(--dark);
  overflow: hidden;
  transition: flex-grow .7s var(--wave);
}
.slat:focus-visible { outline: 2px solid var(--blue); outline-offset: -4px; }
.slat:hover, .slat:focus-visible { flex-grow: 3.6; }

/* la foto dell'area resta sotto, e si accende solo sulla lama aperta */
.slat__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .7s var(--e), transform 1.1s var(--wave);
}
.slat:hover .slat__bg, .slat:focus-visible .slat__bg { opacity: .2; transform: none; }
/* velo dal basso: senza, il testo cade sopra le zone chiare della foto */
.slat::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--lightgray) 18%, rgba(233, 234, 235, .55) 46%, rgba(233, 234, 235, 0) 78%);
  opacity: 0;
  transition: opacity .7s var(--e);
  pointer-events: none;
}
.slat:hover::after, .slat:focus-visible::after { opacity: 1; }
.slat__n, .slat__in { z-index: 1; }

.slat__n {
  position: relative;
  align-self: flex-start;
  font-size: .6rem;
  letter-spacing: .05em;
  color: var(--gray);
}
.slat__in { position: relative; display: flex; flex-direction: column; gap: .5em; }
.slat__title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  align-self: flex-start;
  white-space: nowrap;
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.slat:hover .slat__title,
.slat:focus-visible .slat__title {
  writing-mode: horizontal-tb;
  transform: none;
  align-self: auto;
  white-space: normal;
}
.slat__body, .slat__meta {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .6s var(--e), opacity .45s var(--e);
}
.slat__body { font-size: .95rem; line-height: 1.45; max-width: 30ch; }
.slat__meta { font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; color: var(--gray); }
.slat:hover .slat__body, .slat:focus-visible .slat__body { max-height: 9em; opacity: 1; }
.slat:hover .slat__meta, .slat:focus-visible .slat__meta { max-height: 4em; opacity: 1; }

/* ============================================================== NUMERI */
.figures { background: var(--white); }
.figures__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap) clamp(2em, 5vw, 5em); }
.figure__n { font-size: clamp(3rem, 7vw, 6rem); line-height: 1; letter-spacing: -.03em; display: flex; align-items: baseline; }
.figure__n sup { font-size: .34em; top: -.9em; position: relative; color: #14C8B0; }
.figure__l { color: var(--gray); max-width: 22ch; padding-top: .9em; }

/* =============================================================== ARTICOLI */
.prose { max-width: 46em; }
.prose p + p { margin-top: 1.2em; }
.entry {
  border-top: 1px solid var(--border);
  opacity: 0;
  transform: translate3d(0, 1.8em, 0);
  transition: opacity calc(var(--wave-t) * .85) var(--wave), transform var(--wave-t) var(--wave);
  transition-delay: var(--wd, 0s);
}
.entry.is-in { opacity: 1; transform: none; }
.entry:last-child { border-bottom: 1px solid var(--border); }
.entry__btn {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
  text-align: left;
  padding: clamp(1.4em, 2.6vw, 2.2em) 0;
}
/* Al passaggio il titolo si sposta, non il rientro del bottone: un
   rientro animato reimpagina la riga a ogni fotogramma. */
/* il numerale romano sta staccato dal luogo, piccolo e grigio come una
   meta di scheda */
.entry .num { display: inline-block; min-width: 2.6em; font-size: .5em; letter-spacing: .05em; color: var(--gray); vertical-align: .5em; }
.entry__btn .work__title { transition: transform var(--esce); }
html.fine .entry__btn:hover .work__title { transform: translate3d(1.4em, 0, 0); transition: transform var(--entra); }
.entry__year { font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; color: var(--gray); }
.entry__body { height: 0; overflow: hidden; transition: height var(--t-smooth); }
.entry__inner { padding: 0 0 clamp(1.6em, 3vw, 2.6em); display: flex; flex-wrap: wrap; gap: var(--gap) clamp(2em, 5vw, 5em); }
.entry__inner > div { flex: 1 1 20em; }
.entry__inner h3 { font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; color: var(--gray); padding-bottom: .7em; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2em, 4vw, 3.4em) var(--gap); }
.card__meta { font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; color: #0FA396; padding-bottom: .8em; display: block; }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.gallery figure { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: var(--lightgray); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--e); }
.gallery figure:hover img { transform: scale(1.05); }

/* ============================================================== IL VOLUME
   Sei facce: le due scansioni davanti e dietro, dorso e taglio bianchi
   come le copertine, testa a pagine. Il corpo gira con lo scorrimento
   (--volume), la mano lo inclina e lo afferra: due transform su due nodi
   annidati, mai in conflitto. Nessun antenato con overflow nascosto,
   opacita in transizione, filtro o ritaglio: appiattirebbero la scena. */
.libro { background: var(--white); }
.libro__in { display: grid; gap: var(--gap); }
.libro__testo { display: flex; flex-direction: column; gap: clamp(2.4em, 6vh, 4em); }
.libro__lead { max-width: 38em; }
.libro__et { padding-bottom: 1.2em; }
.libro__perno { display: grid; place-items: center; align-content: center; gap: 1.6rem; order: -1; }
.volume {
  --w: clamp(13rem, 21vw, 22rem);      /* il retro e scansionato a 700px: oltre 22rem si ammorbidisce */
  --d: calc(var(--w) * .085);          /* spessore */
  position: relative; width: var(--w); aspect-ratio: 1000 / 1564; margin: 0;
  perspective: 1400px; perspective-origin: 50% 42%;
  touch-action: pan-y; user-select: none; cursor: grab;
}
.volume.is-preso { cursor: grabbing; }
.volume__mano, .volume__corpo { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
/* posa di riposo: tre quarti, si vedono fronte e dorso */
.volume__corpo { transform: rotateX(-4deg) rotateY(26deg); }
.volume__faccia, .volume__dorso, .volume__taglio, .volume__testa { position: absolute; backface-visibility: hidden; }
.volume__faccia { inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 2px 6px 6px 2px; box-shadow: inset 0 0 0 1px rgba(20, 21, 23, .06); }
.volume__faccia--fronte { transform: translateZ(calc(var(--d) / 2)); }
.volume__faccia--retro { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); border-radius: 6px 2px 2px 6px; }
.volume__dorso { top: 0; bottom: 0; left: calc(var(--d) / -2); width: var(--d); transform: rotateY(-90deg);
  background: linear-gradient(90deg, #E6E4E0, #FBFAF8 28%, #FBFAF8 72%, #E6E4E0); }
.volume__taglio { top: 1%; bottom: 1%; right: calc(var(--d) / -2); width: var(--d); transform: rotateY(90deg);
  background: repeating-linear-gradient(90deg, #F4F3F0 0 1px, #DAD8D3 1px 2px); }
.volume__testa { left: 1%; right: 1%; top: calc(var(--d) / -2); height: var(--d); transform: rotateX(90deg);
  background: repeating-linear-gradient(180deg, #F4F3F0 0 1px, #DAD8D3 1px 2px); }
.volume__ombra { position: absolute; left: 6%; right: 6%; bottom: -7%; height: 10%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(20, 21, 23, .24), rgba(20, 21, 23, 0) 70%); will-change: transform; }
.volume__gira { display: inline-flex; align-items: center; gap: .6em; padding: .4em 0; border: 0; background: none; color: var(--dark); cursor: pointer; font: inherit; }
.volume__gira[aria-pressed="true"] .arrow { transform: rotate(180deg); }
html.fine .volume__gira[aria-pressed="true"]:hover .arrow,
.volume__gira[aria-pressed="true"]:focus-visible .arrow { transform: rotate(180deg) translate3d(.12em, -.12em, 0); }
@media (min-width: 1000px) {
  .libro__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .libro__perno { order: 0; position: sticky; top: var(--corsia); height: calc(100svh - var(--corsia) - clamp(2em, 4vh, 3em)); }
  /* la colonna di lettura e alta due schermate e passa: e la corsa del giro */
  .libro__testo { min-height: 220svh; justify-content: space-between; padding: 12vh 0 16vh; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .libro { view-timeline-name: --volume; view-timeline-axis: block; }
    .volume__corpo, .volume__ombra { animation-timeline: --volume; animation-range: contain; animation-fill-mode: both; animation-timing-function: linear; animation-duration: 1ms; }
    .volume__corpo { animation-name: volume-gira; }
    .volume__ombra { animation-name: volume-ombra; }
    @media (max-width: 999px) {
      .libro { view-timeline-name: none; }
      .volume { view-timeline-name: --volume; }
      .volume__corpo, .volume__ombra { animation-range: cover 30% cover 80%; }
    }
  }
}
/* 26 -> 180 -> 206: fronte e dorso, retro di fronte a meta, retro e
   taglio quando si leggono i punti di "cosa c'e dentro" */
@keyframes volume-gira {
  0%, 22% { transform: rotateX(-4deg) rotateY(26deg); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  70% { transform: rotateX(-4deg) rotateY(180deg); animation-timing-function: var(--wave); }
  100% { transform: rotateX(-4deg) rotateY(206deg); }
}
@keyframes volume-ombra { 0%, 22% { transform: scaleX(1) } 46% { transform: scaleX(.38) } 70% { transform: scaleX(1) } 100% { transform: scaleX(.92) } }
@supports not (transform-style: preserve-3d) {
  .volume__faccia--retro, .volume__dorso, .volume__taglio, .volume__testa, .volume__ombra { display: none; }
  .volume__corpo { transform: none; }
}
@media (max-width: 999px) { .volume { --w: min(58vw, 18rem); } }
@media (prefers-reduced-motion: reduce) { .volume__corpo, .volume__ombra { animation: none !important; } }

/* pagina interna: testa */
/* La testata prende la tinta della voce, la stessa del sipario che si
   e appena alzato: entrando nella sezione il colore resta. */
.top {
  background: var(--tinta, var(--dark-2));
  /* --su lo calcola la compilazione dal contrasto con la tinta: sulle
     tinte chiare il bianco sparirebbe */
  color: var(--su, var(--white));
  padding: clamp(9em, 22vh, 15em) 0 clamp(3.4em, 7vw, 6em);
  position: relative;
  overflow: hidden;
}
.top h1 { font-size: clamp(2.8rem, 8vw, 8rem); }
/* Il secondario segue la tinta come il titolo: il grigio fisso reggeva
   solo sui fondi scuri. */
.top .h5,
.top h5,
.top p,
.top__meta { color: var(--su-2, var(--gray)); }
.top__meta { display: flex; flex-wrap: wrap; gap: 1em 2.4em; padding-top: 2.2em; }
.top__h1 { padding-top: .4em; }
.top__sub { max-width: 34em; padding-right: max(0px, calc(var(--rail) - var(--pad) + 1.2rem)); }
.top__in { position: relative; z-index: 1; }

/* ------------------------------------------------------------ filigrana
   La parola del menu, che il sipario ha appena mostrato, resta a terra
   dietro la testata: la carta sotto il vetro. Uscendo, la filigrana sale
   piu lenta e il titolo si spegne, come nella serranda di casa. Senza
   orologio dello scorrimento resta ferma, e la testata resta piena. */
.top__filigrana {
  position: absolute; right: -.04em; bottom: -.16em; z-index: 0;
  font-size: clamp(6.5rem, 24vw, 22rem);
  font-weight: 300; line-height: .8; letter-spacing: -.045em; white-space: nowrap;
  color: var(--su, var(--white)); opacity: .075;
  pointer-events: none; user-select: none;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .top { view-timeline-name: --testa; view-timeline-axis: block; }
    .top__filigrana, .top__in { animation-fill-mode: both; animation-timing-function: linear; animation-duration: 1ms; animation-timeline: --testa; }
    .top__filigrana { will-change: transform; animation-name: testa-filigrana; animation-range: exit 0% exit 100%; }
    .top__in { animation-name: testa-esce; animation-range: exit 30% exit 100%; }
  }
}
@keyframes testa-filigrana { from { transform: translate3d(0, 0, 0) } to { transform: translate3d(-4%, -28%, 0) } }
@keyframes testa-esce { from { opacity: 1; transform: none } to { opacity: 0; transform: translate3d(0, -2.4em, 0) } }
@media (max-width: 860px) { .top__filigrana { right: auto; left: -.03em; font-size: clamp(5rem, 30vw, 9rem); } }

/* ============================================================== LEGALI */
/* Una colonna sola, larga quanto una riga si legge senza perdersi. Fondo
   chiaro come le altre sezioni di testo: le norme non hanno bisogno di
   scenografia, hanno bisogno di essere lette. */
.legale { background: var(--white); color: var(--text); padding-top: clamp(3em, 6vh, 5em); }
.legale .container { max-width: 46em; }
.legale__data { color: var(--gray); padding-bottom: clamp(2.4em, 5vh, 4em); }
.legale__blocco { padding-bottom: clamp(2.2em, 4.5vh, 3.4em); }
.legale__h {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -.015em;
  padding-bottom: .7em;
}
.legale__blocco p { max-width: 34em; }
.legale__blocco p + p { padding-top: .9em; }
.legale__esito { color: var(--gray); font-size: .85rem; padding-top: 1em; min-height: 1.4em; }
.legale__altre { padding-top: clamp(1.5em, 3vh, 2.5em); border-top: 1px solid var(--border); }
.legale__altre .btn-row { padding-top: 1.2em; }

/* =============================================================== PIEDE */
/* Il piede occupa una schermata intera: quattro colonne che salgono da
   sinistra a destra per peso, e una traversa in fondo appoggiata al
   bordo. La riga di chiusura sta sempre giu, qualunque sia l'altezza
   delle colonne. */
/* ================================================ COMMIATO E SCAVALCO
   Due schermate dentro un contenitore piu alto, che si danno il cambio
   come due schede di una cartella: il commiato arretra e rimpicciolisce,
   il piede lo scavalca salendo da sotto e si mette in primo piano a tutto
   schermo. Le corse le calcola il JS in --via e --avanti. */
/* La corsa dello scavalcamento. Era 240 schermate d'altezza: sottratta
   la finestra restavano 140 di scorrimento per un movimento che ne copre
   una, cioe tutto avanzava a un settimo della velocita del dito - non
   scattoso, misurato gira a 60 fotogrammi pieni, ma al rallentatore.
   Con 170 il gesto andava al doppio del dito e la scheda scattava su in
   un attimo; con 210 la corsa era 110 per un movimento che ne copre 100,
   cioe il piede saliva alla velocita della mano - e tutto quello che
   c'era dentro, scaglioni compresi, si stirava con lei. Con 175 la corsa
   e 75: un quarto piu svelta del dito, che e il punto in cui il gesto si
   legge senza far aspettare. */
/* Dietro il commiato c'era il fondo del documento, che e un nero suo -
   16,17,20 contro il 20,21,23 della scheda. Quattro punti di differenza:
   non abbastanza per essere una scelta, abbastanza per vedersi come una
   cornice attorno alla scheda che arretra. Qui dietro c'e lo stesso nero
   della scheda, e la cornice sparisce. */
.finale { position: relative; height: 175vh; height: 175svh; background: var(--dark-2); }
/* La fascia che accende la battitura del piede: senza ingombro, alta da
   poco prima della fine dello scavalcamento fino in fondo. Alta un
   pixel, un salto secco (fine pagina, un'ancora) la scavalcherebbe e le
   voci resterebbero spente. */
.finale__via { position: absolute; left: 0; top: 72%; bottom: 0; width: 1px; pointer-events: none; }
/* Il perno tiene fermo, quello che ci sta dentro si muove.

   Prima erano lo stesso elemento: il commiato e il piede erano insieme
   sticky - mossi dal compositore alla velocita del lettore - e
   trasformati dal motore, che scrive un fotogramma dopo. Due padroni per
   la stessa posizione, e la differenza fra i due si vedeva come
   tremolio proprio durante la traslazione. Ora il perno fa solo da
   sostegno e la trasformazione va sul figlio: nessuno dei due tocca cio
   che muove l'altro. */
.perno { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.perno--piede { margin-top: -100vh; margin-top: -100svh; z-index: 1; }
/* Il sostegno del piede sta sopra il commiato per tutta la corsa, e da li
   intercettava il puntatore: sotto c'era il rullo del titolo, che non si
   accendeva mai perche il dito non lo raggiungeva. Il sostegno e vuoto -
   il foglio dentro sta sotto lo schermo finche non sale - quindi il
   puntatore lo attraversa, e lo raccoglie il foglio, che c'e davvero. */
.perno--piede { pointer-events: none; }
.perno--piede > .foot { pointer-events: auto; }
.commiato, .perno > .foot { height: 100%; }
.commiato {
  display: grid;
  place-items: center;
  background: var(--dark-2);
  color: var(--white);
  overflow: hidden;
  padding: var(--pad);
  text-align: center;
  /* Arretra: perde una fetta di scala e si stacca dal bordo con un raggio,
     come un foglio spinto sotto quello che arriva. --via parte sotto zero,
     quindi prima si alza appena verso chi guarda e poi va indietro. */
  /* Lo stato a riposo. Il movimento lo scrive il motore direttamente
     qui sopra, elemento per elemento: vedi il commento nello script. */
  transform-origin: 50% 30%;
  /* Senza questo la scala ridisegna il testo a ogni fotogramma: il
     browser lo ridisegna nitido a ogni misura invece di stirare una
     stampa gia fatta. Dichiarandolo prima, la schermata diventa una
     texture e a scalarla ci pensa il compositore. */
  will-change: transform;
}
/* l'ombra di quello che passa sopra: senza, il foglio dietro resta acceso
   come quello davanti e i due piani non si distinguono */
.commiato::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #05060A;
  opacity: calc(var(--via, 0) * .62);
  pointer-events: none;
}
.commiato__in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2em;
  will-change: transform;
}
.commiato .h5 { color: var(--gray); }
.commiato__t {
  font-size: clamp(3rem, 11vw, 11rem);
  line-height: .92;
  letter-spacing: -.04em;
  font-weight: 400;
}

/* ---------------------------------------------------------- il rullo
   Due facce impilate dentro una finestra alta quanto una: al passaggio il
   blocco sale di una faccia e il titolo diventa l'invito. La finestra e
   alta due righe perche la prima faccia ne ha due; la seconda, che ne ha
   una sola, ci sta in mezzo. */
/* Una misura sola per la finestra, la faccia e la corsa: una percentuale
   sul blocco interno non si risolve in modo affidabile, una lunghezza si. */
.rullo { --faccia: 1.84em; display: block; overflow: hidden; height: var(--faccia); color: inherit; }
.rullo__in {
  display: block;
  transition: transform .72s var(--wave);
  will-change: transform;
}
.rullo__f {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: var(--faccia);
}
.rullo__f i { font-style: normal; display: block; }
/* la seconda faccia prende il riempimento iridescente delle voci */
.rullo__f:last-child i {
  background-image: var(--iride);
  background-size: var(--iride-size);
  background-position: var(--iride-pos);
  background-blend-mode: var(--iride-blend);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rullo:hover .rullo__in,
.rullo:focus-visible .rullo__in { transform: translateY(calc(var(--faccia) * -1)); }
.rullo:hover .rullo__f:last-child i,
.rullo:focus-visible .rullo__f:last-child i { animation: iride 14s linear infinite; }

/* ------------------------------------------------------- il piede davanti
   Sale da sotto e si mette in primo piano. Gli angoli alti sono tondi
   finche e in viaggio e si spianano all'arrivo: e il bordo del foglio che
   scavalca, e sparisce quando il foglio ha preso tutta la schermata. */
.perno > .foot {
  transform: translateY(100%);
  /* L'ombra sotto il foglio che scavalca: prima cresceva con la corsa,
     e una sfocatura che cambia misura si ridisegna a ogni fotogramma -
     questa e larga quanto la schermata. Ferma non costa niente, e il
     foglio sta sotto lo schermo finche non parte: nessuno la vede
     comparire. */
  box-shadow: 0 -3vh 9vh rgba(0, 0, 0, .5);
  will-change: transform;
}
.perno > .foot .foot__grid,
.perno > .foot .studio__grid,
.perno > .foot .foot__bar,
.perno > .foot .studio__bar {
  transform: translateY(7vh);
}

/* ------------------------------------- la corsa, fuori dal filo principale
   Dove il browser sa legare un'animazione allo scorrimento, la
   coreografia non passa piu dallo script: la calcola il compositore, che
   non ha altro da fare e non puo essere messo in coda da nient'altro. Il
   motore in JavaScript resta per chi non ce l'ha - si spegne da solo
   leggendo la stessa condizione.

   Le stazioni qui sotto sono campioni delle identiche curve del motore,
   una ogni 5% della corsa: la forma e la stessa, cambia solo chi la
   percorre.

   La corsa e la stessa di prima: dal momento in cui la sezione copre la
   finestra a quello in cui smette. E quello che "contain" descrive. */
/* Con meno moto il piede non scorre: sta gia dove finisce la corsa, che
   e il suo stato a riposo. */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
  .finale { view-timeline-name: --corsa; view-timeline-axis: block }
  .perno > .foot,
  .commiato,
  .perno > .foot .foot__grid,
  .perno > .foot .studio__grid,
  .perno > .foot .foot__bar,
  .perno > .foot .studio__bar {
    animation-timeline: --corsa;
    animation-range: contain;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-duration: 1ms;
  }
  .commiato { animation-name: cb-commiato }
  .perno > .foot { animation-name: cb-piede }
  .perno > .foot .foot__grid,
  .perno > .foot .studio__grid,
  .perno > .foot .foot__bar,
  .perno > .foot .studio__bar { animation-name: cb-contenuto }

  /* Le quattro schede non arrivano insieme: entrano una dopo l'altra da
     destra, lo stesso gesto delle schede del menu. Con lo scorrimento
     per orologio il ritardo non si scrive in secondi - si scrive
     spostando il tratto di corsa su cui ciascuna corre, che e la stessa
     cosa detta nell'unita giusta. Lo scarto e sei centesimi di corsa:
     sotto quella soglia le quattro leggono come una sola. */
  .perno > .foot--studio .blocco {
    animation-timeline: --corsa;
    animation-fill-mode: both;
    animation-name: cb-scaglione;
    animation-duration: 1ms;
    animation-timing-function: var(--wave);
  }
  /* col tabulatore il fuoco arriva prima della corsa: la scheda che lo
     riceve si mostra, o il fuoco cadrebbe su un collegamento invisibile */
  .perno > .foot--studio .blocco:focus-within { animation: none !important; opacity: 1; transform: none; }
  /* Sei punti di scarto su quaranta di corsa erano quasi niente: le
     quattro schede si sovrapponevano per l'85% e arrivavano come una
     sola. Dodici punti su trentaquattro le staccano davvero - quando la
     seconda comincia, la prima e a un terzo. */
  .perno > .foot--studio .blocco:nth-child(1) { animation-range: contain 26% contain 60% }
  .perno > .foot--studio .blocco:nth-child(2) { animation-range: contain 38% contain 72% }
  .perno > .foot--studio .blocco:nth-child(3) { animation-range: contain 50% contain 84% }
  .perno > .foot--studio .blocco:nth-child(4) { animation-range: contain 62% contain 96% }
  @keyframes cb-scaglione {
    from { opacity: 0; transform: translate(2.2em, .8em) }
    to   { opacity: 1; transform: none }
  }
}
}

@keyframes cb-commiato {
  0% { transform: translateY(0.4vh) scale(1.017); border-radius: 0rem }
  5% { transform: translateY(0.3586vh) scale(1.0152); border-radius: 0rem }
  10% { transform: translateY(0.2vh) scale(1.0085); border-radius: 0rem }
  15% { transform: translateY(0.0414vh) scale(1.0018); border-radius: 0rem }
  20% { transform: translateY(0vh) scale(1); border-radius: 0rem }
  25% { transform: translateY(-0.0434vh) scale(0.9982); border-radius: 0.026rem }
  30% { transform: translateY(-0.2886vh) scale(0.9877); border-radius: 0.1732rem }
  35% { transform: translateY(-0.797vh) scale(0.9661); border-radius: 0.4782rem }
  40% { transform: translateY(-1.5164vh) scale(0.9356); border-radius: 0.9098rem }
  45% { transform: translateY(-2.3244vh) scale(0.9012); border-radius: 1.3947rem }
  50% { transform: translateY(-3.0728vh) scale(0.8694); border-radius: 1.8437rem }
  55% { transform: translateY(-3.6305vh) scale(0.8457); border-radius: 2.1783rem }
  60% { transform: translateY(-3.9277vh) scale(0.8331); border-radius: 2.3566rem }
  65% { transform: translateY(-3.9996vh) scale(0.83); border-radius: 2.3998rem }
  70% { transform: translateY(-4vh) scale(0.83); border-radius: 2.4rem }
  75% { transform: translateY(-4vh) scale(0.83); border-radius: 2.4rem }
  80% { transform: translateY(-4vh) scale(0.83); border-radius: 2.4rem }
  85% { transform: translateY(-4vh) scale(0.83); border-radius: 2.4rem }
  90% { transform: translateY(-4vh) scale(0.83); border-radius: 2.4rem }
  95% { transform: translateY(-4vh) scale(0.83); border-radius: 2.4rem }
  100% { transform: translateY(-4vh) scale(0.83); border-radius: 2.4rem }
}
@keyframes cb-piede {
  0% { transform: translateY(100%); border-radius: 2.6rem 2.6rem 0 0 }
  5% { transform: translateY(99.9982%); border-radius: 2.6rem 2.6rem 0 0 }
  10% { transform: translateY(99.65%); border-radius: 2.5909rem 2.5909rem 0 0 }
  15% { transform: translateY(98.0457%); border-radius: 2.5492rem 2.5492rem 0 0 }
  20% { transform: translateY(94.5758%); border-radius: 2.459rem 2.459rem 0 0 }
  25% { transform: translateY(88.9949%); border-radius: 2.3139rem 2.3139rem 0 0 }
  30% { transform: translateY(81.3611%); border-radius: 2.1154rem 2.1154rem 0 0 }
  35% { transform: translateY(71.9752%); border-radius: 1.8714rem 1.8714rem 0 0 }
  40% { transform: translateY(61.3201%); border-radius: 1.5943rem 1.5943rem 0 0 }
  45% { transform: translateY(50%); border-radius: 1.3rem 1.3rem 0 0 }
  50% { transform: translateY(38.6799%); border-radius: 1.0057rem 1.0057rem 0 0 }
  55% { transform: translateY(28.0248%); border-radius: 0.7286rem 0.7286rem 0 0 }
  60% { transform: translateY(18.6389%); border-radius: 0.4846rem 0.4846rem 0 0 }
  65% { transform: translateY(11.0051%); border-radius: 0.2861rem 0.2861rem 0 0 }
  70% { transform: translateY(5.4242%); border-radius: 0.141rem 0.141rem 0 0 }
  75% { transform: translateY(1.9543%); border-radius: 0.0508rem 0.0508rem 0 0 }
  80% { transform: translateY(0.35%); border-radius: 0.0091rem 0.0091rem 0 0 }
  85% { transform: translateY(0.0018%); border-radius: 0rem 0rem 0 0 }
  90% { transform: translateY(0%); border-radius: 0rem 0rem 0 0 }
  95% { transform: translateY(0%); border-radius: 0rem 0rem 0 0 }
  100% { transform: translateY(0%); border-radius: 0rem 0rem 0 0 }
}
@keyframes cb-contenuto {
  0% { transform: translateY(7vh) }
  5% { transform: translateY(7vh) }
  10% { transform: translateY(7vh) }
  15% { transform: translateY(7vh) }
  20% { transform: translateY(7vh) }
  25% { transform: translateY(7vh) }
  30% { transform: translateY(7vh) }
  35% { transform: translateY(6.9987vh) }
  40% { transform: translateY(6.7511vh) }
  45% { transform: translateY(5.7282vh) }
  50% { transform: translateY(3.9506vh) }
  55% { transform: translateY(1.9762vh) }
  60% { transform: translateY(0.4674vh) }
  65% { transform: translateY(-0.2595vh) }
  70% { transform: translateY(-0.3538vh) }
  75% { transform: translateY(-0.1912vh) }
  80% { transform: translateY(-0.0531vh) }
  85% { transform: translateY(-0.0057vh) }
  90% { transform: translateY(-0.0001vh) }
  95% { transform: translateY(0vh) }
  100% { transform: translateY(0vh) }
}

@media (prefers-reduced-motion: reduce) {
  .finale { height: auto; }
  .perno { position: static; height: auto; overflow: visible; }
  .perno--piede { margin-top: 0; }
  .commiato, .perno > .foot {
    height: auto; min-height: 100vh;
    transform: none; border-radius: 0; box-shadow: none;
  }
  .commiato::after { display: none; }
  .perno > .foot .foot__grid, .perno > .foot .foot__bar,
  .perno > .foot .studio__grid, .perno > .foot .studio__bar { transform: none !important; }
  /* Anche la corsa sul compositore: un'animazione batte una
     dichiarazione semplice, e senza questo continuerebbe a muovere tutto
     mentre il resto sta fermo. */
  .commiato, .perno > .foot,
  .perno > .foot .foot__grid, .perno > .foot .foot__bar,
  .perno > .foot .studio__grid, .perno > .foot .studio__bar { animation: none !important; }
  .perno > .foot--studio .blocco { animation: none !important; opacity: 1; transform: none; }
  .rullo__in { transition: none; }
}

.foot {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--dark);
  color: var(--white);
  padding: clamp(3.4em, 7vh, 6em) var(--pad) clamp(1.6em, 3vh, 2.6em);
  overflow: hidden;
}
.foot__grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1.7fr;
  gap: clamp(2em, 4vw, 4.5em);
  align-content: start;
  position: relative;
  z-index: 1;
}
.foot__col { display: flex; flex-direction: column; align-items: flex-start; }
.foot__col h5 { color: var(--gray); padding-bottom: 1.1em; }
.foot__col h5 + .foot__list { padding-bottom: 2.4em; }
.foot__list { display: flex; flex-direction: column; gap: .55em; }

/* Il filo che si stende sotto la voce: lo stesso gesto del menu, in
   piccolo. */
.foot__link {
  position: relative;
  display: inline-block;
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.5;
}
.foot__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -.05em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .5s var(--wave);
}
.foot__link:hover::after,
.foot__link:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
/* "gestisci cookie" e un comando, non un collegamento: sta nella stessa
   fila e si comporta uguale, ma resta un bottone. */
.foot__link[data-wipe] { text-align: left; }
.foot__esito { color: var(--gray); font-size: .78rem; padding-top: 1.1em; min-height: 1.2em; }

/* ------------------------------------------------------------ colonna 4 */
.foot__ovunque {
  font-size: clamp(2.6rem, 4.6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-weight: 500;
  padding-bottom: .5em;
}
.foot__pills { display: flex; flex-direction: column; gap: .7em; width: 100%; }
/* La pastiglia e un solo oggetto: il disco dentro non e un secondo
   bottone, si accende con lei. */
.pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  width: 100%;
  padding: .8em 1em .8em 1.5em;
  border-radius: 100px;
  background: var(--dark-2);
  transition: background .45s var(--wave), transform .45s var(--wave);
}
.pill__n { font-size: clamp(1rem, 1.2vw, 1.2rem); font-weight: 500; }
.pill__go {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.7em; height: 2.7em;
  border-radius: 50%;
  background: var(--white);
  color: var(--dark-2);
  transition: transform .45s var(--wave);
}
.pill__go svg { width: 42%; height: 42%; }
.pill:hover, .pill:focus-visible { background: #23252A; transform: translateX(.3em); }
.pill:hover .pill__go, .pill:focus-visible .pill__go { transform: rotate(45deg); }

/* -------------------------------------------------------------- traversa */
.foot__bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
  margin-top: clamp(3em, 7vh, 6em);
  padding-top: clamp(1.4em, 3vh, 2.2em);
  border-top: 1px solid var(--border-light);
  font-size: .82rem;
  color: var(--gray);
}
.foot__bar-r { display: flex; align-items: center; gap: 1.6em; }
.foot__tags { text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; }
.foot__su {
  display: grid;
  place-items: center;
  width: 3em; height: 3em;
  border-radius: 50%;
  background: var(--white);
  color: var(--dark-2);
  transition: transform .5s var(--wave);
}
.foot__su svg { width: 38%; height: 38%; transform: rotate(-45deg); }
.foot__su:hover, .foot__su:focus-visible { transform: translateY(-.25em); }

/* ================================================= PIEDE DELLA CASA
   Tre colonne su bianco: recapito, collegamenti, invito alla newsletter,
   e in fondo una riga con le note legali, la firma e il ritorno in cima.
   Le proporzioni vengono dal riferimento dato - le prime due colonne
   uguali, la terza mezza volta piu larga - e la griglia si ferma prima
   del bordo destro, dove resta solo il disco. */
.foot--studio {
  background: var(--white);
  color: var(--dark-2);
  /* Un vano solo: la stessa misura fa il margine esterno e lo stacco fra
     una scheda e l'altra. Le schede prendono la schermata intera e fra
     loro resta soltanto quel filo di bianco. */
  --vano: clamp(.5rem, .78vw, .95rem);
  /* Il rientro della riga in fondo: fuori dalle schede ma allineata al
     testo che le sta dentro. Serve anche al disco, che deve tornare a
     cadere sulla corsia del bottone del menu. */
  --barpad: clamp(1.5em, 2.2vw, 2em);
  /* Un corpo solo per tutte le voci delle schede. Prima ogni scheda
     aveva il suo: il recapito a 1,32rem, i collegamenti a 1,15 perche
     .foot__link portava una misura sua, l'invito a 1,24. Tre corpi
     vicini ma diversi si leggono come un errore di stampa, non come una
     gerarchia. Restano fuori solo le etichette in maiuscoletto, che
     sono cartellini e non testo. */
  --voce: clamp(1.45rem, 2vw, 2.3rem);
  /* Le etichette e le note in fondo salgono con le voci ma restano un
     gradino sotto: sono cartellini, e un cartellino grande quanto la
     cosa che nomina rovescia la gerarchia. */
  --et: clamp(1rem, 1.28vw, 1.45rem);
  padding: var(--vano);
  gap: var(--vano);
}
.studio__grid {
  flex: 1;
  min-height: 0;
  display: grid;
  /* Quattro colonne: recapito, collegamenti, invito, legale. La terza
     resta la piu larga perche porta il titolo alto e il campo; la
     quarta e stretta, sono quattro voci corte. */
  /* Le larghezze non sono piu una proporzione scelta a occhio: le detta
     la stringa piu lunga di ogni scheda al corpo nuovo. La seconda porta
     l'indirizzo di posta, che e la piu lunga di tutte e non si puo
     spezzare; la quarta ha quattro voci corte. L'invito ha perso la
     mezza colonna di vuoto che aveva. */
  grid-template-columns: 1.2fr 1.32fr 1.24fr .96fr;
  gap: var(--vano);
  /* Le schede si tirano per tutta l'altezza della griglia: prima erano
     centrate e restavano alte quanto il loro contenuto, con il bianco
     tutto intorno. */
  align-content: stretch;
  padding-right: 0;
}
.studio__col { display: flex; flex-direction: column; align-items: flex-start; }
/* Quattro blocchi separati, la grammatica delle schede del menu: stesso
   raggio, ognuno con dentro una cosa sola. Sul bianco pero il rilievo
   non puo venire dal colore come sul buio - lo fanno un filo di contorno
   e un'ombra bassa, che staccano la scheda dal foglio come un oggetto
   posato su un tavolo. */
.foot--studio .blocco {
  justify-content: center;
  padding: clamp(1.6em, 2.4vw, 2.2em) clamp(1.5em, 2.2vw, 2em);
  border-radius: 1.7rem;
  border: 1px solid rgba(20, 21, 23, .09);
  box-shadow: 0 1px 2px rgba(20, 21, 23, .04), 0 10px 30px -14px rgba(20, 21, 23, .16);
  background: var(--white);
}
.studio__dove { font-style: normal; }
.studio__sede { line-height: 1.5; font-size: var(--voce); }
.studio__coord { padding-top: .7em; color: rgba(20, 21, 23, .5); font-size: var(--voce); }
.studio__list { gap: .12em; font-size: var(--voce); line-height: 1.5; }
.studio__blocco { padding-top: clamp(1.6em, 3.4vh, 2.6em); font-size: var(--voce); line-height: 1.5; }
.studio__et {
  color: rgba(20, 21, 23, .5);
  font-size: var(--et);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-bottom: .9em;
}

/* Il titolo e l'unica voce alta del piede: e l'invito. Nel riferimento
   misura 54 pixel su una finestra larga 1909, cioe 2,83vw. */
.studio__t {
  font-size: clamp(1.9rem, 2.85vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -.025em;
  font-weight: 400;
}
/* Vestito da campo ma e un collegamento: qui non si raccoglie niente,
   la raccolta la fa la newsletter dove porta. */
.studio__campo {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* La barra arriva corta e si distende: sta al 60% finche le voci della
     scheda si stanno battendo, e prende tutta la riga quando la scheda e
     finita. E l'ultimo gesto del piede, quindi anche quello che dice che
     il piede e arrivato. La larghezza si anima da sola perche e un
     elemento in fondo alla colonna: non ha niente sotto da spingere. */
  width: 60%;
  /* Il 60% e la misura d'arrivo, non un tetto: se le sessanta parti non
     bastano a contenere la voce e la freccia, la barra si allarga fino a
     contenerle e da li si distende. La misura minima la detta la riga
     sola: messa qui sul campo teneva dentro anche la riga che cresce
     sotto, e la barra usciva dalla scheda di quaranta pixel. */
  min-width: 0;
  margin-top: clamp(1.4em, 3vh, 2.2em);
  padding: 1.15em 1.3em 1.15em 1.5em;
  border-radius: 14px;
  background: #EFEFF3;
  color: var(--dark-2);
  transition: background .4s var(--e), width .62s var(--wave);
}
/* Senza script non c'e niente che dichiari finita la scheda: la barra
   parte gia distesa, che e lo stato buono. Lo stesso a moto ridotto. */
html.no-js .studio__campo { width: 100%; transition: none; }
.foot--studio.compiuto .studio__campo { width: 100%; }
.studio__campo:hover, .studio__campo:focus-visible { background: #E6E6ED; }
.studio__riga { display: flex; align-items: center; justify-content: space-between; gap: 1em; min-width: max-content; }
/* Non un grigio da segnaposto: qui dentro non si scrive niente, e una
   voce che si legge come tutte le altre della scheda. */
.studio__ph { color: var(--dark-2); font-size: var(--voce); }
/* La crescita in basso: una griglia di una riga sola che passa da zero
   a una frazione. E l'unico modo di animare un'altezza che non si
   conosce - un tetto in em sarebbe una misura scelta a occhio, e con due
   righe invece di una il tempo non tornerebbe. Parte quando la barra ha
   finito di distendersi, non insieme: sono due gesti, non uno. */
.studio__giu {
  display: grid;
  min-width: 0;
  grid-template-rows: 0fr;
  margin-top: 0;
  transition: grid-template-rows .5s var(--wave), margin-top .5s var(--wave);
}
.studio__giu > span { overflow: hidden; min-width: 0; }
.foot--studio.compiuto .studio__giu {
  grid-template-rows: 1fr;
  margin-top: .5em;
  transition-delay: .62s;
}
.studio__novita { display: block; font-size: var(--et); line-height: 1.35; color: rgba(20, 21, 23, .62); }
/* Il vano della freccia ritaglia: la freccia esce a destra e rientra da
   sinistra, e fuori dai bordi non si deve vedere il viaggio. */
.studio__go { width: 1.5em; height: 1.5em; flex: none; display: grid; place-items: center; overflow: hidden; }
.studio__go svg { width: 100%; height: 100%; }
/* Non uno spostamento che va e torna sui suoi passi: la freccia attraversa
   il vano, sparisce da un lato e ricompare dall'altro. Il gesto dice
   "si va di la", che e quello che fa il collegamento. */
@keyframes studio-freccia {
  0%   { transform: translateX(0); opacity: 1 }
  46%  { transform: translateX(160%); opacity: 0 }
  47%  { transform: translateX(-160%); opacity: 0 }
  100% { transform: translateX(0); opacity: 1 }
}
.studio__campo:hover .studio__go svg,
.studio__campo:focus-visible .studio__go svg { animation: studio-freccia .66s var(--wave); }
@media (prefers-reduced-motion: reduce) {
  .studio__campo { width: 100%; transition: none; }
  .studio__campo:hover .studio__go svg,
  .studio__campo:focus-visible .studio__go svg { animation: none; }
}

/* La riga in fondo non ha filo sopra: la separa soltanto lo spazio. */
.studio__bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap) clamp(2em, 4vw, 4.5em);
  flex-wrap: wrap;
  /* La riga in fondo e fuori dalle schede: le sta sotto allo stesso
     vano, con il rientro che ha una scheda cosi le note si allineano al
     testo che hanno sopra. */
  margin-top: 0;
  padding: clamp(.6em, 1.2vh, 1em) var(--barpad) clamp(.2em, .6vh, .5em);
}
/* In colonna, non in riga: sono quattro voci e stanno in una colonna
   stretta accanto all'invito. */
.studio__legali { display: flex; flex-direction: column; gap: .28em; font-size: var(--voce); }
/* Le note sono la firma della pagina: nel grigio delle etichette su
   fondo bianco quasi sparivano. */
.studio__note { display: flex; flex-direction: column; gap: .2em; text-align: right; margin-left: auto; }
.studio__note p { font-size: var(--et); color: rgba(20, 21, 23, .74); }
/* Dentro le note, o .studio__note p vince: un elemento piu il tipo pesa
   piu di una classe sola. */
.studio__note .studio__tag {
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: calc(var(--et) * .84);
  color: rgba(20, 21, 23, .58);
}
/* Il collegamento prende il corpo della scheda che lo contiene, invece
   di imporre il suo: e quello che lo faceva uscire piu piccolo del testo
   che gli sta accanto. */
.foot--studio .foot__link { color: var(--dark-2); font-size: inherit; }
/* Il filo sotto la voce qui non serve: il gesto lo fa il riempimento
   delle lettere, e i due insieme direbbero la stessa cosa. */
.foot--studio .foot__link::after { display: none; }
.foot--studio .foot__esito { color: rgba(20, 21, 23, .5); font-size: var(--et); padding-top: .8em; }

/* ------------------------------------------- lettere del piede
   Lo stesso passaggio delle voci del menu: sotto la lettera il
   riempimento iridescente ritagliato sulla sua forma, sopra una copia
   che al passaggio del puntatore viene mangiata dal basso, una lettera
   dopo l'altra. La copia deve stare a parte perche il riempimento sotto
   e gia impegnato.

   Qui l'onda sta ferma: nel menu si muove e ogni lettera rifa cinque
   strati di gradiente a ogni fotogramma. Nel piede le lettere sono un
   centinaio e restano sempre in pagina - per un dettaglio che nessuno
   guarda finche non ci passa sopra.

   La copia sopra e scura e non bianca: qui il fondo e il bianco. */
.foot--studio .soc-ch {
  position: relative;
  display: inline-block;
  background-image: var(--iride);
  background-size: var(--iride-size);
  background-position: var(--iride-pos);
  background-blend-mode: var(--iride-blend);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.foot--studio .soc-ch::after {
  content: attr(data-c);
  position: absolute;
  left: 0;
  top: 0;
  white-space: pre;
  color: var(--dark-2);
  -webkit-text-fill-color: var(--dark-2);
  clip-path: inset(0 0 0 0);
  transition: clip-path .55s var(--e);
}
.foot--studio a:hover .soc-ch::after,
.foot--studio a:focus-visible .soc-ch::after,
.foot--studio button:hover .soc-ch::after,
.foot--studio button:focus-visible .soc-ch::after {
  clip-path: inset(0 0 100% 0);
  transition-delay: var(--hd, 0s);
}

/* Il ritorno in cima e lo stesso oggetto del bottone del menu: stesso
   diametro, stessa ombra scavata, stesso riempimento iridescente che
   sale al passaggio, stessa calamita. Il riquadro esterno tiene il posto
   e non si muove; il disco dentro insegue il puntatore, altrimenti si
   porterebbe dietro l'area sensibile e scapperebbe dal cursore.

   Il margine negativo lo porta sulla stessa corsia verticale del bottone
   del menu: quello sta a rail meno mezzo diametro dal bordo, la riga del
   piede rientra invece di --pad, e la differenza e questa. */
.pcasa {
  flex: none;
  width: var(--bar-h);
  height: var(--bar-h);
  margin-right: calc(var(--rail) - var(--bar-h) / 2 - var(--pad));
}
/* Nel piede della casa a destra del disco non c'e piu il rientro di
   pagina ma il vano piu il rientro della riga: la compensazione va
   scritta su quelle due, o il disco esce dalla schermata. */
.foot--studio .pcasa { margin-right: calc(var(--rail) - var(--bar-h) / 2 - var(--vano) - var(--barpad)); }
.pcasa__hit {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--dark);
  overflow: hidden;
  color: var(--white);
  will-change: transform;
  box-shadow: var(--carve-deep);
  transition: box-shadow var(--t-smooth);
}
.pcasa__hit:hover, .pcasa__hit:focus-visible { box-shadow: var(--carve-soft); }
.pcasa__fill {
  position: absolute;
  inset: 0;
  place-self: stretch;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: translateY(101%);
  transition: transform .52s var(--wave-via);
}
.pcasa__hit:hover .pcasa__fill,
.pcasa__hit:focus-visible .pcasa__fill { transform: translateY(0); transition: transform .68s var(--wave); }
.pcasa__ico { position: relative; display: grid; place-items: center; width: 40%; height: 40%; }
.pcasa__ico svg { width: 100%; height: 100%; }


@media (max-width: 1200px) {
  .studio__grid { grid-template-columns: 1fr 1fr 1fr; padding-right: 0; }
  .studio__news { grid-column: 1 / -1; }
  .studio__campo { max-width: 34em; }
}
@media (max-width: 1000px) {
  .studio__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .studio__grid { grid-template-columns: 1fr; }
  .studio__bar { align-items: flex-start; }
  .studio__note { margin-left: 0; text-align: left; }
}

/* Su schermo stretto il piede non sta in una schermata, e alto quanto la
   finestra con l'eccedenza tagliata ne perderebbe la coda. Li lo
   scavalcamento si spegne e commiato e piede tornano due sezioni che
   scorrono. Vale solo per questo piede, l'unico rifatto. */
/* Su schermo stretto nessun piede sta in una finestra: quello scuro,
   forzato a 100svh e ritagliato, lasciava fuori la riga del copyright e
   il bottone per risalire. Tutti i piedi scorrono come una sezione. */
@media (max-width: 760px) {
  .finale { height: auto; }
  .perno { position: static; height: auto; overflow: visible; }
  .perno--piede { margin-top: 0; }
  .commiato,
  .perno > .foot {
    height: auto;
    min-height: 100svh;
    transform: none;
    border-radius: 0;
    box-shadow: none;
  }
  .perno > .foot .foot__grid, .perno > .foot .foot__bar,
  .perno > .foot .studio__grid, .perno > .foot .studio__bar { transform: none; }
  .commiato,
  .perno > .foot,
  .perno > .foot .foot__grid, .perno > .foot .foot__bar,
  .perno > .foot .studio__grid, .perno > .foot .studio__bar { animation: none !important; }
  /* Qui il piede scorre come una sezione qualunque: lo scaglionamento
     legato alla corsa non ha piu una corsa a cui legarsi. */
  .perno > .foot--studio .blocco { animation: none !important; opacity: 1; transform: none; }
}

.foot__glow {
  position: absolute;
  left: 50%;
  bottom: -34vw;
  width: 76vw; height: 68vw;
  margin-left: -38vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(69, 92, 233, .34) 0%, rgba(69, 92, 233, 0) 68%);
  pointer-events: none;
}

@media (max-width: 1100px) {
  .foot__grid { grid-template-columns: 1fr 1fr; row-gap: clamp(2.6em, 6vh, 4em); }
  .foot__col--ovunque { grid-column: 1 / -1; }
}
/* Sotto i 700px la corsia laterale lascerebbe schede da poco piu di
   duecento pixel: li il cerchio torna sopra la pila, non di fianco. */
@media (max-width: 700px) {
  .nav-full {
    padding: calc(var(--bar-top) + var(--bar-h) + .7rem) var(--gap) var(--gap);
  }
  /* La pila e piu corta della schermata: invece di gonfiare la scheda
     delle voci fino a lasciarla mezza vuota, si centra tutto il gruppo. */
  .nav-full { justify-content: center; }
  .nav-card { padding: 1.4rem 1.5rem; }
  .nav-card--voci { flex: none; padding: 1.4rem 1.5rem; }
  .nav-card--soc { padding: 0; }
  .marchio { height: 4.2rem; }
}
@media (max-width: 640px) {
  .foot { min-height: 0; }
  .foot__grid { grid-template-columns: 1fr; }
  .foot__bar { flex-direction: column; align-items: flex-start; }
}

/* ============================================================ SCHERMI */
@media (max-width: 1100px) {
  .figures__grid, .cards, .gallery { grid-template-columns: repeat(2, 1fr); }
  .intro__side { flex: 1 1 100%; align-self: auto; }
}
@media (max-width: 860px) {
  .hero__links a:not(.is-menu) { display: none; }
  .hero__links .is-menu { display: block; }
  .menu-btn { width: var(--bar-h); height: var(--bar-h); }
  .hero__mark, .hero__links { font-size: 1.3rem; }
  .slats { flex-direction: column; height: auto; min-height: 0; }
  .slat { flex: none; min-height: 6.5em; justify-content: center; }
  .slats--full { height: 100%; }
  .slats--full .slat { flex: 1 1 0; min-height: 0; }
  .slats--full .slat:first-child { padding-top: clamp(4.5em, 10vh, 6em); }
  .slat__title { writing-mode: horizontal-tb; transform: none; align-self: auto; white-space: normal; }
  .slat__meta { max-height: 4em; opacity: 1; }
  /* il pannello parte sotto il testo, non gli finisce sopra */
  /* schermo stretto: lei prende tutta la larghezza, il testo le sta sopra */
  .hero__mid {
    top: calc(var(--bar-top) + var(--bar-h) + 1em);
    transform: none;
  }
  .hanger {
    left: auto; right: 0;
    top: auto; bottom: clamp(9.5em, 21vh, 14em);
    font-size: .85rem;
    border-radius: 3.4em 0 0 3.4em;
    padding: 1em clamp(1.2em, 5vw, 2em) 1em 1.6em;
  }
  .nav-full { width: 100vw; padding-left: var(--gap); }
  /* qui il padding sinistro e gia var(--gap): la compensazione va rifatta */
}
@media (max-width: 620px) {
  html { font-size: 15px; }
  :root { --bar-h: 4.2rem; }
  .hero__mark, .hero__links { font-size: 1.1rem; }
  .figures__grid, .cards, .gallery { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------- meno moto */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .word > span, .lift > * { transform: none !important; }
  .hero__spot { display: none; }
  .fade, .rise, .entry,
  .menu-btn, .hero__back, .hanger { opacity: 1 !important; }
  html.is-open .hanger, html.is-open .hanger__txt { animation: none; }
  .hanger__txt { opacity: 1 !important; }
  .fade, .rise, .entry, .menu-btn { transform: none !important; }
}

/* ============================================== SCHERMATA DELLA POSTA
   Stessa costruzione della pagina d'errore, che e la stessa della
   testata di casa: un quadro alto quanto la finestra, il campo di colore
   piatto, la figura ritagliata sulla propria sagoma che poggia sul bordo
   basso, una velatura sola sopra tutto, il nastro che scorre in fondo e
   il disco nell'angolo.

   Il campo e il grigio della testata, non un fondo calcolato: un'onda a
   tutto schermo e un ciclo di rumore frazionario per pixel a ogni
   fotogramma, e su una macchina qualunque si vedeva andare a scatti. Il
   colore piatto non costa niente ed e quello che il sito usa gia.

   Fotografia e maschera devono essere calzate allo stesso modo - stessa
   misura, stessa posizione - o lungo il contorno si vedrebbe lo
   sfasamento: sono le stesse variabili della testata. */
.posta {
  position: fixed;
  inset: 0;
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--wave), visibility .5s;
}
html.posta-open .posta { opacity: 1; visibility: visible; }
.posta__quadro {
  position: relative;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  background: var(--grigio);
}

/* Sporge del 6% in alto e non in basso: la figura e ritagliata e poggia
   sul bordo basso, quindi sotto non serve margine. */
.posta__figura {
  position: absolute;
  z-index: 2;
  inset: -6% 0 0;
  height: 106%;
  background-image: var(--scena);
  background-size: var(--scena-size);
  background-position: var(--scena-pos);
  background-repeat: no-repeat;
  -webkit-mask-image: url('../img/hero-mask.svg');
  mask-image: url('../img/hero-mask.svg');
  -webkit-mask-size: auto var(--foto-h);
  mask-size: auto var(--foto-h);
  -webkit-mask-position: var(--scena-pos);
  mask-position: var(--scena-pos);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* Entra da appena piu grande, e mentre si posa il puntatore comincia a
     spostarla: le due cose stanno nella stessa trasformazione, quindi la
     seconda non fa ripartire la prima. */
  transform: scale(calc(1.04 + var(--entra, 1) * .05)) translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -10px), 0);
  transition: transform 1.1s var(--wave);
  will-change: transform;
  backface-visibility: hidden;
}
html.posta-open .posta__figura { --entra: 0; }

/* Due velature in una. Quella verticale e la stessa della pagina
   d'errore: scura in basso dove passa il nastro, quasi trasparente a
   meta altezza. Quella orizzontale li non c'e, perche li ai due lati non
   c'e niente da leggere; qui ci stanno i fornitori a sinistra e la riga
   a destra, e sopra la spalla chiara non si leggerebbero. */
.posta__velo {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 7, 10, .8) 0%, rgba(6, 7, 10, .46) 24%, rgba(6, 7, 10, 0) 44%, rgba(6, 7, 10, 0) 56%, rgba(6, 7, 10, .46) 76%, rgba(6, 7, 10, .8) 100%),
    linear-gradient(180deg, rgba(20, 21, 23, .5) 0%, rgba(20, 21, 23, .1) 18%, rgba(20, 21, 23, 0) 42%, rgba(20, 21, 23, .24) 74%, rgba(20, 21, 23, .9) 100%);
}

/* Le due colonne stanno nei due margini che la figura lascia scoperti: i
   fornitori a sinistra, la riga e i due tasti a destra. Un po' sopra la
   meta, perche sotto passa il nastro. */
.posta__scelte,
.posta__parola {
  position: absolute;
  z-index: 4;
  width: min(28rem, 40vw);
}
/* In quota col disco di chiusura: i due oggetti che si comandano stanno
   sulla stessa riga alta, uno per angolo. */
.posta__scelte { left: var(--rail); top: var(--bar-top); }
.posta__parola { top: 46%; transform: translateY(-50%); }
.posta__parola { right: var(--rail); text-align: right; }

/* L'apertura non e uno stacco: il quadro sfuma, e dentro le voci salgono
   una dopo l'altra. I ritardi stanno solo sullo stato aperto, cosi
   chiudendo se ne vanno tutte insieme invece di sfilare all'indietro. */
.posta__et,
.posta__sotto,
.posta__parola > *,
.posta__nastro {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s var(--wave), transform .7s var(--wave);
}
html.posta-open .posta__et,
html.posta-open .posta__sotto,
html.posta-open .posta__parola > *,
html.posta-open .posta__nastro { opacity: 1; transform: none; }
html.posta-open .posta__et { transition-delay: .08s; }
html.posta-open .posta__filo { transition-delay: .46s; }
html.posta-open .posta__p { transition-delay: .52s; }
html.posta-open .posta__tasti { transition-delay: .58s; }
html.posta-open .posta__sotto { transition-delay: .58s; }
html.posta-open .posta__nastro { transition-delay: .64s; }

.posta__et {
  font-size: clamp(.72rem, .9vw, .86rem);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .56);
  padding-bottom: 1.4em;
}
.posta__forni { display: flex; flex-direction: column; align-items: flex-start; list-style: none; margin: 0; padding: 0; }
.posta__forn {
  position: relative;
  display: inline-block;
  width: max-content;
  max-width: 100%;
  padding: .02em 0;
  /* Il corpo dei titoli, non quello di una lista: sono quattro parole e
     sono la ragione per cui la schermata esiste. */
  font-size: clamp(2.4rem, 5.4vw, 6rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--white);
}
.posta__ink { display: inline-block; }
/* Le lettere sono quelle del menu e del sipario, .nav-ch: a riposo stanno
   sotto la loro finestra e all'apertura salgono, ognuna col ritardo del
   suo posto. Qui basta dire quando e aperta - il resto lo porta gia il
   foglio, comprese la pelle iridescente sotto la lettera e la copia
   bianca sopra che al passaggio del puntatore viene mangiata dal basso.

   L'onda del riempimento resta ferma: nel menu si muove e ogni lettera
   rifa cinque strati di gradiente a ogni fotogramma, qui le lettere sono
   venticinque e il puntatore ci passa sopra un istante. */
html.posta-open .posta__forn .nav-ch > i {
  transform: translateY(0);
  transition: transform 1.1s var(--wave);
  transition-delay: var(--wd, 0s);
  /* L'onda gira, come nel menu: il colore sotto la lettera cambia mentre
     ci si passa sopra invece di essere una stampa ferma. Parte dopo che
     le lettere sono salite - in salita ogni lettera e una stampa sola che
     il compositore trasla, in moto ognuna rifa cinque strati di gradiente
     ritagliati sulla forma del carattere a ogni fotogramma, e qui sono
     venticinque lettere, non un centinaio. */
  animation: iride 14s linear infinite;
  animation-delay: 1.2s;
}
.posta__forn:hover .nav-ch > i::after,
.posta__forn:focus-visible .nav-ch > i::after {
  clip-path: inset(0 0 100% 0);
  transition-delay: var(--hd, 0s);
}

.posta__filo { height: 1px; background: rgba(255, 255, 255, .28); margin: 0 0 clamp(1.1rem, 2.6vh, 1.7rem); }
.posta__p { font-size: clamp(.92rem, 1vw, 1.08rem); line-height: 1.55; color: rgba(255, 255, 255, .78); margin-left: auto; max-width: 32ch; }

.posta__tasti { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; padding-top: clamp(1.1rem, 2.6vh, 1.8rem); }
/* Il quinto modo di scrivere, in fondo ai quattro: stesso margine
   sinistro delle voci, staccato quanto basta a non leggersi come la
   quinta riga dell'elenco. */
.posta__sotto { padding-top: clamp(1.4rem, 3.4vh, 2.4rem); }
/* I due tasti sono lo stesso oggetto del bottone del menu: fondo scuro,
   ombra scavata che si alza al passaggio, e sotto la scritta il
   riempimento iridescente che sale dal basso. Non un contorno chiaro e un
   fondo bianco, che erano due materiali nuovi in una schermata che ne ha
   gia uno. */
.posta__tasto {
  position: relative;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  padding: 1.05em 1.9em;
  border-radius: 100px;
  border: 0;
  background: var(--dark);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
  cursor: pointer;
  box-shadow: var(--carve-deep);
  transition: box-shadow var(--t-smooth);
}
.posta__tasto:hover, .posta__tasto:focus-visible { box-shadow: var(--carve-soft); }
/* Il riempimento e anche lui un figlio della griglia: senza una misura
   esplicita il centraggio lo accartoccia e non si vedrebbe mai. */
.posta__tasto-fill {
  position: absolute;
  inset: 0;
  place-self: stretch;
  width: 100%;
  height: 100%;
  border-radius: 100px;
  transform: translateY(101%);
  transition: transform .52s var(--wave-via);
}
.posta__tasto:hover .posta__tasto-fill,
.posta__tasto:focus-visible .posta__tasto-fill { transform: translateY(0); transition: transform .68s var(--wave); }
/* Il segnale che ha copiato e la parola, non un colore: sul riempimento
   iridescente alzato un turchese non si leggeva. */
.posta__tasto-t { position: relative; white-space: nowrap; }

/* Il nastro: tre copie affiancate e uno scorrimento di un terzo, cosi a
   fine giro l'immagine e identica a quella di partenza e la giuntura non
   si vede. Stessa misura del nome che scorre sulla casa. */
.posta__nastro {
  position: absolute;
  z-index: 4;
  left: 0; right: 0;
  bottom: clamp(.4em, 1.6vh, 1.1em);
  overflow: hidden;
  white-space: nowrap;
}
.posta__pista {
  display: flex;
  width: max-content;
  font-size: clamp(3.4rem, 11.6vw, 12rem);
  padding-bottom: .19em;
  animation: posta-scorre 45s linear infinite;
}
.posta__pista > span { display: inline-flex; align-items: center; }
.posta__pista span span, .posta__pista i {
  font-size: 1em;
  font-weight: 400;
  font-style: normal;
  line-height: .95;
  letter-spacing: -.02em;
}
/* Il trattino porta la pelle iridescente ritagliata sul glifo, non un
   grigio smorzato: e lo stesso della casa e della pagina d'errore. */
.posta__pista i {
  display: inline-block;
  padding: 0 .28em;
  background-image: var(--iride);
  background-size: var(--iride-size);
  background-position: var(--iride-pos);
  background-blend-mode: var(--iride-blend);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: iride 14s linear infinite;
}
@keyframes posta-scorre { to { transform: translate3d(-33.3333%, 0, 0); } }

/* Il disco di chiusura e lo stesso oggetto del bottone del menu: stesso
   diametro, stessa corsia, stessa ombra scavata, stesso riempimento
   iridescente che sale al passaggio. */
.posta__chiudi {
  position: absolute;
  z-index: 5;
  top: var(--bar-top);
  right: calc(var(--rail) - var(--bar-h) / 2);
  width: var(--bar-h);
  height: var(--bar-h);
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--dark);
  color: var(--white);
  box-shadow: var(--carve-deep);
  transition: box-shadow var(--t-smooth);
}
.posta__chiudi:hover, .posta__chiudi:focus-visible { box-shadow: var(--carve-soft); }
.posta__chiudi-fill {
  position: absolute;
  inset: 0;
  place-self: stretch;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: translateY(101%);
  transition: transform .52s var(--wave-via);
}
.posta__chiudi:hover .posta__chiudi-fill,
.posta__chiudi:focus-visible .posta__chiudi-fill { transform: translateY(0); transition: transform .68s var(--wave); }
.posta__chiudi-ico { position: relative; font-size: 1.3rem; line-height: 1; }

/* Su finestre strette la figura, alta il 96%, e piu larga dello schermo e
   si porta via tutti e due i margini: rimpicciolita lascia il posto alle
   due colonne, che tornano una sopra l'altra. E la stessa correzione che
   fa la pagina d'errore. */
@media (max-width: 1024px) {
  .posta__figura {
    background-size: auto 56%;
    -webkit-mask-size: auto 56%;
    mask-size: auto 56%;
  }
  .posta__velo {
    background: linear-gradient(180deg, rgba(6, 7, 10, .74) 0%, rgba(6, 7, 10, .5) 42%, rgba(6, 7, 10, .3) 64%, rgba(20, 21, 23, .92) 100%);
  }
  .posta__scelte,
  .posta__parola {
    left: clamp(1.2rem, 5vw, 3rem);
    right: clamp(1.2rem, 5vw, 3rem);
    width: auto;
    transform: none;
  }
  .posta__scelte { top: calc(var(--bar-top) + var(--bar-h) * .9); }
  .posta__parola { top: auto; bottom: clamp(7rem, 20vh, 11rem); text-align: left; }
  .posta__p { margin-left: 0; }
  .posta__tasti { justify-content: flex-start; }
  .posta__forn { font-size: clamp(2rem, 8.4vw, 3.4rem); }
}
@media (prefers-reduced-motion: reduce) {
  .posta { transition: none; }
  .posta__pista { animation: none; }
  .posta__figura { transform: none; transition: none; }
  .posta__et,
  .posta__sotto,
  .posta__parola > *,
  .posta__nastro { opacity: 1; transform: none; transition: none; }
  .posta__forn .nav-ch > i { transform: none; transition: none; animation: none; }
}
/* La schermata prende il fuoco all'apertura per portarci dentro anche chi
   naviga da tastiera: e un contenitore, non un comando, quindi l'anello
   non serve. Quello delle voci resta. */
.posta:focus { outline: none; }

/* ================================================ RIQUADRO DELLA FRASE
   La frase della casa sta dentro un riquadro: filo sottile, trama a
   pallini sotto, e agli angoli quattro squadrette che sporgono di mezza
   misura. Sono i segni di taglio di una prova di stampa - dicono che
   quel blocco e una citazione a se, non l'inizio di un discorso che
   continua sotto.

   La trama e un gradiente radiale ripetuto, non un'immagine: un pallino
   di mezzo pixel ogni cinque, che a distanza di lettura non si vede come
   punteggiatura ma come una carta appena ruvida. */
.riquadro { position: relative; }
.riquadro::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--border);
  pointer-events: none;
}
.riquadro__trama {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: rgba(20, 21, 23, .34);
  background-image: radial-gradient(currentColor .5px, transparent .5px);
  background-size: 5px 5px;
}
/* Sporgono di meta della loro misura, quindi il filo le taglia in croce:
   e cosi che un segno di taglio si legge come un angolo e non come un
   quadratino appoggiato li. */
.riquadro__ang {
  position: absolute;
  width: 11px;
  height: 11px;
  background: var(--dark-2);
}
.riquadro__ang--as { left: -5.5px; top: -5.5px; }
.riquadro__ang--ad { right: -5.5px; top: -5.5px; }
.riquadro__ang--bs { left: -5.5px; bottom: -5.5px; }
.riquadro__ang--bd { right: -5.5px; bottom: -5.5px; }
.riquadro__in { position: relative; z-index: 1; padding: clamp(1.1em, 1.7vw, 1.9em); }
.riquadro__et {
  font-size: 13px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--gray);
  padding-bottom: 1.1em;
}

/* -------------------------------------------------- la battitura
   Non si scrive lettera per lettera: il testo sta tutto in pagina fin
   dall'inizio, impaginato una volta sola, e sopra ci passa un ritaglio
   che scopre da sinistra a destra riga dopo riga. Tre conseguenze, e
   sono tutte e tre il motivo:

   - il taglio cade in mezzo al segno, quindi la "d" si vede a meta prima
     di vedersi intera: e questo che si riconosce come scrittura, non
     l'apparire di una lettera gia fatta;
   - la giustificazione e calcolata una volta, sul testo intero, quindi
     le spaziature non ballano a ogni lettera nuova;
   - niente altezza da bloccare: sotto non si sposta niente.

   Il ritaglio e una scala: le righe gia passate intere, e quella in
   corso fino al taglio. E una figura sola e chiusa, quindi un poligono
   basta - non servono maschere ne elementi per riga. */
.batti { position: relative; }
.batti > .presenta__claim,
.batti > .presenta__nota { will-change: clip-path; }
/* Il lampeggio era finto: steps(1) con alternate tiene il valore di
   partenza per tutto il ciclo e non arriva mai a zero - misurato, opacita
   1 in ventisei letture di fila. Serve un fermo esplicito a meta corsa.

   E si ferma dopo quattro secondi e mezzo, non prima: la frase lunga ci
   mette cinque secondi e mezzo a scriversi, e una cosa che lampeggia da
   sola per piu di cinque secondi va contro il criterio 2.2.2. Finite le
   cinque battute il cursore resta acceso e fermo fino alla fine. */
@keyframes cb-cursore {
  0%, 49.9% { opacity: 1 }
  50%, 99.9% { opacity: 0 }
  100% { opacity: 1 }
}
.batti__cursore {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 0;
  background: var(--blue);
  opacity: 0;
  pointer-events: none;
}
.batti.sta-battendo .batti__cursore {
  opacity: 1;
  animation: cb-cursore .9s linear 5;
}
@media (prefers-reduced-motion: reduce) {
  .batti__cursore { display: none; }
}

/* ============================================================ CAPITOLI
   La rivista si legge a capitoli: numerale, titolo, riga e filo restano
   appuntati a sinistra, il corpo scorre a destra. Il filo si riempie con
   l'orologio dello scorrimento, lo stesso della serranda e del piede: a
   riposo e pieno, che e il suo stato finale.

   I capitoli si alternano bianco e avorio. Non e decorazione: con sei
   corpi uno sotto l'altro, senza un cambio di fondo il lettore perde il
   conto di dove finisce uno e comincia l'altro. */
.capitolo { background: var(--white); }
.capitolo--alt { background: var(--lightgray); }
.capitolo__in { display: grid; gap: clamp(2em, 5vh, 3.4em) var(--gap); }
.capitolo__n { display: flex; gap: .45em; color: var(--dark); padding-bottom: 1.2em; font-variant-numeric: tabular-nums; }
.capitolo__di { color: var(--gray); }
.capitolo__t { max-width: 14ch; text-wrap: balance; }
.capitolo__intro { max-width: 30ch; color: var(--dark); text-wrap: pretty; padding-top: 1.2em; }
.capitolo__filo { display: none; }
.capitolo__vai { display: grid; place-items: center; padding-top: clamp(2.4em, 5vh, 4em); }
/* Due colonne e non tre: qui le schede portano un corpo di testo vero,
   e su tre colonne a fianco della testatina non ci starebbe. */
.cards--capitolo { grid-template-columns: repeat(2, 1fr); row-gap: clamp(2.6em, 5vw, 4.4em); }
.righe { list-style: none; margin: 0; padding: 0; }
@media (min-width: 1000px) {
  .capitolo__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .capitolo__testa { align-self: stretch; }
  /* il perno e appuntato, quindi e anche il riquadro di riferimento del filo */
  .capitolo__perno { position: sticky; top: var(--corsia); padding-left: clamp(1.4em, 2vw, 2.2em); }
  .capitolo__filo { display: block; position: absolute; left: 0; top: .2em; width: 1px; height: min(38vh, 16rem); background: var(--border); }
  .capitolo__filo b { position: absolute; inset: 0; background: var(--tinta, var(--dark)); transform: scaleY(1); transform-origin: top; }
}
@supports (animation-timeline: view()) {
  @media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
    .capitolo { view-timeline-name: --capitolo; view-timeline-axis: block; }
    .capitolo__filo b { will-change: transform; animation: cap-filo linear both; animation-duration: 1ms;
      animation-timeline: --capitolo; animation-range: cover 15% cover 75%; }
    @keyframes cap-filo { from { transform: scaleY(0) } to { transform: scaleY(1) } }
  }
}
@media (max-width: 1000px) { .capitolo__intro { max-width: 40ch; } }
@media (max-width: 620px) { .cards--capitolo { grid-template-columns: 1fr; } }

/* ================================================================ SCHEDE
   Un ritaglio: filetto in alto, meta, titolo, corpo. Risponde alla mano
   solo se porta da qualche parte: il filetto si colora nella tinta della
   pagina, la freccia avanza, la scheda si inclina verso il puntatore. */
.scheda { position: relative; display: block; padding-top: 1.3em; color: inherit; text-decoration: none; }
.scheda::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--border); }
.scheda__t { font-size: 1.5rem; padding-bottom: .4em; text-wrap: balance; }
.scheda__b { color: var(--gray); max-width: 34ch; }
.scheda--via::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--tinta, var(--dark));
  transform: scaleX(0); transform-origin: right center; transition: transform var(--esce); }
html.fine .scheda--via:hover::after, .scheda--via:focus-visible::after { transform: scaleX(1); transform-origin: left center; transition: transform var(--entra); }
.scheda--via:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }
.scheda__vai { display: inline-flex; align-items: center; gap: .6em; padding-top: 1.1em; font-size: .85rem; color: var(--dark); }
/* righe: numero a sinistra, titolo e corpo a destra; da 1200 in tre colonne */
.scheda--riga { padding: clamp(1.2em, 2.2vw, 1.8em) 0; }
.righe > li:last-child .scheda--riga { border-bottom: 1px solid var(--border); }
.scheda--riga .scheda__in { display: grid; grid-template-columns: 3.6em minmax(0, 1fr); column-gap: var(--gap); }
.scheda--riga .card__meta { grid-row: 1 / span 3; padding: .35em 0 0; }
.scheda--riga .scheda__b { max-width: 46ch; }
@media (min-width: 1200px) {
  .scheda--riga .scheda__in { grid-template-columns: 3.6em minmax(0, .9fr) minmax(0, 1.1fr); }
  .scheda--riga .scheda__t { grid-column: 2; padding: 0; }
  .scheda--riga .scheda__b, .scheda--riga .scheda__vai { grid-column: 3; }
  .scheda--riga .scheda__b { grid-row: 1; }
}
.scheda--prosa .scheda__b { max-width: 46em; color: var(--dark); }
/* senza puntatore il filetto in tinta segna comunque il collegamento */
@media (hover: none) { .scheda--via::after { transform: scaleX(1); transform-origin: left center; } }
@media (max-width: 620px) { .scheda--riga .scheda__in { grid-template-columns: 1fr; } .scheda--riga .card__meta { grid-row: auto; } }