@font-face{font-family:Creepster;src:url('/assets/creepster.ttf') format('truetype');font-display:swap}@font-face{font-family:Manrope;src:url('/assets/manrope.ttf') format('truetype');font-display:swap}
:root{color-scheme:dark;--night:#020b15;--ice:#b7f5ff;--cyan:#30dcf4;--body:Manrope,Arial,sans-serif}*{box-sizing:border-box}html{background:var(--night);scroll-behavior:auto}body{margin:0;color:#effbff;font-family:var(--body);font-size:16px}button,input,a{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button,input{font:inherit}[hidden]{display:none!important}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{cursor:wait;opacity:.7}:focus-visible{outline:3px solid #ffac4d;outline-offset:6px}h1:focus{outline:0}.page{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;background:var(--night)}.scene-art,.atmosphere{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.scene-art{z-index:-2;background-size:100% 100%;background-repeat:no-repeat}.atmosphere{z-index:-1}.landing{min-height:max(100svh,66.6667vw)}.landing .scene-art{background-image:url('/assets/landing-desktop.webp')}.hero-heading{position:absolute;top:13.8%;left:20%;width:60%;text-align:center;color:#00101a}.presenter,.anniversary{font-family:Georgia,serif;font-weight:700;letter-spacing:.24em;font-size:clamp(14px,1.55vw,28px);margin:0}.hero-heading h1{font-family:Creepster,Impact,fantasy;font-weight:400;font-size:clamp(90px,12.6vw,230px);line-height:1.12;letter-spacing:-.025em;margin:.03em 0 .045em;text-shadow:0 2px 12px #71e5ff55}.anniversary{letter-spacing:.32em}.countdown{position:absolute;top:44.5%;left:50%;transform:translateX(-50%);display:flex;gap:clamp(12px,2vw,30px)}.countdown>div{width:clamp(85px,8.3vw,150px);padding:clamp(9px,1vw,18px) 5px 12px;background:linear-gradient(145deg,#073450df,#031426ef);border:1px solid #53daff65;box-shadow:inset 0 0 22px #338fc060,0 0 15px #04bcfa45;border-radius:9px;text-align:center}.countdown strong{display:block;font-family:Georgia,serif;font-size:clamp(37px,4vw,72px);line-height:1;font-weight:400;font-variant-numeric:tabular-nums}.countdown span{display:block;text-transform:uppercase;font-family:Georgia,serif;font-size:clamp(12px,.85vw,16px);letter-spacing:.12em;margin-top:7px}.invitation{position:absolute;top:85.4%;left:10%;width:80%;text-align:center;font-family:Georgia,serif;font-size:clamp(16px,1.55vw,28px);letter-spacing:.1em}.invitation p{margin:0 0 12px;text-shadow:0 2px 5px #000}.button{display:flex;align-items:center;justify-content:center;min-height:52px;border:1.5px solid var(--cyan);background:linear-gradient(180deg,#071f32d9,#010910f2);box-shadow:0 0 13px #00c4fa50,inset 0 0 16px #18b3dc28;color:var(--ice);font-weight:700;letter-spacing:.15em;text-transform:uppercase;transition:background .2s,box-shadow .2s}.button:hover{background:#093149;box-shadow:0 0 22px #00c4fa70}.rsvp-link{border-radius:99px;width:clamp(220px,22vw,360px);margin:0 auto 13px;font-family:Georgia,serif}.date{font-size:.9em}.back{position:absolute;left:clamp(18px,2.5vw,48px);top:20px;z-index:5;text-transform:uppercase;display:flex;align-items:center;gap:8px;font-size:14px;min-height:44px}.back span{font-size:30px}.rsvp{min-height:max(100svh,56.28vw)}.rsvp .scene-art{background-image:url('/assets/house-desktop.webp')}.rsvp-content{position:relative;width:43%;margin:10.5vw 3.5% 4vw auto}.rsvp h1{font-size:clamp(42px,5.5vw,92px);letter-spacing:.2em;font-weight:700;text-align:center;line-height:1;margin:0 0 16px}.event-details{text-align:center;line-height:1.65;font-size:clamp(16px,1.47vw,25px);margin-bottom:24px}.event-details p{margin:0}form{display:grid;gap:18px}.field{display:grid;gap:8px}label{font-size:clamp(16px,1.4vw,22px)}input:not([type=checkbox]){width:100%;min-height:54px;background:#02121eda;border:1.5px solid var(--cyan);border-radius:7px;color:#fff;padding:12px 15px;outline-offset:3px}.checkbox{display:flex;align-items:center;gap:13px;min-height:40px;cursor:pointer}.checkbox input{appearance:none;width:29px;height:29px;flex:none;border:1.5px solid var(--cyan);border-radius:5px;background:#041e2c;display:grid;place-content:center;margin:0}.checkbox input:checked:after{content:'✓';font-size:24px;color:var(--ice);line-height:1}.checkbox input:checked{box-shadow:0 0 12px #00cbff70}.send{border-radius:7px;min-height:58px;font-size:clamp(17px,1.6vw,26px);margin-top:2px}.form-status{margin:0;line-height:1.5;font-size:14px;text-align:center;color:#ffe0b5;min-height:21px}.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.confirmed{min-height:max(100svh,56.28vw)}.confirmed .scene-art{background-image:url('/assets/confirmation-desktop.webp')}.confirmation-content{position:relative;margin:12vw 5% 6vw auto;width:41%;text-align:center;font-family:Georgia,serif;animation:reveal 1.4s ease both}.received{color:#85e7fa;letter-spacing:.3em;font-size:clamp(14px,1.45vw,24px);margin:0 0 22px}.confirmation-content h1{font-family:Georgia,serif;text-transform:uppercase;font-size:clamp(38px,4.4vw,85px);font-weight:700;line-height:1.1;margin:0;color:#d7f7ff;text-shadow:0 0 20px #29b7ff70}.confirmation-content h1 span{font-family:Creepster,Impact,fantasy;font-weight:400;font-size:1.35em;letter-spacing:.02em}.saved{font-size:clamp(19px,2vw,34px);margin:28px 0}.confirmation-details{font-size:clamp(16px,1.55vw,27px);line-height:1.6;margin-top:32px}.skip{position:fixed;top:-100px;left:15px;z-index:30;padding:15px;background:#001725}.skip:focus{top:15px}.noscript{position:fixed;bottom:0;background:#031526;padding:20px;width:100%;z-index:30;text-align:center}@keyframes reveal{from{opacity:0}to{opacity:1}}
@media(max-width:700px){.landing{min-height:max(100svh,175vw)}.landing .scene-art{background-image:url('/assets/landing-mobile.webp')}.hero-heading{top:16.5%;left:8%;width:84%}.presenter{font-size:clamp(12px,2.75vw,20px);letter-spacing:.14em}.hero-heading h1{font-size:17.3vw;line-height:1.3;margin:.08em 0 .1em}.anniversary{font-size:clamp(12px,2.7vw,19px);letter-spacing:.2em}.countdown{top:38%;width:68%;gap:9px;justify-content:center}.countdown>div{width:25%;min-width:0;border-radius:7px;padding:9px 2px 8px}.countdown strong{font-size:clamp(28px,6.8vw,45px)}.countdown span{font-size:clamp(10px,2.1vw,14px);letter-spacing:.025em;margin-top:5px}.invitation{top:82%;left:4%;width:92%;font-size:clamp(14px,3.3vw,21px);letter-spacing:.03em}.invitation p{margin-bottom:14px}.rsvp-link{width:60%;min-height:48px;font-size:20px;letter-spacing:.22em}.date{font-size:16px;letter-spacing:.09em}.back{left:18px;top:10px}.rsvp{min-height:100svh;padding:94vw 22px 28px}.rsvp .scene-art{background-image:url('/assets/house-mobile.webp');background-size:100% auto;background-color:#01111e}.rsvp-content{width:100%;margin:0;background:transparent;padding-top:6px}.rsvp h1{font-size:42px;letter-spacing:.17em;margin-bottom:16px}.event-details{font-size:16px;line-height:1.65;margin-bottom:24px}form{gap:18px}label{font-size:16px}.send{font-size:19px;min-height:56px}.confirmed{min-height:max(100svh,175vw)}.confirmed .scene-art{background-image:url('/assets/confirmation-mobile.webp')}.confirmation-content{position:relative;width:92%;margin:0 4%;padding:104vw 0 55px}.received{font-size:14px;letter-spacing:.22em;margin-bottom:16px}.confirmation-content h1{font-size:9.4vw;line-height:1.12}.confirmation-content h1 span{font-size:1.4em}.saved{font-size:19px;margin:20px 0}.confirmation-details{font-size:17px;margin-top:24px;line-height:1.6}.form-status{font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}body.motion-paused .confirmation-content{animation:none}@media(max-width:350px){.event-details{font-size:15px}.countdown{width:82%}.presenter{letter-spacing:.1em}}

/* Retain the approved, bespoke lettering instead of substituting a font. */
.lettering-art{position:absolute;inset:0;pointer-events:none;background-size:100% 100%;background-repeat:no-repeat;z-index:1}
.landing .lettering-art{background-image:url('/assets/landing-lettering-desktop.webp');clip-path:inset(12% 22% 56.5% 22%)}
.hero-heading{opacity:0;pointer-events:none}.countdown,.invitation{z-index:2}
.confirmed .lettering-art{background-image:url('/assets/confirmation-lettering-desktop.webp');clip-path:inset(19% 5% 50% 54%);animation:reveal 1.4s ease both}
.confirmation-content .received,.confirmation-content h1{opacity:0}
.rsvp-content{margin-top:12.5vw}.rsvp h1{font-size:clamp(42px,5.25vw,88px)}
@media(max-width:700px){
 .landing .lettering-art{background-image:url('/assets/landing-lettering-mobile.webp');clip-path:inset(15% 10% 64% 10%)}
 .confirmed .lettering-art{background-image:url('/assets/confirmation-lettering-mobile.webp');clip-path:inset(58.5% 10% 25.5% 10%)}
 .rsvp-content{margin-top:0}.rsvp h1{font-size:42px}
}

.pumpkin-light{position:absolute;pointer-events:none;left:41%;top:68%;width:18%;height:16%;background:radial-gradient(ellipse at 31% 28%,#ff9a2244,transparent 20%),radial-gradient(ellipse at 70% 28%,#ff9a2244,transparent 20%),radial-gradient(ellipse at 50% 70%,#ff7c1944,transparent 46%);mix-blend-mode:screen;animation:candlelight 3.7s linear infinite;z-index:0}
@keyframes candlelight{0%,100%{opacity:.55}7%{opacity:.95}12%{opacity:.45}19%{opacity:.8}34%{opacity:.48}42%{opacity:1}47%{opacity:.7}60%{opacity:.95}71%{opacity:.5}79%{opacity:.85}92%{opacity:.65}}
.motion-paused .pumpkin-light{animation:none;opacity:.4}
@media(max-width:700px){.pumpkin-light{left:23%;top:64.5%;width:36%;height:12%}}

.bat-flight{position:absolute;left:-12%;top:16%;width:clamp(28px,4vw,64px);aspect-ratio:1;pointer-events:none;animation:bat-crossing 29s 5s linear infinite;opacity:0;z-index:0}.bat-flight>div{width:100%;height:100%;background:url('/assets/bat-flight.webp') 0 0/300% 100% no-repeat;animation:wingbeat .58s steps(1) infinite}
@keyframes wingbeat{0%,100%{background-position:0 0}25%,75%{background-position:50% 0}50%{background-position:100% 0}}
@keyframes bat-crossing{0%{opacity:0;transform:translate(0,12px) scale(.65)}2%{opacity:.8}16%{opacity:.8;transform:translate(115vw,-30px) scale(.9)}17%,100%{opacity:0;transform:translate(120vw,-30px) scale(.9)}}
.motion-paused .bat-flight,.motion-paused .bat-flight>div{animation-play-state:paused}.motion-paused .lettering-art{animation:none}
@media(prefers-reduced-motion:reduce){.bat-flight{display:none}}
/* Confirmation typography sits in the same clear areas as the approved art. */
.confirmation-content{position:absolute;inset:0;width:100%;margin:0;padding:0;pointer-events:none}
.confirmation-content .saved{position:absolute;top:51.8%;left:55%;width:40%;margin:0}
.confirmation-content .confirmation-details{position:absolute;top:59.6%;left:55%;width:40%;margin:0}
@media(max-width:700px){.confirmation-content .saved{top:75%;left:4%;width:92%;font-size:clamp(16px,4.3vw,24px)}.confirmation-content .confirmation-details{top:80%;left:4%;width:92%;font-size:clamp(15px,4.1vw,23px)}}

/* Lamp fallback for devices without WebGL. The sign itself stays still. */
.sign-flicker{position:absolute;left:20.6%;top:52.3%;width:15.4%;height:12.2%;pointer-events:none;background:radial-gradient(ellipse,#010712 18%,transparent 70%);opacity:0;animation:sign-lamp 7.3s linear infinite;z-index:0}
.webgl-ready .sign-flicker{display:none}
@keyframes sign-lamp{0%,15.7%,25.4%,32.1%,39.1%,100%{opacity:0}17.5%,21.9%{opacity:.65}33.6%,35.9%{opacity:.48}}
.motion-paused .sign-flicker{animation:none;opacity:0}
@media(max-width:700px){.sign-flicker{left:34.4%;top:51.275vw;width:26%;height:18.2vw}}

/* Keep hover opaque and steady above the animated scene. */
.button{position:relative;isolation:isolate;background:#04121f;transition:color .18s ease,border-color .18s ease;box-shadow:0 0 13px #00c4fa50,inset 0 0 16px #18b3dc28}
.button:hover{background:#04121f;border-color:#c7f8ff;color:#fff;box-shadow:0 0 13px #00c4fa50,inset 0 0 16px #18b3dc28}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rsvp-title-desktop{display:block;width:100%;height:auto}.rsvp-title-mobile{display:none}
@media(max-width:700px){.rsvp-title-desktop{display:none}.rsvp-title-mobile{display:block;width:90%;height:auto;margin-inline:auto}}
/* Match the approved landing palette and steady cyan button halo. */
.landing .scene-art,.landing .atmosphere,.landing .lettering-art{filter:saturate(1.14) brightness(1.045)}
.landing .rsvp-link,.landing .rsvp-link:hover{border:2px solid #03dcff;background:#020e1c;color:#f0fcff;box-shadow:0 0 7px #00d5ffbd,0 0 23px #00b7ff75,inset 0 0 18px #009eff3b;transition:color .18s ease,border-color .18s ease}
.landing .rsvp-link:hover{border-color:#a8f5ff;color:#fff}
/* Reveal the clean moon beneath only the redundant upper divider. */
.landing .lettering-art{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Crect width='1000' height='1000' fill='white'/%3E%3Crect x='420' y='173' width='160' height='19' fill='black'/%3E%3C/svg%3E");mask-mode:luminance;mask-size:100% 100%;mask-repeat:no-repeat}
@media(max-width:700px){.landing .lettering-art{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Crect width='1000' height='1000' fill='white'/%3E%3Crect x='360' y='186' width='280' height='13' fill='black'/%3E%3C/svg%3E")}}

/* Only lettering is rendered here: the moon lives solely in the scene artwork. */
.landing .lettering-art{background-image:none!important;clip-path:none;mask-image:none!important;filter:none}
.landing-type svg{position:absolute;inset:0;width:100%;height:100%}.landing-type-mobile{display:none}
@media(max-width:700px){.landing-type-desktop{display:none}.landing-type-mobile{display:block}}

/* Let the house and mist continue naturally behind the invitation details. */
.rsvp-content{background:transparent}.event-details{text-shadow:0 2px 5px #000,0 0 12px #00101dcc}

/* One-screen landing composition. Retain a readable fallback for very short screens. */
.landing{height:100svh;min-height:560px;width:100%;margin-inline:auto}
.landing .invitation{top:auto;bottom:max(2.5svh,env(safe-area-inset-bottom));font-size:clamp(13px,2.15svh,22px);line-height:1.3;letter-spacing:.08em}
.landing .invitation p{margin:0 0 8px}
.landing .invitation .date{margin:0;font-size:.95em}
.landing .rsvp-link,.landing .rsvp-link:hover{min-height:44px;height:6svh;max-height:58px;margin-bottom:8px;border:2px solid #28edff;box-shadow:0 0 5px #a2faff,0 0 13px #00dfff,0 0 30px #00baffb3,0 0 48px #008dff66,inset 0 0 19px #00c8ff55}
.landing .countdown>div{width:clamp(66px,8.3vw,12svh);padding:8px 4px}
.landing .countdown strong{font-size:clamp(28px,4vw,5.7svh)}
.landing .countdown span{font-size:clamp(10px,.85vw,1.6svh)}
@media(max-width:700px){
 .landing{width:min(100%,65svh)}
 .landing .invitation{bottom:max(5svh,env(safe-area-inset-bottom));left:3%;width:94%;font-size:clamp(13px,3.3vw,20px);letter-spacing:.025em}
 .landing .rsvp-link{width:62%;font-size:clamp(18px,4.6vw,23px)}
 .landing .countdown{top:37.5%;width:76%;gap:8px}
 .landing .countdown>div{width:25%;padding:8px 2px}
 .landing .countdown strong{font-size:clamp(26px,6.8vw,42px)}
 .landing .countdown span{font-size:clamp(9px,2.1vw,13px)}
}

/* Match the landing button glow while keeping keyboard focus clearly visible. */
.rsvp input:not([type=checkbox]):focus,.rsvp input:not([type=checkbox]):focus-visible{outline:2px solid #28edff;outline-offset:2px;border-color:#a2faff;box-shadow:0 0 5px #a2faff,0 0 13px #00dfff,0 0 30px #00baff80,inset 0 0 19px #00c8ff33;caret-color:#a2faff}
.rsvp :focus-visible{outline-color:#28edff}
.field-error{margin:0;font-size:14px;line-height:1.4;color:#d3f6ff}

/* Stronger candle fallback; WebGL lights the actual warm pixels when available. */
.pumpkin-light{background:radial-gradient(ellipse at 31% 28%,#ffae3899,transparent 24%),radial-gradient(ellipse at 70% 28%,#ffae3899,transparent 24%),radial-gradient(ellipse at 50% 70%,#ff821a99,transparent 50%)}
.webgl-ready .pumpkin-light{display:none}


/* A dedicated widescreen scene scales proportionally to fill the desktop. */
@media(min-width:701px){
 .landing{width:100%;overflow:hidden}
 .landing .scene-art{background-image:url('/assets/landing-wide.webp');background-size:cover;background-position:center}
 .landing .pumpkin-light{left:calc(50% - max(100svh,50vw) * .135);top:calc(50% + max(100svh,50vw) * .18);width:calc(max(100svh,50vw) * .27);height:calc(max(100svh,50vw) * .16)}
}

/* Compact desktop form; mobile controls retain their existing touch sizing. */
@media(min-width:701px){
 .rsvp-content{width:min(38%,520px);margin:clamp(88px,10vw,180px) calc(24% - min(19%,260px)) 48px auto}
 .rsvp h1{margin-bottom:22px}
 .rsvp-title-desktop{width:90%;max-width:420px;margin-inline:auto}
 .rsvp .event-details{font-size:clamp(16px,1.15vw,19px);line-height:1.65;margin-bottom:22px}
 .rsvp form{gap:14px}
 .rsvp label{font-size:16px}
 .rsvp .field{gap:7px}
 .rsvp input:not([type=checkbox]){min-height:48px;padding:11px 14px;font-size:16px}
 .rsvp .checkbox{min-height:40px;gap:11px}
 .rsvp .checkbox input{width:24px;height:24px}
 .rsvp .checkbox input:checked:after{font-size:20px}
 .rsvp .send{min-height:48px;font-size:17px}
}
/* Hide the visual scroll indicator only; touch and keyboard scrolling remain enabled. */
@media(max-width:700px){
 html.rsvp-open,html.rsvp-open body{scrollbar-width:none}
 html.rsvp-open::-webkit-scrollbar,html.rsvp-open body::-webkit-scrollbar{display:none;width:0;height:0}
}