.album-section{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px;padding-top:60px;padding-bottom:100px}
.album-section h2{margin-top:0}.album-section h2 em{color:var(--accent)}.album-section p{max-width:330px}.album-handnote{font:27px 'Caveat',cursive;color:var(--muted)}
.album-cover{position:relative;justify-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;width:300px;min-height:365px;padding:36px 28px 36px 42px;color:#f4ecd8;background:repeating-linear-gradient(0deg,#ffffff06 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#00000009 0 1px,transparent 1px 3px),#526459;border:0;border-left:14px solid #394d43;border-radius:5px 16px 16px 5px;box-shadow:5px 5px 0 #e6dfce,8px 8px 0 #c9c2b0,14px 20px 35px #0003;transform:rotate(-5deg);cursor:pointer;transition:transform .3s}
.album-cover:hover{transform:rotate(-2deg) translateY(-7px)}.album-cover-label{font:10px 'Geist',sans-serif;letter-spacing:2px}.album-cover-title{font:36px/1.1 'EB Garamond',serif}.album-cover-symbol{font-size:55px;color:#ebce86}.album-cover-open{font:22px 'Caveat',cursive}
.album-dialog{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:26px 5%;border:0;background:var(--paper);color:var(--ink);overflow:auto}.album-dialog::backdrop{background:#000a}.album-dialog[open]{display:flex;flex-direction:column;animation:album-enter .35s ease-out}.album-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px}.album-toolbar h2{font:28px 'EB Garamond',serif;margin:0}.album-close,.album-navigation button{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}.album-navigation button:disabled{opacity:.25;cursor:default}.album-stage{flex:1;min-height:0;display:grid;place-items:center;padding:30px 0;perspective:1600px}.album-spread{display:grid;grid-template-columns:1fr 1fr;width:min(100%,1000px);height:min(65vh,640px);background:#eee8db;border:8px solid #526459;border-radius:6px;box-shadow:0 18px 50px #0003;transform-style:preserve-3d}.album-page{margin:0;min-width:0;display:flex;flex-direction:column;gap:20px;padding:30px;background:linear-gradient(90deg,#00000009,transparent 8%,transparent 94%,#00000009),#f4efdf;color:#343631}.album-page+.album-page{border-left:1px solid #c8c1af}.album-photo-placeholder{flex:1;min-height:100px;display:grid;place-content:center;gap:12px;text-align:center;background:#e6e1d4;border:8px solid #fffaf0;box-shadow:0 3px 10px #0001;transform:rotate(-2deg);color:#777568}.album-page:nth-child(even) .album-photo-placeholder{transform:rotate(2deg)}.album-photo-placeholder span{font:38px 'EB Garamond',serif}.album-photo-placeholder small{font:12px 'Geist',sans-serif}.album-page figcaption{font:24px 'Caveat',cursive;text-align:center}.album-page-number{font:11px 'Geist',sans-serif;text-align:center;color:#777568}.album-navigation{display:flex;justify-content:center;align-items:center;gap:24px}.album-counter{font-size:13px;color:var(--muted);min-width:100px;text-align:center}.album-help{text-align:center;font-size:12px;margin:12px 0 0}.album-spread.turn-next{animation:album-next .4s ease-in-out}.album-spread.turn-prev{animation:album-prev .4s ease-in-out}@keyframes album-next{50%{transform:rotateY(-14deg) scale(.97)}}@keyframes album-prev{50%{transform:rotateY(14deg) scale(.97)}}@keyframes album-enter{from{opacity:0;transform:scale(.92) rotateX(5deg)}to{opacity:1;transform:none}}
@media(max-width:700px){.album-section{grid-template-columns:1fr;gap:40px;padding-top:40px;padding-bottom:70px}.album-cover{width:260px;min-height:320px}.album-dialog{padding:20px}.album-spread{grid-template-columns:1fr;height:min(65vh,580px)}.album-page{padding:22px}.album-toolbar h2{font-size:24px}}
@media(prefers-reduced-motion:reduce){.album-dialog[open],.album-spread.turn-next,.album-spread.turn-prev{animation:none}.album-cover{transition:none}}

/* Turn the paper around the binding, keeping the book itself still. */
.album-spread.turn-next,.album-spread.turn-prev{animation:none}
.album-page{backface-visibility:hidden;transform-style:preserve-3d}
.album-spread.turn-next .album-page:last-child{transform-origin:left center;animation:paper-forward .4s ease-in-out}
.album-spread.turn-prev .album-page:first-child{transform-origin:right center;animation:paper-back .4s ease-in-out}
@keyframes paper-forward{0%{transform:rotateY(0)}49%{transform:rotateY(-88deg)}50%{transform:rotateY(88deg)}100%{transform:rotateY(0)}}
@keyframes paper-back{0%{transform:rotateY(0)}49%{transform:rotateY(88deg)}50%{transform:rotateY(-88deg)}100%{transform:rotateY(0)}}
@media(prefers-reduced-motion:reduce){.album-spread .album-page{animation:none!important}}

/* A continuous two-sided paper turn; the stationary spread never animates. */
.album-spread{position:relative;perspective:2200px;isolation:isolate}
.album-spread>.album-page{cursor:pointer}
.album-sheet{position:absolute;top:0;bottom:0;width:50%;z-index:3;transform-style:preserve-3d;will-change:transform;pointer-events:none}
.album-sheet.forward{left:50%;transform-origin:left center}
.album-sheet.backward{left:0;transform-origin:right center}
.album-sheet .album-page{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:0;box-shadow:0 5px 20px #0002}
.album-sheet .sheet-front{transform:translateZ(.2px)}
.album-sheet .sheet-back{transform:rotateY(180deg) translateZ(.2px)}
.album-sheet .album-page:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#0002,transparent 22%,#fff1 75%,#0001)}
@media(max-width:700px){.album-sheet{width:100%}.album-sheet.forward,.album-sheet.backward{left:0}.album-sheet.backward{transform-origin:right center}}

/* Two photos per page, mounted like prints. Frames hug each photo, so nothing is cropped. */
.album-photos{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:18px;align-items:center}
.album-photo{height:100%;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center}
.album-photo img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;border:7px solid #fffaf0;border-bottom-width:12px;box-shadow:0 3px 12px #0002;background:#e6e1d4;transform:rotate(-1.6deg);user-select:none;-webkit-user-drag:none}
.album-photo+.album-photo img{transform:rotate(1.4deg)}
.album-page:nth-child(even) .album-photo img{transform:rotate(1.2deg)}
.album-page:nth-child(even) .album-photo+.album-photo img{transform:rotate(-1.5deg)}
.album-page figcaption{font-size:22px;line-height:1;color:#5d5f57}
.album-end{justify-content:center;align-items:center;text-align:center}
.album-end-note{font:30px/1.2 'Caveat',cursive;color:#5d5f57;margin:auto 0 0}
.album-end-mark{font-size:40px;color:#c7a85c;margin-bottom:auto}
@media(max-width:700px){.album-page{gap:14px}.album-photos{gap:12px}.album-photo img{border-width:5px;border-bottom-width:9px}}
@media(max-width:700px){.album-photos{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);align-items:stretch}.album-photo{justify-content:flex-start;padding-right:14%}.album-photo+.album-photo{justify-content:flex-end;padding-right:0;padding-left:14%}}
.album-spread{grid-template-rows:minmax(0,1fr)}.album-page{min-height:0;overflow:hidden}