/* ==========================================================================
   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. Fa eccezione dichiarata il piede
     (border-radius), che viene 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; }
/* solo per il dorso del libro 3D, come e stampato sul libro vero */
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-700-latin.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Archivo Black'; src: url('../fonts/archivo-black-400-latin.woff2') format('woff2'); font-weight: 400; 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;
  /* gli angoli dei due estremi della barra: il menu e la linguetta del luogo */
  --bar-r: .8rem;
  --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; }
.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); }

/* 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 {
  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;
}

/* 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;
}
/* la pelle a scaglie: una tela sotto il contenuto. Sul trattino copre solo
   la barra che il ritaglio lascia vedere, sul cursore resta grande quanto
   il cursore piu grande, cosi crescere non la fa ridisegnare da capo */
.strati > .tela-scaglie { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; pointer-events: none; }
.hero__name .h1 .sep.strati > .tela-scaglie { inset: auto; left: .34em; top: .528em; width: calc(100% - .68em); height: .08em; }
.cursor.strati > .tela-scaglie { inset: auto; left: 50%; top: 50%; width: 90px; height: 90px; transform: translate(-50%, -50%); }
/* 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__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;
}

/* L'uscita del sipario, a colonne, non ha regole qui: le colonne sono
   copie del telo che site.js ritaglia con clip-path e fa salire. */
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;
  /* 22 px: a 12 l'aurora dentro il disco era un punto di colore e basta */
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  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; }
/* Con il disco acceso la freccia di sistema sparisce ovunque, anche sopra
   bottoni, campi e libro: il puntatore e solo il disco. La classe la mette
   il JS, cosi senza script o con meno moto la freccia resta. */
html.cursore-proprio,
html.cursore-proprio * { cursor: none !important; }
.cursor.is-big { width: 78px; height: 78px; margin: -39px 0 0 -39px; }
/* 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: 86px; height: 86px; margin: -43px 0 0 -43px; }
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; }
/* sopra la rivista il disco sfoglia: grande quanto la sua tela (90 px) e
   con la parola ferma al centro */
.cursor.is-sfoglia { width: 90px; height: 90px; margin: -45px 0 0 -45px; }
.cursor__label.stretta { font-size: .64rem; font-weight: 500; letter-spacing: .12em; white-space: nowrap; text-shadow: 0 1px 6px rgba(6, 8, 12, .45); }

/* ==================================================== BOTTONE HAMBURGER
   Un rettangolo dagli angoli appena smussati, non piu un disco: alto
   quanto la pillola del luogo, che gli sta di fronte sull'altro lato, e
   largo una volta e mezza. Il bordo destro resta dove finiva il disco:
   centrato sulla rotaia, cosi largo, sarebbe uscito dallo schermo. */
.menu-btn {
  --menu-h: var(--bar-h);
  --menu-w: calc(var(--bar-h) * 1.45);
  position: fixed;
  top: calc(var(--bar-top) + (var(--bar-h) - var(--menu-h)) / 2);
  right: calc(var(--rail) - var(--bar-h) / 2);
  z-index: 120;
  width: var(--menu-w);
  height: var(--menu-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: var(--bar-r);
  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: inherit;
  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: 38px;
  height: 20px;
}
.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: 9px; }
.menu-btn__bars > i:nth-child(3) { top: 18px; }
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(9px) 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(-9px) 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: l'invito a scorrere, sempre
   (sul telefono finche non ci si muove: li starebbe sopra il testo).
   Le tappe della pagina non si vedono piu: restano nel documento perche
   danno il nome alla linguetta e all'indirizzo. 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%) } }
.filo__tappe {
  list-style: none; margin: 0; padding: 0;
  display: none; 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__riga { display: block; }
  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; }
}
@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. Non e piu nero: sotto il menu resta
   Camilla, la stessa figura della testata e allo stesso posto, spenta da
   un velo piu scuro a sinistra, dove cadono i titoli dell'anteprima. */
/* Il fondo del menu entra e se ne va in dissolvenza, tutto insieme:
   grigio, figura e velo. Prima la figura era piena dal primo fotogramma e
   scivolava dal posto della testata: fuori dalla testata compariva di
   colpo sopra la pagina e, chiudendo, restava piena mentre il grigio se ne
   andava, poi spariva d'un tratto. Ora fuori dalla testata la figura sta
   gia al suo posto col menu aperto e la pagina sfuma in lei.
   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. */
/* L'inquadratura di Camilla col menu aperto: la stessa della fermata di
   Chi sono, ingrandita del 16%, con la testa intera e un filo d'aria
   sopra e la collana intera sopra il bordo basso. Vale per la figura della
   testata e per la sua copia: stesse misure.
   Lo spostamento di lato (--menu-x) lo misura il JS aprendo: nel varco
   fra l'anteprima e le schede quando il viso ci sta, altrimenti tutta
   dietro le schede. Il 16vw resta per quando l'anteprima non c'e. */
:root { --menu-zoom: 1.16; --menu-su: 1.2vh; }
.nav-back {
  --chiude: .9s cubic-bezier(.65, 0, .35, 1);
  position: fixed;
  inset: 0;
  z-index: 108;
  background-color: var(--grigio);
  opacity: 0;
  visibility: hidden;
  /* chiudendo, una curva morbida all'inizio e alla fine: con una lenta in
     partenza e di corsa in arrivo il velo restava scuro quasi fino in
     fondo e la pagina ricompariva di colpo */
  transition: opacity var(--chiude), visibility 0s linear .9s;
}
html.nav-open .nav-back {
  opacity: 1;
  visibility: visible;
  transition: opacity .95s var(--wave), visibility 0s;
}
/* Due modi, e il JS sceglie aprendo.
   In cima alla casa (menu-su-testata) a scivolare e la figura della
   testata stessa: il fondo del menu resta trasparente, la copia non si
   mostra, e il nome che le passa davanti resta davanti e sfuma piano,
   senza mai sparire di colpo dietro una figura che gli arriva sopra.
   Altrove, o con la testata gia scorsa via, la copia sta gia al suo
   posto col menu aperto e il fondo intero entra in dissolvenza sopra la
   pagina: niente scivola e niente compare di colpo. */
html.menu-su-testata .nav-back,
html.menu-su-testata.nav-open .nav-back { background-color: rgba(134, 152, 174, 0); }
html.menu-su-testata .nav-back::before { visibility: hidden; }
html.nav-open.menu-su-testata .hero__back { translate: var(--menu-x, 16vw) var(--menu-su); scale: var(--menu-zoom); transition: opacity .32s var(--wave), visibility 0s, translate 1.3s var(--wave), scale 1.3s var(--wave); }
html.nav-open.menu-su-testata .hero__name-track { opacity: 0; transition: opacity .45s var(--wave); }
/* Con il fondo trasparente, sotto il velo si vedevano anche la riga del
   ruolo, la linguetta del luogo e il filo a destra, sovrapposti
   all'anteprima del menu: sfumano con il nome e tornano con lui. Sui
   primi due l'opacita la governa gia la serranda, quindi si passa dal
   filtro, che e un'altra proprieta. */
.hero__mid, .hero__bar { transition: filter .8s var(--wave) .5s; }
.filo { transition: opacity .8s var(--wave) .5s; }
html.nav-open.menu-su-testata :is(.hero__mid, .hero__bar) { filter: opacity(0); transition: filter .45s var(--wave); }
html.nav-open.menu-su-testata .filo { opacity: 0; transition: opacity .45s var(--wave); }
.nav-back::before,
.nav-back::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
/* La foto si chiede solo quando il menu sta per aprirsi (menu-visto la
   mette il JS al primo passaggio sul bottone): chi il menu non lo apre,
   fuori dalla casa, non la scarica. */
/* La figura e quella della testata, calzata nello stesso modo: lo stesso
   riquadro, alto quanto la testata (una finestra, mai meno di 40em) e
   sporgente del 6% in alto; la stessa misura e la stessa posizione; lo
   stesso ingrandimento del 4% e lo stesso spostamento col puntatore, che
   il JS le passa insieme alla testata. Sta gia dove la figura della
   testata arriva col menu aperto in cima alla casa: spostata verso destra
   fin sotto le schede di vetro (translate) e ingrandita (scale), e da li
   entra ed esce in dissolvenza col fondo. */
.nav-back::before {
  translate: var(--menu-x, 16vw) var(--menu-su);
  scale: var(--menu-zoom);
  top: calc(max(100vh, 40em) * -.06);
  top: calc(max(100svh, 40em) * -.06);
  bottom: auto;
  height: calc(max(100vh, 40em) * 1.06);
  height: calc(max(100svh, 40em) * 1.06);
  background-repeat: no-repeat;
  background-position: var(--scena-pos);
  background-size: var(--scena-size);
  -webkit-mask: url('../img/hero-mask.svg') var(--scena-pos) / auto var(--foto-h) no-repeat;
  mask: url('../img/hero-mask.svg') var(--scena-pos) / auto var(--foto-h) no-repeat;
  transform: scale(1.04) translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -10px), 0);
  backface-visibility: hidden;
}
html.menu-visto .nav-back::before { background-image: var(--scena); }
/* Il velo e uniforme: piu chiaro al centro lasciava un alone intorno
   alla figura. La dissolvenza e quella del fondo intero. */
.nav-back::after { background: rgba(10, 11, 13, .7); }
/* 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;
}
/* La pila delle schede prende il posto che prima avevano le schede nel
   pannello. La prospettiva e sua: le schede si inclinano sotto la mano
   (site.js, la proprieta rotate, che si somma all'entrata in transform). */
.nav-pila {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  perspective: 1400px;
}
.nav-card { will-change: transform; }
/* 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;
}
/* 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 { padding: 0; overflow: hidden; }
/* ------------------------------------------------------- vetro chiaro
   Le schede delle voci e dei social sono vetro chiaro, perche dietro c'e
   Camilla e deve vedersi com'e: niente sfocatura, niente tinta lattea,
   niente rifrazione che le pieghi il viso sul bordo. Del vetro restano
   l'orlo, un filo di luce in alto e il riflesso interno. Chi chiede meno
   trasparenza ritrova le schede piene. Il vetro liquido vero sta solo
   sulla scheda dell'invito, sopra l'onda. */
