:root{color:#f7f7f5;background:#000;font-family:'Kosugi',sans-serif;font-synthesis:none}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
html,body,.event-page,.event-page *{-webkit-user-select:none;user-select:none}
a{color:inherit}
a:focus-visible{outline:2px solid white;outline-offset:6px}
.event-page{position:relative;isolation:isolate;width:100%;height:100dvh;background:#000;overflow:hidden}
.film-stage{position:absolute;inset:0;z-index:0}
#experience{position:absolute;inset:0;cursor:grab;touch-action:pan-y}
#experience:active{cursor:grabbing}
#experience canvas{display:block;width:100%;height:100%}
#film{display:none}
#load-status{position:absolute;top:48%;width:100%;text-align:center;font-size:12px;pointer-events:none}
.film-stage::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#0005,transparent 28%,#0002 52%,#000b 78%,#000 100%)}
.invitation{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:max(20px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom));pointer-events:none}
.invite-art{display:block;flex:0 1 auto;width:min(88vw,440px);height:auto;max-height:calc(100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:visible}
.entry-options{flex-shrink:0;text-align:center;pointer-events:auto}
.enter-link{display:inline-block;padding:8px 4px;font-size:clamp(11px,1.8dvh,17px);line-height:1.2;letter-spacing:1.5px;text-decoration-thickness:1px;text-underline-offset:4px}
.invitation.is-loading .art-line,.invitation.is-loading .entry-options{opacity:0}
.invitation.is-revealing .art-line,.invitation.is-revealing .entry-options{animation:invite-line-in 600ms ease-out both;animation-delay:calc(var(--order)*650ms)}
@keyframes invite-line-in{from{opacity:0}to{opacity:1}}
.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}
@media(max-height:600px){.invitation{gap:8px;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}.invite-art{max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.enter-link{font-size:11px}}
@media(prefers-reduced-motion:reduce){.invitation.is-revealing .art-line,.invitation.is-revealing .entry-options{animation:none;opacity:1}}

/* The new artwork includes its own final RSVP row. */
.art-rsvp{pointer-events:auto;cursor:pointer}
.art-rsvp:focus-visible{outline:none}
.art-rsvp:focus-visible .rsvp-hit-area{stroke:white;stroke-width:12}

/* Reduce only the gaps between artwork rows, keeping the lettering proportions.
   Size against both viewport axes so the full invitation fits on small phones. */
.invitation{gap:0;padding:max(20px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom))}
.invite-art{flex:none;width:min(88vw,440px,calc((100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*0.53059));height:auto;max-height:none;aspect-ratio:425/801}
/* Give the complete invitation 10% more breathing room on phones. */
@media(max-width:600px){.invite-art{transform:scale(.9);transform-origin:center}}

/* RSVP replaces the invitation and films with a focused black form. */
[hidden]{display:none!important}
body.rsvp-open .film-stage,body.rsvp-open .invitation{display:none}
body.rsvp-open .event-page{overflow-y:auto}
.rsvp-screen{min-height:100%;width:min(100%,490px);margin:0 auto;padding:max(36px,env(safe-area-inset-top)) 32px max(28px,env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:center;align-items:center;background:#000}
.rsvp-logo{width:220px;max-width:70%;height:auto;overflow:hidden;flex:none;margin:0 0 48px}
#rsvp-form{width:100%;text-align:center}
#rsvp-form label{display:block;font-family:Impact,'Arial Narrow',sans-serif;font-stretch:condensed;font-weight:900;font-size:clamp(25px,6vw,34px);line-height:1.1;letter-spacing:1.5px}
#rsvp-form input{display:block;width:100%;min-height:42px;margin:8px 0 22px;padding:7px 10px;border:0;border-bottom:1px solid #777;border-radius:0;background:transparent;color:white;font:18px 'Kosugi',sans-serif;text-align:center;user-select:text;-webkit-user-select:text}
#rsvp-form input:focus{outline:1px solid white;outline-offset:3px;border-color:white}
#rsvp-form .optional{display:block;font:10px 'Kosugi',sans-serif;letter-spacing:1.5px;margin-top:6px;color:#bbb}
.rsvp-submit{width:100%;margin-top:32px;min-height:70px;border:5px solid white;border-radius:50%;background:transparent;color:white;font:900 34px Impact,'Arial Narrow',sans-serif;cursor:pointer;transform:rotate(-1deg)}
.rsvp-submit:focus-visible{outline:2px solid white;outline-offset:7px}
.rsvp-submit:disabled{opacity:.6;cursor:wait}
#rsvp-status{font-size:13px;line-height:1.5;min-height:20px;margin:20px 0 8px}
.rsvp-note{font-size:10px;color:#bbb}
.form-trap{position:absolute;left:-10000px}
.rsvp-screen.is-compact{justify-content:flex-start;padding-top:25px}
.rsvp-screen.is-compact .rsvp-logo{margin-bottom:25px}

/* Match the invitation typography with a soft screen-printed edge. */
#rsvp-form label,.rsvp-submit{font-family:'Kosugi',sans-serif;font-weight:400;letter-spacing:1.5px;filter:blur(.75px)}
#rsvp-form label{font-size:clamp(23px,6vw,30px)}
.rsvp-submit{font-size:30px}
.rsvp-success{margin:100px 0 120px;font:32px 'Kosugi',sans-serif;letter-spacing:1.5px;filter:blur(.75px)}
#rsvp-form.is-success .rsvp-submit{display:flex;align-items:center;justify-content:center;text-decoration:none}
@media(max-height:700px){.rsvp-success{margin:55px 0 65px}}

/* Use the supplied hand-drawn ring for both form actions. */
.rsvp-submit{border:0;border-radius:0;background:transparent url('/assets/hand-drawn-circle.png') center/100% 100% no-repeat;aspect-ratio:327/87;min-height:0;display:flex;align-items:center;justify-content:center;padding:12px 24px;transform:none;filter:none}
.rsvp-submit span{filter:blur(.75px)}

body,input,button,a,.invite-copy{letter-spacing:1.5px}
.invite-copy{font-family:'Kosugi',sans-serif;text-anchor:middle;fill:#f0ebeb;filter:blur(.75px);pointer-events:none}
.invite-copy.invite-fine-print{filter:blur(.35px)}

/* Empty and filled states match the supplied compact form reference. */
#rsvp-form label.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-form input:not([name="website"]){width:100%;height:40px;min-height:0;margin:0 auto;padding:0;border:0;outline:none;border-radius:0;font-family:'Kosugi',sans-serif;font-size:28px;line-height:40px;letter-spacing:1.5px;text-transform:uppercase;color:#eee;filter:blur(.75px);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
#rsvp-form input::placeholder{color:#eee;opacity:1;text-decoration:none}
#rsvp-form input:placeholder-shown{text-decoration:none}
#rsvp-form input:focus{outline:none;border:0}
#rsvp-form input:focus-visible{caret-color:white}
/* Use identical native text metrics whether the input is editing or idle. */
#rsvp-form input:not([name="website"]){appearance:none;-webkit-appearance:none;line-height:normal;padding:4px 0;vertical-align:middle;-webkit-text-size-adjust:100%;text-size-adjust:100%}
#rsvp-form .rsvp-submit{width:min(100%,327px);margin:78px auto 0;font-size:28px;aspect-ratio:327/87}
#rsvp-form .rsvp-submit:disabled{opacity:.22;cursor:default}
#rsvp-status:empty{display:none}
#rsvp-form.is-success .rsvp-submit{margin-top:0}
@media(max-width:600px){.rsvp-screen{width:100%;padding-left:18px;padding-right:18px}#rsvp-form .rsvp-submit{width:76%}}

.rsvp-success{margin:0;font-size:clamp(20px,6.2vw,32px);line-height:1.35;letter-spacing:1.5px;filter:blur(.75px)}
#rsvp-form.is-success .rsvp-submit{margin-top:50px}

/* Keep validation in the same quiet, monochrome visual language. */
#rsvp-status{margin:24px auto 0;font:16px/1.4 'Kosugi',sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:#eee;filter:blur(.75px);text-align:center}
#rsvp-form.has-validation-error input:not([name="website"]){text-decoration:none}

/* Validation must not recenter the fields while someone is typing. */
#rsvp-form{position:relative}
#rsvp-status{position:absolute;top:100%;left:0;width:100%}
.rsvp-success:focus{outline:none}
.rsvp-entry-note{margin:28px 0 0;font:9px/1.4 'Kosugi',sans-serif;letter-spacing:1.5px;color:#eee;text-align:center;filter:blur(.2px)}

/* Real HTML invitation copy uses the same screen-space blur as the form. */
.invite-art{position:relative;container-type:inline-size}
.invite-brand{position:absolute;top:0;left:0;width:100%;height:48.689%;overflow:hidden}
.invite-copy{position:absolute;top:var(--top);left:0;width:100%;margin:0;text-align:center;font:var(--size)/1 'Kosugi',sans-serif;letter-spacing:1.5px;color:#eee;white-space:nowrap;filter:blur(.75px)}
.invite-art .art-rsvp{position:absolute;left:20.706%;top:81.586%;width:57.647%;height:8.14%;display:flex;align-items:center;justify-content:center;background:url('/assets/hand-drawn-circle.png') center/100% 100% no-repeat;text-decoration:none;font:5.412cqw/1 'Kosugi',sans-serif;letter-spacing:1.5px;color:#eee}
.invite-art .art-rsvp span{filter:blur(.75px)}
.invite-art .art-rsvp:focus-visible{outline:2px solid white;outline-offset:6px}
@media(max-width:600px){.invite-art{transform:none;width:min(79.2vw,396px,calc((100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*.477531))}}