/* Phone-only composition: preserve the approved desktop artwork and layout. */
@media(max-width:767px){
 :root{-webkit-text-size-adjust:100%;text-size-adjust:100%}
 .header,.film-ready .header{padding:max(16px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left))}
 .header .monogram{display:flex;flex-direction:column;justify-content:center;min-width:44px;min-height:44px}
 .music-button,.menu-toggle{min-height:44px;min-width:44px}
 .music-button{font-size:13px;padding:8px 13px}
 #navigation{top:calc(max(16px,env(safe-area-inset-top)) + 57px);max-height:calc(100svh - 100px);overflow-y:auto;overscroll-behavior:contain}
 #navigation a,#navigation button{display:flex;align-items:center;min-height:44px;width:100%;padding:10px 7px;font-size:16px!important}
 #navigation.is-open{gap:2px}
 .button,.film-ready .button{min-height:44px;font-size:12px;padding:12px 20px;touch-action:manipulation}
 .film-ready .hero-content{top:max(98px,14svh);left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));width:auto}
 .hero .scene-image{filter:contrast(.88) saturate(.88) brightness(1.04)}
 .hero-shade,.film-ready .hero-shade{background:linear-gradient(90deg,#03100914,transparent 55%)!important}
 .film-ready .hero-kicker{font-size:11px;line-height:1.4;letter-spacing:.24em}
 .film-ready .hero-content>.small-rule{margin:10px 0 14px}
 .film-ready .couple-names{font-size:clamp(34px,10.2vw,53px);line-height:1.03}
 .film-ready .hero-tagline{max-width:340px;font-size:11px;line-height:1.65;letter-spacing:.11em;margin:18px 0 12px!important}
 .film-ready .countdown-heading{font-size:24px;margin-bottom:10px}
 .film-ready .countdown{gap:7px;max-width:360px}
 .film-ready .time-box{width:calc((100% - 21px)/4);height:68px;min-height:68px}
 .film-ready .time-value{font-size:34px}
 .film-ready .time-label{font-size:14px}
 .film-ready .hero-date{flex-wrap:wrap;gap:8px;font-size:14px;letter-spacing:.02em;margin-top:17px}
 .film-ready .hero-note{display:block;font-size:clamp(30px,8vw,37px);bottom:max(12%,95px);right:max(24px,env(safe-area-inset-right));width:44%;max-width:180px}
 .film-ready .scroll-prompt{bottom:calc(55px + env(safe-area-inset-bottom));font-size:10px}
 .film-ready .scroll-prompt .mouse{margin-bottom:5px}
 .chapter-readout{left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));font-size:9px;letter-spacing:.11em;gap:9px}
 .chapter-track{width:45px}
 .film-ready .story-copy{left:28px;right:26px;width:auto;top:auto;bottom:12%;max-width:450px}
 .film-ready .story .eyebrow{font-size:13px;letter-spacing:.18em}
 .film-ready .story h2{font-size:clamp(34px,9vw,43px);line-height:1.07;margin:9px 0 17px}
 .film-ready .story h2 .script{font-size:1.23em;margin:6px 0 0 5px;line-height:1.05}
 .film-ready .story-copy>p:not(.eyebrow){font-size:18px;line-height:1.4;max-width:390px;margin-bottom:17px}
 .film-ready .story .small-rule{margin-bottom:10px}
 .film-ready .invitation-copy{top:max(96px,12%);left:27px;right:25px}
 .film-ready .invitation h2{font-size:38px;margin:9px 0 18px}
 .film-ready .invitation-copy>p:not(.eyebrow){font-size:17px;line-height:1.35;max-width:330px;margin-bottom:18px}
 .wedding-book{width:min(90vw,calc((100svh - 210px - env(safe-area-inset-top) - env(safe-area-inset-bottom))* .70),420px)}
 .book-face,.booklet-page,.printed-card{background-image:url('/assets/booklet/ornate-paper-phone.webp')!important}
 .book-face>.booklet-page{background:none!important;justify-content:safe center;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:12% 10% 10%;touch-action:pan-y}
 .book-face>.booklet-page>*{flex-shrink:0}
 .book-face .booklet-page h2{font-size:31px;line-height:1.06;margin:8px 0 12px}
 .book-face .booklet-page .eyebrow,.cover-content .eyebrow{font-size:13px;letter-spacing:.07em}
 .book-face .booklet-page>p:not(.eyebrow){font-size:17px;line-height:1.3;margin-bottom:10px}
 .book-face .booklet-page .book-names{font-size:29px!important}
 .cover-content{padding:12% 10% 10%}
 .cover-names{font-size:clamp(29px,8vw,36px);margin:18px 0}
 .cover-content .book-cross{margin-bottom:16px}
 .cover-content .small-rule{margin-bottom:15px}
 .cover-foot{font-size:14px;margin-top:17px}
 .book-face .family-page,.film-ready .book-face .family-page{justify-content:safe center;padding-top:14%;padding-bottom:14%}
 .book-face .family-page h2{font-size:29px;margin:6px 0 10px}
 .book-face .family-page>p:not(.eyebrow){font-size:16px;line-height:1.3;margin-bottom:8px}
 .book-face .book-detail{margin-top:5px;padding-top:6px}
 .book-face .book-detail h3{font-size:18px}
 .book-face .book-detail p{font-size:16px;line-height:1.3}
 .venue-detail{gap:9px;align-items:center}
 .venue-qr-link img{width:88px;height:88px}
 .venue-map,.book-face .family-page .venue-map{display:inline-flex;align-items:center;min-height:44px;font-size:16px;line-height:1.25;margin:0;touch-action:manipulation}
 .book-face .family-page .qr-caption{font-size:13px!important}
 .book-face .page-number{display:none}
 .booklet-controls{bottom:calc(54px + env(safe-area-inset-bottom))!important;gap:8px;max-width:calc(100% - 32px);white-space:normal}
 .booklet-controls button{min-height:44px;padding:10px 12px;font-size:15px;white-space:nowrap;touch-action:manipulation;flex-shrink:0}
 .book-page-label{font-size:14px;line-height:1.15;text-align:center;max-width:100px}
 .film-ready .blessing-content{padding-top:46svh!important;width:88%}
 .film-ready .blessing blockquote{font-size:27px;line-height:1.3}
 .ambient-paused .rose-petal{animation-play-state:paused}
 dialog{max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));width:calc(100% - 28px);overscroll-behavior:contain}
 .dialog-close{z-index:1}
 .invitation-paper,.simple-dialog{padding:46px 18px 25px}
 dialog h2{font-size:36px}dialog p:not(.eyebrow){font-size:18px}
 .toast{bottom:calc(16px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100% - 32px)}
 :root:not(.film-ready) .hero{min-height:max(790px,100svh);padding-top:max(125px,env(safe-area-inset-top));padding-bottom:185px}
 :root:not(.film-ready) .hero-note{color:#fff4dc;bottom:85px;width:44%;font-size:33px;text-shadow:0 2px 5px #001409b3}
 :root:not(.film-ready) .booklet-source{padding:38px 18px;gap:22px}
 :root:not(.film-ready) .booklet-page{padding:68px 38px 55px;min-height:570px}
}
@media(max-width:767px) and (min-height:600px) and (max-height:740px){
 .film-ready .hero-content{top:94px}
 .film-ready .hero-kicker{font-size:10px;line-height:1.25}
 .film-ready .hero-content>.small-rule{margin:8px 0 12px}
 .film-ready .couple-names{font-size:clamp(34px,9.7vw,43px)}
 .film-ready .hero-tagline{margin:13px 0 10px!important}
 .film-ready .countdown-heading{font-size:22px;margin-bottom:8px}
 .film-ready .time-box{height:62px;min-height:62px}
 .film-ready .hero-date{margin-top:14px}
 .film-ready .hero-note{bottom:95px;font-size:30px}
 .film-ready .scroll-prompt{left:25px;transform:none;text-align:left;bottom:62px}
 .film-ready .scroll-prompt .mouse{display:none}
 .film-ready .story-copy{bottom:11%;left:26px;right:24px}
 .film-ready .story h2{font-size:34px;margin-bottom:14px}
 .film-ready .story-copy>p:not(.eyebrow){font-size:17px;line-height:1.35;margin-bottom:14px}
 .book-face .booklet-page h2{font-size:28px}
 .book-face .booklet-page>p:not(.eyebrow){font-size:16px;margin-bottom:7px}
 .book-face .booklet-page .book-names{font-size:27px!important}
 .cover-names{font-size:29px;margin:14px 0}
 .cover-content .book-cross{margin-bottom:12px}
 .cover-content .small-rule{margin-bottom:12px}
 .cover-foot{margin-top:12px}
 .book-face .family-page h2{font-size:27px}
 .book-face .family-page .book-detail p{font-size:15px}
}
@media(max-width:359px){
 .header,.film-ready .header{padding-left:16px;padding-right:16px}
 .music-button{font-size:12px;padding:8px 10px}
 .film-ready .hero-content{left:20px;right:20px}
 .booklet-controls{gap:6px}.booklet-controls button{padding:10px;font-size:14px}.book-page-label{font-size:13px;max-width:90px}
 .venue-detail{flex-wrap:wrap;text-align:center}
 :root:not(.film-ready) .booklet-page{padding:62px 28px 45px}
}
@media(max-width:767px) and (min-height:600px) and (max-height:650px){
 .film-ready .hero-kicker{font-size:10px;line-height:1.2}
 .film-ready .couple-names{font-size:34px}
 .film-ready .hero-tagline{font-size:10px;letter-spacing:.06em}
 .film-ready .hero-note{bottom:80px;font-size:29px}
}

