:root {
  /* colori del sito lutemilazzo.org */
  --verde-lute: #1b5e3f;
  --verde-scuro: #123f2a;
  --oro: #a8842c;
  --bianco: #ffffff;
  --fondo: #eef0ee;
  --testo: #1f2a24;
  --testo-tenue: #5f6b64;
  --pannello: #ffffff;
  --riga: #e1e6e2;
  --attivo: #e8f1ec;
  --barra-h: 56px;
  --pannello-w: 330px;
  --larghezza: 760px;
  --serif: "EB Garamond", Garamond, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #121a16;
    --testo: #e8eee9;
    --testo-tenue: #a7b5ac;
    --pannello: #18231d;
    --riga: #2a3a31;
    --attivo: #21362a;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
}
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- barra in alto */
.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  height: var(--barra-h);
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  background: var(--verde-lute);
  color: var(--bianco);
  border-bottom: 4px solid var(--oro);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.barra__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 40px; height: 40px; padding: 0 8px;
  border: 0; border-radius: 10px;
  background: transparent; color: inherit;
  font: 600 15px var(--sans);
  cursor: pointer;
}
.barra__btn:hover { background: rgba(255, 255, 255, .12); }
.barra__btn:focus-visible, .vai input:focus-visible, .elenco a:focus-visible, .zona:focus-visible {
  outline: 3px solid var(--oro); outline-offset: 2px;
}
.barra__btn--indice { background: rgba(255, 255, 255, .1); padding: 0 12px; }
.barra__titolo {
  flex: 1; min-width: 0;
  color: inherit; text-decoration: none;
  font: 600 21px var(--serif);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barra__titolo em { font-style: italic; font-weight: 500; }
.barra__nav { display: flex; align-items: center; gap: 2px; }
.vai { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.vai input {
  width: 52px; height: 34px;
  border: 0; border-radius: 8px;
  background: var(--bianco); color: var(--verde-scuro);
  font: 600 16px var(--sans); text-align: center;
}
.vai span { opacity: .85; white-space: nowrap; }
.barra__zoom { display: flex; gap: 2px; margin-left: 4px; }

/* ---------- indice laterale */
.pannello {
  position: fixed; z-index: 20;
  top: var(--barra-h); bottom: 0; left: 0;
  width: var(--pannello-w);
  display: flex; flex-direction: column;
  background: var(--pannello);
  border-right: 1px solid var(--riga);
  transition: transform .25s ease;
}
.pannello__testa {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px 20px;
  border-bottom: 1px solid var(--riga);
}
.pannello__testa h2 { margin: 0; font: 600 24px var(--serif); color: var(--verde-lute); }
@media (prefers-color-scheme: dark) { .pannello__testa h2 { color: #d8bb6f; } }
.pannello__chiudi {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 0; border-radius: 10px;
  background: transparent; color: var(--testo-tenue); cursor: pointer;
}
.pannello__chiudi:hover { background: var(--attivo); }
.elenco {
  list-style: none; margin: 0; padding: 6px 0 24px;
  overflow-y: auto; overscroll-behavior: contain;
}
.elenco a {
  display: grid; grid-template-columns: 1fr auto; column-gap: 12px;
  padding: 9px 16px 9px 20px;
  color: inherit; text-decoration: none;
  border-left: 4px solid transparent;
}
.elenco a:hover { background: var(--attivo); }
.elenco a[aria-current="true"] { background: var(--attivo); border-left-color: var(--oro); }
.voce__titolo { font: 500 17px/1.25 var(--serif); }
.voce__autore { grid-column: 1; font: italic 500 15px/1.3 var(--serif); color: var(--testo-tenue); }
.voce__pag { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 14px; color: var(--testo-tenue); font-variant-numeric: tabular-nums; }
.elenco .separa { height: 1px; margin: 8px 20px; background: var(--riga); }

.velo { position: fixed; inset: 0; z-index: 15; background: rgba(0, 0, 0, .45); }
.velo[hidden] { display: none; }

/* ---------- pagine del libro */
.libro {
  padding: calc(var(--barra-h) + 20px) 16px 40px;
  margin-left: var(--pannello-w);
  transition: margin-left .25s ease;
}
.pagina {
  position: relative;
  width: 100%; max-width: var(--larghezza);
  margin: 0 auto 18px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18), 0 6px 18px rgba(0, 0, 0, .10);
  scroll-margin-top: calc(var(--barra-h) + 12px);
}
.pagina img { display: block; width: 100%; height: auto; }
.suggerimento {
  max-width: var(--larghezza);
  margin: 0 auto 10px;
  font: italic 500 17px var(--serif); text-align: center; color: var(--testo-tenue);
}
.zona {
  position: absolute; display: block;
  border-radius: 6px;
  transition: background .15s;
}
.zona:hover, .zona:focus-visible { background: rgba(27, 94, 63, .12); box-shadow: inset 0 0 0 2px rgba(168, 132, 44, .8); }

/* indice chiuso (computer) */
body.senza-indice .pannello { transform: translateX(-100%); }
body.senza-indice .libro { margin-left: 0; }

/* ---------- telefono e tablet: l'indice si apre sopra le pagine */
@media (max-width: 1000px) {
  .libro { margin-left: 0; }
  .pannello { width: min(var(--pannello-w), 88vw); transform: translateX(-100%); box-shadow: 4px 0 20px rgba(0, 0, 0, .3); }
  body.indice-aperto .pannello { transform: none; }
  body.indice-aperto { overflow: hidden; }
  .barra__zoom { display: none; }
}
@media (max-width: 560px) {
  .barra { gap: 4px; padding: 0 6px; }
  .barra__btn--indice span { display: none; }
  .barra__btn--indice { padding: 0 8px; }
  .barra__titolo { font-size: 18px; }
  .vai label { display: none; }
  .vai input { width: 46px; }
  .libro { padding-left: 8px; padding-right: 8px; }
  .pagina { margin-bottom: 10px; }
}
@media (min-width: 1001px) {
  .pannello__chiudi { display: none; }
}

/* ---------- scelta della lingua IT / EN */
.lingue { display: flex; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .12); }
.lingue button {
  min-width: 38px; height: 32px; padding: 0 8px;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--bianco);
  font: 700 14px var(--sans); letter-spacing: .04em;
  cursor: pointer;
}
.lingue button[aria-pressed="true"] { background: var(--oro); color: var(--bianco); }
.lingue button:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
@media (max-width: 460px) {
  .barra__titolo { display: none; }
  .lingue { margin-right: auto; }
}

/* ---------- logo della LUTE nella barra, su riquadro bianco come nel sito */
.barra__titolo { display: flex; align-items: center; gap: 12px; }
.barra__logo { height: 40px; width: auto; padding: 3px 8px; background: #fff; border-radius: 8px; flex: none; }
.barra__testo { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .barra__testo { display: none; } }
@media (max-width: 460px) { .barra__titolo { display: flex; flex: none; } .lingue { margin-right: auto; } .barra__logo { height: 34px; padding: 2px 6px; } }

/* ---------- freccia "torna in cima" (compare dopo aver sfogliato un po') */
.in-cima {
  position: fixed; z-index: 25; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0;
  border: 2px solid var(--oro); border-radius: 50%;
  background: var(--verde-lute); color: var(--bianco);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
  cursor: pointer; opacity: .92;
}
.in-cima:hover { opacity: 1; background: var(--verde-scuro); }
.in-cima:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }
.in-cima[hidden] { display: none; }
.in-cima svg { width: 24px; height: 24px; stroke-width: 2.5; }
body.indice-aperto .in-cima { display: none; }