/* ==========================================================================
   PARATESTO ZERO — foglio di stile
   Le linee guida complete sono in GUIDA-DI-STILE.md, nella cartella del
   progetto (non si carica sul sito). In breve:
   - un colore, un significato: ambra = il gioco; arancio = le fonti;
     blu = ciò che è selezionato; il resto carta e inchiostro. Il rosso è
     solo decorazione del nome.
   - colori solo tramite le variabili qui sotto: il tema scuro cambia solo
     quelle.
   - l'impaginazione delle opere e delle schede dipende dalla pagina: la
     sezione «mostra» vale solo per Limits & Demonstrations.
   ========================================================================== */

/* --- Caratteri locali --------------------------------------------------- */
@font-face { font-family: "Courier Prime"; src: url("font/courier-prime-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("font/courier-prime-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("font/courier-prime-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Titillium Web"; src: url("font/titillium-web-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Titillium Web"; src: url("font/titillium-web-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Titillium Web"; src: url("font/titillium-web-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Titillium Web"; src: url("font/titillium-web-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fira Code"; src: url("font/fira-code-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fira Code"; src: url("font/fira-code-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }


/* --- Variabili (token) -------------------------------------------------- */
/* Impaginazione: colonna centrale di finestre su fondo notturno a scacchi. */
:root {
  /* colori — tema chiaro */
  --notte-1: #15253C;          /* scacchi dello sfondo */
  --notte-2: #1B2E49;
  --carta: #F9F6EF;            /* superficie delle finestre */
  --carta-2: #EFEBE1;          /* campi, righe alterne */
  --inchiostro: #0A0A0A;       /* testo */
  --grigio: #5E5B54;           /* testo secondario */
  --filo: #CFC8B8;             /* linee sottili */
  --barra: #0A0A0A;            /* barra del titolo delle finestre */
  --su-barra: #F9F6EF;         /* testo sulla barra */
  --ambra: #E8A33D;            /* solo il gioco */
  --ambra-velo: #FBEBCB;       /* fondo dei cartellini */
  --rosso: #B8122B;            /* solo decorazione: il disturbo di «Zero» nel nome */
  --ombra-colore: #05080D;     /* ombra piena delle finestre: neutra */
  --arancio: #C2410C;          /* solo le fonti: sigle A1, B2... */
  --blu: #1F4E9C;              /* blu ticinese: ciò che è selezionato */
  --su-ambra: #1A1206;
  --su-blu: #FFFFFF;
  --su-rosso: #FFFFFF;

  /* caratteri */
  --f-mono: "Courier Prime", "Courier New", Courier, monospace;
  --f-testo: "Titillium Web", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* scala tipografica (rapporto ~1.25) */
  --t-xs: 0.8rem;
  --t-s: 0.9rem;
  --t-m: 1.0625rem;            /* testo corrente, 17 px */
  --t-l: 1.3rem;
  --t-xl: 1.65rem;
  --t-xxl: clamp(1.9rem, 5vw, 2.6rem);

  /* spazi e misure */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem;
  --largo: 70rem;              /* pagine con griglia di schede */
  --stretto: 46rem;            /* pagine di solo testo */
  --misura: 68ch;              /* riga di lettura massima */
  --ombra: 5px;                /* spostamento dell'ombra piena */
  --barra-h: 1.6rem;           /* altezza barra del titolo */

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --notte-1: #0A131F;
    --notte-2: #0E1928;
    --carta: #111C28;
    --carta-2: #172433;
    --inchiostro: #ECE7DB;
    --grigio: #A5A69F;
    --filo: #2C3B4D;
    --barra: #2A3B52;
    --su-barra: #ECE7DB;
    --ambra: #E8A33D;
    --ambra-velo: #2B2412;
    --rosso: #FF7A68;
    --arancio: #FF7043;
    --ombra-colore: #000000;
    --blu: #7FA8F0;
    --su-ambra: #1A1206;
    --su-blu: #0A131F;
    --su-rosso: #1A0A08;
    color-scheme: dark;
  }
}


/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: var(--s-6) var(--s-4) var(--s-7);
  font-family: var(--f-testo);
  font-size: var(--t-m);
  line-height: 1.6;
  color: var(--inchiostro);
  background-color: var(--notte-1);
  /* scacchiera nei colori della notte */
  background-image: repeating-conic-gradient(var(--notte-1) 0% 25%, var(--notte-2) 0% 50%);
  background-size: 6px 6px;
  overflow-wrap: break-word;
}

.colonna { max-width: var(--stretto); margin-inline: auto; display: grid; gap: var(--s-6); }
.colonna.larga { max-width: var(--largo); }

h1, h2, h3, h4 { font-family: var(--f-mono); font-weight: 700; line-height: 1.25; letter-spacing: 0.02em; text-wrap: balance; margin: 0; }
h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
p { margin: 0; }
.testo { display: grid; gap: var(--s-4); max-width: var(--misura); }
cite, .opera { font-style: italic; }

a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline dotted 2px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-style: solid; }
:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
::selection { background: var(--ambra); color: var(--su-ambra); }

/* separatore: la linea di mezzeria della strada */
hr.strada { border: 0; margin: 0; text-align: center; line-height: 1; }
hr.strada::after { content: "━ ━ ━ ━ ━"; color: var(--ambra); letter-spacing: 0.3em; font-size: var(--t-s); }


/* --- Finestra (componente principale) ----------------------------------- */
.finestra {
  background: var(--carta);
  border: 2px solid var(--barra);
  box-shadow: var(--ombra) var(--ombra) 0 0 var(--ombra-colore);
  min-width: 0;
}
.finestra > .barra {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--s-4);
  min-height: var(--barra-h);
  padding: 0.2rem var(--s-3);
  background: var(--barra);
  color: var(--su-barra);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.finestra > .corpo { padding: var(--s-5) var(--s-5) var(--s-6); display: grid; gap: var(--s-5); min-width: 0; }


/* --- Testata e navigazione ---------------------------------------------- */
.testata .corpo { justify-items: center; text-align: center; gap: var(--s-4); }
.testata .nome {
  display: inline-block;
  text-decoration: none;
  border: 2px solid var(--inchiostro);
  background: var(--carta-2);
  padding: 0.35em 0.7em;
  box-shadow: 4px 4px 0 0 var(--inchiostro);
  transition: transform .12s, box-shadow .12s;
}
.testata .nome:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 var(--inchiostro); }
.testata .nome-testo { font-family: var(--f-mono); font-weight: 700; font-size: var(--t-xl); letter-spacing: 0.02em; }
.sottotitolo { font-family: var(--f-mono); font-size: var(--t-s); color: var(--grigio); }

/* "Zero" con il disturbo radio della Zero nel gioco */
.zero { display: inline-block; font-style: italic; text-shadow: 1.5px 0 0 var(--rosso), -1.5px 0 0 var(--ambra); }
/* sotto il mouse il riquadro avanza e «Zero» si agita, come la voce «zero» di Paratesto */
.testata .nome:hover .zero, .testata .nome:focus-visible .zero { animation: disturbo-zero 0.4s steps(1) infinite; }
@keyframes disturbo-zero {
  0%   { text-shadow: 1.5px 0 0 var(--rosso), -1.5px 0 0 var(--ambra); transform: none; }
  33%  { text-shadow: -3px 0 0 var(--rosso), 2.5px 0 0 var(--ambra); transform: rotate(2deg) translate(1px, -0.05em); }
  66%  { text-shadow: 3px 1px 0 var(--rosso), -2px -1px 0 var(--ambra); transform: rotate(-2.5deg) translate(-1px, 0.08em); }
}
@media (prefers-reduced-motion: reduce) { .testata .nome:hover .zero, .testata .nome:focus-visible .zero { animation: none; } }

nav.menu { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1) var(--s-3); font-family: var(--f-mono); }
/* Tre stati, sempre distinguibili:
   voce normale  = inchiostro su carta, parentesi grigie
   sotto il mouse = inchiostro rovesciato (fondo scuro, testo carta)
   pagina aperta  = fondo blu (selezionato); non cambia sotto il mouse */
nav.menu a { text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.1em 0.35em; color: var(--inchiostro); }
nav.menu a::before { content: "["; color: var(--grigio); }
nav.menu a::after { content: "]"; color: var(--grigio); }
nav.menu a:hover, nav.menu a:focus-visible { background: var(--inchiostro); color: var(--carta); outline: none; }
nav.menu a[aria-current="page"] { background: var(--blu); color: var(--su-blu); cursor: default; }
nav.menu a:hover::before, nav.menu a:hover::after,
nav.menu a:focus-visible::before, nav.menu a:focus-visible::after,
nav.menu a[aria-current="page"]::before, nav.menu a[aria-current="page"]::after { color: inherit; }
/* Ritorno a Paratesto: una voce nello stile del sito principale
   (Fira Code, solo inchiostro), un po' staccata dalle altre */
nav.menu a.voce-paratesto { font-family: "Fira Code", var(--f-mono); font-weight: 700; font-size: 0.85em; letter-spacing: 0.04em; align-self: center; margin-left: var(--s-2); }


/* --- Piede --------------------------------------------------------------- */
.piede .corpo { gap: var(--s-2); text-align: center; font-size: var(--t-s); color: var(--grigio); }
.piede a { color: var(--inchiostro); }


/* --- Occhiello, didascalie, sigle --------------------------------------- */
.occhiello { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--grigio); }
.sigla { font-family: var(--f-mono); font-size: var(--t-s); color: var(--inchiostro); font-variant-numeric: tabular-nums; text-decoration: none; font-weight: 700; }
a.sigla:hover { text-decoration: underline solid 2px; }

/* rimando a una fonte: [A1] */
a.rimando, .rimando-finto {
  font-family: var(--f-mono); font-size: 0.85em; font-weight: 700;
  color: var(--arancio); text-decoration: none; white-space: nowrap;
}
a.rimando:hover { text-decoration: underline solid 2px; }
.sigle { display: inline-flex; flex-wrap: wrap; gap: 0 0.6em; }


/* --- Cartellino: il testo delle opere nel gioco -------------------------- */
.cartellino {
  font-family: var(--f-mono);
  font-size: var(--t-m);
  line-height: 1.5;
  background: var(--ambra-velo);
  border-left: 4px solid var(--ambra);
  padding: var(--s-3) var(--s-4);
  max-width: var(--misura);
}
.cartellino cite { font-weight: 700; }
.cartellino .med { color: var(--grigio); }


/* --- Gradi di attendibilità: tacche e parole, senza colore ---------------- */
/* 3 tacche = confermato (autori, testo), 2 = proposto (critica), 1 = ipotesi */
.tacche { display: inline-flex; gap: 2px; vertical-align: -0.05em; }
.tacche i { width: 0.5rem; height: 0.7rem; border: 1.5px solid currentColor; }
.tacche.t1 i:nth-child(-n+1), .tacche.t2 i:nth-child(-n+2), .tacche.t3 i { background: currentColor; }
/* l'unico grado visibile a scheda chiusa */
.segno-ipotesi {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.5;
  color: var(--grigio); border: 1.5px dashed var(--grigio); padding: 0 0.45em; white-space: nowrap;
}
.legenda, .conferme { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.legenda li, .conferme li { display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); align-items: baseline; align-content: start; }
.legenda { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--s-2) var(--s-5); font-size: var(--t-s); }
.legenda .chi, .conferme .chi { font-weight: 700; }
.legenda .spiega { grid-column: 2; color: var(--grigio); }
.c-gioco { background: var(--ambra-velo); border-left: 3px solid var(--ambra); padding: 0 0.35em; }


/* --- Comandi (pulsante «Apri tutti gli approfondimenti», da filtri.js) -- */
.comandi button {
  font-family: var(--f-mono); font-size: var(--t-s); cursor: pointer;
  padding: 0.25em 0.7em; background: var(--carta); color: var(--inchiostro);
  border: 2px solid var(--inchiostro); box-shadow: 2px 2px 0 0 var(--inchiostro);
}
.comandi button:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 0 var(--inchiostro); }
.rinvio { font-size: var(--t-s); color: var(--grigio); }


/* --- Indici --------------------------------------------------------------- */
.indice { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-family: var(--f-mono); font-size: var(--t-s); list-style: none; margin: 0; padding: 0; }
.indice-opere { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); font-family: var(--f-mono); font-size: var(--t-s); }


