/* Liquiscope, il sito di presentazione. Carta quasi nera, inchiostro color osso, un solo colore di
   segnale (l'arancio del prezzo). Instrument Serif per i titoli, IBM Plex Sans per il testo, IBM
   Plex Mono per i numeri e le didascalie. Niente stili in linea: la CSP li blocca. */

@font-face {
  font-family: "Instrument Serif";
  src: url("/font/instrument-serif.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/font/instrument-serif-corsivo.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/font/plex-sans.woff") format("woff");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/font/plex-mono.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --carta: #0b0b0a;
  --carta-2: #11110f;
  --carta-3: #181815;
  --inchiostro: #efece4;
  --inchiostro-2: #bdb9af;
  --grigio: #8d897f;
  --filo: #2a2925;
  --filo-2: #3b3934;
  --segnale: #ff5b24;
  --segnale-tenue: rgba(255, 91, 36, 0.14);
  --compra: #7dbb95;
  --vende: #f2643a;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --margine: clamp(16px, 4.4vw, 64px);
  --largo: 1360px;
  --testata: 64px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--testata) + 12px);
}
body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font: 400 17px/1.6 var(--sans);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, h4, ol, ul, figure, dl, dd, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
::selection { background: var(--segnale); color: var(--carta); }
:focus-visible { outline: 1.5px solid var(--segnale); outline-offset: 3px; border-radius: 2px; }

.salta {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 8px 14px;
  background: var(--inchiostro);
  color: var(--carta);
  font: 500 14px/1 var(--sans);
  text-decoration: none;
}
.salta:focus { top: 12px; }

.contenitore {
  width: 100%;
  max-width: calc(var(--largo) + 2 * var(--margine));
  margin: 0 auto;
  padding: 0 var(--margine);
}

/* le scritte piccole in maiuscoletto: occhielli, didascalie, etichette */
.etichetta, .occhiello, .tav-numero, .fonte, .dato dt {
  font: 400 11.5px/1.5 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--grigio);
}
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.arancio { color: var(--segnale); }

/* ———————————————————————— testata */

.testata {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--testata);
  transition: background-color 0.35s ease, border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}
.testata.piena {
  background: rgba(11, 11, 10, 0.88);
  border-bottom-color: var(--filo);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.testata-riga {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.marchio {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  font: 400 27px/1 var(--serif);
  letter-spacing: -0.01em;
  color: var(--inchiostro);
}
.menu {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font: 400 13.5px/1 var(--sans);
}
.menu a {
  color: var(--inchiostro-2);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.menu a:hover { color: var(--inchiostro); border-bottom-color: var(--filo-2); }
.accedi {
  font: 500 13.5px/1 var(--sans);
  color: var(--carta);
  background: var(--inchiostro);
  text-decoration: none;
  padding: 10px 16px 10px;
  border-radius: 2px;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}
.accedi:hover { background: #fff; }

/* ———————————————————————— il palco: il rilievo fermo dietro all'apertura e al racconto */

.palco { position: relative; }
.scena {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  margin-bottom: -100vh;
  margin-bottom: -100svh;
  overflow: hidden;
  background: var(--carta);
}
.tela { width: 100%; height: 100%; }
.locandina-cornice { display: contents; }
.locandina {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}
.locandina { display: none; }
/* la locandina solo dove manca WebGL 2 */
.senza-rilievo .locandina { display: block; }
.scena.mira { cursor: crosshair; }
/* un'ombra a sinistra dietro al testo dell'apertura; lo script la spegne mentre si scorre (--apertura) */
.scena::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--apertura, 1);
  background: linear-gradient(90deg, rgba(11, 11, 10, 0.86) 0%, rgba(11, 11, 10, 0.62) 30%, rgba(11, 11, 10, 0) 62%);
}
/* un'ombra in alto e in basso, perché la testata e la didascalia si leggano sopra le creste */
.scena::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11, 11, 10, 0.55) 0%, rgba(11, 11, 10, 0) 22%),
    linear-gradient(0deg, rgba(11, 11, 10, 0.9) 0%, rgba(11, 11, 10, 0) 26%);
}
.etichette { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.segno {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  will-change: transform, opacity;
}
.segno-punto {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--segnale);
  background: var(--carta);
}
.segno-asta {
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 1px;
  height: 46px;
  background: linear-gradient(0deg, var(--segnale), rgba(255, 91, 36, 0.15));
}
.segno-testo {
  position: absolute;
  left: 10px;
  bottom: 40px;
  white-space: nowrap;
  font: 400 12px/1.35 var(--mono);
  color: var(--inchiostro);
  letter-spacing: 0.02em;
  /* un alone del colore della carta, perché il testo si legga sopra le creste */
  text-shadow: 0 0 1px var(--carta), 0 0 2px var(--carta), 0 0 3px var(--carta), 0 0 5px var(--carta), 0 0 9px var(--carta);
}
.segno-testo b { display: block; font-weight: 400; color: var(--segnale); }
.segno.a-sinistra .segno-testo { left: auto; right: 10px; text-align: right; }
.segno.alto .segno-asta { height: 84px; }
.segno.alto .segno-testo { bottom: 78px; }
.segno.sotto .segno-asta { bottom: auto; top: 6px; background: linear-gradient(180deg, var(--segnale), rgba(255, 91, 36, 0.15)); }
.segno.sotto .segno-testo { bottom: auto; top: 40px; }

