/* 3D book component. Size via --bw on the mount. */
.book3d-mount{--bw:150px;--bh:calc(var(--bw)*1.5);--bd:calc(var(--bw)*.17);pointer-events:none;user-select:none;width:calc(var(--bw)*1.25);height:calc(var(--bh)*1.12);display:flex;align-items:center;justify-content:center}
.book3d-mount *{pointer-events:none!important}
.b3d-stage{perspective:1100px;width:var(--bw);height:var(--bh)}
.b3d{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(10deg) rotateY(-28deg) rotateZ(-4deg);animation:b3dIdle 7s ease-in-out infinite}
.b3d>div{position:absolute;transform-style:preserve-3d}
.b3d-front,.b3d-back{inset:0;border-radius:2px 6px 6px 2px}
.b3d-back{background:var(--bback);transform:translateZ(calc(var(--bd)/-2)) rotateY(180deg);color:var(--bpaper);box-shadow:0 18px 30px rgba(0,0,0,.4);overflow:hidden}
.b3d-backin{position:absolute;inset:7%;border:1px solid rgba(227,195,90,.5);padding:8%;font:400 calc(var(--bw)*.052)/1.35 'Atkinson Hyperlegible',sans-serif;overflow:hidden}
.b3d-backin h3{font:700 calc(var(--bw)*.085)/1.1 Fraunces,Georgia,serif;color:var(--bink);margin:0 0 .5em}
.b3d-backin p{margin:0 0 .55em}.b3d-q{font-style:italic;color:var(--bink)}.b3d-foot{opacity:.75;font-size:.85em}
.b3d-front{transform-origin:left center;transform:translateZ(calc(var(--bd)/2));animation:b3dOpen 7s ease-in-out infinite}
.b3d-fo,.b3d-fi{position:absolute;inset:0;backface-visibility:hidden;border-radius:2px 6px 6px 2px;overflow:hidden}
.b3d-fo{background:var(--cloth);box-shadow:inset 6px 0 8px -4px rgba(0,0,0,.6),inset -1px 0 0 rgba(255,255,255,.15)}
.b3d-fo img{width:100%;height:100%;object-fit:cover;display:block}
.b3d-fo::after{content:'';position:absolute;left:5%;top:0;bottom:0;width:2px;background:rgba(0,0,0,.35);box-shadow:2px 0 0 rgba(255,255,255,.12)}
.b3d-fi{transform:rotateY(180deg);background:var(--bpaper) linear-gradient(90deg,rgba(0,0,0,.12),transparent 20%);color:#4a2c1e;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font:600 calc(var(--bw)*.07) Fraunces,Georgia,serif;padding:10%}
.b3d-ex{font-size:.8em;margin-top:1em}.b3d-ex em{font-weight:400;font-size:.8em}
.b3d-spine{left:0;top:0;width:var(--bd);height:100%;transform-origin:left;transform:translateZ(calc(var(--bd)/2)) rotateY(-90deg);background:linear-gradient(90deg,rgba(0,0,0,.35),transparent 30%,transparent 70%,rgba(0,0,0,.35)),var(--spine);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:8% 0;color:var(--bink)}
.b3d-spine span{writing-mode:vertical-rl;font:700 calc(var(--bd)*.42) Fraunces,Georgia,serif;white-space:nowrap;letter-spacing:.02em}
.b3d-spine b{font:700 calc(var(--bd)*.3) Fraunces,serif;writing-mode:vertical-rl}
.b3d-pages{inset:0}
.b3d-pages i{position:absolute;display:block;background:repeating-linear-gradient(0deg,#f3e6c8 0 1px,#d9c79f 1px 2px)}
.b3d-pages .pr{right:3px;top:3px;bottom:3px;width:calc(var(--bd) - 2px);transform-origin:right;transform:translateZ(calc(var(--bd)/2 - 1px)) rotateY(90deg);background:repeating-linear-gradient(90deg,#f3e6c8 0 1px,#d6c39a 1px 2px)}
.b3d-pages .pt{left:2px;right:3px;top:3px;height:calc(var(--bd) - 2px);transform-origin:top;transform:translateZ(calc(var(--bd)/2 - 1px)) rotateX(-90deg)}
.b3d-pages .pb{left:2px;right:3px;bottom:3px;height:calc(var(--bd) - 2px);transform-origin:bottom;transform:translateZ(calc(var(--bd)/2 - 1px)) rotateX(90deg)}
@keyframes b3dOpen{0%,30%{transform:translateZ(calc(var(--bd)/2)) rotateY(0)}50%,62%{transform:translateZ(calc(var(--bd)/2)) rotateY(-38deg)}85%,100%{transform:translateZ(calc(var(--bd)/2)) rotateY(0)}}
@keyframes b3dIdle{0%,100%{transform:rotateX(10deg) rotateY(-28deg) rotateZ(-4deg) translateY(0)}50%{transform:rotateX(12deg) rotateY(-20deg) rotateZ(-2deg) translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.b3d,.b3d-front{animation:none!important}.b3d-front{transform:translateZ(calc(var(--bd)/2)) rotateY(-14deg)}}
body.rm .b3d,body.rm .b3d-front{animation:none!important}
/* placements */
.tome .book3d-mount{--bw:clamp(92px,24vh,150px);margin:-4px 0 -6px}
.ibook.b3d-host{background:none!important;box-shadow:none!important;aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;pointer-events:none}
.ibook.b3d-host>span{font-size:clamp(15px,2.2vw,20px);text-shadow:0 2px 4px #000;color:#f0dfae}
.b3d-intro{--bw:clamp(96px,min(30vw,24vh),200px)}