/* One composed opening on phones and portrait tablets. */
@media(max-width:1100px){
 :root.compact-ui,:root.compact-ui body{background:#261b13}
 /* In-app browsers can retain their launch dvh; the measured visual height fills the scene. */
 /* ScrollTrigger writes both height AND max-height when pinning. Override the
    cached maximum too, or a collapsing toolbar reveals the body below the art. */
 .film-ready.compact-ui .film-stage{height:100svh!important;height:var(--film-viewport-height,100dvh)!important;max-height:none!important}
 .film-ready.compact-ui .page>.pin-spacer{height:calc(var(--film-viewport-height,100dvh) + var(--film-pin-travel,0px))!important}
 .compact-ui .film-stage,.film-ready.compact-ui .film-stage>.hero{background:#261b13}
 .hero.compact-hero{--hero-copy-top:max(108px,calc(env(safe-area-inset-top) + 88px),13svh)}
 .hero.compact-hero .hero-content,.film-ready .hero.compact-hero .hero-content{left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));width:auto;max-width:580px;top:var(--hero-copy-top);text-shadow:0 2px 8px #071009b3}
 .hero.compact-hero .hero-primary{position:relative;isolation:isolate;max-width:580px}
 .hero.compact-hero .hero-primary:before,.hero.compact-hero .hero-countdown:before{content:'';position:absolute;inset:-30px -28px -28px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 30% 45%,#17150f94 0%,#17150f66 44%,#17150f00 78%)}
 .hero.compact-hero .hero-kicker{width:auto;max-width:320px;font-size:12px;line-height:1.5;letter-spacing:.16em}
 .hero.compact-hero .hero-kicker>span{display:block}
 .hero.compact-hero .hero-primary>.small-rule{margin:10px 0 16px}
 .hero.compact-hero .couple-names{font-size:clamp(38px,11vw,60px);font-weight:400;line-height:1.06;color:#fff4df;letter-spacing:-.03em}
 .hero.compact-hero .couple-names b{font-weight:400;color:#f2d09b}
 .hero.compact-hero .hero-note,.film-ready .hero.compact-hero .hero-note{position:relative;display:block;top:auto!important;bottom:auto!important;left:auto;right:auto;width:auto;max-width:none;margin:16px 0 0;padding:0;transform:none;background:none;text-align:left;font:italic 400 clamp(26px,7.2vw,36px)/1.2 Cormorant,Georgia,serif;color:#fff4df}
 .hero.compact-hero .hero-note span{display:inline;margin:0}
 .hero.compact-hero .hero-note span:before{content:' '}
 .hero.compact-hero .hero-note i{display:none}
 .hero.compact-hero .hero-date,.film-ready .hero.compact-hero .hero-date{display:flex;flex-wrap:wrap;gap:8px;font-size:16px;line-height:1.5;letter-spacing:.02em;margin-top:16px;color:#fff4df}
 .hero.compact-hero .hero-countdown,.film-ready .hero.compact-hero .hero-countdown{position:relative;isolation:isolate;top:auto;left:auto;right:auto;max-width:420px;margin-top:24px}
 .hero.compact-hero .countdown-heading,.film-ready .hero.compact-hero .countdown-heading{font-size:24px;line-height:1.2;letter-spacing:.015em;margin-bottom:10px;color:#fff4df}
 .hero.compact-hero .countdown{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;width:100%;max-width:360px}
 .hero.compact-hero .time-box,.film-ready .hero.compact-hero .time-box{width:auto;min-width:0;height:auto;min-height:0;padding:0 12px;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;align-items:center}
 .hero.compact-hero .time-box:first-child{padding-left:0}
 .hero.compact-hero .time-box:last-child{padding-right:0}
 .hero.compact-hero .time-box+.time-box{border-left:1px solid #f0d6ac70}
 .hero.compact-hero .time-value,.film-ready .hero.compact-hero .time-value{font-size:38px;font-weight:400;line-height:1.05;color:#fff4df;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1}
 .hero.compact-hero .time-label,.film-ready .hero.compact-hero .time-label{font-size:14px;line-height:1.4;letter-spacing:.025em;margin-top:5px;color:#f8e9d0}
 .hero.compact-hero #countdownMessage{font-size:16px;line-height:1.4}
 .film-ready .hero.compact-hero .hero-content{position:absolute}
 .film-ready .hero.compact-hero .scroll-prompt{font-size:12px;left:25px;right:auto;transform:none;text-align:left;bottom:calc(56px + env(safe-area-inset-bottom))}
 .film-ready .hero.compact-hero .scroll-prompt .mouse{display:none}
 .compact-ui .story-copy>.story-support,.film-ready.compact-ui .story-copy>.story-support{font-size:14px;line-height:1.4;letter-spacing:.025em;text-transform:none;max-width:350px;margin:0 0 18px!important;color:#665237;animation:none;text-shadow:none}
 :root:not(.film-ready) .hero.compact-hero{height:auto;min-height:100svh;padding:var(--hero-copy-top) max(24px,env(safe-area-inset-right)) 90px max(24px,env(safe-area-inset-left))}
 :root:not(.film-ready) .hero.compact-hero .hero-content{position:relative;top:auto;left:auto;right:auto;max-width:580px}
 :root:not(.film-ready) .hero.compact-hero .hero-primary{min-height:0}
 :root:not(.film-ready) .hero.compact-hero .scroll-prompt{display:none}
}
@media(min-width:768px) and (max-width:1100px) and (orientation:portrait){
 .hero.compact-hero{--hero-copy-top:max(142px,calc(env(safe-area-inset-top) + 98px),14svh)}
 .hero.compact-hero .hero-content,.film-ready .hero.compact-hero .hero-content{left:8%;right:8%;max-width:580px}
 .hero.compact-hero .scene-image,.film-ready .hero.compact-hero .scene-image{object-position:center;filter:contrast(.88) saturate(.88) brightness(1.04)}
 .hero.compact-hero .hero-shade,.film-ready .hero.compact-hero .hero-shade{background:linear-gradient(90deg,#261b1314,transparent 55%)!important}
 .hero.compact-hero .couple-names{font-size:clamp(60px,7.5vw,78px)}
 .hero.compact-hero .hero-kicker{font-size:14px;line-height:1.5}
 .hero.compact-hero .hero-note,.film-ready .hero.compact-hero .hero-note{font-size:38px}
 .hero.compact-hero .hero-date,.film-ready .hero.compact-hero .hero-date{font-size:18px}
 .hero.compact-hero .hero-countdown,.film-ready .hero.compact-hero .hero-countdown{margin-top:30px}
 .hero.compact-hero .countdown-heading,.film-ready .hero.compact-hero .countdown-heading{font-size:28px}
 .hero.compact-hero .time-value,.film-ready .hero.compact-hero .time-value{font-size:46px}
 .film-ready .hero.compact-hero .scroll-prompt{left:8%}
}
@media(max-width:359px){
 .hero.compact-hero .hero-content,.film-ready .hero.compact-hero .hero-content{left:20px;right:20px}
 .hero.compact-hero .couple-names{font-size:38px}
 .hero.compact-hero .hero-note,.film-ready .hero.compact-hero .hero-note{font-size:26px}
 .hero.compact-hero .time-box,.film-ready .hero.compact-hero .time-box{padding-left:8px;padding-right:8px}
 .hero.compact-hero .time-value,.film-ready .hero.compact-hero .time-value{font-size:34px}
}
@media(max-width:767px) and (max-height:650px){
 .hero.compact-hero{--hero-copy-top:max(100px,calc(env(safe-area-inset-top) + 78px))}
 .hero.compact-hero .hero-primary>.small-rule{margin:8px 0 12px}
 .hero.compact-hero .couple-names{font-size:clamp(38px,10.4vw,43px)}
 .hero.compact-hero .hero-note,.film-ready .hero.compact-hero .hero-note{margin-top:12px;font-size:26px}
 .hero.compact-hero .hero-date,.film-ready .hero.compact-hero .hero-date{margin-top:12px}
 .hero.compact-hero .hero-countdown,.film-ready .hero.compact-hero .hero-countdown{margin-top:20px}
}
@media(max-width:1100px){.compact-ui .chapter-readout{display:none}}
@media(max-width:767px) and (max-height:550px){
 .hero.compact-hero{--hero-copy-top:max(94px,calc(env(safe-area-inset-top) + 74px))}
 .hero.compact-hero .hero-kicker{line-height:1.3}
 .hero.compact-hero .hero-primary>.small-rule{margin:8px 0 10px}
 .hero.compact-hero .couple-names{font-size:36px}
 .hero.compact-hero .hero-note,.film-ready .hero.compact-hero .hero-note{font-size:24px}
 .hero.compact-hero .countdown-heading,.film-ready .hero.compact-hero .countdown-heading{font-size:22px}
 .hero.compact-hero .time-value,.film-ready .hero.compact-hero .time-value{font-size:32px}
}