/* CSS Variables for Ultimate Newsroom Theme (Finestre Red) */
:root {
    --bg-main: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #f9f9f9;
    /* Il grigio appena accennato su cui poggiano le fotografie nel corpo degli
       articoli. Non --bg-hover, che vuol dire "ci sto passando sopra": due
       significati sotto lo stesso token e' il modo di ritrovarsi un giorno con
       le figure che cambiano colore perche' qualcuno ha scurito gli hover. */
    --bg-tenue: #f4f4f4;
    --text-primary: #000000;
    --text-secondary: #444444;
    --accent: #B80000;
    /* Original Finestre Red */
    --accent-hover: #990000;

    /* Il rosso quando fa da TESTO, non da fondo. Vale var(--accent), quindi in
       chiaro non cambia assolutamente niente: serve ad avere un punto solo da
       spostare in scuro, dove #B80000 sul nero fa 3,04:1 e sotto 4,5 non si
       legge. Le barre e i bottoni rossi restano --accent, che col bianco sopra
       fa 6,91:1 e non ha nessun bisogno di cambiare.
       E' lo stesso meccanismo di --font-display rispetto a --font-heading. */
    --accent-testo: var(--accent);

    /* La superficie "forte": le barre e i bottoni pieni che in chiaro sono
       neri col testo bianco sopra - la fascia Instagram, Invia, il callout di
       conferma, la pastiglia sotto il puntatore. Erano scritti col token del
       TESTO principale usato come fondo: in chiaro e' lo stesso nero e la cosa
       funziona, ma in scuro --text-primary
       diventa chiaro e quelle barre sarebbero bianche col testo bianco sopra.
       Vale var(--text-primary), quindi in chiaro non cambia niente. */
    --superficie-forte: var(--text-primary);

    /* Il fondo delle due fasce scure - video e rivista cartacea. Era scritto
       due volte, una per fascia: stesso valore, due posti dove sbagliarlo.
       Non e' il #141414 del footer, che resta piu' scuro apposta. */
    --fondo-scuro: #232323;

    /* La tipografia approvata: Bodoni Moda sui titoli, Source Serif 4 sul testo
       redazionale, Inter sull'interfaccia. Sta nel :root e in nessun altro
       posto: e' quello che la pagina mostra anche a JS spento, e non c'e' piu'
       nessun interruttore che la commuti. */
    --font-heading: 'Bodoni Moda', serif;
    --font-sans: 'Inter', sans-serif;
    /* Terzo e quarto binario, per la modalita' "Bodoni + Lato". Non sono due
       font in piu: sono due sottoinsiemi ritagliati dentro --font-heading,
       che oggi tiene insieme cose diverse.
       --font-display  i titoli di notizia di corpo grande
       --font-section  i titoli di sezione, le intestazioni dei riquadri di
                       sidebar e il testo che non e' un titolo di notizia
       Tutti e due valgono var(--font-heading) e si staccano SOLO in
       "Bodoni + Lato": nelle altre cinque modalita' il comportamento e'
       identico a prima, riga per riga. Il var() si risolve sul valore che
       --font-heading ha sullo stesso elemento (l'<html>), quindi seguono
       l'interruttore da soli, senza una riga di JS.
       --peso-display e' il peso dei soli titoli di corpo grande: 700 e' il
       valore che .card-title gia' aveva, quindi anche qui le altre cinque
       modalita' non si accorgono di niente. */
    --font-display: var(--font-heading);
    --font-section: 'Source Serif 4', serif;
    --peso-display: 800;

    --border-color: #dddddd;

    --transition-fast: 0.2s ease;

    /* Altezza dell'header, scomposta nei pezzi che la determinano davvero.
       Ognuno di questi valori e' usato anche dalla regola che governa quel
       pezzo, piu sotto: cambiando --logo-h l'header e lo skin si riallineano
       da soli, senza toccare altro.
       Il conto, verificato scatola per scatola: 40 di top bar, 135 di riga
       del logo (15 + 105 + 15), 1 di filetto sopra la navigazione, 50 di
       navigazione e 2 del filetto rosso che chiude. Totale 228.
       Lo scarto di 8px che stava qui dal giro 1 - il residuo fra i 191px su
       cui lo skin era tarato a mano e la somma di allora - non ha piu' niente
       da compensare: era esattamente il buco bianco fra il filetto rosso e
       l'inizio dello skin. Tolto, il calc() e' la somma vera delle scatole. */
    --topbar-h: 40px;
    --logo-h: 105px;
    --header-line-pad: 15px;
    --nav-h: 50px;
    --header-borders: 3px;
    --search-h: 32px;
    /* Il marchio bianco che compare nella barra rossa quando la testata si
       contrae. Non aveva una variabile ed era un 20px scritto nella regola:
       ora sta qui con le altre misure della testata, perche' e' la stessa
       famiglia di numeri e si guarda in rapporto a --topbar-h.
       30 dentro una barra da 40 lascia cinque pixel sopra e cinque sotto:
       alzandolo ancora bisogna alzare anche --topbar-h. */
    --topbar-logo-h: 30px;
    --header-h: calc(var(--topbar-h) + var(--logo-h) + 2 * var(--header-line-pad) + var(--header-borders) + var(--nav-h));
    /* La riga del logo: il pezzo di testata che si chiude scendendo. 105 + 2*15 = 135. */
    --riga-logo-h: calc(var(--logo-h) + 2 * var(--header-line-pad));
    /* L'altezza della testata con la riga del logo chiusa: 228 - 135 = 93, cioe'
       barra rossa, navigazione e filetti. Scritta come sottrazione e non come
       somma di quello che resta, perche' cosi' le due misure non possono
       scollarsi: cambiando --logo-h si riallineano da sole. */
    --header-h-ridotta: calc(var(--header-h) - var(--riga-logo-h));

    /* --skin-reveal: quanto skin si vede a tutta larghezza fra la testata e
       l'inizio del contenuto. E' una decisione di design, e va letta come tale:
       alzandolo la finestra sullo skin si allarga, abbassandolo il contenuto
       sale.
       NON era cosi': fino al porting valeva 129px perche' era un numero DEDOTTO
       da un creativo specifico - materia_dei_sogni_skin_2560x1440px.jpg, la cui
       parte scura finiva alla riga 153 - e gli stava accanto un --skin-crop di
       25px, anch'esso misurato su quel file, che ne buttava via la fascia morta
       in cima. Il guaio e' che lo skin RUOTA: includes/funzioni/skin.php pesca a
       caso fra quelli che il gestionale serve, quindi quella geometria veniva
       applicata a immagini che non la condividono - tagliando disegno vero su
       tutte le altre. --skin-crop e' stato rimosso, e il valore e' stato deciso
       guardandolo: 129 dedotti, poi 150, poi i 175 di adesso.

       SPECIFICA DEL FILE SKIN. Il taglio non si fa piu' nel foglio: i creativi
       arrivano conformi. Chi li produce deve sapere che:
       - misura 2560x1440, JPG;
       - il disegno comincia alla riga 0. Nessuna fascia piatta o vuota in cima:
         era esattamente il difetto che --skin-crop compensava;
       - lo sfondo e' ancorato al viewport (background-attachment: fixed) e
         allineato a --header-h dal bordo alto, quindi la riga 0 del file cade
         subito sotto la testata e ci resta anche scorrendo. Niente del file
         finisce nascosto dietro la testata: e' tutto utile;
       - le prime 175 righe sono la sola banda in cui lo skin si vede a tutta
         larghezza. E' il posto buono, ed e' dove va quello che conta;
       - piu' sotto il contenuto copre i 1280px centrali (.container), quindi
         resta visibile solo quello che cade nelle due bande laterali. Su una
         finestra da 1920px sono circa 320px per lato;
       - sotto i 1440px di finestra lo skin e' spento del tutto.
       La stessa specifica va tenuta allineata alla pagina pubblicita.php, che
       e' quella che i clienti leggono. */
    --skin-reveal: 175px;

    /* Palette delle etichette di categoria (C-7).
       Prima questi colori esistevano solo dentro attributi style= e non
       erano raggiungibili da nessuna parte. Ogni categoria aveva la coppia
       fondo + testo; il compagno -fg e' stato tolto quando la banda colorata
       ha smesso di esistere, al giro 23, e da allora il colore e' il TESTO
       su bianco - quindi la coppia non serve piu' a nessuno.
       I sei gia in uso conservano il valore esatto di prima: tre sono
       sotto 4.5:1, ma la correzione e' una decisione a parte. */
    --cat-news: #e63946;
    --cat-lavoro: #2a9d8f;
    --cat-turismo: #e9c46a;
    --cat-cinema: #e76f51;
    --cat-focus: #0d6d5f;
    --cat-interviste: #663300;

    /* Nuove: scelte sopra 4.5:1 sul testo che ci sta sopra. */
    --cat-attualita: #3d5a80;
    --cat-mostre: #264653;
    --cat-editoria: #5f0f40;
    --cat-mercato: #4a4e69;
    --cat-artigianato: #7f5539;

    /* Viaggi (giro 7). Tinta scelta in una zona libera della ruota: gli
       undici token gia' in uso stanno sul rosso, sul bruno, sul giallo, sui
       verdi-azzurri e sui blu-viola, e il verde pieno non era occupato.
       7.73:1 su bianco, in linea con attualita (7.06) e mercato (8.12). */
    --cat-viaggi: #3a5a40;

    /* Opinioni e Opere & artisti (giro 11). Stesso criterio dei precedenti:
       tinta presa dove la ruota era libera. Le dodici tinte gia' in uso
       lasciavano scoperti due archi, il viola fra 232 e 323 e il giallo-verde
       fra 43 e 131: sono quelli.
       9.54:1 e 5.87:1 su bianco, entrambi sopra il 4.5 richiesto. */
    --cat-opinioni: #5d2e86;
    --cat-opere: #5c6b1e;

    /* Quattro sezioni nuove al giro 23. Stesso criterio degli altri: scuri
       abbastanza da stare sopra 4,5:1 sul bianco - adesso che il colore e'
       testo e non fondo e' quello il vincolo - e ciascuno in un vuoto di
       tinta lasciato dai quattordici che c'erano gia'.
       Oro antico 47 gradi, oltremare 248, magenta 331, verde erba 95.
       Contrasti su bianco: 6,06 - 8,39 - 7,38 - 6,30. Vedi REPORT-25. */
    --cat-arte-antica: #7a5f00;
    --cat-ottonovecento: #4b3f9e;
    --cat-contemporanea: #a3195b;
    --cat-libri: #3f6b1f;
}

/* Tipografia unica, quella approvata: Bodoni Moda sui titoli, Source Serif 4
   sul testo redazionale, Inter sull'interfaccia. I valori stanno nel :root
   qui sopra. L'interruttore [data-tipografia] della bozza e le sue sei
   modalita' alternative sono stati rimossi insieme al blocco DEMO: erano
   serviti solo all'approvazione grafica. */

/* I titoli di notizia di corpo grande: le aperture delle quattro sezioni
   nuove e la card grande di In Evidenza. Quattro selettori, una regola sola,
   nessuna regola duplicata: le quattro esistevano gia' (misura e interlinea)
   e il font-family lo prendevano per eredita' da .card-title. Qui cambiano
   binario e prendono il peso dal token. In cinque modalita' su sei
   --font-display E' --font-heading e --peso-display E' 700, cioe' esattamente
   quello che .card-title dichiara: la regola non produce nessun effetto. */
.evidenza-item:first-child .card-title,
.schema-a-lead .card-title,
.schema-b-lead .card-title,
.schema-c-lead .card-title {
    font-family: var(--font-display);
    font-weight: var(--peso-display);
}

/* Regola di ripartizione fra i quattro token:
   --font-display  i titoli di notizia di corpo grande
   --font-heading  i titoli di notizia, tutti gli altri
   --font-section  il testo redazionale che non e' un titolo di notizia:
                   il corpo dell'articolo e le due fasce promozionali
   --font-sans     tutto il resto - menu, etichette di categoria, date, firme,
                   bottoni, titoli di sezione, intestazioni di sidebar, piede.
                   Inter dappertutto tranne in "Bodoni + Lato".
   I titoli di sezione e la sidebar stavano su --font-section: ci sono stati
   fino a quando quel token voleva dire due cose insieme, la cromatura e il
   testo. Adesso ne vuol dire una sola.
   Se aggiungi un elemento chiediti, in quest'ordine: e' un titolo di notizia?
   e' testo da leggere? Se no, e' cromatura, e va su --font-sans. */

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Lo skin. L'IMMAGINE NON STA QUI: arriva da skin.php come custom property
   --skin-img in uno style inline sul <body>, perche' cambia a ogni visita per
   rotazione. Nella bozza era un url() scritto a mano, e lasciarlo qui
   significherebbe mostrare quel banner a chiunque quando la rotazione non ne
   serve nessuno.
   Custom property e non background-image inline: cosi' la media query sotto i
   1440px puo' spegnerlo con "background-image: none". Con l'inline - che
   portava anche !important - non ci riusciva, e lo skin si vedeva anche dove il
   disegno lo esclude.
   La classe .has-skin la aggiunge template-top-mobile.php solo se una skin
   c'e' davvero, quindi queste regole non valgono sulle pagine senza. */
body.has-skin {
    background-image: var(--skin-img);
    /* Fisso: lo skin resta dov'e' e il contenuto gli scorre sopra, che e' il
       comportamento di una skin pubblicitaria. Da qui viene anche il fatto che
       il background-position qui sotto si misuri sul VIEWPORT e non sul
       documento: e' quello che fixed cambia.
       iOS Safari ignora fixed e lo tratta come scroll, ma non ci riguarda:
       sotto i 1440px lo skin e' spento del tutto. */
    background-attachment: fixed;
    /* A --header-h dal bordo alto, centrato: la riga 0 del file cade esattamente
       sotto la testata e ci resta, a qualunque scorrimento. Funziona perche' la
       testata e' appiccicata e occupa quei 198px sempre - vedi il blocco sticky
       piu' sotto, le due cose sono un unico meccanismo e si rompono insieme.
       I 198px sopra l'immagine mostrano il background-color, e non si vedono mai
       perche' ci sta davanti la testata, che e' opaca.
       Qui c'era un calc() con --skin-crop che alzava lo sfondo di 25px per
       nascondere la fascia morta in cima a un creativo. Non e' compito del
       foglio: i creativi arrivano senza quella fascia - la specifica sta nel
       :root, accanto a --skin-reveal. */
    background-position: center var(--header-h);
    background-repeat: no-repeat;
    background-color: #fcfcfc;
    /* Fallback matching the basic theme */
}

/* Lo skin e' cliccabile: <a id="skinlink"> e' un link vuoto steso su tutta la
   fascia visibile sopra il contenuto. Nella bozza era stato disattivato perche'
   intercettava ogni clic della pagina; qui non puo' farlo, perche' la colonna
   del contenuto ha z-index 10 e gli sta sopra.
   Si ferma a --skin-reveal, che e' esattamente quanto dello skin si vede prima
   che cominci il contenuto: oltre quel punto non c'e' niente da cliccare. */
body.has-skin #skinlink {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    height: var(--skin-reveal);
    z-index: 5;
    display: block;
}

/* LA TESTATA INTERA RESTA APPICCICATA IN CIMA, e non e' una scelta di stile: e'
   il presupposto perche' lo skin parta sempre a --header-h (228px) dal bordo
   alto. Lo sfondo e' ancorato al viewport, quindi quei 228px vanno occupati da
   qualcosa di opaco a qualunque scorrimento - e lo sono: la barra e' sul rosso
   pieno, l'header e' bianco.
   Devono stare SU ENTRAMBI. Con la sola .main-header appiccicata - che e' alta
   188px - fra 188 e 228 resterebbe scoperta una striscia di background-color
   piatto nelle due bande laterali, perche' l'immagine comincia solo a 228.
   Le due si impilano senza sovrapporsi: la barra occupa 0-40 e l'header, con
   top: var(--topbar-h), riparte esattamente dove la barra finisce. Niente
   calc(): --topbar-h E' l'altezza della barra.
   Sticky e non fixed: sticky lascia le due nel flusso, quindi il contenuto non
   ha bisogno di un padding che ne compensi l'altezza, e --skin-reveal continua
   a misurare dal basso dell'header come prima.
   z-index 100: sopra il contenuto, che sta a 10, e sotto la tendina delle
   lingue, che sale a 101 quando e' aperta. Fra le due, di pari z-index, vince
   l'header perche' viene dopo nel documento - ed e' quello che serve, perche'
   scorrendo passa sopra la barra. */
/* SI ATTACCANO SEMPRE, CON O SENZA SKIN.
   Qui c'era body.has-skin, e la testata era appiccicata solo quando il
   gestionale aveva una skin attiva: senza, .top-bar restava static e la barra
   rossa scorreva via. Il difetto non si vedeva perche' il ramo senza skin
   moriva prima - era la pagina bianca di skin.php - quindi il sito era sempre
   in has-skin. Sistemata quella, lo stato e' diventato raggiungibile e il
   difetto e' venuto fuori.
   has-skin resta dov'e' sul resto: sfondo, ombra e lo stacco di
   .main-content.with-skin. Quelle dipendono davvero dall'immagine, e accenderle
   sempre lascerebbe una fascia vuota di 175px sotto la testata.
   `body` e non `.top-bar` da sola per tenere la specificita' a (0,1,1): cosi'
   questa regola vince ancora su .main-header di riga 741, che e' (0,1,0) e sta
   piu' avanti nel file, e non serve spostare niente. */
body .top-bar {
    position: sticky;
    top: 0;
    z-index: 100;
}

body .main-header {
    position: sticky;
    top: var(--topbar-h);
    z-index: 100;
}

/* Non 40 come nel resto della pagina: il padding-bottom era gia' a zero perche'
   il piede porta il suo, e questo segue la stessa logica.
   .has-skin e .with-skin stanno nel markup a qualunque larghezza, quindi il
   valore si decide in tre bande e le due media query qui sotto lo riportano
   dove serve:
     sopra i 1440, con lo skin:  14, appena uno stacco. Era 0 al giro 45 - il
                                 contenuto a filo con la fine dello skin - e al
                                 giro 47 e' passato a 14, perche' a filo la
                                 sezione alta della home e le briciole
                                 dell'articolo toccavano il bordo di sopra
     fra 993 e 1439, senza skin: 40, perche' li' il primo elemento e' un
                                 titolo di sezione col suo filetto rosso e a
                                 filo starebbe attaccato a quello dell'header
     sotto i 992:                0, perche' li' il primo elemento e' una
                                 striscia pubblicitaria e i 40px erano un vuoto
                                 fra l'header e la striscia. Lo stacco li' lo
                                 da' il padding-top della griglia, 14, piu'
                                 sotto in .layout-with-sidebar.sequenza-mobile:
                                 sta sulla griglia e non su <main> perche'
                                 serve solo alla home, che la' ha la prima
                                 striscia con margine zero. */
body.has-skin .main-content.with-skin {
    background-color: var(--bg-main);
    position: relative;
    z-index: 10;
    margin-top: var(--skin-reveal);
    padding-top: 14px;
    padding-bottom: 0px;
    /* Footer will provide the bottom padding */
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
}

/* Lo skin ha senso solo dove avanza spazio ai lati del contenitore da 1280px.
   Sotto i 1440px lo spegniamo del tutto: sfondo, link a tutta pagina e stacco
   verticale. Cosi gli offset in pixel di --header-h restano un problema del
   solo desktop largo, e non c'e' un link invisibile a tutta pagina davanti
   al contenuto sulle viste strette.
   Il valore e' scritto qui e non in una variabile perche' le custom property
   non sono utilizzabili dentro una media query. */
@media (max-width: 1439.98px) {

    body.has-skin {
        background-image: none;
    }

    body.has-skin .main-content.with-skin {
        margin-top: 0;
        /* Il padding che la regola sopra azzera per la modalita' skin: qui lo
           skin non c'e', quindi il contenuto torna a staccarsi dall'header dei
           40px di .main-content, che e' il valore del resto della pagina.
           Sotto i 992 lo riazzera la media query che segue. */
        padding-top: 40px;
    }
}

/* Sul mobile il distacco dall'header non serve e si vedeva come un vuoto: il
   primo elemento della pagina e' una striscia pubblicitaria - l'ex skin - e i
   40px la staccavano dal filetto rosso senza che ci fosse niente in mezzo.
   Qui torna a zero, e la striscia comincia dove finisce l'header.
   Sulla pagina articolo il risultato non e' identico: la' il primo elemento e'
   dentro .articolo, che sta dentro un elemento di griglia, quindi il suo
   margine di 20px resta dentro invece di uscire e la striscia si stacca di 20.
   Sulla home il margine e' zero di proposito, perche' lo spazio fra i blocchi
   lo governa il gap della griglia. */
@media (max-width: 992px) {

    body.has-skin .main-content.with-skin {
        padding-top: 0;
    }
}

/* Testo leggibile dagli screen reader ma non a schermo. Non e' display:none,
   che lo toglierebbe anche a loro. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--accent-testo);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Top Bar */
.top-bar {
    background-color: var(--accent);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
}

.top-bar-inner {
    display: flex;
    justify-content: space-between;
    height: var(--topbar-h);
    align-items: center;
    /* Il blocco contenitore del logo della testata compatta, qui sotto. Non
       disturba la tendina delle lingue, che e' ancorata a .lang-switch. */
    position: relative;
}

/* IL LOGO DELLA TESTATA COMPATTA. Nascosto di partenza e a qualunque larghezza:
   lo accende solo body.testata-ridotta, dentro la media query dei 1024px, che e'
   l'unico posto dove la testata si comprime.
   visibility e non display: none per avere una transizione, e perche' hidden
   toglie l'elemento anche al Tab - un logo invisibile ma focalizzabile farebbe
   sparire il fuoco dalla vista. */
.top-bar-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}

/* L'altezza decide la misura: la larghezza la segue dal rapporto del viewBox,
   7,7:1. 20px su una barra da 40 lascia 10px di aria sopra e sotto. */
.top-bar-logo img {
    display: block;
    height: var(--topbar-logo-h);
    width: auto;
}

.top-nav-links a {
    margin-right: 20px;
    color: #fff;
}

/* Sul rosso il bianco e' gia il massimo contrasto: l'hover non puo' essere
   un altro colore, quindi si segnala con la sottolineatura. Serve anche a
   battere la regola globale a:hover { color: var(--accent-testo) }, che qui
   sarebbe rosso su rosso. */
.top-nav-links a:hover {
    color: #fff;
    text-decoration: underline;
}

.top-nav-actions {
    display: flex;
    align-items: center;
    /* 4px e non i 20 di prima: qui non c'e' piu un elemento solo ma quattro
       icone, e la barra e' stretta. */
    gap: 4px;
}

/* Selettore di lingua. Il pulsante porta la lingua corrente, le altre cinque
   stanno nella tendina. Il chevron e' lo stesso dei sottomenu del menu
   principale - due bordi da 2px ruotati di 45 gradi - e non un glifo, che
   dipenderebbe dal font. */
.lang-switch {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
    margin-right: 8px;
}

.lang-toggle {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 4px;
    border: none;
    background: transparent;
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}

.lang-toggle:hover {
    text-decoration: underline;
}

.lang-toggle::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.3s ease;
}

.lang-toggle[aria-expanded="true"]::after {
    transform: translateY(1px) rotate(225deg);
}

/* La tendina apre sotto la barra. z-index 1200 batte i 1000 dell'header sticky.
   Il commento che stava qui diceva "fuori dalla modalita skin .top-bar non e'
   posizionata": era vero finche' lo sticky era legato a body.has-skin, e proprio
   quello era il difetto - senza skin la barra rossa scorreva via. Ora .top-bar
   e' posizionata sempre, quindi fa contesto di impilamento sempre, ed e' per
   questo che serve la regola su :has(.lang-menu.is-open) piu' sotto. */
.lang-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1200;
    display: none;
    min-width: 150px;
    padding: 6px 0;
    list-style: none;
    background: var(--accent);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.lang-menu.is-open {
    display: block;
}

.lang-menu a {
    display: block;
    padding: 9px 14px;
    color: #ffffff;
    font-size: 0.85rem;
    white-space: nowrap;
}

.lang-menu a:hover {
    color: #ffffff;
    background: var(--accent-hover);
}

/* .top-bar e .main-header sono entrambi a z-index 100 e fratelli, quindi vince
   l'header per ordine nel DOM e la tendina ci finirebbe sotto. La barra sale di
   un gradino SOLO mentre la tendina e' aperta: fuori da quel momento l'ordine
   resta quello di prima, e l'header sticky continua a passare sopra la barra
   quando si scorre.
   Non piu' legata alla skin: da quando la barra e' appiccicata sempre, la
   tendina ha lo stesso problema di impilamento anche senza skin. */
body .top-bar:has(.lang-menu.is-open) {
    z-index: 101;
}

/* Le quattro icone social, al posto del selettore di lingua.
   I file hanno solo il viewBox e nessuna dimensione intrinseca, quindi width
   e height stanno sull'<img> nell'HTML [P-10]; qui il CSS li ribadisce.
   align-self: stretch da al link tutta l'altezza della barra, 40px, senza
   allargarla: l'area toccabile cresce in larghezza e non in altezza. */
.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    align-self: stretch;
    opacity: 1;
    transition: opacity var(--transition-fast);
}

/* Il bianco e' scritto dentro il file e non e' governabile dal foglio
   [P-13]: l'hover puo' agire solo sull'opacita, non sul colore. */
.social-link:hover {
    opacity: 0.85;
}

.social-link img {
    display: block;
    width: 18px;
    height: 18px;
}

/* UTENTE E NOTIFICHE (giro 38). Stanno nella barra rossa e non nella riga del
   logo: la' la colonna centrale e' l'unica cosa elastica, e due icone da 44 la
   portavano da 119,2 a 15,2px, cioe' un logo alto 3px (REPORT-34, punto 2).
   Qui invece lo spazio c'e': col selettore di lingua il gruppo destro chiede
   171,2px e a 320 di finestra ne avanzano 108,8.
   Stessa forma dei social - 44px di larghezza, altezza della barra - perche'
   nella stessa fascia due misure diverse si vedrebbero. */
/* La lente nella barra rossa (giro 39). Il bottone porta color:
   var(--text-primary) dalla regola condivisa con l'hamburger, che sul rosso
   sarebbe nero: il tratto dell'SVG e' currentColor, quindi basta portarlo a
   bianco. L'area resta 44px di larghezza e l'altezza della fascia, come le
   altre due icone. */
.top-bar .search-toggle {
    width: 44px;
    height: auto;
    align-self: stretch;
    color: #ffffff;
    /* Lo stesso spostamento dell'hamburger, qui sotto: la lente e' esattamente
       sopra di lui e se si muovesse uno solo si vedrebbero disallineati fra le
       due fasce. Il bottone e' 44px con dentro un'icona da 20, quindi
       l'inchiostro passa da 32 a 24px dal bordo. */
    margin-left: -8px;
}

.top-bar .search-toggle:hover {
    color: #ffffff;
    opacity: 0.85;
}

.top-icona {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    align-self: stretch;
    opacity: 1;
    transition: opacity var(--transition-fast);
}

.top-icona:hover {
    opacity: 0.85;
}

/* Il contatore delle notifiche da leggere, appeso alla campanella. Non c'era
   nella bozza, perche' la bozza non aveva un utente: il markup lo stampa solo
   se il conto e' maggiore di zero, quindi qui non serve nessun :empty.
   position: relative sull'ancora e non sull'immagine: e' l'ancora che tiene la
   scatola da 34px su cui il pallino si aggancia.
   Fondo bianco e testo rosso, non il contrario: la barra e' gia' rossa. */
.top-icona-notifiche {
    position: relative;
}

.notifiche_dcount {
    position: absolute;
    top: 4px;
    right: -2px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: #fff;
    color: var(--accent);
    font-family: var(--font-sans);
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 15px;
    text-align: center;
}

/* Il filtro: i due file sono neri e il bianco esiste solo per notifiche
   (notifiche-bianco.svg, mentre utente-bianco.svg non c'e' - verificato).
   Schiarirli entrambi con lo stesso filtro che il logo del piede usa gia'
   tiene la coppia identica, invece di prenderla da due sorgenti diverse. */
.top-icona img {
    display: block;
    filter: brightness(0) invert(1);
}

/* MISURE DIVERSE PER LE DUE ICONE, E NON SONO UN ERRORE. La tentazione, ogni
   volta che si guardano, e' di pareggiarle: sono due icone accanto, perche' non
   la stessa misura? Perche' i due disegni riempiono il loro viewBox in modo
   molto diverso, e la misura da pareggiare e' l'inchiostro, non la scatola.
   Misurato sul contorno vero dei <path>, dentro il viewBox 50,3x68,3:
     utente     48,0 x 46,0  ->  95% della larghezza, 67% dell'altezza
     notifiche  47,6 x 66,5  ->  95% della larghezza, 97% dell'altezza
   Con 25x34 e 21x29 - le misure del sito vero - l'inchiostro esce 23,9x22,9 e
   19,9x28,2: aree 546 e 561, il 3% di scarto. Pareggiando le scatole a 25x34
   l'inchiostro della campanella diventa 23,7x33,1, area 783: il 43% in piu',
   ed e' esattamente il difetto che il giro 39 ha corretto.
   Rapporti: viewBox 0,7365, utente 0,7353 (0,16% di scarto), notifiche 0,7241
   (1,67%): nessuna delle due si deforma in modo visibile.
   Le misure stanno anche nel markup [P-10]: i due file hanno il solo viewBox e
   nessuna dimensione intrinseca, quindi vanno dichiarate.
   NOTA sui file -2026 (giro 40): notifiche-2026.svg e' identico byte per byte a
   notifiche.svg, e utente-2026.svg ha il disegno della stessa misura spostato
   in alto di 8 unita' - y da 13,7-59,7 invece di 21,7-67,7. Serviva a quello e
   ha funzionato: il centro dell'inchiostro dell'utente nella fascia da 40px
   passa da +5,25px sotto l'asse a +1,27, contro lo 0,00 della campanella.
   L'allineamento era il problema, la misura no. */
.top-icona-utente img {
    width: 25px;
    height: 34px;
}

.top-icona-notifiche img {
    width: 21px;
    height: 29px;
}

/* Sotto la soglia della vista touch l'area dei social cresce a 44px di
   larghezza, come hamburger e lente. In altezza resta 40, che e' la barra:
   vedi REPORT-18. La regola serve ancora alla pagina articolo, dove i social
   nella barra restano a ogni larghezza. */
@media (max-width: 1023.98px) {

    .social-link {
        width: 44px;
    }

    .top-icona {
        display: flex;
    }

    /* I quattro social lasciano la barra solo dove ci sono le due icone e dove
       loro sono in fondo al pannello del menu. Il :has() lega le due cose: la
       pagina articolo non ha .top-icona e non ha i social nel pannello, quindi
       li' restano nella barra e questo giro non la tocca. */
    .top-nav-actions:has(.top-icona) .social-link {
        display: none;
    }
}

/* I TRE LINK ESCONO DALLA BARRA SUL TELEFONO (REPORT-31, punto 2).
   La barra chiede 550,5px di finestra per starci: 243,3 i tre link, 267,2
   lingua e quattro social, 40 il padding del contenitore. Sotto, .top-bar-inner
   e' un flex senza wrap con height fissa a 40px, quindi non sforava in
   orizzontale ma comprimeva: a 375px i tre link andavano su TRE righe - 65,3px
   di testo in una fascia alta 40 - con dodici pixel fuori sopra, su fondo
   #fcfcfc e in bianco, e tredici dietro l'header bianco a z-index 1000. Restava
   leggibile la riga di mezzo. E nello stesso movimento i quattro social
   scendevano a 20,8px di larghezza, annullando i 44 che la regola qui sopra
   gli concede per la vista touch.
   Delle tre strade possibili - togliere i link, alzare la fascia, ridurre il
   contenuto - ho scelto di TOGLIERE I TRE LINK, per tre ragioni:
   1. le tre destinazioni sono nel piede di ogni pagina ("Chi siamo",
      "Newsletter", "Info e contatti"), quindi non si perde niente: sono gli
      stessi tre indirizzi, non un ripiego;
   2. alzare la fascia costa 25px di altezza su uno schermo da 667 per tre link
      di servizio, e li spende in cima, dove lo spazio vale di piu';
   3. spostarli nel pannello del menu vorrebbe dire duplicarli una terza volta e
      mettere mano al menu, che questo giro non tocca.
   La soglia e' 600px e non i 550,5 misurati: 600 e' un breakpoint che il foglio
   ha gia', e lascia scarto, cosi' un'etichetta piu' lunga o un font diverso non
   riaprono il guasto. Il prezzo e' che fra 551 e 600 i link spariscono pur
   potendo ancora starci.
   Dal giro 39 la barra tiene la lente a sinistra e lingua, utente e notifiche a
   destra: con i tre link fuori sono 215,2px di contenuto, e a 320 di finestra
   ne avanzano 64,8. Il space-between di .top-bar-inner fa il resto e non serve
   piu' correggerlo, perche' i figli visibili restano due. */
@media (max-width: 600px) {

    .top-nav-links {
        display: none;
    }
}

