/*
Theme Name: Confini
Theme URI: https://confinimagazine.it
Author: SOCREM Torino — Fondazione Ariodante Fabretti
Author URI: https://www.socremtorino.it
Description: Tema custom per Confini, il magazine della soglia. Cultura della morte, memoria, tanatologia, riti. Tema PHP + Gutenberg, mobile-first, integrazione social e Substack.
Version: 1.13.10
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: confini
*/

/* ==========================================================================
   1. DESIGN SYSTEM — Variabili
   ========================================================================== */
:root {
    /* Palette */
    --confini-rosso: #A72835;        /* Rosso ciliegia — colore accento */
    --confini-rosso-scuro: #8A1F2A;  /* hover/active */
    --confini-inchiostro: #1a1a1a;   /* testo principale */
    --confini-grigio: #555;          /* testo secondario */
    --confini-grigio-chiaro: #8a8a8a;/* metadati, didascalie */
    --confini-carta: #F4F1EA;        /* fondo carta avorio (vedi mockup) */
    --confini-carta-scura: #E9E4D6;  /* sezioni alternate */
    --confini-bianco: #FFFFFF;
    --confini-bordo: #e2ddd2;        /* linee sottili */
    --confini-fondo-scuro: #1C1814;  /* bruno-notte caldo (mondo scuro del quadrimestrale) */
    --confini-notte-carta: #262019;  /* superficie card sul fondo notte */
    --confini-rosso-chiaro: #E85864; /* rosso schiarito, contrasto 5.05:1 su fondo notte */

    /* Tipografia */
    --font-titoli: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-corpo: 'Source Serif 4', Georgia, serif;
    --font-etichette: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Scala tipografica (mobile-first, fluida) */
    --fs-display: clamp(2.75rem, 8vw, 5.5rem);
    --fs-h1: clamp(2rem, 5vw, 3.25rem);
    --fs-h2: clamp(1.5rem, 3.5vw, 2.25rem);
    --fs-h3: clamp(1.2rem, 2.5vw, 1.5rem);
    --fs-corpo: clamp(1.05rem, 1.2vw, 1.18rem);
    --fs-piccolo: 0.875rem;
    --fs-etichetta: 0.72rem;

    /* Spaziatura */
    --spazio-xs: 0.5rem;
    --spazio-sm: 1rem;
    --spazio-md: 2rem;
    --spazio-lg: 4rem;
    --spazio-xl: 6rem;

    /* Layout */
    --larghezza-max: 1280px;
    --larghezza-testo: 680px;   /* misura di lettura ottimale */
    --raggio: 2px;
    --transizione: 0.25s ease;

    /* Masthead: token modulati dallo stato .header-compatto sul .site-header */
    --logo-h: 66px;
    --header-pad: 0.9rem;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--font-corpo);
    font-size: var(--fs-corpo);
    line-height: 1.7;
    color: var(--confini-inchiostro);
    background-color: var(--confini-carta);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

a {
    color: var(--confini-rosso);
    text-decoration: none;
    transition: color var(--transizione);
}
a:hover { color: var(--confini-rosso-scuro); }

h1, h2, h3, h4 {
    font-family: var(--font-titoli);
    font-weight: 600;
    line-height: 1.12;
    margin: 0 0 var(--spazio-sm);
    color: var(--confini-inchiostro);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--spazio-sm); }

/* Selezione del testo brandizzata (la fascia citazione override con selezione invertita) */
::selection {
    background: var(--confini-rosso);
    color: var(--confini-carta);
}

/* Etichette di rubrica / categoria — uppercase, sans, lettera spaziata */
.etichetta {
    font-family: var(--font-etichette);
    font-size: var(--fs-etichetta);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--confini-rosso);
}

/* ==========================================================================
   3. LAYOUT — Contenitori
   ========================================================================== */
.contenitore {
    width: 100%;
    max-width: var(--larghezza-max);
    margin-inline: auto;
    padding-inline: var(--spazio-sm);
}
@media (min-width: 768px) {
    .contenitore { padding-inline: var(--spazio-md); }
}

.contenitore-testo { max-width: var(--larghezza-testo); margin-inline: auto; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Skip link accessibilità */
.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--confini-rosso); color: #fff;
    padding: var(--spazio-xs) var(--spazio-sm); z-index: 1000;
}
.skip-link:focus { left: 0; color: #fff; }

/* Fade-in immagini: la classe .confini-fade-in è applicata via JS solo alle
   immagini non ancora caricate; senza JS le img restano visibili di default. */
img.confini-fade-in { opacity: 0; transition: opacity 300ms ease; }
img.confini-fade-in.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    img.confini-fade-in { opacity: 1; transition: none; }
}

/* Scroll-reveal: la classe .confini-reveal è applicata via JS solo alla home
   e solo se IntersectionObserver è disponibile e prefers-reduced-motion off.
   Senza JS, l'elemento resta visibile (nessuna proprietà applicata). */
.confini-reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 350ms ease, transform 350ms ease;
    will-change: opacity, transform;
}
.confini-reveal.is-in { opacity: 1; transform: none; }

/* Focus visibile coerente (link, bottoni, frecce slider) */
a:focus-visible,
button:focus-visible,
.slider-freccia:focus-visible {
    outline: 2px solid var(--confini-rosso);
    outline-offset: 2px;
}

/* ==========================================================================
   4. HEADER & NAVIGAZIONE
   ========================================================================== */
.site-header {
    background: var(--confini-bianco);
    border-bottom: 1px solid var(--confini-bordo);
    position: sticky; top: 0; z-index: 100;
}
.header-inner { position: relative; }
.header-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--spazio-md);
    padding-block: var(--header-pad);
    transition: padding 250ms ease;
}
.site-branding {
    grid-column: 1;
    justify-self: start;
}

/* Stato compatto: la classe viene aggiunta al .site-header via JS oltre 80px
   di scroll, rimossa sotto 40px (isteresi anti-flicker). */
.site-header.header-compatto {
    --logo-h: 40px;
    --header-pad: 0.55rem;
}
.site-header.header-compatto .header-inner {
    gap: var(--spazio-sm);
}

/* Logo wordmark SVG (assets/brand/svg/wordmark-positivo.svg) */
.site-logo { display: inline-flex; align-items: center; line-height: 1; }
.site-logo-img {
    display: block;
    height: var(--logo-h);
    width: auto;
    transform: translateY(2px);
    transition: height 250ms ease, transform 250ms ease;
}
.site-header.header-compatto .site-logo-img {
    transform: translateY(3px);
}

@media (prefers-reduced-motion: reduce) {
    .header-inner, .site-logo-img { transition: none; }
}

/* Menu desktop */
.nav-principale {
    grid-column: 2;
    justify-self: center;
}
.nav-principale ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: var(--spazio-md); align-items: center;
}
.nav-principale a {
    font-family: var(--font-etichette);
    font-size: 0.9rem;
    color: var(--confini-inchiostro);
    letter-spacing: 0.02em;
}
.nav-principale a:hover { color: var(--confini-rosso); }
.nav-cta a {
    color: var(--confini-rosso) !important;
    font-weight: 600;
}
@media (max-width: 1120px) and (min-width: 880px) {
    .header-inner { gap: var(--spazio-sm); }
    .nav-principale ul { gap: var(--spazio-sm); }
    .nav-principale a { font-size: 0.84rem; }
}

.header-actions {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: var(--spazio-sm);
    flex: 0 0 auto;
}
.search-toggle {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--confini-inchiostro);
    cursor: pointer;
    transition: color var(--transizione), border-color var(--transizione), background var(--transizione);
}
.search-toggle:hover,
.search-toggle[aria-expanded="true"] {
    color: var(--confini-rosso);
    border-color: var(--confini-bordo);
    background: rgba(255,255,255,0.45);
}
.search-toggle svg {
    width: 19px;
    height: 19px;
}
.header-social {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.header-social a,
.header-social .social-placeholder {
    display: inline-flex;
    color: var(--confini-grigio);
}
.header-social a:hover {
    color: var(--confini-rosso);
}
.header-social svg,
.footer-social svg {
    width: 18px;
    height: 18px;
}
.header-social .social-placeholder,
.footer-social .social-placeholder {
    opacity: 0.35;
    cursor: default;
}

/* Toggle menu mobile (hamburger) */
.menu-toggle {
    display: none;
    background: none; border: 0; cursor: pointer;
    padding: var(--spazio-xs);
    color: var(--confini-inchiostro);
}
.menu-toggle svg { width: 28px; height: 28px; }

/* --- Comportamento responsive della navigazione --- */
@media (max-width: 879px) {
    :root {
        --logo-h: 54px;
        --header-pad: 0.75rem;
    }
    .site-header.header-compatto {
        --logo-h: 38px;
        --header-pad: 0.5rem;
    }
    .header-inner {
        display: flex;
        gap: var(--spazio-sm);
        align-items: center;
    }
    .site-branding {
        grid-column: auto;
        justify-self: auto;
    }
    .menu-toggle { display: inline-flex; order: 3; }
    .header-actions {
        grid-column: auto;
        justify-self: auto;
        order: 2;
        margin-left: auto;
    }
    .header-social {
        display: none;
    }
    .nav-principale {
        grid-column: auto;
        justify-self: auto;
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--confini-bianco);
        border-bottom: 1px solid var(--confini-bordo);
        padding: var(--spazio-sm) 0;
        display: none;
        box-shadow: 0 12px 24px rgba(0,0,0,0.06);
    }
    .nav-principale.attivo { display: block; }
    .nav-principale ul {
        flex-direction: column; align-items: flex-start;
        gap: 0; padding-inline: var(--spazio-sm);
    }
    .nav-principale li { width: 100%; border-bottom: 1px solid var(--confini-bordo); }
    .nav-principale li:last-child { border-bottom: 0; }
    .nav-principale a { display: block; padding-block: var(--spazio-sm); font-size: 1.05rem; }
}

/* ==========================================================================
   5. HERO / NUMERO ZERO (front page)
   ========================================================================== */
.hero {
    padding-block: var(--spazio-lg);
}
.hero-grid {
    display: grid; gap: var(--spazio-md);
    grid-template-columns: 1fr;
    align-items: center;
}
.hero-titolo {
    font-size: clamp(2.8rem, 6vw, 5.2rem);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.01em;
    margin-block: var(--spazio-sm);
}
.hero-sottotitolo {
    font-size: var(--fs-h3);
    color: var(--confini-grigio);
    font-style: italic;
}
.hero-immagine { position: relative; }
/* Sole rosso decorativo dietro l'illustrazione hero (cfr. mockup) */
.hero-immagine::before {
    content: ""; position: absolute;
    width: 38%; aspect-ratio: 1; border-radius: 50%;
    background: var(--confini-rosso);
    right: 4%; top: 18%; z-index: 0;
    opacity: 0.92;
}
.hero-immagine img { position: relative; z-index: 1; }

@media (min-width: 900px) {
    .hero-grid { grid-template-columns: 1fr 1fr; gap: var(--spazio-lg); }
}

/* ==========================================================================
   6. GRIGLIA ARTICOLI
   ========================================================================== */
.sezione { padding-block: var(--spazio-lg); }
.sezione-testata {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: var(--spazio-md);
    border-bottom: 2px solid var(--confini-inchiostro);
    padding-bottom: var(--spazio-xs);
}
.sezione-testata h2 { margin: 0; }
.sezione-link {
    font-family: var(--font-etichette);
    font-size: var(--fs-piccolo);
}

/* Testate principali della home: stesso trattamento editoriale, su fondo
   chiaro o scuro, con il descrittore in corsivo e filetti laterali. */
