.book-wrap { width: min(88vw, 620px); height: min(74dvh, 780px); }
.book { left: 0px; width: 100%; height: 100%; transform-style: preserve-3d; }
.book::after { left: 0px; width: 8px; z-index: 40; }
.sheet { display: contents; }
.face, .face.back { transform: none; border-radius: 8px; transform-origin: left center; transition: transform 1.05s cubic-bezier(0.22, 0.8, 0.22, 1), filter 0.45s, opacity 0.3s; box-shadow: rgba(0, 0, 0, 0.3) 10px 18px 45px; z-index: 1; will-change: transform; }
.face.turned { transform: rotateY(-180deg) scale(0.985); filter: brightness(0.78); pointer-events: none; }
.face.current { z-index: 20; pointer-events: auto; }
.face.upcoming { z-index: 10; pointer-events: none; }
.face::before { content: ""; position: absolute; inset: 0px; z-index: 30; pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent 18%, transparent 82%, rgba(58, 38, 23, 0.08)); opacity: 0; transition: opacity 0.5s; }
.face.current::before { opacity: 1; }
.page-arriving > :not(.page-number) { animation: 0.72s cubic-bezier(0.22, 0.8, 0.22, 1) 0s 1 normal both running content-arrive; }
@keyframes content-arrive { 
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.photo-copy, .portrait-copy { text-align: center; text-shadow: rgba(0, 0, 0, 0.95) 0px 2px 14px; }
.photo-page::after, .portrait-page::after { background: linear-gradient(0deg, rgba(15, 18, 14, 0.94) 0px, rgba(15, 18, 14, 0.42) 58%, rgba(15, 18, 14, 0.12) 100%); }
.photo-copy > span, .portrait-copy > span, .page-number.light { color: rgb(255, 255, 255); }
.photo-copy blockquote { color: rgb(255, 227, 173); text-shadow: rgb(0, 0, 0) 0px 2px 10px; }
.music { position: relative; z-index: 2; width: 190px; background: rgb(32, 39, 30); }
.music:disabled { opacity: 0.72; cursor: wait; }
.music-player { position: absolute; z-index: 1; right: 0px; top: 0px; width: 190px; height: 44px; overflow: hidden; border-radius: 99px; pointer-events: none; }
.music-player iframe { display: block; width: 190px; height: 107px; border: 0px; transform: translateY(-31px); }
.chapter-page, .date-page, .venue-page, .details-page, .finale-page { color: rgb(54, 39, 31); }
.chapter-page p, .date-page p, .venue-page p, .details-page p, .finale-page p { color: rgb(54, 39, 31); }
.venue-page strong, .details-page strong { color: rgb(36, 26, 20); }
.face h2 { color: rgb(54, 39, 31); }
.photo-page h2, .portrait-page h2 { color: rgb(255, 255, 255); }
.cover > img { object-fit: contain; background: rgb(236, 228, 212); }
.memory-frame { width: min(68%, 260px); margin: 0.15rem auto 0.65rem; position: relative; }
.memory-frame::before { content: ""; position: absolute; inset: -5px; border: 1px solid rgba(164, 122, 61, 0.5); transform: rotate(-2deg); }
.memory-frame img { display: block; width: 100%; height: clamp(105px, 19vh, 155px); object-fit: cover; object-position: center 38%; filter: saturate(0.78) sepia(0.08); }
.memory-frame figcaption { position: relative; margin-top: 0.55rem; color: rgb(117, 91, 67); font: italic 1rem "Cormorant Garamond"; }
.chapter-page p { margin: 0.23rem auto; line-height: 1.55; }
.venue-seal { display: flex; align-items: center; gap: 0.65rem; color: var(--gold); font: 500 1.5rem "Cormorant Garamond"; letter-spacing: 0.12em; }
.venue-seal i { display: block; width: 52px; height: 1px; background: var(--gold); position: relative; }
.venue-seal i::after { content: ""; position: absolute; width: 5px; height: 5px; border: 1px solid var(--gold); transform: rotate(45deg); left: 23px; top: -3px; background: var(--paper); }
.details { counter-reset: orientation 0; }
.details > div { position: relative; counter-increment: orientation 1; padding: 1rem 0.8rem; }
.details > div::before { content: "0" counter(orientation); display: block; color: rgba(164, 122, 61, 0.62); font: 500 1.4rem / 1 "Cormorant Garamond"; }
.detail-label { display: block; margin: 0.18rem 0px; color: rgb(122, 99, 76); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.details h3 { margin: 0.12rem 0px 0.3rem; }
.date-page::after { content: ""; position: absolute; width: min(70%, 390px); aspect-ratio: 1 / 1; border: 1px solid rgba(164, 122, 61, 0.13); border-radius: 50%; pointer-events: none; }
.date-page > * { position: relative; z-index: 1; }
.finale-page { background-image: linear-gradient(rgba(255, 253, 247, 0.91), rgba(255, 253, 247, 0.94)), url("assets/olhares.jpeg"); background-size: cover; background-position: center center; }
.venue-page { background-image: linear-gradient(150deg, rgba(255, 253, 247, 0.98) 0%, rgba(239, 225, 197, 0.86) 100%), url("assets/casal-inteiro.jpeg"); background-size: cover; background-position: center center; }
@media (max-width: 760px) {
  .book-wrap { width: min(94vw, 520px); height: min(74dvh, 152.28vw, 760px); }
  .book { left: 0px; width: 100%; }
  .book::after { display: block; }
  .face { overflow-y: auto; overscroll-behavior: contain; }
  .controls > div > span { color: rgb(255, 255, 255); text-shadow: rgb(0, 0, 0) 0px 1px 5px; }
  .memory-frame { width: min(72%, 230px); }
  .giant { font-size: clamp(5rem, 25vw, 7.5rem); margin: 1rem 0px; }
  .date-page { justify-content: flex-start; padding-top: clamp(1.4rem, 6vh, 3rem); }
  .date-page .countdown { margin: 0.7rem 0px; }
  .music { width: 158px; }
  .music-player { width: 158px; }
  .music-player iframe { width: 158px; }
}
@media (max-width: 390px) {
  .book-wrap { height: min(72dvh, 155.1vw, 660px); }
  .face { padding: 1.05rem; }
  .cover { padding: 0px; }
  .face p { font-size: 0.78rem; line-height: 1.5; }
  .memory-frame img { height: 96px; }
  .memory-frame figcaption { font-size: 0.82rem; }
  .details { gap: 0.35rem; }
  .details > div { padding: 0.58rem 0.45rem; }
  .details p { font-size: 0.64rem; }
  .actions { gap: 0.38rem; }
  .button { min-height: 42px; padding: 0.6rem 0.75rem; }
  .date-page { padding-top: 1.25rem; }
  .date-page .giant { font-size: 5rem; margin: 0.65rem 0px; }
  .date-page > b { font-size: 1.55rem; }
  .date-page p { margin: 0.45rem 0px; }
  .countdown div { padding: 0.4rem 0.12rem; }
}
@media (max-height: 650px) {
  .stage { padding-top: 4rem; padding-bottom: 5.6rem; }
  .book-wrap { height: min(68dvh, 520px); }
  .controls { bottom: max(.7rem,env(safe-area-inset-bottom)); }
  .face h2 { margin: 0.45rem 0px 0.75rem; }
  .date-page { padding-top: 0.8rem; }
  .date-page .giant { font-size: 4.6rem; margin: 0.45rem 0px; }
  .date-page .countdown { margin: 0.35rem 0px; }
  .gesture { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .face, .face::before { transition: none; }
  .page-arriving > :not(.page-number) { animation: auto ease 0s 1 normal none running none; }
}