/* ============================================================
   INTERIOR DESIGN — homepage (bozza dimostrativa)
   Due voci tipografiche, non sei: una editoriale, una tecnica.

   RITMO CROMATICO DELLA PAGINA (e' la struttura delle transizioni):
     preload   inchiostro   ->  il sipario si alza sulla luce
     Atto I    carta        ->  la pianta si disegna
     Atto II   inchiostro   ->  il velo la inghiotte, la pianta si inverte
     Atto III  carta        ->  torna il disegno tecnico: il metodo
     Atto IV   carta        ->  molta aria: la domanda e il cartiglio
     footer    inchiostro   ->  chiude sul salto di tono, senza filo

   Il buio sta in mezzo, non in fondo: la tesi e' l'unico momento
   in cui la pagina smette di disegnare e parla: prima si misura,
   dopo si spiega come. Un solo tratto scuro invece di due tiene
   l'inversione un evento raro, che e' l'unica ragione per cui
   funziona.
   ============================================================ */

:root {
  /* La coppia carta/inchiostro e' esattamente autoinversa:
     255 - (244,242,237) = (11,13,18). Non e' un vezzo. Il velo che
     chiude l'Atto I inverte i pixel che ha dietro, quindi la carta
     invertita diventa il fondo dell'Atto II: se i due valori non
     coincidono, sulla cucitura tra la scena e la sezione seguente
     resta una riga di tono visibile. Con questi due, la pianta
     invertita risulta carta esatta su inchiostro esatto.

     Il prezzo e' che l'inchiostro e' un nero appena freddo invece
     che caldo: invertire un bianco caldo restituisce sempre un nero
     freddo, non si scappa. A questa profondita' la differenza non
     si legge; su una giuntura, si. */
  --ink:        #0B0D12;
  --paper:      #F4F2ED;
  --line:       #9A948A;   /* grigio quota */
  --line-soft:  rgba(244, 242, 237, 0.28);
  --line-dark:  rgba(11, 13, 18, 0.22);

  /* La pianta e' disegnata a inchiostro normale sulla carta.
     L'inversione al confine di sezione non la fa lei: la fa il velo,
     invertendo i pixel che ha dietro (vedi .atto1__wipe). */
  --plan-ink:   var(--ink);

  --font-edit: "Helvetica Neue", Inter, -apple-system, system-ui, sans-serif;
  --font-tech: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --pad: clamp(1.25rem, 4vw, 4.5rem);
}

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

html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

/* Il sito ha il proprio cursore e il proprio stato ":hover" per il
   fine puntatore (vedi cursore.js); su un touchscreen non ne resta
   traccia, ma il browser aggiunge comunque il proprio, un rettangolo
   grigio che accende e spegne ad ogni tocco. E' rumore su una
   pagina che pesa ogni cosa che appare — quindi si spegne su tutto
   e non solo sui link. */
a, button, [role="button"], .atto1__cta, .atto4__chiama {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body {
  /* Carta, non inchiostro: l'overscroll in cima alla pagina cade
     sull'Atto I e non deve aprire una fessura nera sopra la hero. */
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-edit);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-loading { overflow: hidden; height: 100vh; }

.mask { display: block; overflow: hidden; padding-bottom: 0.06em; }

/* Nessun transform iniziale qui, di proposito. GSAP legge la matrice
   calcolata e convertirebbe un translateY(105%) in uno spostamento in
   pixel: l'animazione porterebbe yPercent a 0 lasciando in piedi quei
   pixel, e il titolo resterebbe nascosto sotto la maschera per sempre.
   Lo stato iniziale lo impostano gli script; il preload copre il frame. */
.mask__in { display: block; will-change: transform; }

/* ============================================================
   IL MARCHIO — un solo disegno, due impieghi
   ============================================================ */

.wordmark { display: block; height: auto; color: currentColor; }
.wordmark--preload { width: 100%; opacity: 0.92; }
.wordmark--header { width: clamp(124px, 13vw, 168px); }

.wordmark--type {
  margin: 0;
  font-family: var(--font-tech);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}

.wordmark--preload.wordmark--type {
  opacity: 0;
  font-size: clamp(0.625rem, 1.85vw, 0.8125rem);
}

.wordmark--header.wordmark--type {
  width: auto;
  font-size: clamp(0.5rem, 1vw, 0.625rem);
  letter-spacing: 0.12em;
  text-align: left;
  line-height: 1.2;
}

/* ============================================================
   1. PRELOAD — "Il rilievo"
   ============================================================ */

.preload {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  will-change: transform;
}

.preload__stage {
  width: min(72vw, 620px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.75rem, 5vw, 3.25rem);
  will-change: transform;
}

.rilievo { position: relative; width: 100%; padding-top: 2.25rem; }

.rilievo__svg { display: block; width: 100%; height: 24px; overflow: visible; }

.rilievo__rule,
.rilievo__tick {
  fill: none;
  stroke: var(--paper);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.rilievo__tick { opacity: 0; }

.rilievo__readout {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-tech);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.rilievo__readout::after { content: "%"; opacity: 0.45; margin-left: 0.15em; }

.preload__caption {
  margin: 0;
  font-family: var(--font-tech);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--line);
  opacity: 0;
}

/* ============================================================
   2. HEADER
   Si inverte attraversando i confini: inchiostro sulla carta
   dell'Atto I, carta sull'inchiostro dell'Atto II. Non uso
   mix-blend-mode qui: passerebbe sopra i tratti della pianta e
   il marchio si sfarinerebbe a meta'. Meglio due stati espliciti.

   Nessun fondo, nessuna sfocatura: un pannello opaco sopra la
   carta e l'inchiostro romperebbe l'unica regola cromatica della
   pagina. Il prezzo e' che i titoli gli scorrerebbero sotto
   attraversandolo, e per questo si ritira scendendo — vedi
   headerSiRitira() in transizioni.js.
   ============================================================ */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1rem, 2.4vw, 1.75rem) var(--pad);
  color: var(--ink);
  opacity: 0;                /* rivelato dopo il sipario */
  transition: color 0.5s ease;
}

.site-header__brand {
  color: inherit;
  text-decoration: none;
  flex: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.6vw, 2.25rem);
}

.site-nav a {
  color: rgba(11, 13, 18, 0.72);
  text-decoration: none;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.5s ease, border-color 0.35s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--line-dark);
}