.sezione-testata--editoriale {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
    padding-bottom: 0;
    border-bottom: 0;
    text-align: center;
}
.sezione-testata--editoriale h2 {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 2.5vw, 2rem);
    font-size: clamp(1.8rem, 4vw, 3.4rem);
}
.sezione-testata--editoriale h2::before,
.sezione-testata--editoriale h2::after {
    content: '';
    width: min(12vw, 9rem);
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}
.sezione-titolo-testo {
    white-space: nowrap;
}
.sezione-testata--editoriale em {
    color: var(--confini-rosso);
    font-weight: 500;
}
.sezione-testata--editoriale .sezione-link {
    margin-top: 0.15rem;
}
.fascia-numero .sezione-testata--editoriale h2 {
    color: var(--confini-carta);
}
.fascia-numero .sezione-testata--editoriale h2::before,
.fascia-numero .sezione-testata--editoriale h2::after {
    color: var(--confini-rosso-chiaro);
}
.fascia-numero .sezione-testata--editoriale em {
    color: var(--confini-rosso-chiaro);
}
@media (max-width: 480px) {
    .sezione-testata--editoriale h2 {
        gap: 0.65rem;
        font-size: clamp(1.65rem, 7.4vw, 2rem);
    }
    .sezione-testata--editoriale h2::before,
    .sezione-testata--editoriale h2::after {
        width: 1.25rem;
    }
}

.griglia-articoli {
    display: grid; gap: var(--spazio-md);
    grid-template-columns: 1fr;
}
@media (min-width: 600px) {
    .griglia-articoli { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
    .griglia-articoli { grid-template-columns: repeat(3, 1fr); }
}
.griglia-articoli.cinque-col { grid-template-columns: 1fr; }
@media (min-width: 600px) { .griglia-articoli.cinque-col { grid-template-columns: repeat(2,1fr);} }
@media (min-width: 1000px) { .griglia-articoli.cinque-col { grid-template-columns: repeat(5,1fr);} }

/* Griglia "In questo numero" con articolo in evidenza */
.griglia-evidenza {
    display: grid;
    gap: var(--spazio-lg);
    grid-template-columns: 1fr;
}
@media (min-width: 900px) {
    .griglia-evidenza {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }
}

.griglia-secondari-top {
    display: grid;
    gap: var(--spazio-lg);
    grid-template-columns: 1fr;
}
@media (min-width: 900px) {
    .griglia-secondari-top {
        grid-template-columns: 1fr;
        grid-auto-rows: 1fr;
        height: 100%;
    }
    .griglia-secondari-top .card-articolo {
        flex-direction: row;
        height: 100%;
    }
    .griglia-secondari-top .card-immagine {
        flex: 0 0 45%;
        aspect-ratio: auto;
    }
    .griglia-secondari-top .card-corpo {
        flex: 1;
        justify-content: center;
        padding: var(--spazio-sm);
        gap: var(--spazio-xs);
    }
    .griglia-secondari-top .card-titolo {
        font-size: 1.1rem;
        line-height: 1.2;
    }
}

.griglia-terziari {
    display: grid;
    gap: var(--spazio-lg);
    grid-template-columns: 1fr;
    margin-top: var(--spazio-lg);
}
@media (min-width: 700px) {
    .griglia-terziari {
        grid-template-columns: repeat(3, 1fr);
    }
    .griglia-terziari .card-immagine {
        aspect-ratio: 16/9;
    }
    .griglia-terziari .card-corpo {
        padding: var(--spazio-sm);
        gap: var(--spazio-xs);
    }
    .griglia-terziari .card-titolo {
        font-size: 1.15rem;
        line-height: 1.2;
    }
}

.card-evidenza {
    background: var(--confini-bianco);
    border: 1px solid var(--confini-bordo);
    border-radius: var(--raggio);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform var(--transizione), box-shadow var(--transizione);
}
.card-evidenza:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.card-evidenza-immagine { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--confini-carta-scura); }
.card-evidenza-immagine img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.card-evidenza:hover .card-evidenza-immagine img { transform: scale(1.04); }
.card-evidenza-corpo {
    padding: var(--spazio-md);
    padding-top: var(--spazio-sm);
    padding-bottom: var(--spazio-sm);
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: var(--spazio-xs);
}
.card-evidenza-titolo {
    font-family: var(--font-titoli);
    font-size: var(--fs-h1);
    line-height: 1.05;
    margin: 0;
}
.card-evidenza-titolo a { color: var(--confini-inchiostro); }
.card-evidenza-titolo a:hover { color: var(--confini-rosso); }
.card-evidenza-estratto { color: var(--confini-grigio); margin: 0; }
.card-evidenza-cta { align-self: flex-start; }

/* Slider "Altri dal numero" */
.slider-wrap{ position:relative; }
.slider-track{ display:flex; gap:var(--spazio-md); overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; padding-bottom:var(--spazio-sm); scrollbar-width:thin; }
.slider-track::-webkit-scrollbar{ height:4px; }
.slider-track::-webkit-scrollbar-thumb{ background:var(--confini-bordo); border-radius:2px; }
.card-slider{ flex:0 0 280px; scroll-snap-align:start; background:var(--confini-bianco); border:1px solid var(--confini-bordo); border-radius:var(--raggio); overflow:hidden; display:flex; flex-direction:column; }
.card-slider .card-slider-img{ aspect-ratio:4/3; overflow:hidden; background:var(--confini-carta-scura); }
.card-slider .card-slider-img img{ width:100%; height:100%; object-fit:cover; }
.card-slider .card-slider-corpo{ padding:var(--spazio-sm); display:flex; flex-direction:column; gap:var(--spazio-xs); }
.card-slider .card-titolo{ font-family:var(--font-titoli); font-size:1.2rem; line-height:1.15; }
.card-slider .card-titolo a{ color:var(--confini-inchiostro); }
.card-slider .card-titolo a:hover{ color:var(--confini-rosso); }
.slider-freccia{ position:absolute; top:40%; transform:translateY(-50%); z-index:2; width:44px; height:44px; border-radius:50%; border:1px solid var(--confini-bordo); background:var(--confini-carta); color:var(--confini-inchiostro); font-size:1.5rem; cursor:pointer; display:none; align-items:center; justify-content:center; }
.slider-prev{ left:-10px; } .slider-next{ right:-10px; }
.slider-freccia:hover{ background:var(--confini-rosso); color:#fff; border-color:var(--confini-rosso); }
@media (min-width:900px){ .slider-freccia{ display:flex; } }
.slider-sezione{ padding-top:0; padding-bottom:var(--spazio-lg); }

/* Sommario di un numero (in cima a taxonomy-numero) */
.sommario-numero { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--confini-bordo); }
.sommario-voce { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spazio-md); padding: var(--spazio-sm) 0; border-bottom: 1px solid var(--confini-bordo); }
.sommario-voce-titolo { font-family: var(--font-titoli); font-size: 1.2rem; line-height: 1.2; margin: 0; flex: 1; }
.sommario-voce-titolo a { color: var(--confini-inchiostro); }
.sommario-voce-titolo a:hover { color: var(--confini-rosso); }
.sommario-voce-rubrica { font-family: var(--font-etichette); font-size: var(--fs-etichetta); letter-spacing: 0.12em; text-transform: uppercase; color: var(--confini-rosso); flex-shrink: 0; }
.sommario-sezione { padding-block: var(--spazio-md); }

/* Pagina "Articoli" — rubriche come sistema visuale di esplorazione */
.archivio-articoli-testata {
    max-width: 52rem;
    margin: 0 auto clamp(2.5rem, 6vw, 5rem);
    text-align: center;
}
.archivio-articoli-testata h1 {
    margin: 0.35rem 0 0.75rem;
    font-size: clamp(2.8rem, 7vw, 5rem);
}
.archivio-articoli-testata p {
    margin: 0;
    color: var(--confini-grigio);
    font-size: clamp(1.05rem, 1.7vw, 1.3rem);
}
.esplora-rubriche {
    margin-bottom: var(--spazio-lg);
    padding: clamp(1.5rem, 4vw, 3rem);
    background: var(--confini-carta-scura);
}
.esplora-rubriche-testata {
    margin-bottom: var(--spazio-md);
    text-align: center;
}
.esplora-rubriche-testata h2 { margin: 0.25rem 0 0; }
.filtri-rubriche--icone {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
@media (min-width: 640px) {
    .filtri-rubriche--icone { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
    .filtri-rubriche--icone { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.filtro-rubrica--icona,
.filtro-rubrica--tutte {
    position: relative;
    min-height: 138px;
    padding: 0.9rem 0.5rem;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    text-align: center;
    color: var(--confini-inchiostro);
    transition: color var(--transizione), background-color var(--transizione), border-color var(--transizione), transform var(--transizione);
}
.filtro-rubrica--icona:hover,
.filtro-rubrica--tutte:hover {
    color: var(--confini-rosso);
    transform: translateY(-2px);
}
.filtro-rubrica--icona.attivo,
.filtro-rubrica--tutte.attivo {
    color: var(--confini-rosso);
    background: transparent;
    border-color: transparent;
    transform: none;
}
.filtro-rubrica--icona.attivo::after,
.filtro-rubrica--tutte.attivo::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0.4rem;
    width: 2.25rem;
    height: 2px;
    background: var(--confini-rosso);
    transform: translateX(-50%);
}
.filtro-rubrica--icona.attivo .rubrica-nome,
.filtro-rubrica--tutte.attivo .rubrica-nome {
    font-weight: 600;
}
.filtro-rubrica--icona:focus-visible,
.filtro-rubrica--tutte:focus-visible {
    outline: 3px solid var(--confini-rosso);
    outline-offset: 3px;
}
.filtro-rubrica--icona svg,
.filtro-rubrica--icona .rubrica-icona-img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}
.filtro-rubrica--icona .rubrica-nome,
.filtro-rubrica--tutte .rubrica-nome {
    color: inherit;
    font-size: 1rem;
    line-height: 1.15;
}
.filtro-rubrica-tutte-icona {
    width: 72px;
    height: 72px;
    border: 1px solid currentColor;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-etichette);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.rubrica-attiva-intro {
    max-width: 48rem;
    margin: var(--spazio-md) auto 0;
    padding-top: var(--spazio-md);
    border-top: 1px solid rgba(26,26,26,0.16);
    text-align: center;
}
.rubrica-attiva-intro h2 { margin: 0.25rem 0 0.6rem; }
.rubrica-attiva-intro p { margin: 0; color: var(--confini-grigio); }
.paginazione { display: flex; justify-content: center; gap: var(--spazio-sm); margin-top: var(--spazio-lg); }
.paginazione a, .paginazione span { padding: 0.4rem 0.8rem; border: 1px solid var(--confini-bordo); border-radius: var(--raggio); color: var(--confini-inchiostro); font-family: var(--font-etichette); font-size: 0.9rem; }
.paginazione .current { background: var(--confini-rosso); color: #fff; border-color: var(--confini-rosso); }

/* Card articolo */
.card-articolo {
    position: relative;
    background: var(--confini-bianco);
    border: 1px solid var(--confini-bordo);
    border-radius: var(--raggio);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.card-articolo:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.10);
}
/* Filo rosso su hover: pseudo-elemento invece di border-top per evitare il
   layout shift. Le card "Dal flusso" hanno già un filo permanente e nascondono
   questo (vedi override in fondo al foglio). */
.card-articolo::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--confini-rosso);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 200ms ease;
    pointer-events: none;
    z-index: 1;
}
.card-articolo:hover::before { transform: scaleX(1); }
/* Le featured image delle card sono copertine di rivista in formato 3:4:
   contenitore in aspect-ratio, cover + overflow hidden per non alterare
   i bordi del documento. Niente zoom su hover: copertine = documenti,
   niente crop. Lo scale è applicato solo alle card "Dal flusso" (4:3,
   fotografiche) più sotto. */
