.lv-hero{padding:120px 6vw 30px;max-width:1300px}
.lv-hero h1{font-size:clamp(64px,10vw,150px);font-weight:300}.lv-hero h1 em{color:var(--gold-hi);font-weight:500}
.lede{color:var(--parch-dim);font-size:22px;max-width:720px;margin:.4em 0 0}
.stats{display:flex;gap:36px;flex-wrap:wrap;margin:30px 0}
.stats div b{display:block;font:500 42px/1 var(--serif);color:var(--gold-hi);font-variant-numeric:oldstyle-nums}
.stats div span{font:10px var(--caps);letter-spacing:.26em;text-transform:uppercase;color:var(--parch-mute)}
.modes{display:flex;gap:10px;flex-wrap:wrap}
.sec-h{padding:40px 6vw 0}.sec-h h2{font-size:clamp(40px,5vw,68px);font-style:italic}.sec-h p{color:var(--parch-dim);margin:.3em 0 0}
.seal-i{display:inline-block;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#b23a30,#5a1010);vertical-align:-1px}
/* ----- shelves ----- */
.shelf{position:relative;display:flex;gap:var(--gap,26px);align-items:flex-end;padding:40px 6vw 0;overflow-x:auto;overflow-y:visible;scrollbar-width:thin;scroll-snap-type:x proximity;
  perspective:1400px;min-height:calc(var(--h,210px) + 70px)}
.shelf::after{content:"";position:sticky;flex:0 0 1px}
.shelf-board{height:22px;margin:0 3vw;background:linear-gradient(#3a2716,#22160c 60%,#120b05);box-shadow:0 18px 30px -8px #000,inset 0 1px 0 rgba(255,210,150,.18);border-radius:2px}
.shelf-hero{--h:300px;--gap:34px;padding-top:70px}
.shelf-wrap{position:relative;margin-bottom:46px}
.shelf-wrap::before{content:"";position:absolute;left:0;right:0;top:0;bottom:22px;background:radial-gradient(60% 90% at 50% 100%,rgba(255,170,80,.10),transparent 70%);pointer-events:none}
.cat-h{display:flex;align-items:baseline;gap:16px;padding:0 6vw;margin-top:28px}
.cat-h h3{font:italic 500 36px/1 var(--serif)}.cat-h span{font:10px var(--caps);letter-spacing:.3em;color:var(--parch-mute);text-transform:uppercase}
.roots .bk3d{--h:150px;filter:saturate(.75) brightness(.92)}
.roots .cat-h h3{font-size:28px}
/* ----- 3D book ----- */
.bk3d{--h:210px;--w:calc(var(--h) * var(--ar,.66));--d:28px;flex:0 0 auto;width:var(--w);height:var(--h);position:relative;cursor:pointer;scroll-snap-align:start;
  transform-style:preserve-3d;outline:none}
.bk{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(var(--ry,-18deg)) rotateX(var(--rx,0deg)) translateZ(var(--tz,0px));
  transition:transform .55s var(--ease-candle)}
.bk3d.live .bk{transition:transform .12s linear}
.bk>div{position:absolute;backface-visibility:hidden}
.bk .f{inset:0;transform:translateZ(calc(var(--d) / 2));border-radius:1px 3px 3px 1px;overflow:hidden;background:var(--c,#3a2a1c)}
.bk .f img{width:100%;height:100%;object-fit:cover;display:block}
.bk .f::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7%;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.12) 40%,rgba(0,0,0,.18) 60%,transparent);z-index:2}
.bk .gl{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen;opacity:var(--go,0);
  background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,236,200,.55),rgba(255,200,120,.12) 30%,transparent 55%);transition:opacity .4s}
