/* Veste «B · Catalogo»: il catalogo tipografico di una fiera.
   In testa a ogni pagina una fascia piena di blu con menu e titolo; sotto, fondo bianco.
   Un carattere solo, Archivo, usato in tre larghezze: largo per i titoli brevi, le lettere e i numeri,
   normale per il testo, stretto per i titoli lunghi. Un accento solo: l'oro del marchio.
   Tutti i colori stanno nei gettoni qui sotto: nel resto del foglio non compare nessun codice colore. */

/* ---------- Carattere (Archivo variabile, peso e larghezza; licenza OFL in caratteri/OFL.txt) ---------- */

@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("caratteri/archivo-latin-ext-wdth-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("caratteri/archivo-latin-wdth-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Gettoni ---------- */

:root {
  --blu: #0b1d6e;            /* la fascia; sul bianco titoli, nomi e collegamenti */
  --blu-filo: #3b4a96;       /* fili dentro la fascia */
  --blu-chiaro: #c9d1f4;     /* testo secondario sulla fascia */
  --blu-spento: #6f7cc0;     /* lettere dell'indice senza schede */
  --oro: #e8a828;            /* l'accento: testo solo sulla fascia, sul bianco solo segni e fili */
  --bianco: #ffffff;
  --velo: #f1f3fa;           /* riga sotto il puntatore */
  --inchiostro: #14182b;     /* testo corrente */
  --grafite: #555c75;        /* testo secondario sul bianco */
  --filo: #d8dbe6;           /* fili sul bianco */

  --carattere: "Archivo Variable", "Helvetica Neue", Arial, sans-serif;
  --raggio: 4px;
  --largo: 78rem;            /* larghezza massima dei contenuti */
  --colonna: 17rem;          /* colonna di margine: lettere, titoli di sezione */
  --bordo: max(clamp(1rem, 4vw, 3.5rem), calc((100% - var(--largo)) / 2));
  --indice: 3.25rem;         /* altezza dell'indice alfabetico, che resta in cima scorrendo */
}

/* ---------- Base ---------- */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html:has(.indice) { scroll-padding-top: calc(var(--indice) + 1rem); }

body {
  margin: 0;
  background: var(--bianco);
  color: var(--inchiostro);
  font-family: var(--carattere);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-stretch: 100%;
  font-weight: 400;
  font-synthesis-weight: none;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
img { display: block; }

a { color: var(--blu); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--blu); outline-offset: 2px; }
main:focus { outline: none; }

/* Dentro la fascia il segno del fuoco è d'oro: il blu sul blu non si vedrebbe. */
.testata a:focus-visible,
.apertura a:focus-visible,
.ritorno a:focus-visible,
.indice a:focus-visible { outline-color: var(--oro); }

/* Margine laterale comune a tutti i blocchi: il colore arriva ai bordi, il contenuto resta in colonna. */
.testata,
.piede,
.avviso-archivio,
main > .apertura,
main > .ritorno,
main > .indice,
main > .testo,
main > .galleria,
main > .anteprima,
main > .rubrica,
main > .schede,
main > .edizioni,
main > .paginazione,
main > .vicine,
main > h2,
.scheda > .apertura,
.scheda > .scheda__corpo,
.apertura--home > .apertura__testo,
.apertura--home > .fatti { padding-inline: var(--bordo); }
main > .apertura--home { padding-inline: 0; }

/* ---------- Fascia: testata ---------- */

.testata {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 2rem;
  padding-block: 0.625rem;
  background: var(--blu);
  border-bottom: 1px solid var(--blu-filo);
  color: var(--bianco);
}

.marchio {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--bianco);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  text-decoration: none;
}
/* Il monogramma arriva con molto vuoto intorno: i margini negativi lo tolgono senza ritagliare il file. */
.marchio__segno { flex: none; width: 5.5rem; height: 5.5rem; margin: -1.5rem -1rem -1.5rem -1.5rem; }
.marchio__edizione { margin-left: 0.5rem; color: var(--oro); font-weight: 700; }
.marchio:hover .marchio__nome { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }

