/* ============================================================
   RSVP — page styles (extends site-v7.css)
   Guest-list lookup · household reply · garden formal
   ============================================================ */

/* ---------- page header ---------- */
/* this page is short — keep the fixed header legible on cream from the start
   (no dark hero to sit over), instead of the default light-on-transparent nav */
.nav{ color:var(--navy); }
.nav .brand{ text-shadow:none; }

.rsvp-head{ text-align:center; padding:clamp(124px,19vh,196px) 0 clamp(30px,5vw,56px); position:relative; }
.rsvp-head .rsvp-seal{ width:clamp(150px,20vw,182px); margin:0 auto clamp(12px,1.8vh,20px); }
.rsvp-head .rsvp-seal img{ width:100%; }
.rsvp-head h1{ font-size:clamp(56px,11vw,128px); line-height:.95; padding-bottom:.3em; }
.rsvp-head h1 em{ font-family:var(--script); color:var(--accent); font-style:normal; }
.rsvp-head .ph-sub{ max-width:46ch; margin:clamp(16px,2.4vh,24px) auto 0; color:var(--ink-soft);
  font-family:var(--display); font-style:italic; font-size:clamp(18px,1.8vw,23px); line-height:1.5; }
.rsvp-head .by{ display:inline-block; margin-top:clamp(14px,2vh,20px); font-family:var(--label);
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--navy); }

/* ---------- shell / card ---------- */
.rsvp-wrap{ padding:0 0 clamp(64px,9vw,120px); }
.rsvp-card{ position:relative; max-width:720px; margin:0 auto; background:var(--cream-2);
  border:1px solid var(--navy); padding:clamp(28px,5vw,60px); box-shadow:0 40px 80px -54px rgba(41,56,79,.5); }
.rsvp-card::after{ content:""; position:absolute; inset:9px; border:1px solid var(--line); pointer-events:none; }
.rsvp-card .rc-inner{ position:relative; z-index:1; }

/* florets on the card */
.rsvp-floret{ position:absolute; width:clamp(96px,14vw,150px); z-index:2; pointer-events:none; }
.rsvp-floret.tr{ right:-5%; top:-7%; transform:scaleX(-1); }
.rsvp-floret.bl{ left:-5%; bottom:-6%; }

/* ---------- step: find your invitation ---------- */
.step-head{ text-align:center; margin-bottom:clamp(22px,3.4vw,34px); }
.step-head .kicker{ display:block; margin-bottom:10px; }
.step-head h2{ font-family:var(--display); font-weight:500; font-size:clamp(26px,3.4vw,40px); line-height:1.04; }
.step-head h2 em{ font-family:var(--script); color:var(--accent); font-style:normal; }
.step-head p{ margin:10px auto 0; max-width:40ch; color:var(--ink-soft); font-size:15px; line-height:1.55; }

.lookup{ position:relative; max-width:440px; margin:0 auto; }
.lookup-field{ display:flex; align-items:center; gap:10px; background:var(--cream);
  border:1px solid var(--navy); border-radius:999px; padding:6px 6px 6px 22px; }
.lookup-field input{ flex:1; border:0; background:transparent; outline:none; min-width:0;
  font-family:var(--display); font-size:clamp(17px,1.8vw,20px); color:var(--ink); padding:9px 0; }
.lookup-field input::placeholder{ color:var(--ink-soft); font-style:italic; }
.lookup-go{ flex:none; border:0; cursor:pointer; font-family:var(--label); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cream); background:var(--navy);
  border-radius:999px; padding:13px 22px; transition:background .3s var(--t), transform .3s var(--t); }
.lookup-go:hover{ background:var(--navy-deep); transform:translateY(-1px); }