.card-immagine { aspect-ratio: 3/4; overflow: hidden; background: var(--confini-carta); }
.card-immagine img { width: 100%; height: 100%; object-fit: cover; }
.card-corpo { padding: var(--spazio-sm); display: flex; flex-direction: column; gap: var(--spazio-xs); flex: 1; }
.card-titolo {
    font-family: var(--font-titoli);
    font-size: var(--fs-h3);
    line-height: 1.15;
    margin: 0;
}
.card-titolo a {
    color: var(--confini-inchiostro);
    background-image: linear-gradient(var(--confini-rosso), var(--confini-rosso));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 2px;
    padding-bottom: 2px;
    transition: background-size 200ms ease, color 200ms ease;
}
.card-titolo a:hover {
    color: var(--confini-rosso);
    background-size: 100% 2px;
}
.card-data {
    font-family: var(--font-etichette);
    font-size: var(--fs-etichetta);
    color: var(--confini-grigio-chiaro);
    margin-top: auto;
}

/* ==========================================================================
   7. RUBRICHE (icone categoria)
   ========================================================================== */
.rubriche-fascia { background: var(--confini-carta-scura); }
.griglia-rubriche {
    display: grid; gap: var(--spazio-md);
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
}
@media (min-width: 600px) { .griglia-rubriche { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .griglia-rubriche { grid-template-columns: repeat(5, 1fr); } }
.rubrica-item { display: flex; flex-direction: column; align-items: center; gap: var(--spazio-xs); }
.rubrica-item svg { width: 120px; height: 120px; stroke: var(--confini-inchiostro); }
.rubrica-nome { font-family: var(--font-titoli); font-size: 1.15rem; color: var(--confini-inchiostro); }
.rubrica-desc { font-size: var(--fs-piccolo); color: var(--confini-grigio); }
.rubrica-item:hover svg { stroke: var(--confini-rosso); }
.rubrica-item:hover .rubrica-nome { color: var(--confini-rosso); }

/* ==========================================================================
   8. SINGOLO ARTICOLO
   ========================================================================== */
.articolo-header { padding-block: var(--spazio-lg) var(--spazio-md); text-align: center; }
.articolo-titolo { font-size: var(--fs-h1); max-width: 900px; margin-inline: auto; }
.articolo-meta {
    font-family: var(--font-etichette);
    font-size: var(--fs-piccolo);
    color: var(--confini-grigio-chiaro);
    margin-top: var(--spazio-sm);
}
.articolo-cover { margin-block: var(--spazio-md); }
.articolo-cover img { width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--raggio); }
.articolo-contenuto { font-size: 1.18rem; line-height: 1.8; }
.articolo-contenuto p { margin-bottom: 1.5rem; }
.articolo-contenuto h2, .articolo-contenuto h3 { margin-top: var(--spazio-md); }
.articolo-contenuto blockquote {
    border-left: 3px solid var(--confini-rosso);
    margin: var(--spazio-md) 0;
    padding-left: var(--spazio-md);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--confini-grigio);
}
.articolo-contenuto img { margin-block: var(--spazio-md); border-radius: var(--raggio); }

/* ==========================================================================
   9. CONDIVISIONE SOCIAL
   ========================================================================== */
