/* ==================================================================
   Blog — elenco e articolo.
   Sta in un file a parte e lo caricano solo le due pagine del blog: chi
   apre la home non scarica regole che lì non servono. Tutto il resto —
   caratteri, colori, arco, bottoni — viene da heaven.css e non si ripete.
   ================================================================== */

/* Testo per chi legge con la voce: si sente, non si vede. */
.blog-nascosto{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---------- elenco ---------- */
.blog-griglia{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(2.6rem,5vw,4rem) clamp(1.8rem,3.5vw,3rem);
}
@media (min-width:700px){.blog-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.blog-griglia{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:700px){.blog-griglia--due{grid-template-columns:repeat(2,minmax(0,1fr))}}

.blog-scheda{display:flex;flex-direction:column;gap:1.2rem;min-width:0}
.blog-scheda__immagine{display:block;text-decoration:none}
/* La scheda è più bassa della foto della home: in griglia, tre archi alti
   quanto un ritratto spingerebbero i titoli fuori dallo schermo. */
.blog-scheda__media{aspect-ratio:4/3}
.blog-scheda__media--vuota .arco-disegno{width:38%}
.blog-scheda__testo{display:grid;gap:.7rem}
.blog-scheda__testo p{margin:0}
.blog-scheda__titolo{line-height:1.28;overflow-wrap:anywhere;hyphens:auto}
.blog-scheda__titolo a{text-decoration:none;color:inherit}
.blog-scheda__titolo a:hover{color:var(--ottone-testo)}
.blog-scheda--breve{gap:.7rem}
.blog-scheda--breve p{margin:0}

/* ---------- articolo ---------- */
/* Una colonna sola, alla misura di un libro: oltre i settanta caratteri
   per riga l'occhio perde la riga a capo. */
.articolo .contenitore > *{max-width:72ch;margin-inline:auto}
.articolo__filo{margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.articolo__testa{display:grid;gap:clamp(.9rem,2vw,1.3rem);margin-bottom:clamp(2rem,4vw,3rem)}
.articolo__titolo{line-height:1.2;overflow-wrap:anywhere;hyphens:auto}
.articolo__sommario{margin:0;color:var(--testo-medio)}

.articolo__copertina{margin:0 auto clamp(2.2rem,4vw,3.2rem)}
.articolo__copertina .scheda-media{aspect-ratio:3/2}

.articolo__corpo{font-size:clamp(18px,1.3vw,20px);line-height:1.72}
.articolo__corpo h2{margin:clamp(2.2rem,4vw,3rem) 0 1rem}
.articolo__corpo h2:first-child{margin-top:0}
.articolo__corpo p{margin:0 0 1.15em}
.articolo__corpo strong{font-weight:600}
.articolo__corpo .legame{overflow-wrap:anywhere}
.articolo__elenco{list-style:none;margin:0 0 1.4em;padding:0}
.articolo__elenco li{
  position:relative;
  padding:.7rem 0 .7rem 1.6rem;
  border-bottom:1px solid var(--filetto);
}
.articolo__elenco li:last-child{border-bottom:0}
.articolo__elenco li::before{
  content:"";position:absolute;left:0;top:1.45em;
  width:9px;height:1px;background:var(--ottone);
}

.articolo__firma{margin-top:clamp(1.6rem,3vw,2.4rem);color:var(--testo-tenue)}

.articolo__invito{margin-top:clamp(2.4rem,5vw,3.6rem);text-align:center}
.articolo__invito .etichetta{margin-bottom:.9rem}
.articolo__tasti{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.9rem 1.2rem;margin-top:clamp(1.4rem,3vw,2rem);
}
@media (max-width:480px){
  .articolo__tasti .bottone{width:100%;text-align:center}
}

@media print{
  .articolo__invito,.articolo__filo{display:none}
}

/* Gli articoli arrivati da Holo (holo.py) portano anche titoletti di terzo
   livello, elenchi numerati, citazioni, immagini e tabelle. */
.articolo__corpo h3{font-family:var(--display);font-weight:400;font-size:1.05em;letter-spacing:.06em;margin:2rem 0 .8rem}
.articolo__corpo ul,.articolo__corpo ol{margin:0 0 1.15em;padding-left:1.4em}
.articolo__corpo li{margin:.35em 0}
.articolo__corpo blockquote{margin:1.6em 0;padding-left:1.2em;border-left:2px solid var(--oro);font-style:italic;color:var(--testo-medio)}
.articolo__corpo img{display:block;max-width:100%;height:auto;margin:1.6em auto}
.articolo__corpo figure{margin:1.6em 0}
.articolo__corpo figcaption{font-size:.85em;color:var(--testo-tenue);text-align:center}
.articolo__corpo table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.92em;display:block;overflow-x:auto}
.articolo__corpo th,.articolo__corpo td{border-bottom:1px solid var(--filetto);padding:.5em .6em;text-align:left}
.articolo__corpo pre{overflow-x:auto;background:var(--alabastro);padding:1em}