/* ============================================================
   CARATTERE — rivista interattiva sulla tipografia
   carta #F6F2EA · inchiostro #141210 · rosso #E2311D
   ============================================================ */

@font-face {
  font-family: "Fraunces";
  src: url("vendor/fonts/fraunces-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Fraunces";
  src: url("vendor/fonts/fraunces-italic-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "Archivo";
  src: url("vendor/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: block;
}

:root {
  --carta: #F6F2EA;
  --carta-scura: #EFE9DC;
  --inchiostro: #141210;
  --inchiostro-70: rgba(20, 18, 16, .7);
  --inchiostro-40: rgba(20, 18, 16, .4);
  --inchiostro-16: rgba(20, 18, 16, .16);
  --inchiostro-07: rgba(20, 18, 16, .07);
  --rosso: #E2311D;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --grotesk: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(24px, 4vw, 64px);
  --misura: 62ch;
  --morbido: cubic-bezier(.22, 1, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.55;
  overflow-x: hidden;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26"><path d="M13 0v26M0 13h26" stroke="%23141210" stroke-width="1.4"/><circle cx="13" cy="13" r="4.2" fill="none" stroke="%23E2311D" stroke-width="1.6"/></svg>') 13 13, crosshair;
}

a, button, input[type="range"], .interruttore, .kern-lettera {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26"><path d="M13 0v26M0 13h26" stroke="%23E2311D" stroke-width="1.8"/><circle cx="13" cy="13" r="4.2" fill="%23E2311D"/></svg>') 13 13, pointer;
}

::selection { background: var(--rosso); color: var(--carta); }

:focus-visible { outline: 3px solid var(--rosso); outline-offset: 3px; }

/* ---- grana della carta ---- */
body::after {
  content: "";
  position: fixed; inset: -50%;
  pointer-events: none;
  z-index: 9990;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="240" height="240" filter="url(%23n)" opacity="0.55"/></svg>');
  opacity: .07;
  mix-blend-mode: multiply;
}

/* ---- barra di avanzamento ---- */
.avanzamento {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 9999; background: transparent;
}
.avanzamento i {
  display: block; height: 100%; width: 100%;
  background: var(--rosso);
  transform-origin: 0 0; transform: scaleX(0);
}

/* ---- testatina (running head) ---- */
.testatina {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 9980;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px var(--gutter) 10px;
  font-family: var(--grotesk);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  border-bottom: 1px solid var(--inchiostro-16);
  background: color-mix(in srgb, var(--carta) 97%, transparent);
  backdrop-filter: blur(6px);
  transition: transform .5s var(--morbido);
}
body[data-cap="apertura"] .testatina { transform: translateY(-110%); }
body[data-cap="peso"] .testatina,
body[data-cap="colophon"] .testatina {
  background: rgba(20, 18, 16, .93);
  color: var(--carta);
  border-bottom-color: rgba(246, 242, 234, .18);
}
.testatina-marchio { font-weight: 800; }
.testatina-capitolo::before { content: "· "; color: var(--rosso); font-weight: 900; }

/* ---- impianto comune ---- */
.cap { position: relative; }
.scena {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
.rosso { color: var(--rosso); }

.kicker {
  font-family: var(--grotesk);
  font-size: 12px; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--rosso);
  margin-bottom: 1.2em;
}
.titolo-cap {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  font-weight: 560;
  font-size: clamp(44px, 5.4vw, 92px);
  line-height: .96;
  letter-spacing: -.015em;
  margin-bottom: .5em;
  text-wrap: balance;
}
.prosa {
  max-width: var(--misura);
  margin-bottom: 1.1em;
  font-weight: 380;
}
.prosa strong { font-weight: 640; }
.margine-nota {
  font-family: var(--grotesk);
  font-size: .78em; line-height: 1.5;
  color: var(--inchiostro-70);
  border-top: 1px solid var(--inchiostro-16);
  padding-top: .9em; max-width: 44ch;
}

/* ---- foliazione gigante ---- */
.folio, .folio-statico {
  position: absolute;
  right: -0.06em; top: 4vh;
  font-family: var(--grotesk);
  font-weight: 900;
  font-stretch: 78%;
  font-size: clamp(160px, 30vh, 340px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--inchiostro-16);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.folio-statico { top: 6vh; }

/* ============================================================
   01 · APERTURA
   ============================================================ */
#apertura { height: 280vh; }
#apertura .scena { justify-content: space-between; padding: 0; }

.masthead {
  font-family: var(--grotesk);
  font-size: clamp(11px, .9vw, 14px);
  font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  padding: 26px var(--gutter) 0;
  display: flex; justify-content: center; gap: .5em;
  border-bottom: none;
}

.testata {
  font-family: var(--serif);
  font-size: clamp(72px, 14.6vw, 260px);
  line-height: .8;
  text-align: center;
  letter-spacing: -.045em;
  white-space: nowrap;
  user-select: none;
}
.testata span {
  display: inline-block;
  will-change: transform;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
}

.apertura-piede {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--gutter);
  padding: 0 var(--gutter) 5vh;
}
.standfirst {
  max-width: 58ch;
  font-size: clamp(17px, 1.45vw, 24px);
  line-height: 1.45;
  font-weight: 420;
  border-top: 2px solid var(--inchiostro);
  padding-top: 1em;
}
.standfirst em { font-variation-settings: "opsz" 40, "SOFT" 40, "WONK" 1; }
.indizio {
  font-family: var(--grotesk);
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  writing-mode: vertical-rl;
  color: var(--inchiostro-70);
}
.indizio .freccia { color: var(--rosso); }
@media (prefers-reduced-motion: no-preference) {
  .indizio .freccia { display: inline-block; animation: giu 1.6s var(--morbido) infinite; }
  @keyframes giu { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(6px); } }
}

/* ============================================================
   02 · ANATOMIA
   ============================================================ */
#anatomia { height: 380vh; background: var(--carta); }
#anatomia .scena {
  background-image: repeating-linear-gradient(
    to bottom, transparent 0, transparent 47px, var(--inchiostro-07) 47px, var(--inchiostro-07) 48px);
}
.anatomia-griglia {
  display: grid;
  grid-template-columns: 48% 52%;
  height: 100%;
  align-items: center;
}
.glifo-box {
  position: relative;
  height: 92vh;
  display: flex; align-items: center; justify-content: center;
}
.glifo {
  font-family: var(--serif);
  font-size: min(78vh, 34vw);
  line-height: 1;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  font-weight: 480;
  user-select: none;
}

.etichetta {
  position: absolute;
  z-index: 3;
  font-family: var(--grotesk);
  font-size: clamp(11px, .85vw, 14px);
  font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--morbido), transform .5s var(--morbido);
}
.etichetta.on { opacity: 1; transform: none; }
.etichetta .punto {
  position: absolute;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--rosso);
}
.etichetta .filo {
  position: absolute;
  background: var(--rosso);
  height: 1.5px;
  transform-origin: 0 50%;
}
.etichetta .nome {
  position: relative;
  background: var(--carta);
  border: 1.5px solid var(--inchiostro);
  padding: .45em .8em .4em;
  display: inline-block;
}
.etichetta.corrente .nome { background: var(--inchiostro); color: var(--carta); border-color: var(--inchiostro); }
.etichetta.corrente .punto { animation: pulsa 1.2s ease-in-out infinite; }
@keyframes pulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.7); } }

