/* shared site header */
.sitehead{display:flex;align-items:center;justify-content:center;gap:.8rem;margin:0 auto .6rem}
.sitehead .portrait{width:58px;margin:0;padding:3px;box-shadow:0 0 0 2px #fbf5e6,0 0 0 3px var(--edge),0 4px 10px -6px rgba(60,40,10,.5)}
.sitehead > div{text-align:left}
.sitename{font-family:"IM Fell English SC",serif;color:var(--accent);font-size:clamp(1.5rem,4.5vw,2rem);text-decoration:none;letter-spacing:.03em;line-height:1.05;display:block}
.sitenav{font-size:.9rem;color:var(--muted)}.sitenav a{color:var(--muted)}
.sitehead + .rule{margin:.2rem auto .9rem}
body.reading .sitehead .portrait{width:42px}body.reading .sitename{font-size:1.4rem}body.reading .sitehead + .rule{display:none}
main.book{max-width:900px;text-align:left;padding-top:1rem}
body.reading:not(.searchview) main.book{max-width:1500px}
.book a{color:var(--accent)}
.bhead{display:flex;gap:1.2rem;align-items:center;margin-bottom:1rem}
.bhead img{width:110px;height:auto;border:1px solid var(--edge);box-shadow:0 6px 16px -8px rgba(60,40,10,.5);mix-blend-mode:multiply;background:#fff}
.bhead h1{font-size:clamp(1.7rem,5vw,2.6rem);margin:0}
.bhead .sub{margin:.2rem 0 .7rem}
.bacts{display:flex;gap:.6rem;flex-wrap:wrap}
.bacts button{font-size:1.1rem;padding:.6rem 1.5rem;width:auto}
body.reading .bhead,body.reading .sform,body.reading .hint{display:none}
.sform{display:flex;gap:.5rem;margin:1rem 0 .4rem}
.sform input{flex:1;min-width:0;font-family:inherit;font-size:1.2rem;padding:.6rem .9rem;border:1px solid var(--edge);border-radius:999px;background:#fffaf0;color:var(--ink)}
.sform button{font-size:1.05rem;padding:.6rem 1.3rem;width:auto}
.hint{color:var(--muted);font-size:.95rem;margin:.2rem 0 1rem}.hint a{margin:0 .2rem}
#count,#lcount{color:var(--muted);font-style:italic;margin:.6rem 0}
.res{list-style:none;padding:0;margin:0}
.res li{background:#fbf5e6;border:1px solid var(--edge);border-radius:3px;margin:.6rem 0;padding:.7rem 1rem;cursor:pointer;line-height:1.45}
.res li:hover,.res li:focus{border-color:var(--accent);outline:none}
.res .pg{display:block;font-family:"IM Fell English SC",serif;color:var(--accent);font-size:.92rem;margin-bottom:.15rem}
mark{background:rgba(232,180,40,.55);color:inherit;padding:0 .08em;border-radius:2px}
/* viewer */
.vtop{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:.95rem;margin:.2rem 0}
.vtop .ttl{font-style:italic;color:var(--muted);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vbar{display:flex;gap:.5rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:.3rem 0 .6rem;position:sticky;top:0;z-index:5;background:rgba(243,233,210,.95);padding:.4rem 0}
.vbar button{font-size:1rem;padding:.5rem 1.1rem;width:auto}
.vmid{flex:1;display:flex;gap:.6rem;align-items:center;justify-content:center;flex-wrap:wrap}
#plabel{font-family:"IM Fell English SC",serif;color:var(--ink)}
#jump{display:inline-flex;gap:.25rem;align-items:center;color:var(--muted);font-size:.9rem}
#jump input{width:3.6em;font-family:inherit;font-size:.95rem;padding:.25rem .4rem;border:1px solid var(--edge);border-radius:6px;background:#fffaf0}
.vbar .ghost,#back{font-size:.9rem;padding:.35rem .8rem;width:auto!important}
.pages{display:flex;justify-content:center;gap:0;align-items:flex-start}
.sheet{position:relative;margin:0 auto;max-width:760px;background:#fff;border:1px solid var(--edge);box-shadow:0 10px 30px -12px rgba(60,40,10,.45)}
.sheet img{display:block;width:100%;height:auto}
body.reading:not(.searchview) .sheet{max-width:none;width:auto}
body.reading:not(.searchview) .sheet img{width:auto;max-width:100%;height:auto;max-height:calc(100vh - 200px)}
.pages.spread .sheet{margin:0;flex:0 1 auto;max-width:50%}
.pages.spread .sheet:first-child{box-shadow:inset -18px 0 22px -18px rgba(60,40,10,.35),0 10px 30px -12px rgba(60,40,10,.45);border-right:0}
.hl{position:absolute;background:rgba(240,180,20,.38);border:1px solid rgba(200,120,0,.7);border-radius:3px;mix-blend-mode:multiply;pointer-events:none}
.vfoot{text-align:center;margin:.8rem 0;font-size:.95rem}
#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.6rem;margin:.4rem 0 1rem;padding:.6rem;background:#fbf5e6;border:1px solid var(--edge);border-radius:3px}
#grid a{display:block;text-align:center;color:var(--muted);text-decoration:none;font-size:.8rem}
#grid img{width:100%;height:auto;border:1px solid var(--edge);background:#fff;display:block}
#grid a.cur img{outline:2px solid var(--accent)}
/* library */
.lib{list-style:none;padding:0;margin:1rem 0}
.libitem{display:flex;gap:1.2rem;align-items:center;background:#fbf5e6;border:1px solid var(--edge);border-radius:3px;padding:1rem;margin:.8rem 0}
.libitem img{width:96px;height:auto;border:1px solid var(--edge);background:#fff;mix-blend-mode:multiply;display:block}
.libitem h2{margin:0;font-weight:400;font-size:1.5rem}.libitem h2 a{text-decoration:none}
.libitem .meta{margin:.2rem 0 .6rem;color:var(--muted)}
.btn{display:inline-block;text-decoration:none;border-radius:999px;padding:.45rem 1.2rem;border:1px solid #5e2416;background:linear-gradient(#8b3a26,#6d2817);color:#fbf1dc!important;margin:.15rem .3rem .15rem 0}
.btn.ghost{background:transparent;color:var(--accent)!important;border-color:var(--edge)}
.libnote{color:var(--muted);font-style:italic}
@media (max-width:520px){.bhead{align-items:flex-start}.bhead img{width:72px}.vbar button{padding:.45rem .8rem}.bacts button{width:auto;font-size:1rem;padding:.55rem 1.1rem}.libitem img{width:72px}
 .vbar{gap:.3rem}#prev,#next{font-size:.95rem}}
@media (max-width:520px){#jump label{font-size:0;}#jump label::after{content:"p.";font-size:.9rem}#jump input{width:3em}.vmid{gap:.35rem}body.reading .sitehead .portrait{width:40px}body.reading .sitename{font-size:1.3rem}body.reading .sitehead{margin-bottom:.2rem}}
.scansrc{font-size:.82rem;color:var(--muted)}.scansrc a{color:var(--muted)!important}
.vaudio{display:flex;gap:.8rem;align-items:center;justify-content:center;flex-wrap:wrap;margin:-.2rem 0 .6rem;font-size:.92rem;color:var(--muted)}
#listen{font-size:.95rem;padding:.4rem 1.1rem;width:auto!important}#listen[aria-pressed="true"]{background:rgba(122,46,29,.08)}
.autolab{display:inline-flex;gap:.3rem;align-items:center;cursor:pointer;font-style:italic}.autolab input{accent-color:var(--accent)}
.sheet.speaking{outline:2px solid rgba(122,46,29,.35);outline-offset:3px}
.pages.spread .sheet.speaking{outline-offset:-2px}
/* library v2: uniform card grid + all-books search */
main.library{max-width:960px;text-align:left;padding-top:1rem}
.library a{color:var(--accent)}
main.library h1{text-align:center;margin:.2rem 0 .3rem}
.libintro{text-align:center;color:var(--muted);font-style:italic;margin:0 0 1rem}
.cards{list-style:none;padding:0;margin:1rem 0 1.5rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1.1rem}
.bcard a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--ink);background:#fbf5e6;border:1px solid var(--edge);border-radius:3px;padding:.8rem .8rem .9rem;text-align:center;transition:border-color .15s,box-shadow .15s}
.bcard a:hover,.bcard a:focus{border-color:var(--accent);box-shadow:0 8px 20px -12px rgba(60,40,10,.5);outline:none}
.bcard .cov{display:block;aspect-ratio:2/3;background:#fff;border:1px solid var(--edge);box-shadow:0 6px 16px -8px rgba(60,40,10,.5);overflow:hidden;margin-bottom:.6rem}
.bcard .cov img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;mix-blend-mode:multiply}
.bcard .ct{display:block;font-size:1.15rem;line-height:1.2;color:var(--accent);flex:1}
.bcard .cy{display:block;color:var(--muted);font-size:.95rem;margin-top:.25rem}
.lsearch{border-bottom:1px solid var(--edge);padding-bottom:.6rem;margin:.2rem 0 1.2rem}
.lsearch h2{font-weight:400;margin:.2rem 0 .2rem;font-size:1.5rem}
.lgroup{margin:1.2rem 0 1.6rem}
.lgroup h3{display:flex;gap:.7rem;align-items:center;font-weight:400;font-size:1.3rem;margin:.4rem 0;border-bottom:1px solid var(--edge);padding-bottom:.4rem}
.lgroup h3 img{width:36px;height:auto;border:1px solid var(--edge);background:#fff;mix-blend-mode:multiply}
.lgroup h3 a{text-decoration:none}.lgroup h3 small{display:block;color:var(--muted);font-size:.85rem;font-style:italic}
.res a.lhit{display:block;color:var(--ink)!important;text-decoration:none}
.res li:has(a.lhit){padding:0}.res a.lhit{padding:.7rem 1rem}
.lmore{margin:.3rem 0 0 .2rem}
@media (max-width:520px){.cards{grid-template-columns:repeat(2,1fr);gap:.7rem}.bcard a{padding:.55rem}.bcard .ct{font-size:1rem}}
/* full-height paper background on long book/library pages (a fixed gradient left white below the first screen in some browsers) */
html{background:var(--paper2)}
body{background:radial-gradient(ellipse at top,#f8f0dc 0%,var(--paper) 45%,var(--paper2) 100%) scroll;min-height:100vh}
/* passage-link margin mark: thin accent rule left of the passage + fleuron by its first line; fades in, holds ~3s, softens to 40% */
.pages{container-type:inline-size}
.mmark{position:absolute;width:2.5px;background:var(--accent);border-radius:2px;pointer-events:none;opacity:0;animation:mmark 4.2s ease forwards}
.mmark span{position:absolute;top:-.1em;right:calc(100% + .25em);color:var(--accent);font-size:clamp(12px,1.7cqw,22px);line-height:1}
.mmark.tight span{right:auto;left:50%;top:auto;bottom:calc(100% + .1em);transform:translateX(-50%)}
@keyframes mmark{0%{opacity:0}10%{opacity:1}81%{opacity:1}100%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.mmark{animation:none;opacity:.4}}
/* click/tap the page to turn it; desktop hover hint ‹ › */
@media (hover:hover) and (pointer:fine){
 .sheet[data-dir]{cursor:pointer}
 .sheet[data-dir]::after{position:absolute;top:50%;transform:translateY(-50%);font-size:2.4rem;line-height:1;color:var(--accent);opacity:.45;pointer-events:none;font-family:"IM Fell English",Georgia,serif;padding:.4rem .5rem;border-radius:999px;background:rgba(243,233,210,.75)}
 .sheet[data-dir=prev]::after{content:"‹";left:.4rem}
 .sheet[data-dir=next]::after{content:"›";right:.4rem}
}
/* zoom: #pages scales inside #zwrap */
.zwrap{overflow:hidden;touch-action:pan-y;position:relative}
.zwrap .pages{transform-origin:0 0;padding-bottom:26px}
.zwrap.zoomed{touch-action:none;cursor:grab}.zwrap.zoomed .sheet{cursor:grab}.zwrap.dragging,.zwrap.dragging .sheet{cursor:grabbing}
.zwrap.zoomed .sheet img{user-select:none;-webkit-user-drag:none}
.zctl{display:inline-flex;gap:.2rem;align-items:center}
.zctl button{min-width:2.2em;padding:.35rem .6rem!important}
.zctl #zfit{min-width:3.6em}
@media (max-width:520px){.zctl{display:none}}
/* passage highlight: stays until first touch/click/scroll/key, then fades */
.hl.psg{transition:opacity 1.5s ease}.hl.psg.fading{opacity:0}
/* read-along: sentence being spoken (soft yellow, fades between sentences) */
.hl.ra{background:rgba(250,214,90,.32);border-color:rgba(205,150,20,.35);opacity:0;transition:opacity .28s ease}
.hl.ra.on{opacity:1}
/* one-page layout toggle (wide screens only; narrow screens always show one page) */
@media (max-width:899.98px){#layout{display:none}}
body.searchview #layout{display:none}
body.reading.onepage:not(.searchview) .sheet img{width:720px;max-width:100%;max-height:none}

/* bottom search under the reader (book pages) */
.bsform{max-width:640px;margin:1.4rem auto .3rem}
body.reading form.bsform{display:flex}
@media (max-width:600px){.bsform{margin:1rem .2rem .3rem}}

/* page-turn animation (v15): overlay of cloned sheets above the freshly rendered pages; see flipRun in book.js */
.flipov{position:absolute;inset:0;pointer-events:none;z-index:2;perspective:2600px}
.flipov .sheet{position:absolute;margin:0!important;max-width:none!important;box-sizing:border-box}
.flipov .sheet img{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important}
.flipov .sheet::after{content:none!important}
.flipov .leaf{position:absolute;transform-style:preserve-3d;will-change:transform}
.flipov .leaf .face{left:0!important;top:0!important;width:100%!important;height:100%!important;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flipov .leaf .back{transform:rotateY(180deg)}
.flipov .fshade{position:absolute;inset:0;opacity:0;pointer-events:none}
.flipov .fshade.r{background:linear-gradient(90deg,rgba(40,25,5,.05),rgba(40,25,5,.45))}
.flipov .fshade.l{background:linear-gradient(270deg,rgba(40,25,5,.05),rgba(40,25,5,.45))}
.flipov .cast{position:absolute;opacity:0;pointer-events:none;z-index:1}
.flipov .cast.r{background:linear-gradient(90deg,rgba(40,25,5,.35),rgba(40,25,5,.08) 45%,rgba(40,25,5,0) 75%)}
.flipov .cast.l{background:linear-gradient(270deg,rgba(40,25,5,.35),rgba(40,25,5,.08) 45%,rgba(40,25,5,0) 75%)}
.flipov .leaf{z-index:2}
.zwrap.flipping{overflow:visible}
@media (prefers-reduced-motion:reduce){.flipov{display:none}}
.flipov .sheet.peel{z-index:3;box-shadow:0 12px 34px -10px rgba(60,40,10,.55)!important}
/* keep the sticky reader bar just below the fixed corner menu */
.vbar{top:2.2rem}
body.reading main.book{padding-top:2.2rem}
@media (max-width:600px){.vbar{top:1.9rem}body.reading main.book{padding-top:1.9rem}}