/* solistructa - Almanacco delle difese
   Tavola di materiali: la pagina è il cartoncino di montaggio, i giochi sono i campioni.
   Regole: hairline, piatto, zero ombre, angoli vivi. Un solo accento materico (ossido). */

/* ---------- 1. Token ---------- */
:root {
  --board:      #e9e7e2;   /* cartoncino: fondo pagina */
  --paper:      #ffffff;   /* campione montato */
  --graphite:   #1e1e1e;   /* inchiostro strutturale */
  --pencil:     #5c5a54;   /* testo secondario, matita */
  --hairline:   #c2bfb7;   /* linee di montaggio */
  --hairline-2: #dcd9d2;   /* linee interne, più arretrate */
  --ossido:     #8f3a1c;   /* unico accento materico */
  --ossido-air: #f3e6e0;   /* velo dell'accento, per le barre */
  --lacquer:    #1e1e1e;   /* fascia scura di chiusura */

  --fs-label: clamp(9.5px, 0.28vw + 8.8px, 11px);
  --fs-micro: clamp(11.5px, 0.2vw + 11px, 13px);
  --fs-body:  clamp(15px, 0.35vw + 14px, 17px);
  --fs-lead:  clamp(17px, 0.7vw + 15px, 22px);
  --fs-h3:    clamp(19px, 0.9vw + 16px, 27px);
  --fs-h2:    clamp(26px, 2.1vw + 19px, 46px);
  --fs-h1:    clamp(34px, 5.4vw + 16px, 88px);
  --fs-num:   clamp(28px, 2.6vw + 20px, 54px);

  --gutter: clamp(16px, 5vw, 84px);
  --step-1: 8px;
  --step-2: 16px;
  --step-3: 24px;
  --step-4: 40px;
  --step-5: clamp(52px, 7vw, 96px);
  --step-6: clamp(72px, 11vw, 150px);

  --measure: 66ch;
}

/* ---------- 2. Reset minimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--board);
  color: var(--graphite);
  font-family: 'Sarabun', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: 'Merriweather', Georgia, serif; font-weight: 400; margin: 0; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
:focus-visible { outline: 2px solid var(--ossido); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- 3. Primitive della tavola ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--graphite); color: var(--paper);
  padding: 10px 18px; font-size: var(--fs-micro);
}
.skip:focus { left: 0; }

.bleed { padding-inline: var(--gutter); }

/* la testata è sticky: gli ancoraggi si fermano sotto, non sotto la testata */
:target, section[id], article[id] { scroll-margin-top: 78px; }

/* etichetta di montaggio: la voce tecnica del cartoncino */
.label {
  font-family: 'Sarabun', sans-serif;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pencil);
  line-height: 1.3;
}
.label--ink { color: var(--graphite); }
.label--ossido { color: var(--ossido); }

/* campione montato: foglio bianco con filo di contorno, spigolo vivo */
.mount {
  background: var(--paper);
  border: 1px solid var(--hairline);
  position: relative;
}
/* crocini di registro: solo sui campioni principali, dove segnano il montaggio */
.mount--pinned::before,
.mount--pinned::after {
  content: "";
  position: absolute;
  width: 9px; height: 9px;
  border: 1px solid var(--hairline);
  pointer-events: none;
}
.mount--pinned::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-width: 2px; border-color: var(--graphite); }
.mount--pinned::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-width: 2px; border-color: var(--graphite); }

/* filo di taglio orizzontale con tacche */
.rule {
  border: 0; height: 1px; background: var(--hairline);
  margin: 0;
}
.rule--ticked {
  height: 7px;
  background:
    linear-gradient(var(--hairline), var(--hairline)) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--hairline) 0 1px, transparent 1px 40px) 0 0 / 100% 7px;
}

/* ---------- 4. Bottoni: profilo sottile, nessun riempimento all'hover ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px;
  padding: 10px 22px;
  border: 1px solid var(--graphite);
  border-radius: 3px;
  background: transparent;
  color: var(--graphite);
  font-family: 'Sarabun', sans-serif;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.btn:hover { border-color: var(--ossido); color: var(--ossido); }
.btn:active { transform: translateY(1px); }
.btn--solid {
  background: var(--graphite);
  color: var(--paper);
  border-color: var(--graphite);
}
.btn--solid:hover { background: var(--ossido); border-color: var(--ossido); color: var(--paper); }
.btn--wide { width: 100%; justify-content: center; }

.link-ossido {
  color: var(--ossido);
  text-decoration: none;
  border-bottom: 1px solid var(--ossido);
  padding-bottom: 1px;
}
.link-ossido:hover { border-bottom-color: transparent; }

/* ---------- 5. Testata ---------- */
.testata {
  position: sticky; top: 0; z-index: 40;
  background: var(--board);
  border-bottom: 1px solid var(--hairline);
}
.testata__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--step-3);
  min-height: 62px;
}
.marca { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.marca__nome {
  font-family: 'Merriweather', serif;
  font-size: clamp(17px, 0.5vw + 15px, 20px);
  letter-spacing: -.01em;
}
.marca__sigla { font-size: var(--fs-label); letter-spacing: .2em; color: var(--pencil); text-transform: uppercase; }

.menu { display: none; }
.menu__list { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 30px); }
.menu a {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; color: var(--graphite);
  padding: 6px 0; border-bottom: 1px solid transparent;
}
.menu a:hover, .menu a[aria-current="page"] { border-bottom-color: var(--ossido); color: var(--ossido); }

