/*
 * La cornice del sito: come i token diventano pagine.
 *
 * Qui non ci sono valori scritti a mano se non quelli che nessuno cambiera
 * mai. Tutto il resto viene da tokens.css.
 *
 * Questo foglio disegna **soltanto la cornice**: intestazione, piede,
 * impaginazione dell'articolo, elenchi di riserva. Il corpo degli articoli e
 * gli archivi li disegna Innovando Editorial Framework con il suo foglio, e
 * questo file non lo contraddice mai.
 */

/* ====================================================== fondamenta */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    background: var(--in-fondo);
    color: var(--in-testo);
    font-family: var(--in-corpo);
    font-size: var(--in-t-base);
    line-height: var(--in-riga-larga);
    /* Quando Merriweather non e ancora arrivato, la riserva viene ridotta
     * all'altezza delle sue minuscole: il testo occupa lo stesso spazio e la
     * pagina non salta quando il carattere vero prende il suo posto. */
    font-size-adjust: from-font;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

img, picture, video, svg { max-width: 100%; height: auto; }
img { font-style: italic; }

h1, h2, h3, h4 {
    font-family: var(--in-titoli);
    line-height: var(--in-riga-stretta);
    font-weight: 600;
    text-wrap: balance;
    margin: 0 0 var(--in-s4);
}

h1 { font-size: var(--in-t-enorme); letter-spacing: -0.015em; }
h2 { font-size: var(--in-t-grande); letter-spacing: -0.01em; }
h3 { font-size: var(--in-t-medio); }

p { margin: 0 0 var(--in-s5); text-wrap: pretty; }

a {
    color: var(--in-marchio);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

a:hover { color: var(--in-marchio-vivo); text-decoration-thickness: 2px; }

/* Il fuoco della tastiera si vede sempre, e non e mai solo un colore: chi
 * distingue male i colori deve poter capire dov'e lo stesso. */
:focus-visible {
    outline: 3px solid var(--in-fuoco);
    outline-offset: 2px;
    border-radius: var(--in-raggio);
}

/* ====================================================== servizi */

.in-solo-lettori {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Il salto al contenuto: invisibile finche non lo si cerca con il tabulatore,
 * e allora deve essere la prima cosa che compare. */
.in-salta {
    position: absolute;
    left: var(--in-s4);
    top: -100vh;
    z-index: 100;
    background: var(--in-fondo);
    color: var(--in-testo);
    padding: var(--in-s3) var(--in-s5);
    border: 2px solid var(--in-marchio);
    border-radius: var(--in-raggio);
    font-family: var(--in-interfaccia);
    font-weight: 600;
    text-decoration: none;
}

.in-salta:focus { top: var(--in-s4); }

/* ====================================================== impaginazione */

.in-fascia {
    padding-inline: var(--in-margine-laterale);
}

.in-dentro {
    max-width: var(--in-larghezza-piena);
    margin-inline: auto;
}

/*
 * La griglia a tre corsie.
 *
 * Tre corsie con un nome: il testo sta al centro, e cio che deve respirare —
 * una foto grande, una citazione — esce nelle corsie laterali dichiarandolo,
 * senza margini negativi e senza contenitori annidati.
 *
 * **Non si usa negli articoli**: li dentro rompe i calcoli dell'indice di IEF.
 * Serve alle pagine costruite da noi — homepage, pillar — dove IEF non entra.
 */
.in-griglia-testo {
    display: grid;
    grid-template-columns:
        [piena-inizio] minmax(var(--in-margine-laterale), 1fr)
        [larga-inizio] minmax(0, calc((var(--in-larghezza-larga) - var(--in-larghezza-contenuto)) / 2))
        [testo-inizio] min(100% - var(--in-margine-laterale) * 2, var(--in-larghezza-contenuto)) [testo-fine]
        minmax(0, calc((var(--in-larghezza-larga) - var(--in-larghezza-contenuto)) / 2)) [larga-fine]
        minmax(var(--in-margine-laterale), 1fr) [piena-fine];
}

.in-griglia-testo > * { grid-column: testo; }
.in-griglia-testo > .alignwide { grid-column: larga; }
.in-griglia-testo > .alignfull { grid-column: piena; }

/* ====================================================== intestazione */

/* LA TESTATA RESTA IN ALTO.
 *
 * Appiccicata, non fissa: `sticky` la lascia nel flusso, quindi non serve
 * riservarle spazio a mano e non c'e' niente da tenere allineato quando cambia
 * altezza. Lo z-index sta sopra i pannelli del menu' — che sono suoi figli — e
 * sotto niente. */
.in-testata {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid var(--in-bordo);
    background: var(--in-fondo);
}

/* Il respiro delle tre bande e' lo stesso: stessa larghezza massima, stesso
 * margine laterale. E' cio' che fa leggere marchio, voci e articolo come una
 * colonna sola invece che come tre cose sovrapposte. */
.in-servizio-dentro,
.in-testata-dentro,
.in-barra-dentro {
    max-width: calc(var(--in-larghezza-piena) + var(--in-margine-laterale) * 2);
    margin-inline: auto;
    padding-inline: var(--in-margine-laterale);
}

/* ---------------------------------------------------- banda 1: il servizio */

/* LA BANDA ALTA E' CALDA, LA TESTATA BIANCA.
 *
 * Dalla 0.24.0 il fondo della testata e' bianco pieno, e la banda di servizio
 * prende un avorio piu' caldo del grigio tenue usato altrove: e' la differenza
 * di superficie a farla leggere come una riga a se', invece che come il bordo
 * alto della testata. Le voci a sinistra, l'iscrizione a destra. */
.in-servizio {
    background: var(--in-fondo-servizio);
    border-bottom: 1px solid var(--in-bordo-servizio);
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-micro);
}

.in-servizio-dentro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--in-s4);
    min-height: 2.625rem;
}

.in-servizio-voci { margin-inline-end: auto; }

.in-servizio-elenco {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    gap: var(--in-s5);
    margin: 0;
    padding: 0;
}

.in-servizio-elenco a {
    display: inline-block;
    padding-block: var(--in-s2);
    color: var(--in-testo-tenue);
    text-decoration: none;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    background-image: linear-gradient(var(--in-marchio), var(--in-marchio));
    background-size: 0 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition:
        color 200ms ease,
        background-size 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.in-servizio-elenco a:hover,
.in-servizio-elenco a:focus-visible {
    color: var(--in-marchio);
    background-size: 100% 1px;
}

/* IL CUORE ACCANTO A UNA VOCE DI MENU' (dalla 0.25.0).
 *
 * Si accende dal menu', senza toccare il tema: in Aspetto › Menu si scrive la
 * classe `in-voce-cuore` nel campo «Classi CSS» della voce. Vale in qualunque
 * menu', non solo nella barra di servizio.
 *
 * E' un disegno e non un'emoji: un'emoji cambia aspetto da un sistema
 * all'altro (rossa su Mac, contornata su Windows, a volte in bianco e nero) e
 * non prende il rosso della testata. Qui il cuore e' una maschera SVG colorata
 * con --in-marchio: lo stesso rosso del marchio, ovunque. Al passaggio del
 * mouse batte una volta; chi ha chiesto meno movimento lo vede fermo.
 *
 * Il cuore e' decorazione: il lettore di schermo legge solo il testo della
 * voce, perche' lo pseudo-elemento non ha contenuto testuale. */
.in-voce-cuore > a::before {
    content: "";
    display: inline-block;
    /* Dalla 0.29.0 piu' grande e con un battito: era la voce piu' importante
     * della banda e si vedeva meno delle altre. */
    width: 1.25em;
    height: 1.25em;
    margin-right: 0.5em;
    vertical-align: -0.3em;
    /* Un rosso che scurisce verso la punta: da' volume al disegno senza
     * uscire dai colori della testata. */
    background: linear-gradient(150deg, var(--in-marchio-vivo) 0%, var(--in-marchio) 70%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.1c-.38 0-.76-.14-1.06-.4C6.1 16.5 2.4 13.2 2.4 8.85 2.4 5.95 4.62 3.7 7.45 3.7c1.86 0 3.45.95 4.55 2.45C13.1 4.65 14.69 3.7 16.55 3.7c2.83 0 5.05 2.25 5.05 5.15 0 4.35-3.7 7.65-8.54 11.85-.3.26-.68.4-1.06.4z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.1c-.38 0-.76-.14-1.06-.4C6.1 16.5 2.4 13.2 2.4 8.85 2.4 5.95 4.62 3.7 7.45 3.7c1.86 0 3.45.95 4.55 2.45C13.1 4.65 14.69 3.7 16.55 3.7c2.83 0 5.05 2.25 5.05 5.15 0 4.35-3.7 7.65-8.54 11.85-.3.26-.68.4-1.06.4z'/%3E%3C/svg%3E") center / contain no-repeat;
    transform-origin: center;
    /* Un doppio battito ogni cinque secondi, come un cuore a riposo: si
     * nota con la coda dell'occhio, non disturba la lettura. */
    animation: in-battito-riposo 5s ease-in-out 2s infinite;
}

/* Nella barra di servizio il sottolineato animato parte dal testo, non dal
 * cuore: il gradiente salta la larghezza del disegno. */
.in-servizio-elenco .in-voce-cuore > a {
    background-position: 1.75em 100%;
}

.in-servizio-elenco .in-voce-cuore > a:hover,
.in-servizio-elenco .in-voce-cuore > a:focus-visible {
    background-size: calc(100% - 1.75em) 1px;
}

.in-voce-cuore > a:hover::before,
.in-voce-cuore > a:focus-visible::before {
    animation: in-battito 700ms ease-in-out 1;
}

@keyframes in-battito {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.22); }
    45% { transform: scale(0.96); }
    65% { transform: scale(1.12); }
}

/* La firma nel piede (dalla 0.29.0): «Made with ♥ by Innovando GmbH». Il
 * cuore prende l'accento del piede, il rosso della testata sul fondo scuro
 * non si vedrebbe, e batte con lo stesso ritmo di quello in testata. */
.in-piede-firma {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.in-piede-cuore {
    width: 1.15em;
    height: 1.15em;
    color: var(--in-piede-accento);
    transform-origin: center;
    animation: in-battito-riposo 5s ease-in-out 3s infinite;
}

.in-piede-firma:hover .in-piede-cuore {
    animation: in-battito 700ms ease-in-out 1;
}

@media (prefers-reduced-motion: reduce) {
    .in-piede-cuore,
    .in-piede-firma:hover .in-piede-cuore {
        animation: none;
    }
}

/* Il battito a riposo: due colpi nel primo quinto, poi quiete. */
@keyframes in-battito-riposo {
    0%, 22%, 100% { transform: scale(1); }
    5% { transform: scale(1.2); }
    10% { transform: scale(0.98); }
    15% { transform: scale(1.14); }
}

@media (prefers-reduced-motion: reduce) {
    .in-voce-cuore > a::before,
    .in-voce-cuore > a:hover::before,
    .in-voce-cuore > a:focus-visible::before {
        animation: none;
    }
}

/* Il bottone dell'iscrizione: rosso pieno, la busta e la scritta. E' l'unica
 * cosa colorata della banda, ed e' giusto che lo sia: e' l'unica che chiede
 * qualcosa al lettore. */
.in-iscrizione-bottone {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--in-s2);
    min-height: 1.75rem;
    padding: 0 var(--in-s4);
    background: var(--in-marchio);
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.in-iscrizione-bottone:hover,
.in-iscrizione-bottone:focus-visible {
    background: var(--in-marchio-vivo);
    color: #ffffff;
}

.in-iscrizione-busta { flex: 0 0 auto; }

/* ---------------------------------------------------- banda 2: la testata */

/* TRE COLONNE, LE DUE LATERALI UGUALI.
 *
 * `1fr auto 1fr`: il marchio prende quello che gli serve e le due colonne ai
 * lati si dividono il resto in parti uguali. E' l'unico modo per avere il
 * marchio al centro VERO della pagina qualunque sia la lunghezza del motto o
 * della data: con un flex centrato, un motto piu' lungo lo spingerebbe a
 * destra. */
.in-testata-dentro {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--in-s5);
    /* L'altezza la fa il respiro, non un'altezza minima: il respiro si
     * comprime insieme al resto quando la testata si assottiglia, un'altezza
     * minima invece vincerebbe sull'altezza massima e la terrebbe aperta. */
    padding-block: 3.25rem;
    background: var(--in-fondo);
}

