/* ══════════════════════════════════════════════════════════════
   BIBLIOTECA TRADIZIONE E SCIENZA — «La Volta Stellata»
   Sistema visivo v2 — due temi: Notte (default) e Pergamena.
   Tutte le animazioni rispettano prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════ */

/* ---------- 1. Design tokens ---------- */
:root {
  --font-display: "Cormorant Garamond", "Palatino", Georgia, serif;
  --font-ui: "Inter", -apple-system, "Segoe UI", sans-serif;

  /* colori per tipo di voce (costanti nei due temi) */
  --c-macrotema: #d9b45b;
  --c-autore:    #e06b7d;
  --c-libro:     #6fa8e8;
  --c-scuola:    #57c39a;
  --c-concetto:  #a98be8;
  --c-sacro:     #e8985a;
  --c-hub:       #8fa3c0;

  --transizione: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-theme="notte"] {
  color-scheme: dark;
  --sfondo: #060911;
  --sfondo-alto: #0a1020;
  --carta: rgba(17, 24, 42, 0.62);
  --carta-solida: #0e1526;
  --velo: rgba(255, 255, 255, 0.045);
  --rigo: rgba(217, 180, 91, 0.16);
  --rigo-forte: rgba(217, 180, 91, 0.38);
  --inchiostro: #e9e4d6;
  --inchiostro-2: #b9b2a0;
  --inchiostro-3: #7e7969;
  --oro: #d9b45b;
  --oro-chiaro: #f2dc96;
  --oro-fuoco: #f5c356;
  --alone: rgba(217, 180, 91, 0.35);
  --nebbia-1: rgba(64, 62, 150, 0.16);
  --nebbia-2: rgba(120, 52, 110, 0.10);
  --ombra: 0 18px 50px rgba(0, 0, 0, 0.55);
  --header-fondo: rgba(6, 9, 17, 0.72);
}

html[data-theme="pergamena"] {
  color-scheme: light;
  --sfondo: #f4eddd;
  --sfondo-alto: #efe5cf;
  --carta: rgba(255, 253, 246, 0.82);
  --carta-solida: #fffdf6;
  --velo: rgba(60, 42, 10, 0.05);
  --rigo: rgba(122, 91, 30, 0.22);
  --rigo-forte: rgba(122, 91, 30, 0.45);
  --inchiostro: #241d10;
  --inchiostro-2: #5b5240;
  --inchiostro-3: #8d8471;
  --oro: #8a6b1f;
  --oro-chiaro: #6e5314;
  --oro-fuoco: #a2790f;
  --alone: rgba(138, 107, 31, 0.25);
  --nebbia-1: rgba(202, 176, 118, 0.25);
  --nebbia-2: rgba(226, 196, 152, 0.20);
  --ombra: 0 14px 40px rgba(96, 70, 20, 0.16);
  --header-fondo: rgba(244, 237, 221, 0.8);
}

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sfondo);
  color: var(--inchiostro);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.container { max-width: 76rem; margin: 0 auto; padding: 0 1.4rem; }
a { color: var(--oro-chiaro); text-decoration: none; }
::selection { background: var(--oro); color: #14100a; }

/* transizione di vista fra pagine (View Transitions API) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-esci 0.28s ease both; }
::view-transition-new(root) { animation: vt-entra 0.42s ease both; }
@keyframes vt-esci  { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(10px); } }

/* fallback: dissolvenza all'ingresso */
main { animation: pagina-entra 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes pagina-entra { from { opacity: 0; transform: translateY(12px); } }

/* ---------- 3. Cielo: stelle e nebulose ---------- */
#stelle {
  position: fixed; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  pointer-events: none;
}
.nebbia {
  position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 38% at 18% 8%,  var(--nebbia-1), transparent 70%),
    radial-gradient(45% 40% at 85% 90%, var(--nebbia-2), transparent 70%),
    radial-gradient(30% 26% at 75% 15%, var(--nebbia-2), transparent 70%);
  animation: nebbia-respiro 26s ease-in-out infinite alternate;
}
@keyframes nebbia-respiro {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); opacity: 0.9; }
  to   { transform: translate3d(1.5%, 1.5%, 0) scale(1.06); opacity: 1; }
}
html[data-theme="pergamena"] #stelle { opacity: 0.25; }

/* ---------- 4. Barra di progresso lettura ---------- */
#progresso {
  position: fixed; top: 0; left: 0; height: 2.5px; width: 0;
  z-index: 90;
  background: linear-gradient(90deg, var(--oro), var(--oro-fuoco), var(--oro-chiaro));
  box-shadow: 0 0 12px var(--alone);
  transition: width 0.08s linear;
}