/* --- Schede (comuni a tutte le pagine) ----------------------------------- */
.schede { list-style: none; margin: 0; padding: 0; display: grid; }
.scheda {
  position: relative; display: grid; gap: var(--s-3) var(--s-5); align-items: start; min-width: 0;
  padding: var(--s-4) 0 var(--s-5); border-bottom: 1px solid var(--filo);
  scroll-margin-top: 3rem;
}
.scheda:last-child { border-bottom: 0; padding-bottom: var(--s-2); }
.vuota { font-style: italic; color: var(--grigio); max-width: var(--misura); }
.scheda:target > .principale .testa .sigla { color: var(--blu); }
.scheda.con-immagine { grid-template-columns: minmax(0, 1fr) minmax(0, 14rem); }
.scheda .principale { display: grid; gap: var(--s-3); min-width: 0; max-width: 46rem; }
.scheda .testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.scheda .testa h3 { font-size: var(--t-l); }
.scheda .dettaglio { font-size: var(--t-s); color: var(--grigio); margin-top: calc(-1 * var(--s-2)); }
.scheda .riferimento { display: grid; gap: var(--s-2); }
.scheda .approfondisci { grid-column: 1 / -1; }
.scheda blockquote { margin: 0; padding-left: var(--s-3); border-left: 3px solid var(--ambra); font-family: var(--f-mono); font-size: var(--t-s); line-height: 1.5; }
.scheda blockquote footer { color: var(--grigio); font-size: var(--t-xs); margin-top: var(--s-1); }
.scheda blockquote footer::before { content: "— "; }

