:root{
  --paper:#F4EEDD; --paper-2:#EBE3CE; --raise:#FBF7EC;
  --ink:#232A1E; --ink-soft:#5B6047; --ink-faint:#8A8A72;
  --rule:#D9CFB6; --rule-soft:#E4DBC4;
  --accent:#B77A16; --accent-strong:#8F5314; --gold:#E7A92C; --gray-deep:#9A968A;
  --sel:#F6D98A; color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#131619; --paper-2:#1A1E22; --raise:#1D2226;
    --ink:#CDD1D3; --ink-soft:#8B9195; --ink-faint:#61686D;
    --rule:#2A2F34; --rule-soft:#23282C;
    --accent:#E7A92C; --accent-strong:#F2C15A; --gold:#E7A92C; --gray-deep:#3A4046;
    --sel:#4a3a12; color-scheme:dark;
  }
}
:root[data-theme="light"]{
  --paper:#F4EEDD; --paper-2:#EBE3CE; --raise:#FBF7EC;
  --ink:#232A1E; --ink-soft:#5B6047; --ink-faint:#8A8A72;
  --rule:#D9CFB6; --rule-soft:#E4DBC4;
  --accent:#B77A16; --accent-strong:#8F5314; --gold:#E7A92C; --gray-deep:#9A968A;
  --sel:#F6D98A; color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#131619; --paper-2:#1A1E22; --raise:#1D2226;
  --ink:#CDD1D3; --ink-soft:#8B9195; --ink-faint:#61686D;
  --rule:#2A2F34; --rule-soft:#23282C;
  --accent:#E7A92C; --accent-strong:#F2C15A; --gold:#E7A92C; --gray-deep:#3A4046;
  --sel:#4a3a12; color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  font-size:19px; line-height:1.72; overflow-x:hidden;
  transition:background .5s ease, color .5s ease;
}
::selection{background:var(--sel); color:var(--ink)}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-strong)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}
.u,.label{font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif}
.label{font-size:12px; font-weight:600; line-height:1; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint)}

/* site bar */
.bar{position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px clamp(14px,4vw,40px); background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--rule-soft)}
.bar-crumbs{display:flex; align-items:center; gap:9px; min-width:0; flex-wrap:wrap}
.bar-crumbs .mark-link{display:flex; align-items:center; flex:none}
.bar-crumbs .mark{width:24px; height:24px; flex:none}
.bar-crumbs a{font:600 13px/1.3 "Avenir Next","Segoe UI",system-ui,sans-serif; letter-spacing:.02em;
  color:var(--ink-soft); white-space:nowrap}
.bar-crumbs a:hover{color:var(--accent)}
.bar-crumbs a.here{color:var(--ink); font-weight:700}
.bar-crumbs .sep{color:var(--ink-faint); font-size:12px; flex:none}
.bar .tools{display:flex; align-items:center; gap:10px; flex:none}
.toggle{display:inline-flex; align-items:center; border:1px solid var(--rule); border-radius:999px;
  overflow:hidden; background:var(--paper-2)}
.toggle button{font:600 11.5px/1 "Avenir Next","Segoe UI",system-ui,sans-serif; letter-spacing:.1em;
  text-transform:uppercase; padding:8px 13px; border:0; background:none; color:var(--ink-faint); cursor:pointer}