/* ---------- 5. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  background: var(--header-fondo);
  border-bottom: 1px solid var(--rigo);
  transition: box-shadow var(--transizione);
}
.site-header.ombra { box-shadow: 0 8px 30px rgba(0,0,0,0.25); }
.header-inner {
  display: flex; align-items: center; gap: 1.1rem;
  min-height: 4rem;
}
.logo {
  display: flex; align-items: center; gap: 0.6rem;
  color: var(--inchiostro); flex-shrink: 0;
}
.logo-sigillo {
  width: 2.1rem; height: 2.1rem; color: var(--oro);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.logo:hover .logo-sigillo { transform: rotate(180deg); }
.logo-testo {
  display: flex; flex-direction: column; line-height: 1.15;
  font-family: var(--font-display); font-size: 0.82rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--inchiostro-2);
}
.logo-testo strong {
  font-size: 1.02rem; letter-spacing: 0.05em; text-transform: none;
  color: var(--inchiostro); font-weight: 600;
}

.primary-nav { display: flex; gap: 0.15rem; margin-left: auto; flex-wrap: wrap; }
.primary-nav a {
  position: relative; padding: 0.4rem 0.65rem; border-radius: 8px;
  font-size: 0.86rem; font-weight: 500; color: var(--inchiostro-2);
  transition: color var(--transizione), background var(--transizione);
}
.primary-nav a::after {
  content: ""; position: absolute; left: 0.65rem; right: 0.65rem; bottom: 0.18rem;
  height: 1px; background: var(--oro);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--transizione);
}
.primary-nav a:hover { color: var(--inchiostro); background: var(--velo); }
.primary-nav a:hover::after { transform: scaleX(1); }

/* Menù a tendina "Biblioteca" */
.nav-gruppo { position: relative; }
.nav-gruppo-capo { display: inline-flex; align-items: center; gap: 0.28rem; }
.nav-caret { width: 0.72rem; height: 0.72rem; opacity: 0.7; transition: transform var(--transizione); }
.nav-gruppo:hover .nav-caret, .nav-gruppo:focus-within .nav-caret { transform: rotate(180deg); }
.nav-menu {
  position: absolute; top: calc(100% + 0.35rem); left: 0; min-width: 12.5rem;
  display: none; flex-direction: column; gap: 0.1rem; padding: 0.4rem;
  background: var(--header-fondo); backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--rigo); border-radius: 12px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.34); z-index: 60;
}
.nav-gruppo:hover .nav-menu, .nav-gruppo:focus-within .nav-menu { display: flex; }
.nav-menu a { white-space: nowrap; }
.nav-menu a::after { display: none; }

.header-azioni { display: flex; align-items: center; gap: 0.55rem; }
.azione-cerca {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.42rem 0.7rem; border-radius: 10px;
  border: 1px solid var(--rigo); background: var(--velo);
  color: var(--inchiostro-2); font-family: var(--font-ui); font-size: 0.82rem;
  cursor: pointer; transition: border-color var(--transizione), color var(--transizione), box-shadow var(--transizione);
}
.azione-cerca:hover { border-color: var(--rigo-forte); color: var(--inchiostro); box-shadow: 0 0 16px var(--alone); }
.azione-cerca svg { width: 0.95rem; height: 0.95rem; }
.azione-cerca kbd, .palette kbd {
  font-family: var(--font-ui); font-size: 0.68rem;
  padding: 0.1rem 0.35rem; border-radius: 5px;
  border: 1px solid var(--rigo); color: var(--inchiostro-3); background: transparent;
}
.azione-icona {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: 10px; border: 1px solid var(--rigo); background: var(--velo);
  color: var(--inchiostro-2); cursor: pointer;
  transition: border-color var(--transizione), color var(--transizione), transform var(--transizione);
}
.azione-icona:hover { border-color: var(--rigo-forte); color: var(--oro); transform: translateY(-1px); }
.azione-icona svg { width: 1.05rem; height: 1.05rem; }
html[data-theme="notte"] .icona-luna { display: none; }
html[data-theme="pergamena"] .icona-sole { display: none; }

