/* Merriweather, il carattere dei titoli — scelto da Marco il 16/09/2026
 * ---------------------------------------------------------------------------
 * Serve solo alla sezione editoriale, quindi sta qui e non in inter.css: un
 * posto solo, e chi legge le altre pagine non se lo scarica.
 *
 * Il mestiere e' diviso: Merriweather dice il titolo, Inter racconta il testo.
 * E' il modo in cui lo usa RaiNews (il loro corpo e' un carattere senza grazie,
 * non un graziato), ed e' anche quello che tiene insieme la pagina con le
 * figure: le card e i grafici degli articoli sono composti in Inter, quindi
 * didascalie, tabelle e testo parlano la stessa lingua della figura.
 *
 * Un file solo, variabile. Il corsivo non c'e', perche' nei titoli non serve.
 *
 * RITAGLIATO IL 17/09/2026 (#804). Merriweather ha due assi: il peso e la
 * taglia ottica, che il browser muove da solo in base al corpo del testo. Il
 * file originale copriva pesi 300-900 e taglia ottica 18-144, ma qui i pesi
 * usati sono 400, 700 e 900 e i corpi vanno da 17 a 44 px: meta' dell'asse
 * ottico non la toccava nessuno. Tagliati gli intervalli inutilizzati, il
 * latino e' passato da 182 a 151 KB e l'esteso da 126 a 111 KB, 45 KB in meno
 * in tutto, SENZA cambiare un pixel del disegno.
 *
 * Il comando esatto, perche' un file derivato di cui non si sa la provenienza
 * e' il guasto di #805 ripetuto:
 *
 *   python3 -c "from fontTools.ttLib import TTFont; from fontTools.varLib \
 *     import instancer; f=TTFont('ORIGINALE.woff2'); f.flavor=None; \
 *     g=instancer.instantiateVariableFont(f, {'wght':(400,900),'opsz':(18,44)}, \
 *     inplace=True); g.flavor='woff2'; g.save('RITAGLIATO.woff2')"
 *
 * Gli originali interi restano in git, commit 762c2ed.
 *
 * 🪤 Si poteva dimezzare il file FISSANDO la taglia ottica a un valore solo
 * (98 KB invece di 151), ma a corpo 44 il titolo veniva visibilmente piu'
 * grasso e la riga si allungava del 2,2 %. Scartato il 17/09/2026: il titolo e'
 * il posto per cui Merriweather e' stato scelto.
 *
 * 🪤 Il ?v= qui sotto non e' decorativo. nginx serve i woff2 con
 * `immutable, max-age=31536000`: senza cambiare l'INDIRIZZO, un file
 * sostituito sul posto non arriva a chi ha gia' aperto un articolo.
 */
@font-face {
  font-family: 'Merriweather';
  src: url('/assets/fonts/merriweather/merriweather-var-latin.woff2?v=20260917-opsz') format('woff2-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Merriweather';
  src: url('/assets/fonts/merriweather/merriweather-var-latin-ext.woff2?v=20260917-opsz') format('woff2-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root { --art-titoli: 'Merriweather', Georgia, 'Times New Roman', serif; }

/* Sezione editoriale /articoli/ — usa i token di app.css.
 *
 * Impianto a card su fondo grigio, indice e articolo, sul modello di Meteored
 * (ilmeteo.net), scelto da Marco il 10/09/2026. Il fondo e la card sono le
 * uniche due variabili dichiarate qui: tutto il resto sono i token del sito.
 *
 * Larghezza: UN SOLO limite, sui blocchi di testo. Il contenitore resta largo e
 * lo spazio che avanza lo usano figure, tabelle e citazioni, che escono a piena
 * larghezza: due limiti sovrapposti lascerebbero mezza pagina bianca (memoria
 * feedback-larghezza-testo-pagine-web).
 */

.art-main {
  padding: var(--spacing-lg) var(--spacing-md) 0;
  max-width: 1120px;
  margin: 0 auto;
}

/* ---- indice della sezione ---- */

.art-intro { margin: var(--spacing-lg) 0 var(--spacing-xl); }
.art-intro h1 {
  font-family: var(--art-titoli);
  font-weight: 900;
  font-size: clamp(27px, 3.8vw, 38px);
  line-height: 1.12;
  letter-spacing: -.012em;
  margin: 0 0 var(--spacing-md);
}
/* L'intro sta accanto al titolo sopra i 900 px: due elementi affiancati invece
 * di una riga corta con mezza pagina vuota accanto. */
.art-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--spacing-xl);
  /* 16/09/2026: prima era `end`, e il titolo finiva piu' in basso del paragrafo
     che lo accompagna — la cosa piu' importante sotto quella secondaria. */
  align-items: start;
}
.art-intro h1 { margin-bottom: 0; }
.art-intro p {
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 900px) {
  .art-intro { grid-template-columns: 1fr; gap: var(--spacing-md); }
}

/* Ogni voce e' una card, come l'articolo: e' quello che tiene insieme le due
   pagine. Al posto dei filetti che separavano le righe c'e' lo stacco fra una
   card e l'altra. */
/* Due colonne: il pezzo piu' recente occupa la riga intera come apertura, gli
   altri stanno affiancati. Prima erano sette righe identiche, e a chi arrivava
   dicevano che i sette articoli valgono uguale. */
.art-lista {
  list-style: none;
  margin: 0 0 var(--spacing-xl);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-lg);
}
.art-lista__voce--apertura { grid-column: 1 / -1; }
.art-lista__voce {
  background: var(--art-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-fast);
}
/* Il fondo della card e' gia' chiaro: un hover che cambia colore non si
   vedrebbe, mentre un'ombra piu' profonda si legge subito. */
