/* ============================================================================
   articolo.css — il blog: indice e singolo articolo.
   ----------------------------------------------------------------------------
   Si appoggia a tokens.css e base.css. Non carica valutazione.css: gli
   articoli non hanno questionario, e trascinarsi dietro 900 righe per due
   pulsanti sarebbe peso sul primo caricamento di pagine che devono essere
   veloci, perche' e' da li' che arriva la gente dai motori.

   ⚠️ Le pagine del blog stanno in `blog/`, quindi i loro percorsi verso gli
   asset cominciano con `../`. E' la ragione per cui il blog e' profondo un
   livello solo: a due livelli i percorsi diventerebbero `../../` e la prima
   persona che sposta un file rompe tutto in silenzio.
   ========================================================================== */

/* ===================================================== 1. barra di lettura
   Quanto manca alla fine. Su un articolo lungo e' l'unica cosa che risponde
   alla domanda «quanto ci metto?», e la risposta cambia la decisione di
   cominciare. Sta in cima, alta tre pixel, e non chiede attenzione. */

.lettura {
  position: fixed; inset: 0 0 auto 0;
  height: 3px;
  /* Sopra l'intestazione, non sotto. `--z-sticky` vale 100 e `--z-header` 200:
     con il primo la barra finiva NASCOSTA dietro l'intestazione appiccicata,
     che sta anche lei a filo del bordo alto. Sono tre pixel e non copre
     niente: e' l'intestazione a doverle passare sotto. */
  z-index: var(--z-overlay);
  background: transparent;
  pointer-events: none;
}
.lettura__barra {
  height: 100%; width: 0;
  background: var(--g-brass-rule);
  transform-origin: left center;
}

/* ================================================== 2. testa dell'articolo */

.art__testa { padding-block: var(--sp-8) var(--sp-6); }

.art__briciole {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-3xs); color: var(--c-ink-3);
  margin-bottom: var(--sp-5);
}
/* Il bersaglio da toccare cresce, la riga non si muove: l'imbottitura la
   riprende un margine negativo uguale e contrario. Le briciole sono la sola
   risalita della pagina, e a 18 px di altezza su un telefono si sbaglia. */
.art__briciole a {
  color: var(--c-ink-3);
  display: inline-flex; align-items: center;
  min-height: var(--touch);
  padding-block: var(--sp-4);
  margin-block: calc(var(--sp-4) * -1);
}
.art__briciole a:hover { color: var(--c-blue); }
/* Il separatore lo mette il CSS: nell'HTML le briciole sono solo una lista di
   collegamenti, che e' quello che un lettore di schermo deve sentire. */
.art__briciole li + li::before {
  content: "›"; margin-right: var(--sp-2); color: var(--c-ink-3);
}
.art__briciole ol { display: contents; }
.art__briciole li { display: inline-flex; align-items: center; }

.art__titolo {
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  max-width: 20ch;
}
.art__sommario {
  margin-top: var(--sp-5);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
  max-width: 58ch;
}

/* Data e minuti di lettura. Il tempo e' un numero contato sulle parole vere
   dell'articolo, non una stima messa a occhio: sta nel `data-minuti` che
   scrive lo script di controllo, e se non c'e' la riga non compare. */
.art__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-3xs); color: var(--c-ink-3);
}
.art__meta strong { color: var(--c-ink-2); font-weight: var(--fw-semi); }

/* La figura di apertura, con la parallasse gia' prevista da motion.js:
   `data-parallax` sul contenitore, e l'immagine piu' alta della cornice
   perche' muovendosi non scopra i bordi. */