.condivisione {
    display: flex; align-items: center; gap: var(--spazio-sm);
    padding-block: var(--spazio-md);
    border-block: 1px solid var(--confini-bordo);
    margin-block: var(--spazio-md);
    flex-wrap: wrap;
}
.condivisione-label { font-family: var(--font-etichette); font-size: var(--fs-piccolo); color: var(--confini-grigio); }
.condivisione-bottoni { display: flex; gap: var(--spazio-xs); }
.condivisione-bottoni a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid var(--confini-bordo);
    color: var(--confini-inchiostro);
    transition: all var(--transizione);
}
.condivisione-bottoni a:hover { background: var(--confini-rosso); border-color: var(--confini-rosso); color: #fff; }
.condivisione-bottoni svg { width: 18px; height: 18px; }

/* ==========================================================================
   10. BOX SUBSTACK / NEWSLETTER
   ========================================================================== */
.substack-box {
    background: var(--confini-inchiostro);
    color: var(--confini-carta);
    padding: var(--spazio-lg) var(--spazio-md);
    border-radius: var(--raggio);
    text-align: center;
}
.substack-box h2 { color: var(--confini-carta); }
.substack-box p { color: rgba(244,241,234,0.8); max-width: 480px; margin-inline: auto; }
.substack-embed-wrap { max-width: 480px; margin: var(--spazio-md) auto 0; }
.substack-embed-wrap iframe { width: 100% !important; border: 0; background: transparent; border-radius: var(--raggio); }
.btn-substack {
    display: inline-block; margin-top: var(--spazio-sm);
    background: var(--confini-rosso); color: #fff;
    font-family: var(--font-etichette); font-weight: 600;
    padding: 0.8rem 1.8rem; border-radius: var(--raggio);
}
.btn-substack:hover { background: var(--confini-rosso-scuro); color: #fff; }

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.site-footer {
    background: var(--confini-carta);
    border-top: 1px solid var(--confini-bordo);
    padding-block: var(--spazio-lg) var(--spazio-md);
    margin-top: var(--spazio-xl);
}
.footer-grid {
    display: grid; gap: var(--spazio-md);
    grid-template-columns: 1fr;
}
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.footer-col h3 { font-size: 1rem; font-family: var(--font-etichette); text-transform: uppercase; letter-spacing: 0.1em; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: var(--spazio-xs); }
.footer-col a { color: var(--confini-grigio); font-size: var(--fs-piccolo); }
.footer-col a:hover { color: var(--confini-rosso); }
.footer-bio { font-size: var(--fs-piccolo); color: var(--confini-grigio); max-width: 320px; }
.footer-social { display: flex; gap: var(--spazio-sm); margin-top: var(--spazio-sm); }
.footer-social a,
.footer-social .social-placeholder { color: var(--confini-inchiostro); }
.footer-social a:hover { color: var(--confini-rosso); }
.footer-social svg { width: 22px; height: 22px; }
.footer-bottom {
    margin-top: var(--spazio-lg); padding-top: var(--spazio-md);
    border-top: 1px solid var(--confini-bordo);
    font-size: var(--fs-etichetta); color: var(--confini-grigio-chiaro);
    text-align: center;
}
.footer-sigillo { display: flex; justify-content: center; margin-bottom: var(--spazio-sm); }
.footer-sigillo img { display: block; width: 28px; height: 28px; }

/* ==========================================================================
   12. PAGINAZIONE & UTILITY
   ========================================================================== */
.paginazione { display: flex; justify-content: center; gap: var(--spazio-xs); margin-top: var(--spazio-lg); }
.paginazione .page-numbers {
    font-family: var(--font-etichette); font-size: var(--fs-piccolo);
    padding: 0.6rem 1rem; border: 1px solid var(--confini-bordo);
    color: var(--confini-inchiostro); border-radius: var(--raggio);
}
.paginazione .page-numbers.current,
.paginazione .page-numbers:hover { background: var(--confini-rosso); color: #fff; border-color: var(--confini-rosso); }

/* Riquadro intro categoria */
.archivio-intro { padding-block: var(--spazio-lg); text-align: center; border-bottom: 0; }
.archivio-intro .etichetta { display: block; margin-bottom: var(--spazio-xs); }
.archivio-intro h1 { font-size: var(--fs-display); }
.archivio-intro .descrizione { max-width: 560px; margin: var(--spazio-sm) auto 0; color: var(--confini-grigio); font-style: italic; }

/* ==========================================================================
   13. PAGINA NUMERO (taxonomy-numero)
   ========================================================================== */
.numero-testata { padding-block: var(--spazio-lg); border-bottom: 1px solid var(--confini-bordo); }
.numero-testata-grid { display: grid; gap: var(--spazio-md); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .numero-testata-grid { grid-template-columns: 1.3fr 1fr; gap: var(--spazio-lg); } }
.numero-titolo { font-size: var(--fs-display); margin-block: var(--spazio-sm); }
.numero-sommario { font-size: var(--fs-h3); color: var(--confini-grigio); font-style: italic; line-height: 1.4; }
.numero-testata-cover img { width: 100%; border-radius: var(--raggio); }

.numero-editoriale { padding-block: var(--spazio-lg); text-align: center; background: var(--confini-carta-scura); }
.numero-editoriale-titolo { font-size: var(--fs-h1); margin-block: var(--spazio-sm); }
.numero-editoriale-titolo a { color: var(--confini-inchiostro); }
.numero-editoriale-titolo a:hover { color: var(--confini-rosso); }
.numero-editoriale-estratto { font-size: 1.2rem; color: var(--confini-grigio); margin-bottom: var(--spazio-md); }
.numero-rubrica { padding-block: var(--spazio-md); }

/* Icone rubrica come immagine PNG (fallback degli SVG) */
.rubrica-icona-img { display: block; margin: 0 auto; width: 120px; height: 120px; object-fit: contain; }

/* Griglia rubriche: più respiro verticale ora che non ci sono descrizioni */
.griglia-rubriche { row-gap: var(--spazio-lg); }
.griglia-rubriche .rubrica-item { gap: var(--spazio-sm); }

/* ==========================================================================
   14. HOME — RITMO EDITORIALE (hero ricca, citazione, archivio)
   ========================================================================== */

/* Occhiello-testata della hero: numero + data su una riga */
.hero-testata { display: flex; align-items: baseline; gap: var(--spazio-sm); margin-bottom: var(--spazio-sm); }
.hero-testata-data {
    font-family: var(--font-etichette); font-size: var(--fs-etichetta);
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--confini-grigio-chiaro);
}
.hero-testata-data::before { content: "—"; margin-right: var(--spazio-xs); color: var(--confini-bordo); }

.hero-cta { display: inline-block; margin-top: var(--spazio-xs); }

.hero-numero-link{ display:inline-block; font-family:var(--font-etichette); font-size:var(--fs-etichetta); letter-spacing:.12em; text-transform:uppercase; color:var(--confini-grigio-chiaro); margin-bottom:var(--spazio-xs); }
.hero-numero-link:hover{ color:var(--confini-rosso); }
.hero-titolo a{ color:var(--confini-inchiostro); }
.hero-titolo a:hover{ color:var(--confini-rosso); }
.btn-leggi{ display:inline-block; margin-top:var(--spazio-sm); background:var(--confini-rosso); color:#fff; font-family:var(--font-etichette); font-weight:600; font-size:.95rem; letter-spacing:.02em; padding:.85rem 1.8rem; border-radius:var(--raggio); transition:background .25s ease; }
.btn-leggi:hover{ background:var(--confini-rosso-scuro); color:#fff; }

/* Temi del numero in fondo alla hero (ancora la colonna a terra) */
.hero-temi {
    margin-top: var(--spazio-lg);
    padding-top: var(--spazio-md);
    border-top: 1px solid var(--confini-bordo);
}
.hero-temi-label {
    display: block;
    font-family: var(--font-etichette); font-size: var(--fs-etichetta);
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--confini-grigio-chiaro);
    margin-bottom: var(--spazio-xs);
}
.hero-temi-lista { font-family: var(--font-titoli); font-size: 1.25rem; color: var(--confini-inchiostro); }
.hero-temi-lista a { color: var(--confini-inchiostro); }
.hero-temi-lista a:hover { color: var(--confini-rosso); }

/* Fascia citazione: stacco rosso ciliegia a tutta larghezza */
.fascia-citazione {
    background: var(--confini-rosso);
    color: var(--confini-carta);
    padding-block: var(--spazio-xl);
    text-align: center;
}
.citazione-grande { margin: 0; }
.citazione-grande p {
    font-family: var(--font-titoli);
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    line-height: 1.25;
    font-style: italic;
    color: var(--confini-carta);
    margin: 0;
}
/* Virgolette in avorio smorzato (su rosso pieno il rosso sparirebbe) */
.citazione-grande p::before { content: "“"; color: rgba(244,241,234,0.6); margin-right: 0.1em; }
.citazione-grande p::after  { content: "”"; color: rgba(244,241,234,0.6); margin-left: 0.1em; }
/* Attribuzioni/kicker eventuali dentro la fascia */
.fascia-citazione cite,
.fascia-citazione .citazione-attribuzione {
    color: rgba(244,241,234,0.7);
    font-style: normal;
    font-family: var(--font-etichette);
    font-size: var(--fs-etichetta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
/* Selezione invertita dentro la fascia rossa */
.fascia-citazione ::selection {
    background: var(--confini-carta);
    color: var(--confini-rosso);
}

/* Fascia archivio: continua il fondo carta scura delle rubriche */
.fascia-archivio { background: var(--confini-carta-scura); padding-block: var(--spazio-lg); border-top: 1px solid var(--confini-bordo); }
.archivio-grid { display: grid; gap: var(--spazio-md); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 800px) { .archivio-grid { grid-template-columns: 1fr 1.2fr; gap: var(--spazio-lg); } }
.archivio-immagine img { width: 100%; border-radius: var(--raggio); aspect-ratio: 4/3; object-fit: cover; }
.archivio-titolo { font-size: var(--fs-h1); margin-block: var(--spazio-xs) var(--spazio-sm); }
.archivio-titolo a { color: var(--confini-inchiostro); }
.archivio-titolo a:hover { color: var(--confini-rosso); }
.archivio-estratto { color: var(--confini-grigio); font-size: 1.1rem; margin-bottom: var(--spazio-sm); }

/* Fascia articoli del numero: mondo scuro. Bordi rossi come "soglia" tra i mondi.
   Le card interne restano chiare — pagine sul tavolo scuro. */
.fascia-numero{
    background:var(--confini-fondo-scuro);
    padding-block:var(--spazio-lg);
    border-top:1px solid var(--confini-rosso);
    border-bottom:1px solid var(--confini-rosso);
    color:var(--confini-carta);
}
.fascia-numero .sezione{ padding-block:0; }
.fascia-numero .sezione + .slider-sezione{ padding-top:var(--spazio-md); }
/* Card sul tavolo scuro: bordo un filo più marcato per staccarle dal fondo */
.fascia-numero .card-articolo,
.fascia-numero .card-slider{ border-color:#dcd6c8; }
.fascia-numero .card-immagine,
.fascia-numero .card-slider-img,
.fascia-numero .card-evidenza-img{ background:var(--confini-carta); }

/* Testi FUORI dalle card, sopra il fondo scuro */
.fascia-numero .sezione-testata h2 { color: var(--confini-rosso-chiaro); }
.fascia-numero .sezione-link { color: var(--confini-rosso-chiaro); }
.fascia-numero .sezione-link:hover { color: var(--confini-carta); }
.fascia-numero .sezione-testata--editoriale h2 { color: var(--confini-carta); }
.fascia-numero .sezione-testata--editoriale em { color: var(--confini-rosso-chiaro); }
.fascia-numero hr { border: 0; border-top: 1px solid rgba(244,241,234,0.15); }

/* Ticker "In questo numero" sopra il fondo scuro */
.fascia-numero .hero-ticker { border-bottom-color: rgba(244,241,234,0.15); }
.fascia-numero .hero-ticker-label { color: var(--confini-rosso-chiaro); }
.fascia-numero .hero-ticker-viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.fascia-numero .hero-ticker-group,
.fascia-numero .hero-ticker-group a { color: var(--confini-carta); }
.fascia-numero .hero-ticker-group a:hover { color: var(--confini-rosso-chiaro); }

/* Frecce slider su fondo scuro: mantengono il disco chiaro per distacco */
.fascia-numero .slider-freccia {
    background: var(--confini-carta);
    color: var(--confini-inchiostro);
    border-color: var(--confini-carta);
}
.fascia-numero .slider-freccia:hover {
    background: var(--confini-rosso-chiaro);
    color: var(--confini-fondo-scuro);
    border-color: var(--confini-rosso-chiaro);
}
.fascia-numero .slider-freccia:focus-visible { outline-color: var(--confini-rosso-chiaro); }
.fascia-numero .slider-track::-webkit-scrollbar-thumb { background: rgba(244,241,234,0.3); }

/* Card scure — evidenza, terziari, slider. La griglia-secondari-top diventa un
   sommario tipografico e viene trattata separatamente più sotto.
   Le immagini restano intatte: sono le uniche fonti di luce della sezione. */
.fascia-numero .card-evidenza,
.fascia-numero .griglia-terziari .card-articolo,
.fascia-numero .card-slider {
    background: var(--confini-notte-carta);
    border-color: rgba(244,241,234,0.08);
}
.fascia-numero .card-evidenza-titolo,
.fascia-numero .card-evidenza-titolo a,
.fascia-numero .griglia-terziari .card-titolo a,
.fascia-numero .card-slider .card-titolo a {
    color: var(--confini-carta);
}
.fascia-numero .card-evidenza-estratto,
.fascia-numero .griglia-terziari .anteprima-articolo,
.fascia-numero .card-slider .anteprima-articolo {
    color: rgba(244,241,234,0.75);
}
.fascia-numero .griglia-terziari .card-data,
.fascia-numero .card-slider .card-data,
.fascia-numero .card-evidenza .card-evidenza-data {
    color: rgba(244,241,234,0.5);
}
.fascia-numero .card-evidenza .etichetta,
.fascia-numero .griglia-terziari .etichetta,
.fascia-numero .card-slider .etichetta,
.fascia-numero .card-evidenza-cta {
    color: var(--confini-rosso-chiaro);
}
/* La sottolineatura rossa animata dei titoli su fondo notte-carta perde di
   contrasto (rosso originale 2.26:1): usa il rosso schiarito. */
.fascia-numero .griglia-terziari .card-titolo a,
.fascia-numero .card-slider .card-titolo a {
    background-image: linear-gradient(var(--confini-rosso-chiaro), var(--confini-rosso-chiaro));
}
.fascia-numero .griglia-terziari .card-titolo a:hover,
.fascia-numero .card-slider .card-titolo a:hover,
.fascia-numero .card-evidenza-titolo a:hover {
    color: var(--confini-rosso-chiaro);
}
/* Hover: sfumatura più chiara + ombra netta nera (evita l'alone grigio
   che rgba(0,0,0,0.10) produce sul bruno-notte). */
.fascia-numero .card-evidenza:hover,
.fascia-numero .griglia-terziari .card-articolo:hover,
.fascia-numero .card-slider:hover {
    background: #2C251D;
    box-shadow: 0 10px 28px rgba(0,0,0,0.4);
}

/* Secondari accanto al box grande: sommario illustrato.
   Miniatura a sinistra, testo a destra, sempre niente scatola.
   Il filo separatore superiore copre tutta la voce (miniatura + testo).
   Il contenitore è flex-column: sopra 900px riempie l'altezza della
   card-evidenza (griglia-evidenza fa già align-items: stretch); sotto,
   ogni voce torna ad altezza naturale. */
.fascia-numero .griglia-secondari-top {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.fascia-numero .griglia-secondari-top .card-articolo {
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(244,241,234,0.15);
    border-radius: 0;
    box-shadow: none;
    padding-block: var(--spazio-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--spazio-sm);
}
.fascia-numero .griglia-secondari-top .card-articolo::before { display: none; }
.fascia-numero .griglia-secondari-top .card-data { display: none; }

/* Miniatura: 3:4 come le copertine del tema, angoli tenui, niente crop (per
   coerenza con "copertine = documenti" — niente scale su hover). */
.fascia-numero .griglia-secondari-top .card-immagine {
    flex: 0 0 90px;
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 2px;
    background: var(--confini-carta);
}
@media (min-width: 900px) {
    /* Colonna a piena altezza dell'evidenza: le 3 voci si dividono lo spazio
       in parti uguali (flex: 1 1 0) e i fili le scandiscono in verticale. */
    .fascia-numero .griglia-secondari-top {
        height: 100%;
        align-self: stretch;
    }
    .fascia-numero .griglia-secondari-top .card-articolo { flex: 1 1 0; }
    .fascia-numero .griglia-secondari-top .card-immagine { flex: 0 0 110px; }
}

.fascia-numero .griglia-secondari-top .card-corpo {
    padding: 0;
    gap: var(--spazio-xs);
    min-width: 0; /* consente al testo di troncare/wrappare senza uscire dal flex */
}
.fascia-numero .griglia-secondari-top .etichetta {
    color: var(--confini-rosso-chiaro);
}
.fascia-numero .griglia-secondari-top .card-titolo {
    font-family: var(--font-titoli);
    font-size: 1.4rem;
    line-height: 1.2;
    margin: 0;
}
.fascia-numero .griglia-secondari-top .card-titolo a {
    color: var(--confini-carta);
    background-image: linear-gradient(var(--confini-rosso-chiaro), var(--confini-rosso-chiaro));
}
.fascia-numero .griglia-secondari-top .card-titolo a:hover {
    color: var(--confini-rosso-chiaro);
    background-size: 100% 2px;
}
.fascia-numero .griglia-secondari-top .anteprima-articolo {
    color: rgba(244,241,234,0.7);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}
/* Hover: solo la sottolineatura sul titolo — niente lift, niente shadow. */
.fascia-numero .griglia-secondari-top .card-articolo:hover {
    transform: none;
    background: transparent;
    box-shadow: none;
}

/* Fascia newsletter full-width scura */
.fascia-newsletter{ background:var(--confini-inchiostro); color:var(--confini-carta); padding-block:var(--spazio-xl); text-align:center; }
.fascia-newsletter h2{ color:var(--confini-carta); }
.fascia-newsletter p{ color:rgba(244,241,234,.8); max-width:480px; margin-inline:auto; }
.fascia-newsletter .substack-embed-wrap{ margin-top:var(--spazio-md); }

/* Hero ticker: marquee "In questo numero" a tutta larghezza */
.hero-ticker{ display:flex; align-items:center; gap:var(--spazio-md); margin-bottom:var(--spazio-lg); padding-bottom:var(--spazio-md); border-bottom:1px solid var(--confini-bordo); overflow:hidden; }
.hero-ticker-label{ flex:0 0 auto; font-family:var(--font-etichette); font-size:var(--fs-etichetta); letter-spacing:.12em; text-transform:uppercase; color:var(--confini-grigio-chiaro); }
.hero-ticker-viewport{ flex:1 1 auto; overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.hero-ticker-track{ display:inline-flex; white-space:nowrap; will-change:transform; animation:confini-marquee 30s linear infinite; }
.hero-ticker-group{ font-family:var(--font-titoli); font-size:1.4rem; color:var(--confini-inchiostro); padding-right:1.2rem; }
.hero-ticker-group a{ color:var(--confini-inchiostro); }
.hero-ticker-group a:hover{ color:var(--confini-rosso); }
.hero-ticker:hover .hero-ticker-track{ animation-play-state:paused; }
@keyframes confini-marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .hero-ticker-track{ animation:none; } }

/* =========================================================
   ESPERIENZA DI LETTURA — single article
   ========================================================= */

/* Progress bar di lettura */
.progresso-lettura {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: transparent;
    z-index: 1000;
    pointer-events: none;
}
.progresso-lettura span {
    display: block;
    height: 100%;
    width: 0;
    background: #A72835;
    transition: width 0.1s linear;
}

/* Quando la admin bar di WordPress è presente, abbassa la progress bar sotto di essa */
.admin-bar .progresso-lettura {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar .progresso-lettura {
        top: 46px;
    }
}

/* Colonna long-form */
.contenitore-testo {
    max-width: 740px;
}

/* Header articolo a due colonne: immagine piccola a sinistra, testo a destra */
.articolo-header.ha-immagine {
    display: flex;
    align-items: flex-start;
    gap: 1.8em;
    text-align: left;
}
.articolo-header-immagine {
    flex: 0 0 220px;
    max-width: 220px;
}
.articolo-header-immagine img {
    width: 100%;
    height: auto;
    display: block;
}
.articolo-header-testo {
    flex: 1 1 auto;
    min-width: 0;
}
/* Quando non c'è immagine, header a colonna singola allineato a sinistra */
.articolo-header.senza-immagine {
    text-align: left;
}
/* Titolo: stessa dimensione di prima, ma allineato a sinistra */
.articolo-header .articolo-titolo {
    text-align: left;
    margin-top: 0;
    margin-left: 0;
    padding-left: 0;
    text-indent: 0;
}
.articolo-header .articolo-meta {
    text-align: left;
}
.articolo-header .etichetta {
    margin-bottom: 0.4em;
    display: inline-block;
}
/* Tempo di lettura: riga discreta sopra il corpo */
.articolo-tempo-lettura {
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 1.6em;
}
/* Mobile: immagine sotto il blocco di testo */
@media screen and (max-width: 680px) {
    .articolo-header.ha-immagine {
        flex-direction: column-reverse;
    }
    .articolo-header-immagine {
        flex-basis: auto;
        max-width: 100%;
        width: 100%;
        margin-top: 1.2em;
    }
}

/* Corpo articolo: interlinea ampia, respiro */
.articolo-contenuto {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.18rem;
    line-height: 1.78;
    color: #1a1a1a;
}
.articolo-contenuto p {
    margin: 0 0 1.5em;
}
.articolo-contenuto h2,
.articolo-contenuto h3 {
    font-family: 'Cormorant Garamond', Garamond, serif;
    line-height: 1.2;
    margin: 1.8em 0 0.5em;
}

/* Capolettera editoriale sul primo paragrafo — solo articoli (single-post), non pagine.
   Salta paragrafi che iniziano con <img> o <cite>: eviterebbero un risultato tipografico
   sgraziato. Fallback float per la maggior parte dei browser; initial-letter dove
   supportato (Safari via -webkit-, Chrome dietro flag) per l'ancoraggio corretto alla
   griglia di 3 linee di testo. */
.single-post .articolo-contenuto > p:first-of-type:not(:has(> img:first-child)):not(:has(> cite:first-child))::first-letter {
    font-family: var(--font-titoli);
    color: var(--confini-rosso);
    font-weight: 600;
    float: left;
    font-size: 3.2em;
    line-height: 0.8;
    padding: 0.05em 0.1em 0 0;
}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
    .single-post .articolo-contenuto > p:first-of-type:not(:has(> img:first-child)):not(:has(> cite:first-child))::first-letter {
        initial-letter: 3;
        -webkit-initial-letter: 3;
        float: none;
        font-size: inherit;
        line-height: inherit;
        padding: 0;
        margin-right: 0.15em;
    }
}

/* Meta testata: tempo di lettura e firma */
.articolo-meta .firma {
    color: #A72835;
    text-decoration: none;
}
.articolo-meta .firma:hover {
    text-decoration: underline;
}
.articolo-meta .tempo-lettura {
    white-space: nowrap;
}

/* Box autore/i in coda all'articolo — fondo bianco, foto + nome + ruolo */
.box-autori {
    margin: 3em 0 0;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 4px;
    padding: 1.6em 1.8em;
}
.box-autore {
    display: flex;
    gap: 1.1em;
    align-items: center;
    margin-bottom: 1.2em;
}
.box-autore:last-child {
    margin-bottom: 0;
}
.box-autore-foto img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.box-autore-nome {
    font-family: 'Cormorant Garamond', Garamond, serif;
    font-size: 1.35rem;
    color: #1a1a1a;
    text-decoration: none;
    display: block;
    line-height: 1.1;
}
.box-autore-nome:hover {
    color: #A72835;
}
.box-autore-ruolo {
    font-size: 0.9rem;
    color: #A72835;
    margin-top: 0.2em;
}

/* Scheda autore (single-autore.php) */
.scheda-autore-header {
    text-align: center;
    padding: 2em 0 1em;
}
.scheda-autore-foto img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto 1em;
}
.scheda-autore-nome {
    font-family: 'Cormorant Garamond', Garamond, serif;
    margin: 0 0 0.2em;
}
.scheda-autore-ruolo {
    color: #A72835;
    font-size: 1.05rem;
}
.scheda-autore-affiliazione {
    color: #555;
    font-size: 0.95rem;
    margin-top: 0.2em;
}
.scheda-autore-bio {
    max-width: 600px;
    margin: 1.2em auto 0;
    line-height: 1.7;
}
.scheda-autore-link {
    display: inline-block;
    margin-top: 1em;
    color: #A72835;
}

/* =========================================================
   PAGINA LA REDAZIONE
   ========================================================= */

.redazione-intro {
    text-align: center;
    padding-top: 2em;
}
.redazione-titolo {
    font-family: 'Cormorant Garamond', Garamond, serif;
    margin-bottom: 0.6em;
}
.redazione-testo {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Griglia autori */
.redazione-griglia-wrap {
    margin: 3em auto 0;
}
.redazione-griglia {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.4em 1.6em;
}
.redazione-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
}
.redazione-card-foto img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin-bottom: 0.9em;
    transition: filter 0.2s ease;
}
.redazione-card:hover .redazione-card-foto img {
    filter: brightness(0.94);
}
.redazione-card-nome {
    font-family: 'Cormorant Garamond', Garamond, serif;
    font-size: 1.4rem;
    line-height: 1.15;
    color: #1a1a1a;
}
.redazione-card:hover .redazione-card-nome {
    color: #A72835;
}
.redazione-card-ruolo {
    font-size: 0.9rem;
    color: #A72835;
    margin-top: 0.25em;
}

/* Colophon su fondo bianco */
.redazione-colophon {
    background: #ffffff;
    margin-top: 4em;
    padding: 3em 0;
    border-top: 1px solid rgba(0,0,0,0.08);
}
.colophon-titolo {
    font-family: 'Cormorant Garamond', Garamond, serif;
    font-size: 1.6rem;
    margin-bottom: 1.2em;
    letter-spacing: 0.02em;
}
.colophon-contatti {
    margin-bottom: 1.5em;
    font-size: 0.98rem;
    line-height: 1.6;
}
.colophon-testo {
    font-size: 0.9rem;
    line-height: 1.65;
    color: #444;
}
.colophon-testo p {
    margin: 0 0 0.9em;
}

/* Responsive griglia redazione */
@media screen and (max-width: 900px) {
    .redazione-griglia { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (max-width: 620px) {
    .redazione-griglia { grid-template-columns: repeat(2, 1fr); }
    .redazione-card-foto img { width: 110px; height: 110px; }
}

/* Griglia unica articoli del numero — compatta, rubrica come etichetta sulla card */
.griglia-numero {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em 1.6em;
}
@media screen and (max-width: 900px) {
    .griglia-numero { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 560px) {
    .griglia-numero { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Fonte storica — nota in coda agli articoli d'archivio
   ========================================================================== */
.confini-fonte-storica {
    margin-top: 2.5em;
    padding-top: 1.2em;
    border-top: 1px solid var(--confini-bordo);
    font-size: 0.875em;
    line-height: 1.5;
    color: var(--confini-grigio-chiaro);
}
.confini-fonte-storica em {
    color: var(--confini-rosso);
    font-style: italic;
}

/* ==========================================================================
   Ricerca — pannello espandibile nell'header
   ========================================================================== */
.confini-search__form {
    position: absolute;
    top: calc(100% + 1px);
    right: var(--spazio-md);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: min(360px, calc(100vw - (var(--spazio-md) * 2)));
    padding: var(--spazio-xs);
    background: var(--confini-carta);
    border: 1px solid var(--confini-bordo);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity var(--transizione), transform var(--transizione);
}
.ricerca-aperta .confini-search__form {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.confini-search__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.35em 0.7em;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    color: var(--confini-inchiostro);
    background: var(--confini-bianco);
    border: 1px solid var(--confini-bordo);
    border-radius: 2px;
    outline: none;
    transition: border-color 0.15s ease;
}
.confini-search__input:focus {
    border-color: var(--confini-rosso);
}
.confini-search__input::placeholder {
    color: var(--confini-grigio-chiaro);
}
.confini-search__submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2em 0.45em;
    background: transparent;
    border: none;
    color: var(--confini-rosso);
    cursor: pointer;
    transition: color 0.15s ease;
}
.confini-search__submit svg {
    width: 18px;
    height: 18px;
    display: block;
}
.confini-search__submit:hover,
.confini-search__submit:focus {
    color: var(--confini-rosso-scuro);
}
@media screen and (max-width: 600px) {
    .confini-search__form {
        left: var(--spazio-sm);
        right: var(--spazio-sm);
        width: auto;
    }
}

/* Autore storico nella card risultati ricerca */
.card-autore-storico {
    margin: 0.4em 0 0;
    font-size: 0.85rem;
    color: var(--confini-grigio);
    font-style: italic;
}
.card-autore-storico strong {
    color: var(--confini-rosso);
    font-weight: 600;
}

/* Stato "nessun risultato" */
.ricerca-vuota {
    text-align: center;
    padding: 2em 0;
}
.ricerca-vuota p {
    font-size: 1.05rem;
    margin-bottom: 1.6em;
}

/* ==========================================================================
   Storia della Testata — Nuova serie e Archivio storico
   ========================================================================== */
.storia-nuova-serie,
.storia-archivio {
    border-top: 0;
}
.storia-nuova-serie { background: var(--confini-rosso); margin-top: 0; }
.storia-archivio   { background: var(--confini-fondo-scuro); }

.storia-nuova-serie .sezione-testata,
.storia-archivio .sezione-testata {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
    text-align: center;
    border-bottom: 0;
    padding-bottom: 0;
}
.storia-nuova-serie .sezione-testata h2,
.storia-archivio   .sezione-testata h2 { margin: 0; }

.storia-nuova-serie .sezione-testata h2,
.storia-archivio .sezione-testata h2 { color: var(--confini-carta); }
.storia-nuova-serie .sezione-testata .etichetta { color: rgba(255,255,255,.78); }
.storia-archivio .sezione-testata .etichetta { color: var(--confini-rosso-chiaro); }
.storia-nuova-serie .sezione-testata--editoriale em { color: var(--confini-carta); }
.storia-archivio .sezione-testata--editoriale em { color: var(--confini-rosso-chiaro); }
.storia-nuova-serie .sezione-testata--editoriale h2::before,
.storia-nuova-serie .sezione-testata--editoriale h2::after,
.storia-archivio .sezione-testata--editoriale h2::before,
.storia-archivio .sezione-testata--editoriale h2::after { opacity: .35; }
.nuova-serie-attesa {
    max-width: 38rem;
    margin: 0 auto;
    text-align: center;
    color: var(--confini-bianco);
}
.nuova-serie-attesa-segno {
    display: block;
    font-family: var(--font-titoli);
    font-size: clamp(4rem, 9vw, 7rem);
    line-height: .8;
    margin-bottom: 1rem;
    color: rgba(255,255,255,.18);
}
.nuova-serie-attesa p { margin: 0; color: rgba(255,255,255,.86); font-style: italic; }

/* --- Nuova serie: poche card, più distese ------------------------------- */
.nuova-serie-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.2rem 1.8rem;
}
@media (min-width: 700px)  { .nuova-serie-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .nuova-serie-grid { grid-template-columns: repeat(3, 1fr); } }

.nuova-serie-card {
    background: var(--confini-bianco);
    border: 1px solid var(--confini-bordo);
    border-radius: var(--raggio);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform var(--transizione), box-shadow var(--transizione);
}
.nuova-serie-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}
.nuova-serie-card-cover {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--confini-carta-scura);
}
.nuova-serie-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.nuova-serie-card-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem; text-align: center;
}
.nuova-serie-card-placeholder span {
    font-family: var(--font-titoli);
    font-size: 1.6rem;
    color: var(--confini-grigio);
}
.nuova-serie-card-corpo {
    padding: 1.4rem 1.4rem 1.6rem;
    display: flex; flex-direction: column; gap: 0.55rem; flex: 1;
}
.nuova-serie-card-titolo {
    font-family: var(--font-titoli);
    font-size: var(--fs-h3);
    line-height: 1.2;
    margin: 0;
    color: var(--confini-inchiostro);
}
.nuova-serie-card-abstract {
    font-family: var(--font-corpo);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--confini-grigio);
    margin: 0;
    flex: 1;
}
.nuova-serie-card-cta {
    margin-top: 0.4rem;
    font-family: var(--font-etichette);
    font-size: var(--fs-etichetta);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--confini-rosso);
}
.nuova-serie-card-cta span {
    display: inline-block;
    transition: transform var(--transizione);
}
.nuova-serie-card:hover .nuova-serie-card-cta span { transform: translateX(3px); }
.nuova-serie-vuota,
.archivio-vuoto {
    text-align: center;
    color: var(--confini-grigio);
    font-style: italic;
    margin: 0;
}

/* --- Filtro per anno (archivio storico) --------------------------------- */
.filtro-anni {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto var(--spazio-md);
    padding: 0.4rem;
    border: 1px solid rgba(244,241,234,.14);
    border-radius: 999px;
    background: rgba(244,241,234,.055);
}
@media (max-width: 600px) {
    .filtro-anni {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        width: 100%;
        padding: 0.4rem;
        -webkit-overflow-scrolling: touch;
    }
}
.filtro-anni-btn {
    font-family: var(--font-etichette);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(244,241,234,.72);
    background: transparent;
    border: 0;
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: color var(--transizione), background var(--transizione), border-color var(--transizione);
}
.filtro-anni-btn:hover {
    color: var(--confini-bianco);
    background: rgba(244,241,234,.1);
}
.filtro-anni-btn.is-active {
    color: var(--confini-inchiostro);
    background: var(--confini-carta);
}

/* --- Archivio storico: card compatte ------------------------------------ */
.archivio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.4rem 1rem;
}
@media (min-width: 700px)  { .archivio-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .archivio-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1300px) { .archivio-grid { grid-template-columns: repeat(5, 1fr); } }

.archivio-card {
    background: var(--confini-bianco);
    border: 1px solid var(--confini-bordo);
    border-radius: var(--raggio);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transizione), box-shadow var(--transizione);
}
.archivio-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}
.archivio-card.is-hidden { display: none; }

