:root{
  --ink:#f1e2c4; --ink-dim:#c6b08a; --amber:#ffb347; --amber-deep:#d9822b;
  --brass:#c9973f; --brass-hi:#f3d388; --brass-lo:#6e4a1a;
  --wood-dk:#1d120b; --wood:#3a2415; --wood-md:#5a3a20; --wood-lt:#7a5230;
  --portal:#4fc3ff; --portal-hi:#bfeaff;
  --paper:#efe0bf; --paper-dk:#d8c294; --paper-ink:#2b1d12;
  --serif:"IM Fell English", "Iowan Old Style", Georgia, serif;
  --display:"Cinzel", "Trajan Pro", Georgia, serif;
  --deco:"Cinzel Decorative", "Cinzel", Georgia, serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#0c0806}
body{margin:0;color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.55;background:#0c0806;overflow-x:hidden}
body.locked{overflow:hidden}
a{color:var(--amber)}
button{font:inherit;color:inherit}
#motes{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:4;background:radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(0,0,0,.55) 80%,rgba(0,0,0,.85) 100%)}

/* ---------- INTERIOR ---------- */
.interior{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:6vh 4vw 10vh;isolation:isolate}
.wall{position:absolute;inset:0;z-index:-3;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 2px,transparent 2px 160px),
    repeating-linear-gradient(90deg,rgba(255,200,140,.03) 0 1px,transparent 1px 7px),
    linear-gradient(180deg,#22150c 0%,#2d1b0f 40%,#24150b 70%,#140c07 100%)}
.wall::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;
  background:repeating-linear-gradient(90deg,#20130a 0 120px,#2a190d 120px 122px,#1b1009 122px 240px),linear-gradient(#0000,#000a);
  border-top:6px solid #3d2716;box-shadow:0 -2px 0 #6b4724 inset}
.beam-top{position:absolute;left:0;right:0;top:0;height:46px;background:linear-gradient(#120b06,#2b1a0e 60%,#3c2614);box-shadow:0 8px 20px rgba(0,0,0,.7)}
.panel-row{position:absolute;left:0;right:0;top:58%;height:8px;background:linear-gradient(#5b3b1f,#2b1a0e);box-shadow:0 2px 6px #000}
.pipe{position:absolute;top:46px;bottom:22%;width:14px;border-radius:7px;background:linear-gradient(90deg,#4b3214,#c9973f 40%,#f3d388 50%,#9a6b28 65%,#3b260f)}
.pipe-a{left:6%}.pipe-b{right:7%;width:10px}
.pipe-a::before,.pipe-b::before{content:"";position:absolute;left:-5px;right:-5px;top:30%;height:14px;border-radius:3px;background:linear-gradient(90deg,#3b260f,#d9a545,#3b260f)}
.gauge{position:absolute;right:calc(7% - 22px);top:34%;width:54px;height:54px;border-radius:50%;background:radial-gradient(#e9dcc0 55%,#a07a3a 58%,#f3d388 64%,#5a3b16 72%);box-shadow:0 4px 10px #000}
.gauge i{position:absolute;left:50%;top:50%;width:2px;height:20px;background:#5b1d10;transform-origin:50% 0;animation:needle 6s ease-in-out infinite}
@keyframes needle{0%,100%{transform:rotate(200deg)}50%{transform:rotate(250deg)}62%{transform:rotate(238deg)}}

/* back door + portal */
.backdoor{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);height:min(46vh,420px);aspect-ratio:1/1.9;z-index:-2}
.door-light{position:absolute;left:-120%;right:-120%;top:-20%;bottom:-40%;background:radial-gradient(ellipse at 50% 60%,rgba(79,195,255,.28),rgba(79,195,255,.08) 40%,transparent 68%);animation:portalBreath 5s ease-in-out infinite;pointer-events:none}
.door-frame{position:absolute;inset:0;border:10px solid #3a2a20;border-bottom:none;background:#0a0d12;
  box-shadow:0 0 0 2px var(--portal),0 0 14px 3px rgba(79,195,255,.9),0 0 46px 10px rgba(79,195,255,.45),inset 0 0 30px rgba(79,195,255,.5);animation:portalFlicker 3.7s infinite}
.door-planks{position:absolute;inset:6px;background:repeating-linear-gradient(90deg,#1d140e 0 22%,#120c08 22% 23%),linear-gradient(#0000,#0008);transform-origin:left center;transform:perspective(600px) rotateY(-18deg);box-shadow:8px 0 18px rgba(0,0,0,.8)}
.door-gap{position:absolute;right:6px;top:6px;bottom:0;width:18%;background:linear-gradient(90deg,rgba(191,234,255,.85),rgba(79,195,255,.25));filter:blur(2px);animation:portalBreath 2.6s ease-in-out infinite}
@keyframes portalBreath{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes portalFlicker{0%,100%{filter:brightness(1)}41%{filter:brightness(1)}42%{filter:brightness(1.5)}43%{filter:brightness(.9)}44%{filter:brightness(1.3)}70%{filter:brightness(1.05)}}
.shrooms{position:absolute;left:-30%;right:-30%;bottom:-4px;height:30px}
.shroom{position:absolute;bottom:0;width:6px;height:12px;background:linear-gradient(#e2f8e6,#88c9b0);border-radius:2px}
.shroom::before{content:"";position:absolute;left:-7px;top:-8px;width:20px;height:11px;border-radius:12px 12px 3px 3px;background:radial-gradient(ellipse at 50% 30%,#f1fbe0,#45d0b6 55%,#177a76);box-shadow:0 0 10px 3px rgba(72,212,182,.7)}
.shroom{animation:shroomPulse 4s ease-in-out infinite}
.s1{left:6%}.s2{left:14%;transform:scale(.7);animation-delay:-1s}.s3{right:10%;transform:scale(.85);animation-delay:-2s}.s4{right:3%;transform:scale(.55);animation-delay:-3s}
@keyframes shroomPulse{0%,100%{filter:brightness(.8)}50%{filter:brightness(1.35)}}

/* family portrait easter egg */
.portrait{position:absolute;left:clamp(14px,17%,240px);top:30%;width:clamp(70px,9vw,120px);padding:0;border:0;background:none;cursor:zoom-in;z-index:1;transform:rotate(-2.5deg);transition:transform .4s}
.portrait:hover,.portrait:focus-visible{transform:rotate(0) scale(1.06)}
.portrait-frame{display:block;padding:6px;background:linear-gradient(135deg,#5a3b16,#f3d388 30%,#a0732e 50%,#f3d388 70%,#4a300f);box-shadow:0 6px 14px rgba(0,0,0,.8),0 0 0 1px #2a1a08}
.portrait img{display:block;width:100%;height:auto;filter:sepia(.25) brightness(.85);border:2px solid #2a1a08}
.portrait-nail{position:absolute;left:50%;top:-18px;width:2px;height:20px;background:linear-gradient(#888,#333);transform:translateX(-50%)}
.portrait-nail::before{content:"";position:absolute;left:-3px;top:-4px;width:8px;height:8px;border-radius:50%;background:radial-gradient(#f3d388,#6e4a1a)}

/* candles */
.candles{position:absolute;bottom:calc(22% + 0px);display:flex;gap:14px;align-items:flex-end;z-index:2}
.candles-left{left:9%}.candles-right{right:12%}
.candle{position:relative;width:16px;background:linear-gradient(90deg,#c9b48a,#f4e7c8 45%,#b59c6d);border-radius:3px 3px 2px 2px}
.candle::after{content:"";position:absolute;left:-10px;right:-10px;bottom:-6px;height:8px;border-radius:50%;background:radial-gradient(#d9a545,#6e4a1a)}
.c1{height:70px}.c2{height:48px;width:14px}.c3{height:94px;width:18px}
.flame{position:absolute;left:50%;top:-24px;width:12px;height:24px;margin-left:-6px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(ellipse at 50% 75%,#fff6d8 0 18%,#ffcf6b 35%,#ff8a2a 65%,transparent 72%);filter:blur(.4px);transform-origin:50% 100%;animation:flicker 1.6s infinite alternate}
.flame::after{content:"";position:absolute;left:50%;top:50%;width:90px;height:90px;margin:-45px;border-radius:50%;background:radial-gradient(rgba(255,180,80,.35),transparent 65%);animation:halo 2.3s infinite alternate}
.c2 .flame{animation-duration:1.2s}.c3 .flame{animation-duration:2s}
@keyframes flicker{0%{transform:scale(1,1) rotate(-1deg)}25%{transform:scale(.92,1.08) rotate(2deg)}50%{transform:scale(1.05,.95) rotate(-2deg)}75%{transform:scale(.97,1.1) rotate(1deg)}100%{transform:scale(1.03,.97) rotate(-1deg)}}
@keyframes halo{0%{opacity:.7}100%{opacity:1}}
.glow{position:absolute;width:70vw;height:70vw;max-width:900px;max-height:900px;border-radius:50%;z-index:-1;pointer-events:none;background:radial-gradient(rgba(255,160,60,.22),rgba(255,140,40,.06) 45%,transparent 70%);animation:roomFlicker 3s infinite}
.glow-left{left:-25vw;bottom:-25vw}.glow-right{right:-28vw;bottom:-30vw;animation-delay:-1.3s}
@keyframes roomFlicker{0%,100%{opacity:.85}20%{opacity:1}35%{opacity:.78}60%{opacity:.95}80%{opacity:.82}}

.counter{position:absolute;left:0;right:0;bottom:0;height:15%;z-index:3;background:linear-gradient(#5a3a20,#2b1a0e 20%,#1a0f08);border-top:6px solid #7a5230;box-shadow:0 -10px 30px rgba(0,0,0,.6)}
.counter-top{position:absolute;left:0;right:0;top:-6px;height:3px;background:linear-gradient(90deg,transparent,var(--brass-hi),transparent);opacity:.6}
.bell{position:absolute;right:20%;top:-30px;width:34px;height:24px;border-radius:50% 50% 4px 4px;background:radial-gradient(ellipse at 35% 30%,#fff2c2,#c9973f 45%,#5a3b16);box-shadow:0 4px 8px #000}
.bell::before{content:"";position:absolute;left:50%;top:-6px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#c9973f}

/* sign */
.sign{position:relative;z-index:6;margin-top:2vh;text-align:center;animation:swing 7s ease-in-out infinite;transform-origin:50% -40px}
.sign-chains{position:absolute;left:12%;right:12%;top:-40px;height:40px;border-left:3px dotted #8a6a3a;border-right:3px dotted #8a6a3a}
.sign-board{padding:18px clamp(18px,4vw,48px) 16px;border-radius:6px;
  background:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.35)),repeating-linear-gradient(90deg,#3a2415 0 3px,#432a18 3px 9px,#36210f 9px 14px);
  border:3px solid var(--brass);box-shadow:0 0 0 2px #2a1a08,0 0 0 5px var(--brass-lo),0 18px 40px rgba(0,0,0,.8),inset 0 0 30px rgba(0,0,0,.6)}
.sign h1{margin:.1em 0 0;font-family:var(--deco);font-size:clamp(30px,6.4vw,74px);line-height:1;letter-spacing:.02em;
  background:linear-gradient(180deg,#fff3c9 0%,#f3d388 35%,#c9973f 60%,#8a5d1f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #2a1a08) drop-shadow(0 0 18px rgba(255,170,70,.35))}
.sign .amp{font-family:var(--serif);font-style:italic;font-weight:400}
.sign-est{margin:0;font-family:var(--display);font-size:clamp(10px,1.4vw,13px);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim)}
.sign-sub{margin:.35em 0 0;font-family:var(--display);font-size:clamp(13px,2vw,22px);letter-spacing:.38em;text-transform:uppercase;color:var(--portal-hi);text-shadow:0 0 12px rgba(79,195,255,.7)}
@keyframes swing{0%,100%{transform:rotate(-.6deg)}50%{transform:rotate(.6deg)}}

.welcome{position:relative;z-index:6;max-width:640px;margin:auto 0 0;text-align:center;padding:18px 22px;background:radial-gradient(ellipse,rgba(10,6,3,.75),rgba(10,6,3,.35) 70%,transparent);border-radius:20px}
.welcome p{margin:.3em 0;font-size:clamp(17px,2.1vw,21px);text-shadow:0 2px 6px #000}
.welcome .hint{font-style:italic;color:var(--ink-dim);font-size:clamp(15px,1.7vw,17px)}
.brass-btn{display:inline-block;margin-top:14px;padding:12px 28px;font-family:var(--display);font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:14px;text-decoration:none;color:#2a1a08;border-radius:4px;
  background:linear-gradient(#fff0c0,#e2b860 40%,#b8832f 60%,#e7c374);border:1px solid #6e4a1a;box-shadow:0 0 0 3px #2a1a08,0 0 0 4px #8a6a3a,0 8px 20px rgba(0,0,0,.7),0 0 30px rgba(255,170,70,.3);transition:transform .2s,box-shadow .2s}
.brass-btn:hover,.brass-btn:focus-visible{transform:translateY(-2px);box-shadow:0 0 0 3px #2a1a08,0 0 0 4px #8a6a3a,0 10px 24px rgba(0,0,0,.7),0 0 40px rgba(255,170,70,.55)}
.scroll-cue{position:absolute;bottom:2.4vh;left:50%;transform:translateX(-50%);z-index:7;width:26px;height:40px;border:2px solid var(--brass);border-radius:14px}
.scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--brass-hi);animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* ---------- BOOKCASE ---------- */
.bookcase-wrap{position:relative;z-index:6;padding:7vh 3vw 6vh;background:linear-gradient(#0c0806,#160d07 10%,#1a1009 90%,#0c0806)}
.shelf-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto 26px;max-width:1100px}
.shelf-tabs button{cursor:pointer;padding:8px 16px;font-family:var(--display);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:linear-gradient(#3a2415,#22150c);border:1px solid var(--brass-lo);border-radius:3px;box-shadow:inset 0 1px 0 rgba(255,220,150,.15)}
.shelf-tabs button[aria-pressed=true]{color:#2a1a08;background:linear-gradient(#fff0c0,#e2b860 40%,#b8832f);border-color:#6e4a1a}
.shelf-tabs button.forbidden-tab{color:var(--portal-hi)}
.shelf-tabs button.forbidden-tab[aria-pressed=true]{color:#06121c;background:linear-gradient(#e6f8ff,#7fd4ff 50%,#2f8fc8)}
.bookcase{position:relative;max-width:1100px;margin:0 auto;padding:22px 26px 10px;border-radius:6px 6px 0 0;
  background:linear-gradient(90deg,#2b1a0e,#3d2716 3%,#24160c 3.2%,#1a0f08 50%,#24160c 96.8%,#3d2716 97%,#2b1a0e);
  box-shadow:0 0 0 4px #120b06,0 30px 80px rgba(0,0,0,.9),inset 0 0 80px rgba(0,0,0,.8);border-top:18px solid #3a2415}
.bookcase::before{content:"";position:absolute;left:-14px;right:-14px;top:-30px;height:18px;background:linear-gradient(#6b4724,#3a2415);border-radius:4px;box-shadow:0 4px 10px #000}
.shelf{position:relative;margin-bottom:26px;transition:opacity .5s,filter .5s,transform .5s}
.shelf-row{position:relative;display:flex;align-items:flex-end;gap:3px;min-height:190px;padding:0 14px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;
  background:radial-gradient(ellipse at 50% 100%,rgba(255,160,60,.10),transparent 70%),linear-gradient(#0d0805,#1a0f08)}
.shelf-plank{height:20px;margin:0 -6px;background:linear-gradient(#7a5230,#5a3a20 30%,#3a2415 80%,#1a0f08);box-shadow:0 10px 16px rgba(0,0,0,.8);border-radius:2px}
.plate-label{position:absolute;left:50%;bottom:-2px;transform:translate(-50%,0);z-index:3;cursor:pointer;padding:3px 16px 2px;font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#2a1a08;border:1px solid #5a3b16;border-radius:2px;
  background:linear-gradient(#fff0c0,#d9ab52 50%,#a8762a);box-shadow:0 2px 4px #000,inset 0 1px 0 #fff6d8;white-space:nowrap}
.plate-label::before,.plate-label::after{content:"";position:absolute;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#5a3b16}
.plate-label::before{left:5px}.plate-label::after{right:5px}
.shelf.forbidden .shelf-row{background:radial-gradient(ellipse at 50% 100%,rgba(79,195,255,.18),transparent 70%),linear-gradient(#05070b,#0d1018)}
.shelf.forbidden .plate-label{background:linear-gradient(#e6f8ff,#7fd4ff 50%,#2f8fc8);border-color:#14405e;color:#04121c}
.shelf-note{display:none;text-align:center;margin:10px 0 0;font-style:italic;color:var(--ink-dim)}
.bookcase.focus .shelf{opacity:.18;filter:blur(1.5px) saturate(.4)}
.bookcase.focus .shelf.active{opacity:1;filter:none;transform:scale(1.02)}
.bookcase.focus .shelf.active .shelf-note{display:block}
.shelf-hint{text-align:center;color:var(--ink-dim);font-style:italic;margin:16px 0 0}

/* spines */
.spine{--c:#4a2a18;--b:#c99a4a;position:relative;flex:0 0 auto;width:calc(var(--w,40) * 1px);height:calc(var(--h,90) * 1.35px);cursor:pointer;border:0;padding:0;border-radius:3px 3px 1px 1px;
  background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(255,255,255,.08) 18%,rgba(255,255,255,.02) 40%,rgba(0,0,0,.25) 80%,rgba(0,0,0,.6)),var(--c);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),2px 0 3px rgba(0,0,0,.6);transform-origin:50% 100%;transition:transform .25s,box-shadow .25s,filter .25s}
.spine::before,.spine::after{content:"";position:absolute;left:0;right:0;height:5px;background:linear-gradient(var(--b),rgba(0,0,0,.4));opacity:.9}
.spine::before{top:12px}.spine::after{bottom:12px}
.spine .spine-title{position:absolute;left:50%;top:50%;width:calc(var(--h,90) * 1.35px - 40px);transform:translate(-50%,-50%) rotate(-90deg);font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.04em;line-height:1.15;text-align:center;color:var(--b);text-shadow:0 1px 0 #000;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.spine.real:hover,.spine.real:focus-visible{transform:translateY(-14px) rotate(-1.5deg);filter:brightness(1.25);box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),0 0 18px rgba(255,170,70,.5);outline:none}
.spine.real::marker{display:none}
.spine.real .tag{position:absolute;top:-6px;left:50%;width:9px;height:18px;margin-left:-4px;background:linear-gradient(#c33,#7a1515);clip-path:polygon(0 0,100% 0,100% 100%,50% 75%,0 100%);opacity:0;transition:opacity .3s}
.spine.real .tag{opacity:.9}
.spine.forbidden-book{box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),0 0 14px rgba(79,195,255,.55);animation:tomeHum 3s ease-in-out infinite}
.spine.forbidden-book .spine-title{color:var(--portal-hi);text-shadow:0 0 6px var(--portal)}
.spine.forbidden-book .chain{position:absolute;left:-4px;right:-4px;top:82%;height:8px;background:repeating-linear-gradient(90deg,#999 0 6px,#555 6px 8px);border-radius:3px;box-shadow:0 1px 3px #000}
@keyframes tomeHum{0%,100%{box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),0 0 10px rgba(79,195,255,.4)}50%{box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),0 0 22px rgba(79,195,255,.85)}}
.bookend{flex:0 0 auto;width:26px;height:70px;margin:0 10px;align-self:flex-end;background:linear-gradient(90deg,#5a3b16,#f3d388 45%,#8a5d1f);clip-path:polygon(0 100%,0 30%,30% 0,100% 0,100% 100%);opacity:.85}
.trinket-rook{flex:0 0 auto;width:34px;height:58px;margin:0 10px;align-self:flex-end;background:linear-gradient(90deg,#5a3b16,#e2b860 45%,#8a5d1f);clip-path:polygon(0 100%,8% 80%,14% 30%,0 26%,0 0,22% 0,22% 10%,39% 10%,39% 0,61% 0,61% 10%,78% 10%,78% 0,100% 0,100% 26%,86% 30%,92% 80%,100% 100%)}
.trinket-skull,.trinket-lamp{flex:0 0 auto;width:28px;height:28px;margin:0 8px;align-self:flex-end;border-radius:50%;background:radial-gradient(#fff6d8,#ffb347 40%,#7a3a10 70%);box-shadow:0 0 20px rgba(255,170,70,.6)}

/* ---------- BOOK OVERLAY ---------- */
.book-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:3vh 2vw}
.book-overlay[hidden]{display:none}
.book-backdrop{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(20,12,6,.75),rgba(0,0,0,.94));opacity:0;transition:opacity .5s;backdrop-filter:blur(3px)}
.book-overlay.open .book-backdrop{opacity:1}
.book{position:relative;width:min(1180px,96vw);height:min(720px,90vh);perspective:2200px;transform:scale(.55) translateY(20vh);opacity:0;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .4s}
.book-overlay.open .book{transform:none;opacity:1}
.spread{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;border-radius:6px;padding:14px;
  background:linear-gradient(90deg,#3a1d10,#5a2a1e 50%,#3a1d10);box-shadow:0 30px 90px rgba(0,0,0,.95),0 0 0 2px #1a0d06,0 0 60px rgba(255,160,60,.15)}
.book.forbidden .spread{background:linear-gradient(90deg,#0b1220,#14223a 50%,#0b1220);box-shadow:0 30px 90px rgba(0,0,0,.95),0 0 0 2px #050a12,0 0 70px rgba(79,195,255,.35)}
.page{position:relative;overflow:hidden;background:
   radial-gradient(ellipse at 50% 50%,transparent 60%,rgba(120,80,30,.25) 100%),
   linear-gradient(var(--paper),var(--paper-dk));color:var(--paper-ink)}
.page-left{border-radius:4px 0 0 4px;box-shadow:inset -30px 0 40px -20px rgba(60,35,10,.55);display:flex;align-items:center;justify-content:center;padding:26px}
.page-right{border-radius:0 4px 4px 0;box-shadow:inset 30px 0 40px -20px rgba(60,35,10,.55)}
.gutter{position:absolute;left:50%;top:14px;bottom:14px;width:2px;margin-left:-1px;background:rgba(60,35,10,.4);pointer-events:none}
.page-scroll{position:absolute;inset:0;overflow-y:auto;padding:34px 40px 30px;scrollbar-width:thin;scrollbar-color:#a07a3a transparent}
.page-right,.page-left{opacity:0;transition:opacity .4s .55s}
.book-overlay.open .page{opacity:1}
.plate{margin:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.plate .frame{position:relative;width:100%;padding:8px;background:linear-gradient(135deg,#5a3b16,#e2b860 30%,#8a5d1f 50%,#e2b860 70%,#4a300f);box-shadow:0 6px 18px rgba(40,20,5,.6)}
.plate video,.plate img{display:block;width:100%;height:auto;max-height:56vh;object-fit:contain;background:#000}
.plate .zoom{cursor:zoom-in}
.plate figcaption{font-style:italic;font-size:15px;color:#5a4128;text-align:center}
.plate .loading{position:absolute;inset:8px;display:flex;align-items:center;justify-content:center;color:var(--portal-hi);font-family:var(--display);letter-spacing:.2em;font-size:12px;background:rgba(0,0,0,.4);transition:opacity .4s;pointer-events:none}
.plate .loading.done{opacity:0}
.textonly{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#6b4d2c;padding:20px;border:2px double rgba(110,74,26,.45)}
.textonly .orn{font-size:64px;line-height:1;color:#8a5d1f}
.textonly p{font-style:italic;margin:.6em 0 0}
.shelfmark{margin:0;font-family:var(--display);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#8a5d1f}
.page h2{margin:.25em 0 .1em;font-family:var(--deco);font-size:clamp(26px,3vw,40px);line-height:1.08;color:#3a1d10}
.book.forbidden .page h2{color:#0e2c48;text-shadow:0 0 12px rgba(79,195,255,.35)}
.book-sub{margin:0 0 1em;font-style:italic;color:#6b4d2c}
.lore p{margin:0 0 .85em;font-size:17.5px;line-height:1.6;text-align:justify;hyphens:auto}
.lore p:first-child::first-letter{float:left;font-family:var(--deco);font-size:3.4em;line-height:.85;padding:.06em .1em 0 0;color:#7a1f12}
.book.forbidden .lore p:first-child::first-letter{color:#1a6fa8}
.fin{text-align:center;color:#8a5d1f;margin:.4em 0 0}
.close-book{position:absolute;top:-14px;right:-14px;z-index:5;width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:18px;color:#2a1a08;border:1px solid #6e4a1a;background:radial-gradient(circle at 35% 30%,#fff0c0,#d9ab52 55%,#8a5d1f);box-shadow:0 4px 12px #000}
/* cover that swings open */
.book-cover{position:absolute;left:50%;top:0;bottom:0;width:50%;transform-origin:left center;transform-style:preserve-3d;z-index:4;transition:transform 1s cubic-bezier(.6,.05,.3,1);pointer-events:none}
.book-overlay.open .book-cover{transform:rotateY(-178deg)}
.book-overlay.open.settled .book-cover{visibility:hidden}
.cover-front,.cover-inside{position:absolute;inset:0;border-radius:0 6px 6px 0;backface-visibility:hidden}
.cover-front{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:30px;
  background:radial-gradient(ellipse at 40% 35%,rgba(255,255,255,.08),transparent 60%),repeating-linear-gradient(35deg,rgba(0,0,0,.06) 0 2px,transparent 2px 6px),var(--cover,#5a2a1e);
  box-shadow:inset 0 0 0 10px rgba(0,0,0,.25),inset 0 0 0 12px var(--coverband,#c99a4a),inset 0 0 0 14px rgba(0,0,0,.3),0 20px 50px #000}
.cover-title{font-family:var(--deco);font-size:clamp(22px,3vw,40px);text-align:center;color:var(--coverband,#c99a4a);text-shadow:0 2px 0 #000}
.cover-orn{width:60px;height:60px;border:3px double var(--coverband,#c99a4a);transform:rotate(45deg)}
.cover-inside{transform:rotateY(180deg);background:linear-gradient(90deg,#d8c294,#efe0bf)}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:4vh 3vw;background:rgba(5,3,2,.94)}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:82vh;box-shadow:0 0 0 6px #8a5d1f,0 0 0 8px #2a1a08,0 20px 60px #000}
.lightbox p{margin:0;font-style:italic;color:var(--ink-dim);text-align:center;max-width:640px}
.lightbox .close-book{top:16px;right:16px}

.toast{position:fixed;left:50%;bottom:24px;z-index:80;transform:translate(-50%,40px);opacity:0;max-width:90vw;padding:10px 18px;font-style:italic;background:rgba(20,12,6,.95);border:1px solid var(--brass-lo);border-radius:4px;box-shadow:0 8px 24px #000;transition:opacity .3s,transform .3s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
.colophon{position:relative;z-index:6;text-align:center;padding:30px 20px 50px;color:#8a7558;font-size:14px;background:#0c0806}

/* ---------- RESPONSIVE ---------- */
@media (max-width:760px){
  body{font-size:17px}
  .interior{padding-top:7vh}
  .backdoor{height:min(40vh,330px);bottom:24%}
  .portrait{left:5%;top:auto;bottom:47%;width:76px}
  .candles-left{left:4%}.candles-right{right:5%}
  .pipe-a,.gauge{display:none}
  .shelf-row{min-height:170px}
  .spine{width:calc(var(--w,40) * .85px);height:calc(var(--h,90) * 1.2px)}
  .spine .spine-title{width:calc(var(--h,90) * 1.2px - 34px);font-size:11px}
  .book{height:92vh;height:92svh;perspective:none}
  .book-cover{display:none}
  .spread{display:block;overflow-y:auto;padding:10px}
  .page{border-radius:4px!important;box-shadow:none!important}
  .page-left{padding:16px;margin-bottom:8px}
  .page-right{position:relative}
  .page-scroll{position:static;padding:22px 20px}
  .gutter{display:none}
  .close-book{top:6px;right:6px}
  .lore p{text-align:left;font-size:17px}
  .plate video,.plate img{max-height:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01s!important;transition-delay:0s!important}
  html{scroll-behavior:auto}
}

/* =====================================================================
   v3 POLISH · Story Book Corner · status markers · dev-draft warning
   ===================================================================== */
:root{--px:0;--py:0;--scroll:0}
:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px;border-radius:3px;box-shadow:0 0 0 5px rgba(243,211,136,.18),0 0 18px rgba(255,170,70,.45)}
.grain{position:fixed;inset:-50%;z-index:4;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .75 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* parallax layers: `translate` composes with each element's own transform/animation */
.layer{translate:calc(var(--px) * var(--d,0.3) * -28px) calc(var(--py) * var(--d,0.3) * -16px + var(--scroll) * var(--d,0.3) * -90px);transition:translate .25s ease-out;will-change:translate}
.wall.layer{inset:-3% -3% 0}
.backdoor-wrap,.portrait-wrap,.corner-spot-wrap{position:absolute;inset:0;pointer-events:none}
.backdoor-wrap{z-index:-2}
.portrait-wrap{z-index:1}.portrait-wrap .portrait{pointer-events:auto}
.corner-spot-wrap{z-index:4}.corner-spot-wrap .corner-spot{pointer-events:auto}
.interior{perspective:1200px}
.interior > .sign,.interior > .welcome{opacity:calc(1 - var(--scroll) * 1.1)}

/* side bookcases for depth */
.side-case{position:absolute;top:46px;bottom:15%;width:min(9vw,120px);z-index:2;pointer-events:none;filter:blur(1.2px) brightness(.55);
  background:
    repeating-linear-gradient(180deg,transparent 0 92px,#3a2415 92px 102px,#120b06 102px 106px),
    repeating-linear-gradient(90deg,#2b1a10 0 9px,#3d1f16 9px 17px,#1f2a22 17px 23px,#2c2438 23px 31px,#4a3a1e 31px 37px,#160e09 37px 39px),
    #120b06;
  box-shadow:inset -20px 0 40px #000}
.side-left{left:0;border-right:8px solid #2a190d;mask-image:linear-gradient(90deg,#000 60%,transparent)}
.side-right{right:0;border-left:8px solid #2a190d;box-shadow:inset 20px 0 40px #000;mask-image:linear-gradient(270deg,#000 60%,transparent)}

/* pendant lamps */
.pendant{position:absolute;top:0;z-index:1;width:60px;height:100%;pointer-events:none}
.pendant-left{left:27%}.pendant-right{right:27%}
.pendant .cord{position:absolute;left:50%;top:0;width:2px;height:13vh;background:linear-gradient(#000,#5a3b16)}
.pendant .shade{position:absolute;left:50%;top:13vh;width:44px;height:24px;margin-left:-22px;border-radius:50% 50% 6px 6px/80% 80% 6px 6px;
  background:linear-gradient(#f3d388,#a0732e 50%,#5a3b16);box-shadow:0 10px 20px rgba(255,170,70,.5),inset 0 -6px 8px rgba(255,220,150,.6)}
.pendant .shade::after{content:"";position:absolute;left:50%;bottom:-6px;width:16px;height:9px;margin-left:-8px;border-radius:50%;background:radial-gradient(#fff6d8,#ffb347);box-shadow:0 0 24px 8px rgba(255,180,80,.55)}
.pendant .cone{position:absolute;left:50%;top:calc(13vh + 24px);width:44vw;max-width:520px;height:60vh;translate:-50% 0;
  background:radial-gradient(ellipse 50% 100% at 50% 0,rgba(255,190,110,.16),rgba(255,170,70,.05) 55%,transparent 75%);
  clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);mix-blend-mode:screen;animation:roomFlicker 4.5s infinite}
.pendant-right .cone{animation-delay:-2s}

/* portal light spill on the floor */
.door-spill{position:absolute;left:-60%;right:-60%;bottom:-36%;height:40%;background:radial-gradient(ellipse 50% 60% at 50% 0,rgba(79,195,255,.32),rgba(79,195,255,.08) 50%,transparent 75%);clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);mix-blend-mode:screen;animation:portalBreath 5s ease-in-out infinite}

/* sign finish */
.sign-board{position:relative;overflow:hidden}
.sign-board::before{content:"";position:absolute;inset:8px;border:1px solid rgba(243,211,136,.28);border-radius:3px;pointer-events:none}
.sign-board::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,240,200,.09),transparent);animation:sheen 9s ease-in-out infinite;pointer-events:none}
@keyframes sheen{0%,70%{left:-40%}100%{left:130%}}
.rivet{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2c2,#c9973f 50%,#4a300f);box-shadow:0 1px 2px #000}
.r1{left:10px;top:10px}.r2{right:10px;top:10px}.r3{left:10px;bottom:10px}.r4{right:10px;bottom:10px}
.sign-rule{display:flex;align-items:center;justify-content:center;gap:10px;margin:.4em auto 0;width:min(420px,70%)}
.sign-rule i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--brass),transparent)}
.sign-rule b{width:8px;height:8px;transform:rotate(45deg);background:var(--portal);box-shadow:0 0 10px var(--portal)}
.sign h1{background-size:100% 200%;animation:gild 7s ease-in-out infinite}
@keyframes gild{0%,100%{background-position:0 0}50%{background-position:0 30%}}

/* warmer candles */
.candle{box-shadow:inset -3px 0 4px rgba(120,80,40,.35),0 0 18px rgba(255,170,70,.15)}
.candle::before{content:"";position:absolute;top:-2px;left:2px;width:5px;height:16px;border-radius:0 0 4px 4px;background:#efe0bf;box-shadow:7px 4px 0 -1px #e6d3aa}
.flame{background:radial-gradient(ellipse at 50% 82%,rgba(120,170,255,.85) 0 9%,#fff6d8 14% 22%,#ffcf6b 38%,#ff8a2a 65%,transparent 72%)}
.flame::after{width:140px;height:140px;margin:-70px;background:radial-gradient(rgba(255,180,80,.38),rgba(255,140,40,.1) 45%,transparent 68%)}
.candles::after{content:"";position:absolute;left:-60px;right:-60px;bottom:-24px;height:40px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,170,70,.28),transparent 70%);animation:roomFlicker 2.6s infinite;pointer-events:none}
.smoke{position:absolute;left:50%;top:-40px;width:6px;height:30px;margin-left:-3px;border-radius:50%;background:linear-gradient(transparent,rgba(220,210,200,.18));filter:blur(3px);opacity:0;animation:smoke 9s ease-in infinite}
.c3 .smoke{animation-delay:-4s}
@keyframes smoke{0%,60%{opacity:0;transform:translateY(0) scaleX(1)}70%{opacity:.6}100%{opacity:0;transform:translateY(-60px) scaleX(2.4) rotate(8deg)}}

/* welcome / buttons */
.welcome{backdrop-filter:blur(1px)}
.welcome-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center}
.ghost-btn{display:inline-block;margin-top:14px;padding:11px 20px;font-family:var(--display);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:12.5px;text-decoration:none;color:var(--brass-hi);border:1px solid rgba(201,151,63,.6);border-radius:4px;background:rgba(20,12,6,.55);transition:background .2s,color .2s,box-shadow .2s,transform .2s}
.ghost-btn:hover{background:rgba(201,151,63,.15);color:#fff3c9;box-shadow:0 0 20px rgba(255,170,70,.3);transform:translateY(-2px)}
.brass-btn:active,.ghost-btn:active{transform:translateY(1px)}
.scroll-cue{transition:opacity .3s;opacity:calc(1 - var(--scroll) * 3)}

/* corner hotspot */
.corner-spot{position:absolute;right:calc(12% + 110px);bottom:calc(22% - 6px);display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--ink);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.corner-spot:hover{transform:translateY(-4px) scale(1.04)}
.mini-nook{position:relative;display:block;width:120px;height:92px}
.mini-glow{position:absolute;left:-30px;right:-30px;top:-30px;bottom:-10px;border-radius:50%;background:radial-gradient(ellipse at 70% 40%,rgba(255,190,100,.38),transparent 65%);animation:roomFlicker 3.4s infinite}
.mini-rug{position:absolute;left:4px;right:4px;bottom:0;height:18px;border-radius:50%;background:repeating-radial-gradient(ellipse at center,#8c3b2a 0 4px,#c9973f 4px 6px,#2f5d6b 6px 10px,#d9b46a 10px 12px);box-shadow:0 2px 6px #000}
.mini-lamp{position:absolute;right:4px;bottom:8px;width:26px;height:84px}
.mini-lamp::before{content:"";position:absolute;left:12px;bottom:0;width:2px;height:62px;background:linear-gradient(#c9973f,#5a3b16)}
.mini-lamp::after{content:"";position:absolute;left:0;top:0;width:26px;height:18px;clip-path:polygon(22% 0,78% 0,100% 100%,0 100%);background:linear-gradient(#ffe2a3,#e09a45)}
.mini-lamp i{position:absolute;left:-14px;top:12px;width:54px;height:50px;background:radial-gradient(ellipse at 50% 0,rgba(255,200,120,.55),transparent 70%)}
.mini-chair{position:absolute;left:14px;bottom:9px;width:66px;height:62px}
.mini-chair b,.armchair b{position:absolute;display:block}
.mini-chair .back{left:8px;right:8px;top:0;height:42px;border-radius:22px 22px 6px 6px;background:linear-gradient(#8a2f24,#5a1c16);box-shadow:inset 0 -6px 10px rgba(0,0,0,.35)}
.mini-chair .arm{bottom:6px;width:16px;height:34px;border-radius:9px 9px 3px 3px;background:linear-gradient(#9a372a,#5a1c16)}
.mini-chair .arm.l{left:0}.mini-chair .arm.r{right:0}
.mini-chair .seat{left:12px;right:12px;bottom:6px;height:16px;border-radius:5px;background:#6e241c}
.mini-chair .cushion{left:22px;top:16px;width:22px;height:16px;border-radius:7px;background:#d9b46a}
.mini-chair::after{content:"";position:absolute;left:6px;right:6px;bottom:0;height:6px;background:repeating-linear-gradient(90deg,#3a2415 0 6px,transparent 6px 48px)}
.corner-tag{position:relative;padding:4px 12px 3px;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#2a1a08;white-space:nowrap;border-radius:2px;border:1px solid #6e4a1a;
  background:linear-gradient(#fff0c0,#e2b860 45%,#b8832f);box-shadow:0 3px 8px #000,0 0 0 0 rgba(255,190,100,.55);animation:invite 2.8s ease-in-out infinite}
@keyframes invite{0%,100%{box-shadow:0 3px 8px #000,0 0 0 0 rgba(255,190,100,.5)}50%{box-shadow:0 3px 8px #000,0 0 0 7px rgba(255,190,100,0)}}

/* bookcase entrance */
.bookcase-wrap{padding-top:9vh}
.lintel{position:absolute;left:0;right:0;top:-12vh;height:24vh;background:linear-gradient(transparent,#0c0806 50%,#160d07);pointer-events:none}
.js .shelf.reveal{opacity:0;transform:translateY(28px)}
.js .shelf.reveal.in{opacity:1;transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1),filter .5s}
.js .bookcase.focus .shelf.reveal.in{opacity:.18}
.js .bookcase.focus .shelf.reveal.in.active{opacity:1;transform:scale(1.02)}
.shelf-tabs button{transition:transform .2s,box-shadow .2s,color .2s}
.shelf-tabs button:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.6),0 0 14px rgba(255,170,70,.2)}
.plate-label{transition:filter .2s,box-shadow .2s}
.plate-label:hover{filter:brightness(1.12);box-shadow:0 2px 4px #000,0 0 16px rgba(255,190,100,.55),inset 0 1px 0 #fff6d8}

/* status markers on spines */
.spine.real .tag{display:none}
.spine .mark{position:absolute;pointer-events:none}
.spine.status-draft .mark{top:-7px;left:50%;width:10px;height:22px;margin-left:-5px;background:linear-gradient(#d23a2a,#7a1515);clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%);box-shadow:0 0 6px rgba(210,58,42,.6)}
.spine.status-draft .mark::after{content:"";position:absolute;left:1px;right:1px;bottom:9px;height:1px;background:rgba(255,220,200,.4)}
.spine.status-final .mark{top:-7px;left:50%;width:10px;height:22px;margin-left:-5px;background:linear-gradient(#fff0c0,#d9ab52 50%,#8a5d1f);clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%)}
.spine.status-stub .mark{bottom:20px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#d8c294;color:#4a3420;font-size:9px;line-height:14px;text-align:center;opacity:.9;box-shadow:0 1px 2px #000}
.spine.status-stub .mark::before{content:"✎"}
.spine.forbidden-book.status-draft .mark{top:-7px}
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin:18px auto 0;font-size:14px;color:var(--ink-dim);font-style:italic}
.legend span{display:inline-flex;align-items:center;gap:8px}
.lg{display:inline-block;width:10px;height:18px;clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%)}
.lg-draft{background:linear-gradient(#d23a2a,#7a1515)}
.lg-final{background:linear-gradient(#fff0c0,#d9ab52 50%,#8a5d1f)}
.lg-stub{width:14px;height:14px;clip-path:none;border-radius:50%;background:#d8c294;color:#4a3420;font-size:9px;line-height:14px;text-align:center;font-style:normal}
.lg-stub::before{content:"✎"}

/* dev-draft warning */
.dev-ribbon{position:relative;margin:-6px 56px 16px 0;padding:8px 14px 8px 16px;font-size:14px;line-height:1.35;color:#5a1410;
  background:linear-gradient(#f6e6c4,#ead2a2);border:1px solid rgba(122,31,18,.45);border-left:5px solid #a3281b;border-radius:2px;box-shadow:0 2px 6px rgba(60,30,10,.25)}
.dev-ribbon strong{font-family:var(--display);letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:#8c1d12}
.dev-ribbon[hidden],.wax-seal[hidden]{display:none}
.wax-seal{position:absolute;top:14px;right:16px;z-index:3;width:66px;height:66px;display:flex;align-items:center;justify-content:center;transform:rotate(-14deg);pointer-events:none;
  border-radius:47% 53% 50% 50%/52% 46% 54% 48%;background:radial-gradient(circle at 38% 32%,#e05a44,#a3281b 45%,#6e140d 80%);
  box-shadow:0 3px 6px rgba(60,10,5,.5),inset 0 0 0 5px rgba(0,0,0,.12),inset 0 0 0 7px rgba(255,170,150,.18)}
.wax-seal span{font-family:var(--display);font-weight:700;font-size:11px;line-height:1.05;letter-spacing:.12em;text-align:center;color:#ffd9cc;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.wax-seal::after{content:"";position:absolute;inset:10px;border:1px dashed rgba(255,210,195,.45);border-radius:50%}

/* stub ("still being written") spread */
.stub-left{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.stub-left .stub-title{margin:0;font-family:var(--deco);font-size:clamp(22px,2.6vw,34px);line-height:1.1;color:#3a1d10}
.stub-left .ph-tag{display:inline-block;margin-top:2px;padding:2px 10px;font-family:var(--display);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#6b4d2c;border:1px dashed rgba(110,74,26,.6);border-radius:2px}
.stub-left .frame img{max-height:44vh}
.stub-note{margin-top:8px;padding:22px 24px;border:2px double rgba(110,74,26,.45);text-align:center;background:rgba(255,248,230,.35)}
.stub-note .quill{font-size:42px;line-height:1;color:#8a5d1f}
.stub-note h3{margin:.3em 0;font-family:var(--display);font-size:20px;letter-spacing:.06em;color:#3a1d10}
.stub-note p{margin:.5em 0;font-style:italic;color:#5a4128}
.stub-note .dev-hint{font-style:normal;font-size:13px;color:#8a6f4d}
.stub-note code{font-size:12px;background:rgba(110,74,26,.1);padding:1px 4px;border-radius:2px}
.page-right .blank-lines{height:120px;margin-top:18px;background:repeating-linear-gradient(transparent 0 27px,rgba(110,74,26,.18) 27px 28px)}

/* ---------- STORY BOOK CORNER ---------- */
.corner{position:fixed;inset:0;z-index:40;overflow-y:auto;overflow-x:hidden;background:#140c08;
  clip-path:circle(0 at var(--ox,80%) var(--oy,70%));transition:clip-path 1s cubic-bezier(.6,.05,.3,1)}
.corner[hidden]{display:none}
.corner.open{clip-path:circle(150% at var(--ox,80%) var(--oy,70%))}
body.to-corner #interior{transform:scale(1.25);transform-origin:var(--ox,80%) var(--oy,70%);filter:blur(3px) brightness(.6);transition:transform 1s cubic-bezier(.6,.05,.3,1),filter 1s}
#interior{transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .9s}
.nook{position:fixed;inset:0;z-index:0;pointer-events:none;transform:scale(1.08);transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.corner.open .nook{transform:none}
.nook-wall{position:absolute;inset:0 0 28% 0;background:
   radial-gradient(circle at 20px 20px,rgba(217,180,106,.08) 2px,transparent 3px) 0 0/40px 40px,
   repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 1px,transparent 1px 80px),
   linear-gradient(#2a1a22,#3a2028 55%,#2b1612)}
.nook-wall::after{content:"";position:absolute;left:0;right:0;bottom:0;height:28%;background:repeating-linear-gradient(90deg,#3a2415 0 4px,#2b1a0e 4px 90px);border-top:8px solid #5a3a20}
.nook-window{position:absolute;left:8%;top:12%;width:min(22vw,220px);aspect-ratio:3/4;border-radius:110px 110px 6px 6px;border:10px solid #3a2415;background:radial-gradient(circle at 60% 30%,#24406a,#0b1426 70%);box-shadow:inset 0 0 30px rgba(79,195,255,.25),0 0 0 3px #1a0f08}
.nook-window::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:6px;margin-left:-3px;background:#3a2415}
.nook-window::after{content:"";position:absolute;left:0;right:0;top:55%;height:6px;background:#3a2415}
.moon{position:absolute;right:18%;top:16%;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#fff6d8,#d8c294);box-shadow:0 0 24px rgba(255,240,200,.6)}
.bunting{position:absolute;left:4%;right:4%;top:4%;height:40px;display:flex;justify-content:space-around;border-top:2px solid rgba(217,180,106,.5);border-radius:0 0 50% 50%/0 0 30px 30px}
.bunting i{width:26px;height:30px;clip-path:polygon(0 0,100% 0,50% 100%);background:#a3281b;opacity:.85}
.bunting i:nth-child(3n+2){background:#2f5d6b}.bunting i:nth-child(3n){background:#c9973f}
.nook-shelf{position:absolute;right:8%;top:16%;width:min(26vw,280px);height:70px;display:flex;align-items:flex-end;gap:3px;padding:0 10px;border-bottom:10px solid #5a3a20;box-shadow:0 10px 14px rgba(0,0,0,.6)}
.nook-shelf b{width:16px;height:52px;background:#7a3a2a;border-radius:2px}
.nook-shelf b:nth-child(2){background:#2f5d6b;height:60px}.nook-shelf b:nth-child(3){background:#c9973f;height:44px}.nook-shelf b:nth-child(4){background:#4a5a2a;height:56px;transform:rotate(8deg);transform-origin:bottom left}.nook-shelf b:nth-child(5){background:#6b3b5a;height:48px;margin-left:8px}
.toy-rook{width:26px;height:40px;margin-left:auto;background:linear-gradient(90deg,#8a5d1f,#e2b860 45%,#8a5d1f);clip-path:polygon(0 100%,8% 80%,14% 30%,0 26%,0 0,22% 0,22% 10%,39% 10%,39% 0,61% 0,61% 10%,78% 10%,78% 0,100% 0,100% 26%,86% 30%,92% 80%,100% 100%)}
.nook-floor{position:absolute;left:0;right:0;bottom:0;height:28%;background:repeating-linear-gradient(90deg,#2a190d 0 140px,#20130a 140px 142px),linear-gradient(#2a190d,#140c07)}
.nook-rug{position:absolute;left:50%;bottom:4%;width:min(80vw,820px);height:min(18vh,170px);translate:-50% 0;border-radius:50%;
  background:repeating-radial-gradient(ellipse at center,#8c3b2a 0 14px,#d9b46a 14px 20px,#2f5d6b 20px 34px,#c9973f 34px 40px,#6b3b5a 40px 54px,#e6d3aa 54px 58px);
  box-shadow:0 10px 30px rgba(0,0,0,.7),inset 0 0 40px rgba(0,0,0,.35);opacity:.92}
.nook-rug .star{position:absolute;color:#fff3c9;text-shadow:0 0 8px rgba(255,220,150,.8);font-size:18px}
.st1{left:22%;top:30%}.st2{right:24%;top:46%}.st3{left:48%;top:64%}
.nook-lamp{position:absolute;right:calc(50% - min(30vw,340px));bottom:12%;width:90px;height:min(56vh,440px)}
.nook-lamp .pole{position:absolute;left:44px;bottom:0;top:60px;width:4px;background:linear-gradient(90deg,#5a3b16,#e2b860,#5a3b16)}
.nook-lamp .pole::after{content:"";position:absolute;left:-22px;bottom:-4px;width:48px;height:10px;border-radius:50%;background:#3a2415}
.nook-lamp .lshade{position:absolute;left:0;top:0;width:90px;height:66px;clip-path:polygon(24% 0,76% 0,100% 100%,0 100%);background:linear-gradient(#ffe7b0,#e7a24d 70%,#b8742d);box-shadow:0 0 40px rgba(255,190,100,.6)}
.nook-lamp .lcone{position:absolute;left:50%;top:60px;width:min(60vw,640px);height:min(60vh,520px);translate:-50% 0;background:radial-gradient(ellipse 50% 100% at 50% 0,rgba(255,200,120,.32),rgba(255,170,70,.08) 55%,transparent 75%);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);mix-blend-mode:screen;animation:roomFlicker 5s infinite}
.armchair{position:absolute;left:calc(50% - min(32vw,360px));bottom:10%;width:min(30vw,300px);height:min(30vw,280px)}
.armchair .back{left:12%;right:12%;top:0;height:66%;border-radius:46% 46% 10px 10px/38% 38% 10px 10px;background:radial-gradient(ellipse at 50% 30%,#a8402f,#6e241c 70%);box-shadow:inset 0 -14px 24px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.6)}
.armchair .back::after{content:"";position:absolute;inset:14% 18% 20%;border-radius:40%;background:repeating-radial-gradient(circle at 50% 40%,transparent 0 10px,rgba(0,0,0,.12) 10px 11px)}
.armchair .arm{bottom:12%;width:24%;height:50%;border-radius:40% 40% 8px 8px/30% 30% 8px 8px;background:linear-gradient(#b4463a,#6e241c);box-shadow:inset 0 8px 10px rgba(255,200,170,.12),0 6px 14px rgba(0,0,0,.5)}
.armchair .arm.l{left:0}.armchair .arm.r{right:0}
.armchair .seat{left:18%;right:18%;bottom:12%;height:22%;border-radius:10px;background:linear-gradient(#8a2f24,#5a1c16)}
.armchair .leg{bottom:0;width:7%;height:13%;background:linear-gradient(#5a3a20,#2b1a0e);border-radius:0 0 4px 4px}
.armchair .leg.l{left:10%}.armchair .leg.r{right:10%}
.armchair .pillow{border-radius:30%;box-shadow:0 4px 8px rgba(0,0,0,.4)}
.armchair .p1{left:28%;bottom:30%;width:28%;height:24%;background:linear-gradient(135deg,#e6c27a,#b58a3c);transform:rotate(-12deg)}
.armchair .p2{right:26%;bottom:31%;width:24%;height:22%;background:repeating-linear-gradient(45deg,#2f5d6b 0 8px,#3e7484 8px 16px);transform:rotate(10deg)}
.floor-cushion{position:absolute;bottom:7%;width:min(12vw,120px);height:min(5vw,46px);border-radius:50%;box-shadow:0 8px 14px rgba(0,0,0,.6)}
.fc1{left:calc(50% + 2vw);background:radial-gradient(ellipse at 40% 30%,#4a7f8f,#2f5d6b)}
.fc2{left:calc(50% + 12vw);bottom:9%;background:radial-gradient(ellipse at 40% 30%,#e6a35a,#b8742d);transform:rotate(-6deg)}
.book-stack{position:absolute;left:calc(50% - 8vw);bottom:8%;display:flex;flex-direction:column;align-items:center;gap:2px}
.book-stack b{display:block;height:12px;border-radius:2px;box-shadow:0 2px 3px #000}
.book-stack b:nth-child(1){width:70px;background:#2f5d6b;transform:rotate(-4deg)}.book-stack b:nth-child(2){width:80px;background:#a3281b}.book-stack b:nth-child(3){width:76px;background:#c9973f}

.corner-ui{position:relative;z-index:2;min-height:100%;display:flex;flex-direction:column;align-items:center;gap:18px;padding:84px 4vw 40px;opacity:0;transform:translateY(18px);transition:opacity .6s .55s,transform .8s .55s cubic-bezier(.2,.8,.2,1)}
.corner.open .corner-ui{opacity:1;transform:none}
.back-btn{position:fixed;left:18px;top:18px;z-index:5;padding:9px 16px;font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:#2a1a08;border-radius:4px;border:1px solid #6e4a1a;
  background:linear-gradient(#fff0c0,#e2b860 40%,#b8832f 60%,#e7c374);box-shadow:0 0 0 2px #2a1a08,0 8px 20px rgba(0,0,0,.7);transition:transform .2s}
.back-btn:hover{transform:translateX(-3px)}
.uc-sign{position:relative;max-width:560px;text-align:center;padding:22px 30px 18px;margin-top:8vh;transform:rotate(-1.2deg);
  background:linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.25)),repeating-linear-gradient(90deg,#6b4a26 0 4px,#7a5530 4px 11px,#5e4020 11px 16px);
  border:3px solid #3a2415;border-radius:6px;box-shadow:0 18px 40px rgba(0,0,0,.75),inset 0 0 20px rgba(0,0,0,.4)}
.uc-chain{position:absolute;left:18%;right:18%;top:-46px;height:46px;border-left:3px dotted #8a6a3a;border-right:3px dotted #8a6a3a}
.uc-kicker{display:inline-block;margin:0;padding:3px 14px;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#1a1208;
  background:repeating-linear-gradient(-45deg,#e8b84a 0 12px,#1a1208 12px 20px);border-radius:2px;text-shadow:0 0 3px #e8b84a,0 0 6px #e8b84a}
.uc-sign h2{margin:.35em 0 .1em;font-family:var(--deco);font-size:clamp(26px,4vw,40px);color:#fff0c0;text-shadow:0 2px 0 #2a1a08,0 0 18px rgba(255,190,100,.35)}
.uc-text{margin:.2em 0;font-size:clamp(17px,2vw,20px);color:#f6e6c4}
.uc-small{margin:.4em 0 0;font-style:italic;font-size:14px;color:#d8c294}
.lang-row{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:4px;background:rgba(20,12,6,.7);border:1px solid rgba(201,151,63,.35)}
.lang-row label{font-family:var(--display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.lang-row select{font:inherit;font-size:15px;padding:4px 8px;color:#8a7558;background:#1a1009;border:1px solid #3a2415;border-radius:3px}
.lang-row select:disabled{cursor:not-allowed;opacity:.7}
.lang-note{font-style:italic;font-size:13px;color:#8a7558}
.readers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;width:min(980px,100%);margin-top:auto}
.reader{position:relative;padding:16px 14px 14px;text-align:center;border-radius:6px;color:var(--paper-ink);
  background:linear-gradient(var(--paper),var(--paper-dk));box-shadow:0 10px 24px rgba(0,0,0,.6),inset 0 0 0 1px rgba(110,74,26,.35),inset 0 0 0 5px rgba(239,224,191,.9),inset 0 0 0 6px rgba(110,74,26,.3);transition:transform .25s}
.reader:hover{transform:translateY(-4px) rotate(-.5deg)}
.reader .avatar{position:relative;width:74px;height:74px;margin:2px auto 8px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 35%,#3a2a20,#1a1009);box-shadow:0 0 0 3px #c9973f,0 0 0 5px #5a3b16}
.reader .avatar::before{content:"";position:absolute;left:50%;top:16px;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:#6b5643}
.reader .avatar::after{content:"";position:absolute;left:50%;bottom:-14px;width:54px;height:36px;margin-left:-27px;border-radius:50% 50% 0 0;background:#6b5643}
.reader.female .avatar::before{box-shadow:0 6px 0 4px #6b5643;width:26px}
.reader .avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.reader h3{margin:0;font-family:var(--display);font-size:16px;letter-spacing:.08em;color:#3a1d10}
.reader .slot{margin:.15em 0 .5em;font-size:13px;font-style:italic;color:#6b4d2c}
.reader .soon{display:inline-block;padding:3px 10px;font-family:var(--display);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#7a5530;border:1px dashed rgba(110,74,26,.6);border-radius:2px}
.reader audio{width:100%;margin-top:6px}
.reader .play{display:block;margin:8px auto 0;width:34px;height:34px;border-radius:50%;border:1px solid rgba(110,74,26,.5);background:rgba(110,74,26,.1);color:#8a6f4d;font-size:12px;cursor:not-allowed}

/* ---------- v3 MOBILE ---------- */
@media (max-width:760px){
  .side-case,.pendant-left{display:none}
  .pendant-right{right:12%}
  .pendant .cord{height:7vh}.pendant .shade{top:7vh}.pendant .cone{top:calc(7vh + 24px)}
  .sign-board{padding:16px 18px 14px}
  .sign h1{font-size:clamp(30px,10vw,46px)}
  .sign-sub{letter-spacing:.26em}
  .welcome{padding:14px 14px 10px}
  .welcome-actions{gap:8px}
  .brass-btn{padding:12px 20px}
  .ghost-btn{display:none}
  .corner-spot{right:4%;bottom:calc(24% + 24vh);transform:scale(.78);transform-origin:100% 100%}
  .corner-spot:hover{transform:scale(.82)}
  .shelf-tabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding:4px 4px 10px;margin:0 -3vw 18px;padding-left:3vw;scroll-snap-type:x mandatory;scrollbar-width:none}
  .shelf-tabs button{flex:0 0 auto;scroll-snap-align:start}
  .bookcase{padding:18px 12px 6px}
  .legend{font-size:13px;gap:6px 14px}
  .dev-ribbon{margin-right:52px;font-size:13px}
  .wax-seal{width:54px;height:54px;top:10px;right:10px}
  .wax-seal span{font-size:9.5px}
  .stub-left .frame img{max-height:none}
  .corner-ui{padding-top:72px}
  .uc-sign{margin-top:4vh;padding:18px 16px 14px}
  .readers{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .nook-window{width:28vw}.nook-shelf{width:40vw;right:4%}
  .armchair{left:2%;width:46vw;height:44vw;bottom:14%}
  .nook-lamp{right:4%;height:44vh}
  .lang-row{flex-wrap:wrap;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .layer{translate:none!important}
  .corner{transition:none}
  .js .shelf.reveal{opacity:1;transform:none}
}

/* v3 fixes */
.lintel{z-index:0}
.bookcase-wrap > .shelf-tabs,.bookcase-wrap > .bookcase,.bookcase-wrap > .legend,.bookcase-wrap > .shelf-hint{position:relative;z-index:1}
.spine.status-stub .mark{opacity:.9}
/* hotspot sits in a lit alcove on the right-hand wall, clear of the welcome card */
.corner-spot{right:14%;bottom:35%;padding:14px 16px 0}
.corner-spot::before{content:"";position:absolute;inset:-6px -4px 26px;z-index:-1;border-radius:80px 80px 4px 4px;
  background:radial-gradient(ellipse at 60% 30%,rgba(255,190,110,.22),rgba(40,20,10,.85) 70%),linear-gradient(#1a0f08,#2b1a10);
  box-shadow:inset 0 0 0 5px #3a2415,inset 0 0 0 7px rgba(201,151,63,.55),inset 0 0 30px rgba(0,0,0,.8),0 10px 30px rgba(0,0,0,.6)}
.corner-spot:hover::before{box-shadow:inset 0 0 0 5px #3a2415,inset 0 0 0 7px rgba(243,211,136,.85),inset 0 0 30px rgba(0,0,0,.6),0 0 30px rgba(255,170,70,.35)}
/* readable caution tape */
.uc-kicker{background:#e8b84a;text-shadow:none;position:relative;padding:3px 18px;color:#1a1208}
.uc-kicker::before,.uc-kicker::after{content:"";position:absolute;top:0;bottom:0;width:34px;background:repeating-linear-gradient(-45deg,#e8b84a 0 7px,#1a1208 7px 13px)}
.uc-kicker::before{right:100%}.uc-kicker::after{left:100%}
/* corner layout: keep the armchair and lamp visible beside the cards */
.readers{width:min(780px,100%)}
.armchair{left:3vw;bottom:9%}
.nook-lamp{right:5vw}
@media (max-width:760px){
  .corner-spot{right:1%;bottom:calc(24% + 25vh);transform:scale(.68);padding:12px 12px 0}
  .corner-spot:hover{transform:scale(.72)}
  .readers{width:100%}
  .armchair{left:2%}
}
@media (min-width:761px) and (max-width:1100px){
  .corner-spot{right:9%;bottom:38%;transform:scale(.88);transform-origin:100% 100%}
}

/* v0.2.2: every spine in the same light. Stubs are only told apart by the ✎ tag. */
.spine.stub,.spine.status-stub{filter:none;opacity:1}

/* ===== v0.2.8: aging pass (rugged, not polished). Textures are inline SVG noise: no extra files. ===== */
:root{--grain-h:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='200'><filter id='f' x='-5%' y='-5%' width='110%' height='110%'><feTurbulence type='fractalNoise' baseFrequency='.0025 .2' numOctaves='3' seed='3' stitchTiles='stitch' result='g'/><feTurbulence type='fractalNoise' baseFrequency='.02' numOctaves='2' seed='23' stitchTiles='stitch' result='w'/><feDisplacementMap in='g' in2='w' scale='7' xChannelSelector='R' yChannelSelector='G'/><feColorMatrix values='0 0 0 0 .07  0 0 0 0 .035  0 0 0 0 .01  0 0 0 -3.4 1.85'/></filter><rect x='-12' y='-12' width='824' height='224' filter='url(%23f)'/></svg>");--grain-v:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='800'><filter id='f' x='-5%' y='-5%' width='110%' height='110%'><feTurbulence type='fractalNoise' baseFrequency='.2 .0025' numOctaves='3' seed='5' stitchTiles='stitch' result='g'/><feTurbulence type='fractalNoise' baseFrequency='.02' numOctaves='2' seed='25' stitchTiles='stitch' result='w'/><feDisplacementMap in='g' in2='w' scale='7' xChannelSelector='R' yChannelSelector='G'/><feColorMatrix values='0 0 0 0 .07  0 0 0 0 .035  0 0 0 0 .01  0 0 0 -3.0 1.6'/></filter><rect x='-12' y='-12' width='224' height='824' filter='url(%23f)'/></svg>");--grain-fine:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .06  0 0 0 0 .02  0 0 0 .45 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");--grain-vs:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='800'><filter id='f' x='-5%' y='-5%' width='110%' height='110%'><feTurbulence type='fractalNoise' baseFrequency='.16 .0025' numOctaves='3' seed='8' stitchTiles='stitch' result='g'/><feTurbulence type='fractalNoise' baseFrequency='.02' numOctaves='2' seed='28' stitchTiles='stitch' result='w'/><feDisplacementMap in='g' in2='w' scale='5' xChannelSelector='R' yChannelSelector='G'/><feColorMatrix values='0 0 0 0 .07  0 0 0 0 .035  0 0 0 0 .01  0 0 0 -1.8 0.95'/></filter><rect x='-12' y='-12' width='224' height='824' filter='url(%23f)'/></svg>");--grime:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.006 .012' numOctaves='4' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .02  0 0 0 0 .01  0 0 0 0 0  0 0 0 -1.4 .85'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  --tbrass:#9a8350; --tbrass-hi:#cdb987; --tbrass-lo:#4a3b1e; --verdigris:rgba(78,118,96,.35)}
.vignette{background:radial-gradient(ellipse at 50% 42%,transparent 38%,rgba(8,4,2,.6) 74%,rgba(4,2,1,.92) 100%)}

/* room: sooty wall, grime, aged wainscot */
.wall{background:
    linear-gradient(180deg,rgba(6,3,1,.7) 0%,rgba(6,3,1,.25) 18%,transparent 40%),
    radial-gradient(ellipse 30% 60% at 12% 0,rgba(0,0,0,.45),transparent 70%),radial-gradient(ellipse 26% 55% at 88% 0,rgba(0,0,0,.4),transparent 70%),
    var(--grime),var(--grime),var(--grain-vs),
    repeating-linear-gradient(90deg,rgba(0,0,0,.5) 0 2px,transparent 2px 160px),
    repeating-linear-gradient(90deg,rgba(255,200,140,.025) 0 1px,transparent 1px 7px),
    linear-gradient(180deg,#160e07 0%,#1e1209 40%,#180f07 70%,#0d0704 100%);
  background-size:auto,auto,auto,500px 500px,200px 800px,200px 800px,auto,auto,auto;background-color:#140c06}
.wall::after{background:var(--grime),var(--grain-vs),repeating-linear-gradient(90deg,#1c1109 0 120px,#120a05 120px 123px,#191008 123px 240px),linear-gradient(#0000,#000c);
  background-size:500px 500px,200px 800px,auto,auto;border-top:6px solid #2f1e11;box-shadow:0 -2px 0 #4f351c inset}
.beam-top{background:var(--grain-h),linear-gradient(#0b0704,#22150b 60%,#2e1d10);background-size:800px 200px,auto}
.panel-row{background:var(--grain-h),linear-gradient(#45301a,#1f130a);background-size:800px 200px,auto}
/* tarnished brass fixtures */
.pipe{background:radial-gradient(ellipse 60% 8% at 50% 35%,var(--verdigris),transparent),radial-gradient(ellipse 80% 6% at 40% 70%,rgba(0,0,0,.35),transparent),linear-gradient(90deg,#2e2311,#7a6538 40%,#a8925e 50%,#6b5630 65%,#271c0d)}
.pipe-a::before,.pipe-b::before{background:linear-gradient(90deg,#271c0d,#8c7646,#271c0d)}
.gauge{background:radial-gradient(#cfc1a0 55%,#6f5a33 58%,#a8925e 64%,#3a2c15 72%);box-shadow:0 4px 10px #000,inset 0 0 6px rgba(40,24,8,.6)}
.sign-chains{border-left-color:#5e4b2c;border-right-color:#5e4b2c}
.sign-board{background:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.5)),radial-gradient(ellipse at 50% 50%,transparent 50%,rgba(0,0,0,.45)),var(--grain-h),repeating-linear-gradient(90deg,#2e1c10 0 3px,#35210f 3px 9px,#2a190c 9px 14px);
  background-size:auto,auto,800px 200px,auto;border-color:var(--tbrass);box-shadow:0 0 0 2px #1a1007,0 0 0 5px var(--tbrass-lo),0 18px 40px rgba(0,0,0,.85),inset 0 0 34px rgba(0,0,0,.75)}
.sign h1{background:linear-gradient(180deg,#efe2b8 0%,#cdb987 35%,#9a8350 62%,#5e4b2c 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 2px 0 #1a1007) drop-shadow(0 0 14px rgba(255,170,70,.18))}
.sign .rivet{filter:saturate(.5) brightness(.75)}
.candle::after{background:radial-gradient(#9a8350,#3a2c15)}
.bell{background:radial-gradient(ellipse 30% 25% at 66% 70%,var(--verdigris),transparent),radial-gradient(ellipse at 35% 30%,#e3d3a2,#9a8350 45%,#3a2c15)}
.bell::before{background:#9a8350}
.counter{background:var(--grain-h),linear-gradient(#45301a,#22150b 20%,#140c06);background-size:800px 200px,auto;border-top-color:#5a3f22}
.counter-top{opacity:.25}

/* Drift door: heavy planked door, iron straps, studs and ring; only a faint seep of Drift light */
.door-light{opacity:.18;animation:none;background:radial-gradient(ellipse at 50% 92%,rgba(79,195,255,.22),transparent 45%)}
.door-spill{opacity:.22}
.door-frame{border:14px solid #2a1b10;border-bottom:none;animation:none;
  border-image:none;background:linear-gradient(#060a0e,#081018);
  box-shadow:0 0 0 2px #120a05,inset 0 0 0 1px rgba(79,195,255,.22),inset 0 0 8px rgba(79,195,255,.14),0 10px 30px rgba(0,0,0,.8)}
.door-frame::before{content:"";position:absolute;inset:-14px -14px 0;pointer-events:none;
  background:var(--grain-v),linear-gradient(90deg,#1b1009,#3a2616 6%,#2b1b0f 10%,transparent 10%,transparent 90%,#2b1b0f 90%,#3a2616 94%,#1b1009),linear-gradient(#2e1e11 0 14px,transparent 14px);
  background-size:200px 800px,auto,auto;-webkit-mask:linear-gradient(#000 0 14px,transparent 14px),linear-gradient(90deg,#000 0 14px,transparent 14px calc(100% - 14px),#000 calc(100% - 14px));
  mask:linear-gradient(#000 0 14px,transparent 14px),linear-gradient(90deg,#000 0 14px,transparent 14px calc(100% - 14px),#000 calc(100% - 14px))}
.door-planks{inset:3px 3px 4px;transform:none;box-shadow:inset 0 0 22px rgba(0,0,0,.75),0 0 0 1px #0b0603;
  background:
    radial-gradient(circle at 18% 23.5%,#5b5650 0 2px,#1a1714 2.5px,transparent 3.5px),radial-gradient(circle at 50% 23.5%,#5b5650 0 2px,#1a1714 2.5px,transparent 3.5px),radial-gradient(circle at 82% 23.5%,#5b5650 0 2px,#1a1714 2.5px,transparent 3.5px),
    radial-gradient(circle at 18% 76.5%,#5b5650 0 2px,#1a1714 2.5px,transparent 3.5px),radial-gradient(circle at 50% 76.5%,#5b5650 0 2px,#1a1714 2.5px,transparent 3.5px),radial-gradient(circle at 82% 76.5%,#5b5650 0 2px,#1a1714 2.5px,transparent 3.5px),
    linear-gradient(transparent 21.5%,#26221e 21.5%,#3a3530 22.6%,#1c1916 25.4%,transparent 25.4%,transparent 74.6%,#26221e 74.6%,#3a3530 75.7%,#1c1916 78.5%,transparent 78.5%),
    radial-gradient(ellipse 50% 30% at 50% 100%,rgba(0,0,0,.55),transparent),
    var(--grain-v),
    repeating-linear-gradient(90deg,#2a1b10 0 1px,#3b2716 1px 18.5%,#33210f 18.5% 19.5%,#0d0805 19.5% 20%),
    linear-gradient(90deg,#3e2a18,#2f1f12 20%,#3a2716 40%,#2b1c10 60%,#3d2918 80%,#2d1d11);
  background-size:auto,auto,auto,auto,auto,auto,auto,auto,200px 800px,auto,auto}
/* strap-hinge tails on the hinge side */
.door-planks::before{content:"";position:absolute;left:-2px;width:46%;top:21%;height:58%;pointer-events:none;
  background:linear-gradient(90deg,#34302b,#211e1b) 0 0/100% 7%,linear-gradient(90deg,#34302b,#211e1b) 0 100%/100% 7%;background-repeat:no-repeat;
  clip-path:polygon(0 0,92% 0,100% 3.5%,92% 7%,0 7%,0 93%,92% 93%,100% 96.5%,92% 100%,0 100%);opacity:.95}
/* iron ring pull */
.door-planks::after{content:"";position:absolute;right:13%;top:49%;width:22px;height:22px;margin-top:-11px;border-radius:50%;pointer-events:none;
  border:3px solid #3e3934;box-shadow:inset 0 0 0 1px #15120f,0 2px 3px rgba(0,0,0,.8),-1px -1px 0 rgba(160,150,135,.25);
  background:radial-gradient(circle at 50% 0,#4a4540 0 3px,transparent 3.5px)}
.door-gap{left:6px;right:6px;top:auto;bottom:0;width:auto;height:3px;filter:blur(1.5px);opacity:.5;animation:portalBreath 6s ease-in-out infinite;
  background:linear-gradient(90deg,transparent,rgba(120,210,255,.55) 20%,rgba(150,225,255,.7) 50%,rgba(120,210,255,.55) 80%,transparent)}

/* bookcase: solid aged wood */
.bookcase{background:
    radial-gradient(ellipse 40% 12% at 0 0,rgba(0,0,0,.6),transparent),radial-gradient(ellipse 40% 12% at 100% 0,rgba(0,0,0,.6),transparent),
    var(--grain-v),
    linear-gradient(90deg,#20130a,#3a2516 1.2%,#4a311c 2.2%,#2c1a0d 3%,#160d06 3.2%,#120a05 50%,#160d06 96.8%,#2c1a0d 97%,#4a311c 97.8%,#3a2516 98.8%,#20130a);
  background-size:auto,auto,200px 800px,auto;border-top-color:#33200f}
.bookcase::before{background:radial-gradient(ellipse 10% 70% at 0 50%,rgba(0,0,0,.6),transparent),radial-gradient(ellipse 10% 70% at 100% 50%,rgba(0,0,0,.6),transparent),
  linear-gradient(transparent 0 2px,rgba(255,220,170,.08) 2px 3px,transparent 3px),var(--grain-h),linear-gradient(#5b3d22,#33200f);background-size:auto,auto,auto,800px 200px,auto}
.shelf-row{background:
    radial-gradient(ellipse 9% 40% at 0 100%,rgba(70,60,45,.35),transparent),radial-gradient(ellipse 9% 40% at 100% 100%,rgba(70,60,45,.32),transparent),
    radial-gradient(ellipse 14% 50% at 0 0,rgba(0,0,0,.7),transparent),radial-gradient(ellipse 14% 50% at 100% 0,rgba(0,0,0,.7),transparent),
    radial-gradient(ellipse at 50% 100%,rgba(255,160,60,.10),transparent 70%),
    var(--grain-vs),
    repeating-linear-gradient(90deg,transparent 0 calc(16.6% - 2px),rgba(0,0,0,.55) calc(16.6% - 2px) 16.6%),
    linear-gradient(#080503,#140b06)}
.shelf.forbidden .shelf-row{background:radial-gradient(ellipse 14% 50% at 0 0,rgba(0,0,0,.7),transparent),radial-gradient(ellipse 14% 50% at 100% 0,rgba(0,0,0,.7),transparent),
  radial-gradient(ellipse at 50% 100%,rgba(79,195,255,.12),transparent 70%),var(--grain-v),linear-gradient(#05070b,#0b0d13)}
.shelf-plank{position:relative;height:22px;border-radius:1px 1px 3px 3px;
  box-shadow:0 10px 16px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,225,170,.16),inset 0 -3px 4px rgba(0,0,0,.55);
  background:
    radial-gradient(ellipse 7px 4px at 23% 55%,#1a0e06 0 35%,rgba(60,35,15,.8) 55%,transparent 100%),
    radial-gradient(ellipse 18px 7px at 23% 55%,transparent 40%,rgba(30,16,6,.45) 55%,transparent 75%),
    radial-gradient(ellipse 5px 3px at 71% 40%,#1a0e06 0 35%,rgba(60,35,15,.7) 60%,transparent),
    radial-gradient(ellipse 14px 6px at 71% 40%,transparent 40%,rgba(30,16,6,.4) 55%,transparent 75%),
    linear-gradient(90deg,rgba(0,0,0,.55),transparent 4%,transparent 96%,rgba(0,0,0,.55)),
    linear-gradient(176deg,transparent 30%,rgba(255,230,190,.08) 31%,transparent 33%),
    linear-gradient(183deg,transparent 58%,rgba(0,0,0,.25) 59%,transparent 61%),
    var(--grain-h),var(--grain-h),var(--grain-fine),
    linear-gradient(#7d5734 0,#6a4728 12%,#5a3b20 45%,#46301a 78%,#24150b 100%)}
.shelf-plank::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;pointer-events:none;
  background:linear-gradient(90deg,rgba(90,80,65,.5),rgba(90,80,65,.15) 12%,transparent 25%,transparent 75%,rgba(90,80,65,.15) 88%,rgba(90,80,65,.45))}
.shelf:nth-child(2n) .shelf-plank{background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0,-220px 0,-220px 0,-60px 0,0 0;filter:hue-rotate(-6deg) brightness(.9)}
.shelf:nth-child(3n) .shelf-plank{background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0,-410px 0,-410px 0,-130px 0,0 0;filter:saturate(.85) brightness(1.06)}
.shelf:nth-child(5n) .shelf-plank{filter:sepia(.15) brightness(.82)}
.plate-label{background:linear-gradient(#e6d7a8,#b49a5e 50%,#7c6436);border-color:#3e2f17;box-shadow:0 2px 4px #000,inset 0 1px 0 rgba(255,246,216,.6)}
.bookend,.trinket-rook{filter:saturate(.6) brightness(.82)}

/* ===== v0.2.9: the globe (Map Room hotspot) + the door that creaks ===== */
.globe-spot-wrap{position:absolute;inset:0;pointer-events:none;z-index:4}
.globe-spot-wrap .globe-spot{pointer-events:auto}
.globe-spot{position:absolute;left:14%;bottom:35%;display:flex;flex-direction:column;align-items:center;gap:0;text-decoration:none;color:var(--ink);
  padding:10px 18px 0;transition:transform .35s cubic-bezier(.2,.8,.2,1);transform-origin:0 100%}
.globe-spot{transform:scale(1.25)}
.globe-spot:hover{transform:translateY(-4px) scale(1.3)}
.globe-spot:focus-visible{outline:2px solid #f3d388;outline-offset:6px;border-radius:6px}
/* a small ledge desk under the globe */
.globe-spot::after{content:"";position:absolute;left:-6px;right:-6px;bottom:22px;height:12px;z-index:-1;border-radius:2px 2px 3px 3px;
  background:var(--grain-h,none),linear-gradient(#5a3a22,#2e1c10 70%,#1a0f08);background-blend-mode:multiply;
  box-shadow:0 8px 14px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,210,150,.18)}
.globe{position:relative;display:block;width:104px;height:132px}
.globe-ball{position:absolute;left:12px;top:8px;width:80px;height:80px;border-radius:50%;overflow:hidden;transform:rotate(-23deg);
  background:radial-gradient(circle at 34% 30%,#d9c9a0,#b39a6c 45%,#6f5a3c 80%,#3c2e1e);
  box-shadow:inset -10px -8px 18px rgba(0,0,0,.6),inset 4px 4px 10px rgba(255,236,190,.25),0 4px 10px rgba(0,0,0,.5)}
/* vague, invented-nothing land blotches drift across the parchment sphere */
.globe-land{position:absolute;top:0;left:0;width:200%;height:100%;opacity:.75;
  background:
    radial-gradient(ellipse 13% 18% at 12% 40%,#6b7a4c 60%,transparent 64%),
    radial-gradient(ellipse 9% 12% at 22% 66%,#5f6e44 60%,transparent 64%),
    radial-gradient(ellipse 15% 10% at 33% 30%,#6b7a4c 60%,transparent 64%),
    radial-gradient(ellipse 8% 14% at 41% 58%,#5f6e44 60%,transparent 64%),
    radial-gradient(ellipse 13% 18% at 62% 40%,#6b7a4c 60%,transparent 64%),
    radial-gradient(ellipse 9% 12% at 72% 66%,#5f6e44 60%,transparent 64%),
    radial-gradient(ellipse 15% 10% at 83% 30%,#6b7a4c 60%,transparent 64%),
    radial-gradient(ellipse 8% 14% at 91% 58%,#5f6e44 60%,transparent 64%),
    repeating-linear-gradient(90deg,transparent 0 12.3%,rgba(60,40,20,.28) 12.3% 12.5%),
    repeating-linear-gradient(0deg,transparent 0 24.5%,rgba(60,40,20,.25) 24.5% 25%);
  animation:globeSpin 60s linear infinite}
.globe-shade{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,240,200,.25),transparent 40%),radial-gradient(circle at 70% 75%,rgba(0,0,0,.45),transparent 60%),var(--grime,none);mix-blend-mode:multiply}
.globe-spot:hover .globe-land{animation-duration:14s}
@keyframes globeSpin{to{transform:translateX(-50%)}}
/* tarnished brass meridian ring */
.globe-ring{position:absolute;left:4px;top:0;width:96px;height:96px;border-radius:50%;transform:rotate(-23deg);
  border:5px solid #8a6a32;border-left-color:transparent;border-bottom-color:#6d5226;
  box-shadow:0 0 0 1px #2a1b0c,inset 0 0 0 1px rgba(40,25,10,.8),inset 1px 1px 0 2px rgba(243,211,136,.25);
  background:conic-gradient(from 0deg,transparent 0 60%,rgba(95,140,110,.0) 60%);filter:sepia(.25) saturate(.8)}
.globe-ring::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:5px solid transparent;border-top-color:rgba(98,140,110,.45);filter:blur(.5px)}
.globe-pin{position:absolute;width:6px;height:6px;border-radius:50%;background:#a07d3a;box-shadow:0 0 0 1px #2a1b0c}
.globe-pin.top{left:69px;top:4px}.globe-pin.bot{left:29px;top:86px}
/* aged wooden stand */
.globe-stand{position:absolute;left:0;right:0;bottom:0;height:40px}
.globe-stand .neck{position:absolute;left:46px;top:0;width:12px;height:24px;border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,#2a190d,#6a4428 45%,#3a2414);box-shadow:inset 0 2px 0 rgba(0,0,0,.4)}
.globe-stand .foot{position:absolute;left:18px;right:18px;bottom:2px;height:16px;border-radius:50% 50% 6px 6px / 70% 70% 6px 6px;
  background:var(--grain-h,none),radial-gradient(ellipse at 50% 20%,#6f4a2c,#2e1c10 75%);background-blend-mode:multiply;box-shadow:0 4px 6px rgba(0,0,0,.6)}
/* small brass plaque */
.globe-tag{position:relative;margin-top:2px;padding:2px 9px 1px;font:600 10px/1.4 var(--serif,Georgia,serif);letter-spacing:.2em;text-transform:uppercase;
  color:#2a1a08;background:linear-gradient(#b8954e,#8a6a32 60%,#6d5226);border-radius:2px;
  box-shadow:0 0 0 1px #2a1b0c,inset 0 1px 0 rgba(255,230,170,.45),0 2px 4px rgba(0,0,0,.6);text-shadow:0 1px 0 rgba(255,225,160,.35);filter:saturate(.75)}
.globe-spot:hover .globe-tag{filter:none}
@media (min-width:761px) and (max-width:1100px){ .globe-spot{left:9%;bottom:38%;transform:scale(1.05)} .globe-spot:hover{transform:scale(1.1)} }
@media (max-width:760px){ .globe-spot{left:1%;bottom:calc(24% + 11.5vh);transform:scale(.52)} .globe-spot:hover{transform:scale(.55)} }
@media (prefers-reduced-motion:reduce){ .globe-land,.globe-spot:hover .globe-land{animation:none} .globe-spot,.globe-spot:hover{transition:none} }

/* the Drift door: click to try it */
.backdoor-wrap .door-hit{position:absolute;inset:0;z-index:5;pointer-events:auto;background:none;border:0;padding:0;margin:0;cursor:pointer;border-radius:2px}
.backdoor-wrap .door-hit:focus-visible{outline:2px solid rgba(160,220,255,.7);outline-offset:4px}
.backdoor.creak .door-planks{animation:doorCreak 2.2s cubic-bezier(.3,.1,.3,1) both;transform-origin:left center}
.backdoor.creak .door-frame{background:linear-gradient(90deg,#0a0d12 50%,#163a52 82%,#3f7fa6)}
.backdoor.creak .door-light{animation:driftFlicker 2.2s ease-in-out both}
.backdoor.creak .door-spill{animation:spillFlicker 2.2s ease-in-out both}
.backdoor.flicker .door-light{animation:driftFlickerSoft .9s ease-in-out both}
.backdoor.flicker .door-spill{animation:spillFlicker .9s ease-in-out both}
@keyframes doorCreak{0%{transform:perspective(600px) rotateY(0)}12%{transform:perspective(600px) rotateY(3deg)}16%{transform:perspective(600px) rotateY(2deg)}
  40%,58%{transform:perspective(600px) rotateY(20deg)}64%{transform:perspective(600px) rotateY(18deg)}92%{transform:perspective(600px) rotateY(-.6deg)}100%{transform:perspective(600px) rotateY(0)}}
@keyframes driftFlicker{0%,100%{opacity:.18}20%{opacity:.4}30%{opacity:.55}34%{opacity:.35}40%{opacity:.6}48%{opacity:.4}52%{opacity:.55}70%{opacity:.4}88%{opacity:.22}}
@keyframes driftFlickerSoft{0%,100%{opacity:.18}25%{opacity:.45}40%{opacity:.3}60%{opacity:.5}}
@keyframes spillFlicker{0%,100%{opacity:.22}30%{opacity:.55}40%{opacity:.4}50%{opacity:.6}75%{opacity:.3}}
@media (prefers-reduced-motion:reduce){ .backdoor.creak .door-planks{animation:none} }
/* short phones: the portrait column is full, so the globe stands at the foot of the door instead */
@media (max-width:760px) and (max-height:760px){ .globe-spot{left:calc(50% - 64px);bottom:calc(24% + 21vh)} }
/* the sliver of Drift light behind the door: only visible while it creaks */
.door-crack{position:absolute;top:3px;bottom:4px;right:3px;width:34%;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(79,195,255,.18) 55%,rgba(150,215,245,.5));filter:blur(1.5px)}
.backdoor.creak .door-crack{animation:crackFlicker 2.2s ease-in-out both}
@keyframes crackFlicker{0%,8%,100%{opacity:0}22%{opacity:.4}30%{opacity:.75}34%{opacity:.4}42%{opacity:.85}50%{opacity:.5}56%{opacity:.8}72%{opacity:.35}88%{opacity:.1}}
@media (max-width:760px){ .globe-spot-wrap{z-index:7} }

/* ===== v0.3.0: handbook canon books (district guides first) ===== */
/* spine: a small brass compass-rose roundel near the foot, so canon reads apart from the owner's story books */
.spine.canon .mark{top:auto;clip-path:none;left:50%;bottom:1px;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:radial-gradient(circle,#2a1a0c 0 2px,transparent 2.5px),conic-gradient(from 45deg,#c9a45a 0 12.5%,#7a5a28 0 25%,#c9a45a 0 37.5%,#7a5a28 0 50%,#c9a45a 0 62.5%,#7a5a28 0 75%,#c9a45a 0 87.5%,#7a5a28 0);
  box-shadow:0 0 0 1px #1a0f06,0 1px 1px rgba(0,0,0,.6);opacity:.9}
.spine.canon-district-guide .spine-title{font-size:11px;letter-spacing:.06em}
/* the facts card on the left-hand page */
.canon-facts{position:relative;width:100%;padding:18px 18px 14px;color:#3a2614;border:2px double rgba(110,74,26,.5);
  background:linear-gradient(rgba(255,244,214,.35),rgba(214,186,130,.25));box-shadow:inset 0 0 30px rgba(110,74,26,.18)}
.cf-stamp{position:absolute;top:10px;right:10px;margin:0;padding:3px 8px;transform:rotate(4deg);font:700 10px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;
  color:#7a2a18;border:2px solid rgba(122,42,24,.7);border-radius:3px;opacity:.78;mix-blend-mode:multiply}
.cf-title{margin:0 0 10px;font-family:var(--display);font-size:18px;letter-spacing:.04em;color:#4a2e14}
.cf-list,.cf-inf{margin:0;display:grid;gap:4px}
.cf-list div,.cf-inf div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dotted rgba(110,74,26,.4);padding:3px 0}
.cf-list dt,.cf-inf dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#6b4d2c}
.cf-list dd,.cf-inf dd{margin:0;font-weight:600;text-align:right}
.cf-sub{margin:14px 0 6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#6b4d2c}
.cf-inf .dom dt{color:#7a2a18;font-weight:700}
.cf-dots{display:inline-flex;gap:3px}
.cf-dots i{width:9px;height:9px;border-radius:50%;border:1px solid #6b4d2c;background:transparent}
.cf-dots i.on{background:#6b4d2c}
.cf-inf .dom .cf-dots i.on{background:#7a2a18;border-color:#7a2a18}
.cf-links{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.cf-src,.canon-src{margin:12px 0 0;font-size:12px;font-style:italic;color:#6b4d2c}
.canon-src{border-top:1px solid rgba(110,74,26,.35);padding-top:8px}
/* atlas card -> guide */
.dc-guide{margin:8px 0 2px}
.dc-guide .book-link{font-style:italic}
.page-left:has(.canon-facts){justify-content:flex-start;align-items:stretch;overflow-y:auto}
.cf-title{text-align:left;padding-right:120px}
.cf-list div,.cf-inf div{padding:2px 0}
@media (max-width:760px){ .cf-title{padding-right:0;margin-top:22px} .cf-stamp{top:8px;right:8px} }

/* ===== v0.3.1: faction dossiers, filed with the Quiet Clerks ===== */
.spine.canon-faction-dossier{border-radius:2px 2px 1px 1px}
.spine.canon-faction-dossier::before{top:16px;height:14px;background:linear-gradient(#d9c9a4,#b9a47a);opacity:.85;box-shadow:inset 0 0 0 1px rgba(60,40,20,.5)}
.spine.canon-faction-dossier::after{bottom:8px;height:3px}
.spine.canon-faction-dossier .mark{bottom:auto;top:18px;width:10px;height:10px;background:radial-gradient(circle,#8a1f14 0 55%,#5a120b 60%);box-shadow:0 0 0 1px rgba(40,10,5,.6)}
/* manila folder facts card with a paper clip, typed labels and a red registry stamp */
.canon-facts.canon-faction-dossier{background:linear-gradient(rgba(236,214,160,.65),rgba(214,186,128,.55)),var(--grime,none);border:1px solid rgba(110,74,26,.55);
  border-radius:2px 14px 2px 2px;box-shadow:inset 0 0 40px rgba(110,74,26,.25),2px 3px 0 rgba(110,74,26,.18)}
.canon-facts.canon-faction-dossier::before{content:"";position:absolute;top:-10px;left:26px;width:16px;height:40px;border:3px solid #8d8a82;border-radius:9px;border-bottom-color:transparent;transform:rotate(-6deg);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.canon-faction-dossier .cf-title{font-family:"Courier New",Courier,monospace;letter-spacing:.3em;text-transform:uppercase;font-size:15px;padding-left:34px}
.canon-faction-dossier .cf-list div{flex-direction:column;gap:1px}
.canon-faction-dossier .cf-list dd{text-align:left;font-weight:500;font-family:var(--serif,Georgia,serif)}
.canon-faction-dossier .cf-list dt{font-family:"Courier New",Courier,monospace;letter-spacing:.12em}
.canon-faction-dossier .cf-stamp{top:14px;right:12px;padding:6px 10px;border-width:3px;border-style:double;border-radius:50% / 40%;transform:rotate(-9deg);color:#8a1f14;border-color:rgba(138,31,20,.75);font-size:11px;opacity:.7}
.canon-faction-dossier.soon .cf-stamp{color:#5a4a30;border-color:rgba(90,74,48,.7)}
/* atlas: chip -> dossier line */
.dm-dossier{margin:6px 0 0;text-align:center;font-style:italic;font-size:14px;color:var(--ink-dim)}

/* ===== v0.3.3: Player's Primer + class cards ===== */
#lore .lore-h{margin:1.3em 0 .4em;font-family:var(--display);font-size:17px;letter-spacing:.06em;color:#5a3a1a;border-bottom:1px solid rgba(110,74,26,.3);padding-bottom:3px}
.lore-table-wrap{overflow-x:auto;margin:.6em 0 1em}
.lore-table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.4;color:#3a2614}
.lore-table th{text-align:left;font-family:var(--display);font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:rgba(110,74,26,.14);border-bottom:2px solid rgba(110,74,26,.5);padding:6px 8px}
.lore-table td{border-bottom:1px dotted rgba(110,74,26,.4);padding:5px 8px;vertical-align:top}
.lore-table td:first-child{font-weight:700;white-space:nowrap}
.lore-table tbody tr:nth-child(even){background:rgba(110,74,26,.05)}
/* rule-book spines: ledger cloth with a stamped rule band; class cards: gilt-edged card boxes */
.spine.canon-rule-book::before{top:20px;height:3px;box-shadow:0 6px 0 var(--b)}
.spine.canon-rule-book .mark{background:radial-gradient(circle,#e8dcc0 0 2px,transparent 2.5px),radial-gradient(circle,#9a8452 0 60%,#4a3a20 64%)}
.spine.canon-class-card{border-radius:4px}
.spine.canon-class-card::before,.spine.canon-class-card::after{height:2px;left:3px;right:3px;background:#c9a45a}
.canon-facts.canon-rule-book .cf-list dd{text-align:right;line-height:1.5}
.canon-facts.canon-class-card{border:2px solid #b8954e;border-radius:10px;box-shadow:inset 0 0 0 4px rgba(255,244,214,.6),inset 0 0 0 5px rgba(184,149,78,.6),inset 0 0 30px rgba(110,74,26,.2)}
.canon-class-card .cf-title{text-align:center;padding-right:0;font-size:22px;margin-top:18px}
.canon-class-card .cf-list div{flex-direction:column;gap:1px}
.canon-class-card .cf-list dd{text-align:left;font-weight:500}

/* ===== v0.3.4: the Greymire Gazette, folded on the counter ===== */
.gazette-spot{position:absolute;z-index:7;left:17%;bottom:calc(15% - 3px);display:block;text-decoration:none;transform:rotate(-4deg);transform-origin:50% 100%;transition:transform .25s}
.gazette-spot:hover,.gazette-spot:focus-visible{transform:rotate(-2deg) translateY(-3px) scale(1.05)}
.gazette-spot:focus-visible{outline:2px solid #f3d388;outline-offset:4px}
.gz-fold{position:relative;display:block;width:96px;height:36px;padding:4px 7px;border-radius:1px;
  background:linear-gradient(100deg,#d8ccb0,#c7b894 48%,#b3a37c 50%,#cfc2a2 52%,#c2b38e);
  box-shadow:0 6px 10px rgba(0,0,0,.6),inset 0 0 10px rgba(80,60,30,.35);clip-path:polygon(0 4%,100% 0,99% 100%,1% 97%)}
.gz-fold b{display:block;font:700 10px/1 var(--display);letter-spacing:.18em;color:#2a2016;border-bottom:1px solid rgba(42,32,22,.6);padding-bottom:3px;text-align:center}
.gz-fold i{display:block;height:2px;margin-top:4px;background:repeating-linear-gradient(90deg,rgba(42,32,22,.45) 0 9px,transparent 9px 11px)}
.gz-fold i:nth-of-type(2){width:80%}.gz-fold i:nth-of-type(3){width:62%}
/* phones: the counter top is full (shrooms, button, bell), so the paper lies on the counter's front ledge */
@media (max-width:760px){ .gazette-spot{left:5%;bottom:calc(15% - 72px);transform:rotate(-4deg) scale(.8);transform-origin:0 100%} .gazette-spot:hover{transform:rotate(-2deg) scale(.84)} }
@media (prefers-reduced-motion:reduce){ .gazette-spot{transition:none} }

/* ===== v0.3.5: Doom Mark roller (easter egg) ===== */
.doom-die-spot{position:absolute;z-index:7;right:calc(20% + 46px);bottom:calc(15% - 2px);width:22px;height:22px;padding:0;border:0;cursor:pointer;
  clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);background:radial-gradient(circle at 35% 30%,#efe4c8,#cbbb92 55%,#8f7d55);
  box-shadow:inset -3px -3px 6px rgba(60,40,20,.45);transform:rotate(12deg);transition:transform .25s,filter .25s;filter:drop-shadow(0 3px 3px #000)}
.doom-die-spot span{font:700 8px/22px var(--display);color:#5a1a10;display:block;text-align:center}
.doom-die-spot:hover,.doom-die-spot:focus-visible{transform:rotate(-8deg) scale(1.15);filter:drop-shadow(0 0 6px rgba(79,195,255,.6))}
.doom-die-spot:focus-visible{outline:2px solid #f3d388;outline-offset:3px}
@media (max-width:760px){ .doom-die-spot{right:7%;bottom:calc(15% - 64px)} }
.doom-roll-line{text-align:center;margin:.2em 0 1em}
body.doom-open{overflow:hidden}
.doom-roller{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:radial-gradient(ellipse at 50% 40%,rgba(10,20,30,.55),rgba(0,0,0,.85))}
.doom-roller[hidden]{display:none}
.dr-card{position:relative;width:min(460px,100%);padding:22px 22px 16px;text-align:center;color:#3a2614;border-radius:3px;
  background:linear-gradient(rgba(255,244,214,.95),rgba(220,196,146,.95));box-shadow:0 20px 60px rgba(0,0,0,.7),inset 0 0 40px rgba(110,74,26,.3),0 0 0 1px #4a3220}
.dr-x{position:absolute;top:6px;right:8px;border:0;background:none;font-size:26px;line-height:1;color:#6b4d2c;cursor:pointer}
.dr-k{margin:0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7a5a30}
.dr-card h3{margin:4px 0 12px;font-family:var(--display);font-size:24px;color:#4a2e14}
.dr-die{width:96px;height:96px;margin:4px auto 10px;display:grid;place-items:center;
  clip-path:polygon(50% 0,79% 9%,97% 35%,97% 65%,79% 91%,50% 100%,21% 91%,3% 65%,3% 35%,21% 9%);
  background:radial-gradient(circle at 34% 28%,#f6efdc,#d3c39b 50%,#8f7d55 85%);box-shadow:inset -10px -10px 20px rgba(60,40,20,.45)}
.dr-face{font:700 34px/1 var(--display);color:#6a1c12;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.dr-die.tumble{animation:drTumble .85s cubic-bezier(.3,.6,.4,1)}
.dr-die.landed{box-shadow:inset -10px -10px 20px rgba(60,40,20,.45),0 0 0 3px rgba(79,195,255,.25),0 0 24px rgba(79,195,255,.45)}
@keyframes drTumble{0%{transform:translateY(-40px) rotate(0)}35%{transform:translateY(6px) rotate(300deg)}55%{transform:translateY(-10px) rotate(430deg)}75%{transform:translateY(2px) rotate(520deg)}100%{transform:none}}
.dr-out{margin:0 0 6px;font-size:16px}
.dr-effect{min-height:3em;margin:0 0 12px;font-size:17px;line-height:1.5;font-style:italic;color:#2a1a0c}
.dr-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0}
.doom-roller .dr-btns .ghost-btn{display:inline-block;color:#4a2e14;background:rgba(255,244,214,.5);border:1px solid rgba(110,74,26,.6);text-shadow:none}
.dr-src{margin:12px 0 0;font-size:11.5px;font-style:italic;color:#6b4d2c}
@media (prefers-reduced-motion:reduce){ .dr-die.tumble{animation:none} .doom-die-spot{transition:none} }

/* ---------- v0.4.0 Door 1: The Players' Vault (chained, out-of-character rules). Same aged joinery as the Drift door ---------- */
.vault-door{position:absolute;bottom:22%;height:min(30vh,270px);aspect-ratio:1/1.9;pointer-events:auto;z-index:3;display:block;text-decoration:none;color:inherit;
  left:calc(50% - min(12.1vh,110.5px) - 34px - min(15.8vh,142px));border-radius:2px}
.vault-door:focus-visible{outline:2px solid rgba(232,200,130,.75);outline-offset:5px}
.vd-frame{position:absolute;inset:0;border:11px solid #2a1b10;border-bottom:none;background:#07090b;box-shadow:0 0 0 2px #120a05,0 10px 26px rgba(0,0,0,.85)}
.vd-frame::before{content:"";position:absolute;inset:-11px -11px 0;pointer-events:none;
  background:var(--grain-v,none),linear-gradient(90deg,#1b1009,#3a2616 7%,#2b1b0f 11%,transparent 11%,transparent 89%,#2b1b0f 89%,#3a2616 93%,#1b1009),linear-gradient(#2e1e11 0 11px,transparent 11px);
  background-size:200px 800px,auto,auto;-webkit-mask:linear-gradient(#000 0 11px,transparent 11px),linear-gradient(90deg,#000 0 11px,transparent 11px calc(100% - 11px),#000 calc(100% - 11px));
  mask:linear-gradient(#000 0 11px,transparent 11px),linear-gradient(90deg,#000 0 11px,transparent 11px calc(100% - 11px),#000 calc(100% - 11px))}
.vd-planks{position:absolute;inset:3px 3px 4px;box-shadow:inset 0 0 20px rgba(0,0,0,.8),0 0 0 1px #0b0603;
  background:
    linear-gradient(transparent 17%,#24201c 17%,#38332e 18.2%,#1b1815 21%,transparent 21%,transparent 47.5%,#24201c 47.5%,#38332e 48.7%,#1b1815 51.5%,transparent 51.5%,transparent 79%,#24201c 79%,#38332e 80.2%,#1b1815 83%,transparent 83%),
    radial-gradient(ellipse 60% 35% at 50% 100%,rgba(0,0,0,.6),transparent),var(--grain-v,none),
    repeating-linear-gradient(90deg,#2a1b10 0 1px,#38250f 1px 24%,#30200f 24% 24.6%,#0d0805 24.6% 25%),
    linear-gradient(90deg,#3a2716,#2c1d11 25%,#372515 50%,#291a0f 75%,#3a2716);
  background-size:auto,auto,200px 800px,auto,auto}
/* iron chain: two runs crossed corner to corner, oval links drawn as a repeating pattern */
.vd-chain{position:absolute;left:50%;top:30%;width:132%;height:9px;margin:-4.5px 0 0 -66%;border-radius:4px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.85));
  background:radial-gradient(ellipse 5px 3px at 50% 50%,transparent 0 2.2px,#77706500 2.2px,#7a7368 2.6px,#3a3631 3.4px,transparent 3.8px) 0 50%/11px 9px repeat-x,
             linear-gradient(transparent 3.5px,#5d574f 3.5px 5.5px,transparent 5.5px) 5.5px 0/11px 9px repeat-x}
.vd-chain.a{transform:rotate(61deg)}.vd-chain.b{transform:rotate(-61deg)}
.vd-lock{position:absolute;left:50%;top:30%;width:30%;aspect-ratio:1/1.05;transform:translate(-50%,-22%);border-radius:3px 3px 6px 6px;
  background:linear-gradient(160deg,#6d5a3a,#3c3020 55%,#251d12);box-shadow:inset 0 0 0 1px #1a140c,inset 0 1px 0 rgba(255,230,170,.25),0 4px 6px rgba(0,0,0,.85)}
.vd-lock::before{content:"";position:absolute;left:18%;right:18%;bottom:88%;height:62%;border:4px solid #4a463f;border-bottom:none;border-radius:60% 60% 0 0/80% 80% 0 0;box-shadow:inset 0 0 0 1px #1d1a16}
.vd-lock i{position:absolute;left:50%;top:38%;width:18%;height:34%;margin-left:-9%;background:radial-gradient(circle at 50% 30%,#0b0805 0 38%,transparent 40%),linear-gradient(#0b0805,#0b0805) 50% 100%/30% 55% no-repeat}
.vd-plaque{position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%);white-space:nowrap;padding:3px 9px 2px;font-family:var(--display);font-size:clamp(9px,1.05vw,12px);
  letter-spacing:.14em;text-transform:uppercase;color:#2a1c0f;background:linear-gradient(#b89a5e,#8a6f3e);border:1px solid #4a3519;border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,240,200,.35),0 2px 4px rgba(0,0,0,.7);filter:brightness(.82) sepia(.15)}
.vault-door:hover .vd-plaque,.vault-door:focus-visible .vd-plaque{filter:none}
.vault-door:hover .vd-lock{animation:lockJig .5s ease-in-out}
@keyframes lockJig{25%{transform:translate(-50%,-22%) rotate(-6deg)}75%{transform:translate(-50%,-22%) rotate(5deg)}}
html.codex-unlocked .vd-chain{opacity:.35}html.codex-unlocked .vd-lock{transform:translate(-50%,10%) rotate(18deg)}
@media (prefers-reduced-motion:reduce){ .vault-door:hover .vd-lock{animation:none} }
.brass-btn .door-k{display:block;font-size:10px;letter-spacing:.2em;opacity:.7;margin-bottom:2px;font-weight:400}
.vault-mini{display:none}
@media (max-width:760px){
  /* the corner armchair steps up a little so the chained door fits between it and the welcome */
  .corner-spot{bottom:calc(24% + 25vh + 64px)}
  .vault-door{height:80px;left:auto;right:3.5%;bottom:calc(24% + 11.5vh + 44px)}
  .vd-plaque{left:auto;right:-6px;transform:none}
  .vd-frame{border-width:6px}.vd-frame::before{inset:-6px -6px 0;-webkit-mask:none;mask:none;background:none}
  .vd-chain{height:6px;margin-top:-3px;background-size:8px 6px,8px 6px}
  .vd-lock::before{border-width:2px}
  .vd-plaque{font-size:8px;letter-spacing:.08em;padding:2px 5px 1px;bottom:calc(100% + 5px)}
}
/* short phones: no wall space left beside the doors, so the chained door becomes a small brass tag under the shop door */
@media (max-width:760px) and (max-height:760px){
  .corner-spot{bottom:calc(24% + 25vh)}
  .vault-door{display:none}
  .vault-mini{display:block;flex-basis:100%;margin-top:-2px;font-family:var(--display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#d7bd84;text-decoration:none;opacity:.85}
  .vault-mini i{font-style:normal;opacity:.8}
}
/* the welcome's soft shadow no longer swallows clicks meant for the doors behind it; its text and buttons still take them */
.welcome{pointer-events:none}.welcome > *{pointer-events:auto}

/* ---------- v0.5.0 Check's Table: a little games table at the far end of the counter ---------- */
.chess-spot{position:absolute;z-index:7;right:1%;bottom:calc(15% - 2px);width:clamp(64px,calc(10.6% - 28px),150px);display:block;text-decoration:none;filter:brightness(1.18);
  transform-origin:50% 100%;transition:transform .25s}
.chess-spot:hover,.chess-spot:focus-visible{transform:translateY(-3px) scale(1.04)}
.chess-spot:focus-visible{outline:2px solid #f3d388;outline-offset:4px;border-radius:3px}
.cs-art{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 6px 6px rgba(0,0,0,.75))}
.cs-leg{fill:url(#csWood);stroke:#1a0f07;stroke-width:.8}
.cs-apron{fill:#4a2f18;stroke:#1a0f07;stroke-width:.8}
.cs-top{fill:#2a1a0d}
.cs-board{fill:#cfae79;stroke:#1a0f07;stroke-width:.8}
.cs-sq{fill:#7a4c2a}
.cs-edge{fill:#5a3a1f;stroke:#1a0f07;stroke-width:.6}
.cs-pieces use{stroke-width:1.6;stroke-linejoin:round}
.cs-pieces .w{fill:url(#csIv);stroke:#3a210a}.cs-pieces .b{fill:url(#csEb);stroke:#d4874a}
.cs-gear{fill:#b08a46;stroke:#3a2510;stroke-width:.8;filter:drop-shadow(0 1px .6px #000)}
.cs-note rect{fill:#e6d5ac;stroke:rgba(70,45,20,.6);stroke-width:.5}
.cs-note .cs-pin{fill:#c9973f;stroke:#4a3017;stroke-width:.4}
.cs-scrawl{fill:none;stroke:#5a3b1c;stroke-width:.7;stroke-linecap:round;opacity:.75}
.cs-plaque{display:block;width:max-content;margin:4px auto 0;padding:2px 8px 1px;font-family:var(--display);font-size:clamp(8px,.8vw,11px);letter-spacing:.14em;text-transform:uppercase;
  color:#2a1c0f;background:linear-gradient(#b89a5e,#8a6f3e);border:1px solid #4a3519;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.7);filter:brightness(.85) sepia(.15);white-space:nowrap}
.chess-spot:hover .cs-plaque,.chess-spot:focus-visible .cs-plaque{filter:none}
/* the plaque hangs below the table on the counter's edge, so the table itself still stands on the counter */
.chess-spot .cs-plaque{position:absolute;left:50%;top:100%;margin:5px 0 0;transform:translateX(-50%);filter:brightness(1.05)}
@media (max-width:760px){
  .chess-spot{right:2%;bottom:calc(15% - 100px);width:80px;filter:brightness(1.35)}
  .cs-plaque{font-size:8px;letter-spacing:.08em;filter:none}
}
@media (max-width:760px) and (max-height:760px){
  .chess-spot{display:none}
  .welcome-actions .vault-mini{flex-basis:auto;margin-top:0}
  .welcome-actions .chess-mini{margin-right:6px}
}
@media (prefers-reduced-motion:reduce){ .chess-spot{transition:none} }

/* ===== v0.5.10: a real counter top. Only the counter changes; every object on it keeps its exact place.
   The counter now starts 6px lower (its front edge sits just in front of where the objects stand), the top surface
   is drawn above that edge in perspective, then a rounded lip, a panelled front and a toe kick. ===== */
.counter{height:calc(15% - 6px);border-top:0;box-shadow:0 -16px 30px rgba(0,0,0,.6); /* same shadow as before, offset for the 6px lower box */
  
  background:
    linear-gradient(rgba(0,0,0,.62),rgba(0,0,0,.18) 14px,transparent 30px),
    radial-gradient(ellipse 22% 60% at 10% 0,rgba(255,170,80,.10),transparent 70%),radial-gradient(ellipse 22% 60% at 90% 0,rgba(255,170,80,.08),transparent 70%),
    repeating-linear-gradient(90deg,transparent 0 196px,rgba(0,0,0,.5) 196px 198px,rgba(255,215,160,.07) 198px 200px),
    linear-gradient(transparent 0 calc(38% - 1px),rgba(0,0,0,.38) calc(38% - 1px) 38%,rgba(255,215,160,.06) 38% calc(38% + 1px),transparent calc(38% + 1px)),
    var(--grain-h),var(--grime),
    linear-gradient(#33210f,#24160b 40%,#160d06);
  background-size:auto,auto,auto,auto,auto,800px 200px,500px 500px,auto}
/* the top surface, seen from a little above: grain runs along the counter, plank seams run toward the back */
.counter::before{content:"";position:absolute;left:-14%;right:-14%;bottom:100%;height:var(--ctr-depth,56px);pointer-events:none;
  transform:perspective(380px) rotateX(56deg);transform-origin:50% 100%;
  background:
    linear-gradient(rgba(10,6,3,.85),rgba(10,6,3,.3) 22%,transparent 60%),
    radial-gradient(ellipse 16% 120% at 18% 100%,rgba(255,180,90,.3),transparent 70%),radial-gradient(ellipse 16% 120% at 82% 100%,rgba(255,180,90,.26),transparent 70%),
    radial-gradient(ellipse 34% 140% at 50% 100%,rgba(255,190,110,.12),transparent 70%),
    repeating-linear-gradient(90deg,transparent 0 238px,rgba(0,0,0,.5) 238px 240px,rgba(255,220,170,.08) 240px 241px),
    var(--grain-h),var(--grain-fine),
    linear-gradient(#4a3019,#76522f 55%,#9a6c3e);
  background-size:auto,auto,auto,auto,auto,800px 200px,200px 200px,auto}
/* the rounded front lip: a lit top edge rolling over into shadow */
.counter-top{top:0;left:0;right:0;height:9px;opacity:1;pointer-events:none;
  background:
    linear-gradient(90deg,transparent 2%,rgba(255,200,120,.16) 12%,transparent 26%,transparent 74%,rgba(255,200,120,.13) 88%,transparent 98%),
    var(--grain-h),
    linear-gradient(#e0b07a 0,#a07044 18%,#6a4626 50%,#382211 84%,#1a0f07 100%);
  background-size:auto,800px 200px,auto;
  box-shadow:inset 0 1px 0 rgba(255,228,175,.5),0 3px 7px rgba(0,0,0,.75)}
/* toe kick: the counter stops a little above the floor */
.counter::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;pointer-events:none;
  background:linear-gradient(#050302,#0c0704 40%,#140c06);box-shadow:0 -1px 0 rgba(255,215,160,.07)}
/* soft contact shadows where each object stands (positions mirror the objects; the objects themselves are untouched) */
.ctr-shade{position:absolute;bottom:100%;height:8px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.72),rgba(0,0,0,.35) 45%,transparent 72%)}
.ctr-shade-bell{right:calc(20% - 6px);width:46px;height:9px}
.ctr-shade-shrooms{left:calc(3% - 4px);width:56px;bottom:calc(100% + 2px);
  background:radial-gradient(ellipse at 50% 50%,rgba(72,212,182,.30),rgba(0,0,0,.35) 50%,transparent 74%)}
.ctr-shade-gazette{left:calc(17% - 6px);width:108px;height:9px;bottom:calc(100% - 2px);transform:rotate(-4deg)}
.ctr-shade-chess{right:1%;width:clamp(64px,calc(10.6% - 28px),150px);height:10px;bottom:calc(100% - 1px)}
.ctr-ledge{display:none}
@media (max-width:760px){
  .counter::before{--ctr-depth:46px;transform:perspective(260px) rotateX(54deg);filter:brightness(1.35) saturate(1.05)}
  .counter-top{filter:brightness(1.2)}
  .counter-top{height:8px}
  /* keep the panel stiles off the centre line, where the scroll cue sits */
  .counter{background-position:0 0,0 0,0 0,-98px 0,0 0,0 0,0 0,0 0}
  /* phones: the floor shows below the counter front at the chess table's feet (100px under the counter line) */
  .counter::after{top:94px;height:auto;background:linear-gradient(rgba(0,0,0,.7),transparent 9px),var(--grain-h),linear-gradient(#3a2614,#2a190c 60%,#1c1108);background-size:auto,800px 200px,auto;
    box-shadow:0 -2px 0 #0a0603,0 -3px 0 rgba(255,215,160,.24);filter:brightness(1.3)}
  .ctr-shade-bell{right:calc(6% - 6px)}
  .ctr-shade-shrooms{left:calc(2% - 4px);bottom:calc(100% + 4px)}
  /* the Gazette lies on a small shelf on the counter front */
  .ctr-ledge{display:block;position:absolute;left:calc(5% - 8px);width:100px;top:60px;height:12px;pointer-events:none;border-radius:1px 1px 2px 2px;
    background:var(--grain-h),linear-gradient(#5a3c21 0,#8a6038 7px,#d0a06a 7px 8px,#6a4626 8px,#2e1c0e 100%);background-size:800px 200px,auto;
    box-shadow:0 5px 7px rgba(0,0,0,.8)}
  .ctr-shade-gazette{left:calc(5% - 2px);width:84px;height:6px;bottom:auto;top:63px;transform:rotate(-4deg);transform-origin:0 50%}
  .ctr-shade-chess{right:calc(2% - 4px);width:88px;height:8px;bottom:auto;top:90px}
}
@media (max-width:760px) and (max-height:760px){ .ctr-shade-chess{display:none} }