/* ==========================================================================
   COOPITALY - foglio unico
   Doppio bezel, isole flottanti, fisica dei pulsanti, grana su fisso.
   Il tricolore del marchio e' il segno che apre e separa: banda nell'apertura
   e nella chiusura, banda piu' filo come stacco fra i capitoli.
   Vanilla: nessun dominio esterno, nessun build step.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Carta e caffe ---------------------------------------------------- */
  --paper:      #FDFBF7;
  --paper-2:    #F6F2EA;
  --paper-3:    #EFE9DE;
  --espresso:   #171310;
  --espresso-2: #221C17;
  --espresso-3: #2E2620;

  --ink:        #171310;
  --body:       #4A423B;
  --muted:      #6E645B;
  --on-dark:    #F4EFE6;
  --on-dark-mu: #A2988C;

  --brass:      #8A5729;
  --brass-lit:  #D9974F;

  /* --- Tricolore: i colori sono quelli del logo, non scelte grafiche ---- */
  --tri-green: #00BC00;
  --tri-white: #CCCCCC;
  --tri-red:   #FF0000;
  --tri-w:     108px;
  --tri-h:     3px;
  --tri-gap:   4px;

  /* --- Hairline tinte, mai grigio generico ------------------------------ */
  --line:        rgb(23 19 16 / 0.08);
  --line-strong: rgb(23 19 16 / 0.14);
  --line-brass:  rgb(138 87 41 / 0.24);
  --line-dark:   rgb(244 239 230 / 0.12);

  /* --- Ombre ambientali diffuse, mai scure ------------------------------ */
  --lift-rest:  0 1px 1px rgb(23 19 16 / 0.03), 0 8px 24px -12px rgb(23 19 16 / 0.10);
  --lift-hover: 0 2px 4px rgb(23 19 16 / 0.04), 0 28px 60px -24px rgb(23 19 16 / 0.16);
  --lift-dark:  0 30px 80px -40px rgb(0 0 0 / 0.9);
  --gloss:      inset 0 1px 1px rgb(255 255 255 / 0.65);
  --gloss-dark: inset 0 1px 1px rgb(255 255 255 / 0.08);

  /* Riflesso sul bordo alto del pulsante scuro: e' cio' che gli da' massa
     invece di lasciarlo una pastiglia piatta di colore. */
  --gloss-btn:  inset 0 1px 0 rgb(255 255 255 / 0.16);
  --gloss-btn-l: inset 0 1px 0 rgb(255 255 255 / 0.8);
  --press:      0 1px 2px rgb(23 19 16 / 0.14);

  /* La luce viene da sopra, e ogni superficie deve dirlo allo stesso modo.
     Il riflesso lo diceva gia' (--gloss, bordo alto) e le ombre pure (Y
     positiva), ma la hairline era uniforme sui quattro lati e non diceva
     niente: e' la meta' del sistema che non seguiva la propria luce. */
  --edge-top:   inset 0 1px 0 rgb(255 255 255 / 0.85);
  --edge-bot:   inset 0 -1px 0 rgb(23 19 16 / 0.05);
  --edge-top-d: inset 0 1px 0 rgb(255 255 255 / 0.07);
  --edge-bot-d: inset 0 -1px 0 rgb(0 0 0 / 0.28);

  /* Sei fotografie da sei fonti portano sei bilanciamenti del bianco, e
     affiancate e' quello - non l'inquadratura - a farle leggere come
     repertorio. La gradazione le riporta su un asse caldo comune: non
     nasconde che siano di repertorio, le fa stare nello stesso mondo. */
  --grade: saturate(0.94) contrast(1.03) sepia(0.10);

  /* --- Geometria concentrica -------------------------------------------- */
  --bezel:      6px;
  --r-shell:    32px;
  --r-core:     26px;
  --r-shell-sm: 22px;
  --r-core-sm:  16px;
  --r-pill:     999px;

  /* --- Tipografia -------------------------------------------------------- */
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans:  "Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono:  "Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* Un solo fattore, 0.75, sui corpi da display. I corpi di lettura
     (--t-body, --t-small, --t-tag) NON si toccano: sono il punto fisso da
     cui la scala si misura, e sotto i 17px la serif smette di essere
     editoriale e diventa solo piccola.
     Misurato prima: h1 a 136px e h2 a 74px erano tarati guardando la pagina
     intera, non una finestra vera. Su un portatile la prima schermata
     perdeva il 37% dell'hero sotto la piega. */
  --t-mega:  clamp(2.9rem, 6.8vw, 6.4rem);
  --t-h2:    clamp(2.05rem, 4.1vw, 3.5rem);
  --t-h3:    clamp(1.25rem, 1.7vw, 1.55rem);
  --t-lead:  clamp(1.0625rem, 1.35vw, 1.25rem);
  --t-body:  1.0625rem;
  --t-small: 0.9375rem;
  --t-tag:   0.6875rem;

  /* --- Spazio macro ------------------------------------------------------ */
  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 160px;

  --wrap: 1280px;
  --measure: 62ch;
  --gutter: var(--s-5);

  /* Altezza della pillola flottante, misurata a 375px: e' quanto l'hero
     deve scansare in cima per non passarci sotto. Sta qui e non cablata
     nel padding perche' cambia se cambiano i pad della pillola. */
  --nav-h: 62px;
  --nav-clear: calc(max(var(--s-5), env(safe-area-inset-top, 0px)) + var(--nav-h) + var(--s-5));

  /* --- Movimento: massa e molla ------------------------------------------ */
  --ease:      cubic-bezier(0.32, 0.72, 0, 1);
  --d-fast: 240ms;
  --d-mid:  520ms;
  --d-slow: 800ms;
  --d-orb:  420ms;

  /* --- Veli e superfici derivate ----------------------------------------
     Ogni colore della pagina passa da qui: una volta scelto il mondo, un
     valore scritto dentro una regola e' il modo in cui la coerenza si
     sfalda, e a tre revisioni di distanza nessuno sa piu' quale sia
     quello giusto. */
  --white:            #FFFFFF;
  --tint-sage:        #E9EDE6;
  --tint-brass:       #F6EADF;

  --veil-nav:         rgb(253 251 247 / 0.72);
  --veil-nav-scroll:  rgb(253 251 247 / 0.92);
  --veil-sheet:       rgb(253 251 247 / 0.86);

  --veil-glass:       rgb(255 255 255 / 0.5);
  --veil-glass-soft:  rgb(255 255 255 / 0.6);
  --veil-lite:        rgb(255 255 255 / 0.04);
  --veil-lite-2:      rgb(255 255 255 / 0.05);
  --orb-lite:         rgb(255 255 255 / 0.12);
  --orb-lite-dark:    rgb(255 255 255 / 0.10);

  --veil-ink:         rgb(23 19 16 / 0.028);
  --veil-ink-hover:   rgb(23 19 16 / 0.04);
  --orb-ink:          rgb(23 19 16 / 0.10);

  --aura-brass:       rgb(138 87 41 / 0.10);
  --aura-sage:        rgb(92 107 85 / 0.10);

  /* Selezione: velo d'ottone, non il blu di sistema. Traslucido e non
     pieno, cosi' una frase evidenziata resta leggibile mentre la si copia. */
  --sel:      rgb(138 87 41 / 0.20);
  --sel-dark: rgb(217 151 79 / 0.30);

  /* Barra di scorrimento: pollice d'ottone smorzato sulla carta, non il
     grigio di sistema. Sono i due valori delle proprieta' standard. */
  --scroll-thumb: #C4A588;
  --scroll-track: var(--paper-2);

  /* --- Raggi minuti: cappucci di tratto e anello di focus --------------- */
  --r-hair:  1px;
  --r-cap:   2px;
  --r-focus: 4px;

  /* --- Gradini di corpo che mancavano alla scala ------------------------ */
  --t-fact:  clamp(1.1rem, 1.3vw, 1.3rem);
  --t-qa:    clamp(1.1rem, 1.35vw, 1.3rem);
  --t-sheet: clamp(1.9rem, 7vw, 3rem);
  --t-numeral: clamp(2.1rem, 3.2vw, 2.9rem);
  /* Le cifre da display erano due corpi letterali quasi uguali -
     clamp(2.2, 3.5vw, 3) e clamp(2.2, 3.8vw, 3.2) - su due componenti
     diversi. Non era una distinzione, era deriva: un gradino solo. */
  --t-figure: clamp(2.2rem, 3.6vw, 3.1rem);
  /* Solo per la cifra della pagina di errore: li' il numero e' il contenuto,
     non un titolo, e vive fuori dalla scala di lettura. */
  --t-oops: clamp(7rem, 30vw, 22rem);

  --z-nav: 60;
  --z-overlay: 70;
  --z-grain: 80;

  /* --- Puntatori disegnati ----------------------------------------------
     Firefox ignora un SVG come cursore se manca width/height esplicite, e
     le coppie di numeri in coda sono il punto attivo: la punta, non
     l'angolo del riquadro. Il tratto chiaro tiene la sagoma visibile anche
     sopra i blocchi scuri. */
  --cur-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M2 2 L2 17.4 L6.2 13.5 L9 19.8 L11.9 18.5 L9.1 12.6 L14.6 12.4 Z' fill='%23171310' stroke='%23FDFBF7' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2;
  --cur-hot:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M2 2 L2 17.4 L6.2 13.5 L9 19.8 L11.9 18.5 L9.1 12.6 L14.6 12.4 Z' fill='%23D9974F' stroke='%23171310' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2;
}

