/* 3D rotatable book: front, back, spine, page edges */
.book3d { --bw: 300px; --ratio: 1.294; --bh: calc(var(--bw) * var(--ratio)); --bd: calc(var(--bw) * 0.055);
  --spine: #1a1a1a; --edge: #f3efe6; position: relative; width: var(--bw); height: var(--bh);
  perspective: 1800px; margin: 0 auto; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.book3d:active { cursor: grabbing; }
.book3d .book { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.book3d.dragging .book { transition: none; }
.book3d .face { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.book3d .front, .book3d .back { width: var(--bw); height: var(--bh); top: 0; left: 0; overflow: hidden; border-radius: 2px 6px 6px 2px; }
.book3d .front img, .book3d .back img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.book3d .front { transform: translateZ(calc(var(--bd) / 2)); box-shadow: inset 4px 0 8px rgba(0,0,0,.25); }
.book3d .front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.28) 0, rgba(255,255,255,.18) 1.4%, rgba(0,0,0,0) 4%, rgba(255,255,255,.06) 60%, rgba(0,0,0,.08)); pointer-events: none; }
.book3d .back { transform: rotateY(180deg) translateZ(calc(var(--bd) / 2)); border-radius: 6px 2px 2px 6px; }
.book3d .back::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(0,0,0,.28) 0, rgba(0,0,0,0) 4%); }
.book3d .spine { width: var(--bd); height: var(--bh); top: 0; left: calc(var(--bd) / -2); transform: rotateY(-90deg);
  background: var(--spine); display: flex; align-items: center; justify-content: center; }
.book3d .spine span { writing-mode: vertical-rl; font: 900 calc(var(--bd) * .5)/1 "Barlow Condensed", Impact, sans-serif; letter-spacing: .04em; color: #fff; text-transform: uppercase; white-space: nowrap; }
.book3d .spine span b { color: #F26A1B; font-weight: 900; }
.book3d .fore { width: var(--bd); height: calc(var(--bh) - 6px); top: 3px; left: calc(var(--bw) - var(--bd) / 2 - 3px); transform: rotateY(90deg);
  background: repeating-linear-gradient(90deg, var(--edge) 0 1px, #d9d3c6 1px 2px); }
.book3d .top, .book3d .bottom { width: calc(var(--bw) - 6px); height: var(--bd); left: 0;
  background: repeating-linear-gradient(0deg, var(--edge) 0 1px, #d9d3c6 1px 2px); }
.book3d .top { top: calc(var(--bd) / -2); transform: rotateX(90deg); }
.book3d .bottom { top: calc(var(--bh) - var(--bd) / 2); transform: rotateX(-90deg); }
.book3d .shadow { position: absolute; left: 8%; right: 8%; bottom: -34px; height: 30px; border-radius: 50%;
  background: radial-gradient(rgba(0,0,0,.35), rgba(0,0,0,0) 70%); filter: blur(4px); transform: translateZ(-200px); }
.book-ctrl { display: flex; gap: 8px; justify-content: center; margin-top: 44px; align-items: center; flex-wrap: wrap; }
.book-ctrl button { font: 600 13px/1 Inter, system-ui, sans-serif; letter-spacing: .02em; padding: 10px 16px; border-radius: 999px; cursor: pointer; border: 1px solid currentColor; background: transparent; color: inherit; }
.book-ctrl button[aria-pressed="true"] { background: currentColor; }
.book-ctrl button[aria-pressed="true"] span { color: var(--btn-on, #fff); }
.book-ctrl small { flex-basis: 100%; text-align: center; opacity: .6; font: 500 12px Inter, system-ui, sans-serif; }
@media (prefers-reduced-motion: reduce) { .book3d .book { transition: none; } }