/* Sito pubblico.
   Palette in variabili: il tema si cambia sovrascrivendo queste, non
   riscrivendo le regole. E' la stessa idea del pannello, applicata qui. */
:root{
  --sfondo:#1b1e3c; --piano:#222542; --piano-2:#282a47; --riga:#323550;
  --testo:#e8e9ec; --testo-2:#9fa1ad; --testo-3:#727486;
  --accento:#e40020; --su-accento:#ffffff; --accento-testo:#ed5267;
  --largo:1180px; --stretto:760px; --raggio:12px; --raggio-s:8px;
  --font:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
/* Nessuno scorrimento orizzontale della pagina: se qualcosa sborda viene
   tagliato invece di trascinare tutto il sito a destra e sinistra.
   clip e non hidden: hidden su html o body crea un contenitore di
   scorrimento e romperebbe la testata sticky. */
html,body{overflow-x:clip;max-width:100%}
html{scroll-behavior:smooth}
body{margin:0;background:var(--sfondo);color:var(--testo);font:var(--t-base)/var(--interlinea) var(--font);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit}

.salta{position:absolute;left:-9999px;top:0;background:var(--accento);color:var(--su-accento);padding:10px 16px;z-index:100}
.salta:focus{left:0}

.contenitore{max-width:var(--largo);margin:0 auto;padding:0 20px}
.contenitore.stretto{max-width:var(--stretto)}

/* ---------- testata ----------
   Ogni voce e' un blocco alto quanto la testata, con il proprio riquadro di
   scatto: cosi' la riga d'accento sotto la voce attiva tocca il bordo della
   testata invece di galleggiare a meta'.
   Il punto delicato e' la voce con sottocategorie: e' un <div> che avvolge il
   collegamento, e se non e' flex a sua volta il testo resta appeso in cima
   mentre le voci semplici sono centrate -- "Calcio" era piu' in alto di tutti
   gli altri. Per questo la regola sotto vale insieme per <a> e per il gruppo. */
.testata{background:var(--piano);position:sticky;top:0;z-index:40;
  border-bottom:1px solid var(--riga);transition:box-shadow .18s ease}
.testata.staccata{box-shadow:0 6px 24px rgba(0,0,0,.3)}
.testata .riga{max-width:var(--largo);margin:0 auto;padding:0 20px;
  display:flex;align-items:stretch;gap:0;height:62px}

.marchio{display:flex;align-items:center;flex:none;padding-right:28px}
.marchio img{height:40px;width:auto;display:block}

.apri-menu{display:none;margin-left:auto;align-self:center;background:none;
  border:1px solid var(--riga);border-radius:var(--raggio-s);color:var(--testo);
  width:40px;height:40px;font-size:var(--t-base);cursor:pointer}
.apri-menu:hover{border-color:var(--accento);color:var(--accento-testo)}

.nav-principale{display:flex;align-items:stretch;gap:0;min-width:0}

/* Voci semplici e voci con figlie: stessa scatola, stessa altezza. */
.nav-principale > a,
.nav-principale > .voce-gruppo > a{
  display:flex;align-items:center;gap:6px;height:100%;box-sizing:border-box;
  padding:0 15px;text-decoration:none;color:var(--testo-2);
  font-size:var(--t-piccolo);font-weight:600;letter-spacing:.005em;white-space:nowrap;
  border-bottom:3px solid transparent;transition:color .12s ease,border-color .12s ease,background .12s ease}
.nav-principale > .voce-gruppo{display:flex;align-items:stretch}

.nav-principale > a:hover,
.voce-gruppo:hover > a,
.voce-gruppo:focus-within > a{color:var(--testo);background:var(--piano-2)}

.nav-principale > a.attiva,
.voce-gruppo.attiva > a{color:var(--testo);border-bottom-color:var(--accento)}

@media(max-width:1020px){
  .nav-principale > a,.nav-principale > .voce-gruppo > a{padding:0 11px;font-size:var(--t-piccolo)}
  .marchio{padding-right:18px}
}

@media(max-width:900px){
  .testata .riga{position:relative;height:58px}
  .apri-menu{display:inline-flex;align-items:center;justify-content:center}
  .nav-principale{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;
    align-items:stretch;background:var(--piano);border-bottom:1px solid var(--riga);
    padding:6px 20px 16px;max-height:calc(100vh - 58px);overflow-y:auto;
    box-shadow:0 12px 30px rgba(0,0,0,.35)}
  .nav-principale.aperto{display:flex}
  .nav-principale > a,.nav-principale > .voce-gruppo > a{
    height:auto;padding:13px 0;border-bottom:1px solid var(--riga);width:100%;font-size:var(--t-base)}
  .nav-principale > .voce-gruppo{flex-direction:column;width:100%}
  .nav-principale > a.attiva,.voce-gruppo.attiva > a{border-bottom-color:var(--riga);color:var(--accento-testo)}
}

/* ---------- fasce ----------
   Ogni sezione e' una fascia a tutta larghezza che si ricrea dentro il proprio
   contenitore incolonnato. Serve perche' un fondo scuro deve arrivare ai bordi
   dello schermo mentre il testo resta allineato al resto della pagina: con il
   contenitore fuori, il fondo si fermerebbe a meta'. */
.fascia{padding:34px 0}
.fascia-dentro{max-width:var(--largo);margin:0 auto;padding:0 20px}
.fascia-scura{background:var(--piano);border-top:1px solid var(--riga);border-bottom:1px solid var(--riga)}
.fascia-scura + .fascia-scura{border-top:0}
.fascia-testata{padding-top:44px;padding-bottom:10px}
.fascia-lead{padding-top:26px}
.fascia-banner{padding:26px 0}

.fascia-testa{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px;flex-wrap:wrap}
.fascia-testa h2{font-size:var(--t-titolo);margin:0;letter-spacing:-.015em}
.fascia-sotto{color:var(--testo-3);margin:5px 0 0;font-size:var(--t-piccolo);max-width:60ch}
.fascia-tutto{color:var(--accento-testo);text-decoration:none;font-size:var(--t-piccolo);font-weight:650;white-space:nowrap;
  border:1px solid var(--riga);border-radius:99px;padding:6px 14px}
.fascia-tutto:hover{border-color:var(--accento)}

.testata-sezione h1{font-size:clamp(var(--t-display),4vw,calc(var(--t-display) * 1.65));line-height:1.15;margin:0 0 10px;letter-spacing:-.02em}
.testata-sezione p{color:var(--testo-2);margin:0;max-width:65ch}
.occhiello{display:inline-block;font-size:var(--t-mini);text-transform:uppercase;letter-spacing:.14em;
  color:var(--accento-testo);font-weight:700;margin-bottom:8px}

.griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:20px}
.griglia-fitta{grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:16px}

/* overscroll-behavior-x: contain e' il pezzo che conta. Senza, arrivato in
   fondo al carosello il gesto continua sulla pagina, e su un telefono il sito
   intero si sposta a destra e sinistra mentre si sfoglia. Con contain lo
   scorrimento resta dentro il carosello, dove e' voluto. */
/* scroll-snap PROXIMITY e non mandatory.
   Con mandatory il dito non e' mai libero: il browser aggancia sempre il bordo
   della scheda piu' vicina, e ogni gesto finisce con uno strattone. Con
   proximity l'aggancio scatta solo se ci si ferma gia' quasi in posizione --
   si sfoglia dove si vuole, e le schede restano allineate quando conta.

   E niente scroll-behavior:smooth: l'andatura la scrive sito.js, perche'
   quella del browser dava uno strappo di 234 pixel in un fotogramma. Se la si
   lasciasse qui, ogni scrollLeft scritta dal JavaScript verrebbe ri-animata
   dal browser e le due curve si accavallerebbero. */
.carosello-piste{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,1fr);gap:20px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:10px}
.carosello-piste .scheda{scroll-snap-align:start}

