/* Impianto tipografico e di layout del sito.
 *
 * Tre famiglie servite dal sito stesso, in font/ con la licenza accanto:
 * nessuna chiamata a un CDN nel percorso di rendering. È un punto di rottura
 * in meno e, su un sito che dichiara di non raccogliere nulla su chi legge, un
 * tracciamento di terze parti in meno. Sono sottoinsiemi latini WOFF2: circa
 * 340 KB in tutto, caricati una volta e messi in cache per tutte le pagine.
 *
 * Fraunces per i titoli: un serif con asse ottico, che a corpo grande si
 * scioglie e a corpo piccolo si irrobustisce. Literata per la lettura lunga:
 * disegnato per questo. IBM Plex Mono per simboli, anni e dati: in chimica il
 * simbolo è già monospazio.
 */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("font/fraunces-normal-300-700.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("font/fraunces-italic-300-700.woff2") format("woff2");
}
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("font/literata-normal-400-600.woff2") format("woff2");
}
@font-face {
  font-family: "Literata";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("font/literata-italic-400-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("font/ibm-plex-mono-normal-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("font/ibm-plex-mono-normal-500.woff2") format("woff2");
}

:root {
  --larghezza-lettura: 64ch;
  /* Le pagine di lettura stanno in una colonna; la home e le pagine con la
   * tavola usano la larghezza piena, che è anche quella della testata. */
  --larghezza-pagina: 46rem;
  --larghezza-piena: 74rem;
  --gutter: clamp(16px, 4vw, 40px);

  --passo-1: 0.25rem;
  --passo-2: 0.5rem;
  --passo-3: 1rem;
  --passo-4: 1.5rem;
  --passo-5: 2.5rem;
  --passo-6: 4rem;

  --font-testo: "Literata", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-titoli: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-dati: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --raggio: 6px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--colore-fondo);
  color: var(--colore-testo);
  font-family: var(--font-testo);
  /* La dimensione cresce leggermente con la finestra, entro limiti fissi: su
   * telefono resta leggibile senza ingrandire, su schermo grande non diventa
   * un manifesto. */
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  font-variation-settings: "opsz" 14;
}

/* --- Impaginazione -------------------------------------------------------- */

.testata,
main,
.chiusura {
  max-width: var(--larghezza-pagina);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* La testata e la chiusura sono larghe quanto la pagina più larga, così che
 * ogni pagina apra e chiuda con gli stessi margini. */
.testata,
.chiusura,
main.pagina--piena {
  max-width: var(--larghezza-piena);
}

.testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--passo-3);
  padding-block: var(--passo-3);
  border-bottom: 1px solid var(--colore-bordo);
}

.testata__sito {
  font-family: var(--font-titoli);
  font-variation-settings: "opsz" 24;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--colore-testo);
  text-decoration: none;
}

.testata__sito:hover {
  color: var(--colore-accento);
}

.testata__tema {
  flex: none;
  /* 44px è la dimensione minima di un punto di contatto usabile con il
   * pollice: sotto, il pulsante si manca. */
  min-height: 44px;
  padding-inline: var(--passo-3);
  background: transparent;
  color: var(--colore-testo-tenue);
  border: 1px solid var(--colore-bordo);
  border-radius: 999px;
  font-family: var(--font-dati);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.testata__tema:hover {
  border-color: var(--colore-accento);
  color: var(--colore-accento);
}

main {
  padding-bottom: var(--passo-6);
}

/* --- Testo ---------------------------------------------------------------- */

p {
  max-width: var(--larghezza-lettura);
  margin-block: 0 var(--passo-3);
}

h1,
h2,
h3 {
  font-family: var(--font-titoli);
  font-weight: 400;
  line-height: 1.1;
  text-wrap: balance;
}

h1 {
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -0.015em;
}

h2 {
  margin-block: var(--passo-5) var(--passo-3);
  font-size: 1.6rem;
  font-variation-settings: "opsz" 72;
}

h3 {
  font-variation-settings: "opsz" 40;
}

.cronologia__testa h1 {
  /* Su telefono un titolo di sette parole occupa mezza schermata: qui la
   * scala parte più bassa che nelle schede degli elementi. */
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem);
  margin-block: 0 var(--passo-3);
}

a {
  color: var(--colore-accento);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

/* L'occhiello: la riga corta in monospazio sopra un titolo, che dice cosa si
 * sta guardando — posizione, epoca, anno. Ricorre su tutto il sito. */
.occhiello {
  margin: 0;
  font-family: var(--font-dati);
  font-variant-numeric: tabular-nums;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--colore-accento);
}

/* --- Scheda dell'elemento ------------------------------------------------- */

.elemento__testa {
  margin-block: var(--passo-4) var(--passo-5);
  padding-bottom: var(--passo-3);
  border-bottom: 1px solid var(--colore-bordo);
}