/* ============================================================== RESET === */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

/* clip e non hidden, e su entrambi: hidden sulla radice rompe position:
   sticky e su iOS puo' bloccare lo scroll. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 120px;
  overflow-x: clip;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.66;
  font-variant-numeric: tabular-nums;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* Grana: pseudo-elemento fisso, mai su un contenitore che scorre. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Alone caldo dietro la prima schermata: due sorgenti larghissime,
   non orb fluttuanti. Sta su un elemento fermo, non su uno che scorre. */
/* Sta dentro i bordi: sbordando del 10% per lato allargava il documento di
   un decimo della finestra a ogni larghezza. Il diffuso lo fanno i raggi. */
.aura {
  position: absolute;
  inset: 0;
  height: 120vh;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(52rem 40rem at 18% 12%, var(--aura-brass), transparent 62%),
    radial-gradient(46rem 34rem at 86% 4%, var(--aura-sage), transparent 60%);
}

::selection { background: var(--sel); color: var(--ink); text-shadow: none; }
.dark ::selection, .foot ::selection, .on-dark ::selection {
  background: var(--sel-dark); color: var(--white);
}

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: var(--r-focus);
}
.on-dark :focus-visible { outline-color: var(--brass-lit); }

/* --- Puntatore -------------------------------------------------------------
   Solo dove esiste davvero un puntatore fine: su touch il cursore non c'e'
   e la regola sarebbe peso morto. Il testo tiene la barretta di sistema,
   che e' l'unico modo per far vedere che una riga si puo' selezionare. */
@media (hover: hover) and (pointer: fine) {
  html { cursor: var(--cur-arrow), auto; }

  a, button, summary, label, [role="button"],
  a *, button *, summary * { cursor: var(--cur-hot), pointer; }

  p, li, dd, dt, h1, h2, h3, h4, blockquote, figcaption,
  .mega, .h2, .h3, .lead, .prose, .card__text, .fact__v, .qa__a { cursor: text; }

  /* Dentro un bersaglio cliccabile comanda il bersaglio, non il paragrafo. */
  a p, a li, a dd, a dt, a span, button span,
  summary, summary *, .qa__q, .qa__q * { cursor: var(--cur-hot), pointer; }
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  /* Con viewport-fit=cover la pagina si prende anche la fascia sotto la
     tacca: in orizzontale, su un telefono con notch, il testo ci finisce
     sotto. Un telefono coricato e' largo piu' di 768px, quindi il margine
     va difeso qui, in un punto solo: il gradino di respiro e' --gutter e
     cambia per soglia, la tacca non lo scende mai. */
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px))
                  max(var(--gutter), env(safe-area-inset-right, 0px));
  position: relative;
  z-index: 1;
}

/* 160px di stacco valgono il 20-23% dell'altezza di uno schermo portatile:
   a ogni sezione se ne andava un quinto di viewport. Un gradino giu'. */
section { padding-block: var(--s-9); }

.skip {
  position: absolute; top: var(--s-2); left: var(--s-2);
  z-index: 99; transform: translateY(-250%);
  background: var(--ink); color: var(--paper);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  font-size: var(--t-small); text-decoration: none;
}
.skip:focus { transform: translateY(0); }

/* Sorgente delle icone: un solo tracciato per verso, referenziato ovunque.
   Fuori dal flusso senza display:none, che in alcuni motori impedisce a
   <use> di risolvere il riferimento. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ========================================================= TIPOGRAFIA === */

.mega, .h2, .h3 { font-style: normal; }

.mega {
  font-family: var(--serif);
  font-size: var(--t-mega);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
  min-width: 0;
  overflow-wrap: anywhere;
}

.h2 {
  font-family: var(--serif);
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--ink);
  text-wrap: balance;
  min-width: 0;
  overflow-wrap: anywhere;
}

.h2--dark, .mega--dark { color: var(--on-dark); }

.h3 {
  font-family: var(--sans);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--body);
  max-width: 46ch;
  text-wrap: pretty;
}

.prose { max-width: var(--measure); text-wrap: pretty; overflow-wrap: anywhere; }
.prose + .prose { margin-block-start: var(--s-5); }
.prose--tight { max-width: 52ch; }

/* Quattro paragrafi identici uno sotto l'altro sono un muro. Il primo sale
   di un gradino e diventa un incipit: da li' in poi il lettore sa che sta
   leggendo il dettaglio, non ancora l'inizio. */
.prose--intro {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink);
  max-width: 52ch;
}
.prose--intro + .prose { margin-block-start: var(--s-6); }

/* Il corsivo del Newsreader e' la voce del titolo: due parole inclinate
   dentro una riga dritta, e l'ottone sotto a tenerle. Serve il file
   italico, altrimenti il motore inclina la romana e si vede. */
.em { font-style: italic; color: var(--brass); padding-inline-end: 0.04em; }
.em--dark { color: var(--brass-lit); }

/* --- Utilita di sezione, per non lasciare stili negli attributi -------- */
.sec-flush { padding-block: 0; }

/* Il ritmo della testata e' una scala, non tre volte lo stesso salto: prima
   segno, titolo e nota erano separati da 64px identici e la gerarchia non
   si leggeva. Ora 32 fra segno e titolo, 24 fra titolo e nota, 64 prima del
   contenuto: l'occhio capisce cosa sta sotto a cosa. */
.sec-head { margin-block-end: var(--s-8); }
.sec-head > .h2 { margin-block-start: var(--s-6); }
.sec-head__note {
  margin-block-start: var(--s-5);
  max-width: 58ch;
  color: var(--muted);
  font-size: var(--t-small);
}
.sec-head--mid {
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.sec-head--mid > .h2 { max-width: 20ch; }
.sentinel { position: absolute; top: 0; width: 1px; height: 1px; }

/* ==================================================== SEGNO TRICOLORE === */

/* La banda: tre barre corte, le proporzioni del marchio. Le si vede tre
   volte in tutta la pagina, dove il documento cambia respiro. */
.flag {
  display: flex;
  flex: none;
  gap: var(--tri-gap);
  width: var(--tri-w);
  height: var(--tri-h);
}
.flag i {
  flex: 1;
  border-radius: var(--r-hair);
  transform-origin: left center;
}
.flag i:nth-child(1) { background: var(--tri-green); }
.flag i:nth-child(2) { background: var(--tri-white); }
.flag i:nth-child(3) { background: var(--tri-red); }
.flag--dark { opacity: 0.9; }

/* Il segno di sezione: banda e pillola sono un oggetto solo, sulla stessa
   riga. Impilate com'erano, con novantasei pixel in mezzo, leggevano come
   due elementi capitati li' vicino per caso. Il filo parte dalla pillola e
   corre fino al bordo: e' quello che tiene insieme il gruppo. */
.mark {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
.mark--rule { width: 100%; }
.mark--rule::after {
  content: "";
  flex: 1 1 var(--s-5);
  min-width: var(--s-5);
  height: 1px;
  background: var(--line);
  /* Stessa origine delle barre: il segno e' un tratto solo, tirato da
     sinistra, e il filo ne e' la coda. */
  transform-origin: left center;
}
.mark--mid { justify-content: center; }

/* Occhiello: pillola microscopica, segno di apertura di questo mondo. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px var(--s-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--veil-glass);
  box-shadow: var(--gloss);
  font-family: var(--mono);
  font-size: var(--t-tag);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  /* Non nowrap: a 200% la pillola misurava 553px di larghezza minima e
     dettava la traccia della griglia dell'hero. Non e' cliccabile, quindi
     puo' andare a capo senza violare la regola dei bersagli su una riga. */
  text-wrap: balance;
}

.tag--dark {
  border-color: var(--line-dark);
  background: var(--veil-lite);
  box-shadow: var(--gloss-dark);
  color: var(--brass-lit);
}

.label {
  font-family: var(--mono);
  font-size: var(--t-tag);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
}
.label--dark { color: var(--brass-lit); }
.label--mute { color: var(--muted); }


/* --- Nessuna cella dettata da una parola ------------------------------ */
/* A 200% "Assemblaggio" a 56px misura 380px, e con 1fr = minmax(auto,1fr)
   quella parola diventava la larghezza della colonna. Servono entrambe le
   cose: min-width 0 sblocca la traccia, anywhere riduce il min-content. */
.hero__grid > *, .split > *, .facts > *, .cards > *, .scopes > *,
.pact > *, .close__mails > *, .foot__cols > *,
.scope__in, .scope__say, .card__body, .core { min-width: 0; }

/* .mail__v non e' in questa lista: un indirizzo email spezzato a meta'
   parola e' illeggibile. L'unico punto di a capo consentito e' il <wbr>
   dopo la chiocciola, che e' anche il punto in cui lo spezzano i client
   di posta. */
.h3, .fact__v, .pact__k, .pact__v, .card__text, .qa__q, .foot__v,
.datum, .lead, .tag, .label { overflow-wrap: anywhere; }

/* ====================================================== DOPPIO BEZEL === */

.shell {
  padding: var(--bezel);
  border-radius: var(--r-shell);
  border: 1px solid var(--line);
  background: var(--veil-ink);
  box-shadow: var(--edge-top), var(--edge-bot), var(--lift-rest);
  transition: box-shadow var(--d-mid) var(--ease),
              border-color var(--d-mid) var(--ease),
              transform var(--d-mid) var(--ease);
}

.core {
  border-radius: var(--r-core);
  background: var(--paper);
  box-shadow: var(--gloss), var(--edge-bot);
  overflow: hidden;
  height: 100%;
}

.shell--sm { border-radius: var(--r-shell-sm); }
.shell--sm > .core { border-radius: var(--r-core-sm); }

.shell--dark {
  border-color: var(--line-dark);
  background: var(--veil-lite-2);
  box-shadow: var(--edge-top-d), var(--edge-bot-d), var(--lift-dark);
}
.shell--dark > .core { background: var(--espresso-2); box-shadow: var(--gloss-dark); }

.shell--sage > .core { background: var(--tint-sage); }
.shell--brass > .core { background: var(--tint-brass); }

/* Alzandosi la cornice prende un filo d'ottone: il rilievo non e' solo
   geometria, cambia anche di temperatura. Il riflesso vive in due pseudo
   assoluti, e senza un position esplicito qui il loro blocco contenitore
   diventa .wrap: overflow:hidden su un elemento statico non ritaglia chi e'
   agganciato a un antenato. Reggeva solo per il translateY(0) della
   rivelazione allo scroll, che pero' sparisce con movimento ridotto e senza
   JS, e la sfumatura finiva addosso all'intera sezione. */
.shell--lift {
  position: relative;
  overflow: hidden;
}

.shell--lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--edge-top), var(--edge-bot), var(--lift-hover);
  border-color: var(--line-brass);
}

