/* 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;
  /* I link nel contenuto. Li riscrive il blocco del tema, come tutti gli altri
     -- ma un valore di serie ci vuole lo stesso: `color:var(--link)` senza
     nessuna dichiarazione e' una proprieta' NON VALIDA, e il colore diventa
     quello ereditato. Un link che si legge come testo normale e' peggio di un
     link di un colore sbagliato: non si vede che e' un link. */
  --link:#ed5267; --link-passaggio:#e40020;
  /* Le due fasce e il passaggio: valgono quello che il foglio usava prima che
     esistessero, cosi' anche senza il blocco del tema la pagina sta in piedi. */
  --testata-fondo:#222542; --testata-testo:#9fa1ad;
  --piede-fondo:#222542;   --piede-testo:#9fa1ad;
  --passaggio:#ed5267;
  /* Banner cookie e riquadri di lato: valgono i colori delle schede, che e'
     quello che usavano prima di avere una variabile loro. */
  --cookie-fondo:#222542; --cookie-testo:#9fa1ad;
  --box-fondo:#222542;    --box-riga:#323550;   --box-titolo:#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(--testata-fondo);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(--passaggio)}

.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(--testata-testo);
  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}

/* IL PASSAGGIO DEL MOUSE E' UNA MANOPOLA, e queste sei regole non la
   ascoltavano: usavano `--testo`, cioe' il colore del testo normale. Sul menu
   -- che e' il passaggio piu' visibile del sito -- chi cambiava il colore del
   passaggio non vedeva succedere niente. Misurato: la voce di menu diventava
   #28303e mentre la manopola diceva #a85d05. */