.in-testata-sinistra,
.in-testata-destra {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.in-testata-destra { justify-self: end; }

.in-marchio-collegamento {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    color: var(--in-testo);
    text-decoration: none;
}

.in-marchio-collegamento svg {
    display: block;
    /* Al centro il marchio puo' crescere: 440 pixel nel mockup approvato su
     * uno schermo da 1440, e non meno di 256 sulle finestre strette. */
    width: clamp(16rem, 30vw, 27.5rem);
    height: auto;
}

/* Il motto: corsivo del carattere dei titoli, su due righe. La larghezza
 * massima e' cio' che lo manda a capo nel punto giusto senza un <br> scritto
 * nel testo, che la redazione non potrebbe governare. */
.in-motto {
    max-width: 11.5em;
    /* Righe bilanciate: «Il contesto, le cause / e le conseguenze» invece di
     * una riga lunga e una parola sola sotto. */
    text-wrap: balance;
    margin: 0;
    font-family: var(--in-titoli);
    font-style: italic;
    font-size: 1.0625rem;
    line-height: 1.4;
    color: var(--in-testo-motto);
}

/* ROMA, LA DATA E L'ORA.
 *
 * Stanno sopra il globo, e i punti dietro le lettere ne disturberebbero la
 * lettura. Invece di un riquadro bianco, che taglierebbe il globo con uno
 * spigolo, una schiarita radiale senza contorni: i punti si diradano dove c'e'
 * il testo e restano pieni tutto intorno. */
.in-luogo-ora {
    padding: var(--in-s3) 0 var(--in-s3) var(--in-s6);
    text-align: right;
    background: radial-gradient(closest-side, rgb(255 255 255 / 0.96), rgb(255 255 255 / 0.85) 60%, rgb(255 255 255 / 0));
}

.in-luogo-ora p { margin: 0; }

.in-luogo {
    margin-bottom: var(--in-s1) !important;
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-micro);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--in-marchio);
}

.in-data {
    font-family: var(--in-titoli);
    font-size: 1.1875rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--in-testo);
}

/* La riga dell'ora c'e' sempre e occupa sempre il suo spazio, ma si vede solo
 * quando lo script l'ha riempita: cosi' la testata non cambia altezza e non
 * compare mai un «ore» senza numeri. */
.in-ora {
    font-family: var(--in-interfaccia);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--in-testo);
    visibility: hidden;
}

.in-ora.is-pronta { visibility: visible; }

/* IL GLOBO.
 *
 * Sfondo, non illustrazione: sta dietro alle tre colonne, appoggiato a
 * destra, centrato in verticale e piu' alto della banda, che lo taglia sopra
 * e sotto. La maschera lo fa svanire verso sinistra, cosi' non ha mai un
 * bordo netto dal lato del marchio.
 *
 * Il contenitore e' un quadrato di 340 pixel. Dentro c'e' l'immagine ferma;
 * quando lo script ha il primo fotogramma, il canvas prende il suo posto
 * (classe `is-vivo`). */
.in-globo {
    position: absolute;
    top: 50%;
    right: max(0px, calc(var(--in-margine-laterale) - 2.5rem));
    z-index: 0;
    width: 21.25rem;
    height: 21.25rem;
    translate: 0 -50%;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 60%);
    mask-image: linear-gradient(to right, transparent 0%, #000 60%);
}

.in-globo img,
.in-globo canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.in-globo.is-vivo .in-globo-fermo {
    visibility: hidden;
    /* Sparisce solo quando il canvas e' gia' tutto visibile (0.26.0). */
    transition: visibility 0s linear 240ms;
}

/* 0.26.0: il canvas entra in dissolvenza sopra l'immagine ferma. Se il globo
 * riprende da un angolo diverso da quello dell'immagine (si arriva da
 * un'altra pagina), il passaggio e' una dissolvenza e non un salto. */
.in-globo canvas {
    opacity: 0;
    transition: opacity 240ms ease;
}

.in-globo.is-vivo canvas { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .in-globo canvas { transition: none; }
}

/* ------------------------------------------------------ la navigazione
 *
 * QUATTORDICI VOCI NON STANNO ACCANTO AL LOGO. I nomi per esteso delle tredici
 * categorie madri fanno 349 caratteri: circa 2.900 pixel di solo testo, su una
 * barra che ne ha 1.320. Per questo due cose: nel menu' le voci portano
 * l'«etichetta di navigazione» corta dell'editor dei menu' (l'archivio tiene il
 * nome per esteso), e la navigazione sta su una riga propria sotto la testata,
 * come in un giornale.
 */

/* ------------------------------------------- banda 3: navigazione e ricerca */

/* LA TENDINA E' LARGA QUANTO LA FINESTRA E SCENDE DA QUI.
 *
 * L'ancora dei pannelli e' questa banda, non il contenuto che ci sta dentro:
 * cosi' il fondo scuro arriva ai due bordi dello schermo e la tendina diventa
 * una banda, non un riquadro appoggiato in mezzo. Il contenuto dentro resta
 * allineato al marchio e alle voci — un fondo che sborda e un testo che sborda
 * sono due cose diverse. */
.in-barra {
    position: relative;
    z-index: 1;
}

/* IL DOPPIO FILETTO E LA RIGA SOTTO.
 *
 * Il filetto spesso con il sottile sotto e' il segno dei quotidiani: separa la
 * testata dal giornale. Sta nella larghezza del contenuto e non da bordo a
 * bordo, come le righe di una pagina stampata. E' disegnato su questa banda,
 * che e' ancorata ai pannelli del menu', con un calcolo che lo allinea al
 * contenuto senza dover rendere posizionato il contenitore interno: farlo
 * sposterebbe l'ancora dei pannelli. */
.in-barra::before,
.in-barra::after {
    content: "";
    position: absolute;
    inset-inline: max(var(--in-margine-laterale), calc((100% - var(--in-larghezza-piena)) / 2));
    pointer-events: none;
}

.in-barra::before {
    top: 0;
    height: 9px;
    border-top: 5px solid var(--in-testo);
    border-bottom: 1px solid var(--in-testo);
    transition: opacity 220ms ease;
}

.in-barra::after {
    bottom: 0;
    border-bottom: 1px solid var(--in-testo);
}

/* Da aperta la riga sotto la barra la disegna il filetto sottile qui sopra:
 * il bordo da bordo a bordo della testata servirebbe a doppio. Torna quando
 * la testata si assottiglia, insieme al fondo e all'ombra. */
.in-testata:not(.in-testata-ridotta) { border-bottom-color: transparent; }

.in-testata-ridotta .in-barra::before,
.in-testata-ridotta .in-barra::after { opacity: 0; }

/* IL RESPIRO DELLA BARRA.
 *
 * Con il ticker sotto, la navigazione stretta fra due bande si schiacciava: lo
 * spazio bianco intorno a una riga di testo non e' spazio sprecato, e' cio' che
 * dice al lettore che quella riga e' importante. Il padding sta QUI, sul
 * contenitore, e non sulle voci: cosi' l'area cliccabile delle voci non
 * cresce a dismisura e la riga non diventa un bersaglio unico. */
.in-barra-dentro {
    /* IL RESPIRO E' UNA VARIABILE, non un numero ripetuto. Lo usano il
     * contenitore, per il proprio margine interno, e la linguetta, per sapere
     * di quanto sporgere sotto la voce. Assottigliandosi la barra basta
     * cambiarlo qui e i due restano allineati da soli. */
    --in-respiro-barra: var(--in-s3);

    display: flex;
    align-items: center;
    gap: var(--in-s5);
    padding-block: calc(var(--in-respiro-barra) + 9px) var(--in-respiro-barra);
    transition: padding-block 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* LA NAVIGAZIONE AL CENTRO, SOTTO IL MARCHIO.
 *
 * Sullo schermo largo la barra diventa una griglia a tre colonne come la
 * testata: il segno piccolo a sinistra, le voci al centro, la ricerca a
 * destra. Le voci stanno cosi' esattamente sotto il marchio. Sul telefono resta
 * la riga flessibile di prima, con il cassetto. */
@media (min-width: 62rem) {
    .in-barra-dentro {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
    }

    .in-barra-dentro > .in-marchio-piccolo { grid-column: 1; justify-self: start; }
    .in-barra-dentro > .in-navigazione,
    .in-barra-dentro > .in-navigazione-assente { grid-column: 2; margin-inline: 0; }
    .in-barra-dentro > .in-barra-cerca { grid-column: 3; justify-self: end; }

    .in-testata-ridotta .in-barra-dentro { padding-block: var(--in-respiro-barra); }
}

/* La navigazione occupa il posto che avanza, la ricerca resta a destra. */
.in-navigazione { margin-inline-end: auto; }

.in-navigazione {
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-piccolo);
}

.in-nav-elenco {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--in-s5);
    margin: 0;
    padding: 0;
}

.in-nav-voce {
    display: flex;
    align-items: center;
    gap: var(--in-s1);
}

/* LA LINGUETTA.
 *
 * Non una riga che cresce da sinistra — quella e' rimasta sulla barra di
 * servizio, dove le voci sono minute e una riga basta. Qui, sotto ogni voce,
 * sale dal basso una linguetta arrotondata che si appoggia SUL bordo della
 * barra, non sopra di esso: e' la stessa differenza che c'e' fra un segno
 * disegnato sulla pagina e una linguetta di carta che spunta da sotto.
 *
 * COME E' FATTA. Un elemento alto sette pixel, largo quanto la voce, con i due
 * angoli superiori arrotondati piu' della sua meta' altezza: e' quel raggio
 * eccessivo a farla leggere come una linguetta invece che come un rettangolo.
 * Parte nascosta sotto la linea — spostata in giu' di tutta la propria altezza
 * — e sale al suo posto.
 *
 * ANDATA E RITORNO. La transizione sta sullo stato di RIPOSO, non su quello di
 * passaggio: e' questo che fa tornare giu' la linguetta con la stessa dolcezza
 * con cui e' salita. Dichiararla solo su `:hover` la farebbe salire morbida e
 * sparire di scatto — l'errore piu' comune, e si sente.
 *
 * LA POSIZIONE. Il fondo della voce non e' il fondo della barra: in mezzo c'e'
 * il respiro del contenitore. La linguetta si sporge in giu' esattamente di
 * quello, leggendo la stessa variabile: quando la barra si assottiglia
 * scorrendo, il respiro cambia e la linguetta lo segue senza che nessuno debba
 * ricordarsi di aggiornare un secondo numero. */
.in-nav-collegamento {
    position: relative;
    display: inline-block;
    color: var(--in-testo);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    padding-block: var(--in-s4);
    transition: color 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.in-nav-collegamento::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: calc(var(--in-respiro-barra) * -1);
    height: 7px;
    border-radius: 9px 9px 0 0;
    background: var(--in-marchio);
    translate: 0 100%;
    opacity: 0;
    transition:
        translate 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 200ms ease;
    pointer-events: none;
}

.in-nav-collegamento:hover,
.in-nav-collegamento:focus-visible,
.in-nav-collegamento[aria-expanded="true"],
.in-nav-voce.current-menu-item > .in-nav-collegamento {
    color: var(--in-marchio);
}

.in-nav-collegamento:hover::after,
.in-nav-collegamento:focus-visible::after,
.in-nav-collegamento[aria-expanded="true"]::after,
.in-nav-voce.current-menu-item > .in-nav-collegamento::after {
    translate: 0 0;
    opacity: 1;
}

/* Il bottone e' separato dal collegamento: chi vuole l'archivio ci va con un
 * clic, chi vuole guardare dentro apre il pannello. Un elemento solo che fa
 * le due cose ne fa male una. */
.in-nav-piu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--in-raggio);
    background: none;
    color: var(--in-testo-tenue);
    cursor: pointer;
}

.in-nav-piu:hover { color: var(--in-marchio); }

.in-nav-piu-segno {
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
    transition: transform 120ms ease;
}

.in-nav-piu[aria-expanded="true"] .in-nav-piu-segno {
    transform: translateY(25%) rotate(-135deg);
}

.in-nav-piu[aria-expanded="true"] { color: var(--in-marchio); }

/* ------------------------------------------------------------ i pannelli
 *
 * DIFFERENZA DAL BLUEPRINT, VOLUTA. Il blueprint diceva «nel flusso normale,
 * non in sovrimpressione». Provandolo si vede perche' e' sbagliato: un
 * pannello nel flusso spinge in giu' tutta la pagina all'apertura, e chi
 * stava leggendo perde il segno. Il pannello sta quindi sopra il contenuto,
 * ancorato alla testata — ma resta un elemento normale della pagina, non un
 * livello sovrapposto del browser: non serve ne' la Popover API ne' il
 * posizionamento ad ancora, perche' e' largo quanto la testata e non deve
 * schivare nessun bordo.
 */

