/* ---------- R.S.V.P. ---------- */
.rsvp-sub { text-align:center; margin-top:10px; font-size:17px; color:var(--mute); }
.card { position:relative; margin-top:22px; padding:26px 22px 24px; }
.card > *:not(.frame) { position:relative; }
.prior { margin-bottom:16px; padding:4px 0 4px 12px; border-left:3px solid var(--red); font-size:16px; line-height:1.7; }
.fld { display:block; }
.fld > span { display:flex; justify-content:space-between; align-items:baseline; font-size:17px; }
.fld > span i { font-style:normal; font-family:var(--label); font-size:13px; color:var(--mute); }
.fld input, .fld textarea { display:block; width:100%; margin-top:4px; padding:10px 12px; border:1.5px solid rgba(42,36,32,.55); border-radius:12px 14px 12px 15px;
  background:#f5ede0; color:var(--ink); font-family:var(--zh); font-size:18px; line-height:1.6; -webkit-appearance:none; appearance:none; }
.fld textarea { resize:none; min-height:96px; }
.fld input::placeholder, .fld textarea::placeholder { color:#7c6f63; }
.fld input:focus, .fld textarea:focus { outline:none; border-color:var(--red); }
.fld [aria-invalid=true] { border-color:var(--red); }
.err { min-height:22px; padding-top:2px; font-size:15px; color:var(--red-ink); }
.att { border:0; margin-top:6px; }
.att legend { font-size:17px; margin-bottom:6px; }
.att > label { display:inline-block; width:calc(50% - 5px); position:relative; }
.att > label + label { margin-left:6px; }
.att input { position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.att span { display:block; padding:12px 8px; text-align:center; font-size:18px; border:1.5px solid rgba(42,36,32,.45); border-radius:14px 12px 15px 12px; }
.att input:checked + span { background:var(--ink); color:var(--paper-2); border-color:var(--ink); }
.att input:focus-visible + span { outline:2px dashed var(--red-ink); outline-offset:3px; }
.guests { display:flex; align-items:center; justify-content:space-between; margin:0 0 18px; font-size:17px; }
.guests[hidden] { display:none; }
.step { display:flex; align-items:center; }
.step button { width:46px; height:46px; border:1.5px solid var(--ink); border-radius:50%; font-size:22px; line-height:1; }
.step button:disabled { opacity:.3; cursor:not-allowed; }
.step output { width:52px; text-align:center; font-family:var(--label); font-weight:500; font-size:28px; }
.submit { width:100%; margin-top:14px; }
.submit:disabled { opacity:.6; cursor:progress; }
.fail { margin-top:14px; padding:6px 0 6px 12px; border-left:3px solid var(--red); font-size:16px; line-height:1.7; color:var(--red-ink); }
.fail .btn { margin-top:8px; min-height:40px; font-size:16px; }
.fail[hidden], .done[hidden], .prior[hidden], #rsvp-form[hidden] { display:none; }
.done { text-align:center; padding:4px 0; outline:none; }
.done-h { font-size:26px; letter-spacing:.2em; padding-left:.2em; }
.done-sum { margin-top:8px; font-size:18px; line-height:1.8; }
.done .btn { margin-top:16px; }
.seal { display:block; width:108px; height:108px; margin:2px auto 12px; opacity:0; transform:scale(1.6) rotate(6deg); }
[data-state=success] .seal { animation:stamp .55s .1s var(--spring) forwards; }
@keyframes stamp { 0% { opacity:0; transform:scale(1.6) rotate(6deg); } 60% { opacity:1; } 100% { opacity:.95; transform:scale(1) rotate(-8deg); } }

/* ---------- ending ---------- */
.ending { padding:64px 0 40px; text-align:center; }
.end-stage { position:relative; width:100%; aspect-ratio:100/112; overflow:hidden; contain:paint; }
.end-stage .gar { position:absolute; left:0; top:0; width:100%; }
.end-stage .ring2 { position:absolute; left:18%; top:12%; width:64%; opacity:.9; }
.end-stage .ec { position:absolute; top:0; height:100%; width:51%; z-index:3; transition:transform 2.6s var(--io); }
.end-stage .ec img { width:100%; height:100%; object-fit:fill; }
.end-stage .ec.l { left:0; transform:translate3d(-101%,0,0); } .end-stage .ec.r { right:0; transform:translate3d(101%,0,0); }
.end-stage.wave-on .p0 { animation:waving 1.4s ease-in-out 2 alternate; }
@keyframes waving { to { transform:rotate(2.5deg) translate3d(0,-1.5%,0); } }
.end-stage.shut .ec { transform:none; }
.end-stage.shut .ec { will-change:transform; }
.bye { opacity:0; transform:translate3d(0,14px,0); transition:opacity 1s var(--out), transform 1s var(--out); }
.bye.in { opacity:1; transform:none; }
.bye h2 { font-weight:400; font-size:30px; letter-spacing:.2em; padding-left:.2em; margin-top:22px; line-height:1.4; }
.bye h2 small { display:block; font-family:var(--script); font-size:44px; letter-spacing:0; color:var(--red); line-height:1.1; }
.bye .btn { margin-top:20px; }
.foot { margin-top:34px; font-size:14px; color:var(--mute); letter-spacing:.1em; }
@media (prefers-reduced-motion: reduce) { .seal { opacity:.95; transform:rotate(-8deg); } .bye { opacity:1; transform:none; } }