.nav-principale > a:hover,
.voce-gruppo:hover > a,
.voce-gruppo:focus-within > a{color:var(--passaggio);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,
.testata-sezione .descrizione-sezione{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. */
/* Spenta: il colore si SMORZA mescolandolo col fondo, non si rende
   trasparente. Con l'opacita' il colore reso non e' piu' quello impostato --
   e su una freccia che sta sopra una fotografia si vedeva pure la foto
   attraverso il bordo. */
.carosello-freccia[disabled]{color:color-mix(in srgb,currentColor 35%,var(--piano));
  border-color:color-mix(in srgb,var(--riga) 45%,var(--piano));
  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(--passaggio)}
/* Il sommario non e' piu' un <p> ma un contenitore di HTML scritto dal
   pannello: la classe sta accanto al tag, cosi' la regola vale per tutti e
   due e non ci sono due elenchi di valori che possono divergere. */
.apertura-testo p,
.apertura-testo .sommario{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(--passaggio)}

/* 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(--passaggio)}

.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}
/* I LINK NEL CONTENUTO hanno un colore loro, `--link`, che si regola dal
   pannello. Prima usavano `--accento-testo`, che pero' fa anche l'altro
   mestiere -- le voci attive del menu, «vedi tutto», i titoli al passaggio --
   e i due si vogliono regolare separatamente: un link dentro un articolo lo
   legge chi sta leggendo, e a volte deve staccare piu' (o meno) di quanto
   stacchino le decorazioni.
   Di partenza `--link` VALE `--accento-testo`, quindi finche' nessuno lo
   tocca non cambia niente. */
.corpo a,.descrizione-sezione a,.nota-legale a{
  color:var(--link);text-decoration:underline;text-underline-offset:2px}
.corpo a:hover,.descrizione-sezione a:hover,.nota-legale a:hover{color:var(--link-passaggio)}
.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%, var(--adm-fondo,#f4f4f5));
  color:color-mix(in srgb, currentColor 85%, var(--adm-fondo,#f4f4f5))}

/* 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)}
/* La biografia nel riquadro a fondo articolo era un <p> nudo e prendeva i
   margini di serie dei paragrafi; adesso e' un contenitore, e i margini se
   li devono dare i paragrafi che ha dentro. Senza questo il riquadro si
   chiudeva addosso al testo. */
.scheda-autore .bio{margin:0}
.scheda-autore .bio > :first-child{margin-top:0}
.scheda-autore .bio > :last-child{margin-bottom:0}
/* Vale per tutti i campi di prosa che ora accettano HTML: il primo e
   l'ultimo figlio non devono aggiungere spazio a quello che li contiene,
   se no ogni riquadro cresce di un margine che nessuno ha chiesto. */
.sommario > :first-child,
.descrizione-sezione > :first-child,
.cookie-testo > :first-child{margin-top:0}
.sommario > :last-child,
.descrizione-sezione > :last-child,
.cookie-testo > :last-child{margin-bottom:0}
.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(--passaggio)}
.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(--passaggio)}

/* =====================================================================
   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,
body[data-apertura="sovrapposta"] .apertura-testo .sommario{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,
body[data-apertura="sovrapposta"] .apertura-pezzo.senza-figura .apertura-testo .sommario{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}
/* Il pulsante «chiaro» e' un fantasma: prende il colore del testo della
   PAGINA. Va bene finche' sta sulla pagina. */
.bottone.chiaro{background:transparent;color:var(--testo);border:1px solid var(--riga)}
/*
 * DENTRO IL BANNER SEGUE IL BANNER, e questa riga vale due pulsanti che non
 * si leggevano.
 *
 * `.bottone.chiaro` usa `--testo`: con un banner scuro su un sito chiaro,
 * «Salva le mie scelte» e «Solo i necessari» erano #28303e su #28303e --
 * dello stesso identico colore del fondo. Si vedeva solo il bordo, e due
 * scelte su tre erano illeggibili proprio nel riquadro che chiede un
 * consenso.
 *
 * E' la terza volta che questa forma si ripete (i titoli delle voci, le note,
 * adesso i pulsanti): un elemento pensato per la pagina, messo dentro una
 * scatola che ha un fondo suo. Il bordo si ricava dal colore del testo invece
 * di prendere `--riga`, che e' un tono della pagina e su un fondo diverso non
 * vuol dire niente.
 */
.cookie .bottone.chiaro{color:inherit;border-color:color-mix(in srgb,currentColor 45%,var(--cookie-fondo))}
.cookie .bottone.chiaro:hover{border-color:currentColor;filter:none;
  background:color-mix(in srgb,currentColor 12%,var(--cookie-fondo))}
.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. */
/*
 * IL PIE' DICHIARA IL SUO COLORE, come la testata e il banner.
 *
 * Non lo faceva: le regole tinte erano quelle dei link e di `.pie-testo`, e
 * tutto il resto -- la riga di copyright, «Official Partner», la nota legale
 * -- ereditava `--testo` dalla PAGINA. Con un pie' scuro su un sito chiaro
 * stavano a 2.15:1, misurati: si leggevano a fatica e su schermo luminoso
 * sparivano.
 *
 * E' la quarta volta che questa forma si ripete oggi (i titoli delle voci del
 * banner, le loro note, i pulsanti, adesso il pie'): una scatola con un fondo
 * suo deve avere anche un colore suo, o tutto quello che non e' tinto a mano
 * prende quello di un'altra.
 *
 * I TONI PIU' TENUI SI FANNO CON `color-mix`, NON CON `opacity`. Con
 * l'opacita' il colore che si imposta nel pannello non e' quello che si vede:
 * passa il fondo attraverso, e il valore scritto e quello reso non coincidono
 * piu'. Mescolando col fondo della scatola esce un colore VERO, ricavato dagli
 * stessi due colori che si sono scelti, e niente e' trasparente.
 */
.pie{border-top:1px solid var(--riga);background:var(--piede-fondo);color:var(--piede-testo);
  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(--piede-testo);text-decoration:none;font-size:var(--t-piccolo);font-weight:550}
.pie-legali a:hover{color:var(--passaggio)}

.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}
/* I titoli delle colonne: lo stesso colore del pie', appena piu' tenue.
   Prima `--testo-3`, che e' un tono della pagina e su un fondo diverso non
   vuol dire niente. */
.pie h2{font-size:var(--t-minuto);text-transform:uppercase;letter-spacing:.13em;
  color:color-mix(in srgb,currentColor 72%,var(--piede-fondo));margin:0 0 12px}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:9px}
.pie a{color:var(--piede-testo);text-decoration:none;font-size:var(--t-piccolo)}
.pie a:hover{color:var(--passaggio)}
.pie-testo{margin:0 0 8px;color:var(--piede-testo);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 ---------- */
/*
 * TUTTO DENTRO IL BANNER SEGUE IL COLORE DEL BANNER.
 *
 * Prima lo faceva solo il paragrafo: i titoli delle voci, gli <strong> e le
 * <label> ereditavano `--testo` dalla PAGINA. Finche' banner e pagina avevano
 * lo stesso fondo non si notava; con un banner scuro su un sito chiaro sono
 * diventati testo scuro su fondo scuro -- misurato, #28303e su #28303e, cioe'
 * invisibili.
 *
 * E' la stessa famiglia della testata e del pie': una scatola che ha un fondo
 * suo deve avere anche un colore di testo suo, o eredita quello di un'altra.
 */
.cookie{position:fixed;inset:auto 0 0 0;z-index:50;background:var(--cookie-fondo);color:var(--cookie-testo);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,
.cookie > .cookie-corpo > .cookie-testo{margin:0 0 14px;color:var(--cookie-testo);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}
/* Le note dentro le voci: lo stesso colore del banner, appena piu' tenue.
   Prima usavano `--testo-3`, che e' un tono della PAGINA e su un banner di un
   altro colore non vuol dire niente. */
.cookie-voce em{color:color-mix(in srgb,currentColor 72%,var(--cookie-fondo));font-style:normal;font-size:var(--t-minuto);margin-left:6px}
.cookie-voce small{display:block;color:color-mix(in srgb,currentColor 72%,var(--cookie-fondo));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(--passaggio);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(--passaggio)}

/* 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(--passaggio)}
}

/* 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(--passaggio)}

/* ---------- l'articolo a due colonne ----------
   Il contenitore si allarga SOLO quando la colonna c'e' davvero: senza, un
   articolo a colonna singola resterebbe largo quanto due, e la riga di testo
   diventerebbe troppo lunga da leggere. La misura del testo non cambia mai --
   `minmax(0, var(--stretto))` -- perche' e' quella che decide la leggibilita',
   e non deve dipendere da cosa si e' acceso di lato. */
.contenitore.largo-lato{max-width:var(--largo)}
.articolo.a-due .largo-lato{
  display:grid;
  grid-template-columns:minmax(0, var(--stretto)) minmax(0, 320px);
  gap:44px;
  align-items:start;
  justify-content:center;
}
/* `min-width:0` sul centro: senza, una tabella o un blocco di codice larghi
   sfondano la colonna invece di scorrere, ed e' il difetto classico delle
   griglie -- una colonna `1fr` non scende mai sotto il suo contenuto. */
.articolo-centro{min-width:0}
/*
 * LA COLONNA RESTA A VISTA MENTRE SI LEGGE, E NON HA UNA BARRA SUA.
 *
 * Sono due cose che sembravano incompatibili, e per un po' si e' avuta prima
 * l'una e poi l'altra.
 *
 * All'inizio: `sticky` con `max-height:calc(100vh - 104px)` e
 * `overflow-y:auto`. Quelle righe curavano un problema vero -- una colonna
 * appiccicata piu' alta della finestra tiene il fondo irraggiungibile, perche'
 * la pagina scorre e lei resta ferma -- ma lo curavano con una SECONDA barra
 * di scorrimento dentro la pagina: la rotellina faceva una cosa diversa a
 * seconda di dove stava il puntatore, e di fianco al testo compariva un
 * rettangolo grigio.
 *
 * Poi, togliendo la barra, ho tolto anche l'aggancio: niente rettangolo grigio
 * e niente colonna a vista. Curata la barra, persa la funzione.
 *
 * ADESSO SI AGGANCIA DAL BASSO quando non ci sta. `top` lo calcola
 * `assets/sito.js` (cerca «aggancio della colonna»): se la colonna sta nella
 * finestra vale lo scarto qui sotto; se e' piu' alta, `top` diventa NEGATIVO
 * -- finestra meno altezza -- cosi' la colonna sale insieme alla pagina finche'
 * il suo fondo tocca il fondo dello schermo, e li' si ferma. Si legge tutto,
 * resta a vista, e non c'e' nessuna barra.
 *
 * Il valore di partenza qui sotto vale anche senza JavaScript: si comporta
 * come una `sticky` normale, che sulle colonne corte e' gia' giusto.
 */
.articolo-lato{
  position:sticky;
  /* 96 e non 63 (l'altezza della testata): la colonna era incollata sotto la
     barra, senza un filo d'aria in mezzo. Trentatre' pixel bastano a far
     vedere che sono due cose diverse. */
  top:96px;
  align-self:start;
  /* LO STESSO SCARTO DELLE BRICIOLE, che sono la prima riga a sinistra.
     `.briciole` ha `padding:20px 0 0`: senza questi venti pixel la colonna
     partiva piu' in alto del «Home > Calcio > Calciomercato» e le due colonne
     cominciavano su due righe diverse. Ho provato prima con dieci, scelti a
     occhio, e il disallineamento restava -- di dieci pixel esatti.
     Se un giorno cambia il padding delle briciole, cambia anche questo: sono
     lo stesso numero per lo stesso motivo. */
  margin-top:20px;
  display:flex;flex-direction:column;gap:22px;
}
@media (max-width:900px){
  /* Di fianco non ci sta: scende in fondo, a tutta larghezza, e smette di
     essere appiccicata -- una colonna sticky su telefono resterebbe incollata
     sopra il testo mentre si scorre, coprendo quello che si sta leggendo.
     `top:auto` serve a disfare anche il valore calcolato dal JavaScript. */
  .articolo.a-due .largo-lato{display:block}
  .articolo-lato{position:static;top:auto;margin-top:34px}
}

/* ---------- i riquadri della colonna ----------

   PARLANO IL VOCABOLARIO DEL SITO, non uno loro.

   La prima versione aveva colori e misure proprie: fondo, bordo e raggio
   scelti a occhio, titoli grigi con una spaziatura inventata. Su un sito
   qualunque sembrava a posto; su QUESTO sembrava un pezzo incollato da
   un'altra parte -- perche' il sito ha gia' un modo di dire «riquadro»
   (`.scheda`, `.scheda-autore`) e un modo di dire «etichettina sopra un
   blocco» (`.scheda-eti`, `.occhiello`), e la colonna non li usava.

   Qui si riusano quelli: stesso fondo, stesso bordo, stesso raggio grande
   delle schede, e i titoli sono occhielli col colore d'accento e la
   spaziatura larga come tutti gli altri occhielli della pagina. La misura
   dei caratteri viene dalla scala del tema (`--t-mini`, `--t-base`), quindi
   cambiando tema la colonna cambia con lui invece di restare ferma.

   E SEGUE I TEMPLATE. Piu' in basso ci sono le regole per
   `data-scheda="testuale"` e `"elenco"`: su quei due il sito toglie i
   riquadri e tiene una riga di separazione: la colonna fa lo stesso, o
   sarebbe l'unica cosa squadrata di una pagina senza squadri. E' la stessa
   ragione per cui le fasce sotto l'articolo riusano `.fascia` e `.scheda`
   invece di avere classi proprie. */
.lato-riquadro{background:var(--box-fondo);border:1px solid var(--box-riga);
  border-radius:var(--raggio);padding:15px 16px}

/* L'occhiello: identico a `.scheda-eti`. Non e' una copia per pigrizia -- e'
   la stessa cosa, e deve restare uguale il giorno che si cambia.
   `.12em` e non `.14em`: il sito ha DUE occhielli, e sono diversi apposta.
   `.occhiello` sta sopra un titolo di pagina e respira di piu'; `.scheda-eti`
   sta dentro un riquadro. Questi sono riquadri, quindi vale il secondo --
   misurato affiancandoli, perche' a occhio 1,32px e 1,54px non si
   distinguono e sbagliare era gratis. */
.lato-titolo{margin:0 0 10px;font-size:var(--t-mini);font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--box-titolo)}

.lato-riquadro ul,.lato-riquadro ol{margin:0;padding-left:17px}
.lato-riquadro li{margin:0 0 9px;font-size:var(--t-piccolo);line-height:1.4}
.lato-riquadro li:last-child{margin-bottom:0}
.lato-riquadro p{margin:0 0 9px;font-size:var(--t-piccolo);color:var(--testo-2)}
.lato-riquadro p:last-child{margin-bottom:0}
/* I link si comportano come quelli delle schede: colore del testo, e
   l'accento arriva al passaggio. Colorarli d'accento da fermi
   trasformerebbe la colonna in un muro rosso. */
/* `:not(.box-bottone)` NON E' PIGNOLERIA: senza, questa regola dipingeva
   anche il bottone del box. E' piu' specifica di `.box-bottone` -- una classe
   e un tipo contro una classe sola -- quindi vinceva sul colore del testo, e
   il bottone usciva col rosso d'accento sopra il fondo d'accento: misurato,
   contrasto 1,26 su 21, cioe' illeggibile.
   Il colore dei link e' per i LINK. Un bottone e' un'altra cosa e si dipinge
   da se'. */
.lato-riquadro a:not(.box-bottone){color:var(--testo);text-decoration:none;
  transition:color .15s ease}
.lato-riquadro a:not(.box-bottone):hover{color:var(--passaggio)}

/* L'indice. I sottotitoli rientrano e si smorzano: si vede la struttura del
   pezzo invece di un elenco piatto. Numerato, perche' dice anche quanto e'
   lungo. */
.lato-indice ol{list-style:decimal;color:var(--testo-3)}
.lato-indice li{padding-left:2px}
.lato-indice li.liv-3{margin-left:13px;list-style:circle;
  font-size:var(--t-minuto);color:var(--testo-2)}

/* IL RITMO: come si e' arrivati a una lineetta invece che al fondo alternato.
   Quattro riquadri identici impilati sono un muro: lo sguardo non trova dove
   fermarsi e li salta tutti. Il primo tentativo alternava i fondi, come fa il
   sito con le fasce (`ritmo: alterno`). Due difetti, tutti e due misurati:
   `:nth-of-type` conta per TAG -- e i riquadri sono `nav` e `aside`
   mescolati, quindi l'alternanza usciva a caso invece che una si' e una no;
   e soprattutto `--piano` e `--piano-2` distano SEI PUNTI su 255 (22,31,56
   contro 28,37,61). Anche funzionando, non si sarebbe vista: nelle fasce a
   tutta larghezza sei punti bastano perche' la superficie e' enorme, in un
   riquadro da 300 pixel no.
   Quello che si vede e' una riga sotto l'occhiello: divide il titolo dal suo
   contenuto e chiude visivamente ogni riquadro in cima. E' un pixel, e fa il
   lavoro che il fondo non riusciva a fare. */
.lato-titolo{padding-bottom:8px;border-bottom:1px solid var(--box-riga)}
/* Sul riquadro «leggero», che il fondo non ce l'ha, la riga sarebbe la
   seconda della coppia: resta solo quella in fondo al riquadro. */
.lato-riquadro.lato-leggero .lato-titolo{border-bottom:0;padding-bottom:0}

/* I correlati sono titoli di articolo: stessa misura e stesso peso dei
   titoli di scheda, cosi' si leggono come quello che sono. */
.lato-correlati ul{list-style:none;padding-left:0}
.lato-correlati li{margin-bottom:12px;font-size:var(--t-base);
  line-height:1.32;font-weight:650;letter-spacing:-.012em}

/* IL TAGLIO A TRE RIGHE, ed e' la correzione che serviva di piu'.
   Misurato in pagina: in una colonna da 320 pixel i titoli veri andavano a
   quattro e cinque righe, e tre voci si prendevano 364 pixel su 718 -- meta'
   colonna. Peggio: accanto a un titolo di cinque righe la miniatura da 72
   pixel sembra una briciola, e la voce non si legge piu' come una coppia
   immagine+titolo ma come un paragrafo con una figurina a lato.
   Tre righe con la miniatura, quattro senza -- senza c'e' piu' larghezza per
   riga, quindi ne servono meno per dire la stessa cosa. */
.lato-voce-testo,
.lato-correlati:not(.con-foto) a{display:-webkit-box;-webkit-box-orient:vertical;
  overflow:hidden;line-clamp:4;-webkit-line-clamp:4}
.lato-correlati.con-foto .lato-voce-testo{line-clamp:3;-webkit-line-clamp:3}
/* SENZA FOTO: la lineetta al posto del pallino. Un elenco senza pallini in
   una colonna stretta guadagna i pixel che servono al titolo, e resta un
   elenco. */
.lato-correlati:not(.con-foto) li{position:relative;padding-left:14px}
.lato-correlati:not(.con-foto) li::before{content:"";position:absolute;left:0;
  top:.62em;width:6px;height:1px;background:var(--accento)}

/* CON FOTO: la miniatura a sinistra e il titolo accanto -- la stessa forma
   della scheda orizzontale del sito (`data-scheda="orizzontale"`), che e' il
   modo in cui questo sito mette un'immagine accanto a un titolo.
   72 pixel e non di piu': in una colonna da 320 l'immagine deve accompagnare
   il titolo, non prendergli il posto. */
.lato-correlati.con-foto li{margin-bottom:14px}
.lato-correlati.con-foto a{display:flex;gap:10px;align-items:flex-start}
/* QUADRATA, e non 4:3 o 16:9.
   E' la proporzione che il sito usa per «immagine accanto a titolo» --
   `body[data-scheda="orizzontale"] .scheda-img{aspect-ratio:1}` -- ed e'
   esattamente questa disposizione. Le altre due sarebbero due proporzioni per
   la stessa cosa nella stessa pagina.
   Il prezzo e' un ritaglio largo: una copertina 1200x630 perde meta' della
   larghezza. Si paga volentieri perche' `object-position` parte dall'alto e in
   una fotografia il soggetto sta quasi sempre li' -- ed e' un prezzo che le
   schede del sito pagano gia', quindi almeno lo si paga una volta sola.
   72 pixel: in una colonna da 320 l'immagine accompagna il titolo, non gli
   prende il posto (il sito ne usa 128, ma su una colonna larga il doppio). */
.lato-foto-piccola{flex:0 0 72px;display:block;border-radius:var(--raggio-s);
  overflow:hidden;background:var(--piano-2);aspect-ratio:1}
.lato-foto-piccola img{width:100%;height:100%;object-fit:cover;display:block}
.lato-voce-testo{flex:1;min-width:0}

/* L'immagine di lato: larga quanto il riquadro. La didascalia usa la misura
   delle didascalie del sito. */
.lato-immagine figure{margin:0}
.lato-immagine img{display:block;width:100%;border-radius:var(--raggio-s)}
.lato-immagine figcaption{margin-top:7px;font-size:var(--t-minuto);
  color:var(--testo-3);line-height:1.4}

/* ---- gli aspetti scegliibili dal blocco ----
   Tre parole nel pannello, tre classi qui, e tutte e tre usano le variabili
   del tema: un riquadro «in evidenza» resta in evidenza anche dopo che si e'
   cambiato tema, mentre un colore scelto a mano diventerebbe la macchia che
   non c'entra con niente. */
.lato-riquadro.lato-evidenza{border-color:var(--accento);
  border-left-width:3px;background:var(--piano-2)}
.lato-riquadro.lato-leggero{background:transparent;border-width:0 0 1px 0;
  border-radius:0;padding:0 0 15px}

/* La scheda autore, con le stesse misure di quella sotto l'articolo. */
.lato-autore .lato-foto{border-radius:50%;margin-bottom:9px;display:block}
.lato-autore .lato-nome{margin:0 0 2px;font-size:var(--t-base);
  font-weight:650;color:var(--testo)}
.lato-autore .lato-ruolo{margin:0 0 8px;font-size:var(--t-minuto);
  color:var(--accento-testo)}
.lato-autore .lato-bio{font-size:var(--t-piccolo);color:var(--testo-2);
  line-height:1.5}
.lato-autore .lato-bio p{font-size:inherit;color:inherit}

/* Il menu di navigazione: pastiglie come `.figlie` e `.fascia-tutto`, che
   sono il modo in cui questo sito disegna un elenco di destinazioni. */
.lato-menu ul{list-style:none;padding-left:0;display:flex;flex-wrap:wrap;gap:7px}
.lato-menu li{margin:0}
.lato-menu a{display:inline-block;border:1px solid var(--riga);border-radius:99px;
  padding:5px 12px;font-size:var(--t-piccolo);color:var(--testo-2)}
.lato-menu a:hover{border-color:var(--accento);color:var(--passaggio)}

/* ---- e adesso i template ----
   Sui due template senza riquadri la colonna li toglie anche lei. La riga di
   separazione e' la stessa che il sito usa per le schede: `border-width:0 0
   1px 0` su fondo trasparente. */
body[data-scheda="testuale"] .lato-riquadro,
body[data-scheda="elenco"] .lato-riquadro{
  background:transparent;border-width:0 0 1px 0;border-radius:0;padding:0 0 16px}
body[data-scheda="testuale"] .articolo-lato,
body[data-scheda="elenco"] .articolo-lato{gap:16px}

/* ---------- il riquadro composto, dentro l'articolo ----------
   Stessa lingua dei riquadri di lato -- fondo, bordo, raggio e occhiello delle
   schede -- perche' e' la stessa cosa messa in un posto diverso, e due
   riquadri che si assomigliano devono assomigliarsi del tutto o per niente.
   Le classi dei tre aspetti sono le STESSE (`lato-evidenza`, `lato-leggero`):
   il nome parla di come si vede, non di dove sta, e duplicarle con un altro
   prefisso avrebbe voluto dire due elenchi da tenere d'accordo. */
.riquadro{background:var(--box-fondo);border:1px solid var(--box-riga);
  border-radius:var(--raggio);padding:16px 18px;margin:26px 0}
.riquadro .lato-titolo{padding-bottom:8px;border-bottom:1px solid var(--box-riga)}
.riquadro ul{margin:0;padding:0;list-style:none}
.riquadro li{margin:0 0 9px;font-size:var(--t-piccolo);line-height:1.45}
.riquadro li:last-child{margin-bottom:0}
/* Stessa esclusione, stessa ragione: un box dentro la colonna porta tutte e
   due le classi, e questa regola sta piu' in basso -- quindi era lei a
   vincere, ed e' quella che dava rosso su rosso. */
.riquadro a:not(.box-bottone){color:var(--accento-testo);text-decoration:none}
.riquadro a:not(.box-bottone):hover{text-decoration:underline}
/* La riga d'elenco: una lineetta d'accento, come nei correlati senza foto. */
.riquadro .riq-testo,.riquadro .riq-link{position:relative;padding-left:14px}
.riquadro .riq-testo::before,.riquadro .riq-link::before{content:"";
  position:absolute;left:0;top:.66em;width:6px;height:1px;background:var(--accento)}
/* Il dato: etichetta a sinistra e valore a destra, incolonnati. E' la forma in
   cui si leggono i dati -- una riga di prosa con dentro un numero costringe a
   cercarlo. */
.riquadro .riq-dato{display:flex;justify-content:space-between;gap:14px;
  align-items:baseline;padding:5px 0;border-bottom:1px dotted var(--riga)}
.riquadro .riq-dato:last-child{border-bottom:0}
.riquadro .riq-eti{color:var(--testo-2)}
.riquadro .riq-val{font-weight:650;color:var(--testo);text-align:right}

.riquadro.lato-evidenza{border-color:var(--accento);border-left-width:3px;
  background:var(--piano-2)}
.riquadro.lato-leggero{background:transparent;border-width:0 0 1px 0;
  border-radius:0;padding:0 0 16px}
.riquadro.lato-leggero .lato-titolo{border-bottom:0;padding-bottom:0}

/* I moduli dentro un box. Riusano il piu' possibile cio' che c'e' gia': il
   titolo interno e' un h3 normale, il dato ha la stessa forma di quello del
   riquadro composto. Le due cose sue sono l'immagine, che qui e' larga quanto
   il box, e il bottone -- che e' `.bottone` del sito, non un pulsante nuovo. */
.box-titolo{margin:12px 0 6px;font-size:var(--t-base);font-weight:650}
.box-titolo:first-child{margin-top:0}
.box .box-img{display:block;width:100%;border-radius:var(--raggio-s);margin:10px 0}
.box .box-img:first-child{margin-top:0}
/* Gli stessi colori di `.bottone`, che e' il bottone del sito: fondo
   d'accento e il colore che il tema dichiara di mettere SOPRA l'accento --
   `--su-accento` esiste apposta, ed e' l'unico valore che il tema garantisce
   leggibile su quel fondo.
   Il selettore nomina anche i due contenitori: cosi' il colore non dipende
   dall'ordine delle regole nel file, che e' come si e' rotto la prima volta. */
.box-bottone,
.riquadro a.box-bottone,
.lato-riquadro a.box-bottone{display:inline-block;margin-top:10px;
  background:var(--accento);color:var(--su-accento);padding:9px 16px;
  border-radius:var(--raggio-s);text-decoration:none;font-weight:650;
  font-size:var(--t-piccolo)}
.box-bottone:hover,
.riquadro a.box-bottone:hover,
.lato-riquadro a.box-bottone:hover{filter:brightness(1.08);
  color:var(--su-accento);text-decoration:none}
.box-dato{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:5px 0;border-bottom:1px dotted var(--riga);margin:0}
.box-dato:last-child{border-bottom:0}
/* Dentro la colonna il box e' un riquadro di lato come gli altri: non deve
   portarsi dietro i margini che ha in mezzo all'articolo. */
.articolo-lato .riquadro.box{margin:0}

/* In cima e in fondo all'articolo i riquadri stanno nella colonna del testo,
   ma senza il margine che avrebbero in mezzo ai paragrafi: sopra si appoggiano
   alla testata, sotto chiudono il pezzo. */
.riquadri-sopra .riquadro{margin:0 0 26px}
.riquadri-sotto .riquadro{margin:26px 0 0}

/* ---------- «In breve»: il riassunto in testa all'articolo ---------- */
/* Stessa famiglia dei riquadri di lato: fondo, bordo e raggio delle schede,
   e l'occhiello scritto come tutti gli altri occhielli del sito. La riga
   d'accento a sinistra e' l'unica cosa sua, ed e' quello che lo distingue dal
   corpo dell'articolo in cui sta dentro. */
.in-breve{margin:0 0 28px;padding:16px 18px;background:var(--piano);
  border:1px solid var(--riga);border-left:3px solid var(--accento);
  border-radius:var(--raggio)}
.in-breve-testa{margin:0 0 9px;font-size:var(--t-mini);font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--accento-testo)}
.in-breve p{margin:0;font-size:var(--t-piccolo);color:var(--testo-2)}
.in-breve p + p{margin-top:10px}
.in-breve ul{margin:10px 0 0;padding-left:18px}
.in-breve li{margin:0 0 6px;font-size:var(--t-piccolo);color:var(--testo-2);line-height:1.4}

/* ---------- paginazione ----------
   Le frecce spente restano IN PAGINA, grigie, invece di sparire: se «Precedente»
   comparisse solo dalla seconda in poi, i numeri si sposterebbero sotto il dito
   fra una pagina e l'altra. Un comando che non si puo' usare e' un'informazione;
   un comando che salta di posto e' un errore che aspetta di essere fatto. */
.paginazione{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px 14px;margin:34px 0 8px;padding-top:22px;border-top:1px solid var(--riga)}
.pag-numeri{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
/* Pastiglie, non riquadri: e' il modo in cui questo sito disegna un elenco di
   destinazioni -- le sottocategorie (`.figlie a`) e il «vedi tutto» delle
   fasce (`.fascia-tutto`) sono fatti cosi'. Con gli angoli squadrati la
   paginazione sarebbe stata l'unica cosa spigolosa in fondo a una pagina di
   pastiglie. */
.pag-numero,.pag-freccia{display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--riga);border-radius:99px;padding:6px 14px;
  font-size:var(--t-piccolo);font-weight:650;color:var(--testo-2);text-decoration:none}
.pag-numero:hover,.pag-freccia:hover{border-color:var(--accento);color:var(--passaggio)}
.pag-qui{background:var(--accento);border-color:var(--accento);color:var(--su-accento);cursor:default}
.pag-qui:hover{border-color:var(--accento);color:var(--su-accento)}
.pag-spenta{color:color-mix(in srgb,var(--testo-2) 42%,var(--sfondo));
  border-color:color-mix(in srgb,var(--riga) 55%,var(--sfondo));cursor:default}
.pag-spenta:hover{border-color:var(--riga);color:var(--testo-2)}
.pag-salto{padding:0 2px;color:color-mix(in srgb,var(--testo-2) 60%,var(--sfondo))}
@media (max-width:520px){
  /* Su telefono le parole delle frecce non ci stanno accanto ai numeri: restano
     le frecce, che il verso lo dicono da sole. */
  .pag-freccia{font-size:0;padding:7px 11px}
  .pag-freccia [aria-hidden]{font-size:var(--t-base)}
}

/* ---------- 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(--passaggio)}
.apertura-pie i,.scheda-pie i{margin-right:6px;font-size:var(--t-mini);
  color:color-mix(in srgb,currentColor 70%,var(--piano))}
.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 di copyright e nota legale stanno DENTRO il pie': seguono il suo
   colore, appena piu' tenui. Con `--testo-2` -- un tono della pagina -- su un
   pie' scuro erano a 2.15:1. */
.riga-legale{max-width:var(--largo);margin:22px auto 0;color:color-mix(in srgb,currentColor 78%,var(--piede-fondo));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:color-mix(in srgb,currentColor 78%,var(--piede-fondo));
  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(--passaggio)}
.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]{color:color-mix(in srgb,var(--testo-2) 48%,var(--piano));
  border-color:color-mix(in srgb,var(--riga) 55%,var(--piano));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(--passaggio);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. */
/*
 * 22 PIXEL E' IL VALORE DI PARTENZA, NON UNA GABBIA.
 *
 * E' il posto dei bollini -- ADM, gioco responsabile -- e un'immagine buttata
 * li' senza pensarci deve venire della misura giusta senza che nessuno la
 * regoli: e' quello che il default vale.
 *
 * Ma chi scrive ha l'ultima parola. Scegliendo una misura nella modale
 * dell'immagine -- 25/50/75/100% oppure una larghezza a mano -- quella
 * comanda, e l'altezza torna libera. Sono i comandi che l'editor ha gia' e che
 * il ripulitore del server gia' conserva (`figure` tiene `class` e `style`,
 * vedi Blocks\Html): nessun attributo nuovo da far sopravvivere a due
 * ripulitori.
 *
 * L'EDITOR DEL PANNELLO RIPETE QUESTE REGOLE in cms.css, sotto
 * `.rt[data-modo="piede"]`: sono due fogli diversi per la stessa resa, e
 * cambiando qui va cambiato anche li' -- o l'editor torna a far vedere una
 * cosa e il sito a farne un'altra.
 */
.nota-legale img{height:22px;width:auto;vertical-align:middle;display:inline-block}
.nota-legale figure{display:inline-block;margin:0;vertical-align:middle}
/* Misura scelta: comanda quella, e l'immagine torna una figura vera -- a capo,
   centrata, alta quanto serve. */
.nota-legale figure[class*="misura-"],
.nota-legale figure[style*="max-width"]{display:block;margin:10px auto}
.nota-legale figure[class*="misura-"] img,
.nota-legale figure[style*="max-width"] img{height:auto;width:100%;max-width:100%}
.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}