.site-nav__cta {
  font-family: var(--font-tech);
  font-size: 0.6875rem !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem !important;
  border: 1px solid var(--line-dark);
  border-bottom-color: var(--line-dark) !important;
  transition: color 0.5s ease, border-color 0.5s ease;
}

/* Stato su fondo scuro. La classe la mette transizioni.js su
   <html>, non sull'header: la leggono sia il marchio sia il
   cursore, e devono leggere lo stesso interruttore. */
.is-dark .site-header { color: var(--paper); }
.is-dark .site-nav a { color: rgba(244, 242, 237, 0.82); }
.is-dark .site-nav a:hover,
.is-dark .site-nav a:focus-visible {
  color: var(--paper);
  border-bottom-color: var(--line-soft);
}
.is-dark .site-nav__cta {
  border-color: var(--line-soft);
  border-bottom-color: var(--line-soft) !important;
}

@media (max-width: 640px) {
  .site-nav { gap: 0.9rem; }
  .site-nav a { font-size: 0.8125rem; }
  .site-nav a:not(.site-nav__cta) { display: none; }
}

/* ============================================================
   3. ATTO I — LA PIANTA
   La sezione e' alta 300svh e la scena resta ferma per i primi
   200: e' una scena trattenuta, ma ogni scatto di scroll consegna
   un'informazione nuova (un muro, una porta, una quota, una
   metratura). E' la differenza tra una scena trattenuta e uno
   scroll rubato.
   ============================================================ */

.atto1 {
  position: relative;
  height: 300svh;
  background: var(--paper);
}

.atto1__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--paper);

  /* Confina la fusione "difference" della pianta a questa scena:
     senza isolamento cercherebbe il fondo pagina come sfondo e il
     velo d'inchiostro non la invertirebbe. */
  isolation: isolate;

  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(5rem, 12vh, 8rem) var(--pad) clamp(3rem, 8vh, 5rem);
}

/* IL VELO — il gesto centrale del confine tra Atto I e Atto II.
   Non e' un pannello nero che copre: e' una lama che INVERTE i
   pixel che ha dietro. La carta diventa inchiostro e, nello stesso
   istante e sulla stessa linea, i tratti della pianta diventano
   chiari. Un solo elemento attraversa il confine e ne esce
   cambiato di segno.

   Perche' non mix-blend-mode sulla pianta (primo tentativo): il
   velo e la pianta sono entrambi animati per trasformazione,
   quindi vengono promossi a livelli di composizione distinti — e
   a quel punto il velo non fa piu' parte dello sfondo che la
   fusione puo' campionare. backdrop-filter campiona il composito
   e non ha questo problema.

   Sta SOPRA tutto il contenuto della scena (z-index 2): deve
   avere qualcosa dietro da invertire. */
.atto1__wipe {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
  -webkit-backdrop-filter: invert(1);
  backdrop-filter: invert(1);

  /* Stato di riposo: fuori campo, sotto la scena. Serve da rete se
     transizioni.js non gira — senza, un velo che inverte tutto
     resterebbe steso sulla hero. Attenzione: questa matrice va
     ridichiarata a GSAP scomposta, vedi il commento in
     transizioni.js. */
  transform: translateY(100%);
  will-change: transform;
}

/* Dove backdrop-filter non c'e', il velo torna un pannello pieno:
   il confine resta un evento (l'inchiostro sale), perde soltanto
   l'inversione dei tratti. */
@supports not ((backdrop-filter: invert(1)) or (-webkit-backdrop-filter: invert(1))) {
  .atto1__wipe { background: var(--ink); }
}

/* ---- la colonna di testo ---- */

/* Sotto il velo, non sopra: se lo scroll e' brusco e il testo non
   ha finito di sparire, si inverte insieme al resto invece di
   restare inchiostro su inchiostro. */
.atto1__copy {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  will-change: transform;
}

.atto1__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 clamp(1rem, 3vh, 1.75rem);
  font-family: var(--font-tech);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(11, 13, 18, 0.6);
  opacity: 0;
}

.atto1__eyebrow .dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

.atto1__title {
  margin: 0;
  font-size: clamp(2.125rem, 4.4vw, 4rem);
  line-height: 1.0;
  letter-spacing: -0.035em;
  font-weight: 300;
}

.atto1__sub {
  margin: clamp(1.25rem, 3vh, 1.75rem) 0 0;
  max-width: 40ch;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.55;
  color: rgba(11, 13, 18, 0.74);
  opacity: 0;
}

.atto1__sub em {
  font-style: normal;
  color: var(--ink);
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 1px;
}

/* Il riscatto: compare solo quando la pianta e' completa. Ribalta
   il titolo da affermazione a domanda, e apre l'Atto II. */
.atto1__payoff {
  margin: clamp(1.5rem, 3.5vh, 2.25rem) 0 0;
  padding-top: clamp(1rem, 2.5vh, 1.5rem);
  border-top: 1px solid var(--line-dark);
  opacity: 0;
}

.atto1__total {
  margin: 0;
  font-family: var(--font-tech);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  letter-spacing: -0.01em;
  line-height: 1;
}

.atto1__total sup { font-size: 0.5em; vertical-align: super; }

.atto1__ask {
  margin: 0.5rem 0 0;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  color: rgba(11, 13, 18, 0.62);
}

.atto1__cta {
  display: inline-flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: clamp(1.5rem, 3.5vh, 2.25rem);
  padding: 0.9rem 1.4rem;
  border: 1px solid var(--line-dark);
  color: var(--ink);
  text-decoration: none;
  opacity: 0;
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

.atto1__cta:hover,
.atto1__cta:focus-visible {
  background: rgba(11, 13, 18, 0.05);
  border-color: rgba(11, 13, 18, 0.5);
}

.atto1__cta-label { font-size: 0.9375rem; letter-spacing: 0.01em; }

.atto1__cta-note {
  font-family: var(--font-tech);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(11, 13, 18, 0.55);
}

/* ---- la pianta ---- */

.plan-wrap {
  position: relative;
  z-index: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.75rem, 2vh, 1.25rem);
  will-change: transform;
}

.plan {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72svh;
  overflow: visible;
}

.plan__g { fill: none; }

.plan__perim {
  stroke: var(--plan-ink);
  stroke-width: 7;
  stroke-linecap: square;
}