.menu { margin-inline: -0.75rem; }
.menu__voci { display: flex; flex-wrap: wrap; padding: 0; list-style: none; }
.menu__voci a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.75rem;
  color: var(--bianco);
  font-weight: 550;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
}
.menu__voci a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.45em; }
/* La pagina corrente: un filo d'oro sotto la voce. */
.menu__voci a[aria-current="page"] { font-weight: 750; text-decoration: underline; text-decoration-color: var(--oro); text-decoration-thickness: 3px; text-underline-offset: 0.45em; }

.avviso-archivio { padding-block: 0.75rem; background: var(--oro); color: var(--blu); font-weight: 600; }
.avviso-archivio a { color: inherit; }

/* ---------- Fascia: titolo della pagina ---------- */

.apertura {
  padding-block: clamp(2rem, 5.5vw, 4.5rem) clamp(2rem, 5vw, 3.75rem);
  background: var(--blu);
  color: var(--bianco);
}

.apertura h1 {
  max-width: 100%;
  color: var(--bianco);
  font-weight: 800;
  font-stretch: 100%;
  font-size: clamp(2rem, 0.9rem + 4.2vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
/* Titolo breve: carattere largo e corpo massimo. Sul telefono resta largo il normale, sennò una parola lunga sporge. */
.apertura h1.titolo--corto { font-size: clamp(2.5rem, 1rem + 6vw, 6rem); line-height: 0.95; letter-spacing: -0.025em; }
/* Titolo che è una frase: carattere stretto, così resta grande senza riempire lo schermo. */
.apertura h1.titolo--lungo { font-stretch: 68%; font-size: clamp(2.125rem, 1rem + 3.7vw, 4.125rem); letter-spacing: -0.005em; line-height: 1.02; }

.apertura .occhiello { max-width: 46rem; margin-top: 1.125rem; text-wrap: balance; color: var(--bianco); font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem); line-height: 1.4; font-weight: 450; }

@media (min-width: 40rem) {
  .apertura h1.titolo--corto { font-stretch: 125%; }
}

/* ---------- Home: titolo, fatti dell'edizione, foto ---------- */

.apertura--home { display: flex; flex-direction: column; padding-block: 0; }
.apertura--home > .apertura__testo { padding-block: clamp(2.25rem, 6vw, 5rem) clamp(2rem, 4.5vw, 3.5rem); }

.fatti { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--blu-filo); }
.fatti__voce { grid-column: 1 / -1; padding-block: 1.125rem 1.25rem; }
.fatti__voce + .fatti__voce { border-top: 1px solid var(--blu-filo); }
.fatti__voce--numero { grid-column: auto; }
.fatti__voce--numero + .fatti__voce--numero { padding-left: 1.25rem; border-left: 1px solid var(--blu-filo); }
.fatti dt { color: var(--blu-chiaro); font-size: 0.9375rem; font-weight: 500; }
.fatti dd { margin-top: 0.25rem; color: var(--bianco); font-size: 1.375rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
/* I due numeri dell'edizione sono l'unico testo d'oro della pagina. */
.fatti__voce--numero dd { margin-top: 0.5rem; color: var(--oro); font-size: clamp(3.25rem, 2rem + 5vw, 5.5rem); font-weight: 800; font-stretch: 125%; line-height: 0.85; letter-spacing: -0.03em; }

.apertura__foto { width: 100%; height: clamp(13rem, 34vw, 30rem); object-fit: cover; object-position: 50% 62%; }

@media (min-width: 60rem) {
  .fatti { display: flex; }
  .fatti__voce { flex: 1 1 auto; padding-block: 1.5rem 1.875rem; }
  .fatti__voce + .fatti__voce { padding-left: 2.25rem; border-top: 0; border-left: 1px solid var(--blu-filo); }
  .fatti__voce:not(:last-child) { padding-right: 2.25rem; }
  .fatti__voce--numero { flex: 0 0 auto; min-width: 12rem; }
  .fatti__voce--numero + .fatti__voce--numero { padding-left: 2.25rem; }
  .fatti__voce:not(.fatti__voce--numero) dd { font-size: 1.75rem; }
}

/* ---------- Testo delle pagine ---------- */

.testo { overflow-wrap: break-word; }
.testo > * + * { margin-top: 1.1em; }
.testo h2 { color: var(--blu); font-size: 1.375rem; font-weight: 750; line-height: 1.15; letter-spacing: -0.01em; }
.testo h3 { color: var(--blu); font-size: 1.1875rem; font-weight: 700; line-height: 1.25; }
.testo > h2 { margin-top: 2.75rem; padding-top: 1rem; border-top: 2px solid var(--blu); }
.testo > h3 { margin-top: 2rem; }
.testo > h3 + * { margin-top: 0.5em; }
.testo h2 strong, .testo h3 strong { font-weight: inherit; }
.testo strong { font-weight: 700; }
.testo ul, .testo ol { padding-left: 1.25rem; }
.testo ul { list-style: square; }
.testo li + li { margin-top: 0.6em; }
.testo li::marker { color: var(--oro); }
.testo ol li::marker { color: var(--blu); font-weight: 700; }
.testo a { font-weight: 600; }
/* Un collegamento a un PDF lo dice prima del clic: sigla in un riquadro, niente icone. */
.testo a[href$=".pdf"]::after { content: "PDF"; display: inline-block; margin-left: 0.5em; padding: 0.1em 0.4em; border: 1px solid currentColor; border-radius: 2px; font-size: 0.75em; font-weight: 700; line-height: 1.3; vertical-align: 0.1em; }

main > .testo { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4.5rem); }
main > .testo > * { max-width: 42rem; }
/* Il primo capoverso fa da attacco: più grande, a tutta colonna. */
main > .testo > p:first-child { max-width: 52rem; font-size: clamp(1.1875rem, 1rem + 0.9vw, 1.5rem); line-height: 1.42; letter-spacing: -0.005em; text-wrap: pretty; }

