/* One persistent viewport sky: stationary clouds, continuous travelling toys. */
body{isolation:isolate}
.continuous-sky{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:1;contain:layout paint}
.continuous-sky *{pointer-events:none}
.header,.motion-control,main>section>*,footer>*{position:relative;z-index:2}
.sky-cloud{position:absolute;z-index:2;color:#fffdf6;opacity:.65;transform:translate(-50%,-50%)}
.sky-actor{position:absolute;display:block;opacity:.38;animation-play-state:running}
.sky-back{z-index:1}.sky-front{z-index:3}
.sky-plane{width:126px;left:-150px;animation:fly-east var(--plane-duration) linear infinite;will-change:transform}
.sky-east{top:24%;animation-delay:-14s}
.sky-west{top:67%;animation-name:fly-west;animation-duration:calc(var(--plane-duration)*1.22);animation-delay:-23s;width:112px;opacity:.32}
.sky-west img{transform:scaleX(-1)}
.sky-balloon{width:62px;animation:float-toy var(--balloon-duration) ease-in-out infinite alternate;will-change:transform}
.sky-balloon-0{left:3%;top:16%;animation-delay:-7s}
.sky-balloon-1{left:72%;top:69%;width:48px;animation-duration:calc(var(--balloon-duration)*1.3);animation-delay:-19s}
@keyframes fly-east{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 300px))}}
@keyframes fly-west{from{transform:translateX(calc(100vw + 300px))}to{transform:translateX(0)}}
@keyframes float-toy{from{transform:translateY(calc(-1 * var(--float-distance)))}to{transform:translateY(var(--float-distance))}}
.continuous-sky[data-mode=paused] .sky-actor{animation-play-state:paused}
.continuous-sky[data-mode=static] .sky-actor{animation:none;will-change:auto;transform:none}
.continuous-sky[data-mode=static] .sky-east{left:85%;top:21%}
.continuous-sky[data-mode=static] .sky-west{left:2%;top:74%}
.motion-control{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:14px;margin:14px 6% 0;font-size:11px;color:var(--ink)}
.motion-control button{background:var(--ivory);border:1px solid #343b3544;border-radius:30px;padding:7px 13px;color:inherit;font:inherit;min-height:34px}
.motion-control button:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
@media(max-width:720px){.motion-control{justify-content:flex-start;font-size:10px}.sky-cloud{max-width:85px;opacity:.4}.sky-cloud:nth-child(even){display:none}.sky-actor{opacity:.2}.sky-plane{width:70px}.sky-west,.sky-balloon-0{display:none}.sky-balloon-1{left:87%;width:32px}}
@media(prefers-reduced-motion:reduce){.sky-actor{animation:none!important;will-change:auto}}
@media print{.continuous-sky,.motion-control{display:none}}

/* Canonical mobile refinement: compact navigation and comfortable controls. */
.nav-label-short{display:none}
.nav-rsvp{min-height:44px}
.motion-control button{min-height:44px}
@media(max-width:720px){input:not([type]),input[type=text],select{font-size:16px}.reset-button{min-height:44px}.radio-options label{min-height:44px}.continuous-sky[data-mode=static] .sky-east{left:auto;right:12px}}
@media(max-width:420px){.header .brand{font-size:21px;gap:7px}.header .nav-rsvp{font-size:12px;padding:10px 14px}.nav-label-full{display:none}.nav-label-short{display:inline}}
/* Keep touch targets comfortable on tablets too. */
.reset-button,.radio-options label{min-height:44px}

/* Mobile and touch motion runs at half the desktop pace. */
.continuous-sky[data-pace=slow] .sky-plane{animation-duration:calc(var(--plane-duration)*2)}
.continuous-sky[data-pace=slow] .sky-west{animation-duration:calc(var(--plane-duration)*2.44)}
.continuous-sky[data-pace=slow] .sky-balloon{animation-duration:calc(var(--balloon-duration)*2)}
.continuous-sky[data-pace=slow] .sky-balloon-1{animation-duration:calc(var(--balloon-duration)*2.6)}

/* WhatsApp entry: phone-first reading, no fixed navigation overlays. */
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
@media(max-width:720px){
 .header{height:72px}
 .hero{padding-top:24px}
 .hero .eyebrow{margin-bottom:12px}
 .hero h1{font-size:clamp(42px,10vw,58px);margin-bottom:18px}
 .hero .lede,.welcome-copy>p:last-child,.rsvp-intro>p,.directions-copy>p,.section-heading>p:last-child,.gift-card>p,.location-card p:not(.eyebrow),.faq details p{font-size:16px}
 .hero-actions{margin-top:18px;gap:12px}
 .text-link{display:inline-flex;align-items:center;min-height:44px;font-size:14px}
 .preview-note,.details-note,.gift-card small,.demo-note p{font-size:12px}
 .welcome{display:block}
 .welcome-art{float:right;width:80px;margin:0 0 16px 16px}
 .welcome-copy h2{font-size:32px}
 .event-details{clear:both;display:grid}
 .hero-art img{max-width:280px}
 .hero-art{max-width:320px}
 .art-caption{font-size:230px}
 form>label,form>div>label,legend,.radio-options label,.faq summary{font-size:16px}
}

@media(max-width:720px){.welcome-art{width:110px}.welcome-art img{width:110px}}

#map-preview{display:block;width:100%;height:280px;border:0;border-radius:6px;margin:22px 0 16px;background:var(--linen)}
.location-card:has(#map-preview:not([hidden])){border-radius:12px;padding:28px 20px}
/* Option 08: invitation first, one cohesive logistics section. */
.hero-selected{grid-template-columns:1fr;gap:24px;background:transparent}
.hero-selected .hero-copy{max-width:560px;margin:auto;width:100%}
.hero-selected h1{font-size:clamp(44px,8vw,64px);color:var(--navy)}
.hero-selected .hero-art{width:100%;max-width:340px;min-height:0;background:none}
.hero-selected .hero-art picture,.hero-selected .hero-art img{display:block;width:100%;max-width:none;aspect-ratio:1;height:auto}
.hero-selected .hero-art img{border-radius:10px}
.hero-when{font-weight:700;font-size:16px;color:var(--olive);margin-top:20px}
.logistics{display:grid;grid-template-columns:1fr;gap:30px;border-top:1px solid #343b3520}
.logistics-intro>p:not(.eyebrow){font-size:16px;max-width:520px}
.logistics .event-details{grid-template-columns:1fr;margin-top:25px;padding:0;border:0}
.logistics .event-details>div,.logistics .event-details>div:first-child{padding:16px 40px 16px 0;border:0;border-bottom:1px solid #343b3520}
.logistics .detail-icon{top:20px;right:5px}
.journey-train{width:min(100%,430px);height:auto;margin:30px auto 0}
.gifts-art{width:96px;margin:0 auto 20px;float:none}
.gifts-art img{width:100%;height:auto}
@media(min-width:721px){.hero-selected .hero-art{max-width:480px}.logistics{gap:48px}}
@media(min-width:1024px){.hero-selected{grid-template-columns:42fr 58fr;gap:40px}.hero-selected .hero-art{max-width:600px}.hero-selected h1{font-size:clamp(60px,5.8vw,84px)}.logistics{grid-template-columns:1fr 1fr;align-items:start}.journey-train{width:430px}.gifts-art{width:100px}}
@media(max-width:720px){.hero-selected .hero-copy{padding:0}.hero-selected{padding-top:24px}.journey-train{width:100%}.logistics .location-card{padding:24px 16px}.logistics h2{font-size:36px}}
.hero-selected{position:relative;z-index:2}

/* Motion controls belong in the footer, outside the invitation opening. */
footer .motion-control{justify-content:center;margin:22px 0 0;color:var(--ivory)}
footer .motion-control>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
footer .motion-control button{background:transparent;color:var(--ivory);border-color:#f7eedd66;min-height:44px}
footer .motion-control button:focus-visible{outline-color:var(--ivory)}
footer .motion-control:has(button[hidden]){display:none}
#guest-message{width:100%;min-height:100px;resize:vertical;border:1px solid #343b3544;border-radius:3px;padding:12px 13px;font:16px var(--sans);background:#fffdf9;color:var(--ink)}
#message-field{margin-top:20px}

.analytics-consent{position:relative;z-index:2;max-width:560px;margin:24px auto 0;font-size:13px}.analytics-consent button{min-height:44px;padding:10px 14px;margin:4px;border:1px solid #f7eedd66;border-radius:5px;background:transparent;color:inherit;font:inherit}.analytics-consent [role=status]{display:block;margin-top:10px}

/* Keep both travel directions visible on phones; start inside the viewport. */
@media(max-width:720px){
 .sky-west,.sky-balloon-0{display:block}
 .sky-actor{opacity:.32}
 .sky-east{top:22%;animation-delay:-30s}
 .sky-west{top:65%;width:64px;animation-delay:-52s}
 .sky-balloon-0{left:2%;top:38%;width:36px}
 .sky-balloon-1{left:88%;top:72%;width:32px;animation-direction:alternate-reverse}
 /* The former opaque, raised hero hid the entire fixed sky on phones. */
 .hero-selected{z-index:auto;background:transparent}
}
@media(max-width:720px){
 .continuous-sky[data-pace=slow] .sky-balloon{animation-duration:calc(var(--balloon-duration)*3);animation-delay:-12s}
 .continuous-sky[data-pace=slow] .sky-balloon-1{animation-duration:calc(var(--balloon-duration)*3.6);animation-delay:-22s}
}

/* Floating, nonmodal consent with room to scroll every control above it. */
.analytics-consent{position:fixed;z-index:30;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:auto;max-width:390px;margin:0 0 0 auto;padding:16px;border:1px solid var(--linen);border-radius:12px;background:#fffaf1;color:var(--ink);box-shadow:0 5px 24px #343b3526;font-size:13px;line-height:1.45;max-height:45dvh;overflow:auto}.analytics-consent p{margin:0 0 10px}.analytics-consent button{border-color:var(--olive);margin:0 8px 0 0;padding:8px 12px}.analytics-consent [data-consent=yes]{background:var(--navy);color:var(--ivory);border-color:var(--navy)}.analytics-consent [role=status]:empty{display:none}.analytics-preferences{background:transparent;border:0;color:inherit;text-decoration:underline;font:inherit;min-height:44px;padding:10px}.analytics-reserve{pointer-events:none}html{scroll-padding-bottom:var(--consent-space,0px)}#rsvp-form button,.header a{scroll-margin-bottom:var(--consent-space,0px)}

/* Consistent controls, including dynamically added guest names. */
#rsvp-form{min-width:0;padding:28px;border-radius:14px}
#rsvp-form label,#rsvp-form legend{font-size:15px;line-height:1.45;font-weight:700}
#rsvp-form input:not([type=radio]),#rsvp-form select,#rsvp-form textarea{display:block;width:100%;min-width:0;min-height:50px;padding:12px 14px;font:16px/1.5 var(--sans);color:var(--ink);background-color:#fffdf9;border:1px solid #7d805878;border-radius:8px;box-shadow:inset 0 1px 2px #343b3505}
#rsvp-form textarea{min-height:110px;resize:vertical}
#rsvp-form select{appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 7 5 5 5-5' fill='none' stroke='%23304B63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:20px}
#rsvp-form input::placeholder,#rsvp-form textarea::placeholder{color:#697064;opacity:1}
#rsvp-form input:focus-visible,#rsvp-form select:focus-visible,#rsvp-form textarea:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-color:var(--navy)}
#rsvp-form input:user-invalid,#rsvp-form textarea:user-invalid{border-color:var(--terracotta);box-shadow:0 0 0 1px var(--terracotta)}
#rsvp-form input:disabled,#rsvp-form select:disabled,#rsvp-form textarea:disabled{opacity:.65;cursor:wait;background-color:var(--linen)}
#rsvp-form fieldset{min-width:0;margin:24px 0}#rsvp-form legend{margin-bottom:12px}
#rsvp-form .radio-options{gap:10px}
#rsvp-form .radio-options label{min-height:52px;padding:12px;border:1px solid #7d805866;border-radius:9px;font-size:16px;font-weight:400;background:#fffdf9}
#rsvp-form .radio-options label:has(input:checked){border-color:var(--navy);background:#304b630c;box-shadow:inset 0 0 0 1px var(--navy)}
#rsvp-form .radio-options label:focus-within{outline:3px solid var(--navy);outline-offset:3px}
#rsvp-form .radio-options input{flex:0 0 20px;width:20px;height:20px;accent-color:var(--navy)}
#rsvp-form .radio-options label:has(input:disabled){opacity:.6;cursor:wait}
#additional-names>label{margin:20px 0 8px}#party-field>label,#message-field>label{margin-bottom:8px}
#rsvp-form .form-result:not(:empty){margin-top:20px;border-radius:0 8px 8px 0;line-height:1.55}
@media(max-width:720px){#rsvp-form{padding:20px}.rsvp{min-width:0}}

/* Sticky navigation stays above decoration, below the consent card. */
body{padding-top:0}
.header{position:sticky;top:0;z-index:20;margin:0;padding:env(safe-area-inset-top) max(6%,env(safe-area-inset-right)) 0 max(6%,env(safe-area-inset-left));height:auto;min-height:calc(88px + env(safe-area-inset-top));background:rgba(247,238,221,.98);box-shadow:0 3px 12px #343b3508}
.header nav a{min-height:44px;display:inline-flex;align-items:center}
html{scroll-padding-top:calc(var(--sticky-header-height,112px) + 16px)}
.skip{z-index:40}
@media(max-width:720px){.header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px;min-height:calc(110px + env(safe-area-inset-top));padding-bottom:4px}.header .brand{font-size:20px;gap:5px;white-space:nowrap}.header .brand-star{font-size:24px}.header .nav-rsvp{grid-column:2;grid-row:1;margin:8px 0;padding:9px 11px}.header nav{display:flex;grid-column:1/-1;grid-row:2;width:100%;justify-content:space-between;gap:8px;margin:0;font-size:13px}.header nav a{min-height:40px}.header .nav-label-full{display:none}.header .nav-label-short{display:inline}}

/* Hero secondary navigation and attendance-first form flow. */
.hero-secondary-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}.hero-secondary-actions .text-link{display:inline-flex;align-items:center;min-height:44px}#rsvp-form>fieldset:first-child{margin-top:0}#party-field{margin-bottom:20px}
@media(max-width:720px){.hero-secondary-actions{flex-basis:100%;gap:8px 22px}}