.plan__wall {
  stroke: var(--plan-ink);
  stroke-width: 4;
  stroke-linecap: square;
}

.plan__door {
  stroke: var(--plan-ink);
  stroke-width: 1.6;
  stroke-linecap: butt;
}

.plan__swing {
  stroke: var(--plan-ink);
  stroke-width: 1.1;
  opacity: 0.45;
}

/* Le quote sono annotazione, non costruzione: restano sottili
   rispetto ai muri. Niente non-scaling-stroke, di proposito:
   renderebbe il tratto in pixel schermo mentre getTotalLength()
   misura in unita' del viewBox, e il tracciamento si completerebbe
   a un terzo dello scroll restando poi fermo. */
.plan__dim {
  stroke: var(--plan-ink);
  stroke-width: 1.6;
}

.plan text {
  font-family: var(--font-tech);
  fill: var(--plan-ink);
  stroke: none;
}

.plan__nums text { font-size: 17px; letter-spacing: 1px; }
.plan__name { font-size: 20px; letter-spacing: 2.5px; }
.plan__area { font-size: 16px; opacity: 0.55; }

.plan-wrap__cap {
  font-family: var(--font-tech);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--plan-ink);
  opacity: 0.5;
}

/* ---- l'invito allo scroll ---- */

.atto1__cue {
  position: absolute;
  left: var(--pad);
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  opacity: 0;
}

.atto1__cue-label {
  font-family: var(--font-tech);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(11, 13, 18, 0.5);
}

.atto1__cue-line {
  width: clamp(40px, 6vw, 72px);
  height: 1px;
  background: linear-gradient(to right, rgba(11,13,18,0.45), rgba(11,13,18,0));
}

/* Su schermo stretto testo e pianta si impilano: la pianta perde
   la catena di quote inferiore, che a quella scala diventa
   illeggibile — e una quota illeggibile e' peggio di una assente.

   Il budget verticale qui e' molto piu' stretto che su desktop: la
   stessa colonna di testo che su un monitor sta a fianco della
   pianta, qui sta SOPRA. Il "payoff" (84,0 m² + la domanda) resta
   riservato anche da invisibile — e' cosi' su entrambi i layout,
   di proposito, per non produrre un salto quando compare — ma i
   suoi margini erano tarati per un fondo che sulla colonna di
   testo desktop non ruba nulla alla pianta. Su una colonna sola
   quello stesso margine e' la differenza tra vedere la pianta al
   primo schermo o doverci scorrere sopra per trovarla: si stringe
   ogni respiro del blocco di testo, non solo quello del payoff. */
@media (max-width: 900px) {
  .atto1 { height: 260svh; }

  .atto1__stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: start;
    gap: clamp(0.75rem, 1.5vh, 1rem);
    padding-top: clamp(3.25rem, 7.5vh, 4.5rem);
  }

  .atto1__copy { max-width: none; }

  .atto1__eyebrow { margin-bottom: clamp(0.75rem, 2vh, 1.25rem); }
  .atto1__sub { margin-top: clamp(0.875rem, 2vh, 1.25rem); }

  .atto1__payoff {
    margin-top: clamp(0.75rem, 1.5vh, 1rem);
    padding-top: clamp(0.5rem, 1vh, 0.75rem);
  }

  .atto1__cta { margin-top: clamp(0.75rem, 1.5vh, 1rem); }

  .plan { max-height: 38svh; }
  .plan-wrap__cap { display: none; }
  .atto1__cue { display: none; }
}

@media (max-width: 560px) {
  #pChain, #pChainNum { display: none; }
  .plan__name { font-size: 24px; }
  .plan__area { font-size: 19px; }
}

/* ============================================================
   4. ATTO II — LA TESI
   Fondo inchiostro: e' la stessa superficie del velo che ha
   chiuso l'Atto I, quindi il passaggio non ha giunture. Nessuna
   immagine — qui la fiducia si costruisce con la voce.
   ============================================================ */

.atto2 {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(6rem, 18vh, 12rem) 0 0;
}

.atto2__inner {
  padding: 0 var(--pad);
  max-width: 78rem;
  margin: 0 auto;
}

.atto2__meta {
  margin: 0 0 clamp(1.75rem, 5vh, 3rem);
  font-family: var(--font-tech);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 242, 237, 0.45);
  opacity: 0;
}

.atto2__title {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 300;
}

.atto2__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 7vh, 4.5rem);
  max-width: 62rem;
}

.atto2__body p {
  margin: 0;
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
  line-height: 1.62;
  color: rgba(244, 242, 237, 0.74);
}