.menu-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0 10px;
  background: transparent; border: 1px solid var(--graphite); border-radius: 3px;
  cursor: pointer;
}
.menu-toggle span { display: block; height: 1px; background: var(--graphite); }
.menu[data-open="true"] { display: block; }

@media (max-width: 899px) {
  .menu {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--board);
    border-bottom: 1px solid var(--hairline);
    padding: var(--step-2) var(--gutter) var(--step-4);
  }
  .menu__list { flex-direction: column; align-items: flex-start; gap: 0; }
  .menu__list li { width: 100%; border-bottom: 1px solid var(--hairline-2); }
  .menu a { display: block; padding: 14px 0; }
}
@media (min-width: 900px) {
  .menu { display: block; }
  .menu-toggle { display: none; }
}

/* ---------- 6. Frontespizio ---------- */
.frontespizio { padding-block: var(--step-5) var(--step-6); }
.frontespizio__grid { display: grid; gap: var(--step-4); }
.colophon {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline;
  padding-bottom: var(--step-2);
  border-bottom: 2px solid var(--graphite);
}
.colophon__anno { font-family: 'Merriweather', serif; font-size: var(--fs-h3); }
.frontespizio h1 {
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: -.028em;
  max-width: 15ch;
}
.frontespizio h1 em { font-style: italic; color: var(--ossido); }
.frontespizio__lead { font-size: var(--fs-lead); max-width: 46ch; color: var(--pencil); line-height: 1.5; }
.frontespizio__azioni { display: flex; flex-wrap: wrap; gap: var(--step-2); }
.fiducia {
  font-size: var(--fs-micro);
  color: var(--pencil);
  border-left: 2px solid var(--ossido);
  padding-left: 12px;
  max-width: 40ch;
}

/* cartellino tecnico del frontespizio: il campione stesso è l'indice */
.cartellino { padding: var(--step-3); align-self: start; }
.cartellino dl { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--step-2); }
.cartellino dt {
  font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase;
  color: var(--pencil); font-weight: 600;
  padding: 9px 0; border-bottom: 1px solid var(--hairline-2);
}
.cartellino dd {
  font-size: var(--fs-micro); text-align: right;
  padding: 9px 0; border-bottom: 1px solid var(--hairline-2);
}
.cartellino dl > :nth-last-child(-n+2) { border-bottom: 0; }

@media (min-width: 900px) {
  .frontespizio__grid { grid-template-columns: minmax(0, 1.55fr) minmax(240px, .6fr); align-items: start; gap: var(--step-6); }
  .frontespizio__testo { display: grid; gap: var(--step-3); }
}

/* ---------- 7. Sezioni ---------- */
.sezione { padding-block: var(--step-6); }
.sezione__titolo { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.02em; max-width: 20ch; }
.sezione__intro { max-width: var(--measure); color: var(--pencil); }
.testa-sezione { display: grid; gap: var(--step-2); margin-bottom: var(--step-5); }

/* Chi compila: colonna stretta di note a margine + prosa spostata */
.compilatore { display: grid; gap: var(--step-4); }
.compilatore__prosa { display: grid; gap: var(--step-3); max-width: var(--measure); }
.compilatore__prosa p:first-of-type { font-size: var(--fs-lead); line-height: 1.5; }
.scheda-firma { padding: var(--step-3); display: grid; gap: 10px; align-self: start; }
.scheda-firma__nome { font-family: 'Merriweather', serif; font-size: var(--fs-h3); line-height: 1.2; }
.scheda-firma p { font-size: var(--fs-micro); color: var(--pencil); }
@media (min-width: 900px) {
  .compilatore { grid-template-columns: minmax(220px, .5fr) minmax(0, 1.4fr); gap: var(--step-6); }
}

