@charset "utf-8";

/* ==========================================================================
   indriax.com  ·  foglio di stile unico
   Registro: carta stampata / composizione tipografica.
   Base tema: Typewolf (parchment rose + inchiostro bruno).
   Adattamento: la rosa spenta resta ai filetti, la rubrica passa al carminio.
   ========================================================================== */

:root {
  /* --- carta e inchiostri --- */
  --carta:        #f4efee;   /* fondo pagina, rosa cenere */
  --lastra:       #fdfbfb;   /* piatto su cui è incollato l'esemplare */
  --carta-scura:  #ebe3e2;   /* fascia di stacco */
  --inchiostro:   #382a2d;   /* testo corrente */
  --noce:         #6b5054;   /* testo secondario, didascalie */
  --filo:         #d5cacb;   /* filetti */
  --filo-tenue:   #e4dbdb;
  --rosa:         #916a70;   /* rosa spenta del tema: bordi, enfasi quieta */
  --rubrica:      #a3223f;   /* unico accento: numeri di voce, note, richiami */

  /* --- caratteri --- */
  --antiqua: "Frank Ruhl Libre", "Times New Roman", Georgia, serif;
  --gotico:  "Fira Sans Condensed", "Helvetica Neue", Arial, sans-serif;

  /* --- misure fluide --- */
  --margine:  clamp(18px, 5.2vw, 76px);
  --colonna:  66ch;
  --passo-s:  clamp(14px, 2.2vw, 22px);
  --passo-m:  clamp(28px, 4.4vw, 52px);
  --passo-l:  clamp(52px, 8vw, 104px);

  --t-micro:  clamp(11px, .68rem + .12vw, 13px);
  --t-piede:  clamp(13px, .78rem + .16vw, 15px);
  --t-testo:  clamp(16.5px, .98rem + .22vw, 19px);
  --t-occhio: clamp(19px, 1.05rem + .5vw, 24px);
  --t-voce:   clamp(26px, 1.3rem + 2.1vw, 46px);
  --t-titolo: clamp(34px, 1.4rem + 4.3vw, 78px);

  /* curve: le predefinite del browser sono troppo molli */
  --uscita:  cubic-bezier(.23, 1, .32, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--antiqua);
  font-size: var(--t-testo);
  line-height: 1.62;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* fibra della carta: un solo strato fisso, mai su contenitori che scorrono */
.fibra {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(145,106,112,.055) 0 1px, transparent 1.6px),
    radial-gradient(circle at 68% 74%, rgba(56,42,45,.045) 0 1px, transparent 1.6px),
    radial-gradient(circle at 41% 89%, rgba(145,106,112,.04) 0 1px, transparent 1.4px);
  background-size: 37px 41px, 53px 47px, 29px 61px;
}

/* --- tipografia di base ------------------------------------------------ */

h1, h2, h3, h4 {
  font-family: var(--antiqua);
  font-weight: 700;
  line-height: 1.14;
  margin: 0;
  letter-spacing: -.012em;
}
p { margin: 0 0 .9em; hyphens: auto; }
p:last-child { margin-bottom: 0; }

a { color: var(--inchiostro); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--rubrica); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--rubrica);
  outline-offset: 3px;
}

img { max-width: 100%; height: auto; display: block; }

.etichetta {
  font-family: var(--gotico);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--noce);
  margin: 0 0 var(--passo-s);
}


.salta {
  position: absolute; left: var(--margine); top: -60px; z-index: 90;
  background: var(--inchiostro); color: var(--carta);
  padding: 10px 16px; font-family: var(--gotico); font-size: 14px;
  transition: top .18s ease;
}
.salta:focus { top: 10px; }

/* --- testata ----------------------------------------------------------- */

.testata {
  border-bottom: 1px solid var(--filo);
  padding: clamp(14px, 2.4vw, 22px) var(--margine);
  display: flex;
  align-items: baseline;
  gap: var(--passo-s);
  flex-wrap: wrap;
  background: var(--carta);
}
.marchio {
  font-family: var(--antiqua);
  font-weight: 700;
  font-size: clamp(21px, 1.1rem + .8vw, 28px);
  letter-spacing: -.02em;
  text-decoration: none;
  line-height: 1;
}
.marchio span { color: var(--rubrica); }
.sottotesta {
  font-family: var(--gotico);
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--noce);
}

.bussola { margin-left: auto; }
.bussola ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: clamp(12px, 1.8vw, 26px); flex-wrap: wrap;
}
.bussola a {
  font-family: var(--gotico);
  font-size: var(--t-piede);
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--noce);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.bussola a:hover,
.bussola a[aria-current="page"] { color: var(--inchiostro); border-bottom-color: var(--rubrica); }