.suggestions{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.suggestions li{ margin:0; }
.suggestions button{ width:100%; text-align:left; cursor:pointer; background:var(--cream);
  border:1px solid var(--line); border-radius:10px; padding:13px 18px; font-family:var(--display);
  font-size:17px; color:var(--ink); transition:border-color .25s var(--t), background .25s var(--t); }
.suggestions button:hover{ border-color:var(--navy); background:#fff; }
.suggestions button .s-house{ display:block; font-family:var(--label); font-size:11px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft); margin-top:3px; }

.lookup-miss{ margin-top:16px; text-align:center; font-size:14px; color:var(--ink-soft); min-height:1.2em; }
.lookup-fallback{ margin-top:clamp(22px,3vw,30px); text-align:center; font-size:13.5px; color:var(--ink-soft); }
.lookup-fallback a{ color:var(--navy); border-bottom:1px solid var(--line); padding-bottom:1px; }
.lookup-fallback a:hover{ border-color:var(--navy); }

/* ---------- step: household ---------- */
.household{ display:none; }
.household.show{ display:block; animation:rcfade .5s var(--t) both; }
@keyframes rcfade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.hh-greet{ text-align:center; margin-bottom:clamp(24px,3.6vw,36px); }
.hh-greet .kicker{ display:block; margin-bottom:9px; }
.hh-greet h2{ font-family:var(--display); font-weight:500; font-size:clamp(28px,4vw,46px); }
.hh-greet h2 em{ font-family:var(--script); color:var(--accent); font-style:normal; }
.hh-greet .change{ display:inline-block; margin-top:12px; cursor:pointer; background:none; border:0;
  font-family:var(--label); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  border-bottom:1px solid var(--line); padding:0 0 2px; transition:color .25s var(--t), border-color .25s var(--t); }
.hh-greet .change:hover{ color:var(--navy); border-color:var(--navy); }

.person{ background:var(--cream); border:1px solid var(--line); padding:clamp(18px,2.6vw,26px);
  margin-bottom:16px; }
.person-name{ font-family:var(--display); font-size:clamp(21px,2.4vw,28px); color:var(--navy); margin-bottom:16px; }
.person-q{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin-bottom:14px; }
.pq-label{ font-family:var(--label); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }

/* segmented yes/no */
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--cream); }
.seg label{ position:relative; cursor:pointer; }
.seg input{ position:absolute; opacity:0; pointer-events:none; }
.seg span{ display:block; padding:9px 18px; font-family:var(--label); font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap;
  transition:background .25s var(--t), color .25s var(--t); }
.seg label + label span{ border-left:1px solid var(--line); }
.seg input:checked + span{ background:var(--navy); color:var(--cream); }
.seg.yes input:checked + span{ background:var(--sage); color:var(--navy-deep); }
.seg input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:-2px; }

.person-diet{ margin-top:4px; }
.person-diet.hide{ display:none; }
.person-diet label{ display:block; font-family:var(--label); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:7px; }
.field-input{ width:100%; background:var(--cream); border:1px solid var(--line); border-radius:8px;
  padding:11px 14px; font-family:var(--body); font-size:15.5px; color:var(--ink); outline:none;
  transition:border-color .25s var(--t); }
.field-input:focus{ border-color:var(--navy); }
textarea.field-input{ resize:vertical; min-height:84px; line-height:1.5; }

/* shared contact block */
.hh-shared{ margin-top:clamp(26px,3.6vw,34px); padding-top:clamp(24px,3.4vw,32px); border-top:1px dotted var(--line); }
.hh-shared .shared-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
.field{ display:flex; flex-direction:column; }
.field.full{ grid-column:1 / -1; }
.field > label{ font-family:var(--label); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:7px; }
.field .req{ color:var(--rose); }

/* submit + errors */
.hh-submit{ margin-top:clamp(26px,3.6vw,34px); text-align:center; }
.btn-rsvp{ display:inline-flex; align-items:center; gap:12px; cursor:pointer; border:0;
  font-family:var(--label); font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream); background:var(--navy); padding:18px 50px; border-radius:999px;
  box-shadow:inset 0 0 0 4px var(--navy), inset 0 0 0 5px rgba(244,238,227,.0), 0 16px 32px -20px rgba(41,56,79,.5);
  transition:background .4s var(--t), transform .4s var(--t), box-shadow .4s var(--t); }
.btn-rsvp .ba{ font-family:var(--display); font-size:16px; line-height:1; transition:transform .4s var(--t); }
.btn-rsvp:hover{ background:var(--navy-deep); transform:translateY(-2px);
  box-shadow:inset 0 0 0 4px var(--navy-deep), inset 0 0 0 5px rgba(244,238,227,.4), 0 20px 34px -18px rgba(41,56,79,.55); }