.atto2__close {
  margin: clamp(3rem, 9vh, 6rem) 0 0;
  max-width: 30ch;
  /* Senza, "superficie." resta sola in seconda riga */
  text-wrap: balance;
  font-size: clamp(1.375rem, 2.8vw, 2.375rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 300;
}

.atto2__close em {
  font-style: normal;
  display: block;
  color: rgba(244, 242, 237, 0.5);
}

/* L'ultima quota del sito: nasce sotto la frase di chiusura e si
   estende fino a diventare il filo superiore del footer. La misura
   apre il sito nel preload e lo chiude qui. */
.atto2__rule {
  display: flex;
  align-items: center;
  margin-top: clamp(3.5rem, 11vh, 8rem);
}

.atto2__rule-line {
  flex: 1;
  height: 1px;
  background: rgba(244, 242, 237, 0.3);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  will-change: transform;
}

.atto2__rule-tick {
  flex: none;
  width: 1px;
  height: 20px;
  background: rgba(244, 242, 237, 0.45);
  opacity: 0;
}

/* ============================================================
   5. ATTO III — IL METODO
   Torna la carta, e questa volta la carta e' un oggetto: un foglio
   unico, steso da sinistra a destra mentre si scorre in verticale.

   PERCHE' NON TRE BLOCCHI (ne' tre colonne, ne' le tre righe della
   versione precedente): tre blocchi affiancati sono la "griglia di
   feature" piu' vista del web, cioe' esattamente il sapore da
   template da cui questo sito sta scappando. Una tavola srotolata
   invece e' il modo in cui un metodo si mostra davvero in uno
   studio. Ed e' anche l'unica ragione per cui questa sezione puo'
   permettersi di trattenere lo scroll come fa l'Atto I: ogni
   tratto di carta che si scopre porta un dato nuovo, non un
   effetto.

   COME FUNZIONA IL TAGLIO — e perche' non e' un clip-path.
   Il foglio e' largo tre schermate e si trasla (la telecamera
   segue il rullo). Quello che nasconde la carta non ancora stesa
   e' una COPERTA del colore esatto del fondo pagina, anch'essa
   traslata: due trasformazioni, nessuna geometria da ricalcolare a
   ogni fotogramma. Un clip-path animato avrebbe ridisegnato il
   foglio a ogni frame; questo si compone e basta.

   ORDINE DI SOVRAPPOSIZIONE
     foglio (1) → coperta (3) → rullo (4) → annotazioni e testa (6)
   Il rullo sta sopra la coperta e ne copre il bordo: per questo la
   carta finisce esattamente dove comincia il rullo, e il bordo di
   attacco non si vede mai come un taglio netto.
   ============================================================ */

:root {
  /* Il foglio non e' il colore del fondo: e' appena piu' chiaro e
     piu' freddo della carta della pagina. Quel mezzo tono di
     differenza e' tutto quello che serve perche' legga come un
     foglio APPOGGIATO sulla pagina invece che come un'area di
     colore. */
  --foglio:       #FCFBF8;
  --foglio-linea: rgba(11, 13, 18, 0.10);
}

.atto3 {
  position: relative;
  z-index: 1;
  /* Cinque schermate di corsa piu' una di scena: 15% per la testa,
     poi un pannello ogni ~30%. */
  height: 600svh;
  background: var(--paper);
  color: var(--ink);
}

.atto3__scena {
  position: sticky;
  top: 0;
  height: 100svh;
  /* La tavola e' larga tre schermate e vive tutta qui dentro:
     questo overflow e' la ragione per cui non compare mai una
     barra di scorrimento orizzontale. */
  overflow: hidden;
  background: var(--paper);
}

/* ---- le due annotazioni di bordo ----
   Corrono lungo il bordo inferiore, come su una tavola vera, e non
   in alto: in alto ci passa l'header fisso. Restano in campo per
   tutta la scena — con lo scroll trattenuto per cinque schermate,
   sapere dove si e' non e' decorazione. */

.atto3__meta,
.atto3__tav {
  position: absolute;
  bottom: clamp(1.25rem, 3.5vh, 2.25rem);
  z-index: 6;
  margin: 0;
  font-family: var(--font-tech);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--line);
  opacity: 0;
}

.atto3__meta { left: var(--pad); }
.atto3__tav  { right: var(--pad); }

/* ---- la testa dell'atto ----
   Occupa il campo che la carta poi prendera'. Niente transform per
   centrarla: GSAP leggerebbe quella percentuale dalla matrice
   calcolata e se la porterebbe dietro animando y. Centro con la
   griglia, lascio libera la trasformazione. */
.atto3__testa {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  align-content: center;
  justify-items: start;
  padding: 0 var(--pad);
  pointer-events: none;
}

.atto3__title {
  margin: 0;
  font-weight: 300;
  font-size: clamp(2rem, 5.2vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.atto3__lead {
  margin: clamp(1rem, 3vh, 1.75rem) 0 0;
  max-width: 34rem;
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  line-height: 1.6;
  color: rgba(11, 13, 18, 0.66);
  opacity: 0;
}

/* ============================================================
   LA TAVOLA
   Il foglio occupa 72svh: il resto e' aria, ed e' quello che lo fa
   leggere come un oggetto posato invece che come una fascia di
   fondo.
   ============================================================ */

.tavola {
  position: absolute;
  left: 0;
  right: 0;
  top: 14svh;
  height: 72svh;
  z-index: 1;
}

.tavola__foglio {
  position: absolute;
  top: 0;
  left: 0;
  /* Tre pannelli da una schermata ciascuno. */
  width: 300%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  background: var(--foglio);
  /* Un'ombra sola, larga e quasi assente: la carta appoggia sulla
     pagina, non galleggia. */
  box-shadow:
    0 1px 0 rgba(11, 13, 18, 0.04),
    0 2px 10px -6px rgba(11, 13, 18, 0.12),
    0 26px 60px -34px rgba(11, 13, 18, 0.30);
  will-change: transform;
}

/* LA GRANA. Rumore frattale generato dal browser una volta sola e
   ripetuto a mattonelle: nessun asset esterno, e siccome il foglio
   e' un livello promosso dalla trasformazione, questo si dipinge
   una volta e poi viene solo composto. Il filtro NON e' applicato
   all'elemento animato: sarebbe stato ricalcolato a ogni frame. */
.tavola__foglio::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.055;
  pointer-events: none;
}

/* I DUE BORDI, appena irregolari. Sono due linee disegnate con
   un'ondulazione di mezzo pixel e ripetute in orizzontale: un
   foglio tagliato a mano non ha il bordo di un rettangolo CSS, e
   mezzo pixel e' esattamente quanto basta per dirlo senza che
   diventi un effetto. */
.tavola__foglio::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='3'%3E%3Cpath d='M0 1.6 C 46 1, 88 2.3, 132 1.7 S 214 1.1, 258 2 S 306 2.1, 320 1.6' fill='none' stroke='%230B0D12' stroke-opacity='0.17' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='3'%3E%3Cpath d='M0 1.4 C 52 2.2, 96 1, 140 1.8 S 226 2.3, 270 1.3 S 308 1.2, 320 1.4' fill='none' stroke='%230B0D12' stroke-opacity='0.17' stroke-width='1'/%3E%3C/svg%3E");
  background-position: left top, left bottom;
  background-repeat: repeat-x, repeat-x;
  pointer-events: none;
}

/* ---- la coperta ---- */

.tavola__coperta {
  position: absolute;
  z-index: 3;
  left: 0;
  /* Piu' alta della scena: deve coprire anche l'ombra del foglio,
     sopra e sotto, o resterebbe una frangia scura sospesa nel
     vuoto a destra del rullo. */
  top: -60svh;
  height: 220svh;
  width: 101%;
  background: var(--paper);
  will-change: transform;
}

/* ---- il rullo ----
   Si assottiglia mentre avanza, perche' la carta che stende la
   prende da se stesso. Scala da sinistra: il punto di contatto con
   la carta stesa deve restare fermo, o il rullo si staccherebbe
   dal bordo di attacco. */