.art-lista__voce:hover { box-shadow: var(--shadow-md); }

.art-lista__link {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--spacing-lg);
  align-items: center;
  padding: var(--spacing-lg);
  text-decoration: none;
  color: inherit;
}
/* Le anteprime sono card social in proporzione 4:5, cioè verticali: lasciate
 * intere alte 400 px dominerebbero la riga. Si ritaglia la parte alta, dove
 * la card mette titolo e numero grande — il ritaglio vero lo fa gia'
 * genera_articolo.py, che scrive i file 320x200 e 640x400 in
 * /assets/img/articoli/anteprime/. Qui l'altezza combacia con quel formato,
 * cosi' il browser non ci ritaglia sopra una seconda volta. */
.art-lista__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-md);
  display: block;
  background: var(--bg-secondary);
}
.art-lista__occhiello {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 4px;
}
/* 16/09/2026: via il maiuscoletto tracciato, che e' il segno dei portali di
   notizie. La data resta indietro grazie al grigio e al corpo piccolo. */
.art-lista__data {
  display: block;
  font-size: 13px;
  color: var(--text-hint);
  margin-bottom: var(--spacing-xs);
  font-variant-numeric: tabular-nums lining-nums;
}
.art-lista__titolo {
  font-family: var(--art-titoli);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.24;
  letter-spacing: -.008em;
  margin: 0 0 var(--spacing-sm);
  color: var(--text-primary);
}
.art-lista__link:hover .art-lista__titolo { color: var(--primary); }
/* Niente max-width qui: la colonna della griglia limita già la riga, e un
 * secondo limite lascerebbe mezza colonna bianca (memoria
 * feedback-larghezza-testo-pagine-web). */
