/* CSS Variables for Ultimate Newsroom Theme (Finestre Red) */
:root {
    --bg-main: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #f9f9f9;
    --text-primary: #000000;
    --text-secondary: #444444;
    --accent: #B80000;
    /* Original Finestre Red */
    --accent-hover: #990000;

    /* 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 non in un blocco
       [data-tipografia] apposta: cosi' e' quello che la pagina mostra anche a
       JS spento, e resta quello che mostra il giorno che il blocco DEMO e
       l'attributo sull'<html> verranno cancellati. Le altre sei modalita' si
       innestano sopra, questa e' il fondo. */
    --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, 105 di riga
       del logo (15 + 75 + 15), 1 di filetto sopra la navigazione, 50 di
       navigazione e 2 del filetto rosso che chiude. Totale 198.
       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: 75px;
    --header-line-pad: 15px;
    --nav-h: 50px;
    --header-borders: 3px;
    --search-h: 32px;
    --header-h: calc(var(--topbar-h) + var(--logo-h) + 2 * var(--header-line-pad) + var(--header-borders) + var(--nav-h));

    /* --skin-crop: quanta parte dello skin si butta in cima, e non e' un numero
       di design ma una misura DEL FILE. materia_dei_sogni_skin_2560x1440px.jpg
       ha in cima una fascia quasi nera e quasi piatta: righe 0-24, luminanza
       2,1-5,3 e deviazione 8-14, contro la 25 dove il disegno comincia
       davvero (deviazione 25,5, poi 43,8 alla 26). Misurato decodificando il
       file riga per riga, sulla fascia centrale da 1440px che si vede. Quei 25
       pixel sono il "vuoto sopra il banner": non stavano nel foglio, stavano
       nell'immagine, e si tolgono alzando la posizione dello sfondo.
       --skin-reveal: quanto skin resta visibile sopra il contenuto. Era 150 e
       adesso e' 129, che non e' una scelta ma una conseguenza: la parte scura
       del creativo finisce alla riga 153 - alla 154 diventa bianca, luminanza
       da 10,5 a 212,7 - quindi 154 - 25 di taglio fa 129, e il bianco del
       creativo comincia esattamente dove comincia il blocco bianco del
       contenuto. Verificato: 198 - 25 + 154 = 327 = 198 + 129.
       ATTENZIONE: i 25px sono di QUESTO creativo. Vedi i requisiti per la
       produzione nel REPORT-35. */
    --skin-crop: 25px;
    --skin-reveal: 129px;

    /* 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;
}

/* Doppio binario tipografico.
   --font-heading e' l'interruttore, --font-sans resta il font
   d'interfaccia e non cambia mai. L'attributo sta sull'<html>: lo imposta
   il markup (data-tipografia="sans") e lo commuta il JS leggendo l'hash.
   Nessun fork del foglio: cambia una sola variabile. */
/* Le cinque prove con le grazie. Georgia e' uscita al giro 19 (due soli pesi:
   i titoli a 800 le collassavano sul bold), Instrument Serif al giro 20
   (spaziatura troppo stretta). Nessuna delle due rientra nemmeno come
   ripiego: si scende su 'serif' di sistema.
   I pesi che il foglio chiede a --font-heading sono 400 500 700 800 900.
   Li hanno tutti Source Serif 4, Playfair Display e Bodoni Moda; Libre
   Caslon Text ha solo 400 e 700. Vedi REPORT-22. */
/* Il sans non e' piu' il fondo del foglio ma una modalita' come le altre:
   rimette Inter sui titoli, riporta il testo sullo stesso binario dei titoli
   - che e' quello che faceva prima, quando --font-section valeva
   var(--font-heading) - e riporta a 700 il peso dei titoli grandi. */
[data-tipografia="sans"] {
    --font-heading: 'Inter', sans-serif;
    --font-section: var(--font-heading);
    --peso-display: 700;
}

[data-tipografia="source-serif"] {
    --font-heading: 'Source Serif 4', serif;
    --font-section: var(--font-heading);
    --peso-display: 700;
}

[data-tipografia="libre-caslon"] {
    --font-heading: 'Libre Caslon Text', serif;
    --font-section: var(--font-heading);
    --peso-display: 700;
}

[data-tipografia="playfair"] {
    --font-heading: 'Playfair Display', serif;
    --font-section: var(--font-heading);
    --peso-display: 700;
}

[data-tipografia="bodoni"] {
    --font-heading: 'Bodoni Moda', serif;
    --font-section: var(--font-heading);
    --peso-display: 700;
}

/* La modalita' articolata, e la sola in cui i quattro binari divergono.
   Bodoni tiene i titoli delle notizie - a 800 quelli di corpo grande, a 700
   tutti gli altri - e Lato prende tutto il resto: testi, menu, bottoni,
   etichette, date e autori, e anche i titoli di sezione. Il ragionamento e'
   che il didone lavora sulla notizia, dove il lettore si ferma, mentre
   l'impalcatura della pagina (le sezioni, la sidebar, la navigazione) va
   letta di sfuggita e chiede un lineare.
   ATTENZIONE: Lato ha 100 300 400 700 900 e basta. Non ha ne' il 500 ne' il
   600 ne' l'800, quindi .lang-toggle (500) scende a 400, .more-link (600)
   sale a 700 e i titoli di sezione (800) salgono a 900. Vedi REPORT-22. */
[data-tipografia="bodoni-lato"] {
    --font-heading: 'Bodoni Moda', serif;
    --font-sans: 'Lato', sans-serif;
    --font-section: 'Lato', sans-serif;
    --peso-display: 800;
}

/* La settima: stessa spartizione della sesta, con un serif da testo al posto
   del lineare. Lato e' nato per l'interfaccia e su un testo lungo affatica;
   un serif da testo e' quello che fanno i quotidiani, e Source Serif 4 e' gia'
   caricato, quindi non costa una richiesta in piu'.
   Differenza dalla sesta: qui --font-sans NON si dichiara, quindi
   l'interfaccia - menu, etichette, date, bottoni - resta Inter. Il Bodoni sui
   titoli, con la stessa ripartizione 800 sui titoli grandi e 700 sugli altri,
   ce lo possiamo tenere perche' e' il carattere del logo: il concorrente
   diretto usa il serif nel testo ma nei titoli va di lineare. */
/* Nessun blocco per "Bodoni + Source": i suoi valori sono quelli del :root, ed
   e' la posizione dell'interruttore che riporta al fondo. Scriverli anche qui
   vorrebbe dire tenerli allineati in due posti. */

/* 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;
}

body.has-skin {
    background-image: url('https://www.finestresullarte.info/banner/2026-08/materia_dei_sogni_skin_2560x1440px.jpg');
    /* Meno --skin-crop: l'immagine sale di 25px, cosi' la fascia morta in cima
       al file finisce sotto l'header invece che sotto gli occhi, e il disegno
       parte a filo col filetto rosso. */
    background-position: center calc(var(--header-h) - var(--skin-crop));
    background-repeat: no-repeat;
    background-color: #fcfcfc;
    /* Fallback matching the basic theme */
}

