:root{
  --blu:#64AFFF; --navy:#354270; --grigio:#808080;
  --giallo:#FFC32D; --arancio:#EC6B28; --chiaro:#CCCCCC;
  --sfondo:#fff; --testo:#354270; --carta:#f6f8fc; --bordo:#CCCCCC;
}
/* 🔤 I CARATTERI VIVONO QUI, E NON E' UNA COMODITA'.
   pionego deve funzionare OFFLINE: un carattere preso da un CDN non c'e' quando non c'e'
   rete, e la pagina cade su un carattere di sistema — sottoterra, dove non si rimedia.
   ⛔ Gli originali del brandbook (Morion, Aeonik Pro) sono licenziati da terzi: avere i
   .otf non da' il diritto di spedirli a un browser. Questi due sono OFL, che quel diritto
   lo da' — e chiede in cambio che la licenza viaggi coi file (web/font/OFL-*.txt).
   ⚠️ I file sono nel guscio del service worker: toglierli di li' li toglie dall'offline. */
@font-face{font-family:'Playfair';src:url('/font/playfair-latin.woff2')format('woff2');font-weight:400 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair';src:url('/font/playfair-latin-ext.woff2')format('woff2');font-weight:400 900;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken';src:url('/font/hanken-latin.woff2')format('woff2');font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken';src:url('/font/hanken-latin-ext.woff2')format('woff2');font-weight:100 900;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --f-titoli:'Playfair',Georgia,'Times New Roman',serif;
  --f-testo:'Hanken',system-ui,-apple-system,'Segoe UI',sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sfondo:#141821; --testo:#e8ecf4; --carta:#1c2230; --bordo:#2a3344; --grigio:#9aa4b8;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--sfondo); color:var(--testo);
  font:16px/1.65 var(--f-testo);
}
main{max-width:46rem;margin:0 auto;padding:0 16px 4rem}
a{color:var(--blu)}
h1{font-family:var(--f-titoli);font-weight:600;font-size:clamp(1.7rem,5vw,2.4rem);line-height:1.15;letter-spacing:-.015em;margin:1.2em 0 .4em}
h2{font-family:var(--f-titoli);font-weight:600;font-size:1.3rem;margin:2em 0 .4em}
.testata{
  display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  max-width:46rem;margin:0 auto;padding:1rem 16px;
}
/* 🧷 IL MARCHIO — blocco: icona davanti, poi il nome MONOCROMATICO.
   Il colore ce l'ha gia' l'icona: due gialli accanto fanno rumore.
   ⛔ Niente giallo piccolo su chiaro: misurato 1,60:1, sparisce. Su fondo chiaro
   l'icona prende il blu, su fondo scuro il giallo — e' la stessa regola che il
   brandbook del 2021 scrive a pagina 5: il marchio si adatta al fondo. */
.marchio{display:inline-flex;align-items:center;gap:.30em;font-size:1.5rem;font-weight:700;
  letter-spacing:-.035em;color:var(--testo);text-decoration:none;line-height:1}
.marchio svg{height:1.18em;width:auto;flex:none;color:var(--blu)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .marchio svg{color:var(--giallo)}
}
.testata nav{display:flex;gap:1rem;margin-left:auto;font-size:.95rem}
.testata nav a{color:var(--testo);text-decoration:none;opacity:.75}
.testata nav a:hover{opacity:1;text-decoration:underline}
.avviso{
  background:var(--giallo);color:#3a2c00;padding:.7rem 16px;font-size:.92rem;text-align:center;
}
.eroe{padding:2rem 0 1rem;border-bottom:1px solid var(--bordo)}
.eroe h1{margin-top:0}
.eroe-nota{color:var(--grigio)}
.bottone{
  display:inline-block;background:var(--blu);color:#06243f;text-decoration:none;
  font-weight:600;padding:.75em 1.2em;border:0;border-radius:10px;cursor:pointer;font-size:1rem;
}
.bottone[disabled]{opacity:.55;cursor:default}
.bottone-piatto{background:transparent;color:var(--grigio);border:1px solid var(--bordo);font-weight:500}
.schede{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.9rem}
.scheda{border:1px solid var(--bordo);border-radius:14px;background:var(--carta);overflow:hidden}
.scheda > a{display:flex;gap:.9rem;align-items:stretch;text-decoration:none;color:inherit;padding:.9rem}
.scheda-copertina{flex:0 0 4px;border-radius:4px;background:var(--c,var(--blu))}
.scheda-testo{display:grid;gap:.2rem}
.scheda-testo small{color:var(--grigio)}
.scheda-sommario{font-size:.95rem}
.scheda-stato{display:block;padding:0 .9rem .7rem;font-size:.85rem;color:var(--grigio)}
.scheda-stato:empty{display:none}
.meta{color:var(--grigio);margin:.2em 0 1em}
.sommario{font-size:1.08rem}
.scarico{margin:1.4rem 0 2rem;padding:1rem;border:1px solid var(--bordo);border-radius:14px;background:var(--carta)}
.scarico-stato{margin:.6em 0 0;font-size:.9rem;color:var(--grigio)}
.scarico-stato:empty{display:none}
.sezione p{margin:.8em 0}
.vuoto{color:var(--grigio)}