.art-lista__sommario {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* L'apertura: immagine a sinistra, il pezzo a destra. Al testo serve piu' spazio
   dell'immagine, altrimenti il titolo va a capo ogni tre parole. */
.art-lista__voce--apertura .art-lista__link {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: var(--spacing-xl);
}
.art-lista__voce--apertura .art-lista__img { height: auto; aspect-ratio: 8 / 5; }
.art-lista__voce--apertura .art-lista__titolo {
  font-weight: 900;
  font-size: clamp(25px, 2.8vw, 31px);
  line-height: 1.18;
}
.art-lista__voce--apertura .art-lista__sommario { font-size: var(--font-size-lg); }

/* Le altre: immagine sopra, testo sotto. Il sommario intero, in una card
   stretta, diventa un muro: tre righe bastano a far capire di che si tratta. */
.art-lista__voce:not(.art-lista__voce--apertura) .art-lista__link {
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  align-items: start;
}
.art-lista__voce:not(.art-lista__voce--apertura) .art-lista__img {
  height: auto;
  aspect-ratio: 8 / 5;
}
.art-lista__voce:not(.art-lista__voce--apertura) .art-lista__titolo { font-size: 23px; }
.art-lista__voce:not(.art-lista__voce--apertura) .art-lista__sommario {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 760px) {
  .art-lista { grid-template-columns: 1fr; }
  .art-lista__link,
  .art-lista__voce--apertura .art-lista__link { grid-template-columns: 1fr; gap: var(--spacing-md); }
  .art-lista__titolo { font-size: 20px; }
  .art-lista__voce--apertura .art-lista__titolo { font-size: 23px; }
  /* A tutta larghezza il riquadro diventa piu' largo di 320x200, e con
     un'altezza fissa il browser ritaglierebbe una seconda volta un'anteprima
     gia' ritagliata. Con lo stesso rapporto dell'anteprima (8:5) non taglia
     niente. */
  .art-lista__img { height: auto; aspect-ratio: 8 / 5; }
}

/* ---- articolo -------------------------------------------------------------
 *
 * Impianto a card, sul modello di Meteored (ilmeteo.net), scelto da Marco il
 * 10/09/2026: fondo di pagina grigio, l'articolo dentro un riquadro chiaro
 * centrato, immagine di copertina grande sotto il sommario, firma con ritratto
 * e tempo di lettura, colonna dei bottoni di condivisione appiccicata a
 * sinistra del testo, rimandi ad altri articoli dentro il testo e in fondo.
 *
 * I colori restano quelli di app.css tranne un valore, spiegato qui sotto.
 */

/* Il grigio di fondo. `--bg-secondary` in tema chiaro vale #f8f9fa, cioe' un
   bianco appena sporco: la card bianca sopra non si stacca e la pagina sembra
   solo bianca. Serve un gradino visibile, come il #eceeef di Meteored.
   In tema scuro il problema non si pone e bastano i token: li' `--bg-primary`
   (#121212) e' PIU' SCURO di `--bg-secondary` (#1e1e1e), quindi i due ruoli si
   invertono e la card resta la superficie piu' chiara delle due. */
:root {
  --art-fondo: #eceff2;
  --art-card: var(--bg-primary);
}
[data-theme="dark"] {
  --art-fondo: var(--bg-primary);
  --art-card: var(--bg-secondary);
}
body.art-page { background: var(--art-fondo); }

/* La card e' larga 960: dentro restano 872 px di contenuto, di cui 74 li prende
   la colonna di condivisione. Al testo ne avanzano ~800, che e' poco piu' della
   misura di lettura (656): la colonna resta quasi centrata nella card e le
   figure hanno comunque 145 px in piu' del testo. */
.art-page .art-main { max-width: 960px; }

.art {
  background: var(--art-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-xl) 44px var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.art__briciole {
  font-size: var(--font-size-sm);
  color: var(--text-hint);
  margin-bottom: var(--spacing-md);
}
.art__briciole a { color: var(--text-secondary); text-decoration: none; }
.art__briciole a:hover { text-decoration: underline; }

/* Titolo, sommario e copertina condividono la stessa misura: i tre blocchi
   dell'apertura vanno a capo sulla stessa verticale, e il bordo destro della
   figura continua quello del testo invece di sporgere.
   La misura e' tutta la larghezza della card: il margine che resta a destra e'
   allora il padding della card, lo stesso che c'e' a sinistra. Un tetto piu'
   stretto lascerebbe a destra un vuoto che si legge come un errore di
   impaginazione, ed e' il motivo per cui il tetto precedente e' stato tolto
   (16/09/2026). La larghezza di riga resta sotto controllo perche' la card
   stessa non supera i 960 px. */
:where(.art__testata, .art) { --art-apertura: 100%; }

/* L'occhiello: la categoria dell'articolo, sopra il titolo. Non e' decorazione,
   dice di che cosa parla il pezzo prima che il lettore attacchi il titolo, ed e'
   il gradino che mancava del tutto fra la briciola di navigazione e il titolo.
   Lettere normali e non maiuscoletto tracciato: il maiuscoletto e' la
   convenzione dei portali generalisti, qui basta il colore a distinguerlo.
   Esce solo se il sorgente Markdown ha il campo `categoria`. */
.art__occhiello {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--primary);
  margin: 0 0 10px;
}

.art__titolo {
  font-family: var(--art-titoli);
  /* Merriweather ha l'occhio grande: a parita' di corpo sembra piu' grande di
     un carattere senza grazie, quindi il tetto sta a 44 px e non oltre. Il peso
     900 e' quello che da' al titolo il colore scuro di una testata. */
  font-weight: 900;
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -.012em;
  text-wrap: balance;
  margin: 0 0 var(--spacing-md);
  max-width: var(--art-apertura, 46rem);
}
/* Il sommario e' il blocco piu' esposto al bordo frastagliato: righe lunghe,
   corpo grande e, subito sotto, l'immagine con il suo taglio netto a destra,
   che fa risaltare ogni riga che finisce prima. `pretty` evita almeno la riga
   finale con una parola sola. */
.art__sommario {
  /* Il sommario resta graziato come il titolo: e' l'ultimo pezzo dell'apertura,
     e il salto a Inter comincia dal corpo. Peso normale, cosi' non compete. */
  font-family: var(--art-titoli);
  font-weight: 400;
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-lg);
  max-width: var(--art-apertura, 46rem);
  /* 16/09/2026: qui c'erano `text-align: justify` e `hyphens: auto`, messi per
     far combaciare il bordo destro con la figura sottostante. Il prezzo erano
     le parole spezzate a fine riga ("stagio-nali"), che su carta sono normali e
     sullo schermo si leggono come un difetto di composizione. Il bordo
     frastagliato costa meno. */
  text-align: left;
  hyphens: none;
  text-wrap: pretty;
}
/* ---- immagine di copertina ---- */