/* IL PANNELLO E' SCURO. Sotto una testata chiara, un pannello scuro dice «qui
 * si e' aperto qualcosa» senza bisogno di bordi, ombre o linee: e' il contrasto
 * a segnare il confine. E i tredici nomi con i loro numeri, su fondo scuro, si
 * leggono meglio che su bianco — meno luce intorno, meno affaticamento. */
.in-pannello {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 20;
    border-bottom: 3px solid var(--in-marchio);
    background: var(--in-fondo-forte);
    color: var(--in-testo-inverso);
    box-shadow: 0 24px 48px rgb(0 0 0 / 0.22);
}

/* Finche' lo script non dichiara di occuparsene, i pannelli restano visibili:
 * senza JavaScript il menu' e' un elenco di collegamenti, non un vuoto. */
:is(.in-js, .in-nav-viva) .in-pannello {
    display: none;
}

:is(.in-js, .in-nav-viva) .in-pannello.in-aperto {
    display: block;
}

/* L'APERTURA MORBIDA.
 *
 * `display` non si e' mai potuto animare: per anni si e' rimediato con altezze
 * finte e visibilita' ritardate, che lasciano il pannello ingombrante anche da
 * chiuso. `@starting-style` piu' `transition-behavior: allow-discrete` lo
 * fanno in modo dichiarativo: si dice da quali valori partire quando l'elemento
 * compare, e il browser fa il resto.
 *
 * Dove non e' ancora supportato, il pannello compare e sparisce di colpo: si
 * perde l'ammorbidimento, non la funzione. */
:is(.in-js, .in-nav-viva) .in-pannello {
    opacity: 0;
    translate: 0 -10px;
    transition:
        display 220ms,
        opacity 220ms ease-out,
        translate 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-behavior: allow-discrete;
}

:is(.in-js, .in-nav-viva) .in-pannello.in-aperto {
    opacity: 1;
    translate: 0 0;
}

@starting-style {
    :is(.in-js, .in-nav-viva) .in-pannello.in-aperto {
        opacity: 0;
        translate: 0 -10px;
    }
}

.in-pannello-dentro {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--in-s6);
    max-width: calc(var(--in-larghezza-piena) + var(--in-margine-laterale) * 2);
    margin-inline: auto;
    padding: var(--in-s6) var(--in-margine-laterale) var(--in-s7);
}

/* Quando il pannello ha sia le sezioni sia gli articoli — cioe' su una voce
 * singola marcata «espandi» — vanno affiancati. Il megamenu' delle categorie
 * invece ha solo le sezioni e prende tutta la larghezza. */
.in-pannello-dentro:has(.in-pannello-articoli) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}

.in-pannello-titolo {
    margin: 0 0 var(--in-s4);
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgb(247 245 243 / 0.55);
}

.in-pannello ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* LA GRIGLIA DEL MEGAMENU'.
 *
 * Tredici sezioni non stanno in colonne di uguale altezza: alcune hanno due
 * sottocategorie, altre nessuna. Una griglia con colonne automatiche e blocchi
 * che non si spezzano tiene insieme ogni sezione con le sue figlie, e si
 * riorganizza da sola quando la finestra cambia. Niente numeri di colonne
 * scritti a mano: cambierebbero il giorno che nasce la quattordicesima
 * categoria. */
/* COLONNE, NON GRIGLIA.
 *
 * Con una griglia le righe si allineano all'elemento piu' alto: le sezioni
 * senza figlie lasciano sotto di se' il vuoto delle sezioni che ne hanno due,
 * e il pannello si riempie di buchi. Con le colonne del testo gli elementi si
 * impacchettano uno sotto l'altro e il vuoto sparisce. La larghezza di colonna
 * e' dichiarata, non il numero: cosi' il pannello si riorganizza da solo e non
 * va aggiornato il giorno che nasce la quattordicesima categoria. */
.in-pannello-sezioni-elenco {
    columns: 15rem;
    column-gap: var(--in-s6);
}

.in-sezione {
    break-inside: avoid;
    margin-bottom: var(--in-s5);
    min-width: 0;
}

/* La sezione si comporta come una riga del menu' di TM: una barra verticale
 * rossa che scende da sopra, la riga che scivola di lato, e la sottolineatura
 * che cresce sotto il nome. Tre movimenti piccoli, la stessa curva, e nessuno
 * di loro sposta il testo degli altri. */
.in-sezione-nome {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--in-s3);
    color: var(--in-testo-inverso);
    text-decoration: none;
    font-family: var(--in-titoli);
    font-size: var(--in-t-medio);
    font-weight: 600;
    line-height: var(--in-riga-stretta);
    padding-block: var(--in-s2);
    padding-inline-start: 0;
    transition:
        color 200ms ease,
        padding-inline-start 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* La barra verticale: due pixel, ancorata in alto, alta zero. Cresce verso il
 * basso perche' l'origine della trasformazione sta in cima. */
.in-sezione-nome::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 2px;
    background: var(--in-marchio-vivo);
    transform: scaleY(0);
    transform-origin: 50% 0;
    transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.in-sezione-nome:hover,
.in-sezione-nome:focus-visible {
    color: #ffffff;
    padding-inline-start: var(--in-s3);
}

.in-sezione-nome:hover::before,
.in-sezione-nome:focus-visible::before {
    transform: scaleY(1);
}

/* La sottolineatura sta sotto il NOME, non sotto tutta la riga: il numero a
 * destra non deve essere sottolineato insieme. */
.in-sezione-etichetta {
    background-image: linear-gradient(#ffffff, #ffffff);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 2px;
    transition: background-size 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.in-sezione-nome:hover .in-sezione-etichetta,
.in-sezione-nome:focus-visible .in-sezione-etichetta,
.in-sezione-sotto a:hover .in-sezione-etichetta,
.in-sezione-sotto a:focus-visible .in-sezione-etichetta {
    background-size: 100% 1px;
}

/* Le figlie stanno sotto la madre e si vedono che sono figlie: rientrate,
 * piu' leggere, ma cliccabili quanto lei. */
.in-sezione-sotto {
    list-style: none;
    margin: var(--in-s2) 0 0;
    padding: 0 0 0 var(--in-s3);
    border-left: 1px solid rgb(255 255 255 / 0.16);
}

.in-sezione-sotto a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--in-s3);
    color: rgb(247 245 243 / 0.72);
    text-decoration: none;
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-piccolo);
    padding-block: var(--in-s1);
    padding-inline-start: 0;
    transition:
        color 200ms ease,
        padding-inline-start 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.in-sezione-sotto a:hover,
.in-sezione-sotto a:focus-visible {
    color: #ffffff;
    padding-inline-start: var(--in-s2);
}

/* Il numero e' un'informazione, non un ornamento: dice se vale la pena
 * entrare. Per questo si vede, ma non compete con il nome. */
.in-pannello-quanti {
    flex: 0 0 auto;
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-micro);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: rgb(247 245 243 / 0.45);
}

.in-pannello-articoli-elenco li + li {
    margin-top: var(--in-s3);
    padding-top: var(--in-s3);
    border-top: 1px solid rgb(255 255 255 / 0.16);
}

.in-pannello-articoli-elenco a {
    display: block;
    color: var(--in-testo-inverso);
    text-decoration: none;
}

.in-pannello-articoli-elenco a:hover .in-pannello-articolo-titolo {
    color: #ffffff;
    text-decoration: underline;
}

.in-pannello-articolo-titolo {
    display: block;
    font-family: var(--in-titoli);
    font-size: var(--in-t-base);
    line-height: var(--in-riga-stretta);
}

.in-pannello-articolo-data {
    display: block;
    margin-top: 0.2rem;
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-micro);
    color: rgb(247 245 243 / 0.45);
}

.in-pannello-tutti {
    display: inline-block;
    margin-top: var(--in-s4);
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ffffff;
    border-bottom: 1px solid rgb(255 255 255 / 0.4);
}

/* ------------------------------------------------- il bottone del cassetto */

/* IL BOTTONE DEL MENU'.
 *
 * Niente riquadro intorno: un bordo e uno sfondo lo fanno sembrare un
 * pulsante di modulo, e in una testata sobria stona. Restano il segno e la
 * parola, e il segno e' fatto di righe sottili — un pixel e mezzo, non due —
 * larghe abbastanza da respirare.
 *
 * Aprendosi diventa una croce: la riga di mezzo svanisce, le altre due
 * ruotano e si incontrano. Non e' un vezzo — dice che lo stesso bottone che
 * ha aperto chiude, invece di lasciare cercare dove si chiude. */
.in-nav-apri {
    display: none;
    align-items: center;
    gap: var(--in-s3);
    padding: var(--in-s2) 0 var(--in-s2) var(--in-s2);
    border: 0;
    background: none;
    color: var(--in-testo);
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: color 200ms ease;
}

.in-nav-apri[aria-expanded="true"] { color: var(--in-marchio); }