.apri-bussola {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--filo);
  color: var(--inchiostro);
  font-family: var(--gotico);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 8px 13px;
  cursor: pointer;
}
@media (max-width: 800px) {
  .apri-bussola { display: block; }
  .bussola { flex-basis: 100%; margin-left: 0; display: none; }
  .bussola.aperta { display: block; }
  .bussola ul { flex-direction: column; gap: 0; padding-top: 12px; }
  .bussola li { border-top: 1px solid var(--filo-tenue); }
  .bussola a { display: block; padding: 12px 0; border-bottom: 0; }
}

/* --- struttura delle sezioni ------------------------------------------- */

.foglio { padding: var(--passo-l) var(--margine); }
.foglio + .foglio { border-top: 1px solid var(--filo-tenue); }
.foglio--stacco { background: var(--carta-scura); border-top-color: var(--filo); }

.capo {
  font-size: var(--t-voce);
  max-width: 20ch;
  margin-bottom: var(--passo-m);
}

/* --- frontespizio ------------------------------------------------------ */

.frontespizio {
  padding: clamp(38px, 6vw, 84px) var(--margine) var(--passo-l);
  display: grid;
  gap: var(--passo-m);
  align-items: end;
  grid-template-columns: 1fr;
}
@media (min-width: 940px) {
  .frontespizio { grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); }
}
.frontespizio h1 {
  font-size: var(--t-titolo);
  line-height: 1.02;
  letter-spacing: -.028em;
  max-width: 15ch;
}
.frontespizio h1 em { font-style: italic; color: var(--rubrica); }
.occhiello {
  font-size: var(--t-occhio);
  line-height: 1.45;
  color: var(--noce);
  max-width: 46ch;
  margin: var(--passo-s) 0 0;
}
.riga-fiducia {
  font-family: var(--gotico);
  font-size: var(--t-piede);
  letter-spacing: .04em;
  color: var(--noce);
  border-left: 2px solid var(--rubrica);
  padding-left: 12px;
  margin-top: var(--passo-m);
  max-width: 44ch;
}
.provini {
  margin: 0 0 var(--passo-s);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.provini img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--filo);
  background: var(--lastra);
}
.provini img:first-child { transform: rotate(-1.2deg); }
.provini img:nth-child(2) { transform: rotate(1.2deg); }
.provini figcaption {
  grid-column: 1 / -1;
  font-family: var(--gotico);
  font-size: var(--t-micro);
  letter-spacing: .06em;
  color: var(--noce);
  margin-top: 4px;
}
.colofone {
  border-top: 1px solid var(--filo);
  padding-top: var(--passo-s);
  font-family: var(--gotico);
  font-size: var(--t-piede);
  color: var(--noce);
}
.colofone dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; }
.colofone dt { letter-spacing: .12em; text-transform: uppercase; font-size: var(--t-micro); padding-top: 2px; }
.colofone dd { margin: 0; color: var(--inchiostro); }

/* --- bottoni ----------------------------------------------------------- */