.tavola__rullo {
  position: absolute;
  z-index: 4;
  left: 0;
  top: -13px;
  height: calc(100% + 26px);
  width: 60px;
  transform-origin: left center;
  will-change: transform;
}

.rullo__corpo {
  position: absolute;
  inset: 13px 0 0;
  border-radius: 1px 1px 2px 2px;
  /* Illuminazione cilindrica: due bordi in ombra, una sola
     lumeggiatura spostata a sinistra. La luce sta dove sta in tutto
     il resto della pagina, cioe' da nessuna parte in particolare —
     quindi basta che sia coerente con se stessa. */
  background: linear-gradient(
    to right,
    rgba(11, 13, 18, 0.16) 0%,
    rgba(11, 13, 18, 0.04) 6%,
    #FFFFFE 30%,
    var(--foglio) 54%,
    rgba(11, 13, 18, 0.07) 84%,
    rgba(11, 13, 18, 0.22) 100%
  );
  box-shadow: 0 1px 3px -1px rgba(11, 13, 18, 0.18);
}

/* L'ombra di contatto cade a sinistra, sulla carta gia' stesa:
   e' quello che tiene il rullo appoggiato invece che incollato. */
.rullo__ombra {
  position: absolute;
  top: 15px;
  bottom: 0;
  right: 100%;
  width: 52px;
  background: linear-gradient(
    to left,
    rgba(11, 13, 18, 0.2),
    rgba(11, 13, 18, 0.06) 44%,
    rgba(11, 13, 18, 0)
  );
}

.rullo__cima {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 26px;
  overflow: visible;
}

.rullo__testa {
  fill: var(--foglio);
  stroke: rgba(11, 13, 18, 0.30);
  stroke-width: 1;
}

.rullo__spirale {
  fill: none;
  stroke: rgba(11, 13, 18, 0.30);
  stroke-width: 1;
  transform-origin: 30px 13px;
}

/* ============================================================
   I PANNELLI
   Un passo per schermata. La giuntura tra due pannelli non e' un
   margine: e' una linea sola, con le due crocette di registro
   sopra e sotto. Su una tavola i fogli si giuntano cosi', e quella
   linea e' la prova che i tre passi sono un foglio unico e non tre
   schede affiancate.
   ============================================================ */

.pannello {
  position: relative;
  flex: 0 0 33.3333%;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: center;
  gap: clamp(2rem, 4.5vw, 4.5rem);
  padding: clamp(2rem, 5vh, 3.5rem) var(--pad);
  /* A destra c'e' il rullo in stazione, e il rullo non e' un
     margine: e' un oggetto opaco. Nel momento in cui un pannello
     riempie lo schermo, il rullo gli e' ancora appoggiato sopra il
     bordo destro, quindi tutto quello che si deve poter leggere
     deve stare alla sua sinistra. Senza questo margine la pianta
     del secondo passo restava tagliata proprio nell'istante in cui
     era il soggetto della scena. */
  padding-right: max(var(--pad), 10.5rem);
}

.pannello + .pannello { border-left: 1px solid var(--foglio-linea); }

.pannello + .pannello::before,
.pannello + .pannello::after {
  content: "";
  position: absolute;
  left: -7px;
  width: 13px;
  height: 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M6.5 0 V 13 M 0 6.5 H 13' stroke='%230B0D12' stroke-opacity='0.28' stroke-width='1'/%3E%3C/svg%3E");
}

.pannello + .pannello::before { top: 14px; }
.pannello + .pannello::after  { bottom: 14px; }

.pannello__testo { max-width: 34rem; }

/* Il pannello 02 ha due cose nella colonna di sinistra: il testo e
   lo schizzo a margine. Il disegno grande, a destra, le scavalca
   entrambe e resta centrato. Solo quel pannello prende la seconda
   riga — negli altri due non esiste, e nemmeno il suo gap. */
.pannello:has(.schizzo) { grid-template-rows: auto auto; }
.pannello:has(.schizzo) .pannello__testo { grid-row: 1; grid-column: 1; }
.pannello:has(.schizzo) .pannello__disegno { grid-row: 1 / -1; grid-column: 2; }

.schizzo {
  grid-row: 2;
  grid-column: 1;
  margin: clamp(1.25rem, 3vh, 2rem) 0 0;
  max-width: 22rem;
}

.schizzo__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 20svh;
}

.schizzo figcaption {
  margin-top: 0.625rem;
  font-family: var(--font-tech);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--line);
}

/* La matricola sta sopra il corpo e non a sinistra: nella colonna
   di un pannello quattro rem e mezzo di incolonnamento erano un
   quarto della larghezza utile. */
.passo__num {
  margin: 0 0 clamp(0.875rem, 2.5vh, 1.5rem);
  font-family: var(--font-tech);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1;
  color: var(--line);
  opacity: 0;
}

.passo__label {
  margin: 0 0 0.5rem;
  font-family: var(--font-tech);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--line);
}

