.photo-book {
  position: relative;
  z-index: 3;
  isolation: isolate;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  background: #87522f url("assets/memorial/photo-book/background.png") center center / cover no-repeat;
}
.photo-book__heading {
  position: absolute;
  top: 6%;
  left: 4%;
  width: 92%;
  text-align: center;
  color: #351b0d;
  text-shadow: 0 1px 8px #ffe4b5;
}
.photo-book__heading h2 {
  margin: 0;
  font-size: clamp(30px, 3.7vw, 65px);
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
}
.photo-book__flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 18px;
  color: #805018;
}
.photo-book__flourish::before,
.photo-book__flourish::after { content: ""; width: clamp(55px, 10vw, 160px); height: 1px; background: currentColor; }
.photo-book__album {
  position: absolute;
  width: min(97%, 130svh);
  aspect-ratio: 1633 / 963;
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
}
.photo-book__art { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Photo coordinates share the artwork's intrinsic canvas, so mounts scale with the book. */
.photo-book__page { position: absolute; left: var(--page-x); width: var(--page-width); top: 16%; height: 67%; }
.photo-book__mount { position: absolute; width: 100%; height: 31.3%; }
.photo-book__mount--1 { top: 0; }
.photo-book__mount--2 { top: 34.3%; }
.photo-book__mount--3 { top: 68.6%; }
.photo-book__mount img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-aspect-ratio: 1/1) {
  .photo-book__heading { top: 11%; }
  .photo-book__heading h2 { font-size: clamp(31px, 5.2vw, 48px); }
  .photo-book__album { width: 98%; bottom: 12%; }
}
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  .photo-book { min-height: 100svh; }
  .photo-book__heading { top: 3%; }
  .photo-book__heading h2 { font-size: 26px; }
  .photo-book__flourish { margin-top: 5px; }
}

.photo-book__mobile-album { display:none; }
@media(max-width:600px) {
  .photo-book { height:auto; min-height:100svh; padding:44px 10px 30px; }
  .photo-book__heading { position:relative; top:auto; left:auto; width:100%; }
  .photo-book__heading h2 { font-size:34px; }
  .photo-book__flourish { margin-top:14px; }
  .photo-book__album { display:none; }
  .photo-book__mobile-album { display:block; position:relative; width:100%; max-width:430px; margin:24px auto 0; }
  .photo-book__mobile-art { display:block; width:100%; height:auto; }
  .photo-book__mobile-page { position:absolute; inset:12% 14%; display:flex; flex-direction:column; justify-content:space-between; }
  .photo-book__mobile-mount { width:100%; aspect-ratio:4/3; }
  .photo-book__mobile-mount img { display:block; width:100%; height:100%; object-fit:cover; }
}

/* Kids photographs fit inside the existing album mounts without cutting off faces or tribute text. */
.photo-book__page[data-album-page="kids"] .photo-book__mount,
.photo-book__mobile-page[data-album-page="kids"] .photo-book__mobile-mount { display:flex; align-items:center; justify-content:center; }
.photo-book__page[data-album-page="kids"] img,
.photo-book__mobile-page[data-album-page="kids"] img { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; border:4px solid #fff6e6; box-shadow:0 3px 8px #4b301e40; }
.photo-book__mobile-kids-label { display:none; }
@media(max-width:600px) { .photo-book__mobile-kids-label { display:block; position:absolute; top:5%; width:100%; margin:0; text-align:center; font:34px Georgia,serif; color:#351b0d; } }

@media(max-width:600px) { .photo-book__mobile-page[data-album-page="kids"] .photo-book__mobile-mount { height:30%; flex:0 0 30%; min-height:0; aspect-ratio:auto; } }

/* Grandchildren photographs preserve the complete image inside the album. */
.photo-book__page[data-album-page="grandchildren"] .photo-book__mount,
.photo-book__mobile-page[data-album-page="grandchildren"] .photo-book__mobile-mount { display:flex; align-items:center; justify-content:center; }
.photo-book__page[data-album-page="grandchildren"] img,
.photo-book__mobile-page[data-album-page="grandchildren"] img { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; border:4px solid #fff6e6; box-shadow:0 3px 8px #4b301e40; }
@media(max-width:600px) { .photo-book__mobile-page[data-album-page="grandchildren"] { justify-content:flex-start; } .photo-book__mobile-page[data-album-page="grandchildren"] .photo-book__mobile-mount { height:30%; flex:0 0 30%; min-height:0; aspect-ratio:auto; } .photo-book__mobile-album--grandchildren .photo-book__mobile-kids-label { font-size:27px; } }

/* Wife photograph */
.photo-book__page[data-album-page="wife"] .photo-book__mount,.photo-book__mobile-page[data-album-page="wife"] .photo-book__mobile-mount{display:flex;align-items:center;justify-content:center;}
.photo-book__page[data-album-page="wife"] img,.photo-book__mobile-page[data-album-page="wife"] img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border:4px solid #fff6e6;box-shadow:0 3px 8px #4b301e40;}
@media(max-width:600px){.photo-book__mobile-page[data-album-page="wife"]{justify-content:flex-start;}.photo-book__mobile-page[data-album-page="wife"] .photo-book__mobile-mount{height:44%;flex:0 0 44%;min-height:0;aspect-ratio:auto;}}