.elemento__posizione {
  margin: 0;
  font-family: var(--font-dati);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--colore-accento);
}

.elemento__nome {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--passo-3);
  margin-block: var(--passo-2);
  font-size: clamp(2.6rem, 1.8rem + 4vw, 5rem);
}

.elemento__simbolo {
  font-family: var(--font-dati);
  font-size: 0.32em;
  font-weight: 500;
  padding: 0.25em 0.5em;
  border: 1px solid var(--colore-accento);
  border-radius: var(--raggio);
  color: var(--colore-accento);
  letter-spacing: 0;
}

.elemento__sommario {
  margin: 0;
  font-family: var(--font-dati);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--colore-testo-tenue);
}

/* L'apertura è la frase che deve trattenere: ha il peso di un occhiello, non
 * quello di un paragrafo qualunque. */
.elemento__hook {
  margin-block: var(--passo-4);
  padding-left: var(--passo-4);
  border-left: 2px solid var(--colore-accento);
  font-family: var(--font-titoli);
  font-variation-settings: "opsz" 72;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.3rem, 1.1rem + 1.2vw, 1.9rem);
  line-height: 1.3;
  color: var(--colore-testo);
  max-width: 34ch;
}

.elemento__catena {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--passo-3);
  margin-block: var(--passo-6) var(--passo-5);
  padding-top: var(--passo-3);
  border-top: 1px solid var(--colore-bordo);
  font-family: var(--font-dati);
  font-size: 0.88rem;
}

/* Precedente e successivo nella cronologia sono i comandi con cui si percorre
 * il vault nota per nota: hanno un'area di contatto propria. */
.elemento__catena a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--passo-2);
  text-decoration: none;
}

.elemento__catena a:hover {
  text-decoration: underline;
}

.elemento__fonti ul {
  padding-left: var(--passo-4);
  font-size: 0.9rem;
  color: var(--colore-testo-tenue);
}

.elemento__fonti li {
  margin-bottom: var(--passo-2);
}

/* --- Il capitolo: la scheda dell'elemento --------------------------------- */

.capitolo__barra {
  position: sticky;
  top: 0;
  z-index: 3;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  background: color-mix(in oklab, var(--colore-fondo) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--colore-bordo);
}

.capitolo__barra-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--passo-3);
  margin: 0;
  max-width: none;
  padding-block: var(--passo-2);
  font-family: var(--font-dati);
  font-variant-numeric: tabular-nums;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--colore-testo-tenue);
}

.capitolo__barra-in b {
  font-weight: 500;
  color: var(--colore-accento);
}

.capitolo__barra-in a {
  color: var(--colore-accento);
  text-decoration: none;
}

.capitolo__barra-in a:hover {
  text-decoration: underline;
}

.progresso {
  height: 3px;
  margin-inline: calc(-1 * var(--gutter));
  background: var(--colore-bordo);
}

.progresso i {
  display: block;
  width: var(--avanzamento, 0%);
  height: 100%;
  background: var(--colore-accento);
  transition: width 0.15s linear;
}

.elemento__sommario {
  display: flex;
  flex-wrap: wrap;
  gap: var(--passo-1) var(--passo-3);
  max-width: none;
}

.elemento__sommario a {
  color: var(--colore-accento);
}

.elemento__incipit {
  font-size: 1.06em;
}

.elemento__sezione h2 {
  margin-block: var(--passo-5) var(--passo-3);
}

.questione {
  max-width: var(--larghezza-lettura);
  margin-block: var(--passo-4);
  padding: var(--passo-3) var(--passo-4);
  border-left: 2px solid var(--colore-accento);
  background: var(--colore-superficie);
}

.questione p:last-child {
  margin: 0;
}

/* Le sezioni sotto la piega si attenuano solo se lo script lo decide, e da
 * uno stato visibile: la pagina a riposo è tutta leggibile. */
.rivela--attesa {
  opacity: 0.55;
  transform: translateY(10px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.rivela--attesa.rivela--visto {
  opacity: 1;
  transform: none;
}

/* --- Svela: i dati a richiesta -------------------------------------------- */

.svela-gruppo {
  margin-block: var(--passo-6) var(--passo-5);
  border-top: 1px solid var(--colore-bordo);
  max-width: var(--larghezza-lettura);
}

.svela {
  border-bottom: 1px solid var(--colore-bordo);
}

.svela summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--passo-3);
  min-height: 56px;
  padding-block: var(--passo-2);
  list-style: none;
  cursor: pointer;
  font-family: var(--font-titoli);
  font-variation-settings: "opsz" 48;
  font-size: 1.3rem;
}

.svela summary::-webkit-details-marker {
  display: none;
}