.nav-card--voci,
.nav-card--soc {
  position: relative;
  isolation: isolate;
  box-shadow:
    0 34px 70px -28px rgba(0, 0, 0, .7),
    0 2px 6px rgba(0, 0, 0, .25),
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    inset 0 0 34px rgba(255, 255, 255, .07);
}
/* l'orlo: un filo di luce che gira tutto intorno, acceso sugli spigoli */
.nav-card--voci::before,
.nav-card--soc::before,
.nav-card--news::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .38) 16%, rgba(255, 255, 255, .06) 42%, rgba(255, 255, 255, .04) 62%, rgba(255, 255, 255, .34) 86%, rgba(255, 255, 255, .8) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.nav-card--voci::after,
.nav-card--soc::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 28%);
  pointer-events: none;
}
.nav-card--voci > *,
.nav-card--soc > * { position: relative; z-index: 3; }
/* Il lampo: arrivata la scheda, un riflesso le passa sopra una volta sola,
   in diagonale, come la luce che prende una lastra appena posata. Solo
   transform e opacita; una scheda dopo l'altra, quando sono ferme. */
.nav-card > .nav-lampo {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.nav-lampo::before {
  content: '';
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 52%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .06) 32%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, .06) 68%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-120%) skewX(-14deg);
  opacity: 0;
}
html.nav-open .nav-lampo::before { animation: nav-lampo 1.3s cubic-bezier(.45, .05, .25, 1) var(--lampo, .5s) both; }
.nav-card--voci { --lampo: .5s; }
.nav-card--news { --lampo: .64s; }
.nav-card--soc { --lampo: .78s; }
@keyframes nav-lampo {
  0% { transform: translateX(-120%) skewX(-14deg); opacity: 0; }
  14%, 82% { opacity: 1; }
  100% { transform: translateX(230%) skewX(-14deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.nav-open .nav-lampo::before { animation: none; }
}
/* L'orlo che prende la luce della mano: lo stesso anello sottile
   dell'orlo, e dentro un punto di luce che il JS porta dove l'orlo e
   piu vicino al puntatore. Il punto si sposta con transform e l'anello
   lo ritaglia: niente si ridisegna mentre la mano si muove. */
.nav-card > .nav-orlo {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1.5px;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.nav-orlo > b {
  position: absolute;
  left: 0;
  top: 0;
  width: 340px;
  height: 340px;
  margin: -170px 0 0 -170px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 1), rgba(255, 255, 255, .5) 38%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  will-change: transform, opacity;
}
@media (forced-colors: active) {
  .nav-card > .nav-orlo, .nav-card > .nav-lampo { display: none; }
}
/* fra un marchio e l'altro un filo di vetro, non di buio */
.nav-card--soc .marchio { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .14); }
.nav-card--soc .marchio:first-child { box-shadow: none; }
@media (prefers-reduced-transparency: reduce) {
  .nav-card--voci::after, .nav-card--soc::after { background: #101114; }
  html.vetro-liquido .nav-card--news::after {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
/* Con il contrasto elevato di Windows il vetro saturava la foto dietro e
   sotto le icone restavano macchie: le schede tornano piene, del colore
   di sistema, con un filo intorno. */
@media (forced-colors: active) {
  .nav-card--voci, .nav-card--soc { background: Canvas; border: 1px solid CanvasText; }
  .nav-card--voci::before, .nav-card--soc::before, .nav-card--news::before,
  .nav-card--voci::after, .nav-card--soc::after, .nav-card--news::after { display: none; }
}
.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; }
/* 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. */
  /* Il terzo vincolo: sette righe a interlinea 1,2 dentro quello che
     resta della finestra tolte le altre due schede (25rem). Su 720 e 768
     di altezza le voci sbordavano dal padding fin sull'orlo di luce. */
  font-size: clamp(2.1rem, min(5.6vw, 6.4vh, (100vh - 25rem) / 8.4), 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.
   E anche a menu aperto il colore si vede solo sotto il puntatore: il
   resto del tempo sta sotto la copia bianca. Girava lo stesso, e il menu
   aperto e fermo scendeva a 30 fotogrammi. Ora l'onda e ferma e parte
   solo sulla voce che si sta toccando; lasciandola si ferma dov'e, cosi
   mentre il bianco la ricopre il colore non salta. */
html.nav-open .nav-ch > i {
  animation: iride 14s linear infinite paused;
}
html.nav-open :is(.nav-link:hover, .nav-link:focus-visible) .nav-ch > i { animation-play-state: running; }

/* 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. */
/* Le due corse hanno andature diverse. Prima erano tutte e due a
   cubic-bezier(.7, 0, .3, 1): per un terzo di secondo quasi ferme, poi di
   colpo. Sotto la mano la voce restava bianca, poi il colore saltava su;
   la voce appena lasciata restava colorata, poi il bianco tornava di
   scatto. Il bianco che torna ora ha l'andatura del seno: parte subito,
   piano, e non ha un tratto ripido. */
.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 .7s cubic-bezier(.37, 0, .63, 1);
}
/* Il colore parte nel fotogramma stesso in cui la mano entra e si posa
   piano. Anche mentre le lettere salgono: il colore sotto le segue
   (site.js, la maschera spostata con loro), quindi non serve piu
   aspettare che arrivino tutte */
html.nav-open .nav-link:hover .nav-ch > i::after,
html.nav-open .nav-link:focus-visible .nav-ch > i::after {
  clip-path: inset(0 0 100% 0);
  transition: clip-path .62s cubic-bezier(.22, .8, .32, 1);
  transition-delay: var(--hd, 0s);
}
/* la voce della pagina in cui si e: sempre colorata, gia mentre sale, e
   ancora mentre scende alla chiusura. Il bianco non la copre mai: a menu
   chiuso le lettere stanno sotto le loro finestre e non si vedono */
.nav-link[aria-current="page"] .nav-ch > i::after { clip-path: inset(0 0 100% 0); transition: none; }
@media (prefers-reduced-motion: reduce) {
  html.nav-open :is(.nav-link:hover, .nav-link:focus-visible) .nav-ch > i::after { transition: none; }
}
/* Al passaggio la voce mostra solo il suo riempimento iridescente,
   senza piastrine sotto. L'anello del fuoco si fa bianco: il blu sul
   vetro stava a 1,1 contro il vetro accanto. */
.nav-card--voci .nav-link:focus-visible { outline-color: #FFFFFF; }

/* Con la pelle a scaglie accesa il colore sotto la copia bianca non e
   piu il riempimento della lettera: e una tela sotto la voce, che il JS
   ritaglia sui tratti delle lettere. Il corpo delle lettere resta
   trasparente e tiene solo il posto. La tela si vede solo al passaggio,
   e sparisce quando il bianco e tornato a coprire: sotto una lettera
   bianca ferma lascerebbe un filo di colore sul bordo. */
.nav-ink.scaglie { position: relative; isolation: isolate; }
/* la sonda della linea di base (site.js): alta e larga zero, non si vede */
.nav-sonda { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.nav-ink.scaglie .nav-ch > i { background-image: none; animation: none; }
.nav-ink.scaglie > .tela-scaglie {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0s linear .76s;
}
html.nav-open :is(.nav-link:hover, .nav-link:focus-visible, .nav-link[aria-current="page"]) .nav-ink.scaglie > .tela-scaglie { opacity: 1; transition-delay: 0s; }
/* chiudendo la tela resta finche le lettere sono scese: il colore scende
   con loro (site.js) */
html:not(.nav-open) .nav-ink.scaglie > .tela-scaglie { transition: opacity 0s linear .9s; }
@media (prefers-reduced-motion: reduce) {
  .nav-ink.scaglie > .tela-scaglie { transition: none; }
}

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), box-shadow .5s var(--wave);
}
.nav-link:hover::before,
.nav-link:focus-visible::before,
.nav-link[aria-current="page"]::before { transform: scale(1); }
/* sulla voce indicata il pallino si accende: un alone del suo colore */
.nav-link:hover::before,
.nav-link:focus-visible::before { box-shadow: 0 0 0 4px color-mix(in srgb, var(--pt, #2EE6C5) 22%, transparent), 0 0 18px 3px color-mix(in srgb, var(--pt, #2EE6C5) 60%, transparent); }

/* ---------------------------------------------------- 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: e velo, e un clic li richiude il menu come
   altrove. Niente si muove: passando da una voce all'altra la pagina
   nuova compare per dissolvenza, ferma, nello stesso punto della vecchia.
   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-content: center;
    padding: var(--bar-top) clamp(2.5rem, 5vw, 6rem);
    container-type: inline-size;
    pointer-events: none;
  }
}
/* Tutti i pannelli stanno nella stessa cella, alti quanto il piu alto,
   e dentro partono dall'alto: occhiello e prima riga del titolo cadono
   agli stessi punti per ogni pagina, e la dissolvenza passa da una
   all'altra senza che niente salti. La vecchia se ne va in
   fretta, la nuova arriva un attimo dopo e con calma: le due non restano
   mai a meta insieme. All'apertura la prima aspetta le schede. */
.nav-ant {
  position: relative;
  grid-area: 1 / 1;
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s linear, visibility 0s linear .25s;
}
html.nav-open .nav-ant.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity .55s var(--wave) calc(var(--parte, .32s) + .12s), visibility 0s;
}
.nav-anteprima.is-viva { --parte: 0s; }
/* La luce della stanza prende il colore della voce: dietro l'anteprima un
   alone largo e tenue nella tinta della pagina. Sta dentro il pannello,
   quindi entra ed esce con la sua stessa dissolvenza: niente moto in
   piu, cambia solo il colore della luce. */
.nav-ant::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -38%;
  top: 50%;
  width: 150%;
  aspect-ratio: 1.25;
  translate: 0 -50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--pt) 30%, transparent), color-mix(in srgb, var(--pt) 10%, transparent) 55%, transparent 100%);
  pointer-events: none;
}
.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; padding-bottom: .04em; white-space: nowrap; }
.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;
}