.art__figura {
  margin: var(--sp-7) 0 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.art__figura img {
  width: 100%; height: 112%;
  object-fit: cover;
  display: block;
}

/* ---- la fascia dei tre numeri ----
   Sta al posto della fotografia, in cima alle pagine di comune. E' il motivo
   per cui uno e' arrivato li' dalla ricerca, quindi arriva prima di qualunque
   discorso. Una fotografia, in quel punto, non avrebbe potuto essere onesta:
   di questi comuni ci sono otto immagini in tutto, e metterne una a caso su
   una pagina intitolata a un comune diverso sarebbe una didascalia falsa. */
.fascia {
  display: grid; gap: var(--sp-3);
  margin-top: var(--sp-7);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 560px) {
  .fascia { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
}
.fascia__voce {
  padding: var(--sp-5);
  background: var(--c-sand);
  border-radius: var(--r-md);
}
/* Quello di mezzo e' l'unico numero che si porta via chi guarda di corsa. */
.fascia__voce--forte { background: var(--c-navy); }
.fascia__k {
  font-size: var(--fs-3xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--c-ink-3);
}
.fascia__voce--forte .fascia__k { color: var(--c-on-dark-a70); }
.fascia__v {
  margin-top: var(--sp-2);
  font-family: var(--ff-display); font-variation-settings: var(--fv-display);
  font-size: var(--fs-xl); font-weight: var(--fw-bold);
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
  color: var(--c-ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.fascia__voce--forte .fascia__v { color: var(--c-brass-light); }
/* L'unita' non e' il numero: sta accanto, piu' piccola e col carattere del
   testo, altrimenti «euro al metro quadro» pesa quanto la cifra. */
.fascia__v em {
  font-style: normal;
  font-family: var(--ff-text);
  font-size: var(--fs-2xs); font-weight: var(--fw-regular);
  color: var(--c-ink-3);
}
.fascia__voce--forte .fascia__v em { color: var(--c-on-dark-a70); }
.fascia__nota {
  margin-top: var(--sp-3);
  font-size: var(--fs-3xs); line-height: var(--lh-normal);
  color: var(--c-ink-3);
}

/* ==================================================== 3. corpo e sommario */

/* `minmax(0, 1fr)` e non `1fr`: una colonna `1fr` non scende sotto la
   larghezza del suo contenuto, e la tabella delle quotazioni la allargherebbe
   oltre lo schermo. Sta qui e non dopo la media query, altrimenti su desktop
   sovrascriverebbe le due colonne. */
.art__griglia { display: grid; gap: var(--sp-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .art__griglia {
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: var(--sp-9);
    align-items: start;
  }
  /* L'indice sta a destra e resta in vista. Su un articolo di duemila parole
     e' quello che permette di tornare a una sezione senza scorrere a naso. */
  .art__indice { position: sticky; top: var(--sotto-intestazione); }
}

.art__indice {
  padding: var(--sp-5);
  background: var(--c-sand);
  border-radius: var(--r-md);
}
.art__indice-t {
  font-size: var(--fs-3xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--c-ink-3);
  margin-bottom: var(--sp-3);
}
.art__indice ol { display: grid; gap: var(--sp-1); counter-reset: voce; }
.art__indice a {
  display: block;
  padding: var(--sp-2) 0;
  font-size: var(--fs-2xs);
  line-height: var(--lh-normal);
  color: var(--c-ink-2);
  border-left: 2px solid transparent;
  padding-left: var(--sp-3);
  margin-left: calc(var(--sp-3) * -1);
  transition: color var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out);
}
.art__indice a:hover { color: var(--c-ink); }
/* La voce della sezione che si sta leggendo. La accende motion.js. */
.art__indice a.is-qui {
  color: var(--c-navy); font-weight: var(--fw-semi);
  border-left-color: var(--c-brass);
}

/* ---- il testo ----
   La misura e' 68 caratteri e non l'intera colonna: oltre, l'occhio perde la
   riga e chi legge da telefono non se ne accorge ma abbandona prima. */
/* `min-width: 0` non e' pignoleria: dentro una griglia un figlio nasce con
   `min-width: auto`, cioe' non puo' restringersi sotto la larghezza del suo
   contenuto. Senza, la tabella delle quotazioni si allargava a 520 px su uno
   schermo da 375 e il suo `overflow-x: auto` non poteva fare niente: non
   scorreva, veniva TAGLIATA dal ritaglio orizzontale di `html`, e le colonne
   «Da» e «A» sparivano senza lasciare traccia. Misurato su telefono. */
.art__corpo { max-width: 68ch; min-width: 0; }
.art__corpo > * + * { margin-top: var(--sp-5); }

/* `--sotto-intestazione`: quanto e' alta l'intestazione appiccicata piu' un
   po' d'aria. Serve in due posti che devono restare d'accordo fra loro, e
   scriverlo due volte vorrebbe dire che un giorno uno dei due resta indietro.
   ⚠️ Misurata a 64 px il 05/09/2026. Se l'intestazione cambia altezza, si
   cambia qui e basta. */
.art__corpo, .art__indice { --sotto-intestazione: 88px; }

.art__corpo h2 {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  margin-top: var(--sp-8);
  /* Lo spazio sopra un titolo appartiene al titolo, non al paragrafo che lo
     precede: cosi' le sezioni si staccano davvero.
     `scroll-margin-top` era 40 px, cioe' MENO dell'intestazione: cliccando una
     voce dell'indice il titolo atterrava sotto di essa e non si vedeva. */
  scroll-margin-top: var(--sotto-intestazione);
}
.art__corpo h3 {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  margin-top: var(--sp-6);
  scroll-margin-top: var(--sotto-intestazione);
}
.art__corpo p {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
}
.art__corpo strong { color: var(--c-ink); font-weight: var(--fw-semi); }
/* `:not(.btn)` non e' pignoleria: `.art__corpo a` vale (0,1,1) e batte `.btn`
   che vale (0,1,0). Senza l'esclusione il pulsante dell'invito prendeva il blu
   sottolineato dei collegamenti di testo SOPRA il fondo d'ottone, e si leggeva
   come un link rotto dentro un rettangolo colorato. */
.art__corpo a:not(.btn) { color: var(--c-blue); text-decoration: underline; }
.art__corpo a:not(.btn):hover { color: var(--c-blue-hover); }

.art__corpo ul, .art__corpo ol {
  display: grid; gap: var(--sp-3);
  padding-left: var(--sp-6);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
}
.art__corpo ul { list-style: none; padding-left: var(--sp-7); }
.art__corpo ul li { position: relative; }
.art__corpo ul li::before {
  content: "";
  position: absolute; left: calc(var(--sp-6) * -1); top: .6em;
  width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--c-brass);
}
.art__corpo ol { list-style: decimal; }
.art__corpo ol li::marker { color: var(--c-brass-testo); font-weight: var(--fw-semi); }

/* ---- il riquadro che stacca ----
   Per la cosa da fare, o per l'avvertenza che non deve passare inosservata. */
.art__nota {
  padding: var(--sp-5);
  background: var(--c-sand);
  border-left: 3px solid var(--c-brass);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-2xs);
  line-height: var(--lh-relaxed);
  color: var(--c-ink);
}
.art__nota > * + * { margin-top: var(--sp-3); }
.art__nota-t {
  font-size: var(--fs-3xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--c-brass-testo);
}
/* L'avvertenza legale: stesso impianto, colore diverso, perche' dice
   «attenzione» e non «fai questo». */
.art__nota--legge { border-left-color: var(--c-blue); background: var(--c-blue-a10); }
.art__nota--legge .art__nota-t { color: var(--c-blue-hover); }

/* ---- la tabella dei dati ----
   Serve alle quotazioni. Scorre da sola sul telefono invece di allargare la
   pagina: una tabella che sfora e' l'unico modo sicuro di rompere il layout
   su un articolo altrimenti perfetto. */
.art__tabella { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.art__tabella table {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-2xs);
  min-width: 380px;
}
.art__tabella th, .art__tabella td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--c-line);
}
.art__tabella th {
  font-size: var(--fs-3xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--c-ink-3);
  background: var(--c-sand);
}
.art__tabella td { color: var(--c-ink-2); }
.art__tabella td:first-child { color: var(--c-ink); font-weight: var(--fw-medium); }
/* NON si usa `.num`: in base.css e' la classe dei numeri grandi in Fraunces,
   quella dei contatori della home, e dentro una tabella trasformava le
   quotazioni in cifre da manifesto alte quaranta pixel. Qui serve solo che le
   colonne di numeri restino incolonnate. */
