/* ═══════════════════════════════════════════════════════════
   Sceneggiatrice — home page
   Hero: scena SVG a livelli, camera guidata dallo scroll
   ═══════════════════════════════════════════════════════════ */

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

:root {
  /* I caratteri stanno qui e solo qui: cambiarli è una riga, non una caccia.
     Un grottesco solo su due registri — Archivo chiuso e nero per tutti i
     titoli, lo stesso Archivo aperto e leggero per il testo corrente — più
     Space Mono per le etichette, che è il richiamo al copione. Il serif
     tiene una riga sola in tutto il sito: quella d'apertura. */
  /* Il grottesco stretto delle righe a bandiera, che è anche il carattere
     di tutti i titoli. Il modello è Helvetica Now Display Condensed Bold,
     che ha licenza a pagamento: al suo posto sta Archivo sull'asse di
     larghezza al 62%, che è lo stesso impianto. Se un domani l'Helvetica
     si compra, va messa qui davanti e basta. */
  --condensato: 'Helvetica Now Display Condensed', 'Archivo', 'Helvetica Neue',
                'Arial Narrow', system-ui, sans-serif;
  --display: var(--condensato);
  /* l'unico superstite del serif: il titolo d'apertura, e solo quello */
  --serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --testo:   'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'Space Mono', 'Courier New', monospace;

  --bg:        #0B0B0B;
  --fg:        #F2EEE8;
  --fg-dim:    #9A948C;

}

html { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--testo);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ─────────────── nav ─────────────── */
/* Sull'illustrazione la barra vive in differenza: non ha fondo, si
   inverte su quello che le passa sotto e resta leggibile ovunque. Ma
   sulle sezioni scritte quel trucco non basta — due testi nello stesso
   punto restano due testi — quindi appena finita la scena la barra si
   posa: prende un fondo pieno, e sotto ci passano le sezioni invece di
   attraversarla. In più si ritira scorrendo in giù e torna scorrendo in
   su, così quando leggi non c'è nulla davanti. */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 48px);
  padding: 26px clamp(20px, 4vw, 56px);
  /* Sull'illustrazione la barra stava in mix-blend-mode: difference, e si
     invertiva su quello che le passava sotto. Leggibile ovunque, e cara:
     una fusione su un elemento fisso largo quanto lo schermo va ricalcolata
     a ogni fotogramma contro una scena che si sta già muovendo. Al suo posto
     una velatura scura, disegnata una volta e poi ferma: costa niente, e il
     bianco sopra si legge lo stesso. */
  background: linear-gradient(to bottom, rgb(0 0 0 / .58), rgb(0 0 0 / 0));
  pointer-events: none;
  transition: transform .5s cubic-bezier(.22,.61,.36,1),
              background-color .45s ease,
              padding .45s ease;
}
.nav a, .nav button { pointer-events: auto; }

/* posata: fondo pieno, niente più fusione col disegno */
.nav.is-posata {
  /* Fondo pieno e basta. Prima c'era una sfocatura di quello che le passa
     sotto: bella, e cara — il browser deve rifare la sfocatura a ogni
     fotogramma di scroll, per tutta la larghezza dello schermo, proprio
     mentre sta già ridisegnando la pagina. Su un fondo quasi nero la
     differenza si vede appena; nei fotogrammi persi si vedeva. */
  background-color: rgb(11 11 11 / .96);
  background-image: none;   /* posata non serve più la velatura: c'è il pieno */
  padding-top: 15px;
  padding-bottom: 15px;
}
/* ritirata: fuori dal campo, finché non si torna verso l'alto */
.nav.is-ritirata { transform: translateY(-105%); }

.nav__brand {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(13px, 1.05vw, 16px);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg);
  text-decoration: none;
}
.nav__links { display: flex; gap: clamp(14px, 1.9vw, 34px); }
.nav__links a {
  position: relative;
  font-size: clamp(10px, .82vw, 12px);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg);
  text-decoration: none;
  opacity: .72;
  transition: opacity .35s ease;
}
.nav__links a:hover { opacity: 1; }
/* il filetto sotto la voce della sezione in cui ti trovi */
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--verm);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.nav__links a.is-qui { opacity: 1; }
.nav__links a.is-qui::after { transform: none; }
@media (max-width: 740px) { .nav__links { display: none; } }

/* ─────────────── hero ─────────────── */
.hero { height: 320vh; position: relative; }

.hero__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg);
}

.hero__title {
  position: absolute;
  top: clamp(58px, 11vh, 130px);
  left: 50%;
  margin: 0;
  transform: translate(-50%, var(--t-y));
  opacity: var(--t-o);
  /* l'unica riga in serif di tutto il sito */
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 7.2vw, 108px);
  line-height: 1;
  letter-spacing: -.012em;
  white-space: nowrap;
  color: var(--fg);
  /* i due valori che js/scene.js scrive qui sopra */
  --t-o: 1;
  --t-y: 0px;
}

/* larghezza, altezza, offset e raggio li scrive js/scene.js:
   dipendono dalle proporzioni reali della finestra */
.hero__frame {
  position: relative;
  width: 78vw;
  height: 44vh;
  overflow: hidden;
  background: #C2492B;
}

/* La scritta sul foglio è a spaziatura fissa: oltre a ricordare il copione,
   è ciò che rende esatto lo scoprimento lettera per lettera. */
.tw {
  font-family: var(--mono);
  font-weight: 700;
  fill: #3b352c;
  letter-spacing: 0;
}
/* la riga dei mestieri: stesso nero del nome, in grassetto, e allineata
   a destra come il nome — la x giusta la calcola js/scene.js misurando il
   testo vero, perché dipende da quanto è largo davvero e non dal corpo */
.tw--small { font-weight: 700; fill: #3b352c; }
#tcaret { fill: #3b352c; }

#scene {
  display: block;
  width: 100%;
  height: 100%;
  /* l'inclinazione la scrive js/scene.js: dipende dall'altezza della cornice */
  transform-origin: 50% 62%;
}

/* ─────────────── hint di scroll ─────────────── */
.hero__hint {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  --h-o: 1;
  opacity: var(--h-o);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--fg-dim);
  pointer-events: none;
}
.hero__hint i {
  width: 1px;
  height: 42px;
  background: linear-gradient(to bottom, var(--fg-dim), transparent);
  animation: drop 2.1s ease-in-out infinite;
}
@keyframes drop {
  0%, 100% { transform: scaleY(.35); transform-origin: top; opacity: .4; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1;  }
}


/* ═══════════════════════════════════════════════════════════
   Le sezioni sotto all'animazione
   ═══════════════════════════════════════════════════════════ */

:root {
  --verm:  #D9724E;   /* l'arancio dell'illustrazione, schiarito */
  --sage:  #8BA882;
  --hair:  #2A2724;   /* i filetti */
}

.after { position: relative; z-index: 2; background: var(--bg); }
.after section { scroll-margin-top: 96px; }

/* occhiello: l'etichettina in Courier che apre ogni sezione */
.occhiello {
  margin: 0 0 clamp(28px, 5vh, 64px);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--verm);
}


/* ─────────── 3 · brand ─────────── */
.brand {
  padding: clamp(56px, 9vh, 104px) 0 clamp(46px, 7vh, 84px);
  overflow: hidden;
}
.brand .occhiello { padding: 0 clamp(24px, 6vw, 72px); max-width: 1320px; margin-inline: auto; }

.nastro { position: relative; }
/* i bordi sfumano nel nero: il nastro non "comincia", scorre e basta */
.nastro::before, .nastro::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(60px, 12vw, 200px);
  z-index: 2;
  pointer-events: none;
}
.nastro::before { left: 0;  background: linear-gradient(to right, var(--bg), transparent); }
.nastro::after  { right: 0; background: linear-gradient(to left,  var(--bg), transparent); }

.nastro__pista { display: flex; width: max-content; will-change: transform; }
.nastro__gruppo {
  display: flex;
  align-items: center;
  gap: clamp(50px, 7vw, 120px);
  margin: 0;
  padding: 0 clamp(25px, 3.5vw, 60px);
  list-style: none;
}
/* <picture> è solo un involucro: senza display:block porta con sé
   l'interlinea di una riga di testo e sballa l'allineamento della fila */
.nastro__gruppo picture, .bio__tenda picture { display: block; }
.nastro__gruppo img {
  display: block;
  height: clamp(26px, 3.4vw, 46px);
  width: auto;
  opacity: .62;
  transition: opacity .45s ease;
}
.nastro__gruppo li:hover img { opacity: 1; }
/* i due logo col marchio più minuto vogliono qualche punto in più */
.nastro__gruppo li:nth-child(3) img { height: clamp(34px, 4.4vw, 60px); }
.nastro__gruppo li:nth-child(5) img { height: clamp(30px, 3.9vw, 52px); }


/* ─────────── estratti: la sequenza ───────────
   Qui l'animazione non è trascinata dallo scroll come nel resto del sito:
   arrivi, e parte da sola. La regia sta tutta nei ritardi:

       0,00 s   il titolo si scrive parola per parola
       0,45 s   una sola pagina monta al centro
       0,95 s   il ventaglio si apre, dal centro verso l'esterno
       1,75 s   compaiono i nomi

   Lo stato a riposo è quello aperto: è la classe che manca, prima
   dell'ingresso, a tenere tutto chiuso. Così basta aggiungerla una volta
   e le transizioni fanno il resto, senza un fotogramma di JavaScript. */
.estratti {
  padding: clamp(40px, 6vh, 72px) 0 clamp(56px, 9vh, 104px);
}
.estratti__fermo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 72px);
}
.estratti .occhiello { margin-bottom: 18px; }
.estratti__claim {
  margin: 0 0 clamp(30px, 5vh, 58px);
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 58px);
  line-height: 1.1;
}

/* le parole del titolo: qui non le muove --t ma un'animazione con
   ritardo proporzionale alla loro posizione nella fila */
.estratti .pr { opacity: 0; transform: translateY(.42em); }
.estratti.is-via .pr {
  animation: parolaSale .75s cubic-bezier(.22,.61,.36,1) calc(var(--d) * .5s) both;
}
@keyframes parolaSale {
  from { opacity: 0; transform: translateY(.42em); }
  to   { opacity: 1; transform: none; }
}

/* --su: di quanto il ventaglio sta più in alto del centro della pila,
   per lasciare sotto lo spazio dei nomi */
/* Sette fogli. Il passo e la rotazione si sono stretti rispetto ai cinque
   di prima: con gli stessi valori i due fogli nuovi ai capi uscivano dalla
   colonna. */
.ventaglio { --passo: 44%; --su: 16px; }
.ventaglio__pila {
  position: relative;
  /* Alta abbastanza da contenere le pagine *e* i loro nomi. Mettere
     spazio col padding non funzionava: le pagine sono centrate, quindi
     scendevano anche loro e il problema si spostava senza risolversi.
     Il ventaglio va alzato dentro la pila (vedi --su qui sotto), e lo
     spazio che si libera in basso è quello dei nomi. */
  /* Stretta sulle pagine: l'aria che avanzava qui dentro era tutta in
     fondo, e allontanava il nome dal ventaglio senza servire a niente. */
  height: min(53vh, 44.5vw);
}

