/* stile.css — le pagine fisse del Riepilogo.
   Gli stessi colori e caratteri dell'edizione, ma per un testo lungo da
   leggere invece che per una prima pagina: una colonna sola, misura di
   riga corta, gerarchia bassa.
   ⚠️ I colori NON si scelgono qui: sono quelli verificati sull'edizione
   il 21 settembre, che portano il contrasto a norma. --text-3 e' #5C6660
   e non #8A968F, --oro-testo e' #7B5F21: cambiarli rompe la WCAG. */
:root{
  --ground:#F7F5F0; --surface:#FFFFFF; --band:#EDE6D6;
  --line:#DED8C9; --line-soft:#EBE7DC;
  --text:#16211C; --text-2:#4E5C55; --text-3:#5C6660;
  --green:#006039; --green-900:#052A1D;
  --gold:#A37E2C; --gold-400:#C9A227; --oro-testo:#7B5F21;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#0A100D; --surface:#111A15; --band:#052A1D;
    --line:#25332B; --line-soft:#1B2822;
    --text:#ECF0EC; --text-2:#A7B6AC; --text-3:#9AAAA0;
    --green:#1E8A5A; --gold:#C9A227; --oro-testo:#C9A227;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.66;font-weight:400;-webkit-font-smoothing:antialiased}

.salta{position:absolute;left:-9999px;top:0;z-index:99;background:var(--surface);
  color:var(--text);border:1px solid var(--gold);padding:10px 16px}
.salta:focus{left:12px;top:12px}
a{color:var(--green);text-underline-offset:3px;text-decoration-thickness:.6px}
a:focus-visible,.marchio:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.nf{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- testata ---- */
.testata{background:var(--band);border-bottom:1px solid var(--line);
  padding:26px 20px 0;text-align:center}
.marchio{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--oro-testo)}
.mh-mark{width:38px;height:38px;flex:0 0 auto}
.logotipo{font-family:"Tinos","Times New Roman",Georgia,serif;font-weight:400;
  font-size:clamp(1.9rem,6vw,2.7rem);line-height:1;letter-spacing:.004em}
/* ⚠️ `max-width:none`: la regola generica `p{max-width:66ch}` vale anche
   qui, e una riga centrata dentro una scatola larga 66ch che parte da
   sinistra sembra allineata a sinistra. Si vedeva solo in pagina. */
.claim{margin:10px auto 0;max-width:none;font-family:"Times New Roman",Tinos,Times,serif;
  font-size:10.5px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--text-2)}
.ia{margin:8px auto 0;max-width:min(94vw,620px);padding:7px 14px;
  border:1px solid rgba(122,92,27,.32);border-radius:999px;
  font-family:"Times New Roman",Tinos,Times,serif;font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--oro-testo)}
@media (prefers-color-scheme: dark){.ia{border-color:rgba(201,162,39,.55)}}
.menu{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 26px;
  margin-top:20px;padding:14px 0;border-top:1px solid var(--line)}
.menu a{color:var(--text-2);text-decoration:none;font-size:12px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;padding:6px 2px;min-height:24px;
  display:inline-flex;align-items:center}
.menu a:hover{color:var(--green);text-decoration:underline}
.menu a[aria-current="page"]{color:var(--text);border-bottom:2px solid var(--gold)}

/* ---- il foglio ---- */
.foglio{max-width:720px;margin:0 auto;padding:44px 20px 10px}
.briciole{font-size:.8rem;color:var(--text-3);margin:0 0 18px}
.briciole a{color:var(--text-3)}
h1{font-family:"EB Garamond",Georgia,serif;font-weight:500;letter-spacing:-.005em;
  font-size:clamp(2rem,5.2vw,2.9rem);line-height:1.1;margin:0 0 8px;text-wrap:balance}
.agg{margin:0 0 34px;font-family:"Times New Roman",Tinos,Times,serif;
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-testo)}
h2{font-family:"EB Garamond",Georgia,serif;font-weight:600;font-size:1.72rem;line-height:1.2;
  margin:42px 0 12px;padding-top:18px;border-top:1px solid var(--line)}
h3{font-family:"EB Garamond",Georgia,serif;font-weight:600;font-size:1.28rem;line-height:1.25;
  margin:30px 0 8px}
p{margin:0 0 15px;max-width:66ch}
ul,ol{margin:0 0 16px;padding-left:22px;max-width:66ch}
li{margin-bottom:8px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:4px;padding:1px 5px}
strong{font-weight:600}
.tab-scorri{overflow-x:auto;margin:0 0 20px;border:1px solid var(--line)}
.tab-scorri:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
table{border-collapse:collapse;width:100%;min-width:34rem;background:var(--surface);font-size:.92rem}
th,td{text-align:left;vertical-align:top;padding:11px 14px;border-bottom:1px solid var(--line-soft)}
th{background:var(--band);font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-2);font-family:"Times New Roman",Tinos,Times,serif}
tr:last-child td{border-bottom:none}

/* ---- piede ---- */
.piede{margin-top:56px;background:var(--band);border-top:1px solid var(--line);
  padding:34px 20px 40px;font-size:.86rem;color:var(--text-2)}
.piede nav{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 auto 20px;max-width:720px}
.piede nav a{color:var(--text-2);font-size:12px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;min-height:24px;display:inline-flex;align-items:center}
.piede nav a:hover{color:var(--green);text-decoration:underline}
.piede p{max-width:720px;margin:0 auto 12px}
.piede .nota{font-size:.78rem;color:var(--text-3)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================================================
   IN CODA A TUTTO, e non e' pigrizia: e' la cascata.
   ⚠️ IL VERDE DEI COLLEGAMENTI NON VALE NEL TEMA SCURO. Il piede sta su
   --band, che di notte e' #052A1D: il verde #1E8A5A a 13,8 px fa 3,56:1
   contro una soglia di 4,5:1. E' la stessa regola che l'edizione applica
   da sempre — di notte i collegamenti sono oro.
   ⚠️ Messo dentro il blocco :root piu' in alto NON funzionava: la regola
   `a{color:var(--green)}` viene dopo e vince per posizione. E' lo stesso
   errore del 21 settembre sul secondo </style>: quando una regola nuova
   «non fa nulla», prima di cercare un selettore sbagliato si guarda dove
   sta rispetto a quella che vuole sostituire.
   ============================================================ */
@media (prefers-color-scheme: dark){
  a{color:#C9A227}
  .menu a:hover,.piede nav a:hover,.briciole a{color:#C9A227}
}

.numeri{list-style:none;margin:0 0 30px;padding:0;border-top:1px solid var(--line)}
.numeri li{border-bottom:1px solid var(--line)}
.numeri a{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;
  padding:16px 2px;text-decoration:none;color:var(--text)}
.numeri a:hover{background:var(--surface)}
.numeri a:hover em{text-decoration:underline}
.numeri strong{font-weight:600;font-variant-numeric:tabular-nums;min-width:8.5rem}
.numeri span{color:var(--text-3);font-size:.86rem;min-width:11rem}
.numeri em{font-style:normal;font-family:"EB Garamond",Georgia,serif;font-size:1.16rem;
  color:var(--green);flex:1 1 14rem}
.numeri li.fuori{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;
  padding:14px 2px;color:var(--text-3)}
.numeri li.fuori strong{font-weight:500}
.nota-arch{font-size:.86rem;color:var(--text-3)}
@media (prefers-color-scheme: dark){.numeri em{color:#C9A227}}

.lede-g{font-size:1.12rem;line-height:1.65}