/* promessi-sposi.it — foglio di stile unico.
   1. variabili (colori, caratteri)  2. base  3. testata e piè di pagina  4. componenti  5. pagine */

/* 1. Variabili: tema chiaro e tema scuro */
:root{
  --carta:#F4F1EA; --carta-2:#EAE5DA; --inchiostro:#201C18; --inchiostro-2:#5C554C; --riga:#D2CABB;
  --lago:#2F5873; --lago-tenue:#2F587318; --rosso:#A3392B; --oro:#8A6A1F; --oro-tenue:#C9A24033;
  --titoli:"IM Fell DW Pica","Iowan Old Style",Georgia,serif;
  --testo:"Spectral",Georgia,"Times New Roman",serif;
  --ui:"Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;
}
/* tema scuro: quello del sistema, oppure quello scelto con il pulsante in testata (data-theme sul tag html) */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --carta:#15130F; --carta-2:#201C17; --inchiostro:#ECE5D6; --inchiostro-2:#A9A091; --riga:#3B342C;
  --lago:#8FB6D3; --lago-tenue:#8FB6D322; --rosso:#E2705F; --oro:#D6B25E; --oro-tenue:#D6B25E26; color-scheme:dark}}
:root[data-theme="dark"]{
  --carta:#15130F; --carta-2:#201C17; --inchiostro:#ECE5D6; --inchiostro-2:#A9A091; --riga:#3B342C;
  --lago:#8FB6D3; --lago-tenue:#8FB6D322; --rosso:#E2705F; --oro:#D6B25E; --oro-tenue:#D6B25E26; color-scheme:dark}

/* 2. Base */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px}
body{margin:0;background:var(--carta);color:var(--inchiostro);font-family:var(--testo);font-size:18px;line-height:1.6}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
img{max-width:100%;height:auto;display:block}
a{color:var(--lago);text-underline-offset:.18em}
a:hover{color:var(--rosso)}
:focus-visible{outline:2px solid var(--rosso);outline-offset:2px}
h1,h2,h3{font-family:var(--titoli);font-weight:400;line-height:1.15;text-wrap:balance;margin:0}
h1{font-size:clamp(2rem,5vw,3.2rem)}
h2{font-size:clamp(1.45rem,3vw,1.9rem);margin:2.6rem 0 .8rem}
h3{font-size:1.3rem;margin:1.8rem 0 .3rem;color:var(--lago)}
p{margin:0 0 1em}
.nascosto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.salta{position:absolute;left:-999px}.salta:focus{left:10px;top:10px;background:var(--carta);padding:8px;z-index:20}
.occhiello{font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.09em;font-size:.82rem;color:var(--rosso);margin:0 0 .5rem}
.occhiello a{color:inherit}
.sommario{font-size:1.18rem;color:var(--inchiostro-2);max-width:62ch;margin:.8rem 0 0}
.nota-piccola{font-family:var(--ui);font-size:.95rem;color:var(--inchiostro-2);max-width:75ch}
.capo{padding:2rem 0 1.4rem}
.prosa{max-width:70ch}
.prosa blockquote,.frase-pagina blockquote{margin:1.2rem 0;padding:.2rem 0 .2rem 1.1rem;border-left:3px solid var(--oro);font-style:italic}
blockquote footer{font-style:normal;font-family:var(--ui);font-size:.95rem;margin-top:.4rem}
.rinvio{white-space:nowrap}