@media (hover: hover) and (pointer: fine) {
  /* La carta si alzava e la fotografia restava ferma: il sollevamento
     finiva alla cornice. La scala e' piu' lenta del salto (700ms contro
     --d-mid) e produce la micro-parallasse che gli da' profondita'. */
  .shell--lift .scope__pic img { transition: transform 700ms var(--ease); }
  .shell--lift:hover .scope__pic img { transform: scale(1.03); }

  .shell--lift::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(
      420px circle at var(--mx, 50%) var(--my, 50%),
      rgb(217 151 79 / 0.07),
      transparent 65%
    );
    opacity: 0;
    transition: opacity var(--d-fast) var(--ease);
  }

  .shell--lift::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(
      300px circle at var(--mx, 50%) var(--my, 50%),
      rgb(217 151 79 / 0.40),
      transparent 70%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--d-fast) var(--ease);
  }

  .shell--lift:hover::before,
  .shell--lift:hover::after {
    opacity: 1;
  }
}

.core__pad { padding: var(--s-7); }
.core__pad--tight { padding: var(--s-6); }

/* ============================================================ PULSANTI === */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  padding: 9px 9px 9px var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--lift-rest), var(--gloss-btn);
  transition: background-color var(--d-fast) var(--ease),
              transform var(--d-fast) var(--ease),
              box-shadow var(--d-fast) var(--ease);
}

.btn:hover { background: var(--espresso-3); box-shadow: var(--lift-hover), var(--gloss-btn); }
.btn:active { transform: translateY(1px) scale(0.99); box-shadow: var(--press), var(--gloss-btn); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--veil-ink-hover); border-color: var(--ink); box-shadow: none; }
.btn--ghost:active { box-shadow: none; }

.btn--light { background: var(--on-dark); color: var(--espresso); box-shadow: var(--lift-rest), var(--gloss-btn-l); }
.btn--light:hover { background: var(--white); box-shadow: var(--lift-hover), var(--gloss-btn-l); }

/* --- L'orbita ---------------------------------------------------------------
   Un cerchio dentro il pulsante, e dentro il cerchio due copie della stessa
   icona: quella a vista esce, quella in attesa entra dal lato opposto. E'
   una freccia che attraversa, non una freccia che scivola e torna indietro.
   Il verso e' un paio di variabili, cosi' orizzontale e verticale non sono
   due componenti ma lo stesso componente girato. */
.orb {
  --sx: 210%;
  --sy: 0%;
  position: relative;
  overflow: hidden;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--orb-lite);
  transition: background-color var(--d-fast) var(--ease),
              color var(--d-fast) var(--ease);
}
.orb--down { --sx: 0%; --sy: 210%; }

.orb svg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--d-orb) var(--ease);
}
.orb svg + svg { transform: translate(calc(var(--sx) * -1), calc(var(--sy) * -1)); }

.btn:hover .orb svg,
.mail:hover .orb svg,
.nudge__a:hover .orb svg,
.foot__a:hover .orb svg { transform: translate(var(--sx), var(--sy)); }

.btn:hover .orb svg + svg,
.mail:hover .orb svg + svg,
.nudge__a:hover .orb svg + svg,
.foot__a:hover .orb svg + svg { transform: none; }

/* Al passaggio il cerchio si accende d'ottone: e' l'unico momento in cui
   il colore di marca compare a superficie piena. */
.btn:hover .orb { background: var(--brass-lit); color: var(--espresso); }
.btn--ghost .orb { background: var(--orb-ink); }
.btn--ghost:hover .orb { background: var(--ink); color: var(--paper); }
.btn--light .orb { background: var(--orb-ink); }
.btn--light:hover .orb { background: var(--brass); color: var(--on-dark); }

.orb--dark { background: var(--orb-lite-dark); }
.mail:hover .orb--dark { background: var(--brass-lit); color: var(--espresso); }

.orb--sm { width: 26px; height: 26px; }
.orb--sm svg { width: 13px; height: 13px; }

/* --- Richiamo leggero -------------------------------------------------------
   Non un pulsante: una riga che passa accanto e propone. Sta in fondo a due
   sezioni dove la domanda viene naturale. */
.nudge {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  margin-block-start: var(--s-7);
  padding-block-start: var(--s-4);
}
/* Il filo era un border-top, e un bordo non si puo' tirare. E' lo stesso
   tratto che apre il capitolo, quindi deve poterlo chiudere allo stesso
   modo: pseudo-elemento, stessa origine, stessa mano. */
.nudge::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--line);
  transform-origin: left center;
}
/* Calibrazione ritmica unificata delle transizioni tra sezioni:
   elimina i vuoti da 256px dovuti alla somma di due padding da 128px non collassati */
section:has(.nudge),
section:has(.stmt),
section:has(.pact),
section:has(.faq) {
  padding-block-end: var(--s-7);
}

section:has(.nudge) + section,
section:has(.stmt) + section,
section:has(.faq) + section {
  padding-block-start: var(--s-8);
}

section:has(.faq) {
  padding-block-start: var(--s-7);
}

@media not all and (min-width: 48em) {
  .nudge { margin-block-start: var(--s-6); }
  section:has(.nudge),
  section:has(.stmt),
  section:has(.pact),
  section:has(.faq) {
    padding-block-end: var(--s-6);
  }
  section:has(.nudge) + section,
  section:has(.stmt) + section,
  section:has(.faq) + section {
    padding-block-start: var(--s-7);
  }
  section:has(.faq) {
    padding-block-start: var(--s-6);
  }
}
.nudge__t { font-size: var(--t-small); color: var(--muted); }
@media (min-width: 768px) { .nudge { justify-content: space-between; } }
.nudge__a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--d-fast) var(--ease);
}
.nudge__a > span { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.nudge__a:hover { color: var(--brass); }
.nudge__a:hover > span { text-decoration-color: var(--brass); }
.nudge__a .orb { background: var(--orb-ink); }
.nudge__a:hover .orb { background: var(--brass); color: var(--paper); }

/* ================================================= ISOLA DI NAVIGAZIONE === */

.nav {
  position: fixed;
  inset-inline: 0;
  top: max(var(--s-5), env(safe-area-inset-top, 0px));
  z-index: var(--z-nav);
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.nav__pill {
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Rete di sicurezza: gli elementi dentro la pillola non si stringono (il
     logo e' flex:none, i collegamenti e il pulsante sono nowrap), quindi
     senza questo, quando la somma supera il tetto, escono dalla pillola
     invece di fermarsi. Misurato a 768px con il testo al 200%: il pulsante
     Scrivici sfondava di 147px. Andare a capo e' brutto, uscire e' rotto. */
  flex-wrap: wrap;
  row-gap: var(--s-2);
  gap: var(--s-5);
  width: max-content;
  max-width: calc(100vw - var(--s-6));
  padding: 8px 8px 8px var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--veil-nav);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: var(--lift-rest), var(--gloss);
  transition: background-color var(--d-mid) var(--ease),
              box-shadow var(--d-mid) var(--ease);
}

.is-scrolled .nav__pill {
  background: var(--veil-nav-scroll);
  box-shadow: var(--lift-hover), var(--gloss);
}

.nav__logo { height: 22px; width: auto; flex: none; }

.nav__links { display: flex; align-items: center; gap: var(--s-5); }

.nav__link {
  font-size: var(--t-small);
  color: var(--body);
  text-decoration: none;
  white-space: nowrap;
  /* Il bersaglio era la sola riga di testo, 25px: un pixel sopra il minimo
     e nient'altro. L'altezza della pillola la detta il pulsante, che e' piu'
     alto, e i link stanno centrati dentro: questi 10px non spostano niente
     e portano l'area utile a 45. */
  padding-block: 10px;
  transition: color var(--d-fast) var(--ease);
}
.nav__link:hover { color: var(--ink); }

.nav__burger {
  display: none;
  cursor: pointer;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--veil-glass);
  position: relative;
}
.nav__burger i {
  position: absolute;
  left: 13px;
  width: 18px; height: 1.5px;
  border-radius: var(--r-cap);
  background: var(--ink);
  transition: transform var(--d-mid) var(--ease);
}
.nav__burger i:nth-child(1) { top: 18px; }
.nav__burger i:nth-child(2) { top: 24px; }
.is-open .nav__burger i:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.is-open .nav__burger i:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* Sipario a tutto schermo */
.sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  background: var(--veil-sheet);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-mid) var(--ease), visibility 0s linear var(--d-mid);
}
.is-open .sheet { opacity: 1; visibility: visible; transition-delay: 0s; }