.art__tabella .art__num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.art__tabella th.art__num { text-align: right; }
.art__fonte {
  margin-top: var(--sp-3);
  font-size: var(--fs-3xs); color: var(--c-ink-3);
  line-height: var(--lh-normal);
}

/* ====================================================== 4. l'invito, due volte

   Ogni articolo ne ha almeno due: uno a meta', quando chi legge ha appena
   capito qualcosa e il momento e' quello giusto, e uno in fondo, per chi e'
   arrivato in fondo. Non sono lo stesso invito ripetuto: il primo e' leggero
   e sta nel flusso del testo, il secondo e' una scheda che chiude. */

.art__invito {
  margin-top: var(--sp-7);
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-brass);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.art__invito p {
  font-size: var(--fs-2xs); line-height: var(--lh-relaxed);
  color: var(--c-ink-2); margin: 0 0 var(--sp-4);
}
.art__invito .btn { font-size: var(--fs-2xs); padding: var(--sp-3) var(--sp-5); }

/* Quello in fondo: piu' grande, su navy, e chiude l'articolo. */
.art__chiusura {
  margin-top: var(--sp-8);
  padding: var(--sp-7) var(--sp-6);
  background: var(--c-navy);
  color: var(--c-on-dark);
  border-radius: var(--r-lg);
  text-align: center;
}
.art__chiusura h2 {
  font-size: var(--fs-xl); color: var(--c-on-dark);
  margin: 0 0 var(--sp-3); line-height: var(--lh-snug);
}
.art__chiusura p {
  font-size: var(--fs-2xs); line-height: var(--lh-relaxed);
  color: var(--c-on-dark-a88);
  max-width: 52ch; margin: 0 auto var(--sp-5);
}
/* Il pulsante dentro il riquadro di chiusura. `.btn--lg` porta 18 px di
   testo, che su un fondo navy accanto a un titolo di 28 gridava quasi quanto
   lui: dentro un riquadro l'invito e' un invito, non un secondo titolo. */