/* la lettura del rilievo sotto il puntatore */
.lettura {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  font: 400 11.5px/1.45 var(--mono);
  color: var(--inchiostro);
  white-space: nowrap;
}
.lettura.vista { opacity: 1; }
.lettura-croce {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border: 1px solid var(--inchiostro);
  border-radius: 50%;
}
.lettura-testo {
  position: absolute;
  left: 14px;
  top: -30px;
  padding: 6px 9px 6px;
  background: rgba(11, 11, 10, 0.86);
  border: 1px solid var(--filo-2);
}
.lettura-testo > span { display: block; }
.lettura-testo b { font-weight: 400; }
.lettura-testo i { font-style: normal; color: var(--grigio); }
.lettura.a-sinistra .lettura-testo { left: auto; right: 14px; }

/* ———————————————————————— apertura */

.apertura {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  pointer-events: none;
}
.apertura a, .apertura button { pointer-events: auto; }
.apertura-testo { padding-top: calc(var(--testata) + clamp(32px, 9vh, 120px)); }
.apertura .occhiello { margin-bottom: 26px; color: var(--inchiostro-2); }
.apertura .occhiello .arancio { color: var(--segnale); }
h1 {
  font: 400 clamp(50px, 8.1vw, 128px)/0.92 var(--serif);
  letter-spacing: -0.018em;
  text-wrap: balance;
}
h1 em, h2 em { font-style: italic; color: var(--inchiostro-2); }
/* il titolo sale riga per riga da sotto una maschera; in CSS, così non lampeggia prima dello script */
.riga-h { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.riga-h > * { display: block; animation: sale-su 1.2s cubic-bezier(0.16, 0.84, 0.24, 1) 0.15s both; }
.riga-h + .riga-h > * { animation-delay: 0.27s; }
.apertura .occhiello { animation: compare 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s both; }
.apertura-sotto { animation: compare 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s both; }
.azioni { animation: compare 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.7s both; }
.apertura-piede { animation: compare 1s cubic-bezier(0.2, 0.7, 0.2, 1) 1.1s both; }
@keyframes sale-su { from { transform: translateY(108%); } }
@keyframes compare { from { opacity: 0; transform: translateY(12px); } }
/* le righe dei titoli delle sezioni, divise da SplitText: la maschera lascia spazio alle discendenti */
.riga-mask { padding-bottom: 0.14em; margin-bottom: -0.14em; }
.apertura-sotto {
  max-width: 34em;
  margin-top: 30px;
  font: 300 clamp(17px, 1.45vw, 20px)/1.55 var(--sans);
  color: var(--inchiostro-2);
}
.apertura-sotto b { font-weight: 500; color: var(--inchiostro); }
.azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 30px;
  margin-top: 38px;
}
.bottone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 500 15px/1 var(--sans);
  color: var(--carta);
  background: var(--inchiostro);
  padding: 16px 22px 16px;
  border-radius: 2px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.bottone:hover { background: #fff; }
.bottone .freccia { transition: transform 0.25s ease; }
.bottone:hover .freccia { transform: translateX(3px); }
.collegamento {
  font: 400 15px/1 var(--sans);
  color: var(--inchiostro);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid var(--filo-2);
  transition: border-color 0.2s ease;
}
.collegamento:hover { border-bottom-color: var(--segnale); }
.apertura-piede {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: clamp(20px, 4vh, 40px);
}
.didascalia {
  max-width: 560px;
  font: 400 12px/1.55 var(--mono);
  color: var(--grigio);
}
.didascalia b { font-weight: 400; color: var(--inchiostro-2); }
.didascalia .arancio { color: var(--segnale); }
.scorri {
  font: 400 11.5px/1 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--grigio);
  white-space: nowrap;
}
.scorri-riga {
  display: inline-block;
  width: 1px;
  height: 34px;
  margin-left: 12px;
  vertical-align: middle;
  background: linear-gradient(180deg, var(--grigio), transparent);
}