/* Newsroom Header Styling */
.main-header {
    background: #ffffff;
    border-bottom: 2px solid var(--accent);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Ombra accentuata oltre la soglia di scroll. La classe la mette il JS;
   prima era uno style inline scritto dentro la callback di scroll. */
.main-header.is-scrolled {
    /* Valore scelto a occhio, DA TARARE GUARDANDOLO, e adesso si vede per la
       prima volta: il precedente 0 4px 20px rgba(0,0,0,0.5) veniva dal JS e non
       l'aveva mai visto nessuno perche' la classe non veniva applicata (J-2), e
       questo non lo aveva mai visto nessuno perche' l'header non restava a
       schermo. La soglia del JS e' scrollY > 40, cioe' esattamente l'altezza
       della barra rossa: l'ombra compare nel momento in cui la banda si
       appiccica al bordo. */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* SOTTO I 1023,98px RESTA A SCHERMO LA SOLA BANDA DELL'HAMBURGER E DEL LOGO.
   Sopra questa soglia la testata e' appiccicata INTERA - barra rossa a 0 e header
   a --topbar-h - perche' li' c'e' lo skin e quei 198px devono restare coperti.
   Qui lo skin non c'e' (e' spento sotto i 1439,98), quindi tenere a schermo anche
   la barra rossa vorrebbe dire regalarle 40px di altezza utile su uno schermo che
   ne ha pochi: la barra torna nel flusso e scorre via, e l'header si appiccica
   da solo al bordo, a top 0 invece che sotto la barra.
   Le due regole hanno la stessa specificita' di quelle del blocco sticky piu'
   su (0,2,1) e vincono perche' vengono dopo nel foglio: se qualcuno riordina il
   file, si rompe. E' scritto qui perche' non ci sia da scoprirlo.
   Sticky e non fixed: sticky lascia la banda nel flusso, quindi non serve
   compensare l'altezza con un padding sul contenuto.
   La soglia e' 1023,98 e non 992: e' quella a cui la testata DIVENTA questa
   banda - hamburger, logo centrato, ABBONATI - mentre i 992 riguardano la
   sidebar. Se la vuoi a 992 e' un numero solo. */
@media (max-width: 1023.98px) {

    /* relative e non static: in flusso si comportano allo stesso modo, ma su un
       elemento static lo z-index non ha effetto, e la barra ne ha bisogno -
       body .top-bar:has(.lang-menu.is-open) la porta a 101 per far
       passare la tendina delle lingue sopra l'header, che sta a 100. Con static
       quella regola diventava inerte e la tendina finiva dietro l'header. */
    body .top-bar {
        position: relative;
        top: auto;
    }

    body .main-header {
        position: sticky;
        top: 0;
        z-index: 100;
    }
}

/* Il padding orizzontale e' 20px e non zero, ed e' una correzione: la riga
   porta anche .container, che da' padding: 0 20px, ma questa regola viene dopo
   nel foglio e con la stessa specificita', quindi la scorciatoia `padding`
   azzerava i 20px laterali. Risultato: il rettangolo rosso di ABBONATI finiva
   a filo col bordo destro dello schermo, e l'hamburger a filo col sinistro -
   sembrava inset solo perche' le sue tre barre da 22px stanno centrate in un
   bottone da 44.
   ATTENZIONE, e vale per i conti dei giri 33 e 34: il contenuto della riga
   era largo 375px a 375 di finestra, non 335. Adesso e' 335 davvero, e la
   colonna che avanza al logo passa da 159,2 a 119,2px. */
.header-main-line {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: var(--header-line-pad) 10px;
}

/* min-width: 0 su entrambe le colonne laterali: senza, un grid item non
   scende sotto la larghezza del proprio contenuto e a 1024px l'header
   sfonderebbe invece di stringere il campo di ricerca. */
.header-tools-left {
    display: flex;
    gap: 20px;
    align-items: center;
    min-width: 0;
}

.header-tools-right {
    display: flex;
    gap: 25px;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.logo-centered img {
    height: var(--logo-h);
}

/* Hamburger e lente: esistono solo sotto la soglia mobile, ma il markup e'
   uno solo per entrambe le viste. */
.nav-toggle,
.search-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    /* 44x44 e' la superficie toccabile minima raccomandata. Il riquadro non
       si vede piu (niente bordo, niente fondo), ma l'area del <button>
       resta quella: le icone dentro sono piu piccole e restano centrate. */
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
}

.nav-toggle:hover,
.search-toggle:hover {
    color: var(--accent-testo);
}

/* Tre barre disegnate in CSS. Lo stato aperto si aggancia ad aria-expanded,
   che il JS aggiorna comunque: nessuna classe in piu da tenere allineata. */
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    transition: transform var(--transition-fast), background-color var(--transition-fast), top var(--transition-fast);
}

.nav-toggle-bars {
    position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
    content: '';
    position: absolute;
    left: 0;
}

.nav-toggle-bars::before {
    top: -7px;
}

.nav-toggle-bars::after {
    top: 7px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
    background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
    top: 0;
    transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
    top: 0;
    transform: rotate(-45deg);
}

/* Il tasto di espansione dei sottomenu serve solo alla vista stretta:
   sul desktop i sottomenu si aprono con hover e con focus-within. */
.submenu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    align-self: stretch;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.submenu-toggle::after {
    content: '';
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--transition-fast);
}

.submenu-toggle[aria-expanded="true"]::after {
    transform: translateY(2px) rotate(225deg);
}

/* Ricerca in testata (Google CSE). */
.header-search .searchform {
    display: flex;
    align-items: stretch;
    height: var(--search-h);
}

.header-search input[type="text"] {
    width: 180px;
    min-width: 0;
    flex: 0 1 180px;
    max-width: 100%;
    border: 1px solid var(--border-color);
    border-right: none;
    border-radius: 4px 0 0 4px;
    padding: 0 10px;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--text-primary);
    background: #fff;
}

.header-search input[type="text"]::placeholder {
    color: #6b6b6b;
}

.header-search input[type="text"]:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Il CERCA non e' piu' pieno: ABBONATI resta l'unico elemento pieno
   dell'header. La ricerca e' uno strumento, non un invito, e due rossi alle
   due estremita' si contendevano l'attenzione mentre il logo in mezzo la
   perdeva. Il bordo e' lo stesso del campo, cosi' campo e bottone si leggono
   come un controllo solo invece che come due; il rosso resta sul testo, che
   e' abbastanza per dire di che marca e' senza pesare (6,91:1 su bianco).
   Forma scelta fra le due: non la lente dentro il campo, perche' l'unico
   modo di sostituire la scritta di un <input type="submit"> e' nasconderne
   il valore e metterci un'immagine di sfondo, e il valore "Cerca" fa parte
   del contratto del form CSE, che non si tocca. Il bordo ottiene lo stesso
   alleggerimento senza una riga di markup. */
.header-search input[type="submit"] {
    border: 1px solid var(--border-color);
    border-radius: 0 4px 4px 0;
    background: transparent;
    color: var(--accent-testo);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 12px;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.header-search input[type="submit"]:hover {
    background: var(--bg-hover);
    color: var(--accent-hover);
}

.account-link {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
}

/* Da connessi l'etichetta non e' piu' una frase scelta da noi ma il nome di chi
   e' entrato, e i nomi non li decidiamo noi: "Massimiliano Della Francesca"
   spingerebbe fuori il bottone abbonamento. Si taglia con l'ellissi, e il nome
   intero resta nel title del link. */
.account-link-connesso {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* LA CAMPANELLA NELLA RIGA DEL LOGO.

   Non e' .top-icona: quella nasce display:none e si accende solo sotto i 992px,
   perche' nella barra rossa le due icone sono il modo di dare utente e
   notifiche al telefono. Sul desktop la barra rossa non le mostra, ed e' il
   motivo per cui qui non c'era niente. */
.account-notifiche {
    position: relative;
    display: flex;
    align-items: center;
    /* Accosta la campanella al nome: il gap da 25px del contenitore e' la
       distanza fra le cose diverse, non fra due pezzi della stessa. */
    margin-left: -15px;
    opacity: 1;
    transition: opacity var(--transition-fast);
}

.account-notifiche:hover {
    opacity: 0.7;
}

.account-notifiche img {
    display: block;
}

/* Il contatore e' lo stesso componente della barra rossa, ma li' il fondo e'
   rosso e il pallino e' bianco col numero rosso. Qui il fondo e' bianco, e un
   pallino bianco sarebbe invisibile: si rovescia. */
.header-tools-right .notifiche_dcount {
    top: -2px;
    right: -8px;
    background: var(--accent);
    color: #ffffff;
}

.btn-subscribe-news {
    background-color: var(--accent);
    color: #fff !important;
    padding: 7px 16px;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    transition: background-color 0.2s ease;
}

.btn-subscribe-news:hover {
    background-color: var(--accent-hover);
}

/* Navigation Bar */
.news-nav {
    background: #fdfdfd;
    border-top: 1px solid #eeeeee;
}

.nav-links-news {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 35px;
    height: var(--nav-h);
    align-items: center;
}

.nav-links-news li {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-links-news a {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #333;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.nav-links-news a:hover {
    color: var(--accent-testo);
}

/* Caret for submenu */
/* Freccia a V disegnata in CSS, come quella del pulsante nel pannello
   mobile (.submenu-toggle::after): stesso spessore, stessa rotazione
   all'apertura. Prima qui c'era il glifo '\25BC', un triangolo pieno che
   dipendeva dal font e non combaciava con la versione mobile. */
.nav-links-news .has-submenu>a::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.3s ease;
}

.nav-links-news .has-submenu:hover>a::after {
    transform: translateY(1px) rotate(225deg);
}

/* Le voci che esistono SOLO nel pannello del menu (giri 36-37).
   .nav-servizio sono le quattro voci di servizio - Chi siamo, Newsletter,
   Contatti, Pubblicita' - e .nav-social la fila dei quattro profili che chiude
   il pannello. Compaiono col pannello, sotto i 1023,98px.
   .nav-account non c'e' piu': dal giro 38 "Il mio account" e' l'icona utente
   nella barra rossa, e nel pannello sarebbe stato un doppione.
   Due classi contro una classe e un tipo: battono .nav-links-news li, che nel
   pannello porta display: block, senza dipendere dall'ordine di scrittura. */
.nav-links-news .nav-servizio,
.nav-links-news .nav-social {
    display: none;
}

/* Il blocco di servizio compare con il pannello, sotto i 1023,98px, e non piu'
   sotto i 600 come al giro 36. Ho cambiato idea per due ragioni: "Pubblicita'"
   non sta nella barra rossa, quindi sopra i 600 il blocco sarebbe stato una
   voce sola con un separatore marcato sopra; e un blocco che cambia numero di
   voci a meta' strada e' piu' difficile da giudicare di un doppione. Il prezzo,
   dichiarato: fra 601 e 1024px Chi siamo, Newsletter e Contatti si vedono sia
   nella barra sia nel pannello - che e' quello che fa anche il sito vero.
   La media query sta QUI e non nel blocco della top bar piu' sopra: la' sarebbe
   venuta prima della regola base, e a parita' di specificita' avrebbe perso -
   le voci non sarebbero comparse da nessuna parte. */
@media (max-width: 1023.98px) {

    .nav-links-news .nav-servizio {
        display: block;
    }

    /* Corpo minore, peso normale e tondo invece di maiuscolo: tre segnali
       insieme, perche' uno solo non basta a far leggere un elenco come
       subordinato. Il colore NON si tocca - resta il #333 delle altre voci - e
       la gerarchia la fanno misura, peso e cassa.
       Il padding e' piu' stretto di quello delle voci principali per la stessa
       ragione, e serve anche a non allungare il pannello, che con le voci nuove
       ha passato i 70vh. Al giro 41 i due valori sono scesi a 11 e 8: la voce
       principale resta alta 43,76px, un quarto di pixel sotto la soglia
       toccabile di 44, e la voce di servizio 35,2. Il pannello passa da 662,9 a
       598,9px. */
    .nav-links-news .nav-servizio>a {
        padding: 8px 0;
        font-size: 0.75rem;
        font-weight: 400;
        text-transform: none;
        letter-spacing: 0;
    }

    /* IL SEPARATORE MARCATO. Non e' un elemento in piu' ma il bordo inferiore
       dell'ultima voce che non e' di servizio: 2px del nero della pagina al
       posto del filetto da 1px. :not(.nav-servizio) e' indispensabile - senza,
       :has(+ .nav-servizio) prenderebbe anche le voci di servizio, che sono
       seguite da altre voci di servizio, e i filetti marcati diventerebbero
       quattro. */
    .nav-links-news>li:not(.nav-servizio):has(+ .nav-servizio) {
        border-bottom: 2px solid var(--text-primary);
    }

    /* I quattro social chiudono il pannello, centrati e senza filetto: sono la
       fine dell'elenco, non una voce. */
    .nav-links-news .nav-social {
        display: flex;
        justify-content: center;
        gap: 8px;
        padding: 14px 0 18px;
        border-bottom: none;
    }

    /* Due classi contro una classe e due tipi: batte .nav-links-news>li>a, che
       nel pannello renderebbe ognuno dei quattro un blocco a tutta larghezza. */
    .nav-links-news .nav-social>a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        flex: 0 0 auto;
    }

    .nav-social-link img {
        display: block;
        width: 22px;
        height: 22px;
    }
}

/* Submenu Styles */
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 220px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    list-style: none;
    border-radius: 0 0 8px 8px;
    border: 1px solid var(--border-color);
    border-top: 2px solid var(--accent);
    z-index: 101;
}

/* :focus-within serve a raggiungere i sottomenu da tastiera. Funziona perche
   il link di primo livello e' dentro il <li>: appena riceve il focus il
   sottomenu diventa visibile, e solo allora i suoi link entrano nel giro
   della tabulazione. Con il solo :hover erano irraggiungibili (X-6). */
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.submenu li {
    border-bottom: 1px solid var(--border-color);
}

.submenu li:last-child {
    border-bottom: none;
}

.submenu a {
    padding: 12px 20px;
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.submenu a:hover {
    background-color: var(--bg-hover);
    color: var(--accent-testo);
}

/* Il logo torna a 60px quando lo spazio in testata si stringe.
   E' l'unica dichiarazione necessaria: --header-h e' un calc() che lo
   contiene, quindi header e offset dello skin si riallineano da soli.
   Sta prima del blocco sotto i 1024px per rispettare l'ordine di cascata. */
@media (max-width: 1199.98px) {

    :root {
        --logo-h: 60px;
    }
}

/* =========================================
   HEADER SU VISTE STRETTE (sotto 1024px)
   Stesso markup del desktop: qui cambia solo come si comporta.
   La nav orizzontale diventa un pannello a scomparsa, il form di ricerca
   un secondo pannello, e i sottomenu si aprono con il loro pulsante.
   ========================================= */
@media (max-width: 1023.98px) {

    .nav-toggle,
    .search-toggle {
        display: flex;
    }

    /* Il logo scala per stare nello spazio che avanza, invece di spingere
       fuori le colonne laterali: nessun breakpoint aggiuntivo per i 375px.
       gap 6 e non 12 (giro 42): i 12 dichiarati non erano l'aria che si vede.
       A sinistra il bottone dell'hamburger ha 11px di vuoto suo dentro i 44,
       quindi fra le barre e il logo restano comunque 19,2px; a destra il file
       del logo ha l'1% di margine interno - 7 unita' su 676, misurate sui
       path - che alla colonna di 375px valgono 2,1px, e col gap a 6 l'aria
       vera fra il marchio e il rettangolo rosso e' 8,1px. Sotto i 6 diventava
       stretta davvero, e i pixel risparmiati vanno tutti al logo. */
    .header-main-line {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 6px;
    }

    /* Spostato di 8px verso il bordo, e non e' solo spazio guadagnato: le tre
       barre da 22px stanno centrate in un bottone da 44, quindi partivano a
       31px dal bordo mentre il rettangolo di ABBONATI finisce a 20. Undici
       pixel di asimmetria che si vedevano. Adesso le barre partono a 23 e lo
       scarto e' 3. Il margine negativo stringe la traccia `auto` della griglia,
       quindi gli 8px vanno alla colonna del logo. */
    .header-tools-left {
        gap: 8px;
        margin-left: -8px;
    }

    /* justify-self: stretch e non center, e non e' un dettaglio: serve a dare
       al logo una larghezza DEFINITA da cui ricavare l'altezza. Col center la
       scatola si stringeva sul contenuto, e il contenuto e' un SVG che ha solo
       il viewBox: nessuna dimensione intrinseca, riferimento circolare, e al
       giro 5 il logo veniva 0x0 [P-10]. Adesso la colonna la riempie lei, e il
       centraggio lo fa il margin: auto sull'immagine quando il tetto entra in
       gioco. */
    .logo-centered {
        min-width: 0;
        justify-self: stretch;
    }

    /* display: block perche' width: 100% sull'immagine si risolva su questa
       scatola e non su un contenitore inline di larghezza indefinita. */
    .logo-centered a {
        display: block;
    }

    /* Prima: height fissa a --logo-h, width auto, max-width 100% e
       object-fit: contain. A 375px la colonna che avanza e' 119px, quindi il
       marchio si disegnava 119x23,5 dentro una scatola alta 60: trentasei
       pixel e mezzo di vuoto sopra e sotto, e una testata alta 92px per un
       logo alto 23 (REPORT-31, punto 3).
       Adesso comanda la LARGHEZZA: il logo prende tutta la colonna e
       l'altezza la ricava dal rapporto del viewBox, 676/133. La scatola e'
       quindi sempre alta esattamente quanto il marchio disegnato, e la
       testata si accorcia dove il logo e' piccolo invece di tenere il vuoto.
       max-height: var(--logo-h) e' il tetto: sopra i ~561px di finestra la
       colonna darebbe piu' di 60px e il logo tornerebbe piu' grande di come
       e' sempre stato, quindi lassu' si ferma dov'era e il margin: auto lo
       ricentra. object-fit non serve piu': non c'e' piu' una scatola con due
       misure imposte in cui l'immagine possa deformarsi. */
    .logo-centered img {
        width: 100%;
        height: auto;
        max-height: var(--logo-h);
        margin-left: auto;
        margin-right: auto;
    }

    /* "IL MIO ACCOUNT" e' la prima cosa che salta dalla riga del logo: resta
       ABBONATI. Non sparisce dalla pagina, pero': dal giro 38 e' l'icona utente
       nella barra rossa. Nella riga del logo non poteva stare - due icone da 44
       portavano la colonna centrale da 119,2 a 15,2px, logo alto 3 - e nella
       barra invece avanzano 108,8px a 320 di finestra.

       LA CAMPANELLA SE NE VA CON LUI, per la stessa ragione e nello stesso
       momento: anche lei esiste gia' nella barra rossa (.top-icona-notifiche,
       col suo contatore). Lasciandola qui comparivano DUE campanelle una sopra
       l'altra - verificato a 414px: quella della barra a 3px dall'alto e questa
       a 73. La zona utente della riga del logo e' una cosa sola e si ritira
       intera, altrimenti resta un pezzo orfano di un gruppo che non c'e' piu'.

       Lo scambio e' pulito perche' le due soglie COINCIDONO: .top-icona passa a
       display:flex esattamente in questa media query, non a 992 come verrebbe
       da pensare guardando le altre regole della vista stretta. Niente banda di
       mezzo in cui non si veda ne' l'una ne' l'altra cosa. */
    .account-link,
    .account-notifiche {
        display: none;
    }


    /* ABBONATI contenuto (giri 39 e 42). Al giro 39 era 0,8rem con padding 9/14,
       cioe' 95,8px, il 28,6% della riga a 375. Adesso 0,7rem con padding 9/7:
       73,3 x 35,9, il 21,9%. La parola resta - non diventa un'icona - e il
       taglio e' venuto tutto dal padding orizzontale, 14 -> 10 -> 7: e' li' che
       stavano i pixel senza informazione, mentre il corpo si e' fermato a
       0,7rem. Il padding verticale resta 9 per non perdere altezza toccabile.
       0,7rem = 11,2px in maiuscolo grassetto: piu' piccolo di .art-strumento-testo
       (0,75) e piu' grande del cartellino "Sfoglia" delle copertine (0,6), quindi
       dentro la scala che il foglio usa gia'. Sotto i 7px di padding il
       rettangolo comincia a stringere la parola invece dell'aria. */
    .btn-subscribe-news {
        white-space: nowrap;
        padding: 7px 5px;
        font-size: 0.6rem;
    }

    /* I due pannelli. .main-header e' sticky, quindi e' gia il blocco
       contenitore per questi assoluti. */
    .news-nav,
    .header-search {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 999;
        background: #fff;
        border-top: 1px solid var(--border-color);
        border-bottom: 2px solid var(--accent);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }

    .news-nav.is-open,
    .header-search.is-open {
        display: block;
    }

    .news-nav {
        max-height: 70vh;
        overflow-y: auto;
    }

    .header-search {
        padding: 15px 20px;
    }

    .header-search .searchform {
        width: 100%;
    }

    .header-search input[type="text"] {
        flex: 1 1 auto;
        width: auto;
    }

    /* Voci in colonna. */
    .nav-links-news {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        height: auto;
        gap: 0;
        padding: 8px 0;
    }

    .nav-links-news li {
        display: block;
        height: auto;
    }

    .nav-links-news>li {
        border-bottom: 1px solid var(--border-color);
    }

    .nav-links-news>li:last-child {
        border-bottom: none;
    }

    .nav-links-news .has-submenu {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    /* display:block anche qui: la voce SHOP non ha sottomenu, quindi il suo
       <li> resta block e senza questo il padding verticale su un link
       inline non farebbe altezza, lasciando quella riga piu bassa. */
    .nav-links-news>li>a {
        display: block;
        flex: 1 1 auto;
        padding: 11px 0;
    }

    /* Sul desktop il caret e' uno pseudo-elemento del link; qui il compito
       passa al pulsante, che e' anche il trigger. */
    .nav-links-news .has-submenu>a::after {
        content: none;
    }

    .submenu-toggle {
        display: flex;
        flex: 0 0 auto;
    }

    /* Su viste strette i sottomenu si governano con display, cosi l'hover
       residuo dei dispositivi touch non li fa comparire da solo. */
    .nav-links-news .submenu,
    .nav-links-news .has-submenu:hover .submenu,
    .nav-links-news .has-submenu:focus-within .submenu {
        display: none;
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        width: 100%;
        flex-basis: 100%;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: var(--bg-hover);
    }

    .nav-links-news .has-submenu.is-open .submenu {
        display: block;
    }

    .submenu a {
        padding-left: 20px;
    }
}

/* Main Content Grid */
.main-content {
    padding: 40px 20px;
}

/* Card Styles */
/* News Cards Styling */
.card {
    background: var(--bg-card);
    transition: transform var(--transition-fast);
}

/* Ingresso delle card al caricamento.
   Lo stato iniziale vive qui, non in uno style inline: il JS si limita ad
   aggiungere e togliere le classi. Se il JS non gira, le classi non vengono
   mai aggiunte e le card restano visibili. */
.card.is-entering {
    opacity: 0;
    transform: translateY(20px);
}

.card.is-enter-active {
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Rete di sicurezza: il JS gia salta l'animazione con reduced-motion,
   ma se le classi arrivassero comunque qui vengono neutralizzate. */
@media (prefers-reduced-motion: reduce) {

    .card.is-entering {
        opacity: 1;
        transform: none;
    }

    .card.is-enter-active {
        transition: none;
    }
}

.card-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1;
    margin-bottom: 12px;
    text-transform: none;
}

.card-image-wrapper {
    position: relative;
    overflow: hidden;
    background: #000;
}

.card-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    opacity: 0.9;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.card:hover .card-image {
    transform: scale(1.08);
    opacity: 1;
}

/* IL SEGNAPOSTO DELLE TESSERE SENZA FOTO.
   Non ha misure sue, e non e' una dimenticanza: riempie .card-image-wrapper, che
   l'aspect-ratio del contesto ha gia' dimensionato - 4/3 in evidenza, 750/360 nei
   lead, 1 nelle quadrate, 16/9 nelle colonne. Cosi' occupa esattamente lo spazio
   che avrebbe occupato l'immagine, in ogni griglia, senza che nessuno debba
   ripetere qui quelle sette proporzioni.
   Prima la tessera senza immagine perdeva tutto il blocco e nella griglia restava
   un buco, col testo che saliva e si disallineava dalle tessere accanto.
   Il fondo nero e' scritto anche qui e non lasciato a .card-image-wrapper: quello
   sta la' per fare da letto alle fotografie, e un segnaposto che dipende da una
   regola pensata per altro si rompe il giorno che quella cambia. */
.card-image-vuota {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

/* Il marchio in percentuale e non in pixel: le tessere vanno da poco piu' di
   200px di larghezza fino ai 750 dei lead, e una misura fissa sarebbe stata
   minuscola in un caso e invadente nell'altro. Il tetto serve al lead, dove il
   45% farebbe un marchio piu' grande di quello della testata.
   Appena accennato, perche' deve leggersi come una tessera senza foto e non come
   un banner: a piena opacita' dieci di questi su una pagina sarebbero una fila di
   loghi. */
.card-image-vuota img {
    width: 45%;
    max-width: 150px;
    height: auto;
    opacity: 0.3;
}

/* Text-Only News List Style */
.text-news-item {
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
    /* Compensazione del passaggio di .text-news-title a display:inline (G6-1).
       Un link inline vive in un blocco anonimo la cui riga non puo' essere piu
       bassa dello strut del contenitore: con l'1.6 ereditato da body la riga
       sarebbe passata da 22.88px a 25.6px e ogni titolo si sarebbe allungato.
       1.3 x 16px = 20.8px sta sotto i 22.88px del titolo, quindi comanda il
       titolo e l'altezza resta quella di prima, riga per riga.
       Gli altri figli si riportano da soli all'1.6 qui sotto. */
    line-height: 1.3;
}

.text-news-item:last-child {
    border-bottom: none;
}

/* Da qui in giu: punti di testo descrittivo agganciati a --font-heading,
   perche il confronto sans/serif si veda anche fuori dai titoli. */
/* inline e non block: su un elemento di blocco il gradiente dell'hover coprirebbe
   tutta la larghezza della colonna e sottolineerebbe solo l'ultima riga. Inline il
   fondo viene affettato riga per riga, esattamente come su .card-title a.
   Niente padding qui: il gradiente si posiziona sul padding box, e un padding
   inferiore staccherebbe il filetto dal testo.
   Il margin-bottom: 5px che stava qui era inerte una volta inline: e' stato
   spostato sui meta che seguono, piu in basso. */
.text-news-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    display: inline;
}

/* Il tag di categoria precede un titolo che adesso e' inline: senza questo
   finirebbero sulla stessa riga. Block per andare a capo, max-content perche'
   il fondo rosso resti largo quanto la parola e non quanto la colonna.
   1.6rem = 25.6px e' esattamente l'altezza di riga che il tag aveva da inline,
   quando ereditava lo strut 16px x 1.6 del blocco anonimo: la fascia rossa
   resta dov'era. */
/* Forma a blocco dell'etichetta, UNA regola sola per tutta la pagina (giro 11).
   Prima le sezioni nuove usavano .category-tag, che ha altro corpo, altro peso
   e altro padding: allinearne i valori a mano avrebbe creato due sorgenti di
   verita' destinate a divergere al primo ritocco. Ora le dodici notizie
   secondarie montano .tag-exclusive, cioe' lo STESSO componente della colonna
   Ultime Notizie, e questa regola vale per entrambi i posti: quello che
   ritocchi qui si vede in tutti e due.
   L'aspetto di .tag-exclusive non cambia di un pixel: la regola e' la stessa
   di prima, con due selettori in piu. */
.text-news-item>.tag-exclusive,
.schema-a-item .tag-exclusive,
.schema-b-col .tag-exclusive,
.evidenza-item .tag-exclusive,
.sezione-head>.tag-exclusive,
.card-image-wrapper>.tag-exclusive {
    display: block;
    width: max-content;
    max-width: 100%;
    line-height: 1.4rem;
    text-transform: uppercase;
    font-weight: 800;
    /* L'aria fra etichetta e titolo, uguale ovunque: card, In Evidenza e la
       colonna compatta di Ultime Notizie. Le due eccezioni stanno sotto e sono
       entrambe motivate - .sezione-head non ha un titolo sotto di se', e le
       etichette sopra la foto sono in position: absolute.
       NOTA: in Ultime Notizie il titolo e' un <a> inline e la sua riga ha
       interlinea propria, quindi la distanza MISURATA fra i due riquadri viene
       5px invece di 8. E' il valore a essere uniforme, non il numero che esce
       dal righello. */
    margin-bottom: 8px;
}

/* PRIMA QUI CI STAVANO DUE ECCEZIONI, e tutte e due sbagliavano verso.
   .schema-a-item/.schema-b-col e .evidenza-item azzeravano il margine, sotto un
   commento che diceva l'opposto - "nelle card serve piu' aria fra etichetta e
   titolo che nella lista compatta". Misurata la pagina, fra etichetta e titolo
   non restava un pixel su quindici etichette, e le due cose si leggevano come
   una riga sola. Adesso il valore e' uno solo e sta nella regola di sopra:
   togliere le eccezioni e' meglio che correggerle, perche' erano la ragione per
   cui i due posti potevano scollarsi. */

/* L'etichetta di una testata di sezione non ha un titolo sotto di se': e'
   l'ultimo figlio di .sezione-head, e li' il margine non separa due cose ma
   spinge in giu' quello che viene dopo il riquadro. Resta ai 2px che aveva. */
.sezione-head>.tag-exclusive {
    margin-bottom: 2px;
}

/* Le sette etichette che stanno SOPRA la foto - le quattro di .news-grid e le
   tre di "In Evidenza" in fondo - erano le uniche a dipendere dal
   position: absolute che .category-tag portava con se. Tolto quel componente,
   il posizionamento va dichiarato qui, con gli stessi valori di prima:
   .card-image-wrapper e' gia position: relative, quindi il riferimento non
   cambia. margin-bottom a zero perche' su un elemento assoluto si sommerebbe
   al bottom e sposterebbe l'etichetta di 2px.
   Quello che non torna e' l'ombra: .category-tag ne aveva una, .tag-exclusive
   no, e adottare il componente vuol dire adottarlo tutto. */
.card-image-wrapper>.tag-exclusive {
    position: absolute;
    bottom: 15px;
    left: 15px;
    z-index: 2;
    margin-bottom: 0;
}

/* IL TRATTAMENTO DELLE OTTO ETICHETTE SOPRA UN'IMMAGINE, in una regola sola.
   Le sette dentro .card-image-wrapper stanno sulla fotografia nuda; l'ottava,
   quella della card grande, sta dentro .card-content, che qui e' sovrapposta
   alla foto - e nel punto in cui l'etichetta cade la dissolvenza e' ormai
   quasi esaurita, quindi anche li' il fondo e' di fatto la fotografia.
   Rettangolo BIANCO PIENO e colore di categoria sul testo: e' il modo di
   rendere il contrasto indipendente dall'immagine che capita sotto. Opaco e
   non semitrasparente, o il contrasto tornerebbe a dipendere dalla foto,
   cioe' dal problema.
   Il caso resta separato dagli antenati e non da una classe nuova: il
   componente e' sempre uno, e le altre quaranta etichette non se ne
   accorgono. padding e forma sono quelli di prima del giro 21: 0 6px,
   spigoli vivi.
   ATTENZIONE: e' da qui che i quattro token sotto soglia (news, lavoro,
   turismo, cinema) diventano davvero testo su bianco. Vedi REPORT-24. */
.card-image-wrapper>.tag-exclusive,
.evidenza-item:first-child .tag-exclusive {
    background: #ffffff;
    color: var(--tag-color);
    padding: 0 6px;
}

/* I 5px persi dal titolo diventato inline. */
.text-news-item>.card-meta {
    margin-top: 5px;
}

/* Giro 21: via la banda colorata, il colore passa al testo su fondo
   trasparente. I valori dei token di categoria non si toccano: cambia solo
   dove vengono applicati.
   --tag-color tiene il colore della categoria disponibile a chi deve usarlo
   diversamente: le otto etichette sopra un'immagine lo mettono sul testo di
   un rettangolo bianco. Senza, quel posto avrebbe preteso quattordici regole
   duplicate, una per categoria. Il compagno --tag-fg e' stato tolto al giro
   23: teneva il colore del testo sulla banda colorata, che non esiste piu'.
   padding a zero: senza fondo i 6px a sinistra rientravano il testo rispetto
   al titolo sottostante, e l'etichetta non era piu incolonnata. */
.tag-exclusive {
    --tag-color: var(--accent);
    background: transparent;
    color: var(--tag-color);
    /* Dichiarato e non ereditato: l'etichetta e' informazione di servizio come
       la data e la firma, e va sul binario dell'interfaccia in ogni modalita'.
       Finora lo prendeva da body per caso; adesso lo dice, e resta vero anche
       se un domani un contenitore la mettesse dentro un blocco redazionale. */
    font-family: var(--font-sans);
    padding: 0;
    font-size: 0.60rem;
    border-radius: 0;
    margin-right: 5px;
    vertical-align: middle;
}

/* Le etichette di categoria della pagina sono UN SOLO componente:
   .tag-exclusive, con i modificatori .tag-* qui sotto. Il vecchio
   .category-tag e' stato rimosso al giro 12 perche' era rimasto senza
   utilizzi: montava altro corpo, altro peso e altro padding, e teneva in
   piedi una seconda idea di come deve essere fatta un'etichetta. */
/* Modificatori di categoria.
   Valgono su .tag-exclusive, che dal giro 12 e' l'unico componente etichetta
   della pagina: dichiarano fondo e testo, e arrivano dopo nel foglio.
   Senza modificatore l'etichetta resta sul rosso del brand, che e' il
   comportamento di prima. */
.tag-news {
    --tag-color: var(--cat-news);
}

.tag-lavoro {
    --tag-color: var(--cat-lavoro);
}

.tag-turismo {
    --tag-color: var(--cat-turismo);
}

.tag-cinema {
    --tag-color: var(--cat-cinema);
}

.tag-focus {
    --tag-color: var(--cat-focus);
}

.tag-interviste {
    --tag-color: var(--cat-interviste);
}

.tag-attualita {
    --tag-color: var(--cat-attualita);
}

.tag-mostre {
    --tag-color: var(--cat-mostre);
}

.tag-editoria {
    --tag-color: var(--cat-editoria);
}

.tag-mercato {
    --tag-color: var(--cat-mercato);
}

.tag-artigianato {
    --tag-color: var(--cat-artigianato);
}

.tag-viaggi {
    --tag-color: var(--cat-viaggi);
}

.tag-opinioni {
    --tag-color: var(--cat-opinioni);
}

.tag-opere {
    --tag-color: var(--cat-opere);
}

.tag-arte-antica {
    --tag-color: var(--cat-arte-antica);
}

.tag-ottonovecento {
    --tag-color: var(--cat-ottonovecento);
}

.tag-contemporanea {
    --tag-color: var(--cat-contemporanea);
}

.tag-libri {
    --tag-color: var(--cat-libri);
}

/* L'etichetta e' un <a> e non un <span>: porta alla pagina di categoria. Nella
   bozza non era cliccabile perche' non c'erano pagine dove andare.
   All'hover NON passa sul rosso come ogni altro link, e non e' una
   dimenticanza: il colore dell'etichetta E' l'informazione - dice di che
   categoria e' l'articolo - e perderlo all'hover vorrebbe dire cancellare il
   dato proprio nell'istante in cui si sta per cliccarlo. Il ritorno lo da' il
   filetto. Batte a:hover per specificita' (classe + pseudo contro tipo +
   pseudo), non per ordine. */
.tag-exclusive:hover {
    color: var(--tag-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.card-content {
    padding: 20px;
}

/* Typography */
.card-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    line-height: 1.2;
    margin-bottom: 12px;
}

/* Hover dei titoli: un solo meccanismo in tutta la pagina.
   La sottolineatura rossa cresce da sinistra e il testo NON diventa rosso:
   senza il colore esplicito qui sotto vincerebbe la regola globale
   a:hover { color: var(--accent-testo) }, che era l'hover diverso della colonna
   Ultime Notizie e delle liste in sidebar. */
.card-title a,
.text-news-title,
.art-blogs-list a,
.cal-info a {
    background-image: linear-gradient(transparent calc(100% - 2px), var(--accent) 2px);
    background-repeat: no-repeat;
    background-size: 0 100%;
    transition: background-size 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Il trigger e' il contenitore, non il link: e' cosi che si comporta la
   card In Evidenza, dove basta passare sulla card. */
.card:hover .card-title a,
.text-news-item:hover .text-news-title,
.art-blogs-list li:hover a,
.calendar-list li:hover a {
    color: var(--text-primary);
    background-size: 100% 100%;
}

/* Meta di data e autore: componente unico (H-4).
   Regge da sola sia la coppia data + autore sia uno solo dei due, quindi le
   forme ancora da convertire piu in basso nella pagina possono adottarla
   cambiando solo l'HTML, senza aggiungere una riga di CSS.
   La data eredita il grigio del componente; l'autore e' l'unico che
   sovrascrive, ed e' cosi che risulta piu marcato.
   Separatore: lo spazio del gap, mai un trattino nel testo. */
.card-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    /* Lo spazio fra le voci della riga passa da un token perche' la barra qui
       sotto deve usare lo STESSO valore dall'altro lato: e' l'unico modo di
       avere due spazi davvero uguali intorno a un separatore che vive dentro
       una delle due voci e non fra le due. Un valore, scritto una volta. */
    --meta-gap: 8px;
    gap: var(--meta-gap);
    /* 0.75rem e non 0.65: tolto il maiuscolo il testo perde corpo apparente.
       Valore scelto a occhio, da tarare guardandolo. */
    font-size: 0.75rem;
    line-height: 1.4;
    /* Il colore della riga passa da un token locale perche' il "di" qui sotto
       deve poterlo riprendere: l'autore e' piu scuro e il "di" no, e sulla
       card scura di In Evidenza sono tutti e due chiari. Un solo valore
       scritto una volta sola per contesto. */
    --meta-muted: var(--text-secondary);
    color: var(--meta-muted);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

/* Il "di" non sta nel markup: e' un pseudo-elemento sull'autore, cosi vale
   per tutti i punti in cui .card-meta monta un .author senza toccare l'HTML,
   e resta coerente anche dove l'autore viene senza data ("di Redazione").
   Non ridichiara niente: dal giro 22 "di" e nome sono la stessa cosa - stesso
   corsivo, stesso peso, stesso colore - quindi eredita tutto da .author.
   Lo spazio e' unificatore e non normale: uno spazio normale in coda al
   content viene mangiato dalla riduzione degli spazi bianchi, ed e' il motivo
   per cui si leggeva "diRedazione". */
.card-meta .author::before {
    content: "di\00a0";
}

/* La barra fra data e autore. Sta in coda alla data e NON nel markup, che non
   deve portare punteggiatura decorativa.
   :has(+ .author) e' quello che le impedisce di restare orfana: compare solo
   se dopo la data c'e' davvero un autore. Le voci con la sola data non ce
   l'hanno in coda, e quelle col solo autore non ce l'hanno davanti perche'
   li' la data non esiste proprio.
   Lo spazio a sinistra e' un margine e non uno spazio scritto: uno spazio in
   coda al contenuto generato verrebbe mangiato dalla riduzione degli spazi
   bianchi - e' il difetto del "diRedazione" del giro 22 - e comunque un
   carattere non varrebbe gli 8px del gap che sta dall'altro lato.
   Colore: non un valore ma currentColor smorzato. Cosi' la barra e' piu'
   tenue della data in ogni contesto senza doverlo ridichiarare, anche sulla
   card scura di In Evidenza, dove un grigio fisso andrebbe nel verso
   sbagliato. */
.card-meta .time:has(+ .author)::after {
    content: "|";
    margin-left: var(--meta-gap);
    opacity: 0.45;
}

.card-meta .author {
    color: var(--text-secondary);
    font-weight: 700;
    font-style: italic;

}

/* =========================================
   SEZIONE ALTA: ULTIME NOTIZIE + IN EVIDENZA
   Era .pushed-hero-section, con tutto il layout in attributi style=.
   Adesso qui non c'e' piu nessun inline (R-1, R-4, R-6).
   ========================================= */
.pushed-hero-section {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

/* --- Colonna destra: In Evidenza ---
   Le tre notizie hanno markup identico e stessa classe. Chi e' grande lo
   decide :first-child, non una classe scritta nell'HTML: sul sito vero
   le tre verranno mescolate a caso a ogni visita, quindi spostare un
   <article> deve bastare a far cambiare il layout. */
.evidenza-grid {
    display: grid;
    /* auto-fit e non un breakpoint sul viewport: la larghezza di questa
       colonna dipende anche dalla sidebar, che sparisce a 992px. Fra 992 e
       1200px lo spazio utile scende a ~350px, e due colonne fisse
       diventerebbero due card da 160px. Cosi le due piccole si affiancano
       solo quando ci stanno davvero. */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

.evidenza-item {
    display: flex;
    flex-direction: column;
}

.evidenza-item .card-image-wrapper {
    aspect-ratio: 4/3;
}

/* Il testo sta sotto la foto e a filo con il suo bordo: .card-content e
   .card-image-wrapper sono fratelli, non annidati. */
.evidenza-item .card-content {
    padding: 15px 0 0;
}

.evidenza-item .card-title {
    font-size: 1.15rem;
    line-height: 1.25;
    margin-bottom: 8px;
}

/* --- Il primo dei tre: a tutta larghezza, testo sopra la foto ---
   Foto e testo stanno nella STESSA cella di griglia, non piu in
   position:absolute. Cosi la riga e' alta quanto il piu alto dei due: se un
   titolo non ci sta, la card cresce e la foto si allunga con lei, invece di
   lasciare il testo traboccare oltre il bordo della foto.
   container-type serve al clamp del titolo, qui sotto. */
.evidenza-item:first-child {
    display: grid;
    grid-column: 1 / -1;
    container-type: inline-size;
}

.evidenza-item:first-child>.card-image-wrapper,
.evidenza-item:first-child>.card-content {
    grid-area: 1 / 1;
}

.evidenza-item:first-child>.card-image-wrapper {
    aspect-ratio: 16/9;
    /* stretch e' gia il valore predefinito, ma qui e' il perno del
       meccanismo: quando il testo e' piu alto del 16/9 la foto deve
       allungarsi fino a coprire tutta la riga, altrimenti sopra di lei
       resterebbe una fascia vuota sotto la sfumatura. */
    align-self: stretch;
    /* width: 100% e' l'altra meta di quel perno. Senza, quando la riga
       cresce l'altezza diventa definita e l'aspect-ratio ne RICAVA la
       larghezza: a 1024px la foto veniva 464px in una card da 374px e
       sbordava di 90px sopra la sidebar. Fissata la larghezza, il rapporto
       cede all'altezza imposta dalla riga, che e' quello che vogliamo. */
    width: 100%;
}

.evidenza-item:first-child>.card-content {
    /* position: relative senza z-index, ed e' indispensabile.
       .card-image-wrapper e' position: relative (regola globale), quindi e'
       un elemento posizionato; questo contenuto, dopo il passaggio alle
       celle di griglia sovrapposte, non lo era piu. Nell'ordine di disegno
       gli elementi posizionati stanno SOPRA i fratelli non posizionati
       qualunque sia l'ordine nel DOM: la foto copriva il titolo.
       Rendendo posizionato anche questo, a parita di z-index auto decide
       l'ordine nel DOM, e il contenuto viene dopo la foto. Nessun z-index
       arbitrario da tenere allineato. */
    position: relative;
    /* Altezza della sola sfumatura, non una percentuale: il testo comincia
       subito sotto e resta su fondo pieno anche quando la card cresce.
       Con un gradiente a percentuale, su una card alta il testo sarebbe
       finito nella parte quasi trasparente. */
    /* 60 -> 40px al giro 22. I 60 erano tarati al giro 3 su un titolo da
       2,8rem; adesso il titolo arriva a 2,1rem con interlinea 1,05, cioe'
       una riga da ~35px, e la dissolvenza deve valere una riga di titolo:
       e' quello che stacca il blocco di testo dalla fotografia. 40 e' anche
       il valore che il foglio usava gia' sotto i 600px, quindi la deroga li'
       e' diventata inutile e l'ho tolta.
       Il testo non si sposta: la scatola e' ancorata in basso (align-self),
       quindi accorciare la dissolvenza abbassa l'inizio del nero, non la
       riga di partenza del titolo.
       0,92/0,82 -> 0,78/0,68. Il vincolo che comanda NON e' il titolo, che
       col bianco pieno resiste fino a 0,53, ma la data smorzata al 78% di
       bianco, che sotto 0,62 scende sotto 4,5:1. 0,68 tiene tutti e due con
       margine: titolo 7,86:1 e data 5,56:1 nel caso peggiore, cioe' con una
       fotografia bianca sotto. Vedi REPORT-24. */
    --sfumatura: 40px;
    align-self: end;
    padding: calc(var(--sfumatura) + 10px) 30px 25px;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.78) 0,
            rgba(0, 0, 0, 0.68) calc(100% - var(--sfumatura)),
            rgba(0, 0, 0, 0) 100%);
    color: #fff;
}

.evidenza-item:first-child .card-title {
    /* cqi e non vw: il corpo segue la larghezza della card, non quella
       della finestra. Fra 992 e 1200px la finestra e' larga (quindi vw dava
       il massimo) ma la colonna e' stretta per via della sidebar, e il
       titolo traboccava. Vedi REPORT-03, punto 13. */
    font-size: clamp(1.4rem, 1rem + 2.2cqi, 2.1rem);
    line-height: 1.05;
    max-width: 40ch;
    margin-bottom: 10px;
}

/* Sul gradiente scuro il testo va tenuto chiaro anche in hover: la regola
   globale .card:hover .card-title a lo porterebbe a var(--text-primary),
   cioe nero su nero. */
.evidenza-item:first-child .card-title a,
.evidenza-item:first-child:hover .card-title a {
    color: #fff;
}

/* Sulla card scura vale la stessa regola: data smorzata, autore pieno. */
.evidenza-item:first-child .card-meta {
    --meta-muted: rgba(255, 255, 255, 0.78);
}

.evidenza-item:first-child .card-meta .author {
    color: #ffffff;
}

/* Soglia del collasso: 1200px, non piu 768px (G6-2, "strada B" del REPORT-05).
   Sopra i 1200px la colonna da 240px di Ultime Notizie sta accanto a In
   Evidenza; da 1200px in giu la sezione passa a una colonna sola e Ultime
   Notizie scende sotto In Evidenza, che e' la cosa che deve restare in cima.
   L'ordine e' invertito dal CSS, il markup non cambia.

   Perche' proprio 1200 e non un valore a occhio. Con la sidebar in piedi
   l'area di In Evidenza vale min(vw, 1280) - 20 - 20 (padding di
   .main-content) - 300 - 40 (sidebar e suo gap) - 240 - 30 (Ultime Notizie e
   suo gap) = min(vw, 1280) - 650. Perche' auto-fit tenga due colonne serve
   un'area >= 550px, cioe' vw >= 1200. La soglia coincide con quel punto:
   ogni larghezza in cui le due card scenderebbero sotto il minimo di 260px
   e' gia' dentro questa media query, dove la colonna si e' liberata e le
   card tornano larghe. Sparisce cosi la banda 993-1200 in cui In Evidenza
   impilava pur avendo la finestra larga, e resta una sola banda di
   impilamento, sotto i 590px.

   Il prezzo, gia' messo in conto: fra 769 e 1200px Ultime Notizie non e'
   piu affiancata. La sidebar non e' toccata, la pubblicita' non si muove. */
@media (max-width: 1200px) {

    .pushed-hero-section {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .fresh-stories {
        order: 1;
    }
}

/* Sulle viste strette il testo in sovrimpressione occupa piu di quanto una
   foto 16/9 sia alta. Da quando foto e testo condividono la cella non e'
   piu un difetto - la card cresce da sola - ma senza correttivo la foto
   verrebbe allungata ben oltre il suo taglio naturale. Un 4/3 le da
   l'altezza che serve, e la sfumatura piu corta le lascia respiro.
   Il 16/9 resta il punto di partenza sopra i 600px. */
@media (max-width: 600px) {

    .evidenza-item:first-child>.card-image-wrapper {
        aspect-ratio: 4/3;
    }

    /* --sfumatura non si ridichiara piu': dal giro 22 vale 40px anche sopra
       i 600px. Resta la sola deroga sui margini laterali. */
    .evidenza-item:first-child>.card-content {
        padding: calc(var(--sfumatura) + 10px) 16px 16px;
    }
}

/* Ad Banners */
/* Stacco verticale dei banner: 40px sopra e sotto erano un terzo dello spazio
   che la pubblicita si prendeva in pagina. A 20px l'inserzione resta staccata
   dal contenuto ma non allunga piu la colonna a vuoto (giro 9).
   .leaderboard azzera comunque il margine di sopra, cosi il banner sta a
   ridosso di cio che lo precede. */
.ad-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
    text-align: center;
}

.ad-banner.leaderboard {
    margin-top: 0;
}

.ad-banner img {
    max-width: 100%;
    height: auto;
}

/* 0.5rem = 8px: l'etichetta deve dire che quello e' uno spazio a pagamento,
   non farsi leggere. Con il corpo dimezzato anche lo stacco sotto scende a 3px
   e la spaziatura fra lettere a 0.5px: a 8px un letter-spacing da 1px sgranava
   la parola. */
.ad-label {
    font-size: 0.5rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 3px;
    letter-spacing: 0.5px;
}

/* Intestazione di sezione: UN SOLO componente per tutta la pagina (H-7).
   Modello: quello che era il titolo della colonna Ultime Notizie, cioe
   maiuscolo compatto con filetto rosso sotto e nessuna riga nera sopra.
   Il filetto sta sul contenitore e non sul testo: serve nell'unico
   .group-header che e' un flex con il bottone "Abbonati ora" accanto al
   titolo, dove un filetto agganciato al testo si fermerebbe alla parola.
   Da un ::after e non piu' da border-bottom, perche' deve fermarsi al 75%
   della colonna (giro 8). I 5px di padding diventano 7 e il filetto occupa
   gli ultimi 2: la riga resta esattamente dov'era, l'altezza non cambia. */
.group-header {
    position: relative;
    padding-bottom: 7px;
    margin-bottom: 15px;
}

.group-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--accent);
}

/* Link di approfondimento: UN SOLO componente per i due posti in cui compare,
   la coda della colonna Ultime Notizie e l'intestazione delle quattro sezioni
   nuove. Qui c'e' solo l'aspetto; DOVE si mette lo decide il contesto, due
   regole di una riga piu sotto. E' la lezione del giro 11: chi ricopia i
   valori invece di riusare il componente se li ritrova divergenti.
   Testo e non bottone, e in tondo e non in maiuscoletto: accanto a un titolo
   di sezione gia maiuscolo e a peso 800, un secondo maiuscoletto competerebbe
   invece di accompagnare. Il colore e' --accent, non uno nuovo. */
.more-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-testo);
    white-space: nowrap;
}