.art__chiusura .btn { font-size: var(--fs-base); }

/* A 320 px il riquadro toglieva 64 px di imbottitura a una colonna di 265, e
   «Fai la valutazione gratuita», che non va a capo, sporgeva di 12 px oltre il
   bordo dello schermo. Misurato il 10/09/2026 su dodici pagine fra articoli e
   comuni: tutte quelle in cui il pulsante porta il testo lungo.
   Sotto i 420 px il riquadro stringe l'imbottitura, e il pulsante se non ci
   sta va a capo invece di uscire: un pulsante su due righe si legge, uno
   tagliato a meta' no. Sopra quella larghezza non cambia niente. */
@media (max-width: 420px) {
  .art__chiusura { padding-inline: var(--sp-4); }
  .art__chiusura .btn {
    white-space: normal;
    max-width: 100%;
    padding-inline: var(--sp-5);
  }
}

/* La riga sotto stava ATTACCATA al pulsante: `.btn` e' `inline-flex`, quindi
   il margine del paragrafo che segue non aveva niente da cui staccarsi in un
   contenitore centrato. Lo spazio lo mette il riquadro, sopra la riga. */
/* `.art__chiusura .art__chiusura-note` e non la sola classe: sopra c'e'
   `.art__chiusura p { margin: 0 auto var(--sp-5) }`, che vale (0,1,1) e
   imponeva `margin-top: 0`. E' la ragione per cui la riga restava incollata
   al pulsante anche dopo avergli dato un margine. */
.art__chiusura .art__chiusura-note {
  margin-top: var(--sp-5);
  font-size: var(--fs-3xs); color: var(--c-on-dark-a70);
  line-height: var(--lh-normal);
}

/* ========================================================== 5. dopo il testo */

.art__firma {
  display: grid; gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-line);
}
@media (min-width: 600px) {
  .art__firma { grid-template-columns: 72px 1fr; align-items: start; gap: var(--sp-5); }
}
.art__firma img { width: 72px; height: 72px; border-radius: var(--r-full); object-fit: cover; }
.art__firma-nome { font-weight: var(--fw-semi); color: var(--c-ink); }
.art__firma p {
  font-size: var(--fs-2xs); line-height: var(--lh-relaxed);
  color: var(--c-ink-2); margin-top: var(--sp-2);
}

/* «Da leggere dopo». Sta in fondo all'articolo e fuori dalla griglia del
   testo, perche' e' largo quanto la pagina: chi e' arrivato fin qui ha finito
   di leggere in colonna stretta e adesso sta scegliendo, non leggendo. */
