/* =========================================
   QUADERNI DI VIAGGIO - solo le regole nuove
   Variabili, .container, .top-bar, .card-title, .group-header/.group-title,
   .more-link, .tag-exclusive, .art-firma/.art-di/.art-data e .site-footer
   arrivano da finestre.css e non sono ridichiarati qui: sotto c'e' solo
   quello che in quel foglio non esiste, piu' i pochi ritocchi necessari
   perche' un componente nato per il sito principale stia anche qui.
   ========================================= */

/* Le due misure dei loghi stanno qui e non nel markup: il generatore
   scrive solo le classi. */
:root {
    /* La larghezza con cui il marchio e' usato online. Il file scaricato e'
       gia' bianco - .st0{fill:#FFFFFF} su tutti e quattro i tracciati -
       quindi non serve nessun filtro per stare sul rosso. */
    --fon-logo-finestre-w: 215px;
    /* Il logo di FondAzioni Culturali: vedi la sezione 2. */
    --fon-logo-azioni-w: 440px;
}

/* =========================================
   1. LA BARRA ROSSA
   Nel sito principale la barra rossa porta tre link e il cambio lingua,
   mentre hamburger, logo e Abbonati stanno nella riga bianca sotto.
   Quaderni quella riga non ce l'ha: logo, menu e Abbonati salgono dentro
   la barra, come nella testata attuale del sottosito. Da qui i tre
   ritocchi che seguono.
   ========================================= */

/* finestre.css spegne l'hamburger sopra i 1024px, perche' li' la
   navigazione e' orizzontale. Qui la navigazione orizzontale non c'e',
   quindi il pulsante serve a ogni larghezza.
   ALTEZZA: height:auto + align-self:stretch, non una scatola fissa. E' lo
   stesso trattamento che il sito principale da' alla lente quando la mette
   in questa fascia (finestre.css:543-551). Con una scatola da 32px dentro
   una fascia da 40 il pulsante diventava l'elemento piu' alto del gruppo e
   dettava lui la riga su cui tutto il resto si centrava; ora comanda la
   fascia, e logo, tratti e testo si centrano tutti su --topbar-h.
   LARGHEZZA: 44px e' l'area toccabile, ma i tratti dentro sono 22, quindi
   11px per parte. Il margine negativo toglie quelli di sinistra, cosi'
   l'inchiostro parte dal bordo del contenitore invece che rientrato. */
.top-bar .nav-toggle {
    display: flex;
    width: 44px;
    height: auto;
    align-self: stretch;
    margin-left: -11px;
    color: #fff;
}

/* Sul rosso il bianco e' gia' il massimo contrasto: l'hover si segnala
   smorzando, non cambiando tinta. Stessa logica di .top-nav-links a:hover. */
.top-bar .nav-toggle:hover {
    color: #fff;
    opacity: 0.75;
}

/* La fascia e' l'unica cosa che sfondava la finestra: sommando solo le
   misure non di testo - 33 di hamburger, 100 di gap, 215 di logo, 18 di
   gap, 112 di social, 12 di gap, 40 di padding - fa 530px prima di una
   sola parola, e con le quattro voci e ABBONATI arriva a ~941. Su un
   telefono da 375 il documento diventava largo 941 e il fondo rosso, che
   e' largo quanto la finestra, finiva a meta'.
   height:auto + min-height al posto dell'altezza fissa di finestre.css:389,
   cosi' il flex-wrap ha dove andare: sopra gli 941px non cambia niente,
   perche' il contenuto sta in una riga sola e min-height la tiene a 40. */
.top-bar-inner {
    gap: 18px;
    flex-wrap: wrap;
    align-content: center;
    height: auto;
    min-height: var(--topbar-h);
}

/* align-self: stretch perche' il gruppo prenda tutta l'altezza della
   fascia: senza, la sua altezza era quella del figlio piu' alto e i tre
   tipi di elemento - pulsante, immagine e testo - si centravano su una
   riga arbitraria invece che sulla barra.
   Il gap sostituisce il margin-right di finestre.css:393, che essendo su
   `.top-nav-links a` valeva per le voci ma non per il <button>: fra
   hamburger e logo non c'era nessuno stacco. */
.top-nav-links {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 20px;
    /* min-width: 0 perche' un elemento flex non scende sotto il proprio
       min-content se non glielo si dice. */
    flex-wrap: wrap;
    min-width: 0;
}

.top-nav-links a {
    margin-right: 0;
}

/* Il logo di Finestre sull'Arte dentro la barra. Lo stacco lo mette il
   gap del gruppo, non un margine suo. Il file ha 1,70 unita' di vuoto
   sopra e 1,30 sotto su un viewBox alto 27,7: a 215px sono 1,71 e 1,31
   pixel, cioe' due decimi di scarto sul centro. Misurato e lasciato
   com'e': compensarlo costerebbe piu' di quanto si veda. */