/* ———————————————————————— il racconto, passo per passo */

.racconto { position: relative; z-index: 3; pointer-events: none; }
.passo {
  min-height: 130vh;
  min-height: 130svh;
  display: flex;
  align-items: center;
}
.passo:last-child { min-height: 150vh; min-height: 150svh; }
.passo-carta {
  pointer-events: auto;
  width: min(430px, 100%);
  padding: 28px 30px 30px;
  background: rgba(11, 11, 10, 0.82);
  border: 1px solid var(--filo);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.passo-ora {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--grigio);
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--filo);
}
.passo-ora .arancio { color: var(--segnale); }
.passo h3 {
  font: 400 clamp(30px, 2.7vw, 40px)/1.04 var(--serif);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  text-wrap: balance;
}
.passo p { font-size: 15.5px; line-height: 1.6; color: var(--inchiostro-2); }
.passo p + p { margin-top: 10px; }
.passo p b { font-weight: 500; color: var(--inchiostro); }
.passo-dati {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 4px 26px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--filo);
}
.dato dt { font-size: 10.5px; }
.dato dd { font: 400 19px/1.25 var(--mono); font-variant-numeric: tabular-nums; color: var(--inchiostro); letter-spacing: -0.02em; }
.dato dd small { font-size: 12px; color: var(--grigio); margin-left: 2px; }
.dato dd.vende { color: var(--vende); }
.dato dd.compra { color: var(--compra); }
.passo p .compra-testo { color: var(--compra); }
.passo p .vende-testo { color: var(--vende); }

/* ———————————————————————— sezioni */