.svela summary small {
  font-family: var(--font-dati);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--colore-accento);
}

.svela[open] summary small {
  color: var(--colore-testo-tenue);
}

.svela[open] summary small::before {
  content: "chiudi";
}

.svela summary small {
  font-size: 0;
}

.svela summary small::before {
  content: "svela";
  font-size: 0.72rem;
}

.svela > *:not(summary) {
  margin-bottom: var(--passo-4);
}

.svela .dati {
  border-top: 0;
}

.svela .atomo {
  margin: 0;
}

/* --- Storia estesa e catena ---------------------------------------------- */

.approfondimento {
  max-width: var(--larghezza-lettura);
  margin-block: var(--passo-5);
  padding: var(--passo-4);
  border: 1px dashed color-mix(in oklab, var(--colore-accento) 55%, transparent);
  border-radius: 10px;
}

.approfondimento p {
  margin-bottom: var(--passo-2);
}

.approfondimento p:last-child {
  margin: 0;
}

.approfondimento a {
  font-family: var(--font-titoli);
  font-size: 1.25rem;
  color: var(--colore-testo);
  text-decoration: none;
}

.approfondimento a:hover {
  color: var(--colore-accento);
}

.approfondimento__hook {
  font-style: italic;
  color: var(--colore-testo-tenue);
}

.elemento__catena a {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--passo-1);
  color: var(--colore-testo);
  font-family: var(--font-titoli);
  font-size: 1.2rem;
}

.elemento__catena .catena__successivo {
  align-items: flex-end;
  text-align: right;
}

.elemento__catena small {
  font-family: var(--font-dati);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colore-accento);
}

/* --- Chiusura e avvertenza ------------------------------------------------ */

.chiusura {
  padding-block: var(--passo-5) var(--passo-6);
  border-top: 1px solid var(--colore-bordo);
  font-size: 0.88rem;
  color: var(--colore-testo-tenue);
}

.avvertenza {
  padding: var(--passo-3) var(--passo-4);
  background: var(--colore-superficie);
  border-radius: var(--raggio);
  max-width: var(--larghezza-pagina);
}

.avvertenza__titolo {
  margin: 0 0 var(--passo-2);
  font-family: var(--font-dati);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--colore-testo);
}

.avvertenza p {
  margin: 0;
  max-width: none;
  line-height: 1.5;
}

.chiusura__link {
  display: flex;
  flex-wrap: wrap;
  gap: var(--passo-2);
  margin-top: var(--passo-3);
  font-family: var(--font-dati);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

/* I collegamenti di navigazione sono comandi, non testo: hanno un'area di
 * contatto propria. Misurato: senza, restano alti 22 px, sotto il minimo di
 * WCAG 2.5.8. */
.chiusura__link a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--passo-2);
}

/* --- Accessibilità -------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--colore-accento);
  outline-offset: 3px;
}

/* Chi ha chiesto meno animazioni non deve riceverne. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* --- Schede della pagina elemento ---------------------------------------- */

.elemento__scheda {
  margin-block: var(--passo-5);
}

/* Lista di descrizione invece che tabella: si impila da sola su schermo
 * stretto e diventa a due colonne quando c'è spazio. */
.dati {
  margin: 0;
  border-top: 1px solid var(--colore-bordo);
}

.dati__voce {
  display: flex;
  flex-wrap: wrap;
  gap: var(--passo-2) var(--passo-3);
  padding-block: var(--passo-2);
  border-bottom: 1px solid var(--colore-bordo);
}

.dati dt {
  flex: 1 1 11rem;
  font-family: var(--font-titoli);
  font-size: 0.85rem;
  color: var(--colore-testo-tenue);
}

.dati dd {
  flex: 1 1 11rem;
  margin: 0;
  font-family: var(--font-dati);
  font-size: 0.9rem;
}

/* I nomi degli scopritori dentro i dati sono collegamenti alle loro pagine, ed
 * è da lì che ci si arriva. Restano in linea, separati da virgole, ma con
 * abbastanza area verticale da essere un bersaglio: senza, sono alti 16 px. */
.dati dd a {
  display: inline-block;
  padding-block: 4px;
}

/* --- Vicini nella tavola -------------------------------------------------- */

/* Le celle sono disposte come nella tavola periodica, non in elenco: sopra e
 * sotto sono lo stesso gruppo, a sinistra e a destra lo stesso periodo, e
 * l'elemento sta al centro. La sezione si chiama "posizione nella tavola" e
 * questa è la posizione. */
.vicini {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    ".        sopra  ."
    "sinistra centro destra"
    ".        sotto  .";
  gap: var(--passo-2);
  margin: 0;
  padding: 0;
  max-width: 26rem;
  list-style: none;
}