.grado-switch { display: flex; gap: 0.3rem; }
.grado-punto {
  display: grid; place-items: center; width: 2rem; height: 2rem;
  border-radius: 50%; border: 1px solid var(--rigo);
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 600;
  color: var(--inchiostro-3);
  transition: all var(--transizione);
}
.grado-punto:hover { border-color: var(--rigo-forte); color: var(--inchiostro); }
.grado-punto.attivo {
  color: #14100a; background: linear-gradient(140deg, var(--oro-chiaro), var(--oro));
  border-color: transparent; box-shadow: 0 0 18px var(--alone);
}
html[data-theme="pergamena"] .grado-punto.attivo { color: #fffdf6; }

#btn-menu { display: none; }

/* ---------- 6. Palette di ricerca ---------- */
.palette { position: fixed; inset: 0; z-index: 100; }
.palette[hidden] { display: none; }
.palette-sfondo {
  position: absolute; inset: 0;
  background: rgba(3, 5, 10, 0.6); backdrop-filter: blur(6px);
  animation: sfondo-entra 0.2s ease both;
}
@keyframes sfondo-entra { from { opacity: 0; } }
.palette-pannello {
  position: relative; margin: 9vh auto 0; width: min(92vw, 37rem);
  border-radius: 18px; overflow: hidden;
  background: var(--carta-solida);
  border: 1px solid var(--rigo-forte);
  box-shadow: var(--ombra), 0 0 60px var(--alone);
  animation: pannello-entra 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes pannello-entra { from { opacity: 0; transform: translateY(-14px) scale(0.98); } }
.palette-testata {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--rigo);
}
.palette-testata svg { width: 1.1rem; height: 1.1rem; color: var(--oro); flex-shrink: 0; }
#palette-input {
  flex: 1; border: 0; outline: 0; background: transparent;
  color: var(--inchiostro); font-family: var(--font-ui); font-size: 1.02rem;
}
.palette-filtri { display: flex; gap: 0.35rem; padding: 0.6rem 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--rigo); }
.filtro {
  padding: 0.22rem 0.65rem; border-radius: 999px; font-size: 0.75rem;
  border: 1px solid var(--rigo); background: transparent; color: var(--inchiostro-2);
  cursor: pointer; transition: all var(--transizione); font-family: var(--font-ui);
}
.filtro:hover { border-color: var(--rigo-forte); color: var(--inchiostro); }
.filtro.attivo { background: var(--oro); border-color: var(--oro); color: #14100a; }
html[data-theme="pergamena"] .filtro.attivo { color: #fffdf6; }
.palette-risultati { max-height: 46vh; overflow-y: auto; padding: 0.45rem; }
.risultato {
  display: flex; align-items: baseline; gap: 0.6rem;
  padding: 0.6rem 0.75rem; border-radius: 10px; cursor: pointer;
  color: var(--inchiostro);
}
.risultato:hover, .risultato.selezionato { background: var(--velo); }
.risultato.selezionato { outline: 1px solid var(--rigo-forte); }
.risultato .titolo { font-weight: 500; }
.risultato .snippet {
  font-size: 0.78rem; color: var(--inchiostro-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.badge {
  flex-shrink: 0; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 0.14rem 0.5rem; border-radius: 999px;
  border: 1px solid currentColor; opacity: 0.95;
}
.badge.macro-tema, .badge.hub-tema { color: var(--c-macrotema); }
.badge.autore, .badge.hub-figura { color: var(--c-autore); }
.badge.libro { color: var(--c-libro); }
.badge.scuola { color: var(--c-scuola); }
.badge.concetto { color: var(--c-concetto); }
.badge.hub-simbolo { color: var(--c-hub); }
.palette-vuoto { padding: 2rem 1rem; text-align: center; color: var(--inchiostro-3); font-size: 0.9rem; }
.palette-piede {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.55rem 1.1rem; border-top: 1px solid var(--rigo);
  font-size: 0.75rem; color: var(--inchiostro-3);
}
.voce-a-caso {
  border: 0; background: transparent; color: var(--oro-chiaro);
  font-family: var(--font-ui); font-size: 0.78rem; cursor: pointer;
  transition: text-shadow var(--transizione);
}
.voce-a-caso:hover { text-shadow: 0 0 14px var(--alone); }

/* ---------- 7. Homepage ---------- */
.hero {
  position: relative; text-align: center;
  padding: clamp(4rem, 11vh, 8rem) 0 3.5rem;
}
.hero-sigillo {
  width: clamp(15rem, 36vw, 24rem); height: auto;
  position: absolute; left: 50%; top: 48%;
  transform: translate(-50%, -50%);
  color: var(--oro); opacity: 0.14; z-index: -1;
  animation: sigillo-ruota 240s linear infinite;
}
@keyframes sigillo-ruota { to { transform: translate(-50%, -50%) rotate(360deg); } }
.kicker {
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--oro);
  margin: 0 0 1.1rem;
}
.hero .kicker { animation: appari 0.8s ease 0.1s both; }
.home-title {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.6rem, 7vw, 4.8rem); line-height: 1.06;
  letter-spacing: 0.01em;
  background: linear-gradient(120deg, var(--inchiostro) 20%, var(--oro-chiaro) 50%, var(--inchiostro) 80%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: appari 0.9s ease 0.22s both, oro-scorre 9s linear 1.2s infinite;
}
@keyframes oro-scorre { to { background-position: -220% center; } }
.home-title em { font-style: italic; font-weight: 500; }
.home-tagline {
  max-width: 44rem; margin: 1.4rem auto 0;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--inchiostro-2);
  animation: appari 0.9s ease 0.38s both;
}
@keyframes appari { from { opacity: 0; transform: translateY(16px); } }

.hero-statistiche {
  display: flex; justify-content: center; gap: clamp(1.5rem, 5vw, 4rem);
  margin-top: 3rem; flex-wrap: wrap;
  animation: appari 0.9s ease 0.55s both;
}
.stat { text-align: center; }
.stat .numero {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem); color: var(--oro-chiaro); line-height: 1.1;
  text-shadow: 0 0 24px var(--alone);
}
.stat .etichetta {
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--inchiostro-3);
}

.divisorio {
  display: flex; align-items: center; gap: 1rem;
  margin: 3.5rem auto; max-width: 30rem; color: var(--oro);
}
.divisorio::before, .divisorio::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rigo-forte));
}
.divisorio::after { background: linear-gradient(90deg, var(--rigo-forte), transparent); }
.divisorio svg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }

.home-section { margin: 4.2rem 0; }
.home-section > h2, .sezione-titolo {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 0.4rem;
  color: var(--inchiostro);
}
.section-intro { max-width: 46rem; color: var(--inchiostro-2); margin: 0 0 1.8rem; font-size: 0.95rem; }

/* Card */
.card-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.card {
  position: relative; display: flex; flex-direction: column; gap: 0.4rem;
  padding: 1.3rem 1.3rem 1.15rem; border-radius: 14px;
  background: var(--carta); border: 1px solid var(--rigo);
  color: var(--inchiostro); overflow: hidden;
  backdrop-filter: blur(8px);
  transition: transform var(--transizione), border-color var(--transizione), box-shadow var(--transizione);
  will-change: transform;
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background:
    radial-gradient(24rem 10rem at var(--mx, 50%) var(--my, 0%), var(--alone), transparent 65%);
  opacity: 0; transition: opacity var(--transizione); pointer-events: none;
}
.card:hover { transform: translateY(-4px); border-color: var(--rigo-forte); box-shadow: var(--ombra); }
.card:hover::before { opacity: 0.5; }
.card strong { font-family: var(--font-display); font-size: 1.18rem; font-weight: 600; line-height: 1.3; }
.card .card-meta { font-size: 0.76rem; color: var(--inchiostro-3); }
.card .badge { align-self: flex-start; margin-bottom: 0.2rem; }