/* 3. Testata, briciole, piè di pagina */
.testata{border-bottom:1px solid var(--riga);background:var(--carta);position:sticky;top:0;z-index:10}
.testata .wrap{display:flex;align-items:center;gap:18px;min-height:56px}
.marchio{font-family:var(--titoli);font-size:1.5rem;color:var(--inchiostro);text-decoration:none;white-space:nowrap}
.marchio b{font-weight:400;color:var(--rosso)}
.menu{display:flex;gap:2px;margin-left:auto;align-items:center}
.menu a,.menu summary{font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.86rem;color:var(--inchiostro-2);text-decoration:none;padding:8px 9px;white-space:nowrap;border-bottom:2px solid transparent;cursor:pointer}
.menu a:hover,.menu a[aria-current],.menu summary:hover,.menu summary[aria-current]{color:var(--inchiostro);border-bottom-color:var(--rosso)}
.tendina{position:relative}
.tendina summary{list-style:none}.tendina summary::-webkit-details-marker{display:none}
.tendina summary::after{content:" ▾";font-size:.8em}
.tendina>div{position:absolute;right:0;top:100%;min-width:230px;background:var(--carta);border:1px solid var(--riga);border-radius:4px;box-shadow:0 8px 24px #0002;padding:6px;display:flex;flex-direction:column;z-index:20}
.tendina>div a{text-transform:none;letter-spacing:0;font-size:1rem;font-weight:500;border:0;padding:8px 10px;border-radius:3px}
.tendina>div a:hover,.tendina>div a[aria-current]{background:var(--carta-2);border:0}
.tema{font-size:1.15rem;line-height:1;padding:6px 8px;border:1px solid var(--riga);border-radius:4px;background:transparent;color:var(--inchiostro-2);cursor:pointer;margin-left:6px}
.tema:hover{color:var(--rosso);border-color:var(--rosso)}
html:not(.js) .tema{display:none}
.menu-stretto{display:none;margin-left:6px}
.menu-stretto summary{font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.9rem;padding:8px 12px;border:1px solid var(--riga);border-radius:4px;cursor:pointer;list-style:none}
.menu-stretto summary::-webkit-details-marker{display:none}
.menu-stretto nav{position:absolute;left:0;right:0;top:100%;background:var(--carta);border-bottom:1px solid var(--riga);box-shadow:0 12px 24px #0002;padding:8px 20px 16px;display:flex;flex-direction:column;max-height:80vh;overflow-y:auto}
.menu-stretto nav a{font-family:var(--ui);font-weight:600;font-size:1.05rem;color:var(--inchiostro);text-decoration:none;padding:9px 0;border-bottom:1px solid var(--riga)}
.menu-stretto nav a.sotto{font-weight:500;padding-left:14px}
.menu-stretto nav span{font-family:var(--ui);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--rosso);padding:12px 0 2px}
.briciole{font-family:var(--ui);font-size:.9rem;color:var(--inchiostro-2);padding-top:14px;display:flex;flex-wrap:wrap;gap:6px}
.briciole a{color:inherit}
.piede{margin-top:4rem;border-top:1px solid var(--riga);background:var(--carta-2);padding:2rem 0}
.piede .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px}
.piede h2{font-family:var(--ui);font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 .5rem;color:var(--inchiostro-2)}
.piede ul{list-style:none;margin:0;padding:0}.piede li{margin:.25rem 0}
.piede a{color:var(--inchiostro)}
.piede .nota{grid-column:1/-1;font-family:var(--ui);font-size:.9rem;color:var(--inchiostro-2);margin:0}

/* 4. Componenti */
.schede{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid var(--riga);margin:1.5rem 0 0;position:sticky;top:56px;background:var(--carta);z-index:5;scrollbar-width:none}
.schede a{font-family:var(--ui);font-weight:600;font-size:.95rem;text-decoration:none;color:var(--inchiostro-2);padding:10px 12px;white-space:nowrap}
.schede a:hover{color:var(--rosso)}
.intestazione{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid var(--riga);margin-bottom:1rem}
.intestazione h2{margin:0 0 .4rem}
.intestazione a{font-family:var(--ui);font-size:.95rem;white-space:nowrap}
.blocco{margin-top:3rem}
.cerca-modulo{display:flex;gap:8px;max-width:560px;margin-top:1.4rem}
.cerca-modulo input{flex:1;min-width:0;font:inherit;padding:10px 14px;border:1px solid var(--riga);border-radius:4px;background:var(--carta);color:var(--inchiostro)}
.cerca-modulo button{font-family:var(--ui);font-weight:600;font-size:1rem;padding:10px 18px;border:0;border-radius:4px;background:var(--lago);color:var(--carta);cursor:pointer}
.prove{font-family:var(--ui);font-size:.95rem;color:var(--inchiostro-2);margin-top:.7rem}
.prove a{margin-left:.6em}
.ritratti{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px}
.ritratti.piccoli{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:14px}
.persona{display:flex;flex-direction:column;text-decoration:none;color:var(--inchiostro);font-family:var(--ui);line-height:1.25}
.persona img,.monogramma{aspect-ratio:2/3;width:100%;object-fit:cover;object-position:top;background:#fff;border:1px solid var(--riga);border-radius:3px;margin-bottom:.45rem}
.monogramma{display:grid;place-items:center;font-family:var(--titoli);font-size:3.2rem;color:var(--oro);background:var(--carta-2)}
.monogramma.grande{font-size:8rem}
.persona b{font-weight:600;font-size:1.02rem}.persona span:last-child{font-size:.88rem;color:var(--inchiostro-2)}
.persona:hover b{color:var(--rosso)}
.prec-succ{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:3rem;border-top:1px solid var(--riga);padding-top:1.2rem;grid-column:1/-1}
.prec-succ a{text-decoration:none;display:flex;flex-direction:column;font-family:var(--ui)}
.prec-succ a[rel=next]{text-align:right;grid-column:2}
.prec-succ span{font-size:.88rem;color:var(--inchiostro-2)}.prec-succ b{font-family:var(--titoli);font-weight:400;font-size:1.25rem}
.tabella-scorri{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.98rem}
caption{text-align:left;font-family:var(--ui);font-weight:600;padding-bottom:.4rem}
th,td{text-align:left;vertical-align:top;padding:.5rem .7rem;border-bottom:1px solid var(--riga)}
thead th{font-family:var(--ui);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--inchiostro-2)}
.riquadro{background:var(--lago-tenue);border-left:3px solid var(--lago);padding:1rem 1.2rem;margin:2rem 0}
.riquadro h3{margin:0 0 .4rem;font-family:var(--ui);font-weight:600;font-size:.9rem;text-transform:uppercase;letter-spacing:.07em}
.riquadro ul{margin:0;padding-left:1.1rem}
.date{margin:1.5rem 0}.date div{display:grid;grid-template-columns:5.5rem 1fr;gap:10px;padding:.35rem 0;border-bottom:1px solid var(--riga)}
.date dt{font-family:var(--ui);font-weight:600;color:var(--rosso)}.date dd{margin:0}
.vedi-anche{margin-top:2rem}.vedi-anche h2{font-size:1.2rem;margin:0 0 .4rem}