/* La figura e' larga quanto la sua immagine, non quanto la colonna: cosi' la
   didascalia comincia dove comincia l'immagine, invece di partire dal bordo
   del testo quando l'immagine e' piu' stretta (le figure verticali lo sono
   sempre, per via del tetto in altezza qui sotto). */
.art__hero {
  margin: 0 0 var(--spacing-lg);
  width: fit-content;
  max-width: min(100%, var(--art-apertura, 46rem));
}
/* Le copertine qui sono figure, non fotografie: un ritaglio taglierebbe a
   meta' un grafico a barre. Quindi niente `cover`. Il tetto in altezza serve
   alle card social 1200x1500, che a piena larghezza verrebbero alte piu' di
   mille pixel e spingerebbero la firma sotto la piega: sopra i 560 px si
   rimpiccioliscono e restano intere, centrate. Le figure orizzontali
   (1200x630) arrivano a 441 px e prendono tutta la larghezza. */
.art__hero img {
  display: block;
  max-width: 100%;
  max-height: 560px;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}
.art__hero-dida {
  font-size: var(--font-size-sm);
  color: var(--text-hint);
  line-height: 1.5;
  margin-top: var(--spacing-sm);
  /* width:0 + min-width:100% = la didascalia non conta nel calcolo della
     larghezza della figura (altrimenti un testo lungo la allargherebbe fino
     alla colonna), ma poi occupa tutta la larghezza dell'immagine. */
  width: 0;
  min-width: 100%;
}

/* ---- firma ---- */

.art__firma {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border);
}
.art__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex: none;
  background: var(--bg-secondary);
}
.art__autore {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}
.art__dati {
  margin: 2px 0 0;
  font-size: var(--font-size-sm);
  color: var(--text-hint);
}
.art__punto { margin: 0 .4em; }

/* ---- corpo e colonna di condivisione ---- */