@media (min-width: 60rem) {
  /* Colonna di margine: i titoli di sezione stanno a sinistra, il testo scorre a destra, un filo li unisce.
     Vale solo per i testi che hanno titoli di sezione; dove :has() manca resta una colonna sola. */
  main > .testo:has(> h2) { display: grid; grid-template-columns: var(--colonna) minmax(0, 1fr); align-items: start; }
  main > .testo:has(> h2) > * { grid-column: 2; }
  main > .testo:has(> h2) > p:first-child { grid-column: 1 / -1; }
  /* Il titolo occupa tre righe della griglia: così, quando è più alto del blocco che ha accanto (un sottotitolo, una riga sola),
     non apre un vuoto fra quel blocco e il seguente. */
  main > .testo:has(> h2) > h2 { grid-column: 1; grid-row: span 3; max-width: none; padding-right: 2rem; }
  /* Il filo continua sopra il primo blocco accanto al titolo; il rientro a destra tiene la riga di testo alla misura delle altre. */
  main > .testo:has(> h2) > h2 + * { margin-top: 2.75rem; padding-top: 1rem; padding-right: max(0px, calc(100% - 42rem)); border-top: 2px solid var(--blu); max-width: none; }
}

/* ---------- Galleria ---------- */

.galleria h2 { color: var(--blu); font-size: 1.375rem; font-weight: 750; line-height: 1.15; letter-spacing: -0.01em; }
.galleria__foto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; padding: 0; list-style: none; }
.galleria__foto a { display: block; aspect-ratio: 1; border-radius: var(--raggio); overflow: hidden; background: var(--velo); }
.galleria__foto a:focus-visible { outline-offset: 3px; }
.galleria__foto img { width: 100%; height: 100%; object-fit: cover; }