.foglio {
  position: absolute;
  top: 50%; left: 50%;
  width: min(20vw, 29vh);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 1;
  transform-origin: 50% 60%;
  transform:
    translate(-50%, -50%)
    translateX(calc(var(--i) * var(--passo)))
    translateY(calc(var(--a) * 8px - var(--su)))
    rotate(calc(var(--i) * 3deg));
  transition:
    transform .95s cubic-bezier(.2,.72,.24,1) calc(.95s + var(--a) * .1s),
    opacity .45s ease calc(.95s + var(--a) * .1s), translate .45s cubic-bezier(.22,.61,.36,1);
  z-index: calc(10 - var(--a));
}
/* Prima dell'ingresso: tutto impilato al centro e invisibile.
   La chiusura è istantanea di proposito. Succede quando la sezione è
   fuori campo, quindi nessuno la vede; e se la lasciassi animata, un
   andirivieni veloce farebbe incrociare la chiusura con l'apertura e si
   vedrebbe mezza sequenza. Ad animarsi è solo l'andata. */
.estratti:not(.is-via) .foglio {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.62);
  transition: none;
}
/* la prima pagina monta prima delle altre, con un filo di rimbalzo */
.foglio--primo {
  transition:
    transform .8s cubic-bezier(.2,1.28,.36,1) .45s,
    opacity .4s ease .45s, translate .45s cubic-bezier(.22,.61,.36,1);
}

.foglio img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 18px 50px rgb(0 0 0 / .6), 0 2px 0 rgb(255 255 255 / .06);
  /* Il sollevamento sta sull'immagine e non sul bottone: sul bottone c'è la
     trasformazione del ventaglio, e due transizioni sulla stessa proprietà
     si darebbero fastidio. Due elementi, due compiti. */
  transform: translateY(0);
  transition: transform .45s cubic-bezier(.22,.61,.36,1),
              box-shadow .45s ease,
              filter .4s ease;
}

/* Al passaggio del mouse la pagina sorvolata non fa niente: resta com'è,
   e continua a dondolare con le altre. A cambiare è tutto il resto, che
   si scurisce — non si smaterializza: pagine trasparenti sovrapposte si
   leggerebbero l'una attraverso l'altra. È il buio attorno a fare la
   scelta, non la pagina a farsi avanti. */
/* Le pagine respirano sempre: un dondolio lento, ognuna con il suo passo,
   che parte a ventaglio aperto e non si ferma mai — nemmeno col mouse
   sopra. Per questo il sollevamento al passaggio del mouse non c'è più:
   stava sulla stessa proprietà del dondolio, e due movimenti sulla stessa
   proprietà si escludono a vicenda. Resta il buio attorno. */
@keyframes galleggia {
  0%   { transform: translateY(0)     rotate(0deg); }
  50%  { transform: translateY(-9px)  rotate(.4deg); }
  100% { transform: translateY(0)     rotate(0deg); }
}
.estratti.is-via .foglio img {
  animation: galleggia calc(4.4s + var(--f) * .55s) ease-in-out infinite;
  animation-delay: calc(2.1s + var(--f) * .28s);
}
@media (hover: hover), (min-width: 821px) {
  .ventaglio__pila:hover .foglio img { filter: brightness(.34); }
  .ventaglio__pila .foglio:hover img,
  .ventaglio__pila .foglio:focus-visible img { filter: none; }
}
/* col dito non c'è il passaggio sopra: il primo tocco sceglie la pagina
   (gli altri si scuriscono e compare il nome), il secondo la apre */
.ventaglio__pila.ha-scelta .foglio img { filter: brightness(.34); }
.ventaglio__pila.ha-scelta .foglio.is-scelto img { filter: none; }
.foglio:focus-visible { outline: none; }

/* Sul desktop il nome non sta sotto a ogni pagina: ce n'è uno solo, in
   mezzo, che cambia con la pagina sorvolata. Averne cinque sotto a un
   ventaglio di fogli sovrapposti voleva dire cinque scritte che si
   accavallano, e il ritardo che le faceva entrare in sequenza si
   applicava poi a ogni passaggio del mouse: sembravano accendersi a caso.
   Sul telefono, dove il ventaglio è una fila e il mouse non c'è, i nomi
   sotto a ogni pagina restano. */
.foglio__targa { display: none; }
.foglio__targa b {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(13px, 1.1vw, 17px);
  color: var(--fg);
}
.foglio__targa i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--verm);
}
/* il nome unico, sotto al ventaglio */
.ventaglio__nome {
  display: grid;
  place-items: center;
  /* l'altezza è fissa perché il nome e l'invito si scambiano nello stesso
     posto: se la riga si adattasse al contenuto, il ventaglio sopra
     scatterebbe su e giù a ogni passaggio del mouse */
  min-height: 56px;
  margin: 0;
  text-align: center;
}
.ventaglio__nome > * {
  grid-area: 1 / 1;                 /* impilati nello stesso posto: si scambiano */
  transition: opacity .3s ease;
}
.ventaglio__titolo { display: grid; gap: 6px; justify-items: center; opacity: 0; }
.ventaglio__nome.ha-nome .ventaglio__titolo { opacity: 1; }
.ventaglio__titolo b {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 34px);
  line-height: 1.1;
  color: var(--fg);
}
.ventaglio__titolo i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--verm);
}
.ventaglio__invito {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #5E594F;
  opacity: 1;
  transition: opacity .3s ease 1.9s;   /* il ritardo vale solo all'ingresso */
}
.ventaglio__nome.ha-nome .ventaglio__invito { opacity: 0; transition-delay: 0s; }
.estratti:not(.is-via) .ventaglio__invito { opacity: 0; transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .estratti .pr, .estratti:not(.is-via) .pr { opacity: 1; transform: none; animation: none; }
  .estratti:not(.is-via) .foglio { opacity: 1; transform: none; }
  .estratti:not(.is-via) .foglio__targa { opacity: 1; }
  .estratti.is-via .foglio img { animation: none; }
}

/* ─────────── il lettore a schermo intero ─────────── */
.lettore {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(6px, 1.6vw, 22px);
  padding: clamp(10px, 2vh, 26px) clamp(8px, 2vw, 28px);
  background: rgb(6 6 6 / .96);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility .45s;
}
.lettore.is-aperto { opacity: 1; visibility: visible; }

.lettore__foglio {
  margin: 0;
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 14px;
  max-height: 100%;
}
.lettore__foglio img {
  display: block;
  /* la pagina prende tutta l'altezza che resta: è A4, quindi la larghezza
     scende di conseguenza. Meno cornice qui vuol dire testo più grande. */
  max-width: min(94vw, calc((100vh - 116px) * .707));
  max-height: calc(100vh - 116px);
  width: auto; height: auto;
  border-radius: 2px;
  box-shadow: 0 30px 90px rgb(0 0 0 / .8);
  transform: scale(.96);
  opacity: 0;
  transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .4s ease;
}
.lettore.is-aperto .lettore__foglio img { transform: none; opacity: 1; }
.lettore__foglio figcaption { display: grid; gap: 4px; justify-items: center; text-align: center; }
.lettore__foglio figcaption b {
  font-family: var(--display); font-weight: 500; font-size: clamp(15px, 1.4vw, 20px); color: var(--fg);
}
.lettore__foglio figcaption i {
  font-family: var(--mono); font-style: normal; font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--verm);
}

.lettore__chiudi {
  position: absolute;
  top: clamp(14px, 3vh, 34px); right: clamp(14px, 3vw, 40px);
  padding: 9px 18px;
  border: 1px solid #343029;
  border-radius: 999px;
  background: none;
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer;
  transition: color .35s ease, border-color .35s ease;
}
.lettore__chiudi:hover { color: var(--fg); border-color: var(--verm); }

.lettore__passo {
  width: clamp(38px, 4vw, 54px);
  height: clamp(38px, 4vw, 54px);
  border: 1px solid #2A2724;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  position: relative;
  transition: border-color .35s ease, background .35s ease;
}
.lettore__passo::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 9px;
  border-left: 1px solid var(--fg-dim);
  border-bottom: 1px solid var(--fg-dim);
  transition: border-color .35s ease;
}
.lettore__passo--prima::before { transform: translate(-35%, -50%) rotate(45deg); }
.lettore__passo--dopo::before  { transform: translate(-65%, -50%) rotate(-135deg); }
.lettore__passo:hover { border-color: var(--verm); }
.lettore__passo:hover::before { border-color: var(--fg); }

body.is-bloccato { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .lettore__foglio img { transform: none !important; opacity: 1 !important; }
}

/* ─────────── 6 · contatti ─────────── */
/* ─────────── il modulo dei contatti ─────────── */
.contatti__griglia {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 44fr);
  gap: clamp(40px, 7vw, 110px);
  align-items: start;
}
@media (max-width: 900px) { .contatti__griglia { grid-template-columns: 1fr; gap: 56px; } }

.contatti__claim {
  margin: 0 0 26px;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(30px, 4vw, 58px);
  line-height: 1.12;
  letter-spacing: -.015em;
}
.contatti__claim .pr { --sp: .5; --sc: 2; }
.contatti__sotto {
  margin: 0 0 34px;
  max-width: 46ch;
  color: var(--fg-dim);
  line-height: 1.85;
  font-size: clamp(15px, 1.15vw, 17px);
}
.contatti__sotto .pr { --sp: .35; --sc: 1.538; }

.contatti__mail {
  display: inline-block;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(18px, 1.9vw, 26px);
  color: var(--fg);
  text-decoration: none;
  background-image: linear-gradient(var(--verm), var(--verm));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size .6s cubic-bezier(.22,.61,.36,1), color .4s ease;
}
.contatti__mail:hover { background-size: 100% 1px; color: var(--verm); }

.contatti__altro { display: flex; flex-wrap: wrap; gap: clamp(18px, 2.6vw, 38px); margin: 34px 0 0; padding: 0; list-style: none; }
.contatti__altro a {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-dim); text-decoration: none; transition: color .35s ease;
}
.contatti__altro a:hover { color: var(--fg); }

/* I campi sono righe, non scatole: su un fondo nero una cornice pesa, un
   filo no. Il filo vermiglio cresce da sinistra quando il campo prende
   il fuoco — lo stesso gesto dei filetti delle altre sezioni. */
.campo { position: relative; margin: 0 0 clamp(22px, 3vh, 34px); }
.campo label {
  display: block;
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-dim);
  transition: color .35s ease;
}
.campo input, .campo select, .campo textarea {
  display: block;
  width: 100%;
  padding: 10px 0 12px;
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  background: none;
  color: var(--fg);
  font-family: inherit;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.5;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo select { cursor: pointer; }
.campo select option { background: #141210; color: var(--fg); }
.campo::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 0;
  background: var(--verm);
  transition: width .55s cubic-bezier(.22,.61,.36,1);
}
.campo:focus-within::after { width: 100%; }
.campo:focus-within label { color: var(--verm); }
.campo.is-vuoto::after { width: 100%; background: #7A3A2A; }

.modulo__invia {
  position: relative;
  margin-top: clamp(8px, 2vh, 18px);
  padding: 15px 38px;
  border: 1px solid #3A3733;
  border-radius: 999px;
  background: none;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: color .45s ease, border-color .45s ease;
}
/* il pieno sale da sotto invece di accendersi: stesso gesto delle lettere */
.modulo__invia::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--verm);
  transform: translateY(101%);
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.modulo__invia span { position: relative; }
.modulo__invia:hover { color: #0B0B0B; border-color: var(--verm); }
.modulo__invia:hover::before { transform: none; }

/* Il consenso: una casella vera, non una riga di piccolo scritto. La
   spunta è disegnata a mano perché quella di sistema è azzurra e qui
   stonerebbe; il quadrato resta grande abbastanza da prenderlo col dito. */
.consenso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  margin: clamp(6px, 1.5vh, 14px) 0 clamp(22px, 3vh, 32px);
}
.consenso input {
  width: 18px; height: 18px;
  margin: 2px 0 0;
  flex: none;
  border: 1px solid #4A4642;
  border-radius: 2px;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .3s ease, background .3s ease;
}
.consenso input:checked { border-color: var(--verm); background: var(--verm); }
.consenso input:checked::before {
  content: "";
  display: block;
  width: 10px; height: 5px;
  margin: 4px auto 0;
  border: 2px solid #0B0B0B;
  border-top: 0; border-right: 0;
  transform: rotate(-45deg);
}
.consenso input:focus-visible { outline: 2px solid var(--verm); outline-offset: 3px; }
.consenso label {
  font-size: clamp(12px, .94vw, 13.5px);
  line-height: 1.7;
  color: var(--fg-dim);
  cursor: pointer;
}
.consenso.is-vuoto input { border-color: #7A3A2A; }
.consenso__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--verm);
  transition: color .3s ease;
}
.consenso__link:hover { color: var(--verm); }