/* ---------- 8. Criteri: banda di legenda a tacche ---------- */
.legenda { display: grid; gap: 0; border-top: 1px solid var(--graphite); }
.criterio {
  display: grid; gap: 6px;
  padding: var(--step-3) 0;
  border-bottom: 1px solid var(--hairline);
}
.criterio__peso {
  font-family: 'Merriweather', serif;
  font-size: var(--fs-num);
  line-height: 1;
  color: var(--ossido);
  letter-spacing: -.03em;
}
.criterio__nome { font-family: 'Merriweather', serif; font-size: var(--fs-h3); }
.criterio__testo { font-size: var(--fs-micro); color: var(--pencil); max-width: 44ch; }
@media (min-width: 760px) {
  .criterio {
    grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.3fr);
    align-items: baseline;
    gap: var(--step-3);
  }
}
.calcolo {
  margin-top: var(--step-4);
  padding: var(--step-3);
  display: grid; gap: 10px;
  max-width: 62ch;
}
.calcolo__formula { font-size: var(--fs-micro); color: var(--graphite); line-height: 1.9; }
.calcolo__formula code {
  font-family: 'Sarabun', sans-serif; font-weight: 600;
  background: var(--ossido-air); padding: 2px 6px; border-radius: 2px;
}

/* ---------- 9. Classifica dell'anno (nucleo dell'almanacco) ---------- */
.classifica { background: var(--paper); border-block: 1px solid var(--graphite); }
.classifica__wrap { padding-block: var(--step-6); }
.classifica__nota { font-size: var(--fs-micro); color: var(--pencil); max-width: 60ch; margin-top: var(--step-2); }

.tavola { width: 100%; overflow-x: auto; margin-top: var(--step-4); }
.tavola table { width: 100%; border-collapse: collapse; min-width: 720px; }
.tavola caption { text-align: left; font-size: var(--fs-micro); color: var(--pencil); padding-bottom: var(--step-2); }
.tavola th, .tavola td { text-align: left; padding: var(--step-3) var(--step-2); vertical-align: baseline; }
.tavola th {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--pencil);
  border-bottom: 1px solid var(--graphite);
  padding-block: 0 12px;
}
.tavola tbody tr { border-bottom: 1px solid var(--hairline-2); }
.tavola tbody tr:last-child { border-bottom: 0; }
.tavola td:first-child, .tavola th:first-child { padding-left: 0; }
.tavola td:last-child, .tavola th:last-child { padding-right: 0; text-align: right; }

.pos { font-family: 'Merriweather', serif; font-size: var(--fs-h3); color: var(--pencil); line-height: 1; }
.pos--primo { color: var(--ossido); }
.gioco-nome { font-family: 'Merriweather', serif; font-size: clamp(16px, 0.5vw + 15px, 19px); line-height: 1.3; }
.gioco-studio { font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--pencil); margin-top: 4px; }

/* barra di solidità: misura senza binario riempito, ancorata alla base */
.solidita { display: flex; align-items: center; gap: 12px; min-width: 168px; }
.solidita__val { font-family: 'Merriweather', serif; font-size: clamp(17px, 0.5vw + 15px, 21px); line-height: 1; min-width: 3.4ch; }
.solidita__barra { flex: 1; height: 8px; background: var(--ossido-air); }
.solidita__fill { display: block; height: 100%; background: var(--ossido); border-radius: 0 4px 4px 0; }

.voto-store { font-size: var(--fs-micro); line-height: 1.45; }
.voto-store b { font-weight: 600; }
.voto-store span { color: var(--pencil); display: block; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
.cella-nota { font-size: var(--fs-micro); color: var(--pencil); }
.peso-ios { font-size: var(--fs-micro); white-space: nowrap; }

.bandierina {
  display: inline-block;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ossido);
  border: 1px solid var(--ossido);
  border-radius: 2px;
  padding: 2px 7px;
  margin-top: 8px;
  line-height: 1.5;
}
.bandierina--verde { color: var(--graphite); border-color: var(--graphite); }

/* ---------- 10. Le schede: campioni sul cartoncino ---------- */
.schede { display: grid; gap: var(--step-6); }
.scheda { display: grid; gap: var(--step-3); }
.scheda__codice { display: flex; justify-content: space-between; align-items: baseline; gap: var(--step-2); border-bottom: 1px solid var(--graphite); padding-bottom: 8px; }
.scheda__corpo { display: grid; gap: var(--step-4); }
.scheda__testo { display: grid; gap: var(--step-3); max-width: var(--measure); }
.scheda h3 { font-size: var(--fs-h3); line-height: 1.2; }
.scheda__gancio { font-size: var(--fs-lead); line-height: 1.45; }
.scheda__prosa { font-size: var(--fs-body); }
.provino { padding: var(--step-2); }
.provino svg { width: 100%; height: auto; }
/* schermata di gioco montata come un provino: filo sottile, spigolo vivo */
.provino__foto { width: 100%; height: auto; display: block; border: 1px solid var(--hairline-2); }
.provino__foto--verticale { width: auto; max-width: 100%; max-height: 520px; margin-inline: auto; }
.provino__didascalia { font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--pencil); margin-top: 10px; }