main > .galleria { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
main > .galleria h2 { padding-block: 1rem 1.25rem; border-top: 2px solid var(--blu); }

@media (min-width: 40rem) {
  .galleria__foto { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
}
@media (min-width: 60rem) {
  main > .galleria { display: grid; grid-template-columns: var(--colonna) minmax(0, 1fr); }
  main > .galleria .galleria__foto { grid-template-columns: repeat(5, minmax(0, 1fr)); padding-top: 1rem; border-top: 2px solid var(--blu); }
}

/* ---------- Righe del catalogo ---------- */

.schede { padding: 0; list-style: none; }

.scheda-riga {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  column-gap: 0.875rem;
  align-content: center;
  min-height: 5.25rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--filo);
}
.scheda-riga__immagine { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 3.5rem; height: 3.5rem; object-fit: cover; border: 1px solid var(--filo); border-radius: var(--raggio); background: var(--bianco); }
.scheda-riga__nome { grid-column: 2; align-self: end; color: var(--blu); font-size: 1.1875rem; font-weight: 750; font-stretch: 92%; line-height: 1.12; letter-spacing: -0.005em; overflow-wrap: break-word; }
.scheda-riga__nome:last-child { grid-row: 1 / span 2; align-self: center; }
.scheda-riga__localita { grid-column: 2; align-self: start; margin-top: 0.2rem; color: var(--grafite); font-size: 0.875rem; font-weight: 500; line-height: 1.3; }

.scheda-riga__nome a { color: inherit; text-decoration: none; }
/* Tutta la riga è il bersaglio: si apre toccando ovunque, non solo il nome. */
.scheda-riga__nome a::after { content: ""; position: absolute; inset: 0; }
.scheda-riga:has(a:hover) { background: var(--velo); }
.scheda-riga__nome a:hover { text-decoration: underline; text-decoration-color: var(--oro); text-decoration-thickness: 3px; text-underline-offset: 0.2em; }
.scheda-riga__nome a:focus-visible { outline: none; }
.scheda-riga__nome a:focus-visible::after { outline: 3px solid var(--blu); outline-offset: -3px; border-radius: var(--raggio); }

@media (min-width: 48rem) {
  /* Un po' d'aria ai lati: il velo sotto il puntatore e il segno del fuoco non toccano il testo. */
  .scheda-riga { grid-template-columns: 4rem minmax(0, 1fr) auto; column-gap: 1.25rem; align-items: center; min-height: 5.75rem; padding-inline: 0.75rem; }
  .scheda-riga__immagine { grid-row: 1; width: 4rem; height: 4rem; }
  .scheda-riga__nome, .scheda-riga__nome:last-child { grid-row: 1; align-self: center; font-size: 1.625rem; font-stretch: 100%; line-height: 1.08; letter-spacing: -0.012em; }
  .scheda-riga__localita { grid-column: 3; grid-row: 1; align-self: center; margin-top: 0; max-width: 16rem; font-size: 0.9375rem; text-align: right; }
}

/* ---------- Elenco: indice alfabetico ---------- */

.indice { position: sticky; top: 0; z-index: 5; background: var(--blu); border-top: 1px solid var(--blu-filo); }
/* Sul telefono l'indice è una riga sola che scorre di lato e mostra soltanto le lettere che ci sono. */
.indice__lettere { display: flex; margin-inline: -0.625rem; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.indice__lettere::-webkit-scrollbar { display: none; }
.indice__lettere li { display: flex; flex: 1 0 2.75rem; align-items: center; justify-content: center; height: var(--indice); font-size: 1.0625rem; font-weight: 750; line-height: 1; }
.indice__lettere a { display: flex; flex: 1; align-items: center; justify-content: center; min-width: 2.75rem; height: 100%; color: var(--bianco); text-decoration: none; }
.indice__lettere a:hover { color: var(--oro); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.45em; }
.indice__lettere a:focus-visible { outline-offset: -4px; }
.indice__lettere li.indice__assente { display: none; color: var(--blu-spento); font-weight: 500; }

@media (min-width: 80rem) {
  .indice__lettere { overflow: visible; }
  .indice__lettere li.indice__assente { display: flex; }
}

/* ---------- Elenco: gruppi per lettera ---------- */

/* Nell'elenco l'introduzione è più raccolta: la prima riga del catalogo deve arrivare presto. */
.pagina-elenco main > .testo { padding-block: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem); }
.pagina-elenco main > .testo > p:first-child { max-width: 58rem; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); line-height: 1.5; letter-spacing: 0; }
.rubrica { padding-bottom: clamp(2.5rem, 6vw, 5rem); }
main > .apertura + .rubrica, main > .indice + .rubrica { padding-top: clamp(2rem, 5vw, 3.5rem); }

