/* La neve che sale — stile */
:root{
  --testo: 19px;
  --colonna: 38rem;
  --carta:#f7f5f0;
  --inchiostro:#262e36;
  --attenuato:#707a85;
  --filo:#d8d4cc;
  --accento:#48657f;
  --lume:#b98a1e;
  --fiocco:rgba(110,120,130,.55);
  --pannello:#fffdf9;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme=chiaro]){
    --carta:#10141b; --inchiostro:#d5d8dd; --attenuato:#86909c;
    --filo:#262d37; --accento:#9db4c8; --lume:#e8c272;
    --fiocco:rgba(220,228,236,.5); --pannello:#171c25;
  }
}
:root[data-theme=scuro]{
  --carta:#10141b; --inchiostro:#d5d8dd; --attenuato:#86909c;
  --filo:#262d37; --accento:#9db4c8; --lume:#e8c272;
  --fiocco:rgba(220,228,236,.5); --pannello:#171c25;
}

*{box-sizing:border-box}
html{font-size:var(--testo)}
body{
  margin:0; background:var(--carta); color:var(--inchiostro);
  font-family:"Lora", Georgia, "Times New Roman", serif;
  line-height:1.72; text-rendering:optimizeLegibility;
  transition:background .4s ease, color .4s ease;
}
.pagina{max-width:var(--colonna); margin:0 auto; padding:0 1.25rem 5rem; position:relative; z-index:1}
a{color:var(--accento); text-decoration:none}
a:hover{text-decoration:underline}

/* --- capitolo --- */
.testata{margin:4.5rem 0 3rem; text-align:center}
.torna{display:inline-block; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--attenuato); margin-bottom:2.6rem}
.parte{font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--attenuato); margin:0 0 .4rem}
.etichetta{font-size:.85rem; font-style:italic; color:var(--attenuato); margin:0}
h1{font-weight:500; font-size:1.9rem; margin:.35rem 0 0; line-height:1.25}
.testata::after{content:""; display:block; width:3.2rem; height:1px; background:var(--filo); margin:2.2rem auto 0}

article p{margin:0 0 1.15em; text-align:justify; hyphens:auto; -webkit-hyphens:auto}
article p:first-of-type{text-indent:0}
.respiro article p{margin-bottom:2.5em}  /* cap. 15: la pagina respira male, come lui */
.frammento{color:color-mix(in srgb, var(--inchiostro) 82%, var(--attenuato)); }

/* --- navigazione --- */
.piede{display:flex; align-items:stretch; gap:1rem; margin-top:4rem; padding-top:1.6rem; border-top:1px solid var(--filo)}
.nav-cap{display:flex; flex-direction:column; gap:.2rem; flex:1; min-width:0}
.nav-next{text-align:right; align-items:flex-end}
.nav-label{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--attenuato)}
.nav-titolo{font-style:italic; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%}
.nav-indice{align-self:center; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--attenuato)}
.nav-vuoto{flex:1}
.conta{text-align:center; font-size:.75rem; color:var(--attenuato); margin-top:2.2rem}

/* --- barra di avanzamento --- */
#progresso{position:fixed; top:0; left:0; height:2px; width:0; background:var(--accento); z-index:10; transition:width .1s linear}

/* --- copertina / indice --- */
.cielo{min-height:62vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding-top:3rem}
.cielo h1{font-size:clamp(2.3rem, 7vw, 3.4rem); font-weight:500; letter-spacing:.01em}
.genere{font-size:.8rem; letter-spacing:.3em; text-transform:uppercase; color:var(--attenuato); margin:.8rem 0 0}
.autore{font-style:italic; color:var(--attenuato); margin:.6rem 0 0}
.montagna{width:min(34rem, 86vw); height:90px; color:var(--filo); margin-top:3.2rem; overflow:visible}
.lume{fill:var(--lume); }
:root[data-theme=scuro] .lume, html:not([data-theme=chiaro]) .lume{filter:drop-shadow(0 0 4px var(--lume))}
:root[data-theme=chiaro] .lume{filter:none}

#riprendi{margin:2.5rem 0 0}
#riprendi a{display:block; border:1px solid var(--filo); border-radius:6px; padding:.9rem 1.2rem; text-align:center}
#riprendi a:hover{text-decoration:none; border-color:var(--accento)}
.r-label{display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--attenuato)}
.r-titolo{display:block; font-style:italic; margin-top:.25rem}

.indice{margin-top:3.5rem}
.parte-indice h2{font-size:.82rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:var(--attenuato); border-bottom:1px solid var(--filo); padding-bottom:.5rem; margin:2.6rem 0 1rem}
.parte-indice ol{list-style:none; margin:0; padding:0}
.parte-indice li{display:flex; gap:1rem; align-items:baseline; padding:.34rem 0}
.parte-indice .n{font-size:.8rem; color:var(--attenuato); min-width:1.4rem; text-align:right; font-variant-numeric:tabular-nums}
.colofone{margin-top:4.5rem; text-align:center; font-style:italic; font-size:.88rem; color:var(--attenuato)}

/* --- pannello impostazioni --- */
#apri-impostazioni{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:20;
  width:2.7rem; height:2.7rem; border-radius:50%;
  border:1px solid var(--filo); background:var(--pannello); color:var(--inchiostro);
  font-family:inherit; font-size:1rem; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.08);
}
#impostazioni{
  position:fixed; right:1.1rem; bottom:4.4rem; z-index:20;
  background:var(--pannello); border:1px solid var(--filo); border-radius:10px;
  padding:1rem 1.1rem; width:16.5rem; box-shadow:0 6px 24px rgba(0,0,0,.14);
  font-size:.85rem;
}
#impostazioni .riga{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.35rem 0}
#impostazioni .riga>span{color:var(--attenuato)}
.gruppo{display:flex; gap:.3rem}
.gruppo button{
  font-family:inherit; font-size:.8rem; cursor:pointer;
  border:1px solid var(--filo); background:transparent; color:var(--inchiostro);
  border-radius:5px; padding:.25rem .55rem;
}
.gruppo button.attivo{border-color:var(--accento); color:var(--accento)}

/* --- neve --- */
#neve{position:fixed; inset:0; z-index:0; pointer-events:none}

@media print{
  #progresso,#apri-impostazioni,#impostazioni,.piede,.torna,#neve{display:none !important}
  body{background:#fff; color:#000}
}
@media (max-width:560px){
  article p{text-align:left; hyphens:none}
}