/* ============================================================
   Componenti — le parti riusabili dell'ibrido A+C
   ============================================================ */

/* ---------------- briciole di pane ---------------- */
.briciole{
  font-family:var(--sans);
  font-size:var(--fs-2xs);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.briciole a:hover{ color:var(--accent-text) }
.briciole .sep{ margin-inline:7px }

/* ---------------- testate ---------------- */
.testata-archivio{
  padding-block:30px var(--sp-5);
  border-bottom:1px solid var(--line);
}
.testata-archivio .wrap{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:28px; flex-wrap:wrap;
}
.testata-archivio__testo{ flex:1 1 30ch }
.testata-archivio .contatore{ text-align:right; flex:0 0 auto }
.testata-archivio .contatore .n{
  display:block;
  font-family:var(--mono); font-size:54px; line-height:1;
  color:var(--accent); font-weight:500; font-variant-numeric:tabular-nums;
}
.testata-archivio .contatore .k{
  display:block;
  font-family:var(--mono); font-size:12px;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin-top:var(--sp-2);
}

.titolo{
  font-size:var(--fs-4xl);
  line-height:var(--lh-stretto);
  letter-spacing:-.01em;
  margin-top:var(--sp-3);
  max-width:22ch;
}
/* titoli lunghi: nel database ce ne sono fino a 186 caratteri */
.titolo--lungo{
  font-size:var(--fs-4xl-lungo);
  line-height:1.12;
  max-width:30ch;
}
.lead{
  margin-top:var(--sp-3);
  font-size:var(--fs-lg);
  color:var(--ink-2);
  max-width:56ch;
}

/* intestazione di sezione col filetto forte */
.sezione-testa{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--sp-4);
  border-bottom:2px solid var(--ink);
  padding:26px 0 10px;
}
.sezione-testa h2{
  font-family:var(--sans); font-size:var(--fs-xs);
  letter-spacing:.16em; text-transform:uppercase; font-weight:700;
}
.sezione-testa .n,
.sezione-testa .tutti{ font-family:var(--sans); font-size:var(--fs-xs); color:var(--muted) }
.sezione-testa .tutti:hover{ color:var(--accent-text) }

/* ---------------- card ----------------
   Dove vanno: sugli archivi fuori dal ramo Biblioteca (Attività, News,
   Eventi, Convegni, Patrocini, Mostre, Associazione…), sugli archivi per data
   e nelle tre griglie della homepage. Sul ramo Biblioteca e sulla ricerca c'è
   invece la tabella-record: il perimetro e il perché stanno in
   `sdc_e_catalogo()` (inc/catalogo.php). */
.griglia-card{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:28px;
  padding-block:28px var(--sp-3);
}
/* Colonne fisse: le vuole la homepage, dove il mockup conta le celle
   (quattro pubblicazioni, tre attività) e la prima delle tre è il box del
   bando, che non è una card e non può finire da sola su una riga. */
.griglia-card--4{ grid-template-columns:repeat(4, 1fr) }
.griglia-card--3{ grid-template-columns:repeat(3, 1fr) }

/* ── Il riquadro quando l'immagine non c'è ────────────────────────────────
   23 card su 313 non hanno né immagine in evidenza né copertina (7%; su
   Associazione sono 7 su 18). Senza riquadro il loro titolo parte in cima
   alla cella mentre quello delle vicine parte 210px più in basso, e la
   griglia si sfilaccia. Il riquadro vuoto non è un segnaposto — non dice
   «qui manca una foto», non ha icone né scritte: è la stessa campitura di
   carta delle altre figure, e serve solo a far partire i titoli alla stessa
   altezza. */