.archivio-card-cover {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--confini-carta-scura);
}
.archivio-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.archivio-card-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: 0.6rem; text-align: center;
    background: var(--confini-carta);
    border-bottom: 1px solid var(--confini-bordo);
}
.archivio-card-placeholder span {
    font-family: var(--font-titoli);
    font-size: 1.1rem;
    color: var(--confini-grigio);
    letter-spacing: 0.04em;
}

.archivio-card-corpo {
    padding: 0.8rem 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}
.archivio-card-titolo {
    font-family: var(--font-titoli);
    font-size: 1rem;
    line-height: 1.2;
    margin: 0;
    color: var(--confini-inchiostro);
}
.archivio-card-abstract {
    font-family: var(--font-corpo);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--confini-grigio);
    margin: 0;
    flex: 1;
}
.archivio-card-link {
    margin-top: 0.35rem;
    font-family: var(--font-etichette);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--confini-rosso);
}
.archivio-card-link span {
    display: inline-block;
    transition: transform var(--transizione);
}
.archivio-card:hover .archivio-card-link span { transform: translateX(3px); }

.archivio-spiegazione {
    max-width: 44rem;
    margin: 0.65rem auto 0;
    text-align: center;
    color: rgba(244,241,234,.74);
}
.archivio-card-cover { display: block; }
.archivio-card-titolo a { color: inherit; }
.archivio-card-azioni {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: auto;
    padding-top: 0.35rem;
}
.archivio-card-azioni .archivio-card-link { margin-top: 0; }
.archivio-card-link--pdf { color: var(--confini-inchiostro); }
.archivio-card--solo-pdf { background: var(--confini-carta); }