.passo__title {
  margin: 0 0 0.75rem;
  font-weight: 300;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.passo__body {
  margin: 0;
  max-width: 34rem;
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  line-height: 1.65;
  color: rgba(11, 13, 18, 0.72);
}

/* L'esito ha una riga sua sopra: e' la risposta alla domanda "e io
   cosa mi porto via da questo passo", e annegato nel corpo del
   testo non si troverebbe piu'. */
.passo__esito {
  margin: clamp(1.25rem, 3.5vh, 2rem) 0 0;
  padding-top: clamp(0.75rem, 2vh, 1.125rem);
  border-top: 1px solid var(--foglio-linea);
  font-family: var(--font-tech);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.passo__esito-k {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--line);
}

/* Il corpo e l'esito si alzano insieme: sono la stessa unita' di
   senso, separata solo dalla griglia. */
.passo__corpo, .passo__esito { opacity: 0; }

.atto3__nota {
  margin: clamp(1.25rem, 3vh, 1.75rem) 0 0;
  font-family: var(--font-tech);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: rgba(11, 13, 18, 0.6);
}

/* ============================================================
   QUELLO CHE C'E' STAMPATO SOPRA
   I disegni non si auto-disegnano. La linea che si traccia da sola
   e' il gesto dell'Atto I e usata una seconda volta diventa
   l'unico trucco che il sito conosce — ma soprattutto sarebbe
   falsa: questi disegni sono STAMPATI sul foglio, quindi si
   scoprono con la carta e non si costruiscono. L'unica cosa che si
   muove sono le parole.

   Tratto piu' sottile della pianta dell'Atto I perche' e' una
   riproduzione in scala ridotta, non la tavola a grandezza
   naturale.
   ============================================================ */

.pannello__disegno {
  margin: 0;
  min-width: 0;
}

.disegno {
  display: block;
  width: 100%;
  height: auto;
  max-height: 54svh;
  overflow: visible;
}

.disegno__perim  { fill: none; stroke: var(--ink); stroke-width: 4.5; stroke-linecap: square; }
.disegno__muro   { fill: none; stroke: var(--ink); stroke-width: 2.75; }
.disegno__porta  { fill: none; stroke: var(--ink); stroke-width: 1.3; }
.disegno__arco   { fill: none; stroke: var(--ink); stroke-width: 1; opacity: 0.4; }
.disegno__quota  { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.disegno__arredo { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: 0.55; }
.disegno__axo    { fill: none; stroke: var(--ink); stroke-width: 1.6; opacity: 0.72; }

.disegno text { font-family: var(--font-tech); fill: var(--ink); }

/* Le annotazioni sono in unita' del disegno, quindi si rimpiccioliscono
   con lui: un disegno ridotto a due terzi porta annotazioni piu'
   grandi del vero, esattamente come su una tavola stampata in
   scala. Questi valori sono tarati perche' a colonna piena
   arrivino intorno agli 11-15 pixel reali. */
.disegno__num text { font-size: 19px; letter-spacing: 0.5px; }
.disegno__nome     { font-size: 22px; letter-spacing: 2px; }
.disegno__area     { font-size: 18px; letter-spacing: 0.5px; opacity: 0.55; }

.disegno__cap {
  font-size: 15px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  opacity: 0.45;
}

/* ---- i documenti del terzo pannello ----
   L'ultimo passo non ha un disegno: ha i due fogli su cui un
   preventivo si scrive davvero. */

.pannello__disegno--doc {
  display: grid;
  gap: clamp(1.5rem, 4vh, 2.5rem);
  align-content: center;
}

.abaco__k,
.campioni__cap {
  margin: 0 0 0.75rem;
  font-family: var(--font-tech);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--line);
}

.abaco__lista {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 4vw, 3rem);
}

.abaco__riga {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--foglio-linea);
  font-family: var(--font-tech);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.abaco__riga dt { color: rgba(11, 13, 18, 0.72); }
.abaco__riga dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Il totale chiude entrambe le colonne: e' lo stesso numero della
   hero, e deve leggersi come una somma e non come una nona voce. */
.abaco__riga--tot {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  border-bottom: 0;
  border-top: 1px solid rgba(11, 13, 18, 0.28);
  font-size: 0.875rem;
}

.abaco__riga--tot dt { color: var(--ink); }

.campioni { margin: 0; }

.campioni__svg {
  display: block;
  width: 100%;
  max-width: 32rem;
  height: auto;
  color: rgba(11, 13, 18, 0.5);
}

/* Il contenuto di un pattern non eredita dal rettangolo che lo
   usa: eredita dal proprio ramo. Per questo il colore sta sulla
   radice dell'SVG e qui si legge con currentColor. */
.campioni__svg pattern path   { fill: none; stroke: currentColor; stroke-width: 1; }
.campioni__svg pattern circle { fill: currentColor; stroke: none; }

.campioni__g rect {
  stroke: rgba(11, 13, 18, 0.32);
  stroke-width: 1;
  fill-opacity: 1;
}

.campioni__pieno { fill: rgba(11, 13, 18, 0.1); }

.campioni__sigla text {
  font-family: var(--font-tech);
  font-size: 14px;
  letter-spacing: 1.5px;
  fill: var(--line);
}

/* La riga sta in fondo al foglio. Senza aria sotto, su alcuni
   schermi (barra degli indirizzi, font di sistema piu' alto, bordo
   irregolare della carta) l'ultima riga finisce tagliata sul bordo. */
.campioni__cap {
  margin: 0.75rem 0 0;
  padding-bottom: 0.35rem;
  line-height: 1.45;
}

/* Finestre basse: la colonna documenti non deve sbordare dal
   foglio, che ha un'altezza fissa. I campioni si riducono, la
   didascalia resta dentro la carta. */
@media (min-width: 901px) and (max-height: 760px) {
  .pannello { padding-top: 1.15rem; padding-bottom: 1.6rem; }
  .pannello__disegno--doc { gap: 0.75rem; }
  .abaco__riga { padding: 0.28rem 0; }
  .campioni__svg { max-height: 4.75rem; }
}

/* ============================================================
   ATTO III SOTTO I 900px
   Stessa tavola del desktop, ruotata: lo scroll verticale srotola
   il foglio verso il basso. Il rullo e' un cilindro orizzontale
   appoggiato al bordo di attacco, e la coperta — colore del fondo
   — nasconde la carta che non e' ancora stata stesa.

   I tre passi restano impilati, uno sotto l'altro: una colonna di
   telefono non regge tre pannelli affiancati. Il disegno si
   stringe quel tanto che serve a restare leggibile.
   ============================================================ */