.in-nav-apri-segno {
    position: relative;
    width: 1.25rem;
    height: 1.5px;
    background: currentColor;
    transition:
        background-color 180ms ease,
        transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.in-nav-apri-segno::before,
.in-nav-apri-segno::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: 1.5px;
    background: currentColor;
    transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.in-nav-apri-segno::before { top: -6px; }
.in-nav-apri-segno::after { top: 6px; }

/* Da aperto: la riga di mezzo sparisce diventando trasparente — non
 * rimpicciolendo, cosi' le altre due non si spostano — e le altre due
 * tornano al centro e ruotano. */
.in-nav-apri[aria-expanded="true"] .in-nav-apri-segno {
    background: transparent;
}

.in-nav-apri[aria-expanded="true"] .in-nav-apri-segno::before {
    transform: translateY(6px) rotate(45deg);
}

.in-nav-apri[aria-expanded="true"] .in-nav-apri-segno::after {
    transform: translateY(-6px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
    .in-nav-apri-segno,
    .in-nav-apri-segno::before,
    .in-nav-apri-segno::after { transition-duration: 1ms; }
}

/* Il ticker sparisce quando il menu' e' aperto: due strisce di notizie sotto
 * un menu' aperto sono rumore sopra rumore. */
.in-menu-aperto .in-ticker {
    max-height: 0;
    opacity: 0;
    border-top-width: 0;
}

/* --------------------------------------------------- il telefono
 *
 * «Megamenu'» sul telefono non vuol dire niente: non c'e' larghezza per le
 * colonne e non c'e' il passaggio del mouse. Le stesse voci diventano un
 * cassetto con le sezioni in fisarmonica. La marcatura e' la stessa: due
 * marcature separate divergono nel giro di un mese.
 */

@media (max-width: 61.99rem) {

    .in-navigazione {
        flex: 0 0 auto;
        margin-inline-start: auto;
    }

    .in-nav-apri { display: inline-flex; }

    .in-nav-corpo {
        position: absolute;
        inset-inline: 0;
        top: 100%;
        z-index: 30;
        display: none;
        max-height: calc(100dvh - 6rem);
        overflow-y: auto;
        padding: var(--in-s4) var(--in-margine-laterale) var(--in-s6);
        border-top: 1px solid var(--in-bordo);
        border-bottom: 3px solid var(--in-marchio);
        background: var(--in-fondo);
        box-shadow: 0 18px 32px rgb(0 0 0 / 0.12);
    }

    .in-cassetto-aperto .in-nav-corpo { display: block; }

    /* Senza JavaScript il cassetto non si aprirebbe mai: allora resta aperto,
     * ed e' un elenco di collegamenti sotto la testata. */
    html:not(.in-js) .in-navigazione:not(.in-nav-viva) .in-nav-corpo {
        position: static;
        display: block;
        max-height: none;
        box-shadow: none;
    }

    .in-nav-elenco {
        display: block;
    }

    /* LA VOCE VA A CAPO PRIMA DEL PANNELLO.
     *
     * Sul telefono la voce e' una riga flessibile — titolo a sinistra,
     * triangolino a destra — e il pannello e' il TERZO elemento di quella
     * riga: senza dirglielo si infila accanto agli altri due e si ritrova
     * largo duecentotrenta pixel su uno schermo da quattrocento. Deve
     * scendere sotto e prendersi tutta la larghezza. */
    .in-nav-voce {
        flex-wrap: wrap;
        justify-content: space-between;
        border-bottom: 1px solid var(--in-bordo);
    }

    .in-nav-voce .in-pannello {
        flex: 1 0 100%;
        order: 3;
    }

    .in-nav-collegamento {
        flex: 1 1 auto;
        padding-block: var(--in-s3);
        border-bottom: 0;
    }

    .in-nav-piu {
        width: 2.75rem;
        height: 2.75rem; /* bersaglio da dito, non da mouse */
    }

    /* IL PANNELLO CHIARO VUOLE TESTI SCURI.
     *
     * Sul desktop il pannello e' nero e i suoi testi sono chiari. Sul telefono
     * il fondo torna chiaro — e' dentro il cassetto, un pannello nero dentro
     * una pagina bianca sarebbe un buco — ma i testi restavano quelli del
     * fondo nero: bianchi su chiaro, cioe' invisibili. Qui si rovescia tutto
     * quello che il pannello scuro aveva schiarito. */
    .in-pannello {
        position: static;
        border: 0;
        box-shadow: none;
        background: var(--in-fondo-tenue);
        color: var(--in-testo);
    }

    .in-pannello .in-sezione-nome {
        color: var(--in-testo);
    }

    .in-pannello .in-sezione-nome:hover,
    .in-pannello .in-sezione-nome:focus-visible {
        color: var(--in-marchio);
    }

    .in-pannello .in-sezione-etichetta {
        background-image: linear-gradient(var(--in-marchio), var(--in-marchio));
    }

    .in-pannello .in-sezione-sotto {
        border-left-color: var(--in-bordo);
    }

    .in-pannello .in-sezione-sotto a {
        color: var(--in-testo-tenue);
    }

    .in-pannello .in-sezione-sotto a:hover,
    .in-pannello .in-sezione-sotto a:focus-visible {
        color: var(--in-marchio);
    }

    .in-pannello .in-pannello-quanti {
        color: var(--in-testo-tenue);
    }

    .in-pannello .in-pannello-titolo {
        color: var(--in-testo-tenue);
    }

    .in-pannello .in-pannello-articoli-elenco a,
    .in-pannello .in-pannello-tutti {
        color: var(--in-testo);
    }

    .in-pannello .in-pannello-articoli-elenco li + li {
        border-top-color: var(--in-bordo);
    }

    .in-pannello .in-pannello-articolo-data {
        color: var(--in-testo-tenue);
    }

    .in-pannello-dentro {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--in-s4);
        padding: var(--in-s4);
    }

    .in-pannello-dentro:has(.in-pannello-articoli),
    .in-pannello-sezioni-elenco {
        grid-template-columns: minmax(0, 1fr);
    }

    .in-sezione-nome,
    .in-sezione-sotto a,
    .in-pannello-articoli-elenco a {
        padding-block: var(--in-s2);
    }
}

/* Con il cassetto aperto la pagina sotto non deve scorrere. */
.in-blocco-scorrimento {
    overflow: hidden;
}

/* Chi ha chiesto meno movimento non vede ruotare il triangolino. */
@media (prefers-reduced-motion: reduce) {
    .in-nav-piu-segno { transition: none; }

    /* Chi ha chiesto meno movimento non vede crescere ne' scivolare niente:
     * i traguardi restano gli stessi, ci si arriva senza percorso. */
    .in-nav-collegamento,
    .in-nav-collegamento::after,
    .in-sezione-nome,
    .in-sezione-nome::before,
    .in-sezione-etichetta,
    .in-sezione-sotto a {
        transition-duration: 1ms;
    }

    /* Chi ha chiesto meno movimento riceve una dissolvenza breve, non uno
     * scorrimento: il pannello compare, senza scendere. */
    :is(.in-js, .in-nav-viva) .in-pannello {
        translate: none;
        transition-duration: 90ms;
    }

    @starting-style {
        :is(.in-js, .in-nav-viva) .in-pannello.in-aperto { translate: none; }
    }
}

/* Un avviso, non un menu: finche la navigazione vera non esiste, la testata
 * dice che manca invece di fingere. Sparisce da sola quando il menu c'e. */
.in-navigazione-assente {
    margin-inline-start: auto;
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-micro);
    color: var(--in-testo-tenue);
}

/* ====================================================== articolo */

/*
 * Il contenitore dell'articolo vale **esattamente** la larghezza dell'impianto
 * editoriale di IEF, centrato. Non e una scelta grafica: e un vincolo, e
 * l'ho pagato due volte prima di misurarlo.
 *
 * PERCHE'. I moduli di fine articolo di IEF — box sostegno, chiusura — usano
 * insieme due tecniche di centratura: margini automatici **e** il salto
 * `left: 50%` piu `translateX(-50%)`. Le due si annullano a vicenda solo se il
 * genitore e largo quanto il modulo, cioe 1320 pixel: `left: 50%` vale 660 e
 * la traslazione ne toglie altrettanti.
 *
 * Con un genitore largo quanto la finestra le due non si annullano piu, e ogni
 * modulo scivola a destra di meta della differenza. Su uno schermo da 2114
 * pixel erano 397 di spostamento, misurati.
 *
 * Non era un difetto di IEF: era un impianto scritto per vivere dentro il
 * contenitore di Flatsome, che quella misura ce l'aveva. Dalla 0.2.0 non
 * gliela «ridiamo» piu' di nascosto: gliela DICHIARIAMO, con
 * `--ief-layout-width` in tokens.css. Questa larghezza e quella sono la stessa
 * cosa per costruzione, non per coincidenza mantenuta a mano.
 *
 * La stessa larghezza fa tornare anche il resto: l'indice si centra,
 * l'intestazione dell'articolo esce a tutta pagina come deve, i pulsanti di
 * condivisione prendono il 100% del contenitore e non della finestra.
 */
.in-articolo {
    width: min(var(--in-larghezza-impianto), calc(100vw - 30px));
    margin-inline: auto;
    padding-block: var(--in-s7) var(--in-s8);
}

/*
 * La larghezza di lettura si mette sui figli diretti dell'articolo.
 *
 * Quando l'indice non c'e, i paragrafi sono figli diretti e prendono questa
 * regola. Quando IEF costruisce le sue colonne, li sposta dentro
 * `.ief-article-column` o `.ief-pagina-colonna` e smettono di essere figli
 * diretti: la regola si disattiva da sola. E la struttura a decidere.
 *
 * DALLA 0.21.0 L'ELENCO DELLE ECCEZIONI E' ROVESCIATO, E QUESTA E' LA
 * CORREZIONE DI UN DIFETTO CHE E' STATO IN PRODUZIONE PER MESI.
 *
 * Prima diceva `:not([class*="ief-"])`, cioe' «tutto tranne le cose di IEF».
 * Sembrava prudente ed era sbagliato, perche' sotto quel «tutto» cadevano due
 * famiglie di elementi diversissime:
 *
 *   - gli IMPIANTI, che costruisce il codice di IEF e che devono restare
 *     larghi: l'intestazione dell'articolo, la griglia dell'indice, i pulsanti
 *     di condivisione, l'impianto delle pagine istituzionali. Sono quattro,
 *     cambiano una volta all'anno;
 *
 *   - i FORMATI EDITORIALI, che applica chi scrive dal menu Innovando
 *     dell'editor: occhiello, citazioni, riquadri, elenchi puntati, numeri
 *     evidenziati, schede. Sono una dozzina e crescono a ogni versione.
 *
 * Escludendo tutto cio' che comincia per `ief-` si escludevano anche i secondi,
 * che di larghezza propria non ne hanno nessuna: finivano a tutta
 * l'impaginazione mentre il testo intorno restava nella misura di lettura.
 * Sugli articoli non si vedeva, perche' li' il testo sta dentro una colonna di
 * IEF e questa regola non si applica proprio. Sulle pagine si vedeva eccome, e
 * l'occhiello della pagina Newsletter partiva due centimetri piu' a sinistra di
 * tutto il resto.
 *
 * Adesso si escludono **gli impianti**, uno per uno e per nome. Sono pochi,
 * sono stabili, e li costruisce il codice: un formato nuovo nel menu
 * dell'editor rientra nella misura da solo, senza che nessuno debba tornare
 * qui. Un impianto nuovo invece e' una decisione, e si aggiunge a mano — che e'
 * esattamente il genere di cosa che si vuole fare a mano.
 */
.in-post > *:not(.ief-single-hero):not(.ief-toc-grid):not(.ief-single-actions):not(.ief-pagina) {
    width: min(100% - var(--in-margine-laterale) * 2, var(--in-larghezza-contenuto));
    margin-inline: auto;
}

/*
 * Nota per chi legge in futuro: nella 0.1.2 qui c'era una regola che dava una
 * larghezza ai pulsanti di condivisione, perche finivano appiccicati al bordo
 * sinistro. Era una toppa sul sintomo. Dalla 0.1.3 non serve piu: quei
 * pulsanti dichiarano `width: 100%` e il 100% adesso e il contenitore giusto.
 */

.in-articolo :is(h2, h3) { margin-top: var(--in-s6); }

.in-articolo figure { margin: var(--in-s6) 0; }

.in-articolo figcaption {
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-piccolo);
    line-height: var(--in-riga-media);
    color: var(--in-testo-tenue);
    margin-top: var(--in-s3);
}

.in-articolo blockquote {
    margin: var(--in-s6) 0;
    padding-inline-start: var(--in-s5);
    border-inline-start: 3px solid var(--in-marchio);
    font-family: var(--in-titoli);
    font-size: var(--in-t-medio);
    line-height: var(--in-riga-media);
}

/* Una tabella dentro un articolo non deve mai allargare la pagina: se e piu
 * larga della colonna, scorre lei. */
.in-articolo :is(table, pre) { display: block; max-width: 100%; overflow-x: auto; }

/* ====================================================== elenchi di articoli */

/*
 * Gli elenchi non hanno piu' una scheda propria: usano la carta, come la
 * home. Le regole che stavano qui — occhiello, titolo, sunto, data — sono
 * finite nel blocco «la carta» in fondo al file, dove ce n'e' una sola
 * versione per tutto il sito.
 */

.in-elenco { padding-block: var(--in-s7) var(--in-s8); }

.in-elenco-titolo {
    font-size: var(--in-t-grande);
    padding-bottom: var(--in-s4);
    border-bottom: 2px solid var(--in-fondo-forte);
    margin-bottom: var(--in-s6);
}

/* ====================================================== piede */

/*
 * La citazione in cima al piede.
 *
 * E il punto in cui il giornale dice che cos'e, dopo che il lettore ha finito
 * di leggere.
 *
 * TRE CORREZIONI DEL 10 SETTEMBRE, tutte con lo stesso movente.
 *
 * 1. Il fondo della fascia e' leggermente piu' chiaro del piede. Non per
 *    decorazione: un manifesto e un colofone sono due cose diverse, e finche'
 *    stavano sullo stesso nero sembravano lo stesso blocco diviso da una
 *    riga.
 *
 * 2. Tutto e' allineato a sinistra, occhiello compreso. Prima l'occhiello
 *    era centrato rispetto alla pagina e il testo rispetto a se stesso: due
 *    centri diversi, che a occhio si leggono come un errore. Il piede sotto
 *    e' una griglia allineata a sinistra, e ora la fascia le da' ragione.
 *
 * 3. La citazione ha le virgolette. Sono caporali, quelle italiane, e sono
 *    appese fuori dal testo: dicono «questa e' una citazione» prima che si
 *    cominci a leggere.
 */
.in-citazione {
    /* A tutta larghezza dentro il piede: il margine negativo annulla il
     * respiro laterale della fascia, il padding lo restituisce al contenuto.
     * Cosi' il colore arriva ai bordi dello schermo e il testo no. */
    margin-inline: calc(var(--in-margine-laterale) * -1);
    padding-block: var(--in-s8);
    padding-inline: var(--in-margine-laterale);
    margin-bottom: var(--in-s8);
    background: var(--in-piede-fascia);
    text-align: left;
}

/* Quando la citazione c'e', comincia in cima al piede senza uno stacco di
 * nero sopra. Quando non c'e' — e puo' non esserci — il piede tiene il suo
 * respiro come prima. */
.in-piede:has(.in-citazione) { padding-top: 0; }

.in-citazione-dentro {
    max-width: var(--in-larghezza-piena);
    margin-inline: auto;
}

.in-citazione-titolo {
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-micro);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--in-piede-accento);
    margin: 0 0 var(--in-s4);
    /* Stessa rientranza della citazione: il caporale resta appeso fuori, e
     * l'occhiello e il testo condividono un solo bordo sinistro. Due bordi
     * sinistri diversi a due righe di distanza si leggono come un errore
     * anche quando non lo sono. */
    padding-left: clamp(1.75rem, 4vw, 3.25rem);
}