.fon-marchio {
    display: flex;
    align-items: center;
    /* Senza questo il marchio e' un elemento flex con dentro un'immagine
       larga 215px: il suo min-content e' 215px e non scende di un pixel.
       Con min-width: 0 puo' restringersi, e il max-width: 100% che
       finestre.css mette su ogni <img> fa rimpicciolire il disegno. */
    min-width: 0;
}

.fon-marchio img {
    display: block;
    width: var(--fon-logo-finestre-w);
    height: auto;
}

/* .btn-subscribe-news e' rosso su bianco: sulla barra rossa sparirebbe.
   Qui si inverte, e resta lo stesso componente. */
.top-bar .btn-subscribe-news {
    background-color: #fff;
    color: var(--accent) !important;
    padding: 5px 12px;
}

.top-bar .btn-subscribe-news:hover {
    background-color: rgba(255, 255, 255, 0.82);
}

/* =========================================
   2. TESTATA
   ========================================= */
.fon-testata {
    padding: 30px 0 24px;
    border-bottom: 3px solid var(--accent);
    margin-bottom: 10px;
}

/* Il file del CDN (logo_fondazioni_culturali.svg) ha la tavola intera,
   viewBox 0 0 1920 1080, ma il disegno sta fra y 405,3 e y 656,6: sopra e
   sotto restano due fasce trasparenti che valgono il 21,1094% e il
   22,0521% della LARGHEZZA dell'immagine. A 440px sono 92,9px e 97,0px,
   contro 57,6px di disegno: senza compensazione la fascia bianca si
   gonfierebbe di 190px di niente.
   I 440px sono quelli del logo di Quaderni, e non per caso: a quella
   larghezza il disegno e' 414,6 x 57,6px contro i 417 x 57,4 di Quaderni,
   quindi la testata resta alta uguale. Ai lati restano 12,7px trasparenti
   per parte, uguali: il logo resta centrato e li' non serve compensare.
   La compensazione e' in percentuale e non in px perche' i margini in
   percentuale si risolvono sulla larghezza del contenitore: il link e'
   largo quanto l'immagine, quindi il conto resta esatto anche quando entra
   in gioco il tetto del 90%. Cosi' l'altezza del link e' esattamente
   quella del disegno, e il padding della fascia vale quello che dice. */
.fon-logo-link {
    display: block;
    width: 100%;
    max-width: var(--fon-logo-azioni-w);
    margin: 0 auto;
}

.fon-logo {
    display: block;
    width: 100%;
    height: auto;
    margin-top: -21.1094%;
    margin-bottom: -22.0521%;
}

/* --- La presentazione del sottosito, solo in homepage ---
   Niente classe nuova per la tipografia: il carattere e' var(--font-section),
   cioe' Source Serif 4, lo stesso di .fon-abstract e del testo redazionale, e
   il colore e' var(--text-secondary), quello dei sommari. Bodoni no: sotto il
   logo farebbe a gara con lui.
   1,15rem e' un gradino sopra i due sommari che la pagina gia' ha - 0,95rem
   nelle schede, 1,05rem nell'apertura - perche' questa riga presenta tutto il
   sottosito, non un articolo.
   I 700px sono un tetto di lettura, non la larghezza: senza, su uno
   schermo largo la riga correrebbe per tutta la pagina.
   Il corpo e' 1rem, in mezzo ai due sommari che la pagina gia' ha -
   0,95rem nelle schede, 1,05rem nell'apertura. Il corsivo la stacca dal
   resto senza alzare la voce: e' una didascalia della testata, non un
   titolo.
   L'aria e' 20px sopra e sotto. Sopra sono dichiarati e non subiti: la
   fascia del logo ne porta 10, i due margini sono adiacenti - fra loro
   <main> non ha ne' bordo ne' padding di sopra - quindi collassano e vince
   il piu' grande, che e' questo. Scritto cosi' la distanza dal filetto
   rosso resta 20 qualunque cosa faccia la fascia. */
.fon-presentazione {
    max-width: 700px;
    margin: 20px auto;
    font-family: var(--font-section);
    font-size: 1rem;
    font-style: italic;
    line-height: 1.55;
    color: var(--text-secondary);
    text-align: center;
}