.btn-rsvp:hover .ba{ transform:translateX(5px); }
.btn-rsvp[disabled]{ opacity:.55; pointer-events:none; }
.form-error{ margin-top:16px; color:var(--rose); font-size:14px; font-style:italic; min-height:1.1em; }
.hh-note{ margin-top:14px; font-size:12.5px; color:var(--ink-soft); }

/* ---------- confirmation ---------- */
.rsvp-done{ display:none; text-align:center; }
.rsvp-done.show{ display:block; animation:rcfade .6s var(--t) both; }
.rsvp-done .done-seal{ width:clamp(120px,17vw,170px); margin:0 auto clamp(18px,2.6vw,28px); }
.rsvp-done.show .done-seal img{ animation:sealPress 2s var(--t) both; }
@media (prefers-reduced-motion:reduce){ .rsvp-done.show .done-seal img{ animation:none; } }
.rsvp-done h2{ font-family:var(--display); font-weight:500; font-size:clamp(34px,5vw,60px); line-height:1; }
.rsvp-done h2 em{ font-family:var(--script); color:var(--accent); font-style:normal; }
.rsvp-done p{ max-width:48ch; margin:clamp(16px,2.4vw,22px) auto 0; color:var(--ink-soft);
  font-family:var(--display); font-style:italic; font-size:clamp(18px,1.7vw,22px); line-height:1.55; }
.rsvp-done .done-summary{ margin:clamp(24px,3.4vw,34px) auto 0; max-width:420px; text-align:left;
  background:var(--cream); border:1px solid var(--line); padding:22px 26px; }
.rsvp-done .done-summary .ds-line{ display:flex; justify-content:space-between; gap:14px; padding:9px 0;
  border-bottom:1px dotted var(--line); font-size:15px; }
.rsvp-done .done-summary .ds-line:last-child{ border-bottom:0; }
.rsvp-done .done-summary .ds-name{ font-family:var(--display); font-size:18px; color:var(--navy); }
.rsvp-done .done-summary .ds-status{ font-family:var(--label); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft); text-align:right; align-self:center; }
.rsvp-done .done-foot{ margin-top:clamp(26px,3.6vw,34px); display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.rsvp-done .done-foot a{ font-family:var(--label); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--navy); border:1px solid var(--navy); border-radius:999px; padding:13px 28px;
  transition:background .3s var(--t), color .3s var(--t); }
.rsvp-done .done-foot a:hover{ background:var(--navy); color:var(--cream); }
.rsvp-done .done-edit{ margin-top:18px; }
.rsvp-done .done-edit button{ cursor:pointer; background:none; border:0; font-family:var(--label);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  border-bottom:1px solid var(--line); padding:0 0 2px; }
.rsvp-done .done-edit button:hover{ color:var(--navy); border-color:var(--navy); }

/* sending state */
.rsvp-sending{ position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(244,238,227,.74); z-index:5; }
.rsvp-sending.show{ display:flex; }
.rsvp-sending .dots{ display:flex; gap:8px; }
.rsvp-sending .dots i{ width:10px; height:10px; border-radius:50%; background:var(--navy); opacity:.3;
  animation:rcdot 1s var(--t) infinite; }
.rsvp-sending .dots i:nth-child(2){ animation-delay:.16s; }
.rsvp-sending .dots i:nth-child(3){ animation-delay:.32s; }
@keyframes rcdot{ 0%,100%{ opacity:.3; transform:translateY(0); } 40%{ opacity:1; transform:translateY(-6px); } }

/* ---------- responsive ---------- */
@media (max-width:560px){
  .lookup-field{ flex-direction:column; align-items:stretch; gap:10px; padding:14px; border-radius:18px; }
  .lookup-field input{ text-align:center; padding:6px 0; }
  .lookup-go{ width:100%; padding:14px; }
  .hh-shared .shared-grid{ grid-template-columns:1fr; }
  .person-q{ flex-direction:column; align-items:flex-start; gap:9px; }
  .seg{ width:100%; }
  .seg label{ flex:1; }
  .seg span{ text-align:center; padding:11px 8px; }
  .rsvp-floret{ width:78px; }
}