.card__figura--vuota{ border:1px solid var(--line) }
/* ── Riquadro 4:3, uguale per tutte le card ────────────────────────────────
   Tutti i riquadri hanno la stessa altezza: le righe restano allineate.
   Tre colonne, come nell'ibrido A+C approvato.

   Scelta guardando le pagine vere, non la statistica: il riquadro che mostra
   più immagine sarebbe l'1,98 (87% del file contro il 74% qui), ma le card
   diventano strisce. Una panoramica ritagliata regge, una striscia no.

   Se cambi questa proporzione, cambia anche SDC_RAPPORTO_CARD in
   inc/campi.php: è da lì che il template decide se ritagliare o contenere.

   Eccezione `--contieni`: solo le immagini più ALTE del riquadro, e solo
   quando perderebbero più del 30% dell'altezza. Sono locandine e mappe
   quadrate, dove sotto c'è scritto qualcosa: 9 su 269. Le panoramiche non
   si contengono mai — perdono i lati, che non portano informazione. */
.card__figura{
  aspect-ratio:4/3;
  background:var(--paper-2);
  margin-bottom:14px;
  overflow:hidden;
}
.card__figura img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:top center;
  transition:transform .4s ease;
}
.card a:hover .card__figura img{ transform:scale(1.02) }

.card__figura--contieni{
  display:grid; place-items:center;
  border:1px solid var(--line);
}
.card__figura--contieni img{ object-fit:contain; object-position:center }
.card a:hover .card__figura--contieni img{ transform:none }
.card a:hover .card__figura--contieni{ border-color:var(--line-strong) }

/* ── L'archivio News in A4 (Andrea, s33 2026-09-16) ─────────────────────────
   Il cliente manda copertine A4 e le vuole intere: il flusso delle notizie
   (apertura e spalla della home, e le card qui) prende la cornice 1:1,41.
   La mattina stessa era 16:10 «taglia tutto», durato mezza giornata.
   Quattro per riga invece di tre (scelta fra tre prove, `confronto-s33-a4.jpeg`,
   C1): a 269px la locandina è alta 380 e il suo titolo si legge; a tre per
   riga sarebbe alta 520 e la pagina di 24 lunga il doppio. Le orizzontali
   vecchie — 88 su 103 — ci stanno contenute su carta con filetto: il
   `--contieni` è quello di tutte le card, deciso in `sdc_immagine_locandina()`
   contro la cornice A4. Dentro la notizia l'immagine resta alla proporzione
   naturale; il resto del sito resta a 4:3 e tre per riga. Vale per it + en:
   il body class è quello di WordPress (slug `news` / `news-en`). */
.category-news .griglia-card,
.category-news-en .griglia-card{ grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)) }
.category-news .card__figura,
.category-news-en .card__figura{ aspect-ratio:1/1.414 }
.card__titolo{
  font-size:var(--fs-xl);
  line-height:var(--lh-titolo);
  margin-top:7px;
  text-wrap:pretty;
}
.card a:hover .card__titolo{ color:var(--accent-deep) }
.card__meta{
  margin-top:9px;
  font-family:var(--sans); font-size:var(--fs-2xs); color:var(--muted);
}
.card__meta .sep{ margin-inline:5px }

/* ---------------- il riquadro (Premio e Rivista in home; Documentari in Altre attività, s30) ---------------- */
.card-riquadro{
  display:flex; flex-direction:column;
  background:var(--paper-2);
  border:1px solid var(--line-strong);
  padding:26px 24px;
}
.card-riquadro .occhiello{ margin:0 }
.card-riquadro__cifra{
  font-family:var(--serif); font-size:64px; line-height:1;
  font-weight:600; color:var(--accent);
  margin-block:18px 10px;
}
.card-riquadro__titolo{
  font-size:21px; line-height:var(--lh-titolo);
  font-weight:600; text-wrap:pretty;
}
.card-riquadro__titolo a:hover{ color:var(--accent-deep) }
.card-riquadro .card__meta{ margin-top:auto; padding-top:18px }
.card-riquadro__azione{
  align-self:flex-start;
  margin-top:var(--sp-4);
  padding:11px 18px; font-size:var(--fs-xs);
}
.card-riquadro--elenco .card-bando__riassunto{ margin-top:10px; font-size:var(--fs-md); line-height:1.5; color:var(--ink-2) }