.vicini__cella--sopra {
  grid-area: sopra;
}
.vicini__cella--sotto {
  grid-area: sotto;
}
.vicini__cella--sinistra {
  grid-area: sinistra;
}
.vicini__cella--destra {
  grid-area: destra;
}
/* La specificità è alzata di proposito: `.vicini__cella` compare più avanti
 * nel foglio e, a parità di peso, vincerebbe sul bordo dichiarato qui. */
.vicini .vicini__cella--centro {
  grid-area: centro;
  background: var(--colore-fondo);
  border: 2px solid var(--colore-accento);
}

.vicini__legenda {
  margin-top: var(--passo-2);
  font-family: var(--font-titoli);
  font-size: 0.8rem;
  color: var(--colore-testo-tenue);
}

.vicini__cella {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--passo-2);
  text-align: center;
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
}

.vicini__cella a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--passo-1);
  text-decoration: none;
}

.vicini__simbolo {
  font-family: var(--font-dati);
  font-size: 1.3rem;
  font-weight: 700;
}

.vicini__nome {
  font-family: var(--font-titoli);
  font-size: 0.8rem;
  line-height: 1.2;
}



/* --- Struttura atomica ---------------------------------------------------- */

.atomo {
  margin: 0;
  text-align: center;
}

.atomo img {
  max-width: min(100%, 22rem);
  height: auto;
}

.atomo figcaption {
  font-family: var(--font-titoli);
  font-size: 0.8rem;
  color: var(--colore-testo-tenue);
}

/* --- Composti ------------------------------------------------------------- */

.composti {
  margin: 0;
  padding: 0;
  list-style: none;
}

.composti__voce {
  padding-block: var(--passo-3);
  border-bottom: 1px solid var(--colore-bordo);
}

.composti__nome {
  margin: 0;
  font-family: var(--font-titoli);
  font-weight: 600;
}

.composti__formula {
  margin-left: var(--passo-2);
  font-family: var(--font-dati);
  font-weight: 400;
  font-size: 0.9em;
  color: var(--colore-testo-tenue);
}

.composti__usi {
  margin: var(--passo-1) 0 0;
  font-size: 0.9rem;
  color: var(--colore-testo-tenue);
}

/* --- Linea del tempo ------------------------------------------------------ */

.cronologia__sommario {
  font-size: 1.1em;
  color: var(--colore-testo-tenue);
}

.cronologia__nota {
  font-family: var(--font-titoli);
  font-size: 0.85rem;
  color: var(--colore-testo-tenue);
}

/* L'istogramma è una lista di descrizione con una barra disegnata in CSS:
 * i valori restano testo e non serve alcuna libreria. */
.istogramma {
  margin: 0;
}

.istogramma__barra {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  align-items: center;
  gap: var(--passo-2);
  padding-block: 2px;
  line-height: 1.3;
}

.istogramma dt {
  font-family: var(--font-dati);
  font-size: 0.75rem;
  color: var(--colore-testo-tenue);
}

.istogramma dd {
  display: flex;
  align-items: center;
  gap: var(--passo-2);
  margin: 0;
}

.istogramma__riempimento {
  /* --quota arriva dal template: è la quantità in percentuale del massimo. */
  width: var(--quota);
  min-width: 2px;
  height: 0.75rem;
  /* Il colore dell'epoca in cui il periodo inizia; senza epoca, l'accento. */
  background: var(--epoca-testo, var(--colore-accento));
  border-radius: 2px;
}

.istogramma__quantita {
  font-family: var(--font-dati);
  font-size: 0.75rem;
  color: var(--colore-testo-tenue);
}

/* --- Salti alle epoche ---------------------------------------------------- */

.cronologia__salti {
  display: flex;
  flex-wrap: wrap;
  gap: var(--passo-2);
  margin-block: var(--passo-4);
}

.salto {
  padding: var(--passo-2) var(--passo-3);
  /* 44px di altezza minima: sotto, il pollice manca il bersaglio. */
  min-height: 44px;
  display: flex;
  align-items: center;
  background: var(--epoca-sfondo);
  color: var(--epoca-testo);
  border-radius: var(--raggio);
  font-family: var(--font-titoli);
  font-size: 0.85rem;
  text-decoration: none;
}

/* --- Epoche e pastiglie --------------------------------------------------- */

.epoca {
  margin-block: var(--passo-5);
  /* L'ancora non deve finire sotto il bordo superiore della finestra. */
  scroll-margin-top: var(--passo-3);
}

.epoca__testa h2 {
  margin-block: var(--passo-1) var(--passo-3);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  font-variation-settings: "opsz" 96;
}

.epoca__testa h2 a {
  color: var(--epoca-testo);
  text-decoration: none;
}