.lente {
  position: absolute;
  width: 12vmin; height: 12vmin;
  border: 2px solid var(--rosso);
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  transition: left .7s var(--morbido), top .7s var(--morbido), opacity .4s;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--rosso) 10%, transparent);
}

.anatomia-testo { padding: 0 var(--gutter) 0 2vw; max-width: 640px; }

/* mini-diagramma metrico */
.metrica {
  margin-top: 2.4em;
  padding: 1.2em 0 1em;
  max-width: 480px;
}
.metrica-corpo { position: relative; display: inline-block; }
.metrica-parola {
  font-family: var(--serif);
  font-size: clamp(64px, 6.4vw, 110px);
  line-height: 1;
  font-weight: 420;
  font-variation-settings: "opsz" 144, "WONK" 1;
  user-select: none;
}
.metrica .linea {
  position: absolute; left: -6%; width: 158%;
  border-top: 1px dashed var(--rosso);
  font-style: normal;
}
.metrica .linea b {
  position: absolute; right: 0; top: -1.6em;
  font-family: var(--grotesk);
  font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--rosso);
  background: var(--carta);
  padding-left: .6em;
}
/* posizioni in % del box em della parola (calibrate sul rendering, vedi QA) */
.l-asc  { top: 10%; }
.l-med  { top: 27%; }
.l-base { top: 78%; }
.l-disc { top: 97%; }
.l-med b { top: .3em; }
.l-disc b { top: .3em; }

