/* Arcanum — dark, gilded theme. Mobile-first; respects iOS safe areas. */
:root{
  --bg:#0b0912; --bg2:#14101f; --panel:#1b1629; --line:#2d2542; --ink:#ece4d2; --muted:#a49cb4;
  --gold:#d4af6a; --gold2:#f1d79c; --violet:#7c5cbf; --danger:#d9776b; --ok:#86c3a0;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
  --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{min-height:100%;min-height:-webkit-fill-available;min-height:100dvh}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);-webkit-text-size-adjust:100%}
body{min-height:100vh;min-height:-webkit-fill-available;min-height:100dvh;background:
  radial-gradient(1200px 600px at 50% -200px,rgba(124,92,191,.3),transparent 70%),
  radial-gradient(800px 400px at 100% 0,rgba(212,175,106,.12),transparent 60%),var(--bg);background-attachment:fixed}
a{color:var(--gold2);text-decoration:none}
button{font:inherit;color:inherit}
.hidden{display:none!important}
.muted{color:var(--muted)} .small{font-size:.85rem} .center{text-align:center;margin:1.2rem 0}
#view{padding:calc(var(--st) + 10px) calc(var(--sr) + 16px) calc(var(--sb) + 90px) calc(var(--sl) + 16px);max-width:1100px;margin:0 auto}

/* tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:space-around;
  padding:8px calc(var(--sr) + 8px) calc(var(--sb) + 6px) calc(var(--sl) + 8px);
  background:rgba(14,11,22,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--line)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);font:600 .7rem var(--sans);letter-spacing:.02em}
.tabbar a span{font-size:1.35rem;line-height:1.2;font-family:var(--serif)}
.tabbar a.on{color:var(--gold)}
body.reading .tabbar{display:none}

/* hero */
.hero{text-align:center;padding:28px 0 8px}
.crest{font-size:2.4rem;color:var(--gold);text-shadow:0 0 24px rgba(212,175,106,.6)}
.hero h1{font-size:2.6rem;margin:.1em 0 0;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  background:linear-gradient(180deg,var(--gold2),var(--gold) 60%,#9c7a3c);-webkit-background-clip:text;background-clip:text;color:transparent}
.tag-line{margin:.2em 0 1.2em;color:var(--muted);font-style:italic;letter-spacing:.04em}
.searchbar{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:0 14px;margin:10px 0}
.searchbar span{color:var(--gold);font-size:1.2rem}
.searchbar input{flex:1;background:none;border:0;outline:0;color:var(--ink);font:16px var(--sans);padding:13px 0;-webkit-appearance:none}

section{margin:22px 0}
.sec{font-weight:500;font-size:1.15rem;letter-spacing:.06em;color:var(--gold);margin:0 0 10px;display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:6px}
.sec .more{font:600 .8rem var(--sans)}
.eyebrow{font:700 .72rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}

/* book of the day */
.botd-card{display:flex;gap:16px;align-items:center;padding:14px;border-radius:18px;color:var(--ink);
  background:linear-gradient(135deg,rgba(124,92,191,.25),rgba(212,175,106,.12));border:1px solid rgba(212,175,106,.35);box-shadow:0 10px 40px rgba(0,0,0,.4)}
.botd-card img{width:96px;height:136px;object-fit:cover;border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.6);background:var(--bg2)}
.botd-card h2{margin:0 0 4px;font-size:1.25rem;font-weight:500}
.botd-card p{margin:0 0 10px;color:var(--muted)}

/* shelves, chips, categories */
.shelves{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.shelf{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;color:var(--ink);display:flex;flex-direction:column;gap:4px}
.shelf .g{font-size:1.5rem;color:var(--gold)} .shelf b{font-weight:500;line-height:1.2} .shelf small{color:var(--muted);font-family:var(--sans)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--ink);font:500 .88rem var(--sans)}
.chip span{color:var(--gold)}
.chips.small .chip{font-size:.78rem;padding:5px 10px}
.catlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}
.cat{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:12px;background:var(--panel);border:1px solid var(--line);color:var(--ink)}
.cat .g{font-size:1.4rem;width:1.8rem;text-align:center;color:var(--gold)}
.cat b{display:block;font-weight:500} .cat small{color:var(--muted);font-family:var(--sans);font-size:.8rem;line-height:1.35}

.pagehead{padding:14px 0 4px}
.pagehead h1{margin:0;font-weight:500;font-size:1.9rem;color:var(--gold2)}
.pagehead p{margin:.3em 0 .8em}
.big-glyph{font-size:2.2rem;color:var(--gold)}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin:8px 0 14px;font:500 .85rem var(--sans);color:var(--muted)}
.toolbar select{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:inherit;margin-left:6px}
.seg{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:4px;margin:8px 0 14px}
.seg a{flex:1;text-align:center;padding:8px 6px;border-radius:9px;color:var(--muted);font:600 .8rem var(--sans)}
.seg a.on{background:var(--line);color:var(--gold2)}
.seg.wrap{flex-wrap:wrap}

/* book cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px 12px}
.rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.rail .card{flex:0 0 120px;scroll-snap-align:start}
.card{color:var(--ink);display:flex;flex-direction:column;gap:8px}
.cover{position:relative;aspect-ratio:2/3;border-radius:6px;overflow:hidden;background:linear-gradient(160deg,#2a2140,#120e1c);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.45)}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.cover-fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:2.6rem;color:var(--gold);opacity:.6}
.meta .title{font-size:.95rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.meta .by{font:500 .76rem var(--sans);color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.compact .title{font-size:.85rem;-webkit-line-clamp:2}
.tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.tag{font:600 .66rem var(--sans);padding:2px 6px;border-radius:5px;background:var(--line);color:var(--muted);letter-spacing:.02em}
.tag.src{background:rgba(124,92,191,.25);color:#cbb8f0} .tag.pd{background:rgba(134,195,160,.18);color:var(--ok)} .tag.warn{background:rgba(217,119,107,.18);color:var(--danger)}

/* shelf list */
.shelf-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.shelf-list a{display:flex;gap:12px;align-items:center;padding:10px;border-radius:12px;background:var(--panel);border:1px solid var(--line);color:var(--ink)}
.shelf-list .n{width:1.6rem;text-align:center;color:var(--gold);font-size:1.1rem}
.shelf-list img{width:46px;height:66px;object-fit:cover;border-radius:4px;background:var(--bg2)}
.shelf-list b{font-weight:500;display:block} .shelf-list small{color:var(--muted);font-family:var(--sans)}
.elsewhere-h{font-size:1rem;font-weight:500;color:var(--gold);margin:1.4em 0 .6em;letter-spacing:.04em}
.shelf-list.elsewhere a{border-style:dashed}
.ext-tag{display:inline-block;margin-top:4px;font-style:normal;font-family:var(--sans);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}

/* detail */
.detail-top{display:flex;gap:18px;align-items:flex-start;padding-top:12px}
.detail-cover{width:130px;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.6);background:var(--bg2)}
.detail h1{margin:0 0 6px;font-weight:500;font-size:1.45rem;line-height:1.2;color:var(--gold2)}
.detail .by{margin:0 0 6px;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 20px;border-radius:12px;border:1px solid var(--gold);
  background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1a1208;font:700 .92rem var(--sans);cursor:pointer}