.epoca__estremi {
  display: flex;
  align-items: center;
  gap: var(--passo-2);
  margin: var(--passo-5) 0 0;
  color: var(--epoca-testo);
}

/* Tre per riga a 390 px: le 118 voci occupano un decimo dello spazio che
 * serviva alle sei tabelle. */
.pastiglie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.8rem, 1fr));
  gap: var(--passo-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pastiglia a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: var(--passo-1) 2px;
  min-height: 56px;
  background: var(--epoca-sfondo);
  border-radius: var(--raggio);
  text-align: center;
  text-decoration: none;
}

.pastiglia__simbolo {
  font-family: var(--font-dati);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--epoca-testo);
}

.pastiglia__nome {
  font-family: var(--font-titoli);
  font-size: 0.68rem;
  line-height: 1.1;
  color: var(--colore-testo);
  /* I nomi lunghi (rutherfordio, protoattinio) devono poter spezzare invece
   * di allargare la colonna e ridurre le pastiglie per riga. */
  overflow-wrap: anywhere;
}

.pastiglia__anno {
  font-family: var(--font-dati);
  font-size: 0.65rem;
  color: var(--colore-testo-tenue);
}

/* --- Tavola periodica ----------------------------------------------------- */

/* La griglia è larga 18 colonne: su schermo stretto scorre in orizzontale
 * dentro il proprio contenitore invece di far scorrere la pagina. È l'unica
 * eccezione alla regola del niente scorrimento laterale, ed è quella giusta:
 * una tavola periodica compressa a 390 px non si legge. */
.tavola-contenitore {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: var(--passo-2);
}

.tavola {
  display: grid;
  grid-template-columns: repeat(18, minmax(2.6rem, 1fr));
  grid-template-rows: repeat(var(--righe), auto);
  gap: 3px;
  margin: 0;
  padding: 0;
  min-width: 48rem;
  list-style: none;
}

.casella {
  grid-column: var(--colonna);
  grid-row: var(--riga);
}

.casella .casella__corpo {
  /* Posizionato di proposito: il nome accessibile qui dentro è in posizione
   * assoluta e, senza un antenato posizionato, il suo blocco contenitore
   * sarebbe la pagina. Sfuggirebbe al contenitore che scorre e allargherebbe
   * il documento a 795 px su un viewport da 390. Misurato. */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 2px;
  background: var(--epoca-sfondo);
  border-radius: 3px;
  text-decoration: none;
  line-height: 1.1;
  transition: opacity 0.18s ease-out;
}

.casella__numero {
  font-family: var(--font-dati);
  font-size: 0.6rem;
  color: var(--colore-testo-tenue);
}

.casella__simbolo {
  font-family: var(--font-dati);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--epoca-testo);
}

.casella__anno {
  font-family: var(--font-dati);
  font-size: 0.55rem;
  color: var(--colore-testo-tenue);
}

/* Il nome esteso è per i lettori di schermo: nella casella non ci sta, ma
 * senza, la tavola sarebbe un elenco di sigle. */
.casella__nome-accessibile {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Le caselle non ancora scoperte restano al loro posto, spente: la tavola
 * conserva la sua forma e si vede quali buchi la storia doveva ancora
 * riempire. */
.casella--spenta .casella__corpo {
  opacity: 0.12;
}

/* --- Comando degli anni --------------------------------------------------- */

.scorrevole {
  margin-block: var(--passo-4);
  padding: var(--passo-3);
  background: var(--colore-superficie);
  border-radius: var(--raggio);
}

.scorrevole__etichetta {
  display: block;
  font-family: var(--font-titoli);
  font-size: 0.85rem;
  color: var(--colore-testo-tenue);
}

.scorrevole__stato {
  display: block;
  margin-block: var(--passo-1) var(--passo-2);
  font-family: var(--font-titoli);
  font-size: 0.95rem;
  font-weight: 600;
}

.scorrevole input[type="range"] {
  width: 100%;
  /* 44px di area di contatto: uno scorrevole sottile non si prende col dito. */
  height: 44px;
  accent-color: var(--colore-accento);
}

.scorrevole__comandi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--passo-2);
}

.scorrevole__comandi button {
  min-height: 44px;
  padding-inline: var(--passo-3);
  background: var(--colore-fondo);
  color: var(--colore-testo);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  font-family: var(--font-titoli);
  font-size: 0.85rem;
  cursor: pointer;
}

/* --- Legenda delle epoche ------------------------------------------------- */