.more-link::after {
    content: "\203A";
    font-size: 1.15em;
    line-height: 1;
    transition: transform var(--transition-fast);
}

.more-link:hover::after {
    transform: translateX(3px);
}

/* Contesto 1 - l'intestazione di sezione. Il componente .group-header e' uno
   solo per tutte e tredici le intestazioni della pagina e NON viene
   duplicato: viene reso condizionale. Diventa una riga solo l'intestazione
   che il link ce l'ha davvero dentro, e le altre nove restano il blocco di
   prima perche' la condizione non si verifica. Nessuna classe in piu da
   scrivere nell'HTML, e una sezione generata in ciclo si comporta bene per il
   fatto stesso di contenere il link.
   Se :has() non fosse supportato, il link finirebbe sulla riga sotto il
   titolo: leggibile, solo non allineato. */
.group-header:has(.more-link) {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 20px;
}

/* margin-left e non justify-content: space-between, cosi il link resta a
   destra anche quando va a capo sulle viste strette. */
.group-header .more-link {
    margin-left: auto;
}

/* Contesto 2 - la coda della colonna Ultime Notizie. Qui il link diventa un
   bottone pieno a tutta larghezza della colonna: con dieci-quattordici pezzi
   al giorno quel passaggio va visto, e da testo con chevron si vedeva poco.
   La separazione dai "Leggi tutte" delle intestazioni non ha richiesto una
   classe nuova: il discrimine e' l'antenato .fresh-stories, che c'e' dal giro
   7. Le quattro intestazioni non lo hanno e restano testo con chevron.
   Fondo nero e non rosso: il rosso pieno e' di ABBONATI nell'header, e
   ripeterlo in colonna avrebbe messo due primi livelli sulla stessa pagina.
   Il nero e' lo stesso fondo del bottone della newsletter. Il rosso torna
   all'hover, che e' dove la marca puo comparire senza gerarchizzare. */
.fresh-stories .more-link {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 20px;
    padding: 7px 11px;
    background: var(--accent);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 4px;
    transition: background var(--transition-fast);
}

/* Il chevron era il segno del link di testo: dentro un bottone pieno e
   centrato non serve piu e sbilancerebbe la centratura. */
.fresh-stories .more-link::after {
    content: none;
}

.fresh-stories .more-link:hover {
    background: var(--accent-hover);
}

.group-title {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
}

/* =========================================
   GIRO 7 - DUE SCHEMI DI SEZIONE A CONFRONTO
   Quattro sezioni nuove sopra le tre di raffronto. In nessuno dei due
   schemi il testo sta sopra la foto: la sovrimpressione resta esclusiva
   di "In Evidenza".
   Entrambi riusano i componenti gia' in casa - .card, .card-image-wrapper,
   .card-title, .card-meta, .tag-exclusive - e ne cambiano solo la misura:
   cosi l'hover, l'ingresso a cascata e lo zoom della foto arrivano gratis
   e restano identici al resto della pagina.
   ========================================= */

/* Il contenitore tiene insieme le quattro sezioni e i banner intercalati, e
   da' a tutti lo stesso stacco con un gap solo.
   Serve anche da aggancio per un eventuale :nth-of-type: dentro di lui le
   <section> si contano da 1 a prescindere da quante ne stiano sopra nella
   colonna. Oggi nessuna regola lo usa - vedi l'alternanza tolta qui sotto -
   ma e' il motivo per cui il contenitore resta al suo posto. */
/* gap 30 e non piu 50: dentro questo contenitore ogni intervallo contiene un
   banner, quindi il gap e' esattamente lo spazio sopra e sotto la pubblicita.
   Sette intervalli per 20px sono 140px di pagina in meno (giro 9). */
.schemi-nuovi {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 30px;
}

/* I banner intercalati prendono lo stacco dal gap del contenitore. Senza
   questo il margin-bottom di .ad-banner si sommerebbe al gap SOLO sotto
   (.ad-banner.leaderboard azzera il margine di sopra), e ogni banner
   risulterebbe fuori asse fra le due sezioni. */
.schemi-nuovi>.ad-banner {
    margin: 0;
}

/* --- SCHEMA A: meta' apertura, meta' lista --- */
.schema-a-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

/* Alternanza del lato: TOLTA (giro 8). Al giro 7 le sezioni dispari
   ribaltavano le due meta' con
       .schemi-nuovi > .schema-a:nth-of-type(odd) .schema-a-lead { grid-column: 2 }
   e "Mostre" teneva la foto grande a destra. Ma con l'apertura a destra
   l'occhio in lettura da sinistra cade sulla PRIMA VOCE DELLA LISTA, non
   sulla notizia principale: la gerarchia della sezione si legge al
   contrario. Adesso l'apertura sta a sinistra in tutte e due le sezioni,
   che e' l'ordine naturale del markup e non richiede nessuna regola.
   Se un giorno l'alternanza servisse, si rimette con quelle due regole
   sole: il contenitore .schemi-nuovi resta li' apposta, ed e' quello che
   fa contare le <section> da 1 indipendentemente da cosa sta sopra. */

.schema-a-lead .card-image-wrapper {
    /* il rapporto nativo del ritaglio thumbs/home (750x360): nessun taglio
       e nessuna deformazione, la foto e' usata per quello che e'. */
    aspect-ratio: 750/360;
}

.schema-a-lead .card-content,
.schema-b-lead .card-content {
    /* .card-content porta 20px su tutti i lati: qui il testo deve stare a
       filo con il bordo sinistro della foto. */
    padding: 15px 0 0;
}

/* Etichetta di categoria nelle sezioni nuove: sta SOLO sulle dodici notizie
   secondarie e NON sulle aperture. Dal giro 11 porta il NOME DELLA SEZIONE,
   non la categoria del singolo pezzo: serve a dire dove si e' finiti a chi
   arriva a meta pagina. Il componente e' .tag-exclusive, vedi piu sopra. */
.schema-a-lead .card-title {
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: 8px;
}

/* --- la meta' in lista: miniatura quadrata a sinistra --- */
.schema-a-item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 15px;
    align-items: start;
    /* 14 + 14 + 1 fra una voce e l'altra: e' il valore che porta l'altezza
       della lista a coincidere con quella dell'apertura. Vedi REPORT-08. */
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}

.schema-a-item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.schema-a-item .card-image-wrapper {
    aspect-ratio: 1;
}

.schema-a-item .card-content {
    padding: 0;
}

.schema-a-item .card-title {
    font-size: 1rem;
    line-height: 1.35;
    margin-bottom: 6px;
}

/* --- SCHEMA B: apertura a tutta colonna, poi tre colonne --- */
.schema-b-lead .card-image-wrapper {
    aspect-ratio: 750/360;
}

.schema-b-lead .card-title {
    font-size: 2.2rem;
    line-height: 1.1;
    /* stesso criterio del titolo grande di In Evidenza: a colonna piena una
       riga da 900px sarebbe una misura di lettura sbagliata. */
    max-width: 30ch;
    margin-bottom: 10px;
}

.schema-b-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid var(--border-color);
}

.schema-b-col {
    position: relative;
}

/* Filetto verticale disegnato DENTRO il gap con un pseudo-elemento, non
   con border-left + padding: cosi le tre colonne restano esattamente della
   stessa larghezza e le tre foto pure. Le colonne sono stirate dalla
   griglia, quindi i due filetti sono alti uguali senza doverlo imporre. */
.schema-b-col+.schema-b-col::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -15px;
    width: 1px;
    background: var(--border-color);
}

.schema-b-col .card-image-wrapper {
    aspect-ratio: 16/9;
}

.schema-b-col .card-content {
    padding: 12px 0 0;
}

.schema-b-col .card-title {
    font-size: 1.15rem;
    line-height: 1.3;
    margin-bottom: 6px;
}

/* --- SCHEMA C: due notizie di pari peso in cima, poi le stesse tre colonne
   dello schema B. Le tre colonne non sono riscritte: la sezione riusa
   .schema-b-cols cosi com'e', e con lui arrivano il filetto orizzontale e i
   filetti verticali gia' in uso. --- */
.schema-c-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

/* Pari peso vuol dire: stessa larghezza (la da' la griglia), stesso rapporto
   di foto e stesso corpo di titolo. Nessuna delle due e' l'apertura, quindi
   non c'e' il 2.2rem dello schema B: valgono gli stessi 1.5rem della meta'
   di apertura dello schema A, che sta su una colonna larga uguale. */
.schema-c-lead .card-image-wrapper {
    /* Le due foto arrivano da cartelle diverse e con proporzioni diverse -
       750x360 la prima, 1280x960 la seconda - quindi il rapporto lo impone
       il foglio e non il file. object-fit: cover, gia' su .card-image,
       ritaglia senza deformare: e' quello che farebbe il CMS servendo un
       ritaglio unico. Senza questo le due colonne partirebbero disallineate
       di oltre cento pixel. */
    aspect-ratio: 16/9;
}

.schema-c-lead .card-content {
    padding: 15px 0 0;
}

.schema-c-lead .card-title {
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: 8px;
}

/* Salva e condividi, sulle sole notizie di apertura: sulle dodici piccole
   sarebbero dodici ripetizioni. Stanno dentro .card-meta e il margin-left
   automatico li spinge a destra sulla riga di data e autore.
   NON FANNO NIENTE: e' una bozza. Vedi "Requisiti per la produzione". */
.card-actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
    /* .card-meta allinea alla linea di base, che su un pulsante non vuol
       dire niente: questi due si centrano sulla riga. */
    align-self: center;
}

.card-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.card-action:hover {
    opacity: 1;
}

/* Le due icone non hanno dimensioni intrinseche - solo viewBox - ed e' il
   difetto che al giro 5 aveva reso il logo 0x0 [P-10]: width e height sono
   scritti sull'<img> nell'HTML, questa regola li ribadisce.
   share.svg non e' quadrato (viewBox 44.3x34.4): dentro un riquadro di 22px
   il preserveAspectRatio predefinito lo rimpicciolisce senza deformarlo,
   quindi si vede 22x17 e non 22x22. E' il comportamento giusto. */
.card-action img {
    display: block;
    width: 18px;
    height: 18px;
}

/* 44x44 dove la pagina passa alla vista touch, la stessa soglia e la stessa
   scelta dell'hamburger: l'icona resta di 22px, cresce solo l'area. */
@media (max-width: 1023.98px) {

    .card-action {
        width: 44px;
        height: 44px;
    }
}

/* Sotto i 768px entrambi gli schemi passano a una colonna sola. La soglia
   e' unica per i due, e sopra di essa non impila niente: da 769px in su
   ogni larghezza tiene le due meta' dello schema A e le tre colonne dello
   schema B. Non e' una toppa alla fascia stretta, che resta come l'ha
   chiusa il giro 6: e' il punto in cui una colonna da 349px non regge piu
   una miniatura da 96px con il testo accanto. */
@media (max-width: 768px) {

    .schema-a-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .schema-c-duo {
        grid-template-columns: minmax(0, 1fr);
    }

    .schema-b-cols {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    /* lo stesso filetto, da verticale a orizzontale: non serve una regola
       nuova, basta togliergli il posizionamento. */
    .schema-b-col+.schema-b-col::before {
        position: static;
        display: block;
        width: auto;
        height: 1px;
        margin: 20px 0;
    }
}

/* Sui telefoni il titolo dell'apertura dello schema B scende: 2.2rem su una
   colonna da 335px farebbe tre parole per riga. */
@media (max-width: 600px) {

    .schema-b-lead .card-title {
        font-size: 1.6rem;
    }
}

/* Page Layout with Sidebar */
.layout-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px;
    align-items: start;
}

/* Senza min-width:0 il grid item "1fr" non scende sotto la sua min-content width
   e i contenitori scorrevoli (.copertine-track) allargano la colonna. */
.main-column {
    min-width: 0;
}

@media (max-width: 992px) {
    .layout-with-sidebar {
        grid-template-columns: 1fr;
    }
}

/* Sidebar Styles */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Giro 21: niente angoli arrotondati sui riquadri. Gli 8px erano di questa
   sola regola, non di un valore condiviso: nessuna separazione da inventare.
   Restano arrotondati il blocco Instagram (10px, e' lo schermo del telefono),
   i campi e i bottoni (4px) e i pulsanti tondi dello slider. */
.sidebar-widget {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 20px;
}

.sidebar-widget.ad-widget {
    background: transparent;
    border: none;
    padding: 0;
    /* Il solo text-align centrava la scritta "Pubblicita", che e' inline, ma
       non il banner: la regola globale img { display: block } lo rende una
       scatola di blocco, e text-align non centra le scatole di blocco.
       Stesso meccanismo gia usato da .ad-banner per i leaderboard. */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Blocco Instagram. Non e' un embed: nessuno script, nessun iframe, nessuna
   richiesta ai domini Meta. Dal giro 17 non e' piu un riquadro di sidebar:
   niente cornice, niente titolo sopra, niente filetto. E' una forma sola -
   copertina piu fascia - che simula lo schermo di un telefono, e tutta la
   forma e' il link al profilo.
   Il raggio sta sul contenitore e non sui due pezzi: con overflow: hidden
   taglia in cima l'immagine e in fondo la fascia, quindi il blocco resta una
   figura unica invece di due rettangoli accostati. */
.ig-block {
    display: block;
    border-radius: 10px;
    overflow: hidden;
}

/* 4/5 e' il rapporto VERO del file, 1080x1350: dichiarandolo uguale al file,
   object-fit non ha niente da ritagliare e la copertina si vede intera.
   Nessuna sfumatura sopra l'immagine: coprirebbe il logo Finestre sull'Arte
   che sta in basso nella copertina, e quel logo cambia posizione da un reel
   all'altro. La leggibilita' della scritta la garantisce la fascia piena. */
.ig-block-cover {
    display: block;
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    transition: opacity var(--transition-fast);
}

.ig-block:hover .ig-block-cover {
    opacity: 0.9;
}

/* La fascia: fondo --text-primary, cioe il nero che la pagina usa gia, e
   testo bianco. 21:1 di contrasto. */
.ig-block-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 50px;
    background: var(--superficie-forte);
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
}

/* Stesso file del social nella top bar, stesso motivo per cui le misure sono
   scritte a mano: viewBox e basta, nessuna dimensione intrinseca [P-10]. */
.ig-block-bar img {
    display: block;
    width: 18px;
    height: 18px;
}

.widget-title {
    font-family: var(--font-sans);
    font-size: 1.4rem;
    color: var(--accent-testo);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.art-blogs-list {
    list-style: none;
}

.art-blogs-list li {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    /* Stessa compensazione di .text-news-item: 1.3 x 16px = 20.8px sta sotto
       i 21.28px del link (0.95rem x 1.4), quindi le righe del titolo restano
       alte come quando era un blocco. */
    line-height: 1.3;
}

.art-blogs-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* inline per lo stesso motivo di .text-news-title: il filetto dell'hover deve
   seguire le righe del testo, non la larghezza della colonna. */
.art-blogs-list a {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
    display: inline;
}

.list-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
    /* line-height: il valore che ereditava da body prima che .art-blogs-list li
       scendesse a 1.3. margin-top: i 5px che erano sul link. */
    line-height: 1.6;
    margin-top: 5px;
}

/* Il widget si stacca dal bianco con il grigio pannello che la pagina usa
   gia: lo stesso #f0f0f0 del riquadro newsletter qui sotto e dell'hover dei
   bottoni dello slider. Nessun grigio nuovo.
   Il logo e' un SVG senza fondo - due soli riempimenti, entrambi scuri, e
   nessun rettangolo di sfondo - quindi sul grigio non lascia il rettangolo
   bianco che si teme in questi casi. Verificato leggendo il file. */
.quaderni-widget {
    background: #f0f0f0;
}

.quaderni-logo {
    max-width: 100%;
    margin-bottom: 15px;
}

/* Le dieci voci riusano .schema-a-item, il componente delle liste dello
   schema A: stessa griglia miniatura quadrata + testo, stessi filetti,
   stesso object-fit: cover che la .card-image globale porta con se.
   L'unico adattamento e' la larghezza, ed era necessario: qui la colonna
   utile e' 258px e non 435, quindi i 96px di miniatura ne lascerebbero 147
   al titolo, che a quel punto fa quattro o cinque righe per voce. Con 80px
   ne restano 166 e le voci stanno su tre righe.
   Il fondo trasparente serve perche' .card porta il bianco delle schede:
   senza, dieci rettangoli bianchi cancellerebbero il grigio del widget. */
.quaderni-widget .schema-a-item {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 12px;
    background: transparent;
}

.calendar-list {
    list-style: none;
}

.calendar-list li {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 15px;
}

.icon-filter-light {
    opacity: 0.7;
    flex-shrink: 0;
}

.cal-info {
    display: flex;
    flex-direction: column;
}

/* L'intervallo di date e' un meta, non un titolo: stesso corpo, stesso peso e
   stesso colore smorzato di .card-meta. Prima era accento e 700, e rubava
   l'occhio al link che sta sotto, che e' la cosa da leggere. */
.cal-dates {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 2px;
}

.cal-info a {
    font-family: var(--font-sans);
    font-size: 0.9rem;
}

/* Box newsletter di sidebar. Nella bozza era tutto in style inline, riga per
   riga; qui sta nel foglio, che e' il posto da cui una modifica vale per tutte
   le pagine che lo montano. I valori sono quelli della bozza, non ritoccati. */
.newsletter-sidebar-box {
    padding: 25px 20px;
    background: #f0f0f0;
    border-top: 3px solid var(--accent);
}

.newsletter-sidebar-box h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 15px;
    color: #000;
}