/* ---------------- filtri ---------------- */
.filtri{
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
  background:var(--paper);
}
.filtri .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding-block:var(--sp-4); flex-wrap:wrap;
}
.chip{ display:flex; gap:var(--sp-2); flex-wrap:wrap; font-family:var(--sans); font-size:var(--fs-xs); list-style:none }
.chip a{
  display:inline-block;
  border:1px solid var(--line-strong); border-radius:var(--radius-pill);
  padding:7px 15px; color:var(--ink-2);
}
.chip a .c{
  font-family:var(--mono); font-size:11.5px; color:var(--muted); margin-left:6px;
  font-variant-numeric:tabular-nums;
}
.chip a[aria-current]{ background:var(--accent); border-color:var(--accent); color:var(--on-accent) }
.chip a[aria-current] .c{ color:var(--on-accent) }
.chip a:hover:not([aria-current]){ border-color:var(--accent-text); color:var(--accent-text) }

.ordinamento{ font-family:var(--sans); font-size:var(--fs-xs); color:var(--muted) }
.ordinamento b{ color:var(--ink); font-weight:600 }
.ordinamento a:hover{ color:var(--accent-text) }

/* ---------------- catalogo: la tabella-record dello stile C ---------------- */
.catalogo{ width:100%; border-collapse:collapse; margin-top:6px }
.catalogo caption{ text-align:left; padding-bottom:var(--sp-2) }
.catalogo th{
  font-family:var(--mono); font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-weight:500; text-align:left;
  padding:12px 14px; border-bottom:2px solid var(--ink);
}
.catalogo td{ padding:var(--sp-4) 14px; border-bottom:1px solid var(--line); vertical-align:baseline }
.catalogo tbody tr:hover{ background:var(--paper-2) }
/* La copertina in testa alla riga.
   90px è il tetto, non una preferenza: i file sono da 200px di larghezza,
   e a 90px restano nitidi anche su schermo a doppia densità. Alzando questa
   misura si comincia a vedere la sfocatura. */
.catalogo .col-copertina{ width:106px }
.catalogo .col-copertina img{
  width:90px; height:auto;
  /* Tetto d'altezza: rese a 90px le 195 copertine con dimensioni note stanno
     fra 68 e 134px nel 95% dei casi (mediana 127), ma quattro sfondano e una
     arriva a 270 — una riga alta il doppio delle altre. Con `contain` la
     proporzione resta giusta e la copertina si rimpicciolisce dentro il tetto
     invece di deformarsi. */
  max-height:140px;
  object-fit:contain;
  background:var(--paper-2);
  border:1px solid var(--line);
}

.catalogo .col-n{
  font-family:var(--mono); font-size:var(--fs-xs); color:var(--muted);
  white-space:nowrap; width:72px; font-variant-numeric:tabular-nums;
}
.catalogo .col-collana{
  font-family:var(--sans); font-size:12px;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-text); font-weight:600;
  width:210px; line-height:1.4;
}
.catalogo .col-titolo a{ font-size:var(--fs-lg); line-height:1.3; font-weight:600 }
.catalogo .col-titolo a:hover{ color:var(--accent-deep) }
.catalogo .col-titolo .d{
  display:block; font-size:var(--fs-md); color:var(--ink-2);
  margin-top:var(--sp-1); font-weight:400; max-width:var(--misura);
}
.catalogo .col-anno{
  font-family:var(--mono); font-size:var(--fs-sm); color:var(--ink-2);
  width:96px; font-variant-numeric:tabular-nums;
}
.catalogo .col-documento{ width:96px; text-align:right }
.catalogo .col-documento .nessuno{ font-family:var(--sans); font-size:11px; color:var(--muted) }

/* ---------------- pulsanti ---------------- */
.btn{
  display:inline-block; cursor:pointer;
  font-family:var(--sans); font-size:11.5px;
  letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  padding:9px 16px; border-radius:var(--radius);
  background:var(--accent); border:1px solid var(--accent); color:var(--on-accent);
}
.btn:hover{ background:var(--accent-deep); border-color:var(--accent-deep); color:var(--on-accent) }
.btn.ghost{ background:transparent; border-color:var(--accent-text); color:var(--accent-text) }
.btn.ghost:hover{ background:var(--accent); border-color:var(--accent); color:var(--on-accent) }
.btn.piccolo{ padding:4px 10px; font-size:11px; font-weight:600 }