/* --- Archivio unificato: richiami d'apertura e sezioni chiare ----------- */
.archivio-richiami {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding-bottom: var(--spazio-lg);
}
@media (min-width: 760px) {
    .archivio-richiami { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.archivio-richiamo {
    min-height: 270px;
    padding: clamp(1.75rem, 4vw, 3.5rem);
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    align-content: start;
    gap: 0.75rem;
    color: var(--confini-bianco);
}
.archivio-richiamo:hover { color: var(--confini-bianco); }
.archivio-richiamo h2 { margin: 0; color: inherit; font-size: clamp(2rem, 3.4vw, 3rem); }
.archivio-richiamo p { margin: 0; color: rgba(255,255,255,.82); max-width: 34rem; }
.archivio-richiamo--nuova { background: var(--confini-fondo-scuro); }
.archivio-richiamo--nuova .etichetta { color: var(--confini-rosso-chiaro); }
.archivio-richiamo--storico { background: var(--confini-rosso); }
.archivio-richiamo--storico .etichetta { color: var(--confini-bianco); }
.archivio-richiamo-cta {
    margin-top: var(--spazio-xs);
    font-family: var(--font-etichette);
    font-size: var(--fs-piccolo);
    font-weight: 600;
}
.archivio-richiamo-cta span { display: inline-block; transition: transform var(--transizione); }
.archivio-richiamo:hover .archivio-richiamo-cta span { transform: translateY(4px); }

.storia-nuova-serie,
.storia-archivio {
    background: var(--confini-carta);
    color: var(--confini-inchiostro);
    scroll-margin-top: 7rem;
}
.storia-archivio { background: var(--confini-carta-scura); }
.storia-nuova-serie .sezione-testata h2,
.storia-archivio .sezione-testata h2 { color: var(--confini-inchiostro); }
.storia-nuova-serie .sezione-testata .etichetta,
.storia-archivio .sezione-testata .etichetta { color: var(--confini-rosso); }
.storia-nuova-serie .sezione-testata--editoriale em,
.storia-archivio .sezione-testata--editoriale em { color: var(--confini-rosso); }
.archivio-spiegazione { color: var(--confini-grigio); }
.nuova-serie-attesa { color: var(--confini-inchiostro); }
.nuova-serie-attesa-segno { color: rgba(167,40,53,.16); }
.nuova-serie-attesa p { color: var(--confini-grigio); }
.nuova-serie-card.is-hidden { display: none; }

.filtro-anni.filtro-anni--chiaro {
    width: auto;
    max-width: 58rem;
    gap: 0.35rem 1rem;
    margin: 0 auto var(--spazio-md);
    padding: 0 0 0.7rem;
    border: 0;
    border-bottom: 1px solid var(--confini-bordo);
    border-radius: 0;
    background: transparent;
}
.filtro-anni--chiaro .filtro-anni-btn {
    position: relative;
    padding: 0.4rem 0.15rem;
    border: 0;
    border-radius: 0;
    color: var(--confini-grigio);
    background: transparent;
}
.filtro-anni--chiaro .filtro-anni-btn:hover { color: var(--confini-rosso); background: transparent; }
.filtro-anni--chiaro .filtro-anni-btn.is-active { color: var(--confini-inchiostro); background: transparent; }
.filtro-anni--chiaro .filtro-anni-btn.is-active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -0.75rem;
    height: 2px;
    background: var(--confini-rosso);
}
@media (max-width: 600px) {
    .filtro-anni.filtro-anni--chiaro { width: 100%; padding: 0 0 0.7rem; }
}

/* Stessa scala di card per Nuova serie e Archivio storico. */
.nuova-serie-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem 1rem;
}
@media (min-width: 700px)  { .nuova-serie-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .nuova-serie-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .nuova-serie-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.nuova-serie-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.07); }
.nuova-serie-card-corpo { padding: 0.8rem 0.85rem 1rem; gap: 0.4rem; }
.nuova-serie-card-titolo { font-size: 1rem; }
.nuova-serie-card-abstract { font-size: 0.85rem; line-height: 1.5; }
.nuova-serie-card-placeholder { padding: 0.6rem; }
.nuova-serie-card-placeholder span { font-size: 1.1rem; }
.nuova-serie-card-cta { font-size: 0.7rem; }

/* ==========================================================================
   Anteprime articolo nelle liste (excerpt con fallback occhiello)
   ========================================================================== */
.anteprima-articolo {
    font-family: var(--font-corpo);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--confini-grigio);
    margin: 0.4em 0 0.6em;
    /* Fallback per browser senza line-clamp: limite via altezza. */
    max-height: calc(1.55em * 3);
    overflow: hidden;
    /* Line-clamp standard. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* ==========================================================================
   Rimando al PDF del numero originale (articoli d'archivio storico)
   ========================================================================== */
.rimando-pdf {
    margin-top: var(--spazio-lg);
    padding: 1.4rem 1.6rem;
    background: var(--confini-carta-scura);
    border-top: 2px solid var(--confini-rosso);
    border-radius: var(--raggio);
    font-family: var(--font-corpo);
}
.rimando-pdf p {
    margin: 0 0 0.6rem;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--confini-inchiostro);
    font-style: italic;
}
.rimando-pdf a {
    font-family: var(--font-etichette);
    font-size: var(--fs-etichetta);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--confini-rosso);
}
.rimando-pdf a span {
    display: inline-block;
    transition: transform var(--transizione);
}
.rimando-pdf a:hover span { transform: translateX(3px); }

/* ==========================================================================
   Fascia "Dal flusso": card 4:3, compatte, hairline rossa di richiamo
   Tutto è scoped sotto .griglia-articoli--flusso per non toccare le card
   della sezione "Confini · il quadrimestrale".
   ========================================================================== */
.griglia-articoli--flusso .card-articolo {
    border-top: 2px solid var(--confini-rosso);
}
/* Il filo rosso "Dal flusso" è permanente: nascondi il pseudo-elemento animato
   ereditato dalla regola generale (evita raddoppio del filo su hover). */