/* --font-sans e non --font-heading: e' testo di servizio, non un titolo. */
.newsletter-sidebar-box p {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 15px;
    line-height: 1.4;
}

.newsletter-sidebar-box form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.newsletter-sidebar-box input {
    padding: 10px;
    border: 1px solid #ddd;
    font-family: var(--font-sans);
    font-size: 0.8rem;
}

.newsletter-sidebar-box button {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 10px;
    font-family: var(--font-sans);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.75rem;
    cursor: pointer;
}

/* Ricerca mostre di sidebar. Stessa storia del box newsletter: dallo style
   inline della bozza al foglio, valori invariati. Il filetto in cima e' nero e
   non rosso, che e' il modo in cui la bozza distingue i riquadri di servizio
   da quelli redazionali. */
.search-exhibitions-widget {
    padding: 25px 20px;
    background: #fff;
    border: 1px solid #eee;
    border-top: 3px solid #000;
}

.search-exhibitions-widget .widget-title {
    margin-bottom: 20px;
}

.search-exhibitions-widget form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-group-news {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-group-news label {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #666;
}

.form-group-news input {
    padding: 10px;
    border: 1px solid #ddd;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    border-radius: 4px;
}

.search-exhibitions-widget button {
    background: #000;
    color: #fff;
    border: none;
    padding: 12px;
    font-family: var(--font-sans);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.8rem;
    cursor: pointer;
    margin-top: 5px;
    border-radius: 4px;
    transition: background var(--transition-fast);
}

.search-exhibitions-widget button:hover {
    background: var(--accent);
}

/* Velo bianco sui due banner interni, come sul sito vero: serve a far
   staccare il logo dalla fotografia, e all'hover si schiarisce ancora.
   Tre correzioni rispetto all'originale, che vanno dette:
   - la transizione sta solo qui, non anche sulla regola di hover, dove era
     una ripetizione inerte;
   - non e' su "all" ma sulla sola opacita', l'unica cosa che cambia: cosi il
     browser non si mette a sorvegliare ogni proprieta';
   - le misure del logo stanno qui e negli attributi width/height, non in uno
     style inline. I due loghi sono SVG con il solo viewBox, senza dimensioni
     intrinseche: senza misure esplicite si ripete il guasto del logo a 0x0
     del giro 5 [P-10].
   Sull'ordine di sovrapposizione: la fotografia e' l'unico dei tre elementi
   che NON e' posizionato, e nell'ordine di disegno i posizionati vengono
   sempre dopo i fratelli in flusso normale. Velo e logo stanno sopra per
   questo, senza nessuno z-index; fra loro decide l'ordine nel DOM, e il logo
   viene dopo il velo. Vedi REPORT-27. */
.promo-overlay {
    position: absolute;
    inset: 0;
    background-color: #ffffff;
    opacity: 0.5;
    transition: opacity 1s ease;
}

.promo-banner a:hover .promo-overlay {
    opacity: 0.9;
}

.promo-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* height: auto e non un valore: il rapporto lo danno gli attributi
       width/height nel markup, quindi l'altezza esce giusta da sola e resta
       una misura sola da tenere allineata invece di due. */
    width: 300px;
    height: auto;
}

/* La fascia che tiene i due banner interni, e la scatola di ciascuno: nella
   bozza erano due style inline sul markup. La regola con .promo-banner {
   min-width: 100% } che sta nella media query piu' in alto rompe la riga in
   colonna sugli schermi stretti, e continua a valere: qui c'e' solo il
   comportamento a schermo largo. */
.banners-section {
    display: flex;
    gap: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.promo-banner {
    flex: 1;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    /* Fondo nero: si vede solo nell'attimo prima che la fotografia arrivi, e
       tiene il velo bianco leggibile anche se l'immagine non carica. */
    background: #000;
}

/* La copertina e' l'unica delle tre immagini del riquadro che NON e'
   posizionata, ed e' quella che da' l'altezza alla scatola. */
.promo-banner>a>img:first-child {
    width: 100%;
    display: block;
}

/* =========================================
   GRIGLIA DELLE SEZIONI (giro 23)
   Modello Boston Globe: dodici colonne con lo stesso identico scheletro -
   etichetta col filetto, una foto col suo titolo, tre titoli di seguito
   separati da filetti. Nessuna gerarchia interna, nessuna variante fra una
   colonna e l'altra: la regolarita' e' quello che permette di scorrere invece
   che leggere, e una sola eccezione la romperebbe.
   Componente suo e non uno degli schemi A, B, C: quelli servono a dare peso a
   poche notizie, che e' il mestiere opposto.
   Riusa pero' tutto quello che c'e' gia': .tag-exclusive per l'etichetta,
   .card-image-wrapper e .card-image per la foto, .card-title per i titoli e
   .card-meta per la firma. Qui sotto ci sono solo la griglia, i filetti e le
   misure - il resto e' ereditato.
   ========================================= */
.sezioni-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* 40 in verticale e 24 in orizzontale: le colonne sono strette, e con lo
       stesso valore nelle due direzioni le due righe da sei si leggevano come
       un unico blocco invece che come due. */
    gap: 40px 24px;
    margin: 60px 0 50px;
}

/* Il filetto dell'etichetta e quelli fra i titoli sono lo stesso filetto:
   1px --border-color. Non l'accento, che qui comparirebbe dodici volte e
   farebbe concorrenza alle etichette, che il colore ce l'hanno gia'. */
.sezione-head {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 6px;
    margin-bottom: 12px;
}

/* Le dodici foto arrivano con ritagli diversi - undici sono 225x250 e una e'
   un 4:3 da 1600px - quindi il rapporto lo impone il CSS. 1/1: sulle undici
   toglie il 10% dell'altezza e basta, mentre un 4:3 ne avrebbe buttato un
   terzo. object-fit: cover arriva da .card-image, non serve ridichiararlo. */
.sezione-lead .card-image-wrapper {
    aspect-ratio: 1;
    margin-bottom: 8px;
}

/* .card-title nasce a 1,8rem per le card grandi: in una colonna da ~186px
   serve la misura della lista, non quella della card. */
.sezione .card-title {
    font-size: 0.95rem;
    line-height: 1.25;
    margin-bottom: 4px;
}

.sezione .card-meta {
    font-size: 0.7rem;
}

.sezione-item {
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
    margin-top: 10px;
}

/* Sei colonne stanno solo sulla vista larga. Sotto, la griglia si dimezza per
   gradi invece di collassare: a due colonne le sezioni restano affiancate e
   il confronto fra una e l'altra - che e' il punto del modello - regge. */
@media (max-width: 1200px) {
    .sezioni-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .sezioni-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .sezioni-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .sezioni-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 35px;
    }
}

/* =========================================
   FASCIA VIDEO
   Due meta': a sinistra il testo, a destra la copertina col tasto play.
   Sta dentro la colonna centrale, quindi la sua larghezza e' quella della
   colonna - 900px a 1440 - non quella della pagina.
   Il fondo e' --fondo-scuro, lo stesso token della fascia della rivista.
   Contrasti identici a quelli verificati la': bianco 15,72:1, #d4d4d4
   10,60:1, #b3b3b3 7,50:1.
   Niente embed: nessun iframe, nessuno script, nessuna richiesta a Google al
   caricamento. Copertina statica piu' un tasto play disegnato qui.
   ========================================= */
.video-section {
    display: grid;
    /* La meta' del video e' un filo piu' larga: una copertina 16/9 con un
       tasto sopra ha bisogno di corpo, il testo no. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 30px;
    align-items: center;
    background: var(--fondo-scuro);
    padding: 34px 30px;
    margin: 50px 0;
}

.video-occhiello {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #b3b3b3;
    margin-bottom: 8px;
}

.video-titolo {
    /* --font-section e non --font-heading, per la stessa ragione del titolo
       della rivista: il binario dei titoli e' dei titoli di NOTIZIA. */
    font-family: var(--font-section);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    margin-bottom: 10px;
}

.video-testo {
    font-family: var(--font-section);
    font-size: 0.9rem;
    line-height: 1.6;
    color: #d4d4d4;
}

/* Lista e non un solo blocco: oggi il video e' uno, ma il secondo e il terzo
   si aggiungono come <li> e basta. auto-fit li affianca finche' ci stanno a
   200px, poi manda a capo invece di stringerli sotto quella misura - un 16/9
   piu' stretto di cosi' non regge il tasto play. */
.video-lista {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 0;
}

.video-scatto {
    position: relative;
    display: block;
}

.video-copertina {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Tasto play disegnato, non scaricato: un cerchio e un triangolo fatto con i
   bordi. Il cerchio e' scuro con contorno chiaro, cosi' regge su qualunque
   fotogramma capiti sotto - che e' lo stesso problema delle etichette sopra
   le foto, risolto allo stesso modo. */
.video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    transition: background var(--transition-fast);
}

.video-play::after {
    content: "";
    position: absolute;
    top: 50%;
    /* 3px a destra del centro: un triangolo centrato sul suo riquadro sembra
       spostato a sinistra, perche' il peso sta tutto sul lato piatto. */
    left: calc(50% + 3px);
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #ffffff;
}

.video-scatto:hover .video-play {
    background: var(--accent);
}

/* Sotto i 768 le due meta' si impilano: a quella larghezza la colonna non ne
   regge due, e la copertina 16/9 finirebbe a francobollo. */
@media (max-width: 768px) {
    .video-section {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        padding: 26px 20px;
        margin: 40px 0;
    }

    .video-play {
        width: 52px;
        height: 52px;
    }
}

/* =========================================
   LA RIVISTA TRIMESTRALE: FASCIA SCURA E BLOCCO INTRODUTTIVO
   Le copertine sono la cosa bella della sezione, e su bianco in una pagina
   tutta bianca sembravano appoggiate. Su fondo scuro si leggono come una
   vetrina, e la fascia si stacca dal resto senza bisogno di cornici.
   --fondo-scuro e non nero pieno, e non il #141414 del footer, che viene
   subito dopo: fra i due resta un gradino di tono, la vetrina piu' chiara e
   la chiusura piu' scura.
   Tutti i valori qui dentro stanno sopra 4,5:1 su questo fondo. Vedi il
   poscritto al REPORT-28 per la tabella, compreso il caso del rosso.
   ========================================= */
.magazine-covers-section {
    margin-top: 60px;
    padding: 60px 0;
    background: var(--fondo-scuro);
}

/* Centrato, e senza misura massima: il titolo sta su UNA riga e gliene serve
   piu' di quanta gliene lasciava il vecchio tetto di 46ch, che a 2rem lo
   spezzava in quattro. Sono gli altri elementi a essere piu' corti di lui,
   quindi non serve un tetto per nessuno. */
.rivista-intro {
    text-align: center;
    margin: 0 auto 32px;
}

.rivista-occhiello {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #b3b3b3;
    margin-bottom: 8px;
}

/* --font-section e non --font-heading: dal giro 20 il binario dei titoli e'
   riservato ai titoli di NOTIZIA, e questo e' un richiamo promozionale. In
   cinque modalita' su sei i due token coincidono, nella sesta questo va con
   Lato insieme ai titoli di sezione, che e' il posto giusto. */
.rivista-titolo {
    font-family: var(--font-section);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    margin-bottom: 10px;
}

.rivista-testo {
    font-family: var(--font-section);
    font-size: 0.95rem;
    line-height: 1.6;
    color: #d4d4d4;
    margin-bottom: 12px;
}

/* Il prezzo pieno e' barrato dal markup con <s>, che e' l'elemento giusto per
   una cosa che non vale piu'. Qui si smorza soltanto, cosi' il secondo prezzo
   e' l'unico che pesa. */
.rivista-prezzo {
    font-family: var(--font-sans);
    margin-bottom: 16px;
}

.rivista-prezzo s {
    font-size: 1rem;
    color: #9a9a9a;
    margin-right: 8px;
}

.rivista-prezzo strong {
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
}

/* Stessi valori del bottone che stava nello style inline: fondo, corpo, peso,
   padding e raggio non sono cambiati, si sono solo spostati qui. Il rosso NON
   e' stato ritoccato: vedi il poscritto al REPORT-28. */
.rivista-abbonati {
    display: inline-block;
    background: var(--accent);
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 10px 25px;
    border-radius: 4px;
}

/* Sotto i 768px cambiano i corpi e il respiro, non l'impianto: il blocco resta
   allineato a sinistra e il bottone resta largo quanto il suo testo. Un rosso
   pieno a tutta larghezza su fondo scuro peserebbe piu' delle copertine, che
   sono la cosa da guardare, e in pagina un bottone rosso a tutta larghezza
   c'e' gia' - quello di Ultime Notizie. */
@media (max-width: 768px) {
    .magazine-covers-section {
        margin-top: 40px;
        padding: 40px 0;
    }

    .rivista-titolo {
        font-size: 1.5rem;
    }

    .rivista-prezzo strong {
        font-size: 1.3rem;
    }
}

/* =========================================
   SLIDER DELLE COPERTINE E INGRANDIMENTO (giro 26)
   Componente suo: il vecchio slider "In Primo Piano" non e' stato riusato, ed
   e' stato rimosso del tutto col giro di pulizia (REPORT-29).
   Niente autoplay, niente scroll-behavior in CSS: lo scorrimento lo decide
   il JS, che sa se l'utente ha chiesto meno animazioni.
   ========================================= */
.copertine-slider {
    position: relative;
}

/* La pista e' focalizzabile (tabindex nel markup): da li' le frecce della
   tastiera scorrono da sole, senza una riga di JS. */
.copertine-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    list-style: none;
    margin: 0;
    /* 4px di respiro: senza, l'anello di focus della pista e delle copertine
       verrebbe tagliato dall'overflow. */
    padding: 4px;
    scrollbar-width: none;
}

.copertine-track::-webkit-scrollbar {
    display: none;
}

/* La larghezza non e' una misura ma un CONTO: quante copertine devono starci.
   5,5 sulla vista larga - cinque intere piu' la meta' tagliata al bordo, che
   e' quella che dice che lo slider scorre - e 1,5 sotto i 768px.
   La formula: tolti dalla pista i distanziamenti interamente visibili (cinque
   da 20px qui, uno solo la' sotto), quello che resta si divide per il conto.
   Il passo del JS non ne risente: legge la larghezza vera dell'elemento e il
   gap dal CSS, quindi resta esattamente una copertina qualunque sia il conto. */
.copertina {
    flex: 0 0 calc((100% - 100px) / 5.5);
    scroll-snap-align: start;
    text-align: center;
}

/* Sia <a> sia <button>: il bottone va spogliato di fondo, bordo e padding,
   se no i ventisette dell'ingrandimento non somiglierebbero ai quattro
   dello sfogliabile. */
.copertina-scatto {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Le trentuno copertine non hanno tutte lo stesso taglio: diciannove sono
   1800x2357, le altre vanno da 0,758 a 0,766 di rapporto. Un rapporto solo
   dichiarato qui le pareggia, e con cover la differenza massima e' meno
   dell'1% di un lato: invisibile. */
.copertina-scatto img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1800 / 2357;
    object-fit: cover;
}

/* Il cartellino che distingue i primi quattro PRIMA del clic. Stessa forma
   delle etichette sopra le fotografie: rettangolo bianco pieno e testo del
   colore, cosi non e' un segno nuovo da imparare ma uno gia' in casa. */
.copertina-sfoglia {
    position: absolute;
    left: 8px;
    bottom: 8px;
    background: #ffffff;
    color: var(--accent);
    font-family: var(--font-sans);
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4rem;
    padding: 0 6px;
}

/* Etichetta di servizio ripetuta trentuno volte: piccola e smorzata, non
   rossa in grassetto. Non deve competere con le copertine, che sono quello
   che si guarda. #9a9a9a sul fondo della fascia fa 5,59:1. */
.copertina-numero {
    display: block;
    margin-top: 10px;
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9a9a9a;
}

.copertine-freccia {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-primary);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.copertine-freccia:disabled {
    opacity: 0.35;
    cursor: default;
}

.copertine-prev {
    left: -18px;
}

.copertine-next {
    right: -18px;
}

@media (max-width: 768px) {
    .copertina {
        flex: 0 0 calc((100% - 20px) / 1.5);
    }
}

/* SOLO IL FONDO SCURO A LARGHEZZA PIENA, SOTTO I 992px.
   Era [RR-10] del REPORT-01, riaperto al punto 12 del REPORT-31: la sezione ha
   un .container dentro <main class="container">, quindi il padding si sommava -
   20 + 20 per lato - e a 375px il contenuto stava in 295px invece di 335, con
   due bande bianche ai lati della fascia scura.
   I margini negativi tirano la fascia fuori dal padding del contenitore: la
   sezione diventa larga 100% + 40px, cioe' esattamente la scatola di bordo di
   <main>, che sotto i 1280px e' la finestra. Nessuno sfondamento: arriva al
   bordo del contenitore, non oltre.
   E' l'unica riga che serve. Il .container annidato tiene i SUOI 20px per lato,
   quindi testo e copertine restano dentro un contenitore coi suoi margini: il
   padding doppio non c'e' piu' perche' la sezione parte dal bordo della
   finestra e non dai 20px del contenitore esterno, non perche' il padding
   interno sia stato azzerato. Al giro 35 lo avevo azzerato anche quello e lo
   slider finiva a filo, con le copertine tagliate al vivo: era una lettura
   sbagliata della consegna.
   Le frecce restano a -18px, il valore di partenza, e non sporgono: lo slider
   e' larga 335px dentro una fascia da 375, quindi la freccia di destra arriva a
   355 + 18 = 373, due pixel dentro il bordo. Sono pochi ma non dipendono dalla
   larghezza: 20 di padding meno 18 di sporgenza fa 2 a qualunque finestra. */
@media (max-width: 992px) {

    .magazine-covers-section {
        margin-left: -20px;
        margin-right: -20px;
    }
}

/* L'ingrandimento. display: none / flex e non opacita': chiusa non deve
   essere raggiungibile col tab. */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: rgba(0, 0, 0, 0.85);
}

.lightbox.is-open {
    display: flex;
}

/* Il fondo della pagina non deve scorrere sotto l'ingrandimento aperto.
   Con :has() non serve una classe messa dal JS, che andrebbe tolta in tutti
   e tre i modi di chiusura. */
body:has(.lightbox.is-open) {
    overflow: hidden;
}

.lightbox-dialog {
    position: relative;
    /* 700px e' il tetto della larghezza, ma non e' la larghezza a comandare:
       vedi la regola qui sotto. */
    max-width: min(90vw, 700px);
    text-align: center;
}

/* A vincolare e' l'ALTEZZA. Le copertine hanno rapporto ~0,76: a 700px di
   larghezza sarebbero alte ~917px, e su una finestra da 900 l'ingrandimento
   si taglierebbe. Cosi' invece la copertina prende l'altezza che la finestra
   ha davvero, la larghezza segue il rapporto, e i 700px restano solo un tetto
   che entra in gioco sulle finestre alte.
   I 140px tolti sono: 80 dei due padding della lightbox, 33 del titolo (12 di
   margine piu' una riga da 0,8rem a interlinea 1,6) e 27 di margine di
   sicurezza, che tengono dentro anche il pulsante di chiusura, che sporge di
   14px sopra il riquadro.
   dvh e non vh: sul telefono la barra dell'indirizzo che compare e scompare
   cambia l'altezza vera, e vh resterebbe fermo sul valore massimo.
   width e height restano auto: con i due massimi il browser rimpicciolisce da
   solo tenendo il rapporto VERO di quella copertina - che non e' identico per
   tutte e trentuno - senza bisogno di object-fit. */
.lightbox-img {
    display: block;
    margin: 0 auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100dvh - 140px);
}

.lightbox-titolo {
    margin-top: 12px;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
}