.legenda__voci {
  display: flex;
  flex-wrap: wrap;
  gap: var(--passo-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.legenda__voce {
  padding: var(--passo-1) var(--passo-2);
  background: var(--epoca-sfondo);
  color: var(--epoca-testo);
  border-radius: var(--raggio);
  font-family: var(--font-titoli);
  font-size: 0.8rem;
}

/* --- Itinerario ----------------------------------------------------------- */

.avanzamento {
  margin-block: var(--passo-4);
  padding: var(--passo-3);
  background: var(--colore-superficie);
  border-radius: var(--raggio);
}

.avanzamento__stato {
  margin: 0 0 var(--passo-2);
  font-family: var(--font-titoli);
  font-size: 0.95rem;
  font-weight: 600;
}

.avanzamento__barra {
  height: 6px;
  background: var(--colore-bordo);
  border-radius: 3px;
  overflow: hidden;
}

.avanzamento__barra span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--colore-accento);
  transition: width 0.2s ease-out;
}

.avanzamento__comandi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--passo-2);
  margin-top: var(--passo-3);
}

.avanzamento__riprendi,
.avanzamento__comandi button {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--passo-3);
  background: var(--colore-fondo);
  color: var(--colore-testo);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  font-family: var(--font-titoli);
  font-size: 0.85rem;
  text-decoration: none;
  cursor: pointer;
}

.avanzamento__nota {
  margin: var(--passo-2) 0 0;
  font-family: var(--font-titoli);
  font-size: 0.78rem;
  color: var(--colore-testo-tenue);
}

.tappe {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tappa;
}

.tappa {
  margin-block: var(--passo-5);
  padding-bottom: var(--passo-4);
  border-bottom: 1px solid var(--colore-bordo);
  scroll-margin-top: var(--passo-3);
}

.tappa__testa {
  display: flex;
  align-items: baseline;
  gap: var(--passo-3);
}

.tappa__numero {
  flex: none;
  font-family: var(--font-dati);
  font-size: 1.3rem;
  font-weight: 500;
  /* Il numero della tappa porta il colore dell'epoca del suo elemento. */
  color: var(--epoca-testo, var(--colore-accento));
}

.tappa__titolo {
  margin: 0;
  font-size: 1.25rem;
}

.tappa__descrizione {
  margin-block: var(--passo-2);
}

.tappa__vai {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--passo-3);
  margin: 0;
  font-family: var(--font-titoli);
  font-size: 0.95rem;
}

.tappa__minuti {
  font-size: 0.85rem;
  color: var(--colore-testo-tenue);
}

.tappa__letta {
  display: flex;
  align-items: center;
  gap: var(--passo-2);
  /* 44px: la casella da sola è troppo piccola per il pollice, l'etichetta
   * intera invece è un bersaglio comodo. */
  min-height: 44px;
  margin-top: var(--passo-2);
  font-family: var(--font-titoli);
  font-size: 0.85rem;
  color: var(--colore-testo-tenue);
  cursor: pointer;
}

.tappa__segno {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--colore-accento);
}

/* Una tappa letta si attenua ma resta leggibile: nasconderla toglierebbe al
 * lettore la possibilità di tornarci. */
.tappa--letta .tappa__descrizione,
.tappa--letta .tappa__titolo {
  opacity: 0.6;
}

/* --- Pagine di contesto: epoche, scopritori, attribuzioni ----------------- */

.contesto__occhiello {
  margin: 0;
  font-family: var(--font-dati);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--epoca-testo, var(--colore-accento));
}

.contesto__testa .occhiello {
  display: flex;
  align-items: center;
  gap: var(--passo-2);
}

/* La tavola nella pagina d'epoca: il palco della home fermato su un'epoca. */
.epoca__tavola {
  margin: var(--passo-5) 0;
}

.epoca__tavola figcaption {
  margin-top: var(--passo-2);
  color: var(--colore-testo-tenue);
  font-weight: 400;
}

.contesto__anagrafica {
  margin: var(--passo-1) 0 0;
  font-family: var(--font-titoli);
  font-size: 0.9rem;
  color: var(--colore-testo-tenue);
}

.contesto__testa h1 {
  margin-block: var(--passo-1) var(--passo-3);
  font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem);
}

.ritratto {
  margin: var(--passo-4) 0;
}

.ritratto img {
  max-width: min(100%, 16rem);
  height: auto;
  border-radius: var(--raggio);
}

.ritratto figcaption {
  margin-top: var(--passo-1);
  font-family: var(--font-titoli);
  font-size: 0.78rem;
  color: var(--colore-testo-tenue);
}

.attribuzioni {
  margin: 0;
  padding: 0;
  list-style: none;
}

.attribuzione {
  padding-block: var(--passo-2);
  border-bottom: 1px solid var(--colore-bordo);
}

.attribuzione__soggetto {
  margin: 0;
  font-family: var(--font-titoli);
  font-weight: 600;
}

.attribuzione__dati {
  margin: 0;
  font-size: 0.82rem;
  color: var(--colore-testo-tenue);
}

/* --- Home: la tavola accesa ----------------------------------------------- */