.art__altri {
  margin-top: var(--sp-9);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--c-line);
}
.art__altri-t {
  font-size: var(--fs-3xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--c-ink-3); margin-bottom: var(--sp-4);
}


/* ---- l'elenco dei comuni ----
   Sta sull'indice delle pagine di comune. Non e' un elenco di parole chiave:
   ogni voce porta il valore vero di quel comune, quindi si legge come una
   tabella e serve anche a chi non clicchera' su niente. */
/* `.art__corpo ul` vale (0,1,1) e `.comuni` da sola (0,1,0): senza annidare,
   l'elenco dei comuni si prendeva il pallino in ottone e il rientro dei
   punti elenco del testo, e ogni scheda usciva con un puntino davanti.
   E' lo stesso inciampo di specificita' gia' incontrato con `.btn` dentro
   `.art__corpo`: qui si annida invece di abbassare l'altra regola, che deve
   continuare a valere per gli elenchi veri. */
.art__corpo .comuni {
  list-style: none; margin: var(--sp-5) 0 0; padding: 0;
  display: grid; gap: var(--sp-3);
  grid-template-columns: minmax(0, 1fr);
}
.art__corpo .comuni li::before { content: none; }
@media (min-width: 560px) { .art__corpo .comuni { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .art__corpo .comuni { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.comuni__voce a {
  display: grid; gap: var(--sp-1);
  min-height: var(--touch);
  padding: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: border-color var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out);
}
.comuni__n {
  font-family: var(--ff-display); font-variation-settings: var(--fv-display);
  font-size: var(--fs-base); font-weight: var(--fw-semi);
  color: var(--c-ink);
}
.comuni__v {
  font-size: var(--fs-md); font-weight: var(--fw-semi);
  color: var(--c-navy);
  font-variant-numeric: tabular-nums lining-nums;
}
.comuni__v em {
  font-style: normal; font-size: var(--fs-3xs);
  font-weight: var(--fw-regular); color: var(--c-ink-3);
}
.comuni__z {
  font-size: var(--fs-3xs); color: var(--c-ink-3);
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
  .comuni__voce a:hover { border-color: var(--c-line-forte); box-shadow: var(--sh-sm); }
  .comuni__voce a:hover .comuni__n { color: var(--c-blue); }
}
.comuni__voce a:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }

/* ================================================ 6. l'indice del blog

   La pagina non e' piu' una griglia di carte con un filtro sopra. E' un
   indice a due corsie: chi vende a sinistra, chi compra a destra, ognuna
   con i suoi articoli e il suo invito in fondo.

   Il perche' e' tutto pratico. Le carte in tre colonne non dividevano ne'
   otto articoli ne' quattro, e lasciavano sempre una carta orfana accanto
   a mezza riga di bianco. Il filtro a pillole prometteva un comando che
   senza JavaScript non faceva niente, e non annunciava mai il risultato a
   chi non guarda lo schermo. Il blocco finale con le due strade era un
   contenitore piu' stretto di tutto il resto e non aveva una sola riga di
   CSS: due div nudi con titolo, testo e pulsante incollati.

   Le corsie risolvono tutte e tre le cose insieme, e senza una riga di
   JavaScript: la struttura della pagina dice gia' da che parte stai, e
   l'invito che ti riguarda sta in fondo alla colonna che stavi leggendo. */

.blog__corsie {
  display: grid;
  gap: var(--sp-9);
  margin-top: var(--sp-7);
  /* `minmax(0, 1fr)` e non `1fr`: i figli di una griglia hanno
     `min-width: auto`, e un titolo lungo senza spazi allargherebbe la
     colonna oltre il contenitore invece di andare a capo. */
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .blog__corsie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
}

.corsia { display: flex; flex-direction: column; }

/* Il filetto spesso sotto l'intestazione della corsia. E' il segnale che
   separa due elenchi affiancati meglio di qualunque bordo attorno: si legge
   come la riga di sezione di un giornale, e non chiude niente in una scatola. */
.corsia__testa {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--c-ink);
}
/* Quanti ne trova chi guarda. Sta accanto al titolo e non sotto, perche' e'
   una precisazione del titolo e non una frase a se'. */