.lightbox-chiudi {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #ffffff;
    color: var(--text-primary);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

/* =========================================
   FOOTER STYLES
   ========================================= */
.site-footer {
    background-color: #141414;
    color: #ffffff;
    padding: 60px 0 40px;
    font-family: var(--font-sans);
    position: relative;
    z-index: 100;
    width: 100%;
}

.site-footer a {
    color: #a0a0a0;
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer a:hover {
    color: #ffffff;
}

.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 40px;
    margin-bottom: 30px;
}

.footer-brand {
    flex: 1;
    min-width: 250px;
}

.footer-logo {
    width: 215px;
    margin-bottom: 20px;
    filter: brightness(0) invert(1);
}

.app-downloads {
    margin-top: 20px;
}

.app-downloads p {
    font-size: 0.75rem;
    color: #777;
    margin-bottom: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.app-badges {
    display: flex;
    gap: 10px;
}

.app-badges img {
    height: 35px;
    border-radius: 4px;
}

.footer-links {
    flex: 2;
    display: flex;
    gap: 80px;
    justify-content: flex-end;
}

.footer-col h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    font-size: 0.9rem;
}

.footer-bottom {
    font-family: var(--font-sans);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 0.8rem;
    color: #707070;
    flex-wrap: wrap;
    gap: 30px;
    line-height: 1.8;
}

.footer-bottom strong {
    color: #ffffff;
}

.footer-legal-links {
    display: flex;
    gap: 20px;
}

@media (max-width: 900px) {
    .footer-links {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .footer-top {
        flex-direction: column;
        text-align: center;
    }

    .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-links {
        justify-content: center;
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .footer-legal-links {
        justify-content: center;
    }
}


/* =========================================
   SEQUENZA MOBILE E PUBBLICITA' (giro 32)
   Sul sito vero la vista stretta ha UN SOLO formato pubblicitario - 320x100,
   file @2x da 640x200 - e i riquadri della sidebar sono intercalati al
   contenuto invece di stare in coda. Nella bozza la sidebar cadeva tutta
   insieme dopo l'ultima sezione: 5.700px che nessuno raggiunge (REPORT-31,
   punto 10).
   Qui sotto c'e' la sequenza e ci sono i dodici posti. Tutto sta dentro una
   media query a 992px, la STESSA soglia a cui la sidebar collassa
   (.layout-with-sidebar, piu' sopra): sopra quel valore non cambia niente.
   ========================================= */

/* I dodici posti non esistono fuori dalla vista stretta. */
.ad-mobile {
    display: none;
}

/* La larghezza e' quella della colonna, il rapporto lo danno gli attributi
   width/height nel markup: 640x200 per la striscia, 500x500 per il quadrato.
   Nessun aspect-ratio da tenere allineato a mano e nessuno spostamento al
   caricamento. width: 100% e non il solo max-width globale, che lascerebbe la
   striscia a 640px sulle colonne piu' larghe di cosi'. */
.ad-mobile-img {
    width: 100%;
    height: auto;
}

@media (max-width: 992px) {

    /* --- LA SEQUENZA ---
       display: contents promuove i figli di .main-column, della sezione alta,
       del contenitore degli schemi e della sidebar a elementi diretti di
       questa griglia. Da li' `order` li rimette in fila. E' l'unico modo di
       intercalare i widget della sidebar al contenuto della colonna senza
       duplicare markup: i due gruppi stanno in rami diversi dell'albero, e
       `order` lavora solo fra fratelli.
       .sequenza-mobile e non .layout-with-sidebar: queste classi sono
       condivise con la pagina articolo, che questo giro non tocca. Sul
       contenitore le due classi stanno insieme di proposito: contro la regola
       di .layout-with-sidebar la specificita' sarebbe pari e deciderebbe
       l'ordine di scrittura.

       GLI order VANNO DI DIECI IN DIECI, in tutte le pagine: 10, 20, 30.
       Non sono numeri scelti, sono posti. Fra due blocchi restano nove valori
       liberi, quindi infilarne uno in mezzo e' una regola nuova e basta.
       Con i numeri consecutivi non era cosi': aggiungere una fascia al chi
       siamo voleva dire rinumerare le undici regole che venivano dopo, ed e'
       successo due volte in due giorni - la seconda con uno script, perche' a
       mano una su undici si sbaglia.
       Il valore in se' non conta: `order` mette in fila e non misura niente.
       Conta solo che siano crescenti nell'ordine in cui i blocchi devono
       apparire. */
    .layout-with-sidebar.sequenza-mobile {
        grid-template-columns: minmax(0, 1fr);
        /* 30px e non i 40 del desktop: e' il gap che .schemi-nuovi usava gia'
           fra una sezione e il banner che la segue, e adesso quel ritmo vale
           per tutta la pagina. I margini propri dei blocchi si azzerano qui
           sotto, o si sommerebbero al gap. */
        gap: 30px;
        padding-top: 14px;
    }

    .sequenza-mobile>.main-column,
    .sequenza-mobile>.sidebar,
    .sequenza-mobile .pushed-hero-section,
    .sequenza-mobile .schemi-nuovi {
        display: contents;
    }

    .sequenza-mobile .video-section,
    .sequenza-mobile .sezioni-grid,
    .sequenza-mobile .ad-mobile {
        margin: 0;
    }

    /* Quello che la vista stretta sostituisce: i leaderboard 728x90 e i quadrati
       250x250 della sidebar. Nascosti, non cancellati - sono la colonna destra
       del desktop, e sopra i 992px stanno tutti dove erano.

       SENZA IL PREFISSO .sequenza-mobile, e non e' una svista. Quelle regole
       valevano solo per le pagine che montano la sequenza; la pagina articolo
       monta la STESSA sidebar condivisa dentro .layout-with-sidebar ma senza
       sequenza (scelta dichiarata in rivista/post.php: li' colonna e sidebar si
       impilano e nessun `order` entra in gioco). Risultato: era l'unica pagina
       del 2026 in cui, su telefono, i quattro quadrati restavano visibili
       impilati in fondo - dove valgono poco - e dove adesso uscirebbero anche
       una seconda volta, perche' le loro creativita' strette sono innestate nel
       testo a coppie. Verificato che l'articolo e' l'unica eccezione: ogni
       altra pagina che include parts/2026/sidebar.php ha anche .sequenza-mobile.

       .ig-block resta legato alla sequenza: quello e' un blocco della colonna
       che la sequenza riposiziona, non pubblicita' con un sostituto stretto. */
    .ad-banner.leaderboard,
    .sidebar-widget.ad-widget,
    .sequenza-mobile .ig-block {
        display: none;
    }

    .ad-mobile {
        display: flex;
    }

    /* I tre posti dentro la grigliona delle dodici sezioni prendono tutta la
       riga, qualunque sia il numero di colonne (una sotto i 480, due fino a
       768, tre fino a 992). */
    .ad-mobile-ingriglia {
        grid-column: 1 / -1;
    }

    /* --- L'ORDINE ---
       Un numero per OGNI elemento della griglia: chi non ce l'ha resta a 0 e
       finirebbe davanti a tutti, perche' order 0 precede ogni positivo.
       Il criterio: i quattro quadrati in cima, dove ci sono lettori, e poi
       solo strisce scendendo, a coppie dove il desktop ha una coppia. I
       quattordici posti stanno tutti dentro questa griglia - in coda al
       <main>, dopo la rivista, non c'e' piu' niente.
       Dodici valori sono qui e tre no: i posti 12, 13 e 14 stanno dentro la
       grigliona e li' l'ordine e' quello del documento. */

    .sequenza-mobile .ad-mobile[data-posto="1"] {
        order: 10;
    }

    .sequenza-mobile .hero-main-area {
        order: 20;
    }

    .sequenza-mobile .ad-mobile[data-posto="2"] {
        order: 30;
    }

    /* Batte l'order: 1 che .fresh-stories prende sotto i 1200px: due classi
       contro una, quindi non dipende dall'ordine di scrittura. */
    .sequenza-mobile .fresh-stories {
        order: 40;
    }

    .sequenza-mobile .ad-mobile[data-posto="3"] {
        order: 50;
    }

    /* :first-of-type NON va bene: conta i <section> fratelli, non le due
       .schema-a, e l'ultimo <section> di .schemi-nuovi e' Viaggi. Il
       combinatore fratello fa il lavoro giusto - la seconda .schema-a e'
       l'unica che ha una .schema-a prima di se' - e non dipende da quante
       sezioni ci sono ne' da come sono ordinate. */
    .sequenza-mobile .schema-a {
        order: 60;
    }

    .sequenza-mobile .ad-mobile[data-posto="4"] {
        order: 70;
    }

    .sequenza-mobile .schema-a~.schema-a {
        order: 80;
    }

    .sequenza-mobile .ad-mobile[data-posto="5"] {
        order: 90;
    }

    .sequenza-mobile .quaderni-widget {
        order: 100;
    }

    /* Prima coppia appaiata: due numeri consecutivi e nessun elemento fra i
       due. Lo stacco e' il gap della pagina, 30px, lo stesso che separa le due
       leaderboard appaiate sul desktop. */
    .sequenza-mobile .ad-mobile[data-posto="6"] {
        order: 110;
    }

    .sequenza-mobile .ad-mobile[data-posto="7"] {
        order: 120;
    }

    .sequenza-mobile .schema-b {
        order: 130;
    }

    /* Seconda coppia appaiata.
       Seconda coppia appaiata. */
    .sequenza-mobile .ad-mobile[data-posto="8"] {
        order: 140;
    }

    .sequenza-mobile .ad-mobile[data-posto="9"] {
        order: 150;
    }

    .sequenza-mobile .schema-c {
        order: 160;
    }

    .sequenza-mobile .ad-mobile[data-posto="10"] {
        order: 170;
    }

    .sequenza-mobile .list-widget {
        order: 180;
    }

    .sequenza-mobile .video-section {
        order: 190;
    }

    .sequenza-mobile .ad-mobile[data-posto="11"] {
        order: 200;
    }

    .sequenza-mobile .sezioni-grid {
        order: 210;
    }

    .sequenza-mobile .calendar-widget {
        order: 220;
    }

    .sequenza-mobile .search-exhibitions-widget {
        order: 230;
    }

    /* Il riquadro newsletter non era nell'elenco della consegna, e non e'
       pubblicita': e' l'unico widget di sidebar che resta senza posto. Sta in
       coda a Calendario e Cerca una mostra - tutti e tre strumenti - e al giro
       33 e' stato confermato li'. */
    .sequenza-mobile .newsletter-sidebar-box {
        order: 240;
    }

    /* I due banner promozionali si impilano, come vuole la sequenza. Lo style
       inline su .banners-section dichiara display e gap ma NON flex-wrap, e
       quello su .promo-banner dichiara flex ma non min-width: sono le due
       proprieta' che il foglio riesce ancora a raggiungere senza !important e
       senza toccare l'inline.
       Effetto secondario, e voluto: a colonna piena il logo da 300px ci sta,
       quindi sotto i 670px smette di essere tagliato a meta' (REPORT-31,
       punto 4). */
    .banners-section {
        flex-wrap: wrap;
    }

    .promo-banner {
        min-width: 100%;
    }
}

/* =========================================
   PAGINA ARTICOLO (restyling-articolo.html)
   Seconda pagina della bozza, stesso foglio e stesso script della home: header,
   sidebar e footer sono riusati tali e quali, qui c'e' solo la colonna del
   testo. Niente secondo CSS - il progetto ha gia' pagato il prezzo dei fogli
   duplicati.
   LA MISURA DI LETTURA. La colonna centrale e' larga 900px, che su un testo
   lungo fa righe da centoquattordici caratteri: troppe. I paragrafi si fermano
   a 600px, che col corpo a 1,125rem danno fra 70 e 78 caratteri per riga in
   tutte e sei le modalita' tipografiche - misurato sul testo vero dell'articolo
   con le metriche dei sei font, non a occhio. Vedi REPORT-30.
   Figure e banner NON seguono quel tetto: restano larghi quanto la colonna,
   cosi' i 300px che avanzano non sono sprecati.
   LE MODALITA' TIPOGRAFICHE. Il corpo del testo sta su --font-section e non su
   --font-heading, perche' dal giro 20 il binario dei titoli e' dei titoli di
   NOTIZIA: qui il titolo dell'articolo ci sta, il testo no. Cosi' le sei
   modalita' si giudicano finalmente sul testo corrente, che era il motivo per
   cui questa pagina serviva.
   ========================================= */
.articolo {
    font-family: var(--font-section);
    margin-bottom: 60px;
}

/* Il tetto vale per tutto quello che e' testo, e la colonna sta in mezzo: prima
   era accostata a sinistra e i 300px che avanzavano si leggevano come un
   corridoio fra il testo e la sidebar. Centrata, l'aria si divide in due
   margini da 150px, che sono margini e non un vuoto. Le eccezioni a larghezza
   piena se lo tolgono piu' sotto.
   600px col corpo a 1rem fanno 79-88 caratteri per riga, sopra la misura
   comoda di 65-80. E' una scelta, non una svista: le altre due strade -
   stringere il testo a 540 o stringere la colonna principale - portavano i
   caratteri a posto ma una allargava i margini a 180 per lato e l'altra
   staccava i bordi del contenuto da quelli di header e footer, che sono
   condivisi con la home e non si toccano. Vedi REPORT-30. */
.articolo>* {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.art-briciole {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 14px;
    margin-top: 14px;
}

.art-briciole a {
    color: var(--accent-testo);
    font-weight: 700;
}

/* Le briciole sono una lista vera - <ol> con un <li> per livello - perche' e' la
   forma che loc_in() produce per i livelli intermedi e perche' e' quello che i
   dati microformato di schema.org descrivono. Qui si spoglia e si mette in riga. */
.art-briciole ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
}

/* Lo slash lo mette il foglio e non il markup: scritto nel markup verrebbe
   letto ad alta voce insieme al nome del livello. Non sul primo, che non ha
   niente prima di se'. */
.art-briciole li+li::before {
    content: "/";
    margin-right: 6px;
    color: var(--border-color);
}

.art-titolo {
    font-family: var(--font-heading);
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 16px;
}

/* Il sottotitolo che alcune pagine passano come $h6. Nella bozza non c'era
   perche' l'articolo di esempio non lo usava, ma nel sito esiste: sta sotto il
   titolo, in corpo minore e sul binario redazionale, non su quello
   d'interfaccia. */
.art-sommario {
    font-family: var(--font-section);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--text-secondary);
    margin-top: -6px;
    margin-bottom: 16px;
}

/* Firma a sinistra e strumenti a destra sulla stessa riga: nel riferimento la
   barra era una fascia a se' fra il titolo e il testo, cioe' l'ostacolo che si
   incontra prima di leggere. Qui divide la riga con la firma e non occupa piu'
   una banda sua. */
.art-testata {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 16px;
}

.art-firma {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.art-di {
    font-style: italic;
}

.art-firma a {
    color: var(--text-primary);
    font-weight: 700;
    font-style: italic;
}

/* IL PROFILO INSTAGRAM DELLA FIRMA.

   Prima era testo semplice: "(Instagram: @federicogiannini1)". Dodici caratteri
   di impalcatura intorno al dato, che su schermo stretto bastavano a mandare la
   firma su due righe e a staccare la data dal nome - misurato, 374x57 a 414px
   di finestra. Il marchio dice "Instagram" meglio della parola e occupa 13px.

   inline-flex con vertical-align: middle, non inline: serve ad allineare icona
   e nome sulla stessa linea di base senza che l'immagine spinga in su la riga.

   NON eredita il grassetto corsivo di .art-firma a: quella regola veste i NOMI
   - l'autore e i coautori - e la maniglia non e' un nome di persona. Si tiene il
   colore smorzato del resto della riga, cosi' resta un'informazione di servizio
   accanto alla firma e non un secondo autore.

   Scritta .art-firma .art-ig e non .art-ig: la prima vale (0,2,0) e batte
   .art-firma a, che vale (0,1,1). Con la sola classe avrebbe vinto quella e
   sarebbe servito un !important per ogni dichiarazione da ribaltare - tre - che
   e' il modo di vincere senza dire perche'. */
.art-firma .art-ig {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    vertical-align: middle;
    color: var(--text-secondary);
    /* Piu' piccola della riga che la ospita: la firma e' 0,8rem, la maniglia
       0,7. Non e' un dettaglio di gusto - e' quello che la fa leggere come un
       riferimento accanto al nome invece che come una seconda firma. Alla
       stessa misura del nome le due cose pesavano uguale, ed era il nome a
       perderci. */
    font-size: 0.7rem;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
}

.art-firma .art-ig:hover {
    color: var(--accent-testo);
}

/* Il marchio segue il corpo del testo invece di avere una misura sua: 1em vuol
   dire che se un domani la maniglia cambia corpo, l'icona si adegua da sola e
   non resta sproporzionata. Gli attributi width/height nel markup valgono 11,
   cioe' lo stesso valore a 0,7rem, e servono a riservare lo spazio prima che
   l'immagine arrivi. */
.art-ig img {
    display: block;
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
}

.art-data {
    margin-left: 8px;
}

.art-data::before {
    content: "|";
    margin-right: 8px;
    opacity: 0.45;
}

/* Le funzioni del riferimento ci sono tutte, ma senza fondo, senza cornice e
   senza colore: icone da 18px e diciture smorzate. Nella bozza non fanno
   niente di proposito - sono bottoni senza gestori.
   La barra si divide in due gruppi ai due capi della riga: a sinistra quello
   che riguarda il contenuto e la testata - i commenti e i due link a Google -
   e a destra quello che il lettore fa con l'articolo. In fila erano otto voci
   indistinguibili.
   width: 100% e non un posto sulla riga della firma: con i due link a Google
   la barra misura 504px e la firma 166, e in una colonna da 600 non ci stanno
   insieme. Meglio una riga sua dichiarata che un a capo che dipende dalla
   lunghezza della firma. */
.art-strumenti {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    width: 100%;
}

.art-strumenti-gruppo {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Le icone si tengono il bordo destro. Prima lo faceva il space-between con
   due soli figli; adesso i figli sono tre - conteggio, gruppo Google, gruppo
   azioni - e il margine automatico si mangia tutto lo spazio libero, quindi
   conteggio e Google restano accostati a sinistra e le azioni al bordo. La
   resa sopra i 600px e' identica a prima: il conto e' lo stesso, 69 + 14 +
   306,5 di contenuto e il resto assorbito da un lato solo. */
.art-strumenti-azioni {
    margin-left: auto;
}

/* Nessuna delle due diciture va a capo: sono due parole ognuna, e spezzate
   fanno sembrare la barra rotta - era metà del difetto del punto 1 del
   REPORT-31. Sopra i 600px non cambia niente, perche' li' non andavano a capo
   comunque: la riga ha 560px di colonna contro i 503,5 che serve. */
.art-strumento-testo,
.art-google-label {
    white-space: nowrap;
}

/* LA BARRA SU DUE RIGHE SOTTO I 600px (REPORT-31, punto 1).
   Prima era una riga sola e non ci stava: il gruppo di sinistra chiedeva
   372,6px di minimo contro i 335 della colonna a 375, quindi sforava di 37,6 e
   faceva scorrere in orizzontale TUTTA la pagina, perche' nella catena fino al
   <body> non c'e' nessun overflow che lo trattenga. Il flex-wrap che c'era
   mandava a capo i gruppi, non il loro contenuto, e il risultato era che
   "2 commenti" e "Seguici su" si spezzavano e le quattro icone finivano sotto
   da sole.
   Adesso: order 3 porta il gruppo Google in fondo e flex-basis 100% gli
   impedisce di stare in riga con qualcosa, quindi scende da solo alla seconda.
   Sulla prima restano conteggio a sinistra e icone a destra, 197px di
   contenuto: ci stanno anche a 320, dove la colonna e' 280.
   Il flex-wrap sul gruppo Google e' una valvola per i 320: da 346,5px di
   finestra in su la riga ci sta intera e non ha nessun effetto, sotto manda
   "Fonti preferite" a capo invece di far sforare la pagina. Vedi il poscritto
   al REPORT-35 per il conto e per l'alternativa. */
@media (max-width: 600px) {

    .art-strumenti-google {
        order: 3;
        flex-basis: 100%;
        flex-wrap: wrap;
    }
}

.art-strumento {
    display: inline-flex;
    align-items: center;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity var(--transition-fast);
}

.art-strumento:hover {
    opacity: 1;
}

.art-strumento-testo {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
}

/* Il contenitore dell'icona Google: fuori dal flusso, non deve occupare una
   riga vuota in cima alla pagina. */
.sprite-svg {
    position: absolute;
}

/* I due link a Google. Sono due azioni diverse - seguire su Discover e
   aggiungere alle fonti preferite - e vanno tenute distinte: la
   semplificazione della barra riguardava la forma, non il contenuto.
   L'etichetta "Seguici su" li precede e vale per tutti e due. */
.art-google-label {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.art-google {
    gap: 4px;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.art-google strong {
    font-weight: 700;
}

/* L'icona ha i suoi quattro colori e non deve sbiadire con il resto del
   bottone, che a riposo sta al 55%: qui torna piena. */
.art-google-icona {
    flex-shrink: 0;
}

/* Una riga sola e un trattamento solo per le due voci. Prima la categoria era
   un'etichetta da 0,6rem colorata e "Argomenti" un testo da 0,75: due pesi che
   non stavano insieme. Adesso le diciture sono testo smorzato e i due nomi sono
   links in accento, allo stesso corpo della riga di firma qui sopra, cosi' le
   due righe di servizio si leggono come una cosa sola. */
.art-etichette {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.art-etichette a {
    color: var(--accent-testo);
    font-weight: 700;
}

/* L'occhiello sul modello del sito vero: fondo grigio chiaro, filetto verticale
   spesso e un segno di virgolette aperte in grande. Il float sul segno fa
   avvolgere il testo intorno, invece di lasciargli una riga tutta sua.
   IL COLORE E' PROVVISORIO. Il sito vero usa una sabbia calda, #d1b38b, che
   nella nostra tavolozza non c'e': i soli caldi disponibili sono il rosso del
   brand e i token di categoria, e questi ultimi vogliono dire "l'articolo e'
   di quella categoria", quindi qui mentirebbero. Sta su --accent finche' non
   si sceglie fra le due proposte del REPORT-30. */
.art-occhiello {
    font-size: 1.2rem;
    line-height: 1.5;
    font-weight: 500;
    margin-bottom: 26px;
    padding: 18px 20px;
    background: var(--bg-hover);
    border-left: 10px solid var(--accent);
}

.art-occhiello::before {
    content: "\201C";
    float: left;
    margin: 0 10px 0 0;
    font-family: var(--font-section);
    font-size: 3.6rem;
    line-height: 0.72;
    color: var(--accent-testo);
}

.articolo p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 22px;
}

.articolo p strong {
    font-weight: 700;
}

/* ==========================================================================
   TIPOGRAFIA DEL CORPO REDAZIONALE

   Nella bozza il corpo dell'articolo erano tre paragrafi e una figura, quindi
   il foglio aveva regole per <p>, per <p strong> e per la figura, e basta.
   Nel corpo vero ci sono link, titoli interni, elenchi, citazioni e tabelle, e
   senza queste regole cadevano nei valori di default del browser - che qui non
   sono i valori del browser, perche' il reset `* { margin: 0; padding: 0 }` in
   cima al foglio li ha azzerati. Il caso peggiore erano gli elenchi: senza
   padding-left i punti elenco finivano fuori dalla scatola.
   ========================================================================== */

/* I LINK NEL TESTO. Il foglio globale porta a { color: inherit }, che in un
   articolo vuol dire link neri in mezzo a testo nero: indistinguibili, finche'
   non ci passi sopra il mouse. In questa pagina sono sedici.
   Il colore non basta da solo in un testo lungo - e' l'unico segnale, e non
   funziona per chi non distingue i rossi - quindi c'e' anche la sottolineatura.
   Lo spessore cresce all'hover invece di cambiare colore: cambiare colore
   all'hover su un link gia' colorato dice meno.
   Limitato alla prosa, non .articolo a: dentro l'articolo ci sono anche la
   firma, le etichette, la barra strumenti e il box autore, che hanno un loro
   trattamento e non vanno sottolineati. */
.articolo p a,
.articolo li a,
.articolo blockquote a,
.articolo td a {
    color: var(--accent-testo);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.articolo p a:hover,
.articolo li a:hover,
.articolo blockquote a:hover,
.articolo td a:hover {
    text-decoration-thickness: 2px;
}

/* I TITOLI INTERNI. Scendono sotto .art-titolo, che e' 2.1rem: non devono
   competere col titolo dell'articolo. Stanno dentro i 600px della misura di
   lettura, come i paragrafi, perche' sono parte del flusso di lettura.
   margin-top generoso e margin-bottom corto: un titolo appartiene al testo che
   lo segue, non a quello che lo precede, e la spaziatura e' il solo modo di
   dirlo. Gli h2 del corpo li marca addIdsAndCollect() con un id, per l'indice
   dei contenuti. */
.articolo h2,
.articolo h3,
.articolo h4 {
    font-family: var(--font-heading);
    line-height: 1.25;
    margin-top: 36px;
    margin-bottom: 14px;
}

.articolo h2 {
    font-size: 1.45rem;
    font-weight: 800;
}

.articolo h3 {
    font-size: 1.2rem;
    font-weight: 700;
}

.articolo h4 {
    font-size: 1.05rem;
    font-weight: 700;
}

/* GLI ELENCHI. Il padding-left lo rimette questa regola: il reset in cima al
   foglio lo azzera su tutto, e su un <ul> questo significa punti elenco
   disegnati fuori dal proprio box. Non e' una preferenza, e' un ripristino. */
.articolo ul,
.articolo ol {
    padding-left: 24px;
    margin-bottom: 22px;
}

.articolo li {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 8px;
}

/* LE CITAZIONI. Stesso filetto a sinistra dell'occhiello, in grigio invece che
   nel rosso del brand: l'occhiello e' uno solo e apre l'articolo, le citazioni
   sono molte e stanno nel flusso, quindi non devono pesare come quello. */
.articolo blockquote {
    margin: 26px 0;
    padding-left: 18px;
    border-left: 4px solid var(--border-color);
    font-style: italic;
    color: var(--text-secondary);
}

/* LE TABELLE CHE NON SONO IMMAGINI. Le tre classi delle immagini sono escluse
   perche' hanno il loro trattamento qui sopra.
   display: block con overflow-x: auto e' l'unico modo di impedire a una tabella
   larga di sfondare la colonna senza aggiungere un contenitore nel markup - e il
   markup e' nel database, non qui. Si perde il layout tabellare nativo, ma una
   tabella che esce dallo schermo si perde del tutto. */
.articolo table:not(.immagini-testo):not(.immagini-ilaria) {
    display: block;
    overflow-x: auto;
    width: 100%;
    margin-bottom: 26px;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: 0.85rem;
}

.articolo table:not(.immagini-testo):not(.immagini-ilaria) th,
.articolo table:not(.immagini-testo):not(.immagini-ilaria) td {
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    text-align: left;
}

/* L'ANTEPRIMA dell'articolo bloccato dal paywall. html_cut() taglia il testo a
   1600 caratteri e lo chiude qui dentro. La sfumatura sul taglio e tutto il
   blocco dell'offerta stanno in fondo al foglio, nella sezione PAYWALL. */
.articolo .anteprima>p:last-child {
    margin-bottom: 0;
}

/* Le eccezioni al tetto sono le sole immagini: figura e banner. Il box autore
   e' rientrato nella misura di lettura - e' prosa, e a larghezza piena la
   biografia andava su righe molto piu' lunghe di quelle dell'articolo che sta
   sopra. Le immagini non hanno questo problema perche' non si leggono. */
/* I TRE INVOLUCRI STORICI DELLE IMMAGINI SONO QUI DENTRO, e non e' una
   concessione: sono quello che il corpo degli articoli usa davvero.
   .art-figura e' il nome della bozza, e nella bozza il corpo erano tre
   paragrafi scritti a mano piu' una figura. Nel corpo vero - quindici anni di
   HTML redazionale - le immagini sono figure.immagini-testo, e nei pezzi piu'
   vecchi table.immagini-testo; table.immagini-ilaria la genera rivista/post.php
   per l'immagine delle flash news. Nessuno di quei tre e' .art-figura, quindi
   senza queste righe restavano strozzati ai 600px di .articolo>* dentro una
   colonna da 900, con la didascalia dello stesso corpo e colore del testo.
   Riscrivere l'HTML di migliaia di articoli non e' un'opzione: e' il foglio che
   impara il vocabolario vero.
   La struttura combacia gia': figure > img + figcaption, la stessa della bozza.
   Le tabelle no - la didascalia e' un secondo <td> - e si sistemano piu' sotto. */
.art-figura,
.art-banner,
.articolo figure.immagini-testo,
.articolo table.immagini-testo,
.articolo table.immagini-ilaria {
    max-width: 100%;
    margin-bottom: 26px;
}

/* LA COPPIA DI BANNER USA TUTTA LA COLONNA, non i 600px del testo.

   COSA SUCCEDE A CHI NON HA LA DEROGA: il leaderboard di chiusura sta in un
   #leaderboard2 nudo, quindi lo prende .articolo > * e viene reso 600x74 dentro
   una colonna da 900 - una creativita' 728x90 all'82%, trattata come fosse
   testo. Misurato dal vivo.

   DUE CLASSI E NON UNA. Non per vincere di specificita': .articolo > * vale
   (0,1,0) - l'asterisco non conta niente - e .art-banner altrettanto, quindi
   fra le due deciderebbe l'ordine nel file. Ed e' proprio il motivo: una deroga
   che dipende da quale regola sta piu' in basso si rompe il giorno che qualcuno
   sposta un blocco. Con (0,2,0) la cosa e' detta e non dedotta.

   Il testo resta incolonnato a 600 e il banner no, ed e' voluto: un annuncio non
   e' lettura, e allinearlo alla misura di lettura lo farebbe sembrare parte del
   discorso. */
.art-banner.art-banner-desktop,
.art-banner.art-banner-mobile {
    max-width: none;
    margin-top: 34px;
    margin-bottom: 34px;
}

/* LA FOTOGRAFIA DIVENTA UNA SCHEDA: grigio appena accennato e un po' d'aria
   intorno. Serve a staccare l'immagine dal testo senza una riga di separazione,
   e a dare alla didascalia un posto dove stare invece di galleggiare sotto la
   foto.

   .art-banner NON e' in questa lista, pur essendo nella precedente: quello e'
   un annuncio, non una fotografia, e un riquadro grigio intorno a una creativa
   la fa sembrare parte dell'articolo.

   Il padding non allarga niente: il reset qui sopra mette box-sizing border-box
   su tutto, quindi i 16px stanno DENTRO la larghezza e l'immagine si stringe di
   altrettanto. Senza, le figure affiancate al testo - quelle con max-width 40%
   - sarebbero diventate 40% + 32px e avrebbero mangiato la colonna.

   Le tabelle ci stanno dentro perche' hanno la stessa struttura logica: prima
   riga l'immagine, seconda la didascalia. Una tabella accetta il padding come
   qualunque altra scatola. */
.art-figura,
.articolo figure.immagini-testo,
.articolo table.immagini-testo,
.articolo table.immagini-ilaria {
    background: var(--bg-tenue);
    padding: 16px;
}

/* Su schermo stretto la colonna e' gia' tutta la finestra meno i margini:
   sedici pixel per lato sono il 9% di una colonna da 343, e l'immagine si
   rimpicciolisce per far posto a un bordo che li' non serve. */
@media (max-width: 600px) {

    .art-figura,
    .articolo figure.immagini-testo,
    .articolo table.immagini-testo,
    .articolo table.immagini-ilaria {
        padding: 10px;
    }
}

/* LE DUE FORME DELLA PUBBLICITA' NEL TESTO SI DANNO IL CAMBIO A 992px.

   Qui c'era una regola sola - .art-banner { display: none } sotto i 992 - scritta
   quando .art-banner voleva dire soltanto "i due leaderboard del desktop dentro
   l'articolo". Da quando dentro quel contenitore ci sono anche le strisce
   strette, quella regola le spegneva insieme agli altri: su telefono non si
   vedeva piu' niente. Due contenitori distinti e due regole, cosi' nessuna delle
   due puo' spegnere la roba dell'altra.

   PERCHE' IL LARGO ESCE DI SCENA: li' sotto il formato e' il 640x200, e un
   728x90 a larghezza di colonna si disegnerebbe 335x41 a 375px, cioe'
   un'inserzione illeggibile.

   Le strisce NON scavalcano il tetto dei 600px di .articolo>*, ed e' voluto:
   dentro la misura di lettura una striscia non viene mai ingrandita - a 992px
   la colonna vale 952 ma la striscia si ferma a 600, sotto i 640 della sorgente
   - e resta incolonnata col testo come il resto del flusso di lettura. */
.art-banner-mobile {
    display: none;
}

@media (max-width: 992px) {
    .art-banner-desktop {
        display: none;
    }

    .art-banner-mobile {
        display: block;
    }
}

.art-figura img,
.articolo figure.immagini-testo img,
.articolo table.immagini-testo td img,
.articolo table.immagini-ilaria td img {
    display: block;
    width: 100%;
    height: auto;
}

/* La didascalia. Per le tabelle e' la cella della SECONDA riga - la prima tiene
   l'immagine - quindi tr+tr td, che e' il modo di dire "la riga che segue la
   prima" senza dipendere da :nth-child su una tabella che a volte ha il tbody
   esplicito e a volte no. */
.art-figura figcaption,
.articolo figure.immagini-testo figcaption,
.articolo table.immagini-testo tr+tr td,
.articolo table.immagini-ilaria tr+tr td {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 8px;
    text-align: left;
    padding-top: 8px;
}

/* Le immagini che l'autore ha affiancato al testo con uno style inline. Il
   foglio vecchio aveva cinque selettori per questi casi, quindi nel corpus ci
   sono: vanno lasciate affiancate, o il float non serve a niente.
   Il max-width al 40% e la larghezza del testo a 600px convivono: l'immagine
   sta nella colonna da 900 e il testo le scorre accanto. E' un valore scelto,
   non misurato - se le volete piu' grandi e' questa riga.
   I margini automatici di .articolo>* vanno azzerati, o si sommano al float e
   l'immagine si stacca dal bordo. */
.articolo figure.immagini-testo[style*="float"],
.articolo table.immagini-testo[style*="float"],
.articolo table.immagini-ilaria[style*="float"] {
    max-width: 40%;
    margin-left: 0;
    margin-right: 0;
}

.articolo figure.immagini-testo[style*="float: left"],
.articolo figure.immagini-testo[style*="float:left"],
.articolo table.immagini-testo[style*="float: left"],
.articolo table.immagini-testo[style*="float:left"] {
    margin-right: 24px;
}

.articolo figure.immagini-testo[style*="float: right"],
.articolo figure.immagini-testo[style*="float:right"],
.articolo table.immagini-testo[style*="float: right"],
.articolo table.immagini-testo[style*="float:right"] {
    margin-left: 24px;
}

.art-autore {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 20px;
    background: #f0f0f0;
    margin-bottom: 26px;
}

.art-autore-foto {
    flex-shrink: 0;
    border-radius: 50%;
}

.art-autore-testo p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* I SOCIAL NEL BOX DEL PROFILO, sulle pagine autore.
   Serve solo perche' .art-autore-testo p azzera il margine sotto: la fila di
   icone, che e' un <p> come gli altri, finirebbe attaccata all'ultima riga di
   biografia. Il gap tiene staccate le icone fra loro senza spazi scritti nel
   markup, che a schermo stretto non andrebbero a capo come serve. */
.art-autore-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.art-autore-social img {
    display: block;
}

.art-autore-nome {
    margin-bottom: 6px;
}

/* Contenuti centrati come nel box online: titolo, testo e bottone. Il bottone
   si centra da solo, e' inline-block dentro un blocco che centra. */
.art-newsletter {
    padding: 22px 20px;
    background: #f0f0f0;
    border-top: 3px solid var(--accent);
    margin-bottom: 40px;
    text-align: center;
}

.art-newsletter p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 14px;
}

.art-newsletter-claim {
    font-family: var(--font-sans);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.8rem;
}

.art-newsletter-cta {
    display: inline-block;
    background: var(--accent);
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 10px 22px;
}

/* I BERSAGLI DELLE ANCORE SCENDONO SOTTO LA TESTATA.

   La testata e' appiccicata in cima - barra rossa piu' header - e un salto a
   un'ancora porta il bersaglio a scroll 0, cioe' SOTTO di lei: si arrivava al
   punto giusto e non si vedeva niente. Misurato sulla pagina articolo a 2000px
   di scorrimento: la coppia copre 228px.

   scroll-margin-top e non un padding o un'ancora fantasma sopra il titolo: e'
   l'unica proprieta' che sposta il punto di ARRIVO senza toccare il disegno,
   quindi non lascia buchi quando alla sezione ci si arriva scorrendo invece che
   saltando.

   Il valore passa dal token e non e' scritto a mano: --header-h e' la somma
   delle scatole della testata, quindi il giorno che --logo-h cambia - come e'
   gia' successo, da 80 a 105 - l'offset si riallinea da solo. I 16px in piu'
   sono aria, perche' un titolo incollato al bordo inferiore della testata si
   legge male anche quando tecnicamente si vede.

   Vale per i due bersagli che l'articolo ha: la sezione dei commenti e i <h2>
   a cui addIdsAndCollect() mette un id per l'indice. */
.art-commenti,
.articolo h2[id] {
    scroll-margin-top: calc(var(--header-h) + 16px);
}

.art-commenti-titolo {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--text-primary);
    margin-bottom: 20px;
}

.art-commento {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.art-commento-testa {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    margin-bottom: 8px;
}

.art-commento-autore {
    font-weight: 800;
}

.art-abbonato {
    background: var(--accent);
    color: #ffffff;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    margin-left: 4px;
}

.art-commento-data {
    color: var(--text-secondary);
    margin-left: 8px;
}

.art-commento-testo {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 10px;
}

.art-commento-azioni {
    display: flex;
    gap: 16px;
}

.art-commento-azione {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.art-commento-azione:hover {
    color: var(--accent-testo);
}

/* LE RISPOSTE. La bozza non le aveva - l'articolo di esempio non ne aveva
   nessuna - ma il sito le ha, a un livello solo: a una risposta non si risponde.
   Il rientro e il filetto a sinistra sono il modo di dire "questa sta sotto
   quella", senza ripetere il nome di chi si risponde. */
.art-commento-risposte {
    margin-left: 20px;
    padding-left: 16px;
    border-left: 2px solid var(--border-color);
}

.art-commento-risposta {
    padding-bottom: 12px;
    margin-bottom: 12px;
}

/* L'ultima risposta non porta il filetto: ce l'ha gia' il contenitore. */
.art-commento-risposta:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.art-commento-risposte-toggle {
    margin-bottom: 12px;
}

/* L'orologio accanto alla data dei commenti modificati. La regola stava in un
   <style> stampato da commenti-render.php a ogni richiesta AJAX, quindi
   rispedito e mai messo in cache; i valori sono quelli di allora, col rosso
   passato al token del brand. */
.orologio-commento {
    font-size: 0.85rem;
    color: var(--accent-testo);
    vertical-align: middle;
    margin-left: 4px;
    cursor: default;
}

.orologio-commento:hover {
    color: var(--text-primary);
}

/* La riga "sei Tizio (tizio@esempio.it)" sopra il campo del commento. Non c'era
   nella bozza, perche' la bozza non aveva un utente collegato. */
.art-form-chi-sei {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 24px;
}

/* Il riquadro "Stai rispondendo a Tizio". Lo mostra il JS cliccando Rispondi, e
   lo riporta a display:none l'Annulla che contiene: per questo lo stile inline
   display:none nel markup resta, ed e' il JS a governarlo. */
.art-commento-rispondi-a {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    background: var(--bg-hover);
    border-left: 4px solid var(--border-color);
    padding: 8px 12px;
    width: 100%;
}

.art-commento-rispondi-a .art-commento-azione {
    margin-left: 10px;
}

/* I campi del form di pre-registrazione, per chi commenta senza essere entrato.
   .input-stile e' la classe storica dei campi del sito: i valori sono quelli che
   aveva nel foglio vecchio, riportati sui token - fondo --bg-hover al posto di
   #f2f0ed, filetto --border-color - e senza l'italico, che su un campo da
   riempire si legge come testo gia' scritto. */
.art-form-commento .input-stile {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    background: #ffffff;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--text-primary);
}

.art-form-commento .input-stile:focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* .bottone-piccolo: la usa il markup che il JS inietta nel riquadro di modifica
   di un commento - Salva modifica e Annulla - costruito come stringa dentro
   template/parts/commenti.php. Finche' quella stringa resta la', la classe
   serve. Allineata a .art-invia, che e' il bottone di invio del form. */
.art-commento-testo .bottone-piccolo {
    display: inline-block;
    background: var(--superficie-forte);
    color: #ffffff;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 8px 16px;
    margin-top: 8px;
}

.art-commento-testo .bottone-piccolo:hover {
    background: var(--accent);
}

/* I tre pallini mentre i commenti arrivano in AJAX. Valori e keyframes vengono da
   template/css/commenti.css, che il restyling non carica piu'; il nero fisso e'
   passato al token del testo. Il nome dell'animazione e' prefissato perche'
   "bounce" e' un nome che chiunque userebbe. */
.loader-commenti {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 1em 0;
}

.loader-commenti span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--superficie-forte);
    animation: art-commenti-pallini 0.6s infinite ease-in-out;
}

.loader-commenti span:nth-child(2) {
    animation-delay: 0.2s;
}

.loader-commenti span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes art-commenti-pallini {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

.art-form-commento {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    margin-top: 24px;
}

.art-form-commento label {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 800;
}

.art-form-commento textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    font-family: var(--font-sans);
    font-size: 0.9rem;
}

.art-invia {
    background: var(--superficie-forte);
    color: #ffffff;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 10px 22px;
}

/* IL PROSSIMO ARTICOLO NON SI NASCONDE, e il perche' va detto perche' nella
   bozza era il contrario.
   Nella bozza l'articolo successivo stava gia' dentro l'HTML della pagina, quindi
   serviva tenerlo nascosto fino a quando il lettore arrivava in fondo ai
   commenti: da qui il display: none, la classe .is-open che lo scopriva e la
   sentinella che faceva scattare l'IntersectionObserver.
   In produzione non e' cosi' e non lo e' mai stato: l'articolo lo carica
   includes/js/next_post.js quando serve, e quando c'e' va mostrato. Un
   display: none di partenza lo lasciava invisibile - si vedeva solo il filetto e
   i 40px di padding, cioe' una striscia bianca - e nessuno glielo togliva,
   perche' next_post.js non ha mai saputo di .is-open ne' deve saperlo: il
   comportamento di produzione funziona e va preso come riferimento.
   .art-sentinella resta per la bozza e per l'eventuale articolo statico: e' alta
   1px e non fa danni dove non c'e'. */
.art-sentinella {
    height: 1px;
}

.prossimo-articolo {
    padding-top: 40px;
    border-top: 3px solid var(--text-primary);
}

/* La comparsa sta su .prossimo-articolo e non su una classe da aggiungere:
   l'animazione parte quando l'elemento entra nel DOM, cioe' quando l'articolo
   arriva. Una sola regola, nessun ramo da ricordare.
   Di conseguenza il blocco su #prossimo-articolo in includes/js/restyling-2026.js
   - l'IntersectionObserver che aggiungeva .is-open - non ha piu' niente da fare
   sulle pagine vere: quell'id lo emetteva solo la bozza. Lasciato dov'e' perche'
   e' innocuo e perche' la bozza resta il riferimento grafico. */
@media (prefers-reduced-motion: no-preference) {
    .prossimo-articolo {
        animation: art-entra 0.5s ease both;
    }
}

@keyframes art-entra {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

@media (max-width: 768px) {
    .art-titolo {
        font-size: 1.6rem;
    }

    .articolo p {
        font-size: 1.05rem;
    }

    .art-autore {
        flex-direction: column;
    }
}

/* =========================================
   GIRO 36 - ARCHIVIO DI CATEGORIA
   Terza pagina della bozza: restyling-categoria.html, l'elenco di una
   categoria (Attualita') con 20 voci, il bottone "carica altri" e la
   paginazione a 388 pagine.
   Testata, sidebar e piede sono gli stessi delle altre due pagine e qui
   sotto non compaiono: non c'e' una riga che li tocchi.
   L'elenco NON e' un componente nuovo. E' .schema-a-item, quello delle liste
   dello schema A, con la miniatura portata da 96 a 190px e l'abstract sotto
   il titolo: nella colonna centrale da 900px i 190 lasciano 695px al testo,
   e li' un abstract da 240 battute sta su tre righe senza forzare niente.
   L'altezza del testo (titolo 2 righe + data + 3 righe + link) viene 180px
   circa, cioe' la stessa della miniatura: le due colonne finiscono insieme.
   Le voci restano .card, quindi l'ingresso a cascata e l'hover arrivano
   gratis, come per le liste della home.
   ========================================= */

/* Il titolo della categoria. Il componente e' .group-header + .group-title,
   gia' in casa: da li' arrivano il filetto rosso, il maiuscolo, Inter a 800.
   Qui cambia SOLO il corpo, perche' questo non e' il titolo di una sezione
   fra tante ma il titolo della pagina. */
.cat-titolo {
    font-size: 1.6rem;
}

/* --- L'ELENCO --- */

/* La miniatura. 190px e non 96: nella colonna centrale i 96px della home
   lascerebbero l'immagine grande quanto una nota a margine accanto a un
   abstract di tre righe. Il rapporto 1:1 e' quello che .schema-a-item porta
   gia' con se' (aspect-ratio: 1 su .card-image-wrapper), e le sorgenti
   225x250 di resize.php ci entrano con object-fit: cover: rapporto unico per
   tutte e venti senza una regola in piu'.
   Il ritmo passa da 14+14 a 22+22: con voci alte 190px invece di 96 i filetti
   a 14px stavano troppo stretti e l'elenco si leggeva come un blocco solo. */
.archivio-lista .schema-a-item {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 20px;
    padding-bottom: 22px;
    margin-bottom: 22px;
}

/* A colonna piena il titolo di lista puo' crescere: 1rem era la misura dei
   96px. */
.archivio-lista .card-title {
    font-size: 1.25rem;
    line-height: 1.25;
}

/* L'abstract e' prosa redazionale, quindi --font-section come il testo
   dell'articolo, e --text-secondary come gli altri meta: deve accompagnare il
   titolo, non competerci. */
.archivio-abstract {
    font-family: var(--font-section);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-top: 8px;
}

/* "Leggi tutto" e' .more-link, il link di approfondimento gia' usato in coda a
   Ultime Notizie e nelle intestazioni delle sezioni nuove: terzo posto, stesso
   componente. Il "..." del riferimento non serve, lo dice la freccetta che il
   componente si porta dietro.
   Il margine di sopra funziona perche' il <p> dell'abstract e' un blocco:
   l'inline-flex parte a capo e i 10px si vedono. */
.archivio-lista .more-link {
    margin-top: 10px;
}

/* I BANNER INTERCALATI, dentro l'elenco (giro 37).
   Il ritmo dell'elenco pende tutto da un lato solo: .schema-a-item porta
   padding-bottom, filetto e margin-bottom, e NIENTE di sopra. Fra due voci
   funziona - il margine di una fa da stacco all'altra - ma un blocco infilato
   in mezzo prende i 22px della voce che lo precede e sotto non trova niente,
   perche' la voce che segue non ha margine di sopra da offrire. Lo stacco di
   questo elenco, insomma, non e' fra le voci: e' appeso sotto ciascuna.
   Sopra questo si sommava il fatto che i banner il margine proprio non ce
   l'avevano: le strisce mobili lo hanno azzerato dal giro 32
   (.sequenza-mobile .ad-mobile { margin: 0 }), che sulla home e' giusto perche'
   li' sono elementi di griglia e lo spazio glielo da' il gap da 30px - qui
   stanno dentro .archivio-lista, che griglia non e', e il gap non c'e'.
   Il leaderboard qualche pixel sotto ce l'aveva, ma nessun filetto: chiuso
   sopra dal filetto della decima voce e aperto sotto, si leggeva incollato
   all'undicesima.
   Qui il banner si chiude da solo. Sopra: i 22px della voce precedente piu' i
   34 suoi, col filetto di quella in mezzo. Sotto: 34 suoi, il filetto, e i 22
   con cui l'elenco riparte. Simmetrico, e 56px contro i 44 che separano due
   voci - il banner sta piu' lontano dall'elenco di quanto l'elenco stia da se
   stesso, che e' il punto.
   Le due classi nel selettore non sono decorative: portano la specificita' a
   tre, e senza quelle la regola del giro 32 sulle strisce resterebbe in gioco
   a pari merito, decisa dall'ordine di scrittura. */
.archivio-lista>.ad-banner.leaderboard,
.archivio-lista>.ad-banner.ad-mobile {
    margin-top: 34px;
    margin-bottom: 22px;
    padding-bottom: 34px;
    border-bottom: 1px solid var(--border-color);
}

/* L'ultima striscia dell'elenco non chiude niente: sotto c'e' il bottone, non
   un'altra voce. Via il filetto, e il respiro di sotto torna uguale a quello
   di sopra.
   .archivio-lista-fine e non .archivio-lista: le strisce 3 e 5 sono anche loro
   ultime figlie, ma del PRIMO e del SECONDO troncone, e dopo di loro l'elenco
   riprende col troncone seguente. Spogliarle sarebbe stato rimettere il
   difetto dove lo si e' appena tolto. */
.archivio-lista-fine>.ad-banner:last-child {
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 34px;
}

/* Il filetto sotto l'ultima voce di tutto l'elenco: non serve, sotto c'e' il
   bottone. :last-of-type e non :last-child perche' l'ultimo figlio del terzo
   troncone e' la striscia mobile, non un <article>. */
.archivio-lista-fine .schema-a-item:last-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

/* --- IL BOTTONE --- */

/* A tutta larghezza della colonna, sotto l'elenco. Piatto e non arrotondato:
   e' la scelta del giro 21 per i riquadri, e un bottone largo 900px con gli
   angoli tondi sembrerebbe un campo di ricerca.
   In bozza NON carica niente: e' la forma. */
.cat-carica {
    display: block;
    width: 100%;
    padding: 18px 20px;
    margin: 30px 0;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff;
    background: var(--accent);
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.cat-carica:hover {
    background: var(--accent-hover);
}

/* --- LA PAGINAZIONE ---
   Componente nuovo, l'unico di questo giro. Con 388 pagine l'elenco completo
   non esiste: si danno i due salti all'indietro, cinque pagine intorno a
   quella aperta, l'ultima, il salto in avanti, e sotto la riga che dice a che
   punto si e'. */
.cat-paginazione {
    margin-bottom: 40px;
}

.cat-pag-lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    list-style: none;
}

/* 44x44 e' il minimo dell'area toccabile, e vale gia' sul desktop: non c'e'
   motivo di fare due misure. Il padding orizzontale serve alle voci con la
   parola dentro ("Precedente"), il min-width alle cifre. */
.cat-pag-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.cat-pag-link:hover {
    background: var(--bg-hover);
    border-color: var(--text-secondary);
}

/* La pagina aperta e' piena di rosso: e' l'unico elemento della barra che non
   e' un bersaglio, e si deve vedere prima di leggerla. aria-current="page" sta
   nel markup e fa da selettore: uno stato solo, non una classe che si puo'
   dimenticare di aggiornare. */
.cat-pag-link[aria-current="page"] {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
    font-weight: 800;
}

.cat-pag-link[aria-current="page"]:hover {
    background: var(--accent);
    border-color: var(--accent);
}

/* Su pagina 1 i due salti all'indietro restano in pagina spenti: cosi' la
   barra ha la stessa larghezza su tutte e 388 le pagine e non balla al
   cambio pagina. */
.cat-pag-link.is-disabled {
    color: var(--text-secondary);
    opacity: 0.4;
    pointer-events: none;
}

.cat-pag-ellissi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 44px;
    font-family: var(--font-sans);
    color: var(--text-secondary);
}

.cat-pag-stato {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 14px;
}

/* --- LA VISTA STRETTA ---
   La soglia e' la stessa di tutto il resto, 992px: sopra non cambia niente. */
@media (max-width: 992px) {

    /* La miniatura scende da 190 a 120: a 375px la colonna utile e' 335 e con
       190 di foto al testo ne resterebbero 125. */
    .archivio-lista .schema-a-item {
        grid-template-columns: 120px minmax(0, 1fr);
        gap: 14px;
        padding-bottom: 18px;
        margin-bottom: 18px;
    }

    .archivio-lista .card-title {
        font-size: 1.05rem;
    }

    /* L'abstract resta ma si ferma a tre righe: accanto a una foto alta 120px
       le sette righe che 240 battute fanno a 375px sbilanciavano la voce e
       allungavano l'elenco oltre il ragionevole. Il taglio e' tipografico, il
       testo nel markup e' tutto. */
    .archivio-abstract {
        font-size: 0.875rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
    }

    /* Stessa proporzione della banda larga, sull'altro ritmo: qui le voci
       stanno a 18+18 e il banner a 18+filetto+26, cioe' 44px contro 36. */
    .archivio-lista>.ad-banner.ad-mobile {
        margin-top: 26px;
        margin-bottom: 18px;
        padding-bottom: 26px;
    }

    /* Anche il padding va rimesso a zero qui: la regola di sopra, che scala il
       banner sul ritmo stretto, viene dopo quella che lo spoglia e gliene
       restituirebbe 26 sotto il filetto che non c'e' piu'. */
    .archivio-lista-fine>.ad-banner:last-child {
        padding-bottom: 0;
        margin-bottom: 26px;
    }

    .cat-carica {
        margin: 24px 0;
    }
}

@media (max-width: 600px) {

    /* Due delle cinque pagine intorno escono: restano 1 2 3 ... 388 piu' i tre
       salti, che a 375px stanno su due righe invece che su tre. */
    .cat-pag-extra {
        display: none;
    }

    /* La parola sparisce e resta la freccia. Il nome accessibile non si perde:
       ce l'ha l'aria-label sul link, non il testo. */
    .cat-pag-testo {
        display: none;
    }

    .cat-pag-salto {
        padding: 0;
    }
}

/* --- LA SEQUENZA MOBILE DI QUESTA PAGINA ---
   Il meccanismo e' quello del giro 32 e non si tocca: .sequenza-mobile sul
   contenitore fa il resto - display: contents su .main-column e .sidebar,
   i 728x90 e i quadrati 250x250 nascosti, le strisce 320x100 accese.
   Qui ci sono solo i posti in fila. I cinque riquadri della sidebar hanno
   gia' un numero dalla home (10, 18, 22, 23, 24): quello li' porterebbe tutti
   e cinque dopo la paginazione, cioe' di nuovo in coda. Tre selettori di
   classe contro due li riportano al loro posto senza toccare la home.
   Le strisce non sono qui dentro: stanno nel markup fra una voce e l'altra,
   dentro i tronconi dell'elenco, e quindi seguono l'ordine del documento. */
@media (max-width: 992px) {

    .pagina-categoria .sequenza-mobile .ad-mobile[data-posto="1"] {
        order: 10;
    }

    .pagina-categoria .sequenza-mobile .art-briciole {
        order: 20;
    }

    .pagina-categoria .sequenza-mobile .group-header {
        order: 30;
    }

    /* La descrizione della categoria, quando il gestionale ce l'ha: la stampano
       le categorie delle flash news. LO STESSO order DEL TITOLO, non uno in
       mezzo: fra 3 e 4 non c'e' un intero, e a parita' di order la griglia usa
       l'ordine del documento - quindi basta che nel markup stia dopo
       l'intestazione, come sta.
       Senza una regola finirebbe con order zero, cioe' in cima alla pagina sopra
       le briciole. */
    .pagina-categoria .sequenza-mobile .cat-descrizione {
        order: 30;
    }

    /* Voci 1-8, con la striscia dopo la quarta e dopo l'ottava. */
    .pagina-categoria .sequenza-mobile .archivio-lista {
        order: 40;
    }

    .pagina-categoria .sequenza-mobile .quaderni-widget {
        order: 50;
    }

    /* Voci 9-16. Una classe in piu' della regola qui sopra, quindi non dipende
       dall'ordine di scrittura. Un fratello adiacente (.archivio-lista +
       .archivio-lista) avrebbe pescato anche il terzo troncone, e con una
       specificita' piu' alta di quella di .archivio-lista-fine gli avrebbe
       scavalcato l'order: 8. */
    .pagina-categoria .sequenza-mobile .archivio-lista.archivio-lista-due {
        order: 60;
    }

    .pagina-categoria .sequenza-mobile .list-widget {
        order: 70;
    }

    /* Voci 17-20, con la striscia dopo la ventesima. */
    .pagina-categoria .sequenza-mobile .archivio-lista.archivio-lista-fine {
        order: 80;
    }

    .pagina-categoria .sequenza-mobile .cat-carica {
        order: 90;
    }

    .pagina-categoria .sequenza-mobile .cat-paginazione {
        order: 100;
    }

    /* In coda i tre riquadri che non sono ne' pubblicita' ne' elenco:
       Calendario, Cerca una mostra, Newsletter. Stesso ordine relativo che
       hanno sulla home. */
    .pagina-categoria .sequenza-mobile .calendar-widget {
        order: 110;
    }

    .pagina-categoria .sequenza-mobile .search-exhibitions-widget {
        order: 120;
    }

    .pagina-categoria .sequenza-mobile .newsletter-sidebar-box {
        order: 130;
    }
}

/* =========================================
   GIRO 38 - CHI SIAMO
   Quarta pagina della bozza: restyling-chi-siamo.html. Testata, sidebar e
   piede sono quelli delle altre tre e qui sotto non compaiono.
   L'apertura - briciole, titolo, testo di presentazione - riusa .articolo:
   da li' arrivano il Source Serif sulla prosa e il tetto di 600px centrato su
   ogni figlio diretto, che e' la misura di lettura approvata al giro 30. Le
   cinque sezioni stanno FUORI da quel blocco e non dentro, perche' ritratti,
   colonne di nomi e riquadri vogliono i 900px pieni della colonna: e' lo
   stesso criterio con cui .art-figura e .art-banner si tolgono il tetto
   nella pagina notizia, ottenuto pero' senza un'eccezione da scrivere.
   Tre componenti nuovi, e nessuno introduce un linguaggio che non ci fosse:
   le persone, gli elenchi di nomi, i riquadri degli interventi d'autore.
   ========================================= */

.chi-sezione {
    margin-bottom: 50px;
}

/* La riga che spiega di che elenco si tratta, sotto l'intestazione di sezione.
   Stesso corpo e stesso grigio dei meta: e' una didascalia, non un testo. */
.chi-nota {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 18px;
}

/* --- LE PERSONE (redazione e staff tecnico) ---
   Ritratto tondo, nome, ruolo. Il tondo non e' una decisione nuova: e' il
   ritratto dell'autore in coda alla pagina notizia (.art-autore-foto), qui
   piu' grande e in griglia.
   auto-fit e non un numero di colonne: la colonna utile vale 900px sul
   desktop ma 335 a 375, e sei ritratti da 120 si dispongono da soli - sei in
   riga, poi quattro, poi due. */
/* auto-fill e NON auto-fit, ed e' tutta la differenza quando le persone sono
   poche. auto-fit fa collassare le colonne rimaste vuote e allarga quelle
   occupate fino a riempire la riga: una sezione da due veniva con le celle da
   440px invece dei 164 delle altre, e con il testo centrato dentro quelle celle
   le due schede sembravano messe in mezzo alla pagina. auto-fill le colonne
   vuote le tiene, quindi le due stanno nelle prime due, larghe come tutte.
   Sulle liste piene - 5, 15 - non cambia niente: misurate prima e dopo, 164 in
   entrambi i casi. */
.chi-persone {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 30px 20px;
    list-style: none;
    text-align: center;
}

/* Le quattro foto vere arrivano dal sito in tre formati diversi - 1200x1200,
   1326x1326, 853x853 e una 2000x2287 che quadrata non e'. object-fit: cover
   dentro un riquadro quadrato le porta tutte allo stesso tondo: nessuna si
   deforma, quella verticale si accorcia sopra e sotto. */
.chi-ritratto {
    display: block;
    width: 120px;
    height: 120px;
    margin: 0 auto 12px;
    border-radius: 50%;
    object-fit: cover;
}

/* Chi la foto non ce l'ha prende le iniziali, non un'immagine presa fuori.
   Il fondo e' il #f0f0f0 gia' in casa - il riquadro dell'autore e quello
   della newsletter - e le lettere sono in Bodoni smorzato: si legge come un
   posto in attesa della fotografia, non come un errore.
   display: flex arriva dopo il display: block di sopra e lo batte per ordine
   di scrittura, a parita' di specificita'. */
.chi-ritratto-vuoto {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    font-family: var(--font-heading);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

.chi-persona-nome {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 4px;
}

/* Il ruolo e' cromatura, quindi Inter: stesso trattamento dei .card-meta. */
.chi-persona-ruolo {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* IL RECAPITO DI CHI NE HA UNO, come link corto e non come indirizzo in chiaro.
   La ragione e' di spazio, non di gusto: .chi-persone e' una griglia
   minmax(140px, 1fr), quindi nella colonna del contenuto le celle stanno intorno
   ai 150px, e "federico.giannini@finestresullarte.info" a questo corpo ne chiede
   circa 250. In chiaro sbordava o si spezzava in tre pezzi sotto il nome.
   L'indirizzo intero resta nell'href: si vede passandoci sopra e si copia col
   tasto destro, e chi usa uno screen reader lo sente dall'aria-label, che dice
   anche a chi si sta scrivendo - tre link con la stessa parola "Scrivi"
   nell'elenco dei link non direbbero niente.
   Niente text-transform: un indirizzo in maiuscolo si legge male, ed e' la
   ragione per cui questo non e' un secondo .chi-persona-ruolo. */
.chi-persona-mail {
    margin-top: 6px;
}

.chi-persona-mail a {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--accent-testo);
    white-space: nowrap;
}

.chi-persona-mail a:hover {
    text-decoration: underline;
}

/* --- GLI ELENCHI DI NOMI (collaboratori, hanno scritto) ---
   columns e non una griglia: le colonne di testo si riempiono da sole e si
   riequilibrano, e il numero lo decide la larghezza disponibile invece di una
   media query. Con column-width a 210px la colonna da 900 ne fa quattro, e a
   375 ne fa una sola senza che nessuno glielo dica.
   break-inside sui nomi lunghi, che a capo fra una colonna e l'altra si
   spezzerebbero in due. */
.chi-nomi {
    columns: 210px;
    column-gap: 40px;
    list-style: none;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.7;
}

.chi-nomi li {
    break-inside: avoid;
}

/* Le 283 firme sono un indice, non una lista da leggere: colonne piu' strette
   (cinque sul desktop, due a 375), corpo minore e il grigio dei meta. La
   differenza di corpo con i collaboratori qui sopra e' quello che dice chi
   scrive adesso e chi ha scritto una volta. */
.chi-nomi-fitti {
    columns: 140px;
    column-gap: 28px;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* --- GLI INTERVENTI D'AUTORE ---
   Sette nomi, e non devono leggersi come le due liste qui sopra. Il
   trattamento e' quello del riquadro newsletter della pagina notizia
   (.art-newsletter): fondo #f0f0f0 e filetto rosso spesso in cima. Non e' un
   linguaggio nuovo, e' quello che il foglio usa gia' quando un blocco deve
   staccarsi dal flusso.
   Il nome sta in Bodoni a 1.45rem, il corpo dei titoli di notizia media: e'
   il nome la notizia, qui, non il pezzo che ha scritto. La qualifica sotto in
   Inter piccolo, come tutti i meta. */
.chi-autori-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.chi-autore {
    padding: 20px;
    background: #f0f0f0;
    border-top: 3px solid var(--accent);
}

.chi-autore-nome {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 8px;
}

.chi-autore-qualifica {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

/* --- LA VISTA STRETTA --- */
@media (max-width: 992px) {

    /* Sotto i 992 lo stacco fra i blocchi lo da' il gap da 30px della sequenza.
       I margini propri vanno a zero o si sommerebbero: 50+30 sotto le sezioni e
       60+30 sotto l'apertura, che .articolo si porta dietro dalla pagina
       notizia. */
    .chi-sezione,
    .chi-intro {
        margin-bottom: 0;
    }

    .chi-ritratto {
        width: 96px;
        height: 96px;
    }

    .chi-ritratto-vuoto {
        font-size: 1.4rem;
    }

    .chi-nomi {
        font-size: 0.9rem;
        line-height: 1.6;
    }
}

/* --- LA SEQUENZA MOBILE DI QUESTA PAGINA ---
   Il meccanismo e' .sequenza-mobile del giro 32 e non si tocca: display:
   contents su .main-column e .sidebar, i 728x90 e i quadrati 250x250
   nascosti, le strisce 320x100 accese. Qui ci sono i posti in fila.
   Il margine sotto le sezioni va a zero piu' sopra perche' fra un elemento e
   l'altro ci pensa il gap da 30px della griglia: sommati farebbero 80.
   DIVERSO DALLE ALTRE PAGINE, ed e' una scelta del committente: qui la
   sidebar NON si intercala al contenuto, va tutta in fondo. Sulla home e
   sulla categoria i riquadri stanno fra una sezione e l'altra perche' li' il
   contenuto e' un flusso di notizie e i widget sono altre notizie; questa e'
   una pagina di servizio, e Quaderni o Calendario in mezzo alla redazione
   sarebbero un'interruzione. Il prezzo, da tenere presente, e' che sotto i
   992px la sidebar comincia dopo l'indice delle 283 firme, cioe' molto in
   basso. */
@media (max-width: 992px) {

    .pagina-chi-siamo .sequenza-mobile .ad-mobile[data-posto="1"] {
        order: 10;
    }

    .pagina-chi-siamo .sequenza-mobile .chi-intro {
        order: 20;
    }

    .pagina-chi-siamo .sequenza-mobile .chi-redazione {
        order: 30;
    }

    .pagina-chi-siamo .sequenza-mobile .ad-mobile[data-posto="2"] {
        order: 60;
    }

    /* Il 70 era di .chi-staff, la sezione "Staff tecnico", che non esiste piu':
       quello che faceva lo fa "Grafica, media e tecnologia". Il buco resta
       vuoto e non si rinumera niente - e' esattamente a questo che servono i
       numeri di dieci in dieci. */

    .pagina-chi-siamo .sequenza-mobile .ad-mobile[data-posto="3"] {
        order: 80;
    }

    .pagina-chi-siamo .sequenza-mobile .chi-cartaceo {
        order: 90;
    }

    .pagina-chi-siamo .sequenza-mobile .ad-mobile[data-posto="4"] {
        order: 100;
    }

    .pagina-chi-siamo .sequenza-mobile .chi-autori {
        order: 110;
    }

    .pagina-chi-siamo .sequenza-mobile .ad-mobile[data-posto="5"] {
        order: 120;
    }

    /* L'indice delle firme dell'online: e' il blocco piu' lungo e il meno
       urgente da leggere, quindi sta in fondo al contenuto. */
    .pagina-chi-siamo .sequenza-mobile .chi-firme {
        order: 130;
    }

    /* La fila dei marchi e il colophon chiudono, nell'ordine in cui stanno nel
       markup. Servono una regola ciascuno e non si possono lasciare scoperti:
       qui dentro .main-column e' display:contents, quindi ogni sezione e' un
       elemento della griglia per conto suo, e un elemento senza order ne prende
       uno di valore zero - cioe' finirebbe PRIMA di tutto quello che sta qui
       sopra, in cima alla pagina. */
    .pagina-chi-siamo .sequenza-mobile .chi-partner {
        order: 140;
    }

    .pagina-chi-siamo .sequenza-mobile .nl-informativa {
        order: 150;
    }

    /* E qui sotto la sidebar, tutta in blocco. UN SOLO numero per tutti i
       riquadri invece di uno per ciascuno: a parita' di order la griglia usa
       l'ordine del documento, quindi si dispongono da soli come stanno nel
       markup - Quaderni, Newsletter, Ultime dal blog, Calendario, Cerca una
       mostra - che e' poi lo stesso ordine che hanno sul desktop. Se domani
       nella sidebar entra un riquadro nuovo, finisce al posto giusto senza
       che nessuno debba tornare qui.
       Gli otto quadrati pubblicitari sono dentro il selettore ma non si
       vedono: li nasconde la regola del giro 32, e le cinque strisce 320x100
       li hanno gia' sostituiti qui sopra.
       Tre classi contro due: batte i numeri che gli stessi riquadri prendono
       dalla sequenza della home, senza toccare quella. */
    .pagina-chi-siamo .sequenza-mobile .sidebar-widget {
        order: 160;
    }
}

/* =========================================
   GIRO 39 - ISCRIZIONE ALLA NEWSLETTER
   Quinta pagina della bozza: restyling-newsletter.html. Testata, sidebar e
   piede sono quelli delle altre quattro e qui sotto non compaiono.
   Testo e modulo stanno dentro .articolo, quindi prendono il tetto di 600px
   centrato della pagina notizia. Per un modulo non e' solo coerenza: oltre i
   600 i campi diventano righe lunghe da attraversare con gli occhi, e
   l'etichetta finisce lontana dal suo campo.
   Il modulo del sito vero e' fatto di <br><br> e di etichette a testo nudo.
   Qui non c'e' un solo <br>: lo spazio lo fa il gap, e ogni campo ha il suo
   <label for>. Non e' pignoleria - senza <label> il tocco sul nome del campo
   non porta il fuoco dentro la casella, e chi usa un lettore di schermo sente
   "casella di testo" e basta.
   ========================================= */

.nl-modulo {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 36px;
}

/* La riga che dichiara la convenzione, prima dei campi e non dopo: l'asterisco
   va spiegato prima di incontrarlo. */
.nl-obbligo {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

/* L'obbligo si vede, non si deduce da required. L'asterisco e' in accento e in
   grassetto: e' l'unico rosso del modulo, quindi non compete con niente.
   aria-hidden nel markup, perche' l'obbligo agli assistivi lo dice required. */
.nl-req {
    color: var(--accent-testo);
    font-weight: 700;
}

.nl-facoltativo {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-secondary);
}

.nl-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Etichetta sopra il campo e non accanto: a 375px accanto non ci sta, e due
   impaginazioni diverse per la stessa cosa sono una in piu' del necessario.
   Maiuscoletto Inter come tutte le altre etichette del foglio. */
.nl-label {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 1rem, cioe' 16px: sotto quella misura Safari su iOS ingrandisce la pagina
   quando il campo prende il fuoco, e poi non la rimpicciolisce piu'. E' il
   punto 8 del REPORT-31. I cinque campi gia' sotto misura nella bozza restano
   dove sono - non e' questo il giro - ma qui dentro non ne nasce un sesto.
   min-height 48px: sopra i 44 dell'area toccabile, con margine. */
.nl-input {
    width: 100%;
    min-height: 48px;
    padding: 12px;
    border: 1px solid var(--border-color);
    background: #ffffff;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--text-primary);
}

/* Le tendine native non ereditano il font dal foglio su tutti i motori. */
.nl-select {
    font-family: var(--font-sans);
}

/* Lo stesso fuoco della ricerca in testata, non uno nuovo. */
.nl-input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.nl-input::placeholder {
    color: #6b6b6b;
}

/* Citta' e provincia sono un dato solo spezzato in due caselle: incolonnate
   sembravano due domande. La provincia si ferma a 200px, che basta al nome
   piu' lungo dell'elenco, e la citta' si prende il resto. */
.nl-campo-luogo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    gap: 12px;
    align-items: start;
}

.nl-sottocampo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* --- I DUE CONSENSI ---
   Il quadratino nativo sta a 22px, che e' gia' il doppio del suo default, ma
   l'area toccabile NON e' il quadratino: e' tutta la riga. La cella della
   casella e' 44x44 e l'etichetta le sta accanto alta almeno altrettanto, ed e'
   cliccabile anche lei perche' ha il for. Chi tocca sbagliando di dieci pixel
   centra lo stesso.
   align-items: start e non center: su due righe di testo la casella deve
   restare in cima, accanto alla prima riga. */
.nl-consenso {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 4px;
    align-items: start;
}

.nl-consenso input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin: 11px;
    accent-color: var(--accent);
}

.nl-consenso label {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 0;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    line-height: 1.45;
    cursor: pointer;
}

.nl-consenso input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* --- LA TRAPPOLA ---
   Fuori dalla vista ma dentro il documento: un robot che compila ogni casella
   che trova ci cade, una persona non la vede. Non display: none, che alcuni
   robot sanno leggere per saltarla. */
.nl-esca {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- IL BOTTONE ---
   48px di altezza, sopra i 44 richiesti, e largo quanto basta al suo testo
   piu' 28px per lato. Non a tutta larghezza: qui sotto non c'e' altro da
   toccare, e un bottone da 600px per una parola sola sarebbe un cartello.
   Piatto e rosso pieno come "Carica altri articoli" della pagina categoria. */
.nl-invia {
    align-self: flex-start;
    min-height: 48px;
    padding: 0 28px;
    margin-top: 6px;
    background: var(--accent);
    color: #ffffff;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background var(--transition-fast);
}

.nl-invia:hover {
    background: var(--accent-hover);
}

/* --- L'INFORMATIVA ---
   Subordinata e si deve vedere che lo e': corpo minore, grigio dei meta, e un
   filetto sopra che la stacca dal modulo. Il titolo resta nero, se no non si
   trova piu'. */
.nl-informativa {
    border-top: 1px solid var(--border-color);
    padding-top: 22px;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.nl-informativa-titolo {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.nl-informativa a {
    color: var(--accent-testo);
    font-weight: 700;
    text-decoration: underline;
}

/* La striscia mobile fra il modulo e l'informativa sta DENTRO .articolo, quindi
   il tetto di 600px la prenderebbe. Se lo toglie, come fa .art-banner nella
   pagina notizia. */
.nl-corpo>.ad-banner {
    max-width: 100%;
    margin: 30px 0;
}

/* --- LA VISTA STRETTA --- */
@media (max-width: 600px) {

    /* Citta' e provincia si incolonnano: a 335px la provincia a 200 lascerebbe
       123px alla citta'. La tendina resta comoda perche' prende tutta la
       larghezza. */
    .nl-campo-luogo {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    /* A colonna piena il bottone vale la riga: e' l'ultima cosa da toccare e
       non c'e' niente accanto con cui condividerla. */
    .nl-invia {
        align-self: stretch;
        width: 100%;
    }
}

/* --- LA SEQUENZA MOBILE DI QUESTA PAGINA ---
   Come su Chi siamo, e per la stessa ragione: la sidebar va tutta in fondo e
   non si intercala. Qui ancora di piu' - il contenuto e' un modulo, e
   Calendario o Quaderni fra un campo e l'altro sarebbero un'interruzione nel
   mezzo di una cosa che si sta compilando.
   Tre posti soli, perche' la colonna e' corta: la striscia in cima, il corpo
   (che si porta dentro la seconda striscia), la terza in coda. I due 728x90
   escono da soli, li nasconde la regola del giro 32. */
@media (max-width: 992px) {

    .pagina-newsletter .sequenza-mobile .ad-mobile[data-posto="1"] {
        order: 10;
    }

    .pagina-newsletter .sequenza-mobile .nl-corpo {
        order: 20;
    }

    .pagina-newsletter .sequenza-mobile .ad-mobile[data-posto="3"] {
        order: 30;
    }

    /* Un numero solo per tutti i riquadri: a parita' di order la griglia usa
       l'ordine del documento, quindi si dispongono come stanno nel markup. */
    .pagina-newsletter .sequenza-mobile .sidebar-widget {
        order: 40;
    }

    /* .articolo porta 60px di margine sotto; qui lo stacco lo da' il gap da
       30px della sequenza, e sommati farebbero 90. */
    .pagina-newsletter .nl-corpo {
        margin-bottom: 0;
    }
}

/* =========================================
   GIRO 40 - PUBBLICITA'
   Sesta pagina della bozza: restyling-pubblicita.html. Testata, sidebar e
   piede sono quelli delle altre cinque e qui sotto non compaiono.
   Il testo di presentazione sta dentro .articolo e prende il tetto di 600px;
   numeri, rubriche e contatti stanno fuori e usano i 900px della colonna.
   TRE TRATTAMENTI DIVERSI, E NESSUNO E' NUOVO. I numeri sono tipografia e
   basta - cifre in Bodoni grande su filetti sottili, niente fondi; le
   rubriche sono tre schede con un bordo da 1px; i contatti sono l'UNICO
   riquadro pieno della pagina, col fondo #f0f0f0 e il filetto rosso spesso
   che il foglio usa gia' per il riquadro newsletter e per gli interventi
   d'autore. Se i numeri fossero stati riquadri pieni come i contatti, la
   pagina sarebbe diventata una fila di rettangoli grigi e la chiamata
   all'azione avrebbe perso il suo peso, che e' il contrario di quel che
   serve a una pagina che vende spazi.
   ========================================= */

/* I due titoli di sezione riusano .group-header + .group-title, come il
   titolo di categoria: da li' arrivano il filetto rosso e il maiuscolo.
   Cambia solo il corpo, perche' qui sono i due capitoli della pagina. */
.pub-sezione-titolo {
    font-size: 1.3rem;
}

/* --- IL NUMERO DI TESTA ---
   Sta sopra e fuori dai gruppi. Bodoni al corpo dei titoli di apertura: e' la
   faccia che il sito usa quando una cosa e' LA cosa, e qui il dato e' il
   titolo della pagina piu' del titolo stesso.
   nowrap sulle cifre, qui e nella griglia: un 4.300.000 spezzato dopo il primo
   punto e' un numero diverso. Il conto perche' non serva mai: in Bodoni una
   cifra sta in circa 0,55em e un punto in 0,25, quindi 4.300.000 occupa ~4,35em
   - a 3,25rem fanno 226px dentro i 335 di un telefono da 375. */
.pub-testa {
    text-align: center;
    padding: 30px 20px 34px;
    border-bottom: 2px solid var(--text-primary);
    margin-bottom: 34px;
}

.pub-testa-cifra {
    font-family: var(--font-heading);
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: lining-nums tabular-nums;
    margin-bottom: 10px;
}

.pub-testa-voce {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

/* --- LE TRE FAMIGLIE ---
   L'etichetta del gruppo e' volutamente piu' debole del titolo di sezione:
   grigia, piccola, col filetto neutro invece di quello rosso. Serve a dire
   "da qui cambia tipo di dato", non a competere coi numeri che ha sotto. */
.pub-famiglia {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}

/* auto-fit e non un numero fisso: i gruppi hanno tre dati o quattro, e con le
   tracce vuote che collassano ogni gruppo si divide la riga in parti uguali
   senza che nessuno gli dica quante sono. 140px di minimo perche' a 375 la
   colonna utile e' 335 e con 190 sarebbe scesa a una colonna sola, cioe' undici
   numeri incolonnati. */
.pub-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 24px;
    margin-bottom: 36px;
}

/* Il filetto sta a sinistra del dato e non sotto: incolonna la lettura e
   tiene insieme cifra e descrizione, che sono una cosa sola. */
.pub-dato {
    padding-left: 16px;
    border-left: 2px solid var(--border-color);
}

.pub-cifra {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.05;
    white-space: nowrap;
    font-variant-numeric: lining-nums tabular-nums;
    margin-bottom: 6px;
}

.pub-voce {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

/* --- LE RUBRICHE ---
   Tre schede uguali, e uguali devono restare: bordo sottile e nessun fondo,
   cosi' non si confondono coi contatti. I marchi arrivano dai file veri del
   sito - lo stesso SVG dei Quaderni che sta nella sidebar, e i due delle
   schede promozionali in fondo alla home.
   L'altezza fissa del marchio, non la larghezza: i tre logotipi hanno
   proporzioni molto diverse (3,8:1, 6,1:1, 3:1) e a pari larghezza il piu'
   lungo sarebbe sembrato tre volte piu' piccolo. Dentro una banda da 48px si
   leggono come tre marchi dello stesso peso. */
.pub-rubriche-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.pub-rubrica {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 20px;
    border: 1px solid var(--border-color);
}

.pub-rubrica-marchio {
    display: flex;
    align-items: center;
    height: 48px;
    margin-bottom: 16px;
}

.pub-rubrica-marchio img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}

/* Il nome scritto c'e' lo stesso, sotto il marchio: i logotipi non si
   selezionano, non si cercano e su una connessione lenta non arrivano. */
.pub-rubrica-nome {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 8px;
}

.pub-rubrica-testo {
    font-family: var(--font-section);
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

/* Il link in fondo si incolla al bordo inferiore della scheda anche quando le
   tre descrizioni sono di lunghezza diversa, che e' il caso. */
.pub-rubrica .more-link {
    margin-top: auto;
}

/* --- I CONTATTI ---
   Lo scopo della pagina, e l'unico riquadro pieno: fondo e filetto rosso in
   cima sono il trattamento che il foglio riserva ai blocchi che devono
   staccarsi dal flusso. I due recapiti sono grandi e toccabili - 48px di
   altezza, sopra i 44 - perche' sono l'azione, non una nota a pie' di pagina. */
.pub-contatti {
    padding: 30px 24px;
    background: #f0f0f0;
    border-top: 3px solid var(--accent);
    margin-bottom: 40px;
    margin-top: 15px;
}

.pub-contatti-titolo {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 10px;
}

.pub-contatti-claim {
    font-family: var(--font-section);
    font-size: 1.05rem;
    line-height: 1.55;
    margin-bottom: 20px;
}

.pub-contatti-recapiti {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.pub-recapito {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 22px;
    background: var(--accent);
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    transition: background var(--transition-fast);
}

.pub-recapito:hover {
    background: var(--accent-hover);
}

.pub-contatti-nota {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* --- LA VISTA STRETTA --- */
@media (max-width: 992px) {

    .pub-numeri,
    .pub-rubriche {
        margin-bottom: 0;
    }
}

@media (max-width: 600px) {

    /* Le cifre scendono di corpo, non di gerarchia: a 375px la colonna utile e'
       335 e le celle della griglia ne valgono ~160. 4.300.000 a 3,25rem occupa
       226px, 2.200.000 a 1,75rem ne occupa 122: nessuno dei due arriva al
       bordo, quindi il nowrap non deve mai intervenire. */
    .pub-testa-cifra {
        font-size: 3.25rem;
    }

    .pub-testa {
        padding: 22px 0 26px;
    }

    .pub-cifra {
        font-size: 1.75rem;
    }

    .pub-griglia {
        gap: 20px 16px;
    }

    .pub-contatti {
        padding: 24px 18px;
    }

    /* I due recapiti a tutta riga: l'indirizzo di posta e' lungo e affiancato
       al telefono andrebbe a capo dentro il bottone. */
    .pub-recapito {
        width: 100%;
        justify-content: center;
        padding: 0 14px;
        font-size: 0.95rem;
    }
}

/* --- LA SEQUENZA MOBILE DI QUESTA PAGINA ---
   Come su Chi siamo e sulla newsletter: la sidebar va tutta in fondo e non si
   intercala. Questa e' la pagina che vende gli spazi, e i riquadri della
   sidebar in mezzo ai numeri di diffusione avrebbero confuso la vetrina con
   la merce.
   Dal giro 41 vale anche per la pubblicita' vera: le due strisce che stavano
   fra i numeri e le rubriche e fra le rubriche e i contatti sono state tolte.
   Dalle briciole alla fine dei contatti non c'e' piu' nessuna interruzione, e
   i posti scendono da quattro a due - uno in cima, uno in coda. */
@media (max-width: 992px) {

    .pagina-pubblicita .sequenza-mobile .ad-mobile[data-posto="1"] {
        order: 10;
    }

    .pagina-pubblicita .sequenza-mobile .pub-intro {
        order: 20;
    }

    .pagina-pubblicita .sequenza-mobile .pub-numeri {
        order: 30;
    }

    .pagina-pubblicita .sequenza-mobile .pub-rubriche {
        order: 40;
    }

    /* 25 e non 50: la scheda dei recapiti - "Contattaci" - e' passata sotto
       l'introduzione, cioe' fra il 20 e il 30. Nessun altro numero si muove,
       ed e' il caso per cui gli order vanno di dieci in dieci. */
    .pagina-pubblicita .sequenza-mobile .pub-contatti {
        order: 25;
    }

    /* Il 27 era di .pub-marketing, "Marketing e Pubblicita", passata nel chi
       siamo con le altre persone. Il buco resta vuoto. */

    .pagina-pubblicita .sequenza-mobile .ad-mobile[data-posto="2"] {
        order: 60;
    }

    /* Un numero solo per tutti i riquadri: a parita' di order la griglia usa
       l'ordine del documento. */
    .pagina-pubblicita .sequenza-mobile .sidebar-widget {
        order: 70;
    }

    /* .articolo porta 60px di margine sotto, il riquadro contatti 40: qui lo
       stacco lo da' il gap da 30px della sequenza. */
    .pagina-pubblicita .pub-intro,
    .pagina-pubblicita .pub-contatti {
        margin-bottom: 0;
    }
}

/* =========================================
   GIRO 41 - INFO E CONTATTI
   Settima pagina della bozza: restyling-contatti.html. Testata, sidebar e
   piede sono quelli delle altre sei e qui sotto non compaiono.
   Tutta la pagina sta dentro .articolo e prende il tetto di 600px: non c'e'
   niente che chieda i 900, sette recapiti e un colophon.
   Il colophon riusa .nl-informativa, il blocco legale della pagina
   newsletter. Il prefisso nl- adesso sta su due pagine: e' un debito di nome,
   non di codice, e si salda con una rinomina quando si tocca anche quella
   pagina. Ricopiarne i valori qui sarebbe stato peggio - due blocchi identici
   che da domani divergono.
   ========================================= */

/* --- I SETTE RECAPITI ---
   Griglia su un <dl>: le ragioni incolonnate a sinistra e i recapiti a
   destra, cosi' si scorre una colonna sola finche' non si trova la propria e
   l'indirizzo e' li' accanto. 260px alla ragione perche' la piu' lunga -
   "Ordini, abbonamenti alla rivista e store online" - ci sta su due righe
   invece che su tre.
   Il filetto e' su tutte e due le celle e non su una: cosi' la riga di
   separazione attraversa la colonna intera e non si ferma a meta'. */
.con-recapiti {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    column-gap: 24px;
    margin-bottom: 40px;
}

.con-ragione {
    grid-column: 1;
    padding: 14px 0;
    border-top: 1px solid var(--border-color);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.con-valore {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    padding: 7px 0;
    border-top: 1px solid var(--border-color);
}

/* Ogni recapito e' un bersaglio da 44px di altezza, non una riga di testo con
   un link dentro: su questa pagina il tocco sull'indirizzo E' l'azione.
   inline-flex e non block, cosi' l'area cliccabile finisce dove finisce il
   testo e non si estende per tutta la colonna vuota.
   break-word e' una rete: il conto dice che non serve - l'indirizzo piu' lungo,
   comunicati@finestresullarte.info, sono 32 caratteri che in Inter a 1rem fanno
   circa 266px, dentro i 335 di un telefono da 375 - ma se un giorno il font
   rendesse piu' largo, meglio un a capo che una barra di scorrimento. */
.con-recapito {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 44px;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent-testo);
    overflow-wrap: break-word;
}

.con-recapito:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.con-recapito:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* --- IL COLOPHON ---
   Dentro .nl-informativa, che gli da' il filetto, il corpo e il grigio. Qui
   c'e' solo la disposizione delle quattro coppie: etichetta stretta a
   sinistra, valore a destra, senza filetti - sono quattro righe, non un
   elenco da scorrere, e i filetti le avrebbero fatte pesare quanto i
   recapiti. */
.con-societa-dati {
    display: grid;
    grid-template-columns: minmax(0, 130px) minmax(0, 1fr);
    gap: 8px 20px;
}

.con-societa-dati dt {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.72rem;
    padding-top: 2px;
}

.con-societa-dati a {
    color: var(--accent-testo);
    font-weight: 700;
    text-decoration: underline;
}

/* Il segnaposto si deve vedere che e' un segnaposto, anche a colpo d'occhio e
   anche da parte di chi non ha letto il report. Niente colore nuovo: e' il
   grigio dei riquadri con sopra il testo smorzato. */
.con-segnaposto {
    display: inline-block;
    padding: 1px 8px;
    background: #f0f0f0;
    border: 1px dashed var(--border-color);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- LA VISTA STRETTA --- */
@media (max-width: 600px) {

    /* Ragione e recapito si incolonnano. Il filetto resta alla sola ragione,
       che apre la voce: sul valore diventerebbe una riga in mezzo alla
       coppia, cioe' un separatore dove non c'e' niente da separare. */
    .con-recapiti {
        grid-template-columns: minmax(0, 1fr);
    }

    .con-ragione,
    .con-valore {
        grid-column: 1;
    }

    .con-ragione {
        padding: 14px 0 0;
    }

    .con-valore {
        padding: 0 0 10px;
        border-top: none;
    }

    .con-societa-dati {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .con-societa-dati dd {
        margin-bottom: 12px;
    }
}

/* --- LA SEQUENZA MOBILE DI QUESTA PAGINA ---
   Tre posti: la striscia in cima, il corpo, la striscia in coda. Fra le
   briciole e la fine del colophon non c'e' pubblicita', come sulla pagina
   Pubblicita' dal giro 41: ci si arriva per trovare un indirizzo e si esce, e
   un banner in mezzo ai recapiti sarebbe stato un ostacolo su una strada
   corta. La sidebar va tutta in fondo, come sulle altre pagine di servizio. */
@media (max-width: 992px) {

    .pagina-contatti .sequenza-mobile .ad-mobile[data-posto="1"] {
        order: 10;
    }

    .pagina-contatti .sequenza-mobile .con-corpo {
        order: 20;
    }

    .pagina-contatti .sequenza-mobile .ad-mobile[data-posto="2"] {
        order: 30;
    }

    /* Un numero solo per tutti i riquadri: a parita' di order la griglia usa
       l'ordine del documento. */
    .pagina-contatti .sequenza-mobile .sidebar-widget {
        order: 40;
    }

    /* .articolo porta 60px di margine sotto; qui lo stacco lo da' il gap da
       30px della sequenza. */
    .pagina-contatti .con-corpo {
        margin-bottom: 0;
    }
}

/* --- COLLABORAZIONI: la stessa sequenza dei contatti ---
   E' una pagina di prosa come quella, con le stesse due strisce: striscia,
   testo, striscia, sidebar. Non riusa .pagina-contatti perche' quella classe
   nomina una pagina, e due pagine diverse sotto lo stesso nome sono il tipo di
   risparmio che si paga la prima volta che una delle due cambia.
   Questa pagina esiste solo in italiano - l'htaccess non ha la regola di
   rewrite per le sue versioni tradotte - ma la sequenza non c'entra con la
   lingua, quindi vale comunque. */
@media (max-width: 992px) {

    .pagina-collaborazioni .sequenza-mobile .ad-mobile[data-posto="1"] {
        order: 10;
    }

    .pagina-collaborazioni .sequenza-mobile .col-corpo {
        order: 20;
    }

    .pagina-collaborazioni .sequenza-mobile .ad-mobile[data-posto="2"] {
        order: 30;
    }

    .pagina-collaborazioni .sequenza-mobile .sidebar-widget {
        order: 40;
    }

    .pagina-collaborazioni .col-corpo {
        margin-bottom: 0;
    }
}

/* =========================================
   PAYWALL

   .paywall nel foglio vecchio NON era uno stile: era
   `google-auto-ads: ignore`, cioe' un marcatore per far saltare il blocco agli
   annunci automatici di Google. Il paywall visivo e' tutto qui sotto, e nella
   bozza non c'era affatto - il commento del riferimento diceva "la classe
   paywall e' riportata e NON e' disegnata: quel comportamento arriva in
   produzione". Questo e' quel comportamento, portato dal foglio di produzione
   (template/css/style.css) e riscritto sui token.

   Lo stesso markup lo stampano tre parti: popup-login.php per il paywall degli
   articoli bloccati, popup-login-cartaceo.php per gli abbonati al cartaceo,
   popup-warning.php per l'avviso al terzo articolo del mese. Per questo lo stile
   sta sulle classi condivise e non su un markup nuovo: una volta sola, e vale
   per tutti e tre. Gli id #login-popup e #form-popup e la classe
   .open-popup-link sono agganci di magnificPopup e non vanno rinominati.
   ========================================= */

/* IL TAGLIO DEL TESTO. html_cut() tronca l'articolo a 1600 caratteri, e senza un
   segnale il pezzo sembra finito a meta' frase. La sfumatura dice che sotto
   continua.
   In produzione l'effetto era un box-shadow verso l'alto su #login-popup - una
   nuvola grigia sopra il blocco dell'offerta - che sfumava il testo per
   sovrapposizione. Qui sta sul testo, che e' l'elemento che viene tagliato:
   l'ombra sul blocco sotto funzionava solo finche' quel blocco restava
   attaccato, e bastava un margine per scoprire il trucco. */
.articolo .anteprima {
    position: relative;
    /* Giustificato come in produzione: su un testo troncato aiuta a non far
       notare l'ultima riga spezzata. */
    text-align: justify;
}

.articolo .anteprima::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 140px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--bg-main) 85%);
    /* Il gradiente non deve intercettare la selezione del testo che copre. */
    pointer-events: none;
}

#login-popup {
    margin-bottom: 40px;
}

/* La vetrina: fascia rossa in alto con l'offerta, piede bianco con le due CTA.
   I selettori sono accorciati rispetto a produzione, dove erano catene di cinque
   livelli tipo "#rest2018 .dyn-content.top section .bottom_xs p.small": qui non
   c'e' nessuna regola concorrente da scavalcare, quindi la specificita' in piu'
   non serviva a niente. */
.paywall_Standard #content_vetrina {
    background: #ffffff;
    text-align: center;
}

.paywall_Standard .dyn-content.top {
    position: relative;
    background: var(--accent);
    color: #ffffff;
}

.paywall_Standard .bottom_xs,
.paywall_Standard .content_background,
.paywall_Standard .content_button {
    padding: 40px;
}

/* Le due misure dell'offerta restano quelle di produzione, convertite in rem:
   42px e 72px col numero a 100px. Sono volutamente enormi - e' una vetrina, non
   un paragrafo - e sono le misure che oggi funzionano. Se vanno abbassate sono
   tre numeri, qui. */
.paywall_Standard .bottom_xs p.small {
    font-family: var(--font-sans);
    font-size: 2.6rem;
    line-height: 1.3;
}

.paywall_Standard .bottom_xs p.small strong {
    font-weight: 700;
}

.paywall_Standard .bottom_xs p.supersmall {
    font-size: 0.95rem;
    line-height: 1.6;
}

.paywall_Standard .bottom_xs p.big {
    font-family: var(--font-heading);
    font-size: 4.5rem;
    line-height: 1;
    /* Non #d2d2d2 fisso: un bianco trasparente tiene il contrasto giusto
       qualunque rosso abbia --accent. */
    color: rgba(255, 255, 255, 0.78);
}

.paywall_Standard .bottom_xs p.big span {
    font-size: 6.25rem;
    color: #ffffff;
}

.paywall_Standard .content_background h4 {
    font-family: var(--font-section);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.5;
}

/* Il piede bianco, dove stanno i due inviti. */
.paywall_Standard .inner_footer {
    width: 100%;
    margin: 0 auto;
    background-color: #ffffff;
    color: var(--text-primary);
}

.paywall_Standard .content_button {
    text-align: center;
}

.paywall_Standard .boxLeft {
    width: 100%;
}

/* Il bottone dell'abbonamento. Lo <a> porta uno style inline con font-size: 30px
   scritto nel markup di tutte e tre le parti: la misura qui sotto non lo batte,
   e togliere quell'inline vorrebbe dire toccare tre file per un pixel. Resta
   com'e'. */
.cta-placeholder {
    display: inline-block;
    background-color: var(--accent);
    color: #ffffff !important;
    font-family: var(--font-sans);
    font-weight: 800;
    text-transform: uppercase;
    padding: 15px 28px;
    border-radius: 10px;
    box-shadow: 1px 1px 14px -7px rgba(0, 0, 0, 0.8);
    margin-bottom: 2px;
}

.cta-placeholder:hover {
    background-color: var(--superficie-forte);
    color: #ffffff !important;
}

.oppure {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--accent-testo);
    margin-top: 20px;
    margin-bottom: 20px;
}

/* "Sei gia' abbonato, fai il login": e' l'alternativa, quindi non e' un bottone.
   Il <span> dentro porta la riga di spiegazione. */
.pwl_login a {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--accent-testo) !important;
}

.pwl_login a span {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    text-transform: none;
}

.pwl_login a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Le due finestre modali di magnificPopup: #form-popup col form di accesso
   (.red-popup) e l'avviso del terzo articolo (.white-popup). Il resto del
   vestito - velo, bottone di chiusura - lo porta magnific-popup.css, che la
   pagina carica ancora. */
.red-popup,
.white-popup {
    position: relative;
    width: auto;
    max-width: 700px;
    margin: 20px auto;
    box-shadow: -1px -1px 25px 5px rgba(148, 148, 148, 0.71);
}

.red-popup {
    background: var(--accent);
    color: #ffffff;
}

.white-popup {
    background: #ffffff;
    padding: 30px;
}

.red-popup .mfp-close {
    color: #ffffff !important;
}

/* Lo stacco di #login-form stava qui: e' andato nel blocco "IL FORM DI
   ACCESSO", in fondo al foglio, insieme al resto del vestito della scheda. Una
   scheda dichiarata in due punti distanti e' il modo di scoprire il secondo
   quando il primo non basta. */

/* =========================================
   TESTATA CHE SI CONTRAE SCENDENDO

   Scendendo resta appiccicata la sola barra rossa con la navigazione - da 198px a
   93 - e salendo torna tutto. Il JS mette .testata-ridotta sul <body> guardando
   la DIREZIONE dello scroll, non la quota raggiunta: cosi' la testata piena e'
   sempre a un gesto di distanza, e non c'e' bisogno di spostare logo, ricerca,
   account e abbonati nella barra rossa - che e' alta 40px e tiene gia' lente,
   voci di servizio, lingua, icone e quattro social.

   SI TRASLA, NON SI CHIUDE, e questa e' la parte che conta. .main-header e'
   sticky, quindi sta nel flusso e la sua altezza fa layout: chiudendo la riga del
   logo con max-height il documento si accorcia di 105px e tutto il contenuto
   sotto sobbalza su mentre si scorre. Peggio, vicino al fondo pagina il browser
   riaggancia lo scroll, l'evento che ne nasce ha delta negativo, la testata
   riapre, il documento ricresce e si richiude: un anello, che si vede come
   sfarfallio. Con transform la scatola in flusso non cambia mai, quindi niente
   sobbalzo e niente anello.
   La riga del logo finisce dietro la barra rossa, che per questo sale di un
   gradino di z-index: senza, sarebbe l'header a passarle sopra, perche' a pari
   z-index vince l'ultimo nel documento.

   La soglia e' --skin-reveal, e il JS la legge dal foglio. Non e' una
   coincidenza: --skin-reveal e' quanto skin si vede fra la testata e il
   contenuto, quindi scesi di quel tanto la finestra sullo skin si e' appena
   chiusa, ed e' il momento in cui la riga del logo non serve piu'.

   SOLO SOPRA I 1024px. Sotto, la riga del logo tiene l'hamburger e la lente, cioe'
   gli unici accessi a menu e ricerca: nasconderla lascerebbe il lettore senza
   navigazione.
   ========================================= */
@media (min-width: 1024px) {

    .main-header {
        transition: transform 0.28s ease;
    }

    body.testata-ridotta .main-header {
        transform: translateY(calc(-1 * var(--riga-logo-h)));
    }

    /* IL LOGO BIANCO NELLA BARRA ROSSA. Compare quando la riga del logo grande e'
       scorsa via, cosi' il marchio resta in pagina a qualunque scorrimento - e'
       lo stesso gesto della testata compatta di produzione.
       Entra con un filo di ritardo sull'uscita della riga grande: per un istante
       non ci sono due loghi, e lo scambio si legge come un passaggio e non come
       una sovrapposizione. */
    body.testata-ridotta .top-bar-logo {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.18s ease 0.1s,
                    visibility 0s linear 0s;
    }

    /* Niente altro si muove: le voci di servizio a sinistra e il gruppo
       lingua/icone a destra restano dove sono, e lo space-between di
       .top-bar-inner lascia libero il centro, dove il logo si posiziona. */

    /* La barra rossa passa sopra la riga del logo che le scorre dietro. */
    body.testata-ridotta .top-bar {
        z-index: 101;
    }

    /* Finita la traslazione la riga diventa irraggiungibile: altrimenti logo,
       ricerca, account e abbonati resterebbero raggiungibili col Tab pur essendo
       nascosti dietro la barra, e il fuoco sparirebbe dalla vista.
       Il ritardo e' pari alla durata della transizione, cosi' la riga resta
       visibile mentre si muove e si spegne solo all'arrivo. visibility si
       interpola a scatto, quindi 0s di durata e tutto il tempo come ritardo. */
    .header-main-line {
        visibility: visible;
        transition: visibility 0s linear 0s;
    }

    body.testata-ridotta .header-main-line {
        visibility: hidden;
        transition: visibility 0s linear 0.28s;
    }

    /* LO SKIN SEGUE LA TESTATA. background-position e' ancorato a --header-h, e
       con la riga chiusa la testata ne occupa 93: senza questa regola fra 93 e 228
       si vedrebbe il background-color piatto nelle due bande laterali, perche'
       l'immagine comincia solo a 228. Stessa durata della traslazione, quindi
       skin e testata si muovono insieme. */
    body.has-skin {
        transition: background-position 0.28s ease;
    }

    body.has-skin.testata-ridotta {
        background-position: center var(--header-h-ridotta);
    }
}

/* Chi ha chiesto meno animazioni vede la testata cambiare di colpo: il
   comportamento resta, il movimento no. */
@media (prefers-reduced-motion: reduce) {
    .main-header,
    body.has-skin {
        transition: none;
    }
}

/* =========================================
   AREA ACCOUNT

   Il pannello dopo il login: account.php e i sei pezzi che include
   (template/parts/userinfo.php e template/app/*.php).

   SI VESTONO I NOMI CHE C'ERANO, non dei nomi nuovi. .custobtn compare in nove
   file dell'area, .app-box in sei, .testo-centro in sei, le tre .notifiche-* in
   tre: sono il vocabolario condiviso di tutta l'area, e vestirli qui significa
   che login, notifiche, articoli-salvati, miei-commenti, cancellami e registrati
   arrivano al proprio turno gia' mezzi vestiti. Rinominarli avrebbe voluto dire
   toccare quattordici file per ottenere lo stesso risultato. Il prefisso acc- lo
   portano solo le cose che esistono unicamente qui.

   PERCHE' SERVE. Il vestito di queste classi stava in app.css e account.css, che
   finivano nel sito solo dentro css-combinato.css: quel file lo montava
   deprecated/files/css.php, e da quando il guscio 2026 ha smesso di caricare lo
   stack vecchio non li serve piu' nessuno. Quindi oggi l'area e' senza stile.

   IL PANNELLO ERA SCURO, ora e' chiaro. Nel markup ci sono tre link con
   style="color: white" - uno su "Modifica i tuoi dati", due nell'avviso di
   sincronizzazione - che avevano senso sul #232323 di prima: adesso sono testo
   bianco su fondo bianco, cioe' invisibili. Gli inline vanno via dai PHP e i link
   tornano del rosso del sito.

   Tutto su token e non su colori scritti a mano, cosi' quando il modo scuro
   verra' ripreso bastera' ridichiarare :root - e' il TODO che sta in
   includes/head-mobile.php.
   ========================================= */

/* TUTTA LA COLONNA, e allineato a sinistra.
   Era 760px centrato, e non andava per due motivi che si vedevano solo a video:
   la briciola e l'<h1> li stampa il template FUORI da qui e restano larghi
   1240, quindi il titolo "Il mio Finestre sull'Arte" partiva 240px piu' a
   sinistra del pannello a cui si riferisce - due pagine sovrapposte. E la
   pagina era comunque troppo stretta.
   Il timore era che le righe di spunte diventassero illeggibili a tutta
   larghezza: provate a 1240 si leggono bene, perche' ogni riga ha il nome in
   grassetto sopra e la descrizione sotto, non una riga sola lunghissima. */
.acc-pannello {
    margin: 0 0 60px;
}

/* --- L'INTESTAZIONE: benvenuto, avatar, recapiti --- */

.acc-testata {
    margin-bottom: 30px;
}

.acc-benvenuto {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-family: var(--font-section);
    font-size: 1.6rem;
    line-height: 1.2;
    margin-bottom: 20px;
}

/* Gli anni di registrazione, che stampa badge_utente().
   PASTIGLIA E NON CERCHIO, e in grigio e non in rosso: un numero dentro un
   cerchio rosso e' la stessa forma del contatore dei non letti in testata
   (.notifiche_dcount, riga 644), e accanto al nome si leggeva come "due
   notifiche". Qui la parola la porta badge_utente(), e questo non deve
   somigliare a un conteggio. */
.badge_utente {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 3px;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

/* Era una griglia Bootstrap, .row + .col-2 + .col-9. Bootstrap non c'e' piu' nel
   guscio 2026, quindi quelle classi non facevano piu' niente: l'avatar e i dati
   si impilavano uno sull'altro a tutta larghezza. */
.acc-identita {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.acc-avatar {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    border-radius: 50%;
}

.acc-dati {
    min-width: 0;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.acc-dati small {
    font-size: 0.85rem;
}

.acc-modifica {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    color: var(--accent-testo);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 700;
}

.acc-modifica:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* --- I RIQUADRI --- */

/* Il contenitore di ogni sezione: notifiche, preferenze, newsletter, stato
   dell'abbonamento. Bordo e non ombra, come le schede del resto del foglio. */
.app-box {
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    padding: 22px;
    margin-bottom: 22px;
}

/* La variante del riquadro di coda, quello con "Elimina il mio account": senza
   bordo, perche' non e' una sezione ma un congedo. */
.app-box.chiaro {
    border: 0;
    padding: 10px 0;
    margin-top: 40px;
}

.app-box h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-section);
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 6px;
}

/* Il sottotitolo di ogni riquadro, che nel markup e' un <small> diretto. */
.app-box > small {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.app-box hr {
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: 18px 0;
}

/* Le icone dei titoli e delle voci, che nel markup erano dieci volte lo stesso
   style="width:20px;vertical-align:text-bottom". Dimensione unica: a occhio le
   quattro misure diverse di prima - 20, 25, 30, 35 - sembravano un errore.

   IL FILTRO NON E' UN VEZZO. Tutte e dieci le icone dell'area sono bianche:
   fill="white" o stroke="#FFFFFF", perche' il pannello era scuro. Su fondo
   chiaro sarebbero dieci quadrati vuoti. brightness(0) le porta al nero del
   testo qualunque sia il colore di partenza, e vale per tutte in una riga.

   Perche' non le gemelle scure: ce l'hanno solo in tre - notifiche.svg, rss.svg,
   star.svg - mentre settings-bianco.svg e i cinque svgrepo esistono solo in
   bianco. Disegnarle vorrebbe dire aggiungere file in Grafica/, che e' fuori da
   git: non salirebbero con il commit e andrebbero caricate a mano via FTP, cioe'
   un pezzo di questa pagina che si rompe se qualcuno si dimentica. */
.acc-icona {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    filter: brightness(0);
}

/* --- LE RIGHE CON LA SPUNTA --- */

/* Usate dalle notifiche, dalle preferenze e dalla newsletter. La casella sta in
   una colonna sua perche' l'etichetta va a capo su due righe e, allineata al
   testo, la spunta finirebbe in mezzo al paragrafo. */
.notifiche-categoria {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.notifiche-categoria:last-of-type {
    border-bottom: 0;
}

.notifiche-check {
    flex: 0 0 auto;
    padding-top: 2px;
}

/* 20px e non la misura nativa: la casella e' il bersaglio da toccare, e quella
   di sistema su telefono sta sotto i 44px raccomandati. L'area utile la allarga
   il padding della riga. */
.notifiche-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--accent);
    cursor: pointer;
}

.notifiche-nome {
    min-width: 0;
    font-family: var(--font-sans);
}

/* FIGLIO DIRETTO, non discendente. Con ".notifiche-nome span" la regola
   prendeva anche lo <span class="acc-beta"> annidato dentro l'etichetta del
   modo scuro, e display:block lo trasformava da pastiglia in un rettangolo nero
   lungo tutta la riga, a capo sotto il testo. Vinceva per specificita' - (0,1,1)
   contro lo (0,1,0) di .acc-beta - quindi non bastava dichiarare inline-block
   piu' avanti. */
.notifiche-nome > span {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.notifiche-nome small {
    display: block;
    margin-top: 3px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

/* --- I BOTTONI --- */

/* .custobtn e' il bottone di tutta l'area: nove file lo usano, compresi login e
   registrati. Stessi valori di .btn-subscribe-news, che e' il bottone che il
   foglio 2026 aveva gia': un secondo bottone con un suo aspetto sarebbe stato un
   dialetto in piu' da mantenere. */
.custobtn {
    display: inline-block;
    border: 0;
    background-color: var(--accent);
    color: #ffffff !important;
    padding: 11px 22px;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.custobtn:hover {
    background-color: var(--accent-hover);
    color: #ffffff !important;
}

.custobtn:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}

/* -rosso era la variante in evidenza quando il bottone base stava sul pannello
   scuro. Ora il bottone base e' gia' rosso, quindi la variante non aggiunge
   niente: resta dichiarata perche' il markup la nomina, e non vale cambiare sei
   pagine per togliere una parola. */
.custobtn-rosso {
    background-color: var(--accent);
}

/* Il bottone di congedo - oggi solo il Logout. Scuro e non rosso: il rosso qui
   dentro vuol dire "salva", e dare lo stesso colore all'uscita significa
   chiedere di distinguerle a memoria. */
.custobtn-scuro {
    background-color: var(--fondo-scuro);
}

.custobtn-scuro:hover {
    background-color: #000000;
}

/* --- LE SCORCIATOIE --- */

/* L'elenco "Le mie notifiche / I miei articoli salvati / I miei ordini / ...".
   Righe cliccabili per intero e non link in mezzo al testo: sono una
   navigazione, e il bersaglio deve essere la riga. */
.lista-funzioni-utente {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border-color);
}

.lista-funzioni-utente li {
    border-bottom: 1px solid var(--border-color);
}

.lista-funzioni-utente a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 4px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: background-color var(--transition-fast);
}

.lista-funzioni-utente a:hover {
    background: var(--bg-hover);
    color: var(--accent-testo);
}

/* --- LO STATO DELL'ABBONAMENTO --- */

.acc-periodo {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    margin-top: 12px;
}

.acc-periodo-dove {
    font-weight: 700;
}

/* L'avviso per chi ha l'account fuori sincrono. Era .alert.alert-warning, cioe'
   Bootstrap, cioe' da quando lo stack vecchio non si carica piu' un pezzo di
   testo senza riquadro in mezzo alla pagina. */
.acc-avviso {
    display: block;
    border-left: 3px solid var(--accent);
    background: var(--bg-hover);
    padding: 12px 14px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.acc-avviso a {
    color: var(--accent-testo);
    font-weight: 700;
    text-decoration: underline;
}

/* L'esito di un salvataggio della newsletter. Era un inline con il colore
   scritto dentro l'attributo style. */
.acc-messaggio {
    margin-top: 12px;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.acc-messaggio-ko {
    color: var(--accent-testo);
}

/* L'etichetta "Beta" accanto al modo scuro. */
.acc-beta {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--fondo-scuro);
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    vertical-align: middle;
}

.testo-centro {
    text-align: center;
}

/* Il dump di sessione, visibile solo con il debug acceso. */
#box_debug pre {
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-all;
}

@media (max-width: 600px) {

    .acc-benvenuto {
        font-size: 1.3rem;
    }

    .acc-identita {
        gap: 14px;
    }

    .acc-avatar {
        width: 64px;
        height: 64px;
    }

    .app-box {
        padding: 16px;
    }

    /* A tutta larghezza: un bottone da 90px in fondo a un riquadro di spunte si
       cerca, e qui dentro e' sempre l'unica azione della sezione. */
    .custobtn {
        display: block;
        width: 100%;
        text-align: center;
    }
}

/* =========================================
   IL FORM DI ACCESSO

   Un file solo, template/parts/login.php, reso in TRE posti:
     - la pagina /login.php (cioe' rivista/login.php), su fondo bianco
     - il popup del paywall, #form-popup.red-popup, che lo include
     - l'avviso del terzo articolo, popup-warning.php, che pure lo include
   e lo stesso #login-form lo usano anche template/app/registrati.php e
   template/app/recupera_psw.php.

   PER QUESTO RESTA UNA SCHEDA ROSSA e non diventa una scheda bianca come il
   resto del 2026. Era rossa anche prima - #b92300 nel foglio vecchio, testo
   bianco, bottone bianco - e soprattutto dentro il popup il fondo e' gia'
   var(--accent): una scheda chiara la' dentro vorrebbe dire due vestiti per lo
   stesso markup, scelti guardando l'antenato. Un vestito solo che funziona nei
   tre posti e' meno codice e una cosa in meno che si rompe quando il popup
   cambia.

   Il padding della scheda e' anche il padding del popup: .red-popup non ne ha
   di suo, e se si toglie da qui il form va a filo del bordo rosso.

   IL BOTTONE SI ROVESCIA. .custobtn nel 2026 e' rosso con testo bianco, giusto
   sul pannello account che e' chiaro; qui dentro sarebbe rosso su rosso, cioe'
   invisibile. Torna bianco con testo rosso, che e' come stava nel foglio
   vecchio (style.css:311, background-color: #fff).
   ========================================= */

/* La colonna della pagina di accesso e di registrazione. Stessa misura del
   pannello account: sono la stessa famiglia di pagine. */
.acc-colonna-stretta {
    max-width: 480px;
    margin: 0 auto 60px;
}

#login-form {
    background: var(--accent);
    color: #ffffff;
    padding: 30px;
    border-radius: 5px;
    margin-bottom: 20px;
}

#login-form h2 {
    font-family: var(--font-section);
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 18px;
}

/* 1rem, cioe' 16px: sotto quella misura Safari su iOS ingrandisce la pagina
   quando il campo prende il fuoco e poi non la rimpicciolisce piu'. min-height
   48px per stare sopra i 44 dell'area toccabile. Gli stessi valori di .nl-input,
   che e' l'altro campo del foglio. */
#login-form input[type="text"],
#login-form input[type="email"],
#login-form input[type="password"] {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-bottom: 12px;
    padding: 12px;
    border: 0;
    border-radius: 4px;
    background: #ffffff;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--text-primary);
}

#login-form input::placeholder {
    color: #6b6b6b;
}

/* Il contorno del fuoco e' bianco e non rosso: su fondo rosso un contorno rosso
   non si vede, ed e' l'unico segnale di dove si sta scrivendo per chi gira col
   tasto di tabulazione. */
#login-form input:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

#login-form hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    margin: 18px 0;
}

#login-form small {
    font-family: var(--font-sans);
    font-size: 0.85rem;
}

#login-form .psw-recovery {
    color: #ffffff;
    text-decoration: underline;
}

#login-form .psw-recovery:hover {
    text-decoration: none;
}

/* Il bottone di invio del form. Non ha una classe nel markup - e' un <button>
   nudo - e nel foglio vecchio lo vestiva "#login-form button". */
#login-form button {
    display: block;
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 4px;
    background: #ffffff;
    color: var(--accent);
    font-family: var(--font-sans);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

#login-form button:hover {
    background: #f0f0f0;
}

#login-form button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Il rovescio del bottone condiviso: dentro la scheda rossa .custobtn torna
   bianco. L'!important serve perche' ce l'ha anche la regola base. */
#login-form .custobtn,
#login-form .custobtn-rosso {
    width: 100%;
    text-align: center;
    background-color: #ffffff;
    color: var(--accent) !important;
}