/* ============================================================
   03 · PESO
   ============================================================ */
#peso { height: 320vh; background: var(--inchiostro); color: var(--carta); }
#peso .folio { -webkit-text-stroke-color: rgba(246, 242, 234, .22); }
#peso .kicker { color: var(--rosso); }
#peso .margine-nota { color: rgba(246, 242, 234, .64); border-top-color: rgba(246, 242, 234, .2); }

.peso-griglia {
  display: grid;
  grid-template-columns: minmax(320px, 38%) 1fr;
  gap: var(--gutter);
  align-items: center;
  height: 100%;
  padding: 0 var(--gutter);
}
.peso-palco {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 100%;
}
.peso-parola {
  font-family: var(--serif);
  font-size: min(24vw, 46vh);
  line-height: 1;
  letter-spacing: -.03em;
  font-variation-settings: "opsz" 144, "wght" 340, "SOFT" 0, "WONK" 0;
  user-select: none;
  transition: color .3s;
}
.peso-parola.nero-pieno { color: var(--rosso); }

.peso-metro {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  display: flex; gap: 14px; align-items: stretch;
  height: 52vh;
}
.metro-barra {
  width: 10px;
  border: 1.5px solid rgba(246, 242, 234, .4);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.metro-barra i {
  display: block; width: 100%;
  height: 30%;
  background: var(--rosso);
}
.metro-dati {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  font-family: var(--grotesk);
}
.metro-num {
  font-size: clamp(40px, 4.4vw, 72px);
  font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.metro-nome {
  font-size: 13px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--rosso); font-weight: 700;
}
.metro-asse {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(246, 242, 234, .5);
}

.peso-slider-riga {
  display: flex; align-items: center; gap: 1em;
  font-family: var(--grotesk); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(246, 242, 234, .7);
  margin-top: 1.4em;
}
#peso-slider {
  appearance: none; -webkit-appearance: none;
  width: min(260px, 100%);
  height: 2px;
  background: rgba(246, 242, 234, .4);
  outline-offset: 6px;
}
#peso-slider::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--rosso);
  border: 2px solid var(--carta);
}

/* ============================================================
   04 · CRENATURA
   ============================================================ */