.sheet__list {
  display: flex; flex-direction: column; gap: var(--s-4); text-align: center;
  padding: max(var(--s-5), env(safe-area-inset-top, 0px)) var(--s-5) max(var(--s-5), env(safe-area-inset-bottom, 0px));
}

.sheet__item {
  font-family: var(--serif);
  font-size: var(--t-sheet);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  opacity: 0;
  transform: translateY(48px);
  transition: opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease);
}
.is-open .sheet__item { opacity: 1; transform: translateY(0); }
.is-open .sheet__item:nth-child(1) { transition-delay: 90ms; }
.is-open .sheet__item:nth-child(2) { transition-delay: 150ms; }
.is-open .sheet__item:nth-child(3) { transition-delay: 210ms; }
.is-open .sheet__item:nth-child(4) { transition-delay: 270ms; }

/* ================================================================ HERO === */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-block-start: var(--nav-clear);
  padding-block-end: var(--s-7);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  align-items: center;
}

.hero__say { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); min-width: 0; }
/* Il respiro prima dei bersagli e' 24 di gap piu' 8: trentadue, che sta
   nella scala. Con 12 faceva 36, un valore che nella scala non esiste. */
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-2); }

.hero__stack { display: grid; grid-template-columns: 1fr; gap: var(--s-4); min-width: 0; }
.hero__stack img { width: 100%; height: 100%; object-fit: cover; }
/* La pila non era alta per decisione: 16/11 piu' 4/3 su una colonna da 517
   fanno 775px da soli, e quel numero non l'aveva scritto nessuno. Con il
   titolo ridotto la colonna di testo scende a 458 e la pila resta l'unico
   vincolo: due formati piu' larghi, e la colonna che li ospita piu' stretta.
   Restano due formati fotografici, non bande schiacciate per centrare una
   cifra, e i due rapporti diversi tengono la pila dal sembrare meccanica. */
.hero__a img { aspect-ratio: 16 / 9; }
.hero__b img { aspect-ratio: 16 / 10; }

/* Il terzo livello non e' una terza fotografia. Ogni immagine del sito e'
   gia' usata da qualche parte, e ripeterne una nell'hero avrebbe solo
   dichiarato che la libreria e' corta. Una scheda scura con un dato
   verificabile dal footer aggiunge invece il livello che serve alla
   composizione e una prova di esistenza sopra la piega. */
/* Nascosta di partenza: sotto i 1024 la colonna dell'hero e' troppo
   stretta perche' un terzo livello ci stia. A 810px la scheda diventava
   alta 210px su uno stack di 233 e dominava la composizione. */
.hero__c { display: none; }
.hero__c .core { display: flex; flex-direction: column; gap: var(--s-3); }
/* .label porta overflow-wrap:anywhere per non far dettare la cella da una
   parola lunga. Qui pero' spezzava l'etichetta a meta' parola
   ("SOCIET / A"): in una scheda di tre parole il rischio non esiste. */
.hero__c-k { overflow-wrap: normal; }
.hero__c-k { display: block; }
.hero__c-v {
  font-family: var(--mono);
  font-size: var(--t-fact);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--brass-lit);
}

/* ======================================================= RIGA REGISTRO === */

.facts { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
.fact__k { display: block; margin-block-end: var(--s-3); }
.fact__v {
  font-family: var(--serif);
  font-size: var(--t-fact);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.facts--asym,
.facts.facts--asym {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 860px) {
  .facts--asym,
  .facts.facts--asym {
    grid-template-columns: 1.3fr 1.7fr;
    align-items: stretch;
  }
}
.fact-asym-lead {
  height: 100%;
  border-color: var(--line-brass);
}
.fact-asym-lead-core {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--tint-brass);
}
.fact-lead-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.fact-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 4px var(--brass-lit);
  display: inline-block;
}
.fact-lead-badge .fact__k {
  margin-bottom: 0;
}
.fact__v--lead {
  font-size: var(--t-h3);
  line-height: 1.18;
  color: var(--espresso);
  font-weight: 500;
}
.fact-lead-sub {
  font-family: var(--mono);
  font-size: var(--t-tag);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.fact-asym-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
@media (min-width: 520px) {
  .fact-asym-group {
    grid-template-columns: 1fr 1fr;
  }
}
.fact-asym-group .shell {
  height: 100%;
}
.fact-asym-group .core {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s-5);
}

/* ============================================================== SPLIT === */

.split { display: grid; grid-template-columns: 1fr; gap: var(--s-8); align-items: start; }
.split__media { min-width: 0; }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split__text { min-width: 0; }

/* ====================================================== CARTE PRINCIPI === */

.cards { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
.card__body { display: flex; flex-direction: column; gap: var(--s-4); height: 100%; }
/* Il tetto serve alla cella singola: a colonna piena il testo arriverebbe
   a 78 caratteri per riga. In griglia non morde mai, perche' li' la
   colonna e' gia' piu' stretta. */
.card__text { font-size: var(--t-small); color: var(--body); text-wrap: pretty; max-width: 66ch; }

.datum {
  margin-block-start: auto;
  padding-block-start: var(--s-4);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--t-tag);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.datum b { color: var(--brass); font-weight: 500; font-size: 1.45em; letter-spacing: 0.04em; }

/* ============================================================== BANDA === */

/* Una volta sola, in tutta la pagina, l'immagine non e' contenuta: esce dal
   wrap, perde raggio e cornice e prende la finestra intera. E' l'unica
   rottura del formato, ed e' proprio per questo che si legge come tale. */
.band-full { overflow: hidden; }
/* Una gradazione sola su ogni fotografia di contenuto. I marchi SVG e le
   icone restano fuori: non sono fotografie e non vanno scaldati. */
.hero__stack img, .split__media img, .scope__pic img,
.stmt__media img, .band__img { filter: var(--grade); }

.band__img { display: block; width: 100%; height: clamp(260px, 38vw, 560px); object-fit: cover; }

/* ============================================================= AMBITI === */

.scopes { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
.scope__in { display: grid; grid-template-columns: 1fr; gap: var(--s-5); height: 100%; }
.scope__say { display: flex; flex-direction: column; gap: var(--s-3); }
/* Il numero di sequenza era un'etichetta mono come tutte le altre, e a
   quel corpo non distingueva niente. Come numerale di capitolo prende il
   serif e tre volte il corpo: e' la dimensione a cambiargli ruolo.
   Il colore resta --muted, 5.6:1 sulla carta. La filigrana quasi
   invisibile sarebbe stata piu' bella e sarebbe stata testo visibile
   sotto 1.5:1: per passare i 3:1 del testo grande serve alpha 0.46, che
   filigrana non e' piu'. Meglio un numerale onesto che un fantasma. */
.scope__say .label--mute {
  font-family: var(--serif);
  font-size: var(--t-numeral);
  font-weight: 500;
  line-height: 0.85;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--muted);
}

.scope__pic { border-radius: var(--r-core-sm); overflow: hidden; background: var(--paper-3); }
.scope__pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ============================================================== METODO === */

.circuit-wrap {
  position: relative;
  padding: var(--s-7) var(--s-4);
  margin-block-start: var(--s-4);
  border-radius: var(--r-shell);
  border: 1px solid rgba(138, 87, 41, 0.28);
  box-shadow: 0 10px 30px -10px rgba(23, 19, 16, 0.08);
  background: var(--paper-2);
  overflow: hidden;
}

.circuit-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--line-strong) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
  opacity: 0.4;
  z-index: 0;
}

.circuit-conduit {
  display: none;
}

/* I pallini erano <circle> a cx fissi 166/500/833, cioe' i centri di tre
   terzi esatti, dentro una conduttura inserita di un 5% arbitrario. Le
   schede pero' hanno i gap, e i loro centri cadono altrove: misurati 33px
   di scarto sul primo pallino e 34 sul terzo. Ora la conduttura porta la
   stessa griglia delle schede e ogni pallino si centra nella propria
   colonna: l'allineamento e' strutturale, non piu' numerico, e regge a
   qualunque larghezza. Restava anche un difetto di forma: con
   preserveAspectRatio="none" i cerchi SVG si deformavano in ellissi. */