/* ---------------- paginazione ---------------- */
.paginazione{
  display:flex; justify-content:center; align-items:center; gap:6px;
  padding:36px 0 14px; font-family:var(--sans); font-size:var(--fs-sm);
  flex-wrap:wrap;
}
.paginazione .page-numbers{
  min-width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); border-radius:var(--radius);
  color:var(--ink-2); padding-inline:var(--sp-2);
  font-variant-numeric:tabular-nums;
}
.paginazione a.page-numbers:hover{ border-color:var(--accent-text); color:var(--accent-text) }
.paginazione .attiva{ background:var(--accent); border-color:var(--accent); color:var(--on-accent) }
.paginazione .salto{ padding-inline:var(--sp-4) }
.paginazione .dots{ border-color:transparent }

/* ---------------- scheda PDF (shortcode [pdf-embedder]) ---------------- */
.pdf-scheda{
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  background:var(--paper-2);
  padding:var(--sp-4);
  margin-block:var(--sp-5);
}
.pdf-scheda__testa{ display:flex; align-items:flex-start; gap:var(--sp-4) }
.pdf-scheda__tipo{
  flex:0 0 auto;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  background:var(--accent); color:var(--on-accent);
  padding:5px 9px; border-radius:2px;
}
.pdf-scheda__titolo{ font-weight:600; line-height:var(--lh-titolo) }
.pdf-scheda__peso{
  font-size:var(--fs-2xs); color:var(--muted); margin-top:3px;
  font-family:var(--mono);
}
.pdf-scheda__azioni{
  display:flex; gap:var(--sp-2); flex-wrap:wrap;
  margin-top:var(--sp-3);
}
.pdf-scheda__visore{
  width:100%; height:min(80vh, 900px);
  border:1px solid var(--line-strong); border-radius:var(--radius);
  margin-top:var(--sp-3); background:#fff;
}

/* ============================================================
   La scheda di pubblicazione (single.php)
   ============================================================ */

.testata-scheda{
  padding-block:20px var(--sp-6);
  border-bottom:1px solid var(--line);
}
.testata-scheda .occhiello{ margin-top:var(--sp-4) }
.testata-scheda .occhiello .sep{ margin-inline:8px; color:var(--muted) }
/* Le pagine di servizio della raccolta sotto il sottotitolo (s30): nella
   veste delle briciole — sans piccolo, maiuscoletto spaziato — separate dal
   punto mediano, senza frecce; il filetto sotto le stacca dal corpo. */
.testata-scheda__pagine{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 0; list-style:none; margin:22px 0 0; padding:0;
  font-family:var(--sans); font-size:var(--fs-2xs); letter-spacing:.08em; text-transform:uppercase;
}
.testata-scheda__pagine li + li::before{ content:"·"; color:var(--muted); margin-inline:12px }
.testata-scheda__pagine a{ color:var(--ink-2); border-bottom:1px solid var(--line-strong); padding-bottom:2px }
.testata-scheda__pagine a:hover{ color:var(--accent-text); border-color:var(--accent-text) }
.scheda__sottotitolo{
  margin-top:var(--sp-3);
  font-size:var(--fs-lg);
  font-style:italic;
  color:var(--ink-2);
  max-width:52ch;
}

/* Due colonne: il testo e il colophon. Le proporzioni sono quelle del mockup. */
.scheda__griglia{
  display:grid;
  grid-template-columns:7.5fr 4.5fr;
  gap:var(--sp-8);
  padding-block:var(--sp-7) var(--sp-6);
}
/* Senza colophon niente riquadro vuoto: il testo resta da solo e si mette in
   mezzo. Lasciarlo a sinistra in una griglia da 1160px vorrebbe dire una
   colonna di 560px e mezzo schermo bianco alla sua destra, con l'aria di una
   pagina a cui manca qualcosa. Centrandolo la pagina è finita così com'è. */
