/* ── Carattere della testata ──────────────────────────────────────────────
   Grenze Gotisch: gotico ridisegnato per lo schermo, con contatori aperti.
   Incorporato nella pagina in base64: nessuna richiesta di rete, nessuna
   dipendenza da Google Fonts, e il marchio non «salta» al caricamento.
   ──────────────────────────────────────────────────────────────────── */







/* ────────────────────────────────────────────────────────────────
   Sistema visivo. Mix ragionato di ciò che funziona nelle grandi testate:
   - titoli in serif ad alto contrasto (NYT, Guardian, Corriere)
   - filetti sottili e fondo avorio per separare le sezioni (FT, Economist)
   - un solo accento cromatico, usato con parsimonia
   - gerarchia costruita sulla dimensione, non sul colore
   Nessuna richiesta di rete: font di sistema, SVG inline. Si apre offline.
   ──────────────────────────────────────────────────────────────── */
:root{
  --inchiostro:#16181d; --inchiostro-tenue:#5b6068; --inchiostro-lieve:#8a9099;
  --carta:#ffffff; --avorio:#f7f5f0; --filetto:#e4e1da;
  --accento:#b1232a; --accento-scuro:#8d1b21;
  --verificato:#1d6b4f; --riportato:#a17a00; --indiscrezione:#c05621;
  --gotico:"Grenze Gotisch",Georgia,serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --misura:68ch; --raggio:3px;
}
@media (prefers-color-scheme: dark){
  :root{--inchiostro:#e9e7e2;--inchiostro-tenue:#a6abb4;--inchiostro-lieve:#7d838c;
        --carta:#121317;--avorio:#191b20;--filetto:#2b2e35;--accento:#ef5a60;--accento-scuro:#f2787d;
        /* i tre colori delle etichette mancavano nel tema scuro: restavano
           quelli chiari, illeggibili su fondo scuro */
        --verificato:#4bbd8d;--riportato:#e2c14e;--indiscrezione:#f0925c;}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--carta);color:var(--inchiostro);
  font-family:var(--sans);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.salta{position:absolute;left:-9999px;top:0;background:var(--inchiostro);color:var(--carta);padding:.6rem 1rem;z-index:99}
.salta:focus{left:.5rem;top:.5rem}
:focus-visible{outline:2px solid var(--accento);outline-offset:3px}
.contenitore{max-width:1180px;margin:0 auto;padding:0 20px}

/* ── testata ── */
.testata{border-bottom:2px solid var(--inchiostro)}
.testata__alto{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.55rem 0;font-size:12px;color:var(--inchiostro-tenue);
  border-bottom:1px solid var(--filetto);letter-spacing:.02em}
.testata__marchio{text-align:center;padding:1.4rem 0 1rem}
.marchio{font-family:var(--gotico);font-weight:600;font-size:clamp(2.3rem,7vw,4.1rem);line-height:.95;
  font-weight:700;letter-spacing:-.02em;text-decoration:none;display:inline-block}
.marchio em{font-style:normal;color:var(--accento)}
.motto{margin:.5rem 0 0;font-size:12.5px;color:var(--inchiostro-tenue);
  text-transform:uppercase;letter-spacing:.14em}
.nav{border-top:1px solid var(--filetto);overflow-x:auto}
.nav ul{display:flex;gap:1.6rem;list-style:none;margin:0;padding:.7rem 0;
  font-size:13.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.nav a{text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-color:var(--accento);color:var(--accento)}

/* ── barra di verifica: l'elemento distintivo del prodotto ── */
.verifica{display:inline-flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  font-size:12px;color:var(--inchiostro-tenue);font-variant-numeric:tabular-nums}
.pastiglia{display:inline-flex;align-items:center;gap:.3rem;padding:.12rem .5rem;
  border:1px solid var(--filetto);border-radius:99px;background:var(--avorio);
  font-weight:600;font-size:11.5px;letter-spacing:.02em}
.pastiglia--a{color:var(--verificato);border-color:color-mix(in srgb,var(--verificato) 35%,transparent)}
.pastiglia--b{color:var(--riportato);border-color:color-mix(in srgb,var(--riportato) 35%,transparent)}
.pastiglia--c{color:var(--indiscrezione);border-color:color-mix(in srgb,var(--indiscrezione) 35%,transparent)}
.punto{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
/* ── segni delle etichette di verifica ──────────────────────────────────
   Tre icone al posto del pallino: lo scudo con la spunta per un fatto
   confermato, il fumetto con le virgolette per un fatto riportato da una
   sola fonte e sempre attribuito, il punto interrogativo per ciò che non è
   confermato. Prendono il colore dell'etichetta che le contiene, quindi
   restano leggibili anche in tema scuro senza una seconda serie di regole.
   ─────────────────────────────────────────────────────────────────── */
.icona{width:1.05em;height:1.05em;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.icona .pieno{fill:currentColor;stroke:none}
.pastiglia--sola{gap:0;padding:.18rem .34rem}
.pastiglia--sola .icona{width:1.15rem;height:1.15rem}


/* ── griglia ── */
.principale{padding:1.8rem 0 3rem}
.griglia{display:grid;gap:1.8rem;grid-template-columns:1fr}
@media(min-width:900px){
  .griglia--apertura{grid-template-columns:minmax(0,2.05fr) minmax(0,1fr);gap:2.2rem}
  .griglia--tre{grid-template-columns:repeat(3,minmax(0,1fr))}
  .griglia--quattro{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.divisore{border:0;border-top:1px solid var(--filetto);margin:2.2rem 0}
.divisore--forte{border-top:2px solid var(--inchiostro);margin:2.6rem 0 1.4rem}

/* ── articoli in elenco ── */
.pezzo{display:flex;flex-direction:column;gap:.5rem}
.pezzo__categoria{font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accento);text-decoration:none}
.pezzo__titolo{font-family:var(--serif);font-weight:700;letter-spacing:-.015em;
  line-height:1.14;margin:0}
.pezzo__titolo a{text-decoration:none}
.pezzo__titolo a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.pezzo--apertura .pezzo__titolo{font-size:clamp(2rem,4.6vw,3.05rem)}
.pezzo--medio .pezzo__titolo{font-size:1.42rem}
.pezzo--piccolo .pezzo__titolo{font-size:1.12rem}
.pezzo__sommario{margin:0;color:var(--inchiostro-tenue);font-size:15.5px;max-width:56ch}
.pezzo--apertura .pezzo__sommario{font-size:18px;font-family:var(--serif);color:var(--inchiostro)}
.pezzo__figura{margin:0 0 .3rem;background:var(--avorio);border:1px solid var(--filetto);
  aspect-ratio:16/9;display:grid;place-items:center;color:var(--inchiostro-lieve);
  font-size:12px;text-align:center;padding:1rem}
.pezzo + .pezzo{border-top:1px solid var(--filetto);padding-top:1.1rem;margin-top:1.1rem}
.colonna .pezzo + .pezzo{margin-top:1rem}

/* ── strisce e blocchi ── */
.striscia{background:var(--avorio);border-top:1px solid var(--filetto);
  border-bottom:1px solid var(--filetto);padding:1.1rem 0;margin:0 0 1.8rem}
.striscia__titolo{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accento);margin:0 0 .6rem;display:flex;align-items:center;gap:.5rem}
.aggiornamenti{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.aggiornamenti li{display:flex;gap:.8rem;font-size:14.5px;align-items:baseline}
.aggiornamenti time{font-variant-numeric:tabular-nums;color:var(--inchiostro-lieve);
  font-size:12.5px;flex:none;width:3.4rem}
.aggiornamenti a{text-decoration:none}
.aggiornamenti a:hover{text-decoration:underline}

.tempo{display:inline-flex;align-items:center;gap:.25rem;font-size:11.5px;font-weight:600;
  color:var(--inchiostro-lieve);font-variant-numeric:tabular-nums;white-space:nowrap;cursor:help;
  border-bottom:1px dotted var(--filetto)}
.tempo::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor;
  border-top-color:transparent;transform:rotate(-45deg);flex:none}
.livello-predefinito{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--inchiostro-lieve)}

/* Spazi commerciali: distinguibili sempre, mai confondibili con il redazionale. */
.commerciale{border:1px dashed var(--filetto);border-radius:var(--raggio);padding:.7rem .9rem;margin:0 0 1.8rem}
.commerciale > .etichetta{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--inchiostro-lieve);margin-bottom:.5rem;font-weight:700}
.commerciale .vuoto{min-height:90px;display:grid;place-items:center;text-align:center;
  color:var(--inchiostro-lieve);font-size:12.5px;line-height:1.4}

.sezione__titolo{font-family:var(--serif);font-size:1.5rem;margin:0 0 1rem;
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.sezione__titolo span{font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--inchiostro-lieve)}

.riquadro{border:1px solid var(--filetto);background:var(--avorio);padding:1.1rem 1.2rem;border-radius:var(--raggio)}
.riquadro h3{margin:0 0 .55rem;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--inchiostro-tenue)}
.riquadro p{margin:0 0 .7rem;font-size:14.5px;color:var(--inchiostro-tenue)}
.riquadro p:last-child{margin-bottom:0}
.riquadro a{color:var(--accento);font-weight:600}

/* ── piede ── */
.piede{border-top:2px solid var(--inchiostro);background:var(--avorio);padding:2.2rem 0 2.8rem;margin-top:2rem}
.piede__griglia{display:grid;gap:1.6rem;grid-template-columns:1fr}
@media(min-width:760px){.piede__griglia{grid-template-columns:1.6fr 1fr 1fr}}
.piede h2{font-family:var(--serif);font-size:1.15rem;margin:0 0 .5rem}
.piede h3{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--inchiostro-lieve);margin:0 0 .6rem}
.piede ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;font-size:14.5px}
.piede p{font-size:14px;color:var(--inchiostro-tenue);margin:0 0 .7rem;max-width:46ch}
.piede a{color:inherit}
.avviso{font-size:12.5px;color:var(--inchiostro-lieve);border-top:1px solid var(--filetto);
  margin-top:1.8rem;padding-top:1rem}
.demo{background:#fff8e6;border:1px solid #e8d9a8;color:#6b5514;padding:.7rem 1rem;
  font-size:13.5px;border-radius:var(--raggio);margin:1rem 0 0}
@media (prefers-color-scheme: dark){.demo{background:#2a2417;border-color:#4a3f22;color:#e2ceA0}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}