.in-citazione-testo {
    position: relative;
    margin: 0;
    padding: 0 0 0 clamp(1.75rem, 4vw, 3.25rem);
    border: 0;
}

/* Il caporale appeso. La barra e la stringa vuota danno al segno un testo
 * alternativo nullo: chi legge con la sintesi vocale sente la citazione, non
 * «virgolette aperte». */
.in-citazione-testo::before {
    content: "\00AB" / "";
    position: absolute;
    top: -0.12em;
    left: 0;
    font-family: var(--in-titoli);
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1;
    color: var(--in-piede-accento);
    pointer-events: none;
}

.in-citazione-testo p {
    font-family: var(--in-titoli);
    font-size: var(--in-t-medio);
    line-height: var(--in-riga-larga);
    color: var(--in-piede-testo);
    max-width: 52rem;
    margin: 0;
    text-wrap: pretty;
}

/* Il caporale di chiusura sta attaccato all'ultima parola, come in tipografia. */
.in-citazione-testo p::after {
    content: "\00A0\00BB" / "";
    color: var(--in-piede-accento);
}


.in-piede {
    background: var(--in-piede-fondo);
    color: var(--in-piede-testo);
    padding-block: var(--in-s8) var(--in-s6);
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-piccolo);
    line-height: var(--in-riga-media);
}

/*
 * IL FILO ROSSO SOTTO I COLLEGAMENTI.
 *
 * Entra da sinistra ed esce a destra: cresce con l'origine a sinistra, si
 * ritira con l'origine a destra. Il movimento non torna indietro, prosegue —
 * ed e' la differenza fra un collegamento che risponde e uno che si
 * corregge.
 *
 * Non si usa `text-decoration`: sottolineare e togliere la sottolineatura e'
 * uno scatto, e non si puo' far correre. Un pseudo-elemento si', e in piu'
 * si stacca dalle discendenti delle lettere invece di attraversarle.
 */
.in-piede a {
    position: relative;
    color: var(--in-piede-testo);
    text-decoration: none;
}

.in-piede a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -2px;
    height: 2px;
    background: var(--in-piede-accento);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 340ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.in-piede a:hover::after,
.in-piede a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
}

@media (prefers-reduced-motion: reduce) {
    .in-piede a::after { transition: none; }
}

/* I social sono bottoni, non collegamenti di testo: il filo li
 * attraverserebbe sotto il bordo. */
.in-social a::after { content: none; }

/*
 * CINQUE COLONNE, DICHIARATE.
 *
 * Marchio, editore, identita', trasparenza, social. Su schermo largo stanno su
 * una riga sola e la riga si dichiara, non si lascia accomodare: con
 * `auto-fit` bastava una colonna in piu' o un titolo lungo perche' l'ultima
 * andasse a capo e il piede si spezzasse in due blocchi sghembi, con il
 * marchio in alto a sinistra e due colonne orfane sotto.
 *
 * Il marchio ha una misura sua perche' e' un'immagine e non un elenco: le
 * quattro colonne di testo si dividono quello che resta in parti uguali.
 *
 * La soglia e' 75rem e non 62: misurato a 1024 pixel, cinque colonne dichiarate
 * valevano 159 pixel l'una e «Feedback e rettifiche» andava a capo due volte.
 * Sotto quella misura si torna ad accomodare, ed e' giusto: li' l'ordine
 * diventa verticale e le colonne diventano blocchi uno sotto l'altro.
 */
.in-piede-griglia {
    max-width: var(--in-larghezza-piena);
    margin-inline: auto;
    display: grid;
    gap: var(--in-s7);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    align-items: start;
}

@media (min-width: 75rem) {
    .in-piede-griglia {
        grid-template-columns: 13rem repeat(4, minmax(0, 1fr));
        gap: var(--in-s6) var(--in-s5);
    }
}

.in-piede-marchio svg { width: 11rem; height: auto; display: block; }

.in-piede-titolo {
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-micro);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--in-piede-tenue);
    margin: 0 0 var(--in-s4);
}

.in-piede p { margin: 0 0 var(--in-s3); }

.in-social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--in-s2);
}

.in-social a {
    display: inline-block;
    padding: var(--in-s2) var(--in-s3);
    border: 1px solid var(--in-piede-riga);
    border-radius: var(--in-raggio);
    text-decoration: none;
    font-size: var(--in-t-micro);
    letter-spacing: 0.04em;
    transition: border-color 220ms ease, background-color 220ms ease, color 220ms ease;
}

.in-social a:hover,
.in-social a:focus-visible {
    border-color: var(--in-piede-accento);
    color: var(--in-piede-accento);
    background: #241f1a;
}

.in-piede-chiusura {
    max-width: var(--in-larghezza-piena);
    margin: var(--in-s7) auto 0;
    padding-top: var(--in-s5);
    border-top: 1px solid var(--in-piede-riga);
    display: flex;
    flex-wrap: wrap;
    gap: var(--in-s4) var(--in-s6);
    justify-content: space-between;
    font-size: var(--in-t-micro);
    color: var(--in-piede-tenue);
}

.in-piede-chiusura p { margin: 0; }

/*
 * LE PAGINE LEGALI, IN FONDO.
 *
 * Prendono tutta la riga e stanno sopra il copyright, non accanto: appaiate al
 * testo lungo del copyright finirebbero schiacciate a destra e a capo sul
 * telefono, dove sono cinque voci su due righe. `flex-basis: 100%` le stacca
 * senza bisogno di un contenitore in piu'.
 *
 * Il punto fra una voce e l'altra non e' decorazione: cinque collegamenti
 * separati solo da spazio si leggono come una riga sola e il lettore non capisce
 * dove finisce uno e comincia l'altro.
 */
.in-piede-legali {
    flex: 1 0 100%;
    margin-bottom: var(--in-s4);
}

.in-piede-legali ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--in-s3);
}

.in-piede-legali li + li::before {
    content: "·";
    margin-inline-end: var(--in-s3);
    opacity: 0.45;
}

/* ====================================================== ricerca e 404 */

.in-modulo-ricerca { display: flex; gap: var(--in-s2); max-width: 28rem; }

.in-modulo-ricerca input[type="search"] {
    flex: 1;
    font: inherit;
    font-family: var(--in-interfaccia);
    padding: var(--in-s3) var(--in-s4);
    border: 1px solid var(--in-bordo-forte);
    border-radius: var(--in-raggio);
    background: var(--in-fondo);
    color: var(--in-testo);
}

.in-bottone {
    font-family: var(--in-interfaccia);
    font-weight: 600;
    font-size: var(--in-t-piccolo);
    padding: var(--in-s3) var(--in-s5);
    border: 1px solid var(--in-marchio);
    border-radius: var(--in-raggio);
    background: var(--in-marchio);
    color: #fff;
    cursor: pointer;
}

.in-bottone:hover { background: var(--in-marchio-vivo); border-color: var(--in-marchio-vivo); }

.in-vuoto { padding-block: var(--in-s8) var(--in-s9); }
.in-vuoto p { max-width: var(--in-misura); color: var(--in-testo-tenue); }

/* ====================================================== paginazione */

.in-paginazione {
    margin-top: var(--in-s7);
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-piccolo);
}

.in-paginazione .page-numbers {
    display: inline-block;
    padding: var(--in-s2) var(--in-s4);
    border: 1px solid var(--in-bordo);
    border-radius: var(--in-raggio);
    text-decoration: none;
    margin-inline-end: var(--in-s2);
}

.in-paginazione .current {
    background: var(--in-fondo-forte);
    border-color: var(--in-fondo-forte);
    color: var(--in-testo-inverso);
}

/* ====================================================== le rubriche */

.in-rubriche {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: var(--in-s5);
    width: min(100% - var(--in-margine-laterale) * 2, var(--in-larghezza-larga));
    margin: var(--in-s7) auto 0;
    padding: 0;
}

.in-rubrica {
    display: flex;
    flex-direction: column;
    gap: var(--in-s2);
    padding: var(--in-s4);
    border: 1px solid var(--in-bordo);
    border-top: 3px solid var(--in-marchio);
    background: var(--in-fondo);
}

.in-rubrica-titolo {
    margin: 0;
    font-family: var(--in-titoli);
    font-size: var(--in-t-medio);
    line-height: var(--in-riga-stretta);
}

.in-rubrica-titolo a { color: var(--in-testo); text-decoration: none; }
.in-rubrica-titolo a:hover { color: var(--in-marchio); text-decoration: underline; }

.in-rubrica-sunto {
    margin: 0;
    font-size: var(--in-t-piccolo);
    color: var(--in-testo-tenue);
    line-height: var(--in-riga-media);
}

/* Il numero sta in fondo alla scheda anche quando i sunti hanno lunghezze
 * diverse: senza questo, in una griglia le schede si sfalsano e l'occhio
 * perde la riga. */
.in-rubrica-quanti {
    margin: auto 0 0;
    padding-top: var(--in-s2);
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-micro);
    font-variant-numeric: tabular-nums;
    color: var(--in-testo-tenue);
}

/* Una voce contenitore che non porta da nessuna parte e' un bottone, non un
 * collegamento: deve pero' vedersi identica alle altre voci della barra. */
.in-nav-collegamento--bottone {
    display: inline-flex;
    align-items: center;
    gap: var(--in-s2);
    border: 0;
    /* Senza questa riga il bottone si porta dietro il fondo grigio che i
     * browser danno ai bottoni, e le due voci con la tendina si vedevano come
     * riquadri grigi in mezzo alle altre. */
    background: none;
    /* Solo i margini ORIZZONTALI: quelli verticali arrivano dalla regola di
     * base e devono restare, altrimenti il bottone e' piu' basso dei
     * collegamenti e la sua linguetta spunta a un'altezza diversa. */
    padding-inline: 0;
    font: inherit;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--in-testo);
    cursor: pointer;
}

.in-nav-collegamento--bottone .in-nav-piu-segno {
    color: currentColor;
}

.in-nav-collegamento--bottone[aria-expanded="true"] .in-nav-piu-segno {
    transform: translateY(25%) rotate(-135deg);
}

/* ============================================ l'iscrizione in testata
 *
 * Dalla 0.24.0 l'iscrizione e' il bottone rosso della banda di servizio: lo
 * stile sta con la banda 1, in cima a questo foglio. Il vecchio blocco con la
 * promessa e il campo non esiste piu'.
 */

/* ============================================ la ricerca nella barra */

.in-barra-cerca { flex: 0 0 auto; }

/* --------------------------------------------------------- il bottone tondo */

.in-cerca-bottone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    /* Dalla 0.24.0 un cerchio di contorno e non un disco rosso: nella barra
     * il rosso c'e' gia' nella linguetta delle voci, e un secondo punto rosso
     * pieno accanto al menu' gli faceva concorrenza. Al passaggio si riempie. */
    border: 1.5px solid var(--in-testo);
    border-radius: 50%;
    background: transparent;
    color: var(--in-testo);
    cursor: pointer;
    transition:
        background-color 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.in-cerca-bottone:hover,
.in-cerca-bottone:focus-visible {
    border-color: var(--in-marchio);
    background: var(--in-marchio);
    color: #ffffff;
    transform: scale(1.06);
}

/* ------------------------------------------------------- la finestra */

.in-cerca-finestra {
    width: min(38rem, calc(100vw - var(--in-margine-laterale) * 2));
    margin: 12vh auto auto;
    padding: 0;
    border: 0;
    border-top: 3px solid var(--in-marchio);
    background: var(--in-fondo);
    color: var(--in-testo);
    box-shadow: 0 32px 64px rgb(0 0 0 / 0.28);
}

/* L'apertura morbida di un elemento del livello superiore ha bisogno di tre
 * cose: `@starting-style` per sapere da dove partire, `allow-discrete` per
 * poter animare `display`, e `overlay` perche' l'elemento resti nel livello
 * superiore per tutta la durata dell'uscita invece di sparire a meta' strada. */
.in-cerca-finestra {
    opacity: 0;
    translate: 0 -12px;
    transition-property: opacity, translate, display, overlay;
    transition-duration: 240ms;
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-behavior: allow-discrete;
}

.in-cerca-finestra[open] {
    opacity: 1;
    translate: 0 0;
}

@starting-style {
    .in-cerca-finestra[open] {
        opacity: 0;
        translate: 0 -12px;
    }
}

.in-cerca-finestra::backdrop {
    background: rgb(22 19 15 / 0);
    transition:
        display 240ms allow-discrete,
        overlay 240ms allow-discrete,
        background-color 240ms ease-out;
}