.apertura {
  display: grid;
  gap: var(--passo-4);
  padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 4rem);
}

.apertura__numeri b {
  font-weight: 500;
  color: var(--colore-testo);
}

.apertura__titolo {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(2.4rem, 1.6rem + 5vw, 5.6rem);
}

.apertura__titolo em {
  font-style: italic;
  font-weight: 300;
  color: var(--colore-accento);
}

.apertura__lede {
  font-size: 1.12em;
  color: var(--colore-testo-tenue);
}

.apertura__cue {
  display: inline-flex;
  align-items: center;
  gap: var(--passo-2);
  margin: 0;
  font-family: var(--font-dati);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--colore-testo-tenue);
}

.apertura__cue::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--colore-accento);
}

/* Due colonne: il palco a sinistra resta fermo, i passi a destra scorrono.
 * Su telefono il palco si fissa in alto, compatto, e i passi gli scorrono
 * sotto. */
.scena {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

.palco {
  position: sticky;
  top: 0;
  display: grid;
  gap: var(--passo-3);
  padding-block: var(--passo-3);
  background: var(--colore-fondo);
}

.palco__lettura {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--passo-2) var(--passo-4);
  margin: 0;
  max-width: none;
  min-height: 3.4rem;
  font-family: var(--font-dati);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--colore-testo-tenue);
}

.palco__anno {
  font-family: var(--font-titoli);
  font-variation-settings: "opsz" 144;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--colore-accento);
  transition: color 0.5s ease;
}

.palco__conta b {
  font-weight: 500;
  color: var(--colore-testo);
}

.palco__ultimo {
  color: var(--colore-testo);
}

/* La tavola del palco è la stessa griglia della pagina della tavola, senza
 * larghezza minima: qui deve stare nella colonna, e su telefono nei 390 px.
 * Le caselle spente hanno un rilievo appena percettibile nel buio, e si
 * accendono con un ritardo crescente in ordine cronologico. */
.tavola--palco {
  min-width: 0;
  grid-template-columns: repeat(18, minmax(0, 1fr));
  grid-template-rows: repeat(7, auto) 0.5rem repeat(2, auto);
  gap: 3px;
}

.tavola--palco .casella .casella__corpo {
  padding: 1px;
  border: 1px solid transparent;
  transition:
    background-color 0.55s ease,
    border-color 0.55s ease,
    color 0.45s ease,
    box-shadow 0.6s ease,
    opacity 0.45s ease;
  transition-delay: var(--ritardo, 0ms);
}

.tavola--palco .casella__numero {
  font-size: clamp(0.4rem, 0.6vw, 0.55rem);
}

.tavola--palco .casella__simbolo {
  font-size: clamp(0.55rem, 1.05vw, 0.95rem);
  font-weight: 500;
}

/* Nel palco «spenta» non è trasparenza ma buio: la casella conserva il posto
 * e perde il colore. */
.tavola--palco .casella--spenta .casella__corpo {
  opacity: 1;
  background: var(--colore-spenta);
  border-color: var(--colore-spenta-bordo);
}

.tavola--palco .casella--spenta .casella__simbolo,
.tavola--palco .casella--spenta .casella__numero {
  color: transparent;
}

.tavola--palco .casella--ultima .casella__corpo {
  box-shadow:
    0 0 0 2px var(--epoca-testo),
    0 0 22px color-mix(in oklab, var(--epoca-testo) 50%, transparent);
}

.striscia {
  display: grid;
  grid-template-columns: repeat(118, 1fr);
  gap: 1px;
  height: 14px;
  align-items: end;
}

.tacca {
  display: block;
  height: 6px;
  border-radius: 1px;
  background: var(--epoca-testo);
  opacity: 0.9;
  transition:
    opacity 0.4s ease,
    height 0.4s ease;
}

.tacca--spenta {
  opacity: 0.18;
}

.tacca--ultima {
  height: 14px;
}

.striscia__estremi {
  display: flex;
  justify-content: space-between;
  gap: var(--passo-3);
  color: var(--colore-testo-tenue);
  font-weight: 400;
}

.passi {
  display: grid;
  padding-block: 10vh 30vh;
}

.passo {
  display: grid;
  align-content: center;
  gap: var(--passo-3);
  min-height: 78vh;
  max-width: 42ch;
  transition: opacity 0.5s ease;
}

.passo h2 {
  margin: 0;
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem);
  font-variation-settings: "opsz" 96;
}

.passo h2 a {
  color: inherit;
  text-decoration: none;
}

.passo h2 a:hover {
  text-decoration: underline;
  text-decoration-color: var(--epoca-testo);
}

.passo p {
  margin: 0;
  color: var(--colore-testo-tenue);
}

