.book-wrap { perspective: 1400px; justify-self: center; padding: 1rem 2rem; }
.book {
  --w: 200px; --h: calc(var(--w) * 1.491); --d: 30px;
  --cover-blue: #3D50B0;
  position: relative; width: var(--w); height: var(--h);
  transform-style: preserve-3d;
  transform: rotateY(-18deg) rotateX(6deg); /* same order GSAP writes */
}
.book__face { position: absolute; top: 0; left: 0; backface-visibility: hidden; }
.book__front, .book__back { width: var(--w); height: var(--h); }
.book__front { transform: translateZ(calc(var(--d) / 2)); }
.book__front img { width: 100%; height: 100%; object-fit: cover; border-radius: 1px 3px 3px 1px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.book__back {
  transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
  background: #fff; color: var(--cover-blue); padding: 1.25rem;
  font: 600 0.75rem/1.5 var(--font-sans);
}
.book__spine, .book__edge { width: var(--d); height: var(--h); left: calc(50% - var(--d) / 2); }
.book__spine {
  transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
  background: #fff; color: #fff;
  writing-mode: vertical-rl; display: grid; place-items: center;
}
.book__spine span {
  background: var(--cover-blue); padding: 0.5rem 0.2rem;
  font: 700 0.6rem/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase;
}
.book__edge {
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2));
  background: repeating-linear-gradient(90deg, #f7f3ea 0 2px, #e4dccb 2px 3px);
}
.book__top, .book__bottom {
  width: var(--w); height: var(--d); top: calc(50% - var(--d) / 2);
  background: repeating-linear-gradient(0deg, #f7f3ea 0 2px, #e4dccb 2px 3px);
}
.book__top { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.book__bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }
@media (max-width: 40rem) { .book { --w: 170px; --d: 26px; } }
.book-stage { position: relative; z-index: 2; background: var(--paper); }