/* Approfondisci: pannello richiudibile (funziona anche senza JavaScript) */
.approfondisci > summary {
  cursor: pointer; list-style: none; display: inline-block; padding: 0.1em 0;
  font-family: var(--f-mono); font-weight: 700; font-size: var(--t-m);
}
.approfondisci > summary::-webkit-details-marker { display: none; }
.approfondisci > summary::before { content: "▸ "; }
.approfondisci[open] > summary::before { content: "▾ "; }
.approfondisci > summary:hover { text-decoration: underline solid 2px; text-underline-offset: 0.2em; }
.approfondisci .dentro { display: grid; gap: var(--s-2); max-width: 46rem; margin-top: var(--s-2); }
.approfondisci h4 { font-family: var(--f-testo); font-size: var(--t-m); letter-spacing: 0; margin-top: var(--s-3); }
.approfondisci .conferme { font-size: var(--t-m); }
.approfondisci .schedatura { margin-top: var(--s-3); font-size: var(--t-xs); color: var(--grigio); }
.link-esterni { margin: 0; padding-left: 1.1em; display: grid; gap: var(--s-1); }
.link-esterni span { color: var(--grigio); font-size: var(--t-s); }

/* Una sola immagine visibile, piccola; le altre in «Approfondisci» */
.miniatura { min-width: 0; }
.miniatura .figura img, .altre .figura img { max-height: 13rem; }
.miniatura .figura figcaption, .altre .figura figcaption { font-size: var(--t-xs); color: var(--grigio); }
.miniatura .figura .crediti { display: none; }
.altre { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--s-4); }