/* --- I settori di intervento, sotto la frase, solo in homepage ---
   Le sei sezioni in una riga, centrate, che portano alle loro pagine.
   Inter maiuscolo, piccolo e spaziato: Inter non ha un maiuscoletto vero
   (nessuna funzione smcp nel file) e quello che il browser sintetizza
   viene sottile, quindi il maiuscoletto si fa con il maiuscolo a corpo
   ridotto. Niente bottoni e niente fondi: testo nel colore primario, che
   al passaggio prende il rosso, e fra una voce e l'altra un filetto
   verticale di 1px nel colore del testo, molto attenuato.
   La misura, 0,75rem con 0,14em di spaziatura e 12px per lato attorno al
   filetto: misurata sul file di Inter 500, la riga intera e' 543px e sta
   nei 561 utili a 601px di finestra, cioe' resta su una riga sola fino
   alla soglia del telefono. Sotto, vedi la sezione 14.
   Il margine sopra e' negativo perche' la frase ne porta gia' 20 sotto: la
   riga le sta vicina, come una sua continuazione, e si stacca di piu'
   dall'apertura che segue. */
.fon-settori {
    margin: -6px 0 26px;
}

.fon-settori ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fon-settori li {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.6;
}

.fon-settori li + li::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0.9em;
    margin: 0 12px;
    vertical-align: -0.1em;
    background: currentColor;
    opacity: 0.25;
}

.fon-settori a {
    color: var(--text-primary);
}

.fon-settori a:hover {
    color: var(--accent);
}

/* =========================================
   3. L'ETICHETTA DELLA DESTINAZIONE
   Il componente e' .tag-exclusive, che dal giro 23 e' gia' colore sul
   testo senza banda di fondo: qui cambia solo la tinta, e non se ne
   inventa una nuova - e' --cat-viaggi, il token che il sito principale
   usa per la sezione Viaggi.
   ========================================= */
.fon-tag {
    --tag-color: var(--accent);
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    font-weight: 700;
    text-transform: uppercase;
}



/* =========================================
   4. L'APERTURA (articoli 1-9)
   ========================================= */
.fon-apertura {
    margin-bottom: 46px;
}

/* --- La scheda e la sua foto -------------------------------------------
   Erano .card, .card-image-wrapper, .card-image e .card-content, presi da
   finestre.css. Non si potevano riusare: la, il contenitore della foto e'
   sempre un <div>, quindi la regola non dichiara nessun display. Messo su
   un <a>, per rendere la foto cliccabile, restava display:inline - e su una
   scatola inline aspect-ratio e margin-bottom non si applicano. A dare la
   misura restava .card-image (finestre.css:1427), width:100% e height:100%:
   dentro una scheda che la griglia stira all'altezza della riga, height:100%
   diventa tutta la scheda, la foto se la prende e il testo, che resta nel
   flusso, deborda e si disegna sopra quello che viene dopo.
   Lo stesso foglio documenta la trappola per conto suo, a riga 1203:
   "display: block perche' width: 100% sull'immagine si risolva su questa
   scatola e non su un contenitore inline di larghezza indefinita".
   1200/616 e' il rapporto nativo degli originali recenti del CMS: le foto
   non vengono praticamente ritagliate. */
.fon-scheda {
    background: var(--bg-card);
}

.fon-foto {
    display: block;
    position: relative;
    overflow: hidden;
    background: #000;
    aspect-ratio: 1200 / 616;
}

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

.fon-scheda:hover .fon-foto img {
    transform: scale(1.08);
    opacity: 1;
}

.fon-scheda-testo {
    padding-top: 12px;
}

/* --- 1: testo a sinistra, foto a destra --- */
.fon-lead {
    display: grid;
    grid-template-columns: 40fr 60fr;
    gap: 30px;
    align-items: start;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
}

.fon-lead .fon-scheda-testo {
    padding-top: 0;
}

.fon-lead .card-title {
    font-size: 2.5rem;
}

.fon-lead .fon-abstract {
    font-size: 1.05rem;
}

/* --- 2-4: tre colonne --- */
.fon-tris {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
}

.fon-tris .card-title {
    font-size: 1.35rem;
}