#login-form .custobtn:hover,
#login-form .custobtn-rosso:hover {
    background-color: #f0f0f0;
    color: var(--accent) !important;
}

/* Lo scuro invece sul rosso si legge, e resta scuro. */
#login-form .custobtn-scuro {
    background-color: var(--fondo-scuro);
    color: #ffffff !important;
}

#login-form .custobtn-scuro:hover {
    background-color: #000000;
    color: #ffffff !important;
}

/* --- GLI AVVISI ATTORNO AL FORM --- */

/* "Impossibile effettuare il login", "Richiesta di recupero inviata". Erano un
   h2.msg-err da 23px con il bordo rosso, che accanto alla scheda urlava piu'
   del form. Stessa forma dell'avviso del pannello account, cioe' un filetto a
   sinistra. */
.msg-err,
.login-ok,
.errors {
    display: block;
    border-left: 3px solid var(--accent);
    background: var(--bg-hover);
    padding: 14px 16px;
    margin-bottom: 18px;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-primary);
    text-transform: none;
}

.msg-err strong,
.login-ok strong,
.errors strong {
    display: block;
    font-weight: 700;
}

/* L'elenco degli errori del ramo vecchio di rivista/login.php. */
.errors ol {
    margin: 8px 0 0 20px;
    padding: 0;
}