@media (max-width: 900px) {
  .atto3 { height: 520svh; }

  .atto3__scena {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    padding: 0;
  }

  .atto3__meta,
  .atto3__tav {
    position: absolute;
    bottom: clamp(1rem, 3vh, 1.5rem);
  }

  .atto3__tav { display: block; }

  .atto3__testa {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    padding: 0 var(--pad);
    pointer-events: none;
  }

  .atto3__title { font-size: clamp(1.75rem, 8.2vw, 2.35rem); }

  .tavola {
    position: absolute;
    left: var(--pad);
    right: var(--pad);
    top: 10svh;
    height: 74svh;
    margin: 0;
    overflow: hidden;
  }

  .tavola__foglio {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    will-change: transform;
  }

  .tavola__coperta {
    display: block;
    left: -12%;
    width: 124%;
    top: 0;
    height: 140%;
  }

  /* Il cilindro si sdraia: la carta esce da sopra, l'ombra di
     contatto cade sulla carta gia' stesa. Scala dall'alto, cosi'
     assottigliandosi non si stacca dal bordo. */
  .tavola__rullo {
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 34px;
    transform-origin: center top;
  }

  .tavola__rullo::before,
  .tavola__rullo::after {
    content: "";
    position: absolute;
    top: 0;
    width: 16px;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, #FFFFFE 0%, var(--foglio) 62%, rgba(11, 13, 18, 0.22) 100%);
    box-shadow: inset 0 0 0 1px rgba(11, 13, 18, 0.22);
    z-index: 1;
  }

  .tavola__rullo::before { left: 0; }
  .tavola__rullo::after { right: 0; }

  .rullo__corpo {
    inset: 1px 14px;
    border-radius: 1px;
    background: linear-gradient(
      to bottom,
      rgba(11, 13, 18, 0.2) 0%,
      rgba(11, 13, 18, 0.05) 18%,
      #FFFFFE 42%,
      var(--foglio) 68%,
      rgba(11, 13, 18, 0.16) 100%
    );
  }

  .rullo__ombra {
    top: auto;
    bottom: 100%;
    left: 14px;
    right: 14px;
    width: auto;
    height: 22px;
    background: linear-gradient(
      to top,
      rgba(11, 13, 18, 0.18),
      rgba(11, 13, 18, 0.05) 46%,
      rgba(11, 13, 18, 0)
    );
  }

  .rullo__cima { display: none; }

  .pannello {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    padding: clamp(1.35rem, 3.5vh, 1.85rem) clamp(1rem, 4vw, 1.35rem);
    padding-right: clamp(1rem, 4vw, 1.35rem);
  }

  /* L'ultimo passo chiude il foglio. Il rullo, fermo in basso,
     copre una striscia alta quanto il cilindro: la didascalia dei
     campioni deve stare sopra quella striscia, non sul bordo. */
  .pannello:last-child {
    padding-bottom: calc(34px + 1.75rem);
  }

  .pannello + .pannello {
    border-left: 0;
    border-top: 1px solid var(--foglio-linea);
  }

  .pannello + .pannello::before,
  .pannello + .pannello::after { display: none; }

  .pannello__testo { max-width: none; }

  .pannello__disegno { margin-top: clamp(1.15rem, 3vh, 1.75rem); }

  .schizzo { max-width: 11rem; }
  .schizzo__svg { max-height: none; }

  .disegno { max-height: 42svh; }

  .disegno__nome,
  .disegno__area { display: none; }

  .disegno__num text { font-size: 34px; }
  .disegno__cap { font-size: 30px; }

  .abaco__lista { grid-template-columns: minmax(0, 1fr); }
  .abaco__riga--tot { margin-top: 0.75rem; }
}

/* ============================================================
   6. ATTO IV — IL RILIEVO RICHIESTO
   Ancora carta, e volutamente non un altro passaggio scuro: un
   solo tratto d'inchiostro in tutta la pagina e' la ragione per
   cui l'inversione dell'Atto I funziona. Usata due volte
   diventerebbe un effetto.

   La transizione dall'Atto III e' un cambio di DENSITA', non un
   altro filo che si disegna: dopo una tavola fitta di disegno e di
   numeri arriva molta aria e una riga sola. Per questo il padding superiore e' il
   piu' generoso della pagina — quello spazio *e'* la
   transizione, non e' margine avanzato.
   ============================================================ */

.atto4 {
  position: relative;
  z-index: 1;
  background: var(--paper);
  color: var(--ink);
  padding: clamp(7rem, 26vh, 15rem) var(--pad) clamp(5rem, 14vh, 9rem);
}

.atto4__inner { max-width: 68rem; margin: 0 auto; }

.atto4__meta {
  margin: 0 0 clamp(1.25rem, 3vh, 2rem);
  font-family: var(--font-tech);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--line);
  opacity: 0;
}

.atto4__title {
  margin: 0;
  font-weight: 300;
  font-size: clamp(2.5rem, 7.5vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.atto4__lead {
  margin: clamp(1.25rem, 3vh, 2rem) 0 0;
  max-width: 30rem;
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  line-height: 1.55;
  color: rgba(11, 13, 18, 0.66);
  opacity: 0;
}

/* Il numero e' l'azione, quindi il numero e' grande. Non un
   bottone con dentro un'etichetta: su un disegno le misure si
   leggono e si prendono, non si cliccano. */
.atto4__chiama {
  display: inline-block;
  margin: clamp(2.5rem, 8vh, 4.5rem) 0 clamp(3rem, 10vh, 5.5rem);
  color: var(--ink);
  text-decoration: none;
  opacity: 0;
}

.atto4__chiama-k {
  display: block;
  margin-bottom: 0.625rem;
  font-family: var(--font-tech);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--line);
  transition: color 0.4s ease;
}

.atto4__chiama-num {
  display: block;
  font-family: var(--font-tech);
  font-size: clamp(1.75rem, 4.4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.01em;
  padding-bottom: 0.25em;
  border-bottom: 1px solid var(--line-dark);
  transition: border-color 0.4s ease;
}

.atto4__chiama:hover .atto4__chiama-k,
.atto4__chiama:focus-visible .atto4__chiama-k { color: var(--ink); }
.atto4__chiama:hover .atto4__chiama-num,
.atto4__chiama:focus-visible .atto4__chiama-num { border-bottom-color: var(--ink); }

/* I fili tra le celle sono il fondo del contenitore che si vede
   attraverso un gap di 1px. Con i bordi sulle celle, ogni
   giuntura interna ne avrebbe avuti due sovrapposti: 2px in mezzo
   e 1px ai margini, cioe' una griglia che non e' mai stata
   tirata con la stessa penna. */
.cartiglio {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
}

.cartiglio__cella {
  background: var(--paper);
  padding: clamp(1rem, 2.4vw, 1.5rem);
  opacity: 0;
}

.cartiglio__k {
  margin: 0 0 0.75rem;
  font-family: var(--font-tech);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--line);
}

.cartiglio__v {
  margin: 0;
  font-family: var(--font-tech);
  font-size: 0.8125rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.cartiglio__v a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-dark);
  transition: border-color 0.3s ease;
  /* Il testo e' in colonna, tre righe fitte: sul monitor il
     puntatore e' preciso, sul telefono e' un polpastrello. Il
     padding verticale su un elemento inline allarga l'area toccabile
     senza spostare le righe, perche' sull'inline non entra nel
     calcolo dell'altezza della riga. */
  padding: 0.5rem 0;
}

.cartiglio__v a:hover,
.cartiglio__v a:focus-visible { border-bottom-color: var(--ink); }