.gruppo { border-top: 2px solid var(--blu); }
/* Dove :has() manca, lo spazio per l'indice fisso lo tiene il gruppo stesso. */
@supports not selector(:has(a)) {
  .gruppo { scroll-margin-top: calc(var(--indice) + 1rem); }
}
.gruppo + .gruppo { margin-top: 2rem; }
.gruppo__lettera { padding-top: 0.75rem; color: var(--blu); font-size: 3.5rem; font-weight: 800; font-stretch: 125%; line-height: 0.9; letter-spacing: -0.03em; }
.gruppo .scheda-riga:last-child { border-bottom: 0; }

@media (min-width: 60rem) {
  .gruppo { display: grid; grid-template-columns: var(--colonna) minmax(0, 1fr); align-items: start; }
  .gruppo + .gruppo { margin-top: 3rem; }
  /* La lettera resta accanto alle sue righe finché il gruppo scorre. */
  .gruppo__lettera { position: sticky; top: calc(var(--indice) + 1rem); padding-top: 1.125rem; font-size: 8.5rem; line-height: 0.8; }
}

/* ---------- Home: anteprime ---------- */

.anteprima { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.anteprima > h2 { padding-top: 1rem; border-top: 2px solid var(--blu); color: var(--blu); font-size: clamp(2rem, 1.5rem + 2vw, 2.375rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; overflow-wrap: break-word; }
.anteprima__sottotitolo { margin-top: 0.75rem; max-width: 32rem; color: var(--grafite); font-size: 1rem; line-height: 1.45; }
.schede--anteprima { margin-top: 1.25rem; }
.anteprima__tutti { margin-top: 1.5rem; }
/* Il collegamento all'elenco intero è un pulsante pieno: è l'azione della sezione. */
.anteprima__tutti a { display: inline-flex; align-items: center; min-height: 3rem; padding-inline: 1.25rem; border-radius: var(--raggio); background: var(--blu); color: var(--bianco); font-weight: 700; text-decoration: none; }
.anteprima__tutti a:hover { text-decoration: underline; text-decoration-color: var(--oro); text-decoration-thickness: 3px; text-underline-offset: 0.3em; }

@media (min-width: 48rem) {
  /* Nell'anteprima le righe vanno su due colonne: restano compatte, con la località sotto il nome. */
  .schede--anteprima { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
  .schede--anteprima .scheda-riga { grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 1rem; align-content: center; align-items: stretch; min-height: 5.25rem; padding-inline: 0.5rem; }
  .schede--anteprima .scheda-riga__immagine { grid-row: 1 / span 2; width: 3.5rem; height: 3.5rem; }
  .schede--anteprima .scheda-riga__nome { grid-row: auto; align-self: end; font-size: 1.25rem; line-height: 1.12; }
  .schede--anteprima .scheda-riga__nome:last-child { grid-row: 1 / span 2; align-self: center; }
  .schede--anteprima .scheda-riga__localita { grid-column: 2; grid-row: auto; align-self: start; margin-top: 0.2rem; max-width: none; font-size: 0.875rem; text-align: left; }
}
@media (min-width: 60rem) {
  .anteprima { display: grid; grid-template-columns: var(--colonna) minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-items: start; }
  .anteprima > h2 { grid-column: 1; grid-row: 1; align-self: stretch; padding-right: 2rem; font-stretch: 112%; }
  .anteprima__sottotitolo { grid-column: 1; grid-row: 2; padding-right: 2rem; }
  .schede--anteprima { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; border-top: 2px solid var(--blu); }
  .anteprima__tutti { grid-column: 2; }
}

/* ---------- Scheda ---------- */

.ritorno { padding-top: 1rem; background: var(--blu); }
.ritorno a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--blu-chiaro); font-size: 0.9375rem; font-weight: 550; text-underline-offset: 0.25em; }
.ritorno a:hover { color: var(--bianco); }
.ritorno + .scheda > .apertura { padding-top: clamp(0.75rem, 2.5vw, 2rem); }

.scheda__estremi { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.4; }
.scheda__estremi .occhiello { margin-top: 0; color: var(--oro); font-size: inherit; font-weight: 700; }
.scheda__localita { color: var(--bianco); font-weight: 600; }
.scheda__estremi .occhiello + .scheda__localita { padding-left: 1.25rem; border-left: 1px solid var(--blu-filo); }
.etichetta { margin-right: 0.35rem; color: var(--blu-chiaro); font-weight: 450; }

.scheda__corpo { padding-block: clamp(1.5rem, 4vw, 3.5rem) clamp(2.5rem, 6vw, 4.5rem); }
.scheda__immagine { width: 100%; max-width: 30rem; border: 1px solid var(--filo); border-radius: var(--raggio); background: var(--bianco); }
.scheda__voci > * + *, .scheda__immagine + .scheda__voci { margin-top: 2rem; }
.scheda__descrizione { max-width: 42rem; font-size: 1.125rem; line-height: 1.55; }

.scheda__voci h2, .scheda .galleria h2 { padding-top: 0.875rem; border-top: 2px solid var(--blu); color: var(--blu); font-size: 1.125rem; font-weight: 750; line-height: 1.2; }

/* I dati della scheda: un elenco di definizioni, una voce per riga, un filo fra le righe. */
.contatti { margin-top: 0.75rem; }
.contatti > div { padding-block: 0.5rem 0.125rem; border-top: 1px solid var(--filo); }
.contatti > div:first-child { border-top: 0; }
.contatti dt { color: var(--grafite); font-size: 0.9375rem; font-weight: 500; line-height: 1.7rem; }
.contatti dd { min-width: 0; }
.contatti a, .social a { display: inline-block; font-weight: 650; overflow-wrap: anywhere; }
.contatti a { padding-block: 0.125rem 0.5rem; }
.social a { min-width: 1.5rem; padding-block: 0.625rem; }   /* «X» è una lettera sola: il bersaglio resta largo almeno 24 px */
@media (min-width: 30rem) {
  .contatti > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1rem; align-items: start; padding-block: 0; }
  .contatti dt { padding-block: 0.625rem; }
  .contatti a { padding-block: 0.625rem; }
}