#crenatura {
  padding: 18vh 0 10vh;
  border-top: 2px solid var(--inchiostro);
}
.colonna-stretta {
  position: relative; z-index: 1;
  padding: 0 var(--gutter);
  max-width: 900px;
}
.kern-palco {
  position: relative;
  margin: 8vh 0 2vh;
  padding: 6vh 0 7vh;
  border-top: 1px solid var(--inchiostro-16);
  border-bottom: 1px solid var(--inchiostro-16);
  background-image: repeating-linear-gradient(
    to right, transparent 0, transparent 79px, var(--inchiostro-07) 79px, var(--inchiostro-07) 80px);
  overflow: hidden;
}
.kern-parola {
  position: relative;
  height: 1.06em;
  font-family: var(--serif);
  font-size: var(--kern-size, min(17vw, 210px));
  line-height: 1;
  font-weight: 600;
  font-variation-settings: "opsz" 144, "WONK" 0;
  margin: 0 auto;
  user-select: none;
}
.kern-lettera {
  position: absolute; top: 0; left: 0;
  will-change: transform;
  touch-action: none;
  user-select: none;
}
.kern-lettera:focus-visible { outline-offset: -2px; color: var(--rosso); }
.kern-lettera.trascinata { color: var(--rosso); z-index: 2; }
.kern-timbro {
  position: absolute;
  right: 7%; top: 9%;
  padding: .7em 1.1em .55em;
  border: 4px solid var(--rosso);
  color: var(--rosso);
  font-family: var(--grotesk);
  font-weight: 900;
  font-size: clamp(15px, 1.5vw, 24px);
  line-height: 1.15;
  letter-spacing: .22em; text-transform: uppercase;
  text-align: center;
  transform: rotate(-8deg) scale(0);
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
  z-index: 3;
}
.kern-palco.perfetto .kern-timbro { transform: rotate(-8deg) scale(1); }
.kern-lettera.ancora { color: var(--inchiostro); }
.kern-guide { position: absolute; inset: 0; pointer-events: none; }
.kern-guida {
  position: absolute; top: -8%; bottom: -14%;
  width: 0;
  border-left: 1.5px dashed var(--rosso);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.kern-parola.visibili .kern-guida { opacity: .8; }

.kern-plancia {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2em 3em;
  padding: 0 var(--gutter);
}
.kern-punteggio { display: flex; align-items: center; gap: 1em; }
.kern-num {
  font-family: var(--grotesk);
  font-size: clamp(56px, 6vw, 96px);
  font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums;
  min-width: 2.2ch;
}
.kern-num.alto { color: var(--rosso); }
.kern-etichetta {
  font-family: var(--grotesk);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  line-height: 1.7; color: var(--inchiostro-70);
}
.kern-best { color: var(--rosso); font-weight: 700; }
.kern-bottoni { display: flex; gap: 1em; }
.bottone {
  font-family: var(--grotesk);
  font-size: 13px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  background: var(--inchiostro); color: var(--carta);
  border: 2px solid var(--inchiostro);
  padding: 1em 1.6em .9em;
  transition: transform .15s var(--morbido), background .2s, color .2s;
}
.bottone:hover { background: var(--rosso); border-color: var(--rosso); transform: translateY(-2px); }
.bottone:active { transform: translateY(0); }
.bottone-linea { background: transparent; color: var(--inchiostro); }
.bottone-linea:hover { background: var(--inchiostro); color: var(--carta); border-color: var(--inchiostro); }
.kern-aiuto {
  flex-basis: 100%;
  font-family: var(--grotesk);
  font-size: 12px; color: var(--inchiostro-70);
  max-width: 60ch;
}
kbd {
  font-family: var(--grotesk); font-size: .9em;
  border: 1px solid var(--inchiostro-40);
  border-bottom-width: 2px; border-radius: 3px;
  padding: 0 .4em;
}

/* ============================================================
   05 · GERARCHIA
   ============================================================ */
#gerarchia {
  padding: 16vh 0 12vh;
  border-top: 2px solid var(--inchiostro);
  background: var(--carta-scura);
}
.stile-scelte {
  display: flex; gap: 0;
  padding: 4vh var(--gutter) 0;
  max-width: 1200px; margin: 0 auto;
}
.stile-btn {
  font-family: var(--grotesk);
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  background: transparent; color: var(--inchiostro);
  border: 2px solid var(--inchiostro);
  border-right-width: 0;
  padding: 1.1em 1.8em .95em;
  transition: background .2s, color .2s;
}
.stile-btn:last-child { border-right-width: 2px; }
.stile-btn b { font-weight: 900; margin-right: .5em; }
.stile-btn.attivo { background: var(--inchiostro); color: var(--carta); }
.stile-btn.attivo b { color: var(--rosso); }
.stile-btn:hover:not(.attivo) { background: var(--rosso); border-color: var(--inchiostro); color: var(--carta); }