/* La barra sparisce, lo scorrimento NO.
   Sono due cose diverse e vanno tenute separate: si toglie la barra perche' e'
   brutta in mezzo alla pagina, non lo scorrimento -- che e' quello che fa
   funzionare il dito sul telefono, la rotella orizzontale sul trackpad e il
   tasto freccia dopo un Tab. Se si mettesse overflow:hidden le frecce
   funzionerebbero ancora e tutto il resto no. */
.carosello-piste{scrollbar-width:none;-ms-overflow-style:none}
.carosello-piste::-webkit-scrollbar{width:0;height:0}

.carosello{position:relative}
.carosello-freccia{position:absolute;top:calc(50% - 22px);z-index:2;
  width:44px;height:44px;border-radius:999px;border:1px solid var(--riga);
  background:var(--piano);color:var(--testo);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  box-shadow:0 2px 10px rgba(0,0,0,.18);transition:opacity .15s,transform .15s}
.carosello-freccia.prima{left:-22px}
.carosello-freccia.dopo{right:-22px}
/* La freccia e' disegnata con un bordo ruotato invece che con un carattere:
   una glifo di font cambia forma da un sistema all'altro, e su Android quella
   del triangolo a volte non c'e' e si vede il rettangolo del carattere
   mancante. */
.carosello-freccia::before{content:"";width:9px;height:9px;
  border-top:2px solid currentColor;border-right:2px solid currentColor}
.carosello-freccia.prima::before{transform:rotate(-135deg);margin-left:3px}
.carosello-freccia.dopo::before{transform:rotate(45deg);margin-right:3px}
.carosello-freccia:hover{transform:scale(1.06)}
.carosello-freccia:focus-visible{outline:2px solid var(--accento);outline-offset:2px}
/* Arrivati in fondo la freccia si spegne ma resta al suo posto: sparendo
   sposterebbe di 44px tutto quello che le sta intorno a ogni scorrimento. */
.carosello-freccia[disabled]{opacity:.3;pointer-events:none;cursor:default}

/* Su schermi stretti le frecce starebbero fuori dalla finestra -- il margine
   laterale non e' 22px -- e servono meno, perche' li' si sfoglia col dito.
   Restano dentro il bordo, piu' piccole. */
@media (max-width:860px){
  .carosello-freccia{width:38px;height:38px;top:calc(50% - 19px)}
  .carosello-freccia.prima{left:2px}
  .carosello-freccia.dopo{right:2px}
}

/* Chi ha chiesto al sistema meno movimento non lo riceve nemmeno qui. Lo
   scorrimento lo spegne sito.js, che guarda la stessa domanda con matchMedia:
   qui restano le animazioni dei bottoni. */
@media (prefers-reduced-motion:reduce){
  .carosello-freccia{transition:none}
  .carosello-freccia:hover{transform:none}
}

/* ---------- apertura ----------
   Prima era una griglia a due colonne: il pezzo a sinistra, la spalla a
   destra. La spalla finiva a meta' altezza e sotto restava un vuoto grande
   quanto un terzo della fascia, mentre il titolo dell'apertura -- la cosa
   piu' importante della pagina -- stava schiacciato in poco piu' di meta'
   larghezza.
   Ora l'apertura prende TUTTA la larghezza del contenitore: immagine e testo
   affiancati e alti uguali, e la spalla passa sotto come riga di titoli. Non
   c'e' piu' spazio morto e il titolo respira. */
.apertura{display:block}

.apertura-pezzo{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:32px;align-items:center;text-decoration:none;color:inherit}
.apertura-pezzo.senza-figura{display:block}
@media(max-width:900px){.apertura-pezzo{grid-template-columns:1fr;gap:18px}}

.apertura-figura{aspect-ratio:16/9;border-radius:var(--raggio);overflow:hidden;background:var(--piano-2);margin:0}
.apertura-figura img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.apertura-pezzo:hover .apertura-figura img{transform:scale(1.03)}

/* Senza immagine l'apertura non deve sembrare una scheda finita male: prende
   un filetto d'accento e piu' aria, e resta riconoscibile come apertura. */
.apertura-pezzo.senza-figura .apertura-testo{border-left:4px solid var(--accento);padding-left:22px}

.apertura-testo h2{margin:0 0 12px;font-size:clamp(var(--t-display),3.1vw,calc(var(--t-display) * 1.57));line-height:1.12;letter-spacing:-.025em}
.apertura-pezzo:hover .apertura-testo h2{color:var(--accento-testo)}
.apertura-testo p{margin:0;color:var(--testo-2);font-size:var(--t-medio);line-height:1.55}
.apertura-pie{display:flex;align-items:center;gap:16px;margin-top:16px;color:var(--testo-3);font-size:var(--t-piccolo)}
.apertura-leggi{color:var(--accento-testo);font-weight:650;display:inline-flex;align-items:center;gap:7px}
.apertura-leggi::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;
  border-top:2px solid currentColor;transform:rotate(45deg);transition:transform .15s}
.apertura-pezzo:hover .apertura-leggi::after{transform:rotate(45deg) translate(2px,-2px)}

/* La spalla: sotto, in riga. Titoli numerati e nessuna immagine -- servono a
   dire "c'e' altro", non a competere con il pezzo grande. */
.apertura-spalla{margin-top:30px;padding-top:22px;border-top:1px solid var(--riga)}
.spalla-titolo{margin:0 0 14px;font-size:var(--t-minuto);text-transform:uppercase;letter-spacing:.14em;color:var(--testo-3)}
.apertura-spalla ol{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 26px}
.apertura-spalla li{padding:12px 0}
.apertura-spalla li + li{border-top:0}
@media(min-width:760px){
  .apertura-spalla li{border-left:1px solid var(--riga);padding-left:20px}
  .apertura-spalla li:first-child{border-left:0;padding-left:0}
}
@media(max-width:759px){
  .apertura-spalla li + li{border-top:1px solid var(--riga)}
}
.apertura-spalla a{display:flex;gap:12px;text-decoration:none;color:inherit}
.spalla-n{color:var(--accento-testo);font-size:var(--t-piccolo);font-weight:750;font-variant-numeric:tabular-nums;flex:none;line-height:1.45}
.spalla-eti{display:block;font-size:var(--t-mini);text-transform:uppercase;letter-spacing:.12em;color:var(--testo-3);margin-bottom:3px}
.spalla-tit{display:block;font-size:var(--t-base);line-height:1.35;font-weight:600}
.apertura-spalla a:hover .spalla-tit{color:var(--accento-testo)}

/* Il banner: un rimando largo, con l'immagine sotto al testo. */
.banner{position:relative;display:block;border-radius:var(--raggio);overflow:hidden;
  min-height:220px;text-decoration:none;color:#fff;background:var(--piano-2);
  border:1px solid var(--riga)}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner-testo{position:relative;padding:34px;max-width:640px;
  background:linear-gradient(90deg, rgba(8,12,26,.92) 0%, rgba(8,12,26,.72) 60%, rgba(8,12,26,0) 100%)}