.in-cerca-finestra[open]::backdrop {
    background: rgb(22 19 15 / 0.62);
}

@starting-style {
    .in-cerca-finestra[open]::backdrop {
        background: rgb(22 19 15 / 0);
    }
}

.in-cerca-dentro { padding: var(--in-s5); }

.in-cerca-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--in-s4);
    margin-bottom: var(--in-s4);
}

.in-cerca-titolo {
    margin: 0;
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-micro);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--in-testo-tenue);
}

.in-cerca-chiudi {
    display: inline-flex;
    padding: var(--in-s1);
    border: 0;
    background: none;
    color: var(--in-testo-tenue);
    cursor: pointer;
    transition: color 200ms ease;
}

.in-cerca-chiudi:hover { color: var(--in-marchio); }

.in-cerca-nota {
    margin: var(--in-s3) 0 0;
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-micro);
    color: var(--in-testo-tenue);
}

/* Il modulo dentro la finestra puo' finalmente essere grande. */
.in-cerca-finestra .in-modulo-ricerca {
    display: flex;
    gap: 0;
}

.in-cerca-finestra .in-modulo-ricerca input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--in-s3) var(--in-s4);
    border: 1px solid var(--in-bordo-forte);
    border-right: 0;
    background: var(--in-fondo);
    font-family: var(--in-titoli);
    font-size: var(--in-t-medio);
    color: var(--in-testo);
}

.in-cerca-finestra .in-modulo-ricerca input[type="search"]:focus {
    outline: 2px solid var(--in-fuoco);
    outline-offset: -2px;
}

.in-cerca-finestra .in-modulo-ricerca .in-bottone {
    flex: 0 0 auto;
    padding: var(--in-s3) var(--in-s5);
    border: 1px solid var(--in-marchio);
    background: var(--in-marchio);
    color: #ffffff;
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 200ms ease;
}

.in-cerca-finestra .in-modulo-ricerca .in-bottone:hover {
    background: var(--in-marchio-vivo);
}

@media (prefers-reduced-motion: reduce) {
    .in-cerca-bottone,
    .in-cerca-finestra { transition-duration: 1ms; }
    .in-cerca-finestra { translate: none; }
    @starting-style {
        .in-cerca-finestra[open] { translate: none; }
    }
}

/* ------------------------------------ il segno che compare scorrendo */

.in-marchio-piccolo {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    flex: 0 0 auto;
    width: 0;
    margin-inline-end: 0;
    opacity: 0;
    transition:
        width 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
        margin-inline-end 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 240ms ease;
}

.in-marchio-piccolo img {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
}

.in-testata-ridotta .in-marchio-piccolo {
    width: 1.75rem;
    margin-inline-end: var(--in-s5);
    opacity: 1;
}

/* ==================================== la testata che si assottiglia */

/* CHE COSA RESTA SCORRENDO.
 *
 * Spariscono la barra di servizio con l'iscrizione e la banda del marchio con
 * il globo, che smette anche di girare. Resta la sola navigazione, piu' stretta, con accanto l'icona del
 * sito al posto del marchio grande.
 *
 * La regola dietro la scelta: in cima alla pagina la testata si PRESENTA, e
 * puo' prendersi quattro bande; a meta' di un articolo da tremila parole deve
 * SERVIRE, e allora una riga basta. Le bande non spariscono di colpo — si
 * comprimono, cosi' il passaggio si vede.
 */
.in-servizio,
.in-testata-dentro {
    overflow: hidden;
    transition:
        opacity 220ms ease,
        max-height 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
        padding-block 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
        margin 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
    max-height: 16rem;
    opacity: 1;
}

.in-testata-ridotta .in-servizio,
.in-testata-ridotta .in-testata-dentro {
    max-height: 0;
    opacity: 0;
    margin-block: 0;
    padding-block: 0;
    border-bottom-width: 0;
}

/* La barra si stringe cambiando la variabile del respiro: il margine interno e
 * la sporgenza della linguetta la leggono tutti e due. */
.in-testata-ridotta .in-barra-dentro {
    --in-respiro-barra: var(--in-s2);
}

/* Chi ha chiesto meno movimento non vede comprimersi niente: la testata
 * cambia e basta. */
@media (prefers-reduced-motion: reduce) {
    .in-servizio,
    .in-testata-dentro,
    .in-marchio-piccolo,
    .in-barra-dentro,
    .in-modulo-ricerca input[type="search"] {
        transition-duration: 1ms;
    }
}

/* ------------------------------------------------------ sullo stretto */

@media (max-width: 61.99rem) {
    /* SUL TELEFONO LA TESTATA SI STRINGE, NON SI SVUOTA.
     *
     * Fino alla 0.23.0 qui la barra di servizio spariva: con quattro bande la
     * testata prendeva il 27% dello schermo prima del primo titolo. Adesso le
     * bande sono tre e la barra alta e' una riga di trentasei pixel che porta
     * l'iscrizione: toglierla vorrebbe dire nascondere proprio la cosa che si
     * vuole misurare. Resta, compatta, con la scritta corta «Iscriviti».
     *
     * Il globo e il motto non ci sono: su quattrocento pixel il globo sarebbe
     * un francobollo grigio e il motto andrebbe su quattro righe. Il marchio
     * sta al centro, e sotto una riga sottile dice Roma, la data e l'ora. */
    .in-servizio-dentro { min-height: 2.25rem; gap: var(--in-s3); }

    .in-servizio-elenco { gap: var(--in-s4); }

    .in-iscrizione-bottone { padding-inline: var(--in-s3); }

    .in-iscrizione-esteso {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .in-testata-dentro {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: var(--in-s2);
        padding-block: var(--in-s5) var(--in-s4);
    }

    .in-globo,
    .in-testata-sinistra { display: none; }

    .in-testata-destra { justify-self: center; }

    .in-marchio-collegamento svg { width: clamp(12rem, 62vw, 17rem); }

    .in-luogo-ora {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: baseline;
        gap: 0 var(--in-s2);
        padding: 0;
        text-align: center;
        background: none;
    }

    .in-luogo { margin: 0 !important; font-size: 0.6875rem; }

    .in-luogo::after,
    .in-data::after {
        content: "·";
        margin-inline-start: var(--in-s2);
        color: var(--in-testo-tenue);
        font-weight: 400;
    }

    .in-data { font-size: 0.9375rem; }

    .in-ora { font-size: 0.8125rem; }

    /* Senza l'ora (niente script) il punto dopo la data resterebbe sospeso. */
    .in-luogo-ora:not(:has(.in-ora.is-pronta)) .in-data::after { content: none; }

    .in-barra-dentro {
        gap: var(--in-s3);
    }

    .in-cerca-finestra { margin-top: 8vh; }
}

/* La sentinella non si vede e non occupa: e' solo un punto che il browser puo'
 * osservare. */
.in-sentinella {
    position: absolute;
    top: 0;
    width: 1px;
    height: 1px;
}

/* ==================================== banda 4: il ticker delle ultime notizie
 *
 * QUI IL CONTRATTO DEI TOKEN SI VEDE ALL'OPERA. Il ticker lo disegna IEF: la
 * sua struttura legge delle variabili — fondo, testo, etichetta, bordi — e noi
 * gliele dichiariamo con i valori del giornale. Non una regola che sovrascrive
 * la sua, non un `!important`: gli diciamo i valori e lui si veste da solo.
 *
 * E' esattamente il rapporto che abbiamo passato due giorni a raddrizzare: il
 * framework sa fare, il tema sa che aspetto avere.
 */

.in-ticker {
    border-top: 1px solid var(--in-bordo);
    background: var(--in-fondo-tenue);
    overflow: hidden;
    max-height: 4rem;
    opacity: 1;
    transition:
        max-height 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 220ms ease;
}

/* Scorrendo il ticker sparisce: le ultime notizie servono a chi arriva, non a
 * chi sta leggendo un articolo da tremila parole. */
.in-testata-ridotta .in-ticker {
    max-height: 0;
    opacity: 0;
    border-top-width: 0;
}

.in-ticker-dentro {
    max-width: calc(var(--in-larghezza-piena) + var(--in-margine-laterale) * 2);
    margin-inline: auto;
    padding-inline: var(--in-margine-laterale);
}

.ief-news-ticker--tema {
    --ief-news-ticker-bg: transparent;
    --ief-news-ticker-fg: var(--in-testo);
    --ief-news-ticker-muted: var(--in-testo-tenue);
    --ief-news-ticker-label-bg: var(--in-marchio);
    --ief-news-ticker-label-fg: #ffffff;
    --ief-news-ticker-border: transparent;
    --ief-news-ticker-border-top-width: 0;
    --ief-news-ticker-border-right-width: 0;
    --ief-news-ticker-border-bottom-width: 0;
    --ief-news-ticker-border-left-width: 0;
    --ief-news-ticker-border-top-color: transparent;
    --ief-news-ticker-border-right-color: transparent;
    --ief-news-ticker-border-bottom-color: transparent;
    --ief-news-ticker-border-left-color: transparent;
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-piccolo);
}

.ief-news-ticker--tema .ief-news-ticker-label {
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-micro);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* IL TICKER E' UNO STRUMENTO, NON UNA PAGINA DEL GIORNALE.
 *
 * Il carattere dei titoli e' la voce che la testata usa quando dice una cosa
 * meditata. Darlo a una striscia che scorre significa dare a un segnale la
 * stessa autorita' di un titolo d'apertura: e' una bugia sulla gerarchia, e
 * l'occhio se ne accorge prima della testa.
 *
 * Si somma una ragione tecnica: un testo che si muove ha bisogno di lettere
 * semplici e aperte. Le grazie a corpo piccolo, mentre scorrono, si impastano.
 *
 * Quindi il ticker parla con il carattere dell'interfaccia, in peso normale,
 * in un grigio caldo invece che nel nero del testo. Il rosso resta uno solo,
 * sull'etichetta: e' l'unico punto che deve chiamare.
 *
 * IEF impone al titolo `font-weight: 780` — quasi un nero pieno. Qui lo si
 * riporta a 400 in modo esplicito: e' una scelta, non una dimenticanza. */
.ief-news-ticker--tema .ief-news-ticker-title {
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-piccolo);
    font-weight: 400;
    letter-spacing: 0.005em;
    line-height: var(--in-riga-stretta);
    color: var(--in-testo-tenue);
}

/* Il separatore fra una notizia e l'altra lo mette gia' IEF, con un pallino
 * che legge `--ief-accent`. Non se ne aggiunge un secondo: qui si dichiara
 * soltanto che quel rosso e' il nostro, non quello del framework. */
.ief-news-ticker--tema {
    --ief-accent: var(--in-marchio);
}

.ief-news-ticker--tema .ief-news-ticker-item {
    min-height: 2.6rem;
    padding-inline: var(--in-s5);
}