/* --- 5-9: cinque colonne, foto e titolo --- */
.fon-cinque {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.fon-cinque .fon-scheda-testo {
    padding-top: 10px;
}

.fon-cinque .card-title {
    font-size: 1rem;
    line-height: 1.15;
    /* Non piu' 0: sotto il titolo adesso c'e' la firma, e serve lo stacco
       che hanno anche le altre due fasce. */
    margin-bottom: 6px;
}

/* La firma e' la stessa delle altre fasce - .art-firma con l'ordine
   girato da .fon-firma - solo un punto piu' piccola, perche' qui la
   colonna e' un quinto di pagina. */
.fon-cinque .art-firma {
    font-size: 0.72rem;
}

/* La riga delle fondazioni fra titolo e firma, con lo stesso stacco del
   titolo; il corpo e' quello di tutte le schede, 0,85rem. A un quinto di
   pagina i nomi lunghi vanno su due o tre righe, e la fascia si allunga
   senza sbilanciarsi, perche' le schede stanno allineate in alto. */
.fon-cinque .fon-fondazioni {
    margin-bottom: 6px;
}

/* Destinazione e sommario stanno nel markup anche qui, ma si vedono solo
   sotto i 600px: a cinque colonne non ci starebbero, e nasconderli tiene
   la fascia identica a com'era alle larghezze maggiori. */
.fon-cinque .fon-tag,
.fon-cinque .fon-abstract {
    display: none;
}

/* =========================================
   5. IL SOMMARIO DEGLI ARTICOLI
   In finestre.css non c'e': .art-occhiello e' il sommario dell'articolo
   aperto, con fondo, filetto rosso e virgolette, e in una scheda non ci
   sta. Questo e' testo e basta.
   ========================================= */
.fon-abstract {
    font-family: var(--font-section);
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--text-secondary);
    margin: 8px 0 10px;
}

/* Il nome dell'autore non e' un collegamento: nella bozza era un
   <a href="#">, un link che non portava da nessuna parte. Lo <span> che
   lo sostituisce riprende le tre dichiarazioni che finestre.css:3799
   mette su .art-firma a, cosi' l'aspetto non cambia di un pixel. */
.fon-autore {
    color: var(--text-primary);
    font-weight: 700;
    font-style: italic;
}

/* La firma riusa .art-firma della pagina articolo, ma li' l'ordine e'
   "di Nome | data" e qui e' "data - di Nome": si gira il separatore, non
   il componente. */
.fon-firma .art-data {
    margin-left: 0;
}

.fon-firma .art-data::before {
    content: none;
}

.fon-firma .art-data::after {
    content: "\00B7";
    margin: 0 7px;
    opacity: 0.45;
}

/* Senza autore (utente cancellato, JOIN esterna) la data e' l'ultimo
   pezzo della firma, e il punto mediano dopo di lei resterebbe appeso. */
.fon-firma .art-data:last-child::after {
    content: none;
}

/* Le fondazioni citate, su una riga loro fra il titolo e l'abstract. In
   Inter a 0,85rem in tutte le schede, i nomi in rosso e collegati; le virgole restano nel
   colore secondario. E' un paragrafo normale: con piu' nomi la riga va a
   capo da sola fra una parola e l'altra. Lo stacco sopra lo da' gia' il
   margine sotto il titolo; sotto, quanto basta per staccarla dall'abstract
   (o dalla firma, dove l'abstract non c'e'). */
.fon-fondazioni {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-secondary);
    margin: 0 0 8px;
}

.fon-fondazioni a {
    color: var(--accent);
}

.fon-fondazioni a:hover {
    color: inherit;
}

/* =========================================
   6. DESTINAZIONI
   ========================================= */
.fon-destinazioni {
    margin-bottom: 46px;
}

.fon-dest-schede {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-bottom: 34px;
}

.fon-dest-nome {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.1;
}

