:root{
  --paper:#f6f1e7; --paper2:#efe7d6; --card:#fffdf8; --ink:#2a2219; --ink2:#5e5243; --ink3:#8b7d6a;
  --rule:#ddd1bb; --accent:#7a2e1f; --gold:#b8872f; --hl:rgba(196,150,62,.13); --hl2:rgba(196,150,62,.28);
  --serif:"EB Garamond","Iowan Old Style",Palatino,Georgia,serif; --display:"Cormorant Garamond","EB Garamond",Georgia,serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; --topH:64px;
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--topH) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
a{color:var(--accent)}

/* top bar */
.top{position:sticky;top:0;z-index:30;background:rgba(246,241,231,.92);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.top-inner{max-width:1180px;margin:0 auto;height:var(--topH);display:flex;align-items:center;gap:12px;padding:0 18px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--display);font-size:24px;letter-spacing:.01em;white-space:nowrap}
.brand b{font-weight:600}.brand i{color:var(--accent)}
.brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--accent);color:#f6e7c1;font-size:17px}
.chapnav{display:flex;align-items:center;gap:4px;margin-left:auto}
.icon-btn{border:0;background:transparent;width:36px;height:36px;border-radius:50%;font-size:24px;line-height:1;display:grid;place-items:center;color:var(--ink2)}
.icon-btn:hover{background:var(--paper2);color:var(--ink)}
.chap-btn{border:1px solid var(--rule);background:var(--card);border-radius:999px;padding:7px 16px;font-family:var(--sans);font-size:14px;font-weight:500;min-width:132px}
.chap-btn:hover{border-color:var(--gold)}
.caret{color:var(--ink3);font-size:11px;margin-left:2px}
.gallery-btn{display:flex;align-items:center;gap:8px;border:1px solid var(--accent);background:var(--accent);color:#fbf3e0;border-radius:999px;padding:7px 14px;font-family:var(--sans);font-size:14px;font-weight:500}
.gallery-btn svg{width:16px;height:16px;fill:currentColor}
.gallery-btn .count{background:rgba(255,255,255,.18);border-radius:999px;padding:1px 8px;font-size:12px}
.gallery-btn:hover{filter:brightness(1.1)}
.chapgrid{max-width:1180px;margin:0 auto;padding:6px 18px 16px;display:grid;grid-template-columns:repeat(14,1fr);gap:6px}
.chapgrid button{border:1px solid var(--rule);background:var(--card);border-radius:8px;padding:8px 0 6px;font-family:var(--sans);font-size:14px;position:relative}
.chapgrid button small{display:block;font-size:10px;color:var(--ink3);margin-top:1px}
.chapgrid button.cur{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chapgrid button.cur small{color:#cbbfa9}
.chapgrid button:hover:not(.cur){border-color:var(--gold)}
.progress{height:2px;background:transparent}.progress div{height:100%;width:0;background:var(--gold);transition:width .15s}

/* reader */
.reader{max-width:760px;margin:0 auto;padding:28px 22px 120px;outline:none}
.intro{text-align:center;padding:36px 0 18px;border-bottom:1px solid var(--rule);margin-bottom:10px}
.intro .kicker{font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.intro h1{font-family:var(--display);font-weight:500;font-size:clamp(40px,7vw,64px);margin:8px 0 6px;line-height:1}
.intro h1 i{color:var(--accent)}
.intro p{color:var(--ink2);font-size:18px;line-height:1.55;max-width:560px;margin:10px auto}
.legend{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:13px;color:var(--ink2);background:var(--card);border:1px solid var(--rule);border-radius:999px;padding:6px 14px;margin-top:8px}
.legend .sw{display:inline-block;width:28px;height:14px;background:var(--hl2);border-left:2px solid var(--gold);border-radius:2px}
.chapter{padding-top:30px}
.chapter h2{font-family:var(--display);font-weight:500;text-align:center;font-size:20px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink3);margin:24px 0 4px}
.chapter h2 .num{display:block;font-size:64px;letter-spacing:0;color:var(--accent);line-height:1;margin-top:4px}
.chapter .ch-sub{text-align:center;font-family:var(--sans);font-size:12.5px;color:var(--ink3);margin-bottom:22px}
.chapter .ch-sub button{border:0;background:none;color:var(--accent);text-decoration:underline;text-underline-offset:3px;font-size:12.5px;padding:0}
.ph{display:flex;align-items:center;gap:10px;margin:26px 0 6px;padding:0;border:0;background:none;text-align:left;width:100%;font-family:var(--display);font-size:21px;font-weight:600;color:var(--ink)}
.ph .ph-ref{font-family:var(--sans);font-size:12px;font-weight:500;color:var(--ink3);letter-spacing:.04em}
.ph .ph-thumbs{display:flex;margin-left:auto}
.ph .ph-thumbs img{width:30px;height:30px;object-fit:cover;border-radius:50%;border:2px solid var(--paper);margin-left:-9px;background:var(--paper2)}
.ph:hover{color:var(--accent)}
.v{font-size:20px;line-height:1.72;margin:0;padding:2px 10px 2px 44px;position:relative;border-left:2px solid transparent;border-radius:0 4px 4px 0;transition:background .15s}
.v .n{position:absolute;left:8px;top:7px;width:28px;text-align:right;font-family:var(--sans);font-size:11px;font-weight:600;color:var(--ink3)}
.v.art{background:var(--hl);border-left-color:var(--gold);cursor:pointer}
.v.art:hover,.v.art.on{background:var(--hl2)}
.v.flash{animation:flash 1.8s ease}
@keyframes flash{0%,30%{background:rgba(196,150,62,.45)}100%{}}
.mk{display:inline-flex;align-items:center;gap:4px;vertical-align:2px;margin-left:6px;border:1px solid var(--gold);background:var(--card);color:var(--accent);border-radius:999px;padding:1px 8px 1px 6px;font-family:var(--sans);font-size:11.5px;font-weight:600;line-height:18px;box-shadow:0 1px 2px rgba(80,50,10,.12)}
.mk svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8}
.mk:hover{background:var(--accent);color:#fbf3e0;border-color:var(--accent)}
.v.dim{background:transparent;border-left-color:transparent;cursor:default}
.v.dim .mk{display:none}
.no-art{font-family:var(--sans);text-align:center;font-size:13px;color:var(--ink3);font-style:italic}
.foot{margin-top:60px;padding-top:20px;border-top:1px solid var(--rule);font-family:var(--sans);font-size:12.5px;color:var(--ink3);line-height:1.6;text-align:center}
.endnav{display:flex;justify-content:space-between;margin-top:40px;font-family:var(--sans)}
.endnav button{border:1px solid var(--rule);background:var(--card);border-radius:999px;padding:8px 16px;font-size:14px}

/* popup */
.pop{position:absolute;z-index:40;width:min(400px,calc(100vw - 24px));background:var(--card);border:1px solid var(--rule);border-radius:14px;box-shadow:0 18px 50px rgba(60,40,10,.22),0 2px 6px rgba(60,40,10,.08);overflow:hidden;animation:popin .16s ease}
@keyframes popin{from{opacity:0;transform:translateY(6px) scale(.98)}}
.pop-head{padding:14px 16px 10px;border-bottom:1px solid var(--rule);display:flex;gap:8px;align-items:flex-start}
.pop-head .t{font-family:var(--display);font-size:20px;font-weight:600;line-height:1.15}
.pop-head .r{font-family:var(--sans);font-size:12px;color:var(--ink3);margin-top:3px}
.pop-head .icon-btn{margin:-6px -8px 0 auto;flex:none}
.pop-list{max-height:min(420px,60vh);overflow:auto;padding:6px}
.pv{display:flex;gap:12px;align-items:center;width:100%;text-align:left;border:0;background:none;padding:8px;border-radius:10px}
.pv:hover,.pv:focus-visible{background:var(--paper)}
.pv img{width:64px;height:64px;object-fit:cover;border-radius:8px;flex:none;background:var(--paper2)}
.pv .pt{font-size:16.5px;line-height:1.2;font-weight:500}
.pv .pa{font-family:var(--sans);font-size:12.5px;color:var(--ink2);margin-top:3px}
.pv .pm{font-family:var(--sans);font-size:11px;color:var(--ink3);margin-top:3px}
.pv.focus .pm b{color:var(--accent);font-weight:600}
.pv .go{margin-left:auto;color:var(--ink3);font-size:20px}
.pop-foot{font-family:var(--sans);font-size:11.5px;color:var(--ink3);padding:8px 16px 12px;border-top:1px solid var(--rule)}

/* panel */
.panel{position:fixed;z-index:35;top:0;right:0;bottom:0;width:min(420px,100vw);background:var(--card);border-left:1px solid var(--rule);display:flex;flex-direction:column;box-shadow:-20px 0 50px rgba(60,40,10,.12);animation:slidein .2s ease}
@keyframes slidein{from{transform:translateX(30px);opacity:0}}
.panel-head{padding:14px 16px 12px;border-bottom:1px solid var(--rule)}
.panel-title{display:flex;align-items:center;font-family:var(--display);font-size:24px;font-weight:600}
.panel-title .close{margin-left:auto}
.filters{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.filters input,.filters select{font-family:var(--sans);font-size:14px;border:1px solid var(--rule);border-radius:10px;padding:9px 11px;background:var(--paper);color:var(--ink);width:100%}
.filters input:focus,.filters select:focus{outline:2px solid var(--gold);outline-offset:-1px}
.selects{display:flex;gap:8px}
.filter-note{font-family:var(--sans);font-size:12px;color:var(--ink3);display:flex;gap:8px;align-items:center}
.filter-note button{border:0;background:none;color:var(--accent);text-decoration:underline;padding:0;font-size:12px}
.panel-body{overflow:auto;padding:12px 16px 40px;flex:1}
.pgroup{font-family:var(--sans);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin:16px 0 8px;display:flex;gap:8px;align-items:baseline}
.pgroup button{border:0;background:none;padding:0;color:var(--accent);font-size:11px;letter-spacing:0;text-transform:none;margin-left:auto}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{border:1px solid var(--rule);background:var(--paper);border-radius:10px;overflow:hidden;padding:0;text-align:left;display:flex;flex-direction:column}
.tile img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--paper2);transition:transform .3s}
.tile:hover img{transform:scale(1.04)}
.tile .tt{padding:7px 9px 9px;font-size:14.5px;line-height:1.2}
.tile .ta{font-family:var(--sans);font-size:11px;color:var(--ink3);margin-top:3px}
.tile .imgw{overflow:hidden}
.empty{font-family:var(--sans);font-size:14px;color:var(--ink3);text-align:center;padding:30px 10px}
.scrim{position:fixed;inset:0;z-index:34;background:rgba(30,20,10,.25)}

/* detail */
.detail{position:fixed;inset:0;z-index:50;background:#14110d;display:grid;grid-template-columns:1fr 420px;animation:fadein .18s ease}
@keyframes fadein{from{opacity:0}}
.detail-stage{position:relative;overflow:hidden;touch-action:none;cursor:grab;background:radial-gradient(ellipse at center,#2a241c 0%,#14110d 70%)}
.detail-stage.dragging{cursor:grabbing}
.detail-stage img{position:absolute;left:50%;top:50%;max-width:none;transform-origin:0 0;user-select:none;-webkit-user-drag:none;box-shadow:0 20px 60px rgba(0,0,0,.5);opacity:0;transition:opacity .25s}
.detail-stage img.ready{opacity:1}
.stage-spinner{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px;border:3px solid rgba(255,255,255,.15);border-top-color:#d9b46a;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.zoom-ctl{position:absolute;right:16px;bottom:16px;display:flex;flex-direction:column;background:rgba(20,17,13,.75);border:1px solid rgba(255,255,255,.12);border-radius:12px;overflow:hidden}
.zoom-ctl button{border:0;background:none;color:#eee3cc;width:42px;height:40px;font-size:20px;font-family:var(--sans)}
.zoom-ctl button+button{border-top:1px solid rgba(255,255,255,.1)}
.zoom-ctl button:hover{background:rgba(255,255,255,.08)}
.stage-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-family:var(--sans);font-size:12px;color:#cfc3ab;background:rgba(20,17,13,.7);padding:6px 12px;border-radius:999px;pointer-events:none;transition:opacity .6s;white-space:nowrap}
.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);border:0;width:46px;height:46px;border-radius:50%;background:rgba(20,17,13,.6);color:#eee3cc;font-size:30px;line-height:1}
.nav-arrow:hover{background:rgba(20,17,13,.9)}
.nav-arrow.left{left:14px}.nav-arrow.right{right:70px}
.detail-info{background:var(--paper);overflow:auto;padding:26px 28px 40px;position:relative}
.detail-close{position:absolute;right:14px;top:14px;font-size:28px}
.d-eyebrow{font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);padding-right:40px}
.detail-info h2{font-family:var(--display);font-weight:600;font-size:32px;line-height:1.08;margin:10px 0 6px}
.d-artist{font-size:19px;color:var(--ink2);font-style:italic}
.meta{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:18px 0;padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-family:var(--sans);font-size:13.5px}
.meta dt{color:var(--ink3)}.meta dd{margin:0;color:var(--ink)}
.d-note{font-size:18.5px;line-height:1.55;color:var(--ink)}
.d-verses{margin-top:22px;background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--gold);border-radius:4px 10px 10px 4px;padding:14px 16px}
.d-label{font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px}
#dVerses{font-size:17.5px;line-height:1.6;max-height:300px;overflow:auto}
#dVerses sup{font-family:var(--sans);font-size:10px;font-weight:600;color:var(--gold);margin-right:3px}
.text-link{border:0;background:none;padding:0;margin-top:10px;color:var(--accent);font-family:var(--sans);font-size:13px;font-weight:500}
.d-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.d-links a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:999px;padding:8px 14px}
.d-links a:hover{border-color:var(--accent);color:var(--accent)}
.d-links a span{color:var(--ink3);font-size:11px}
.d-pos{margin-top:22px;font-family:var(--sans);font-size:12px;color:var(--ink3)}

@media (max-width:900px){
  .detail{grid-template-columns:1fr;grid-template-rows:58vh 1fr}
  .detail-info{padding:22px 20px 40px;border-radius:16px 16px 0 0;margin-top:-14px;z-index:2}
  .nav-arrow.right{right:14px}
  .zoom-ctl{bottom:26px;flex-direction:row}
  .zoom-ctl button+button{border-top:0;border-left:1px solid rgba(255,255,255,.1)}
  .stage-hint{display:none}
}
@media (max-width:640px){
  :root{--topH:56px}
  .top-inner{padding:0 10px;gap:6px}
  .brand{font-size:20px}.brand>span:last-child{display:none}
  .chap-btn{min-width:0;padding:6px 12px}
  .gallery-btn .lbl{display:none}
  .chapgrid{grid-template-columns:repeat(7,1fr)}
  .reader{padding:12px 14px 100px}
  .v{font-size:18.5px;padding-left:36px}
  .v .n{left:2px}
  .pop{position:fixed;left:0!important;right:0;bottom:0;top:auto!important;width:100%;border-radius:18px 18px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .panel{width:100vw}
  .detail-info h2{font-size:27px}
}
@media (min-width:1101px){
  body.panel-open .reader{margin-left:max(20px,calc((100vw - 420px - 760px)/2));margin-right:440px}
  body.panel-open .panel{top:var(--topH);box-shadow:none}
}