.social { display: flex; flex-wrap: wrap; column-gap: 1.75rem; margin-top: 0.25rem; padding: 0; list-style: none; }

.scheda .galleria { margin-top: 2.5rem; }
.scheda .galleria h2 { margin-bottom: 1rem; }
.scheda .galleria__foto a { border: 1px solid var(--filo); }

@media (min-width: 60rem) {
  .scheda__corpo--con-galleria { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
  .scheda__corpo--con-galleria .galleria { margin-top: 0; }
  .scheda__corpo--con-galleria .galleria__foto { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Senza galleria: l'immagine a sinistra, i dati a destra. */
  .scheda__corpo:not(.scheda__corpo--con-galleria) .scheda__dati { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
  .scheda__corpo:not(.scheda__corpo--con-galleria) .scheda__voci { margin-top: 0; }
  .scheda__corpo:not(.scheda__corpo--con-galleria) .scheda__voci:only-child { grid-column: 2; }
}

/* ---------- Schede vicine ---------- */

.vicine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.vicine a { display: block; min-height: 5.75rem; padding-block: 1rem 1.25rem; border-top: 2px solid var(--blu); text-decoration: none; }
.vicine__prima { grid-column: 1; padding-right: 1rem; }
.vicine__dopo { grid-column: 2; padding-left: 1rem; text-align: right; }
.vicine__dopo:only-child { grid-column: 1 / -1; }
.vicine__prima + .vicine__dopo { border-left: 1px solid var(--filo); }
.vicine__verso { display: block; color: var(--grafite); font-size: 0.9375rem; font-weight: 500; }
.vicine__nome { display: block; margin-top: 0.2rem; color: var(--blu); font-size: clamp(1.0625rem, 0.9rem + 0.8vw, 1.5rem); font-weight: 750; line-height: 1.12; letter-spacing: -0.01em; overflow-wrap: break-word; }
.vicine a:hover .vicine__nome { text-decoration: underline; text-decoration-color: var(--oro); text-decoration-thickness: 3px; text-underline-offset: 0.2em; }

/* ---------- Paginazione, edizioni precedenti, pagine brevi ---------- */

.paginazione { padding-bottom: 3rem; }
.paginazione ul { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; list-style: none; }
.paginazione a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding-inline: 0.875rem; border: 1px solid var(--blu); border-radius: var(--raggio); font-weight: 700; text-decoration: none; }
.paginazione a:hover { background: var(--velo); }
.paginazione a[aria-current="page"] { background: var(--blu); color: var(--bianco); }

.edizioni { padding-block: clamp(2rem, 5vw, 3.5rem); list-style: none; }
.edizioni li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1.5rem; min-height: 5.25rem; padding-block: 1.25rem; border-bottom: 1px solid var(--filo); }
.edizioni li:first-child { border-top: 2px solid var(--blu); }
.edizioni a { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.625rem); font-weight: 750; line-height: 1.15; text-decoration: none; }
.edizioni a:hover { text-decoration: underline; text-decoration-color: var(--oro); text-decoration-thickness: 3px; text-underline-offset: 0.2em; }
.edizioni__luogo { color: var(--grafite); font-size: 0.9375rem; font-weight: 500; }