.bottone {
  display: inline-block;
  font-family: var(--gotico);
  font-size: var(--t-piede);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 22px;
  border: 1px solid var(--inchiostro);
  background: var(--inchiostro);
  color: var(--carta);
  cursor: pointer;
  transition: transform 140ms var(--uscita), background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.bottone:active { transform: translateY(1px); }
.bottone--filo { background: transparent; color: var(--inchiostro); border-color: var(--rosa); }

/* l'hover si accende solo dove esiste davvero un puntatore */
@media (hover: hover) and (pointer: fine) {
  .bottone:hover { background: var(--rubrica); border-color: var(--rubrica); color: #fff; }
  .bottone--filo:hover { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--carta); }
}

/* --- leggìo: comando di sfogliatura (solo con JS) ---------------------- */

.leggio { display: none; }
.js .leggio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px var(--passo-s);
  border-top: 1px solid var(--filo);
  border-bottom: 1px solid var(--filo);
  padding: 12px 0;
  margin-bottom: var(--passo-m);
}
.leggio__indice { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.leggio__indice button {
  font-family: var(--gotico);
  font-size: var(--t-piede);
  font-weight: 600;
  letter-spacing: .12em;
  background: transparent;
  border: 1px solid var(--filo);
  color: var(--noce);
  padding: 7px 13px;
  cursor: pointer;
  min-height: 44px;
  transition: color 160ms ease, border-color 160ms ease, transform 140ms var(--uscita);
}
.leggio__indice button:active,
.leggio__sfoglia button:active:not(:disabled) { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .leggio__indice button:hover { color: var(--inchiostro); border-color: var(--rosa); }
  .leggio__sfoglia button:hover:not(:disabled) { border-color: var(--rosa); }
}
.leggio__indice button[aria-selected="true"] {
  color: var(--rubrica);
  border-color: var(--rubrica);
  background: var(--lastra);
}
.leggio__sfoglia { margin-left: auto; display: flex; gap: 8px; }
.leggio__sfoglia button {
  font-family: var(--gotico);
  font-size: var(--t-piede);
  letter-spacing: .08em;
  background: transparent;
  border: 1px solid var(--filo);
  color: var(--inchiostro);
  padding: 7px 15px;
  min-height: 44px;
  cursor: pointer;
  transition: border-color 160ms ease, transform 140ms var(--uscita);
}
.leggio__sfoglia button:disabled { color: var(--filo); cursor: default; }

/* --- la voce: composizione a due metà ---------------------------------- */

.voce {
  display: grid;
  gap: var(--passo-m);
  grid-template-columns: 1fr;
  padding-top: var(--passo-m);
  border-top: 1px solid var(--filo-tenue);
}
.voce:first-of-type { border-top: 0; padding-top: 0; }
.js .voce { border-top: 0; padding-top: 0; }
.js .voce[hidden] { display: none; }

/* i rapporti fra le due metà cambiano da voce a voce: la raccolta non è una tabella */
@media (min-width: 900px) {
  .voce { gap: clamp(32px, 3.6vw, 60px); align-items: start; }
  .voce--i   { grid-template-columns: 42fr 58fr; }
  .voce--ii  { grid-template-columns: 45fr 55fr; }
  .voce--iii { grid-template-columns: 33fr 67fr; }
  .voce--iv  { grid-template-columns: 52fr 48fr; }
  .voce--v   { grid-template-columns: 62fr 38fr; }

  /* due voci su cinque tengono l'esemplare a destra */
  .voce--ii .voce__esemplare,
  .voce--iv .voce__esemplare { order: 2; }
}

.voce__esemplare { min-width: 0; }
.voce__descrizione { min-width: 0; }

.folio {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--gotico);
  font-size: var(--t-micro);
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--noce);
  border-bottom: 1px solid var(--filo);
  padding-bottom: 8px;
  margin-bottom: var(--passo-s);
}
.folio__numero {
  font-weight: 700;
  color: var(--rubrica);
  letter-spacing: .13em;
}
.folio__genere { margin-left: auto; text-align: right; letter-spacing: .1em; }

.voce__plate {
  margin: 0 0 var(--passo-s);
  background: var(--lastra);
  padding: 10px 10px 0;
  border: 1px solid var(--filo);
  box-shadow: rgba(145, 106, 112, .15) 0 6px 24px 0;
}
.voce__plate img { width: 100%; }
.voce__plate figcaption {
  font-family: var(--gotico);
  font-size: var(--t-micro);
  line-height: 1.45;
  color: var(--noce);
  padding: 9px 2px 10px;
}

/* scheda dei campi ricorrenti */
.scheda { margin: 0; font-family: var(--gotico); font-size: var(--t-piede); }
.scheda > div {
  display: grid;
  grid-template-columns: 8.5em 1fr;
  gap: 4px 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--filo-tenue);
}
.scheda > div:first-child { border-top: 1px solid var(--filo); }
.scheda dt {
  font-size: var(--t-micro);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--noce);
  padding-top: 2px;
}
.scheda dd { margin: 0; font-variant-numeric: tabular-nums; }
.scheda .assente { color: var(--rosa); }

.voce__descrizione h3 {
  font-size: var(--t-voce);
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
/* Riga dei dati sotto il titolo: le voci si separano con un filetto, non con
   una fila di punti medi. */
.voce__dati {
  list-style: none;
  margin: 0 0 var(--passo-s);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  row-gap: 4px;
  font-family: var(--gotico);
  font-size: var(--t-piede);
  line-height: 1.3;
  color: var(--noce);
  border-bottom: 1px solid var(--filo-tenue);
  padding-bottom: var(--passo-s);
}
.voce__dati li { padding: 0 11px; border-left: 1px solid var(--filo); }
.voce__dati li:first-child { padding-left: 0; border-left: 0; }
.voce__dati b { font-weight: 600; color: var(--inchiostro); font-variant-numeric: tabular-nums; }
.voce__descrizione p { max-width: 62ch; }

.nota {
  border-left: 2px solid var(--rubrica);
  padding: 2px 0 2px 16px;
  margin-top: var(--passo-s);
  max-width: 58ch;
}
.nota b {
  display: block;
  font-family: var(--gotico);
  font-weight: 700;
  font-size: var(--t-micro);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--rubrica);
  margin-bottom: 4px;
}