.banner h2{margin:0 0 8px;font-size:clamp(var(--t-grande),2.6vw,calc(var(--t-grande) * 1.46));line-height:1.2;letter-spacing:-.015em}
.banner p{margin:0 0 16px;color:#d6dbe8;font-size:var(--t-base);max-width:52ch}
.banner .bottone{pointer-events:none}
.banner:hover{border-color:var(--accento)}

/* ---------- scheda ---------- */
.scheda{background:var(--piano);border:1px solid var(--riga);border-radius:var(--raggio);overflow:hidden;
  transition:border-color .15s ease,transform .15s ease}
.scheda:hover{border-color:var(--accento);transform:translateY(-2px)}
/* La scheda e' una colonna: il corpo si allarga e la riga della data si
   appoggia in fondo. Serve alle schede senza immagine, che nella griglia
   vengono stirate all'altezza delle altre e lasciavano un vuoto sotto il
   titolo -- sembravano rotte, non semplicemente senza foto. */
.scheda-link{text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%}
.scheda-corpo{flex:1;display:flex;flex-direction:column}
.scheda-pie{margin-top:auto}
.scheda-img{aspect-ratio:16/9;background:var(--piano-2);overflow:hidden}
.scheda-img img{width:100%;height:100%;object-fit:cover;display:block}
.scheda-corpo{padding:14px 16px 16px}
.scheda-eti{display:inline-block;font-size:var(--t-mini);text-transform:uppercase;letter-spacing:.12em;
  color:var(--accento-testo);font-weight:700;margin-bottom:6px}
.scheda h3{margin:0;font-size:var(--t-medio);line-height:1.32;letter-spacing:-.012em;font-weight:650}
.scheda-pie{display:flex;gap:12px;color:var(--testo-3);font-size:var(--t-minuto);padding-top:12px}

/* ---------- articolo ---------- */
.briciole{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:20px 0 0;font-size:var(--t-minuto);color:var(--testo-3)}
.briciole a{color:var(--testo-3);text-decoration:none}
.briciole a:hover{color:var(--accento-testo)}

.articolo-testa{padding:18px 0 22px}
.articolo-testa h1{font-size:clamp(var(--t-display),4.2vw,calc(var(--t-display) * 1.57));line-height:1.18;margin:0 0 12px;letter-spacing:-.02em}
.sommario{font-size:var(--t-medio);color:var(--testo-2);margin:0 0 16px;line-height:1.55}
.firma{display:flex;flex-wrap:wrap;gap:14px;align-items:center;color:var(--testo-3);font-size:var(--t-piccolo)}
.firma .autore{color:var(--testo);font-weight:600}

/* La copertina dell'articolo ritaglia come le schede: senza un ritaglio, la
   posizione scelta nel pannello non avrebbe niente su cui agire, e la stessa
   immagine uscirebbe inquadrata nel carosello e intera nella pagina a cui il
   carosello porta. Il rapporto e' quello delle schede, 16/9. */
.copertina{margin:0 0 26px}
.copertina img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 0%;
  border-radius:var(--raggio);display:block}

.corpo{font-size:var(--t-medio);line-height:1.75}
.corpo h2{font-size:var(--t-display);margin:34px 0 12px;letter-spacing:-.015em;scroll-margin-top:80px}
.corpo h3{font-size:var(--t-grande);margin:26px 0 10px;scroll-margin-top:80px}
/* H4 e H5 esistono perche' ora si scrivono anche dentro un paragrafo. La
   scala continua a scendere, e H5 smette di crescere e passa al maiuscoletto:
   sotto una certa misura un titolo piu' piccolo del testo non si distingue
   piu' da un grassetto, e cambiare registro dice meglio "questo e' un
   livello ancora sotto". */
.corpo h4{font-size:var(--t-medio);margin:22px 0 8px;font-weight:650;scroll-margin-top:80px}
.corpo h5{font-size:var(--t-minuto);margin:20px 0 6px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--testo-2);scroll-margin-top:80px}
.corpo p{margin:0 0 18px}
.corpo a{color:var(--accento-testo);text-decoration:underline;text-underline-offset:2px}
.corpo ul,.corpo ol{margin:0 0 18px;padding-left:24px}
.corpo li{margin-bottom:7px}
.corpo blockquote{margin:22px 0;padding:4px 0 4px 18px;border-left:3px solid var(--accento);
  color:var(--testo-2);font-size:var(--t-medio)}
.corpo figure{margin:24px 0}
.corpo figure img{border-radius:var(--raggio-s);display:block}
.corpo figcaption{color:var(--testo-3);font-size:var(--t-piccolo);margin-top:7px}
/* Le tabelle ora si possono scrivere in ogni articolo: su schermo stretto una
   tabella a molte colonne non deve allargare la pagina, deve scorrere dentro
   se stessa. display:block la rende un contenitore di scorrimento. */
.corpo table{width:100%;border-collapse:collapse;margin:22px 0;font-size:var(--t-base)}
@media(max-width:700px){
  .corpo table{display:block;overflow-x:auto;overscroll-behavior-x:contain;
    white-space:nowrap;-webkit-overflow-scrolling:touch}
}
/* Un indirizzo lunghissimo incollato nel testo e' l'altro modo classico di
   allargare una pagina. */
.corpo a,.corpo p,.corpo li{overflow-wrap:anywhere}
.corpo th,.corpo td{border:1px solid var(--riga);padding:9px 12px;text-align:left}
.corpo th{background:var(--piano-2);font-weight:650}
.corpo caption{caption-side:top;text-align:left;color:var(--testo-3);font-size:var(--t-piccolo);padding-bottom:8px}

/* allineamenti e misure delle figure: gli stessi nomi che scrive l'editor */
.allinea-centro{margin-left:auto;margin-right:auto;text-align:center}
.allinea-sinistra{float:left;margin:6px 22px 14px 0}
.allinea-destra{float:right;margin:6px 0 14px 22px}
.misura-25{max-width:25%}.misura-50{max-width:50%}
.misura-75{max-width:75%}.misura-100{max-width:100%}
@media(max-width:620px){
  .allinea-sinistra,.allinea-destra{float:none;margin:22px 0}
  .misura-25,.misura-50,.misura-75{max-width:100%}
}

/* ---------- blocchi strutturati ---------- */
.quote{margin:26px 0;background:var(--piano);border:1px solid var(--riga);border-radius:var(--raggio);padding:16px 18px}
.quote-mercato{margin:0 0 10px;font-size:var(--t-base);color:var(--accento-testo);text-transform:uppercase;letter-spacing:.1em}
.quote table{margin:0;font-size:var(--t-base)}
.quote .quota{font-variant-numeric:tabular-nums;font-weight:650}
.quote-quando{margin:10px 0 0;color:var(--testo-3);font-size:var(--t-minuto)}

.evento{margin:26px 0;background:var(--piano);border:1px solid var(--riga);border-radius:var(--raggio);padding:16px 18px}
.evento dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;font-size:var(--t-base)}
.evento dt{color:var(--testo-3);font-size:var(--t-minuto)}
.evento dd{margin:0}

.guida{margin:26px 0;padding:14px 18px;border-left:3px solid var(--accento);background:var(--piano);
  border-radius:0 var(--raggio-s) var(--raggio-s) 0}
.guida-eti{display:block;font-size:var(--t-mini);text-transform:uppercase;letter-spacing:.12em;color:var(--testo-3);margin-bottom:4px}
.guida a{color:var(--accento-testo);font-weight:600;text-decoration:none;font-size:var(--t-base)}
.guida a:hover{text-decoration:underline}

.faq{margin:26px 0}
.faq details{border:1px solid var(--riga);border-radius:var(--raggio-s);margin-bottom:9px;background:var(--piano)}
.faq summary{padding:13px 16px;cursor:pointer;font-weight:600;font-size:var(--t-base)}
.faq details[open] summary{border-bottom:1px solid var(--riga)}
.faq details div{padding:13px 16px;color:var(--testo-2)}