.author-list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.author-item {
  padding: 0.5rem 1rem; border-radius: 999px;
  border: 1px solid var(--rigo); background: var(--carta);
  color: var(--inchiostro); font-family: var(--font-display); font-size: 1.02rem;
  transition: all var(--transizione);
}
.author-item:hover {
  border-color: var(--c-autore); color: var(--c-autore);
  box-shadow: 0 0 18px rgba(224, 107, 125, 0.25); transform: translateY(-2px);
}

.stat-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.8rem; }
.stat-list a {
  display: block; padding: 0.7rem 1.2rem; border-radius: 12px;
  border: 1px solid var(--rigo); background: var(--carta); color: var(--inchiostro-2);
  transition: all var(--transizione);
}
.stat-list a:hover { border-color: var(--rigo-forte); color: var(--inchiostro); transform: translateY(-2px); }
.stat-list strong { color: var(--oro-chiaro); font-family: var(--font-display); font-size: 1.25rem; margin-right: 0.3rem; }

.prose-invito {
  border-left: 2px solid var(--oro); padding-left: 1.4rem;
  max-width: 46rem; color: var(--inchiostro-2);
}

/* Rivelazione allo scorrimento */
.rivela { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.rivela.visibile { opacity: 1; transform: none; }

/* ---------- 8. Pagina voce ---------- */
.pagina-con-indice { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
@media (min-width: 64rem) {
  .pagina-con-indice.ha-indice { grid-template-columns: minmax(0, 1fr) 15rem; }
}
.page { max-width: 46rem; margin: 2.8rem auto 4rem; }
.pagina-con-indice .page { margin-left: auto; margin-right: auto; width: 100%; }
.page h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.12; margin: 0.2rem 0 0.8rem;
}
.page .meta {
  color: var(--inchiostro-3); font-size: 0.85rem;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center;
  padding-bottom: 1.4rem; border-bottom: 1px solid var(--rigo); margin-bottom: 2rem;
}
.meta .badge { text-transform: uppercase; }

.prose { font-size: 1.05rem; }
.prose > h1:first-child { display: none; } /* il titolo è già nell'intestazione della pagina */
.prose p { margin: 0 0 1.15em; }
.prose > p:first-of-type::first-letter {
  font-family: var(--font-display); font-weight: 600;
  font-size: 3.4em; float: left; line-height: 0.82;
  padding: 0.06em 0.12em 0 0; color: var(--oro);
}
.prose h2 {
  font-family: var(--font-display); font-weight: 600; font-size: 1.7rem;
  margin: 2.2em 0 0.6em; scroll-margin-top: 5.5rem;
  padding-bottom: 0.25em; border-bottom: 1px solid var(--rigo);
}
.prose h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin: 1.8em 0 0.5em; scroll-margin-top: 5.5rem; }
.prose a { border-bottom: 1px solid var(--rigo-forte); transition: all 0.2s; }
.prose a:hover { color: var(--oro-fuoco); border-color: var(--oro-fuoco); text-shadow: 0 0 14px var(--alone); }
.prose blockquote {
  margin: 1.6em 0; padding: 0.2em 0 0.2em 1.3em;
  border-left: 2px solid var(--oro);
  font-family: var(--font-display); font-style: italic; font-size: 1.12em;
  color: var(--inchiostro-2);
}
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 1.5em 0; }
.prose th { text-align: left; font-weight: 600; color: var(--oro-chiaro); border-bottom: 1px solid var(--rigo-forte); padding: 0.5em 0.7em; }
.prose td { border-bottom: 1px solid var(--rigo); padding: 0.5em 0.7em; vertical-align: top; }
.prose code { background: var(--velo); border: 1px solid var(--rigo); border-radius: 6px; padding: 0.08em 0.35em; font-size: 0.88em; }
.prose hr { border: 0; height: 1px; background: var(--rigo); margin: 2.4em 0; }
.prose img { max-width: 100%; border-radius: 10px; }
.link-pending {
  border-bottom: 1px dashed var(--inchiostro-3); cursor: help;
  color: var(--inchiostro-2);
}

/* indice laterale (TOC) */
.indice-voce {
  position: sticky; top: 5.5rem; align-self: start;
  font-size: 0.8rem; max-height: calc(100vh - 7rem); overflow-y: auto;
  padding-left: 1rem; border-left: 1px solid var(--rigo);
  display: none;
}
@media (min-width: 64rem) { .pagina-con-indice.ha-indice .indice-voce { display: block; } }
.indice-voce .titoletto {
  font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--inchiostro-3); margin: 0 0 0.7rem;
}
.indice-voce a {
  display: block; padding: 0.22rem 0; color: var(--inchiostro-3);
  transition: color 0.2s, transform 0.2s;
}
.indice-voce a.h3 { padding-left: 0.9rem; font-size: 0.75rem; }
.indice-voce a:hover { color: var(--inchiostro); }
.indice-voce a.corrente { color: var(--oro-chiaro); transform: translateX(3px); }