.negozi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--passo-m); }
.negozi .bottone { padding: 11px 18px; }

/* --- tavola comparativa ------------------------------------------------ */

.tavola { margin-top: var(--passo-m); }
.tavola__asse {
  display: grid;
  grid-template-columns: minmax(9.5em, 15em) 1fr;
  gap: 0 clamp(12px, 2vw, 24px);
  font-family: var(--gotico);
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--noce);
  border-bottom: 1px solid var(--filo);
  padding-bottom: 6px;
}
.tavola__anni { display: flex; justify-content: space-between; }

.tavola__riga {
  display: grid;
  grid-template-columns: minmax(9.5em, 15em) 1fr;
  gap: 6px clamp(12px, 2vw, 24px);
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--filo-tenue);
}
.tavola__nome { font-family: var(--gotico); font-size: var(--t-piede); line-height: 1.3; }
.tavola__nome small { display: block; font-size: var(--t-micro); color: var(--noce); letter-spacing: .04em; }

.tavola__pista {
  position: relative;
  height: 30px;
  border-left: 1px solid var(--filo-tenue);
  border-right: 1px solid var(--filo-tenue);
}
.tavola__segno {
  position: absolute;
  top: 50%;
  width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px;
  background: var(--inchiostro);
}
/* Il segno vuoto si distingue dal pieno per la forma, non per il colore: sull'asse
   restano due soli inchiostri, quello del testo e la rubrica dell'annotazione. */
.tavola__segno--play { background: transparent; border: 1.5px solid var(--inchiostro); }
.tavola__scarto {
  position: absolute;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  background: repeating-linear-gradient(90deg, var(--rubrica) 0 5px, transparent 5px 9px);
}
.tavola__etichetta {
  position: absolute;
  top: 50%;
  transform: translateY(-160%);
  font-family: var(--gotico);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rubrica);
  white-space: nowrap;
}
.tavola__ignoto {
  font-family: var(--gotico);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rosa);
  align-self: center;
}

.legenda {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-family: var(--gotico); font-size: var(--t-piede); color: var(--noce);
  margin-top: var(--passo-s);
}
.legenda span { display: flex; align-items: center; gap: 8px; }
.legenda i { width: 11px; height: 11px; background: var(--inchiostro); flex: none; }
.legenda i.vuoto { background: transparent; border: 1.5px solid var(--inchiostro); }
.legenda i.tratteggio { height: 3px; background: repeating-linear-gradient(90deg, var(--rubrica) 0 5px, transparent 5px 9px); }

@media (max-width: 700px) {
  .tavola__asse, .tavola__riga { grid-template-columns: 1fr; }
  .tavola__asse { gap: 6px; }
}

/* --- prosa lunga, elenchi, domande ------------------------------------- */

.prosa { max-width: var(--colonna); }
.prosa h3 {
  font-size: clamp(20px, 1rem + .8vw, 26px);
  margin: var(--passo-m) 0 .4em;
}
.prosa ul, .prosa ol { padding-left: 1.15em; margin: 0 0 1em; }
.prosa li { margin-bottom: .5em; }

.respinte { list-style: none; padding: 0; margin: var(--passo-m) 0 0; max-width: 72ch; }
.respinte li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--filo-tenue);
}
.respinte li:first-child { border-top: 1px solid var(--filo); }
.respinte b { font-family: var(--gotico); font-weight: 600; letter-spacing: .02em; }
.respinte span { font-family: var(--gotico); font-size: var(--t-piede); color: var(--rubrica); }
@media (min-width: 720px) { .respinte li { grid-template-columns: 20em 1fr; align-items: baseline; } }

.domande { margin-top: var(--passo-m); max-width: 68ch; }
.domande > div { border-bottom: 1px solid var(--filo-tenue); padding: var(--passo-s) 0; }
.domande > div:first-child { border-top: 1px solid var(--filo); }
.domande h3 {
  font-size: clamp(17px, .95rem + .35vw, 21px);
  margin-bottom: .35em;
}
.domande p { color: var(--noce); }

/* --- margini: modulo di iscrizione ------------------------------------- */

.margini {
  display: grid;
  gap: var(--passo-l);
  grid-template-columns: 1fr;
}
@media (min-width: 980px) { .margini { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 5vw, 88px); } }