.scheda__griglia--sola{ grid-template-columns:1fr }
.scheda__griglia--sola .scheda__corpo{
  max-width:74ch;
  margin-inline:auto;
  width:100%;
}
/* La testata segue il corpo: un titolo a filo di pagina sopra un testo
   centrato sembra un errore di impaginazione, non una scelta. I due
   contenitori (uno con i margini interni del .wrap, l'altro senza) cadono
   sulla stessa colonna solo aggiungendo qui le due grondaie. */
.scheda--sola .testata-scheda .wrap{ max-width:calc(74ch + 2 * var(--gutter)) }

/* Nel corpo della scheda la misura di lettura la tengono i paragrafi, non il
   contenitore: così l'indice, le tavole e le tabelle possono usare tutta la
   colonna senza che il testo diventi una riga da 80 battute. */
.scheda__corpo .testo{ max-width:none }
.scheda__corpo .testo > p,
.scheda__corpo .testo > ul,
.scheda__corpo .testo > ol:not(.indice),
.scheda__corpo .testo > blockquote{ max-width:var(--misura) }

.scheda__extra{ margin-top:var(--sp-6) }

/* L’immagine della notizia: dove non c’è la copertina del colophon, il primo
   piano (l’immagine in evidenza, orizzontale) apre il corpo della scheda.
   Proporzione naturale, senza riquadro: le notizie non hanno file di card da
   tenere allineate, e un ritaglio qui taglierebbe contenuto per estetica. */
.scheda__figura{ margin:0 0 var(--sp-6) }
.scheda__figura img{ display:block; width:100%; height:auto }

/* ---------------- pagine vicine (page.php) ----------------
   In coda a una pagina istituzionale: le figlie se ce ne sono, altrimenti le
   sorelle. Le briciole portano su, questo elenco porta di lato.

   Il disegno è quello del riquadro «Partecipa» della home — filetto forte in
   testa, righe separate da un capello, etichetta in sans e descrizione in
   grigio — perché fa lo stesso mestiere: un indice breve di cose vicine, da
   scorrere in un colpo d'occhio invece che da leggere. Non è un elenco
   puntato: i pallini del browser dentro una colonna di prosa lo farebbero
   sembrare l'ultimo paragrafo del testo, che è esattamente quello che non è. */
.pagine-vicine{ margin-top:var(--sp-8) }
.pagine-vicine .sezione-testa{ padding-top:0 }
.pagine-vicine ul{ list-style:none }
.pagine-vicine li{ border-bottom:1px solid var(--line) }
.pagine-vicine a{ display:block; padding-block:var(--sp-3) }
.pagine-vicine a b{
  font-family:var(--sans); font-size:15px; font-weight:600; color:var(--ink);
}
.pagine-vicine a .d{
  display:block;
  font-family:var(--sans); font-size:var(--fs-2xs); color:var(--muted);
  margin-top:3px;
}
.pagine-vicine a:hover b{ color:var(--accent-deep) }

/* L'indice delle serie sopra l'elenco della Rivista (s30): la lista con filetto
   di «pagine vicine», più una colonna destra in mono con anni e conteggio. */
.indice-serie{ margin-bottom:0 }
.indice-serie .sezione-testa{ padding-top:0 }
.indice-serie ul{ list-style:none }
.indice-serie li{ border-bottom:1px solid var(--line) }
.indice-serie li.attiva a{ box-shadow:inset 3px 0 0 var(--accent); padding-left:var(--sp-3) }
.indice-serie li.attiva a b{ color:var(--accent-deep) }
.elenco-categoria .sezione-testa--solo-conta{ justify-content:flex-end }