.griglia-articoli--flusso .card-articolo::before { display: none; }
.griglia-articoli--flusso .card-immagine {
    aspect-ratio: 4 / 3;
}
.griglia-articoli--flusso .card-immagine img {
    object-fit: cover;
    transition: transform 200ms ease;
}
/* Formato 4:3 fotografico: qui il lieve zoom su hover è innocuo perché non
   stiamo mostrando una copertina-documento. */
.griglia-articoli--flusso .card-articolo:hover .card-immagine img {
    transform: scale(1.03);
}
.griglia-articoli--flusso .card-corpo {
    padding: var(--spazio-xs) var(--spazio-sm);
    gap: 0.25rem;
}
.griglia-articoli--flusso .card-titolo {
    font-size: 1.15rem;
    line-height: 1.2;
}
.griglia-articoli--flusso .anteprima-articolo {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.griglia-articoli--flusso .card-data {
    font-size: 0.8rem;
}
/* CTA "Vedi tutti" sotto la griglia flusso: centrato e ingrandito. */
.griglia-articoli--flusso + .btn-leggi {
    display: block;
    width: fit-content;
    margin-inline: auto;
    padding: 1.1rem 2.4rem;
    font-size: 1.1rem;
}

/* ==========================================================================
   15. SIGILLO — watermark su tutte le immagini degli articoli
   ========================================================================== */
.hero-immagine,
.articolo-header-immagine,
.card-immagine,
.card-slider-img,
.card-evidenza-immagine {
    position: relative;
}
/* Container query solo sui contenitori che possono variare drasticamente in
   larghezza (hero, apertura, evidenza). Card medie e miniature del sommario
   sono già dimensionate per il loro scope. */
.hero-immagine,
.articolo-header-immagine,
.card-evidenza-immagine {
    container-type: inline-size;
}
.hero-immagine::after,
.articolo-header-immagine::after,
.card-immagine::after,
.card-slider-img::after,
.card-evidenza-immagine::after {
    content: "";
    position: absolute;
    background: url("assets/brand/svg/monogramma-avorio.svg") no-repeat center / contain;
    opacity: 0.75;
    pointer-events: none;
    /* drop-shadow segue l'alpha del monogramma, così non stampa un rettangolo
       opaco sulle foto chiare */
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
    z-index: 2;
}
/* Scaglione grande: hero, apertura articolo, card di evidenza */
.hero-immagine::after,
.articolo-header-immagine::after,
.card-evidenza-immagine::after {
    right: 14px;
    bottom: 14px;
    width: 28px;
    height: 28px;
}
/* Scaglione medio: card di flusso/quadrimestrale/terziari e slider */
.card-immagine::after,
.card-slider-img::after {
    right: 10px;
    bottom: 10px;
    width: 20px;
    height: 20px;
}
/* Miniature del sommario (~110px): sigillo ridotto per non coprire la foto */
.fascia-numero .griglia-secondari-top .card-immagine::after {
    right: 6px;
    bottom: 6px;
    width: 14px;
    height: 14px;
}
/* Contenitore grande che si stringe sotto 400px (mobile o layout compresso) */
@container (max-width: 400px) {
    .hero-immagine::after,
    .articolo-header-immagine::after,
    .card-evidenza-immagine::after {
        right: 8px;
        bottom: 8px;
        width: 16px;
        height: 16px;
    }
}

/* ==========================================================================
   16. RICHIAMI HOME — quadrimestrale / eventi
   ========================================================================== */
.richiami-home {
    padding-block: 0 var(--spazio-lg);
}
.richiami-home-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
@media (min-width: 760px) {
    .richiami-home-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.richiamo-home {
    min-height: 270px;
    padding: clamp(1.75rem, 4vw, 3.5rem);
    border: 0;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    align-content: start;
    gap: 0.75rem;
    color: var(--confini-bianco);
    transition: background-color var(--transizione);
}
.richiamo-home:hover {
    color: var(--confini-bianco);
}
.richiamo-home:focus-visible {
    position: relative;
    z-index: 1;
    outline: 3px solid var(--confini-bianco);
    outline-offset: -7px;
}
.richiamo-home h2 {
    font-size: clamp(2rem, 3.4vw, 3rem);
    margin: 0;
    color: inherit;
}
.richiamo-home p {
    color: rgba(255,255,255,0.82);
    max-width: 34rem;
    margin: 0;
}
.richiamo-home-cta {
    display: inline-block;
    justify-self: start;
    margin-top: var(--spazio-xs);
    font-family: var(--font-etichette);
    font-size: var(--fs-piccolo);
    font-weight: 600;
    color: inherit;
    transition: transform var(--transizione);
}
.richiamo-home:hover .richiamo-home-cta {
    transform: translateX(5px);
}
.richiamo-home--numero {
    background: var(--confini-fondo-scuro);
}
.richiamo-home--numero:hover {
    background: var(--confini-notte-carta);
}
.richiamo-home--numero .etichetta {
    color: var(--confini-rosso-chiaro);
}
.richiamo-home--eventi {
    background: var(--confini-rosso);
}
.richiamo-home--eventi:hover {
    background: var(--confini-rosso-scuro);
}
.richiamo-home--eventi .etichetta {
    color: var(--confini-bianco);
}
@media (min-width: 760px) {
    .richiamo-home--eventi {
        border-left: 1px solid rgba(255,255,255,0.24);
    }
}
@media (max-width: 620px) {
    .richiamo-home {
        min-height: 220px;
    }
}

/* Contatti — lettere al direttore e alla redazione */
.contatti-intro:empty { display: none; }
.confini-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 3.5rem);
    margin: 2rem 0 4rem;
}
.confini-form-card {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: var(--confini-carta-scura);
    border-top: 4px solid var(--confini-rosso);
}
.confini-form-card h2 { margin-top: 0; }
.confini-lettera-form p { margin: 0 0 1rem; }
.confini-lettera-form label { display: block; }
.confini-lettera-form input[type="text"],
.confini-lettera-form input[type="email"],
.confini-lettera-form textarea {
    width: 100%;
    margin-top: .4rem;
    padding: .8rem .9rem;
    color: var(--confini-nero);
    background: #fff;
    border: 1px solid var(--confini-bordo);
    border-radius: 0;
    font: inherit;
}
.confini-lettera-form textarea { resize: vertical; }
.confini-check {
    margin: 1rem 0;
    font-size: .92rem;
    line-height: 1.5;
}
.confini-check input { margin-right: .55rem; }
.confini-lettera-form button {
    margin-top: .75rem;
    padding: .8rem 1.15rem;
    color: #fff;
    background: var(--confini-rosso);
    border: 1px solid var(--confini-rosso);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.confini-lettera-form button:hover,
.confini-lettera-form button:focus-visible { background: var(--confini-nero); border-color: var(--confini-nero); }
.confini-form-avviso { padding: 1rem; border-left: 4px solid; }
.confini-form-successo { background: #edf6ef; border-color: #2f6f3e; }
.confini-form-errore { background: #fff0f0; border-color: var(--confini-rosso); }
.confini-honeypot { position: absolute !important; left: -9999px !important; }
@media (max-width: 760px) {
    .confini-form-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   17. EVENTI
   ========================================================================== */
.eventi-hero {
    padding-block: var(--spazio-lg);
    border-bottom: 1px solid var(--confini-bordo);
}
.eventi-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spazio-md);
    align-items: end;
}
@media (min-width: 860px) {
    .eventi-hero-grid {
        grid-template-columns: 1.2fr 0.8fr;
        gap: var(--spazio-lg);
    }
}
.eventi-hero h1 {
    font-size: var(--fs-display);
    margin-top: var(--spazio-xs);
    margin-bottom: 0;
}
.eventi-hero p {
    color: var(--confini-grigio);
    font-size: 1.15rem;
    font-style: italic;
    margin: 0;
}
.eventi-intro {
    padding-bottom: 0;
}
.eventi-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spazio-md);
}
@media (min-width: 760px) {
    .eventi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.evento-card {
    background: var(--confini-bianco);
    border: 1px solid var(--confini-bordo);
    border-radius: var(--raggio);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transizione), box-shadow var(--transizione);
}
.evento-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}
.evento-card-immagine {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--confini-carta-scura);
}
.evento-card-immagine img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.evento-card-corpo {
    padding: var(--spazio-md);
    display: flex;
    flex-direction: column;
    gap: var(--spazio-xs);
    flex: 1;
}
.evento-meta {
    font-family: var(--font-etichette);
    font-size: var(--fs-etichetta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--confini-rosso);
}
.evento-titolo,
.evento-riga h3 {
    margin: 0;
}
.evento-titolo a,
.evento-riga h3 a {
    color: var(--confini-inchiostro);
}
.evento-titolo a:hover,
.evento-riga h3 a:hover {
    color: var(--confini-rosso);
}
.evento-card-corpo p {
    color: var(--confini-grigio);
    margin: 0 0 var(--spazio-xs);
}
.eventi-vuoto {
    background: var(--confini-bianco);
    border: 1px solid var(--confini-bordo);
    border-top: 3px solid var(--confini-rosso);
    padding: var(--spazio-md);
    max-width: 720px;
}
.eventi-vuoto h3 {
    margin-top: 0;
}
.eventi-vuoto p {
    color: var(--confini-grigio);
    margin-bottom: 0;
}
.eventi-passati {
    background: var(--confini-carta-scura);
}
.eventi-lista {
    border-top: 1px solid var(--confini-bordo);
}
.evento-riga {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spazio-md);
    padding-block: var(--spazio-sm);
    border-bottom: 1px solid var(--confini-bordo);
}
@media (max-width: 620px) {
    .richiamo-home,
    .evento-card-corpo,
    .eventi-vuoto {
        padding: var(--spazio-sm);
    }
    .evento-riga {
        display: block;
    }
    .evento-riga .etichetta {
        display: inline-block;
        margin-top: var(--spazio-xs);
    }
}


/* Note legali e tutela dei contenuti */
.archivio-avvertenza {
    max-width: 900px;
    margin: 0 auto var(--spazio-lg);
    padding: clamp(1.4rem, 3vw, 2rem);
    border-left: 3px solid var(--confini-rosso);
    background: rgba(255, 255, 255, 0.46);
    color: var(--confini-inchiostro);
}
.archivio-avvertenza h3 {
    margin: 0 0 0.75rem;
    font-family: var(--font-titoli);
    font-size: clamp(1.35rem, 2.4vw, 1.8rem);
}
.archivio-avvertenza p {
    margin: 0 0 0.8rem;
    font-size: 0.98rem;
    line-height: 1.7;
}
.archivio-avvertenza p:last-child { margin-bottom: 0; }
.archivio-avvertenza a,
.colophon-note-legali a {
    color: var(--confini-rosso-scuro);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}
.colophon-note-legali {
    margin-top: 1.25rem;
    font-size: 0.95rem;
}

.articolo-diritti {
    margin: 2.5rem 0 1.5rem;
    padding: 1.2rem 1.35rem;
    border-top: 1px solid var(--confini-bordo);
    border-bottom: 1px solid var(--confini-bordo);
    color: var(--confini-grigio);
    font-size: 0.88rem;
    line-height: 1.6;
}
.articolo-diritti p { margin: 0 0 0.55rem; }
.articolo-diritti p:last-child { margin-bottom: 0; }
.articolo-diritti a {
    color: var(--confini-rosso-scuro);
    text-underline-offset: 0.16em;
}