.art__riga {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* La colonna resta agganciata sotto l'header del sito, che e' sticky: senza
   tener conto di --header-height i bottoni finirebbero sotto la barra. */
.art__condividi {
  position: sticky;
  top: calc(var(--header-height, 56px) + 16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.art__condividi-eti {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-hint);
  margin-bottom: 2px;
}
.art__cond-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast);
}
.art__cond-btn:hover { color: #fff; border-color: transparent; }
.art__cond-btn--facebook:hover { background: #1877F2; }
.art__cond-btn--x:hover { background: #000; }
.art__cond-btn--whatsapp:hover { background: #25D366; }
.art__cond-btn--copia:hover,
.art__cond-btn--altro:hover { background: var(--primary); }
/* conferma della copia: il bottone diventa verde per un secondo e mezzo */
.art__cond-btn--fatto {
  background: #25D366;
  color: #fff;
  border-color: transparent;
}

/* Testo, figure e tabelle hanno la stessa larghezza e la stessa posizione:
   una sola colonna, due soli bordi. Prima figure e tabelle usavano tutto lo
   spazio disponibile mentre il testo, piu' stretto, restava centrato: i tre
   blocchi partivano da tre punti diversi (corretto il 16/09/2026).

   Perche' 41rem: sono 656 px, cioe' 75 caratteri per riga sul font vero del
   corpo (18 px, 8,69 px per carattere medio). E' il limite alto della finestra
   di leggibilita' classica, 45-75, ed e' la larghezza che Marco ha chiesto il
   01/09/2026. */
.art__corpo { --art-colonna: 41rem; }

.art__corpo > p,
.art__corpo > ul,
.art__corpo > ol,
.art__corpo > h2,
.art__corpo > h3,
.art__corpo > blockquote,
.art__corpo > .art__nota {
  max-width: var(--art-colonna);
  margin-left: auto;
  margin-right: auto;
}
.art__corpo p, .art__corpo li { font-size: var(--font-size-lg); line-height: 1.7; }
.art__corpo p { margin: 0 auto var(--spacing-lg); }
.art__corpo ul, .art__corpo ol { margin: 0 auto var(--spacing-lg); padding-left: 1.4em; }
.art__corpo li { margin-bottom: var(--spacing-sm); }

/* Il filetto sotto i titoli di sezione e' il segno che regge tutta la pagina di
   Meteored: divide il discorso senza bisogno di spazi enormi. */
.art__corpo h2 {
  font-family: var(--art-titoli);
  font-weight: 900;
  font-size: clamp(21px, 2.8vw, 27px);
  line-height: 1.25;
  letter-spacing: -.008em;
  margin: var(--spacing-xl) auto var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border);
}
/* h3 resta senza grazie: e' il gradino sotto l'h2, e due graziati di fila
   appiattirebbero la gerarchia invece di scandirla. */
.art__corpo h3 {
  font-weight: 600;
  font-size: 20px;
  margin: var(--spacing-lg) auto var(--spacing-sm);
}

.art a { color: var(--primary); }
.art__corpo strong { font-weight: 650; }

/* Citazione con le virgolette grandi, come sul modello: il segno tipografico
   fa il lavoro che altrove farebbe un fondo colorato. */
.art__corpo blockquote {
  position: relative;
  margin: var(--spacing-xl) auto;
  padding: 0 var(--spacing-lg) 0 56px;
  border: 0;
  background: none;
  color: var(--text-primary);
  /* Graziato come i titoli, diritto e non corsivo: di Merriweather si serve
     solo il romano, e un corsivo inclinato dal browser si riconosce. */
  font-family: var(--art-titoli);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.5;
}
.art__corpo blockquote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -14px;
  font-size: 68px;
  line-height: 1;
  font-style: normal;
  color: var(--border);
}
.art__corpo blockquote p { font-size: inherit; line-height: inherit; }
.art__corpo blockquote p:last-child { margin-bottom: 0; }

/* Figure e tabelle escono dalla misura di lettura: e' li' che va lo spazio che
   avanza nella colonna.

   🪤 Markdown avvolge ogni immagine in un `<p>`, e quel `<p>` erediterebbe la
   misura di lettura: `:has(> img:only-child)` toglie il tetto al solo paragrafo
   che contiene un'immagine e nient'altro, senza toccare un'immagine messa in
   mezzo a una frase.

   Il tetto in `vh` serve alle figure VERTICALI: le card 1200x1500 nate per i
   social, senza limite d'altezza, sarebbero piu' alte dello schermo. */
.art__corpo > p:has(> img:only-child) { max-width: none; }
.art__corpo img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  margin: var(--spacing-lg) auto var(--spacing-sm);
}
.art__corpo figure { margin: var(--spacing-xl) 0; }
/* Le figure stanno nella colonna di lettura, come il testo: stessi due bordi.
   Allargare il testo fino alle figure avrebbe portato la riga oltre i novanta
   caratteri, fuori dal range 45-75 che questa pagina si e' data; le figure
   invece nascono a 1200 px e a 41rem restano perfettamente leggibili. */
.art__corpo .art__figura {
  margin: var(--spacing-xl) auto;
  width: fit-content;
  max-width: var(--art-colonna, 41rem);
}
/* Dentro la figura il margine verticale lo da' la figura stessa. */
.art__corpo .art__figura img { margin: 0; }
.art__corpo figcaption {
  font-size: var(--font-size-sm);
  color: var(--text-hint);
  line-height: 1.5;
  margin-top: var(--spacing-sm);
  width: 0;
  min-width: 100%;
}

.art__corpo table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-lg) 0 var(--spacing-xl);
  font-size: var(--font-size-sm);
}
.art__corpo thead th {
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid var(--border);
  padding: var(--spacing-sm);
  white-space: nowrap;
}
.art__corpo tbody td {
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--border);
}
.art__corpo tbody tr:hover { background: var(--bg-secondary); }
.art__corpo td:not(:first-child),
.art__corpo th:not(:first-child) { text-align: right; }