.corsia__conto {
  font-size: var(--fs-3xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--c-ink-3);
  font-variant-numeric: tabular-nums;
}
.corsia__t {
  font-family: var(--ff-display); font-variation-settings: var(--fv-display);
  font-size: var(--fs-xl); font-weight: var(--fw-semi);
  line-height: var(--lh-tight); letter-spacing: var(--ls-snug);
  color: var(--c-ink);
}
.corsia__d {
  /* Riga intera: il titolo e il conteggio stanno insieme sopra, la
     descrizione va a capo da sola. */
  flex: 1 1 100%;
  font-size: var(--fs-2xs); line-height: var(--lh-normal);
  color: var(--c-ink-3); margin-top: var(--sp-1);
  max-width: 46ch;
}

/* ---- le schede degli articoli ----

   Prima erano righe di solo testo separate da un filo: titolo, tre righe di
   sommario, la data. Otto di fila facevano un muro, e soprattutto non si
   capiva che erano articoli da leggere invece che paragrafi di una pagina.

   Adesso ogni articolo e' una scheda con tre segnali che dicono «questo si
   legge»: la sua fotografia, quanto ci metti, e un invito esplicito con la
   freccia. Il testo per scheda e' sceso da cinque righe a tre, e la data e'
   sparita: sono usciti tutti lo stesso giorno, ripeterla otto volte non
   informava nessuno e allungava e basta. */

.blog__elenco {
  list-style: none;
  margin: 0; padding: 0;
  display: grid; gap: var(--sp-4);
  align-content: start;
  flex: 1 1 auto;
}

.post {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  /* La fotografia arriva fino al bordo: senza `overflow: hidden` gli angoli
     dell'immagine sporgono da quelli tondi della scheda. */
  overflow: hidden;
  transition: border-color var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-out);
}

.post__link {
  display: grid;
  /* La colonna della foto e' fissa, quella del testo prende il resto.
     `minmax(0, 1fr)` e non `1fr`: dentro una griglia un figlio non scende
     sotto la larghezza del suo contenuto, e un titolo lungo allargherebbe la
     scheda oltre la colonna invece di andare a capo. */
  grid-template-columns: 112px minmax(0, 1fr);
  text-decoration: none;
  color: inherit;
}
@media (min-width: 480px) {
  /* 160 e non 132: la cella e' alta quanto il testo accanto, e a 132 il
     ritaglio veniva piu' alto che largo. Le fotografie sono orizzontali, e
     tagliate in verticale perdono proprio quello che raccontano. */
  .post__link { grid-template-columns: 160px minmax(0, 1fr); }
}

/* La foto riempie la sua cella qualunque altezza abbia il testo accanto:
   posizionata in assoluto dentro una cella alta quanto la riga. */
.post__foto { position: relative; background: var(--c-sand); }
.post__foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.post__testo {
  display: grid; gap: var(--sp-2);
  align-content: start;
  padding: var(--sp-4) var(--sp-5);
}

/* Quanto ci metti a leggerlo. E' il dato che decide se si comincia, quindi
   sta in cima e non appeso in fondo a una riga di metadati. */
.post__tempo {
  font-size: var(--fs-3xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--c-ink-3);
  font-variant-numeric: tabular-nums;
}

/* Titolo e sommario si fermano a due righe. Il taglio lo fa il browser con i
   puntini: e' il modo per avere schede della stessa altezza senza dover
   accorciare i titoli veri, che devono restare interi nell'articolo. */