/* L'avviso ADM: i colori arrivano come variabili dal pannello. */
.adm{background:var(--adm-fondo,#f4f4f5);color:var(--adm-testo,#1a1a1c);
  border-radius:var(--raggio-s);padding:16px;margin:30px 0}
.adm p,.adm .adm-riga{margin:0;font-size:var(--t-piccolo);line-height:1.6}
.adm a{color:var(--adm-link,#c24a0a);text-decoration:underline}
/* Lo stile "in evidenza" non e' la stessa riga con un bordo: e' un avviso
   composto. Il bordo sta sul riquadro, non sul paragrafo, altrimenti le tre
   righe verrebbero riquadrate una per una. */
.adm[data-stile="evidenza"]{text-align:center;padding:18px 20px;border-radius:14px;
  border:1px solid color-mix(in srgb, var(--adm-bordo,#e95a0c) 45%, transparent)}
/* Il bollo si allinea al centro del testo che ha accanto, non alla sua prima
   riga: con una dicitura di due o tre righe stava appeso in alto. */
/* Il bollo sta a sinistra e la dicitura comincia subito dopo: le due cose
   si leggono come una sola, invece che come un tondo solo a un capo e del
   testo all'altro. align-items le allinea al centro fra loro, cosi' con una
   dicitura di due o tre righe il bollo non resta appeso in alto.
   La dicitura torna allineata a sinistra: il riquadro centra tutto -- ed e'
   giusto per le righe brevi sotto -- ma un titolo di due righe centrate
   accanto a un bollo si legge peggio di uno a bandiera. */
/* Bollo e dicitura si comportano come un blocco solo: si centrano insieme
   nel riquadro. flex:0 1 auto e non flex:1, perche' con flex:1 la dicitura
   si prenderebbe tutto lo spazio e il gruppo sarebbe sempre largo quanto il
   riquadro -- centrarlo non si vedrebbe. Cosi' invece il gruppo e' largo
   quanto il suo contenuto, e quando il testo e' breve resta in mezzo. */
.adm-capo{display:flex;gap:12px;align-items:center;justify-content:center}
.adm-dicitura{flex:0 1 auto;text-align:left}
/* Tondo, non a pastiglia: larghezza e altezza uguali e raggio pieno. Il
   colore e' quello del testo che lo circonda, cosi' con il fondo trasparente
   l'avviso si accorda da solo a qualsiasi pagina lo ospiti. */
.adm-eta{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;border:1.5px solid currentColor;border-radius:50%;
  font-size:var(--t-minuto);font-weight:700;line-height:1}
.adm-dicitura{font-weight:700;font-size:var(--t-piccolo);line-height:1.35}
.adm[data-stile="evidenza"] .adm-prob{margin-top:10px}
.adm[data-stile="evidenza"] .adm-conc{margin-top:13px;padding-top:13px;font-size:var(--t-minuto);
  border-top:1px solid color-mix(in srgb, currentColor 20%, transparent);opacity:.85}

/* L'apertura usata da sola in una pagina -- categoria -- ha bisogno del suo
   stacco: nelle fasce della home glielo da' la fascia che la contiene, qui
   non c'e' niente e finiva appiccicata alla griglia. */
.contenitore > .apertura{margin-bottom:34px}

/* ---------- scheda autore ----------
   La testata della pagina autore riusa il riquadro che sta in fondo agli
   articoli: e' la stessa cosa, vista da vicino. Cambia solo la misura del
   nome, che li' e' un rimando e qui e' il titolo della pagina. */
/* Con la foto la scheda diventa una griglia a due colonne: il ritratto a
   sinistra, tutto il resto a destra e allineato fra se'. Senza foto resta
   una colonna sola, e non serve dichiarare niente. */
.scheda-autore.con-foto{display:grid;grid-template-columns:auto 1fr;
  column-gap:18px;row-gap:0;align-items:start}
.scheda-autore.con-foto > :not(.autore-foto){grid-column:2}
/* Larghezza e altezza vanno dette qui e non solo negli attributi: la regola
   generale "img{height:auto}" li scavalcherebbe, e un ritratto quadrato
   diventerebbe un ovale. */
.autore-foto{width:64px;height:64px;border-radius:50%;object-fit:cover;
  grid-row:1 / span 99;align-self:start;border:1px solid var(--riga)}
.scheda-autore-testata .autore-foto{width:96px;height:96px}
.scheda-autore-testata{margin:6px 0 30px}
.scheda-autore-testata h1{font-size:clamp(var(--t-titolo),3.4vw,calc(var(--t-titolo) * 1.48));margin:0 0 6px;letter-spacing:-.02em}
.scheda-autore-testata .ruolo{color:var(--accento-testo);font-size:var(--t-piccolo);margin:0 0 12px}
.scheda-autore-testata .bio{margin:0 0 12px;max-width:var(--stretto)}
.scheda-autore-testata .competenza{color:var(--testo-2);font-size:var(--t-piccolo);margin:0;max-width:var(--stretto)}
.scheda-autore-testata .competenza span{color:var(--testo-3)}
.autore-link{display:flex;gap:16px;margin:14px 0 0;font-size:var(--t-piccolo)}
.autore-link a{display:inline-flex;align-items:center;gap:7px;color:var(--testo-2);text-decoration:none}
.autore-link a:hover{color:var(--accento-testo)}
.titolo-elenco{font-size:var(--t-medio);margin:0 0 16px;color:var(--testo-2);font-weight:600}
.scheda-autore h2 a{text-decoration:none}
.scheda-autore h2 a:hover{color:var(--accento-testo)}

/* =====================================================================
   Le scelte del template.

   Il tema scrive quattro attributi sul <body>; qui c'e' come si comporta
   ognuno. Il foglio dice il comportamento, il tema dice quale: cosi'
   cambiare template non riscrive un file, e aggiungerne uno nuovo vuol dire
   aggiungere un blocco qui, non cento.
   ===================================================================== */

/* ---- la testata ----
   Cinque strutture, e in tutte e cinque il menu si vede. Cambia dove sta, non
   se esiste: una testata che nasconde la navigazione dietro un pulsante non e'
   minimale, e' un sito in cui non si gira. Il pulsante a scomparsa resta solo
   dove serve davvero, sullo schermo stretto. */

/* Logo a sinistra, menu spinto a destra: la ricerca chiude la fila. */
body[data-testata="compatta"] .nav-principale{margin-left:auto;flex:none}
body[data-testata="compatta"] .cerca{margin-left:18px}

/* La testata come un riquadro staccato dai bordi, appoggiato sulla pagina.
   Prima qui c'era una "affiancata" che spostava il menu a sinistra: con otto
   voci il menu riempiva gia' la riga, non restava spazio libero da spostare, e
   misurata veniva identica alla compatta. Due scelte che danno lo stesso
   risultato sono una scelta sola con due nomi. */
body[data-testata="riquadrata"] .testata{background:transparent;border-bottom:0;padding:12px 0}
body[data-testata="riquadrata"] .testata .riga{background:var(--piano);border:1px solid var(--riga);
  border-radius:var(--raggio);padding:0 20px;height:58px}
body[data-testata="riquadrata"] .testata.staccata{box-shadow:none}
body[data-testata="riquadrata"] .testata.staccata .riga{box-shadow:0 8px 26px rgba(0,0,0,.35)}
body[data-testata="riquadrata"] .nav-principale{margin-left:auto;flex:none}
body[data-testata="riquadrata"] .cerca{margin-left:18px}
/* Il sottomenu esce dal riquadro: senza questo si aprirebbe attaccato al bordo
   di sopra invece che sotto la voce. */
body[data-testata="riquadrata"] .sottomenu{margin-top:4px}

/* Logo centrato sopra, menu centrato sotto. */
body[data-testata="alta"] .testata .riga{flex-direction:column;gap:12px;padding:18px 20px;height:auto}
body[data-testata="alta"] .marchio{margin:0 auto;padding-right:0}
body[data-testata="alta"] .nav-principale{justify-content:center;width:100%}
body[data-testata="alta"] .cerca{margin-left:18px}

/* Un filo d'accento in cima, per il resto come la compatta. */
body[data-testata="barra"] .testata{border-top:4px solid var(--accento)}
body[data-testata="barra"] .testata .riga{padding-top:6px}
body[data-testata="barra"] .nav-principale{margin-left:auto;flex:none}
body[data-testata="barra"] .cerca{margin-left:18px}

/* Logo su una riga sua, menu su una barra a tutta larghezza sotto. */
body[data-testata="divisa"] .testata .riga{flex-wrap:wrap;height:auto;padding:14px 20px 0}
body[data-testata="divisa"] .marchio{width:100%;padding:0 0 12px}
body[data-testata="divisa"] .apri-menu{position:absolute;right:20px;top:14px}
body[data-testata="divisa"] .nav-principale{width:100%;border-top:1px solid var(--riga)}
body[data-testata="divisa"] .cerca{margin-left:auto}

/* ---- le schede ----
   Il contenitore flessibile e' .scheda-link, non .scheda: la scheda e' il
   riquadro, il link e' cio' che dentro impila immagine e testo. Girare
   .scheda non girava niente -- la regola c'era e puntava all'elemento
   sbagliato, che e' il modo piu' silenzioso di non funzionare. */
body[data-scheda="orizzontale"] .scheda-link{flex-direction:row;align-items:stretch}
body[data-scheda="orizzontale"] .scheda-img{aspect-ratio:1;flex:0 0 128px;height:auto}
body[data-scheda="orizzontale"] .scheda-corpo{justify-content:center}
/* REGOLA NUOVA, non una sostituzione. Il titolo scende di un passo, come in
   "elenco" e in griglia "quattro", e per la stessa ragione: l'immagine si prende
   128px sul fianco, quindi la colonna del testo e' stretta.
   Misurato prima di scriverla: alzando il corpo da 17 a 18px, `sobria` e
   `morbida` orizzontali mandavano il titolo da quattro righe a cinque -- le
   uniche due combinazioni su 25. Non era rotto, ma era una riga in piu' che
   nessuno aveva chiesto.

   CASCATA: `body[data-griglia="quattro"] .scheda h3` ha la STESSA specificita'
   e sta piu' in basso, quindi su una pagina che e' insieme orizzontale e a
   quattro colonne vince quella. Oggi non si vede -- dicono tutt'e due
   --t-base -- ma il giorno che una delle due cambia, l'altra sparisce in
   silenzio. Chi tocca una delle due guardi l'altra. */
body[data-scheda="orizzontale"] .scheda h3{font-size:var(--t-base)}

body[data-scheda="grande"] .scheda-img{aspect-ratio:4/3}
/* La scheda a copertina e' la piu' grande delle cinque, e deve restare tale:
   se il tema alza il corpo e questa non lo segue, a un certo punto la scheda
   "grande" diventa piu' piccola della "verticale". Qui si conserva la
   PROPORZIONE, non il numero. */
body[data-scheda="grande"] .scheda h3{font-size:var(--t-grande)}

/* Senza immagine: si nasconde invece di non stamparla, perche' la stessa
   scheda serve a tutti i template e il markup resta uno solo. */
body[data-scheda="testuale"] .scheda-img{display:none}
body[data-scheda="testuale"] .scheda{background:transparent;border-width:0 0 1px 0;border-radius:0}
body[data-scheda="testuale"] .scheda:hover{transform:none;border-color:var(--accento)}
body[data-scheda="testuale"] .scheda-corpo{padding:14px 0}

/* A elenco: niente riquadri, una riga per articolo con la data a destra. E'
   la forma di chi pubblica molto e vuole farlo vedere -- venti titoli nello
   spazio in cui la griglia ne mette sei. */
body[data-scheda="elenco"] .griglia{display:block}
body[data-scheda="elenco"] .scheda{background:transparent;border-width:0 0 1px 0;
  border-radius:0;overflow:visible}
body[data-scheda="elenco"] .scheda:hover{transform:none}
body[data-scheda="elenco"] .scheda-link{flex-direction:row;align-items:baseline;gap:16px}
body[data-scheda="elenco"] .scheda-img{display:none}
body[data-scheda="elenco"] .scheda-corpo{flex-direction:row;align-items:baseline;gap:16px;
  justify-content:space-between;flex-wrap:wrap;padding:13px 0}
/* Un passo sotto il titolo di scheda normale: la riga e' stretta. Era 16,5 qui
   e 16 su griglia "quattro" -- due numeri per la stessa intenzione, scritti in
   momenti diversi. Adesso sono la stessa cosa detta una volta. */
body[data-scheda="elenco"] .scheda h3{font-size:var(--t-base);margin:0;flex:1 1 62%}
body[data-scheda="elenco"] .scheda-corpo > p{display:none}
body[data-scheda="elenco"] .scheda-pie{margin:0;white-space:nowrap}

/* ---- quante schede per riga ----
   La densita' e il tipo di scheda sono due domande diverse, e prima si
   pestavano: entrambi scrivevano grid-template-columns, e vinceva l'ultimo
   scritto nel file -- cioe' il caso, non una scelta. Ora ognuno scrive la
   propria variabile e la griglia le somma: la densita' dice la base, il tipo
   di scheda dice quanto spazio in piu' gli serve. */
body{--colonna-base:268px;--colonna-piu:0px}
body[data-griglia="tre"]    {--colonna-base:300px}
body[data-griglia="due"]    {--colonna-base:420px}
body[data-griglia="quattro"]{--colonna-base:262px}
body[data-scheda="orizzontale"]{--colonna-piu:120px}
body[data-scheda="testuale"]   {--colonna-piu:30px}
.griglia{grid-template-columns:repeat(auto-fill,minmax(calc(var(--colonna-base) + var(--colonna-piu)),1fr))}
body[data-griglia="quattro"] .griglia{gap:18px}
body[data-griglia="due"] .griglia{gap:26px}
body[data-griglia="quattro"] .scheda h3{font-size:var(--t-base)}

/* ---- l'apertura ----
   Il pezzo grande in cima. Quattro modi di metterlo, e cambiano dove finisce
   l'occhio: di fianco, capovolto, sopra la figura, o sotto una figura larga. */
body[data-apertura="capovolta"] .apertura-pezzo{direction:rtl}
body[data-apertura="capovolta"] .apertura-pezzo > *{direction:ltr}

body[data-apertura="sovrapposta"] .apertura-pezzo{display:block;position:relative;
  border-radius:var(--raggio);overflow:hidden}
body[data-apertura="sovrapposta"] .apertura-figura{border-radius:0;aspect-ratio:21/9;min-height:340px}
body[data-apertura="sovrapposta"] .apertura-figura::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,0) 75%)}
body[data-apertura="sovrapposta"] .apertura-testo{position:absolute;inset:auto 0 0 0;z-index:2;
  padding:28px;max-width:780px;color:#fff}
body[data-apertura="sovrapposta"] .apertura-testo p{color:#e4e8f2}
body[data-apertura="sovrapposta"] .apertura-pie{color:#c9d0e0}
/* Senza figura non c'e' niente su cui sovrapporsi: si torna al pezzo normale,
   invece di lasciare del testo bianco su fondo scuro dentro un riquadro vuoto. */
body[data-apertura="sovrapposta"] .apertura-pezzo.senza-figura .apertura-testo{position:static;
  padding:0;color:inherit;max-width:none}
body[data-apertura="sovrapposta"] .apertura-pezzo.senza-figura .apertura-testo p{color:var(--testo-2)}

body[data-apertura="centrata"] .apertura-pezzo{display:block}
body[data-apertura="centrata"] .apertura-figura{aspect-ratio:21/9}
body[data-apertura="centrata"] .apertura-testo{max-width:76ch;margin:22px auto 0;text-align:center}
body[data-apertura="centrata"] .apertura-pie{justify-content:center}
body[data-apertura="centrata"] .apertura-pezzo.senza-figura .apertura-testo{border-left:0;padding-left:0}

/* ---- magazine o blog ----
   Un magazine impagina in larghezza e si scorre con l'occhio; un blog impagina
   in altezza e si scorre leggendo. Il blog non tocca grid-template-columns --
   che appartiene alla densita' -- ma cambia il display: cosi' le due scelte si
   compongono invece di contendersi la stessa proprieta'. */
body[data-impianto="blog"] .fascia-dentro{max-width:min(var(--largo),780px)}
body[data-impianto="blog"] .griglia{display:block}
body[data-impianto="blog"] .griglia > * + *{margin-top:22px}
/* Il blog stringe la colonna, NON raddrizza l'apertura: appiattendola,
   "immagine a sinistra" e "immagine a destra" diventavano la stessa pagina --
   duecentocinquanta coppie di template identici in un elenco che promette
   mille cose diverse. La larghezza e' del blog, l'apertura e' dell'apertura. */
body[data-impianto="blog"] .apertura-pezzo{gap:20px}
body[data-impianto="blog"] .apertura-spalla ol{display:block}
body[data-impianto="blog"] .carosello-piste{grid-auto-columns:minmax(240px,78%)}
body[data-impianto="blog"] .edicola{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
/* Nel blog la scheda a griglia diventa una scheda larga: l'immagine sopra a
   tutta colonna e il testo sotto, che e' come si legge un articolo in lista. */
body[data-impianto="blog"][data-scheda="verticale"] .scheda-img,
body[data-impianto="blog"][data-scheda="grande"] .scheda-img{aspect-ratio:2/1}

/* ---- i titoli ---- */
body[data-titoli="maiuscoli"] .scheda h3,
body[data-titoli="maiuscoli"] .fascia-testa h2,
body[data-titoli="maiuscoli"] .apertura-testo h2,
body[data-titoli="maiuscoli"] .testata-sezione h1{text-transform:uppercase;letter-spacing:.01em}

/* ---- i componenti ----
   Carosello, edicola e banner non erano legati a niente: qualunque template si
   scegliesse restavano identici, ed erano la meta' della home. Ora seguono le
   stesse scelte del resto -- la densita' decide quanto sono larghe le piste,
   la forma decide quanto sono tonde, l'apertura decide quanto e' alto il
   banner. */
.carosello-piste{grid-auto-columns:minmax(calc(var(--colonna-base) + var(--colonna-piu)),1fr)}
body[data-scheda="elenco"] .carosello-piste{grid-auto-flow:row;grid-auto-columns:auto;
  overflow:visible;scroll-snap-type:none}
/* In questo template il carosello NON e' un carosello: e' una lista che scende.
   Due frecce «avanti e indietro» sopra una colonna verticale non vorrebbero
   dire niente, e il JavaScript le lascia comunque spente perche' non c'e'
   niente da scorrere in orizzontale -- questa riga e' la cintura in piu'. */
body[data-scheda="elenco"] .carosello-freccia{display:none}
body[data-griglia="due"] .edicola{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
body[data-griglia="quattro"] .edicola{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
body[data-apertura="sovrapposta"] .banner-testo{padding:48px 34px}
body[data-apertura="centrata"] .banner-testo{margin:0 auto;text-align:center;max-width:720px}

/* ---- il ritmo delle fasce ---- */
body[data-ritmo="chiaro"] .fascia-scura{background:transparent;border-top:0;border-bottom:0}
body[data-ritmo="pieno"] .fascia{padding:0 0 44px}
body[data-ritmo="pieno"] .fascia-scura{border:0}

/* ---- il pie' di pagina ---- */
body[data-piede="compatto"] .pie-griglia{display:flex;flex-wrap:wrap;gap:26px}
/* RESTA ASSOLUTA, ed e' l'unica delle cinque.
   Non e' tipografia di lettura: e' un'etichetta di colonna in un pie' che si
   compatta, e il suo mestiere e' NON crescere quando cresce il resto. Legandola
   alla scala, un cliente che alza il testo per leggibilita' si ritroverebbe il
   pie' gonfio -- l'opposto di cio' che "compatto" promette. Qui il valore
   assoluto E' la decisione. */
body[data-piede="compatto"] .pie-griglia h2{font-size:13px}
body[data-piede="ampio"] .pie{padding-top:34px}
body[data-piede="ampio"] .pie-griglia{gap:40px}

.etichette{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0}
.etichetta{border:1px solid var(--riga);border-radius:99px;padding:4px 12px;font-size:var(--t-minuto);color:var(--testo-2)}

.scheda-autore{margin:30px 0;padding:18px;background:var(--piano);border:1px solid var(--riga);border-radius:var(--raggio)}
.scheda-autore h2{margin:0 0 2px;font-size:var(--t-medio)}
.scheda-autore .ruolo{color:var(--accento-testo);font-size:var(--t-minuto);margin:0 0 8px}
.scheda-autore p{margin:0;color:var(--testo-2);font-size:var(--t-piccolo)}

.vuoto{color:var(--testo-3);padding:40px 0;text-align:center}
.bottone{display:inline-block;background:var(--accento);color:var(--su-accento);padding:10px 18px;
  border-radius:var(--raggio-s);text-decoration:none;font-weight:650;border:0;font:inherit;font-weight:650;cursor:pointer}
.bottone.chiaro{background:transparent;color:var(--testo);border:1px solid var(--riga)}
.bottone:hover{filter:brightness(1.08)}

/* ---------- pie' di pagina ----------
   In cima le informative su una riga sola: sono i link che si cercano per
   obbligo o per necessita', e devono stare dove si guarda per primo. Sotto le
   colonne, poi l'avviso di legge, poi le due righe minute. */
.pie{border-top:1px solid var(--riga);background:var(--piano);margin-top:56px;padding:0 20px 30px}

.pie-legali{max-width:var(--largo);margin:0 auto;display:flex;flex-wrap:wrap;gap:6px 26px;
  padding:20px 0;border-bottom:1px solid var(--riga)}
.pie-legali a{color:var(--testo-2);text-decoration:none;font-size:var(--t-piccolo);font-weight:550}
.pie-legali a:hover{color:var(--accento-testo)}

.pie-griglia{max-width:var(--largo);margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:30px;padding:30px 0}
.pie h2{font-size:var(--t-minuto);text-transform:uppercase;letter-spacing:.13em;color:var(--testo-3);margin:0 0 12px}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:9px}
.pie a{color:var(--testo-2);text-decoration:none;font-size:var(--t-piccolo)}
.pie a:hover{color:var(--accento-testo)}
.pie-testo{margin:0 0 8px;color:var(--testo-2);font-size:var(--t-piccolo);line-height:1.6}
.pie-testo a{text-decoration:underline;text-underline-offset:2px}

/* La fascia dell'avviso sta fra il contenuto e il pie', e porta lo stesso
   incolonnamento dei contenuti del pie': stessa larghezza massima, stesso
   margine laterale. Prima la larghezza gliela dava ".pie .adm", che da fuori
   dal pie' non vale piu'. */
/* La fascia dell'anteprima: appiccicata in cima, sopra alla testata, con un
   colore che non appartiene al sito -- deve stonare, e' il suo mestiere. */
.fascia-anteprima{position:sticky;top:0;z-index:60;display:flex;gap:10px;flex-wrap:wrap;
  align-items:baseline;justify-content:center;padding:9px 20px;font-size:var(--t-piccolo);
  background:#8a5a00;color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.fascia-anteprima b{font-weight:700}

.adm-fascia{display:flex;justify-content:center;padding:0 20px;margin-top:56px}
.adm-fascia .adm{max-width:var(--largo);width:100%}
/* Con l'avviso sopra, il pie' non deve staccarsi una seconda volta. */
.adm-fascia + .pie{margin-top:22px}
.social{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- banner cookie ---------- */
.cookie{position:fixed;inset:auto 0 0 0;z-index:50;background:var(--piano);border-top:1px solid var(--riga);
  box-shadow:0 -8px 30px rgba(0,0,0,.35);padding:20px}
.cookie-corpo{max-width:var(--largo);margin:0 auto}
.cookie h2{margin:0 0 6px;font-size:var(--t-medio)}
.cookie > .cookie-corpo > p{margin:0 0 14px;color:var(--testo-2);font-size:var(--t-piccolo)}
.cookie-voce{display:flex;gap:10px;align-items:flex-start;padding:8px 0;font-size:var(--t-piccolo)}
.cookie-voce input{margin-top:4px}
.cookie-voce em{color:var(--testo-3);font-style:normal;font-size:var(--t-minuto);margin-left:6px}
.cookie-voce small{display:block;color:var(--testo-3);font-size:var(--t-minuto);line-height:1.5}
.cookie-bottoni{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* ---------- sottocategorie nel menu ----------
   La voce con figlie resta un collegamento vero, non un pulsante che apre e
   basta: chi tocca "Calcio" arriva alla categoria Calcio, e il secondo livello
   e' un di piu'. Si apre al passaggio del mouse e col fuoco da tastiera --
   :focus-within -- cosi' esiste anche per chi naviga con il Tab. */
.voce-gruppo{position:relative}
.voce-gruppo > a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--testo-2);
  font-size:var(--t-piccolo);font-weight:550;padding:6px 0;border-bottom:2px solid transparent}
.voce-gruppo:hover > a,.voce-gruppo:focus-within > a{color:var(--testo);border-bottom-color:var(--accento)}
.freccia{width:5px;height:5px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-1px);transition:transform .15s}
.voce-gruppo:hover .freccia,.voce-gruppo:focus-within .freccia{transform:rotate(225deg) translateY(-2px)}

.sottomenu{position:absolute;top:100%;left:0;min-width:210px;z-index:30;
  background:var(--piano-2);border:1px solid var(--riga);border-radius:var(--raggio-s);
  padding:6px;display:none;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.voce-gruppo:hover .sottomenu,.voce-gruppo:focus-within .sottomenu{display:block}
.sottomenu a{display:block;padding:8px 12px;border-radius:6px;text-decoration:none;
  color:var(--testo-2);font-size:var(--t-piccolo);border:0}
.sottomenu a:hover{background:var(--riga);color:var(--testo)}

/* Su schermo stretto niente tendine: il secondo livello si stende sotto. */
@media(max-width:900px){
  .sottomenu{position:static;display:block;background:transparent;border:0;box-shadow:none;
    padding:0 0 10px 14px;min-width:0}
  .sottomenu a{padding:9px 0;font-size:var(--t-piccolo);color:var(--testo-3)}
  .sottomenu a:hover{background:transparent;color:var(--accento-testo)}
}

/* Le figlie in cima alla pagina di categoria. */
.figlie{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.figlie a{border:1px solid var(--riga);border-radius:99px;padding:6px 14px;font-size:var(--t-piccolo);
  color:var(--testo-2);text-decoration:none}
.figlie a:hover{border-color:var(--accento);color:var(--testo)}

/* ---------- icone ---------- */
.social{gap:14px}
.social-ico{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border:1px solid var(--riga);border-radius:50%;color:var(--testo-2);font-size:var(--t-base);transition:all .15s}
.social-ico:hover{border-color:var(--accento);color:var(--accento-testo)}
.apertura-pie i,.scheda-pie i{margin-right:6px;opacity:.7;font-size:var(--t-mini)}
.apertura-pie time,.scheda-pie time{display:inline-flex;align-items:center}

/* Visibile solo a chi legge con la sintesi vocale: l'icona da sola non dice
   nulla a chi non la vede. */
.solo-lettori{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- pagina incorporata ----------
   Alta quanto la finestra meno la testata: un pannello di statistiche dentro
   una finestrella non si consulta. */
.incorporata{height:calc(100vh - 62px);min-height:520px;background:var(--piano)}
.incorporata iframe{display:block;width:100%;height:100%;border:0}
@media(max-width:900px){.incorporata{height:calc(100vh - 58px)}}

/* Il banner dei cookie non deve coprire la pagina: su schermo stretto
   arrivava a tre quarti di altezza e nascondeva il menu appena aperto. */
.cookie{max-height:min(78vh,620px);overflow-y:auto}
@media(max-width:900px){
  .cookie{padding:16px}
  .cookie h2{font-size:var(--t-base)}
  .cookie-voce{padding:6px 0}
  .cookie-bottoni .bottone{flex:1;text-align:center;padding:11px 12px}
}

/* Le due righe minute in fondo.
   Erano su --testo-3, e misurate davano 3,86:1 -- sotto la soglia di 4,5:1, per
   di piu' su testo piccolo, e la seconda aveva anche un'opacita' che peggiorava
   il valore reale. Sono testi obbligatori: piccoli si', ma leggibili. Con
   --testo-2 e senza opacita' stanno sopra 7:1. */
.riga-legale{max-width:var(--largo);margin:22px auto 0;color:var(--testo-2);font-size:var(--t-minuto);
  line-height:1.6;text-align:center;border-top:1px solid var(--riga);padding-top:18px}
.nota-legale{max-width:820px;margin:12px auto 0;color:var(--testo-2);
  font-size:var(--t-minuto);line-height:1.65;text-align:center}

.incorporata{position:relative}
.incorporata-ripiego{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:30px;background:var(--sfondo);text-align:center}
.incorporata-ripiego > div{max-width:520px}
.incorporata-ripiego i.fa-chart-simple{font-size:34px;color:var(--accento-testo);margin-bottom:16px;display:block}
.incorporata-ripiego h1{font-size:var(--t-display);margin:0 0 12px;letter-spacing:-.02em}
.incorporata-ripiego p{color:var(--testo-2);margin:0 0 12px;font-size:var(--t-base);line-height:1.6}
.incorporata-ripiego .minuto{color:var(--testo-3);font-size:var(--t-piccolo)}
.incorporata-ripiego .bottone{margin-top:8px;display:inline-flex;align-items:center;gap:9px}

/* ---------- citazioni da altra fonte ---------- */
.attribuzione{display:flex;align-items:center;gap:9px;margin:0 0 18px;padding:10px 14px;
  border-left:3px solid var(--accento);background:var(--piano);border-radius:0 var(--raggio-s) var(--raggio-s) 0;
  color:var(--testo-2);font-size:var(--t-piccolo)}
.attribuzione i{color:var(--accento-testo);font-size:var(--t-minuto)}
.attribuzione a{color:var(--testo);font-weight:600}
/* display:flex e larghezza al contenuto: con inline-flex il "margin:auto"
   non centra niente, perche' l'elemento non occupa una riga sua. */
.leggi-fonte{display:flex;width:fit-content;align-items:center;gap:10px;
  margin:26px auto 6px;font-size:var(--t-base)}
.leggi-fonte i{font-size:var(--t-minuto)}

/* ---------- ricerca ----------
   Chiude la fila delle voci, spinta a destra da margin-left:auto. E' un
   modulo vero: senza JavaScript invia lo stesso, e Invio nel campo fa quello
   che ci si aspetta. */
.cerca{display:flex;align-items:center;gap:8px;margin-left:auto;align-self:center;
  background:var(--sfondo);border:1px solid var(--riga);border-radius:99px;
  padding:0 14px;height:36px;transition:border-color .12s ease,width .18s ease}
.cerca:focus-within{border-color:var(--accento)}
.cerca i{color:var(--testo-3);font-size:var(--t-minuto)}
.cerca:focus-within i{color:var(--accento-testo)}
.cerca input{width:120px;background:none;border:0;color:var(--testo);font:inherit;font-size:var(--t-piccolo);
  padding:0;outline:none;transition:width .18s ease}
.cerca input:focus{width:200px}
.cerca input::placeholder{color:var(--testo-3)}
/* Il browser mette una sua crocetta nel campo di tipo search: stona con
   tutto il resto e la sua funzione ce l'ha gia' il tasto di cancellazione. */
.cerca input::-webkit-search-cancel-button{-webkit-appearance:none}

@media(max-width:900px){
  .cerca{margin:10px 0 0;width:100%;border-radius:var(--raggio-s);height:42px}
  .cerca input,.cerca input:focus{width:100%}
}

/* Il modulo ripetuto nella pagina dei risultati. */
.cerca-grande{display:flex;align-items:center;gap:12px;margin:0 0 26px;
  background:var(--piano);border:1px solid var(--riga);border-radius:var(--raggio);padding:8px 8px 8px 18px}
.cerca-grande:focus-within{border-color:var(--accento)}
.cerca-grande i{color:var(--testo-3)}
.cerca-grande input{flex:1;background:none;border:0;color:var(--testo);font:inherit;font-size:var(--t-base);
  padding:10px 0;outline:none}
.cerca-grande input::-webkit-search-cancel-button{-webkit-appearance:none}

/* ---------- edicola ----------
   Le prime pagine dei quotidiani. Le proporzioni sono dichiarate qui e non
   sulle immagini: sono file di altri, che cambiano ogni giorno e di cui non
   conosciamo le dimensioni. Senza, la pagina salterebbe mentre arrivano. */
.edicola{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px}
.edicola-voce{margin:0}
.edicola-voce a{display:block}
/* contain e non cover: le tre testate di oggi hanno lo stesso rapporto, ma
   una testata aggiunta domani potrebbe averne un altro, e con cover le si
   taglierebbe via la testata -- cioe' proprio la parte che la identifica.
   Due bande sono meno eleganti di un ritaglio, e infinitamente meglio. */
.edicola-voce img{width:100%;aspect-ratio:810/1189;object-fit:contain;object-position:center;
  display:block;border-radius:var(--raggio-s);border:1px solid var(--riga);background:var(--piano-2);
  transition:transform .18s ease,border-color .18s ease}
.edicola-voce a:hover img{transform:translateY(-3px);border-color:var(--accento)}
.edicola-voce figcaption{margin-top:10px;font-size:var(--t-minuto);color:var(--testo-2);font-weight:600;text-align:center}
@media(max-width:520px){.edicola{grid-template-columns:repeat(2,1fr);gap:14px}}

/* ---------- barra delle condivisioni ----------
   Segue il tema come tutto il resto: raggio, accento e righe vengono dalle
   variabili, quindi cambiando template cambia anche lei. */
.condivisioni{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:30px 0 0;padding-top:20px;border-top:1px solid var(--riga)}
.condivisioni-eti{font-size:var(--t-minuto);text-transform:uppercase;letter-spacing:.12em;color:var(--testo-3)}
.condivisioni-tasti{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.condividi{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:38px;height:38px;padding:0 11px;border:1px solid var(--riga);border-radius:var(--raggio-s);
  background:transparent;color:var(--testo-2);font:inherit;font-size:var(--t-piccolo);text-decoration:none;
  cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.condividi:hover{border-color:var(--accento);color:var(--accento-testo)}
.condividi:focus-visible{outline:2px solid var(--accento);outline-offset:2px}
.condividi i{font-size:var(--t-base)}
.condividi-detto{font-size:var(--t-piccolo);white-space:nowrap}

/* Il pulsante spento: senza JavaScript resta cosi', e si vede che non e'
   pronto invece di sembrare rotto quando lo si preme. */
.condividi[disabled]{opacity:.45;cursor:default}
.condividi[disabled]:hover{border-color:var(--riga);color:var(--testo-2)}

/* La conferma: verde quando ha copiato, ambra quando tocca farlo a mano. */
.condividi.copiato{border-color:#3fb98a;color:#3fb98a}
.condividi.non-copiato{border-color:var(--accento);color:var(--accento-testo)}

@media(max-width:520px){
  .condivisioni{gap:10px}
  /* A riposo restano le sole icone: sette scritte in fila non ci starebbero,
     e l'icona dice gia' cosa fa il tasto. */
  .condividi-detto{display:none}
  .condividi{padding:0}
  /* La conferma pero' torna a farsi vedere, ed e' l'unico caso in cui la
     scritta serve. Il bordo che cambia colore per un secondo e mezzo su uno
     schermo da telefono e' un segnale che si perde: e' sottile, dura poco, e
     il dito sta appoggiato proprio sopra la cosa che dovrebbe guardare. Una
     parola no. Il pulsante si allarga per il tempo del messaggio e gli altri
     scorrono, che e' meno peggio di una conferma che non arriva. */
  .condividi.copiato .condividi-detto,
  .condividi.non-copiato .condividi-detto{display:inline}
  .condividi.copiato,
  .condividi.non-copiato{padding:0 11px}
}

/* ---------- torna in cima ----------
   Stessa idea del pannello: visibile di suo, nascosta dal JavaScript quando
   la pagina e' gia' in alto, cosi' senza JavaScript resta un'ancora buona.
   Sta sopra al banner dei cookie di un filo, ma piu' in alto quando il banner
   c'e': un pulsante coperto e' un pulsante che non c'e'. */
.in-cima{position:fixed;right:16px;bottom:16px;z-index:40;
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--piano-2);border:1px solid var(--riga);color:var(--testo-2);
  text-decoration:none;font-size:var(--t-base);
  box-shadow:0 6px 20px rgba(0,0,0,.3);transition:opacity .18s,transform .18s,color .15s}
.in-cima:hover{color:var(--testo);border-color:var(--accento)}
.in-cima:focus-visible{outline:2px solid var(--accento);outline-offset:2px}
.in-cima.via{opacity:0;transform:translateY(10px);pointer-events:none}
@media (prefers-reduced-motion:reduce){.in-cima{transition:none}}

/* ---------- sotto l'articolo ----------
   Le due fasce riusano tutto quello che gia' esiste -- .fascia, .griglia, la
   scheda -- percio' qui serve una cosa sola: staccarle dal testo. Un filo
   sopra, e non un margine soltanto, perche' a fine articolo bisogna capire
   che il pezzo e' finito e comincia altro.

   Il filo sta sul contenitore e non sulla prima fascia: la prima fascia puo'
   essere scura, e un bordo dentro un fondo scuro non si vede.

   Nell'impianto «blog» la colonna del sito e' stretta (780px), e le fasce la
   seguono da sole: .fascia-dentro e' gia' limitata li'. Non c'e' niente da
   dire qui, ed e' il segno che il riuso e' quello giusto. */
.sotto-articolo{margin-top:44px;border-top:1px solid var(--riga)}
.sotto-articolo .fascia:first-child{padding-top:30px}


/* ---------- i bollini nella nota in fondo ----------
   Adesso quel campo accetta le immagini, e il freno si sposta dall'elenco dei
   tag al foglio di stile: qualunque cosa ci si carichi dentro esce alta 22px.
   E' il posto dei bollini -- ADM, gioco responsabile, 18+ -- non delle figure,
   e chi ne mette una grande ottiene un bollino invece di un pie' di pagina
   sfondato. Il freno qui e non nel salvataggio perche' un'immagine grande non
   e' un errore da rifiutare: e' una misura da imporre.

   I <p> che la barra puo' produrre non aggiungono spazio: e' l'ultima riga
   della pagina, non un articolo. */
.nota-legale img{height:22px;width:auto;vertical-align:middle;display:inline-block}
.nota-legale p{margin:0}
.nota-legale p + p{margin-top:8px}
/* justify-content, e non e' una dimenticanza qualunque: .nota-legale ha gia'
   text-align:center, ma questa riga e' un FLEX e un flex il text-align non lo
   guarda -- impacchetta a flex-start. I bollini finivano a sinistra sotto un
   testo centrato, e la regola che avrebbe dovuto centrarli c'era gia' ed era
   inutile. Cambiando display si cambia anche chi decide l'allineamento. */
.nota-legale .bollini{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px;margin-top:10px}