.fon-dest-conteggio {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* L'elenco delle fondazioni: uno solo, alfabetico, a tutta larghezza,
   senza gruppi. I nomi arrivano a 62 caratteri ("Fondazione Cassa di
   Risparmio di Reggio Emilia Pietro Manodori", circa 450px a 0,85rem):
   due colonne invece delle tre per gruppo di Quaderni. Una voce che va a
   capo resta intera nella sua colonna, e l'interlinea scende da 1,9 a
   1,45 con un po' di aria sopra e sotto, perche' le righe di una voce
   lunga non si confondano con la voce dopo. */
.fon-dest-elenco {
    columns: 2;
    column-gap: 34px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.fon-dest-elenco li {
    break-inside: avoid;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    line-height: 1.45;
    padding: 4px 0;
}

.fon-dest-elenco a {
    color: var(--text-primary);
}

.fon-dest-elenco a:hover {
    color: var(--accent);
}

.fon-dest-numero {
    color: var(--accent);
    font-size: 0.75rem;
    margin-left: 5px;
}

/* --- La testa della pagina di una destinazione ---
   Il nome e il conto riusano il trio dell'intestazione del widget della
   single - .fon-widget-testa, -titolo, -conto - che e' gia' nome in
   Bodoni, conto in Inter e filetto sotto. Sono le uniche due regole
   nuove di questa pagina: tutto il resto - barra rossa, logo, elenco
   degli articoli, indice, piede - arriva da regole che esistono gia', e
   le soglie sono quelle della homepage senza aggiunte.
   Il corpo, perche' 1,7rem non bastava: e' la misura giusta dentro una
   colonna di sidebar da 258px, non per il titolo di una pagina intera.
   A 2,6rem il pezzo piu' largo fra tutte e 54 le destinazioni -
   "Macedonia" - misura 230px, dentro i 280 utili di un telefono da
   320px, quindi non serve nessuno scalino piu' in basso; e i nomi col
   trattino vanno a capo sul trattino, che .fon-widget-titolo permette
   gia' con overflow-wrap.
   Il margine, perche' i 14px di .fon-widget-testa sono tarati su un
   widget dove le voci vengono subito dopo: qui dopo c'e' una sezione. */
.fon-dest-testa .fon-widget-titolo {
    font-size: 2.6rem;
}

.fon-dest-testa {
    margin-bottom: 32px;
}

/* =========================================
   7. LE ULTIME USCITE
   Elenco sul modello del "Latest" del New York Times: data a sinistra,
   testo al centro, miniatura a destra.
   ========================================= */
.fon-ultime {
    margin-bottom: 50px;
}

.fon-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Le cinque voci in testa all'elenco e il collegamento "Vedi tutte le
   notizie" esistono solo sotto i 600px (sezione 14): qui sono spenti. */
.fon-voce.fon-voce-telefono,
.fon-vedi-tutte {
    display: none;
}

/* Il collegamento porta all'elenco nella stessa pagina: lo scorrimento e'
   morbido, a meno che il visitatore abbia chiesto meno movimento. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

.fon-voce {
    display: grid;
    grid-template-columns: 110px 1fr 180px;
    gap: 22px;
    align-items: start;
    padding: 18px 0;
    border-top: 1px solid var(--border-color);
}

.fon-voce:first-child {
    border-top: none;
    padding-top: 0;
}

/* Sopra i 600px le cinque voci "da telefono" in testa all'elenco sono
   spente, ma restano i primi figli: la prima voce che si vede e' quella
   dopo di loro, e deve avere lo stesso trattamento di un primo figlio. */
.fon-voce.fon-voce-telefono + .fon-voce:not(.fon-voce-telefono) {
    border-top: none;
    padding-top: 0;
}

.fon-voce-data {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: var(--text-secondary);
    padding-top: 2px;
}

.fon-voce .card-title {
    font-size: 1.25rem;
    margin-bottom: 6px;
}

.fon-voce .fon-abstract {
    margin: 6px 0 8px;
}

/* La miniatura tiene la proporzione che ha il file: niente aspect-ratio e
   niente object-fit, quindi nessun ritaglio. L'altezza la decide
   l'immagine, la larghezza la colonna. */
.fon-voce-foto {
    display: block;
}

.fon-voce-foto img {
    display: block;
    width: 100%;
    height: auto;
}

.fon-altri {
    display: block;
    margin: 26px auto 0;
    padding: 11px 30px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--accent);
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.fon-altri:hover {
    background-color: var(--accent);
    color: #fff;
}

.fon-altri[hidden] {
    display: none;
}

/* =========================================
   8. INTESTAZIONE: TITOLO E CONTO
   Nate per il widget della sidebar della pagina articolo, che qui non
   c'e'; restano perche' le usa la testa delle pagine interne
   (.fon-dest-testa).
   ========================================= */
/* --- Intestazione del widget della sidebar ---
   Il riferimento ci mette il logo Quaderni e poi le voci. Qui il logo
   sarebbe ridondante e al suo posto c'e' il nome della destinazione in
   Bodoni, con sotto il conto in Inter. Il filetto e' sotto il conto, non
   sotto il titolo: titolo e conto sono una cosa sola.
   La colonna utile e' 258px - 300 di sidebar meno 40 di padding e 2 di
   bordo - e le destinazioni lunghe vanno a capo: "Dal Trentino-Alto
   Adige" si spezza sul trattino, e il pezzo piu' largo, "Trentino-", sta
   in circa 150px a 1,7rem. */
.fon-widget-titolo {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.7rem;
    line-height: 1.05;
    overflow-wrap: break-word;
}

.fon-widget-conto {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.fon-widget-testa {
    margin-bottom: 14px;
}

/* =========================================
   10. LARGHEZZE INTERMEDIE
   La pagina si dimezza per gradi invece di collassare in una colonna
   sola: e' lo stesso criterio delle griglie del sito principale.
   ========================================= */
@media (max-width: 1100px) {

    /* L'apertura si riequilibra: da 40/60 a 48/52, cioe' quasi meta' e
       meta'. Sotto i 1100 il 40% diventava una colonna troppo stretta per
       un titolo di corpo grande: a 1050px valeva 392px e il titolo
       dell'articolo 1 - 88 caratteri - ci faceva quattro o cinque righe
       accanto a una foto larga una volta e mezza. Con il 48% la colonna
       sale a 470px e le righe scendono a quattro.
       La regola vale da qui fino ai 1000, dove l'apertura si impila e la
       proporzione non serve piu'. */
    .fon-lead {
        grid-template-columns: 48fr 52fr;
    }

    .fon-cinque {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 26px;
    }

    .fon-lead .card-title {
        font-size: 2.1rem;
    }
}

/* =========================================
   11. LE ULTIME USCITE, DA 601px IN SU
   La miniatura passa dalla colonna di destra alla sinistra, sotto la
   data, e il testo si prende tutto il resto. Solo un riordino della
   griglia: il markup non cambia di un byte, e l'ordine del documento -
   data, testo, foto - resta quello.
   E' l'unica media query a min-width del foglio, ed e' scritta cosi'
   perche' la soglia e' un pavimento e non un tetto: vale da 601 in su,
   cioe' dovunque tranne il telefono, dove la foto sta a larghezza piena
   sopra il testo. Deve battere il blocco dei 1100, che copre anche
   601-1100, e ci riesce perche' viene dopo a parita' di specificita'.
   160px di miniatura: la data ne chiede 70 (misurati su Inter a 0,78rem)
   quindi ci sta larga, e sta in mezzo ai due valori di prima, 180 sul
   desktop e 150 sul tablet. La foto tiene la proporzione del file, come
   ha sempre fatto in questa sezione, quindi a 160px di larghezza un
   originale 1200x616 si disegna 160x82.
   Tre righe e non due: la terza, a 1fr, si prende l'altezza che avanza
   quando il testo e' piu' alto della colonna di sinistra. Senza, quel
   di piu' verrebbe spartito fra le due righe piene e la foto si
   staccherebbe dalla data invece di restarle sotto. La data e' in alto
   perche' .fon-voce porta gia' align-items: start.
   ========================================= */
@media (min-width: 601px) {
    .fon-voce {
        grid-template-columns: 160px minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        gap: 10px 22px;
    }

    .fon-voce-data {
        grid-column: 1;
        grid-row: 1;
    }

    .fon-voce-foto {
        grid-column: 1;
        grid-row: 2;
    }

    .fon-voce-testo {
        grid-column: 2;
        grid-row: 1 / span 3;
    }
}

/* =========================================
   12. TABLET DELLA HOMEPAGE - da 601 a 1000px
   Questo blocco sta a 1000 e non a 992 come gli altri: e' il disegno
   della homepage, che a 992 aveva un buco. Fra 993 e 1000 valeva solo il
   blocco dei 1100, quindi la fascia dei cinque teneva tre colonne per
   cinque schede e la seconda riga restava spaiata.
   La single e la pubblicita' restano a 992, dove .layout-with-sidebar
   collassa e i banner cambiano: li' le due cose devono scattare insieme,
   qui no, perche' la homepage la sidebar non ce l'ha.
   ========================================= */
@media (max-width: 1000px) {
    .fon-lead {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /* La foto sopra il testo: a colonna unica l'apertura deve cominciare
       con l'immagine, come tutte le altre schede. */
    .fon-lead .fon-lead-foto {
        order: -1;
    }

    .fon-tris,
    .fon-cinque,
    .fon-dest-schede {
        grid-template-columns: 1fr 1fr;
        row-gap: 26px;
    }

    /* A due colonne una fascia con un numero dispari di schede lascia
       un posto vuoto: succede a tutte e tre, che hanno tre, cinque e tre
       schede. A prendersi la riga intera e' la PRIMA, che e' la piu'
       recente e la piu' importante, non l'ultima.
       La condizione "il numero e' dispari" si scrive in CSS senza
       contare niente a mano: per il primo figlio la posizione contata
       dalla fine e' il numero totale dei figli, quindi
       :first-child:nth-last-child(odd) e' vero esattamente quando i
       figli sono dispari. Se un domani le schede diventano pari, la
       regola si spegne da sola.
       Con la prima larga, le altre sono in numero pari e riempiono le
       righe a due a due: nessun blocco resta aperto.
       grid-column: 1 / -1 va dalla prima all'ultima linea, quindi vale
       qualunque sia il numero di colonne: sotto i 600, dove la colonna e'
       una sola, non fa niente.
       La foto si allarga con la scheda e tiene la sua proporzione, che
       .fon-foto le da' con aspect-ratio: cresce anche in altezza. */
    .fon-tris>:first-child:nth-last-child(odd),
    .fon-cinque>:first-child:nth-last-child(odd),
    .fon-dest-schede>:first-child:nth-last-child(odd) {
        grid-column: 1 / -1;
    }

}

/* =========================================
   13. TESTATA E SINGLE - fino a 992px
   Qui restano le tre regole che devono scattare a 992, non a 1000: la
   barra rossa, che e' la stessa sulle due pagine, e i due ritocchi della
   pagina articolo. 992 e' la larghezza a cui finestre.css fa collassare
   .layout-with-sidebar, sparire .art-banner e accendere .ad-mobile: sulla
   single corpo, banner e testata devono cambiare tutti insieme, o torna
   la fascia in cui la pagina ha il corpo desktop e la testata tablet.
   La barra sta qui e non a 1000 apposta: e' la stessa fascia sulle due
   pagine, e legarla ai 992 evita di riaprire quella fascia sulla single.
   Il prezzo e' che sulla homepage, fra 993 e 1000, le quattro voci di
   menu si rivedono: la barra ci sta, il suo minimo e' ~941px.
   ========================================= */
@media (max-width: 992px) {

    /* Le quattro voci di menu escono gia' da qui, non solo sul telefono:
       con loro il minimo della fascia e' ~941px, e da 1000 in giu' andava
       a capo su due o tre righe. Restano hamburger, logo e Abbonati piu' i
       social, che a questa soglia ci stanno: 33 + 20 + 215 + 18 + 216 fa
       502px di minimo, dentro i 561 utili a 601px di finestra. */
    .top-nav-links a:not(.fon-marchio) {
        display: none;
    }

}

/* =========================================
   14. TELEFONO - fino a 600px
   ========================================= */
@media (max-width: 600px) {

    /* La barra tiene solo hamburger, logo Finestre e Abbonati. Le quattro
       voci in produzione staranno nell'hamburger; i social escono perche'
       da soli valgono 128px su una riga che a 375px ne ha 335. */
    .top-nav-links a:not(.fon-marchio),
    .top-bar .social-link {
        display: none;
    }

    /* Restano tre elementi: niente piu' da mandare a capo, e la fascia
       torna a una riga sola alta --topbar-h. */
    .top-bar-inner,
    .top-nav-links {
        flex-wrap: nowrap;
    }

    /* Il 90% di prima. La compensazione dei margini vuoti del file non ne
       risente: i due margini negativi sono in percentuale e si risolvono
       sulla larghezza del link, qualunque essa sia. */
    .fon-logo-link {
        width: 90%;
    }

    /* La frase di presentazione prende la larghezza meno i margini, che
       sono i 20px di padding di .container. Il tetto di 700px a questa
       soglia e' gia' piu' largo dello spazio disponibile, quindi e'
       inerte: lo si dichiara lo stesso - la riga non deve dipendere
       dall'aritmetica della soglia. */
    .fon-presentazione {
        max-width: 100%;
    }

    /* I settori vanno a capo su piu' righe restando centrati. I filetti
       si tolgono: a capo, quello della prima voce di una riga nuova
       resterebbe appeso all'inizio. Lo spazio fra le voci lo da' il gap. */
    .fon-settori ul {
        column-gap: 18px;
        row-gap: 4px;
    }

    .fon-settori li + li::before {
        content: none;
    }

    /* Senza filetti le sei voci, maiuscole e centrate, si leggerebbero
       come un sottotitolo: qui diventano rosse, lo stesso var(--accent) dei
       collegamenti e dei nomi delle fondazioni, cosi' si capisce che sono
       collegamenti. Sopra i 600px i filetti bastano e restano nel colore
       del testo. */
    .fon-settori a {
        color: var(--accent);
    }

    /* L'APERTURA SI ACCORCIA: restano l'articolo grande e i tre, la fascia
       dei cinque si spegne e il resto della pagina sale. I suoi cinque
       articoli non si perdono: index.php li scrive anche in testa a "Le
       ultime uscite", e qui si accendono. Al posto della fascia, un
       collegamento che porta all'elenco, nello stile della riga delle
       sezioni: Inter maiuscolo piccolo e spaziato, centrato, rosso come le
       voci delle sezioni a questa larghezza. */
    .fon-cinque {
        display: none;
    }

    .fon-voce.fon-voce-telefono {
        display: grid;
    }

    /* Qui le cinque voci si vedono, quindi la voce che le segue torna una
       voce qualunque: filetto sopra e i 28px di questa soglia. */
    .fon-voce.fon-voce-telefono + .fon-voce:not(.fon-voce-telefono) {
        border-top: 1px solid var(--border-color);
        padding-top: 28px;
    }

    .fon-vedi-tutte {
        display: block;
        margin-top: 4px;
        font-family: var(--font-sans);
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        text-align: center;
        color: var(--accent);
    }

    /* IL NOME DI UNA FONDAZIONE, sulla sua pagina. La regola esistente,
       .fon-dest-testa .fon-widget-titolo a 2,6rem, e' tarata sulle
       destinazioni di Quaderni e sui nomi delle sei sezioni (la piu' larga,
       "Acquisizioni", misura 256px), e non basta qui: misurate sul file di
       Bodoni Moda 800, quattro parole dei nomi superano i 280px utili di un
       telefono da 320 - "Cupramontana" 312px, "Comunicazioni" 306,
       "Pescarabruzzo" 305, "Civitavecchia" 281 - e overflow-wrap le
       spezzerebbe a meta'. A 2,2rem la piu' larga, "Cupramontana", sta in
       264px. Solo qui e solo sotto i 600px: piu' su la colonna e' larga e
       i nomi vanno a capo fra le parole. */
    .fon-fondazione-testa .fon-widget-titolo {
        font-size: 2.2rem;
    }

    .fon-lead .card-title {
        font-size: 1.8rem;
    }

    .fon-tris,
    .fon-cinque,
    .fon-dest-schede {
        grid-template-columns: 1fr;
    }

    /* A colonna unica lo spazio c'e': la fascia dei cinque mostra anche
       destinazione e sommario, come la fascia dei tre. */
    .fon-cinque .fon-tag {
        display: inline;
    }

    .fon-cinque .fon-abstract {
        display: block;
    }

    .fon-cinque .card-title {
        font-size: 1.35rem;
    }

    .fon-cinque .art-firma {
        font-size: 0.8rem;
    }

    /* Una colonna sola: a 320px di finestra restano 280px, e i nomi delle
       fondazioni non starebbero in due colonne nemmeno rimpiccioliti.
       Il corpo resta quello di base; le voci lunghe vanno a capo. */
    .fon-dest-elenco {
        columns: 1;
    }

    /* LE ULTIME USCITE, solo da dentro questa soglia: il markup non
       cambia di un byte.
       Una colonna sola, con la foto a larghezza piena sopra il testo.
       minmax(0, 1fr) e non 1fr: la colonna deve poter scendere sotto il
       proprio min-content, altrimenti un titolo con una parola lunga
       allarga di nuovo la pagina. */
    .fon-voce {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        /* 28px per lato al posto di 18: senza l'abstract le schede
           perdevano il loro respiro e si leggevano come un blocco unico.
           Fra la firma di una e la foto della successiva passano cosi'
           57px - 28 + il filetto + 28 - contro i 37 di prima. E' una volta
           e mezza lo stacco vecchio: abbastanza per staccare le schede,
           non tanto da costringere a scorrere una schermata per voce. */
        padding: 28px 0;
    }

    /* La data qui sopra e' la stessa che la firma ripete sotto il titolo,
       due volte nella stessa scheda. Sul telefono resta solo quella della
       firma. */
    .fon-voce-data {
        display: none;
    }

    /* Nel markup la foto sta in fondo, ma qui va in cima: la griglia la
       riporta alla prima riga, come fa l'apertura con .fon-lead-foto.
       Sotto, nell'ordine del markup: destinazione, titolo, firma. */
    .fon-voce-foto {
        grid-row: 1;
        aspect-ratio: 1200 / 616;
        overflow: hidden;
        background: #000;
    }

    .fon-voce-foto img {
        height: 100%;
        object-fit: cover;
    }

    .fon-voce-testo {
        grid-row: 2;
    }

    .fon-voce .fon-abstract {
        display: none;
    }

    /* LA FIRMA. Servono due cose insieme: che il nome non si spezzi al
       suo interno e che "di" non resti appeso alla riga di sopra.
       Con il solo white-space non si ottengono: il capo fra "di" e il
       nome e' governato dal loro antenato comune, che e' il <p>, quindi
       lo stesso valore che lo vieterebbe li' vieterebbe anche il capo
       dopo il punto mediano - e la firma sfonderebbe, perche' la piu'
       lunga, "18/09/2026 - di Federico Giannini, Ilaria Baratta", misura
       300px contro i 280 della colonna a 320px di finestra.
       Quindi "di" entra dentro il link, come pseudo-elemento con uno
       spazio unificatore: diventa un pezzo solo col nome, e l'unico capo
       che resta e' quello dopo il punto mediano. Sulla riga sotto,
       "di Federico Giannini, Ilaria Baratta" sta in 212px. */
    .fon-voce .fon-firma .art-di {
        display: none;
    }

    .fon-voce .fon-firma .fon-autore {
        white-space: nowrap;
    }

    .fon-voce .fon-firma .fon-autore::before {
        content: "di\00A0";
        font-weight: 400;
        color: var(--text-secondary);
    }
}