.login-ok {
    border-left-color: #2e7d32;
}

/* L'involucro che sta DENTRO template/parts/login.php, quindi anche dentro il
   popup: qui non ci va la larghezza massima della pagina, che la porta
   .acc-colonna-stretta in rivista/login.php. Il popup ha i suoi 700px e un
   involucro da 480 glieli stringerebbe.
   Era class="mt-4", cioe' Bootstrap, cioe' da quando lo stack vecchio non si
   carica piu' nessuno stacco affatto. */
.login-blocco {
    margin-top: 24px;
}

/* Il <small> che segue gli avvisi: e' la nota "puoi inserire username o email". */
.login-blocco > small {
    display: block;
    margin-bottom: 18px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Dentro il popup rosso la nota sta sul rosso, quindi bianca. */
.red-popup .login-blocco > small,
.white-popup .login-blocco > small {
    color: inherit;
}

/* "oppure" fra accedi e registrati. */
.oppure {
    margin: 20px 0;
    font-family: var(--font-sans);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
}

@media (max-width: 600px) {

    #login-form {
        padding: 20px;
    }

    #login-form h2 {
        font-size: 1.2rem;
    }
}

/* --- REGISTRAZIONE E RECUPERO PASSWORD ---

   template/app/registrati.php e template/app/recupera_psw.php avvolgono in
   <div id="login-form">, quindi campi e bottone li vestono gia' le regole qui
   sopra: gli input sono type email/text/password e il <button> e' nudo. Quello
   che resta sono i contorni, e sono tutti classi di WooCommerce -
   .woocommerce-form-row, .woocommerce-Input, .woocommerce-info - arrivate da
   un copiaincolla dal tema dello shop. Il loro foglio su questo sito non c'e'
   mai stato.

   Le classi NON si rinominano: due file, nessun aggancio JS, e il giorno che
   quei form torneranno a parlare davvero con lo shop e' meglio che i nomi
   combacino. Si vestono. */