.contatti-diritti {
    margin: 2rem 0 2.5rem;
    padding: clamp(1.5rem, 3vw, 2rem);
    background: var(--confini-fondo-scuro);
    color: var(--confini-bianco);
}
.contatti-diritti .etichetta { color: var(--confini-rosso-chiaro); }
.contatti-diritti h2 {
    margin: 0.45rem 0 0.75rem;
    color: var(--confini-bianco);
    font-size: clamp(1.55rem, 3vw, 2rem);
}
.contatti-diritti p { margin: 0 0 1rem; color: rgba(255,255,255,.84); }
.contatti-diritti a { color: var(--confini-rosso-chiaro); }
.contatti-diritti-link {
    display: inline-block;
    font-family: var(--font-etichette);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}


/* ==========================================================================
   NOTE LEGALI E CONTATTI — composizione editoriale
   ========================================================================== */
.page-id-891 .articolo-header,
.contatti-pagina .articolo-header {
    text-align: center;
    padding-top: clamp(2.5rem, 6vw, 5rem);
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.page-id-891 .articolo-titolo,
.contatti-pagina .articolo-titolo {
    margin: 0 auto;
    max-width: 900px;
    font-family: var(--font-titoli);
    font-size: var(--fs-h1);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -0.025em;
    text-align: center;
}
.page-id-891 .articolo-titolo::after,
.contatti-pagina .articolo-titolo::after {
    content: "";
    display: block;
    width: 54px;
    height: 2px;
    margin: 1.1rem auto 0;
    background: var(--confini-rosso);
}
.page-id-891 .contenitore-testo {
    max-width: 1040px;
}
.page-id-891 .articolo-contenuto {
    font-size: var(--fs-corpo);
    line-height: 1.72;
    text-align: left;
    hyphens: auto;
}
.confini-legal-intro {
    max-width: 780px;
    margin: 0 auto clamp(2.5rem, 5vw, 4.5rem);
    color: var(--confini-grigio);
}
.confini-legal-intro p {
    margin: 0;
    font-family: var(--font-titoli);
    font-size: clamp(1.3rem, 2.5vw, 1.75rem) !important;
    line-height: 1.45;
}
.confini-legal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    counter-reset: legal-card;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.confini-legal-card {
    position: relative;
    margin: 0 !important;
    padding: clamp(1.4rem, 3vw, 2rem);
    border: 1px solid var(--confini-bordo);
    background: rgba(255,255,255,.26);
    counter-increment: legal-card;
}
.confini-legal-card::before {
    content: counter(legal-card, decimal-leading-zero);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    margin-bottom: 1rem;
    border: 1px solid var(--confini-rosso);
    border-radius: 50%;
    color: var(--confini-rosso);
    font: 600 .7rem/1 var(--font-etichette);
    letter-spacing: .08em;
}
.confini-legal-card h2,
.confini-legal-highlight h2 {
    margin: 0 0 .7rem;
    font-family: var(--font-titoli);
    font-size: clamp(1.45rem, 2.5vw, 1.9rem);
    line-height: 1.12;
    color: var(--confini-inchiostro);
}
.confini-legal-card p,
.confini-legal-highlight p {
    margin: 0;
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.7;
}
.confini-legal-highlight {
    position: relative;
    margin: 1rem 0 0 !important;
    padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.5rem, 4vw, 3rem);
    border-left: 4px solid var(--confini-rosso);
    background: var(--confini-carta-scura);
}
.confini-legal-highlight::after {
    position: absolute;
    right: 1.5rem;
    top: 1.1rem;
    font-family: var(--font-titoli);
    font-size: 2.2rem;
    line-height: 1;
    color: rgba(167,40,53,.35);
}
.confini-legal-ai::after { content: "✦"; }
.confini-legal-sponsored {
    color: var(--confini-bianco);
    border-left-color: var(--confini-rosso-chiaro);
    background: var(--confini-fondo-scuro);
}
.confini-legal-sponsored h2,
.confini-legal-sponsored a { color: var(--confini-bianco); }
.confini-legal-sponsored::after { content: "◇"; color: var(--confini-rosso-chiaro); }
.confini-legal-kicker {
    margin: 0 0 .55rem !important;
    font: 700 var(--fs-etichetta)/1.2 var(--font-etichette) !important;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--confini-rosso);
}
.confini-legal-sponsored .confini-legal-kicker { color: var(--confini-rosso-chiaro); }
.confini-legal-contact {
    margin: clamp(2.5rem, 5vw, 4rem) 0 0 !important;
    padding: 1.35rem;
    border-top: 1px solid var(--confini-rosso);
    border-bottom: 1px solid var(--confini-rosso);
}
.confini-legal-contact p { margin: 0; }

.contatti-pagina .contenitore-testo { max-width: 1040px; }
.contatti-intro,
.contatti-diritti p,
.confini-form-card { text-align: left; hyphens: auto; }
.contatti-diritti {
    position: relative;
    margin: clamp(2.5rem, 5vw, 4rem) 0 clamp(3.5rem, 7vw, 6rem);
    padding: clamp(1.6rem, 4vw, 2.8rem);
    border: 1px solid rgba(255,255,255,.22);
    border-left: 4px solid var(--confini-rosso-chiaro);
    background: var(--confini-fondo-scuro);
}
.contatti-diritti::before {
    content: "✦";
    position: absolute;
    top: 1.3rem;
    right: 1.5rem;
    color: var(--confini-rosso-chiaro);
    font-size: 1.8rem;
}
.contatti-diritti h2 {
    max-width: 720px;
    margin: .65rem 0 .8rem;
    font-family: var(--font-titoli);
    font-size: clamp(1.65rem, 3vw, 2.3rem);
    line-height: 1.1;
}
.contatti-diritti p { max-width: 820px; line-height: 1.7; }
.contatti-diritti-link {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin-top: .8rem;
    padding: .78rem 1rem;
    border: 1px solid var(--confini-rosso-chiaro);
    color: var(--confini-bianco) !important;
    font: 700 .76rem/1 var(--font-etichette);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background var(--transizione), color var(--transizione);
}
.contatti-diritti-link:hover,
.contatti-diritti-link:focus-visible {
    background: var(--confini-rosso-chiaro);
    color: var(--confini-fondo-scuro) !important;
}
.confini-form-grid { gap: clamp(1.25rem, 3vw, 2.25rem); }
.confini-form-card {
    border: 1px solid var(--confini-bordo);
    box-shadow: 0 12px 36px rgba(28,24,20,.06);
}
@media (max-width: 760px) {
    .confini-legal-grid { grid-template-columns: 1fr; }
    .confini-legal-card { padding: 1.35rem; }
    .confini-legal-highlight::after,
    .contatti-diritti::before { opacity: .55; }
    .contatti-diritti { margin-bottom: 3.5rem; }
}

/* Allineamento definitivo del titolo Contatti alle pagine istituzionali */
.contatti-pagina .articolo-titolo { font-size: var(--fs-h1) !important; }


/* ==========================================================================
   SISTEMA TITOLI PAGINE — uniforme, esclusa la pagina Eventi
   ========================================================================== */
.page-template-page-articoli .archivio-articoli-testata,
.page-template-page-archivio .archivio-intro,
.page-template-page-redazione .redazione-intro,
.page-id-7 .articolo-header,
.page-id-891 .articolo-header,
.contatti-pagina .articolo-header {
    text-align: center !important;
}
.page-template-page-articoli .archivio-articoli-testata h1,
.page-template-page-archivio .archivio-intro h1,
.page-template-page-redazione .redazione-titolo,
.page-id-7 .articolo-titolo,
.page-id-891 .articolo-titolo,
.contatti-pagina .articolo-titolo {
    display: block;
    max-width: 980px;
    margin-left: auto !important;
    margin-right: auto !important;
    font-family: var(--font-titoli) !important;
    font-size: var(--fs-h1) !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
    text-align: center !important;
}
.page-template-page-articoli .archivio-articoli-testata h1::after,
.page-template-page-archivio .archivio-intro h1::after,
.page-template-page-redazione .redazione-titolo::after,
.page-id-7 .articolo-titolo::after,
.page-id-891 .articolo-titolo::after,
.contatti-pagina .articolo-titolo::after {
    content: "";
    display: block;
    width: 54px;
    height: 2px;
    margin: 1.1rem auto 0;
    background: var(--confini-rosso);
}
.page-id-7 .articolo-header { padding-top: clamp(2.5rem,6vw,5rem); padding-bottom: clamp(1.5rem,3vw,2.5rem); }
.page-template-page-redazione .redazione-intro { padding-top: clamp(2.5rem,6vw,5rem); }

/* Le card delle Note legali occupano realmente le due colonne della griglia. */
.confini-legal-grid {
    width: 100%;
    max-width: 1040px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.confini-legal-grid > .confini-legal-card {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Rettifiche: box conclusivo, chiaro e coordinato alle card legali. */
.contatti-diritti {
    margin: clamp(3rem,6vw,5rem) 0 0 !important;
    padding: clamp(1.5rem,3vw,2.25rem) !important;
    border: 1px solid var(--confini-bordo) !important;
    border-left: 3px solid var(--confini-rosso) !important;
    background: rgba(255,255,255,.24) !important;
    color: var(--confini-inchiostro) !important;
    box-shadow: none !important;
}
.contatti-diritti::before { color: var(--confini-rosso) !important; }
.contatti-diritti h2,
.contatti-diritti a { color: var(--confini-inchiostro) !important; }
.contatti-diritti .etichetta { color: var(--confini-rosso) !important; }
.contatti-diritti-link {
    margin-top: 1rem;
    padding: 1rem 1.35rem !important;
    border: 1px solid var(--confini-rosso) !important;
    background: var(--confini-rosso) !important;
    color: var(--confini-bianco) !important;
    font: 800 .75rem/1.7 var(--font-corpo) !important;
    letter-spacing: .13em !important;
    text-transform: uppercase;
}
.contatti-diritti-link:hover,
.contatti-diritti-link:focus-visible {
    background: var(--confini-rosso-scuro) !important;
    color: var(--confini-bianco) !important;
}
@media (max-width:760px){
  .confini-legal-grid{grid-template-columns:1fr;}
}


/* Correzioni UX definitive: Contatti e Note legali */
.contatti-intro h2,
#contatti-apertura-titolo {
    max-width: 620px !important;
    font-size: clamp(2.35rem, 3.8vw, 3.55rem) !important;
    line-height: 1.12 !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}
.contatti-diritti,
.contatti-diritti p,
.contatti-diritti h2,
.contatti-diritti .etichetta {
    color: var(--confini-inchiostro) !important;
}
.contatti-diritti > p a {
    color: var(--confini-rosso) !important;
    text-decoration-color: currentColor !important;
}
.contatti-diritti-link,
.contatti-diritti-link:visited {
    color: var(--confini-bianco) !important;
}
.page-id-891 .articolo-contenuto { max-width: 1000px !important; margin-inline: auto !important; }
.confini-legal-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 900px) !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 1000px !important;
    margin-inline: auto !important;
}
.confini-legal-grid > .confini-legal-card {
    width: 100% !important;
    max-width: 900px !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
}
@media (max-width:760px){
  .contatti-intro h2,#contatti-apertura-titolo{font-size:clamp(2rem,11vw,3rem)!important;}
  .confini-legal-grid{grid-template-columns:minmax(0,1fr)!important;}
}

/* Rifinitura frase introduttiva e CTA Rettifiche */
#contatti-apertura-titolo { font-size: clamp(2.35rem, 3.15vw, 2.95rem) !important; }
.contatti-diritti a.contatti-diritti-link,
.contatti-diritti a.contatti-diritti-link:visited { color: var(--confini-bianco) !important; }