.ief-news-ticker--tema .ief-news-ticker-item:hover .ief-news-ticker-title,
.ief-news-ticker--tema .ief-news-ticker-item:focus-visible .ief-news-ticker-title {
    color: var(--in-testo);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* CHI HA CHIESTO MENO MOVIMENTO NON DEVE INSEGUIRE UN TESTO CHE SCAPPA.
 *
 * Un ticker che scorre da solo e' il caso da manuale: per chi ha disturbi
 * vestibolari o difficolta' di lettura e' inutilizzabile. Fermo, resta una
 * striscia di titoli che si scorre a mano — la stessa informazione, senza il
 * movimento. */
@media (prefers-reduced-motion: reduce) {
    .ief-news-ticker--tema .ief-news-ticker-track {
        animation: none;
    }

    .ief-news-ticker--tema .ief-news-ticker-viewport {
        overflow-x: auto;
    }

    /* La seconda copia serve solo a far sembrare infinito lo scorrimento:
     * ferma, e' un doppione che il lettore incontrerebbe davvero. */
    .ief-news-ticker--tema .ief-news-ticker-set[aria-hidden="true"] {
        display: none;
    }

    .in-ticker { transition-duration: 1ms; }
}

@media (max-width: 61.99rem) {
    /* Sul telefono il ticker resta: e' la banda piu' leggera delle quattro e
     * dice al lettore che il giornale e' vivo. */
    .in-ticker-dentro { padding-inline: 0; }
}

/* ============================ la barra appiccicata si stacca dalla pagina */

/* Da ferma la testata e' bianca come la pagina, ed e' giusto: e' la testata
 * del giornale, non un oggetto appoggiato sopra. Appiccicata invece deve
 * dichiararsi, e lo fa in due modi che dicono due cose diverse.
 *
 * Il FONDO — lo stesso della barra di servizio, un colore che il sistema ha
 * gia' — dice «questa e' un'altra superficie».
 *
 * L'OMBRA dice «sta sopra il testo», e serve piu' del colore: fra il bianco
 * della pagina e questo tenue ci sono tre punti percentuali di differenza, e
 * senza ombra un titolo che le scorre sotto sembra tagliato dal bordo invece
 * che passare dietro. */
.in-testata-ridotta {
    background: var(--in-fondo-tenue);
    box-shadow: 0 6px 18px rgb(22 19 15 / 0.10);
    border-bottom-color: transparent;
    transition:
        background-color 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.in-testata {
    transition:
        background-color 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==================================== la barra di WordPress in cima
 *
 * NON E' UN DETTAGLIO DA UTENTI COLLEGATI. La redazione lavora sempre con la
 * barra di amministrazione accesa: sono loro a guardare questo sito piu' di
 * chiunque altro, e per loro la testata appiccicata finiva mezza coperta.
 *
 * WordPress mette la classe `admin-bar` sul corpo della pagina e tiene la
 * propria barra fissa in alto: trentadue pixel sul desktop, quarantasei sotto
 * i 782, e sotto i 600 smette di essere fissa e scorre con la pagina — li'
 * l'offset va tolto, altrimenti si aprirebbe un buco. */

.admin-bar .in-testata {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .in-testata { top: 46px; }
}

@media screen and (max-width: 600px) {
    .admin-bar .in-testata { top: 0; }
}

/* Le voci di servizio nel piede: stessa grammatica delle altre colonne. */
.in-piede-servizi {
    list-style: none;
    margin: 0;
    padding: 0;
}

.in-piede-servizi li + li { margin-top: var(--in-s2); }


/* ========================================================== la prima pagina
 *
 * Due regole guidano tutto quello che segue.
 *
 * LA GERARCHIA E' FATTA DI PROPORZIONI, NON DI COLORI. Un giornale non dice
 * «questo conta di piu'» colorando un riquadro: lo dice con la larghezza, con
 * il corpo del titolo e con l'aria intorno. Il colore qui compare due volte
 * sole — l'occhiello e la fascia della rubrica — e proprio per questo si vede.
 *
 * NIENTE SCATOLE. Le schede non hanno bordi ne' ombre ne' sfondi: sono
 * separate da linee sottili e da spazio, come le colonne di una pagina
 * stampata. Le scatole sono un'abitudine dei pannelli di amministrazione, e
 * su un giornale trasformano la lettura in una scansione di riquadri.
 */

.in-home { padding-block: var(--in-s6) var(--in-s8); }

.in-home > .in-dentro > * + * { margin-top: var(--in-s8); }

/* Il titolo che intesta una fascia — evidenze, sezioni, rubrica, fiume. */
.in-titolo-fascia {
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-piccolo);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--in-testo);
    margin: 0 0 var(--in-s5);
    padding-bottom: var(--in-s3);
    border-bottom: 2px solid var(--in-fondo-forte);
}

.in-titolo-fascia a { color: inherit; text-decoration: none; }
.in-titolo-fascia a:hover { color: var(--in-marchio); }

/* La categoria sopra un titolo. */
.in-occhiello {
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-micro);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--in-marchio);
    margin: 0 0 var(--in-s2);
}

/* Firma e data: la riga piu' silenziosa della pagina. */
.in-riga-servizio {
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-micro);
    color: var(--in-testo-tenue);
    margin: var(--in-s3) 0 0;
}

.in-riga-servizio .in-firma + time::before {
    content: "·";
    margin: 0 0.4em;
    opacity: 0.6;
}

/* ---------------------------------------------------------- il blocco alto */

.in-prima > * + * { margin-top: var(--in-s7); }

/* ----------------------------------------------------------- l'apertura */

.in-apertura {
    display: grid;
    gap: var(--in-s5);
}

@media (min-width: 60rem) {
    /* L'immagine a sinistra e il testo a destra, non l'immagine sopra: su uno
     * schermo largo un'immagine a tutta larghezza spinge il titolo sotto la
     * piega, e il titolo e' la notizia. */
    .in-apertura {
        grid-template-columns: 1.35fr 1fr;
        gap: var(--in-s6);
        align-items: center;
    }
}

.in-apertura-figura {
    display: block;
    overflow: hidden;
    border-radius: var(--in-raggio);
    background: var(--in-fondo-tenue);
}

.in-apertura-immagine {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.in-apertura-figura:hover .in-apertura-immagine { transform: scale(1.03); }

.in-apertura-titolo {
    font-family: var(--in-titoli);
    font-size: var(--in-t-enorme);
    line-height: var(--in-riga-stretta);
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0;
    text-wrap: balance;
}

.in-apertura-titolo a { color: var(--in-testo); text-decoration: none; }
.in-apertura-titolo a:hover { color: var(--in-marchio); }

.in-apertura-sunto {
    font-size: var(--in-t-medio);
    line-height: var(--in-riga-media);
    color: var(--in-testo-tenue);
    margin: var(--in-s4) 0 0;
    max-width: var(--in-misura);
}

/* ------------------------------------------------- evidenze e fondo, sotto */

.in-prima-sotto {
    display: grid;
    gap: var(--in-s6);
}

@media (min-width: 60rem) {
    .in-prima-sotto {
        grid-template-columns: 1.35fr 1fr;
        gap: var(--in-s7);
    }
}

.in-evidenze-elenco {
    list-style: none;
    margin: 0;
    padding: 0;
}

.in-evidenza {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: var(--in-s4);
    align-items: start;
    padding-block: var(--in-s4);
    border-top: 1px solid var(--in-bordo);
}

.in-evidenza:first-child { border-top: 0; padding-top: 0; }

.in-evidenza-figura {
    display: block;
    overflow: hidden;
    border-radius: var(--in-raggio);
    background: var(--in-fondo-tenue);
}

.in-evidenza-immagine {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.in-evidenza-titolo {
    font-family: var(--in-titoli);
    font-size: var(--in-t-base);
    line-height: var(--in-riga-media);
    font-weight: 700;
    margin: 0;
}

.in-evidenza-titolo a { color: var(--in-testo); text-decoration: none; }
.in-evidenza-titolo a:hover { color: var(--in-marchio); }

/* ------------------------------------------------------------- il fondo */

/*
 * IL FONDO E' L'UNICO BLOCCO CON UN FILO A SINISTRA.
 *
 * Serve a dire, prima di leggere, che qui si cambia genere: intorno ci sono
 * notizie, questo e' un'opinione. Un filo verticale costa meno di un riquadro
 * e non spezza la colonna.
 */
.in-fondo {
    border-left: 3px solid var(--in-marchio);
    padding-left: var(--in-s5);
}

.in-fondo-etichetta {
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-micro);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--in-marchio);
    margin: 0 0 var(--in-s3);
}

.in-fondo-titolo {
    font-family: var(--in-titoli);
    font-size: var(--in-t-grande);
    line-height: var(--in-riga-stretta);
    font-weight: 700;
    margin: 0;
    text-wrap: balance;
}

.in-fondo-titolo a { color: var(--in-testo); text-decoration: none; }
.in-fondo-titolo a:hover { color: var(--in-marchio); }

.in-fondo-firma {
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-piccolo);
    font-weight: 600;
    font-style: italic;
    color: var(--in-marchio);
    margin: var(--in-s3) 0 0;
}

.in-fondo-sunto {
    font-size: var(--in-t-base);
    line-height: var(--in-riga-larga);
    color: var(--in-testo-tenue);
    margin: var(--in-s4) 0 0;
}

/* ------------------------------------------------- fasce di sezione */

/* La griglia delle fasce e' la stessa degli elenchi: vedi «la carta». */

/* --------------------------------------------------------- la rubrica */

/*
 * L'unico blocco con un fondo diverso. Le rubriche stanno fuori dal flusso
 * cronologico per decisione editoriale: la pagina lo dice cambiando carta,
 * non aggiungendo una scritta.
 */
.in-banda-rubrica {
    background: var(--in-fondo-tenue);
    border-radius: var(--in-raggio-grande);
    padding: var(--in-s6);
}

@media (min-width: 60rem) {
    .in-banda-rubrica {
        display: grid;
        grid-template-columns: 16rem 1fr;
        gap: var(--in-s7);
        padding: var(--in-s7);
        align-items: start;
    }
}

.in-banda-rubrica-etichetta {
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-micro);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--in-marchio);
    margin: 0 0 var(--in-s2);
}

.in-banda-rubrica .in-titolo-fascia {
    font-family: var(--in-titoli);
    font-size: var(--in-t-grande);
    letter-spacing: -0.01em;
    text-transform: none;
    font-weight: 700;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: var(--in-s3);
}

.in-banda-rubrica-descrizione {
    font-size: var(--in-t-piccolo);
    line-height: var(--in-riga-media);
    color: var(--in-testo-tenue);
    margin: 0;
}

.in-banda-rubrica-tutti {
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-piccolo);
    margin: var(--in-s4) 0 0;
}

.in-banda-rubrica-tutti a { color: var(--in-marchio); }

/* ------------------------------------------------------------ il fiume */

.in-fiume .in-schede { gap: var(--in-s6) var(--in-s6); }

/* Sul telefono la miniatura dell'evidenza cede spazio al titolo: e' il
 * titolo che fa scegliere, la miniatura accompagna. */
@media (max-width: 40rem) {
    .in-evidenza { grid-template-columns: 5rem 1fr; gap: var(--in-s3); }
}


/* ================================================================ la carta
 *
 * L'unica scheda di articolo del sito: home, fasce, fiume, archivi, ricerca.
 * Prima erano tre, e tre schede per lo stesso oggetto sono tre occasioni di
 * divergere.
 *
 * La forma viene dalle schede che IEF disegna in fondo agli articoli — stessa
 * anatomia, stesso ordine, stesso filo rosso che corre in basso al passaggio
 * del mouse — con una differenza voluta: GLI ANGOLI SONO VIVI. Un giornale
 * non e' un'applicazione, e lo spigolo dice carta stampata dove il raggio
 * dice interfaccia.
 */

.in-carte {
    display: grid;
    gap: var(--in-s5);
    /* Una colonna sola sul telefono, due sul tablet, tre sul desktop —
     * ovunque, fasce e fiume insieme. Le colonne si dichiarano invece di
     * lasciarle calcolare da `auto-fill`: con tre articoli in una fascia
     * larga, auto-fill apriva quattro colonne e lasciava l'ultima vuota. */
    grid-template-columns: 1fr;
    list-style: none;
    padding: 0;
    margin: 0;
    /* La riga si allinea all'altezza della carta piu' alta: e' il valore
     * predefinito della griglia, ma scriverlo evita che qualcuno lo cambi
     * senza sapere che qui serve. */
    align-items: stretch;
}

.in-carta {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--in-fondo);
    border: 1px solid var(--in-bordo);
    border-radius: 0;
    box-shadow: 0 10px 28px rgba(22, 19, 15, 0.05);
    transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

.in-carta:hover,
.in-carta:focus-within {
    transform: translateY(-3px);
    border-color: var(--in-bordo-forte);
    box-shadow: 0 16px 38px rgba(22, 19, 15, 0.085);
}

/* Il filo che corre in basso da destra a sinistra: e' la stessa grammatica
 * della linguetta sotto le voci di menu'. Il sito ha un gesto solo. */
.in-carta::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 0;
    height: 3px;
    background: var(--in-marchio);
    pointer-events: none;
    transition: width 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.in-carta:hover::after,
.in-carta:focus-within::after { width: 100%; }

.in-carta-media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--in-fondo-tenue);
}

.in-carta-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.in-carta:hover .in-carta-media img,
.in-carta:focus-within .in-carta-media img { transform: scale(1.035); }

.in-carta-corpo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--in-s3);
    padding: clamp(1.125rem, 2vw, 1.5rem);
}

.in-carta-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--in-s2) var(--in-s4);
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-micro);
    color: var(--in-testo-tenue);
    margin: 0;
}

.in-carta-categoria { color: var(--in-testo-tenue); }

.in-carta-titolo {
    font-family: var(--in-titoli);
    font-size: var(--in-t-medio);
    line-height: var(--in-riga-stretta);
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0;
    text-wrap: balance;
}

.in-carta-titolo a { color: var(--in-testo); text-decoration: none; }
.in-carta-titolo a:hover,
.in-carta-titolo a:focus-visible { color: var(--in-marchio); }

.in-carta-sunto {
    font-size: var(--in-t-piccolo);
    line-height: var(--in-riga-media);
    color: var(--in-testo-tenue);
    margin: 0;
}