.sezione {
  position: relative;
  z-index: 4;
  background: var(--carta);
  padding: clamp(84px, 12vw, 168px) 0;
}
.sezione + .sezione { border-top: 1px solid var(--filo); }
.sezione-testa {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 24px 64px;
  align-items: end;
  margin-bottom: clamp(44px, 6vw, 80px);
}
.sezione-testa .occhiello { grid-column: 1 / -1; color: var(--inchiostro-2); }
.sezione-testa .occhiello::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  margin-right: 12px;
  vertical-align: middle;
  background: var(--segnale);
}
h2 {
  font: 400 clamp(40px, 5.2vw, 78px)/0.98 var(--serif);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.sezione-sotto {
  font: 300 clamp(16.5px, 1.3vw, 19px)/1.6 var(--sans);
  color: var(--inchiostro-2);
  max-width: 36em;
}
.sezione-sotto + .sezione-sotto { margin-top: 14px; }

/* ———————————————————————— Tav. I: il terminale */

.tavola-grande { margin: 0; }
.tavola-cornice {
  position: relative;
  border: 1px solid var(--filo-2);
  background: #0e0f12;
}
.tavola-cornice img { width: 100%; height: auto; }
.richiamo {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 400 11.5px/1 var(--mono);
  color: var(--carta);
  background: var(--inchiostro);
  border: 0;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(11, 11, 10, 0.55);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.richiamo:hover, .richiamo.acceso { background: var(--segnale); transform: scale(1.12); }
/* i numeri sulla foto, accanto a quello che indicano (in percentuale della foto) */
.r1 { left: 63.56%; top: 55.3%; }
.r2 { left: 57.3%; top: 24.87%; }
.r3 { left: 92.26%; top: 37.38%; }
.r4 { left: 94.7%; top: 22.73%; }
.r5 { left: 94.7%; top: 62.62%; }
.r6 { left: 94.7%; top: 67.51%; }
.r7 { left: 65.13%; top: 89.32%; }
.r8 { left: 2.2%; top: 15.1%; }
.tavola-legenda {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 32px;
  margin-top: 30px;
  counter-reset: voce;
}
.tavola-legenda li {
  position: relative;
  padding-top: 14px;
  border-top: 1px solid var(--filo);
  font-size: 14px;
  line-height: 1.55;
  color: var(--inchiostro-2);
  transition: border-color 0.2s ease;
}
.tavola-legenda li.acceso { border-top-color: var(--segnale); }
.tavola-legenda b {
  display: block;
  font: 400 21px/1.15 var(--serif);
  color: var(--inchiostro);
  margin-bottom: 6px;
}
.tavola-legenda .n { font: 400 11.5px/1 var(--mono); color: var(--segnale); margin-right: 8px; }
.tavola-didascalia {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 14px;
  font: 400 12px/1.55 var(--mono);
  color: var(--grigio);
}

/* ———————————————————————— le tavole dei dati */

.tavole {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(56px, 6vw, 96px) clamp(24px, 3vw, 48px);
}
.tav { grid-column: span 6; display: flex; flex-direction: column; }
.tav.largo { grid-column: span 12; }
.tav.sette { grid-column: span 7; }
.tav.cinque { grid-column: span 5; }
.tav-testa {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--filo-2);
  margin-bottom: 18px;
}
.tav-numero { color: var(--segnale); flex: none; }
.tav h3 { font: 400 clamp(26px, 2.2vw, 34px)/1.05 var(--serif); letter-spacing: -0.005em; }
/* il corpo è il contenitore delle container query dei disegni */
.tav-corpo { position: relative; container-type: inline-size; }
.tav figcaption { margin-top: 16px; font-size: 14.5px; line-height: 1.6; color: var(--inchiostro-2); max-width: 46em; }
.tav figcaption b { font-weight: 500; color: var(--inchiostro); }
.fonte { display: block; margin-top: 10px; text-transform: none; letter-spacing: 0.02em; font-size: 11.5px; }

/* i disegni in SVG: tutti i colori da qui */
.g-testo { font: 400 11px var(--mono); fill: var(--grigio); font-variant-numeric: tabular-nums; }
.g-testo-chiaro { font: 400 11px var(--mono); fill: var(--inchiostro-2); font-variant-numeric: tabular-nums; }
.g-testo-forte { font: 400 12px var(--mono); fill: var(--inchiostro); font-variant-numeric: tabular-nums; }
.g-testo-arancio { font: 400 11px var(--mono); fill: var(--segnale); font-variant-numeric: tabular-nums; }
.g-titoletto { font: 400 10.5px var(--mono); fill: var(--grigio); letter-spacing: 0.08em; text-transform: uppercase; }
.g-fp { font: 400 10.5px var(--mono); font-variant-numeric: tabular-nums; }
.g-griglia { stroke: var(--filo); stroke-width: 1; fill: none; shape-rendering: crispEdges; }
.g-asse { stroke: var(--filo-2); stroke-width: 1; fill: none; shape-rendering: crispEdges; }
.g-zero { stroke: var(--grigio); stroke-width: 1; stroke-dasharray: 2 3; fill: none; }
.g-linea { stroke: var(--inchiostro); stroke-width: 1.4; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.g-linea-tenue { stroke: #aaa69c; stroke-width: 1.1; fill: none; stroke-linejoin: round; }
.g-linea-grigia { stroke: #67645c; stroke-width: 1.1; fill: none; stroke-linejoin: round; }
.g-banda { fill: rgba(239, 236, 228, 0.13); }
.g-prezzo { stroke: var(--segnale); stroke-width: 1.5; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.g-compra { fill: var(--compra); }
.g-vende { fill: var(--vende); }
.g-compra-linea { stroke: var(--compra); stroke-width: 1.4; fill: none; stroke-linejoin: round; }
.g-vende-linea { stroke: var(--vende); stroke-width: 1.4; fill: none; stroke-linejoin: round; }
.g-area-compra { fill: rgba(125, 187, 149, 0.16); }
.g-area-vende { fill: rgba(242, 100, 58, 0.16); }
.g-barra { fill: var(--filo-2); }
.g-barra-va { fill: #5d5a52; }
.g-barra-poc { fill: var(--segnale); }
.g-fascia { fill: rgba(239, 236, 228, 0.045); }
.g-segnale { stroke: var(--segnale); stroke-width: 1; fill: none; }
.g-punto { fill: var(--segnale); }
.g-cella { stroke: var(--carta); stroke-width: 1.5; }
.g-cella-testo { font: 400 11px var(--sans); fill: var(--carta); }
.g-cella-testo-chiaro { font: 400 11px var(--sans); fill: var(--inchiostro); }
.g-corpo-su { fill: none; stroke: var(--compra); stroke-width: 1.2; }
.g-corpo-giu { fill: none; stroke: var(--vende); stroke-width: 1.2; }

/* la tabella delle fonti delle liquidazioni */
.registro { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.registro th {
  font: 400 10.5px/1.4 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--grigio);
  text-align: left;
  padding: 0 16px 10px 0;
  border-bottom: 1px solid var(--filo-2);
}
.registro td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--filo);
  vertical-align: top;
  color: var(--inchiostro-2);
}
.registro td:first-child { color: var(--inchiostro); font: 400 21px/1.2 var(--serif); white-space: nowrap; }
.registro td.via { font: 400 12px/1.6 var(--mono); color: var(--inchiostro); white-space: nowrap; }
.registro .nessuna { color: var(--grigio); }

/* il codice di un indicatore */
.codice {
  margin: 0;
  padding: 22px 24px;
  background: var(--carta-2);
  border: 1px solid var(--filo);
  font: 400 13px/1.7 var(--mono);
  color: var(--inchiostro-2);
  overflow-x: auto;
  tab-size: 4;
}
.codice .c-commento { color: #6f6c64; font-style: normal; }
.codice .c-parola { color: var(--inchiostro); }
.codice .c-numero { color: #e9b38e; }
.codice .c-testo { color: var(--compra); }
.codice .c-funzione { color: var(--segnale); }

/* i grafici delle tavole: i tratti si allungano con la tavola, le scritte restano della loro grandezza */
.g-grafico { position: relative; padding-right: 64px; }
.g-grafico.g-destra-larga { padding-right: 88px; }
.g-nome {
  margin: 0 0 12px;
  font: 400 10.5px/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grigio);
}
.g-pannello { position: relative; }
.g-pannello + .g-nome { margin-top: 28px; }
.g-pannello > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.g-tempo { width: 100%; height: 28px; overflow: visible; border-top: 1px solid var(--filo-2); }
.g-nota { overflow: visible; }
.g-h-prezzo { height: 120px; }
.g-h-cvd { height: 300px; }
.g-h-squilibrio { height: 310px; }
.g-h-oi { height: 150px; }
.g-h-premio { height: 110px; }
.g-h-profilo { height: 436px; }
.g-alone { paint-order: stroke; stroke: var(--carta); stroke-width: 4px; stroke-linejoin: round; }
.g-filo { stroke: var(--segnale); stroke-width: 1; }
.g-cerchio { fill: var(--carta); stroke: var(--segnale); stroke-width: 1.5; }
/* le note con due versioni: quella larga sul computer, quella stretta sul telefono */
.g-solo-stretto { display: none; }
@container (width <= 560px) {
  .g-grafico { padding-right: 56px; }
  .g-grafico.g-destra-larga { padding-right: 80px; }
  .g-h-prezzo { height: 96px; }
  .g-h-cvd { height: 230px; }
  .g-h-squilibrio { height: 210px; }
  .g-h-oi { height: 124px; }
  .g-h-premio { height: 92px; }
  .g-h-profilo { height: 380px; }
  .g-solo-largo { display: none; }
  .g-solo-stretto { display: inline; }
}

/* Tav. II: il footprint */
.fp-scorre { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--filo-2) transparent; }
.fp {
  width: 100%;
  min-width: 540px;
  border-collapse: separate;
  border-spacing: 3px 1px;
  font: 400 11.5px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--inchiostro-2);
}
.fp th { font-weight: 400; color: var(--grigio); white-space: nowrap; }
.fp thead th { padding: 0 0 10px; font-size: 10.5px; letter-spacing: 0.06em; text-align: center; }
.fp tbody th, .fp tfoot th, .fp thead th:first-child { padding-right: 10px; text-align: right; }
.fp tbody th, .fp tfoot th, .fp thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--carta); }
.fp td { position: relative; height: 23px; padding: 0; white-space: nowrap; }
.fp td span { display: inline-block; width: 50%; }
.fp td span:first-child { padding-right: 7px; text-align: right; }
.fp td span:last-child { padding-left: 7px; }
.fp tbody td:not(:empty) {
  background-image: linear-gradient(var(--filo-2), var(--filo-2));
  background-size: 1px 9px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.fp-0 { background-color: var(--carta-2); }
.fp-c1 { background-color: rgba(125, 187, 149, 0.1); }
.fp-c2 { background-color: rgba(125, 187, 149, 0.22); color: var(--inchiostro); }
.fp-c3 { background-color: rgba(125, 187, 149, 0.42); color: var(--inchiostro); }
.fp-v1 { background-color: rgba(242, 100, 58, 0.1); }
.fp-v2 { background-color: rgba(242, 100, 58, 0.24); color: var(--inchiostro); }
.fp-v3 { background-color: rgba(242, 100, 58, 0.46); color: var(--inchiostro); }
.fp td.fp-poc { outline: 1px solid var(--inchiostro); outline-offset: -1px; }
.fp-su::before, .fp-giu::before, .fp-ombra::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: 0;
  left: 0;
  width: 3px;
}
.fp-su::before { background: var(--compra); }
.fp-giu::before { background: var(--vende); }
.fp-ombra::before { left: 1px; width: 1px; background: var(--grigio); }
.fp tfoot tr:first-child > * { padding-top: 16px; }
.fp tfoot td { height: auto; padding-top: 6px; text-align: center; color: var(--inchiostro); }
.fp tfoot td.compra { color: var(--compra); }
.fp tfoot td.vende { color: var(--vende); }

/* Tav. VII: la mappa dei perpetual (due disposizioni, e in ogni casella le scritte che ci stanno) */
.g-mappa { position: relative; }
.g-mappa-larga { aspect-ratio: 1360 / 560; }
.g-mappa-stretta { aspect-ratio: 3 / 4; display: none; }
.g-mappa > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-mappa svg svg { overflow: hidden; }
.g-cella { fill: var(--m); }
.m-r3 { --m: #f2643a; }
.m-r2 { --m: #9a4228; }
.m-r1 { --m: #5c2a1b; }
.m-0 { --m: #2a2925; }
.m-v1 { --m: #33493b; }
.m-v2 { --m: #527860; }
.m-v3 { --m: #7dbb95; }
.m-altri { --m: #1a1917; }
.m-nome-grande { font: 400 30px/1 var(--serif); fill: var(--inchiostro); }
.m-nome { font: 500 13px/1 var(--sans); fill: var(--inchiostro); }
.m-nome-piccolo { font: 500 11px/1 var(--sans); fill: var(--inchiostro); }
.m-dato { font: 400 11px/1 var(--mono); fill: var(--inchiostro-2); font-variant-numeric: tabular-nums; }
text.m-scuro { fill: var(--carta); }
@container (width < 600px) {
  .g-mappa-larga { display: none; }
  .g-mappa-stretta { display: block; }
}
@container (width < 700px) { .m-da-700 { display: none; } }
@container (width >= 700px) { .m-fino-700 { display: none; } }
@container (width < 900px) { .m-da-900 { display: none; } }
@container (width >= 900px) { .m-fino-900 { display: none; } }
@container (width < 1100px) { .m-da-1100 { display: none; } }
@container (width >= 1100px) { .m-fino-1100 { display: none; } }
@container (width < 1240px) { .m-da-1240 { display: none; } }
@container (width >= 1240px) { .m-fino-1240 { display: none; } }
@container (width < 1300px) { .m-da-1300 { display: none; } }
@container (width >= 1300px) { .m-fino-1300 { display: none; } }
@container (width < 340px) { .m-da-340 { display: none; } }
@container (width >= 340px) { .m-fino-340 { display: none; } }
@container (width < 380px) { .m-da-380 { display: none; } }
@container (width >= 380px) { .m-fino-380 { display: none; } }
@container (width < 440px) { .m-da-440 { display: none; } }
@container (width >= 440px) { .m-fino-440 { display: none; } }
@container (width < 520px) { .m-da-520 { display: none; } }
@container (width >= 520px) { .m-fino-520 { display: none; } }
.m-legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 32px;
  margin-top: 18px;
  font: 400 10.5px/10px var(--mono);
  color: var(--grigio);
  font-variant-numeric: tabular-nums;
}
.m-legenda p { letter-spacing: 0.08em; text-transform: uppercase; }
.m-legenda ol { display: flex; height: 28px; }
.m-legenda li { position: relative; width: 40px; }
.m-legenda li span { position: absolute; top: 0; left: 0; right: 1px; height: 10px; background: var(--m); }
.m-legenda li b { position: absolute; top: 17px; left: 100%; transform: translateX(-50%); font-weight: 400; }
.m-legenda-altri { display: flex; gap: 10px; }
.m-legenda-altri span { width: 22px; height: 10px; background: var(--m); box-shadow: inset 0 0 0 1px var(--filo-2); }

/* per chi legge con la voce: c'è, ma non si vede */
.nascosto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ———————————————————————— il film */

.film-tavola { margin: 0; }
.film-schermo {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--filo-2);
  background: var(--carta-2);
  overflow: hidden;
}
.film-video { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
/* la copertina sopra il video: se ne va quando il film parte e non torna (in pausa resta il fotogramma) */
.film-copertina {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.film-copertina img { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-tavola.girato .film-copertina { opacity: 0; }
/* dove lo schermo è più alto che largo (il telefono) c'è il film verticale, girato apposta */
@media (orientation: portrait) {
  .film-schermo { aspect-ratio: 4 / 5; }
}
.film-comandi {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 14px;
  font: 400 11.5px/1 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--grigio);
}
.film-bottone {
  flex: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--inchiostro);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--filo-2);
  border-radius: 0;
  padding: 6px 0;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.film-bottone:hover { border-bottom-color: var(--segnale); }
.film-tempo { flex: none; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
/* quanto del film è passato: un filo che si riempie d'arancio */
.film-corsa { position: relative; flex: 1; height: 1px; background: var(--filo-2); overflow: hidden; }
.film-corsa span { position: absolute; inset: 0; background: var(--segnale); transform-origin: 0 50%; transform: scaleX(0); }

/* ———————————————————————— mercati */

.borse {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--filo-2);
}
.borse li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px 18px 0;
  border-bottom: 1px solid var(--filo);
}
.borse li:nth-child(3n + 2), .borse li:nth-child(3n + 3) { padding-left: 24px; border-left: 1px solid var(--filo); }
.borsa { font: 400 clamp(24px, 2.2vw, 32px)/1.1 var(--serif); }
.tipi { font: 400 11.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--grigio); white-space: nowrap; }
.tipi .solo-dati { color: var(--inchiostro-2); }
.nota-mercati {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 48px;
  margin-top: 40px;
}
.nota-mercati p { font-size: 14.5px; line-height: 1.6; color: var(--inchiostro-2); }
.nota-mercati b { display: block; font: 400 12px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--inchiostro); margin-bottom: 8px; font-weight: 400; }

/* ———————————————————————— assistente */

.due {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 48px clamp(40px, 6vw, 110px);
  align-items: start;
}
.passi-elenco { margin-top: 36px; counter-reset: p; border-top: 1px solid var(--filo); }
.passi-elenco li {
  counter-increment: p;
  display: grid;
  grid-template-columns: 44px 1fr;
  padding: 16px 0;
  border-bottom: 1px solid var(--filo);
  font-size: 15.5px;
  color: var(--inchiostro-2);
}
.passi-elenco li::before { content: counter(p, decimal-leading-zero); font: 400 12px/1.9 var(--mono); color: var(--segnale); }
.passi-elenco b { font-weight: 500; color: var(--inchiostro); }
.nota { margin-top: 22px; font-size: 14px; line-height: 1.6; color: var(--grigio); }
.trascrizione {
  border: 1px solid var(--filo-2);
  background: var(--carta-2);
}
.trascrizione-testa {
  display: flex;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--filo);
  font: 400 11px/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grigio);
}
.battuta { padding: 18px 20px; border-bottom: 1px solid var(--filo); }
.battuta:last-child { border-bottom: 0; }
.chi { font: 400 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--grigio); margin-bottom: 10px; }
.battuta-tu p { font: 400 23px/1.3 var(--serif); color: var(--inchiostro); }
.chiamata {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 14px;
  margin: 2px 0 14px;
  font: 400 12.5px/1.75 var(--mono);
}
.chiamata dt { color: var(--segnale); }
.chiamata dd { color: var(--grigio); }
.battuta-ai p { font-size: 15.5px; line-height: 1.65; color: var(--inchiostro-2); }
.battuta-ai p + p { margin-top: 10px; }
.battuta-ai .num { color: var(--inchiostro); }

/* ———————————————————————— accesso */

.accesso-griglia {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 48px clamp(40px, 6vw, 110px);
  align-items: start;
}
.punti { border-top: 1px solid var(--filo); }
.punti li { padding: 20px 0; border-bottom: 1px solid var(--filo); font-size: 15.5px; color: var(--inchiostro-2); }
.punti b { display: block; font: 400 24px/1.2 var(--serif); color: var(--inchiostro); margin-bottom: 6px; font-weight: 400; }
.biglietto {
  position: relative;
  padding: 34px 34px 32px;
  border: 1px solid var(--filo-2);
  background:
    repeating-linear-gradient(0deg, rgba(239, 236, 228, 0.025) 0 1px, transparent 1px 9px),
    var(--carta-2);
}
.biglietto .etichetta { color: var(--inchiostro-2); }
.codice-invito {
  margin: 18px 0 26px;
  font: 400 clamp(22px, 2.3vw, 30px)/1.2 var(--mono);
  letter-spacing: 0.04em;
  color: var(--inchiostro);
  white-space: nowrap;
}
.codice-invito span { color: var(--grigio); }
.biglietto .bottone { width: 100%; justify-content: space-between; }
.biglietto .nota { margin-top: 18px; }

/* ———————————————————————— domande */

.domande { border-top: 1px solid var(--filo-2); }
.domande details { border-bottom: 1px solid var(--filo); }
.domande summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 22px 0;
  font: 400 clamp(22px, 2vw, 28px)/1.2 var(--serif);
  color: var(--inchiostro);
}
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after {
  content: "+";
  font: 300 22px/1 var(--mono);
  color: var(--grigio);
  transition: transform 0.25s ease, color 0.2s ease;
}
.domande details[open] summary::after { transform: rotate(45deg); color: var(--segnale); }
.domande summary:hover::after { color: var(--inchiostro); }
.domande details p { padding: 0 0 24px; max-width: 46em; font-size: 15.5px; color: var(--inchiostro-2); }

/* ———————————————————————— piede */

.piede {
  position: relative;
  z-index: 4;
  background: var(--carta);
  border-top: 1px solid var(--filo-2);
  padding: 56px 0 40px;
}
.piede-riga {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}
.piede-motto { margin-top: 10px; font-size: 14px; color: var(--grigio); max-width: 26em; }
.piede-menu { display: flex; gap: 28px; font-size: 14px; }
.piede-menu a { color: var(--inchiostro-2); text-decoration: none; }
.piede-menu a:hover { color: var(--inchiostro); }
.piede-legale {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--filo);
  font: 400 11.5px/1.6 var(--mono);
  color: var(--grigio);
}
.piede-legale p:first-child { max-width: 70em; }