.indice-serie a{ display:grid; grid-template-columns:1fr auto; column-gap:var(--sp-5); align-items:baseline; padding-block:var(--sp-3) }
.indice-serie a b{ font-family:var(--sans); font-size:15px; font-weight:600; color:var(--ink) }
.indice-serie a .d{ grid-column:1; font-family:var(--sans); font-size:var(--fs-2xs); color:var(--muted); margin-top:3px }
.indice-serie a .n{ grid-column:2; grid-row:1 / span 2; font-family:var(--mono); font-size:var(--fs-xs); color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap }
.indice-serie a .n .sep{ margin-inline:6px }
.indice-serie a:hover b{ color:var(--accent-deep) }
@media (max-width:600px){ .indice-serie a{ grid-template-columns:1fr } .indice-serie a .n{ grid-column:1; grid-row:auto; margin-top:4px } }

/* ---------------- «Dal volume» ---------------- */
.dal-volume{ margin-top:var(--sp-7) }
.dal-volume .sezione-testa{ padding-top:0 }
.dal-volume__righe{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--sp-4);
  margin-top:var(--sp-5);
}
/* 4:5 come nel mockup. Se cambi qui, cambia SDC_RAPPORTO_TAVOLA in
   inc/campi.php: è da lì che si decide taglio o contenimento. */
.tavola{
  aspect-ratio:4/5;
  background:var(--paper-2);
  overflow:hidden;
  margin:0;
}
.tavola img{ width:100%; height:100%; object-fit:cover; object-position:center }
/* Le tavole che perderebbero più di metà di una dimensione si contengono. */
.tavola--contieni{
  display:grid; place-items:center;
  border:1px solid var(--line);
  background:var(--paper);
}
.tavola--contieni img{ object-fit:contain }

/* ---------------- colophon ---------------- */
.colophon{
  border:2px solid var(--ink);
  background:var(--paper-2);
  padding:var(--sp-5) var(--sp-5) var(--sp-5);
  position:sticky; top:var(--sp-5);
  height:fit-content;
}
/* La copertina, e nient'altro: quando manca, il riquadro non c'è.
   ── Perché 120px ────────────────────────────────────────────────────────
   Misurate le 195 copertine con dimensioni note: la larghezza è 200px in
   tutti i quartili (minimo 150, mediana 200). Non è una scelta di gusto ma
   un tetto: a 120px la densità è 1,67× — sotto il 2× ideale di uno schermo
   retina, ma di uno scarto che su una copertina opaca non si vede. A 200px
   si scenderebbe a 1× e la sfocatura comincerebbe a leggersi.
   La miniatura dell'Archivio sta a 90px per lo stesso motivo; qui la
   copertina è il soggetto, e vale la spanna in più. Debito nel piano §9. */
.colophon__copertina{
  background:var(--paper);
  border:1px solid var(--line);
  padding:14px;
  margin:0 0 var(--sp-5);
  width:fit-content;
}
.colophon__copertina img{ width:120px; height:auto; display:block }

.colophon__meta{ width:100%; border-collapse:collapse; font-size:var(--fs-md) }
.colophon__meta th{
  font-family:var(--sans); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); text-align:left; font-weight:600;
  padding:9px 14px 9px 0;
  vertical-align:baseline; white-space:nowrap;
}
.colophon__meta td{ padding:9px 0; border-bottom:1px solid var(--line); vertical-align:baseline }
.colophon__meta tr:last-child td{ border-bottom:0 }
.colophon__meta a{ color:var(--accent-text) }
.colophon__meta a:hover{ color:var(--accent-deep); text-decoration:underline }

.colophon__azione{
  display:block; text-align:center;
  margin-top:var(--sp-5);
  padding:13px 18px;
  font-size:var(--fs-xs);
}
.colophon__nota{
  margin-top:var(--sp-4);
  font-family:var(--sans); font-size:12px;
  color:var(--muted); text-align:center;
}

/* ---------------- correlati ---------------- */
.correlati{
  border-top:1px solid var(--line);
  padding-block:var(--sp-5) var(--sp-6);
}
.correlati .sezione-testa{ padding-top:var(--sp-5) }
.correlati__griglia{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:var(--sp-6);
  margin-top:var(--sp-5);
}
.correlato__titolo{
  font-size:var(--fs-lg); line-height:var(--lh-titolo);
  font-weight:600; margin-top:6px; text-wrap:pretty;
}
.correlato__titolo a:hover{ color:var(--accent-deep) }
.correlato__meta{
  margin-top:var(--sp-2);
  font-family:var(--sans); font-size:var(--fs-2xs); color:var(--muted);
}
.correlato__meta .sep{ margin-inline:5px }