.toggle button[aria-pressed="true"]{background:var(--gold); color:#241a05}
.fs{display:inline-flex; border:1px solid var(--rule); border-radius:999px; overflow:hidden; background:var(--paper-2)}
.fs button{font:600 13px/1 "Avenir Next","Segoe UI",system-ui,sans-serif; padding:7px 12px; border:0;
  background:none; color:var(--ink-soft); cursor:pointer}
.fs button:hover{color:var(--accent)}
.fs button:disabled{opacity:.35; cursor:default}
@media (max-width:520px){ .bar-crumbs a.here, .bar-crumbs .sep:last-of-type{display:none} }

.wrap{max-width:720px; margin:0 auto; padding:0 clamp(20px,6vw,32px)}

/* cover */
.cover{padding:clamp(48px,11vh,110px) 0 30px; text-align:center}
.cover .eyebrow{margin:0 0 22px}
.cover h1{font-weight:600; font-size:clamp(44px,10vw,84px); line-height:.98; letter-spacing:-.015em;
  text-wrap:balance; margin:0}
.cover h1 em{font-style:italic}
.cover .by{margin:20px 0 0; color:var(--ink-soft); font-style:italic; font-size:20px}
.rule-orn{display:flex; align-items:center; justify-content:center; gap:14px; margin:34px 0}
.rule-orn i{height:1px; width:70px; background:var(--rule)}
.rule-orn svg{width:20px; height:20px; opacity:.85}
.premise{font-size:clamp(16.5px,2vw,19px); line-height:1.64; max-width:35em; margin:4px auto 0;
  text-align:left; text-wrap:pretty; color:var(--ink-soft)}
.premise::first-line{color:var(--ink)}
.bookstats{margin:26px 0 0; color:var(--ink-faint); font:500 13px/1.6 "Avenir Next","Segoe UI",system-ui,sans-serif;
  letter-spacing:.06em}
.series-note{display:flex; align-items:center; justify-content:center; gap:10px; margin:14px 0 0;
  color:var(--ink-faint); font:500 12.5px/1 "Avenir Next","Segoe UI",system-ui,sans-serif; letter-spacing:.06em}
.series-note .bar{fill:var(--rule)}
.series-note .bar.on{fill:var(--gold)}
.cta-row{display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap; margin:38px 0 4px}
.btn{font-family:"Avenir Next","Segoe UI",system-ui,sans-serif; font-weight:600; font-size:14px;
  letter-spacing:.03em; padding:14px 24px; border-radius:2px; cursor:pointer; border:1px solid transparent;
  display:inline-block; transition:transform .15s ease}
.btn.primary{background:var(--gold); color:#241a05 !important; box-shadow:0 10px 24px -14px var(--gold)}
.btn.primary:hover{transform:translateY(-2px)}
.btn.ghost{background:none; border-color:var(--rule); color:var(--ink)}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent)}
.startover{display:none; margin:14px 0 0; font:500 13px/1 "Avenir Next","Segoe UI",system-ui,sans-serif}
.startover.on{display:block}

/* contents */
.toc{padding:18px 0 10px}
.toc h2,.give h2{font:600 12px/1 "Avenir Next","Segoe UI",system-ui,sans-serif; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-faint); text-align:center; margin:0 0 8px}
.part{margin:30px 0 6px; text-align:center; color:var(--ink-soft); font-style:italic; font-size:15px}
.chap{display:grid; grid-template-columns:2.6em 1fr auto auto; align-items:baseline; gap:14px;
  padding:15px 8px; border-top:1px solid var(--rule-soft); color:inherit}
.chap:last-child{border-bottom:1px solid var(--rule-soft)}
.chap .n{font:500 12px/1 "Avenir Next","Segoe UI",system-ui,sans-serif; letter-spacing:.12em;
  color:var(--ink-faint); font-variant-numeric:tabular-nums}
.chap .t{font-size:19px}
.chap .m{font:500 11.5px/1 "Avenir Next","Segoe UI",system-ui,sans-serif; color:var(--ink-faint);
  letter-spacing:.06em; white-space:nowrap}
.chap .arrow{color:var(--ink-faint); transition:transform .2s ease, color .2s ease}
.chap:hover{background:var(--raise)}
.chap:hover .arrow{transform:translateX(4px); color:var(--accent)}
.chap:hover .t{color:var(--accent)}
@media (max-width:480px){ .chap .m{display:none} }

/* charity band */
.give{margin:56px 0 0; padding:38px clamp(22px,6vw,44px); background:var(--paper-2);
  border:1px solid var(--rule-soft); border-radius:4px; text-align:center}
.give p.lead{font-size:20px; font-style:italic; margin:.2em auto 1.1em; max-width:26em; text-wrap:pretty}
.orgs{display:flex; gap:10px 26px; flex-wrap:wrap; justify-content:center; margin-top:6px}
.orgs a{font:600 14px/1.5 "Avenir Next","Segoe UI",system-ui,sans-serif}
.give-more{margin:22px 0 0; font:400 14.5px/1.6 "Avenir Next","Segoe UI",system-ui,sans-serif}