.post__t {
  font-family: var(--ff-display); font-variation-settings: var(--fv-display);
  font-size: var(--fs-md); font-weight: var(--fw-semi);
  line-height: var(--lh-snug); letter-spacing: var(--ls-snug);
  color: var(--c-ink);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  transition: color var(--d-fast) var(--e-out);
}
.post__d {
  font-size: var(--fs-xs); line-height: var(--lh-normal);
  color: var(--c-ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* Su telefono il sommario sparisce. Non e' una perdita: in una colonna da
   200 px diventa quattro righe di grigio sotto il titolo, e su otto schede
   e' proprio il muro di testo che stiamo togliendo. Restano il titolo, quanto
   ci metti e l'invito, che sono le tre cose su cui si decide se aprire.
   Il testo resta nella pagina per chi legge con lo schermo spento.
   ⚠️ Va DOPO la regola di `.post__d`: stessa specificita', vince l'ultima. */
@media (max-width: 479px) {
  .post__d { display: none; }
  /* Tolto il sommario, il titolo puo' prendersi la riga in piu' che gli
     serve: in una colonna stretta due righe tagliavano quasi tutti gli otto
     titoli a meta' parola, e un titolo tagliato non fa decidere niente. */
  .post__t { -webkit-line-clamp: 3; line-clamp: 3; }
}

/* L'invito esplicito. Senza, una scheda resta un riquadro con dentro del
   testo: e' questa riga a dire che ci si clicca sopra e che di la' c'e'
   qualcosa da leggere. */
.post__leggi {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-1);
  font-size: var(--fs-2xs); font-weight: var(--fw-semi);
  color: var(--c-blue);
}
.post__leggi::after {
  content: "\2192";
  transition: transform var(--d-fast) var(--e-out);
}

/* Gli stati di passaggio solo dove esiste un puntatore: su telefono `:hover`
   resta attaccato dopo il tocco e la scheda sembra selezionata. */
@media (hover: hover) {
  .post:hover {
    border-color: var(--c-line-forte);
    box-shadow: var(--sh-sm);
    transform: translateY(-2px);
  }
  .post:hover .post__t { color: var(--c-navy); }
  .post:hover .post__leggi::after { transform: translateX(4px); }
}
.post__link:focus-visible {
  outline: 2px solid var(--c-focus); outline-offset: 3px;
  border-radius: var(--r-md);
}

/* Una corsia senza articoli lo dice invece di essere un vuoto: un buco muto
   sembra un errore di caricamento e chi legge non sa se aspettare. */
.corsia__vuoto {
  padding: var(--sp-5);
  font-size: var(--fs-2xs); color: var(--c-ink-3);
  background: var(--c-surface);
  border: 1px dashed var(--c-line);
  border-radius: var(--r-md);
}


/* ---- l'invito in fondo alla corsia ----
   Sta qui e non in un blocco finale comune perche' chi ha appena letto i
   titoli di una colonna ha gia' detto da che parte sta: l'invito giusto e'
   quello che continua la colonna, non quello che ricomincia da capo. */
.corsia__invito {
  margin-top: var(--sp-6);
  padding: var(--sp-6);
  background: var(--c-sand);
  border-radius: var(--r-md);
}
/* `.corsia__invito p` vale (0,1,1) e il titolo dell'invito e' un <p>: con la
   sola classe (0,1,0) il titolo perdeva e usciva a 13 px come il testo. Si
   scrive annidato per stare sopra, non si abbassa l'altro selettore: quello
   deve continuare a valere per tutti i paragrafi che arriveranno dopo. */
.corsia__invito p {
  font-size: var(--fs-2xs); line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
  margin-top: var(--sp-2);
  max-width: 44ch;
}
.corsia__invito .corsia__invito-t {
  font-family: var(--ff-display); font-variation-settings: var(--fv-display);
  font-size: var(--fs-lg); font-weight: var(--fw-semi);
  line-height: var(--lh-snug); color: var(--c-ink);
  margin-top: 0;
}
/* Il pulsante scende a 13px come quello dell'invito dentro l'articolo. A
   misura piena gridava piu' della frase che deve convincere a premerlo. */
.corsia__invito .btn {
  margin-top: var(--sp-4);
  font-size: var(--fs-2xs);
  padding: var(--sp-3) var(--sp-5);
}
.corsia__invito .corsia__nota {
  margin-top: var(--sp-3);
  font-size: var(--fs-3xs); color: var(--c-ink-3);
}

/* ---- le stesse schede in fondo a un articolo ---- */
.art__altri-elenco {
  list-style: none;
  margin: 0; padding: 0;
  display: grid; gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) {
  .art__altri-elenco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================ 7. movimento

   Le entrate le fa `data-reveal` di motion.js, che rispetta gia'
   `prefers-reduced-motion`. Qui c'e' solo quello che appartiene al blog. */

@media (prefers-reduced-motion: reduce) {
  .lettura { display: none; }
  .post__t, .art__indice a { transition: none; }
}