/* 3D book component. Size via --bw on the mount.
   Geometry (book space): x 0..bw, y 0..bh, z -bd/2 (back) .. +bd/2 (front). Boards are --bt thick and overhang the page
   block by --bo. Every face has SQUARE corners: a border-radius on a 3D face leaves notches where it meets the square
   side faces, which is what read as clipped corners. Faces never share a plane (1px gaps) so nothing z-fights, and no
   3D participant has overflow, filter or opacity (those flatten preserve-3d, worst in WebKit). */
.book3d-mount{--bw:150px;--bh:calc(var(--bw)*1.5);--bd:calc(var(--bw)*.17);--bt:max(2px,calc(var(--bw)*.022));--bo:max(2px,calc(var(--bw)*.025));--pd:calc(var(--bd) - 2*var(--bt) - 1px);
  pointer-events:none;user-select:none;-webkit-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{position:relative;perspective:1100px;width:var(--bw);height:var(--bh)}
/* soft ground shadow, flat (outside the 3D context) */
.b3d-stage::before{content:'';position:absolute;left:4%;right:-6%;bottom:-7%;height:14%;background:radial-gradient(closest-side,rgba(0,0,0,.45),rgba(0,0,0,0));transform:rotate(-4deg)}
.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>*{position:absolute;display:block;left:0;top:0;width:100%;height:100%;margin:0;box-sizing:border-box}
/* back board: outside (faces back), inside (faces front), and three edges */
.b3d-back{background:var(--bback);color:var(--bpaper);transform:translateZ(calc(var(--bd)/-2)) rotateY(180deg);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.b3d-backin{position:absolute;inset:7%;border:1px solid rgba(227,195,90,.5);padding:8%;font:400 max(12px,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{color:var(--bpaper);color:color-mix(in srgb,var(--bpaper) 75%,transparent);font-size:.85em}
.b3d-backi{transform:translateZ(calc(var(--bd)/-2 + var(--bt)));background:linear-gradient(90deg,rgba(0,0,0,.3),rgba(0,0,0,0) 14%),var(--bback);box-shadow:0 18px 30px rgba(0,0,0,.35);-webkit-backface-visibility:hidden;backface-visibility:hidden}
/* board edges (shared by back board and cover): right, top, bottom strips, each centred on its edge and turned 90deg */
.b3d-e{background:var(--spine);background:color-mix(in srgb,var(--cloth) 70%,#000)}
.b3d>.b3d-e.er,.b3d-front>.b3d-e.er{left:calc(100% - var(--bt)/2);width:var(--bt)}
.b3d>.b3d-e.et,.b3d-front>.b3d-e.et{top:calc(var(--bt)/-2);height:var(--bt)}
.b3d>.b3d-e.eb,.b3d-front>.b3d-e.eb{top:calc(100% - var(--bt)/2);height:var(--bt)}
.b3d-bk{background:var(--bback);background:color-mix(in srgb,var(--bback) 70%,#000)}
.b3d-bk.er{transform:translateZ(calc(var(--bd)/-2 + var(--bt)/2)) rotateY(90deg)}
.b3d-bk.et{transform:translateZ(calc(var(--bd)/-2 + var(--bt)/2)) rotateX(90deg);background:var(--bback);background:color-mix(in srgb,var(--bback) 85%,#fff)}
.b3d-bk.eb{transform:translateZ(calc(var(--bd)/-2 + var(--bt)/2)) rotateX(-90deg)}
/* spine: full height, full depth, faces left */
.b3d-spine{left:calc(var(--bd)/-2);width:var(--bd);transform:rotateY(-90deg);background:linear-gradient(90deg,rgba(0,0,0,.4),rgba(255,255,255,.06) 35%,rgba(255,255,255,.06) 65%,rgba(0,0,0,.4)),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}
/* page block: inset by --bo on top, bottom and fore-edge, sits between the boards (depth --pd, centred at z=-.5px) */
.b3d-p{background:repeating-linear-gradient(0deg,#f3e6c8 0 1px,#d9c79f 1px 2px)}
.b3d>.pf,.b3d>.pt,.b3d>.pb{left:1px;width:calc(100% - var(--bo) - 1px)}
.b3d>.pf,.b3d>.pr{top:var(--bo);height:calc(100% - 2*var(--bo))}
.b3d>.pf{transform:translateZ(calc(var(--bd)/2 - var(--bt) - 1px));background:var(--bpaper) linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,0) 14%,rgba(0,0,0,0) 92%,rgba(0,0,0,.06));box-shadow:inset 0 0 0 1px rgba(120,90,50,.18)}
.b3d>.pr{left:calc(100% - var(--bo) - var(--pd)/2);width:var(--pd);transform:translateZ(-.5px) rotateY(90deg);background:repeating-linear-gradient(90deg,#f3e6c8 0 1px,#d6c39a 1px 2px)}
.b3d>.pt{top:calc(var(--bo) - var(--pd)/2);height:var(--pd);transform:translateZ(-.5px) rotateX(90deg);background:repeating-linear-gradient(0deg,#f7ecd2 0 1px,#e2d1aa 1px 2px)}
.b3d>.pb{top:calc(100% - var(--bo) - var(--pd)/2);height:var(--pd);transform:translateZ(-.5px) rotateX(-90deg);background:repeating-linear-gradient(0deg,#e6d6b1 0 1px,#c9b68c 1px 2px)}
/* front board: hinged on the line where its INSIDE face meets the spine, so opening never pushes it into the pages */
.b3d-front{transform-style:preserve-3d;transform-origin:0 50%;transform:translateZ(calc(var(--bd)/2 - var(--bt)));animation:b3dOpen 7s ease-in-out infinite}
.b3d-front>*{position:absolute;display:block;left:0;top:0;width:100%;height:100%;box-sizing:border-box}
.b3d-fo,.b3d-fi{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.b3d-fo{transform:translateZ(var(--bt));background:var(--cloth);overflow:hidden}
.b3d-fo img{width:100%;height:100%;object-fit:cover;display:block}
/* faked bevel + hinge groove, painted over the art */
.b3d-fo::before{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.45),inset 1.5px 1.5px 0 1px rgba(255,255,255,.16),inset -2px -2px 3px 1px rgba(0,0,0,.35)}
.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(270deg,rgba(0,0,0,.14),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-fi p{margin:0}.b3d-ex{font-size:.8em;margin-top:1em!important}.b3d-ex em{font-weight:400;font-size:.8em}
.b3d-front>.er{transform:translateZ(calc(var(--bt)/2)) rotateY(90deg)}
.b3d-front>.et{transform:translateZ(calc(var(--bt)/2)) rotateX(90deg);background:var(--cloth);background:color-mix(in srgb,var(--cloth) 85%,#fff)}
.b3d-front>.eb{transform:translateZ(calc(var(--bt)/2)) rotateX(-90deg)}
@keyframes b3dOpen{0%,30%{transform:translateZ(calc(var(--bd)/2 - var(--bt))) rotateY(0)}50%,62%{transform:translateZ(calc(var(--bd)/2 - var(--bt))) rotateY(-38deg)}85%,100%{transform:translateZ(calc(var(--bd)/2 - var(--bt))) 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 - var(--bt))) 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)}