/* companion cards on the book landing */
.companion-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin:22px 0 0}
.comp-card{display:flex; flex-direction:column; gap:5px; padding:20px 22px; text-decoration:none;
  border:1px solid var(--rule-soft); border-radius:4px; background:var(--paper-2); transition:border-color .2s}
.comp-card:hover{border-color:var(--accent)}
.comp-k{font:600 10.5px/1 "Avenir Next","Segoe UI",system-ui,sans-serif; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint)}
.comp-t{font-family:Charter,Georgia,serif; font-size:20px; color:var(--ink)}
.comp-card:hover .comp-t{color:var(--accent)}
.comp-d{font:400 14px/1.55 "Avenir Next","Segoe UI",system-ui,sans-serif; color:var(--ink-soft); text-wrap:pretty}

/* companion pages: giving / characters / about */
.comp-wrap{padding-bottom:10px}
.comp-head{text-align:center; margin:0 0 40px}
.standing{max-width:34em; margin:0 auto 46px; text-align:center; font-style:italic;
  font-size:17px; line-height:1.65; color:var(--ink-soft); text-wrap:pretty}
.orgs-list{display:flex; flex-direction:column; gap:26px; margin:0 0 60px}
.org{padding:28px clamp(20px,4vw,34px); border:1px solid var(--rule-soft); border-radius:4px; background:var(--paper-2)}
.org-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 0 14px}
.org-no{font:600 11px/1 "Avenir Next","Segoe UI",system-ui,sans-serif; letter-spacing:.14em; color:var(--accent)}
.org-head h3{font-family:Charter,Georgia,serif; font-size:26px; margin:0; line-height:1.15}
.org-note{font:400 12px/1 "Avenir Next","Segoe UI",system-ui,sans-serif; color:var(--ink-faint);
  border:1px solid var(--rule-soft); border-radius:999px; padding:5px 10px}
.org p{margin:0 0 .85em; text-wrap:pretty}
.org-verify{font-size:15px; color:var(--ink-soft); padding-top:6px; border-top:1px solid var(--rule-soft); margin-top:16px!important}
.org-give{margin:16px 0 0!important}

/* question & answer blocks */
.qa-block{margin:0 0 46px}
.qa-block h2{font-family:Charter,Georgia,serif; font-size:24px; margin:0 0 16px; padding-bottom:10px;
  border-bottom:1px solid var(--rule-soft)}
.qa{border-bottom:1px solid var(--rule-soft)}
.qa summary{list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:12px; padding:15px 0}
.qa summary::-webkit-details-marker{display:none}
.qa .q{flex:1; font-family:Charter,Georgia,serif; font-size:19px; line-height:1.35; text-wrap:pretty}
.qa .q-note{font:400 12px/1 "Avenir Next","Segoe UI",system-ui,sans-serif; color:var(--ink-faint); white-space:nowrap}
.qa .x{font:600 12px/1 "Avenir Next","Segoe UI",system-ui,sans-serif; color:var(--accent); white-space:nowrap}
.qa:not([open]) summary .x::after{content:"+"}
.qa[open] summary .x::after{content:"\2212"}
.qa summary:hover .q{color:var(--accent)}
.qa-body{padding:0 0 20px; max-width:40em}
.qa-body p{margin:0 0 .8em; text-wrap:pretty}
.qa-body ul{margin:.2em 0 .9em; padding-left:1.2em}
.qa-body li{margin:.3em 0; text-wrap:pretty}
.stanza{padding:14px 0 2px; border-top:1px solid var(--rule-soft); margin-top:12px}
.stanza-l{font-style:italic; color:var(--accent); margin-bottom:.5em!important}

/* characters */
.people{display:flex; flex-direction:column; gap:30px; margin:0 0 56px}
.person{display:grid; grid-template-columns:13rem 1fr; gap:8px 30px; align-items:start;
  padding:28px clamp(20px,4vw,32px); border:1px solid var(--rule-soft); border-radius:4px; background:var(--paper-2)}