#login-form label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff;
}

#login-form .woocommerce-form-row {
    display: block;
    margin: 0 0 16px;
}

/* La riga che contiene solo il campo nascosto del referer: niente da mostrare,
   quindi niente stacco. Senza questa lascia un buco di 16px sopra il bottone. */
#login-form .woocommerce-form-row:has(> input[type="hidden"]:only-child) {
    margin: 0;
}

#login-form .password-input {
    display: block;
}

/* L'asterisco dei campi obbligatori. Era nero su rosso. */
#login-form .required {
    color: #ffffff;
    text-decoration: none;
}

/* La nota sui campi facoltativi, e i requisiti della password. Dentro la scheda
   rossa non si puo' usare il fondo chiaro degli avvisi del resto del foglio:
   qui e' un velo bianco sul rosso. */
#login-form .woocommerce-info,
#login-form .password-requirements {
    margin: 16px 0;
    padding: 12px 14px;
    border-left: 3px solid rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.12);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    line-height: 1.5;
    color: #ffffff;
}

#login-form .password-requirements h3 {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    color: #ffffff;
}

#login-form .password-requirements p,
#login-form .password-requirements li {
    font-size: 0.82rem;
    line-height: 1.5;
}

#login-form .password-requirements ul {
    margin: 6px 0 0 18px;
}

/* Il <button> della registrazione porta quattro classi WooCommerce ma e'
   comunque un button dentro #login-form, quindi e' gia' bianco. Qui serve solo
   che .button - nome generico, che potrebbe prendere altro - non si porti
   dietro sorprese. */
#login-form .woocommerce-Button {
    margin-top: 10px;
}

/* La nota sopra il form di registrazione: "Registrati per commentare gli
   articoli...". Sta FUORI dalla scheda rossa, quindi non prende i colori di
   quella. */
.acc-nota-iscrizione {
    margin-bottom: 22px;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* Il <form> dentro la scheda non ha bisogno di niente - gli stacchi li portano
   le sue righe - ma lo si dichiara invece di darlo per scontato: i margini
   predefiniti dei moduli non sono gli stessi su tutti i motori, e nei due form
   dello shop le classi sono generiche (.register, .button) e un giorno
   potrebbero incrociare qualcosa. */
#login-form form {
    margin: 0;
}

/* LA TESTA DELLA PAGINA SEGUE LA COLONNA.
   briciola e <h1> li stampa il template fuori dalla colonna, quindi stavano a
   tutta larghezza - 1240px - mentre la scheda rossa e' larga 480 e centrata: il
   titolo "Login" finiva lontanissimo dal riquadro a cui si riferisce, e la
   pagina sembrava due pagine sovrapposte. Qui li si porta sulla stessa misura
   e sullo stesso asse della scheda.
   Vale per accesso e registrazione, che portano entrambe .pagina-login. */
.pagina-login .art-briciole,
.pagina-login .art-titolo {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* Il Logout, fra le scorciatoie e le preferenze. Allineato a sinistra come
   tutto il resto del pannello. */
.acc-congedo {
    margin: 0 0 22px;
}

/* =========================================
   LE ALTRE QUATTRO PAGINE DELL'AREA ACCOUNT

   notifiche.php, articoli-salvati.php, miei-commenti.php, cancellami.php.
   Tutte e quattro erano senza stile per lo stesso motivo del pannello account:
   il loro vestito stava in notifiche.css e commenti.css, che arrivavano al
   sito solo dentro css-combinato.css, e quello non lo carica piu' nessuno.

   Le prime due condividono TUTTO il markup della scheda - .blog_post,
   .blog_title, .post_info, .elimina_notifica, #wrapper_notifiche_lista - che e'
   lo stesso file copiato due volte. Vestirlo una volta vale per entrambe, ed e'
   il motivo per cui qui non c'e' niente di specifico per gli articoli salvati.
   ========================================= */

/* --- LA LISTA DI SCHEDE: notifiche e articoli salvati --- */

#wrapper_notifiche {
    margin-top: 10px;
}

/* La riga "Elimina tutte | Ricarica". */
#notifiche_pulisci {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--border-color);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

#notifiche_pulisci a {
    color: var(--accent-testo);
}

#notifiche_pulisci a:hover {
    text-decoration: underline;
}

#notifiche_pulisci span {
    color: var(--border-color);
}

/* L'intestazione del giorno dentro l'elenco delle notifiche. Era un <div> con
   padding e margin scritti nell'attributo style, e un <strong> dentro. */
.lista-giorno {
    margin: 26px 0 10px;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.lista-giorno:first-child {
    margin-top: 16px;
}

/* La scheda. position relative perche' la X di eliminazione ci si appoggia
   sopra in alto a destra. */
.blog_post {
    position: relative;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    padding: 16px 44px 16px 16px;
    margin-bottom: 14px;
}

.blog_post_topbar {
    margin-bottom: 8px;
}

/* Il colore lo porta l'attributo style, perche' e' un dato della categoria e
   arriva dal database: qui c'e' solo la forma. */
.blog_post_categoria {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Era un float sull'immagine, con il padding-right scritto inline. Flex: il
   testo non ha piu' bisogno di sapere quanto e' alta la miniatura, e la scheda
   non va chiusa con un clear. */
.blog_post_content {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.blog_post_immagine {
    flex: 0 0 auto;
    display: block;
    width: 113px;
}

.blog_post_immagine img {
    display: block;
    width: 113px;
    height: 125px;
    object-fit: cover;
}

.blog_post_testo {
    min-width: 0;
}

.blog_title {
    font-family: var(--font-section);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 6px;
}

.blog_title a {
    color: var(--text-primary);
}

.blog_title a:hover {
    color: var(--accent-testo);
}

.blog_post_abstract {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.post_info,
.dataora_post {
    margin-top: 10px;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* La X. Era un <a> senza href con un onclick: ora e' un <button>, cosi' ci si
   arriva col tasto di tabulazione e si preme con la barra spaziatrice. */
.elimina_notifica {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity var(--transition-fast), background-color var(--transition-fast);
}

.elimina_notifica:hover {
    opacity: 1;
    background: var(--bg-hover);
}

.elimina_notifica img {
    width: 14px;
    height: 14px;
}

/* --- I MIEI COMMENTI --- */

.stats-dashboard {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 26px;
}

.stat-box {
    flex: 1 1 160px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    padding: 18px;
}

.stat-number {
    font-family: var(--font-section);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
}

/* La data non e' un numero da leggere a colpo d'occhio come gli altri due:
   stessa riga, corpo piu' piccolo. Era uno style inline. */
.stat-number-data {
    font-size: 1.15rem;
    line-height: 1.8;
}

.stat-label {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
}

/* L'elenco dei commenti. Lo stacco dalla paginazione sta qui e non sull'ultima
   scheda, cosi' quando non c'e' paginazione non resta un vuoto in fondo. */
.lista-commenti-utente {
    margin-bottom: 26px;
}

.commento-utente {
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    padding: 18px;
    margin-bottom: 14px;
}

.commento-utente:last-child {
    margin-bottom: 0;
}

.commento-meta {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.testo-commento {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-primary);
}

/* Era .d-flex.justify-content-between di Bootstrap, che il guscio 2026 non
   carica: il cuoricino e il link non stavano piu' sulla stessa riga. */
.commento-coda {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.commento-stats {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--accent-testo);
    cursor: default;
}

.commento-stats strong {
    color: var(--text-primary);
}

/* Era .btn.btn-sm.btn-outline-dark, altro Bootstrap. */
.commento-vai {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 7px 12px;
    border-radius: 3px;
    transition: background-color var(--transition-fast);
}

.commento-vai:hover {
    background: var(--bg-hover);
    color: var(--accent-testo);
}

/* --- ELIMINAZIONE ACCOUNT --- */

/* Non a tutta larghezza come gli altri riquadri: e' un avviso, e un avviso
   lungo 1240px si legge male. margin-left a zero e non auto, altrimenti si
   ricentra e torna fuori asse rispetto al titolo. */
.acc-avvertimento {
    max-width: 640px;
    margin-left: 0;
    border-left: 3px solid var(--accent);
}

.acc-segnale {
    display: block;
    width: 72px;
    height: auto;
    margin-bottom: 14px;
}

.acc-avvertimento p {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.6;
}

.acc-elenco-perdite {
    margin: 10px 0 0 20px;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.acc-elenco-perdite li {
    margin-bottom: 8px;
}

/* --- DUE COSE CHE SERVONO A PIU' PAGINE --- */

/* Il bottone piccolo: "Personalizza" sulle notifiche, "Voglio procedere" sulla
   cancellazione. Nel foglio vecchio era largo 135px fissi e centrato con
   margin:auto; qui si adatta al testo, perche' "Si, voglio procedere" in
   tedesco a 135px non ci sta. */
.custobtn2 {
    display: inline-block;
    border: 0;
    background-color: var(--accent);
    color: #ffffff !important;
    padding: 9px 16px;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.custobtn2:hover {
    background-color: var(--accent-hover);
    color: #ffffff !important;
}

.custobtn2:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}

/* "Non hai ancora ricevuto notifiche", "Non ci sono articoli salvati". Erano
   <h2> allineati al centro con uno style inline: un titolo di secondo livello
   per dire che non c'e' niente e' un titolo di troppo nella struttura della
   pagina, ed e' un paragrafo. */
.acc-vuoto {
    padding: 40px 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--text-secondary);
    text-align: center;
}

@media (max-width: 600px) {

    /* La miniatura a 113px su uno schermo da 375 si mangia un terzo della
       riga e il titolo va a capo ogni due parole. */
    .blog_post_immagine,
    .blog_post_immagine img {
        width: 84px;
    }

    .blog_post_immagine img {
        height: 93px;
    }

    .blog_post {
        padding: 14px 40px 14px 14px;
    }

    .stat-box {
        flex-basis: 100%;
        padding: 14px;
    }

    .stat-number {
        font-size: 1.5rem;
    }
}

/* =========================================
   LE PAGINE DELLE MOSTRE

   mostre-che-aprono.php e motore-di-ricerca-mostre.php. Le altre due -
   mostre-in-corso e mostre-concluse - sono elenchi di recensioni e usano
   colonna_archivio(), quindi si vestono da sole con le regole degli archivi.

   Il vestito di queste due stava in style.css su .cinquanta, .risultato,
   .separatoremostre, .titolomostra, .quaranta, .fomrmostre (scritta cosi',
   con la r e la m invertite) e .bottonemostre. Lo stack vecchio non si carica
   piu', e quei nomi non si riportano: descrivono la larghezza - "cinquanta",
   "quaranta" - cioe' dicono quanto erano larghi i blocchi nel disegno di
   allora, non cosa sono. Al loro posto .mostra-* e .mostre-*.
   ========================================= */

.mostre-intro {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.mostre-conteggio {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

/* Due per riga, come il .cinquanta di prima. Griglia e non meta' larghezza con
   un separatore ogni due: il vecchio markup contava le schede in PHP e
   infilava un <div class="separatoremostre"> dopo ogni coppia per chiudere i
   float. Con la griglia le righe si formano da se', e il conteggio sparisce. */
.mostre-elenco {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
    margin-bottom: 30px;
}

.mostra-scheda {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
}

/* L'immagine e' decorativa qui: il link col titolo subito sotto porta allo
   stesso posto, e due link di fila sullo stesso bersaglio sono due fermate per
   chi naviga col tabulatore. Per questo ha tabindex -1 e aria-hidden. */
.mostra-figura {
    display: block;
}

.mostra-figura .card-image-wrapper {
    aspect-ratio: 750 / 360;
}

.mostra-corpo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}

.mostra-titolo {
    font-family: var(--font-section);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
}

.mostra-titolo a {
    color: var(--text-primary);
}

.mostra-titolo a:hover {
    color: var(--accent-testo);
}

.mostra-sommario {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.mostra-dove,
.mostra-quando {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.mostra-dove a {
    color: var(--accent-testo);
}

.mostra-dove a:hover {
    text-decoration: underline;
}

/* Il "Scopri la mostra" in fondo, attaccato al bordo basso anche quando la
   scheda accanto e' piu' alta: margin-top auto dentro una colonna flex. */
.mostra-scheda .more-link {
    margin-top: auto;
    padding-top: 6px;
}

/* --- IL MODULO DI RICERCA --- */

/* Era .fomrmostre con dentro dei .quaranta che galleggiavano. Griglia: le
   coppie di campi si formano da se', e i due a selezione multipla prendono la
   riga intera perche' le tendine di select2 ci stanno strette. */
.mostre-modulo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    padding: 22px;
    margin-bottom: 30px;
}

.mostre-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mostre-campo-largo,
.mostre-invio {
    grid-column: 1 / -1;
}

/* Stessa etichetta dei campi della newsletter: maiuscoletto Inter, sopra il
   campo e non accanto. */
.mostre-campo label {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* select2 costruisce il suo contenitore accanto alla <select>, che nasconde:
   senza questo resta largo quanto il contenuto e non segue la griglia. */
.mostre-modulo .select2-container {
    width: 100% !important;
}

.mostre-modulo .select2-selection {
    min-height: 48px;
    border: 1px solid var(--border-color) !important;
    border-radius: 0;
}

/* --- L'ORDINE SOTTO I 992px ---

   Dentro .sequenza-mobile la colonna e la sidebar diventano display:contents,
   quindi ogni loro figlio e' un elemento della griglia. Un figlio senza order
   ne prende uno di valore zero e salta in CIMA alla pagina, non in fondo: per
   questo ci sono tutti, anche quelli che sembrerebbero gia' al loro posto.
   .cat-paginazione la crea il JavaScript dopo l'elenco dei risultati, ma una
   volta nel documento e' un figlio come gli altri e un order le serve uguale. */
@media (max-width: 992px) {

    .pagina-mostre .sequenza-mobile .art-briciole {
        order: 10;
    }

    .pagina-mostre .sequenza-mobile .group-header {
        order: 20;
    }

    .pagina-mostre .sequenza-mobile .mostre-intro {
        order: 30;
    }

    .pagina-mostre .sequenza-mobile .mostre-conteggio {
        order: 40;
    }

    /* L'elenco e il messaggio "nessun risultato" occupano lo stesso posto:
       non compaiono mai insieme, e a parita' di order decide il documento. */
    .pagina-mostre .sequenza-mobile .mostre-elenco,
    .pagina-mostre .sequenza-mobile .acc-vuoto {
        order: 50;
    }

    .pagina-mostre .sequenza-mobile .cat-paginazione {
        order: 60;
    }

    .pagina-mostre .sequenza-mobile .mostre-modulo {
        order: 70;
    }

    .pagina-mostre .sequenza-mobile .quaderni-widget {
        order: 80;
    }

    .pagina-mostre .sequenza-mobile .list-widget {
        order: 90;
    }

    .pagina-mostre .sequenza-mobile .calendar-widget {
        order: 100;
    }

    .pagina-mostre .sequenza-mobile .search-exhibitions-widget {
        order: 110;
    }

    .pagina-mostre .sequenza-mobile .newsletter-sidebar-box {
        order: 120;
    }
}

/* Una colonna sola: a 600px due schede affiancate danno 140px di immagine e un
   titolo che va a capo a ogni parola. */
@media (max-width: 760px) {

    .mostre-elenco,
    .mostre-modulo {
        grid-template-columns: 1fr;
    }
}

/* --- IL PANNELLO ACCOUNT SU DUE COLONNE ---

   A tutta larghezza i riquadri stavano uno sotto l'altro per 1700px, con mezza
   pagina vuota a destra di ognuno. Due colonne, e la testata in cima e il
   congedo in fondo restano larghi quanto la pagina.

   Le colonne sono due <div> scritti in account.php e non una disposizione
   automatica: con grid-auto-flow il quinto riquadro sarebbe finito sotto il
   piu' alto lasciando l'altra colonna mezza vuota. */
.acc-griglia {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: start;
    margin-bottom: 22px;
}

.acc-colonna {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

/* Lo stacco fra i riquadri lo da' il gap della colonna: il margine di ognuno
   lo raddoppierebbe, e l'ultimo di ogni colonna ne lascerebbe uno appeso in
   fondo. */
.acc-colonna .app-box {
    margin-bottom: 0;
}

/* Una colonna sola dove due non ci stanno. 900 e non 768: sotto quella misura
   le righe di spunta delle notifiche in mezza colonna vanno a capo a ogni
   parola, che e' il motivo per cui il pannello era stretto all'inizio. */
@media (max-width: 900px) {

    .acc-griglia {
        grid-template-columns: 1fr;
    }
}

/* --- LE APERTURE A TUTTA COLONNA ---

   .articolo>* tiene il testo a 600px e lo centra, che e' giusto per un
   articolo - sono le righe da leggere di fila. Le aperture del chi siamo e
   della pubblicita' non sono quella cosa: presentano la testata, stanno SOPRA
   a sezioni larghe quanto la colonna, e strette e centrate in mezzo a elementi
   larghi 900 si leggono come un blocco fuori asse.

   Ci stanno anche contatti e collaborazioni. Li avevo lasciati fuori col
   ragionamento che il loro corpo e' l'unica cosa in pagina, quindi prosa da
   leggere di fila: a video non regge, perche' sotto hanno comunque la sidebar e
   i riquadri dei recapiti, e il testo stretto in mezzo si vede fuori asse come
   sulle altre due.

   Resta fuori la sola newsletter, che e' davvero solo testo piu' il modulo.

   Due classi e non una, cosi' vince su .articolo>* per specificita' - (0,2,0)
   contro (0,1,0) - e non per posizione nel foglio: la regola dei 600px potrebbe
   essere spostata piu' in basso un giorno. */
.articolo.chi-intro > *,
.articolo.pub-intro > *,
.articolo.con-corpo > *,
.articolo.col-corpo > * {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* --- CHI SIAMO: la fascia dei collaboratori ---

   LO STESSO order DELLA REDAZIONE, non uno in mezzo: fra 3 e 4 non c'e' un
   intero, e a parita' di order la griglia usa l'ordine del documento - quindi
   basta che nel markup la fascia stia dopo la redazione, come sta. L'altra
   strada era rinumerare le dieci regole qui sopra, cioe' dieci occasioni di
   sbagliarne una.
   Senza una regola finirebbe con order zero, cioe' in cima alla pagina sopra
   l'introduzione. */
@media (max-width: 992px) {

    .pagina-chi-siamo .sequenza-mobile .chi-collaboratori {
        order: 40;
    }
}

/* La fascia "Grafica, foto e video", subito dopo i collaboratori. Senza un
   order prenderebbe lo zero, cioe' la cima della pagina sopra l'introduzione.
   Le regole che venivano dal 5 in poi sono scalate di uno per farle posto. */
@media (max-width: 992px) {

    .pagina-chi-siamo .sequenza-mobile .chi-progetto {
        order: 50;
    }

    /* 55: subito dopo il progetto, prima della striscia che sta al 60. Arrivava
       da pubblicita.php, dove era nata. */
    .pagina-chi-siamo .sequenza-mobile .chi-marketing {
        order: 55;
    }
}

/* =========================================
   NESSUN TITOLO PUO' SFONDARE LA SUA COLONNA

   Nasce da un caso vero, in homepage: il titolo "Alessandria d'Egitto, un
   anello con il Faro antico riemerge dal mare con nuovi reperti" era largo
   730px dentro una colonna da 240, e usciva sopra a quello che aveva accanto.

   Non era il foglio. Quel titolo nel database ha TREDICI spazi unicode U+00A0
   - lo spazio unificatore - e nemmeno uno spazio normale: per il browser e'
   una parola sola lunga ottantacinque caratteri, e una parola sola non si
   spezza. Gli altri titoli della stessa lista, con gli spazi veri, andavano a
   capo regolarmente.

   LA VERA CORREZIONE E' NEL DATO e va fatta li'. Questa regola e' la rete:
   l'editor continuera' a mandare testo incollato da Word, e un titolo storto
   deve restare un titolo storto - non deve portarsi dietro l'impaginazione
   della pagina.

   break-word e non anywhere: spezza solo quando la parola non ci sta in nessun
   modo, mentre anywhere la spezzerebbe anche quando basterebbe mandarla a capo
   intera. Su un titolo normale queste righe non fanno niente.
   ========================================= */
.card-title,
.text-news-title,
.blog_title,
.mostra-titolo,
.art-titolo,
.group-title,
.chi-persona-nome {
    overflow-wrap: break-word;
}

/* I recapiti in coda all'apertura del chi siamo: staccati dal testo da un
   filetto, invece di essere due righe qualsiasi del paragrafo.

   E' uno <span> e non un <p> perche' esce dentro il <p> del corpo, e un
   paragrafo dentro un paragrafo non e' markup valido: il browser lo chiuderebbe
   da se' e si ritroverebbe il resto fuori posto. display:block gli da' la
   forma che serve senza cambiare l'elemento. */
.chi-recapiti {
    display: block;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    font-family: var(--font-sans);
    font-size: 0.92rem;
    line-height: 1.9;
}

/* "Link copiato" dopo aver premuto condividi, dove il foglio di condivisione
   del sistema non esiste - cioe' su quasi tutti i desktop. Senza un segno il
   bottone sembrerebbe non aver fatto niente, che e' esattamente il difetto da
   cui veniamo.

   Il fumetto esce da un ::after sul bottone, quindi non aggiunge markup: il JS
   mette .is-copiato per un secondo e mezzo e poi la toglie. position: relative
   sul bottone serve ad ancorarlo, e non disturba: .card-action era static. */
.card-action {
    position: relative;
}

.card-action.is-copiato::after {
    content: attr(data-copiato);
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    z-index: 2;
    padding: 5px 9px;
    border-radius: 3px;
    background: var(--superficie-forte);
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

/* IL FUMETTO DI CONFERMA, in fondo allo schermo.
   Lo crea il JS quando un salvataggio e' andato a buon fine. Serve perche' il
   solo cambio d'icona - un libro che da vuoto diventa pieno, 18px in fondo a
   una barra di strumenti - si perde: si premeva e sembrava non fosse successo
   niente. Dice cosa e' successo e porta dove la cosa e' finita.

   fixed e non dentro il flusso: deve vedersi anche se si e' a meta' articolo,
   e non deve spostare niente comparendo. z-index sopra la testata, che sta a
   100, ma sotto le finestre modali di magnificPopup, che partono da 1040. */
.avviso-azione {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100% - 32px);
    padding: 12px 18px;
    border-radius: 4px;
    background: var(--superficie-forte);
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);

    /* Fuori schermo e trasparente finche' non serve. visibility insieme a
       opacity: con la sola opacity resterebbe cliccabile da invisibile, e
       starebbe sopra a quello che c'e' in fondo alla pagina. */
    transform: translate(-50%, 20px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.avviso-azione.is-visibile {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}

/* Il link al posto dove l'articolo e' finito. Bianco sottolineato: sul fondo
   scuro il rosso del sito non si leggerebbe. */
.avviso-azione a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .avviso-azione {
        transition: opacity 0.2s ease, visibility 0s linear 0.2s;
        transform: translate(-50%, 0);
    }
}

/* CATEGORIA E ARGOMENTI sotto la data, nelle voci degli elenchi.
   Le liste nascevano senza: su categoria.php andava bene - la pagina e' tutta
   di una sezione - ma su tag, profilo, artista, citta', luogo e tutte-le-news
   gli articoli vengono da sezioni diverse e non c'era modo di sapere da dove
   arrivasse quello che si stava guardando.

   Pastiglie e non testo in riga: sono link, e con dieci argomenti di fila
   bisogna capire dove finisce uno e comincia l'altro senza contare le virgole.
   Piccole e grigie perche' stanno sotto la data e non devono competere col
   titolo. */
.card-argomenti {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 0;
}

.card-argomento {
    display: inline-block;
    padding: 3px 8px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: var(--bg-tenue);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-secondary);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* Il cancelletto dice che questo e' un argomento e non la sezione. Sta qui e non
   nel testo del link perche' e' un segno, non una parola: non va tradotto, non
   va copiato se uno copia il nome del tag, e il PHP mette un aria-label col
   nome pulito perche' la sintesi vocale non lo legga.
   :not() esclude la categoria, che porta entrambe le classi. */
.card-argomento:not(.card-argomento-categoria)::before {
    content: "#";
    margin-right: 1px;
    /* Il colore si eredita e l'opacita' lo smorza: cosi' sull'hover, quando il
       testo diventa bianco sul fondo scuro, il cancelletto lo segue da se' e
       non serve una seconda regola per non farlo sparire. */
    opacity: 0.65;
}

.card-argomento:hover {
    background: var(--superficie-forte);
    border-color: var(--text-primary);
    color: #ffffff;
}

/* La categoria si distingue dagli argomenti: e' la sezione in cui l'articolo
   vive, non uno dei temi che tocca. Rossa e piu' marcata, come l'etichetta di
   categoria che il disegno mette sopra le tessere della home. */
.card-argomento-categoria {
    border-color: var(--accent);
    background: transparent;
    color: var(--accent-testo);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.card-argomento-categoria:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}