/* Each leaf has two opaque faces. Its children never share depth with other leaves. */
.album-group.is-book { position: relative; }
.book-stage { position: sticky; top: 18px; display: flex; flex-direction: column; justify-content: center; gap: 20px; height: calc(100svh - 36px); }
.book-stage .album-heading { flex: 0 0 auto; margin: 0; }
.book-spread { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; height: min(570px, calc(100svh - 190px)); padding: 14px; border: 1px solid #765044; border-radius: 8px 16px 16px 8px; background: repeating-linear-gradient(0deg, #ffffff04 0 1px, transparent 1px 4px), #553b31; box-shadow: 0 24px 45px #38272030, 0 5px 0 #372720, inset 0 0 0 5px #ffffff08; }
.book-dedication { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 0; gap: 19px; overflow: hidden; padding: 35px; border: 1px solid #d9c6b2; outline: 1px solid #d9c6b2; outline-offset: -12px; background: radial-gradient(ellipse at right, #d7c6b5, transparent 65%), #faf3e9; text-align: center; }
.book-dedication::before { content: "♡"; color: var(--rose-deep); font-size: 40px; }
.book-dedication.is-covered > *, .book-dedication.is-covered::before { visibility: hidden; }
.book-dedication p { margin: 0; font-family: var(--serif); font-size: clamp(22px, 3vw, 36px); font-style: italic; line-height: 1.5; }
.book-dedication small { color: #847066; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
.book-handwritten { position: relative; z-index: 1; max-width: 240px; color: #a75e69; font-family: var(--handwritten); font-size: clamp(24px, 3vw, 34px); line-height: 1.3; }
.book-flower { position: absolute; bottom: -12px; left: -8px; width: 115px; color: #a75e6960; transform: rotate(-18deg); }
.book-ribbon { position: absolute; z-index: 50; top: -2px; left: 28px; display: grid; place-items: start center; width: 28px; height: 66px; padding-top: 17px; background: #a75e69; color: #f9e6de; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); pointer-events: none; }
.is-book .gallery { position: relative; display: block; min-width: 0; min-height: 0; background: #f7eee2; perspective: 1800px; perspective-origin: left center; transform-style: flat; }
.is-book .photo-card { position: absolute; inset: 0; display: block; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform-style: preserve-3d; transform-origin: left center; transition: none; }
.is-book .book-page-front, .is-book .book-page-back { position: absolute; inset: 0; display: flex; flex-direction: column; padding: clamp(12px, 2vw, 24px); border: 1px solid #d8c3ae; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, #e2d3c2, #fffaf3 8%, #fffaf3 95%, #f0e3d4); -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 2px 2px 0 #d0bcaa; }
.is-book .book-page-front { gap: 10px; transform: rotateY(0deg); }
.is-book .book-page-front::after { position: absolute; inset: 0; border-radius: inherit; content: ""; background: linear-gradient(90deg, #38272033, transparent 55%); opacity: var(--fold-shadow, 0); pointer-events: none; }
.is-book .book-page-back { justify-content: center; align-items: center; gap: 28px; padding: 40px; outline: 1px solid #d8bfaa; outline-offset: -15px; transform: rotateY(180deg); text-align: center; }
.book-page-back p { margin: 0; color: #9a5f65; font-family: var(--handwritten); font-size: clamp(28px, 3.5vw, 42px); line-height: 1.5; }
.book-page-heart { color: var(--rose-deep); font-size: 35px; }
.is-book .photo-open { position: relative; flex: 1 1 0; min-height: 0; width: 100%; height: auto; padding: 8px; border: 1px solid #e2d3c4; background: #fffdf8; box-shadow: 0 3px 9px #38272014; }
.is-book .photo-open::before { position: absolute; z-index: 2; top: 0; left: 22%; width: 56%; height: 15px; content: ""; background: #dbb5a880; transform: rotate(-3deg); pointer-events: none; }
.is-book .photo-card img { display: block; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; object-fit: contain; }
.is-book .photo-card figcaption { flex: 0 0 auto; display: grid; place-items: center; min-height: 52px; margin: 0; padding: 5px 4px; color: var(--ink); font-family: var(--serif); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.45; text-align: center; }
.book-controls { position: relative; display: flex; align-items: center; justify-content: center; gap: 20px; padding-bottom: 12px; }
.book-controls::after { position: absolute; bottom: 0; left: 15%; width: 70%; height: 2px; background: linear-gradient(90deg, #a75e69 var(--book-progress, 0%), #cfb9aa var(--book-progress, 0%)); content: ""; }
.book-controls button { width: 44px; height: 44px; border: 1px solid #b59282; border-radius: 50%; background: #fffaf5; color: var(--cocoa); cursor: pointer; font-size: 23px; transition: transform .2s ease, background .2s ease; }
.book-controls button:hover:not(:disabled) { transform: translateY(-3px); background: #f1ceca; }
.book-controls button:disabled { opacity: .35; cursor: default; }
.book-position { min-width: 65px; color: #71594e; font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.book-scroll-hint { margin: -10px 0 0; color: #71594e; font-size: 12px; line-height: 1.5; text-align: center; }
@media (max-width: 720px) {
  .book-stage { gap: 14px; }
  .book-stage .album-heading { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding-bottom: 12px; }
  .book-stage .album-heading h3 { font-size: clamp(20px, 5.7vw, 25px); line-height: 1.25; }
  .book-spread { display: block; flex: 1 1 auto; padding: 9px 9px 9px 17px; max-height: min(570px, calc(100svh - 205px)); clip-path: inset(-15px -20px -25px -20px); }
  .book-dedication { display: none; }
  .is-book .gallery { height: 100%; }
  .is-book .book-page-front { padding: 12px; gap: 7px; }
  .is-book .photo-card figcaption { min-height: 48px; font-size: 16px; }
  .book-ribbon { left: auto; right: 24px; width: 22px; height: 48px; padding-top: 8px; }
  .book-controls { flex: 0 0 auto; }
  .book-scroll-hint { margin: 0; }
}