.modulo__esito {
  margin: 18px 0 0;
  min-height: 1.2em;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .1em;
  color: var(--verm);
}

/* Il ripiego del modulo: compare solo quando non c'è un servizio a cui
   spedire, e deve sembrare quello che è — un avviso, non una conferma. Il
   filetto vermiglio a sinistra è lì per quello. */
.ripiego {
  margin: clamp(20px, 3vh, 32px) 0 0;
  padding: clamp(16px, 2.4vh, 24px) clamp(16px, 2vw, 24px);
  border-left: 2px solid var(--verm);
  background: rgb(255 255 255 / .03);
}
.ripiego__titolo {
  margin: 0 0 10px;
  font-family: var(--condensato);
  font-weight: 700;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  font-size: clamp(15px, 1.4vw, 19px);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--fg);
}
.ripiego__testo {
  margin: 0 0 16px;
  max-width: 52ch;
  color: var(--fg-dim);
  line-height: 1.8;
  font-size: clamp(13.5px, 1.05vw, 15px);
}
.ripiego__testo a { color: var(--fg); text-decoration-color: var(--verm); text-underline-offset: 3px; }
.ripiego__copia {
  padding: 11px 24px;
  border: 1px solid #3A3733;
  border-radius: 999px;
  background: none;
  color: var(--fg);
  font-family: var(--condensato);
  font-weight: 700;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .35s ease, border-color .35s ease;
}
.ripiego__copia:hover { color: var(--verm); border-color: var(--verm); }

/* mentre parte, il bottone non si preme due volte */
.modulo.is-invio .modulo__invia { opacity: .5; pointer-events: none; }
.modulo.is-andata .modulo__esito { color: var(--fg); }

.contatti {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(64px, 11vh, 128px) clamp(24px, 6vw, 72px) clamp(56px, 9vh, 104px);
}
.contatti__mail {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-family: var(--display);
  font-weight: 500;
  /* misurato su mercadantefabiola@gmail.com, che sono ventisette caratteri:
     a corpo più grande sfondava nella colonna del modulo accanto */
  font-size: clamp(15px, 1.75vw, 25px);
  color: var(--fg);
  text-decoration: none;
  background-image: linear-gradient(var(--verm), var(--verm));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size .6s cubic-bezier(.22,.61,.36,1), color .4s ease;
}
.contatti__mail:hover { background-size: 100% 1px; color: var(--verm); }

.contatti__altro {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 48px);
  margin: clamp(44px, 7vh, 80px) 0 0;
  padding: 0;
  list-style: none;
}
.contatti__altro a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-decoration: none;
  transition: color .35s ease;
}
.contatti__altro a:hover { color: var(--fg); }

.contatti__nota {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 14px 28px;
  margin: clamp(60px, 10vh, 110px) 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5E594F;
}
.contatti__privacy {
  padding: 0;
  border: 0;
  background: none;
  color: #5E594F;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color .35s ease;
}
.contatti__privacy:hover { color: var(--fg); }

/* ─────────── l'informativa ───────────
   Un foglio che sale dal fondo su una velina scura. È un documento, non
   una schermata: si legge su una colonna stretta, con la stessa misura
   di riga del resto del sito. */
.privacy {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vh, 48px) clamp(14px, 4vw, 40px);
  background: rgb(5 5 5 / .88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
.privacy.is-aperto { opacity: 1; visibility: visible; transition-delay: 0s; }
.privacy__foglio {
  position: relative;
  width: min(760px, 100%);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(34px, 5vw, 66px) clamp(24px, 4.4vw, 62px) clamp(40px, 6vh, 70px);
  border: 1px solid var(--hair);
  border-radius: 3px;
  background: #121110;
  transform: translateY(26px);
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
.privacy.is-aperto .privacy__foglio { transform: none; }
.privacy__chiudi {
  position: sticky;
  top: 0;
  float: right;
  margin: -8px -8px 0 16px;
  padding: 9px 18px;
  border: 1px solid #3A3733;
  border-radius: 999px;
  background: #121110;
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer;
  transition: color .35s ease, border-color .35s ease;
}
.privacy__chiudi:hover { color: var(--fg); border-color: var(--verm); }
.privacy__tit {
  margin: 0 0 10px;
  max-width: 22ch;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.12;
}
.privacy__occhiello {
  margin: 0 0 clamp(26px, 4vh, 40px);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--verm);
}
.privacy__foglio h3 {
  margin: clamp(24px, 3.4vh, 34px) 0 10px;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(17px, 1.5vw, 21px);
  color: var(--fg);
}
.privacy__foglio p {
  margin: 0 0 12px;
  max-width: 62ch;
  color: var(--fg-dim);
  line-height: 1.8;
  font-size: clamp(13.5px, 1vw, 15px);
}
.privacy__foglio a { color: var(--fg); text-decoration-color: var(--verm); text-underline-offset: 3px; }
.privacy__foglio a:hover { color: var(--verm); }

@media (prefers-reduced-motion: reduce) {
  .privacy__foglio { transform: none; }
}



.bio {
  display: grid;
  grid-template-columns: minmax(0, 34fr) minmax(0, 46fr);
  gap: clamp(24px, 3.4vw, 54px);
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(72px, 12vh, 140px) clamp(24px, 6vw, 72px);
}
@media (max-width: 900px) {
  .bio { grid-template-columns: 1fr; gap: 44px; }
  .bio__foto { max-width: 420px; }
}
.corsi {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(56px, 9vh, 104px) clamp(24px, 6vw, 72px);
}
.servizi {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(56px, 9vh, 104px) clamp(24px, 6vw, 72px) clamp(26px, 3.5vh, 48px);
}

/* ═══════════════════════════════════════════════════════════
   Le animazioni legate allo scroll

   js/sezioni.js scrive una cosa sola su ogni blocco: --t, da 0 a 1,
   cioè quanto è salito nello schermo. Ogni parola e ogni lettera porta
   il proprio --d, la sua posizione nella fila. Da questi due numeri il
   CSS ricava --p, l'avanzamento del singolo pezzo — così lo sfalsamento
   lo calcola il motore di stile e non il JavaScript, e restano una
   scrittura per blocco per frame anche con trecento lettere in campo.
   ═══════════════════════════════════════════════════════════ */

[data-scroll] { --t: 0; }

/* parola: sale e si accende. --sp è quanto si sfalsa la fila,
   --sc quanto è ripida la salita della singola parola. */
.pr {
  --sp: .55; --sc: 2.222;
  --p: max(0, min(1, calc((var(--t) - var(--d) * var(--sp)) * var(--sc))));
  display: inline-block;
  opacity: var(--p);
  transform: translateY(calc((1 - var(--p)) * .42em));
}
/* Niente sfocatura e niente will-change sulle parole: sono ottanta, e
   ottanta livelli di composizione da ridisegnare a ogni frame costavano
   più di tutta l'animazione della scena. Salita e dissolvenza bastano —
   l'occhio non sentiva la differenza, il frame sì. */

/* lettera: sale da sotto una fenditura. Il riempimento arriva dopo,
   sfalsato a sua volta: prima la parola si alza, poi si accende. */
.lt {
  --p: max(0, min(1, calc((var(--t) - var(--d) * .45) * 3.2)));
  --f: max(0, min(1, calc((var(--t) - .34 - var(--d) * .40) * 3)));
  display: inline-block;
}
.lt > span { display: inline-block; transform: translateY(calc((1 - var(--p)) * 112%)); }

/* ─────────── 1 · chi sono ─────────── */

/* La foto si scopre da sotto come un sipario, e mentre la tenda sale
   l'immagine dentro scende e rientra dallo zoom: due movimenti
   contrari. È quello che la fa sembrare girata invece che accesa.
   Sul filo della tenda corre una riga vermiglia — è il taglio che
   avanza, e si spegne da sola quando la foto è tutta scoperta. */
.bio__foto { margin: 0; }
.bio__tenda {
  position: relative;
  overflow: hidden;
  clip-path: inset(calc((1 - var(--t)) * 100%) 0 0 0);
}
.bio__tenda img {
  display: block;
  width: 100%;
  height: auto;
  /* a colori: il flash, Bartman e l'azzurro in basso fanno parte della foto */
  transform: scale(calc(1.14 - var(--t) * .14)) translateY(calc((1 - var(--t)) * -5%));
  will-change: transform;
}
.bio__tenda::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc((1 - var(--t)) * 100%);
  height: 2px;
  background: var(--verm);
  opacity: calc(min(var(--t), 1 - var(--t)) * 4);
  pointer-events: none;
}
.bio__foto figcaption {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--verm);
}
.bio__foto figcaption .pr { --sp: .7; --sc: 3.333; }

.bio__testo p { margin: 0 0 22px; color: var(--fg-dim); line-height: 1.85; font-size: clamp(15px, 1.15vw, 17px); }
.bio__lead {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(24px, 2.9vw, 40px) !important;
  line-height: 1.3 !important;
  color: var(--fg) !important;
  margin-bottom: 32px !important;
}
.bio__lead .pr { --sp: .6; --sc: 2.5; }
/* L'occhiello non segue la regola dell'ultima parola al centro: è
   un'etichetta, non una frase da leggere, e deve essere già lì quando
   cominci a leggere quello che etichetta. Con --sp .8 partiva a corsa
   quasi finita e sembrava in ritardo su tutto il resto; ora chiude a
   metà strada. */
.bio__testo .occhiello .pr { --sp: .12; --sc: 2.6; }
/* i due paragrafi bassi partono più tardi: si legge dall'alto in basso */
.bio__testo p:nth-of-type(3) .pr { --sp: .38; --sc: 1.613; }
.bio__testo p:nth-of-type(4) .pr { --sp: .3;  --sc: 1.429; }

/* ═══════════════════════════════════════════════════════════
   Le righe a bandiera — formazione e servizi

   Stessa impaginazione per tutte e due: una riga per voce, allineata a
   sinistra o a destra a turno, in grottesco stretto e nero. La riga di
   sinistra entra da sinistra, quella di destra da destra.

   Qui l'animazione non è trascinata dallo scroll: la riga entra in campo
   e parte, e da quel momento arriva in fondo da sola. Trascinarla
   vorrebbe dire che si ferma se ti fermi, e una frase che entra a metà
   non si legge. Il compito dello scroll è solo dire quando cominciare.

   Il carattere è Archivo sull'asse stretto: Archivo è variabile in
   larghezza, e a 62% con peso 700 sta vicinissimo all'Helvetica Now
   Display Condensed Bold del modello. Se un domani si compra la licenza
   dell'Helvetica basta metterla in --condensato, prima di Archivo.
   ═══════════════════════════════════════════════════════════ */