/* ———————————————————————— pagina che non c'è */

.vuota {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-top: var(--testata);
  padding-bottom: 48px;
}
.vuota .occhiello { margin-bottom: 26px; color: var(--inchiostro-2); }
.vuota .occhiello::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  margin-right: 12px;
  vertical-align: middle;
  background: var(--segnale);
}
.vuota h1 { max-width: 10em; }
.vuota-testo {
  max-width: 30em;
  margin: 30px 0 38px;
  font: 300 clamp(17px, 1.45vw, 20px)/1.55 var(--sans);
  color: var(--inchiostro-2);
}

/* ———————————————————————— schermi stretti */

@media (max-width: 1100px) {
  .menu { display: none; }
  .tavola-legenda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tav, .tav.sette, .tav.cinque { grid-column: span 12; }
}
@media (max-width: 860px) {
  :root { --testata: 58px; }
  .sezione-testa, .due, .accesso-griglia { grid-template-columns: minmax(0, 1fr); }
  .borse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .borse li:nth-child(3n + 2), .borse li:nth-child(3n + 3) { padding-left: 0; border-left: 0; }
  .borse li:nth-child(2n) { padding-left: 18px; border-left: 1px solid var(--filo); }
  .nota-mercati { grid-template-columns: minmax(0, 1fr); }
  .passo { align-items: flex-end; padding-bottom: 7vh; }
  .passo-carta { width: 100%; padding: 22px 20px 22px; }
  /* sul telefono il testo dell'apertura prende tutta la larghezza: l'ombra scende dall'alto */
  .scena::before {
    background: linear-gradient(180deg, rgba(11, 11, 10, 0.8) 0%, rgba(11, 11, 10, 0.55) 42%, rgba(11, 11, 10, 0) 72%);
  }
  /* la foto del terminale resta leggibile: si scorre di lato */
  .tavola-scorre {
    overflow-x: auto;
    margin: 0 calc(-1 * var(--margine));
    padding: 0 var(--margine) 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--filo-2) transparent;
  }
  .tavola-cornice { width: 860px; }
  .piede-riga, .piede-legale { flex-direction: column; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .marchio { font-size: 25px; }
  .apertura-testo { padding-top: calc(var(--testata) + 28px); }
  .apertura-sotto { margin-top: 20px; }
  .azioni { margin-top: 26px; }
  .apertura-piede { flex-direction: column; align-items: flex-start; }
  .scorri { display: none; }
  .tavola-legenda { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .richiamo { width: 22px; height: 22px; margin: -11px 0 0 -11px; font-size: 10.5px; }
  .tavola-didascalia { flex-direction: column; gap: 6px; }
  .passo-dati { grid-template-columns: repeat(2, auto); }
  .borse { grid-template-columns: minmax(0, 1fr); }
  .borse li:nth-child(2n) { padding-left: 0; border-left: 0; }
  .biglietto { padding: 26px 20px 24px; }
  .codice-invito { font-size: 20px; }
  .registro td:first-child { font-size: 18px; }
  .registro td.via { white-space: normal; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}