/* tag e sezioni finali */
.tags { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; }
.tags-label { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--inchiostro-3); margin-right: 0.3rem; }
.tag-chip {
  font-size: 0.74rem; padding: 0.16rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--rigo); color: var(--inchiostro-2);
}

.sezione-finale { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--rigo); }
.sezione-finale h2 {
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--oro); margin: 0 0 1rem;
}
.mini-grid { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.mini-card {
  display: flex; align-items: baseline; gap: 0.55rem;
  padding: 0.65rem 0.9rem; border-radius: 10px;
  border: 1px solid var(--rigo); background: var(--carta); color: var(--inchiostro);
  font-size: 0.88rem; transition: all var(--transizione);
}
.mini-card:hover { border-color: var(--rigo-forte); transform: translateX(3px); box-shadow: 0 0 16px var(--alone); }
.mini-card .badge { font-size: 0.58rem; }

/* ---------- 9. Indici, timeline, laboratorio ---------- */
.indice-lettera {
  font-family: var(--font-display); color: var(--oro); font-size: 1.5rem;
  margin: 2rem 0 0.7rem; display: flex; align-items: center; gap: 0.9rem;
}
.indice-lettera::after { content: ""; flex: 1; height: 1px; background: var(--rigo); }
.entry-list { list-style: none; padding: 0; margin: 0; }
.entry-list li {
  padding: 0.55rem 0.2rem; border-bottom: 1px solid var(--rigo);
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: baseline;
  transition: background var(--transizione), padding-left var(--transizione);
}
.entry-list li:hover { background: var(--velo); padding-left: 0.7rem; }
.entry-list a { color: var(--inchiostro); font-weight: 500; }
.entry-list a:hover { color: var(--oro-chiaro); }
.meta-inline { color: var(--inchiostro-3); font-size: 0.8rem; }

/* timeline degli ultimi arricchimenti */
.linea-tempo { position: relative; margin: 2rem 0; padding-left: 1.6rem; list-style: none; }
.linea-tempo::before {
  content: ""; position: absolute; left: 0.28rem; top: 0.4rem; bottom: 0.4rem;
  width: 1px; background: linear-gradient(180deg, var(--oro), var(--rigo));
}
.linea-tempo li { position: relative; padding: 0.55rem 0; }
.linea-tempo li::before {
  content: ""; position: absolute; left: -1.6rem; top: 1.05rem;
  width: 0.62rem; height: 0.62rem; border-radius: 50%;
  background: var(--sfondo); border: 2px solid var(--oro);
  box-shadow: 0 0 10px var(--alone);
  transition: transform var(--transizione);
}
.linea-tempo li:hover::before { transform: scale(1.35); }
.linea-tempo time { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--inchiostro-3); display: block; }
.linea-tempo a { color: var(--inchiostro); font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }
.linea-tempo a:hover { color: var(--oro-chiaro); }

/* barre nel laboratorio */
.barra { height: 5px; border-radius: 999px; background: var(--velo); overflow: hidden; flex-basis: 8rem; }
.barra > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--oro), var(--oro-fuoco)); }

/* ---------- 10. Grafo ---------- */
.grafo-pieno { max-width: none; }
#graph-container {
  position: relative; width: 100%; height: min(74vh, 46rem);
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--rigo);
  background:
    radial-gradient(60% 55% at 30% 20%, var(--nebbia-1), transparent 70%),
    radial-gradient(50% 50% at 80% 85%, var(--nebbia-2), transparent 70%),
    var(--sfondo-alto);
  box-shadow: var(--ombra);
}
#graph-svg { width: 100%; height: 100%; display: block; cursor: grab; }
#graph-svg:active { cursor: grabbing; }
.grafo-strumenti {
  position: absolute; top: 0.9rem; left: 0.9rem; right: 0.9rem;
  display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;
  pointer-events: none;
}
.grafo-strumenti > * { pointer-events: auto; }
#grafo-cerca {
  padding: 0.45rem 0.9rem; border-radius: 10px; width: 13rem;
  border: 1px solid var(--rigo-forte); outline: none;
  background: var(--carta-solida); color: var(--inchiostro);
  font-family: var(--font-ui); font-size: 0.82rem;
}
.grafo-filtri { display: flex; gap: 0.3rem; flex-wrap: wrap; }
#graph-tooltip {
  position: absolute; pointer-events: none; z-index: 5;
  padding: 0.5rem 0.8rem; border-radius: 10px;
  background: var(--carta-solida); border: 1px solid var(--rigo-forte);
  box-shadow: var(--ombra); font-size: 0.8rem; max-width: 16rem;
  opacity: 0; transition: opacity 0.15s;
}
#graph-tooltip .tt-nome { font-family: var(--font-display); font-size: 1rem; font-weight: 600; display: block; }
#graph-tooltip .tt-info { color: var(--inchiostro-3); font-size: 0.72rem; }
.grafo-legenda {
  position: absolute; bottom: 0.9rem; left: 0.9rem;
  display: flex; gap: 0.8rem; flex-wrap: wrap;
  padding: 0.5rem 0.9rem; border-radius: 10px;
  background: var(--carta); backdrop-filter: blur(8px);
  border: 1px solid var(--rigo); font-size: 0.72rem; color: var(--inchiostro-2);
}
.legenda-punto { display: inline-flex; align-items: center; gap: 0.35rem; }
.legenda-punto i { width: 0.6rem; height: 0.6rem; border-radius: 50%; display: inline-block; }