/* ================================================== 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; }
}
/* ------------------------------------------------------ vetro liquido
   Sopra l'onda una lastra di vetro liquido. L'onda si vede tutta, ma
   vicino ai bordi si piega come dietro uno spessore curvo e il colore si
   separa nelle sue tre componenti; intorno l'orlo di luce delle altre
   schede, in alto un lustro stretto e dentro il riflesso dello spessore.
   La rifrazione la fa un filtro SVG che il JS costruisce sulla misura
   della scheda, solo dove il browser lo sa usare sullo sfondo (Chromium):
   altrove restano l'orlo e le luci. Le scritte stanno sopra la lastra e
   non si piegano.

   Nella lastra sta anche il velo che tiene leggibile il bianco: l'onda
   passa dal petrolio all'oro e ne' il bianco ne' lo scuro reggerebbero su
   tutte e due. Il velo resta carico nella fascia alta, dove sta il
   titolo, e si spegne in basso; il resto lo tiene l'ombra del titolo. Il
   lustro in alto e stretto apposta, per non schiarire il fondo dietro il
   titolo. */
.nav-card--news { --vetro: blur(0px); isolation: isolate; }
.nav-card--news::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 9%, rgba(255, 255, 255, 0) 84%, rgba(255, 255, 255, .1)),
    linear-gradient(165deg, rgba(6, 8, 12, .34) 0%, rgba(6, 8, 12, .18) 30%, rgba(6, 8, 12, 0) 100%);
  box-shadow:
    inset 0 0 26px rgba(255, 255, 255, .16),
    inset 0 -12px 22px -10px rgba(4, 6, 10, .24);
  pointer-events: none;
}
html.vetro-liquido .nav-card--news::after {
  -webkit-backdrop-filter: var(--vetro);
  backdrop-filter: var(--vetro);
}
.nav-card--news > :not(i) { position: relative; z-index: 3; }
.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%; }
/* Antropotech si scrive da solo quando il menu si apre. La parola sta
   gia al suo posto, impaginata intera e invisibile, cosi niente si sposta
   mentre si scrive; il cursore la percorre a velocita costante e ogni
   lettera compare sotto di lui, ferma e nitida, con una dissolvenza
   breve. Niente salita e niente sfumatura lunga: accavallate, facevano
   un'onda che attraversava la parola. Poi il cursore resta a battere piano. Chiuso il menu, la parola
   si cancella solo quando la scheda e gia sparita, e alla prossima
   apertura si riscrive.

   La classe delle lettere e sua: prima era .batti, che e gia la
   battitura della frase in casa, e a menu chiuso la nascondeva. */
.nav-news__scrivi { --scrive: .78s; position: relative; display: inline-flex; align-items: center; white-space: pre; }
.nav-news__l {
  display: inline-block;
  opacity: 0;
  transition: opacity 0s linear .6s;
}
html.nav-open .nav-news__l {
  opacity: 1;
  transition: opacity .12s linear calc(var(--scrive) + var(--b));
}
.nav-news__caret {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1.5px;
  height: 1.1em;
  margin: -.55em 0 0 .08em;
  border-radius: 1px;
  background: currentColor;
  opacity: .8;
  transition: left 0s linear .6s;
}
html.nav-open .nav-news__caret {
  left: 100%;
  /* parte con la prima lettera e le arriva addosso mentre compare: ogni
     lettera nasce dove il cursore e appena passato */
  transition: left var(--fine) linear var(--scrive);
  animation: batte 1.1s ease-in-out calc(var(--scrive) + var(--fine) + .4s) infinite;
}
@keyframes batte { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .nav-news__l { opacity: 1; transition: none; }
  .nav-news__caret { display: none; }
}
.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 aree del lavoro tengono il riempimento di prima: stanno su fondo
     chiaro, dove una copia bianca a riposo sarebbe invisibile. */
  .area__t .soc-ch {
    display: inline-block;
    /* il ritaglio sul glifo dipinge solo dentro il riquadro della lettera:
       a interlinea 1 la coda della g e della p restava fuori, tagliata */
    padding-bottom: .16em;
    margin-bottom: -.16em;
    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);
  }
  .area.is-on .area__t .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. La visibilita torna con
     un ritardo: chiudendo il menu, solo quando la copia sotto il menu e
     rientrata al suo posto. */
  translate: 0 0;
  scale: 1;
  transition: opacity .32s var(--wave), visibility 0s linear 1s, translate 1s cubic-bezier(.65, 0, .35, 1), scale 1s cubic-bezier(.65, 0, .35, 1);
}
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__mid {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 0; right: 0;
  translate: 0 -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 */
/* Dove testata e invito a scorrere stanno sulla stessa riga, il blocco a
   sinistra e alto quanto quello a destra e cominciano alla stessa
   altezza: il corpo del ruolo (--ruolo) lo ricava site.js dalla misura
   dell'invito, e tutti e due stanno centrati sulla finestra. */
.hero__role { max-width: 13ch; font-size: var(--ruolo, clamp(1.6rem, 3.05vw, 2.6rem)); }
.hero__mid.alla-pari { translate: 0 -50%; }
/* alla pari il ruolo va su tre righe: con due, a quel corpo, l'ultima
   parola finiva sul viso */
.hero__a-capo { display: none; }
.alla-pari .hero__a-capo { display: inline; }
.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; transition: opacity .8s var(--wave) .5s; }
.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-r) var(--bar-r) 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; }
/* La pillola di Torino sta solo sulla testata della casa: appena la
   macchina del film la lascia, rientra nel bordo da cui e uscita, e torna
   fuori quando la macchina ci ritorna. Si muove con translate, che
   l'entrata (transform) non tocca. */
.hanger { translate: 0 0; transition: translate .7s var(--wave); }
html.film-on:not(.film-cima) .hanger { translate: -110% 0; transition: translate .55s var(--wave-via); }
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%; }

/* ====================================================== PIANO SEQUENZA
   Sugli schermi larghi la casa e un film a schermata fissa (build.mjs,
   fermate): la finestra non scorre, la macchina da presa si muove dentro
   il set della testata. Le trasformazioni le scrive site.js; qui ogni
   fermata e composta com'e con la macchina ferma su di lei.
   Fuori dal film le fermate che esistono solo li spariscono, e Chi sono
   e una sezione scura dopo la testata. */
.film { position: relative; }
.film__set, .fermata--film { display: none; }

/* I testi delle fermate, uguali dentro e fuori dal film. */
.fermata { color: var(--white); }
.fermata__blocco { display: grid; gap: 1.3rem; justify-items: start; }
.fermata__occhio {
  margin: 0;
  font-size: .72rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .74);
}
.fermata__occhio a { color: inherit; text-decoration: none; }
.fermata__occhio a:hover, .fermata__occhio a:focus-visible { color: var(--white); }
.fermata__frase { margin: 0; font-size: clamp(1.9rem, 2.7vw, 3rem); line-height: 1.1; font-weight: 300; letter-spacing: -.02em; text-wrap: balance; }
/* Due toni: le parole spente restano a un grigio chiaro, le accese
   bianche. E il tono di riposo; l'entrata (site.js) arriva qui. Il
   titolo del libro e tutto acceso: entra spento e si accende. */