.notizia {
  max-width: 1200px;
  margin: 5vh auto 0;
  padding: clamp(28px, 4vw, 64px);
  background: var(--carta);
  border: 2px solid var(--inchiostro);
  box-shadow: 10px 10px 0 var(--inchiostro-16);
}
@media (prefers-reduced-motion: no-preference) {
  .notizia.ricomposta { animation: ricomponi .4s var(--morbido); }
  @keyframes ricomponi {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: none; }
  }
}

/* — 1910 · quotidiano — */
.notizia[data-stile="1910"] { text-align: center; }
.notizia[data-stile="1910"] .n-occhiello {
  font-family: var(--serif);
  font-variant-caps: small-caps;
  letter-spacing: .34em;
  font-weight: 500;
  font-size: 15px;
  border-top: 3px double var(--inchiostro);
  border-bottom: 3px double var(--inchiostro);
  display: inline-block;
  padding: .5em 2.4em .35em;
  margin-bottom: 1.2em;
}
.notizia[data-stile="1910"] .n-titolo {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "WONK" 0;
  font-weight: 560;
  font-size: clamp(40px, 4.6vw, 76px);
  line-height: 1.02;
  margin: 0 auto .35em;
  max-width: 18ch;
}
.notizia[data-stile="1910"] .n-sommario {
  font-style: italic;
  font-size: 1.12em;
  max-width: 52ch;
  margin: 0 auto .8em;
}
.notizia[data-stile="1910"] .n-firma {
  font-variant-caps: small-caps;
  letter-spacing: .22em;
  font-size: .85em;
  margin-bottom: 2em;
}
.notizia[data-stile="1910"] .n-firma::before,
.notizia[data-stile="1910"] .n-firma::after { content: " — "; color: var(--inchiostro-40); }
.notizia[data-stile="1910"] .n-corpo {
  columns: 3; column-gap: 2.6em; column-rule: 1px solid var(--inchiostro-16);
  text-align: justify; hyphens: auto; -webkit-hyphens: auto;
  font-size: .95em;
  border-top: 1px solid var(--inchiostro);
  padding-top: 1.6em;
}
.notizia[data-stile="1910"] .n-corpo p { margin-bottom: .8em; text-indent: 1.4em; }
.notizia[data-stile="1910"] .n-corpo p:first-child { text-indent: 0; }
.notizia[data-stile="1910"] .n-corpo p:first-child::first-letter {
  font-size: 3.1em; float: left; line-height: .82;
  padding: .04em .12em 0 0;
  font-weight: 640;
}

/* — 1960 · svizzero — */
.notizia[data-stile="1960"] {
  font-family: var(--grotesk);
  text-align: left;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas: "occhiello occhiello" "titolo titolo" "sommario firma" "corpo corpo";
  column-gap: 3em;
}
.notizia[data-stile="1960"] .n-occhiello {
  grid-area: occhiello;
  font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: lowercase;
  color: var(--rosso);
  border-bottom: 4px solid var(--rosso);
  padding-bottom: .6em; margin-bottom: 1.4em;
}
.notizia[data-stile="1960"] .n-titolo {
  grid-area: titolo;
  font-weight: 720;
  font-size: clamp(38px, 4.2vw, 68px);
  letter-spacing: -.03em;
  line-height: 1;
  text-transform: lowercase;
  max-width: 16ch;
  margin-bottom: .6em;
}
.notizia[data-stile="1960"] .n-sommario {
  grid-area: sommario;
  font-size: 1.05em; font-weight: 500;
  line-height: 1.4; max-width: 42ch;
  margin-bottom: 1.6em;
}
.notizia[data-stile="1960"] .n-firma {
  grid-area: firma;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--inchiostro-70);
  align-self: start;
}
.notizia[data-stile="1960"] .n-corpo {
  grid-area: corpo;
  columns: 2; column-gap: 3em;
  font-size: .92em; line-height: 1.6;
  border-top: 1px solid var(--inchiostro-16);
  padding-top: 1.6em;
}
.notizia[data-stile="1960"] .n-corpo p { margin-bottom: 1em; }
.notizia[data-stile="1960"] .n-corpo em { font-style: normal; font-weight: 700; }

