/* The reply uses the existing paper / brass palette of each invitation. */
body[data-variant="minimal"] {
  --reply-ink: #171a18; --reply-muted: #525c55; --reply-line: #939e95;
  --reply-paper: #eef0e9; --reply-accent: #354b3b; --reply-inverse: #fbfaf6;
}
body[data-variant="luxe"] {
  --reply-ink: #eee5d6; --reply-muted: #c1b4a0; --reply-line: #6c5841;
  --reply-paper: #191511; --reply-accent: #d2b487; --reply-inverse: #191511;
}
.rsvp-frame { padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 5vw, 4rem); }
.rsvp-form { margin: 2.5rem auto 0; max-width: 36rem; color: var(--reply-ink); text-align: left; }
.rsvp-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.reply-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem; }
.reply-field { display: flex; min-width: 0; flex-direction: column; gap: .65rem; font-size: .85rem; letter-spacing: .06em; }
.reply-field small, .reply-optional { color: var(--reply-muted); font-size: .72rem; font-weight: 400; }
.reply-field input, .reply-field textarea {
  width: 100%; min-width: 0; min-height: 3.2rem; padding: .8rem .85rem;
  border: 1px solid var(--reply-line); border-radius: 0; background: var(--reply-paper);
  color: var(--reply-ink); font: 400 16px/1.5 var(--sans); letter-spacing: .02em;
}
.reply-field input::placeholder, .reply-field textarea::placeholder { color: var(--reply-muted); opacity: .8; }
.reply-field input:focus-visible, .reply-field textarea:focus-visible { outline: 2px solid var(--reply-accent); outline-offset: 3px; }
.reply-attendance { min-width: 0; margin: 1.6rem 0; padding: 0; border: 0; }
.reply-attendance legend { margin-bottom: .8rem; font-size: .85rem; letter-spacing: .06em; }
.reply-options { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.reply-option { position: relative; display: flex; min-height: 3.4rem; cursor: pointer; }
.reply-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.reply-option span { display: grid; width: 100%; padding: .9rem .5rem; place-items: center; border: 1px solid var(--reply-line); font: 1rem var(--serif); letter-spacing: .12em; transition: background 180ms ease, color 180ms ease; }
.reply-option input:checked + span { border-color: var(--reply-accent); background: var(--reply-accent); color: var(--reply-inverse); }
.reply-option input:focus-visible + span { outline: 2px solid var(--reply-accent); outline-offset: 4px; }
.reply-count { display: flex; margin-bottom: 1.6rem; align-items: center; justify-content: space-between; gap: 1rem; }
.reply-count > label { font-size: .85rem; }
.reply-counter { display: flex; border: 1px solid var(--reply-line); }
.reply-counter button, .reply-counter input { width: 3rem; height: 3rem; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--reply-ink); font: 16px var(--sans); text-align: center; }
.reply-counter button { cursor: pointer; font-size: 1.4rem; }
.reply-counter button:disabled { opacity: .3; cursor: default; }
.reply-counter input { appearance: textfield; -moz-appearance: textfield; }
.reply-counter input::-webkit-inner-spin-button, .reply-counter input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.reply-extras { padding: 1.2rem 0; border-top: 1px solid var(--reply-line); border-bottom: 1px solid var(--reply-line); }
.reply-extras summary { cursor: pointer; color: var(--reply-muted); font-size: .8rem; letter-spacing: .04em; }
.reply-extras[open] summary { margin-bottom: 1.3rem; }
.reply-extras .reply-field + .reply-field { margin-top: 1rem; }
.reply-field textarea { resize: vertical; min-height: 6rem; }
.reply-submit, .reply-replay {
  display: block; width: 100%; min-height: 3.5rem; margin-top: 1.5rem; padding: .9rem 1.2rem;
  border: 1px solid var(--reply-accent); border-radius: 0; background: var(--reply-accent);
  color: var(--reply-inverse); font: 1.05rem var(--serif); letter-spacing: .2em; cursor: pointer;
}
.reply-submit:disabled { cursor: wait; opacity: .6; }
body[data-variant] .rsvp-form .reply-privacy { margin: .9rem 0 0; color: var(--reply-muted); font: 11px/1.8 var(--sans); text-align: center; letter-spacing: .04em; }
body[data-variant] .rsvp-form .reply-error { margin: 1rem 0; padding: .8rem; border-left: 2px solid currentColor; color: var(--reply-ink); background: var(--reply-paper); font: 13px/1.7 var(--sans); letter-spacing: 0; }
.reply-success { max-width: 36rem; margin: 2rem auto 0; padding-top: 2rem; border-top: 1px solid var(--reply-line); color: var(--reply-ink); }
.reply-success h3 { margin: 1rem 0; overflow-wrap: anywhere; font: 1.5rem/1.6 var(--serif); }
body[data-variant] .reply-success p { font: 14px/1.8 var(--sans); color: var(--reply-muted); }
.reply-success > span { font-size: .7rem; letter-spacing: .24em; }
.reply-replay { background: transparent; color: var(--reply-ink); }
.arrival-open { overflow: hidden; }
.arrival-dialog {
  position: fixed; inset: 0; width: 100vw; max-width: none; height: 100vh; height: 100dvh;
  max-height: none; margin: 0; padding: 0; border: 0; overflow-x: hidden; overflow-y: auto; background: #0d0c0b;
  color: #fbf4e8; isolation: isolate; overscroll-behavior: contain;
}
.arrival-dialog::backdrop { background: #0d0c0b; }
.arrival-scene, .arrival-shade, .arrival-sparks { position: absolute; inset: 0; pointer-events: none; }
.arrival-scene { background: var(--arrival-image) center / cover; }
.arrival-shade { background: linear-gradient(180deg, rgb(13 12 11 / 43%), rgb(13 12 11 / 76%) 60%, #0d0c0b); }
.arrival-content { position: relative; z-index: 3; display: flex; min-height: 100%; max-width: 54rem; margin: auto; padding: max(2rem, env(safe-area-inset-top)) 1.5rem max(2rem, env(safe-area-inset-bottom)); flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.arrival-eyebrow { margin: 0 0 2.5rem; color: #dfc29b; font: 11px/1.8 var(--sans); letter-spacing: .32em; }
.arrival-status { margin: 0 0 1rem; font: 12px/1.8 var(--sans); letter-spacing: .28em; color: #dfc29b; }
.arrival-content h2 { margin: 0; max-width: 100%; overflow-wrap: anywhere; font: 400 clamp(2.2rem, 6vw, 4.8rem)/1.4 var(--serif); letter-spacing: .06em; text-wrap: balance; }
#arrival-copy { max-width: 27rem; margin: 1.6rem 0 2rem; font: 14px/2 var(--sans); color: #e2d7c8; }
.arrival-details { display: flex; padding: 1.2rem 0; border-top: 1px solid #8d775a; border-bottom: 1px solid #8d775a; flex-wrap: wrap; justify-content: center; gap: .8rem 1.8rem; font: 13px/1.7 var(--sans); letter-spacing: .1em; }
.arrival-hosts { margin: 1.6rem 0 2rem; font: 14px/1.8 var(--serif); letter-spacing: .12em; }
.arrival-close { min-height: 3rem; padding: .85rem 2rem; border: 1px solid #b99c75; border-radius: 0; background: #191511; color: #f7ecdc; font: 14px/1.4 var(--serif); letter-spacing: .16em; cursor: pointer; }
.arrival-door { position: absolute; z-index: 4; top: 0; bottom: 0; width: 50%; display: grid; place-items: center; background-image: linear-gradient(rgb(13 12 11 / 34%), rgb(13 12 11 / 34%)), var(--arrival-door-image); background-size: 200% 100%; pointer-events: none; }
.arrival-entrance { position: absolute; z-index: 4; inset: 0; overflow: hidden; pointer-events: none; }
.arrival-door--left { left: 0; background-position: left center; border-right: 1px solid #d0b183; }
.arrival-door--right { right: 0; background-position: right center; border-left: 1px solid #d0b183; }
.arrival-door span { font: 400 clamp(4rem, 12vw, 8rem) var(--serif); color: #f0d6ad; text-shadow: 0 2px 20px #0d0c0b; }
.arrival-seam { position: absolute; z-index: 5; top: 12%; bottom: 12%; left: calc(50% - 1px); width: 2px; background: #fff1d3; box-shadow: 0 0 25px 6px #d7ad67; pointer-events: none; }
.arrival-sparks { z-index: 2; overflow: hidden; }
.arrival-sparks i { position: absolute; top: 47%; left: 50%; width: 3px; height: 9px; background: #e6c18a; opacity: 0; }
.arrival-sparks i:nth-child(3n) { width: 3px; height: 3px; border-radius: 50%; background: #fff1d3; }
.arrival-dialog[open] .arrival-door--left { animation: arrival-left 1.8s .2s cubic-bezier(.65,0,.25,1) both; }
.arrival-dialog[open] .arrival-door--right { animation: arrival-right 1.8s .2s cubic-bezier(.65,0,.25,1) both; }
.arrival-dialog[open] .arrival-content { animation: arrival-copy .9s 1.1s ease both; }
.arrival-dialog[open] .arrival-scene { animation: arrival-scene 3.6s ease-out both; }
.arrival-dialog[open] .arrival-seam { animation: arrival-seam 1.2s ease both; }
.arrival-dialog[open] .arrival-sparks i { animation: arrival-spark 2.5s var(--delay) cubic-bezier(.1,.6,.3,1) both; }
@keyframes arrival-left { to { transform: translateX(-101%); } }
@keyframes arrival-right { to { transform: translateX(101%); } }
@keyframes arrival-copy { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes arrival-scene { from { transform: scale(1.09); } to { transform: scale(1); } }
@keyframes arrival-seam { 0% { opacity: 0; transform: scaleY(.15); } 40% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; } }
@keyframes arrival-spark { 0% { opacity: 0; transform: translate(0,0) scale(.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx),var(--dy)) rotate(var(--turn)); } }
.arrival-dialog[data-motion="reduced"] .arrival-door, .arrival-dialog[data-motion="reduced"] .arrival-seam, .arrival-dialog[data-motion="reduced"] .arrival-sparks { display: none; }
.arrival-dialog[data-motion="reduced"] .arrival-content, .arrival-dialog[data-motion="reduced"] .arrival-scene { animation: none; }
@media (max-width: 480px) {
  .reply-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .reply-count { align-items: flex-start; flex-direction: column; }
  .reply-options { gap: .6rem; }
  .reply-option span { font-size: .95rem; letter-spacing: .06em; }
  .arrival-eyebrow { margin-bottom: 1.8rem; }
  .arrival-content { padding-inline: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .arrival-door, .arrival-seam, .arrival-sparks { display: none; }
  .arrival-content, .arrival-scene { animation: none !important; }
}

/* Touch and keyboard accommodations shared by both invitations. */
.reply-extras { padding-block: .4rem; }
.reply-extras summary { min-height: 48px; padding-block: .85rem; }
.reply-extras[open] summary { margin-bottom: .7rem; }
.reply-field input, .reply-field textarea, .reply-counter input { scroll-margin-block: 5rem; }
.arrival-content { padding-left: max(1.25rem, env(safe-area-inset-left)); padding-right: max(1.25rem, env(safe-area-inset-right)); }
@media (max-height: 500px) {
  .arrival-content { padding-top: max(1.25rem, env(safe-area-inset-top)); padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); }
  .arrival-eyebrow { margin-bottom: .6rem; }
  .arrival-status { margin-bottom: .5rem; }
  .arrival-content h2 { font-size: clamp(1.6rem, 5vw, 2.4rem); }
  #arrival-copy { margin: .7rem 0; font-size: 13px; }
  .arrival-details { padding: .6rem 0; }
  .arrival-hosts { margin: .7rem 0; }
}