/* ===================================================================
   IL MODULO DI CONTATTO

   Vive nel corpo di un articolo o di una pagina, quindi eredita la misura
   del testo: non si allarga e non si stringe da solo. I controlli prendono
   tutta la riga perche' su un telefono meta' riga e' scomoda da centrare, e
   su schermo largo il testo e' gia' stretto per conto suo.
   =================================================================== */
.modulo{
  display:flex;flex-direction:column;gap:15px;
  margin:26px 0;padding:20px 22px;
  background:var(--riq-fondo, rgba(127,127,127,.06));
  border:1px solid var(--riq-bordo, rgba(127,127,127,.22));
  border-radius:10px;
}
.modulo-campo{display:flex;flex-direction:column;gap:5px}
.modulo-campo label{font-size:13.5px;font-weight:600;color:var(--testo)}
.modulo-campo input[type=text],
.modulo-campo input[type=email],
.modulo-campo input[type=tel],
.modulo-campo select,
.modulo-campo textarea{
  width:100%;box-sizing:border-box;
  padding:10px 12px;font:inherit;font-size:15px;line-height:1.4;
  color:var(--testo);
  background:var(--fondo);
  border:1px solid var(--riq-bordo, rgba(127,127,127,.32));
  border-radius:7px;
}
.modulo-campo textarea{resize:vertical;min-height:110px}
.modulo-campo input:focus,.modulo-campo select:focus,.modulo-campo textarea:focus{
  outline:2px solid var(--accento);outline-offset:1px;border-color:var(--accento)}
