/* Preserve the paper, photography and horizontal chapters at every viewport. */
:root { --journey-top: max(78px, calc(env(safe-area-inset-top) + 64px)); --journey-bottom: calc(100px + env(safe-area-inset-bottom)); }
.scroll-host, .experience, .scene { height: 100dvh; min-height: 100dvh; touch-action: pan-y pinch-zoom; }
.scene-content { min-height: 0; max-height: none; height: 100%; margin: 0; overflow: auto; overflow-x: hidden; overscroll-behavior-y: contain; touch-action: pan-y pinch-zoom; scrollbar-width: thin; scrollbar-color: #c8a96a66 transparent; align-content: safe center; grid-auto-rows: max-content; }
.scene-content > *, .ticket-main > * { min-width: 0; }
.scene-content :is(h1,h2,h3,p) { overflow-wrap: break-word; }
.topbar { padding-top: max(12px, env(safe-area-inset-top)); grid-template-columns: auto 1fr auto; gap: 12px; }
.brand-mark { order: 1; }
.menu-toggle { order: 3; justify-self: end; }
.immersive-toggle { order: 2; justify-self: end; width: 44px; height: 44px; border-radius: 50%; color: var(--olive-deep); background: #f7f1e6b8; border: 1px solid #4f5a3a20; backdrop-filter: blur(12px); font-size: 1.5rem; }
.immersive-toggle[hidden] { display: none; }
.scene-timeline { pointer-events: auto; bottom: calc(4px + env(safe-area-inset-bottom)); height: 28px; }
.scene-timebar { padding: 6px 0; background: transparent; text-align: left; min-height: 28px; }
.journey-controls { position: fixed; z-index: 72; left: 50%; bottom: calc(35px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 5px; border: 1px solid #c8a96a44; border-radius: 999px; background: #f7f1e6dd; backdrop-filter: blur(16px); box-shadow: 0 8px 30px #2024190c; }
.journey-controls button { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; color: var(--warm-ivory); background: var(--olive-deep); font-size: 1.3rem; }
.journey-controls button:disabled { color: #4f5a3a55; background: #4f5a3a0c; cursor: default; }
.journey-caption { min-width: 150px; display: grid; gap: 3px; text-align: center; }
#journeyLabel { font-size: .78rem; font-weight: 700; }
#journeyHint { font-size: .6rem; color: var(--ink-muted); }
.menu-open :is(.journey-controls,.scene-timeline) { visibility: hidden; }
.menu-overlay { padding: var(--journey-top) 20px 20px; }
.menu-panel { max-height: calc(100dvh - var(--journey-top) - 30px); overflow-y: auto; overscroll-behavior: contain; }
.rotate-hint, .mobile-cta { display: none !important; }
.intro-start { margin-top: 8px; }
.closing-copy { display: contents; }
.mobile-orientation-gate { display: none; }
.welcome-open .mobile-orientation-gate { display: grid; padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); }
.welcome-open :is(.topbar,.scroll-host,.scene-timeline,.journey-controls) { visibility: hidden; }
.mobile-gate-card { max-height: calc(100dvh - 40px); overflow-y: auto; }
.mobile-gate-title { font-size: clamp(2.5rem, 10vw, 3.8rem); line-height: .98; }
.mobile-gate-text { font-size: .9rem; font-weight: 400; }
.mobile-gate-phone { animation: welcome-phone 3s var(--ease-soft) infinite; }
.mobile-gate-arrow { top: 56px; right: 8px; }
.mobile-gate-screen::after { animation: welcome-swipe 3s var(--ease-soft) infinite; }
@keyframes welcome-phone { 0%,100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-7px) rotate(3deg); } }
@keyframes welcome-swipe { 0%,100% { transform: translateX(0); opacity: .8; } 50% { transform: translateX(-8px); opacity: .3; } }

@media (max-width: 1480px), (max-height: 860px) {
  .scene-content { padding: var(--journey-top) clamp(26px, 5vw, 76px) var(--journey-bottom); gap: clamp(20px, 3vw, 48px); }
  .intro-lockup { gap: 16px; place-content: safe center; }
  .scene-intro .monogram-seal { width: clamp(100px, 16vh, 155px); }
  .display-title { font-size: clamp(3.5rem, min(8vw, 11vh), 7.5rem); max-width: 850px; }
  .hero-layout { grid-template-columns: minmax(0, .86fr) minmax(0, 1fr); }
  .hero-copy { align-self: center; padding-bottom: 0; }
  .hero-title { font-size: clamp(3.4rem, min(6.8vw, 10vh), 7.2rem); line-height: .86; max-width: 100%; }
  .hero-subtitle { margin: 20px 0 24px; font-size: clamp(.95rem, 1.2vw, 1.2rem); line-height: 1.6; }
  .boarding-pass { width: 100%; min-height: 0; max-height: none; padding: clamp(24px, 3vw, 40px); --base-rotate: 1.5deg; }
  .ticket-main { grid-template-columns: minmax(0, 1fr) minmax(90px, .4fr); margin: clamp(24px, 5vh, 50px) 0 26px; gap: 16px; }
  .ticket-main h3 { font-size: clamp(2.2rem, 4vw, 4.6rem); line-height: .94; }
  .ticket-date { padding: 0 0 0 14px; border-top: 0; border-left: 1px solid #c8a96a66; }
  .ticket-date strong { font-size: clamp(1.1rem, 1.7vw, 1.6rem); }
  .ticket-route { margin: 14px 0 20px; }
  .ticket-topline,.ticket-footer,.ticket-route { font-size: .64rem; gap: 10px; }
  .section-title, .editorial-copy .section-title, .closing-layout .section-title { font-size: clamp(2.4rem, min(4.8vw, 7.2vh), 5.4rem); max-width: 100%; }
  .body-copy { font-size: clamp(.95rem, 1.1vw, 1.08rem); line-height: 1.7; }
  .story-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .photo-stack { min-height: clamp(290px, 56vh, 500px); align-self: center; }
  .photo-card { width: 68%; max-width: 340px; padding: 12px; }
  .photo-left { left: 2%; top: 0; }
  .photo-right { display: block; width: 54%; right: 1%; bottom: 0; }
  .photo-placeholder, .photo-placeholder.has-real-image img { min-height: 0; height: clamp(210px, 37vh, 360px); object-fit: cover; }
  .photo-right .photo-placeholder, .photo-right .photo-placeholder img { height: clamp(160px, 29vh, 280px); }
  .photo-card figcaption { font-size: .6rem; margin-top: 8px; }
  .editorial-copy { padding: 0 0 0 14px; align-self: center; }
  .editorial-copy .body-copy { max-height: none; overflow: visible; padding-right: 0; }
  .stamp { margin-top: 18px; }
  .date-layout { gap: 18px; place-content: safe center; }
  .date-large { margin: 0; font-size: clamp(2.7rem, min(5.2vw, 8vh), 5.3rem); }
  .countdown { width: min(660px, 100%); grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .count-card { min-height: clamp(86px, 16vh, 132px); }
  .count-card strong { font-size: clamp(2.5rem, 4vw, 4.2rem); }
  .schedule-layout { grid-template-columns: minmax(0, .55fr) minmax(0, 1fr) minmax(0, .65fr); gap: 22px; }
  .itinerary-card { min-height: 170px; padding: 24px; grid-template-columns: 36px minmax(0,1fr); grid-template-rows: auto auto auto; gap: 8px 14px; }
  .itinerary-card .line-icon { grid-column: 1; grid-row: 1 / 4; }
  .itinerary-card .ticket-label { grid-column: 2; grid-row: 1; font-size: 1.65rem; }
  .itinerary-card h3 { grid-column: 2; grid-row: 2; font-size: 1.5rem; }
  .itinerary-card p:last-child { grid-column: 2; grid-row: 3; font-size: .9rem; line-height: 1.6; }
  .dress-card { display: block; min-height: 190px; padding: 24px; }
  .dress-card .ticket-label { font-size: .65rem; line-height: 1.6; }
  .dress-card h3 { font-size: clamp(1.4rem, 2.2vw, 2.2rem); }
  .location-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, .85fr); }
  .map-card { height: auto; min-height: 0; width: 100%; max-width: none; padding: 18px; }
  .map-card.has-real-map img { height: min(51vh, 440px); min-height: 0; object-fit: contain; }
  .venue-name { font-size: clamp(2rem, 3.2vw, 3.5rem); }
  .rsvp-layout, .gifts-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }
  .private-pass { padding: 28px; max-height: none; overflow: visible; gap: 16px; }
  .private-pass h3 { font-size: clamp(1.6rem, 2.5vw, 2.3rem); }
  .private-pass::before { font-size: 2.7rem; opacity: .5; }
  .luggage-tag { min-height: 320px; max-height: none; overflow: visible; padding: 40px; }
  .luggage-tag h2 { font-size: clamp(3rem, 5vw, 5rem); }
  .gift-copy { display: block; }
  .closing-layout { grid-template-columns: minmax(0,.8fr) minmax(0,1fr); align-items: center; }
  .closing-photo { position: relative; left: auto; top: auto; width: 100%; opacity: .9; padding: 12px; }
  .closing-photo .photo-placeholder, .closing-photo .photo-placeholder img { height: min(45vh, 360px); min-height: 0; }
  .closing-copy { display: grid; justify-items: center; gap: 18px; width: 100%; min-width: 0; }
  .closing-copy .monogram-seal { width: clamp(80px, 12vh, 120px); }
  .closing-links { flex-wrap: wrap; }
  .scene-fg .foreground-branch { opacity: .32; right: -250px; }
}

@media (max-width: 1050px) and (min-width: 701px) {
  .ticket-main { grid-template-columns: 1fr; margin: 24px 0 18px; }
  .ticket-main h3 { font-size: clamp(2.3rem, 4.2vw, 3rem); }
  .ticket-main h3 .amp { display: inline; }
  .ticket-date { padding: 12px 0 0; border-left: 0; border-top: 1px solid #c8a96a55; }
  .ticket-date strong { max-width: none; font-size: 1.15rem; }
  .schedule-layout { grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); }
  .schedule-layout .section-heading { grid-column: 1 / -1; }
  .dress-card { min-height: 170px; }
  .hero-copy::before { display: none; }
}

@media (max-width: 700px) and (orientation: portrait) {
  :root { --journey-top: max(76px, calc(env(safe-area-inset-top) + 65px)); --journey-bottom: calc(108px + env(safe-area-inset-bottom)); }
  .scene-content { padding: var(--journey-top) 24px var(--journey-bottom); gap: 26px; align-content: safe center; }
  .hero-layout,.story-layout,.schedule-layout,.location-layout,.rsvp-layout,.gifts-layout,.closing-layout { grid-template-columns: minmax(0, 1fr); }
  .topbar { height: 66px; padding-inline: 16px; }
  .brand-mark,.menu-toggle,.immersive-toggle { width: 42px; height: 42px; }
  .brand-mark span { font-size: .7rem; }
  .scene-timeline { left: 22px; right: 22px; gap: 7px; height: 30px; }
  .scene-timebar { font-size: .5rem; opacity: .85; gap: 5px; }
  .journey-controls { width: calc(100% - 44px); max-width: 360px; justify-content: space-between; }
  .journey-caption { min-width: 0; }
  .intro-lockup { gap: 18px; }
  .scene-intro .display-title { font-size: clamp(3rem, 13vw, 5.2rem); line-height: .92; }
  .scene-intro .monogram-seal { width: 120px; }
  .monogram-seal span { white-space: nowrap; font-size: 1.7rem; }
  .intro-date { font-size: .75rem; }
  .hero-rings-intro { left: auto; right: -12px; top: 13vh; width: 38vw; opacity: .8; }
  .hero-copy { max-width: none; text-align: center; }
  .hero-title { font-size: clamp(3rem, 12.4vw, 4.9rem); max-width: 100%; }
  .hero-subtitle { max-width: 100%; margin: 14px 0 18px; font-size: .95rem; }
  .boarding-pass { width: 100%; max-width: 420px; justify-self: center; padding: 24px; --base-rotate: -1deg; }
  .ticket-main { grid-template-columns: minmax(0,1fr) minmax(76px,.45fr); margin: 24px 0 18px; gap: 12px; }
  .ticket-main h3 { font-size: clamp(2rem, 8vw, 3rem); }
  .ticket-date { border-top: 0; border-left: 1px solid #c8a96a55; padding: 0 0 0 12px; }
  .ticket-date strong { font-size: 1rem; }
  .ticket-topline,.ticket-footer,.ticket-route { font-size: .55rem; letter-spacing: .08em; }
  .flight-detail-card { display: block; left: auto; right: -35px; bottom: 15vh; width: 110px; height: 82px; opacity: .3; }
  .section-title,.editorial-copy .section-title,.closing-layout .section-title { font-size: clamp(2.3rem, 10vw, 4rem); line-height: .97; }
  .body-copy { font-size: .98rem; line-height: 1.75; }
  .eyebrow { font-size: .66rem; }
  .btn { min-height: 46px; font-size: .88rem; padding: 12px 20px; }
  .photo-stack { display: block; width: 100%; min-height: 270px; margin: 10px 0; }
  .photo-card { width: 64%; padding: 10px; }
  .photo-left { left: 0; top: 0; }
  .photo-right { display: block; width: 52%; right: 0; bottom: 0; }
  .photo-placeholder,.photo-placeholder.has-real-image img { height: 216px; min-height: 0; }
  .photo-right .photo-placeholder,.photo-right .photo-placeholder img { height: 165px; }
  .editorial-copy { padding: 0; }
  .editorial-copy .section-title { margin: 10px 0 16px; }
  .editorial-copy .body-copy { max-height: none; overflow: visible; }
  .date-layout { gap: 24px; }
  .date-layout::before { width: calc(100vw - 32px); height: calc(100dvh - 145px); }
  .date-large { font-size: clamp(2.5rem, 10vw, 4rem); }
  .countdown { grid-template-columns: repeat(2, minmax(0,1fr)); width: 100%; max-width: 340px; gap: 12px; }
  .count-card { min-height: 96px; }
  .count-card strong { font-size: 2.9rem; }
  .schedule-layout .section-heading { grid-column: auto; }
  .itinerary { grid-template-columns: 1fr; }
  .itinerary-card { min-height: 0; padding: 24px; }
  .itinerary-card .ticket-label { font-size: 1.9rem; }
  .itinerary-card h3 { font-size: 1.5rem; }
  .itinerary-card p:last-child { font-size: .9rem; }
  .dress-card { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 8px 16px; min-height: 120px; padding: 24px; }
  .dress-card .line-icon { grid-row: 1 / 3; }
  .dress-card .ticket-label { grid-column: 2; margin: 0; }
  .dress-card h3 { grid-column: 2; font-size: 1.7rem; margin: 0; }
  .map-card { width: 100%; max-width: 420px; padding: 12px; justify-self: center; }
  .map-card.has-real-map img { height: 245px; min-height: 0; object-fit: contain; }
  .map-card::before { left: 20px; top: 20px; font-size: .52rem; }
  .map-card::after { width: 60px; height: 60px; right: 20px; bottom: 20px; opacity: .4; }
  .location-copy { text-align: center; }
  .location-copy .btn { margin-top: 20px; }
  .venue-name { font-size: 2rem; margin: 16px 0 10px; }
  .rsvp-copy .section-title { margin: 10px 0 16px; }
  .private-pass { width: 100%; max-width: 440px; justify-self: center; padding: 24px; gap: 16px; }
  .private-pass h3 { font-size: 1.9rem; }
  .private-pass p { font-size: .92rem; }
  .private-pass .pass-note { font-size: .78rem; }
  .private-pass::before { font-size: 2rem; }
  .luggage-tag { width: 100%; max-width: 440px; min-height: 270px; padding: 36px 28px; justify-self: center; --base-rotate: -1deg; }
  .luggage-tag h2 { font-size: 3.3rem; }
  .luggage-tag .envelope-label { font-size: 2rem; line-height: 1.2; }
  .gift-copy { display: block; text-align: center; }
  .gift-copy .section-title { font-size: 2.7rem; margin-top: 12px; }
  .closing-photo { width: min(75%, 300px); justify-self: center; }
  .closing-photo .photo-placeholder,.closing-photo .photo-placeholder img { height: 195px; min-height: 0; }
  .closing-copy { gap: 16px; }
  .closing-copy .monogram-seal { width: 82px; }
  .closing-links { font-size: .82rem; }
  .design-credit { font-size: .68rem; }
  .flight-transition { width: 80px; top: 24%; }
  .leaf,.flower { opacity: .4; }
  .scene-fg .foreground-branch { right: -400px; opacity: .16; }
  .scene-hero .leaf-c { left: -175px; width: 300px; opacity: .3; }
  .scene-hero .flower-champagne { right: -170px; bottom: -120px; opacity: .28; }
}

@media (max-height: 520px) and (orientation: landscape) {
  :root { --journey-top: max(62px, calc(env(safe-area-inset-top) + 48px)); --journey-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .scene-content { padding-inline: 26px; gap: 20px; }
  .intro-lockup { gap: 10px; }
  .scene-intro .monogram-seal { width: 75px; }
  .display-title { font-size: 3rem; }
  .hero-title { font-size: clamp(2.7rem, 6.5vw, 4rem); }
  .hero-layout,.story-layout,.location-layout,.rsvp-layout,.gifts-layout { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .hero-subtitle { font-size: .88rem; margin: 12px 0; }
  .boarding-pass { padding: 22px; }
  .ticket-main { grid-template-columns: 1fr; margin: 16px 0; gap: 10px; }
  .ticket-main h3 { font-size: 2rem; }
  .ticket-main h3 .amp { display: inline; }
  .ticket-date { border: 0; padding: 0; }
  .ticket-date strong { font-size: 1rem; }
  .ticket-route { margin: 10px 0; }
  .section-title,.editorial-copy .section-title,.closing-layout .section-title { font-size: 2.5rem; }
  .photo-stack { min-height: 280px; }
  .photo-placeholder,.photo-placeholder.has-real-image img { height: 215px; }
  .photo-right .photo-placeholder,.photo-right .photo-placeholder img { height: 160px; }
  .body-copy { font-size: .9rem; line-height: 1.6; }
  .private-pass { padding: 22px; gap: 14px; }
  .private-pass h3 { font-size: 1.7rem; }
  .private-pass p { font-size: .9rem; }
  .private-pass .btn { min-height: 44px; }
  .map-card.has-real-map img { height: 240px; }
  .luggage-tag { min-height: 240px; padding: 28px; }
  .luggage-tag h2 { font-size: 3rem; }
  .mobile-gate-card { display: block; width: min(520px,100%); padding: 20px; text-align: center; }
  .mobile-gate-animation { display: none; }
  .mobile-gate-title { font-size: 2.5rem; }
  .mobile-gate-text { max-width: none; margin: 12px 0 16px; font-size: .85rem; }
}
@media (max-width: 360px) and (orientation: portrait) {
  .scene-content { padding-inline: 20px; }
  .boarding-pass { padding: 20px; }
  .ticket-main { grid-template-columns: 1fr; }
  .ticket-main h3 .amp { display: inline; }
  .ticket-date { border-left: 0; border-top: 1px solid #c8a96a55; padding: 12px 0 0; }
  .mobile-gate-card { padding: 24px 20px; }
  .mobile-gate-animation { width: 150px; height: 120px; margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}