.atto4__nota {
  margin: clamp(1.5rem, 4vh, 2.5rem) 0 0;
  font-family: var(--font-tech);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: rgba(11, 13, 18, 0.6);
  opacity: 0;
}

/* Quattro celle in fila hanno bisogno di larghezza: sotto i
   900px il cartiglio diventa 2x2, e sotto i 560px una colonna.
   Un cartiglio con l'indirizzo a capo ogni due parole non e' piu'
   un cartiglio. */
@media (max-width: 900px) {
  .cartiglio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .cartiglio { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   7. FOOTER
   Nessun bordo superiore proprio: dopo l'Atto III il confine e' un
   cambio di colore, carta contro inchiostro, e un filo disegnato
   sopra un salto di tono sarebbe una cintura con le bretelle.
   ============================================================ */

.site-footer {
  padding: clamp(2.5rem, 7vh, 4.5rem) var(--pad);
  background: var(--ink);
  color: rgba(244, 242, 237, 0.72);
}

.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 3rem;
  justify-content: space-between;
  align-items: flex-start;
}

.site-footer p { margin: 0; font-size: 0.875rem; line-height: 1.6; }

.site-footer a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
}

.site-footer__note {
  font-family: var(--font-tech);
  font-size: 0.6875rem !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ============================================================
   8. IL CURSORE
   Due elementi indipendenti, non uno.

   Il punto sta esattamente sotto il dito: nascondendo il cursore
   di sistema, quel punto diventa il punto in cui si clicca, e un
   punto che insegue con ritardo vuol dire cliccare dove non si
   sta guardando. L'anello invece puo' permettersi di inseguire —
   non indica dove premi, dice che c'e' qualcosa da premere.

   Colore: segue lo stato chiaro/scuro della radice. Non uso
   mix-blend-mode nemmeno qui: la pagina ha piu' livelli promossi
   dalle trasformazioni, la fusione non li campiona in modo
   affidabile, e il modo in cui fallirebbe e' il peggiore
   possibile — un cursore quasi invisibile sulla carta.
   ============================================================ */

:root { --cursore: var(--ink); }
.is-dark { --cursore: var(--paper); }

.cursore {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  will-change: transform;
  /* Il colore cambia col fondo, la posizione no: la transizione
     e' solo sui colori, o il punto arriverebbe in ritardo. */
  transition: background-color 0.5s ease, border-color 0.5s ease;
}

/* Il centraggio e' affidato al margine e non a translate(-50%).
   GSAP leggerebbe quella percentuale dalla matrice calcolata come
   uno spostamento in pixel e se la porterebbe dietro scalando
   l'anello: la trasformazione qui deve restare libera. */
.cursore--punto {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--cursore);
}

.cursore--anello {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--cursore);
}

/* Il cursore di sistema va spento su tutto: la voce del foglio di
   stile del browser mette "pointer" sui link, e senza !important
   ricomparirebbe proprio sopra le due cose cliccabili. */
html.cursore-attivo,
html.cursore-attivo * { cursor: none !important; }

/* ============================================================
   9. ACCESSIBILITA' — il sito funziona identico senza movimento
   Senza movimento non c'e' scena trattenuta: l'Atto I torna alta
   una schermata, la pianta e' gia' completa, e il velo — che qui
   non ha modo di salire — resta fuori dai piedi.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .preload { display: none; }
  body.is-loading { overflow: auto; height: auto; }

  .atto1 { height: auto; }
  .atto1__stage { position: static; height: auto; min-height: 100svh; }
  .atto1__wipe { display: none; }

  /* Nemmeno l'Atto III trattiene lo scroll: la tavola e' gia'
     stesa. E' la stessa impaginazione verticale del mobile — un
     foglio unico, i tre passi impilati — senza il rullo, che senza
     movimento non avrebbe nulla da srotolare. */
  .atto3 { height: auto; }

  .atto3__scena {
    position: static;
    height: auto;
    overflow: visible;
    padding: clamp(5rem, 16vh, 10rem) var(--pad) clamp(4rem, 12vh, 8rem);
  }

  .atto3__meta {
    position: static;
    margin: 0 0 clamp(1.5rem, 4vh, 2.75rem);
  }

  .atto3__tav { display: none; }

  .atto3__testa {
    position: static;
    inset: auto;
    display: block;
    padding: 0;
    pointer-events: auto;
  }

  .tavola {
    position: static;
    height: auto;
    margin-top: clamp(2.5rem, 8vh, 4rem);
  }

  .tavola__foglio {
    position: static;
    width: auto;
    height: auto;
    display: block;
    will-change: auto;
  }

  .tavola__coperta,
  .tavola__rullo { display: none; }

  .pannello {
    display: block;
    padding: clamp(1.75rem, 5vh, 2.75rem) clamp(1.25rem, 5vw, 2rem);
  }

  .pannello + .pannello {
    border-left: 0;
    border-top: 1px solid var(--foglio-linea);
  }

  .pannello + .pannello::before,
  .pannello + .pannello::after { display: none; }

  .pannello__testo { max-width: none; }
  .pannello__disegno { margin-top: clamp(1.5rem, 4vh, 2.25rem); }
  .disegno { max-height: none; }

  .abaco__lista { grid-template-columns: minmax(0, 1fr); }

  .mask__in { transform: none; }

  /* Senza movimento l'header non puo' ritirarsi allo scroll, e un
     header fisso senza fondo si sovrappone ai titoli delle
     sezioni. Qui smette di essere fisso: resta in cima al
     documento e scorre via, che e' la versione senza animazione
     dello stesso comportamento. */
  .site-header { position: absolute; }

  .site-header,
  .atto1__eyebrow,
  .atto1__sub,
  .atto1__payoff,
  .atto1__cta,
  .atto1__cue,
  .atto2__meta,
  .atto2__rule-tick,
  .atto3__meta,
  .atto3__lead,
  .atto3__nota,
  .passo__num,
  .passo__corpo,
  .passo__esito,
  .atto4__meta,
  .atto4__lead,
  .atto4__chiama,
  .atto4__nota,
  .cartiglio__cella,
  .preload__caption { opacity: 1; }

  .plan__perim, .plan__wall, .plan__door,
  .plan__swing, .plan__dim {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }

  .atto2__rule-line { transform: scaleX(1); }
}