.corsi__lista, .servizi__lista { list-style: none; margin: 0; padding: 0; }

.riga {
  position: relative;
  /* la riga arriva da fuori schermo: senza questo la pagina prenderebbe
     una barra di scorrimento orizzontale per tutta la durata dell'entrata */
  overflow: hidden;
  padding: clamp(10px, 1.6vh, 20px) 0;
}
/* La formazione ha una voce più lunga di tutte quelle dei servizi,
   «Master in sceneggiatura cinematografica»: al corpo dei servizi andava a
   capo. Qui il titolo è un filo più piccolo, misurato su quella voce. */
.corsi .riga__titolo { font-size: clamp(24px, 4.7vw, 68px); }

.riga--sx { text-align: left; }
.riga--dx { text-align: right; }

.riga__titolo {
  display: block;
  margin: 0;
  padding: 0;
  font-family: var(--condensato);
  font-weight: 700;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  /* misurato su «Logline, soggetti e trattamenti», la voce più lunga: a
     questo corpo sta su una riga sola anche a 1440 px. Col corpo di prima
     andava a capo e rompeva il ritmo delle bandiere */
  font-size: clamp(30px, 5.9vw, 86px);
  line-height: .94;
  letter-spacing: -.012em;
  text-transform: uppercase;
  color: var(--fg);
}
.riga__meta {
  /* in fila: la scritta piccola e, di seguito, il segno che apre. Sulle
     righe di destra il segno passa davanti, così resta sempre attaccato
     al testo e non all'altro capo della colonna */
  display: flex;
  align-items: center;
  gap: .34em;
  margin: .06em 0 0;
  font-family: var(--condensato);
  font-weight: 700;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  font-size: clamp(16px, 3.25vw, 47px);
  line-height: 1;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--fg);
}

/* ── l'entrata, e l'uscita ──
   Titolo e riga sotto entrano insieme ma non appaiate: la seconda parte
   un soffio dopo, quel tanto che basta perché si legga come una cosa
   sola che si posa e non come due blocchi paralleli.

   La stessa transizione vale nei due sensi, quindi risalendo la riga se
   ne va esattamente da dove era arrivata. Le due classi fanno due
   mestieri diversi: is-entrata è lo stato, e va e viene con lo scroll;
   is-vista dice solo che la riga è stata vista almeno una volta, e serve
   a spegnere la transizione prima di allora — senza, al caricamento si
   vedrebbero tutte le righe entrare di colpo dai due lati. */
[data-entra].is-vista .riga__titolo,
[data-entra].is-vista .riga__meta {
  transition: transform 1.05s cubic-bezier(.16, .84, .28, 1),
              opacity .7s ease;
}
[data-entra].is-vista .riga__meta { transition-delay: .1s, .1s; }

[data-entra]:not(.is-vista) .riga__titolo,
[data-entra]:not(.is-vista) .riga__meta { transition: none; }

[data-entra]:not(.is-entrata) .riga__titolo,
[data-entra]:not(.is-entrata) .riga__meta { opacity: 0; }
/* Lo scarto di partenza vale solo per le righe che devono entrare: quelle
   senza data-entra — l'indice in fondo alle pagine dei servizi — stanno già
   al loro posto, e senza questo vincolo restavano spostate di lato. */
[data-entra].riga--sx:not(.is-entrata) .riga__titolo { transform: translateX(-108%); }
[data-entra].riga--sx:not(.is-entrata) .riga__meta   { transform: translateX(-124%); }
[data-entra].riga--dx:not(.is-entrata) .riga__titolo { transform: translateX(108%); }
[data-entra].riga--dx:not(.is-entrata) .riga__meta   { transform: translateX(124%); }

.riga.is-entrata .riga__titolo,
.riga.is-entrata .riga__meta { transform: none; opacity: 1; }

/* ── le righe dei servizi ──
   Il nome è un collegamento alla pagina del servizio, dentro a un titolo
   vero. Prima era testo dentro a un bottone: per chi legge cambiava poco,
   per un motore di ricerca voleva dire che quelle quattro parole non erano
   né un titolo né un collegamento — cioè non esistevano. Il bottone è
   rimasto, ma fa una cosa sola: apre il paragrafo qui sotto. */
.riga__titolo a {
  color: inherit;
  text-decoration: none;
  transition: color .35s ease;
}
/* spezzato in lettere, il cambio di colore toccherebbe ogni lettera per un
   terzo di secondo, e ognuna va ridisegnata mentre si sta muovendo: sui
   titoli spezzati il colore cambia di colpo, e a muoversi resta solo la forma */
.riga__titolo a:has(.scritta-viva) { transition: none; }
.riga__titolo a:hover,
.servizio.is-aperto .riga__titolo a { color: var(--verm); }

/* per chi non vede lo schermo: il bottone deve dire cosa apre */
.solo-lettori {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.riga__meta {
  margin-bottom: 0;
}
.riga__meta i {
  font-style: normal;
  color: var(--fg-dim);
  transition: color .4s ease;
}
.riga__testa:hover .riga__meta i,
.servizio.is-aperto .riga__meta i { color: var(--fg); }

/* il segno che apre: due tratti che diventano uno solo, alla fine della
   riga piccola — dalla parte giusta a seconda della bandiera */
.riga--sx .riga__meta { justify-content: flex-start; }
.riga--dx .riga__meta { justify-content: flex-end; }
.riga__segno {
  position: relative;
  flex: none;
  /* l'area da toccare è più grande del segno: il segno è mezzo carattere,
     il dito no. Lo scarto negativo la riprende, così non sposta la riga */
  width: .58em; height: .58em;
  padding: 0;
  margin: -14px;
  border: 14px solid transparent;
  background: none;
  cursor: pointer;
  box-sizing: content-box;
}
.riga__segno:focus-visible { outline: 2px solid var(--verm); outline-offset: 2px; }
.riga--dx .riga__segno { order: -1; }
.riga__segno::before, .riga__segno::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--fg-dim);
  transition: transform .5s cubic-bezier(.22,.61,.36,1), background .45s ease;
}
.riga__segno::after { transform: rotate(90deg); }
.servizio.is-aperto .riga__segno::after { transform: rotate(0deg); }
.servizio.is-aperto .riga__segno::before,
.servizio.is-aperto .riga__segno::after { background: var(--verm); }

/* Niente filetti fra una riga e l'altra: a corpo così grande le righe si
   separano da sole, e una griglia di tratti orizzontali sotto a delle
   bandiere alternate faceva a pugni con l'alternanza. Lo spazio basta. */

/* Il pannello: da 0fr a 1fr. È il modo di animare un'altezza che non si
   conosce senza misurarla a mano a ogni frame. */
.servizio__pannello {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .75s cubic-bezier(.22,.61,.36,1);
}
.servizio.is-aperto .servizio__pannello { grid-template-rows: 1fr; }
.servizio__dentro { overflow: hidden; }