/* Il campo sbagliato si riconosce dal bordo E dal testo sotto: il colore da
   solo non lo vede chi non distingue il rosso. */
.modulo-campo.sbagliato input,.modulo-campo.sbagliato select,.modulo-campo.sbagliato textarea{
  border-color:#d64545}
.modulo-errore{margin:0;font-size:13px;color:#d64545}
.modulo-aiuto{margin:0;font-size:12.5px;color:var(--testo-tenue, #6b7280)}
.modulo-serve{color:#d64545}
.modulo-consenso{display:flex;gap:9px;align-items:flex-start;font-weight:400;font-size:14px;
  line-height:1.5;cursor:pointer}
.modulo-consenso input{width:auto;margin-top:3px;flex:none}
.modulo-avviso{margin:0;padding:10px 12px;border-radius:7px;font-size:14px;
  background:rgba(214,69,69,.12);border:1px solid rgba(214,69,69,.4);color:var(--testo)}
.modulo-invia{
  align-self:flex-start;
  padding:11px 26px;font:inherit;font-size:15px;font-weight:650;cursor:pointer;
  /* `--su-accento` e non `--accento-testo`: il secondo e' il colore dei LINK
     ricavato dall'accento -- un rosso chiaro -- e messo sopra l'accento pieno
     dava 1,26:1, cioe' un pulsante illeggibile. `--su-accento` e' proprio
     l'inchiostro calcolato per stare SOPRA l'accento, ed e' quello che usa
     ogni altro pulsante del sito.
     In pari: `--passaggio` esiste, `--accento-passaggio` no -- il ripiego
     lasciava il pulsante immobile al passaggio del mouse. */
  color:var(--su-accento, #fff);background:var(--accento);
  border:0;border-radius:7px;
}
.modulo-invia:hover{background:var(--passaggio, var(--accento))}
.modulo-fatto{margin:26px 0;padding:18px 22px;border-radius:10px;
  background:var(--riq-fondo, rgba(127,127,127,.06));
  border:1px solid var(--accento)}
.modulo-fatto p{margin:0;font-size:15.5px;color:var(--testo)}

/* LA TRAPPOLA. Fuori dallo schermo e non `display:none`: alcuni script
   saltano cio' che e' nascosto con lo stile piu' ovvio e compilano il resto.
   Chi naviga col TAB non ci finisce (tabindex=-1) e chi usa un lettore di
   schermo non la sente (aria-hidden sul contenitore). */
.modulo-trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ===================================================================
   IL POPUP

   Fondo scuro e finestra al centro. Non e' un <dialog> nativo per una
   ragione precisa: showModal() mette l'elemento nel top layer, SOPRA
   qualunque cosa -- banner dei cookie compreso. Il consenso e' un obbligo
   di legge e non deve finire sotto una finestra di marketing.
   =================================================================== */
.popup-fondo{
  position:fixed;inset:0;z-index:900;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,.62);
  /* Compare senza saltare addosso: chi sta leggendo si accorge di cosa
     succede invece di trovarselo gia' li'. */
  animation:popup-entra .22s ease-out both;
}
@keyframes popup-entra{from{opacity:0}to{opacity:1}}
/* LO SCORRIMENTO STA NEL CORPO, non nella finestra: cosi' la X resta ferma
   in alto mentre il contenuto scorre. Con l'overflow sulla finestra, un popup
   piu' alto dello schermo si portava via il suo stesso pulsante di chiusura --
   e per chiuderlo bisognava prima risalire. */
.popup{
  position:relative;width:100%;max-width:520px;
  display:flex;flex-direction:column;max-height:86vh;
  background:var(--piano);color:var(--testo);
  border:1px solid var(--riga);border-radius:var(--raggio);
  padding:30px 32px 26px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  animation:popup-sale .24s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes popup-sale{from{transform:translateY(14px)}to{transform:none}}
/*
 * LA X: si deve vedere sempre, e si deve poter premere col pollice.
 *
 * Prima era un carattere «×» dentro un rettangolo trasparente. Due problemi
 * veri, non di gusto:
 *
 *   1. SU UN CONTENUTO QUALSIASI SPARIVA. Un popup puo' contenere
 *      un'immagine a tutta larghezza, e una X senza fondo suo diventa
 *      invisibile appena ci finisce sopra qualcosa di chiaro. Adesso ha un
 *      disco proprio, che sta staccato sia dal contenuto sia dalla finestra.
 *
 *   2. ERA PICCOLA. 38px sono sotto i 44 raccomandati per il pollice, e un
 *      popup che si chiude male e' peggio di un popup. Il pulsante e' 40px
 *      ma la zona sensibile arriva a 48 con lo pseudo-elemento: si preme
 *      anche mirando male, senza che si veda un cerchio enorme.
 */
.popup-chiudi{
  position:absolute;top:12px;right:12px;
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;
  color:var(--testo-2);
  /* PIENO, non translucido. Un disco all'8% sopra un'immagine chiara
     diventa un disco chiaro con dentro un segno chiaro: invisibile proprio
     nel caso per cui e' stato messo. Col fondo della finestra si vede sempre,
     perche' e' lo stesso colore da cui il testo e' gia' leggibile. */
  background:var(--piano);
  border:1px solid var(--riga);
  box-shadow:0 2px 10px rgba(0,0,0,.28);
  border-radius:50%;cursor:pointer;
  transition:background .15s, color .15s, transform .15s;
}
/* La zona sensibile piu' larga del disco: si vede piccolo, si preme grande. */
.popup-chiudi::before{content:"";position:absolute;inset:-4px;border-radius:50%}
.popup-chiudi:hover{
  background:var(--piano-2);
  color:var(--testo);
  transform:rotate(90deg);
}
.popup-chiudi:active{transform:rotate(90deg) scale(.94)}
/* Il contorno del fuoco e' esplicito: sul tondo l'anello di sistema si vede
   male, e questa e' l'unica via d'uscita della finestra per chi usa i tasti. */
.popup-chiudi:focus-visible{
  outline:2px solid var(--accento);outline-offset:2px;color:var(--testo)}
@media (prefers-reduced-motion:reduce){
  .popup-chiudi,.popup-chiudi:hover,.popup-chiudi:active{transition:none;transform:none}
}
.popup-corpo{overflow-y:auto;min-height:0}
.popup-corpo > :first-child{margin-top:0}
.popup-corpo > :last-child{margin-bottom:0}
/* Dentro il popup il modulo non ha bisogno della sua cornice: la cornice
   e' gia' la finestra. */
.popup-corpo .modulo{margin:0;padding:0;background:none;border:0}
@media (prefers-reduced-motion:reduce){
  .popup-fondo,.popup{animation:none}
}

/* ---------- riquadro incorporato ----------
   La proporzione la porta il `style` scritto dal blocco: qui c'e' solo cio'
   che vale per tutti. `aspect-ratio` sul telaio e l'iframe che lo riempie:
   cosi' la larghezza la decide la pagina e l'altezza segue, invece dei
   `width="560" height="315"` che i servizi mettono nel codice da incollare. */
.incorporato{margin:26px 0}
.incorporato-telaio{
  width:100%;overflow:hidden;
  background:var(--piano);
  border:1px solid var(--riga);border-radius:var(--raggio);
}
.incorporato-telaio iframe{display:block;width:100%;height:100%;border:0}
.incorporato figcaption{
  margin:8px 2px 0;font-size:13.5px;line-height:1.5;color:var(--testo-2);
}
/* Dentro la colonna di lato e dentro un popup non serve il margine grande:
   lo spazio ce l'ha gia' il contenitore. */
.articolo-lato .incorporato,.popup-corpo .incorporato{margin:0}

/* Il credito della foto di copertina: piccolo e a fianco, non in mezzo. Deve
   essere leggibile da chi lo cerca e non rubare l'attenzione a chi legge. */
.copertina figcaption.credito-foto{
  margin:6px 2px 0;font-size:12px;line-height:1.4;color:var(--testo-3);text-align:right;
}


/* ---------- le tendine del modulo ----------
   Stesso componente del pannello (`assets/tendine.js`): la <select> vera
   resta sotto, trasparente, e il server continua a leggere lei. Qui ci sono
   solo i colori, riscritti con le variabili del SITO: il pannello e il sito
   hanno due tavolozze, e riusare le sue avrebbe prodotto una tendina di un
   altro sito dentro questo. */
.tendina{position:relative;display:block}
.tendina > select{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  pointer-events:none;appearance:none;border:0;padding:0;margin:0}
.tendina-faccia{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;text-align:left;padding:10px 12px;font:inherit;font-size:15px;
  color:var(--testo);background:var(--fondo);
  border:1px solid var(--riq-bordo, rgba(127,127,127,.32));
  border-radius:7px;cursor:pointer}
.tendina-faccia:hover{border-color:var(--testo-3)}
.tendina-faccia:focus-visible{outline:2px solid var(--accento);outline-offset:1px}
.tendina-faccia[aria-expanded="true"]{border-color:var(--accento)}
.tendina-faccia.vuota .tendina-testo{color:var(--testo-3)}
.tendina-testo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tendina-freccia{flex:none;width:0;height:0;border-left:4px solid transparent;
  border-right:4px solid transparent;border-top:5px solid var(--testo-3)}
.tendina-pannello{position:fixed;z-index:80;display:flex;flex-direction:column;
  background:var(--piano);border:1px solid var(--riga);border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);overflow:hidden}
.tendina-cerca{flex:none;margin:6px;padding:8px 10px;font-size:14px;color:var(--testo);
  background:var(--piano-2);border:1px solid var(--riga);border-radius:6px}
.tendina-cerca:focus{outline:none;border-color:var(--accento)}
.tendina-voci{overflow-y:auto;padding:4px}
.tendina-voce{white-space:normal;line-height:1.4;padding:8px 11px;border-radius:6px;
  font-size:14.5px;cursor:pointer}
.tendina-voce.sopra{background:var(--piano-2)}
.tendina-voce.scelta{color:var(--accento-testo);font-weight:600}
.tendina-niente{padding:10px;font-size:14px;color:var(--testo-3)}

/* ---------- la validazione ----------
   I messaggi di jquery.validate escono come <label class="error">: si vestono
   come gli errori che gia' scrive il server, o la stessa pagina avrebbe due
   modi di dire la stessa cosa. */
.modulo label.error{display:block;margin:4px 0 0;font-size:13px;color:#d64545;font-weight:400}
.modulo input.error,.modulo textarea.error,.modulo .tendina-faccia.error{border-color:#d64545}
/* Il messaggio della casella di consenso sta sotto la frase, e allineato con
   il testo — non con la casella, che è larga un quarto di riga. */
.modulo-campo > label.error{margin-top:6px}

/* Senza colonna di lato: il contenitore prende la larghezza piena del sito,
   e il testo dentro non è più limitato alla misura stretta. È una scelta
   dichiarata — righe più lunghe in cambio di una pagina che non sembra un
   foglietto in mezzo allo schermo. */
.contenitore.largo-pieno{max-width:var(--largo)}
.contenitore.largo-pieno .articolo-centro{max-width:none}