body.has-skin .main-header,
body.has-skin .top-bar {
    position: relative;
    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);
}

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;
}

.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) }, 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: fuori dalla modalita skin .top-bar non e' posizionata, quindi la
   tendina gioca nel contesto di impilamento della radice. */
.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);
}

/* In modalita skin .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. */
body.has-skin .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 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);
}

/* LA BANDA DELL'HAMBURGER E DEL LOGO RESTA A SCHERMO, SOTTO I 1023,98px.
   Qui sopra .main-header dichiara position: sticky dal giro 1, ma non ha mai
   funzionato: body.has-skin .main-header (piu' su, riga ~246) porta
   position: relative con specificita' 0,2,1 contro 0,1,0, e <body> ha la classe
   has-skin su tutte e due le pagine. Quindi la testata e' sempre scorsa via, e
   con lei erano morti anche lo z-index: 1000 e l'ombra di .is-scrolled.
   Questa regola ha la STESSA specificita' della sua concorrente e vince perche'
   viene 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, e la barra rossa sopra
   scorre via come deve - l'appiccicata e' solo la banda con hamburger e logo.
   z-index 100 e non 1000: e' il valore che il blocco has-skin da' anche alla
   barra rossa, e fra due elementi di pari z-index vince l'ultimo nel documento,
   cioe' l'header. Sopra il contenuto, che sta a 10, e sotto la tendina delle
   lingue, che sale a 101 quando e' aperta.
   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.
   Lo skin non c'entra: sotto i 1439,98 e' spento, quindi qui non c'e' niente
   da tenere impilato. */
@media (max-width: 1023.98px) {

    body.has-skin .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);
}

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

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

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

/* 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. */
    .account-link {
        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;
}

/* 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;
    margin-bottom: 2px;
}

/* L'unica cosa che cambia da un posto all'altro non e' aspetto ma spaziatura:
   nelle card serve piu aria fra etichetta e titolo che nella lista compatta
   di Ultime Notizie. */
.schema-a-item .tag-exclusive,
.schema-b-col .tag-exclusive {
    margin-bottom: 0px;
}

.evidenza-item .tag-exclusive {
    margin-bottom: 0px;
}

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

.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) }, 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);
    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(--text-primary);
    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);
    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;
}

/* Il <p> del box newsletter ha uno style inline, ma non imposta
   font-family: questa regola passa senza dover toccare l'inline.
   --font-section e non --font-heading: e' testo, non un titolo di notizia. */