.servizio__testo {
  max-width: 56ch;
  margin: clamp(14px, 2vh, 24px) 0 clamp(20px, 3vh, 34px);
  color: var(--fg-dim);
  line-height: 1.85;
  font-size: clamp(15px, 1.15vw, 17px);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.riga--dx .servizio__testo { margin-left: auto; text-align: right; }
.servizio.is-aperto .servizio__testo {
  opacity: 1; transform: none; transition-delay: .18s;
}

.servizi__invito {
  margin: clamp(22px, 3vh, 36px) 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #5E594F;
}

/* Anche sul telefono le bandiere restano alternate, sinistra e destra:
   è l'impaginazione della sezione, e toglierla la faceva sembrare un
   elenco qualunque. Una riga lunga va a capo, e va bene così. */

@media (prefers-reduced-motion: reduce) {
  [data-entra] .riga__titolo,
  [data-entra] .riga__meta,
  [data-entra]:not(.is-entrata) .riga__titolo,
  [data-entra]:not(.is-entrata) .riga__meta {
    opacity: 1; transform: none; transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pr, .lt > span, .bio__tenda, .bio__tenda img {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .bio__tenda::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   Il carattere dei titoli, e chi porta il maiuscolo

   Tutti i titoli stanno nello stesso grottesco stretto e nero delle righe
   a bandiera. Il **maiuscolo** però non ce l'hanno: è delle righe a
   bandiera, che sono insegne, e dei *titoletti* — gli occhielli di
   sezione, le etichette del modulo, i richiami. Su una frase intera, come
   la riga d'apertura della biografia o il claim dei contatti, il maiuscolo
   toglie il profilo alle parole e le fa leggere una lettera per volta.

   Sta in fondo al foglio di proposito: arriva dopo le regole che
   rettifica, e a parità di peso vince chi viene dopo.
   ═══════════════════════════════════════════════════════════ */

/* ── i titoli veri: carattere stretto e nero, maiuscolo e minuscolo ── */
.bio__lead,
.estratti__claim,
.contatti__claim,
.ventaglio__titolo b,
.foglio__targa b,
.lettore__foglio figcaption b,
.privacy__tit,
.privacy__foglio h3 {
  font-family: var(--condensato);
  font-weight: 700;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  letter-spacing: -.005em;
}

.bio__lead       { line-height: 1.16 !important; }
.estratti__claim,
.contatti__claim { line-height: 1.06; }
.privacy__tit    { line-height: 1.08; }

/* più corpo, adesso che il carattere è stretto: a parità di punti occupa
   molto meno, e i titoli si erano fatti piccoli */
.bio__lead       { font-size: clamp(26px, 3.4vw, 48px) !important; }
.estratti__claim { font-size: clamp(32px, 4.8vw, 70px); }
.contatti__claim { font-size: clamp(34px, 4.8vw, 70px); }
.ventaglio__titolo b { font-size: clamp(22px, 2.6vw, 40px); }

/* l'indirizzo di posta non è un titolo ma un dato: resta com'è scritto */
.contatti__mail {
  font-family: var(--testo);
  font-weight: 400;
  text-transform: none;
  letter-spacing: -.01em;
}

/* ── i titoletti: stesso carattere, in maiuscolo ──
   Gli occhielli di sezione, i due richiami, la riga sotto al claim dei
   contatti, i collegamenti social, le etichette del modulo e il bottone.
   Erano in Space Mono spaziato: leggibili, ma di un'altra famiglia, e
   sotto a dei titoli in grottesco stretto sembravano prestati da un altro
   sito. Qui il maiuscolo lavora: sono stringhe corte, e la spaziatura
   larga le tiene aperte. */
.occhiello,
.ventaglio__invito,
.servizi__invito,
.contatti__sotto,
.contatti__altro a,
.campo label,
.modulo__invia {
  font-family: var(--condensato);
  font-weight: 700;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  text-transform: uppercase;
}

/* Il grottesco stretto è più fitto del mono a parità di corpo: senza
   alzarlo un po' questi richiami sparirebbero. La spaziatura scende,
   perché quella del mono era tarata su lettere già larghe di loro. */
.occhiello          { font-size: clamp(13px, 1.15vw, 16px); letter-spacing: .14em; }
.ventaglio__invito,
.servizi__invito    { font-size: clamp(12px, 1vw, 14px);    letter-spacing: .1em; }
.contatti__altro a,
.campo label        { font-size: clamp(12px, 1vw, 14px);    letter-spacing: .11em; }
.modulo__invia      { font-size: 14px; letter-spacing: .16em; }

/* la riga sotto al claim non è più un paragrafo di testo corrente: è un
   richiamo, e sta al passo del titolo che ha sopra */
.contatti__sotto {
  font-size: clamp(15px, 1.5vw, 21px) !important;
  line-height: 1.4;
  letter-spacing: .06em;
  color: var(--fg-dim);
}

/* ═══════════════════════════════════════════════════════════
   Le pagine dei servizi

   Una pagina per servizio, generata da tools/servizi.py. Non hanno
   l'illustrazione in testa: cominciano dal titolo, e la barra in alto è
   posata dal primo pixel perché il contenuto sta dentro un .after che parte
   da zero — la stessa regola della home, senza doverne scrivere un'altra.

   La colonna del testo è stretta di proposito. Sono pagine che qualcuno
   leggerà davvero, non vetrine: sotto le settanta battute per riga si legge,
   sopra si salta.
   ═══════════════════════════════════════════════════════════ */
.voce {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 72px);
}

.voce__testa {
  padding: clamp(96px, 16vh, 190px) 0 clamp(40px, 6vh, 72px);
}
.voce__h1 {
  margin: 0;
  font-family: var(--condensato);
  font-weight: 700;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  font-size: clamp(44px, 9vw, 132px);
  line-height: .92;
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: var(--fg);
}
.voce__lead {
  max-width: 30ch;
  margin: clamp(24px, 4vh, 44px) 0 0;
  margin-left: auto;
  text-align: right;
  font-family: var(--condensato);
  font-weight: 700;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  font-size: clamp(19px, 2.2vw, 31px);
  line-height: 1.24;
  color: var(--fg-dim);
}
@media (max-width: 720px) {
  .voce__lead { max-width: none; text-align: left; }
}
.voce__briciole {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: clamp(30px, 5vh, 54px) 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5E594F;
}
.voce__briciole a { color: #5E594F; text-decoration: none; transition: color .35s ease; }
.voce__briciole a:hover { color: var(--fg); }
.voce__briciole b { color: var(--verm); font-weight: 400; }

/* ── il corpo: titolo a sinistra, testo a destra ── */
.voce__corpo { padding: clamp(20px, 3vh, 40px) 0 clamp(40px, 6vh, 70px); }
.voce__blocco {
  display: grid;
  grid-template-columns: minmax(0, 30fr) minmax(0, 62fr);
  gap: clamp(20px, 4vw, 70px);
  /* niente filetti fra un capitoletto e l'altro: li separa lo spazio */
  padding: clamp(34px, 5.5vh, 62px) 0;
  opacity: max(0, min(1, calc(var(--t) * 2.4)));
  transform: translateY(calc((1 - min(1, calc(var(--t) * 2.4))) * 20px));
}
@media (max-width: 820px) {
  .voce__blocco { grid-template-columns: 1fr; gap: 16px; }
}
.voce__h2 {
  margin: 0;
  font-family: var(--condensato);
  font-weight: 700;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  font-size: clamp(21px, 2.2vw, 32px);
  line-height: 1.04;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--fg);
  align-self: start;
}
.voce__testo p {
  max-width: 64ch;
  margin: 0 0 16px;
  color: var(--fg-dim);
  line-height: 1.85;
  font-size: clamp(15px, 1.15vw, 17px);
}
.voce__testo p:last-child { margin-bottom: 0; }

/* i passi: nome grande, spiegazione sotto. Niente numeri — si leggono
   nell'ordine in cui stanno, che è esattamente l'informazione che darebbe
   un numero davanti */
.passi { display: grid; gap: clamp(22px, 3.4vh, 38px); margin: 0; padding: 0; list-style: none; }
.passo__nome {
  margin: 0 0 8px;
  font-family: var(--condensato);
  font-weight: 700;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  font-size: clamp(17px, 1.6vw, 23px);
  text-transform: uppercase;
  color: var(--verm);
}
.passo__testo {
  max-width: 64ch;
  margin: 0;
  color: var(--fg-dim);
  line-height: 1.85;
  font-size: clamp(15px, 1.15vw, 17px);
}

.voce__blocco--due { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 820px) { .voce__blocco--due { grid-template-columns: 1fr; gap: 34px; } }
.voce__blocco--due h2 { margin-bottom: 18px; }
.voce__blocco--due p {
  max-width: 46ch;
  margin: 0;
  color: var(--fg-dim);
  line-height: 1.85;
  font-size: clamp(15px, 1.15vw, 17px);
}
.consegne { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 0; padding: 0; list-style: none; }
.consegne li {
  padding: 8px 15px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* ── l'invito ── */
.voce__invito {
  padding: clamp(60px, 10vh, 120px) 0;
  border-bottom: 1px solid var(--hair);
  text-align: center;
}
.voce__claim {
  margin: 0 0 18px;
  font-family: var(--condensato);
  font-weight: 700;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  font-size: clamp(30px, 5vw, 74px);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--fg);
}
.voce__invito .occhiello { margin-bottom: 14px; }
.voce__sotto {
  margin: 0 0 clamp(26px, 4vh, 40px);
  font-family: var(--condensato);
  font-weight: 700;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  font-size: clamp(15px, 1.5vw, 21px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.voce__bottone {
  position: relative;
  display: inline-block;
  padding: 16px 44px;
  border: 1px solid #3A3733;
  border-radius: 999px;
  overflow: hidden;
  font-family: var(--condensato);
  font-weight: 700;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  font-size: 15px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  transition: color .45s ease, border-color .45s ease;
}
.voce__bottone::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--verm);
  transform: translateY(101%);
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.voce__bottone span { position: relative; }
.voce__bottone:hover { color: #0B0B0B; border-color: var(--verm); }
.voce__bottone:hover::before { transform: none; }

/* ── gli altri servizi: le stesse righe a bandiera della home ── */
.voce__altri { padding: clamp(56px, 9vh, 104px) 0 clamp(80px, 13vh, 150px); }
.riga__link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: color .45s ease;
}
.riga__link:hover .riga__titolo { color: var(--verm); }
.riga__link:hover .riga__meta i { color: var(--fg); }

/* il piede delle pagine dei servizi: tre collegamenti e basta. Serve a chi
   legge, e serve all'ultima riga di «Gli altri servizi», che senza qualcosa
   sotto non arriverebbe mai abbastanza in alto da entrare */
.piede {
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(20px, 3vw, 44px);
  padding: 28px 0 clamp(40px, 6vh, 70px);
  border-top: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.piede a { color: #5E594F; text-decoration: none; transition: color .35s ease; }
.piede a:hover { color: var(--fg); }

/* ── il collegamento alla pagina, dentro al pannello della home ── */
/* Era in Space Mono maiuscolo con la freccetta in coda, e aveva l'aria
   della didascalia di un grafico. Adesso è lo stesso grottesco stretto dei
   titoli, a corpo da leggere, con il filo vermiglio che cresce da sinistra —
   lo stesso gesto dell'indirizzo di posta nei contatti. */
.servizio__vai {
  display: inline-block;
  margin: 0 0 clamp(20px, 3vh, 34px);
  font-family: var(--condensato);
  font-weight: 700;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  font-size: clamp(16px, 1.7vw, 24px);
  letter-spacing: -.005em;
  color: var(--fg);
  text-decoration: none;
  background-image: linear-gradient(var(--verm), var(--verm));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size .5s cubic-bezier(.22,.61,.36,1), color .35s ease;
}
.riga--dx .servizio__vai { background-position: 100% 100%; }
.servizio__vai:hover { color: var(--verm); background-size: 0 1px; }
.riga--dx .servizio__vai { float: right; }

@media (prefers-reduced-motion: reduce) {
  .voce__blocco { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   Il menu dei servizi, e il velo fra una pagina e l'altra
   ═══════════════════════════════════════════════════════════ */

/* Le pagine dei servizi non hanno l'illustrazione sotto: la barra è piena
   dal primo pixel, senza aspettare che il giro dello scroll se ne accorga */
.nav--posata {
  background-color: rgb(11 11 11 / .96);
  background-image: none;
}

.nav__gruppo { position: relative; display: flex; align-items: center; }

/* il bottone del menu si veste come le altre voci: è una voce, non un
   comando, e deve stare in fila con le altre senza farsi notare */
.nav__apri {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: clamp(10px, .82vw, 12px);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg);
  opacity: .72;
  cursor: pointer;
  transition: opacity .35s ease;
}
.nav__apri:hover, .nav__apri[aria-expanded="true"] { opacity: 1; }
.nav__apri::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--verm);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.nav__apri.is-qui { opacity: 1; }
.nav__apri.is-qui::after { transform: none; }

/* la punta che gira quando il menu si apre */
.nav__apri i {
  width: 5px; height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.nav__apri[aria-expanded="true"] i { transform: translateY(1px) rotate(-135deg); }

.nav__menu {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  z-index: 5;
  min-width: max-content;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: #121110;
  border: 1px solid var(--hair);
  border-radius: 3px;
  box-shadow: 0 26px 60px rgb(0 0 0 / .6);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity .28s ease, transform .32s cubic-bezier(.22,.61,.36,1),
              visibility 0s linear .32s;
}
/* L'ultima tendina della barra sta a un passo dal bordo destro: centrata
   uscirebbe dallo schermo. Si allinea al suo bordo destro. */
.nav__gruppo--fine .nav__menu { left: auto; right: 0; transform: translate(0, -8px); }
.nav__gruppo--fine.is-aperto .nav__menu { transform: translate(0, 0); }

.nav__gruppo.is-aperto .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.nav__menu a {
  display: block;
  padding: 9px clamp(18px, 2vw, 26px);
  font-family: var(--condensato);
  font-weight: 700;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg-dim);
  text-decoration: none;
  transition: color .25s ease, background .25s ease;
}
.nav__menu a:hover, .nav__menu a:focus-visible { color: var(--fg); background: rgb(255 255 255 / .04); }
.nav__menu a[aria-current="page"] { color: var(--verm); }
/* «Tutti» non è un servizio: è la sezione della pagina, e si stacca */
.nav__tutti {
  margin-top: 8px;
  padding-top: 15px !important;
  border-top: 1px solid var(--hair);
  color: #5E594F !important;
}
.nav__tutti:hover { color: var(--fg) !important; }

/* ── il velo ──
   Due pannelli che salgono uno dietro l'altro: prima il vermiglio, poi il
   nero. Andando via coprono lo schermo dal basso; arrivando escono dall'alto
   nello stesso verso, così il movimento fra le due pagine è uno solo e non
   si ferma in mezzo. È anche il motivo per cui c'è un velo invece di una
   dissolvenza: una pagina nuova che si carica ha bisogno di un attimo, e
   quell'attimo va riempito con qualcosa che vada da qualche parte. */
.velo {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}
.velo i, .velo b {
  position: absolute;
  inset: 0;
  display: block;
  transform: translateY(101%);
}
.velo i { background: var(--verm); }
.velo b { background: #0B0B0B; }

/* si va via: salgono a coprire */
.velo.is-copre { pointer-events: auto; }
.velo.is-copre i {
  transform: translateY(0);
  transition: transform .46s cubic-bezier(.7, 0, .3, 1);
}
.velo.is-copre b {
  transform: translateY(0);
  transition: transform .46s cubic-bezier(.7, 0, .3, 1) .1s;
}

/* si arriva: partono già abbassati, e proseguono verso l'alto */
.in-arrivo .velo { pointer-events: auto; }
.in-arrivo .velo i, .in-arrivo .velo b { transform: translateY(0); }
.velo.is-scopre { pointer-events: none; }
.velo.is-scopre b {
  transform: translateY(-101%);
  transition: transform .56s cubic-bezier(.7, 0, .3, 1);
}
.velo.is-scopre i {
  transform: translateY(-101%);
  transition: transform .56s cubic-bezier(.7, 0, .3, 1) .1s;
}

@media (prefers-reduced-motion: reduce) {
  .velo, .in-arrivo .velo { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   Gli appunti — l'elenco

   Titolo e riga di spiegazione, uno sotto l'altro, con il filetto che li
   separa. Non sono righe a bandiera: quelle sono insegne, queste sono cose
   da leggere, e un elenco da leggere si legge meglio in colonna.
   ═══════════════════════════════════════════════════════════ */
.letture { margin: 0; padding: 0; list-style: none; }
.letture li { border-top: 1px solid var(--hair); }
.letture li:last-child { border-bottom: 1px solid var(--hair); }
.letture a {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 52fr);
  gap: clamp(10px, 3vw, 60px);
  align-items: baseline;
  padding: clamp(20px, 3vh, 32px) 0;
  text-decoration: none;
  transition: padding-left .5s cubic-bezier(.22,.61,.36,1);
}
.letture a:hover { padding-left: clamp(8px, 1.4vw, 22px); }
@media (max-width: 760px) {
  .letture a { grid-template-columns: 1fr; gap: 8px; }
}
.letture b {
  font-family: var(--condensato);
  font-weight: 700;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  font-size: clamp(20px, 2.3vw, 34px);
  line-height: 1.06;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--fg);
  transition: color .35s ease;
}
.letture a:hover b { color: var(--verm); }
.letture i {
  font-style: normal;
  max-width: 52ch;
  color: var(--fg-dim);
  line-height: 1.75;
  font-size: clamp(14px, 1.05vw, 16px);
}
.letture--grandi b { font-size: clamp(24px, 3.4vw, 50px); }

/* il grassetto dentro ai paragrafi degli appunti */
.voce__testo b { font-weight: 700; color: var(--fg); }

/* ═══════════════════════════════════════════════════════════
   Le lettere che si alzano

   Sulle scritte cliccabili, la lettera sotto il cursore cresce e sale di
   pochissimo, e intanto tutte le altre lettere della stessa scritta si
   stringono un poco. Non tutte uguali: le due accanto alla lettera sotto il
   cursore si stringono meno delle altre, così fra quella che cresce e il
   resto c'è un passaggio invece di un gradino.

   js/sezioni.js spezza quelle scritte in una lettera per elemento (.lettera),
   raggruppate per parola (.parola-viva) così una parola non può andare a
   capo a metà, dentro a un contenitore per scritta (.scritta-viva) che è il
   perimetro dell'effetto. Qui si decide solo quanto si muove.

   Poco davvero: la lettera sotto il cursore +8% e un decimo di em più in
   alto, le vicine −3%, le altre −7%. Il ritorno è più lento dell'andata,
   così passando sopra una parola le lettere si riassestano come un'onda.

   Ha preso il posto del faro (l'alone bianco dentro alle lettere).
   ═══════════════════════════════════════════════════════════ */
.parola-viva { display: inline-block; white-space: nowrap; }

/* Ogni lettera è fatta di due elementi, ed è la cosa che conta di più qui.
   Quello fuori (.lettera) resta fermo ed è quello che il cursore tocca;
   quello dentro si muove.

   Con un elemento solo, sui titoli grandi l'effetto andava a scatti. La
   lettera saliva di un decimo della sua altezza — su un titolo a 86 px sono
   quasi nove pixel — e salendo usciva da sotto il cursore: il browser
   smetteva di considerarla sotto il mouse, lei ricadeva, tornava sotto il
   cursore, risaliva. Avanti e indietro, più volte al secondo. Sulle scritte
   piccole lo spostamento era di un pixel e non succedeva, per questo si
   vedeva solo su «Logline, soggetti e trattamenti» e compagni.

   Col contenitore fermo il bersaglio del cursore non si sposta mai, qualunque
   cosa faccia la lettera dentro. */
.lettera { display: inline-block; }
.lettera > span {
  display: inline-block;
  transform-origin: 50% 85%;
  transition: transform .42s cubic-bezier(.22,.61,.36,1);
}

/* tutta la scritta si stringe appena il cursore ci entra */
.scritta-viva:hover .lettera > span {
  transform: scale(.93);
  transition-duration: .3s;
}
/* le due vicine meno delle altre: :has guarda la lettera che viene dopo */
.scritta-viva .lettera:has(+ .lettera:hover) > span,
.scritta-viva .lettera:hover + .lettera > span {
  transform: scale(.97);
}
/* e quella sotto il cursore cresce e sale */
.scritta-viva .lettera:hover > span {
  transform: translateY(-.1em) scale(1.08);
  transition-duration: .16s;
}

/* Sui titoli grandi lo stesso effetto in proporzione pesa di più: nove pixel
   in un sesto di secondo si leggono come un salto, non come un gesto. Qui
   l'escursione è metà e il tempo quasi il doppio.

   E le lettere stanno **sempre** su un piano a sé, non solo col cursore
   sopra. A questo corpo, e con un carattere variabile che il browser non
   tiene in memoria già disegnato, ridisegnare trenta lettere a ogni
   fotogramma non sta dentro al tempo di un fotogramma: è quello che si vede
   come scatto. Su un piano a sé la lettera si disegna una volta e poi si
   sposta e si ingrandisce già fatta.

   Il piano c'era anche prima, ma si accendeva all'ingresso del cursore e si
   spegneva all'uscita — a metà del ritorno. Creare e distruggere trenta
   piani insieme è a sua volta uno scatto: l'avevo spostato, non tolto. Sono
   poche decine di lettere in tutto il sito, e tenerle sempre pronte costa
   meno che prepararle ogni volta. */
.riga__titolo .lettera > span {
  will-change: transform;
  backface-visibility: hidden;
  transition-duration: .5s;
}
.riga__titolo .scritta-viva:hover .lettera > span {
  transform: scale(.96);
  transition-duration: .45s;
}
.riga__titolo .scritta-viva .lettera:has(+ .lettera:hover) > span,
.riga__titolo .scritta-viva .lettera:hover + .lettera > span {
  transform: scale(.985);
}
.riga__titolo .scritta-viva .lettera:hover > span {
  transform: translateY(-.05em) scale(1.05);
  transition-duration: .3s;
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .scritta-viva:hover .lettera > span,
  .scritta-viva .lettera:hover > span { transform: none; }
}

/* ─────────────── accessibilità ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero { height: 100vh; }
  .hero__hint i { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   Le etichette piccole

   Briciole, piede, nomi sotto le pagine, bottoni «Chiudi», l'informativa:
   erano ancora in Space Mono spaziato, che è il carattere che si vede su
   mille siti fatti in fretta e ha l'aria del modello preconfezionato.
   Passano allo stesso grottesco stretto e nero delle altre etichette, in
   maiuscolo: una famiglia sola in tutto il sito. Space Mono resta soltanto
   sul foglio appeso, dove fa il suo mestiere di macchina da scrivere.
   ═══════════════════════════════════════════════════════════ */
.voce__briciole,
.piede,
.hero__hint,
.foglio__targa i,
.ventaglio__titolo i,
.lettore__foglio figcaption i,
.lettore__chiudi,
.modulo__esito,
.contatti__nota,
.privacy__chiudi,
.privacy__occhiello,
.consegne li {
  font-family: var(--condensato);
  font-weight: 700;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  text-transform: uppercase;
}
.voce__briciole, .piede, .contatti__nota { font-size: clamp(13px, 1vw, 14px); letter-spacing: .1em; }
.voce__briciole b { font-weight: 700; }
.hero__hint { font-size: 12px; letter-spacing: .2em; }
.foglio__targa i,
.ventaglio__titolo i,
.lettore__foglio figcaption i { font-size: 13px; letter-spacing: .1em; }
.lettore__chiudi, .privacy__chiudi { font-size: 13px; letter-spacing: .12em; }
.modulo__esito { font-size: 14px; letter-spacing: .06em; }
.privacy__occhiello { font-size: 13px; letter-spacing: .06em; }
.contatti__privacy { font-weight: inherit; }

/* ═══════════════════════════════════════════════════════════
   La bandierina della lingua

   In fondo a destra nella barra: porta alla stessa pagina nell'altra
   lingua. È una bandiera e non una sigla perché si riconosce senza
   leggerla — chi non sa l'italiano non sa nemmeno che «EN» sta lì per lui.
   Disegnata in SVG e non con l'emoji: su Windows le emoji delle bandiere
   non esistono, e al loro posto compaiono due lettere.
   ═══════════════════════════════════════════════════════════ */
.nav__links { margin-left: auto; }
.nav__coda { display: flex; align-items: center; gap: 18px; }
.nav__lingua {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  color: var(--fg);
  text-decoration: none;
  opacity: .8;
  transition: opacity .3s ease;
}
.nav__lingua:hover { opacity: 1; }
.nav__lingua span {
  display: inline-block;
  padding: 3px 7px 2px;
  border: 1px solid rgb(242 238 232 / .45);
  border-radius: 3px;
  font-family: var(--condensato);
  font-weight: 700;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .12em;
  transition: color .3s ease, border-color .3s ease;
}
.nav__lingua:hover span { color: var(--verm); border-color: var(--verm); }

/* ═══════════════════════════════════════════════════════════
   Il menu sul telefono

   Sul telefono le voci della barra non ci stanno: al loro posto c'è un
   bottone «Menu» che apre un foglio a tutto schermo con tutte le pagine —
   le sezioni, i quattro servizi, le info utili. Il foglio non è scritto
   nelle pagine: lo costruisce js/sezioni.js copiando le voci della barra,
   così resta sempre uguale a lei in tutte le pagine e in tutte e due le
   lingue senza doverlo tenere allineato a mano.
   ═══════════════════════════════════════════════════════════ */
.nav__hamburger {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--fg);
  cursor: pointer;
  font-family: var(--condensato);
  font-weight: 700;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nav__hamburger i { position: relative; width: 20px; height: 10px; }
.nav__hamburger i::before, .nav__hamburger i::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
  transition: transform .4s cubic-bezier(.22,.61,.36,1), top .4s cubic-bezier(.22,.61,.36,1);
}
.nav__hamburger i::before { top: 0; }
.nav__hamburger i::after  { top: 8px; }
.menu-aperto .nav__hamburger i::before { top: 4px; transform: rotate(45deg); }
.menu-aperto .nav__hamburger i::after  { top: 4px; transform: rotate(-45deg); }

.tendone {
  position: fixed;
  inset: 0;
  z-index: 39;                      /* sotto la barra, che resta a chiuderlo */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 92px 24px 48px;
  background: #0B0B0B;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.menu-aperto .tendone { opacity: 1; visibility: visible; transition-delay: 0s; }
.tendone ul { margin: 0; padding: 0; list-style: none; }

/* Ogni capitolo sta nella sua fascia, con un filo sopra: i titoli si
   separano l'uno dall'altro senza bisogno di ingrandirli, e il titolo è nel
   verde dell'illustrazione. I sottocapitoli
   stanno rientrati sotto al titolo, attaccati a un filo verticale: si
   leggono come roba sua, non come altri titoli. */
.tendone > ul > li {
  border-top: 1px solid var(--hair);
  padding: 14px 0 12px;
}
.tendone > ul > li:last-child { border-bottom: 1px solid var(--hair); }
.tendone__voce {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 0;
  font-family: var(--condensato);
  font-weight: 700;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  font-size: 27px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--sage);
  text-decoration: none;
}
.tendone__voce[aria-current="page"], .tendone__sotto a[aria-current="page"] { color: var(--verm); }

.tendone__sotto {
  margin: 10px 0 2px 34px !important;
  padding: 0 0 0 14px !important;
  border-left: 1px solid #3A3733;
}
.tendone__sotto a {
  display: block;
  padding: 6px 0;
  font-family: var(--testo);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--fg-dim);
  text-decoration: none;
}
.tendone__sotto a:active { color: var(--fg); }
/* le voci entrano una dopo l'altra, da sotto */
.tendone > ul > li > * {
  transform: translateY(40%);
  opacity: 0;
  transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .4s ease;
}
.menu-aperto .tendone > ul > li > * {
  transform: none;
  opacity: 1;
  transition-delay: calc(var(--n) * 45ms + 60ms);
}

@media (max-width: 740px) {
  .nav__hamburger { display: inline-flex; }
  /* col menu aperto la barra non si ritira e non si vela: è il coperchio */
  .menu-aperto .nav { transform: none; background: #0B0B0B; }
}
@media (min-width: 741px) { .tendone { display: none; } }

/* ═══════════════════════════════════════════════════════════
   Il telefono
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 740px) {
  .nav { padding: 18px 20px; }
  .nav.is-posata { padding-top: 12px; padding-bottom: 12px; }

  /* la scena è più corta: su uno schermo stretto la cornice è piccola, e
     tre schermate di scrollata per lei erano un'attesa */
  .hero { height: 260vh; }

  /* le sezioni più vicine: sul telefono lo spazio fra una e l'altra si
     misura in pollici, non in percentuali di uno schermo alto */
  .bio      { padding: 44px 22px 40px; gap: 30px; }
  .servizi  { padding: 40px 22px 18px; }
  .brand    { padding: 36px 0 30px; }
  .corsi    { padding: 36px 22px; }
  .estratti { padding: 30px 0 40px; }
  .contatti { padding: 44px 22px 40px; }
  .estratti__fermo { padding: 0 22px; }
  .brand .occhiello { padding: 0 22px; }
  .occhiello { margin-bottom: 20px; }
  .bio__foto { max-width: none; }

  /* le bandiere, un filo più grandi: al corpo minimo sembravano didascalie */
  .riga { padding: 8px 0; }
  .riga__titolo { font-size: clamp(30px, 9vw, 44px); }
  .corsi .riga__titolo { font-size: clamp(28px, 8.2vw, 40px); }
  .riga__meta { font-size: clamp(17px, 5vw, 24px); }

  /* ── il ventaglio, come sul computer ──
     Sette fogli su trecentottanta pixel: più stretti di passo e un po'
     più piccoli, ma aperti allo stesso modo e con lo stesso dondolio. La
     pila esce dai margini della sezione, così i due fogli ai capi hanno
     tutta la larghezza dello schermo. */
  .ventaglio { --passo: 27%; --su: 10px; }
  .ventaglio__pila { height: calc(min(34vw, 170px) * 1.415 + 64px); margin: 0 -22px; }
  .foglio { width: min(34vw, 170px); }
  .ventaglio__titolo b { font-size: 26px; }
  .ventaglio__nome { min-height: 64px; }
  .estratti__claim { margin-bottom: 18px; }

  /* le pagine dei servizi */
  .voce__testa { padding: 104px 0 28px; }
  .voce__corpo { padding: 6px 0 30px; }
  .voce__blocco { padding: 26px 0; gap: 12px; }
  .voce__h2 { font-size: clamp(30px, 9vw, 40px); line-height: 1; }
  .voce__invito { padding: 48px 0; }
  .voce__altri { padding: 44px 0 64px; }
}

/* la biografia sul telefono: ogni pezzo ha il suo avanzamento (vedi
   js/sezioni.js), quindi lo sfalsamento pensato per il blocco intero non
   serve più — ogni riga sale per conto suo, e presto */
@media (max-width: 900px) {
  .bio__testo [data-scroll].bio__lead .pr,
  .bio__testo p[data-scroll]:nth-of-type(n) .pr { --sp: .45; --sc: 1.9; }
}

/* ═══════════════════════════════════════════════════════════
   Formazione: il titolo e il suo sottotitolo

   Erano due righe nello stesso carattere, nello stesso bianco, nello stesso
   maiuscolo: si distinguevano solo per il corpo, e a colpo d'occhio la
   riga sotto sembrava un altro titolo. Adesso il titolo è nel verde
   dell'illustrazione, e il sottotitolo — l'ente, la facoltà — è più
   piccolo, grigio e più leggero.
   ═══════════════════════════════════════════════════════════ */
.corsi .riga__meta {
  gap: .45em;
  margin-top: .22em;
  font-variation-settings: 'wdth' 62, 'wght' 500;
  font-weight: 500;
  font-size: clamp(15px, 2.2vw, 32px);
  letter-spacing: .04em;
  color: var(--fg-dim);
}
/* il titolo grande prende il verde dell'illustrazione: l'arancio è già
   delle etichette, e il bianco resta al sottotitolo ingrigito */
.corsi .riga__titolo { color: var(--sage); }
@media (max-width: 740px) {
  .corsi .riga__meta { font-size: clamp(15px, 4.4vw, 20px); }
}

/* ── il lettore sul telefono ──
   Le due frecce ai lati si mangiavano la larghezza, e l'altezza era
   calcolata su 100vh, che sul telefono comprende anche la parte coperta
   dalle barre del browser: la pagina usciva sotto e di lato. Qui il foglio
   ha tutta la larghezza, l'altezza visibile vera (svh), e le frecce
   scendono sotto, accanto al titolo. */
@media (max-width: 740px) {
  .lettore {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    align-content: center;
    gap: 14px 12px;
    padding: 58px 12px calc(16px + env(safe-area-inset-bottom));
  }
  .lettore__foglio { grid-column: 1 / -1; grid-row: 1; min-height: 0; }
  .lettore__foglio img {
    max-width: min(100%, calc((100svh - 190px) * .707));
    max-height: calc(100svh - 190px);
  }
  .lettore__passo { grid-row: 2; width: 46px; height: 46px; }
  .lettore__passo--prima { justify-self: end; }
  .lettore__passo--dopo  { justify-self: start; }
  .lettore__chiudi { top: 12px; right: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   Le pagine interne, come scene

   Servizi e info utili. L'impianto è spiegato in tools/voce.py; qui ci sono
   le forme, e js/voce.js mette in moto. Senza la classe .vivo sulla radice
   (la mette js/voce.js) tutto è già al suo posto: nessun testo resta
   nascosto se il codice non parte.

   Tre colori soli, gli stessi della home: il nero, l'arancio, e il verde del
   foglio appeso nella scena.
   ═══════════════════════════════════════════════════════════ */
:root { --foglio: #A9BD9B; --inchiostro: #2B2721; }

/* la barra di avanzamento, sopra a tutto */
.avanza { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.avanza i {
  display: block; height: 100%;
  background: var(--verm);
  transform-origin: 0 50%;
  transform: scaleX(var(--avanza, 0));
}

/* ── la testa ── */
.scena {
  position: relative;
  padding: clamp(110px, 17vh, 180px) 0 clamp(50px, 9vh, 110px);
}
.scena__slug {
  margin: 0 0 clamp(14px, 2.4vh, 26px);
  font-family: var(--condensato);
  font-weight: 700;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  font-size: clamp(14px, 1.2vw, 17px);
  letter-spacing: .16em;
  color: var(--fg-dim);
}
.scena__slug span { color: var(--verm); }
.scena__titolo {
  margin: 0;
  font-family: var(--condensato);
  font-weight: 700;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  font-size: clamp(56px, 11.5vw, 190px);
  line-height: .86;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--fg);
  /* l'ombra del titolo scende più lenta del titolo: js/voce.js scrive --su */
  transform: translateY(calc(var(--su, 0) * .35px));
}
/* le lettere salgono da sotto una fenditura, una dopo l'altra */
.scena__parola { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .04em; margin-bottom: -.04em; }
.scena__lettera { display: inline-block; }
.vivo .scena__lettera {
  transform: translateY(105%) rotate(6deg);
  transform-origin: 0 100%;
  transition: transform .9s cubic-bezier(.16,.84,.28,1);
  transition-delay: calc(var(--k) * 28ms + 120ms);
}
.vivo .scena.is-pronta .scena__lettera { transform: none; }
/* l'ultima parola del titolo prende l'arancio */
.scena__parola:last-child .scena__lettera { color: var(--verm); }

.scena__sotto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: clamp(30px, 6vw, 110px);
  align-items: end;
  margin-top: clamp(22px, 3vw, 44px);
}
.scena__lato { display: grid; gap: 34px; padding-bottom: 20px; }
.scena .voce__briciole { margin: 0; }
.scena__scorri {
  display: flex; align-items: center; gap: 14px; margin: 0;
  font-family: var(--condensato); font-weight: 700; font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg-dim);
}
.scena__scorri i {
  position: relative; width: 60px; height: 1px; overflow: hidden;
  background: var(--hair);
}
.scena__scorri i::after {
  content: ""; position: absolute; inset: 0;
  background: var(--verm);
  animation: scorriLinea 2.2s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes scorriLinea { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* il foglio appeso */
.foglietto {
  position: relative;
  margin: 0;
  padding: clamp(40px, 5vw, 64px) clamp(26px, 3.4vw, 50px) clamp(34px, 4.4vw, 56px);
  background: var(--foglio);
  color: var(--inchiostro);
  border-radius: 2px;
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / .8), 0 2px 0 rgb(255 255 255 / .12) inset;
  transform-origin: 50% 0;
  transform: rotate(calc(-3deg + var(--su, 0) * .012deg)) translateY(calc(var(--su, 0) * -.12px));
}
.vivo .foglietto {
  opacity: 0;
  transform: rotate(-9deg) translateY(40px);
  transition: opacity .6s ease .35s, transform 1.2s cubic-bezier(.2,1.3,.4,1) .35s;
}
.vivo .scena.is-pronta .foglietto {
  opacity: 1;
  transform: rotate(calc(-3deg + var(--su, 0) * .012deg)) translateY(calc(var(--su, 0) * -.12px));
  transition: opacity .6s ease .35s, transform 1.2s cubic-bezier(.2,1.3,.4,1) .35s;
}
.vivo .scena.is-ferma .foglietto { transition: none; }
/* il buco del chiodo, come sul foglio della scena */
.foglietto__buco {
  position: absolute; top: 16px; left: 50%;
  width: 14px; height: 14px; margin-left: -7px;
  border: 2px solid var(--inchiostro); border-radius: 50%;
  opacity: .7;
}
.foglietto__testa {
  display: flex; justify-content: space-between; gap: 16px;
  margin: 0 0 22px; padding-bottom: 10px;
  border-bottom: 1px solid rgb(43 39 33 / .25);
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
}
.foglietto__testo {
  margin: 0;
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-weight: 700;
  font-size: clamp(15px, 1.25vw, 18.5px);
  line-height: 1.55;
}
/* la macchina da scrivere: ogni carattere aspetta il suo turno */
.vivo .foglietto__testo .bt { opacity: 0; }
.vivo .foglietto__testo .bt.on { opacity: 1; }
.foglietto__testo .bt.cursore::after {
  content: ""; display: inline-block;
  width: .55em; height: 1.05em; margin-left: 1px;
  vertical-align: -.15em;
  background: var(--inchiostro);
  animation: lampeggia .9s steps(1) infinite;
}
@keyframes lampeggia { 50% { opacity: 0; } }

/* ── il copione ── */
.copione { position: relative; padding: clamp(20px, 5vh, 60px) 0 clamp(40px, 8vh, 100px); }
.copione__binario {
  position: absolute; left: -28px; top: 0; bottom: 0; width: 1px;
  background: var(--hair);
}
.copione__binario i {
  display: block; width: 100%; height: 100%;
  background: var(--verm);
  transform-origin: 50% 0;
  transform: scaleY(var(--binario, 0));
}
@media (max-width: 1400px) { .copione__binario { left: -14px; } }

.cap {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 58fr);
  gap: clamp(24px, 5vw, 90px);
  padding: clamp(44px, 9vh, 110px) 0;
}
.cap__testa { align-self: start; position: sticky; top: 110px; }
.cap__h2 {
  margin: 0;
  font-family: var(--condensato);
  font-weight: 700;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--fg);
}
/* l'evidenziatore: una passata arancio che copre il titolo e se ne va
   dall'altra parte, lasciandolo scoperto */
.cap__h2 span { position: relative; display: inline; }
.vivo .cap__h2 span {
  color: transparent;
  background: linear-gradient(var(--verm), var(--verm)) no-repeat 0 0 / 0% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: color 0s linear .55s;
}
.vivo .cap.is-dentro .cap__h2 span {
  color: var(--fg);
  animation: evidenzia 1.1s cubic-bezier(.7,0,.3,1) forwards;
}
@keyframes evidenzia {
  0%   { background-size: 0% 100%;   background-position: 0 0; }
  50%  { background-size: 100% 100%; background-position: 0 0; }
  50.1%{ background-size: 100% 100%; background-position: 100% 0; }
  100% { background-size: 0% 100%;   background-position: 100% 0; }
}
.cap__testo p {
  font-size: clamp(16px, 1.3vw, 19.5px) !important;
  line-height: 1.8 !important;
  max-width: 60ch;
}
.cap__testo p:first-child {
  color: var(--fg) !important;
  font-size: clamp(19px, 1.7vw, 25px) !important;
  line-height: 1.55 !important;
}
.vivo .cap__testo p {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s ease, transform 1s cubic-bezier(.16,.84,.28,1);
}
.vivo .cap.is-dentro .cap__testo p { opacity: 1; transform: none; }
.vivo .cap.is-dentro .cap__testo p:nth-child(1) { transition-delay: .35s; }
.vivo .cap.is-dentro .cap__testo p:nth-child(2) { transition-delay: .5s; }
.vivo .cap.is-dentro .cap__testo p:nth-child(3) { transition-delay: .65s; }
.vivo .cap.is-dentro .cap__testo p:nth-child(n+4) { transition-delay: .8s; }

/* ── la fascia ── */
.fascia {
  margin-inline: calc(50% - 50vw);
  padding: clamp(24px, 5vh, 60px) 0;
  overflow: hidden;
  transform: rotate(-2deg);
  pointer-events: none;
}
.fascia__riga { white-space: nowrap; line-height: .9; }
.fascia__riga span {
  display: inline-block;
  font-family: var(--condensato);
  font-weight: 700;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  font-size: clamp(64px, 12vw, 200px);
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--fg);
  will-change: transform;
  transform: translate3d(var(--x, 0px), 0, 0);
}
.fascia__riga b { color: var(--verm); font-weight: inherit; padding: 0 .12em; }
.fascia__riga--vuota span {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--sage);
}
.fascia__riga--vuota b { -webkit-text-stroke: 0; color: var(--sage); }

/* ── la chiamata ── */
.chiamata {
  position: relative;
  margin-inline: calc(50% - 50vw);
  margin-top: clamp(30px, 6vh, 70px);
  padding: clamp(90px, 16vh, 180px) clamp(24px, 6vw, 72px);
  background: var(--verm);
  color: #0B0B0B;
  text-align: center;
  clip-path: inset(calc((1 - var(--sale, 1)) * 30%) calc((1 - var(--sale, 1)) * 8%) 0 round calc((1 - var(--sale, 1)) * 60px));
}
.chiamata__dentro { max-width: 1100px; margin: 0 auto; }
.chiamata__occhiello, .chiamata__sotto {
  margin: 0;
  font-family: var(--condensato); font-weight: 700; font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  font-size: clamp(14px, 1.3vw, 18px); letter-spacing: .16em; text-transform: uppercase;
}
.chiamata__claim {
  margin: clamp(16px, 3vh, 30px) 0;
  font-family: var(--condensato); font-weight: 700; font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  font-size: clamp(52px, 9vw, 150px);
  line-height: .9;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.chiamata__bottone {
  position: relative;
  display: inline-flex; align-items: center; gap: 18px;
  margin-top: clamp(30px, 5vh, 50px);
  padding: 22px 30px 22px 40px;
  border-radius: 999px;
  background: #0B0B0B;
  color: var(--fg);
  text-decoration: none;
  font-family: var(--condensato); font-weight: 700; font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  font-size: clamp(16px, 1.5vw, 21px); letter-spacing: .14em; text-transform: uppercase;
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform .5s cubic-bezier(.22,.61,.36,1), background .3s ease, color .3s ease;
}
.chiamata__bottone i {
  position: relative; width: 38px; height: 38px; border-radius: 50%;
  background: var(--verm);
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.chiamata__bottone i::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 9px; height: 9px; margin: -5px 0 0 -7px;
  border-top: 2px solid #0B0B0B; border-right: 2px solid #0B0B0B;
  transform: rotate(45deg);
}
.chiamata__bottone:hover { background: var(--fg); color: #0B0B0B; }
.chiamata__bottone:hover i { transform: translateX(6px) rotate(-45deg); }

/* ── gli altri: le righe si riempiono al passaggio ── */
.voce--scena .voce__altri { padding-top: clamp(70px, 12vh, 140px); }
.voce--scena .riga__link {
  position: relative;
  isolation: isolate;
  padding: clamp(8px, 1.4vh, 16px) clamp(10px, 1.4vw, 20px);
  margin: 0 calc(-1 * clamp(10px, 1.4vw, 20px));
}
.voce--scena .riga__link::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--verm);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform .5s cubic-bezier(.7,0,.3,1);
}
@media (hover: hover) {
  .voce--scena .riga__link:hover::before { transform: none; }
  .voce--scena .riga__link:hover .riga__titolo,
  .voce--scena .riga__link:hover .riga__meta i { color: #0B0B0B !important; }
}
.voce--scena .letture a {
  position: relative; isolation: isolate;
}
.voce--scena .letture a::before {
  content: ""; position: absolute; inset: 0 calc(-1 * clamp(10px, 1.4vw, 20px)); z-index: -1;
  background: var(--verm);
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .5s cubic-bezier(.7,0,.3,1);
}
@media (hover: hover) {
  .voce--scena .letture a:hover { padding-left: 0; }
  .voce--scena .letture a:hover::before { transform: none; }
  .voce--scena .letture a:hover b,
  .voce--scena .letture a:hover i { color: #0B0B0B; }
}
.vivo .voce--scena .letture li { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .9s cubic-bezier(.16,.84,.28,1); }
.vivo .voce--scena .letture li.is-dentro { opacity: 1; transform: none; }

/* ── telefono ── */
@media (max-width: 820px) {
  .scena { padding: 100px 0 30px; }
  .scena__titolo { font-size: clamp(50px, 15.5vw, 96px); }
  .scena__sotto { grid-template-columns: 1fr; margin-top: 30px; gap: 30px; }
  .scena__lato { order: 2; gap: 20px; padding: 0; }
  .foglietto { margin: 0 6px; }
  .copione__binario { display: none; }
  .cap { grid-template-columns: 1fr; gap: 16px; padding: 34px 0; }
  .cap__testa { position: static; }
  .cap__h2 { font-size: clamp(32px, 10vw, 46px); }
  .fascia__riga span { font-size: clamp(56px, 19vw, 110px); }
  .chiamata { padding: 80px 22px; }
  .chiamata__claim { font-size: clamp(46px, 14vw, 80px); }
  .chiamata__bottone { padding: 18px 22px 18px 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .scena__titolo, .foglietto { transform: none !important; }
  .fascia__riga span { transform: none !important; }
  .chiamata { clip-path: none; }
  .scena__scorri i::after, .foglietto__testo .bt.cursore::after { animation: none; }
}
.foglietto__testa span:last-child { flex: none; white-space: nowrap; }

/* una parola del titolo non va mai a capo a metà: se è più larga della
   colonna, js/voce.js abbassa il corpo finché ci sta */
.scena__parola { white-space: nowrap; }
@media (max-width: 820px) { .scena__titolo { font-size: clamp(44px, 13.5vw, 96px); } }

/* ── il foglio scelto col dito si alza ──
   Solo sul telefono, dove il primo tocco sceglie. Il foglio sale sopra gli
   altri e si ingrandisce un poco; tornando giù non aspetta il ritardo con cui
   il ventaglio si apre all'ingresso (.toccata lo toglie dopo il primo tocco). */
.ventaglio__pila.toccata .foglio {
  transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .45s ease, translate .45s cubic-bezier(.22,.61,.36,1);
}
.ventaglio__pila.ha-scelta .foglio.is-scelto {
  z-index: 20;
  transform:
    translate(-50%, -50%)
    translateX(calc(var(--i) * var(--passo)))
    translateY(calc(var(--a) * 8px - var(--su) - 34px))
    rotate(0deg)
    scale(1.12);
}

/* ── la foto della biografia, più lenta ──
   Oltre alla corsa più lunga (data-lento in js/sezioni.js) l'avanzamento
   della foto non si aggancia di colpo allo scroll: lo insegue in un secondo
   circa. Serve registrare --t come numero, altrimenti il browser non sa
   animarlo; dove @property non c'è, la foto si scopre come prima. */
@property --t { syntax: '<number>'; inherits: true; initial-value: 0; }
.bio__foto[data-lento] { transition: --t 1s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) { .bio__foto[data-lento] { transition: none; } }

/* ── sul computer il foglio sorvolato si alza un poco ──
   Era stato tolto perché stava sulla stessa trasformazione del dondolio.
   Adesso sta su «translate», la proprietà a sé che il browser somma alla
   trasformazione del ventaglio senza toccarla: il foglio si alza, e intanto
   continua a dondolare con gli altri. */
@media (hover: hover), (min-width: 821px) {
  .ventaglio__pila .foglio:hover,
  .ventaglio__pila .foglio:focus-visible { translate: 0 -18px; }
}

/* i fogli non rispondono al mouse finché il ventaglio non ha finito di
   aprirsi (is-pronto la mette js/sezioni.js) */
.estratti:not(.is-pronto) .foglio { pointer-events: none; }