/* ---------- 11. Footer ---------- */
.site-footer {
  margin-top: 5rem; padding: 3.4rem 0 2.6rem; text-align: center;
  border-top: 1px solid var(--rigo);
  background: linear-gradient(180deg, transparent, var(--velo));
}
.footer-tetractys { width: 4.2rem; color: var(--oro); opacity: 0.8; margin-bottom: 1.1rem; }
.footer-tetractys circle { animation: tetractys-brilla 4.5s ease-in-out infinite; }
.footer-tetractys circle:nth-child(2n) { animation-delay: 1.4s; }
.footer-tetractys circle:nth-child(3n) { animation-delay: 2.6s; }
@keyframes tetractys-brilla { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.footer-motto { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--inchiostro-2); margin: 0 0 0.8rem; }
.footer-text { margin: 0.2rem 0; font-size: 0.85rem; color: var(--inchiostro-2); }
.footer-small { margin: 0.2rem 0 0; font-size: 0.74rem; color: var(--inchiostro-3); }

/* ---------- 11b. Il Tempio: rito di apertura ---------- */
#apertura {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  cursor: pointer;
}
.porta {
  position: absolute; top: 0; bottom: 0; width: 50.5%; z-index: 1;
  background:
    linear-gradient(180deg, #05070f 0%, #0a0f1e 55%, #05070f 100%);
  transition: transform 1.15s cubic-bezier(0.65, 0, 0.35, 1);
}
.apertura-scena { z-index: 2; }
.porta.sx { left: 0; border-right: 1px solid var(--rigo-forte); box-shadow: inset -40px 0 80px rgba(0,0,0,0.5); }
.porta.dx { right: 0; border-left: 1px solid var(--rigo-forte); box-shadow: inset 40px 0 80px rgba(0,0,0,0.5); }
#apertura.chiusa .porta.sx { transform: translateX(-102%); }
#apertura.chiusa .porta.dx { transform: translateX(102%); }
#apertura.chiusa { pointer-events: none; }
#apertura.chiusa .apertura-scena { opacity: 0; transition: opacity 0.45s ease; }

.apertura-scena { position: relative; text-align: center; color: var(--oro); }
.sq-comp { width: clamp(11rem, 30vw, 15rem); height: auto; stroke: currentColor; overflow: visible; }
.sq-comp .ap-cerchio, .sq-comp .ap-compasso, .sq-comp .ap-squadra {
  stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.ap-cerchio  { animation: ap-traccia 1.1s cubic-bezier(0.6, 0, 0.3, 1) 0.15s forwards; }
.ap-compasso { animation: ap-traccia 0.8s cubic-bezier(0.6, 0, 0.3, 1) 0.9s forwards; }
.ap-compasso.c2 { animation-delay: 1.05s; }
.ap-squadra  { animation: ap-traccia 0.8s cubic-bezier(0.6, 0, 0.3, 1) 1.5s forwards; }
@keyframes ap-traccia { to { stroke-dashoffset: 0; } }
.ap-perno { fill: currentColor; opacity: 0; animation: ap-appare 0.4s ease 0.95s forwards; }
.ap-g {
  font-family: var(--font-display); font-size: 2.5rem; font-weight: 600;
  fill: var(--oro-chiaro); stroke: none; opacity: 0;
  animation: ap-g-accende 0.9s ease 2.15s forwards;
}
@keyframes ap-appare { to { opacity: 1; } }
@keyframes ap-g-accende {
  from { opacity: 0; }
  60%  { opacity: 1; }
  to   { opacity: 1; filter: drop-shadow(0 0 14px var(--alone)); }
}
.apertura-motto {
  margin: 1.6rem 0 0.3rem; font-family: var(--font-ui);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.5em; text-indent: 0.5em;
  color: var(--oro-chiaro); opacity: 0;
  animation: ap-appare 0.9s ease 2.6s forwards;
}
.apertura-frase {
  margin: 0.4rem 0 0; font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.1rem, 2.6vw, 1.5rem); color: var(--inchiostro, #e9e4d6); opacity: 0;
  animation: ap-appare 1s ease 3.1s forwards;
}
html[data-theme="pergamena"] .apertura-frase { color: #e9e4d6; }
.apertura-salta {
  margin-top: 2.2rem; font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(233, 228, 214, 0.4); opacity: 0;
  animation: ap-appare 1s ease 3.6s forwards;
}

/* ---------- 11c. Il Tempio: colonne, pavimento, stella ---------- */
.colonna {
  position: absolute; bottom: 4.5rem; width: clamp(4rem, 7vw, 6rem); height: auto;
  color: var(--oro); opacity: 0.28; z-index: -1;
  animation: colonna-sorge 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}
.colonna-sx { left: clamp(0.5rem, 6vw, 6rem); }
.colonna-dx { right: clamp(0.5rem, 6vw, 6rem); }
@keyframes colonna-sorge { from { opacity: 0; transform: translateY(60px); } to { opacity: 0.28; transform: none; } }
.colonna-lettera {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 600;
  fill: currentColor; stroke: none;
}
@media (max-width: 62rem) { .colonna { display: none; } }

.stella-fiammeggiante {
  position: absolute; top: 12%; right: clamp(8%, 16vw, 18%);
  width: clamp(2.6rem, 5vw, 4rem); height: auto; color: var(--oro-chiaro); z-index: -1;
  animation: stella-pulsa 5.5s ease-in-out infinite;
}
.stella-g { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; fill: currentColor; stroke: none; }
@keyframes stella-pulsa {
  0%, 100% { opacity: 0.35; filter: drop-shadow(0 0 4px var(--alone)); }
  50%      { opacity: 0.95; filter: drop-shadow(0 0 18px var(--alone)); transform: scale(1.05); }
}
@media (max-width: 62rem) { .stella-fiammeggiante { top: 6%; right: 8%; } }

.pavimento {
  position: absolute; left: 50%; bottom: -1.5rem; transform: translateX(-50%) perspective(420px) rotateX(58deg);
  transform-origin: center bottom;
  width: min(64rem, 96vw); height: 9.5rem; z-index: -1;
  background:
    repeating-conic-gradient(from 0deg, var(--rigo) 0deg 90deg, transparent 90deg 180deg);
  background-size: 3.4rem 3.4rem;
  -webkit-mask-image: radial-gradient(70% 100% at 50% 100%, rgba(0,0,0,0.55), transparent 78%);
  mask-image: radial-gradient(70% 100% at 50% 100%, rgba(0,0,0,0.55), transparent 78%);
  animation: pavimento-emerge 1.8s ease 0.9s both;
}
@keyframes pavimento-emerge { from { opacity: 0; } }

/* tocco rituale sui kicker di sezione */
.home-section .kicker { letter-spacing: 0.36em; }
.kicker::after { content: " ∴"; color: var(--oro); opacity: 0.8; }
.hero .kicker::after { content: ""; }

.footer-chiusura {
  margin: 0.9rem 0 0.4rem; font-family: var(--font-display); font-style: italic;
  font-size: 0.92rem; color: var(--inchiostro-3);
}

/* ---------- 12. Responsive & movimento ---------- */
@media (max-width: 62rem) {
  .primary-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; padding: 0.8rem 1.4rem 1.2rem;
    background: var(--header-fondo); backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--rigo);
  }
  .primary-nav.aperto { display: flex; animation: pannello-entra 0.25s ease both; }
  #btn-menu { display: grid; }
  .cerca-hint, .azione-cerca kbd { display: none; }
  .azione-cerca { padding: 0.42rem 0.55rem; }
  /* Menù Biblioteca: inline (aperto) dentro il pannello mobile */
  .nav-gruppo { position: static; }
  .nav-caret { display: none; }
  .nav-gruppo-capo { font-weight: 600; }
  .nav-menu {
    display: flex; position: static; min-width: 0; padding: 0.1rem 0 0.4rem 0.9rem;
    background: transparent; border: none; box-shadow: none; backdrop-filter: none;
    border-left: 1px solid var(--rigo); margin: 0.1rem 0 0.3rem 0.35rem; border-radius: 0;
  }
  .cal-vista { display: block; }
  .cal-mese-grid { overflow-x: auto; }
}

/* ---------- 13. Calendario delle Tornate ---------- */
.cal-testata { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-content: space-between; margin-bottom: 1.4rem; }
.cal-toggle { display: inline-flex; border: 1px solid var(--rigo); border-radius: 10px; overflow: hidden; }
.cal-toggle button {
  padding: 0.45rem 0.95rem; font-family: var(--font-ui); font-size: 0.84rem; font-weight: 500;
  background: transparent; color: var(--inchiostro-2); cursor: pointer; border: none;
  transition: background var(--transizione), color var(--transizione);
}
.cal-toggle button + button { border-left: 1px solid var(--rigo); }
.cal-toggle button.attivo { background: linear-gradient(140deg, var(--oro-chiaro), var(--oro)); color: #14100a; }
html[data-theme="pergamena"] .cal-toggle button.attivo { color: #fffdf6; }
.cal-vista[hidden] { display: none; }

/* griglia mensile */
.cal-mese { margin-bottom: 2.4rem; }
.cal-mese h2 { font-size: 1.35rem; margin-bottom: 0.7rem; }
table.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.cal-grid th {
  font-family: var(--font-ui); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--inchiostro-3); font-weight: 600; padding: 0.4rem 0.3rem; text-align: left;
}
table.cal-grid td {
  vertical-align: top; height: 5.2rem; width: 14.28%; padding: 0.35rem 0.4rem;
  border: 1px solid var(--rigo); border-radius: 6px;
}
table.cal-grid td.vuota { background: transparent; border-color: transparent; }
table.cal-grid td.ha-eventi { background: var(--velo); }
.cal-giorno-num { font-family: var(--font-display); font-size: 0.95rem; color: var(--inchiostro-3); display: block; margin-bottom: 0.25rem; }
.cal-chip {
  display: block; font-size: 0.72rem; line-height: 1.25; padding: 0.18rem 0.35rem; margin-bottom: 0.2rem;
  border-radius: 5px; border-left: 3px solid var(--c-hub); background: var(--fondo-2, rgba(255,255,255,0.03));
  color: var(--inchiostro-2); overflow: hidden; text-overflow: ellipsis;
}
.cal-chip .cal-chip-tipo { display: block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--inchiostro-3); }
a.cal-chip { text-decoration: none; transition: border-left-width var(--transizione), background var(--transizione); }
a.cal-chip:hover { background: var(--velo); border-left-width: 6px; }
a.cal-tema { color: var(--inchiostro); text-decoration: none; border-bottom: 1px solid var(--rigo); }
a.cal-tema:hover { color: var(--oro); border-bottom-color: var(--oro); }

/* colori per tipo di tornata */
.t-rituale   { border-left-color: var(--c-macrotema); }
.t-informale { border-left-color: var(--c-libro); }
.t-agape     { border-left-color: var(--c-autore); }
.t-speciale  { border-left-color: var(--c-scuola); }
.t-altro     { border-left-color: var(--c-hub); }

/* vista elenco */
.cal-elenco-mese { margin-bottom: 1.8rem; }
.cal-elenco-mese h2 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.cal-riga { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: baseline; padding: 0.55rem 0.2rem; border-bottom: 1px solid var(--rigo); }
.cal-riga .cal-data { font-family: var(--font-display); font-size: 0.95rem; color: var(--oro); min-width: 4.5rem; }
.cal-riga .cal-badge { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.12rem 0.5rem; border-radius: 20px; border: 1px solid var(--rigo); color: var(--inchiostro-2); }
.cal-riga .cal-tema { flex: 1; min-width: 12rem; color: var(--inchiostro); }
.cal-legenda { display: flex; flex-wrap: wrap; gap: 0.6rem 1.1rem; margin-top: 1.4rem; font-size: 0.8rem; color: var(--inchiostro-2); }
.cal-legenda i { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 3px; margin-right: 0.35rem; vertical-align: middle; }

/* ---------- 14. Comunicazioni ---------- */
.comunicazioni-lista { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1.5rem; }
.comunicato {
  border: 1px solid var(--rigo); border-radius: 14px; padding: 1.4rem 1.6rem;
  background: var(--velo); transition: border-color var(--transizione), box-shadow var(--transizione);
}
.comunicato:hover { border-color: var(--rigo-forte); box-shadow: 0 8px 30px rgba(0,0,0,0.16); }
.comunicato-testata { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: baseline; margin-bottom: 0.7rem; }
.comunicato-testata h2 { font-size: 1.3rem; margin: 0; flex: 1; min-width: 12rem; }
.comunicato time { font-family: var(--font-ui); font-size: 0.8rem; color: var(--inchiostro-3); }
.comunicato .cal-badge { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.12rem 0.5rem; border-radius: 20px; border: 1px solid var(--rigo); color: var(--oro); }
.comunicato-corpo { color: var(--inchiostro-2); line-height: 1.7; }
.comunicato-corpo p { margin: 0 0 0.7rem; }
.sezione-vuota { text-align: center; padding: 3rem 1rem; color: var(--inchiostro-3); font-style: italic; }

/* ---------- 15. Panoramica Biblioteca ---------- */
.biblio-sezioni { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.1rem; margin: 1.8rem 0 2.4rem; }
.biblio-portale {
  display: block; padding: 1.3rem 1.4rem; border: 1px solid var(--rigo); border-radius: 14px;
  background: var(--velo); transition: border-color var(--transizione), transform var(--transizione), box-shadow var(--transizione);
}
.biblio-portale:hover { border-color: var(--rigo-forte); transform: translateY(-2px); box-shadow: 0 10px 34px rgba(0,0,0,0.18); }
.biblio-portale .num { font-family: var(--font-display); font-size: 2rem; color: var(--oro); display: block; line-height: 1; }
.biblio-portale strong { display: block; margin: 0.4rem 0 0.2rem; font-size: 1.05rem; color: var(--inchiostro); }
.biblio-portale span.desc { font-size: 0.82rem; color: var(--inchiostro-3); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .rivela { opacity: 1; transform: none; }
}

/* ---------- 16. Ottimizzazione telefoni (agg. 2026-07-12) ---------- */
html { overflow-x: hidden; }

/* Header compatto su telefono: solo il sigillo, azioni ridotte, tutto entro il bordo. */
@media (max-width: 34rem) {
  .container { padding: 0 0.9rem; }
  .header-inner { gap: 0.4rem; min-height: 3.5rem; flex-wrap: nowrap; }
  .logo { gap: 0; min-width: 0; }
  .logo-testo { display: none; }
  .logo-sigillo { width: 1.85rem; height: 1.85rem; }
  .header-azioni { gap: 0.28rem; margin-left: auto; }
  .azione-cerca { padding: 0.4rem 0.5rem; }
  .azione-icona { width: 1.95rem; height: 1.95rem; }
  .azione-icona svg { width: 1rem; height: 1rem; }
  .grado-switch { gap: 0.2rem; }
  .grado-punto { width: 1.7rem; height: 1.7rem; font-size: 0.8rem; }
}

/* Tipografia e blocchi larghi su telefono: niente parole/tabelle che sforano. */
@media (max-width: 40rem) {
  .hero { padding: 3rem 0 2.2rem; }
  .home-title, .page h1, .home-section > h2, .sezione-titolo,
  .prose h2, .prose h3 { overflow-wrap: break-word; hyphens: auto; }
  .hero-statistiche { gap: 1rem 1.6rem; margin-top: 2rem; }
  .stat .numero { font-size: 1.9rem; }
  .home-section { margin: 2.8rem 0; }
  .page { margin: 1.6rem auto 2.8rem; }
  .prose { font-size: 1.02rem; }
  .prose > p:first-of-type::first-letter { font-size: 2.7em; }
  .prose table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}