/* Solid CSS 3D book: six faces that meet exactly (no see-through gaps),
   a hinged front cover that opens to show the contents page. */
.b3d{--w:250px;--h:375px;--d:34px;--rx:6deg;--ry:-28deg;--shift:0px;--open:0deg;--spine:#151a22;--ink:#e9d29a;
  position:relative;width:calc(var(--w) * 2.15);max-width:100%;height:calc(var(--h) + 90px);margin:0 auto;
  perspective:1700px;perspective-origin:50% 40%;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.b3d__rig{position:absolute;left:50%;top:calc(50% - 24px);width:0;height:0;transform-style:preserve-3d;
  transform:translateX(var(--shift)) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .9s cubic-bezier(.2,.75,.2,1);cursor:grab}
.b3d.is-dragging .b3d__rig{transition:transform .05s linear;cursor:grabbing}
.b3d .f{position:absolute;left:0;top:0;box-sizing:border-box}
/* faces, all centred on the rig origin */
.b3d .f--back{width:var(--w);height:var(--h);margin:calc(var(--h)/-2) 0 0 calc(var(--w)/-2);
  transform:rotateY(180deg) translateZ(calc(var(--d)/2));border-radius:3px 6px 6px 3px;
  background:linear-gradient(160deg,rgba(255,255,255,.07),transparent 40%),var(--spine);display:flex;flex-direction:column;justify-content:center;gap:10px;padding:26px;color:var(--ink);text-align:center}
.b3d .f--back b{font:700 calc(var(--w)*.075)/1.15 var(--serif,Georgia,serif)}
.b3d .f--back small{font:600 calc(var(--w)*.038)/1.4 var(--sans,system-ui,sans-serif);letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.b3d .f--spine{width:var(--d);height:var(--h);margin:calc(var(--h)/-2) 0 0 calc(var(--d)/-2);
  transform:rotateY(-90deg) translateZ(calc(var(--w)/2));
  background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(255,255,255,.12) 45%,rgba(0,0,0,.4)),var(--spine);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.b3d .f--spine span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;color:var(--ink);
  font:700 calc(var(--d)*.36)/1 var(--serif,Georgia,serif);letter-spacing:.04em}
.b3d .f--pages{width:var(--d);height:var(--h);margin:calc(var(--h)/-2) 0 0 calc(var(--d)/-2);
  transform:rotateY(90deg) translateZ(calc(var(--w)/2 - 1px));
  background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 30%,transparent 70%,rgba(0,0,0,.25)),repeating-linear-gradient(90deg,#f3ecdd 0 2px,#d8cdb7 2px 3px)}
.b3d .f--top,.b3d .f--bottom{width:var(--w);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--w)/-2);
  background:linear-gradient(90deg,var(--spine) 0 3px,transparent 3px),repeating-linear-gradient(0deg,#f1e9d8 0 2px,#d5c9b2 2px 3px)}
.b3d .f--top{transform:rotateX(90deg) translateZ(calc(var(--h)/2))}
.b3d .f--bottom{transform:rotateX(-90deg) translateZ(calc(var(--h)/2))}
/* first page under the cover */
.b3d .f--page{width:var(--w);height:var(--h);margin:calc(var(--h)/-2) 0 0 calc(var(--w)/-2);
  transform:translateZ(calc(var(--d)/2 - 1px));background:linear-gradient(90deg,#d9cfbd,#f7f1e5 6%,#fbf7ee);
  color:#2a2620;padding:calc(var(--w)*.1) calc(var(--w)*.09);overflow:hidden;border-radius:0 4px 4px 0}
/* hinged cover */
.b3d__cover{position:absolute;left:0;top:0;width:var(--w);height:var(--h);margin:calc(var(--h)/-2) 0 0 calc(var(--w)/-2);
  transform-style:preserve-3d;transform-origin:left center;transform:translateZ(calc(var(--d)/2)) rotateY(var(--open));
  transition:transform 1.1s cubic-bezier(.3,.7,.2,1)}
.b3d__cover .f{width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.b3d .f--front{display:block;object-fit:cover;border-radius:3px 6px 6px 3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.b3d .f--hinge{pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(255,255,255,.14) 3%,rgba(0,0,0,.18) 6%,transparent 10%);border-radius:3px 6px 6px 3px}
.b3d .f--glare{pointer-events:none;background:radial-gradient(circle at var(--gx,30%) var(--gy,20%),rgba(255,240,200,.22),transparent 55%);mix-blend-mode:screen;border-radius:3px 6px 6px 3px}
.b3d .f--inside{transform:rotateY(180deg);background:linear-gradient(270deg,#d9cfbd,#f7f1e5 6%,#fbf7ee);color:#2a2620;
  padding:calc(var(--w)*.1) calc(var(--w)*.09);border-radius:4px 0 0 4px;overflow:hidden}
/* page typography */
.b3d .pg-kicker{font:600 calc(var(--w)*.036)/1.3 var(--sans,system-ui,sans-serif);letter-spacing:.14em;text-transform:uppercase;color:#9a7330;margin-bottom:.8em}
.b3d .pg-title{font:700 calc(var(--w)*.068)/1.15 var(--serif,Georgia,serif);margin:0 0 .7em}
.b3d .pg-toc{list-style:none;margin:0;padding:0;font:500 calc(var(--w)*.042)/1.35 var(--sans,system-ui,sans-serif)}
.b3d .pg-toc li{display:flex;gap:.5em;padding:.32em 0;border-bottom:1px dotted rgba(0,0,0,.18)}
.b3d .pg-toc li span{color:#9a7330;min-width:1.4em;font-weight:700}
.b3d .pg-text{font:400 calc(var(--w)*.047)/1.6 Georgia,"Times New Roman",serif;position:relative;max-height:78%;overflow:hidden}
.b3d .pg-text::after{content:"";position:absolute;left:0;right:0;bottom:0;height:32%;background:linear-gradient(transparent,#fbf7ee)}
.b3d .pg-more{position:absolute;left:calc(var(--w)*.09);right:calc(var(--w)*.09);bottom:calc(var(--w)*.09);font:600 calc(var(--w)*.04)/1.3 var(--sans,system-ui,sans-serif);color:#9a7330}
.b3d .pg-num{position:absolute;bottom:calc(var(--w)*.05);font:500 calc(var(--w)*.034)/1 var(--sans,system-ui,sans-serif);color:#9b9386}
/* floor shadow */
.b3d__shadow{position:absolute;left:50%;bottom:6px;width:calc(var(--w) * 1.1);height:34px;transform:translateX(calc(-50% + var(--shift)));
  background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent);filter:blur(6px);transition:transform .9s,width .9s}
.b3d.is-open .b3d__shadow{width:calc(var(--w) * 2.2)}
/* open state */
.b3d.is-open{--rx:4deg;--ry:0deg;--shift:calc(var(--w) / 2);--open:-168deg}
.b3d.is-open .b3d__rig{cursor:default}
/* controls */
.b3d__btn{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);z-index:2}
.b3d__hint{position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);font-size:.78rem;color:#7d766b;white-space:nowrap}
@media (hover:none){.b3d__hint{display:none}}
@media (prefers-reduced-motion:reduce){.b3d__rig,.b3d__cover,.b3d__shadow{transition:none}}