.specifiche { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--step-2); }
.specifiche dt {
  font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  color: var(--pencil); padding: 8px 0; border-bottom: 1px solid var(--hairline-2);
}
.specifiche dd { font-size: var(--fs-micro); text-align: right; padding: 8px 0; border-bottom: 1px solid var(--hairline-2); }
.specifiche dl > :nth-last-child(-n+2) { border-bottom: 0; }

.riserva {
  border-left: 2px solid var(--ossido);
  padding-left: 14px;
  font-size: var(--fs-micro);
  color: var(--graphite);
  max-width: 56ch;
}
.riserva b { font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: var(--fs-label); color: var(--ossido); display: block; margin-bottom: 4px; }

.storia { font-size: var(--fs-micro); color: var(--pencil); max-width: 60ch; }
.negozi { display: flex; flex-wrap: wrap; gap: 10px; }

/* montaggio ampio: provino a sinistra, testo a destra */
@media (min-width: 900px) {
  .scheda__corpo--largo { grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); gap: var(--step-5); align-items: start; }
  .scheda__corpo--largo-inv > .provino { order: 2; }
  .scheda__corpo--largo-inv > .scheda__testo { order: 1; }
}
/* montaggio doppio: due campioni piccoli affiancati */
.schede__coppia { display: grid; gap: var(--step-5); }
@media (min-width: 900px) { .schede__coppia { grid-template-columns: 1fr 1fr; gap: var(--step-4); } }
.scheda--compatta .scheda__gancio { font-size: var(--fs-body); }
.scheda--compatta .provino svg { max-height: 190px; }
.scheda--compatta .provino__foto--verticale { max-height: 380px; }

/* ---------- 11. Voce dell'anno: solo tipografia, niente immagine ---------- */
.voce { background: var(--paper); border-block: 1px solid var(--graphite); }
.voce__wrap { padding-block: var(--step-6); display: grid; gap: var(--step-3); }
.voce__nome {
  font-family: 'Merriweather', serif;
  font-size: clamp(30px, 4.4vw + 16px, 72px);
  line-height: 1.05; letter-spacing: -.03em;
  max-width: 16ch;
}
.voce__perche { font-size: var(--fs-lead); max-width: 58ch; line-height: 1.5; }
.voce__conto { display: flex; flex-wrap: wrap; gap: var(--step-3) var(--step-5); margin-top: var(--step-2); }
.voce__conto div { display: grid; gap: 4px; }
.voce__conto b { font-family: 'Merriweather', serif; font-size: var(--fs-num); line-height: 1; color: var(--ossido); letter-spacing: -.03em; }

/* ---------- 12. Postille ---------- */
.postille { display: grid; gap: 0; max-width: 76ch; border-top: 1px solid var(--graphite); }
.postilla { display: grid; gap: 6px; padding: var(--step-3) 0; border-bottom: 1px solid var(--hairline-2); }
.postilla__num { font-family: 'Merriweather', serif; font-size: var(--fs-micro); color: var(--ossido); }
.postilla p { font-size: var(--fs-micro); color: var(--pencil); }
.postilla p b { color: var(--graphite); font-weight: 600; }
@media (min-width: 700px) { .postilla { grid-template-columns: 46px 1fr; gap: var(--step-3); align-items: baseline; } }

/* ---------- 13. FAQ ---------- */
.faq { max-width: 78ch; border-top: 1px solid var(--graphite); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  display: flex; align-items: baseline; gap: 14px;
  padding: var(--step-3) 0;
  cursor: pointer;
  font-family: 'Merriweather', serif;
  font-size: clamp(16px, 0.4vw + 15px, 19px);
  line-height: 1.4;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+";
  color: var(--ossido);
  font-family: 'Sarabun', sans-serif;
  font-size: 18px;
  line-height: 1.4;
  flex: none;
}
.faq details[open] summary::before { content: "-"; }
.faq__risposta { padding: 0 0 var(--step-3) 32px; font-size: var(--fs-micro); color: var(--pencil); max-width: 62ch; }