/* ---------------- l'elenco dentro una pagina ([sdc-elenco]) ----------------
   Dalla sessione 22 le pagine di raccolta e di attività montano nel corpo
   l'elenco della loro categoria (inc/elenco.php): la stessa barra dei
   filtri, la stessa tabella o griglia, la stessa paginazione degli archivi.
   Qui c'è solo ciò che cambia stando dentro un testo:

   - la barra dei filtri non è appiccicosa: in un archivio sta in cima e
     accompagna lo scorrimento della tabella; dentro una pagina si
     incollerebbe sopra la descrizione che la precede;
   - il suo .wrap non ha grondaie né larghezza massima: le dà già la
     colonna della pagina;
   - `scheda--elenco` (page.php): la tabella-record esce dalla colonna di
     lettura da 74ch e prende la larghezza della pagina, restando centrata.
     La colonna del testo non si muove. `100cqw` è la larghezza della
     griglia-contenitore, non della finestra: niente `vw`, niente barra di
     scorrimento da sottrarre. Sotto i 760px la tabella è già un elenco a
     blocchi (regola più sotto) e la colonna riempie la pagina: i margini
     tornano a zero da soli. */
.elenco-categoria{ margin-top:var(--sp-6) }
.filtri--incorporati{ position:static }
.filtri--incorporati .wrap{ padding-inline:0; max-width:none }
.elenco-categoria .sezione-testa{ padding-top:var(--sp-5) }

.scheda--elenco .scheda__griglia{ container-type:inline-size }
.scheda--elenco .elenco-categoria{
  width:100cqw;
  margin-left:calc((100% - 100cqw) / 2);
}
.scheda--elenco .elenco-categoria--testo{ width:auto; margin-left:0 } /* resta nella colonna del testo */

/* ---------------- la pagina a cubetti (page-templates/raccolte.php) ----------------
   Descrizione nella colonna da 74ch, poi le pagine figlie come card a
   tutta larghezza. La griglia è quella degli archivi (`.griglia-card`), ma
   le celle sono più larghe (due per riga a 1160px): il cubetto è una card
   **orizzontale**, immagine a sinistra e testo a destra, perché qui il
   testo comanda — Andrea, s22: «più informazioni testuali, organizzate in
   modo gerarchico; l'immagine è evocativa, meno importante». Quattro
   gradini di testo: occhiello col dato (titoli · anni), titolo, riassunto in
   serif, riga della categoria in sans piccolo. Sotto i 600px la card torna
   verticale, con la figura sopra ma bassa (2:1). */
.pagina--cubetti .scheda__griglia{ padding-bottom:0 }
.cubetti{ padding-block:var(--sp-5) var(--sp-8) }
.cubetti .sezione-testa{ padding-top:0 }
.cubetti .griglia-card{ grid-template-columns:repeat(auto-fill, minmax(460px, 1fr)); gap:32px 40px }
.cubetto a{ display:grid; grid-template-columns:minmax(0, 34%) 1fr; gap:var(--sp-5); align-items:start }
.cubetto .card__figura{ margin:0 }
.cubetto .occhiello .n{ font-family:var(--mono); color:var(--muted); margin-left:6px; font-variant-numeric:tabular-nums }
.cubetto .card__titolo{ margin-top:6px }
.cubetto__riga{ margin-top:8px; font-size:var(--fs-md); line-height:1.45; color:var(--ink-2); text-wrap:pretty }
.cubetto .card__meta{ margin-top:8px; text-wrap:pretty }
/* Il gruppo (s30, dallo schizzo «Note Biblioteca_schema», ma nello stile del
   sito: niente cornice, un filetto leggero come quelli delle liste): il
   cubetto-padre a riga intera, senza immagine, e sotto le figlie piccole. */