[data-toni] .w:not(.k) { opacity: .62; }
.fermata__titolo { margin: 0; font-size: clamp(3rem, 5.4vw, 6.4rem); line-height: .95; font-weight: 300; letter-spacing: -.035em; }
.fermata__nota { margin: 0; max-width: 40ch; font-size: clamp(1rem, 1.1vw, 1.15rem); line-height: 1.5; color: rgba(255, 255, 255, .8); text-wrap: pretty; }
.fermata__vie { display: flex; flex-wrap: wrap; gap: .8rem 2rem; margin: .5rem 0 0; }
.fermata__vai {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding-bottom: .35em;
  font-size: .95rem;
  color: var(--white);
  text-decoration: none;
}
.fermata__vai::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; opacity: .4; transition: opacity .3s var(--wave); }
.fermata__vai:hover::after, .fermata__vai:focus-visible::after { opacity: 1; }
.fermata__vai:hover .arrow, .fermata__vai:focus-visible .arrow { transform: rotate(45deg); transition: transform var(--entra); }
.fermata--chi { background: #101114; padding: var(--sec) var(--pad); }
.fermata--chi .fermata__blocco { max-width: 46rem; }

/* ---------------------------------------------------------- il film */
html.film-on, html.film-on body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.film-on .film { position: fixed; inset: 0; z-index: 1; overflow: hidden; background: #0B0C0E; touch-action: none; }
html.film-on .casa-lunga, html.film-on .finale { display: none; }
html.film-on .film__set { display: block; position: absolute; inset: 0; pointer-events: none; }
html.film-on .film__pezzo { position: absolute; display: block; }
/* La testata perde il suo fondo: il grigio adesso e il fondale del set,
   che la macchina sposta insieme a lei. Le due velature restano ferme
   sulla finestra, come su un obiettivo, e si ritirano salendo in gru. */
html.film-on .hero { position: absolute; inset: 0; height: auto; min-height: 0; background: transparent; }
html.film-on .hero::before, html.film-on .hero__wash { opacity: var(--film-velo, 1); }
html.film-on .fermata { display: block; position: absolute; inset: 0; margin: 0; padding: 0; background: none; pointer-events: none; }
html.film-on .fermata :is(a, button) { pointer-events: auto; }
/* il libro 3D si afferra anche nel film, in casa e nella pagina del libro */
html.film-on .film [data-libro3d] { pointer-events: auto; }
html.film-on .film [data-d] { transform-origin: 50% 50%; will-change: transform; }
html.film-on .film .hero__back { will-change: transform, opacity; }
/* Un pezzo lontano dalla sua fermata non si vede e non prende il
   puntatore; resta raggiungibile col tabulatore, e col fuoco la macchina
   lo va a prendere. */
html.film-on .film .is-via, html.film-on .film .is-via * { pointer-events: none !important; }
/* In movimento niente transizioni sui pezzi: la macchina scrive a ogni
   fotogramma, e una transizione la farebbe inseguire in ritardo. */
html.film-moto .film [data-d] { transition: none !important; }

/* Il set. Il fondale e il grigio della testata finche la macchina e
   vicina a lei, e scurisce allontanandosi: dove si legge, il bianco
   tiene. Dietro il libro una seconda pozza di luce; in cima la carta
   prende luce sul bordo, dove finisce. */
.film__carta {
  background:
    linear-gradient(to bottom, rgba(168, 184, 204, .36) 0%, rgba(168, 184, 204, .12) 1.4%, rgba(168, 184, 204, 0) 7%),
    radial-gradient(9.9% 21.5% at 70.2% 64.1%, rgba(150, 168, 190, .5), rgba(150, 168, 190, 0) 72%),
    radial-gradient(35.5% 53.7% at 25.8% 53.7%, var(--grigio) 0%, var(--grigio) 70%, #6A7A8F 86%, #4A5667 100%);
}
.film__rotolo { border-radius: 2vw; background: linear-gradient(to bottom, #1B1F25 0%, #3F4A5B 30%, #6E7E94 48%, #4A5667 66%, #171A1F 100%); box-shadow: 0 .6vw 1.6vw rgba(0, 0, 0, .45); }
.film__cavo { background: rgba(206, 216, 230, .24); }
/* L'alba: le luci sotto il bordo del fondale rischiarano l'aria sopra,
   con i colori dell'onda iridescente. */
.film__alba {
  background: linear-gradient(90deg, rgba(4, 69, 79, 0) 0%, rgba(15, 180, 158, .34) 18%, rgba(99, 220, 198, .3) 30%, rgba(217, 151, 58, .3) 46%, rgba(192, 95, 114, .3) 60%, rgba(110, 75, 180, .34) 76%, rgba(42, 85, 160, 0) 100%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .45) 28%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .45) 28%, rgba(0, 0, 0, 0) 100%);
}

/* Le fermate con la macchina ferma su di loro. */
html.film-on .fermata--chi .fermata__blocco { position: absolute; left: var(--pad); top: 50%; translate: 0 -50%; width: min(34vw, 38rem); }
html.film-on .fermata__testa { position: absolute; left: var(--pad); top: 20vh; }
html.film-on .fermata__mestieri { margin: 0; padding: 0; list-style: none; }
html.film-on .fermata__mestiere {
  position: absolute;
  left: var(--pad);
  top: calc(27vh + var(--r) * 13vh);
  font-size: clamp(3rem, 6vw, 7.2rem);
  line-height: 1;
  font-weight: 300;
  letter-spacing: -.03em;
  white-space: nowrap;
}
.fermata__mestiere a { color: var(--white); text-decoration: none; }
html.film-on .fermata__didascalia { position: absolute; right: calc(var(--rail) * 2 + 2rem); bottom: 16vh; width: min(26vw, 24rem); }
/* Il piede nel film: il piede bianco della casa, al posto dei contatti
   in cima alla gru. Parte sotto il bordo e sale mentre la macchina sale,
   fino a coprire la schermata; la salita, gli
   segnale d'arrivo li scrive site.js. Le schede stanno ferme: sale il
   piede intero, e dentro le voci nascono gia al loro posto.
   Gli angoli non si raddrizzano: ridisegnare il raggio a ogni fotogramma
   vuol dire ridipingere tutto il piede, lettere iridescenti comprese, e
   la salita andava a scatti. Il piede e piu alto della finestra di
   quanto e grande il raggio, e a fine corsa si ferma col bordo curvo
   appena sopra la finestra: gli angoli si vedono salire e poi escono.
   Cosi la salita e solo uno spostamento, che la scheda grafica fa da
   sola senza ridipingere niente. */
html.film-on .fermata__piede {
  --piede-r: 2.6rem;
  position: absolute; left: 0; right: 0; top: 0;
  height: calc(100% + var(--piede-r));
  transform: translate3d(0, 100vh, 0);
  will-change: transform;
}
html.film-on .fermata__piede > .foot {
  height: 100%; min-height: 0;
  padding-top: calc(var(--vano) + var(--piede-r));
  border-radius: var(--piede-r) var(--piede-r) 0 0;
  pointer-events: auto;
}
/* I mestieri si accendono come le voci del menu: sotto la lettera
   l'onda iridescente, sopra una copia bianca che la mano scopre. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .fermata__mestiere .soc-ch {
    position: relative;
    display: inline-block;
    padding-bottom: .12em;
    margin-bottom: -.12em;
    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;
  }
  .fermata__mestiere .soc-ch::after {
    content: attr(data-c);
    position: absolute;
    left: 0; top: 0;
    white-space: pre;
    color: var(--white);
    -webkit-text-fill-color: var(--white);
    clip-path: inset(0 0 0 0);
    transition: clip-path .55s var(--e);
  }
  .fermata__mestiere a:hover .soc-ch::after,
  .fermata__mestiere a:focus-visible .soc-ch::after { clip-path: inset(0 0 100% 0); transition-delay: var(--hd, 0s); }
}
/* ----------------------------------------------- le pagine interne nel film
   Ogni pagina e girata come la casa: la testata e la prima fermata, col
   ritratto sul terzo destro e il titolo a sinistra; ogni sezione del
   corpo e una fermata lungo il set; in fondo la gru dei contatti. Sono
   le stesse sezioni che fuori dal film scorrono: qui cambiano posto e
   colore, su fondale scuro. */
.top__ritratto { display: none; }
html.film-on .top__ritratto { display: block; }
html.film-on .film > .top {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
}
html.film-on .film > .top a { pointer-events: auto; }
/* le due velature della testata di casa, le stesse */
html.film-on .film > .top::before,
html.film-on .film > .top::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: var(--film-velo, 1); }
html.film-on .film > .top::before { z-index: -1; 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%); }
html.film-on .film > .top::after { z-index: 1; 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%); }
html.film-on .film > .top .top__in {
  position: absolute;
  z-index: 2;
  left: var(--pad);
  top: 50%;
  translate: 0 -50%;
  width: min(42vw, 46rem);
  max-width: none;
  margin: 0;
  padding: 0;
  animation: none;
}
html.film-on .film > .top h1 { font-size: clamp(2.6rem, 5.4vw, 6.4rem); color: var(--white); }
html.film-on .film > .top :is(.h5, h5, p, .top__meta) { color: rgba(255, 255, 255, .8); }
html.film-on .film > .top .top__sub { padding-right: 0; }
/* la filigrana resta filigrana: il tenue sta nel colore, non
   nell'opacita, che la macchina usa per farla entrare e uscire */
html.film-on .film > .top .top__filigrana {
  z-index: 1;
  left: -.03em;
  right: auto;
  bottom: -.14em;
  font-size: clamp(7rem, 17vw, 19rem);
  color: rgba(255, 255, 255, .1);
  opacity: 1;
  animation: none;
}

/* Le sezioni: a tutto schermo, senza fondo proprio. */
html.film-on .film > .section {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  background: none !important;
  color: var(--white);
  pointer-events: none;
  overflow: visible;
}
html.film-on .film > .section :is(a, button, [data-scorre]) { pointer-events: auto; }
html.film-on .film > .section > .container:not([data-d]),
html.film-on .film .capitolo__in,
html.film-on .film .intro__grid,
html.film-on .film .libro__in { display: contents; }
/* le rivelazioni allo scorrimento qui non servono: la fermata entra con
   la macchina. La testata no, quella entra ancora col sipario. */
html.film-on .film [data-fermata]:not([data-fermata="0"]) :is(.fade, .rise, .entry) { opacity: 1; transform: none; }
html.film-on .film [data-fermata]:not([data-fermata="0"]) :is(.lift > *, .word > span) { transform: none; }
html.film-on .film [data-scorre] {
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .28) transparent;
}

/* Il capitolo: testa a sinistra, corpo a destra, e il corpo scorre se e
   piu lungo della finestra. */