/* Opera protetta: solo il collegamento */
.vedi {
  display: grid; gap: 0.15rem; padding: var(--s-3) var(--s-4); text-decoration: none; font-weight: 400;
  border: 2px dashed var(--inchiostro); background: var(--carta-2);
}
.vedi:hover { border-style: solid; }
.vedi-eti { font-size: var(--t-xs); color: var(--grigio); }
.vedi-tit { font-weight: 600; }
.vedi-dove { font-size: var(--t-s); color: var(--grigio); }


/* --- Impaginazione «mostra» (Limits & Demonstrations) --------------------- */
/* Le opere di una sala; sotto ciascuna, le sue schede appese a un filo che
   parte da un cartello con il numero dell'opera. */
.mostra .sala > .barra { position: sticky; top: 0; z-index: 3; flex-wrap: nowrap; }
.mostra .sala > .barra > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mostra .sala > .barra > span:last-child { white-space: nowrap; }
/* il titolo dell'opera è il suo cartellino nel gioco: quindi ambra */
.mostra .opera-titolo { display: grid; gap: var(--s-1); padding: var(--s-3) var(--s-4); background: var(--ambra-velo); border-left: 4px solid var(--ambra); }
.mostra .opera-titolo h2 { font-size: var(--t-xl); font-style: italic; }
.mostra .opera-titolo .med { font-family: var(--f-mono); font-size: var(--t-s); color: var(--grigio); }
.mostra .opera-testa { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-5); align-items: start; }
.mostra .opera-grande .figura img { max-height: 32rem; }
.mostra .opera-testo { display: grid; gap: var(--s-4); min-width: 0; }
.mostra .opera-testo .descrizione { display: grid; gap: var(--s-2); max-width: var(--misura); }
.mostra .opera-testo .figura img { max-height: 16rem; }
/* il filo: parte da un cartello (numero dell'opera) agganciato a una linea
   che chiude la testa dell'opera, e scende con un punto per scheda */