/* — 2020 · brutalista — */
.notizia[data-stile="2020"] {
  font-family: var(--grotesk);
  background: var(--carta);
  border-width: 3px;
  box-shadow: 16px 16px 0 var(--rosso);
}
.notizia[data-stile="2020"] .n-occhiello {
  display: inline-block;
  background: var(--rosso); color: var(--carta);
  font-weight: 900; font-size: 14px;
  letter-spacing: .2em; text-transform: uppercase;
  padding: .55em 1em .4em;
  transform: rotate(-1.2deg);
  margin-bottom: .8em;
}
.notizia[data-stile="2020"] .n-titolo {
  font-weight: 900;
  font-stretch: 64%;
  font-size: clamp(56px, 7.4vw, 128px);
  line-height: .88;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin-bottom: .3em;
  word-break: break-word;
}
.notizia[data-stile="2020"] .n-sommario {
  font-size: 1.1em; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em;
  max-width: 44ch;
  border-left: 8px solid var(--inchiostro);
  padding-left: .8em;
  margin-bottom: 1.4em;
}
.notizia[data-stile="2020"] .n-firma {
  font-size: 11px; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--rosso);
  margin-bottom: 1.6em;
}
.notizia[data-stile="2020"] .n-corpo {
  columns: 2; column-gap: 2.4em;
  font-size: .95em; line-height: 1.55;
  border-top: 3px solid var(--inchiostro);
  padding-top: 1.4em;
}
.notizia[data-stile="2020"] .n-corpo p { margin-bottom: 1em; }
.notizia[data-stile="2020"] .n-corpo em {
  font-style: normal; background: var(--inchiostro); color: var(--carta);
  padding: 0 .25em;
}

/* ============================================================
   06 · LEGATURE
   ============================================================ */
#legature {
  padding: 16vh 0 0;
  border-top: 2px solid var(--inchiostro);
  overflow: hidden;
}
.liga-palco { padding: 4vh var(--gutter) 6vh; }
.liga-comando {
  display: flex; align-items: center; gap: 1.2em;
  font-family: var(--grotesk);
  font-size: 12px; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  margin-bottom: 3vh;
}
.liga-stato { color: var(--inchiostro-40); transition: color .3s; }
.liga-palco:not(.liga-off) .liga-stato-on { color: var(--rosso); }
.liga-palco.liga-off .liga-stato-off { color: var(--rosso); }
.interruttore {
  position: relative;
  width: 74px; height: 36px;
  background: var(--inchiostro);
  border: none; border-radius: 999px;
  transition: background .25s;
}
.interruttore-pomello {
  position: absolute; top: 4px; left: 42px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--carta);
  transition: left .25s var(--morbido);
}
.liga-palco.liga-off .interruttore-pomello { left: 4px; }
.liga-palco.liga-off .interruttore { background: var(--inchiostro-40); }

.liga-vetrina {
  position: relative;
  display: flex; align-items: baseline; gap: .35em;
  font-family: var(--serif);
  font-size: min(17vw, 30vh);
  line-height: 1.1;
  font-weight: 420;
  font-variation-settings: "opsz" 144, "WONK" 1;
}
.liga-palco.liga-off .liga-vetrina {
  font-feature-settings: "liga" 0, "clig" 0, "dlig" 0;
}
.liga-glifo { position: relative; transition: color .3s; }
.liga-glifo::after {
  content: attr(data-nota);
  position: absolute;
  left: 50%; bottom: -1.2em;
  transform: translateX(-50%);
  font-family: var(--grotesk);
  font-size: 12px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--inchiostro-40);
  white-space: nowrap;
}
.liga-palco.liga-off .liga-glifo { color: var(--inchiostro-70); }
.cerchio-collisione {
  position: absolute;
  width: .34em; height: .34em;
  left: .18em; top: .1em;
  border: 3px dashed var(--rosso);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .4s, transform .4s var(--morbido);
  transform: scale(.6);
}
.liga-palco.liga-off .cerchio-collisione { opacity: 1; transform: scale(1); }
.liga-parole {
  margin-top: 7vh;
  font-size: clamp(20px, 2.2vw, 34px);
  font-weight: 420;
  color: var(--inchiostro-70);
}