html.film-on .film .capitolo__testa { position: absolute; left: var(--pad); top: 50%; translate: 0 -50%; width: min(27vw, 28rem); }
html.film-on .film .capitolo__perno { position: static; padding: 0; }
html.film-on .film .capitolo__filo { display: none; }
html.film-on .film .capitolo__t { color: var(--white); }
html.film-on .film :is(.capitolo__n, .capitolo__intro) { color: rgba(255, 255, 255, .8); }
html.film-on .film .capitolo__di { color: rgba(255, 255, 255, .5); }
html.film-on .film .capitolo__corpo {
  position: absolute;
  left: calc(var(--pad) + min(27vw, 28rem) + 4vw);
  right: calc(var(--rail) * 2 + 1.5rem);
  top: 50%;
  translate: 0 -50%;
  max-height: 80vh;
  padding-right: .8rem;
}
html.film-on .film .cards--capitolo { row-gap: 1.8rem; column-gap: 2.4rem; }
html.film-on .film .scheda::before { background: rgba(255, 255, 255, .2); }
html.film-on .film .card__meta { color: #63DCC6; }
html.film-on .film .scheda__t { font-size: clamp(1.15rem, 1.4vw, 1.45rem); color: var(--white); }
html.film-on .film .scheda__b { font-size: clamp(.9rem, .95vw, 1.02rem); color: rgba(255, 255, 255, .74); }
html.film-on .film .scheda--prosa .scheda__b { color: rgba(255, 255, 255, .88); }
html.film-on .film .scheda__vai { color: var(--white); }
html.film-on .film .scheda--riga { padding: 1rem 0; }
html.film-on .film .righe > li:last-child .scheda--riga { border-bottom-color: rgba(255, 255, 255, .2); }
html.film-on .film .figure__n { font-size: clamp(2.4rem, 4.4vw, 4.6rem); color: var(--white); }
html.film-on .film .figure__l { color: rgba(255, 255, 255, .72); }
html.film-on .film .entry,
html.film-on .film .entry:last-child { border-color: rgba(255, 255, 255, .2); }
html.film-on .film .entry__btn { color: var(--white); padding: 1.1rem 0; }
html.film-on .film :is(.entry .num, .entry__year, .entry__inner h3) { color: rgba(255, 255, 255, .6); }
html.film-on .film .entry__inner p { color: rgba(255, 255, 255, .8); }
html.film-on .film .gallery figure { background: rgba(255, 255, 255, .06); }
html.film-on .film .btn-line { color: var(--white); border-color: rgba(255, 255, 255, .35); }
html.film-on .film .btn-line:hover,
html.film-on .film .btn-line:focus-visible { background: var(--white); color: #0B0C0E; }

/* Le aree del lavoro: l'indice a tutta larghezza, fra la testatina e il
   fondo. */
html.film-on .film .work__head { position: absolute; left: var(--pad); right: calc(var(--rail) * 2 + 1.5rem); top: 15vh; padding: 0; }
html.film-on .film .aree { position: absolute; left: var(--pad); right: calc(var(--rail) * 2 + 1.5rem); top: 22vh; bottom: 11vh; }
html.film-on .film .aree__righe { border-top-color: rgba(255, 255, 255, .2); }
html.film-on .film .area { border-bottom-color: rgba(255, 255, 255, .2); }
html.film-on .film .area__t { color: var(--white); }
html.film-on .film :is(.area__n, .area__m, .area__d) { color: rgba(255, 255, 255, .7); }

/* Chi sono: la biografia a sinistra, le istituzioni a destra. */
html.film-on .film .intro__lead { position: absolute; left: var(--pad); top: 50%; translate: 0 -50%; width: min(46vw, 48rem); max-height: 80vh; }
html.film-on .film .intro__side { position: absolute; right: calc(var(--rail) * 2 + 2rem); top: 50%; translate: 0 -50%; width: min(24vw, 24rem); align-self: auto; }
html.film-on .film :is(.intro__side p, .prose) { color: rgba(255, 255, 255, .86); }

/* Il libro: il testo scorre a sinistra, il volume a destra. */
html.film-on .film .libro__testo { position: absolute; left: var(--pad); top: 50%; translate: 0 -50%; width: min(40vw, 44rem); max-height: 82vh; gap: 2rem; padding-right: .8rem; }
html.film-on .film .libro__perno { position: absolute; right: 12vw; top: 50%; translate: 0 -50%; order: 0; }
html.film-on .film .volume__gira { color: var(--white); }

/* Contatti e legali: un riquadro solo, a sinistra; le norme in una
   colonna che scorre, larga quanto una riga si legge. */
html.film-on .film .cards[data-d],
html.film-on .film > .section > .container[data-d] {
  position: absolute;
  left: var(--pad);
  right: calc(var(--rail) * 2 + 1.5rem);
  top: 50%;
  translate: 0 -50%;
  max-width: none;
  margin: 0;
  padding: 0;
}
html.film-on .film .legale > .container[data-d] {
  top: 13vh;
  bottom: 9vh;
  translate: none;
  left: var(--pad);
  right: auto;
  width: min(46rem, 60vw);
  padding-right: 1rem;
}
html.film-on .film .legale { color: var(--white); }
html.film-on .film :is(.legale__data, .legale__esito) { color: rgba(255, 255, 255, .6); }
html.film-on .film .legale__altre { border-top-color: rgba(255, 255, 255, .2); }
html.film-on .film .stripe { background: rgba(255, 255, 255, .2); }

.film__carta--pagina {
  background:
    linear-gradient(to bottom, rgba(168, 184, 204, .36) 0%, rgba(168, 184, 204, .12) 1.4%, rgba(168, 184, 204, 0) 7%),
    radial-gradient(var(--rx) 53.7% at var(--px) 53.7%, var(--grigio) 0%, var(--grigio) 70%, #6A7A8F 86%, #4A5667 100%);
}

/* ================================================================ LA SALA
   La prima fermata del palco: la sala della Feat House all'evento di
   Torino Tech Map. I colori sono quelli delle foto: il buio della sala,
   il blu del sipario, il magenta che sale dietro le palme. Le foto e la
   luce le disegna site.js su una tela; qui la scena, il testo e la fila
   di foto che resta senza WebGL2. Il titolo prende la stessa luce della
   sala: dove passa la pozza magenta le lettere si tingono. */
.palco {
  --sala: #05070D;
  --sala-blu: #0869D1;
  --sala-magenta: #BB41B0;
  position: relative;
  padding: var(--sec) 0 0;
  background: var(--sala);
  color: var(--white);
  overflow: hidden;
}
.palco__buio { display: none; }
.palco__testo { position: relative; z-index: 2; max-width: 44rem; padding: 0 var(--pad); }
.palco__occhio {
  display: flex;
  flex-wrap: wrap;
  gap: .5em 1.6em;
  margin: 0 0 1.5rem;
  font-size: .72rem;
  line-height: 1.3;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}
.palco__luogo { color: rgba(255, 255, 255, .5); }
.palco__t {
  margin: 0;
  font-size: clamp(3.2rem, 6.4vw, 7.8rem);
  line-height: .9;
  font-weight: 300;
  letter-spacing: -.04em;
  color: var(--white);
}
.palco__t > span { display: block; }
/* la luce della sala sulle lettere: la scrive il JS, in pixel del titolo */
.palco.viva .palco__t {
  background-color: var(--white);
  background-image: radial-gradient(circle var(--lr, 1px) at var(--lx, -50%) var(--ly, 50%), #FFE6F9 0%, #F27BE6 24%, #A866E0 56%, #FFFFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.palco__nota {
  margin: 1.6rem 0 0;
  max-width: 36ch;
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, .8);
  text-wrap: pretty;
}
.palco__invito {
  display: flex;
  align-items: center;
  gap: .9em;
  margin: 1.5rem 0 0;
  font-size: .72rem;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
/* il segno della luce: un punto magenta che respira, come una lampada
   appena accesa */
.palco__invito i {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #F27BE6;
  box-shadow: 0 0 10px 3px rgba(187, 65, 176, .75), 0 0 26px 8px rgba(8, 105, 209, .35);
  animation: palco-lampada 2.8s ease-in-out infinite;
}
@keyframes palco-lampada { 50% { opacity: .55; transform: scale(.82); } }
.palco__dito { display: none; }
html:not(.fine) .palco__mano { display: none; }
html:not(.fine) .palco__dito { display: inline; }
.palco:not(.viva) .palco__invito { display: none; }
/* la scena: fuori dal film una fascia alta sotto il testo, che si
   trascina in orizzontale; in verticale la pagina scorre */
.palco__sala {
  position: relative;
  height: clamp(24rem, 74vh, 46rem);
  margin-top: clamp(2rem, 6vh, 3.5rem);
  touch-action: pan-y;
}
.palco__tela { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.palco:not(.viva) .palco__tela { display: none; }
/* senza WebGL2 le foto restano una fila che scorre di lato */
.palco__foto {
  display: flex;
  gap: 1rem;
  height: 100%;
  margin: 0;
  padding: 0 var(--pad) 1.5rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.palco__foto li { flex: none; height: 100%; scroll-snap-align: center; }
.palco__foto img { display: block; width: auto; height: 100%; border-radius: .4rem; }
/* con la tela accesa la fila resta per chi legge con un lettore di
   schermo, invisibile e senza puntatore */
.palco.viva .palco__foto { position: absolute; inset: 0; padding: 0; overflow: hidden; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .palco__invito i { animation: none; }
}

/* Nel film la sala e a tutto schermo: il testo a sinistra, come nelle
   altre fermate, e le foto in fila che passano dietro. Il buio e un pezzo
   del set piu largo della finestra: arrivando, la sala si spegne. */
html.film-on .film .palco__buio {
  display: block;
  position: absolute;
  left: -40vw;
  right: -40vw;
  top: -40vh;
  bottom: -40vh;
  background: radial-gradient(closest-side, rgba(4, 5, 10, .96) 0%, rgba(4, 5, 10, .96) 78%, rgba(4, 5, 10, 0) 100%);
  pointer-events: none;
}
html.film-on .film .palco__sala { position: absolute; inset: 0; height: auto; margin: 0; pointer-events: none; }
html.film-on .film .palco__testo {
  position: absolute;
  left: var(--pad);
  top: 50%;
  translate: 0 -50%;
  width: min(28vw, 28rem);
  max-width: none;
  padding: 0;
}

/* ============================================================ LA RIVISTA
   La prima fermata della stampa: la London Fashion Week con Marella,
   sfogliata come una rivista. Nel film la doppia pagina copre tutta la
   finestra: due pagine di carta calda, la piega al centro, la foto intera
   da una parte (una volta a sinistra, una a destra) e dall'altra il
   numero del look con una frase sulla donna. Le foto non superano mai la
   loro misura vera. Le pagine le costruisce e le gira
   site.js (LA RIVISTA); le misure delle pagine sono --pw e --ph, e tutto
   quello che sta sulla carta si misura su di loro. Fuori dal film le due
   pagine stanno una sopra l'altra. Senza JS resta l'elenco dei look. */
.moda {
  --carta: #F2EDE4;
  --piega: rgba(52, 38, 24, .2);
  --inchiostro: #1D1915;
  --inchiostro-2: rgba(29, 25, 21, .78);
  --inchiostro-3: rgba(29, 25, 21, .55);
  --oro: #8C6F45;
  position: relative;
  padding: var(--sec) 0;
  background: #110E0C;
  color: var(--white);
}
/* senza JS: il titolo e i look uno sotto l'altro */
.riv { position: relative; width: min(100% - 2.5rem, 46rem); margin: 0 auto; display: grid; gap: 2.5rem; }
.riv__occhio { display: flex; gap: 1.6em; margin: 0; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; opacity: .78; }
.riv__occhio span + span { opacity: .65; }
.riv__t { margin: 1.2rem 0 0; font-size: clamp(3rem, 7vw, 6rem); line-height: .9; font-weight: 300; letter-spacing: -.045em; }
.riv__t > span { display: block; }
.riv__marchio { display: flex; align-items: center; gap: 1.1em; margin: 1.3rem 0 0; font-size: .86rem; font-weight: 500; letter-spacing: .44em; text-transform: uppercase; color: #D8C6A6; }
.riv__marchio::before { content: ''; width: 2.6em; height: 1px; background: currentColor; opacity: .6; }
.riv__nota { margin: 1.4rem 0 0; max-width: 36ch; font-size: 1.05rem; line-height: 1.5; opacity: .82; text-wrap: pretty; }
.riv__invito { display: none; }
.riv__look { display: grid; gap: 2.5rem; margin: 0; padding: 0; list-style: none; }
.riv__look figure { margin: 0; }
.riv__look img { display: block; width: auto; max-width: 100%; height: auto; max-height: 86vh; }
.riv__look figcaption { margin-top: .8rem; font-size: .9rem; line-height: 1.45; opacity: .8; }
.riv__look figcaption b { display: block; margin-bottom: .2rem; font-size: .7rem; font-weight: 500; letter-spacing: .16em; color: #D8C6A6; }
.riv__frase { margin: 1rem 0 0; max-width: 24ch; font-size: 1.5rem; line-height: 1.2; font-weight: 300; letter-spacing: -.015em; }
.riv__libro, .riv__comandi { display: none; }

/* con JS: la rivista; il titolo e l'elenco restano per chi legge con un
   lettore di schermo, e danno alle pagine il loro testo */
.moda.viva :is(.riv__apertura, .riv__look) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.moda.viva .riv { display: block; }
.moda.viva .riv__libro {
  --pw: min(100vw - 2.5rem, 34rem);
  --ph: calc(var(--pw) / .74);
  position: relative;
  display: block;
  width: var(--pw);
  height: calc(var(--ph) * 2 + .9rem);
  margin: 0 auto;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
  transition: opacity .18s ease;
}
.moda.viva .riv__libro.cambia { opacity: 0; }
/* i due comandi restano per la tastiera: si vedono solo col fuoco. Con
   la mano sfoglia il cursore, col dito si scorre di lato */
.moda.viva .riv__comandi { display: flex; justify-content: center; gap: .6rem; margin-top: 1.4rem; opacity: 0; pointer-events: none; }
.moda.viva .riv__comandi:focus-within { opacity: 1; pointer-events: auto; }
/* il bordo della pagina che sta per girare prende luce */
.riv__bordo { position: absolute; top: 0; bottom: 0; z-index: 7; width: calc(var(--pw) * .16); opacity: 0; pointer-events: none; transition: opacity .45s var(--e); display: none; }
.riv__bordo--sx { left: 0; background: linear-gradient(to right, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); }
.riv__bordo--dx { right: 0; background: linear-gradient(to left, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); }
.riv__bordo.acceso { opacity: 1; }
html.film-on .film .moda .riv__bordo { display: block; }
.riv__comandi button {
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 1px solid rgba(243, 238, 230, .28);
  background: transparent;
  color: inherit;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background-color .3s ease, opacity .3s ease;
}
.riv__comandi button:hover, .riv__comandi button:focus-visible { background: rgba(243, 238, 230, .12); }
.riv__comandi button:disabled { opacity: .3; cursor: default; }
.riv__pagina, .riv__foglio {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--pw);
  height: var(--ph);
}
.riv__pagina { background: var(--carta); color: var(--inchiostro); overflow: hidden; }
.riv__dx { top: calc(var(--ph) + .9rem); }
.riv__foglio { display: none; transform-style: preserve-3d; z-index: 5; }
.riv__faccia { position: absolute; inset: 0; background: var(--carta); color: var(--inchiostro); overflow: hidden; backface-visibility: hidden; }
.riv__retro { transform: rotateY(180deg); }
/* l'ombra della pagina che gira: solo opacita */
.riv__ombra { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 14, 8, .5), rgba(20, 14, 8, .12)); opacity: 0; pointer-events: none; }
.riv__lucido { position: absolute; inset: 0; z-index: 8; background: radial-gradient(30% 36% at var(--gx, 70%) var(--gy, 28%), rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)); mix-blend-mode: soft-light; pointer-events: none; }

/* la carta: testatina, corpo, piede */
.pag { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(var(--ph) * .055) calc(var(--pw) * .085); }
/* la piega: la carta scurisce verso il dorso */
.pag::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.pag--sx::after { background: linear-gradient(to left, var(--piega), rgba(52, 38, 24, 0) 7%); }
.pag--dx::after { background: linear-gradient(to right, var(--piega), rgba(52, 38, 24, 0) 7%); }
.pag__testa, .pag__piede {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  font-size: max(.6rem, calc(var(--ph) * .0125));
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--inchiostro-3);
  font-variant-numeric: tabular-nums;
}
.pag__piede { margin-top: auto; letter-spacing: .14em; }
/* la foto intera: mai piu grande della sua misura vera */
.pag__foto { position: relative; flex: 1; min-height: 0; margin: calc(var(--ph) * .03) 0; }
.pag__foto img { position: absolute; inset: 0; display: block; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; box-shadow: 0 1px 2px rgba(29, 25, 21, .18); }
/* la pagina di testo del look: il numero in alto, la frase in basso,
   grande, e la firma del marchio sotto */
.pag__scheda { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; gap: calc(var(--ph) * .04); margin: calc(var(--ph) * .03) 0; }
.pag__num { margin: 0; font-size: calc(var(--ph) * .16); line-height: .8; font-weight: 300; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.pag__frase { margin: 0; max-width: 17ch; font-size: calc(var(--ph) * .038); line-height: 1.14; font-weight: 300; letter-spacing: -.02em; text-wrap: balance; }
.pag__frase::before { content: ''; display: block; width: 2.4em; height: 1px; margin-bottom: .9em; background: var(--oro); }
.pag__marchio { margin: calc(var(--ph) * .025) 0 0; font-size: max(.62rem, calc(var(--ph) * .014)); font-weight: 500; letter-spacing: .44em; text-transform: uppercase; color: var(--oro); }
/* l'apertura del servizio, sulla pagina di destra della prima doppia pagina */
.pag__apertura { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(var(--ph) * .028); margin: calc(var(--ph) * .03) 0; }
.pag__apertura .riv__occhio { opacity: 1; color: var(--inchiostro-3); font-size: max(.6rem, calc(var(--ph) * .0125)); }
.pag__apertura .riv__occhio span + span { opacity: .7; }
.pag__apertura .riv__t { margin: 0; font-size: calc(var(--ph) * .1); }
.pag__apertura .riv__marchio { margin: 0; color: var(--oro); font-size: max(.62rem, calc(var(--ph) * .014)); }
.pag__apertura .riv__nota { margin: 0; opacity: 1; color: var(--inchiostro-2); font-size: max(.82rem, calc(var(--ph) * .021)); }
.pag__apertura .riv__invito { display: block; margin: 0; font-size: max(.58rem, calc(var(--ph) * .0115)); letter-spacing: .16em; text-transform: uppercase; color: var(--inchiostro-3); }
.riv__dito { display: none; }
html:not(.fine) .riv__mano { display: none; }
html:not(.fine) .riv__dito { display: inline; }

/* Nel film la doppia pagina e tutta la finestra: una pagina per meta. La
   pagina che gira ruota sul dorso, al centro. Sulla carta il filo si fa
   scuro (data-chiaro, site.js). */
html.film-on .film .moda .riv { position: absolute; inset: 0; width: auto; margin: 0; pointer-events: auto; }
html.film-on .film .moda.viva .riv__libro {
  --pw: 50vw;
  --ph: 100vh;
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  perspective: 2600px;
}
html.film-on .film .moda .riv__dx { top: 0; left: var(--pw); }
/* sulla pagina di destra il margine lascia posto al bottone del menu e al
   filo, che stanno sul bordo della finestra; a sinistra il margine e lo
   stesso, cosi le due pagine restano simmetriche */
html.film-on .film .moda :is(.pag--dx, .pag--sx) { padding-left: calc(var(--rail) * 2 + 2.5rem); padding-right: calc(var(--rail) * 2 + 2.5rem); }
html.film-on .film .moda .pag--sx { padding-right: calc(var(--pw) * .085); }
html.film-on .film .moda .pag--dx { padding-left: calc(var(--pw) * .085); }
html.film-on .film .moda .riv__foglio.avanti { left: var(--pw); transform-origin: 0 50%; }
html.film-on .film .moda .riv__foglio.indietro { left: 0; transform-origin: 100% 50%; }
html.film-on .film .moda .riv__comandi { position: absolute; left: 50%; bottom: 3.2vh; z-index: 9; margin: 0; translate: -50% 0; color: var(--inchiostro); }
html.film-on .film .moda .riv__comandi button { border-color: rgba(29, 25, 21, .3); background: rgba(242, 237, 228, .85); }
html.film-on .film .moda .riv__comandi button:hover,
html.film-on .film .moda .riv__comandi button:focus-visible { background: #FFFFFF; }
/* nel film la pagina e larga: il numero e la frase si fanno grandi */
html.film-on .film .moda .pag__num { font-size: calc(var(--ph) * .3); }
html.film-on .film .moda .pag__frase { font-size: min(calc(var(--ph) * .062), calc(var(--pw) * .062)); }
html.film-on .film .moda .pag__apertura .riv__t { font-size: calc(var(--ph) * .15); }
@media (max-width: 1300px) {
  html.film-on .film .moda .pag__num { font-size: calc(var(--ph) * .2); }
  html.film-on .film .moda .pag__apertura .riv__t { font-size: calc(var(--ph) * .11); }
}
html.film-on.film-chiaro .filo, html.film-on.legge.film-chiaro .filo { color: #1D1915; }
@media (prefers-reduced-motion: reduce) {
  .moda.viva .riv__libro { transition: none; }
}

/* ========================================================== I DUE CERCHI
   La fermata del libro in casa: i due cerchi della copertina vera di
   Antropotech, ANTROPO sopra e TECH sotto, su carta crema. Si avvicinano
   in tre passi e all'ultimo sopra di loro nasce il libro 3D. Carta e
   colori sono quelli della copertina; i cerchi li disegna site.js (I DUE
   CERCHI) su una tela, e la tela e la carta, di seta nei colori della
   copertina: la sala e tutta la finestra.
   Come le altre fermate della casa esiste solo nel film. */
.cerchi {
  --carta: #F1EEE7;
  --inchiostro: #1D1D1D;
  --inchiostro-2: rgba(29, 29, 29, .66);
  --inchiostro-3: rgba(29, 29, 29, .4);
  --viola: #8A1FBE;
  --magenta: #D9399B;
  --arancio: #EB7458;
  --giallo: #E8B23A;
}
.cerchi__sala { position: absolute; inset: 0; overflow: hidden; color: var(--inchiostro); pointer-events: auto; -webkit-user-select: none; user-select: none; }
/* senza tela resta la carta, coi testi e il libro */
.cerchi:not(.vivo) .cerchi__sala { background: var(--carta); }
.cerchi__scena { position: absolute; inset: 0; }
.cerchi__tela { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* il libro nasce di fronte sopra i cerchi della sua copertina: fino ad
   allora non si vede e non si afferra. Posto e misura li scrive site.js */
.cerchi__libro { position: absolute; z-index: 1; margin: 0; opacity: 0; pointer-events: none; transition: opacity .55s var(--wave-via); }
.cerchi__libro.nato, .cerchi:not(.vivo) .cerchi__libro { opacity: 1; pointer-events: auto; transition: opacity 1.1s var(--wave); }
.cerchi__nome { position: absolute; z-index: 2; left: 0; top: 0; margin: 0; font-size: .68rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--inchiostro-2); white-space: nowrap; pointer-events: none; will-change: transform; transition: opacity .7s var(--wave); }
.cerchi__nome b { font-weight: 500; color: var(--inchiostro); }
.cerchi.ultimo .cerchi__nome, .cerchi:not(.vivo) .cerchi__nome { opacity: 0; }
/* i testi, come la fermata Chi sono: tutti nello stesso posto, se ne
   vede uno alla volta. Chi arriva entra a due toni (site.js, DUE TONI),
   chi se ne va sfuma. Sulla carta l'inchiostro prende il posto del bianco */
/* I testi si vedono solo con la macchina ferma sulla fermata: arrivando
   entra il passo in cui si e, a due toni; ripartendo sfumano. A ogni
   scroll il passo vecchio sfuma del tutto prima che entri il nuovo:
   insieme si sovrapponevano */
.cerchi__testi { position: absolute; z-index: 3; left: var(--pad); top: 0; bottom: 0; width: min(34vw, 38rem); display: grid; align-items: center; pointer-events: none; opacity: 0; transition: opacity .3s var(--wave-via); }
.cerchi.in-fermata .cerchi__testi, .cerchi:not(.vivo) .cerchi__testi { opacity: 1; transition: none; }
.cerchi__passo { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .24s var(--wave-via), visibility 0s linear .24s; }
.cerchi__passo.attivo { opacity: 1; visibility: visible; pointer-events: auto; transition: visibility 0s; }
.cerchi .fermata__occhio { color: var(--inchiostro-2); }
.cerchi .fermata__nota { color: rgba(29, 29, 29, .78); }
.cerchi .fermata__vai { color: var(--inchiostro); }
/* il link al sito del libro prende l'arcobaleno della copertina sotto la
   mano, come le voci del sito del libro ma senza il giro delle lettere:
   la sfumatura corre da sinistra sopra l'inchiostro, scritta e filo
   insieme, e la freccia arriva arancio */
.cerchi .fermata__vai > span:first-child {
  background-image: linear-gradient(115deg, var(--viola) 0%, var(--magenta) 42%, var(--arancio) 72%, var(--giallo) 100%), linear-gradient(var(--inchiostro), var(--inchiostro));
  background-size: 0% 100%, 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-size .7s var(--wave);
}
.cerchi .fermata__vai::after { opacity: 1; background: linear-gradient(115deg, var(--viola) 0%, var(--magenta) 42%, var(--arancio) 72%, var(--giallo) 100%) left / 0% 100% no-repeat, rgba(29, 29, 29, .4); transition: background-size .7s var(--wave); }
.cerchi .fermata__vai .arrow { transition: transform var(--esce), color .7s var(--wave); }
.cerchi .fermata__vai:is(:hover, :focus-visible) > span:first-child { background-size: 100% 100%, 100% 100%; }
.cerchi .fermata__vai:is(:hover, :focus-visible)::after { background-size: 100% 100%, auto; }
.cerchi .fermata__vai:is(:hover, :focus-visible) .arrow { color: var(--arancio); }
.cerchi :is(a, button):focus-visible { outline: 2px solid var(--inchiostro); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .cerchi__testi { opacity: 1; transition: none; }
  .cerchi :is(.cerchi__passo, .cerchi__passo.attivo, .cerchi__libro, .cerchi__libro.nato) { transition-duration: .01s; transition-delay: 0s; }
}

/* Il filo nel film: le tappe sono le fermate, sempre chiare sul set. */
html.film-on .filo, html.film-on.legge .filo { color: var(--white); }
html.film-on .filo li[data-modo="lunga"],
html:not(.film-on) .filo li[data-modo="film"] { display: none; }

/* ============================================================== 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 { 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;
}
.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 span, .btn-line .arrow { position: relative; z-index: 1; transition: color var(--t-fast); }
.btn-line:hover { color: var(--white); }
.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); }

/* ============================================================== 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); }
/* ===================================================== LE AREE
   Sei righe distese, come un indice: il numero nel margine, il titolo a
   tutta voce, la materia di lato. Ogni riga e un collegamento intero.
   L'indice sta in una schermata: il titoletto in alto, e le sei righe si
   dividono l'altezza che resta. Il titolo si misura anche sull'altezza
   della finestra, cosi su uno schermo basso le righe non escono di sotto.

   Sotto la mano l'indice respira: la riga guardata si apre a soffietto e
   mostra la frase dell'area, le altre cedono spazio e si ritirano, il
   titolo si riempie lettera per lettera e accanto al puntatore scivola
   la foto dell'area, grande e nitida. */
.work--aree {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(2.4em, 7vh, 4.4em) 0 clamp(1.6em, 4vh, 3em);
}
.work--aree > .container { flex: 1; display: flex; flex-direction: column; }
.work--aree .work__head { padding-bottom: clamp(1.2em, 3vh, 2.4em); }
.aree { position: relative; flex: 1; display: flex; flex-direction: column; }
.aree__righe { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.area { flex: 1 1 0; min-height: 0; display: flex; border-bottom: 1px solid var(--border); transition: flex-grow .9s var(--wave); }
/* il soffietto: la riga aperta prende il doppio, le altre cedono il
   resto - la somma resta sei, e la sezione non cambia altezza */
.aree__righe.is-apre > .area { flex-grow: .8; }
.aree__righe.is-apre > .area.is-on { flex-grow: 2; }
.area__via {
  position: relative;
  display: grid;
  grid-template-columns: minmax(2.4rem, 7%) minmax(0, 1fr) minmax(11rem, 24%);
  align-items: center;
  column-gap: var(--gap);
  flex: 1;
  padding: clamp(.8rem, 1.8vh, 1.6rem) 0;
  color: var(--dark);
  transition: opacity .6s var(--e);
}
.area__via:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.aree__righe.is-apre > .area:not(.is-on) .area__via { opacity: .32; }
.area__n {
  align-self: start;
  padding-top: .7em;
  font-size: .6rem;
  letter-spacing: .05em;
  color: var(--gray);
  transition: color .5s var(--e);
}
.area__t {
  font-size: clamp(2.2rem, min(6.2vw, 7.6svh), 6.2rem);
  line-height: 1;
  letter-spacing: -.035em;
  text-wrap: balance;
  transition: transform var(--esce);
}
.area.is-on .area__n { color: var(--blue); }
.area.is-on .area__t { transform: translate3d(.25em, 0, 0); transition: transform var(--entra); }
.area__lato { position: relative; }
.area__m { display: block; font-size: clamp(.9rem, 1.05vw, 1.05rem); line-height: 1.4; }
/* la frase dell'area sta sotto la materia, fuori dal flusso: la riga
   chiusa non la sente, quella aperta ha l'altezza per mostrarla */
.area__d {
  position: absolute;
  left: 0; top: calc(100% + .7em);
  width: 100%;
  max-width: 34ch;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--gray);
  opacity: 0;
  transform: translate3d(0, .6em, 0);
  transition: opacity .25s var(--e), transform var(--esce);
  pointer-events: none;
}
.area.is-on .area__d { opacity: 1; transform: none; transition: opacity .5s var(--e) .2s, transform var(--entra) .15s; }
@media (max-height: 760px) { .area__d { display: none; } }

/* La foto scivola accanto alla mano. Un riquadro solo per tutte le
   righe: il JS lo tiene di lato al puntatore, mai sotto - il titolo che
   si legge resta scoperto - e accende l'immagine della riga aperta. Si
   apre dal basso entrando nell'indice e si richiude uscendo; fra una
   riga e l'altra le foto si danno il cambio in dissolvenza. Solo dove
   c'e un puntatore fine; altrove non si mostra e le immagini, pigre e
   fuori vista, non si scaricano nemmeno. */
.aree__foto {
  position: absolute;
  left: 0; top: 0;
  z-index: 2;
  width: clamp(13rem, 18vw, 21rem);
  aspect-ratio: 4 / 5;
  pointer-events: none;
}
.aree__cornice {
  position: absolute;
  inset: 0;
  border-radius: .6em;
  overflow: hidden;
  background: var(--lightgray);
  clip-path: inset(100% 0 0 0 round .6em);
  transition: clip-path .6s var(--e);
}
.aree.is-guarda .aree__cornice { clip-path: inset(0 0 0 0 round .6em); transition: clip-path .9s var(--wave); }
.aree__foto img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.14);
  transition: opacity .55s var(--e), transform 1.2s var(--wave);
}
.aree__foto img.is-on { opacity: 1; transform: none; }
html:not(.fine) .aree__foto { display: none; }

/* ============================================================== NUMERI */
.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 LIBRO 3D
   Lo stesso libro del sito di Antropotech: sei facce in una scatola CSS
   3D, con le sue misure e le sue correzioni. Gira da solo, si afferra e
   guarda il puntatore; il motore sta in site.js. 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; }
/* sotto il libro resta aria per il galleggio e per l'ombra a terra */
.libro3d { margin: 0 0 clamp(1.5rem, 5vh, 3rem); }
.hb-stage {
  --hbw: min(320px, 58vw); --hbh: calc(var(--hbw) * 1.564); --hbt: calc(var(--hbw) * .0633);
  /* sormonto fra le facce: chiude le cuciture agli spigoli senza
     ingrossare la scatola */
  --hbb: .75px;
  position: relative; width: var(--hbw); height: var(--hbh);
  perspective: 1400px;
  /* pan-y e non none: sul telefono il dito che scorre in verticale sopra
     il libro deve ancora scorrere la pagina */
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  filter: drop-shadow(0 30px 40px rgba(29, 29, 29, .38));
  animation: hb-galleggia 6s ease-in-out infinite; will-change: transform;
}
.hb-stage.dragging { cursor: grabbing; }
/* il galleggio e simmetrico: il centro dell'oscillazione e il centro del posto */
@keyframes hb-galleggia { 0%, 100% { transform: translateY(12px); } 50% { transform: translateY(-12px); } }
.hb-float { width: 100%; height: 100%; transform-style: preserve-3d; }
.hb-book { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.hb-face { position: absolute; top: 0; left: 0; backface-visibility: hidden; }
.hb-face img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.hb-front { width: var(--hbw); height: var(--hbh); transform: translateZ(calc(var(--hbt) / 2)); }
/* il dorso prende la luce dei piatti: un velo uniforme porta il bianco
   dipinto allo stesso tono del bianco fotografato */
.hb-spine::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: rgba(29, 29, 29, .16); }
/* la quarta si disegna tre volte piu grande e si rimpicciolisce: resta
   nitida quando il giro la stira */
.hb-back {
  width: calc(var(--hbw) * 3); height: calc(var(--hbh) * 3);
  left: calc(var(--hbw) * -1); top: calc(var(--hbh) * -1);
  transform: rotateY(180deg) translateZ(calc(var(--hbt) / 2)) scale(.333333);
}
/* la riga stampata sul fronte a 36 pixel dal dorso, rifatta sulla quarta
   colonna per colonna */
.hb-back::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0 96.1%,
    rgba(0, 0, 0, .027) 96.1% 96.2%,
    rgba(0, 0, 0, .039) 96.2% 96.3%,
    rgba(0, 0, 0, .043) 96.3% 96.4%,
    rgba(0, 0, 0, .020) 96.4% 96.5%,
    rgba(0, 0, 0, 0) 96.5% 100%);
}
/* il dorso si disegna quattro volte piu grande e si rimpicciolisce; il
   sormonto sta solo sullo spessore, dietro le copertine */
.hb-spine {
  --hbsw: calc(var(--hbt) + var(--hbb) * 2);
  --hbsh: var(--hbh);
  width: calc(var(--hbsw) * 4); height: calc(var(--hbsh) * 4);
  left: calc((var(--hbw) - var(--hbt)) / 2 - var(--hbb) - var(--hbsw) * 1.5);
  top: calc(var(--hbsh) * -1.5);
  transform: rotateY(-90deg) translateZ(calc(var(--hbw) / 2)) scale(.25);
  background: #FFFFFF;
  display: flex; flex-direction: column; align-items: center;
}
.hb-author-zone, .hb-pub-zone { position: relative; width: 100%; flex: 1 1 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* inchiostro sulla carta del libro: colori e caratteri del libro vero,
   non del sito */
.hb-author { writing-mode: vertical-rl; font-family: 'Poppins', sans-serif; font-size: 36px; font-weight: 700; letter-spacing: 3.6px; color: #1D1D1D; white-space: nowrap; }
/* la fascia del dorso: viola, magenta, arancio e giallo della copertina */
.hb-grad {
  width: 100%; flex: 1 1 0;
  background: linear-gradient(180deg, #6B14A6 0%, #8A1FBE 16%, #D9399B 46%, #EB7458 74%, #E8B23A 100%);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hb-title { writing-mode: vertical-rl; font-family: 'Archivo Black', sans-serif; font-size: 52px; letter-spacing: 5.2px; color: #FFFFFF; white-space: nowrap; }
/* il marchio dell'editore ruotato sul dorso. Due classi perche la regola
   delle facce non lo stiri; le lettere del marchio stanno sotto il
   centro del disegno, e translateY le riporta in colonna */
.hb-pub-zone .hb-pub-logo { position: absolute; top: 50%; left: 50%; height: 72px; width: auto; max-width: none; object-fit: contain; transform: translate(-50%, -50%) rotate(90deg) translateY(-19.5%); display: block; }
/* le righe della carta alla loro misura vera, disegnate e non ingrandite */
.hb-pages { background: repeating-linear-gradient(90deg, #FDFDFC 0 1.6px, #E9E6DF 1.6px 2.4px); }
.hb-edge-fore {
  width: calc(var(--hbt) + var(--hbb) * 2); height: var(--hbh); top: 0;
  left: calc((var(--hbw) - var(--hbt)) / 2 - var(--hbb));
  transform: rotateY(90deg) translateZ(calc(var(--hbw) / 2));
}
.hb-edge-top, .hb-edge-bottom {
  width: var(--hbw); height: calc(var(--hbt) + var(--hbb) * 2);
  left: 0; top: calc((var(--hbh) - var(--hbt)) / 2 - var(--hbb));
  background: repeating-linear-gradient(0deg, #FDFDFC 0 1.6px, #E9E6DF 1.6px 2.4px);
}
.hb-edge-top { transform: rotateX(90deg) translateZ(calc(var(--hbh) / 2)); }
.hb-edge-bottom { transform: rotateX(-90deg) translateZ(calc(var(--hbh) / 2)); }
.hb-shadow {
  position: absolute; left: 50%; bottom: -70px; width: calc(var(--hbw) * .92); height: 44px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(29, 29, 29, .28) 0%, rgba(29, 29, 29, .1) 48%, transparent 72%);
  filter: blur(9px); pointer-events: none;
}
/* i corpi delle scritte restano fissi per taglia: dentro l'albero 3D
   Chrome misura male il testo verticale se il corpo arriva da un calc() */
@media (max-width: 700px) {
  .hb-stage { --hbw: 195px; --hbh: 305px; --hbt: 12px; }
  .hb-author { font-size: 20px; letter-spacing: 2px; }
  .hb-title { font-size: 32px; letter-spacing: 3.2px; }
  .hb-pub-zone .hb-pub-logo { height: 44px; }
}
.volume__gira { display: inline-flex; align-items: center; gap: .6em; padding: .4em 0; border: 0; background: none; color: var(--dark); cursor: pointer; font: inherit; }
@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)); }
  .libro__testo { padding: 12vh 0 16vh; }
}
@media (prefers-reduced-motion: reduce) { .hb-stage { animation: none; } }

/* 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 .studio__grid,
.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 .studio__grid,
  .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 .studio__grid,
  .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 .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 .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__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; }

/* ================================================= 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. */
/* Il riempimento si dipinge solo quando serve. A riposo la copia scura lo
   copre tutto, ma duecento lettere con cinque strati di gradiente in
   fusione costavano lo stesso a ogni ridisegno del piede: era li che la
   salita e la battitura perdevano fotogrammi. Al passaggio arriva subito;
   uscendo resta finche la copia non l'ha ricoperto, poi se ne va. */
.foot--studio .soc-ch {
  position: relative;
  display: inline-block;
  background-image: none;
  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;
  transition: background-image 1.3s step-end allow-discrete;
}
.foot--studio a:hover .soc-ch,
.foot--studio a:focus-visible .soc-ch,
.foot--studio button:hover .soc-ch,
.foot--studio button:focus-visible .soc-ch {
  background-image: var(--iride);
  transition: none;
}
.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 .studio__grid, .perno > .foot .studio__bar { transform: none; }
  .commiato,
  .perno > .foot,
  .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; }
}

/* 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-pila { flex: none; }
  .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; }
}

/* ============================================================ 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) {
  .menu-btn { width: var(--menu-w); height: var(--menu-h); }
  .area__via { grid-template-columns: 2rem minmax(0, 1fr); row-gap: .7em; column-gap: .8em; padding: 1.5rem 0; }
  .area__n { padding-top: .5em; }
  .area__t { font-size: clamp(2rem, 8.4vw, 3.4rem); }
  .area__lato { grid-column: 2; }
  .area__m { font-size: .85rem; color: var(--gray); }
  .area__d { display: none; }
  /* 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);
    translate: none;
  }
  .hanger {
    left: auto; right: 0;
    top: auto; bottom: clamp(9.5em, 21vh, 14em);
    font-size: .85rem;
    border-radius: var(--bar-r) 0 0 var(--bar-r);
    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; }
  .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; }
  /* La parola del sipario senza nessuna transizione. Le durate a zero non
     bastano: lo scarto di 62 ms fra una lettera e l'altra la faceva
     comparire a scatti, e la transizione di font-size falsava la misura
     di fit(), che la rimpiccioliva sotto gli occhi. */
  .loader__word, .loader__ch > i { transition: none !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: clip-path .62s cubic-bezier(.22, .8, .32, 1);
  transition-delay: var(--hd, 0s);
}
@media (prefers-reduced-motion: reduce) {
  :is(.posta__forn:hover, .posta__forn:focus-visible) .nav-ch > i::after { transition: none; }
}

.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; } }