.mostra .sala .schede {
  --rientro: var(--s-6); --cartello: 1.8rem;
  position: relative; margin-left: calc(var(--cartello) / 2 - 1.5px);
  padding: calc(var(--cartello) + var(--s-2)) 0 0 var(--rientro); border-left: 3px solid var(--inchiostro);
}
.mostra .sala .schede::before {
  content: attr(data-segno); position: absolute; top: 0; left: calc(-1.5px - var(--cartello) / 2);
  width: var(--cartello); height: var(--cartello); display: grid; place-items: center;
  background: var(--inchiostro); color: var(--carta);
  font-family: var(--f-mono); font-weight: 700; font-size: var(--t-m); line-height: 1;
}
.mostra .sala .schede::after {
  content: ""; position: absolute; top: calc(var(--cartello) / 2 - 1.5px);
  left: calc(var(--cartello) / 2 - 1.5px); right: 0; height: 3px; background: var(--inchiostro);
}
.mostra .sala .scheda::before {
  content: ""; position: absolute; top: calc(var(--s-4) + 0.3rem);
  left: calc(-1 * var(--rientro) - 1.5px - 0.45rem);
  width: 0.9rem; height: 0.9rem; background: var(--carta); border: 3px solid var(--inchiostro);
}
.mostra .sala .scheda.ipotesi::before { border-style: dashed; border-color: var(--grigio); }
.mostra .sala .scheda:target::before { background: var(--blu); border-color: var(--blu); border-style: solid; }


/* --- Figure: schermate del gioco e riferimenti reali ------------------- */
.figura { margin: 0; display: grid; gap: var(--s-2); min-width: 0; }
.figura a:has(img) { display: block; }
.figura img {
  display: block; width: auto; max-width: 100%; height: auto; max-height: 22rem;
  border: 1.5px solid var(--inchiostro);
}
.figura.gioco img { border: 2px solid var(--ambra); }
.figura figcaption { font-size: var(--t-s); line-height: 1.45; }
.figura .crediti { display: block; color: var(--grigio); font-size: var(--t-xs); margin-top: 0.15rem; }
.figura .crediti a { font-weight: 400; color: var(--grigio); }


