:root{color-scheme:light;--ink:#504a56;--muted:#6e6573}*{box-sizing:border-box}body{margin:0;background:#e9e5e9;color:var(--ink);font-family:Arial,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #87708e;outline-offset:4px}.world{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 40%,#fff8 0%,#e8e3e970 65%,#d8d0dc 100%)}.backdrop{position:absolute;inset:-6%;z-index:-3;background:linear-gradient(#f1edf2bb,#f3eef2bb),url('/couple.png') center 44%/cover;filter:blur(12px);animation:breathe 16s ease-in-out infinite alternate}.halo{position:absolute;inset:-40%;z-index:-2;background:conic-gradient(from 0deg,transparent 0deg,#fff9 25deg,transparent 45deg,transparent 80deg,#fff8 100deg,transparent 120deg,transparent 160deg,#fff8 180deg,transparent 200deg,transparent 250deg,#fff8 275deg,transparent 300deg);animation:turn 90s linear infinite;opacity:.65}.light{position:absolute;z-index:-1;width:48vw;height:100vh;top:-25vh;background:linear-gradient(90deg,transparent,#fff9,transparent);filter:blur(25px);transform:rotate(30deg);animation:sweep 16s ease-in-out infinite alternate}.light-one{left:-20%}.light-two{right:-20%;animation-delay:-8s}header{display:flex;align-items:center;justify-content:space-between;padding:22px 34px;z-index:3;gap:16px}.monogram{font:23px Georgia,serif;letter-spacing:4px}.monogram i{color:#918595}.header-note{font-size:9px;letter-spacing:3px;margin-left:120px}.controls{display:flex;gap:9px}.controls button{border:1px solid #fff;background:#fff9;box-shadow:0 3px 15px #66506a12;border-radius:30px;padding:10px 15px;color:#5c5263;font-size:11px;min-height:39px;backdrop-filter:blur(12px)}.music-icon{font-size:17px;padding-right:5px}.controls button[aria-pressed=true] .music-icon{display:inline-block;animation:float 2s ease-in-out infinite}.hero{flex:1;text-align:center;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 18px 12px}.title{z-index:2;animation:arrive 1.5s both}.eyebrow{font-size:9px;letter-spacing:3.5px;margin:0 0 12px}h1{font:normal clamp(49px,5.8vw,82px)/1.05 Georgia,serif;letter-spacing:-3px;margin:0;text-shadow:0 2px 15px #fff}h1 em{font-weight:400;color:#9b8e9f}.subtitle{font:italic 18px Georgia,serif;margin:12px 0 0}.portrait{position:relative;width:clamp(260px,43vh,480px);height:clamp(260px,43vh,480px);margin:-3px 0 -5px;animation:arrive 1.8s both,float 6s ease-in-out 1.8s infinite}.portrait img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse 49% 49% at 50% 50%,#000 73%,transparent 100%)}.orbit{position:absolute;inset:5%;border:1px solid #fff9;border-radius:50%;box-shadow:0 0 30px #fff9;transform:rotateX(65deg);animation:orbit 14s linear infinite;pointer-events:none}.orbit-two{inset:-4%;animation-direction:reverse;opacity:.5}.star{position:absolute;color:#fff;text-shadow:0 0 12px #fff,0 0 28px #c1a4c7;font-size:35px;animation:twinkle 3s ease-in-out infinite}.star-one{top:25%;left:4%}.star-two{top:49%;right:2%;animation-delay:-1s}.star-three{bottom:12%;left:13%;font-size:20px;animation-delay:-2s}.invitation{z-index:2;animation:arrive 1.8s .25s both}.date{font-size:11px;letter-spacing:3px;margin:0 0 7px;display:flex;align-items:center;justify-content:center;gap:12px}.date strong{font:32px Georgia,serif;letter-spacing:0}.date span{color:#a99aac}.church{font:19px Georgia,serif;margin:4px 0}.occasion{font-size:10px;color:var(--muted);margin:9px 0 17px}.button{position:relative;overflow:hidden;border:1px solid #fff;border-radius:40px;padding:14px 29px;min-height:50px;color:#fff;background:linear-gradient(130deg,#9e93a6,#6e6179,#a89cad);box-shadow:0 0 0 3px #b9acbe4d,0 8px 30px #75627f33,inset 0 1px 2px #fff9;font-size:13px;letter-spacing:.3px}.button:after{content:'';position:absolute;inset:-50%;background:linear-gradient(100deg,transparent 40%,#fff7 50%,transparent 60%);animation:shine 5s infinite;pointer-events:none}.button span{font-size:21px;margin-left:24px;vertical-align:middle}.button:hover{box-shadow:0 0 0 4px #b9acbe66,0 8px 35px #75627f66}.notes{font-size:10px;line-height:1.6;margin:15px 0 0;color:#675c6d}.notes span{margin:0 8px}footer{display:flex;justify-content:space-between;gap:15px;padding:16px 34px;font-size:8px;letter-spacing:1.5px;color:#74677b;z-index:2}#song-credit{letter-spacing:.4px}#particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}.particle{position:absolute;bottom:-30px;left:var(--x);width:var(--size);height:var(--size);background:#fff;border-radius:50%;box-shadow:0 0 10px #fff,0 0 20px #fff9;animation:rise var(--duration) var(--delay) linear infinite;opacity:0}.particle.petal{border-radius:80% 0 80% 0;background:linear-gradient(120deg,#fff,#e3d9e7);box-shadow:1px 3px 7px #98859d33}.paused *, .paused *:before,.paused *:after{animation-play-state:paused!important}dialog{width:min(520px,calc(100% - 28px));max-height:90svh;overflow:auto;border:1px solid white;border-radius:18px;padding:32px;background:#faf7fb;box-shadow:0 25px 100px #4d365a55;color:var(--ink)}dialog::backdrop{background:#42324c77;backdrop-filter:blur(12px)}dialog[open]{animation:arrive .35s both}dialog h2{font:34px Georgia,serif;margin:12px 0}.dialog-note{font-size:12px;line-height:1.7;color:var(--muted);margin-bottom:24px}.close{position:absolute;right:14px;top:10px;border:0;background:transparent;font-size:28px;color:#6b5c74;width:38px;height:38px}fieldset{border:0;padding:0;margin:0 0 20px}legend,label{font-size:12px;font-weight:600}legend{margin-bottom:12px}.attendance{display:flex;gap:10px}.attendance label{display:flex;align-items:center;gap:6px;border:1px solid #cfc5d4;border-radius:5px;padding:12px;flex:1;font-weight:400}.attendance label:has(:checked){background:#eae1ef;border-color:#8c7897}input[type=radio]{accent-color:#786183}form>label,.name-fields label{display:block}label span{font-weight:400;font-size:10px}input:not([type=radio]),textarea{display:block;width:100%;margin:7px 0 17px;padding:11px;border:1px solid #cfc5d4;border-radius:5px;background:white;color:var(--ink);font-size:14px}.name-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}textarea{resize:vertical}.field-note{font-size:10px;margin:-9px 0 18px;color:var(--muted)}form .button{width:100%}.privacy{font-size:10px;line-height:1.5;text-align:center}.error{color:#a02929}#form-status{font-size:13px;line-height:1.6}#form-status:empty{display:none}button:disabled{opacity:.6;cursor:wait}@keyframes float{50%{transform:translateY(-9px)}}@keyframes breathe{to{transform:scale(1.09)}}@keyframes turn{to{transform:rotate(360deg)}}@keyframes sweep{to{transform:translateX(35%) rotate(-15deg);opacity:.4}}@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.65) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(35deg)}}@keyframes orbit{to{transform:rotateX(65deg) rotate(360deg)}}@keyframes rise{0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}15%,75%{opacity:.8}100%{opacity:0;transform:translate3d(70px,-110vh,0) rotate(240deg)}}@keyframes shine{0%,55%{transform:translateX(-100%)}100%{transform:translateX(100%)}}@keyframes arrive{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}@media(min-width:900px) and (min-height:850px){.portrait{width:47vh;height:47vh}.hero{gap:8px}}@media(max-width:600px){header{padding:16px}.header-note{display:none}.controls{gap:5px}.controls button{padding:8px 10px;font-size:10px}.hero{padding:10px 16px}.eyebrow{font-size:8px;letter-spacing:2px}h1{font-size:55px}.subtitle{font-size:16px}.portrait{width:min(37svh,340px);height:min(37svh,340px);min-width:230px;min-height:230px;margin:8px 0}.date{font-size:10px;letter-spacing:2px}.church{font-size:18px}.notes{max-width:290px;margin:14px auto 0}.notes span{display:none}.notes span:after{content:' '}.notes{text-wrap:balance}footer{padding:15px;justify-content:center;flex-wrap:wrap;font-size:7px;gap:8px}dialog{padding:29px 22px}.name-fields{grid-template-columns:1fr;gap:0}.attendance label{font-size:11px;padding:10px 7px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important}.particle{display:none}.portrait{transform:none}}

/* Keep the distant scene luminous without oversized faces behind the invitation. */
.backdrop{filter:blur(38px);opacity:.38}
@media(min-width:900px) and (min-height:850px){.portrait{width:43vh;height:43vh}.hero{gap:3px}}
@media(max-width:600px){.notes span{display:inline;margin:0 4px}}
.filmstrip{position:absolute;top:0;bottom:0;width:clamp(180px,23vw,350px);z-index:0;pointer-events:none;mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent);filter:drop-shadow(10px 12px 12px #55445a25)}
.filmstrip canvas{display:block;width:100%;height:100%}
.filmstrip-left{left:4%}.filmstrip-right{right:4%}
.hero{z-index:1;pointer-events:none}.hero button{pointer-events:auto}
@media(min-width:1800px){.filmstrip-left{left:12%}.filmstrip-right{right:12%}}
@media(max-width:1000px){.filmstrip{width:190px;opacity:.85}.filmstrip-left{left:-36px}.filmstrip-right{right:-36px}}
@media(max-width:600px){.filmstrip{width:120px;top:230px;bottom:230px;opacity:.65}.filmstrip-left{left:-64px}.filmstrip-right{right:-64px}}
@media(max-width:600px){.filmstrip{width:90px;opacity:.6}.filmstrip-left{left:-15px}.filmstrip-right{right:-15px}}

/* Center independently of unequal header controls. */
header{display:grid;grid-template-columns:1fr auto 1fr}
.header-note{margin-left:0;text-align:center;justify-self:center}
.monogram{justify-self:start}
.controls{justify-self:end}
dialog>.eyebrow,dialog>h2,dialog>.dialog-note{text-align:center}
input[type=hidden]{display:none}
@media(max-width:600px){header{grid-template-columns:1fr 1fr;row-gap:14px}.header-note{display:block;grid-column:1 / -1;grid-row:2}.controls{grid-column:2;grid-row:1}}

/* A quiet, self-closing acknowledgement after the server saves the RSVP. */
#rsvp-dialog.show-thanks>:not(.rsvp-thanks){display:none}
.rsvp-thanks[hidden]{display:none}
#rsvp-dialog.show-thanks{padding:48px 28px;overflow:hidden}
.rsvp-thanks{text-align:center;outline:none}
.rsvp-thanks h2{margin:22px 0 12px;font:36px Georgia,serif}
.rsvp-thanks p{font-size:14px;line-height:1.8;color:var(--muted);margin:0}
.success-check{width:94px;height:94px;overflow:visible}
.success-check circle{fill:#eee8f1;stroke:#a99aaf;stroke-width:2;stroke-dasharray:277;stroke-dashoffset:277;animation:draw-check .65s ease forwards}
.success-check path{fill:none;stroke:#74627d;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:70;stroke-dashoffset:70;animation:draw-check .45s .45s ease forwards}
@keyframes draw-check{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.success-check circle,.success-check path{stroke-dashoffset:0}}