.passo__occhiello {
  display: flex;
  align-items: center;
  gap: var(--passo-2);
  font-family: var(--font-dati);
  font-variant-numeric: tabular-nums;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--epoca-testo, var(--colore-testo-tenue));
}

.passo__pallino {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--epoca-testo);
  box-shadow: 0 0 10px var(--epoca-testo);
}

/* Solo quando lo script governa la pagina i passi non attivi si attenuano:
 * senza script sono tutti attivi, e tutti leggibili. */
.tavola--viva ~ .passi .passo:not(.passo--attivo) {
  opacity: 0.5;
}

.porte h2 {
  font-size: 1.2rem;
  font-variation-settings: "opsz" 40;
}

.porte__voci {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--passo-4) var(--passo-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.porta {
  padding-top: var(--passo-3);
  border-top: 1px solid var(--colore-bordo);
}

.porta h3 {
  margin: 0 0 var(--passo-2);
  font-size: 1.25rem;
}

.porta h3 a {
  color: var(--colore-testo);
  text-decoration: none;
}

.porta h3 a:hover {
  color: var(--colore-accento);
}

.porta p {
  margin: 0;
  font-size: 0.95em;
  color: var(--colore-testo-tenue);
}

@media (max-width: 860px) {
  .scena {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .palco {
    z-index: 2;
    gap: var(--passo-2);
    padding-block: var(--passo-2) var(--passo-3);
    background: linear-gradient(var(--colore-fondo) 88%, transparent);
  }

  .palco__lettura {
    min-height: 0;
    gap: var(--passo-2) var(--passo-3);
  }

  .palco__anno {
    font-size: 1.8rem;
  }

  .palco__ultimo,
  .striscia__estremi {
    display: none;
  }

  .tavola--palco {
    gap: 2px;
    grid-template-rows: repeat(7, auto) 0.3rem repeat(2, auto);
  }

  .tavola--palco .casella__numero {
    display: none;
  }

  .passi {
    padding-block: 4vh 20vh;
  }

  .passo {
    min-height: 60vh;
  }
}

/* --- Ricerca -------------------------------------------------------------- */

/* Allineata alla testata, sulla larghezza piena, e discreta: è un comando a
 * disposizione, non l'apertura della pagina. */
.ricerca {
  position: relative;
  max-width: var(--larghezza-piena);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--passo-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--passo-2) var(--passo-3);
}

.ricerca__etichetta {
  font-family: var(--font-dati);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colore-testo-tenue);
}

.ricerca input[type="search"] {
  flex: 1 1 16rem;
  max-width: 28rem;
  min-height: 44px;
  padding: var(--passo-2) var(--passo-3);
  background: var(--colore-superficie);
  color: var(--colore-testo);
  border: 1px solid var(--colore-bordo);
  border-radius: 999px;
  font-family: var(--font-testo);
  font-size: 0.95rem;
}

.ricerca input[type="search"]:focus {
  border-color: var(--colore-accento);
  outline: none;
}

.esiti {
  position: absolute;
  z-index: 10;
  top: 100%;
  left: var(--gutter);
  right: var(--gutter);
  max-width: 40rem;
  margin: 0;
  padding: 0;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--colore-fondo);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  list-style: none;
  box-shadow: 0 6px 18px rgb(0 0 0 / 12%);
}

.esito {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--passo-2);
  border-bottom: 1px solid var(--colore-bordo);
}

.esito:last-child {
  border-bottom: none;
}

.esito a {
  flex: 1;
  /* 44px di bersaglio: l'intera riga è cliccabile, non solo il testo. */
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: var(--passo-2) var(--passo-3);
  font-family: var(--font-titoli);
  text-decoration: none;
}

.esito a:hover,
.esito a:focus-visible {
  background: var(--colore-superficie);
}

.esito__tipo {
  padding-right: var(--passo-3);
  font-family: var(--font-titoli);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--colore-testo-tenue);
}

.esito--vuoto {
  padding: var(--passo-3);
  font-family: var(--font-titoli);
  font-size: 0.85rem;
  color: var(--colore-testo-tenue);
}

/* --- Indici ---------------------------------------------------------------- */

.conteggio {
  font-family: var(--font-dati);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--colore-testo-tenue);
}

.elenco-nomi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0 var(--passo-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--passo-2);
  border-bottom: 1px solid var(--colore-bordo);
}

.nome a {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 40px;
  font-family: var(--font-titoli);
  font-size: 0.92rem;
  text-decoration: none;
}

.nome__quanti {
  font-family: var(--font-dati);
  font-size: 0.75rem;
  color: var(--colore-testo-tenue);
}

.porta h2 {
  margin: 0 0 var(--passo-1);
  font-size: 1.15rem;
}

.porta h2 a {
  color: var(--epoca-testo, var(--colore-accento));
  text-decoration: none;
}