.person-head h3{font-family:Charter,Georgia,serif; font-size:30px; margin:2px 0 0; line-height:1.1}
.person-no{font:600 11px/1 "Avenir Next","Segoe UI",system-ui,sans-serif; letter-spacing:.14em; color:var(--accent)}
.person-ep{font:400 13px/1.4 "Avenir Next","Segoe UI",system-ui,sans-serif; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint); margin:8px 0 0}
.person-body p{margin:0 0 .85em; text-wrap:pretty}
.person-body p:last-child{margin-bottom:0}
.comp-back{margin:8px 0 0; font:400 14.5px/1.6 "Avenir Next","Segoe UI",system-ui,sans-serif}
@media (max-width:620px){
  .person{grid-template-columns:1fr; gap:14px}
  .person-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
  .person-ep{margin:0}
}
footer.bfoot{max-width:720px; margin:40px auto 60px; padding:22px clamp(20px,6vw,32px) 0;
  border-top:1px solid var(--rule-soft); color:var(--ink-faint); font:400 13.5px/1.7 "Avenir Next","Segoe UI",system-ui,sans-serif;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}
footer.bfoot a{color:var(--ink-soft)}
footer.bfoot a:hover{color:var(--accent)}

/* reader */
#rail{position:fixed; left:0; top:0; width:3px; height:100vh; z-index:15; background:var(--rule-soft)}
#rail-fill{position:absolute; top:0; left:0; width:100%; height:0%;
  background-image:linear-gradient(var(--gold), var(--gray-deep));
  background-size:100% 100vh; background-repeat:no-repeat}
/* the JS re-scales the gradient so its gold→gray span covers the WHOLE book:
   the rail fills per page, but its color shows how deep in the story you are */
.reader{max-width:660px; margin:0 auto; padding:0 clamp(22px,6vw,32px)}
.reader .back{margin:26px 0 0; display:inline-flex; align-items:center; gap:8px;
  font:500 13px/1 "Avenir Next","Segoe UI",system-ui,sans-serif; letter-spacing:.04em; color:var(--ink-faint)}
.reader .back:hover{color:var(--accent)}
.chead{text-align:center; padding:38px 0 10px}
.chead .part{margin:0 0 14px}
.chead h1{font-weight:600; font-size:clamp(34px,7vw,52px); letter-spacing:-.01em; margin:0; text-wrap:balance}
.chead .meta{margin:14px 0 0; color:var(--ink-faint); font:500 12px/1 "Avenir Next","Segoe UI",system-ui,sans-serif;
  letter-spacing:.12em; text-transform:uppercase}
.prose{padding:20px 0 10px}
.prose p{margin:0 0 1.38em; text-wrap:pretty; hanging-punctuation:first}
.prose p+p{text-indent:1.4em}
.prose .lede{text-indent:0}
.prose .lede::first-letter{float:left; font-size:3.1em; line-height:.82; padding:.02em .09em 0 0;
  color:var(--accent); font-weight:600}
.prose .fr{font-style:italic; color:var(--ink-soft); text-indent:0; border-left:2px solid var(--gold);
  padding-left:20px; margin-left:-22px}
@media (max-width:560px){ .prose .fr{margin-left:0; padding-left:16px} }
html[data-fs="0"] .prose{font-size:.895em; line-height:1.68}
html[data-fs="2"] .prose{font-size:1.105em}
html[data-fs="3"] .prose{font-size:1.21em; line-height:1.76}
.pager{display:flex; justify-content:space-between; gap:14px; margin:30px 0 70px;
  border-top:1px solid var(--rule-soft); padding-top:20px}
.pager a{flex:1; font-family:"Avenir Next","Segoe UI",system-ui,sans-serif; padding:16px 18px;
  border:1px solid var(--rule); border-radius:3px; color:var(--ink); max-width:48%}
.pager .k{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:5px}
.pager .v{font-size:16.5px}
.pager .next{text-align:right; margin-left:auto}
.pager a:hover{border-color:var(--accent); color:var(--accent)}

.fade{animation:fade .6s ease both}
@keyframes fade{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }
@media (max-width:520px){ body{font-size:18px} }