/* --- Percorso (home): la strada con le tappe ----------------------------- */
.percorso { list-style: none; margin: 0; padding: 0 0 0 var(--s-6); position: relative; display: grid; gap: var(--s-4); }
.percorso::before {
  content: ""; position: absolute; left: 0.55rem; top: 0.4rem; bottom: 0.4rem; width: 4px;
  background: repeating-linear-gradient(to bottom, var(--ambra) 0 12px, transparent 12px 20px);
}
.percorso li { position: relative; display: grid; gap: 0.1rem; }
.percorso li::before {
  content: ""; position: absolute; left: calc(-1 * var(--s-6) + 0.2rem); top: 0.45rem;
  width: 0.9rem; height: 0.9rem; background: var(--carta); border: 2px solid var(--inchiostro);
}
.percorso li.intermezzo::before { border-radius: 50%; }
.percorso li.fatto::before { background: var(--ambra); border-color: var(--ambra); }
.percorso .tappa { font-family: var(--f-mono); font-weight: 700; font-size: var(--t-m); }
.percorso .info { font-size: var(--t-s); color: var(--grigio); }
.percorso .stato { font-family: var(--f-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; }


/* --- Fonti ---------------------------------------------------------------- */
.fonti { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.fonte { display: grid; grid-template-columns: 3rem 1fr; gap: var(--s-3); scroll-margin-top: var(--s-5); padding: var(--s-2); }
.fonte:target { background: var(--ambra-velo); outline: 2px solid var(--ambra); }
.sigla-fonte { font-family: var(--f-mono); font-weight: 700; color: var(--arancio); font-size: var(--t-l); line-height: 1.2; }
.fonte .rif { display: grid; gap: var(--s-1); min-width: 0; }
.fonte .url { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--grigio); overflow-wrap: anywhere; }
.fonte .citata { font-size: var(--t-s); color: var(--grigio); }
.fonte .citata a { margin-right: var(--s-2); }


/* --- Riferimenti per tipo ------------------------------------------------ */
.riferimenti { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.voce-rif { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--filo); }
.voce-rif .rif-titolo { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); align-items: center; }
.voce-rif .rif-titolo a { font-size: var(--t-m); }
.voce-rif .rif-dove { font-size: var(--t-s); color: var(--grigio); }


/* --- Guida ----------------------------------------------------------------- */
.parti { margin: 0; display: grid; gap: var(--s-2); max-width: var(--misura); }
.parti div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s-3); }
.parti dt { font-weight: 700; }
.parti dd { margin: 0; }
.convenzioni { margin: 0; padding-left: 1.1em; display: grid; gap: var(--s-2); max-width: var(--misura); }
.c-attivo { background: var(--blu); color: var(--su-blu); padding: 0 0.35em; }
.tabella { overflow-x: auto; }
.tabella table { border-collapse: collapse; width: 100%; font-size: var(--t-s); }
.tabella th, .tabella td { text-align: left; padding: var(--s-2) var(--s-3); border: 1px solid var(--filo); vertical-align: top; }
.tabella th { font-family: var(--f-mono); background: var(--carta-2); }
code { font-family: var(--f-mono); font-size: 0.92em; background: var(--carta-2); padding: 0 0.25em; }


/* --- Schermi stretti ------------------------------------------------------ */
@media (max-width: 52rem) {
  .scheda.con-immagine, .mostra .opera-testa { grid-template-columns: 1fr; }
  .miniatura { max-width: 20rem; }
}
@media (max-width: 34rem) {
  body { padding-inline: var(--s-3); }
  .finestra > .barra { letter-spacing: 0.06em; }
  .finestra > .corpo { padding: var(--s-4) var(--s-4) var(--s-5); }
  .mostra .sala .schede { --rientro: var(--s-4); }
  .mostra .opera-titolo h2 { font-size: var(--t-l); }
  .parti div { grid-template-columns: 1fr; gap: 0; }
  .voce-rif { grid-template-columns: 1fr; gap: var(--s-1); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}