/* An optional album branch; the main cinematic journey is unchanged. */
html.life-album-open { overflow:hidden; }
#journey-stage:has(#couple-profiles:not([hidden])) { cursor:pointer; }
.couple-profile { pointer-events:auto; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.couple-profile .life-story-trigger { pointer-events:auto; min-height:44px; padding:3px 0; font:inherit; line-height:1.2; width:100%; position:relative; -webkit-tap-highlight-color:transparent; }
.couple-profile .life-story-trigger:focus-visible { outline:2px solid #e6d4ab; outline-offset:3px; }
/* Do not blur on return or disable keyboard outlines on touch-capable devices.
   Only hide this album's rings while the most recent input was a pointer. */
html[data-life-input="pointer"] .couple-profile .life-story-trigger:focus,
html[data-life-input="pointer"] #life-story-page button:focus { outline:none; }
.life-story-trigger::after { content:''; position:absolute; bottom:0; left:35%; right:35%; height:1px; background:#e6d4ab99; transition:background .2s; }
.couple-story-cue { display:block; margin-top:2px; font:500 11px/1.5 var(--reading-font); letter-spacing:.035em; color:#efd6a4; }
.life-story-trigger:hover::after { background:#fff6e4; }
#life-story-page { --album-direction:-1; position:fixed; inset:0; margin:auto; width:calc(100% - 20px); height:calc(100dvh - 28px); max-width:1020px; max-height:100%; border:1px solid #e6d4ab80; padding:0; background:#f5efdf; color:#273c31; color-scheme:light; overflow:hidden; box-shadow:0 18px 60px #07160f66; }
#life-story-page[data-person="groom"] { --album-direction:1; }
#life-story-page::backdrop { background:#101d1859; }
#life-story-page button:focus-visible { outline:2px solid #89784e; outline-offset:3px; }
#life-story-page[open] { display:flex; flex-direction:column; }
#life-story-page[open]:not([data-closing]) { animation:album-arrive 320ms cubic-bezier(.2,.65,.3,1) both; }
#life-story-page[data-closing] { animation:album-leave 220ms ease-in both; }
@keyframes album-arrive { from {opacity:0;transform:translateX(calc(var(--album-direction) * 18px)) scale(.985)} to {opacity:1;transform:none} }
@keyframes album-leave { to {opacity:0;transform:translateX(calc(var(--album-direction) * 12px)) scale(.99)} }
.life-scroll { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#a29470 #f5efdf; scroll-padding-top:24px; }
.life-top { position:relative; flex-shrink:0; z-index:3; padding:max(8px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); background:#243c2e; color:#fff5df; border-bottom:1px solid #d6c69c70; }
.life-top-row { max-width:1040px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.life-back { padding:8px 0; font:500 13px/1.4 var(--reading-font); letter-spacing:.015em; }
.life-book-label { font:italic 500 22px/1.2 var(--display-font); margin:0; }
.life-years { display:flex; justify-content:center; gap:clamp(3px,2vw,22px); max-width:580px; margin:auto; padding:5px 0 0; }
.life-years button { flex:1; min-width:0; padding:10px 3px; font:500 12px/1.4 var(--reading-font); letter-spacing:.06em; border-bottom:2px solid transparent; color:#c2cbbb; }
.life-years button[aria-current="step"] { color:#fff0cc; border-color:#d6bb80; }
.life-intro { max-width:820px; margin:auto; padding:32px 20px 30px; text-align:center; }
.life-kicker { font:500 10px/1.5 var(--reading-font); letter-spacing:.2em; text-transform:uppercase; color:#777555; margin:0 0 12px; }
.life-intro h2 { font:500 clamp(42px,8vw,70px)/1 var(--display-font); margin:0 0 14px; letter-spacing:-.025em; }
.life-intro h2 em { font-weight:500; }
.life-intro > p:last-child { margin:0; font:400 14px/1.7 var(--reading-font); color:#657061; }
.life-chapters { max-width:1000px; margin:0 auto; padding:0 28px; }
.life-chapter { position:relative; margin:0 0 66px; scroll-margin-top:140px; }
.life-picture { margin:0; position:relative; aspect-ratio:4/5; background:#e8dfc9; box-shadow:0 10px 28px #283a2814; }
.life-picture::before { content:''; position:absolute; inset:8px; border:1px solid #fff9e92e; pointer-events:none; z-index:1; }
.life-picture img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.life-picture img[data-failed] { opacity:0; }
.life-photo-error { position:absolute; inset:0; display:grid; place-content:center; padding:28px; text-align:center; font:italic 500 26px/1.3 var(--display-font); }
.life-photo-error[hidden] { display:none; }
.life-caption { display:grid; grid-template-columns:50px minmax(0,1fr); gap:18px; margin:22px 0 0; }
.life-year { margin:3px 0 0; font:500 13px/1.5 var(--reading-font); color:#89784e; border-top:1px solid #b6a47c; padding-top:9px; }
.life-caption h3 { font:500 clamp(29px,6vw,39px)/1.08 var(--display-font); letter-spacing:-.018em; margin:0 0 13px; text-wrap:balance; }
.life-caption p:not(.life-year) { margin:0; font:400 14px/1.8 var(--reading-font); color:#526353; }
.life-chapter:nth-child(even) .life-picture { margin-left:6%; }
.life-chapter:nth-child(odd) .life-picture { margin-right:6%; }
/* Different keepsake compositions, not five copies of the same photo card.
   No rotations, animated filters, added assets or altered photographs. */
.life-chapter[data-layout="print"] .life-picture { padding:10px 10px 36px; background:#fffcf3; aspect-ratio:auto; border:1px solid #cabe9f55; }
.life-chapter[data-layout="print"] img { aspect-ratio:4/5; height:auto; }
.life-print-date { position:absolute; inset:auto 16px 8px; font:italic 500 17px/1.2 var(--display-font); color:#7c725a; }
.life-chapter[data-layout="notebook"] .life-caption { padding:18px 0 6px; border-block:1px solid #b6a47c55; }
.life-chapter[data-layout="notebook"] .life-picture { aspect-ratio:3/4; box-shadow:none; }
.life-chapter[data-layout="journey"] .life-picture { margin-inline:-14px; box-shadow:none; }
.life-chapter[data-layout="meeting"] .life-picture { margin-inline:0; aspect-ratio:4/3; }
.life-chapter[data-layout="meeting"] img { object-position:center 40%; }
.life-chapter[data-layout="together"] .life-picture { margin-inline:0; aspect-ratio:1; box-shadow:none; }
.life-chapter[data-layout="together"] img { object-position:center 35%; }
.life-connection { margin-top:18px; padding:8px 0; border-bottom:1px solid #aa966b; font:500 12px/1.5 var(--reading-font); color:#3b513c; text-align:left; }
.life-outro { padding:12px 28px max(48px,env(safe-area-inset-bottom)); max-width:720px; margin:auto; text-align:center; }
.life-outro p { font:italic 500 34px/1.15 var(--display-font); margin:0 0 24px; }
.life-actions { display:flex; justify-content:center; gap:24px; flex-wrap:wrap; }
.life-actions button { font-size:13px; border-bottom:1px solid #b6a47c; padding:12px 0; }
.life-disclosure { font:400 11px/1.7 var(--reading-font)!important; color:#7b7d69; margin:32px auto 0!important; max-width:400px; }
@media(min-width:760px) {
 #life-story-page { width:calc(100% - 96px); height:calc(100dvh - 48px); }
 .life-intro { padding:55px 24px 60px; }
 .life-chapters { padding:0 48px; }
 .life-chapter { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center; gap:68px; margin-bottom:100px; }
 .life-chapter .life-picture { margin:0!important; }
 .life-caption { margin:0; grid-template-columns:48px minmax(0,1fr); }
 .life-chapter:nth-child(even) .life-picture { order:2; }
 .life-chapter:nth-child(even) .life-caption { order:1; }
 .life-caption p:not(.life-year) { font-size:15px; }
 .life-chapter[data-layout="meeting"], .life-chapter[data-layout="together"] { grid-template-columns:1fr; gap:28px; max-width:740px; margin-inline:auto; }
 .life-chapter[data-layout="meeting"] .life-picture, .life-chapter[data-layout="meeting"] .life-caption { order:initial; }
 .life-chapter[data-layout="together"] .life-picture { aspect-ratio:4/3; }
 .life-chapter[data-layout="meeting"] .life-caption, .life-chapter[data-layout="together"] .life-caption { max-width:580px; margin:auto; }
}
@media(prefers-reduced-motion:reduce) {
 #life-story-page[open], #life-story-page[data-closing] { animation:none!important; }
 .life-story-trigger::after { transition:none; }
}