.bk .s{left:0;top:0;width:var(--d);height:100%;transform-origin:left;transform:translateZ(calc(var(--d) / 2)) rotateY(-90deg);
  background:linear-gradient(90deg,rgba(0,0,0,.45),transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%,rgba(0,0,0,.4)),var(--c,#3a2a1c);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.bk .s span{writing-mode:vertical-rl;transform:rotate(180deg);font:500 11px/1 var(--caps);letter-spacing:.12em;color:var(--sc,#efe4cc);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-height:86%}
.bk .p{right:0;top:3px;width:var(--d);height:calc(100% - 6px);transform-origin:right;transform:translateZ(calc(var(--d) / 2)) rotateY(90deg);
  background:repeating-linear-gradient(90deg,#efe6d2 0 1px,#d9ccb0 1px 2px)}
.bk .t{left:0;top:3px;width:calc(100% - 3px);height:var(--d);transform-origin:top;transform:translateZ(calc(var(--d) / 2)) rotateX(90deg);background:repeating-linear-gradient(0deg,#efe6d2 0 1px,#d6c8ab 1px 2px)}
.bk .b{inset:0;transform:translateZ(calc(var(--d) / -2)) rotateY(180deg);background:var(--c,#3a2a1c)}
.bk3d::after{content:"";position:absolute;left:4%;right:-10%;bottom:-6px;height:14px;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent);filter:blur(3px);transform:translateZ(-20px);z-index:-1;transition:all .5s}
.bk3d:hover .bk,.bk3d:focus-visible .bk{--tz:34px}
.bk3d:hover::after{transform:translateY(10px) scale(.86);opacity:.6}
.bk3d .seal{position:absolute;right:-7px;top:12px;width:30px;height:30px;transform:translateZ(calc(var(--d) / 2 + 2px));z-index:4;filter:drop-shadow(0 2px 2px #000a)}
.bk3d .tag{position:absolute;left:0;right:0;top:calc(100% + 10px);text-align:left;font:12px/1.25 var(--serif);color:var(--parch-mute);opacity:0;transition:opacity .3s;pointer-events:none;width:max(var(--w),150px)}
.bk3d .tag b{display:block;font-style:italic;font-weight:500;color:var(--parch);font-size:15px}
.bk3d:hover .tag,.bk3d:focus-visible .tag{opacity:1}
.typo{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:16% 10%;text-align:center;
  background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.07),transparent 60%),var(--c);border:1px solid rgba(201,164,92,.25);outline:1px solid rgba(201,164,92,.35);outline-offset:-7px}
.typo i{font:italic 500 calc(var(--h) * .09)/1.05 var(--serif);color:var(--gold-hi)}
.typo small{font:calc(var(--h) * .035) var(--caps);letter-spacing:.18em;color:var(--parch-dim);text-transform:uppercase}
.vols{position:absolute;left:6px;bottom:6px;z-index:4;font:600 9px var(--caps);letter-spacing:.14em;color:#000;background:var(--gold-hi);padding:3px 6px;border-radius:2px;transform:translateZ(calc(var(--d) / 2 + 1px))}
/* ----- filters ----- */
.filters{position:sticky;top:64px;z-index:30;display:flex;gap:8px;flex-wrap:wrap;padding:14px 6vw;margin-top:40px;background:linear-gradient(rgba(11,9,7,.94),rgba(11,9,7,.82));backdrop-filter:blur(8px);border-block:1px solid var(--line)}
.filters .btn{padding:7px 12px;font-size:10px}
.filters .sort{margin-left:auto}
.cat-sec{scroll-margin-top:140px;transition:opacity .4s}
.cat-sec.hide{display:none}
/* ----- reader (StPageFlip) ----- */
.reader{position:fixed;inset:0;z-index:80;display:grid;place-items:center}
.rd-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(40,28,16,.92),rgba(5,4,3,.97));animation:fi .5s}
@keyframes fi{from{opacity:0}}
.rd-stage{position:relative;filter:drop-shadow(0 40px 60px #000)}
.rd-x{position:absolute;top:22px;right:22px}
.rd-hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--parch-mute)}
.pg{background:#efe4cc;color:#2a1f14;overflow:hidden}
.pg.cover{background:#2a1d12}
.pg .in{position:absolute;inset:0;padding:12% 11%;display:flex;flex-direction:column;background:
  radial-gradient(circle at 30% 20%,rgba(255,255,255,.35),transparent 60%),linear-gradient(90deg,rgba(0,0,0,.08),transparent 8%,transparent 92%,rgba(0,0,0,.06)),#efe4cc}
.pg img{width:100%;height:100%;object-fit:cover;display:block}
.pg .exl{margin:auto;text-align:center}
.pg .exl small{font:10px var(--caps);letter-spacing:.4em;color:#8a6b3a}
.pg .exl div{font:italic 500 34px/1.05 var(--serif);margin:10px 0}
.pg h4{font:italic 500 30px/1.02 var(--serif);margin:0 0 6px;color:#1d140b}
.pg .by{font:11px var(--caps);letter-spacing:.2em;color:#7a5a2c;text-transform:uppercase}
.pg dl{margin:18px 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:15px}
.pg dt{font:10px var(--caps);letter-spacing:.2em;color:#8a6b3a;text-transform:uppercase;padding-top:4px}
.pg dd{margin:0}
.pg .nt{margin-top:auto;font-style:italic;font-size:15px;color:#4a3826;border-top:1px solid #c9b48c;padding-top:10px}
.pg .ink{animation:ink 1.4s var(--ease-candle) both}
@keyframes ink{from{opacity:0;filter:blur(3px);letter-spacing:.04em}}
@media (max-width:700px){.shelf-hero{--h:220px}.bk3d{--h:170px}.filters{top:56px}.lv-hero{padding-top:96px}}
.reader[hidden]{display:none}
@media (max-width:720px){.lv-hero{padding-top:110px}.filters{top:78px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.filters .btn{flex:0 0 auto}.filters .sort{margin-left:0}
  .modes .btn{font-size:10px;padding:9px 12px}.stats{gap:22px}.stats div b{font-size:34px}}