/*
 * IL COLLEGAMENTO IN FONDO E' CIO' CHE PAREGGIA LE CARTE.
 *
 * `margin-top: auto` lo spinge in basso: le carte di una riga hanno gia' la
 * stessa altezza per via della griglia, e cosi' anche i loro «Leggi
 * articolo» si allineano invece di galleggiare dove finisce il testo.
 */
.in-carta-leggi {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: auto;
    padding-top: var(--in-s2);
    font-family: var(--in-interfaccia);
    font-size: var(--in-t-piccolo);
    font-weight: 600;
    color: var(--in-testo);
    text-decoration: none;
    transition: color 220ms ease;
}

.in-carta-leggi::after {
    content: "\2192";
    margin-left: 0.4em;
    line-height: 1;
    transition: transform 220ms ease;
}

.in-carta:hover .in-carta-leggi,
.in-carta-leggi:hover,
.in-carta-leggi:focus-visible { color: var(--in-marchio); }

.in-carta:hover .in-carta-leggi::after,
.in-carta-leggi:hover::after,
.in-carta-leggi:focus-visible::after { transform: translateX(4px); }

@media (min-width: 40rem) {
    .in-carte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
    .in-carte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ---------------------------------------------------------- la fascetta
 *
 * La stessa carta, coricata. Immagine piccola a sinistra, testo a destra.
 *
 * PERCHE' IL FIUME NON USA LA CARTA PIENA. Le fasce dicono «di questi tre ci
 * siamo occupati noi», il fiume dice «e poi c'e' tutto il resto»: sono due
 * affermazioni diverse, e con la stessa scheda si equivalevano. Uniforme non
 * vuol dire identico — l'anatomia resta la stessa (immagine, data e
 * categoria, titolo, sunto, «Leggi articolo»), cambia la misura.
 *
 * Due colonne di fascette, non una. Una sola, larga milletrecento pixel,
 * darebbe righe di testo lunghe il doppio di quanto si legge comodamente:
 * la fascetta e' bassa, quindi il limite alla riga lo deve dare la colonna.
 */

.in-carte--fascette { grid-template-columns: 1fr; }

@media (min-width: 40rem) {
    .in-carte--fascette { grid-template-columns: 1fr; }
}

@media (min-width: 64rem) {
    .in-carte--fascette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.in-carta--fascetta {
    display: grid;
    grid-template-columns: 9rem 1fr;
    align-items: stretch;
    /* La fascetta non si alza al passaggio del mouse: un elemento basso e
     * largo che salta di tre pixel sembra nervoso, mentre su una carta alta
     * lo stesso movimento sembra un sollevamento. Le resta il filo rosso. */
    box-shadow: none;
}

.in-carta--fascetta:hover,
.in-carta--fascetta:focus-within {
    transform: none;
    box-shadow: 0 8px 20px rgba(22, 19, 15, 0.06);
}

.in-carta--fascetta .in-carta-media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 100%;
}

.in-carta--fascetta .in-carta-corpo {
    gap: var(--in-s2);
    padding: var(--in-s4) var(--in-s5);
}

.in-carta--fascetta .in-carta-titolo {
    font-size: var(--in-t-base);
    line-height: var(--in-riga-media);
}

.in-carta--fascetta .in-carta-sunto {
    font-size: var(--in-t-micro);
    line-height: var(--in-riga-media);
}

.in-carta--fascetta .in-carta-leggi {
    padding-top: var(--in-s3);
    font-size: var(--in-t-micro);
}

/* Sul telefono la fascetta si stringe ancora: l'immagine cede spazio al
 * titolo, che e' quello che fa scegliere. */
@media (max-width: 30rem) {
    .in-carta--fascetta { grid-template-columns: 6.5rem 1fr; }
    .in-carta--fascetta .in-carta-corpo { padding: var(--in-s3) var(--in-s4); }
    .in-carta--fascetta .in-carta-sunto { display: none; }
}


/* ============================== il passaggio fra le pagine (0.26.0)
 *
 * «LA PAGINA CHE SI POSA», scelta da Andreas il 3 ottobre 2026.
 *
 *   - La testata resta ferma: marchio, globo e menu' non lampeggiano. Cambia
 *     solo il giornale sotto, come quando si gira la pagina di un quotidiano
 *     tenendolo in mano.
 *   - Il contenuto vecchio sfuma in fretta: 150 millisecondi.
 *   - Il nuovo sale di 12 pixel mentre compare: 300 millisecondi, con una
 *     curva morbida in uscita. Appena percettibile.
 *   - Niente scorrimenti laterali e niente zoom: fanno «app», e alla terza
 *     volta stancano.
 *
 * COME FUNZIONA. Sono le View Transitions fra documenti del browser: nessuna
 * libreria, nessun JavaScript. Il browser fotografa la pagina che si lascia e
 * la accompagna dentro quella nuova. La testata ha un nome proprio
 * (`view-transition-name`), quindi esce dalla dissolvenza generale e si
 * scambia senza animazione: e' identica, l'occhio non vede niente.
 *
 * DOVE SI VEDE. Chrome, Edge e Safari dalla 18.2. Firefox oggi non la supporta
 * e cambia pagina come prima: non si rompe niente. Chi ha chiesto al sistema di
 * ridurre le animazioni non la vede.
 */
@view-transition {
    navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

.in-testata { view-transition-name: in-testata; }

/* La barra di WordPress, per chi e' collegato: anche lei ferma. */
#wpadminbar { view-transition-name: in-barra-amministrazione; }

/* LA TESTATA, DUE CASI.
 *
 * Il caso normale: la testata e' identica nelle due pagine. Non partecipa a
 * nessuna animazione: la fotografia vecchia sparisce e al suo posto c'e' gia'
 * la nuova, uguale. L'occhio non vede niente, ed e' l'effetto voluto.
 *
 * Il caso «da-testata-ridotta»: si lascia una pagina scorsa, con la testata
 * assottigliata, e si arriva in cima a quella nuova, con la testata piena.
 * Le due non coincidono, e sovrapporle farebbe comparire il marchio come
 * un'ombra. Allora la sottile svanisce insieme al contenuto vecchio e la piena
 * compare insieme al nuovo, con gli stessi tempi. Il caso lo riconosce
 * site.js lasciando la pagina, e la riga in testa a header.php lo comunica
 * al browser arrivando. */
::view-transition-group(in-testata),
::view-transition-group(in-barra-amministrazione),
::view-transition-new(in-testata),
::view-transition-new(in-barra-amministrazione) {
    animation: none;
}

::view-transition-old(in-testata),
::view-transition-old(in-barra-amministrazione) {
    display: none;
}

html:active-view-transition-type(da-testata-ridotta)::view-transition-old(in-testata) {
    display: block;
    animation: 150ms cubic-bezier(0.4, 0, 1, 1) both in-svanisce;
}

html:active-view-transition-type(da-testata-ridotta)::view-transition-new(in-testata) {
    animation: 300ms cubic-bezier(0.22, 0.61, 0.36, 1) 60ms both in-compare;
}

@keyframes in-compare {
    from { opacity: 0; }
}

::view-transition-old(root) {
    animation: 150ms cubic-bezier(0.4, 0, 1, 1) both in-svanisce;
}

::view-transition-new(root) {
    animation: 300ms cubic-bezier(0.22, 0.61, 0.36, 1) 60ms both in-si-posa;
}

@keyframes in-svanisce {
    to { opacity: 0; }
}

@keyframes in-si-posa {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}


/* ============================================ leggibilita' sulle zone scure */

/*
 * DALLA 0.29.1: I TESTI PICCOLI SU FONDO SCURO.
 *
 * Su macOS il testo chiaro su fondo scuro si disegna piu' morbido di quello
 * scuro su bianco, e sugli schermi con un ridimensionamento non intero sotto
 * i 14 pixel si impasta. Sul telefono e sui Retina e' nitido; sugli altri
 * schermi no, e qualche lettore ne ha uno. Le regole qui sotto valgono solo
 * per le zone scure (megamenu', piede, citazione): un pixel in piu' per i
 * testi minimi, grigi di un tono piu' chiari, un filo di spaziatura nelle
 * maiuscole. Sul bianco non cambia niente.
 */
.in-pannello-titolo,
.in-pannello-quanti,
.in-pannello-articolo-data,
.in-pannello-tutti,
.in-piede-titolo,
.in-citazione-titolo,
.in-social a,
.in-piede-chiusura {
    font-size: 0.8125rem;
}

.in-pannello-titolo {
    letter-spacing: 0.1em;
    color: rgb(247 245 243 / 0.7);
}

.in-pannello-quanti,
.in-pannello-articolo-data {
    color: rgb(247 245 243 / 0.62);
}

/* Le voci secondarie del megamenu' («Regno Unito», «Ucraina»): erano le piu'
 * deboli, piccole e grigie su nero. Inter e' un carattere variabile, e il
 * peso 450 sta fra il normale e il medio. */
.in-sezione-sotto a {
    color: rgb(247 245 243 / 0.86);
    font-size: 0.9rem;
    font-weight: 450;
    letter-spacing: 0.005em;
}

.in-piede {
    font-size: 0.9375rem;
}

.in-piede-titolo {
    letter-spacing: 0.12em;
}

.in-citazione-titolo {
    letter-spacing: 0.14em;
}

/* =========================================================================
 * LE LINGUE (dalla 0.30.0)
 * =========================================================================
 *
 * Nell'angolo in alto a destra, dopo l'iscrizione: la sigla e la bandierina.
 * La bandierina la accende la classe della voce di menu', `in-voce-lingua-it`
 * o `in-voce-lingua-en`, e vale in qualunque menu', come il cuore.
 *
 * Disegni e non emoji: su Windows le emoji delle bandiere non esistono e al
 * loro posto compaiono due lettere. Un filo d'ombra fa da bordo, cosi' il
 * bianco della bandiera italiana non si perde sull'avorio della banda.
 *
 * La lingua in cui si legge e' scura; l'altra e' tenue e si accende al
 * passaggio del mouse. Le due voci sono divise da un filetto. */
.in-lingue { flex: 0 0 auto; }

.in-lingue-elenco {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.in-lingue-elenco li + li {
    margin-left: var(--in-s3);
    padding-left: var(--in-s3);
    border-left: 1px solid var(--in-bordo-servizio);
}

.in-lingue-elenco a {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding-block: var(--in-s2);
    color: var(--in-testo-tenue);
    text-decoration: none;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    transition: color 200ms ease;
}

.in-lingue-elenco a:hover,
.in-lingue-elenco a:focus-visible { color: var(--in-marchio); }

.in-lingue-elenco .is-lingua-attuale > a { color: var(--in-testo); }

[class*="in-voce-lingua-"] > a::before {
    content: "";
    flex: 0 0 auto;
    display: inline-block;
    width: 1.5em;
    height: 1em;
    border-radius: 2px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 0 0 1px rgb(22 19 15 / 0.16);
    vertical-align: -0.15em;
}

/* La bandiera della lingua che non si sta leggendo e' un po' spenta: dice
 * «puoi passare di qua» senza competere con l'iscrizione. */
.in-lingue-elenco li:not(.is-lingua-attuale) > a::before {
    filter: saturate(0.6);
    opacity: 0.85;
    transition: filter 200ms ease, opacity 200ms ease;
}

.in-lingue-elenco li:not(.is-lingua-attuale) > a:hover::before,
.in-lingue-elenco li:not(.is-lingua-attuale) > a:focus-visible::before {
    filter: none;
    opacity: 1;
}

.in-voce-lingua-it > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='1' height='2' fill='%23009246'/%3E%3Crect x='1' width='1' height='2' fill='%23fff'/%3E%3Crect x='2' width='1' height='2' fill='%23ce2b37'/%3E%3C/svg%3E"); }
.in-voce-lingua-en > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='7.5 0 45 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30 15h30v15zv15H0zH0V0zV0h30z'/%3E%3C/clipPath%3E%3Cpath d='M0 0h60v30H0z' fill='%23012169'/%3E%3Cpath d='M0 0l60 30M60 0L0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0l60 30M60 0L0 30' clip-path='url(%23t)' stroke='%23c8102e' stroke-width='4'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23c8102e' stroke-width='6'/%3E%3C/svg%3E"); }

@media (max-width: 61.99rem) {
    /* Sul telefono restano nella banda alta, piu' vicine. */
    .in-lingue-elenco li + li {
        margin-left: var(--in-s2);
        padding-left: var(--in-s2);
    }
}