main > h2 { padding-top: 1rem; color: var(--blu); font-size: 1.375rem; font-weight: 750; line-height: 1.15; }

/* I titoli fissi dell'interfaccia sono brevi: prendono il carattere largo come i titoli brevi delle pagine. */
.pagina-non-trovata .apertura h1,
.pagina-edizioni .apertura h1,
.pagina-in-preparazione .apertura h1 { font-size: clamp(2.375rem, 1rem + 5vw, 5rem); line-height: 0.98; letter-spacing: -0.025em; }
@media (min-width: 40rem) {
  .pagina-non-trovata .apertura h1,
  .pagina-edizioni .apertura h1,
  .pagina-in-preparazione .apertura h1 { font-stretch: 125%; }
}

/* ---------- Piede ---------- */

.piede { display: grid; gap: 2rem; padding-block: 2.25rem 2rem; border-top: 4px solid var(--blu); background: var(--bianco); }
.piede__nome { color: var(--blu); font-size: 1.375rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.015em; }
.piede__edizione { font-weight: 450; }
.piede__testo { max-width: 38rem; margin-top: 0.75rem; color: var(--grafite); font-size: 0.9375rem; line-height: 1.55; }
/* La striscia dei loghi degli enti: sempre a colori, su bianco, in una riga. */
.piede__loghi { width: 100%; max-width: 34rem; height: auto; }
.piede__diritti { padding-top: 1.25rem; border-top: 1px solid var(--filo); color: var(--grafite); font-size: 0.9375rem; }
.piede__diritti a { display: inline-block; padding-block: 0.25rem; font-weight: 600; }

@media (min-width: 60rem) {
  .piede { grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); column-gap: 4rem; align-items: center; padding-block: 3rem 2rem; }
  .piede__nome { font-stretch: 112%; font-size: 1.5rem; }
  .piede__enti { justify-self: end; width: 100%; }
  .piede__diritti { grid-column: 1 / -1; }
}

/* ---------- Movimento ---------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}