/* 5. Pagine */
/* home */
.eroe{border-bottom:1px solid var(--riga);background:var(--carta-2)}
.eroe .wrap{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;padding-block:2.6rem}
.eroe h1 i{color:var(--rosso)}
.eroe-figura{margin:0}.eroe-figura img{border-radius:3px;border:1px solid var(--riga)}
figcaption{font-family:var(--ui);font-size:.9rem;color:var(--inchiostro-2);margin-top:.4rem}
.porte{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.porta{display:flex;flex-direction:column;gap:.2rem;padding:1rem 1.1rem;border:1px solid var(--riga);border-radius:4px;text-decoration:none;color:var(--inchiostro);background:var(--carta)}
.porta:hover{border-color:var(--rosso)}
.porta .segno{color:var(--oro);font-size:1.3rem}.porta b{font-family:var(--titoli);font-weight:400;font-size:1.3rem}
.porta span:last-child{font-family:var(--ui);font-size:.95rem;color:var(--inchiostro-2)}
/* l'ordine va dall'alto verso il basso, una colonna dopo l'altra */
.griglia-capitoli{list-style:none;margin:0;padding:0;columns:4 230px;column-gap:28px}
.griglia-capitoli li{break-inside:avoid}
.griglia-capitoli a{display:flex;gap:12px;align-items:baseline;padding:.42rem 0;border-bottom:1px solid var(--riga);text-decoration:none;color:var(--inchiostro)}
.griglia-capitoli a:hover .tit{color:var(--rosso)}
.num{font-family:var(--ui);font-weight:600;color:var(--oro);min-width:3.2rem;font-size:.95rem}
.griglia-capitoli .num{min-width:2.1rem}
.due-colonne{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.elenco-frasi,.elenco-link{list-style:none;margin:0;padding:0}
.elenco-frasi li,.elenco-link li{padding:.4rem 0;border-bottom:1px solid var(--riga);display:flex;justify-content:space-between;gap:12px}
.elenco-frasi a{font-style:italic}.elenco-frasi span{font-family:var(--ui);font-size:.88rem;color:var(--inchiostro-2);white-space:nowrap}
/* elenco capitoli */
.parte{border-bottom:1px solid var(--riga);padding-bottom:.3rem}
.parte span{font-family:var(--ui);font-size:.9rem;color:var(--inchiostro-2);margin-left:.5rem}
.elenco-capitoli{list-style:none;margin:0;padding:0}
.elenco-capitoli a{display:flex;gap:14px;padding:.8rem 0;border-bottom:1px solid var(--riga);text-decoration:none;color:var(--inchiostro)}
.elenco-capitoli b{font-family:var(--titoli);font-weight:400;font-size:1.3rem;display:block}
.elenco-capitoli a:hover b{color:var(--rosso)}
.breve{display:block;color:var(--inchiostro-2);font-size:1rem;max-width:80ch}
/* capitolo */
.dati{list-style:none;display:flex;flex-wrap:wrap;gap:6px 26px;margin:1rem 0 0;padding:0;font-family:var(--ui);font-size:1rem;color:var(--inchiostro-2)}
.dati b{font-weight:600;text-transform:uppercase;font-size:.8rem;letter-spacing:.07em;color:var(--inchiostro);margin-right:.3em}
.scena{margin:0}.scena img{width:100%;border-radius:3px;border:1px solid var(--riga)}
.frasi-capitolo{border-left:3px solid var(--oro);padding:.2rem 0 .2rem 1.1rem;margin:1.5rem 0;max-width:70ch}
.frasi-capitolo h2{font-family:var(--ui);font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 .3rem;color:var(--inchiostro-2)}
.frasi-capitolo ul{list-style:none;margin:0;padding:0;font-style:italic}
.sequenze{list-style:none;margin:1rem 0 0;padding:0;counter-reset:seq;max-width:860px}
.sequenze li{counter-increment:seq;position:relative;padding:.7rem 0 .7rem 3.2rem;border-left:3px solid var(--lago);margin-left:1.1rem;border-bottom:1px solid var(--riga)}
.sequenze li::before{content:counter(seq);position:absolute;left:-1.2rem;top:.7rem;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--carta);border:2px solid var(--lago);display:grid;place-items:center;font-family:var(--ui);font-weight:600;font-size:.9rem}
.sequenze li.descrittiva{border-left-color:var(--oro);background:var(--oro-tenue)}
.sequenze li.descrittiva::before{border-color:var(--oro)}
.sequenze .tipo{font-family:var(--ui);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--inchiostro-2)}
.sequenze .argomento{margin:.1rem 0 .3rem;font-size:1.05rem}
.sequenze dl{margin:0;display:flex;flex-wrap:wrap;gap:2px 20px;font-family:var(--ui);font-size:.93rem;color:var(--inchiostro-2)}
.sequenze dl div{display:flex;gap:.4em}.sequenze dt{font-weight:600}.sequenze dd{margin:0}
.quiz fieldset{border:0;border-top:1px solid var(--riga);margin:0;padding:1rem 0;display:flex;flex-wrap:wrap;gap:8px}
.quiz legend{font-size:1.1rem;padding:0;margin-bottom:.5rem;float:left;width:100%}
.quiz button{font:inherit;font-size:1rem;text-align:left;padding:.5rem .9rem;border:1px solid var(--riga);border-radius:4px;background:var(--carta);color:var(--inchiostro);cursor:pointer}
.quiz button:hover:not(:disabled){border-color:var(--lago)}
.quiz button.giusta{background:#2E7D4F;border-color:#2E7D4F;color:#fff}
.quiz button.sbagliata{background:var(--rosso);border-color:var(--rosso);color:#fff}
.quiz .esito{font-family:var(--ui);font-weight:600;font-size:1.1rem}
.romanzo{max-width:68ch;font-size:1.08rem;line-height:1.7}
.romanzo p{position:relative;margin:0 0 .9em;text-indent:1.4em;hyphens:auto}
.romanzo p:target{background:var(--oro-tenue);box-shadow:0 0 0 6px var(--oro-tenue)}
.np{position:absolute;left:-3.2rem;width:2.6rem;text-align:right;text-indent:0;font-family:var(--ui);font-size:.75rem;color:var(--inchiostro-2);text-decoration:none;top:.45em;opacity:.55}
.np:hover{opacity:1}
/* personaggio */
.scheda-persona{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:40px;padding-top:1.5rem;align-items:start}
.colonna-ritratto img,.colonna-ritratto .monogramma{width:100%;aspect-ratio:2/3;object-fit:cover;background:#fff;border:1px solid var(--riga);border-radius:3px;position:sticky;top:80px}
.scheda-persona .capo{padding-top:0}
.presenze{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(38,1fr);gap:2px;height:120px;align-items:end}
.presenze li{height:100%}
.presenze a,.presenze .vuoto{display:flex;flex-direction:column;justify-content:flex-end;height:100%;text-decoration:none}
.presenze .barra{background:var(--lago);border-radius:2px 2px 0 0;display:block}
.presenze a:hover .barra{background:var(--rosso)}
.presenze .n{font-family:var(--ui);font-size:.62rem;text-align:center;color:var(--inchiostro-2);border-top:1px solid var(--riga);padding-top:2px}
.rete{margin:1rem 0}.rete svg{width:100%;max-width:900px;height:auto;display:block;margin:auto}
.rete line{stroke:var(--lago);opacity:.28}
.rete circle{fill:var(--rosso);stroke:var(--carta);stroke-width:2}
.rete text,.mappa text{font-family:var(--ui);font-size:14px;fill:var(--inchiostro)}
.rete a:hover text,.mappa a:hover text{fill:var(--rosso)}
/* luoghi */
.comandi{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;margin-bottom:14px}
.comandi button{font-family:var(--ui);font-weight:600;font-size:1rem;padding:8px 14px;border:1px solid var(--riga);background:var(--carta);color:var(--inchiostro);cursor:pointer}
.scelta button:first-child{border-radius:4px 0 0 4px}.scelta button:last-child{border-radius:0 4px 4px 0;border-left:0}
.scelta button[aria-pressed=true]{background:var(--lago);border-color:var(--lago);color:var(--carta)}
.viaggi[data-attivo=lucia] .scelta button[aria-pressed=true]{background:var(--rosso);border-color:var(--rosso)}
.passi{display:flex;gap:6px}.passi button{border-radius:4px}
html:not(.js) .comandi{display:none}
.mappa-e-legenda{display:grid;grid-template-columns:minmax(0,640px) 1fr;gap:36px;align-items:start}
.mappa{margin:0;position:sticky;top:70px}.mappa svg{width:100%;height:auto;background:var(--carta-2);border:1px solid var(--riga);border-radius:3px;display:block}
.viaggi{--via:var(--lago)}.viaggi[data-attivo=lucia]{--via:var(--rosso)}
.mappa .acqua{fill:none;stroke:var(--lago);stroke-width:6;opacity:.3;stroke-linecap:round}
.mappa .lago{fill:var(--lago);opacity:.25}
.mappa .etichetta-acqua{font-style:italic;fill:var(--lago);font-size:14px}
.mappa .etichetta-stato{font-size:11px;letter-spacing:.2em;fill:var(--inchiostro-2)}
.mappa .tratti path{fill:none;stroke:var(--via);stroke-width:3;marker-end:url(#freccia);transition:stroke-dashoffset .9s ease,opacity .3s}
.mappa .tratti path.passato{opacity:.35}
.mappa .tratti path.dopo{opacity:0}
.mappa marker path{fill:var(--via)}
.mappa .nodo rect{fill:var(--carta);stroke:var(--inchiostro-2);stroke-width:1.5;transition:fill .3s}
.mappa .nodo .numero{font-weight:600;font-size:15px;fill:var(--carta)}
.mappa .nodo .nome{font-weight:600;font-size:15px;paint-order:stroke;stroke:var(--carta-2);stroke-width:5px;fill:var(--inchiostro-2)}
.mappa .nodo.toccato rect{fill:var(--via);stroke:var(--via)}
.mappa .nodo.toccato .nome{fill:var(--inchiostro)}
.mappa .nodo.fuori{opacity:.45}
.mappa .nodo.qui rect{stroke:var(--oro);stroke-width:5}
.legenda h2{font-size:1.4rem;margin:0 0 .6rem}
.tappe{list-style:none;margin:0 0 2rem;padding:0}
.tappe li{display:grid;grid-template-columns:2.2rem 1fr;gap:10px;padding:.5rem .4rem;border-bottom:1px solid var(--riga);font-size:1rem;line-height:1.4;cursor:pointer}
.tappe li.qui{background:var(--oro-tenue)}
.pallino{width:2rem;height:2rem;border-radius:50%;background:var(--lago);color:var(--carta);display:grid;place-items:center;font-family:var(--ui);font-weight:600;font-size:.95rem}
[data-elenco=lucia] .pallino{background:var(--rosso)}
.tappe .cap{font-family:var(--ui);font-size:.88rem;margin-left:.3em;white-space:nowrap}
html.js .viaggi section[hidden]{display:none}
.schede-luoghi{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:8px 40px;margin-top:2rem}
.schede-luoghi h2,.digressioni h2{font-size:1.4rem;margin:1.6rem 0 .3rem}
.schede-luoghi article:target h2{color:var(--rosso)}
.capitoli-luogo{font-family:var(--ui);font-size:.95rem}.capitoli-luogo a{margin-right:.35em}
/* cronologia */
.linea-tempo{list-style:none;margin:1rem 0;padding:0;max-width:860px}
.linea-tempo li{display:grid;grid-template-columns:11rem 1fr;gap:18px;padding:.6rem 0 .6rem 1rem;border-left:3px solid var(--lago);border-bottom:1px solid var(--riga)}
.linea-tempo li.storia{border-left-color:var(--oro);background:var(--oro-tenue)}
.linea-tempo li.anno{display:block;border:0;padding:1.4rem 0 .3rem}
.linea-tempo li.anno span{font-family:var(--titoli);font-size:2rem;color:var(--rosso)}
.linea-tempo time{font-family:var(--ui);font-weight:600}.linea-tempo p{margin:0}
.fili th[scope=row]{font-family:var(--ui);width:4rem}
.fili tr.insieme td,.fili tr.insieme th{background:var(--oro-tenue)}
.fili td{width:48%}
/* frasi */
.frasi{list-style:none;margin:0;padding:0;max-width:860px}
.frasi a{display:block;padding:.9rem 0;border-bottom:1px solid var(--riga);text-decoration:none;color:var(--inchiostro)}
.frasi q,.frase-pagina h1 q{quotes:"«" "»"}
.frasi q{font-family:var(--titoli);font-size:1.5rem;font-style:italic;display:block;line-height:1.25}
.frasi a:hover q{color:var(--rosso)}
.frasi span{font-family:var(--ui);font-size:.92rem;color:var(--inchiostro-2)}
.frase-pagina h1{font-style:italic}
/* digressioni */
.digressioni{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:0 40px}
.barre-capitoli{list-style:none;margin:1rem 0;padding:0;columns:2;column-gap:40px;max-width:900px}
.barre-capitoli a{display:grid;grid-template-columns:3.4rem 1fr 3rem;gap:8px;align-items:center;text-decoration:none;color:var(--inchiostro);font-family:var(--ui);font-size:.9rem;padding:2px 0}
.pista{background:var(--lago-tenue);height:10px;border-radius:2px;overflow:hidden}.pista span{display:block;height:100%;background:var(--oro)}
.barre-capitoli .v{color:var(--inchiostro-2);text-align:right}
/* ricerca */
#risultati h2{font-size:1.3rem;margin:2rem 0 .3rem;border-bottom:1px solid var(--riga);padding-bottom:.3rem}
.risultato{display:block;padding:.6rem 0;border-bottom:1px solid var(--riga);text-decoration:none;color:var(--inchiostro);max-width:860px}
.risultato b{font-family:var(--ui);font-weight:600;font-size:.88rem;color:var(--rosso);display:block}
.risultato mark{background:var(--oro-tenue);color:inherit;font-weight:600}
.risultato:hover{background:var(--carta-2)}

/* pagina del capitolo: colonna di lettura e fianco con la sintesi */
.corpo-capitolo{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:56px;align-items:start}
.fianco{position:sticky;top:112px;max-height:calc(100vh - 130px);overflow-y:auto;padding:0 4px 1rem 0;font-size:.98rem}
.fianco h2{font-family:var(--ui);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.09em;color:var(--inchiostro-2);margin:1.6rem 0 .5rem;border-bottom:1px solid var(--riga);padding-bottom:.3rem}
.fianco section:first-child h2{margin-top:2.9rem}
.chi{list-style:none;margin:0;padding:0}
.chi a{display:flex;gap:10px;align-items:center;padding:4px 0;text-decoration:none;color:var(--inchiostro);font-family:var(--ui);line-height:1.2}
.chi img,.chi .monogramma{width:38px;height:38px;aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:top;border:1px solid var(--riga);background:#fff;margin:0;font-size:1.1rem;flex:none}
.chi b{font-weight:600;display:block}.chi small{color:var(--inchiostro-2)}
.chi a:hover b{color:var(--rosso)}
.semplice{list-style:none;margin:0;padding:0}.semplice li{padding:.35rem 0;line-height:1.4}
.semplice.corsivo{font-style:italic}
.bottone{display:inline-block;font-family:var(--ui);font-weight:600;font-size:1rem;padding:8px 16px;border-radius:4px;background:var(--lago);color:var(--carta);text-decoration:none;margin-right:8px}
.bottone:hover{background:var(--rosso);color:var(--carta)}
.bottone small{font-weight:500;opacity:.85;margin-left:.4em}
html:not(.js) .azioni{display:block}html:not(.js) .azioni button{display:none}
/* pagina del testo: glossario cliccabile e parafrasi */
.pagina-testo .romanzo{margin-inline:auto}
.pagina-testo .capo{max-width:68ch;margin-inline:auto}
.glossa{color:inherit;text-decoration:underline dotted var(--oro);text-decoration-thickness:2px;text-underline-offset:.2em;cursor:help}
.fumetto{position:absolute;z-index:30;max-width:320px;background:var(--carta);border:1px solid var(--oro);border-radius:4px;box-shadow:0 8px 24px #0003;padding:.7rem .9rem;font-family:var(--ui);font-size:.95rem;line-height:1.4;text-indent:0}
.fumetto b{display:block;font-size:1rem;margin-bottom:.2rem;text-transform:capitalize}
.fumetto a{display:inline-block;margin-top:.4rem;font-size:.88rem}
.passo{border-left:3px solid var(--oro);padding-left:1.1rem;margin:1.4rem 0 1.4rem -1.25rem}
.parafrasi{background:var(--oro-tenue);border-radius:4px;margin-bottom:1rem;font-family:var(--ui);font-size:1rem;line-height:1.5}
.parafrasi summary{cursor:pointer;padding:.55rem .8rem;font-weight:600}
.parafrasi p{text-indent:0;margin:0;padding:0 .8rem .7rem;hyphens:manual}
.passo .np{left:-4.4rem}

/* temi, glossario, percorsi, ripasso */
.etichette.parole span{display:inline-block;font-family:var(--ui);font-size:.92rem;padding:3px 11px;border-radius:99px;background:var(--lago-tenue);margin:0 6px 6px 0}
.prima-dopo p{margin:0;font-size:1.02rem}
.prima-dopo>div{border-top:3px solid var(--riga);padding-top:.6rem}.prima-dopo>div:last-child{border-top-color:var(--rosso)}
.storia{max-width:780px}
.storia details{border-bottom:1px solid var(--riga)}
.storia summary{cursor:pointer;padding:.55rem 0;font-family:var(--titoli);font-size:1.15rem;list-style-position:outside}
.storia summary small{font-family:var(--ui);font-size:.82rem;color:var(--inchiostro-2);margin-left:.5rem}
.storia summary .num{display:inline-block;min-width:3rem}
.storia ul{margin:.2rem 0 .6rem 3rem;padding-left:1rem;font-size:1rem}.storia .cap{margin:0 0 .8rem 3rem}
.collegati ul{list-style:none;margin:0;padding:0;max-width:860px}
.collegati li{padding:.5rem 0;border-bottom:1px solid var(--riga)}
.collegati li a{font-family:var(--ui);font-weight:600;margin-right:.5rem;white-space:nowrap}
.lessico{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 36px;max-width:980px}
.lessico div{padding:.5rem 0;border-bottom:1px solid var(--riga);font-size:1rem}
.lessico dt{font-family:var(--ui);font-weight:600}.lessico dd{margin:0;color:var(--inchiostro-2)}
.sequenze .tipo i{font-style:normal;color:var(--rosso)}
#quiz-generale img{width:150px;aspect-ratio:2/3;object-fit:cover;object-position:top;border:1px solid var(--riga);border-radius:3px;background:#fff;margin-bottom:.6rem}
#quiz-generale .genere{font-family:var(--ui);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--rosso);width:100%;margin:0}
.azioni{margin:1rem 0 0}
.azioni button{font-family:var(--ui);font-weight:600;font-size:.92rem;padding:6px 12px;border:1px solid var(--riga);border-radius:4px;background:var(--carta);color:var(--inchiostro-2);cursor:pointer}
.azioni button:hover{border-color:var(--lago);color:var(--lago)}
html:not(.js) .azioni{display:none}
.porte.inizio{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.porte.inizio .porta{border-left:3px solid var(--rosso)}
.elenco-capitoli.stretto a{padding:.45rem 0}.elenco-capitoli.stretto b{font-size:1.15rem}
.etichette a{display:inline-block;font-family:var(--ui);font-size:.95rem;padding:4px 12px;border:1px solid var(--riga);border-radius:99px;margin:0 6px 6px 0;text-decoration:none}
.etichette a:hover{border-color:var(--rosso)}
.collegamenti h2{font-size:1.3rem;margin:1.8rem 0 .5rem}
.ripasso-capitolo{max-width:980px}
.ripasso-capitolo h2 a{color:inherit;text-decoration:none}.ripasso-capitolo h2 a:hover{color:var(--rosso)}
.due-liste{display:grid;grid-template-columns:1fr 1fr;gap:10px 36px}
.due-liste h3{font-family:var(--ui);font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--rosso);margin:0 0 .3rem}
.due-liste ul{margin:0;padding-left:1.1rem;font-size:1rem}.due-liste li{margin-bottom:.3rem}
.glossario{margin:1.5rem 0;max-width:860px}
.glossario>div{position:relative;padding:.7rem 0 .7rem 3.4rem;border-bottom:1px solid var(--riga)}
.glossario>div:target{background:var(--oro-tenue)}
.glossario .lettera{position:absolute;left:0;top:.4rem;font-family:var(--titoli);font-size:2rem;color:var(--oro)}
.glossario dt{font-family:var(--titoli);font-size:1.3rem}.glossario dd{margin:0}
.cap{font-family:var(--ui);font-size:.88rem;white-space:nowrap}
.percorso{border-top:1px solid var(--riga)}.percorso .sommario{margin:0 0 1rem}
.passi-percorso{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;counter-reset:passo}
.passi-percorso a{counter-increment:passo;display:block;height:100%;padding:.7rem .9rem;border:1px solid var(--riga);border-radius:4px;text-decoration:none;color:var(--inchiostro);background:var(--carta)}
.passi-percorso a:hover{border-color:var(--rosso)}
.passi-percorso b{display:block;font-family:var(--ui);font-weight:600}.passi-percorso b::before{content:counter(passo) ". ";color:var(--oro)}
.passi-percorso span{font-size:.95rem;color:var(--inchiostro-2);line-height:1.35;display:block}
#quiz-generale .avanzamento{font-family:var(--ui);color:var(--inchiostro-2)}
#quiz-generale .dove{font-family:var(--ui);font-size:.95rem;width:100%}
#quiz-generale .finale{font-family:var(--titoli);font-size:2rem}

@media (max-width:980px){.menu{display:none}.menu-stretto{display:block}.tema{margin-left:auto}}
@media (max-width:1040px){.corpo-capitolo{grid-template-columns:minmax(0,1fr);gap:0}.fianco{position:static;max-height:none;overflow:visible;border-top:1px solid var(--riga);margin-top:2rem}.fianco section:first-child h2{margin-top:1.6rem}.chi{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0 20px}}
@media (max-width:820px){
  .due-liste{grid-template-columns:1fr}
  .passo{margin-left:0}
  body{font-size:17px}
  .eroe .wrap,.due-colonne,.scheda-persona,.mappa-e-legenda{grid-template-columns:1fr}
  .mappa{position:static}
  .colonna-ritratto{max-width:240px}
  .colonna-ritratto img,.colonna-ritratto .monogramma{position:static}
  .np{display:none}
  .linea-tempo li{grid-template-columns:1fr;gap:2px}
  .barre-capitoli{columns:1}
  .presenze .n{font-size:0}
  .sequenze li{padding-left:1.9rem;margin-left:.9rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{.testata,.piede,.schede,.prec-succ,.briciole,.quiz,#quiz,#testo,.azioni,.rete,.fianco .chi img,.tema,.menu-stretto,.presenze,.cerca-modulo{display:none!important}body{background:#fff;color:#000;font-size:11.5pt}a{color:#000;text-decoration:none}.wrap{max-width:none;padding:0}h2{margin-top:1.2rem;break-after:avoid}.ripasso-capitolo,.sequenze li,.glossario>div{break-inside:avoid}.scheda-persona{grid-template-columns:140px 1fr;gap:20px}.colonna-ritratto img{position:static}}

/* ritratto ingrandito */
a.ingrandisci{display:block;cursor:zoom-in}
dialog.lente{border:0;padding:0;background:transparent;max-width:96vw;max-height:96vh;overflow:visible;cursor:zoom-out}
dialog.lente::backdrop{background:rgba(20,16,12,.86)}
dialog.lente img{display:block;width:auto;height:auto;max-width:96vw;max-height:94vh;border-radius:6px;background:#fff}
dialog.lente button{position:absolute;top:.4rem;right:.4rem;width:2.4rem;height:2.4rem;border:0;border-radius:50%;background:rgba(20,16,12,.7);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer}
.colonna-ritratto a.ingrandisci{position:sticky;top:80px}
.colonna-ritratto a.ingrandisci img{position:static}

/* filtri dei personaggi */
.filtri{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:1.25rem 0 0;font-family:var(--ui);font-size:.92rem}
.filtri[hidden],.persona[hidden]{display:none}
.filtri span{color:var(--inchiostro-2);margin-right:4px}
.filtri button{font:inherit;font-weight:600;padding:6px 14px;border:1px solid var(--riga);border-radius:999px;background:transparent;color:var(--inchiostro);cursor:pointer}
.filtri button:hover{border-color:var(--rosso);color:var(--rosso)}
.filtri button[aria-pressed="true"]{background:var(--inchiostro);border-color:var(--inchiostro);color:var(--carta)}

/* mappa, vista d'insieme: ogni tratto una volta per verso, più sottile; i ritorni sullo stesso tratto si vedono tappa per tappa */
[data-vista="insieme"] .mappa .tratti path{stroke-width:2.2;opacity:.8}
[data-vista="insieme"] .mappa .tratti path.ripetuto{opacity:0}