/* The guest-facing surface. Same ivory-and-gold identity as the planner, but this
   page is read once by someone who may be 78 and on a phone in poor light:
   one column, big type, big targets, nothing that moves on its own. */

body.rsvp{padding:0;display:flex;justify-content:center;min-height:100vh;background:var(--paper)}
.sheet{width:100%;max-width:560px;padding:0 0 72px;text-align:center}

/* their photograph opens the card */
.hero-photo{position:relative;overflow:hidden;background:var(--sunken)}
.hero-photo img{display:block;width:100%;height:clamp(300px,74vw,430px);object-fit:cover;
  object-position:50% 60%}
.hero-over{position:absolute;inset:auto 0 0 0;padding:66px 20px 26px;
  background:linear-gradient(to top,rgba(24,18,12,.92) 0%,rgba(24,18,12,.78) 26%,rgba(24,18,12,.55) 48%,rgba(24,18,12,.26) 72%,rgba(24,18,12,.06) 90%,transparent 100%)}
.pad{padding:0 24px}

/* Step 1's eyebrow sits on the photograph; steps 2 and 3 sit on paper. Pale gold
   on ivory is unreadable, so only the on-photo one gets the light treatment. */
.eyebrow{font-family:var(--mono);font-size:10.5px;color:var(--gold-lit);text-transform:uppercase;
  letter-spacing:.3em;margin:0 0 14px}
.hero-over .eyebrow{color:#f6e3b8;
  text-shadow:0 1px 3px rgba(24,18,12,.9),0 0 16px rgba(24,18,12,.7)}
.names{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(40px,11vw,58px);
  line-height:1.02;color:#fffaf2;text-shadow:0 2px 18px rgba(30,22,16,.55)}
.names .amp{font-style:italic;font-size:.46em;vertical-align:.22em;padding:0 .14em;
  font-weight:400;color:#f0d69b}
.when{margin:24px 0 0;font-family:var(--mono);font-size:12px;color:var(--parchment);
  text-transform:uppercase;letter-spacing:.2em;line-height:1.9}
.when .soft{display:block;font-family:var(--body);color:var(--dim);text-transform:none;
  letter-spacing:0;font-size:15px;line-height:1.65;max-width:34ch;margin:0 auto}

/* a hairline rule stands in for the fold of the card */
form,#detail,.choice{position:relative}
form{margin-top:40px;padding-top:36px}
form::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

label,.fld{display:block;font-family:var(--mono);font-size:11px;color:var(--parchment);
  text-transform:uppercase;letter-spacing:.16em;margin-bottom:8px}
.hint{margin:0 0 18px;font-size:14px;color:var(--dim);line-height:1.6}

/* the code plate — reads like the engraving on the invitation */
.codein{width:100%;max-width:340px;background:var(--paper-2);border:1px solid var(--line);
  border-radius:10px;color:var(--parchment);font-family:var(--mono);font-size:30px;font-weight:500;
  letter-spacing:.34em;text-align:center;text-indent:.34em;padding:20px 8px;
  text-transform:uppercase;box-shadow:inset 0 1px 3px rgba(44,36,49,.07)}
.codein::placeholder{color:#c3b7a6;letter-spacing:.34em}
.codein:focus{outline:none;border-color:var(--gold);background:#fff}

button.big{display:block;width:100%;margin:26px auto 0;background:var(--gold-solid);border:1px solid var(--gold-solid);
  color:#fffaf2;font-family:var(--mono);font-size:13px;font-weight:500;text-transform:uppercase;
  letter-spacing:.16em;padding:18px 20px;border-radius:99px;cursor:pointer;box-shadow:var(--shadow)}
button.big:hover:not(:disabled){background:var(--gold-lit);border-color:var(--gold-lit)}
button.big:disabled{background:transparent;color:var(--dim);border-color:var(--line);
  cursor:not-allowed;box-shadow:none}
button.quiet{display:block;margin:20px auto 0;background:none;border:none;color:var(--dim);
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;
  cursor:pointer;text-decoration:underline;text-underline-offset:4px;padding:10px}
button.quiet:hover{color:var(--gold-lit)}

.err{margin:16px 0 0;color:var(--brick);font-size:14px;line-height:1.5}
.foot{margin:44px 0 0;font-size:13.5px;color:var(--dim);line-height:1.7;
  border-top:1px solid var(--line);padding-top:22px}

/* ---- step 2 ---- */
.who-for{margin:0;font-family:var(--display);font-size:clamp(26px,6.5vw,36px);font-weight:500;
  line-height:1.15;color:var(--parchment)}
.seats{margin:14px 0 0;font-family:var(--mono);font-size:11px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.14em}
.prior{margin:22px 0 0;font-size:14px;color:var(--gold-lit);background:var(--gold-wash);
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;line-height:1.6}

.choice{border:none;margin:40px 0 0;padding:34px 0 0}
.choice::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.choice legend{float:left;width:100%;font-family:var(--mono);font-size:11px;color:var(--parchment);
  text-transform:uppercase;letter-spacing:.16em;margin-bottom:16px;padding:0}
.opt{display:flex;align-items:center;gap:14px;text-align:left;background:var(--paper-2);
  border:1px solid var(--line);border-radius:14px;padding:18px 18px;margin-bottom:12px;
  cursor:pointer;text-transform:none;letter-spacing:0;font-family:var(--body);font-size:17px;
  color:var(--parchment)}
.opt:hover{border-color:var(--gold)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt .mark{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--gold);
  display:grid;place-items:center}
.opt .mark::after{content:"";width:11px;height:11px;border-radius:50%;background:transparent}
.opt input:checked ~ .mark::after{background:var(--gold)}
.opt:has(input:checked){border-color:var(--gold);background:var(--gold-wash)}
.opt input:focus-visible ~ .mark{outline:2px solid var(--gold-lit);outline-offset:3px}

#detail{margin-top:34px;text-align:left}
.stepper{display:flex;align-items:center;gap:6px;margin-bottom:30px}
.stepper button{width:56px;height:56px;flex:none;border-radius:50%;border:1px solid var(--line);
  background:var(--paper-2);color:var(--parchment);font-size:26px;line-height:1;cursor:pointer}
.stepper button:hover{border-color:var(--gold);color:var(--gold-lit)}
.stepper output{flex:1;text-align:center;font-family:var(--display);font-size:38px;font-weight:500;
  color:var(--parchment);font-variant-numeric:tabular-nums}
textarea{width:100%;background:var(--paper-2);border:1px solid var(--line);border-radius:10px;
  color:var(--parchment);font-family:var(--body);font-size:16px;padding:14px;resize:vertical}
textarea:focus{outline:none;border-color:var(--gold)}

/* ---- step 3 ---- */
.thanks{margin:0;font-family:var(--display);font-size:clamp(32px,8vw,46px);font-weight:500;
  line-height:1.1;color:var(--gold-lit)}
.recap{margin:26px 0 0;font-size:15px;color:var(--parchment);line-height:1.8}
.recap .note{display:block;margin-top:14px;color:var(--dim);font-size:13.5px}

@media(max-width:480px){
  .pad{padding:0 18px}
  .codein{font-size:26px;letter-spacing:.26em;text-indent:.26em}
}