@media (min-width: 860px) {
  .circuit-conduit {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-4);
    align-items: center;
    position: absolute;
    top: calc(var(--s-7) + 38px);
    /* Il wrap ha padding-inline var(--s-4): cosi' la conduttura e' larga
       esattamente quanto la griglia delle schede. */
    left: var(--s-4);
    right: var(--s-4);
    height: 40px;
    z-index: 1;
    pointer-events: none;
  }
  /* La linea corre da centro a centro: mezza scheda di rientro per lato.
     La larghezza va calcolata, non lasciata ad auto: un <svg> e' un elemento
     replaced, e con width:auto piu' left e right non si stira - usa la
     misura intrinseca e ignora right. Sforava di 320px.
     Il selettore e' sceso di un livello di specificita' apposta: la regola
     base .circuit-svg { width: 100% } sta piu' avanti nel foglio e a parita'
     di peso vinceva lei. */
  .circuit-conduit .circuit-svg {
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc((100% - 2 * var(--s-4)) / 6);
    width: calc(100% - (100% - 2 * var(--s-4)) / 3);
    height: 100%;
  }
  .circuit-dot { justify-self: center; }
}

.circuit-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.circuit-path-bg {
  stroke: var(--line-strong);
  stroke-width: 2px;
  fill: none;
  stroke-dasharray: 4 6;
}

.circuit-path-pulse {
  stroke: var(--brass);
  stroke-width: 3px;
  fill: none;
  stroke-dasharray: 80 420;
  stroke-dashoffset: 500;
  animation: circuit-flow 3.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  filter: drop-shadow(0 0 5px var(--brass-lit));
}

.circuit-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--paper);
  border: 2.5px solid var(--brass);
  transition: transform 320ms var(--ease), background-color 320ms var(--ease);
  transform-origin: center;
}

.circuit-steps {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}

@media (min-width: 860px) {
  .circuit-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.circuit-step {
  height: 100%;
}

.circuit-step .core {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

.circuit-step__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: var(--s-2);
}

.circuit-badge {
  font-family: var(--mono);
  font-size: var(--t-tag);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid rgba(138, 87, 41, 0.28);
}

.circuit-step:hover .core {
  border-color: rgba(138, 87, 41, 0.4);
}

.circuit-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brass);
  display: inline-block;
  box-shadow: 0 0 6px var(--brass);
  animation: pulse-node 2.4s infinite;
}

.circuit-status {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.circuit-step__title {
  margin-block-end: var(--s-2);
}

.circuit-wrap:has([data-step="1"]:hover) .circuit-dot:nth-of-type(1) {
  background: var(--brass);
  transform: scale(1.5);
}

.circuit-wrap:has([data-step="2"]:hover) .circuit-dot:nth-of-type(2) {
  background: var(--brass);
  transform: scale(1.5);
}

.circuit-wrap:has([data-step="3"]:hover) .circuit-dot:nth-of-type(3) {
  background: var(--brass);
  transform: scale(1.5);
}

@keyframes circuit-flow {
  0% { stroke-dashoffset: 500; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { stroke-dashoffset: -500; opacity: 0; }
}

@keyframes pulse-node {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.35); opacity: 1; box-shadow: 0 0 10px var(--brass-lit); }
}

@media (prefers-reduced-motion: reduce) {
  .circuit-path-pulse {
    animation: none;
    stroke-dasharray: none;
    opacity: 0.7;
  }
  .circuit-badge__dot {
    animation: none;
  }
  .circuit-dot { transition: none; }
  .circuit-wrap:has(.circuit-step:hover) .circuit-dot { transform: none; }
}

/* ======================================================= DICHIARAZIONE === */

.dark {
  background: var(--espresso);
  color: var(--on-dark-mu);
  border-radius: var(--r-shell);
  overflow: hidden;
}
.dark .prose, .dark .card__text { color: var(--on-dark-mu); }
.dark .datum { border-color: var(--line-dark); color: var(--on-dark-mu); }
.dark .datum b { color: var(--brass-lit); }

/* Tre momenti scuri sullo stesso #171310 erano tre climax identici, cioe'
   nessuno. L'affermazione resta la piu' profonda e prende il filo d'ottone
   che la marca come perno; la chiusura sale di un gradino e si scalda; il
   footer resta la base su cui poggiano entrambe. */
.dark--pivot { border-block-start: 2px solid var(--brass-lit); }
.dark--warm { background: var(--espresso-2); }

.stmt { display: grid; grid-template-columns: 1fr; gap: var(--s-7); align-items: center; padding: var(--s-8) var(--s-6); }
.stmt__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.stmt__say { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); }

/* Numero ed etichetta stanno affiancati solo quando la colonna e' larga.
   Sotto i 1024 la dichiarazione e' gia' a due colonne ma stretta, e
   l'etichetta in mono maiuscolo spaziato collassava alla propria min-content:
   misurate 13 righe alte 200px in una colonna da 64px, accanto a un numero
   alto 35. Peggio: quella min-content diventava il minimo automatico della
   traccia, e la griglia risolveva 217/265 invece del 0.9fr/1.1fr chiesto,
   cioe' il testo rubava larghezza alla fotografia. In colonna l'etichetta
   torna a essere una riga di testo. */
.stat-highlight {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  /* Era var(--espresso-alzato), un token mai dichiarato: DESIGN.md chiamava
     cosi' questo colore mentre il CSS lo chiama --espresso-2, ed e' stato
     trascritto il nome del documento invece della variabile. Una var()
     irrisolta e senza fallback invalida la dichiarazione, quindi il riquadro
     della metrica era trasparente: non c'era. I nomi nel documento adesso
     sono quelli delle variabili, cosi' l'errore non si ripete. */
  background: var(--espresso-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-core-sm);
  width: 100%;
  min-width: 0;
}
.stat-highlight__num {
  font-family: var(--serif);
  font-size: var(--t-figure);
  font-weight: 500;
  line-height: 1;
  color: var(--brass-lit);
  white-space: nowrap;
}
.stat-highlight__label {
  font-family: var(--mono);
  font-size: var(--t-tag);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-mu);
  line-height: 1.4;
}

/* ============================================================== PATTO === */

/* Due elenchi di termine e definizione affiancati leggevano come due colonne
   di testo: nessuna gerarchia dentro, nessun appiglio per l'occhio. Ora ogni
   voce ha il suo numero, una sola hairline la separa dalla precedente, e
   l'intestazione passa alla serif. */
.pact { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }

.pact__head {
  font-family: var(--serif);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding-block-end: var(--s-5);
  border-bottom: 1px solid var(--line-strong);
}

.pact__list { counter-reset: patto; margin: 0; }
.pact__row {
  counter-increment: patto;
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr);
  column-gap: var(--s-4);
  padding: var(--s-5) var(--s-4);
  margin-inline: calc(-1 * var(--s-4));
  border-radius: var(--r-core-sm);
  border-top: 1px solid var(--line);
  transition: background-color var(--d-mid) var(--ease);
}
.pact__row:first-child { border-top: 0; }
.pact__row::before {
  content: counter(patto, decimal-leading-zero);
  font-family: var(--mono);
  font-size: var(--t-tag);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 2.2;
  color: var(--muted);
  transition: color var(--d-mid) var(--ease);
}

/* Patto a specchio: le due colonne si rispondono, la riga di sinistra
   accende la sua gemella a destra. E' decorazione, quindi sta tutta nel
   CSS: un gancio JS su un div la renderebbe raggiungibile col mouse e con
   nient'altro, e otto fermate di tabulazione per un colore di fondo non
   valgono il posto che prendono nel percorso da tastiera. */
.pact:has([data-pact="1"]:hover) [data-pact="1"],
.pact:has([data-pact="2"]:hover) [data-pact="2"],
.pact:has([data-pact="3"]:hover) [data-pact="3"] {
  background: var(--paper-2);
}
.pact:has([data-pact="1"]:hover) [data-pact="1"]::before,
.pact:has([data-pact="2"]:hover) [data-pact="2"]::before,
.pact:has([data-pact="3"]:hover) [data-pact="3"]::before {
  color: var(--brass);
}
/* Il numero prende la prima colonna; termine e descrizione vanno entrambi
   nella seconda, altrimenti la descrizione scende in riga due sotto il
   numero e si stringe alla larghezza di due caratteri. */
.pact__k,
.pact__v { grid-column: 2; }
.pact__k { font-size: var(--t-body); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.pact__v { font-size: var(--t-small); color: var(--body); margin-block-start: 6px; text-wrap: pretty; overflow-wrap: anywhere; }

/* Stessa distanza dei due richiami leggeri: contenuto e riga di chiusura
   stanno a 128 in tutta la pagina. A 48 il salto misurava 112, che nella
   scala non esiste e non somigliava a niente altro. */
.pact__foot {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--s-5);
  margin-block-start: var(--s-8);
}
.pact__foot p { max-width: 52ch; color: var(--muted); font-size: var(--t-small); }

/* ================================================================ FAQ === */