.amp-palco {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 1fr);
  align-items: center;
  gap: var(--gutter);
  padding: 0 var(--gutter);
  background: var(--carta-scura);
  border-top: 1px solid var(--inchiostro-16);
}
.amp {
  font-family: var(--serif);
  font-style: italic;
  font-size: min(34vw, 74vh);
  line-height: .9;
  text-align: center;
  font-variation-settings: "opsz" 144, "wght" 480, "SOFT" 0, "WONK" 1;
  transition: font-variation-settings 1.1s var(--morbido), color .8s;
  user-select: none;
  transform: translateY(4%);
}
.amp:hover {
  font-variation-settings: "opsz" 144, "wght" 620, "SOFT" 100, "WONK" 1;
  color: var(--rosso);
}
.amp-nota { padding: 8vh 0; }

/* ============================================================
   07 · COLOPHON
   ============================================================ */
#colophon {
  position: relative;
  padding: 16vh var(--gutter) 0;
  background: var(--inchiostro);
  color: var(--carta);
  border-top: 6px solid var(--rosso);
}
#colophon .folio-statico { -webkit-text-stroke-color: rgba(246, 242, 234, .18); right: 2vw; }
#colophon .prosa { color: rgba(246, 242, 234, .82); }
.colophon-griglia {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 1fr);
  gap: calc(var(--gutter) * 1.5);
  max-width: 1400px;
  align-items: start;
}
.colophon-titolo {
  font-size: clamp(56px, 7vw, 128px);
  font-weight: 620;
}
.colophon-scheda {
  font-family: var(--grotesk);
  font-size: 14px; line-height: 1.65;
  border-top: 1px solid rgba(246, 242, 234, .25);
}
.colophon-scheda > div {
  display: grid; grid-template-columns: 130px 1fr; gap: 1.5em;
  padding: 1.2em 0;
  border-bottom: 1px solid rgba(246, 242, 234, .25);
}
.colophon-scheda dt {
  font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--rosso);
  padding-top: .25em;
}
.colophon-scheda dd { color: rgba(246, 242, 234, .82); }
.colophon-scheda code {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: .92em;
  border: 1px solid rgba(246, 242, 234, .3);
  padding: 0 .35em;
}
.piede {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10vh;
  padding: 2em 0 2.2em;
  border-top: 1px solid rgba(246, 242, 234, .25);
  font-family: var(--grotesk);
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
}
.link-galleria { color: var(--carta); text-decoration: none; font-weight: 700; }
.link-galleria:hover { color: var(--rosso); }
.firma { color: rgba(246, 242, 234, .5); }

/* ============================================================
   RESPONSIVE 1024–1920
   ============================================================ */
@media (max-width: 1150px) {
  .anatomia-griglia { grid-template-columns: 44% 56%; }
  .glifo { font-size: min(66vh, 32vw); }
  .peso-griglia { grid-template-columns: minmax(300px, 42%) 1fr; }
  .notizia[data-stile="1910"] .n-corpo { columns: 2; }
}

/* ============================================================
   REDUCED MOTION — versione statica leggibile
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  #apertura, #anatomia, #peso { height: auto; }
  #apertura .scena, #anatomia .scena, #peso .scena {
    position: static; height: auto; min-height: 100vh; overflow: visible;
    padding-top: 8vh; padding-bottom: 8vh;
  }
  .testata span { transform: none !important; }
  .etichetta { opacity: 1; transform: none; }
  .lente { display: none; }
  .avanzamento { display: none; }
  .glifo-box { height: auto; min-height: 60vh; }
  .peso-parola { font-variation-settings: "opsz" 144, "wght" 620, "SOFT" 0, "WONK" 0; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}