.modulo {
  background: var(--lastra);
  border: 1px solid var(--filo);
  padding: clamp(20px, 3vw, 34px);
}
.modulo h3 { font-size: clamp(20px, 1rem + .9vw, 27px); margin-bottom: .4em; }
.modulo > p { color: var(--noce); font-size: var(--t-piede); font-family: var(--gotico); }

.campo { margin-top: var(--passo-s); }
.campo label {
  display: block;
  font-family: var(--gotico);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--noce);
  margin-bottom: 6px;
}
.campo input[type="text"],
.campo input[type="email"],
.campo textarea {
  width: 100%;
  font-family: var(--antiqua);
  font-size: 16px;
  color: var(--inchiostro);
  background: var(--carta);
  border: 1px solid var(--rosa);
  border-radius: 0;
  padding: 11px 12px;
  min-height: 46px;
}
.campo textarea { min-height: 130px; line-height: 1.5; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: #8d7a7d; }

.consenso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin-top: var(--passo-s);
  font-family: var(--gotico);
  font-size: var(--t-piede);
  line-height: 1.45;
  color: var(--noce);
}
.consenso input { width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--rubrica); }

.esito {
  margin-top: var(--passo-s);
  font-family: var(--gotico);
  font-size: var(--t-piede);
  border-left: 2px solid var(--rubrica);
  padding-left: 12px;
  color: var(--inchiostro);
}
.esito[hidden] { display: none; }

/* --- piede ------------------------------------------------------------- */

.piede {
  border-top: 1px solid var(--filo);
  background: var(--carta-scura);
  padding: var(--passo-l) var(--margine) var(--passo-m);
  font-family: var(--gotico);
  font-size: var(--t-piede);
  color: var(--noce);
}
.piede__griglia {
  display: grid;
  gap: var(--passo-m);
  grid-template-columns: 1fr;
}
@media (min-width: 780px) { .piede__griglia { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); } }
.piede h2 {
  font-family: var(--gotico);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--noce);
  margin-bottom: 12px;
}
.piede ul { list-style: none; margin: 0; padding: 0; }
.piede li { margin-bottom: 8px; }
.piede a { color: var(--inchiostro); }
.piede p { max-width: 44ch; margin-bottom: .7em; }
.piede__insegna {
  font-family: var(--antiqua);
  font-size: clamp(20px, 1.1rem + .6vw, 26px);
  font-weight: 700;
  color: var(--inchiostro);
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
.piede__insegna span { color: var(--rubrica); }
.disclaimer {
  margin-top: var(--passo-m);
  padding-top: var(--passo-s);
  border-top: 1px solid var(--filo);
  font-size: var(--t-micro);
  line-height: 1.55;
  color: var(--noce);
  max-width: 92ch;
}
.copyright { margin-top: 12px; font-size: var(--t-micro); letter-spacing: .05em; }

/* --- pagina di errore e ringraziamento --------------------------------- */

.stretta {
  padding: clamp(60px, 12vw, 150px) var(--margine);
  max-width: 62ch;
}
.stretta h1 { font-size: var(--t-titolo); line-height: 1.04; letter-spacing: -.028em; }
.stretta p { margin-top: var(--passo-s); color: var(--noce); font-size: var(--t-occhio); }
.stretta .bottone { margin-top: var(--passo-m); }

/* --- pagine legali ----------------------------------------------------- */

.legale { padding: var(--passo-l) var(--margine); }
.legale h1 { font-size: clamp(28px, 1.3rem + 2.4vw, 50px); max-width: 22ch; }
.legale .aggiornato {
  font-family: var(--gotico); font-size: var(--t-piede); color: var(--noce);
  margin: var(--passo-s) 0 var(--passo-m);
  padding-bottom: var(--passo-s); border-bottom: 1px solid var(--filo);
}
.legale h2 {
  font-size: clamp(19px, 1rem + .7vw, 25px);
  margin: var(--passo-m) 0 .45em;
  max-width: 34ch;
}
.legale h3 { font-size: clamp(17px, .95rem + .3vw, 20px); margin: var(--passo-s) 0 .35em; }
.legale p, .legale li { max-width: var(--colonna); }
.legale ul { padding-left: 1.15em; }
.legale li { margin-bottom: .5em; }

/* ==========================================================================
   Movimento. Tutto ciò che nasconde è agganciato a html.js: senza script la
   pagina resta intera. Con moto ridotto ogni cosa è già al suo posto.
   ========================================================================== */

.js [data-rivela] { opacity: 0; transform: translateY(10px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-rivela] { opacity: 1; transform: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}