.faq { max-width: 820px; margin-inline: auto; }
.faq__list { border-block-start: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
/* Il cursore su un button e su un summary non e' la mano per default: va
   chiesto. La regola dei puntatori disegnati piu' sotto lo sostituisce. */
.qa__q {
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding-block: var(--s-5);
  font-family: var(--serif); font-size: var(--t-qa);
  font-weight: 500; letter-spacing: -0.02em; color: var(--ink);
  list-style: none;
  transition: color var(--d-fast) var(--ease);
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q:hover { color: var(--brass); }
.qa__sign {
  position: relative; flex: none; width: 30px; height: 30px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--veil-glass-soft);
  transition: transform var(--d-mid) var(--ease),
              background-color var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease);
}
.qa__sign::before, .qa__sign::after {
  content: ""; position: absolute; inset-inline: 9px; top: 50%;
  height: 1.5px; border-radius: var(--r-cap); background: var(--ink);
  transition: transform var(--d-mid) var(--ease), background-color var(--d-fast) var(--ease);
}
.qa__sign::after { transform: rotate(90deg); }
.qa__q:hover .qa__sign { background: var(--brass); border-color: var(--brass); }
.qa__q:hover .qa__sign::before, .qa__q:hover .qa__sign::after { background: var(--paper); }
.qa[open] .qa__sign { transform: rotate(180deg); }
.qa[open] .qa__sign::after { transform: rotate(0deg); }
.qa__a { max-width: 64ch; color: var(--body); }
.qa__a > p { padding-block-end: var(--s-5); }

@supports selector(::details-content) {
  .qa::details-content {
    display: grid; grid-template-rows: 0fr; overflow: hidden;
    transition: grid-template-rows var(--d-mid) var(--ease),
                content-visibility var(--d-mid) var(--ease) allow-discrete;
  }
  .qa[open]::details-content { grid-template-rows: 1fr; }
  .qa__a { min-height: 0; overflow: hidden; }
}

/* ============================================================== FINALE === */

.close { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-5); padding: var(--s-9) var(--s-6); }
.close .mega { max-width: 16ch; }
.close__mails { display: grid; grid-template-columns: 1fr; gap: var(--s-4); width: 100%; max-width: 820px; margin-block-start: var(--s-5); text-align: left; }

.mail { display: block; text-decoration: none; }
.mail .core { transition: background-color var(--d-mid) var(--ease), transform var(--d-fast) var(--ease); }
.mail:hover .core { background: var(--espresso-3); }
.mail:active .core { background: var(--espresso); transform: scale(0.99); }
/* Le due etichette non hanno lo stesso numero di righe - una va a capo,
   l'altra no - e i due indirizzi finivano a 88 e 69px dal bordo alto
   della scheda: 19px di scarto, esattamente una riga. Le schede erano
   gia' alte uguali (la griglia le stira); mancava solo che l'indirizzo
   si appoggiasse al fondo invece che seguire l'etichetta. */
.mail .core { display: flex; flex-direction: column; }
.mail__k { display: block; margin-block-end: var(--s-3); }
.mail__v { margin-block-start: auto; }
.mail__v {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  /* Misurato: a --t-lead l'indirizzo piu' lungo chiede 355px in una colonna
     da 326 e va a capo spezzando la parola. Un gradino sotto ci sta. */
  font-size: var(--t-body); font-weight: 500; color: var(--on-dark);
  min-width: 0;
}

/* ============================================================== FOOTER === */

.foot { background: var(--espresso); color: var(--on-dark-mu); padding-block: var(--s-8) max(var(--s-6), env(safe-area-inset-bottom, 0px)); position: relative; overflow: hidden; }
.foot__cols { display: grid; grid-template-columns: 1fr; gap: var(--s-7); }
.foot__col { min-width: 0; }
.foot__t { padding-block-end: var(--s-3); border-bottom: 1px solid var(--line-dark); margin-block-end: var(--s-4); }
.foot__k { display: block; margin-block-start: var(--s-4); color: var(--on-dark-mu); }
.foot__v { font-size: var(--t-small); color: var(--on-dark); margin-block-start: 2px; overflow-wrap: anywhere; }
.foot__v--mono { font-family: var(--mono); letter-spacing: 0; }
.foot__note { display: block; font-size: var(--t-tag); color: var(--on-dark-mu); margin-block-start: 4px; }
.foot__links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); font-size: var(--t-small); }
.foot__a {
  color: var(--on-dark); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--s-3);
  min-height: 44px; padding-block: 4px;
  transition: color var(--d-fast) var(--ease);
}
.foot__a:hover { color: var(--brass-lit); }
.foot__a .orb { background: var(--orb-lite-dark); }
.foot__end { display: flex; flex-direction: column; gap: var(--s-2); margin-block-start: var(--s-8); padding-block-start: var(--s-5); border-top: 1px solid var(--line-dark); font-size: var(--t-small); }
.foot__credit { color: inherit; text-decoration: none; transition: color var(--d-fast) var(--ease); }
.foot__credit:hover { color: var(--brass-lit); }
/* Il marchio di chiusura non e' un logo da leggere, e' una filigrana:
   esce dal wrap fino a superare la finestra e il footer lo taglia. */
.foot__mark {
  margin-block-start: var(--s-8);
  /* Il 3% si calcolava sul wrap, bloccato a 1184px: sopra i 1440 il
     marchio smetteva di superare la finestra e restava un logo centrato
     con 119px di footer vuoto per lato. Legato alla finestra, esce
     sempre. */
  margin-inline: calc(50% - 50vw - var(--s-6));
  opacity: 0.06;
  pointer-events: none;
}
.foot__mark img { width: 100%; }

/* ================================================= PAGINE INFORMATIVE === */

/* Le tre pagine di servizio stanno nello stesso mondo della home: stessa
   isola di navigazione, stesso piede, una colonna di lettura sola. */
.page-head { padding-block: calc(var(--s-9) + var(--s-4)) var(--s-7); }
.page-head__in { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); max-width: var(--measure); }

/* Pagina di errore: il numero e' la pagina. Tricolore, cifra, una riga, un
   pulsante. Lo zero centrale prende l'italico d'ottone di .em - la stessa
   enfasi che il sito riserva alla parola che conta - e diventa il buco di cui
   la pagina sta parlando. L'aura e' quella dell'hero: la pagina d'errore resta
   dentro casa invece di sembrare il messaggio di un'altra applicazione. */
.oops {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  min-height: 72vh;
  min-height: 72svh;
  padding-block: calc(var(--s-9) + var(--s-4)) var(--s-9);
}
.oops__in {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-6);
}
.oops__num {
  font-family: var(--serif);
  font-size: var(--t-oops);
  font-weight: 500;
  /* L'interlinea stretta serve alla densita' della cifra, ma fa traboccare i
     glifi fuori dal box di riga: a 352px il box ne misura 289 e i glifi 352,
     cioe' 31px per lato che si mangiavano esattamente il gap del contenitore.
     Misurato: distacco 0 dal tricolore sopra e 1px dal titolo sotto. I
     margini qui restituiscono lo spazio che il leading negativo si prende. */
  line-height: 0.82;
  margin-block: var(--s-7) var(--s-6);
  letter-spacing: -0.045em;
  color: var(--ink);
}
.oops__t { max-width: 18ch; }

.legal, .credits { max-width: 72ch; }
.page-body { padding-block: 0 var(--s-9); }
.legal > .h3 { margin-block: var(--s-8) var(--s-4); }
.legal a, .credit__text a, .legal__dd a {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--line-brass); text-underline-offset: 3px;
  transition: color var(--d-fast) var(--ease);
}
.legal a:hover, .credit__text a:hover, .legal__dd a:hover { color: var(--brass); text-decoration-color: var(--brass); }

.legal__dl { margin-block-end: var(--s-5); }
.legal__dt {
  font-family: var(--mono); font-size: var(--t-tag); font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass);
  margin-block-start: var(--s-5);
}
.legal__dd { font-size: var(--t-small); color: var(--body); margin-block-start: 2px; overflow-wrap: anywhere; }

.credit { padding-block: var(--s-5); border-bottom: 1px solid var(--line); }
.credit__file { font-family: var(--mono); font-size: var(--t-tag); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); }
.credit__text { font-size: var(--t-small); color: var(--body); margin-block-start: var(--s-2); text-wrap: pretty; overflow-wrap: anywhere; }
.credit__note { margin-block-start: var(--s-7); font-size: var(--t-small); color: var(--muted); text-wrap: pretty; }

/* ============================================== RIVELAZIONE ALLO SCROLL === */

.io .rise {
  opacity: 0;
  transform: translateY(64px);
  filter: blur(10px);
  transition: opacity var(--d-slow) var(--ease),
              transform var(--d-slow) var(--ease),
              filter var(--d-slow) var(--ease);
}
.io .rise.in { opacity: 1; transform: translateY(0); filter: blur(0); }

/* transition e' una shorthand: chi la riscrive non aggiunge, sostituisce.
   Questa regola pesa (0,2,0) contro lo (0,1,0) di .shell, e tutte e tredici
   le .shell--lift della pagina sono figlie dirette di un .stag: nessuna
   ereditava piu' la propria transizione. Il risultato era che l'ombra e il
   filo d'ottone dell'hover scattavano senza rampa, e il salto di 4px girava
   a 800ms invece di 520. Le proprieta' del guscio vanno elencate qui. */