/* ---------- 14. Moduli ---------- */
.modulo { display: grid; gap: var(--step-3); max-width: 46ch; }
.campo { display: grid; gap: 6px; }
.campo label { font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
.campo input[type="text"], .campo input[type="email"], .campo textarea {
  font-family: 'Sarabun', sans-serif;
  font-size: 16px;
  color: var(--graphite);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--graphite);
  border-radius: 0;
  padding: 10px 0;
  min-height: 44px;
  width: 100%;
}
.campo textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--pencil); opacity: 1; }
.campo input:focus, .campo textarea:focus { outline: 0; border-bottom-color: var(--ossido); border-bottom-width: 2px; }
.campo__aiuto { font-size: var(--fs-micro); color: var(--pencil); }
.consenso { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-micro); color: var(--pencil); }
.consenso input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--ossido); flex: none; }

/* ---------- 15. Blocchi di pagina interna ---------- */
.prosa { max-width: var(--measure); display: grid; gap: var(--step-3); }
.prosa h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -.02em; margin-top: var(--step-4); }
.prosa h3 { font-size: var(--fs-h3); line-height: 1.3; margin-top: var(--step-3); }
.prosa ul { display: grid; gap: 10px; }
.prosa ul li { padding-left: 18px; position: relative; font-size: var(--fs-micro); color: var(--pencil); }
.prosa ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--ossido); }
.prosa p { color: var(--pencil); }
.prosa p strong, .prosa li strong { color: var(--graphite); font-weight: 600; }

.pagina-testa { padding-block: var(--step-5) var(--step-4); border-bottom: 2px solid var(--graphite); display: grid; gap: var(--step-2); }
.pagina-testa h1 { font-size: clamp(30px, 3.4vw + 20px, 60px); line-height: 1.06; letter-spacing: -.028em; max-width: 18ch; }
.pagina-testa p { max-width: 54ch; color: var(--pencil); font-size: var(--fs-lead); line-height: 1.5; }

/* ---------- 16. Piede ---------- */
.piede { background: var(--lacquer); color: var(--paper); padding-block: var(--step-5) var(--step-4); }
.piede a { color: var(--paper); text-decoration: none; }
.piede a:hover { color: var(--ossido-air); text-decoration: underline; }
.piede__grid { display: grid; gap: var(--step-4); padding-bottom: var(--step-4); border-bottom: 1px solid rgba(255,255,255,.22); }
@media (min-width: 820px) { .piede__grid { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, .8fr)); gap: var(--step-5); } }
.piede__marca { font-family: 'Merriweather', serif; font-size: var(--fs-h3); }
.piede__testo { font-size: var(--fs-micro); color: #b9b6b0; max-width: 44ch; margin-top: 10px; }
.piede__fiducia { font-size: var(--fs-micro); color: var(--paper); border-left: 2px solid var(--ossido); padding-left: 12px; margin-top: var(--step-2); }
.piede__col { display: grid; gap: 10px; align-content: start; }
.piede__col .label { color: #96938d; margin-bottom: 4px; }
.piede__col li a { font-size: var(--fs-micro); }
.piede__legale { padding-top: var(--step-3); display: grid; gap: var(--step-2); }
.piede__disclaimer { font-size: var(--fs-label); line-height: 1.7; color: #8f8c86; max-width: 92ch; letter-spacing: .01em; }
.piede__copy { font-size: var(--fs-label); color: #8f8c86; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- 17. 404 e grazie ---------- */
.esito { padding-block: var(--step-6); display: grid; gap: var(--step-3); min-height: 52vh; align-content: center; }
.esito__num { font-family: 'Merriweather', serif; font-size: clamp(60px, 12vw, 150px); line-height: .9; letter-spacing: -.05em; color: var(--ossido); }
.esito h1 { font-size: var(--fs-h2); line-height: 1.15; max-width: 20ch; }
.esito p { max-width: 52ch; color: var(--pencil); }
.esito__azioni { display: flex; flex-wrap: wrap; gap: var(--step-2); margin-top: var(--step-2); }

/* ---------- 18. Rivelazione allo scorrimento (motivata: ordina la lettura dell'almanacco) ----------
   Lo stato nascosto lo mette solo il JS, aggiungendo .js-rivela su <html>.
   Senza JS, o con reduced-motion, le schede sono visibili da subito: il contenuto non dipende mai dallo script. */
@media (prefers-reduced-motion: no-preference) {
  .js-rivela .rivela { opacity: 0; transform: translateY(14px); transition: opacity .5s ease-out, transform .5s cubic-bezier(.16,1,.3,1); }
  .js-rivela .rivela.is-visibile { opacity: 1; transform: none; }
}