.cubetto-gruppo{ grid-column:1 / -1; display:grid; gap:var(--sp-4); margin-top:var(--sp-3) }
.cubetto-gruppo > .cubetto a{ grid-template-columns:1fr; max-width:74ch }
.cubetto-gruppo__figli{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:24px 32px;
  padding-top:var(--sp-4); border-top:1px solid var(--line);
}
.cubetto--piccolo a{ grid-template-columns:minmax(0, 28%) 1fr; gap:var(--sp-4) }
.cubetto--piccolo .card__titolo{ font-size:var(--fs-lg) }
.cubetto--piccolo .cubetto__riga{ font-size:var(--fs-sm) }
@media (max-width:600px){
  .cubetti .griglia-card{ grid-template-columns:1fr }
  .cubetto-gruppo__figli{ grid-template-columns:1fr }
  .cubetto a{ grid-template-columns:1fr; gap:var(--sp-3) }
  .cubetto .card__figura{ aspect-ratio:2 / 1 }
}

/* ---------------- stati vuoti ---------------- */
.vuoto{
  padding-block:var(--sp-7);
  font-size:var(--fs-lg); color:var(--ink-2);
  max-width:var(--misura);
}

/* ---------------- la pagina 404 ----------------
 * La pillola di ricerca in primo piano, grande come quella che la lente
 * apre nella testata (20-layout.css, `.cerca-aperta`) — ma qui sempre in
 * mostra: chi arriva da un indirizzo morto ha già la parola in bocca, e
 * non c'è menu da coprire. L'elenco delle porte riusa `.pagine-vicine`:
 * stesso disegno, stesso mestiere — un indice breve da scorrere in un
 * colpo d'occhio. Il corpo sta nella misura di lettura, come lo stato
 * vuoto della ricerca qui sopra. Le regole stanno dietro a
 * `body.error404`, la classe che WordPress mette da sé: il template non
 * deve ricordarsi una classe in più. */
body.error404 .errore{ max-width:var(--misura) }
body.error404 .errore .ricerca{
  max-width:38ch;
  padding:5px 6px 5px 18px;
  margin-block:var(--sp-6) 0;
}
body.error404 .errore .ricerca input{ width:auto; flex:1; font-size:var(--fs-sm) }
body.error404 .errore .ricerca button{ padding:6px 10px }

/* ---------------- adattamento ---------------- */
@media (max-width:940px){
  /* Il colophon sale in testa: la copertina e il pulsante del PDF sono la
     prima cosa che serve su telefono, non l'ultima. */
  .scheda__griglia{ grid-template-columns:1fr; gap:var(--sp-6) }
  .scheda__lato{ order:-1 }
  .colophon{ position:static; max-width:520px }
  .correlati__griglia{ grid-template-columns:1fr 1fr }
}

@media (max-width:760px){
  .correlati__griglia{ grid-template-columns:1fr }
  /* Sotto i 24 caratteri di spazio i puntini diventano un trattino
     tremolante: meglio togliere la conduzione e lasciare titolo e pagina. */
  .indice__punti{ display:none }
  .indice__riga{ gap:var(--sp-4) }
}

@media (max-width:560px){
  .dal-volume__righe{ grid-template-columns:1fr 1fr }
}

@media (max-width:760px){
  .testata-archivio .contatore{ text-align:left }
  .testata-archivio .contatore .n{ font-size:38px }

  /* La tabella-record diventa un elenco di record: nessuno scorrimento
     orizzontale, che su un catalogo di 120 titoli sarebbe inservibile. */
  .catalogo, .catalogo tbody, .catalogo tr, .catalogo td{ display:block; width:auto }
  .catalogo thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
  .catalogo tr{ padding-block:var(--sp-4); border-bottom:1px solid var(--line) }
  .catalogo td{ border:0; padding:2px 0 }
  .catalogo .col-n, .catalogo .col-collana, .catalogo .col-anno, .catalogo .col-documento{
    width:auto; text-align:left;
  }
  .catalogo .col-documento{ margin-top:var(--sp-3) }
}