.io .stag > * {
  opacity: 0; transform: translateY(48px); filter: blur(8px);
  transition: opacity var(--d-slow) var(--ease),
              transform var(--d-slow) var(--ease),
              filter var(--d-slow) var(--ease),
              box-shadow var(--d-mid) var(--ease),
              border-color var(--d-mid) var(--ease);
}
.io .stag.in > * { opacity: 1; transform: translateY(0); filter: blur(0); }
.io .stag.in > *:nth-child(2) { transition-delay: 90ms; }
.io .stag.in > *:nth-child(3) { transition-delay: 180ms; }
.io .stag.in > *:nth-child(4) { transition-delay: 270ms; }
.io .stag.in > *:nth-child(5) { transition-delay: 360ms; }
.io .stag.in > *:nth-child(6) { transition-delay: 450ms; }

/* Le barre della banda non compaiono: si tirano, una dopo l'altra, come le
   traccia una mano. La banda dell'hero e' esclusa perche' ha la sua
   sequenza di caricamento, che vince essendo un'animazione. */
.io .flag i { transform: scaleX(0); transition: transform var(--d-mid) var(--ease); }
.io .in .flag i { transform: none; }
.io .flag i:nth-child(2) { transition-delay: 90ms; }
.io .flag i:nth-child(3) { transition-delay: 180ms; }

/* Il gesto arrivava fin qui e si fermava: tre barre tirate a mano e poi il
   filo, che e' il tratto piu' lungo della pagina, comparso di colpo. Ora la
   corsa continua. Parte a 300ms, mentre la terza barra si sta ancora
   posando, perche' una mano non aspetta di aver finito per proseguire; e
   dura piu' a lungo delle barre perche' il tragitto e' dieci volte quello.
   Il filo delle pagine informative resta fermo: li' non c'e' un racconto
   allo scroll da aprire, e un capitolo solo non ha bisogno di un incipit. */
.io .rise .mark--rule::after {
  transform: scaleX(0);
  transition: transform var(--d-slow) var(--ease) 300ms;
}
.io .rise.in .mark--rule::after { transform: none; }

/* Lo stesso tratto chiude il capitolo. Entra dopo che il richiamo si e'
   posato, non insieme a lui: prima il blocco, poi la riga tirata sotto. */
.io .nudge.rise::before {
  transform: scaleX(0);
  transition: transform var(--d-slow) var(--ease) 200ms;
}
.io .nudge.rise.in::before { transform: none; }

/* ============================================ SEQUENZA DI CARICAMENTO ===
   La prima schermata non aspetta di essere osservata: e' gia' in vista al
   primo fotogramma, e un rientro allo scroll li' non parte mai. Entra da
   sola, in ordine di lettura. */

@keyframes rise-in {
  from { opacity: 0; transform: translateY(30px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
/* Come rise-in ma senza opacita'. Chrome esclude dai candidati LCP gli
   elementi completamente trasparenti: sfumare l'hero sposta in avanti il
   tempo dell'LCP di tutto il ritardo piu' la rampa, e annulla il
   vantaggio di fetchpriority. Sopra la piega si sale e si mette a fuoco. */
@keyframes rise-in-lcp {
  from { transform: translateY(30px); filter: blur(8px); }
  to   { transform: none; filter: blur(0); }
}
/* Le tre schede dell'hero galleggiano e rispondono al puntatore. Le tre
   animazioni girano su proprieta' diverse e su elementi diversi, altrimenti
   si contenderebbero la stessa transform: l'entrata sta sul livello
   (transform), il galleggiamento sul guscio dentro (transform), la
   parallasse sul livello ma sulla proprieta' translate, che si compone con
   transform invece di sostituirla. */
@keyframes hero-bob {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, calc(var(--bob) * -1), 0); }
}
@keyframes bar-in {
  from { transform: scaleX(0); }
  to   { transform: none; }
}

.js .hero__say > * { animation: rise-in-lcp var(--d-slow) var(--ease) both; }
.js .hero__say > *:nth-child(1) { animation-delay: 60ms; }
.js .hero__say > *:nth-child(2) { animation-delay: 140ms; }
.js .hero__say > *:nth-child(3) { animation-delay: 220ms; }
.js .hero__say > *:nth-child(4) { animation-delay: 300ms; }

.js .hero__stack > * { animation: rise-in-lcp var(--d-slow) var(--ease) both; }
.js .hero__stack > *:nth-child(1) { animation-delay: 200ms; }
.js .hero__stack > *:nth-child(2) { animation-delay: 320ms; }
.js .hero__stack > *:nth-child(3) { animation-delay: 440ms; }

.js .hero__say .flag i { animation: bar-in var(--d-mid) var(--ease) both; }
.js .hero__say .flag i:nth-child(1) { animation-delay: 220ms; }
.js .hero__say .flag i:nth-child(2) { animation-delay: 290ms; }
.js .hero__say .flag i:nth-child(3) { animation-delay: 360ms; }

/* ======================================================== 768 E OLTRE === */

@media (min-width: 48em) {
  section { padding-block: var(--s-10); }
  :root { --gutter: var(--s-7); }

  .hero__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--s-9); }
  /* L'hero smette di essere una pila. Le due fotografie si sovrappongono a
     misure diverse, la prima esce dal wrap e viene tagliata dal bordo della
     finestra, la scheda-dato chiude in basso a destra. Non e' solo estetica:
     la pila costava 693px di altezza ed era il vincolo che spingeva il
     contenuto sotto la piega. La composizione ne chiede 380, e il vincolo
     torna a essere la colonna di testo. Tutte le misure in percentuale,
     cosi' la composizione scala con la colonna invece di rompersi. */
  .hero__stack {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    margin-inline-end: calc(-1 * var(--gutter));
  }
  .hero__stack > * { position: absolute; margin: 0; }

  /* Ogni livello scorre di una quantita' diversa: e' la differenza fra i tre
     valori a fare la profondita', non il movimento in se'. La transizione
     lunga fa arrivare le schede un istante dopo il puntatore, che e' cio' che
     le fa sembrare sospese invece che agganciate. */
  .hero__stack > * {
    translate: calc(var(--px, 0) * var(--depth, 0px)) calc(var(--py, 0) * var(--depth, 0px));
    transition: translate 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .hero__a { --depth: 9px;  }
  .hero__b { --depth: 17px; }
  .hero__c { --depth: 26px; }

  /* Durate diverse e non multiple fra loro: le tre schede partono sfasate e
     restano sfasate, invece di risincronizzarsi come farebbero con durate
     uguali. Il ritardo le lascia posare prima di cominciare a respirare. */
  .js .hero__float {
    animation: hero-bob var(--bob-dur) ease-in-out var(--bob-delay) infinite;
  }
  .hero__a .hero__float { --bob: 8px;  --bob-dur: 7.5s; --bob-delay: 1000ms; }
  .hero__b .hero__float { --bob: 12px; --bob-dur: 9.1s; --bob-delay: 1120ms; }
  .hero__c .hero__float { --bob: 16px; --bob-dur: 6.4s; --bob-delay: 1240ms; }
  .hero__a { inset-block-start: 0; inset-inline-end: -8%; width: 88%; z-index: 1; }
  .hero__b { inset-block-end: 6%; inset-inline-start: 0; width: 62%; z-index: 2; }

  .split { grid-template-columns: 0.95fr 1.05fr; gap: var(--s-9); align-items: center; }
  .split--flip .split__media { order: 2; }



  .scopes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Sei celle con la prima a tutta riga lascerebbero mezza riga vuota in
     fondo: anche l'ultima la prende, e chiude la griglia. 1 + 2 + 2 + 1. */
  .scopes > .scope--lead,
  .scopes > .scope--close { grid-column: 1 / -1; }
  .scope--lead .scope__in,
  .scope--close .scope__in { grid-template-columns: 1.15fr 0.85fr; align-items: center; }
  .scope--close .scope__in { grid-template-columns: 0.85fr 1.15fr; }

  .pact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .close__mails { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
  .foot__end { flex-direction: row; justify-content: space-between; }

  .page-head { padding-block: calc(var(--s-10) + var(--s-4)) var(--s-8); }
}

/* Quattro meccanismi della forma cooperativa: nessuno guida, quindi la
   griglia non deve fingere una gerarchia. Due celle a tutta riga e due a
   meta' ne dichiaravano una che il contenuto non ha, e il filo di chiusura
   delle due larghe si fermava a meta' scheda (575px su 1174). Quattro celle
   pari, e i fili si allineano perche' il .datum si appoggia al fondo di celle
   alte uguali.

   Due colonne solo da 1024: a 810 la cella dava 32 caratteri per riga, cioe'
   meno di una colonna di giornale. Sotto, una sola colonna. */
@media (min-width: 64em) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1120px) {
  .foot__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .stat-highlight { flex-direction: row; align-items: center; }

  /* La dichiarazione passa a due colonne solo qui. A 770px la colonna di
     testo scendeva a 217px e la prosa a 26 caratteri per riga: la
     larghezza di una didascalia, non di un paragrafo. Fino a 1119 sta a
     colonna singola, testo sopra e fotografia sotto. */
  /* Con le colonne centrate l'immagine restava alta un terzo della colonna e
     sopra e sotto rimaneva buio vuoto. Allungata a tutta altezza diventa il
     secondo blocco della composizione invece di un francobollo. */
  .stmt { grid-template-columns: 0.9fr 1.1fr; padding: var(--s-8); gap: var(--s-8); align-items: stretch; }
  .stmt__media,
  .stmt__media .shell,
  .stmt__media .core { height: 100%; }
  .stmt__media .shell { display: flex; }
  .stmt__media img { height: 100%; aspect-ratio: auto; min-height: 380px; }

  /* Il terzo livello compare solo qui. A 1014 la scheda prendeva il 58%
     dell'altezza dello stack e l'etichetta andava su tre righe: stava in
     piedi ma pesava piu' delle fotografie che doveva accompagnare. */
  .hero__c {
    display: block;
    position: absolute;
    margin: 0;
    inset-block-end: 0;
    inset-inline-end: 4%;
    /* A 44% la sovrapposizione con la fotografia era di una cinquantina
       di pixel: troppo poca per leggersi come strato, quanto basta per
       sembrare un angolo mangiato. Quella fra le due foto ne misura 214. */
    width: 48%;
    z-index: 3;
  }
}