.btn.ghost{background:transparent;color:var(--gold2)}
.btn.small{padding:6px 12px;font-size:.78rem}
.btn:disabled{opacity:.6}
.desc{line-height:1.6;color:#d9d0bf;white-space:pre-line}
.files{margin:14px 0;font-family:var(--sans);font-size:.85rem}
.files summary{color:var(--gold);cursor:pointer}
.files a{display:block;padding:6px 0;border-bottom:1px solid var(--line)}
.marks-inline{margin-bottom:10px}

.list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.list li{display:flex;align-items:center;background:var(--panel);border:1px solid var(--line)}
.list li a{flex:1;padding:12px;color:var(--ink)} .list b{font-weight:500;display:block} .list small{color:var(--muted);font-family:var(--sans)}
.prog{height:3px;background:var(--line);border-radius:2px;margin-top:8px;overflow:hidden}.prog i{display:block;height:100%;background:var(--gold)}
.bm-group{margin:12px 0}.bm-group b{display:block;font-weight:500;margin-bottom:6px}
.icon-btn{background:none;border:0;color:var(--gold2);font-size:1.4rem;min-width:44px;min-height:44px;cursor:pointer}

.empty{text-align:center;padding:50px 10px}
.sigil{font-size:2.6rem;color:var(--gold);opacity:.85}
.spin{display:inline-block;animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.prose{line-height:1.65}.prose h3{color:var(--gold);font-weight:500}
.toggle{display:flex;gap:10px;align-items:center;padding:12px;background:var(--panel);border-radius:12px;border:1px solid var(--line);font-family:var(--sans)}
.toggle input{width:22px;height:22px;accent-color:var(--gold)}
.foot{text-align:center;margin-top:30px}

#toast{position:fixed;left:50%;bottom:calc(var(--sb) + 90px);transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:100;
  background:rgba(30,24,46,.96);border:1px solid var(--gold);color:var(--ink);padding:10px 16px;border-radius:12px;font:500 .88rem var(--sans);transition:.25s;max-width:90vw}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast.has-act{pointer-events:auto;display:flex;align-items:center;gap:14px;padding:6px 6px 6px 16px;white-space:nowrap}
#toast .toast-act{background:none;border:1px solid rgba(212,175,106,.55);border-radius:9px;color:var(--gold2);font:600 .86rem var(--sans);padding:7px 14px;cursor:pointer}
#toast .toast-act:active{background:rgba(212,175,106,.15)}

/* reader */
#reader-root:empty{display:none}
#reader-root{position:fixed;inset:0;z-index:50;background:var(--bg)}
.reader{position:absolute;inset:0;display:flex;flex-direction:column}
.reader-bar{display:flex;align-items:center;gap:2px;padding:calc(var(--st) + 8px) calc(var(--sr) + 12px) 6px calc(var(--sl) + 8px);background:rgba(14,11,22,.95);border-bottom:1px solid var(--line);z-index:2}
.reader-title{flex:1;min-width:0;text-align:center}
.reader-title .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.95rem}
.reader-title .s{font:500 .72rem var(--sans);color:var(--muted)}
.pages{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:8px 8px 40px;display:flex;flex-direction:column;align-items:center;gap:10px;touch-action:pan-x pan-y pinch-zoom}
.page{position:relative;flex:none;background:#f4ecd8;border-radius:2px;box-shadow:0 4px 18px rgba(0,0,0,.5);overflow:hidden}
.page canvas,.page img{display:block;width:100%;height:100%}
.page img{object-fit:contain}
.page .pnum{position:absolute;inset:0;display:grid;place-items:center;color:#9a8c6e;font-size:1.4rem}
.page.ready .pnum{display:none}
.theme-paper .page{background:#fff}
.theme-sepia .page canvas,.theme-sepia .page img{filter:sepia(.35) brightness(.96)}
.theme-night .page{background:#111}
.theme-night .page canvas,.theme-night .page img{filter:invert(.92) hue-rotate(180deg) sepia(.15)}
.reader-load{position:absolute;inset:40% 0 auto;text-align:center;padding:0 30px;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--muted)}
.reader-load .bar{width:180px;height:3px;background:var(--line);border-radius:2px;overflow:hidden}.reader-load .bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .2s}
.reader-menu{position:absolute;top:calc(var(--st) + 56px);right:calc(var(--sr) + 8px);z-index:3;width:min(300px,92vw);max-height:70vh;max-height:70dvh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px;box-shadow:0 20px 50px rgba(0,0,0,.6);font-family:var(--sans);font-size:.9rem}
.reader-menu .row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.reader-menu button{background:var(--line);border:0;border-radius:8px;padding:8px 12px;color:var(--ink);cursor:pointer}
.reader-menu input{width:70px;background:var(--bg2);border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:6px;font-size:16px}
.reader-menu .marks{display:flex;flex-direction:column;gap:6px;padding-top:8px}.reader-menu .lbl{color:var(--gold);font-size:.8rem}
.reader-foot{display:flex;align-items:center;gap:10px;padding:6px calc(var(--sr) + 14px) calc(var(--sb) + 6px) calc(var(--sl) + 14px);background:rgba(14,11,22,.95);border-top:1px solid var(--line);font:600 .75rem var(--sans);color:var(--muted)}
.reader-foot input{flex:1;accent-color:var(--gold)}
.textpage{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:20px calc(var(--sr) + 22px) calc(var(--sb) + 40px) calc(var(--sl) + 22px);line-height:1.7;max-width:760px;margin:0 auto;width:100%}
.theme-sepia .textpage{background:#efe4c8;color:#3b2f1c}.theme-paper .textpage{background:#fff;color:#222}.theme-night .textpage{color:#d8cfbd}
@media (min-width:700px){.hero h1{font-size:3.4rem}.detail-cover{width:180px}}

/* generated covers (js/covers.js) — used for Google scans and failed thumbnails */
.cover,.cover-box{container-type:inline-size}
.cover-box{position:relative;aspect-ratio:2/3;overflow:hidden;flex:none;background:var(--bg2)}
.cover-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.gen-cover{position:absolute;inset:0;padding:5.5cqw;background:
  radial-gradient(120% 70% at 50% 28%,rgba(241,215,156,.17),transparent 60%),
  linear-gradient(165deg,var(--c1,#2a2140),var(--c2,#120e1c));color:var(--gold)}
.gen-cover::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.35),transparent 7%,transparent 93%,rgba(0,0,0,.25));} /* spine shading */
.gc-frame{position:relative;height:100%;border:max(1px,.9cqw) solid rgba(212,175,106,.75);outline:max(1px,.5cqw) solid rgba(212,175,106,.35);outline-offset:2.4cqw;
  display:flex;flex-direction:column;align-items:center;padding:9cqw 7cqw 7cqw;text-align:center;gap:3cqw}
.gc-corner{position:absolute;width:6cqw;height:6cqw;background:var(--gold);transform:rotate(45deg);box-shadow:0 0 6px rgba(212,175,106,.5)}
.gc-corner.tl{top:-3.4cqw;left:-3.4cqw}.gc-corner.tr{top:-3.4cqw;right:-3.4cqw}.gc-corner.bl{bottom:-3.4cqw;left:-3.4cqw}.gc-corner.br{bottom:-3.4cqw;right:-3.4cqw}
.gc-sigil{width:40cqw;height:40cqw;flex:none;fill:none;stroke:var(--gold2);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(241,215,156,.45))}
.gc-sigil .f{fill:var(--gold2);stroke:none}
.gc-rule{width:70%;display:flex;align-items:center;gap:2cqw;font-size:5cqw;line-height:1;color:var(--gold)}
.gc-rule::before,.gc-rule::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.gc-rule::after{background:linear-gradient(270deg,transparent,var(--gold))}
.gc-title{font-family:var(--serif);font-size:9.2cqw;line-height:1.14;color:var(--gold2);letter-spacing:.02em;font-variant:small-caps;
  flex:none;max-height:calc(4 * 1.14em);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.gc-author{font-family:var(--serif);font-style:italic;font-size:7cqw;line-height:1.2;color:#cdbf9f;margin-top:auto;flex:none;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-year{font-family:var(--serif);font-size:5.4cqw;letter-spacing:.25em;color:rgba(212,175,106,.75)}
.gc-author+.gc-year{margin-top:0}
.gc-title+.gc-year{margin-top:auto}
@container (max-width:90px){ /* tiny thumbnails: just the frame and sigil */
  .gc-title,.gc-author,.gc-year,.gc-rule{display:none}
  .gc-frame{justify-content:center;padding:4cqw}
  .gc-sigil{width:62cqw;height:62cqw}
}
.cover-box.thumb{width:46px;border-radius:4px}
.cover-box.botd{width:96px;border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.6)}
.detail-cover.cover-box{width:130px;border:1px solid var(--line)}
@media (min-width:700px){.detail-cover.cover-box{width:180px}}

/* ---------- page-turn reading mode (StPageFlip, js/pageturn.js) ---------- */
.flipstage{display:none;flex:1;position:relative;overflow:hidden;min-height:0;touch-action:none;-webkit-user-select:none;user-select:none;
  background:radial-gradient(120% 90% at 50% 40%,#211a30 0%,#0d0a14 75%)}
.mode-flip .flipstage{display:block}
.mode-flip .pages,.mode-flip .textpage,.mode-flip .scroll-only,.mode-scroll .flip-only{display:none!important}
.flipbook{position:absolute!important;inset:0;width:100%;height:100%;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.flipbook .stf__wrapper{height:100%;padding:0!important}
.fpage{background:#f2e8d0;overflow:hidden;-webkit-tap-highlight-color:transparent}
.fpage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;-webkit-user-drag:none}
.fpage .pnum{position:absolute;inset:0;display:grid;place-items:center;color:#a8987a;font:500 1.3rem var(--serif)}
.fpage.ready .pnum{display:none}
/* paper: faint fibre texture + spine shading on the gutter side */
.fpage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,rgba(60,40,10,.16),rgba(60,40,10,0) 7%),
    repeating-linear-gradient(0deg,rgba(120,90,40,.018) 0 1px,transparent 1px 3px)}
.fpage.--left::after{background:linear-gradient(270deg,rgba(60,40,10,.2),rgba(60,40,10,0) 9%),
    repeating-linear-gradient(0deg,rgba(120,90,40,.018) 0 1px,transparent 1px 3px)}
.flipstage.spread .fpage.--right::after{background:linear-gradient(90deg,rgba(60,40,10,.22),rgba(60,40,10,0) 9%),
    repeating-linear-gradient(0deg,rgba(120,90,40,.018) 0 1px,transparent 1px 3px)}
.theme-paper .fpage{background:#fff}
.theme-sepia .fpage img{filter:sepia(.35) brightness(.96)}
.theme-night .fpage{background:#161219}
.theme-night .fpage img{filter:invert(.92) hue-rotate(180deg) sepia(.15)}
.theme-night .fpage::after{opacity:.35}
.flipstage .reader-load{inset:38% 0 auto}
/* paginated text pages */
.tpage{display:flex;flex-direction:column;padding:22px 22px 10px;box-sizing:border-box;color:#33281a;background:#efe4c8}
.theme-paper .tpage{background:#fff;color:#222}.theme-night .tpage{background:#17131c;color:#d8cfbd}
.tpage .tbody{flex:1;min-height:0;overflow:hidden;font-family:var(--serif);line-height:1.62;hyphens:auto;-webkit-hyphens:auto;text-align:justify}
.tpage .tbody p{margin:0 0 .7em;text-indent:1.4em}
.tpage .tbody p:first-child{text-indent:0}
.tpage .tbody p.cont{text-indent:0}
.tpage .tbody p.split{margin-bottom:0;text-align-last:justify}
.tpage .tfoot{flex:none;text-align:center;font:500 .72rem var(--sans);color:#9a8a6c;padding-top:6px}
.theme-night .tpage .tfoot{color:#7b715f}

/* =====================================================================================
   v6 — Reading Room, reading lamp, ribbon, cardstock, gifts
   Fonts bundled offline (SIL OFL 1.1, see fonts/OFL-*.txt)
   ===================================================================================== */
@font-face{font-family:"Cormorant SC";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/cormorant-sc-600.woff2) format("woff2")}
@font-face{font-family:"Mrs Saint Delafield";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/mrs-saint-delafield-400.woff2) format("woff2")}
@font-face{font-family:"Pinyon Script";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/pinyon-script-400.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:italic;font-display:swap;src:url(../fonts/cormorant-garamond-500-italic.woff2) format("woff2")}
:root{--sc-font:"Cormorant SC",var(--serif);--script:"Pinyon Script","Snell Roundhand","Apple Chancery",cursive;--oldhand:"Mrs Saint Delafield","Pinyon Script","Snell Roundhand",cursive;
  --brass:linear-gradient(180deg,#f6dc9a 0%,#d2a24f 38%,#a97a2f 62%,#7a5420 100%);
  /* v15: the scene is sized from the screen, not a fixed 784px. Phones: it fills the visible height above the tab bar (--tb), using
     the *small* viewport height (svh) so Safari's collapsing toolbar can't make it jump (100vh fallback for old browsers); the painting is
     fitted by height (width = height × 720/1410), so the whole window, shelf, fireplace and chair are always in view.
     --bgw = the painting's width in px; everything shelf-side (row, spines, bookends) scales by --bgw / 430 */
  --tb:calc(56px + var(--sb));--rrh:calc(100vh - var(--tb) - var(--st));--bgw:calc((var(--rrh) + var(--st)) * .5106)}
@supports (height:100svh){:root{--rrh:calc(100svh - var(--tb) - var(--st))}}
@media (min-width:560px){:root{--rrh:784px;--bgw:430px}}
@media (min-width:700px){:root{--rrh:960px}}
/* v22: on a short tablet viewport (iPad landscape in Safari) the whole scene scales down to fit between the top and the tab bar instead of running off the bottom */
@media (min-width:700px) and (max-height:1100px){:root{--rrh:clamp(600px,calc(100vh - var(--tb) - var(--st)),960px);--bgw:calc(var(--rrh) * .447917)}}
@supports (height:100svh){@media (min-width:700px) and (max-height:1100px){:root{--rrh:clamp(600px,calc(100svh - var(--tb) - var(--st)),960px)}}}

/* ---------- Reading Room scene ---------- */
.rr-host{margin:calc(-1 * (var(--st) + 10px)) calc(-1 * (var(--sr) + 16px)) 0 calc(-1 * (var(--sl) + 16px))}
.rr{position:relative;margin:0 0 22px;height:calc(var(--rrh) + var(--st));overflow:hidden;background:#07060a;isolation:isolate}
.rr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,var(--bg));pointer-events:none;z-index:3}
.rr-bg{position:absolute;bottom:0;left:50%;transform:translateX(-50%);aspect-ratio:720/1410;
  width:calc((var(--rrh) + var(--st)) * .5106);background:url(../img/readingroom.webp) center/100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3.5%,#000 96.5%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3.5%,#000 96.5%,transparent)}
/* v15: when the screen is wider than the painting (SE / 8 Plus), the sides carry a dim, blurred echo of the room instead of black bars */
.rr::before{content:"";position:absolute;inset:-4%;z-index:0;background:url(../img/readingroom.webp) center/cover;filter:blur(14px) brightness(.38) saturate(.85);pointer-events:none}
@media (min-width:560px){.rr::before{display:none}.rr-bg{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
  .rr{background:radial-gradient(60% 80% at 50% 70%,#120c09,#050407)}}
/* v22: iPad / wide screens — the room carries on left and right of the painting (img/readingroom-wide.webp: the painting
   itself in the middle, bookcases, panelling and floor extended to either side) and the scene runs the full width of the screen */
.rr-wide{display:none}
@media (min-width:560px){
  .rr-host{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
  body{overflow-x:clip}
  .rr-wide{display:block;position:absolute;z-index:0;bottom:0;left:50%;transform:translateX(-50%);pointer-events:none;
    height:calc(var(--rrh) + var(--st));aspect-ratio:16/9;background:url(../img/readingroom-wide.webp) center/100% 100% no-repeat;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
}
/* v9: sky seen through the big leaded window (glass area of img/readingroom.webp: x 385–656, y 39–611 of 720×1410) */
.rr-sky{position:absolute;left:53.47%;top:2.766%;width:37.64%;height:40.57%;pointer-events:none;
  -webkit-mask:url(../img/rr-pane.png) 0 0/100% 100% no-repeat;mask:url(../img/rr-pane.png) 0 0/100% 100% no-repeat}
.rr-sky-svg{display:block;width:100%;height:100%}
/* v8: sun and moon are moved with CSS transforms in sky units (1px = 1 unit inside the SVG); eased between updates */
.rr-body{transform-box:view-box;transform-origin:0 0}
.rr.rr-anim .rr-body{transition:transform 1.8s cubic-bezier(.4,0,.2,1),opacity 1.8s ease}
.rr.rr-anim stop,.rr.rr-anim [data-stars],.rr.rr-anim .rr-hglow{transition:stop-color 2s ease,opacity 2s ease}
/* tap the window: approximate sun-time (a quiet sundial); sits over the glass, under the title and shelf */
.rr-sundial{position:absolute;left:53.47%;top:2.766%;width:37.64%;height:40.57%;background:none;border:0;padding:0;cursor:help;-webkit-tap-highlight-color:transparent}
/* daylight in the room: wash and sill spill, golden-hour tint, slanting shafts from the window, glare at the sun */
.rr-daylight,.rr-tint,.rr-sunglow{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen}
.rr-daylight{opacity:var(--day,0);background:radial-gradient(60% 30% at 72% 24%,rgba(255,244,222,.26),transparent 70%),
    radial-gradient(40% 7% at 72% 45%,rgba(255,232,190,.34),transparent 70%),
    radial-gradient(85% 60% at 66% 40%,rgba(255,236,206,.15),transparent 78%)}
.rr-tint{opacity:var(--gold,0);background:radial-gradient(95% 70% at 72% 30%,rgba(255,150,64,.30),rgba(255,110,46,.10) 60%,transparent 85%)}
.rr-sunglow{opacity:var(--sunlit,0);background:radial-gradient(circle at var(--sx,83%) var(--sy,30%),rgba(255,240,205,.55),rgba(255,214,150,.20) 7%,transparent 17%)}
.rr-shafts{position:absolute;left:72%;top:28%;width:42%;height:var(--shaft-len,60%);pointer-events:none;mix-blend-mode:screen;opacity:calc(var(--sunlit,0) * .85);
  transform:translateX(-50%) rotate(var(--shaft-rot,0deg));transform-origin:50% 0;filter:blur(5px);
  background:linear-gradient(90deg,transparent 4%,rgba(var(--shaft-rgb,255,240,208),.14) 10%,transparent 17%,transparent 27%,rgba(var(--shaft-rgb,255,240,208),.2) 34%,transparent 43%,transparent 55%,rgba(var(--shaft-rgb,255,240,208),.16) 62%,transparent 70%,transparent 80%,rgba(var(--shaft-rgb,255,240,208),.12) 87%,transparent 95%);
  -webkit-mask-image:linear-gradient(transparent,#000 22%,rgba(0,0,0,.6) 60%,transparent);mask-image:linear-gradient(transparent,#000 22%,rgba(0,0,0,.6) 60%,transparent)}
.rr.rr-anim .rr-shafts,.rr.rr-anim .rr-sunglow,.rr.rr-anim .rr-daylight,.rr.rr-anim .rr-tint,.rr.rr-anim .rr-moonlight,.rr.rr-anim .rr-moonlight::before{transition:transform 1.8s ease,opacity 1.8s ease}
.rr-stars{animation:rrDrift 140s linear infinite alternate}
.rr-tw{animation:rrTwinkle 4s ease-in-out infinite}
@keyframes rrDrift{from{transform:translateX(0)}to{transform:translateX(-14px)}}
@keyframes rrTwinkle{0%,100%{opacity:1}45%{opacity:.6}60%{opacity:.92}}
/* moonlight: a soft glow over the frame around the moon, and a cool spill below the window onto sill and wall */
.rr-moonlight{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:var(--moonlit,1);
  background:radial-gradient(40% 7% at 72% 45%,rgba(160,180,255,.26),transparent 70%),
    radial-gradient(62% 30% at 72% 24%,rgba(95,120,235,.17),transparent 70%),
    radial-gradient(40% 18% at 80% 62%,rgba(140,160,255,.10),transparent 70%)}
.rr-moonlight::before{content:"";position:absolute;inset:0;opacity:calc(var(--moondisc,1) / max(var(--moonlit,1),.01));
  background:radial-gradient(circle at var(--mx,90%) var(--my,22%),rgba(215,226,255,.50),rgba(160,180,255,.20) 9%,transparent 22%)}
.rr-fire{position:absolute;pointer-events:none;mix-blend-mode:screen;border-radius:50%}
.rr-fire.f1{left:3%;top:64%;width:24%;height:14%;background:radial-gradient(closest-side,rgba(255,180,80,.85),rgba(255,120,40,.32) 60%,transparent);animation:rrFlicker 3.1s infinite}
.rr-fire.f2{left:-10%;top:56%;width:56%;height:34%;background:radial-gradient(closest-side,rgba(255,150,60,.40),rgba(255,120,45,.12) 60%,transparent);animation:rrFlicker 4.7s infinite reverse}
/* v9: a little more light in the room — firelight pooling on the hearth and floor, a rim of firelight on the
   fire-facing side of the leather wingback chair, the candle's halo, and a faint warm lift over the shelves */
.rr-fire.floor{left:-4%;top:72%;width:80%;height:22%;background:radial-gradient(closest-side,rgba(255,140,55,.30),rgba(255,110,40,.10) 60%,transparent);animation:rrFlicker 3.7s infinite}
.rr-fire.chair{left:44%;top:56%;width:30%;height:34%;background:radial-gradient(50% 50% at 30% 52%,rgba(255,150,70,.34),rgba(255,120,50,.10) 55%,transparent 80%);animation:rrFlicker 3.1s infinite;animation-delay:-.4s}
.rr-fire.candle{left:-6%;top:31%;width:32%;height:14%;background:radial-gradient(closest-side,rgba(255,205,120,.5),rgba(255,170,80,.16) 55%,transparent);animation:rrFlicker 2.3s infinite;z-index:1}
/* v10: candle clock. SVG user units = room-image px (x 28–118, y 470–770), drawn 141px (10%) higher so it stands on the
   bookcase board at y≈600 and stays clear of the Reading Room shelf's spines when the shelf is full. */
.rr-candle{position:absolute;left:3.889%;top:23.333%;width:12.5%;height:21.277%;padding:0;margin:0;border:0;background:none;cursor:help;z-index:1;-webkit-tap-highlight-color:transparent}
.rr-candle svg{display:block;width:100%;height:100%;overflow:visible}
.rr-candle .ring{fill:none;stroke:#8a3b22;stroke-width:.9;opacity:.85}
.rr-candle text{font-family:var(--serif);font-size:9.6px;font-weight:700;fill:#6e2614;text-anchor:middle;letter-spacing:-.2px}
.rr-candle .drip{fill:#ecd3a2;stroke:#b48f58;stroke-width:.35}
.rr-candle .rr-cflame{transform-box:fill-box;transform-origin:50% 100%;animation:rrCandle 1.9s ease-in-out infinite}
.rr-candle .rr-chalo{animation:rrFlicker 2.3s infinite}
/* v11: hidden parchment slip, poking up between the book tops on the bookcase's third shelf (room-image px x≈141–171, y≈262–306) */
.rr-slip{position:absolute;left:18.2%;top:17.45%;width:7%;height:5.4%;padding:0;margin:0;border:0;background:none;cursor:pointer;z-index:1;-webkit-tap-highlight-color:transparent} /* the button is a generous tap target around the paper */
.rr-slip-paper{position:absolute;left:-14%;top:34%;width:132%;height:56.6%;filter:brightness(.52) saturate(.8) sepia(.35);opacity:.92;pointer-events:none;
  animation:rrBreathe 5.5s ease-in-out infinite;transform-origin:50% 90%}
.rr-slip-paper svg{display:block;width:100%;height:100%;overflow:visible}
@keyframes rrBreathe{0%,100%{transform:rotate(-.5deg) scaleY(1)}50%{transform:rotate(.7deg) scaleY(1.035)}}
/* glint: a faint warm four-point sparkle on the roll's upper edge (not dimmed by the paper's filter) */
.rr-slip-glint{position:absolute;left:38%;top:18%;width:30%;aspect-ratio:1;margin:-15% 0 0 -15%;pointer-events:none;opacity:0;filter:brightness(1.6);mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(255,236,170,.95),rgba(255,200,100,.35) 45%,transparent 70%),
    linear-gradient(90deg,transparent 8%,rgba(255,230,160,.9) 50%,transparent 92%) center/100% 7% no-repeat,
    linear-gradient(0deg,transparent 8%,rgba(255,230,160,.9) 50%,transparent 92%) center/7% 100% no-repeat}
.rr-slip-glint.twinkle{animation:rrTwinkle 1.5s ease-in-out 1}
@keyframes rrTwinkle{0%{opacity:0;transform:scale(.3) rotate(0)}40%{opacity:.95;transform:scale(1) rotate(20deg)}100%{opacity:0;transform:scale(.5) rotate(45deg)}}
@media (prefers-reduced-motion:reduce){.rr-slip-paper{animation:none}.rr-slip-glint{opacity:.35;transform:scale(.7)}}
.rr-slip:focus-visible{outline:1px solid var(--gold);outline-offset:2px}

/* v13: book menu from a press-and-hold on a shelf spine (bottom sheet on phones, card on wide screens) */
.rr-bookmenu{position:fixed;inset:0;z-index:96;display:flex;align-items:flex-end;justify-content:center;background:rgba(4,3,6,.5);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);animation:rrQuoteBg .22s ease-out both}
.rr-bm-sheet{width:min(420px,100%);padding:10px 16px calc(var(--sb) + 14px);text-align:center;border:1px solid #5a4425;border-bottom:0;border-radius:20px 20px 0 0;
  background:radial-gradient(120% 60% at 50% 0%,rgba(212,175,106,.12),transparent 60%),linear-gradient(180deg,#221a14,#130e0b);
  box-shadow:0 -20px 50px rgba(0,0,0,.7),inset 0 1px 0 rgba(241,215,156,.12);animation:sheetUp .32s cubic-bezier(.2,.8,.2,1) both}
.rr-bm-sheet h3{margin:2px 8px 2px;font:600 1.02rem/1.3 var(--sc-font);letter-spacing:.1em;text-transform:uppercase;color:var(--gold2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rr-bm-by{margin:0 0 6px;color:#a99a7d;font:italic .98rem "Cormorant Garamond",Georgia,serif}
.rr-bm-sheet button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:8px;padding:13px 16px;border-radius:13px;cursor:pointer;
  border:1px solid rgba(212,175,106,.38);background:rgba(212,175,106,.07);color:#efe3c6;font:500 1rem var(--sans)}
.rr-bm-sheet button span{color:var(--gold)}
.rr-bm-sheet button:active,.rr-bm-sheet button:focus-visible{background:rgba(212,175,106,.16);outline:none;border-color:var(--gold)}
.rr-bm-sheet button.cancel{border-color:transparent;background:none;color:#a99a7d;margin-top:4px}
.rr-bookmenu.out{animation:rrQuoteBg .24s ease-in reverse both}
.rr-bookmenu.out .rr-bm-sheet{animation:sheetDown .24s ease-in both}
@media (min-width:700px){
  .rr-bookmenu{align-items:center;padding:24px}
  .rr-bm-sheet{border:1px solid #5a4425;border-radius:18px;padding:16px 20px 14px}
  .rr-bm-sheet .rr-bm-grip{display:none}
}
.rr-bm-grip{width:38px;height:4px;border-radius:2px;background:#5a4425;margin:0 auto 12px}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheetDown{from{transform:none}to{transform:translateY(100%)}}
@media (min-width:700px){
  @keyframes sheetUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
  @keyframes sheetDown{from{transform:none;opacity:1}to{transform:translateY(24px);opacity:0}}
}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@keyframes rrQuoteBg{from{opacity:0}to{opacity:1}}
.rr-ctime{position:absolute;left:25%;top:73.6%;width:46%;z-index:3;pointer-events:none;text-align:center;opacity:0;transition:opacity .9s ease-in;
  --f:calc(var(--cw,360px) * .092);transform:rotate(-2.5deg);transform-origin:50% 50%}
.rr-ctime.on{opacity:1;transition-duration:.6s;transition-timing-function:ease-out}
.rr-ctime::before{content:"";position:absolute;inset:-22% -6%;z-index:-1;background:radial-gradient(closest-side,rgba(10,5,2,.62),rgba(10,5,2,.36) 62%,transparent);filter:blur(2px)}
.rr-ctime span{display:block;font-family:"Pinyon Script","Mrs Saint Delafield","Snell Roundhand",cursive;font-weight:400;color:#f6dfa6;white-space:nowrap;
  text-shadow:0 0 .35em rgba(255,196,96,.85),0 0 1em rgba(255,160,60,.45),0 1px 1px rgba(0,0,0,.7)}
.rr-ctime-s{font-size:calc(var(--f) * .52);line-height:1.05;opacity:.9}
.rr-ctime-t{font-size:var(--f);line-height:1;margin-top:-.05em}
@media (prefers-reduced-motion:reduce){.rr-ctime,.rr-ctime.on{transition:none!important}}
.rr-candle:focus-visible{outline:1px solid var(--gold);outline-offset:2px;border-radius:4px}
@keyframes rrCandle{0%,100%{transform:scale(1,1) skewX(0)}22%{transform:scale(.94,1.06) skewX(2deg)}45%{transform:scale(1.04,.95) skewX(-1.5deg)}70%{transform:scale(.97,1.04) skewX(1deg)}}
.rr-fire.lift{left:-20%;top:20%;width:90%;height:60%;border-radius:0;background:radial-gradient(closest-side,rgba(255,170,95,.10),transparent);animation:none}
.rr-warm{position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(90% 50% at 10% 80%,rgba(255,145,65,.22),transparent 70%),radial-gradient(45% 30% at 62% 78%,rgba(255,140,60,.10),transparent 70%);animation:rrFlicker 5.3s infinite}
@keyframes rrFlicker{0%,100%{opacity:1}12%{opacity:.9}23%{opacity:.97}37%{opacity:.88}51%{opacity:1}64%{opacity:.92}80%{opacity:.98}}

.rr-plant{position:absolute;z-index:3;bottom:0;left:50%;transform:translateX(-50%);aspect-ratio:720/1410;width:var(--bgw);pointer-events:none}
.rr-plant .pl-stems{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pl-st{fill:none;stroke:#0b2814;stroke-linecap:round}.pl-sg{fill:none;stroke:#1f5028;stroke-linecap:round}.pl-sth{fill:none;stroke:#8fb25c;stroke-opacity:.4;stroke-linecap:round;transform:translate(-.9px,-.5px)}.pl-stn{fill:none;stroke:#06180c;stroke-opacity:.32;stroke-dasharray:.9 34}
.pl-rt{fill:none;stroke:#4a3017;stroke-linecap:round}.pl-rth{fill:none;stroke:#c99a66;stroke-opacity:.55;stroke-linecap:round;transform:translate(-.7px,-.3px)}
.pl-sheath path{fill:#8a8458;stroke:#3b3118;stroke-width:.7;stroke-opacity:.7}.pl-sheath .mid{fill:#c9bf86}
.pl-leaf{position:absolute;transform-origin:50% 98%;will-change:transform}
.pl-leaf img{filter:brightness(calc(var(--pb,1) * var(--dim,1))) sepia(var(--pw,0));display:block;width:100%;height:100%;transform-origin:50% 98%;animation:plSway 8s ease-in-out infinite alternate;animation-delay:var(--d,0s);-webkit-user-drag:none;user-select:none}
.pt{position:absolute;inset:0;pointer-events:none}.pt-front{z-index:9}
/* v21: the far part of the vine lives inside the painting (under the shelf, the radio and the clock), masked behind the chair's legs */
.pt-far{-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.pt-far .pt-svg{filter:brightness(calc(var(--pb,1) * .84))}
.pt-sd{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round}.pt-gd .gs{fill:#000;opacity:.3;stroke:none}
.pt-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pt-vs{fill:none;stroke:#1b0f05;stroke-opacity:.75;stroke-linecap:round;stroke-linejoin:round}.pt-vb{fill:none;stroke:#5c3c1c;stroke-linecap:round;stroke-linejoin:round}.pt-vh{fill:none;stroke:#c99a62;stroke-opacity:.6;stroke-linecap:round;stroke-linejoin:round;transform:translate(-.55px,-.4px)}
.pt-nd circle{fill:#6e4a26;stroke:#241407;stroke-width:.7}.pt-nd .hl{fill:#d4a76c;stroke:none;opacity:.7}.pt-nd,.pt-rt,.pt-gd{opacity:0}
.pt-rb{fill:none;stroke:#4a3018;stroke-linecap:round}.pt-rh{fill:none;stroke:#caa06c;stroke-opacity:.55;stroke-linecap:round;transform:translate(-.4px,-.2px)}
.pt-gd .o{fill:none;stroke:#2a1805;stroke-width:2.6}.pt-gd .i{fill:none;stroke:#d9a84e;stroke-width:1.5}.pt-gd .s{fill:#fff0c0;stroke:none}
.pt-leaf{position:absolute;transform-origin:50% 98%;visibility:hidden;opacity:0}
.pt-leaf img{filter:brightness(calc(var(--pb,1) * var(--dim,1))) sepia(var(--pw,0)) saturate(var(--sa,1)) blur(var(--bl,0px));display:block;width:100%;height:100%;transform-origin:50% 98%;-webkit-user-drag:none;user-select:none}
.pt-leaf.sw img{animation:plSway 7s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.pt-tip{visibility:visible}
.pt-leaf.fl img{filter:brightness(calc(var(--pb,1) * var(--dim,1))) sepia(var(--pw,0)) saturate(var(--sa,1)) drop-shadow(0 0 3px rgba(0,0,0,.55))}
.pl-pot{position:absolute;z-index:-1;filter:brightness(var(--pb,1)) sepia(var(--pw,0))}
@keyframes plSway{from{transform:rotate(calc(var(--amp,1deg) * -1))}to{transform:rotate(var(--amp,1deg))}}
.pl-tap{position:absolute;pointer-events:auto;left:var(--tapl,74%);top:var(--tapt,72%);right:0;bottom:10.5%;z-index:12;border:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer}
.pl-soil{position:absolute;z-index:-1;pointer-events:none}
.pl-fx{position:absolute;z-index:10;pointer-events:none}
.pl-can{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;z-index:11;pointer-events:none}
.pl-tap:focus-visible{outline:2px solid rgba(246,223,166,.7);outline-offset:-2px}
.rr-head{position:absolute;z-index:4;left:0;right:0;top:calc(var(--st) + 18px);text-align:center;color:var(--gold)}
.rr-title{margin:0;font:600 1.45rem/1 var(--sc-font);letter-spacing:.2em;text-transform:uppercase;padding-left:.2em;
  background:linear-gradient(180deg,#fbe7b0,#d4af6a 55%,#8e6a2c);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.9)) drop-shadow(0 0 10px rgba(212,175,106,.4))}
.rr-rule{display:block;width:170px;height:12px;margin:6px auto 0;color:#b8924f;opacity:.85}
.rr-menu-btn{position:absolute;left:calc(var(--sl) + 10px);top:-8px;width:52px;height:52px;border:0;background:none;color:var(--gold2);font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.rr-menu{position:absolute;left:calc(var(--sl) + 12px);top:46px;min-width:200px;text-align:left;background:rgba(27,20,16,.97);border:1px solid #5a4425;border-radius:12px;padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.7);font-family:var(--sans);font-size:.9rem}
.rr-menu button,.rr-menu a{display:block;width:100%;text-align:left;background:none;border:0;color:var(--ink);padding:11px 12px;border-radius:8px;cursor:pointer}
.rr-menu button:active,.rr-menu a:active{background:rgba(212,175,106,.15)}

.rr-shelf{position:absolute;z-index:2;left:50%;transform:translateX(-50%);width:min(96%,calc(var(--bgw) * 1.2),520px);top:var(--shelf-top,calc(var(--st) + var(--rrh) * .385))}
.rr-row{position:relative;height:calc(var(--bgw) * .5349);display:flex;align-items:flex-end;justify-content:center;gap:2px;padding:0 4px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.25) 60%,rgba(0,0,0,.42));border-radius:4px 4px 0 0}
@media (min-width:700px){.rr-row{height:calc(var(--rrh) * .302083);gap:4px}}
.rr-shelf{pointer-events:none} .rr-shelf>*{pointer-events:auto} .rr-shelf>.rr-row{pointer-events:none} .rr-shelf>.rr-row>*{pointer-events:auto} /* v10: let taps reach the candle clock behind the row's empty space */
.rr-plank{position:relative;height:calc(var(--bgw) * .0419);margin:0 -8px;background:#3a1a0e url(../img/mahogany.webp) center/cover;border-radius:2px;
  box-shadow:inset 0 2px 0 rgba(255,210,160,.18),inset 0 -3px 4px rgba(0,0,0,.6),0 16px 22px rgba(0,0,0,.75)}
.rr-plank::before{content:"";position:absolute;left:0;right:0;top:-6px;height:6px;background:linear-gradient(#2a120a,#4b2414);transform:perspective(40px) rotateX(30deg);transform-origin:bottom}
.rr-plaque{position:absolute;left:50%;top:3px;transform:translateX(-50%);white-space:nowrap;padding:3px 14px 2px;border-radius:2px;
  font:600 .66rem/1.2 var(--sc-font);letter-spacing:.14em;color:#3b2508;text-shadow:0 1px 0 rgba(255,240,200,.55);
  background:var(--brass);box-shadow:0 1px 0 rgba(255,230,170,.6) inset,0 -1px 0 rgba(0,0,0,.35) inset,0 2px 4px rgba(0,0,0,.6);overflow:hidden}
.rr-plaque b{font-weight:600;letter-spacing:.08em;font-size:.78rem}
.rr-plaque .dot{opacity:.6}
.rr-plaque::before,.rr-plaque::after{content:"";position:absolute;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff1c8,#7a5420)}
.rr-plaque::before{left:4px}.rr-plaque::after{right:4px}
.rr-plaque.glint{background-image:linear-gradient(105deg,transparent 40%,rgba(255,255,245,1) 50%,transparent 60%),var(--brass);background-size:300% 100%,100% 100%;animation:rrGlint 1.6s .6s ease-out 1 both}
@keyframes rrGlint{from{background-position:150% 0,0 0}to{background-position:-50% 0,0 0}}

.spine{position:relative;flex:none;width:calc(var(--bgw) * var(--sw) / 430);height:var(--sh);border:0;padding:0;cursor:pointer;border-radius:3px 3px 1px 1px;
  background-color:var(--sc);background-image:linear-gradient(90deg,rgba(0,0,0,.55),rgba(255,235,200,.13) 28%,rgba(255,235,200,.05) 52%,rgba(0,0,0,.3) 82%,rgba(0,0,0,.6)),url(../img/leather.webp);
  background-size:100% 100%,160px;background-blend-mode:normal,soft-light;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.45),3px 0 4px rgba(0,0,0,.55),0 -1px 0 rgba(255,220,170,.08) inset;
  display:flex;flex-direction:column;align-items:center;transition:transform .25s cubic-bezier(.2,.8,.2,1);transform-origin:bottom}
.spine:active,.spine:focus-visible{transform:translateY(-8px) rotate(var(--lean,0deg))}
@media (hover:hover){.spine:hover{transform:translateY(-8px) rotate(var(--lean,0deg))}}
.sp-band{flex:none;width:100%;height:9px;margin-top:9%;border-top:1px solid rgba(232,196,120,.85);border-bottom:1px solid rgba(232,196,120,.85);
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(255,230,180,.15) 50%,rgba(0,0,0,.35));box-shadow:0 1px 0 rgba(0,0,0,.5)}
.sp-band.b{margin-top:6px;margin-bottom:9%}
.sp-title{flex:1;min-height:0;margin:10px 0 6px;writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font:600 .74rem/1 var(--sc-font);letter-spacing:.09em;text-transform:uppercase;
  background:linear-gradient(90deg,#9c7a3c,#f6dfa4 45%,#c99a4a);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
@media (min-width:700px){.sp-title{font-size:calc(var(--bgw) * .03126)}}
.sp-orn{flex:none;width:58%;max-width:16px;fill:#d9b56c;filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
/* v13: press-and-hold a spine. No iOS callout/selection; the lift and a soft gold glow build while held. */
.spine{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.spine.pressing{transform:translateY(-12px) rotate(var(--lean,0deg));transition:transform .36s cubic-bezier(.3,.7,.3,1),box-shadow .36s;
  box-shadow:inset 0 0 0 1px rgba(241,215,156,.55),0 0 14px rgba(241,215,156,.38),3px 0 4px rgba(0,0,0,.55)}
.spine.held{transform:translateY(-12px) rotate(var(--lean,0deg));box-shadow:inset 0 0 0 1px rgba(241,215,156,.7),0 0 18px rgba(241,215,156,.45),3px 0 4px rgba(0,0,0,.55)}
.spine.settle{animation:rrSettle .6s cubic-bezier(.3,1.6,.5,1) both}
@keyframes rrSettle{0%{transform:translateY(-14px) rotate(var(--lean,0deg))}60%{transform:translateY(2px) rotate(var(--lean,0deg))}100%{transform:rotate(var(--lean,0deg))}}
.sp-gift{position:absolute;left:0;right:0;top:36%;height:9px;z-index:2;cursor:pointer}
.sp-ribbon{position:absolute;left:-1px;right:-1px;top:0;height:9px;background:linear-gradient(180deg,#3e0b12,#9a2534 45%,#5c111c);box-shadow:0 1px 2px rgba(0,0,0,.6)}
.sp-tag{position:absolute;left:58%;top:7px;transform:rotate(9deg);transform-origin:top left;white-space:nowrap;padding:3px 7px 3px 9px;border-radius:2px 7px 7px 2px;
  font:600 .55rem/1 var(--sc-font);letter-spacing:.06em;color:#3b2508;background:var(--brass);box-shadow:0 2px 4px rgba(0,0,0,.6);font-style:normal}
.sp-tag::before{content:"";position:absolute;left:3px;top:50%;width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:#2a1a08}
.rr-empty{flex:none;width:calc(var(--bgw) * .0791);height:84%;border-radius:3px;border:1px dashed rgba(212,175,106,.13);
  background:radial-gradient(80% 50% at 50% 100%,rgba(212,175,106,.1),transparent 70%),linear-gradient(90deg,rgba(255,255,255,.015),rgba(0,0,0,.08))}
.rr-empty+.rr-empty{opacity:.75}
.rr-bookend{flex:none;width:calc(var(--bgw) * .0279);height:44%;align-self:flex-end;border-radius:6px 6px 1px 1px;background:var(--brass);
  box-shadow:inset -2px 0 3px rgba(0,0,0,.4),2px 2px 5px rgba(0,0,0,.6);-webkit-mask:radial-gradient(circle at 50% 22%,transparent 2.5px,#000 3px);mask:radial-gradient(circle at 50% 22%,transparent 2.5px,#000 3px)}
.rr-bookend.l{margin-right:4px}.rr-bookend.r{margin-left:auto}
.rr-row .rr-bookend.l{margin-left:auto}
.rr-hint{position:absolute;left:50%;top:52px;transform:translateX(-50%);width:min(260px,72%);margin:0;text-align:center;
  font:italic 500 1rem/1.35 "Cormorant Garamond",var(--serif);color:#cdbf9f;text-shadow:0 1px 3px #000}
.rr-hint b{font-style:normal;color:var(--gold2);font-weight:500}
.rr-card-slot{position:absolute;right:3%;top:calc(100% - 92px);z-index:3}
.rr-card{display:block;width:104px;height:72px;padding:6px 8px;border:0;cursor:pointer;text-align:left;transform:rotate(-5deg);transform-origin:bottom center;
  background:#f3ead6 url(../img/paper-grain.webp);background-blend-mode:multiply;box-shadow:0 6px 10px rgba(0,0,0,.6);
  clip-path:polygon(0 3%,8% 0,22% 2%,40% 0,58% 2%,76% 0,92% 2%,100% 0,99% 30%,100% 62%,98% 100%,70% 98%,46% 100%,22% 98%,0 100%,2% 64%,0 34%)}
.rr-card-crest{display:block;width:12px;height:12px;margin:0 auto 2px;color:#b38a3c}
.rr-card-crest svg{width:100%;height:100%}
.rr-card-note{display:block;font:400 .82rem/1.05 var(--script);color:var(--ink-c,#1d2a4a);overflow:hidden;max-height:2.15em}
.rr-card-from{display:block;text-align:right;font:400 .78rem/1 var(--script);color:var(--ink-c,#1d2a4a)}
.rr+.hero.compact{padding-top:4px}
.hero.compact h1{font-size:1.9rem}
@media (min-width:700px){.hero.compact h1{font-size:2.4rem}}
.libhead{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* the flying book (save / open) */
.rr-fly{position:fixed;z-index:90;pointer-events:none;will-change:transform,left,top,width,height}
.rr-fly-cover,.rr-fly-spine{position:absolute;inset:0}
.rr-fly-cover .cover-box{width:100%;height:100%;border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.7)}
.rr-fly .rr-fly-spine.spine{width:100%;height:100%;transform:none}
.rr-fly .sp-mark{display:none}
/* drawer shown when saving from a detail page */
.rr-drawer{position:fixed;z-index:85;left:0;right:0;bottom:0;padding-bottom:calc(var(--sb) + 62px);pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(5,4,7,.85) 22%)}
.rr-drawer-inner{width:min(96%,460px);margin:0 auto;padding:18px 10px 0}
.rr-drawer-title{text-align:center;font:600 .85rem var(--sc-font);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.rr-row.mini{height:150px;background:linear-gradient(180deg,rgba(30,16,10,.6),rgba(10,6,4,.9));border-radius:6px 6px 0 0}
.rr-row.mini .rr-hint{display:none}
.rr-drawer-plank{height:12px;background:#3a1a0e url(../img/mahogany.webp) center/cover;border-radius:2px;box-shadow:0 10px 16px rgba(0,0,0,.7)}
/* dialogs */
.rr-dialog{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:20px;background:rgba(4,3,6,.66);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.rr-dialog-card{width:min(360px,100%);background:linear-gradient(180deg,#221a14,#16110d);border:1px solid #5a4425;border-radius:14px;padding:18px 18px 14px;box-shadow:0 30px 60px rgba(0,0,0,.7)}
.rr-dialog-card h3{margin:0 0 8px;font:600 1.05rem var(--sc-font);letter-spacing:.14em;text-transform:uppercase;color:var(--gold2)}
.rr-dialog-body p{margin:.4em 0;color:#d6cbb3;line-height:1.45}
.rr-dialog-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.swap-list{display:flex;flex-direction:column;gap:6px;margin-top:10px;max-height:40vh;overflow:auto}
.swap-list button{text-align:left;background:rgba(212,175,106,.08);border:1px solid #4a3820;border-radius:8px;padding:9px 10px;color:var(--ink);cursor:pointer;font-family:var(--sans);font-size:.85rem}

/* ---------- reader: lamp, ribbon, cardstock ---------- */
.lamp,.lamp-light{display:none}
.reader.lamp-on.mode-flip .lamp,.reader.lamp-on.mode-flip .lamp-light{display:block}
.reader.lamp-on.mode-flip .flipstage{margin-top:0;border-top:46px solid transparent;
  background:radial-gradient(75% 60% at 72% 6%,rgba(255,200,115,.32),transparent 72%),linear-gradient(rgba(10,6,4,.6),rgba(6,4,3,.78)),#2a140b url(../img/mahogany.webp) center/cover;background-origin:border-box}
.lamp{position:absolute;z-index:4;right:calc(var(--sr) + 0px);top:calc(var(--bar-h,52px) - 4px);width:96px;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6)) drop-shadow(0 6px 10px rgba(255,200,110,.45))}
.lamp svg{display:block;width:100%;height:auto}
.lamp-light{position:absolute;z-index:3;left:0;right:0;bottom:0;top:var(--bar-h,52px);pointer-events:none;
  background:radial-gradient(85% 62% at 66% 16%,rgba(255,208,135,.22),transparent 64%),radial-gradient(130% 100% at 50% 42%,transparent 66%,rgba(0,0,0,.2) 100%)}
.ribbon{position:absolute;z-index:5;top:var(--bar-h,52px);left:64%;width:22px;height:150px;touch-action:none;cursor:grab;
  transition:transform .28s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(2px 3px 3px rgba(0,0,0,.55))}
.reader.lamp-on.mode-flip .ribbon{top:calc(var(--bar-h,52px) + 40px)}
.ribbon[hidden]{display:none}
.ribbon.dragging{transition:none;cursor:grabbing}
.rb-strap{position:absolute;inset:0;
  background:linear-gradient(90deg,#2c1206,#6e3317 22%,#8a4520 50%,#6a2f14 78%,#2a1005),url(../img/leather.webp);background-size:100% 100%,90px;background-blend-mode:soft-light,normal;
  clip-path:polygon(0 0,100% 0,100% 90%,88% 93%,82% 100%,70% 94%,60% 99%,50% 92%,40% 100%,30% 94%,20% 99%,12% 92%,0 96%)}
.rb-strap::before{content:"";position:absolute;left:3px;right:3px;top:0;bottom:12%;border-left:1px dashed rgba(240,206,150,.6);border-right:1px dashed rgba(240,206,150,.6)}
.rb-strap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9%;background:repeating-linear-gradient(90deg,rgba(255,220,170,.25) 0 1px,transparent 1px 3px)}
.rb-rivet{position:absolute;left:50%;top:16px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#d0a04a 45%,#6a4512);box-shadow:0 1px 1px rgba(0,0,0,.7)}
.rb-label{position:absolute;left:28px;top:96px;white-space:nowrap;padding:4px 9px;border-radius:10px;background:rgba(22,15,9,.9);border:1px solid #6b5228;color:var(--gold2);font:600 .72rem var(--sans);pointer-events:none}
.rb-label:empty{display:none}
.ribbon.peek{animation:rbPeek .7s cubic-bezier(.2,.8,.2,1) both,rbSway 4s 1s ease-in-out infinite}
@keyframes rbPeek{from{clip-path:inset(0 -140px 100% -10px)}to{clip-path:inset(0 -140px -20px -10px)}}
@keyframes rbSway{0%,100%{rotate:0deg}50%{rotate:1.6deg}}
.ribbon{transform-origin:top center}
.ribbon.tuck{animation:rbTuck .54s cubic-bezier(.5,0,.7,.4) both}
@keyframes rbTuck{from{clip-path:inset(0 -140px -20px -10px)}to{clip-path:inset(0 -140px 100% -10px)}}
.ribbon.pulled{animation:rbPulled .65s ease-in both}
@keyframes rbPulled{0%{transform:translateY(34px)}40%{transform:translateY(60px);opacity:1}100%{transform:translateY(90px);opacity:0}}
/* cardstock: grain + deckled outer edge */
.fpage{background-color:#f2e8d0;background-image:url(../img/paper-grain.webp);background-blend-mode:multiply}
.tpage{background-image:url(../img/paper-grain.webp);background-blend-mode:multiply}
.theme-night .fpage,.theme-night .tpage{background-image:none}
.fpage::before{content:"";position:absolute;top:0;bottom:0;right:0;width:12px;z-index:3;pointer-events:none;background:url(../img/deckle.webp) 0 0/24px 600px repeat-y;transform:scaleX(-1);opacity:.85;
  -webkit-mask:linear-gradient(90deg,#000 50%,transparent);mask:linear-gradient(90deg,#000 50%,transparent)}
.fpage.--left::before{right:auto;left:0;transform:none}
.theme-night .fpage::before{opacity:.5}

/* ---------- gifts ---------- */
.ink-blue{--ink-c:#1c2b52;--ink-d:#0d1633;--ink-s:rgba(150,40,80,.55)}
.ink-oxblood{--ink-c:#5e1520;--ink-d:#3a0910;--ink-s:rgba(210,140,60,.5)}
.ink-sepia{--ink-c:#4b3218;--ink-d:#2e1d0b;--ink-s:rgba(200,150,60,.5)}
.gift-overlay{position:fixed;left:0;right:0;top:0;bottom:calc(var(--sb) + 58px);z-index:19;display:flex;align-items:center;justify-content:center;overflow:auto;padding:calc(var(--st) + 14px) 14px 14px;
  background:radial-gradient(90% 60% at 50% 40%,rgba(40,24,14,.88),rgba(6,4,6,.95));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:gFade .3s both}
body.reading .gift-overlay{bottom:0;z-index:60}
@keyframes gFade{from{opacity:0}}
.gift-stage{position:relative;width:min(380px,100%);margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:12px}
.gift-what{margin:0;text-align:center;color:#d8ccb2;font:italic 500 1.05rem/1.3 "Cormorant Garamond",var(--serif)}
.gift-what i{color:var(--gold2)}
.stationery{position:relative;width:100%;color:#2a2116;padding:18px 20px 16px;
  background:#f4ecda url(../img/paper-grain.webp);background-blend-mode:multiply;
  background-image:url(../img/paper-grain.webp),repeating-linear-gradient(90deg,rgba(120,95,50,.07) 0 1px,transparent 1px 5px); /* laid lines */
  box-shadow:0 20px 40px rgba(0,0,0,.6);
  clip-path:polygon(0 1%,4% 0,11% .6%,19% 0,27% .8%,36% .1%,45% .7%,54% 0,63% .6%,72% 0,81% .8%,90% .1%,96% .6%,100% 0,99.4% 9%,100% 19%,99.3% 30%,100% 41%,99.5% 52%,100% 63%,99.3% 74%,100% 85%,99.5% 94%,100% 100%,94% 99.3%,85% 100%,75% 99.4%,64% 100%,53% 99.3%,42% 100%,31% 99.4%,20% 100%,10% 99.3%,3% 100%,0 99%,.6% 88%,0 77%,.7% 66%,0 55%,.6% 44%,0 33%,.7% 22%,0 11%)}
.stationery::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(closest-side,rgba(160,130,80,.10),transparent) center 58%/62% 62% no-repeat}
.st-crest{display:flex;flex-direction:column;align-items:center;gap:2px;color:#b08435;margin-bottom:6px}
.st-crest svg{width:30px;height:30px;filter:drop-shadow(0 1px 0 rgba(255,255,255,.6))}
.st-crest span{font:600 .72rem var(--sc-font);letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;background:linear-gradient(180deg,#d9b25f,#8e6424);-webkit-background-clip:text;background-clip:text;color:transparent}
/* the ink itself */
.ink{font-family:var(--script);color:var(--ink-c)}
.ink-wrap{filter:url(#arcInk)}
.ink-wrap .ink p{margin:0;background:linear-gradient(172deg,var(--ink-d) 0%,var(--ink-c) 40%,var(--ink-c) 70%,var(--ink-d) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:.4px .3px 0 var(--ink-s)}
.ink-to{font-size:1.75rem;line-height:1.2}
.ink-note{font-size:1.55rem;line-height:1.28;padding:4px 0 6px 10px;white-space:pre-wrap;overflow-wrap:anywhere}
.ink-from{font-size:1.6rem;text-align:right;line-height:1.2}
.write-in .ink p{animation:inkWrite 1.4s steps(28,end) both}
.write-in .ink .ink-note{animation-delay:.9s;animation-duration:2.6s}
.write-in .ink .ink-from{animation-delay:3.2s;animation-duration:.9s}
@keyframes inkWrite{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -10px 0 0)}}
.envelope:not(.opened) .write-in .ink p{animation-play-state:paused}
/* composer fields */
.compose{display:flex;flex-direction:column;gap:6px}
.st-line{display:flex;align-items:baseline;gap:10px;border-bottom:1px solid rgba(80,60,30,.28);padding:2px 0}
.st-lbl{flex:none;font:600 .72rem var(--sc-font);letter-spacing:.18em;text-transform:uppercase;color:#8a6a35}
.compose input,.compose textarea,.accept-card textarea{flex:1;min-width:0;width:100%;background:transparent;border:0;outline:0;-webkit-appearance:none;border-radius:0}
.compose input{font:400 1.45rem/1.3 var(--script);color:var(--ink-c);padding:2px 0}
.compose textarea{display:block;resize:none;font:400 1.5rem/1.3 var(--script);color:var(--ink-c);padding:6px 2px;
  background-image:repeating-linear-gradient(180deg,transparent 0 calc(1.3em - 1px),rgba(80,60,30,.16) calc(1.3em - 1px) 1.3em);background-position:0 6px}
.compose ::placeholder{color:rgba(60,45,25,.38)}
.st-note{position:relative;display:block}
.st-count{position:absolute;right:0;bottom:-14px;font:500 .64rem var(--sans);color:rgba(80,60,30,.45);letter-spacing:.04em}
.st-count.near{color:#8a2a1c}
.st-inks{display:flex;gap:6px;justify-content:center;margin-top:14px}
.st-ink{display:flex;align-items:center;gap:5px;border:1px solid rgba(80,60,30,.25);background:rgba(255,255,255,.35);border-radius:14px;padding:4px 9px 4px 5px;font:500 .72rem var(--sans);color:#4a3a22;cursor:pointer}
.st-ink i{width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--ink-s),var(--ink-c) 55%,var(--ink-d))}
.st-ink.on{border-color:#8a6a35;background:rgba(212,175,106,.28);box-shadow:inset 0 0 0 1px #8a6a35}
.st-privacy{margin:6px 0 0;text-align:center;font:500 .66rem/1.3 var(--sans);color:rgba(70,55,30,.6)}
.st-btns{display:flex;justify-content:center;gap:8px;margin-top:10px}
.stationery .btn{background:#2a1d10;color:#f1d79c;border-color:#8a6a35}
.stationery .btn.ghost{background:transparent;color:#5a4220;border-color:rgba(90,66,32,.5)}
.st-err{margin:4px 0 0;color:#8a2a1c;font:500 .78rem var(--sans)}
/* envelope + wax seal */
.envelope{position:relative;width:min(300px,86%);aspect-ratio:1.55;display:none}
.env-back,.env-front,.env-flap{position:absolute;inset:0;background:#e9dcc0 url(../img/paper-grain.webp);background-blend-mode:multiply}
.env-back{border-radius:3px;box-shadow:0 18px 36px rgba(0,0,0,.6)}
.env-front{z-index:3;clip-path:polygon(0 30%,50% 64%,100% 30%,100% 100%,0 100%);background-color:#efe3c8;box-shadow:inset 0 -10px 20px rgba(120,90,40,.18)}
.env-flap{z-index:4;clip-path:polygon(0 0,100% 0,50% 58%);background-color:#e3d3b2;transform-origin:top;transition:transform .5s ease-in-out;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}
.seal{position:absolute;z-index:5;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;display:grid;place-items:center;
  font:600 1.15rem var(--sc-font);color:rgba(60,8,14,.85);text-shadow:0 1px 0 rgba(255,140,140,.35);font-style:normal;
  background:radial-gradient(circle at 38% 32%,#c5414f,#8a1b28 55%,#5a0f17);
  box-shadow:inset 0 0 0 4px rgba(120,20,30,.65),inset 0 0 0 5px rgba(255,120,120,.18),0 3px 5px rgba(0,0,0,.5);
  clip-path:polygon(50% 0,62% 4%,74% 2%,82% 12%,94% 18%,96% 32%,100% 46%,96% 60%,98% 74%,86% 84%,78% 96%,62% 96%,50% 100%,36% 97%,22% 96%,14% 84%,4% 76%,4% 60%,0 46%,4% 32%,8% 18%,20% 10%,30% 2%)}
/* sealing animation (composer) */
.composer .envelope{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.composer.sealing .envelope{display:block;animation:envIn .5s .35s both}
.composer.sealing .compose{animation:cardInto 1s cubic-bezier(.5,0,.5,1) both}
.composer.sealing .env-flap{transform:rotateX(0deg)}
.composer.sealing .seal{animation:sealStamp .4s .95s cubic-bezier(.3,1.7,.5,1) both}
.composer.sealing .envelope{animation:envIn .5s .35s both,envAway .5s 1.25s ease-in forwards}
@keyframes cardInto{0%{transform:none;opacity:1}60%{transform:translateY(30px) scale(.62);opacity:1}100%{transform:translateY(40px) scale(.55);opacity:0}}
@keyframes envIn{from{opacity:0;transform:translate(-50%,-30%)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes envAway{to{opacity:0;transform:translate(-50%,-120%) rotate(-6deg)}}
@keyframes sealStamp{from{transform:scale(2.2);opacity:0}to{transform:none;opacity:1}}
.gift-code{width:100%;display:flex;flex-direction:column;gap:6px;align-items:stretch;background:rgba(20,14,9,.88);border:1px solid #5a4425;border-radius:12px;padding:12px}
.gift-code p{margin:0;color:#d6cbb3;font:500 .85rem var(--sans)}
.gift-code textarea{background:#0f0b08;border:1px solid #3d2f1c;border-radius:8px;color:var(--gold2);font:500 .72rem/1.35 ui-monospace,Menlo,monospace;padding:8px;resize:none;word-break:break-all}
.gift-code .btn{align-self:flex-end}
.gift-howto{color:#cdbf9f!important;font-size:.82rem!important}
.gift-howto b{color:var(--gold2)}
/* reveal: the tied book + envelope that opens into the card */
.gift-scene{position:relative;width:100%;display:flex;flex-direction:column;align-items:center}
.gift-book{position:relative;width:132px;transform:rotate(-4deg);margin-bottom:-26px;z-index:1;animation:gBook .6s .1s both}
@keyframes gBook{from{opacity:0;transform:translateY(20px) rotate(-4deg)}}
.gift-cover{width:100%;border-radius:3px;box-shadow:0 14px 26px rgba(0,0,0,.7)}
.gift-band{position:absolute;z-index:2;background:linear-gradient(90deg,#3e0b12,#9a2534 50%,#4a0e16);box-shadow:0 1px 3px rgba(0,0,0,.5)}
.gift-band.v{top:0;bottom:0;left:62%;width:10px}
.gift-band.h{left:0;right:0;top:40%;height:10px;background:linear-gradient(180deg,#3e0b12,#9a2534 50%,#4a0e16)}
.gift-bow{position:absolute;z-index:3;left:62%;top:40%;width:70px;margin:-22px 0 0 -30px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.gift-tag{position:absolute;z-index:3;left:72%;top:58%;transform:rotate(14deg);white-space:nowrap;padding:5px 10px 5px 14px;border-radius:3px 12px 12px 3px;
  background:var(--brass);color:#3b2508;font:600 .7rem var(--sc-font);letter-spacing:.06em;box-shadow:0 3px 6px rgba(0,0,0,.6)}
.gift-tag i{position:absolute;left:5px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#2a1a08}
.reveal .envelope{display:block;z-index:2;cursor:pointer;margin-top:4px;animation:envRise .5s both}
@keyframes envRise{from{opacity:0;transform:translateY(30px)}}
.reveal .stationery.in-env{position:absolute;left:5%;right:5%;top:8%;width:auto;z-index:2;transition:transform .9s .35s cubic-bezier(.2,.8,.2,1);padding:12px 16px}
.reveal .envelope.opened .env-flap{transform:rotateX(180deg);z-index:1}
.reveal .envelope.opened .seal{animation:sealBreak .4s both}
@keyframes sealBreak{to{transform:scale(.6) rotate(20deg);opacity:0}}
.reveal .envelope.opened .stationery.in-env{transform:translateY(-58%)}
.reveal .envelope.opened{margin-top:120px}
.reveal .ink-to{font-size:1.45rem}.reveal .ink-note{font-size:1.32rem}.reveal .ink-from{font-size:1.38rem}
.gift-actions{display:flex;flex-direction:column;gap:8px;width:100%;align-items:stretch}
.gift-actions>.btn{width:100%}
.gift-overlay.leaving{animation:gOut .3s forwards}
@keyframes gOut{to{opacity:0}}
.note .stationery.solo{animation:envRise .4s both}
.accept-card h3{margin:2px 0 2px;text-align:center;font:600 1rem var(--sc-font);letter-spacing:.2em;text-transform:uppercase;color:#5a4220}
.muted-ink{margin:0 0 8px;text-align:center;color:#6a5638;font:italic 500 1rem "Cormorant Garamond",var(--serif)}
.accept-card textarea{display:block;border:1px solid rgba(90,66,32,.35);border-radius:8px;background:rgba(255,255,255,.4);padding:8px;font:500 16px/1.35 ui-monospace,Menlo,monospace;color:#2a2116;resize:none}

/* reduced motion: no flicker, no flights, no sway */
@media (prefers-reduced-motion:reduce){
  .rr-fire,.rr-warm,.rr-candle *,.rr-bookmenu,.rr-bm-sheet,.rr-stars,.rr-tw,.ribbon.peek,.ribbon.tuck,.ribbon.pulled,.spine.settle,.rr-plaque.glint,.pl-leaf img,.pt-leaf.sw img,.write-in .ink p,.gift-overlay,.gift-book,.reveal .envelope,.composer.sealing *{animation:none!important}
  .spine,.env-flap,.reveal .stationery.in-env{transition:none!important}
}

.rr-stprobe{position:absolute;left:0;top:0;width:0;height:var(--st);visibility:hidden;pointer-events:none}

/* v15: the quote as wispy smoke-writing on the dim floor under the hearth */
.rr-smokedef{position:absolute;width:0;height:0;overflow:hidden}
.rr-smoke{position:absolute;left:9%;width:82%;z-index:3;pointer-events:none;text-align:center;visibility:hidden;opacity:1;
  --f:34px;color:#e6dfcf;font-family:var(--oldhand);transform:rotate(-1.2deg)}
.rr-smoke.on{visibility:visible}
.rr-smoke::before{content:"";position:absolute;inset:-14% -8%;z-index:-1;background:radial-gradient(closest-side,rgba(8,4,2,.55),rgba(8,4,2,.3) 65%,transparent);pointer-events:none}
.rr-smoke p{margin:0}
.rr-smoke-text{font-size:var(--f);line-height:1.12;letter-spacing:.01em;text-wrap:balance}
.rr-smoke-attr{font-size:calc(var(--f) * .72);margin-top:.15em!important;opacity:.85}
.rr-smoke-date{font:italic 500 calc(var(--f) * .3)/1 "Cormorant Garamond",var(--serif);letter-spacing:.1em;opacity:.38;margin-top:.9em!important}
.rr-smoke b{display:inline-block;white-space:nowrap;font-weight:400}
.rr-smoke i{display:inline-block;font-style:normal;opacity:0;text-shadow:0 0 .12em rgba(255,244,214,.75),0 0 .5em rgba(220,205,170,.4)}
.rr-smoke.in i{animation:rrSmokeIn .5s ease-out var(--d) both}
.rr-smoke.out i{animation:rrSmokeOut .8s ease-in var(--od) both}
@keyframes rrSmokeIn{0%{opacity:0;transform:translate(calc(var(--x) * -.5),calc(var(--y) * .8)) rotate(calc(var(--r) * -1)) scale(1.35)}100%{opacity:var(--o);transform:none}}
@keyframes rrSmokeOut{0%{opacity:var(--o);transform:none}100%{opacity:0;transform:translate(var(--x),calc(var(--y) * -1.6)) rotate(var(--r)) scale(1.5)}}
/* reduced motion: a plain fade, no filter, no drift */
.rr-smoke.calm,.rr-smoke.calm.on{filter:none;will-change:auto}
.rr-smoke.calm i{opacity:var(--o);animation:none!important;transform:none;filter:none}
.rr-smoke.calm{animation:rrCalmIn .5s ease-out both}.rr-smoke.calm.out{animation:rrCalmOut .6s ease-in both}
@keyframes rrCalmIn{from{opacity:0}to{opacity:1}}@keyframes rrCalmOut{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:reduce){.rr-smoke,.rr-smoke.on{filter:none!important}.rr-smoke i{animation:none!important;opacity:var(--o);transform:none}.rr-smoke.in{animation:rrCalmIn .5s ease-out both}.rr-smoke.out{animation:rrCalmOut .6s ease-in both}}

/* ---------- share this page (v15) ---------- */
.fpage,.page,.fpage img,.page img,.page canvas{-webkit-touch-callout:none}
.fpage img,.page img,.page canvas{-webkit-user-select:none;user-select:none}
.fpage::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;box-shadow:inset 0 0 0 2px rgba(241,215,156,.55),inset 0 0 46px rgba(241,215,156,.22);transition:opacity .34s ease-out}
.fpage.pg-press::before,.fpage.pg-hold::before{opacity:1}
.fpage.pg-hold::before{box-shadow:inset 0 0 0 2px rgba(241,215,156,.8),inset 0 0 60px rgba(241,215,156,.34)}
.page.pg-press,.page.pg-hold,.textpage p.pg-press,.textpage p.pg-hold{outline:2px solid rgba(241,215,156,.6);outline-offset:-2px;background-color:rgba(241,215,156,.07);transition:background-color .3s}
.pg-share{position:fixed;inset:0;z-index:97;display:flex;align-items:flex-end;justify-content:center;background:rgba(4,3,6,0);-webkit-tap-highlight-color:transparent;transition:background .22s ease}
.pg-share.in{background:rgba(4,3,6,.6)}
.pg-share-card{width:min(480px,100%);box-sizing:border-box;max-height:calc(100dvh - 24px);overflow:auto;background:linear-gradient(180deg,#241b14,#15100c);border:1px solid #5a4425;border-bottom:0;border-radius:18px 18px 0 0;
  padding:8px 18px calc(16px + env(safe-area-inset-bottom,0px));box-shadow:0 -24px 60px rgba(0,0,0,.65);transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.pg-share.in .pg-share-card{transform:none}
.pg-share-grab{width:38px;height:4px;border-radius:2px;background:#5a4425;margin:2px auto 10px}
.pg-share h3{margin:0 0 10px;font:600 1.02rem var(--sc-font,var(--serif));letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);text-align:center}
.pg-share-what{display:flex;gap:12px;align-items:center;margin:0 0 12px;padding:8px 10px;border:1px solid #3b2d1a;border-radius:10px;background:rgba(0,0,0,.22)}
.pg-share-what img{width:44px;height:62px;object-fit:cover;border-radius:2px;box-shadow:0 2px 8px rgba(0,0,0,.6);flex:none;-webkit-touch-callout:none;pointer-events:none}
.pg-share-what div{min-width:0;display:flex;flex-direction:column;gap:2px}
.pg-share-what b{color:#ece4d2;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-share-what span{color:var(--gold);font-size:.86rem;letter-spacing:.06em}
.pg-share-what em{color:#bfb39a;font-size:.84rem;line-height:1.35;font-style:italic;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pg-share-note{display:block;position:relative}
.pg-share-note textarea{width:100%;box-sizing:border-box;resize:none;padding:10px 12px 22px;border-radius:10px;border:1px solid #5a4425;background:#0e0a07;color:#f0e6cf;font:italic 1rem/1.4 var(--serif,Georgia,serif);outline:none}
.pg-share-note textarea:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(212,175,106,.22)}
.pg-share-note textarea::placeholder{color:#8a7d66}
.pg-share-note small{position:absolute;right:10px;bottom:6px;color:#8a7d66;font-size:.72rem}
.pg-share-hint{margin:8px 2px 12px;color:#a8997c;font-size:.8rem;text-align:center}
.pg-share-btns{display:flex;gap:10px;flex-wrap:wrap}
.pg-share-btns .btn{flex:1 1 40%;min-height:46px;margin:0}
.pg-share-btns .btn:disabled{opacity:.55}
@media (prefers-reduced-motion:reduce){.pg-share,.pg-share-card,.fpage::before{transition:none}}

/* v15b: press-and-hold on a page must reach us, not iOS: no callout, no selection, no drag on reader page surfaces */
.pg-nosel,.pg-nosel *,.textpage,.textpage *,.reader .pages,.reader .pages *,.reader .flipstage,.reader .flipstage *{-webkit-touch-callout:none!important;-webkit-user-select:none!important;user-select:none!important;-webkit-tap-highlight-color:transparent}
.pg-nosel img,.reader .pages img,.reader .flipstage img{-webkit-user-drag:none;user-drag:none}
.pg-nosel ::selection,.textpage ::selection{background:transparent}
.icon-btn.share-btn{display:inline-flex;align-items:center;justify-content:center}
.icon-btn.share-btn svg{display:block}
/* one-time tip: explicit, faint, never takes a tap */
.pg-hint{position:absolute;left:50%;bottom:calc(var(--sb,0px) + 70px);transform:translate(-50%,8px);z-index:20;max-width:84%;box-sizing:border-box;padding:9px 16px;border-radius:999px;
  background:rgba(20,15,10,.82);border:1px solid rgba(212,175,106,.35);color:#e9dcc0;font:italic .92rem/1.2 var(--serif);letter-spacing:.02em;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .5s ease,transform .5s ease;box-shadow:0 6px 22px rgba(0,0,0,.5)}
.pg-hint.in{opacity:.92;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.pg-hint{transition:opacity .3s;transform:translate(-50%,0)}}

/* v16: bigger, thumb-friendly header buttons (≥48 px), clear of the Dynamic Island / top inset and the screen edge */
.reader-bar .icon-btn{min-width:48px;min-height:48px;padding:0;display:inline-flex;align-items:center;justify-content:center;position:relative;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.reader-bar .icon-btn[data-act="menu"]{min-width:52px;margin-right:2px}
.reader-bar .icon-btn::after{content:"";position:absolute;inset:-4px -2px}

/* v16: richer spines — raised bands, tooled panels, cloth/leather/half-morocco/calf bindings, wear, candlelight highlight, ribbon markers */
.spine{--gilt:linear-gradient(90deg,#9c7a3c,#f6dfa4 45%,#c99a4a);transform:rotate(var(--lean,0deg));
  background-image:linear-gradient(90deg,rgba(0,0,0,.6),rgba(255,226,170,.2) 22%,rgba(255,226,170,.07) 44%,rgba(0,0,0,.12) 62%,rgba(0,0,0,.42) 88%,rgba(0,0,0,.65)),
    linear-gradient(180deg,rgba(0,0,0,.45),transparent 9%,transparent 90%,rgba(0,0,0,.5)),url(../img/leather.webp);
  background-size:100% 100%,100% 100%,160px;background-blend-mode:normal,normal,soft-light;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,226,170,.16),inset 1px 0 0 rgba(255,226,170,.1),4px 0 6px rgba(0,0,0,.6),-2px 0 3px rgba(0,0,0,.35);
  border-radius:3px 3px 1px 1px / 4px 4px 1px 1px}
.sp-band{height:12px;margin-top:5%;border-top:1px solid rgba(232,196,120,.9);border-bottom:1px solid rgba(232,196,120,.9);
  background:linear-gradient(180deg,rgba(255,235,190,.34),rgba(0,0,0,.4)) 0 1px/100% 4px no-repeat,linear-gradient(180deg,rgba(255,235,190,.34),rgba(0,0,0,.4)) 0 7px/100% 4px no-repeat,rgba(0,0,0,.22);
  box-shadow:0 1px 0 rgba(0,0,0,.55),0 -1px 0 rgba(0,0,0,.4)}
.sp-band.b{margin-top:4px;margin-bottom:5%}
.sp-panel{flex:1;min-height:0;width:calc(100% - 10px);margin:6px 0 0;display:flex;flex-direction:column;align-items:center;padding:4px 0 3px;position:relative;
  border:1px solid rgba(232,196,120,.55);border-radius:2px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.18),inset 0 0 0 3px rgba(232,196,120,.28),0 1px 0 rgba(0,0,0,.5)}
.sp-panel::before,.sp-panel::after{content:"";position:absolute;left:50%;width:5px;height:5px;margin-left:-2.5px;background:#d9b56c;opacity:.85;transform:rotate(45deg) scale(.7);box-shadow:0 1px 0 rgba(0,0,0,.6)}
.sp-panel::before{top:-3px}.sp-panel::after{bottom:-3px}
.sp-title{margin:4px 0 3px;letter-spacing:.06em;text-shadow:none;filter:drop-shadow(0 1px 0 rgba(0,0,0,.7)) drop-shadow(0 0 1px rgba(255,220,150,.25))}
.sp-orn{margin-bottom:1px}
.sp-wear{position:absolute;inset:0;pointer-events:none;border-radius:inherit;mix-blend-mode:soft-light;
  background:radial-gradient(60% 7% at 50% 0,rgba(255,235,200,.75),transparent 70%),radial-gradient(70% 5% at 50% 100%,rgba(255,235,200,.5),transparent 70%),
    radial-gradient(12% 16% at var(--wx,40%) var(--wy,40%),rgba(255,235,200,.65),transparent 70%),linear-gradient(90deg,rgba(255,235,190,.35),transparent 18%,transparent 70%,rgba(0,0,0,.35))}
.sp-wear::after{content:"";position:absolute;left:7%;top:18%;bottom:20%;width:1px;background:linear-gradient(180deg,transparent,rgba(255,235,200,.45) 20%,rgba(0,0,0,.35) 60%,transparent);opacity:.55;transform:translateX(var(--wx,40%))}
.sp-mark{position:absolute;left:calc(50% + var(--ro,0px));bottom:3px;width:5px;height:var(--rl,10px);z-index:1;
  background:linear-gradient(90deg,rgba(0,0,0,.35),var(--rb) 30%,var(--rb) 70%,rgba(0,0,0,.35));clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
/* cloth: fine weave, plain gilt rules, dark gilt label */
.spine[data-bind="cloth"]{background-image:linear-gradient(90deg,rgba(0,0,0,.55),rgba(255,226,170,.15) 22%,rgba(255,226,170,.05) 46%,rgba(0,0,0,.14) 64%,rgba(0,0,0,.42) 88%,rgba(0,0,0,.62)),
    linear-gradient(180deg,rgba(0,0,0,.4),transparent 9%,transparent 90%,rgba(0,0,0,.45)),repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);
  background-size:100% 100%,100% 100%,auto,auto;background-blend-mode:normal}
.spine[data-bind="cloth"] .sp-band{height:6px;background:rgba(0,0,0,.18);box-shadow:none}
.spine[data-bind="cloth"] .sp-panel{border:0;box-shadow:none;padding:4px 0}
.spine[data-bind="cloth"] .sp-panel::before,.spine[data-bind="cloth"] .sp-panel::after{display:none}
.spine[data-bind="cloth"] .sp-title{width:62%;margin:2px 0 3px;padding:5px 0;border-radius:1px;
  /* v16b: a dark tooled-leather label with gilt lettering (no pale paper labels) */
  background:linear-gradient(90deg,#1b0f07,#2e1b0d 45%,#1b0f07);-webkit-background-clip:border-box;background-clip:border-box;
  box-shadow:0 0 0 1px rgba(214,170,88,.6),inset 0 0 0 1px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.6);filter:none;color:#e9c978;text-shadow:0 1px 0 rgba(0,0,0,.8);font-weight:700;-webkit-text-fill-color:#e9c978}
/* half-morocco: dark gilt-banded caps, lighter cloth middle */
.spine[data-bind="half"]{background-image:linear-gradient(90deg,rgba(0,0,0,.55),rgba(255,226,170,.17) 22%,rgba(255,226,170,.06) 46%,rgba(0,0,0,.14) 64%,rgba(0,0,0,.42) 88%,rgba(0,0,0,.65)),
    linear-gradient(180deg,rgba(0,0,0,.62) 0,rgba(0,0,0,.62) 17%,transparent 17.5%,transparent 83%,rgba(0,0,0,.62) 83.5%),url(../img/leather.webp);
  background-size:100% 100%,100% 100%,160px;background-blend-mode:normal,normal,soft-light}
.spine[data-bind="half"] .sp-panel{border-color:rgba(232,196,120,.4)}
/* calf: gilt-panelled, diamond-stamped */
.spine[data-bind="calf"] .sp-panel{border-width:1px;border-style:double;border-color:rgba(232,196,120,.7);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),0 1px 0 rgba(0,0,0,.5)}
.spine[data-bind="calf"] .sp-band{height:10px;background:linear-gradient(180deg,rgba(255,235,190,.3),rgba(0,0,0,.4)) 0 1px/100% 8px no-repeat,rgba(0,0,0,.2)}
/* gilt tint by collection */
.spine[data-coll="stoicism"]{--gilt:linear-gradient(90deg,#8d8f94,#f0f2f4 45%,#a9adb4)}
.spine[data-coll="stoicism"] .sp-title{background:var(--gilt);-webkit-background-clip:text;background-clip:text}
.spine[data-coll="stoicism"] .sp-orn{fill:#cfd3d9}
.spine[data-coll="stoicism"] .sp-band,.spine[data-coll="stoicism"] .sp-panel{border-color:rgba(205,210,220,.7)}
.spine[data-coll="storybook"] .sp-orn{fill:#ffdf9a}
@media (min-width:700px){.sp-band{height:calc(var(--bgw) * .034884)}.sp-band.t{margin-top:6%}.sp-panel{padding:calc(var(--bgw) * .018605) 0 calc(var(--bgw) * .013953)}}
.spine.pressing,.spine.held{transform:translateY(-12px) rotate(var(--lean,0deg))}
@media (max-width:380px){.sp-title{font-size:.64rem;letter-spacing:.03em}.sp-panel{width:calc(100% - 8px)}}

/* ---------- v16 Bible reader ---------- */
.bible-reader .textpage{padding-bottom:40vh}
.bible-reader .textpage p{content-visibility:auto;contain-intrinsic-size:auto 300px}
.bible-reader .textpage p.bb-v{text-align:left;hyphens:auto;-webkit-hyphens:auto;margin:0 0 .9em;line-height:1.65}
.bible-reader .textpage p.bb-v sup.vn{font-size:.58em;line-height:0;vertical-align:.55em;margin:0 .12em 0 .22em;opacity:.62;font-weight:600;font-family:ui-sans-serif,system-ui,sans-serif}
.bible-reader .textpage p.bb-v sup.vn:first-child{margin-left:0}
.bible-reader .textpage p.bb-t{content-visibility:visible;text-align:center;font-variant:small-caps;letter-spacing:.14em;font-size:1.5em;margin:2.6em 0 .6em;padding-top:.8em;border-top:1px double currentColor;opacity:.9}
.bible-reader .textpage p.bb-b{content-visibility:visible;text-align:center;font-size:1.28em;font-weight:700;margin:2.2em 0 .3em;letter-spacing:.04em}
.bible-reader .textpage p.bb-h{content-visibility:visible;text-align:center;font-size:.78em;letter-spacing:.2em;text-transform:uppercase;opacity:.6;margin:1.5em 0 .5em}
.bible-reader .textpage p.bb-f{content-visibility:visible;text-align:center;font-style:italic;opacity:.8;margin:1em 0 1.6em;line-height:1.5}
.bible-toc{position:absolute;inset:0;z-index:60;background:rgba(10,6,3,.62);display:flex;align-items:flex-end;justify-content:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.bible-toc .bt-card{position:relative;width:min(560px,100%);max-height:84%;display:flex;flex-direction:column;background:#2a1b10 url("../img/art/kjv-leather.webp") center/cover;color:#ecd9ae;border-radius:18px 18px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.6),inset 0 0 0 1px rgba(214,170,88,.35);padding-bottom:var(--sb,env(safe-area-inset-bottom,0px));overflow:hidden}
.bt-head{display:flex;align-items:center;justify-content:space-between;padding:14px 12px 10px 18px;border-bottom:1px solid rgba(214,170,88,.3)}
.bt-head b{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.2rem;letter-spacing:.05em;color:#f0d79a}
.bt-ed{font-size:.72rem;opacity:.75;margin-top:2px;max-width:420px;line-height:1.3}
.bt-head .icon-btn,.bt-chhead .icon-btn{color:#ecd9ae}
.bt-body{overflow:auto;-webkit-overflow-scrolling:touch;padding:4px 14px 18px}
.bt-sec{font-variant:small-caps;letter-spacing:.16em;color:#d6aa58;margin:16px 4px 8px;font-size:.95rem;font-weight:600}
.bt-books{display:flex;flex-wrap:wrap;gap:7px}
.bt-book{min-height:44px;padding:0 13px;border-radius:10px;border:1px solid rgba(214,170,88,.4);background:rgba(0,0,0,.28);color:#ecd9ae;font:inherit;font-size:.92rem}
.bt-book.on{background:rgba(214,170,88,.28);border-color:#d6aa58;color:#fff3cf}
.bt-ch{position:absolute;inset:0;background:#2a1b10 url("../img/art/kjv-leather.webp") center/cover;display:flex;flex-direction:column;padding-bottom:var(--sb,env(safe-area-inset-bottom,0px))}
.bt-ch.hidden{display:none}
.bt-chhead{display:flex;align-items:center;gap:6px;padding:14px 12px 10px;border-bottom:1px solid rgba(214,170,88,.3);color:#f0d79a;font-size:1.1rem}
.bt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:8px;padding:14px;overflow:auto;-webkit-overflow-scrolling:touch}
.bt-c{min-height:48px;border-radius:10px;border:1px solid rgba(214,170,88,.4);background:rgba(0,0,0,.3);color:#ecd9ae;font:inherit;font-size:1rem}
.bt-c:first-child{grid-column:span 2}
.reader .by.edition,.detail .by.edition{font-style:italic;opacity:.8;font-size:.85rem;margin-top:-2px}
@font-face{font-family:"UnifrakturCook";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/unifraktur-cook-700.woff2) format("woff2")}

/* v16: the King James Bibles — ancient cracked dark calf, raised bands, tarnished blackletter gilt, brass clasp, stained edge */
.spine.heirloom{--tg:linear-gradient(180deg,#b79348,#e3c777 45%,#8d6a2c);
  background-image:linear-gradient(90deg,rgba(0,0,0,.7),rgba(255,214,150,.2) 20%,rgba(255,214,150,.05) 44%,rgba(0,0,0,.2) 64%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.75)),
    linear-gradient(180deg,rgba(0,0,0,.55),transparent 8%,transparent 88%,rgba(0,0,0,.6)),url(../img/art/kjv-leather.webp);
  background-size:100% 100%,100% 100%,230px 300px;background-position:0 0,0 0,var(--wx,30%) 0;background-blend-mode:normal,normal,normal;
  border-radius:4px 4px 1px 1px / 6px 6px 1px 1px;overflow:visible;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.65),inset 0 3px 0 rgba(255,214,150,.14),inset 1px 0 0 rgba(255,214,150,.12),5px 0 8px rgba(0,0,0,.7),-3px 0 4px rgba(0,0,0,.45)}
.spine.heirloom[data-heir="facsimile"]{background-color:#3c1f16}
.spine.heirloom>*{pointer-events:none}
.hl-rb{position:absolute;left:-1px;right:-1px;top:var(--y);height:8px;z-index:1;border-radius:2px;
  background:linear-gradient(180deg,rgba(255,214,150,.38),rgba(120,78,40,.0) 28%,rgba(0,0,0,.55) 90%),url(../img/art/kjv-leather.webp) 0 calc(var(--y) * 6)/230px 300px;
  box-shadow:0 1px 0 rgba(0,0,0,.7),0 -1px 0 rgba(255,214,150,.18)}
.hl-rb::before,.hl-rb::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#b08a3e 20%,#d9b865 50%,#b08a3e 80%,transparent);opacity:.75}
.hl-rb::before{top:1px}.hl-rb::after{bottom:1px}
.hl-plate{position:absolute;left:12%;right:12%;top:12%;height:30%;z-index:2;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(214,170,88,.6);box-shadow:inset 0 0 0 2px rgba(0,0,0,.3),inset 0 0 0 3px rgba(214,170,88,.28);background:rgba(18,8,3,.5);border-radius:2px}
.hl-bl{writing-mode:vertical-rl;font-family:"UnifrakturCook",serif;font-weight:700;font-size:1.02rem;line-height:1;white-space:nowrap;letter-spacing:.02em;
  background:var(--tg);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.85));transform:rotate(180deg);transform:none}
.hl-cross{position:absolute;left:50%;top:44.5%;width:12px;height:16px;margin-left:-6px;z-index:2;
  background:linear-gradient(var(--tg)) 5px 0/2px 100% no-repeat,linear-gradient(var(--tg)) 0 4px/100% 2px no-repeat;filter:drop-shadow(0 1px 0 rgba(0,0,0,.8))}
.hl-sub{position:absolute;left:0;right:0;top:61%;bottom:6%;z-index:2;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;
  font:600 .62rem/1 "Cormorant SC",Georgia,serif;letter-spacing:.14em;background:var(--tg);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.8))}
.hl-clasp{position:absolute;right:-3px;top:47%;width:7px;height:22px;z-index:3;border-radius:2px 1px 1px 2px;
  background:linear-gradient(90deg,#6d5224,#d1ad5c 45%,#7d5f28);box-shadow:0 1px 2px rgba(0,0,0,.8),inset 0 0 0 1px rgba(0,0,0,.35)}
.hl-clasp::after{content:"";position:absolute;left:2px;top:9px;width:3px;height:3px;border-radius:50%;background:#2a1a08}
/* stained page edge peeking at the top; scuffed lighter corners */
.hl-edge{position:absolute;left:5%;right:5%;top:-2px;height:3px;z-index:0;background:repeating-linear-gradient(90deg,#8a6a34 0 2px,#6b4f26 2px 3px,#9c7c40 3px 5px);border-radius:2px 2px 0 0;opacity:.9}
.spine.heirloom::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:radial-gradient(18px 14px at 0 0,rgba(176,134,88,.7),transparent),radial-gradient(18px 14px at 100% 0,rgba(176,134,88,.6),transparent),radial-gradient(16px 12px at 0 100%,rgba(176,134,88,.55),transparent),radial-gradient(16px 12px at 100% 100%,rgba(176,134,88,.5),transparent),
    linear-gradient(100deg,transparent 30%,rgba(255,226,170,.08) 36%,transparent 42%)}
.spine.heirloom .sp-wear{z-index:3}
@media (max-width:380px){.hl-bl{font-size:.9rem}.hl-sub{font-size:.56rem}}
@media (min-width:700px){.hl-bl{font-size:calc(var(--bgw) * .048372)}.hl-sub{font-size:calc(var(--bgw) * .029023)}.hl-rb{height:calc(var(--bgw) * .025581)}.hl-cross{transform:scale(1.3)}}
.bible-reader.theme-sepia .textpage{background:radial-gradient(120% 60% at 50% 0,rgba(120,80,30,.14),transparent 60%),radial-gradient(120% 60% at 50% 100%,rgba(120,80,30,.16),transparent 60%),#efe4c8}

/* ===== v16: the radio, Rosie's painting, and their credits ===== */
.rr-art-wrap{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:1}
.rr-art{position:absolute;left:35.5%;top:25%;width:16%;aspect-ratio:4/3;padding:0;margin:0;border:0;background:none;cursor:zoom-in;pointer-events:auto;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 2px 3px rgba(0,0,0,.7))}
.rr-art::after{content:"";position:absolute;inset:-7px -6px -10px}  /* generous tap area */
.rr-art-pic{position:absolute;left:12.2%;top:14.2%;right:12.4%;bottom:14.4%;overflow:hidden;background:#120b1c}
.rr-art-pic img,.rr-art-frame{display:block;width:100%;height:100%;-webkit-user-drag:none;user-select:none}
.rr-art-pic img{object-fit:cover;filter:brightness(.8) saturate(.92) contrast(1.02)}
.rr-art-frame{position:absolute;inset:0;pointer-events:none}
.rr-art-lit{position:absolute;left:12%;top:14%;right:12%;bottom:14%;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(90% 120% at 0% 105%,rgba(255,176,86,.55),rgba(255,150,60,.16) 55%,transparent 80%);animation:rrFlicker 2.6s infinite}
.rr-art-halo{position:absolute;left:25%;top:20%;width:36%;height:17%;border-radius:50%;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(closest-side,rgba(255,176,86,.34),rgba(255,140,50,.10) 60%,transparent);animation:rrFlicker 3.3s infinite;animation-delay:-.7s}
.rr-ledge{position:absolute;left:33.9%;top:31.3%;width:19.2%;aspect-ratio:100/16;pointer-events:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.6))}
.rr-ledge svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.rr-sc-candle{position:absolute;left:8%;bottom:72%;width:7%;height:150%;border-radius:1px 1px 2px 2px;background:linear-gradient(90deg,#c9b48a,#f1e3be 45%,#b79d70);box-shadow:inset 0 -2px 2px rgba(120,90,40,.4)}
.rr-sc-candle::before{content:"";position:absolute;left:46%;top:-1px;width:1px;height:2px;background:#2a1a0d}
.rr-sc-flame{position:absolute;left:50%;bottom:100%;width:210%;height:80%;margin:0 0 1px -105%;border-radius:50% 50% 50% 50%/65% 65% 38% 38%;background:radial-gradient(closest-side at 50% 68%,#fff6d0 0,#ffd27a 38%,rgba(255,150,50,.85) 70%,transparent);transform-origin:50% 100%;animation:rrCandle 1.7s ease-in-out infinite;box-shadow:0 0 6px 2px rgba(255,170,70,.55)}
@media (max-width:360px){.rr-sc-flame{box-shadow:0 0 4px 1px rgba(255,170,70,.55)}}

.rr-radio-floor{position:absolute;left:25.5%;width:18%;height:2.4%;top:91.6%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,.28) 60%,transparent);pointer-events:none}
.rr-radio{position:absolute;left:27%;top:84.6%;width:14%;aspect-ratio:440/490;padding:0;margin:0;border:0;background:none;cursor:pointer;z-index:1;-webkit-tap-highlight-color:transparent;transition:transform .15s}
.rr-radio::after{content:"";position:absolute;inset:-8px}  /* tap area ≥ 44px even on the smallest phones */
.rr-radio:active{transform:scale(.97)}
.rr-radio img{display:block;width:100%;height:100%;-webkit-user-drag:none;user-select:none;filter:brightness(.82) saturate(.95) drop-shadow(0 3px 4px rgba(0,0,0,.65));transition:filter .6s}
.rr-radio.on img{filter:brightness(.98) saturate(1.05) drop-shadow(0 3px 4px rgba(0,0,0,.65)) drop-shadow(0 0 7px rgba(var(--rg,255,170,70),.45))}
.rr-radio-glow{position:absolute;left:23%;top:16%;width:54%;height:41%;border-radius:46% 46% 10% 10%;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .8s}
.rr-radio.on .rr-radio-glow{opacity:1;animation:radioPulse 3.4s ease-in-out infinite}
/* v17: six station colours. Each colour is its own layer; the active one fades in over 0.6 s while the old one fades out (a true cross-fade). */
.rr-radio-glow b,.rr-radio-dial b,.rr-radio-tint b,.rr-radio-dtint b{position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .6s ease}
/* the speaker cloth and the dial are pale photographic gold, so a plain glow would wash out to cream: a 'color' blend layer re-hues them
   (keeping their light and shade) and the screen glow on top supplies the light. Orange is the photo's own colour, so it needs no tint. */
.rr-radio-tint,.rr-radio-dtint{position:absolute;pointer-events:none;mix-blend-mode:color;opacity:0;transition:opacity .8s}
.rr-radio-tint{left:23%;top:16%;width:54%;height:41%;border-radius:46% 46% 10% 10%}
.rr-radio-dtint{left:37%;top:64.5%;width:26%;height:8%;border-radius:50%}
.rr-radio.on .rr-radio-tint,.rr-radio.on .rr-radio-dtint{opacity:1}
.rr-radio-tint b{background:radial-gradient(closest-side,rgb(var(--ge)) 62%,rgba(var(--ge),.55) 88%,transparent)}
.rr-radio-dtint b{background:radial-gradient(closest-side,rgb(var(--ge)) 60%,transparent)}
.rr-radio-tint .g-orange,.rr-radio-dtint .g-orange{display:none}
.rr-radio-glow b{background:radial-gradient(closest-side,rgba(var(--gc),.88),rgba(var(--ge),.4) 62%,transparent)}
.rr-radio-dial b{background:radial-gradient(closest-side,rgba(var(--gc),.96),rgba(var(--ge),.2) 70%,transparent)}
.rr-radio.snap .rr-radio-glow b,.rr-radio.snap .rr-radio-dial b,.rr-radio.snap .rr-radio-tint b,.rr-radio.snap .rr-radio-dtint b{transition:none}
.g-orange{--gc:255,200,104;--ge:255,150,50}.g-yellow{--gc:255,243,122;--ge:255,214,40}.g-green{--gc:150,255,172;--ge:50,222,96}
.g-blue{--gc:150,206,255;--ge:44,130,255}.g-purple{--gc:178,142,255;--ge:104,62,255}.g-violet{--gc:248,164,255;--ge:218,78,244}
.rr-radio[data-st=orange]{--rg:255,170,70}.rr-radio[data-st=yellow]{--rg:255,226,60}.rr-radio[data-st=green]{--rg:70,230,110}
.rr-radio[data-st=blue]{--rg:70,150,255}.rr-radio[data-st=purple]{--rg:130,84,255}.rr-radio[data-st=violet]{--rg:232,100,250}
.rr-radio[data-st=orange] .g-orange,.rr-radio[data-st=yellow] .g-yellow,.rr-radio[data-st=green] .g-green,.rr-radio[data-st=blue] .g-blue,.rr-radio[data-st=purple] .g-purple,.rr-radio[data-st=violet] .g-violet{opacity:1}
.rr-radio{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.rr-radio-dial{position:absolute;left:38%;top:66%;width:24%;height:5%;border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .6s}
.rr-radio.on .rr-radio-dial{opacity:.9}
@keyframes radioPulse{0%,100%{opacity:1}35%{opacity:.78}60%{opacity:.95}80%{opacity:.84}}
.rr-note{position:absolute;left:50%;top:6%;font-size:13px;color:#ffd98e;opacity:0;pointer-events:none;text-shadow:0 0 6px rgba(255,170,70,.7);font-style:normal}
.rr-radio.on .rr-note.n1{animation:radioNote 4.2s ease-out infinite}
.rr-radio.on .rr-note.n2{animation:radioNote 4.2s ease-out infinite 2.1s;left:36%}
@keyframes radioNote{0%{opacity:0;transform:translate(0,0) rotate(-8deg)}15%{opacity:.9}100%{opacity:0;transform:translate(16px,-44px) rotate(14deg)}}
.rr-radio-cap{position:absolute;left:43.5%;width:54%;top:85.6%;text-align:left;line-height:1.15;color:#f0dcae;text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.95),0 0 12px rgba(0,0,0,.8);opacity:0;transition:opacity .7s;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-radio-cap .cap-st{display:block;font:400 clamp(18px,5.2vw,24px)/1.15 var(--script);color:var(--cc,#f6d078);color:color-mix(in srgb,var(--cc,#f6d078) 52%,#fff);-webkit-text-stroke:.35px rgba(0,0,0,.55);text-shadow:0 1px 2px #000,0 0 5px rgba(0,0,0,.95),0 0 10px rgba(0,0,0,.85),0 0 16px rgba(var(--ccr,255,220,140),.35);letter-spacing:.2px}
.rr-radio-cap .cap-t{display:block;font:italic 11px/1.25 var(--serif);white-space:normal;max-width:100%}
.rr-radio-cap.on{opacity:.95}
@media (prefers-reduced-motion:reduce){.rr-sc-flame,.rr-art-lit,.rr-art-halo,.rr-radio.on .rr-radio-glow,.rr-radio.on .rr-note{animation:none}.rr-radio.on .rr-note{display:none}.rr-radio-glow b,.rr-radio-dial b,.rr-radio-tint b,.rr-radio-dtint b{transition-duration:.3s}}

/* painting lightbox */
.art-lb{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:calc(var(--st) + 18px) 14px calc(var(--sb) + 18px);background:radial-gradient(70% 60% at 50% 45%,rgba(40,22,10,.82),rgba(5,3,8,.96));opacity:0;transition:opacity .25s;cursor:zoom-out;-webkit-tap-highlight-color:transparent;outline:none}
.art-lb.on{opacity:1}
.art-lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;transform:scale(.94);transition:transform .3s}
.art-lb.on .art-lb-fig{transform:scale(1)}
.art-lb-pic{position:relative;width:min(94vw,calc((100vh - 140px) * 1.333),860px);aspect-ratio:4/3;filter:drop-shadow(0 12px 28px rgba(0,0,0,.8))}
.art-lb-in{position:absolute;left:12.2%;top:14.2%;right:12.4%;bottom:14.4%;overflow:hidden}
.art-lb{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.art-lb img{-webkit-user-drag:none;-webkit-touch-callout:none}
.art-lb-scene{position:absolute;left:50%;top:50%;height:100%;aspect-ratio:1400/971;transform:translate(-50%,-50%);will-change:transform}
.art-lb-scene>img{display:block;width:100%;height:100%}
/* press-and-hold effects (js/artfx.js) — everything sits in percentages of the picture */
.art-fx{position:absolute;inset:0;opacity:0;pointer-events:none;overflow:hidden}
.art-fx-cv{position:absolute;inset:0;width:100%;height:100%}
.fx-moon{position:absolute;left:55%;top:24.5%;width:56%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);mix-blend-mode:screen;background:radial-gradient(closest-side,rgba(255,246,160,.55),rgba(255,230,100,.42) 30%,rgba(255,210,80,.2) 55%,rgba(255,200,70,.07) 78%,transparent)}
.fx-candle{position:absolute;inset:0;mix-blend-mode:screen;background:radial-gradient(75% 85% at 0% 108%,rgba(255,168,64,.5),rgba(255,140,40,.16) 52%,transparent 74%)}
.fx-carpet{position:absolute;inset:0;opacity:0;pointer-events:none;will-change:transform;filter:drop-shadow(0 6px 8px rgba(10,0,30,.28))}
.fx-carpet img{display:block;width:100%;height:100%}
.fx-sheen{position:absolute;top:-10%;bottom:-10%;left:-30%;width:26%;mix-blend-mode:soft-light;background:linear-gradient(90deg,transparent,rgba(255,244,214,.75),transparent)}
.art-lb.plain .art-lb-pic{width:auto;aspect-ratio:auto;max-width:94vw}
.art-lb.plain .art-lb-in{position:relative;inset:auto;display:block;overflow:visible}
.art-lb.plain .art-lb-scene{position:relative;left:auto;top:auto;height:auto;aspect-ratio:auto;transform:none;display:block}
.art-lb.plain .art-lb-scene>img{width:auto;height:auto;max-width:94vw;max-height:calc(100vh - 190px);border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.art-lb.plain .art-fx{overflow:hidden;border-radius:6px}
.art-lb-hold{position:absolute;left:50%;top:calc(50% + min(48vw,calc((100vh - 140px) * .667),430px) * .75 + 78px);transform:translateX(-50%);padding:5px 16px;border-radius:99px;background:rgba(20,12,24,.62);border:1px solid rgba(246,208,120,.35);font:italic 17px/1.2 var(--script,var(--serif));color:#f6d078;letter-spacing:.3px;opacity:0;transition:opacity .9s;pointer-events:none;white-space:nowrap;text-shadow:0 1px 3px #000}
.art-lb-hold.show{opacity:.95}
.art-lb-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.art-lb-glow{position:absolute;left:12%;top:14%;right:12%;bottom:14%;pointer-events:none;mix-blend-mode:soft-light;background:radial-gradient(100% 120% at 0% 110%,rgba(255,176,86,.5),transparent 70%);animation:rrFlicker 2.8s infinite}
.art-lb figcaption{font:italic 19px/1.2 var(--script,var(--serif));color:#e8cf9c;letter-spacing:.3px}
.art-lb-hint{font:12px var(--sans);color:var(--muted);letter-spacing:.06em;opacity:.8}

/* tuning & credits sheet */
.tune-sheet{position:fixed;inset:0;z-index:115;background:rgba(5,3,10,.66);display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .2s}
.tune-sheet.on{opacity:1}
.tune-card{position:relative;width:min(100%,560px);max-height:calc(100% - var(--st) - 24px);overflow:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(180deg,#2a1c14,#1a1210);border:1px solid #5a4126;border-bottom:0;border-radius:18px 18px 0 0;padding:20px 18px calc(var(--sb) + 22px);color:var(--ink);transform:translateY(24px);transition:transform .25s;box-shadow:0 -10px 40px rgba(0,0,0,.6)}
.tune-sheet.on .tune-card{transform:none}
.tune-card h3{margin:0 40px 4px 0;font:600 21px/1.2 var(--serif);color:#f0d9a6}
.tune-sub{margin:0 0 14px;color:#cdbf9f;font-size:14px;line-height:1.45}
.tune-x{position:absolute;right:8px;top:8px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.06);color:var(--ink);font-size:24px;line-height:1;cursor:pointer}
.tune-ctl{display:flex;gap:8px;margin-bottom:12px}
.tune-btn{flex:1;min-height:44px;border:1px solid #7a5a2e;border-radius:10px;background:rgba(212,175,106,.12);color:#f0d9a6;font:600 14px var(--sans);cursor:pointer}
.tune-btn:active{background:rgba(212,175,106,.28)}
.tune-vol{display:flex;align-items:center;gap:12px;margin-bottom:12px;font:13px var(--sans);color:#cdbf9f}
.tune-vol input{flex:1;accent-color:#d4af6a;min-height:32px}
.tune-list{list-style:none;margin:0 0 14px;padding:0;border-top:1px solid rgba(212,175,106,.18)}
.tune-list li{border-bottom:1px solid rgba(212,175,106,.18);padding:2px 0 8px}
.tune-row{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer;padding:4px 2px;border-radius:8px}
.tune-row .tune-mark{width:22px;text-align:center;color:#6d5a3a;font-size:16px}
.tune-row.now .tune-mark{color:#ffd27a;text-shadow:0 0 8px rgba(255,170,70,.8)}
.tune-row.now b{color:#ffe2a6}
.tune-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.tune-t b{font:600 16px var(--serif)}
.tune-t small{color:#a99877;font:12px var(--sans)}
.tune-c{display:block;margin:0 0 0 34px;font:12px var(--sans);color:#a99877}
.tune-c a,.tune-fine a{color:#e0bd7a;text-decoration:underline;text-underline-offset:2px}
.tune-fine{margin:0;font:12px/1.5 var(--sans);color:#a99877}
.tune-ctl{flex-wrap:wrap}.tune-ctl .tune-btn{min-width:30%}
.tune-stn{margin:0 0 6px}
.tune-stn.now{background:linear-gradient(90deg,rgba(var(--cc),.1),transparent 70%)}
.tune-stbtn{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer;padding:6px 4px;border-radius:10px}
.tune-dot{flex:none;width:18px;height:18px;border-radius:50%;margin:0 2px;background:radial-gradient(circle at 40% 35%,#fff9,rgb(var(--cc)) 55%);box-shadow:0 0 10px rgba(var(--cc),.75)}
.tune-stbtn .tune-t b{font:600 18px var(--serif);color:#f0d9a6}
.tune-live{margin-left:auto;font:11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:rgb(var(--cc));opacity:0;transition:opacity .3s}
.tune-stn.now .tune-live{opacity:1}
.tune-stn .tune-list{margin-bottom:6px}
.tune-c em{color:#8f8062}

/* v16b/v16c: the slip's quote as fog-writing on the window glass — fitted over the glass box (js sets left/top/width/height to the sky's).
   v16c: legible — warm gold Pinyon Script, a dark brown/navy halo + soft warm glow, crisp core (js drops the filter's ripple to ~1px while it
   holds), and set in two columns, one per lancet pane, so the central mullion never crosses a letter. The older "floor smoke" placement
   stays as the no-window fallback. */
.rr-smoke.fog{width:auto;transform:none;color:var(--qc,#f6d078);font-family:var(--script)}
.rr-smoke.fog::before{inset:16% 0 6%;background:radial-gradient(closest-side,rgba(5,8,26,.78),rgba(5,8,26,.5) 62%,transparent);filter:blur(8px)}
.rr-smoke.fog .rr-smoke-in{position:absolute;left:4%;width:92%;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.rr-smoke.fog .rr-smoke-text{font-size:var(--f);line-height:1.18;letter-spacing:0;text-wrap:balance;opacity:1;filter:none}
.rr-smoke.fog .rr-smoke-attr{opacity:.85}
.rr-smoke.fog .rr-smoke-date{display:none}
.rr-smoke.fog b{white-space:nowrap;position:relative}
.rr-smoke.fog i{text-shadow:var(--qs,0 0 1px #24120a,1px 0 1px #24120a,-1px 0 1px #24120a,0 1px 1px #24120a,0 -1px 1px #24120a,0 0 3px rgba(20,10,4,.95),0 2px 4px rgba(8,8,22,.95),0 0 .3em rgba(255,200,110,.5),0 0 .7em rgba(255,170,70,.22))}
/* v22: calm smoke. No turbulence / displacement filter and nothing that wobbles: each WORD condenses out of the dark with a slow, eased,
   staggered blur-to-sharp + fade + small rise (~2 s), then holds perfectly still (no animation, no filter) so it is easy to read, then
   dissolves by blurring, widening and drifting up/sideways like a wisp (~2 s). A few very soft smoke puffs behind the text only move during
   the in and out phases. Transform / opacity / blur only. */
.rr-smoke.on{filter:none;will-change:auto}
.rr-smoke.fog i{opacity:var(--o,1);animation:none!important;transform:none}
.rr-smoke.fog b{transform-origin:50% 85%;will-change:transform,opacity,filter}
.rr-smoke.fog:not(.in):not(.out) b{will-change:auto}
.rr-smoke.fog.in b{animation:rrFogIn 1.25s cubic-bezier(.22,.61,.36,1) var(--bd,0ms) both}
.rr-smoke.fog.out b{animation:rrFogOut 1.2s cubic-bezier(.4,0,.8,.6) var(--bo,0ms) both}
@keyframes rrFogIn{0%{opacity:0;filter:blur(.42em);transform:translate3d(0,.34em,0) scale(1.1,1.04)}60%{opacity:.85;filter:blur(.12em)}100%{opacity:1;filter:blur(0);transform:translate3d(0,0,0) scale(1)}}
@keyframes rrFogOut{0%{opacity:1;filter:blur(0);transform:translate3d(0,0,0) scale(1)}100%{opacity:0;filter:blur(.55em);transform:translate3d(var(--wx,.2em),-.95em,0) scale(1.35,1.18)}}
.rr-smoke.fog.in::before{animation:rrHaloIn 1.6s ease-out both}
.rr-smoke.fog.out::before{animation:rrHaloOut 1.9s ease-in .2s both}
@keyframes rrHaloIn{from{opacity:0}to{opacity:1}}@keyframes rrHaloOut{from{opacity:1}to{opacity:0}}
.rr-smoke.fog s,.rr-smoke.fog u{position:absolute;z-index:-1;pointer-events:none;opacity:0;border-radius:50%;animation:none}
.rr-smoke.fog s{width:3.2em;height:1.7em;margin:-.9em 0 0 -1.6em;background:radial-gradient(closest-side,rgba(255,228,176,.17),rgba(255,214,150,.07) 60%,transparent);filter:blur(.45em)}
.rr-smoke.fog u{display:none}
.rr-smoke.fog.in s{animation:rrWispIn 1.9s ease-out var(--td,0s) both}
.rr-smoke.fog.out s{animation:rrWispOut 2s ease-in var(--td,0s) both}
@keyframes rrWispIn{0%{opacity:0;transform:translate3d(0,.5em,0) scale(.7)}35%{opacity:1}100%{opacity:0;transform:translate3d(var(--tx,0),-1.1em,0) scale(1.5,1.3)}}
@keyframes rrWispOut{0%{opacity:0;transform:translate3d(0,.2em,0) scale(.8)}30%{opacity:1}100%{opacity:0;transform:translate3d(var(--tx,0),-1.5em,0) scale(1.7,1.4)}}
.rr-smoke.fog.calm b,.rr-smoke.fog.calm.in b,.rr-smoke.fog.calm.out b{animation:none!important;filter:none;will-change:auto}
.rr-smoke.fog.calm s,.rr-smoke.fog.calm u{display:none}
@media (prefers-reduced-motion:reduce){.rr-smoke.fog b{animation:none!important;filter:none}.rr-smoke.fog s,.rr-smoke.fog u,.rr-smoke.fog::before{animation:none!important}.rr-smoke.fog s{display:none}}

@media (min-width:700px){.prose{max-width:760px}}

/* v22: Rosie's Landscape — a second framed picture. .rr-hang has the same box as the room picture (.rr-bg) but no mask, so a picture can hang beyond its edge.
   Default (phones, narrow windows): on the wall column left of the window, above "A Whole New World".
   .side (wide screens, set by JS when it fits): on the empty panelled wall right of the window, above the leather chair. */
.rr-hang{position:absolute;bottom:0;left:50%;transform:translateX(-50%);aspect-ratio:720/1410;width:calc((var(--rrh) + var(--st)) * .5106);pointer-events:none}
.rr-art2{position:absolute;left:30.5%;top:15.4%;width:21.5%;aspect-ratio:1000/810;padding:0;margin:0;border:0;background:none;cursor:zoom-in;pointer-events:auto;-webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.7)) brightness(calc(.84 + var(--day,0) * .16))}
.rr-art2::after{content:"";position:absolute;inset:-5px -5px 0}
.rr-art2-pic{position:absolute;left:12.4%;right:12.4%;top:14.57%;bottom:15.06%;overflow:hidden;background:#0b1030}
.rr-art2-pic img,.rr-art2-frame{display:block;width:100%;height:100%;-webkit-user-drag:none;user-select:none}
.rr-art2-pic img{object-fit:cover;filter:brightness(.88) saturate(.92)}
.rr-art2-frame{position:absolute;inset:0;pointer-events:none}
.rr-art2-lit{position:absolute;left:12.4%;right:12.4%;top:14.57%;bottom:15.06%;pointer-events:none;background:linear-gradient(180deg,rgba(255,200,130,.16),transparent 38%,rgba(0,0,0,.18))}
.rr-hang.side .rr-art2{left:112%;top:17.5%;width:35.4%;filter:drop-shadow(0 3px 5px rgba(0,0,0,.75)) brightness(calc(.84 + var(--day,0) * .16))}
/* the lightbox for this picture: a slightly taller frame than the other painting; the picture fills the opening */
.art-lb.land .art-lb-pic{width:min(94vw,calc((100vh - 140px) * 1.2346),860px);aspect-ratio:1000/810}
.art-lb.land .art-lb-in{left:12.4%;right:12.4%;top:14.57%;bottom:15.06%}
.art-lb.land .art-lb-scene{left:0;top:0;width:100%;height:100%;aspect-ratio:auto;transform:none}
.art-lb.land .art-lb-glow{display:none}
.art-lb.land .art-lb-hold{top:calc(50% + min(48vw,calc((100vh - 140px) * .6173),430px) * .81 + 78px)}
/* hold effects for it (js/artfx.js, kind "land") */
.fx-lhills,.fx-lbloss{position:absolute;inset:0;transform-origin:50% 100%;will-change:transform}
.fx-lhills img,.fx-lbloss img{display:block;width:100%;height:100%}
.fx-lhills{-webkit-mask-image:linear-gradient(180deg,transparent 41%,#000 55%);mask-image:linear-gradient(180deg,transparent 41%,#000 55%)}
.fx-lbloss{-webkit-mask-image:linear-gradient(180deg,transparent 86%,#000 92%);mask-image:linear-gradient(180deg,transparent 86%,#000 92%)}
.fx-lcl{position:absolute;background-repeat:no-repeat;will-change:transform;-webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);mask-image:radial-gradient(closest-side,#000 58%,transparent 100%)}
.fx-lsun{position:absolute;left:84%;top:35.4%;width:34%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);mix-blend-mode:screen;background:radial-gradient(closest-side,rgba(255,250,170,.8),rgba(255,236,110,.42) 22%,rgba(255,220,90,.16) 52%,transparent)}

/* v23: curated book blurbs */
.blurb{font-style:italic;color:#bdb4a0;max-width:34em;line-height:1.55;margin:.7em 0 .9em}