/* una tabella larga scorre dentro il suo riquadro, la pagina no */
.art__corpo .tabella-scorrevole {
  overflow-x: auto;
  margin: var(--spacing-lg) auto;
  max-width: var(--art-colonna, 41rem);
}
.art__corpo .tabella-scorrevole table { margin: 0; }

.art__fine {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--spacing-xl) 0 var(--spacing-md);
}
.art__nota {
  font-size: var(--font-size-sm);
  color: var(--text-hint);
  line-height: 1.6;
}

/* Il collegamento di servizio per gli amministratori, accanto alla firma. */
.art__modifica {
  margin-left: .7em;
  font-size: .82em;
  font-weight: 400;
  text-decoration: none;
  border: 1px solid currentColor;
  border-radius: 5px;
  padding: .1em .5em;
  opacity: .65;
  white-space: nowrap;
}
.art__modifica:hover { opacity: 1; }

/* ---- rimando ad altro articolo, dentro il testo ---- */

.art-corr {
  max-width: none;
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-md) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.art-corr__link {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--spacing-md);
  align-items: center;
  text-decoration: none;
}
/* `.art__corpo img` piu' in su vale (0,1,1) e imporrebbe `height: auto`: qui la
   miniatura deve stare in una fascia fissa, quindi il selettore va reso almeno
   altrettanto specifico invece di ricorrere a !important. */
.art__corpo .art-corr__img {
  width: 100%;
  height: 110px;
  max-height: 110px;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-sm);
  display: block;
  margin: 0;
  background: var(--bg-secondary);
}
.art-corr__eti {
  display: inline-block;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  margin-bottom: var(--spacing-sm);
}
.art-corr__titolo {
  display: block;
  font-family: var(--art-titoli);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--primary);
}
.art-corr__link:hover .art-corr__titolo { text-decoration: underline; }

/* ---- leggi anche, in fondo ---- */

.art-anche { margin: 0 0 var(--spacing-xl); }
.art-anche__tit {
  font-family: var(--art-titoli);
  font-weight: 900;
  font-size: 22px;
  margin: 0 0 var(--spacing-md);
}
.art-anche__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-md);
}
.art-altro {
  background: var(--art-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.art-altro__link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.art-altro__img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  object-position: top center;
  display: block;
  background: var(--bg-secondary);
}
.art-altro__data {
  display: block;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-hint);
  padding: var(--spacing-md) var(--spacing-md) 0;
}
.art-altro__titolo {
  display: block;
  font-family: var(--art-titoli);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
  padding: var(--spacing-xs) var(--spacing-md) var(--spacing-md);
}
.art-altro__link:hover .art-altro__titolo { color: var(--primary); }

/* ---- schermi stretti ---- */

@media (max-width: 900px) {
  /* La colonna di condivisione diventa una riga sopra il testo: appiccicata a
     sinistra ruberebbe larghezza proprio dove ce n'e' meno. */
  .art__riga { grid-template-columns: 1fr; gap: var(--spacing-md); }
  .art__condividi {
    position: static;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }
  .art__condividi-eti { margin: 0 var(--spacing-xs) 0 0; }
  .art-anche__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .art-main { padding: var(--spacing-md) var(--spacing-sm) 0; }
  .art { padding: var(--spacing-lg) var(--spacing-md); border-radius: var(--radius-md); }
  .art__corpo p, .art__corpo li { font-size: var(--font-size-md); }
  .art-corr__link { grid-template-columns: 110px minmax(0, 1fr); }
  .art-corr__img { height: 74px; }
  .art-corr__titolo { font-size: var(--font-size-md); }
  .art-anche__lista { grid-template-columns: 1fr; }
  /* Il link ha TRE figli (miniatura, data, titolo): senza collocarli a mano la
     griglia manda il titolo sotto la miniatura, in una colonna da 120 px che lo
     spezza parola per parola. La miniatura tiene entrambe le righe, data e
     titolo stanno nella colonna larga. */
  .art-altro__link {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
  .art-altro__img {
    grid-column: 1;
    grid-row: 1 / span 2;
    height: 100%;
    min-height: 84px;
  }
  .art-altro__data {
    grid-column: 2;
    grid-row: 1;
    padding: var(--spacing-sm) var(--spacing-md) 0;
  }
  .art-altro__titolo { grid-column: 2; grid-row: 2; }
}