.newsletter-sidebar-box p {
    font-family: var(--font-sans);
}

/* 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;
}

/* =========================================
   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. */
    .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 sequenza sostituisce: i cinque leaderboard 728x90, gli
       otto quadrati 250x250 della sidebar e il blocco Instagram. Nascosti, non
       cancellati - sono la sidebar del desktop, e sopra i 992px stanno tutti
       dove erano. */
    .sequenza-mobile .ad-banner.leaderboard,
    .sequenza-mobile .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: 1;
    }

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

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

    /* 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: 4;
    }

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

    /* :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: 6;
    }

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

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

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

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

    /* 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: 11;
    }

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

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

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

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

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

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

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

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

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

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

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

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

    /* 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: 24;
    }

    /* 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%;
    }
}

/* ================= DEMO - da rimuovere =================
   Interruttore tipografico per l'approvazione grafica.
   Non fa parte del template da portare via: cancellare questo blocco,
   il <div class="demo-typeswitch"> nell'HTML e il blocco DEMO nel JS.
   ======================================================= */
/* In colonna e non in riga da quando le posizioni sono quattro e portano il
   nome per esteso: in riga il gruppo era largo mezzo schermo. */
.demo-typeswitch {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    font-family: var(--font-sans);
    font-size: 0.7rem;
}

.demo-typeswitch-label {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    padding: 0 4px 2px;
}

.demo-typeswitch-btn {
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    text-align: left;
    letter-spacing: 0.3px;
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
}

/* Nascosto dal momento in cui la tipografia e' stata scelta. Non cancellato e
   non smontato: e' UNA regola, e per riaprire il confronto basta togliere
   questa. Il blocco DEMO intero va via quando la bozza diventa template. */
.demo-typeswitch {
    display: none;
}

.demo-typeswitch-btn[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ================= /DEMO ================= */

/* =========================================
   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);
    font-weight: 700;
}

.art-titolo {
    font-family: var(--font-heading);
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.15;
    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;
}

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

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

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

/* 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. */
.art-figura,
.art-banner {
    max-width: 100%;
    margin-bottom: 26px;
}

/* I DUE LEADERBOARD DEL DESKTOP ESCONO SOTTO I 992px (giro 44), come i cinque
   della home. Li' sotto il formato unico e' il 320x100 e i posti sono nove: un
   728x90 a larghezza di colonna si disegnerebbe 335x41 a 375px, cioe'
   un'inserzione illeggibile, e ne farebbe undici.
   Solo .art-banner, non .art-figura: la fotografia dell'articolo resta.
   I nove posti mobile NON hanno bisogno di scavalcare il tetto dei 600px di
   .articolo>*, e non gliel'ho dato: 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 sta incolonnata col testo come
   il resto del flusso di lettura. Se la vuoi a larghezza piena della colonna,
   come sulla home, e' un max-width: 100% qui dentro. */
@media (max-width: 992px) {
    .art-banner {
        display: none;
    }
}

.art-figura img {
    display: block;
    width: 100%;
    height: auto;
}

.art-figura figcaption {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 8px;
}

.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;
}

.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;
}

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

.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(--text-primary);
    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. La sentinella e' una riga vuota in fondo ai commenti:
   quando entra in vista, il JS scopre l'articolo. Senza JS o con meno
   animazioni resta scoperto da subito, che e' il verso giusto in cui cedere. */
.art-sentinella {
    height: 1px;
}

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

.prossimo-articolo.is-open {
    display: block;
}

@media (prefers-reduced-motion: no-preference) {
    .prossimo-articolo.is-open {
        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: 1;
    }

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

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

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

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

    /* 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: 6;
    }

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

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

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

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

    /* 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: 11;
    }

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

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

/* =========================================
   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. */
.chi-persone {
    display: grid;
    grid-template-columns: repeat(auto-fit, 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;
}

/* --- 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: 1;
    }

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

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

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

    .pagina-chi-siamo .sequenza-mobile .chi-staff {
        order: 5;
    }

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

    .pagina-chi-siamo .sequenza-mobile .chi-collaboratori {
        order: 7;
    }

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

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

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

    /* L'indice delle 283 firme chiude il contenuto: e' il blocco piu' lungo e
       il meno urgente da leggere. */
    .pagina-chi-siamo .sequenza-mobile .chi-firme {
        order: 11;
    }

    /* 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: 12;
    }
}

/* =========================================
   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);
    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);
    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: 1;
    }

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

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

    /* 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: 4;
    }

    /* .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: 1;
    }

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

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

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

    .pagina-pubblicita .sequenza-mobile .pub-contatti {
        order: 5;
    }

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

    /* 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: 7;
    }

    /* .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);
    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);
    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: 1;
    }

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

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

    /* 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: 4;
    }

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