/* ============================================= SOTTO 768: TUTTO IN FILA === */

@media not all and (min-width: 48em) {
  :root {
    --tri-w: 80px;
  }

  .nav__links { display: none; }
  /* Il pulsante compare solo se c'e' il JS che lo fa funzionare. Il sipario
     si apre con una classe che mette lo script: senza, il bottone restava
     visibile e non faceva niente. Un comando morto e' peggio di un comando
     assente, e qui non manca nulla - la pagina e' una sola e si scorre. */
  .js .nav__burger { display: block; }
  .nav__pill { width: calc(100vw - var(--s-6)); justify-content: space-between; }
  /* Il sipario porta gia' Scrivici: sulla barra stretta il pulsante toglie
     spazio e a 200% sfonda. Il bersaglio non sparisce, cambia posto. Le
     pagine informative non hanno sipario, quindi il loro pulsante resta. */
  .nav__pill:not(.nav__pill--plain) > .btn { display: none; }
  .nav__pill--plain { padding-left: var(--s-4); gap: var(--s-3); }
  .nav__pill--plain > .btn { padding-inline: var(--s-4) 8px; gap: var(--s-3); }

  .hero {
    min-height: auto;
    align-items: flex-start;
    padding-block-start: var(--nav-clear);
    padding-block-end: var(--s-8);
  }
  /* I rientri si sommano, e nessuno dei tre da solo sembrava largo: margine
     16, bisello 6, nucleo 32 facevano 54px per lato, cioe' 108 su 375. Alla
     colonna di lettura restavano 265px, poco piu' di trenta caratteri. Il
     bisello e i due raggi sono l'identita' del sistema e non si toccano;
     il pad del nucleo scende di un gradino, ed e' li' che c'e' il guadagno. */
  .core__pad { padding: var(--s-5); }
  /* Il pad stretto seguiva quello largo su desktop ma non su mobile, ed era
     rimasto a 32. Sono 16px per lato che alla riga dell'indirizzo servono. */
  .core__pad--tight { padding: var(--s-5); }

  /* Misurato a 390: la scheda e' larga 326, dentro restano 248px, l'indirizzo
     ne chiede 226 e ci starebbe con 22 di margine. A sfondare sono l'orb e il
     suo gap, 50px su una riga da 248, per un segno che e' aria-hidden e la cui
     animazione al passaggio sul telefono non parte nemmeno. Esce dalla riga e
     va nell'angolo alto, dove un segno di collegamento esterno sta di casa;
     l'etichetta gli riserva lo spazio invece di finirci sotto. */
  .mail .core { position: relative; }
  .mail__v { display: block; }
  .mail__k { padding-inline-end: calc(34px + var(--s-4)); }
  .mail__v .orb {
    position: absolute;
    inset-block-start: var(--s-5);
    inset-inline-end: var(--s-5);
  }
  .stmt, .close { padding: var(--s-7) var(--s-4); }

  /* La banda cede prima del segno. Con flex:none il tricolore teneva la sua
     misura a oltranza e a spezzarsi era il segno intero, banda sopra e
     pillola sotto: esattamente cio' che DESIGN.md vieta. Ora la banda si
     accorcia quando la riga stringe, e il segno resta uno. */
  .flag { flex: 0 1 var(--tri-w); min-width: 56px; }
  .sec-head { margin-block-end: var(--s-7); }
  .sec-head > .h2 { margin-block-start: var(--s-5); }

  /* Adattamento smartphone per Riga Registro */
  .fact-asym-lead-core { padding: var(--s-5); }

  /* Coerenza ritmica delle schede Ambiti in colonna singola */
  .scope__pic { order: -1; }

  /* Adattamento bottoni hero */
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* Il respiro laterale scende di un gradino su tutti i telefoni tenuti in
   verticale, non solo sui piu' stretti: la soglia a 380px tagliava fuori
   390, 412 e 430, cioe' la maggior parte degli schermi in mano alla gente,
   che restavano a 24px mentre un SE da 375 ne aveva 16. */
@media (max-width: 480px) {
  :root { --gutter: var(--s-4); }
}

@media (max-width: 380px) {
  .hero__actions { flex-direction: column; width: 100%; }
  .hero__actions .btn { width: 100%; }
  .mark { flex-wrap: wrap; }
}

/* ================================================= MOVIMENTO RIDOTTO === */

@media (prefers-reduced-motion: reduce) {
  .io .rise, .io .rise.in,
  .io .stag > *, .io .stag.in > * {
    opacity: 1; transform: none; filter: none; transition: none;
  }
  .io .flag i, .io .in .flag i { transform: none; transition: none; }
  .io .rise .mark--rule::after, .io .rise.in .mark--rule::after,
  .io .nudge.rise::before, .io .nudge.rise.in::before { transform: none; transition: none; }
  .js .hero__say > *, .js .hero__stack > *, .js .hero__say .flag i { animation: none; }
  .js .hero__float { animation: none; }
  .hero__stack > * { translate: none; transition: none; }
  .sheet__item { opacity: 1; transform: none; transition: none; }
  .shell, .btn, .orb, .orb svg, .qa__sign, .nav__pill { transition: none; }
  .shell--lift:hover { transform: none; }
  .shell--lift .scope__pic img,
  .shell--lift:hover .scope__pic img { transform: none; transition: none; }
  .btn:hover .orb svg, .btn:hover .orb svg + svg,
  .mail:hover .orb svg, .mail:hover .orb svg + svg,
  .nudge__a:hover .orb svg, .nudge__a:hover .orb svg + svg,
  .foot__a:hover .orb svg, .foot__a:hover .orb svg + svg { transform: none; }
  .orb svg + svg { display: none; }
}

/* ================================================= DISPOSITIVI TOUCH ===
   Feedback istantaneo alla pressione su schermi tattili privi di :hover. */
@media (hover: none) {
  * { -webkit-tap-highlight-color: transparent; }
  .btn:active, .mail:active { transform: scale(0.98); }
  .nav__burger:active { transform: scale(0.92); }
  .qa__q:active { opacity: 0.75; }
  .pact__row:active { background: var(--paper-2); }
  .nudge__a:active { opacity: 0.85; }
  .foot__a:active { color: var(--brass-lit); }
  .sheet__item:active { color: var(--brass); transform: scale(0.97); }
}

/* ================================================= ADATTAMENTO STAMPA ===
   Per banche, stazioni appaltanti, INPS e verifiche di conformita':
   foglio pulito a fondo bianco, risparmio inchiostro, nessuna UI fluttuante,
   rottura pagina evitata su dati e certificati. */
@media print {
  *, *::before, *::after {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    background: #ffffff !important;
    color: #171310 !important;
  }

  body::after,
  .aura,
  .nav,
  .sheet,
  .skip,
  .orb,
  .nudge,
  .hero__actions,
  .close__mails .orb,
  .foot__mark {
    display: none !important;
  }

  /* Riconversione superfici scure in chiaro per risparmio inchiostro */
  .dark, .on-dark, .foot {
    background: transparent !important;
    color: #171310 !important;
    border: 1px solid #CCCCCC !important;
  }

  .h2--dark, .mega--dark, .foot__t, .foot__v, .mail__v, .close .mega {
    color: #171310 !important;
  }

  .foot__k, .foot__note, .label--dark, .tag--dark, .stmt p, .close p {
    color: #4A423B !important;
  }

  /* Evita tagli a meta' pagina su schede e blocchi societari */
  .shell, .cards, .facts, .scopes, .pact, .stmt, .close, .foot__col, .qa {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .core {
    background: transparent !important;
    border: 1px solid #CCCCCC !important;
  }

  /* Esposizione esplicita dei canali di contatto su carta */
  a[href^="mailto:"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-weight: normal;
  }
}

/* ================================================= PATTO RESPONSABILITÀ === */
.pledge-card {
  margin-block-start: var(--s-4);
  display: flex;
  gap: 16px;
  padding: 18px 22px;
  border-radius: var(--r-core-sm);
  background: var(--paper-2);
  border: 1px solid var(--line);
  box-shadow: 0 4px 16px -6px rgba(23, 19, 16, 0.06);
}

.pledge-card__bar {
  width: 3px;
  border-radius: var(--r-cap);
  background: var(--brass);
  flex-shrink: 0;
}

.pledge-card__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink);
  margin-block-end: 6px;
}

.pledge-card__author {
  font-family: var(--mono);
  font-size: var(--t-tag);
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
  display: block;
}