:root { --scuro:#16304f; --bordo:#d7dde3; --testa:#e8eef5; --testo:#22272b; --tenue:#5b6570; --oro:#c8922a; }
* { box-sizing:border-box; }
body { margin:0; color:var(--testo); background:#fff; line-height:1.7;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; font-size:17px; }
.fascia { max-width:1460px; margin:0 auto; padding:0 28px; }
.testata { background:var(--scuro); color:#fff; padding:18px 0 0; border-bottom:3px solid var(--oro); }
.marchio { display:block; color:#fff; text-decoration:none; font-size:27px; letter-spacing:.3px; }
.marchio span { display:block; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:#a9bdd4; margin-top:5px; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
/* Le dodici voci stanno su una riga sola fin dentro la fascia da 1404 pixel di uno
   schermo FHD: a 13,5 pixel ne servivano 1635 e «Changelog» finiva a capo. Con
   «Licenza» il conto è tornato a sforare, da cui la crenatura più stretta. */
.menu { margin-top:16px; display:flex; flex-wrap:wrap; gap:14px; }
.menu a { color:#cbd9e8; text-decoration:none; font-size:12px; letter-spacing:.01em;
  text-transform:uppercase; padding-bottom:11px; border-bottom:3px solid transparent;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
.menu a:hover { color:#fff; border-bottom-color:var(--oro); }
/* Separatore fra i gruppi di voci: un segno dorato, non un collegamento. Il riquadro
   ripete il padding dei collegamenti, così il centro cade sulla riga del testo e non
   sopra. */
.menu .stacco { align-self:stretch; display:flex; align-items:center; padding-bottom:15px;
  flex:none; }
.menu .stacco::before { content:""; width:5px; height:5px; border-radius:50%;
  background:var(--oro); }
/* Voci con tendina. Il titolo resta un collegamento alla pagina contenitore; ad
   aprire l'elenco è il pulsante accanto, così al tocco la voce non naviga via
   prima che la tendina si veda. */
.menu .voce { position:relative; display:inline-flex; align-items:flex-start; gap:2px; }
.menu .apri { background:none; border:0; padding:0 6px 11px 4px; margin:0; cursor:pointer;
  color:#cbd9e8; display:flex; align-items:center; height:19px; }
.menu .apri:hover { color:#fff; }
.menu .apri:focus-visible { outline:2px solid var(--oro); outline-offset:2px; }
.freccia { display:inline-block; width:0; height:0; border-left:4px solid transparent;
  border-right:4px solid transparent; border-top:4px solid currentColor; opacity:.75;
  transition:transform .12s; }
.menu .voce.aperta .freccia { transform:rotate(180deg); }
.tendina { position:absolute; left:-14px; top:100%; z-index:20; display:none; margin:0;
  padding:7px 0; list-style:none; min-width:250px; background:#fff; border:1px solid var(--bordo);
  border-top:3px solid var(--oro); box-shadow:0 10px 26px rgba(12,30,55,.22); }
/* Al passaggio del puntatore solo dove un puntatore c'è davvero; altrove, e da
   tastiera, apre la classe che mette il codice dell'intestazione. */
@media (hover:hover){ .menu .voce:hover .tendina { display:block; } }
.menu .voce.aperta .tendina { display:block; }
.tendina li { margin:0; }
.tendina a { display:block; color:var(--testo); text-transform:none; letter-spacing:0;
  font-size:14px; padding:6px 18px; border-bottom:0; }
.tendina a:hover { color:var(--scuro); background:var(--testa); border-bottom:0; }
/* Elenchi puntati con il segno dorato, usati nella tabella dei layout. */
ul.punti { list-style:none; margin:0; padding:0; }
ul.punti li { position:relative; padding-left:15px; margin:0 0 5px; }
ul.punti li:last-child { margin-bottom:0; }
ul.punti li::before { content:"•"; position:absolute; left:0; top:-1px; color:var(--oro);
  font-size:15px; line-height:1.5; }
/* Sommario di pagina, generato dai titoli di sezione. L'etichetta sta nel foglio di
   stile e non nel testo, così non finisce dentro il sommario stesso. */
.toc { max-width:44rem; margin:26px 0 30px; padding:18px 22px 20px; background:var(--testa);
  border:1px solid var(--bordo); border-left:3px solid var(--oro); }
.toc::before { content:"In questa pagina"; display:block; margin-bottom:10px;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--scuro);
  font-weight:600; }
/* Una colonna sola: alla misura del testo, a due colonne le voci più lunghe
   andavano a capo lasciando una parola orfana su una riga. */
.toc ul { margin:0; padding:0; list-style:none; counter-reset:sez; }
.toc li { margin:0 0 7px; break-inside:avoid; padding-left:26px; position:relative; }
/* Il numero, non il pallino: dà la misura di quanto è lunga la pagina, e resta
   utile se un domani le voci tornassero su due colonne. */
.toc li::before { content:counter(sez) "."; counter-increment:sez; position:absolute; left:0;
  top:1px; color:var(--oro); font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
.toc a { font-size:15px; }

table.layout { width:100%; table-layout:fixed; }
table.layout td { vertical-align:top; font-size:13.5px; line-height:1.55; }
table.layout td.nome { font-weight:600; color:var(--scuro); }
table.layout td.ann { white-space:nowrap; font-variant-numeric:tabular-nums; }
table.layout col.c-nome { width:16%; } table.layout col.c-ann { width:11%; }
table.layout col.c-car { width:42%; } table.layout col.c-note { width:31%; }
/* Tabella dei fascicoli sardi: larga quanto bastano due copertine affiancate, non
   quanto la pagina. Le didascalie lunghe vanno a capo. */
table.fascicoli-dettaglio { width:auto; }
table.fascicoli-dettaglio td { vertical-align:top; }
table.fascicoli-dettaglio td.ann { font-weight:600; color:var(--scuro); white-space:nowrap;
  font-variant-numeric:tabular-nums; text-align:center; }
table.fascicoli-dettaglio td.ann .pastiglia { margin-bottom:3px; }
table.fascicoli-dettaglio th:nth-child(2) { line-height:1.25; }
table.fascicoli-dettaglio td.tav { text-align:center; }
/* Il colore delle tavole senza il suo nome: il quadrato basta, e la colonna resta
   stretta anche per le regioni con molti fascicoli sulla stessa riga. */
.quadro-tavole { display:inline-block; width:22px; height:22px; border:1px solid #9aa3ab;
  border-radius:2px; }
/* Nelle annate ibride le serie sono due, e i quadrati stanno uno sopra l'altro. */
.quadro-tavole + br + .quadro-tavole { margin-top:3px; }
table.fascicoli-dettaglio td.fasc { width:236px; text-align:center; }
table.fascicoli-dettaglio td.fasc.vuota { border-left:0; }
/* Colonna di un fascicolo non in raccolta: la copertina e un segnaposto. */
table.fascicoli-dettaglio td.fasc.sospesa { background:#fdf7e6; }
table.fascicoli-dettaglio td.fasc.sospesa img.copertina { opacity:.85; }
/* Colonna di un fascicolo di cui non e accertata nemmeno l'esistenza: e un caso
   diverso dal non averlo, e va distinto a vista. */
table.fascicoli-dettaglio td.fasc.dubbia { background:#fdeaea; }
table.fascicoli-dettaglio td.fasc.dubbia img.copertina { opacity:.85; }
.dubbio { display:inline-block; padding:1px 7px; border:1px dashed #c0392b; border-radius:3px;
  font-size:12px; color:#96281b; background:#fdeaea; }
table.fascicoli-dettaglio p.nome { margin:9px 0 7px; font-size:13px; line-height:1.3;
  font-weight:600; color:var(--scuro); }
ul.scheda { list-style:none; margin:0; padding:0; text-align:left; font-size:12.5px;
  line-height:1.5; }
ul.scheda b { font-weight:600; color:var(--scuro); }
/* Tabella dei layout nella pagina di dettaglio: le annate incolonnate al centro,
   l'intestazione no, che resta allineata come nel resto del sito. */
table.layout-dettaglio td.ann { text-align:center; white-space:nowrap;
  font-variant-numeric:tabular-nums; }
/* Gli anni di copertina stanno su una riga sola, staccati da un segno dorato, e
   allineati a sinistra come l'intestazione della colonna. */
table.layout-dettaglio td.cop { text-align:left; white-space:nowrap;
  font-variant-numeric:tabular-nums; }
table.layout-dettaglio td.cop .pt { display:inline-block; vertical-align:middle; width:4px;
  height:4px; margin:0 7px 1px; border-radius:50%; background:var(--oro); }
main { max-width:1460px; margin:0 auto; padding:40px 28px 16px; }
main > p, main > ul, main > ol, main > h1, main > h2, main > h3, main > blockquote { max-width:44rem; }
h1 { font-size:34px; line-height:1.25; margin:0 0 .55em; color:var(--scuro); font-weight:600; }
h2 { font-size:22px; margin:2.2em 0 .7em; color:var(--scuro); font-weight:600; }
h2::after { content:""; display:block; width:52px; height:2px; background:var(--oro); margin-top:9px; }
h3 { font-size:17px; margin:1.8em 0 .5em; }
p { margin:0 0 1.15em; }
a { color:#0b5cab; }
code { background:#f4f6f8; padding:1px 5px; border-radius:4px; font-size:87%;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
table { border-collapse:collapse; margin:20px 0 26px; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
th, td { border:1px solid var(--bordo); padding:6px 11px; text-align:left; font-size:14px; }
thead th { background:var(--testa); font-weight:600; }
table.matrice { table-layout:fixed; width:100%; font-size:10.5px; }
table.matrice th, table.matrice td { font-size:clamp(8px, .70vw, 10.5px); line-height:1.35;
  padding:3px 1px; text-align:center; white-space:nowrap; overflow:hidden;
  border-color:#e3e7eb; letter-spacing:-.2px; font-variant-numeric:tabular-nums; }
table.matrice th:first-child, table.matrice col.nome { width:210px; }
table.matrice td.nome { font-size:11.5px; text-align:left; white-space:normal; line-height:1.3; padding-left:8px; }
/* Tutte le celle alte due righe, intestazione compresa: senza questo vincolo le righe
   con il nome mandato a capo risultano doppie e le altre singole. */
table.matrice thead tr, table.matrice tbody tr { height:36px; }
table.matrice th, table.matrice td { vertical-align:middle; }
.scorri { overflow-x:auto; }
/* Le tabelle larghe si trascinano anche col mouse: il cursore lo annuncia solo
   quando c'è davvero qualcosa da scorrere, e durante il trascinamento il testo non
   si seleziona. */
.scorri.trascinabile { cursor:grab; }
.scorri.trascinando, .scorri.trascinando a { cursor:grabbing; user-select:none; -webkit-user-select:none; }
table.cop { font-size:14px; }
.pastiglia { display:inline-block; width:14px; height:14px; border:1px solid #9aa3ab;
  border-radius:2px; vertical-align:-2px; }
.galleria { display:flex; flex-wrap:wrap; gap:26px; margin:26px 0 32px; }
.galleria figure { margin:0; display:flex; flex-direction:column; align-items:flex-start; }
.galleria img { height:250px; width:auto; max-width:100%; border:1px solid var(--bordo);
  box-shadow:0 2px 7px rgba(20,40,70,.13); }
.galleria figcaption { max-width:240px; }
.galleria.tavole { flex-wrap:nowrap; overflow-x:auto; align-items:flex-start; }
.galleria.tavole figure { width:auto; flex:0 0 auto; }
/* Altezze calcolate perché le due righe abbiano la stessa larghezza complessiva:
   somma delle proporzioni 2,9461 nella prima riga e 3,3205 nella seconda. */
.galleria.tavole { margin:16px 0; }
.galleria.tavole.r1 img { height:340px; width:auto; }
.galleria.tavole.r2 img { height:302px; width:auto; }
.galleria.tavole figcaption { max-width:300px; }
.galleria.quadri figure { width:auto; }
.galleria.quadri img { height:420px; width:auto; }
.galleria.quadri figcaption { max-width:340px; }
.documento { display:flex; flex-wrap:wrap; gap:30px; align-items:flex-start; margin:24px 0 34px; }
.documento figure { margin:0; width:300px; flex:0 0 auto; }
.documento img { width:100%; height:auto; border:1px solid var(--bordo); box-shadow:0 2px 7px rgba(20,40,70,.13); }
.documento figcaption { font-size:13px; line-height:1.45; margin-top:9px;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
.documento blockquote { flex:1 1 380px; margin:0; padding:2px 0 2px 22px;
  border-left:3px solid var(--oro); font-size:16px; color:#2b3238; }
.documento blockquote p { margin:0 0 .9em; }
.documento blockquote p:last-child { margin-bottom:0; }
.cerca { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:22px 0 10px;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
.cerca input[type=search] { flex:1 1 320px; min-width:220px; padding:9px 12px; font-size:15px;
  border:1px solid var(--bordo); border-radius:6px; font-family:inherit; }
.cerca input[type=search]:focus { outline:2px solid var(--oro); outline-offset:1px; }
.cerca select { padding:9px 10px; font-size:14px; border:1px solid var(--bordo); border-radius:6px;
  background:#fff; font-family:inherit; }
.cerca .chk { font-size:14px; display:flex; align-items:center; gap:6px; }
.stato-ricerca { font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:13.5px;
  color:var(--tenue); margin:0 0 14px; }
table.dati { width:100%; font-size:13.5px; }
table.dati th { position:sticky; top:0; background:var(--testa); z-index:1; }
table.dati td, table.dati th { padding:5px 9px; }
table.dati tbody tr:nth-child(even) { background:#fafbfc; }
.galleria figcaption { font-size:13px; line-height:1.45; margin-top:9px;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
.galleria .dim { color:var(--tenue); }
.striscia { display:flex; height:46px; margin:26px 0 8px; border:1px solid var(--bordo); overflow:hidden; }
.striscia span { flex:1; }
.didascalia-striscia { font-size:13px; color:var(--tenue); margin-bottom:34px;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
.altre-regioni { margin-top:38px; padding-top:18px; border-top:1px solid var(--bordo);
  font-size:14px; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
.altre-regioni b { display:block; margin-bottom:7px; color:var(--scuro); }
.pie { border-top:1px solid var(--bordo); margin-top:44px; padding:22px 0 46px;
  color:var(--tenue); font-size:13.5px; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
/* Griglia delle rubriche: una riga per rubrica, una colonna per annata. */
table.griglia { table-layout:fixed; border-collapse:separate; border-spacing:1px; font-size:11px;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif; margin:22px 0 10px; }
table.griglia th[scope=row] { width:230px; font-weight:400; font-size:12px; text-align:left;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border:0; padding:0 10px 0 0;
  background:none; }
table.griglia thead th { border:0; background:none; padding:0; width:15px; vertical-align:bottom; }
table.griglia thead th span { display:inline-block; writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:10.5px; font-weight:400; color:var(--tenue); padding-bottom:4px; }
table.griglia td { width:15px; height:13px; padding:0; border:0; border-radius:2px; }
table.griglia td.si { background:var(--scuro); }
table.griglia td.no { background:#eef1f4; }
/* Terzo stato: il fascicolo non e in raccolta, quindi non sappiamo. Una casella
   vuota direbbe "non cartografato", che e un'altra cosa. */
table.griglia td.ig { background:#fdf7e6; color:#8a6d1f; font-size:10px; line-height:13px;
  text-align:center; }
/* Quarto stato: cartografato ma assente dall'elenco delle vie. Non e ne un si
   pieno ne un no: stessa convenzione della colonna "indicizzata" della ricerca.
   Azzurro, che stacca dal blu profondo della casella piena. */
table.griglia td.ni { background:#4da3d9; }
/* Elenchi messi in riga invece che in colonna: venti voci incolonnate occupano
   mezzo schermo. Va a capo da solo quando la riga finisce. */
p.inriga { line-height:2; }
p.inriga .perno { color:var(--oro); margin:0 4px; }
/* Filetto piu marcato all'inizio di ogni decennio: con trentaquattro colonne
   serve un punto d'appoggio per contare le annate. */
table.griglia td.dec, table.griglia th.dec { border-left:2px solid var(--scuro); }
/* Cornice del foglio incorporato: l'iframe si adatta alla larghezza e tiene una
   proporzione fissa, cosi non serve fissare un'altezza in pixel. */
.incorniciato { position:relative; width:100%; padding-bottom:70%; margin:18px 0;
  border:1px solid var(--bordo); background:#fff; }
.incorniciato iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; }
@media (max-width:700px) { .incorniciato { padding-bottom:120%; } }
.legenda-griglia { font-size:13px; color:var(--tenue); max-width:44rem; margin:2px 0 34px;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
/* Foliazione e tavole del capoluogo. */
.barre { display:flex; align-items:flex-end; gap:2px; height:170px; margin:22px 0 0;
  border-bottom:1px solid var(--bordo); }
.barre .col { flex:1; display:flex; align-items:flex-end; justify-content:center; gap:1px; height:100%; }
.barre .pag { width:7px; background:var(--scuro); }
.barre .tav { width:5px; background:var(--oro); }
.barre-etichette { display:flex; gap:2px; margin:5px 0 30px; font-size:10.5px; color:var(--tenue);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
.barre-etichette span { flex:1; text-align:center; }
/* Indice degli articoli delle rubriche provinciali. */
/* --- Speciale Roma: due tabelle larghe con immagini in colonna --- */
table.roma-fascicoli, table.roma-cartografia { width:100%; table-layout:fixed; min-width:1340px; }
/* La larghezza minima serve al contenitore scorrevole: senza, su schermo stretto la
   tabella si comprime e le colonne fitte sbordano invece di scorrere. */
/* Le colonne fitte di testo hanno bisogno di spazio, quelle di cifre no: senza
   larghezze imposte «Modifiche cartografiche» si incolonna su otto righe mentre
   «Note», spesso vuota, resta larghissima. */
table.roma-fascicoli th:nth-child(1), table.roma-fascicoli td:nth-child(1) { width:7%; }
table.roma-fascicoli th:nth-child(2), table.roma-fascicoli td:nth-child(2) { width:11%; }
/* Alla copertina va lo spazio che «Formato» e «Note» non usano: misurate, le due
   colonne chiedono 137 e 386 pixel per non andare a capo e ne avevano 201 e 430. */
table.roma-fascicoli th:nth-child(3), table.roma-fascicoli td:nth-child(3) { width:12.8%; }
table.roma-fascicoli th:nth-child(4), table.roma-fascicoli td:nth-child(4) { width:12.8%; }
table.roma-fascicoli th:nth-child(5), table.roma-fascicoli td:nth-child(5) { width:16.8%; }
table.roma-fascicoli th:nth-child(6), table.roma-fascicoli td:nth-child(6) { width:8%; }
table.roma-cartografia th:nth-child(1), table.roma-cartografia td:nth-child(1) { width:6%; }
table.roma-cartografia th:nth-child(2), table.roma-cartografia td:nth-child(2) { width:9%; }
table.roma-cartografia th:nth-child(3), table.roma-cartografia td:nth-child(3) { width:7%; }
table.roma-cartografia th:nth-child(4), table.roma-cartografia td:nth-child(4) { width:22%; }
table.roma-cartografia th:nth-child(5), table.roma-cartografia td:nth-child(5) { width:11%; }
table.roma-cartografia th:nth-child(6), table.roma-cartografia td:nth-child(6) { width:26%; }
table.roma-fascicoli td, table.roma-cartografia td { vertical-align:top; font-size:13.5px;
  line-height:1.55; }
table.roma-fascicoli td.ann, table.roma-cartografia td.ann { font-weight:600; color:var(--scuro);
  white-space:nowrap; font-variant-numeric:tabular-nums; }
table.roma-fascicoli td.anno, table.roma-cartografia td.anno { white-space:nowrap; }
table.roma-fascicoli td.num, table.roma-cartografia td.num { text-align:center;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
table.roma-fascicoli td.lay { white-space:nowrap; }
table.roma-cartografia td.sf { white-space:nowrap; }
table.roma-fascicoli td.img, table.roma-cartografia td.img { text-align:center; }
img.copertina { width:150px; height:auto; display:block; margin:0 auto;
  border:1px solid var(--bordo); }
/* Le sei copertine in formato ridotto sono piu alte che larghe: alla larghezza
   delle altre sfonderebbero la riga, quindi restano a 104 pixel e centrate. */
img.copertina.ridotta { width:104px; }
table.roma-fascicoli td.img a, table.roma-cartografia td.img a { display:block; }
img.quadro { margin:0 auto; }
img.quadro { height:auto; display:block; border:1px solid var(--bordo); }
img.quadro.oriz { width:250px; }
img.quadro.vert { width:150px; }
/* Lacuna dichiarata: il fascicolo non è ancora in raccolta, il dato arriverà. */
.sospeso { display:inline-block; padding:1px 7px; border:1px dashed var(--oro); border-radius:3px;
  font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:#8a6d1f;
  background:#fdf7e6; white-space:nowrap; }
/* Colonna del grafico senza dati: si vede che manca, senza fingere uno zero. */
.barre .vuota { border-bottom:2px dotted var(--oro); align-self:flex-end; height:6px; }
.articoli .perno { color:var(--oro); padding:0 3px; }
div.articoli { max-width:44rem; margin:6px 0 26px; }
div.articoli p { margin:0; font-size:15.5px; }

dl.articoli { max-width:44rem; margin:14px 0 26px; }
dl.articoli dt { font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--scuro);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif; margin-top:12px; }
dl.articoli dd { margin:3px 0 0; font-size:15.5px; }
dl.articoli .perno { color:var(--oro); padding:0 3px; }
/* Figure a se stanti. La larghezza e fissata in pixel, non l'altezza, perche la
   figura di confronto sia esattamente il doppio delle altre due qualunque sia la
   proporzione dell'immagine. A 220px una copertina 246x280 mm risulta alta 250px,
   la stessa misura delle copertine nella galleria. */
figure.figura { margin:26px 0 32px; }
figure.figura img { width:220px; height:auto; border:1px solid var(--bordo);
  box-shadow:0 2px 7px rgba(20,40,70,.13); }
figure.figura.doppia img { width:440px; }
/* Una fotografia d'insieme, non la riproduzione di una singola copertina: a 220
   pixel non si distinguerebbero i fascicoli. Il taglio è 4:3, quindi a piena
   colonna sarebbe alta mezzo schermo: 34rem bastano a leggere i fascicoli. Le
   misure native sono dichiarate nell'HTML, così lo spazio è riservato prima del
   caricamento e il sommario non sobbalza. */
figure.figura.larga img { width:100%; max-width:34rem; height:auto; }
/* Una fotografia verticale: alla larghezza di quelle orizzontali sarebbe alta il
   doppio della finestra. */
figure.figura.alta img { width:300px; }
figure.figura.alta figcaption { max-width:340px; }
figure.figura.larga figcaption { max-width:34rem; }
/* La didascalia non deve superare la larghezza della sua immagine: una riga piu
   larga della figura sembra appartenere alla pagina e non alla figura, e fra due
   figure appaiate invade lo spazio dell'altra. Ogni variante ha quindi la misura
   della propria immagine. */
figure.figura figcaption { font-size:13px; line-height:1.45; margin-top:9px; max-width:220px;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
figure.figura.doppia figcaption { max-width:440px; }
/* Due figure appaiate, come nella galleria delle copertine. */
.coppia { display:flex; flex-wrap:wrap; gap:30px; align-items:flex-start; margin:26px 0 32px; }
/* Piu immagini con una didascalia sola: un confronto, non due figure. */
figure.figura.gruppo .immagini { display:flex; flex-wrap:wrap; gap:30px; align-items:flex-start; }
figure.figura.gruppo figcaption { max-width:470px; }
.coppia figure.figura { margin:0; }
/* Blocchi richiudibili: le griglie e gli elenchi lunghi restano chiusi. */
/* Chiuso il cassetto è una riga di testo, e sta nella misura del testo; aperto
   libera la larghezza intera, perché dentro c'è una griglia larga. La transizione
   è solo sulla larghezza: l'apertura in sé la gestisce il browser. */
details.cassetto { max-width:44rem; transition:max-width .18s ease; }
details.cassetto[open] { max-width:none; }
details.cassetto { margin:20px 0 30px; border:1px solid #e8dcc0; border-radius:4px;
  background:#fdf9ef; }
details.cassetto[open] { background:none; }
details.cassetto > summary { cursor:pointer; list-style:none; padding:12px 14px;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:14px; color:var(--scuro);
  display:flex; align-items:center; gap:9px; }
details.cassetto > summary::-webkit-details-marker { display:none; }
/* Il segno va scritto per esteso: in Python "‘2" sarebbe letto come escape ottale. */
details.cassetto > summary::before { content:"+"; display:inline-block; width:17px; height:17px;
  line-height:16px; text-align:center; border:1px solid var(--oro); border-radius:3px;
  color:var(--oro); font-size:14px; flex:none; }
details.cassetto[open] > summary::before { content:"−"; }
details.cassetto[open] > summary { border-bottom:1px solid var(--bordo); }
details.cassetto > summary:hover { color:var(--oro); }
details.cassetto > *:not(summary) { margin-left:14px; margin-right:14px; }
details.cassetto > *:last-child { margin-bottom:20px; }

/* Elenco dei cambiamenti della cartografia: una riga per evento, con una linea
   piu marcata a separare i fascicoli. */
table.cambiamenti { border-collapse:collapse; font-size:14px; margin:16px 0 4px; }
table.cambiamenti th { text-align:left; font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--tenue); font-weight:400; border:0; border-bottom:1px solid var(--bordo);
  padding:5px 16px 5px 0; background:none; }
table.cambiamenti td { border:0; padding:4px 16px 4px 0; white-space:nowrap; }
table.cambiamenti td:last-child { white-space:normal; }
table.cambiamenti tr.stacco td { border-top:2px solid var(--scuro); padding-top:8px; }
table.cambiamenti tr.stacco th { border-top:2px solid var(--scuro); }
@media (max-width:1120px){ .galleria.tavole.r1 img { height:250px } .galleria.tavole.r2 img { height:222px } }
/* Senza puntatore il bersaglio del pulsante va allargato: al tocco 24 pixel sono
   il minimo perché non si sbagli voce. */
@media (hover:none){ .menu .apri { padding:0 10px 11px 8px; height:24px; } }
/* Su schermo stretto il menu va a capo, e un pannello sovrapposto coprirebbe le
   voci sottostanti rendendole intoccabili: qui l'elenco entra nel flusso e
   spinge in basso il resto, come una fisarmonica. */
@media (max-width:1000px){
  /* Qui le voci vanno a capo comunque: il corpo ridotto non serve e il tocco chiede
     un bersaglio più generoso. */
  .menu { gap:12px 18px; }
  .menu a { font-size:13px; letter-spacing:.05em; }
  .menu .voce { width:100%; flex-wrap:wrap; }
  .menu .voce > a { flex:0 1 auto; }
  .tendina { position:static; width:100%; min-width:0; margin:0 0 8px; padding:2px 0 4px;
    border:0; border-left:3px solid var(--oro); background:none; box-shadow:none; }
  .tendina a { color:#dce6f2; padding:7px 14px; font-size:14.5px; }
  .tendina a:hover { color:#fff; background:none; }
}
@media (max-width:1000px){ table.layout { table-layout:auto; }
  table.layout col.c-nome, table.layout col.c-ann, table.layout col.c-car, table.layout col.c-note { width:auto; } }
@media (max-width:1000px){ body{font-size:16px} main{padding:26px 18px} .marchio{font-size:22px}
  /* La matrice non si adatta allo schermo: si scorre. Le colonne hanno larghezza
     imposta, quindi la tabella e larga quanto serve e le righe restano tutte
     uguali, invece di alzarsi dove il nome del fascicolo va a capo. */
  /* Non «table-layout:fixed» con larghezza automatica: in quel caso il browser
     ricade sull'algoritmo automatico e ignora le larghezze delle colonne. I
     vincoli si mettono sulle celle, e valgono anche in layout automatico. */
  /* Bordi separati: con i bordi fusi il testo delle celle scorse trapela da sotto
     la colonna bloccata, che e un difetto noto di position:sticky. */
  table.matrice, table.roma-fascicoli, table.roma-cartografia, table.layout-dettaglio,
  table.fascicoli-dettaglio { border-collapse:separate; border-spacing:0; }
  table.matrice { table-layout:auto; width:auto; }
  table.matrice th, table.matrice td { font-size:10.5px; }
  table.matrice th:first-child, table.matrice td.nome { min-width:158px; max-width:158px; }
  table.matrice thead th:not(:first-child), table.matrice tbody td:not(.nome) {
    min-width:32px; max-width:32px; }
  /* Tre righe di testo piu il margine: nessun nome ne chiede di piu, e cosi tutte
     le righe misurano uguale. */
  table.matrice thead tr, table.matrice tbody tr { height:50px; }
  table.matrice td.nome { font-size:11px; line-height:1.25; white-space:normal; }
  /* Prima colonna bloccata: scorrendo, le annate le passano sotto. */
  table.matrice td.nome, table.matrice thead th:first-child { position:sticky; left:0; z-index:2; }
  table.matrice td.nome { background:#fff; }
  table.matrice thead th:first-child { background:var(--testa); z-index:3; }
  table.matrice td.nome::after, table.matrice thead th:first-child::after { content:"";
    position:absolute; top:0; right:0; bottom:0; width:1px; background:var(--bordo); }
  /* Stessa cosa per le altre tabelle che scorrono, dove la prima colonna e gia
     stretta e uniforme: basta bloccarla. */
  table.roma-fascicoli td.ann, table.roma-cartografia td.ann,
  table.fascicoli-dettaglio td.ann,
  table.layout-dettaglio td:first-child, table.griglia th[scope=row] {
    position:sticky; left:0; z-index:2; background:#fff; }
  table.roma-fascicoli thead th:first-child, table.roma-cartografia thead th:first-child,
  table.fascicoli-dettaglio thead th:first-child, table.layout-dettaglio thead th:first-child {
    position:sticky; left:0; z-index:3; background:var(--testa); }
  /* La griglia: stessa larghezza della matrice per l'etichetta, e sfondo pieno,
     che serve alla colonna bloccata per coprire quel che le passa sotto. I nomi
     lunghi erano gia troncati con i puntini a 230 pixel. */
  table.griglia { table-layout:auto; width:auto; }
  table.griglia th[scope=row] { min-width:158px; max-width:158px; font-size:11px;
    background:#fff; padding-right:8px; }
  table.griglia td { min-width:15px; }
}