/* ============================================================
   Personal invitation page (/invite/<slug>)
   Serves both Principal Sponsor and Entourage invitations.
   ============================================================ */
:root{
  --cream:#faf7ee;
  --parchment:#f4efe3;
  --linen:#ece5d3;
  --ink:#322a20;
  --ink-soft:#4f4636;
  --gold:#b8934a;
  --gold-deep:#5f4919;
  --olive:#7c8140;
  --olive-deep:#565b2b;
  --olive-dark:#3e421f;
  --wax:#8e3a28;
  --wax-deep:#6f2b1d;
  --serif:'Cormorant Garamond',Georgia,serif;
  --script:'Great Vibes',cursive;
  --sans:'Jost',sans-serif;
  --line:rgba(184,147,74,.34);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(244,239,227,.86) 0%, rgba(244,239,227,.32) 58%, rgba(244,239,227,0) 80%),
    linear-gradient(180deg, rgba(244,239,227,.2) 0%, rgba(244,239,227,.08) 40%, rgba(244,239,227,.96) 100%),
    url(/media/decor/mayon.webp) center 38%/cover no-repeat,
    var(--parchment);
  background-attachment:scroll;
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
.hidden{display:none!important}
.caps{font-family:var(--sans);text-transform:uppercase;letter-spacing:.24em;font-size:.66rem}
.script{font-family:var(--script);font-weight:400}
.muted{color:var(--ink-soft)}
.italic{font-style:italic}

/* corner botanicals */
body::before,body::after{
  content:"";
  position:fixed;
  width:min(28vw,280px);
  aspect-ratio:1;
  background:url(/media/decor/corner.webp) top left/contain no-repeat;
  opacity:.9;pointer-events:none;z-index:1;
}
body::before{top:56px;left:0}
body::after{bottom:0;right:0;transform:rotate(180deg)}
@media (max-width:768px){body::before,body::after{width:120px;opacity:.55}}

/* nav */
.nav{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem 1.4rem;
  background:rgba(250,247,238,.82);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  backdrop-filter:blur(16px) saturate(1.15);
  border-bottom:1px solid var(--line);
  box-shadow:0 12px 34px rgba(62,66,31,.09);
}
.nav::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,transparent 4%,var(--gold) 30%,#d4b878 50%,var(--gold) 70%,transparent 96%);
  opacity:.85;
}
.nav-logo{font-family:var(--script);font-size:1.7rem;color:var(--wax);text-decoration:none;line-height:1}
.nav-links{display:flex;align-items:center;gap:1.4rem}
.nav-links a:not(.btn){
  font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;transition:color .25s;
}
.nav-links a:not(.btn):hover{color:var(--wax)}
@media (max-width:640px){.nav-links a:not(.btn){display:none}}

/* stage + sheet */
.stage{flex:1;display:flex;align-items:center;justify-content:center;padding:3rem 1.4rem;position:relative;z-index:2}
.sheet{
  width:min(680px,100%);
  text-align:center;
  padding:3.8rem 9% 3.4rem;
  /* letter.webp is cropped to the paper. Drawn as a 9-slice border-image so
     the deckled edge stays a fixed 46px thick however tall the sheet grows
     (expanded details form) — plain 100%/100% stretch scales the soft edge
     with height and pushes it under the content. */
  border:0 solid transparent;
  border-image:url(/media/decor/letter.webp) 46 fill / 46px stretch;
}
@media (max-width:640px){.sheet{padding:2.8rem 8% 2.4rem}}

.names{
  font-family:var(--script);font-size:clamp(1.5rem,3.2vw,2rem);
  color:var(--wax);line-height:1.1;
}
.names .amp{color:#9a7a38;padding:0 .16em}
.seal{
  position:relative;width:84px;height:84px;margin:1.2rem auto 1.4rem;
  border-radius:47% 53% 50% 50%/52% 48% 52% 48%;
  background:radial-gradient(circle at 35% 30%,#a9502f,var(--wax) 55%,var(--wax-deep) 100%);
  box-shadow:0 8px 22px rgba(111,43,29,.4),inset 0 2px 6px rgba(255,255,255,.28),inset 0 -5px 10px rgba(60,20,12,.4);
  display:flex;align-items:center;justify-content:center;
}
.seal.gold{
  background:radial-gradient(circle at 35% 30%,#d4b878,var(--gold) 55%,#8f7135 100%);
  box-shadow:0 8px 22px rgba(143,113,53,.4),inset 0 2px 6px rgba(255,255,255,.35),inset 0 -5px 10px rgba(80,60,25,.35);
}
.seal::after{content:"";position:absolute;inset:10px;border-radius:50%;border:1.5px solid rgba(250,247,238,.42)}
.seal span{font-family:var(--script);font-size:1.7rem;color:var(--cream);transform:translateY(-2px)}

.eyebrow{color:var(--gold-deep);display:block;margin-bottom:.7rem}
.dear{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2.6vw,1.5rem);
  color:var(--gold-deep);letter-spacing:.02em;margin-bottom:.6rem;
}
.ask{
  font-size:clamp(2.1rem,5.4vw,3.1rem);
  color:var(--olive-dark);line-height:1.18;
}
.rule{width:70px;height:1px;margin:1.2rem auto;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
#blurb{max-width:44ch;margin:0 auto}

/* group invitations — the guest list on the sheet */
.members{
  width:min(420px,100%);margin:1.8rem auto 0;
  display:flex;flex-direction:column;gap:.55rem;text-align:left;
}
.member{
  display:flex;align-items:center;justify-content:space-between;gap:.9rem;
  padding:.75rem 1rem;border-radius:3px;cursor:pointer;text-align:left;
  background:rgba(255,254,250,.85);border:1px solid var(--line);
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.member:hover{border-color:var(--gold);transform:translateY(-1px)}
.member.sel{border-color:var(--olive);box-shadow:0 0 0 3px rgba(124,129,64,.18)}
.member.answered{cursor:default;opacity:.88}
.member.answered:hover{border-color:var(--line);transform:none}
.member-name{font-family:var(--serif);font-size:1.08rem;color:var(--ink)}
.member-note{display:block;font-style:italic;color:var(--ink-soft);font-size:.86rem;line-height:1.4;margin-top:.1rem}
/* reply UI nested right below the tapped name */
.reply-slot{display:flex;flex-direction:column;padding:.2rem .2rem .6rem}
.reply-slot .actions{margin-top:.5rem}
.reply-slot .details{margin-top:.9rem}
.tag{
  flex-shrink:0;padding:.2rem .65rem;border-radius:999px;
  font-family:var(--sans);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
}
.tag.ok{background:rgba(124,129,64,.18);color:var(--olive-dark)}
.tag.no{background:rgba(142,58,40,.15);color:var(--wax)}
.tag.wait{background:rgba(184,147,74,.2);color:var(--gold-deep)}

/* buttons */
.btn{
  display:inline-block;font-family:var(--sans);font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  padding:.9rem 1.8rem;border-radius:3px;border:1px solid transparent;cursor:pointer;
  transition:transform .25s,box-shadow .25s,filter .25s,background .25s,color .25s;
}
.btn-sm{padding:.55rem 1.1rem;font-size:.62rem}
.btn-olive{
  background:linear-gradient(180deg,#6b7036,var(--olive-deep));
  color:var(--cream);border-color:#4c5126;
  box-shadow:0 8px 22px rgba(86,91,43,.32);
}
.btn-red{
  background:linear-gradient(180deg,#9d4030,var(--wax-deep));
  color:var(--cream);border-color:#5e2417;
  box-shadow:0 8px 22px rgba(111,43,29,.3);
}
.btn-wax{background:var(--wax);color:var(--cream)}
.btn-olive:hover,.btn-red:hover,.btn-wax:hover{filter:brightness(1.08);transform:translateY(-2px)}
.btn-ghost{border-color:rgba(92,81,64,.4);color:var(--ink-soft);background:rgba(250,247,238,.6)}
.btn-ghost:hover{border-color:var(--wax);color:var(--wax)}
.btn[disabled]{opacity:.5;pointer-events:none}

.actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}
.done-actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem}

/* forms */
.details{margin-top:1.8rem;text-align:left}
.form-title{font-size:2rem;color:var(--olive-dark);text-align:center}
.details .muted{text-align:center}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid .span2{grid-column:1 / -1}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.4rem}
.field label{
  font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft);
}
input,textarea{
  padding:.8rem .95rem;background:rgba(255,254,250,.9);
  border:1px solid var(--line);border-radius:3px;outline:none;
  font-size:16px;                       /* keeps iOS from zooming on focus */
  transition:border-color .2s,box-shadow .2s;
}
input:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,147,74,.18)}
textarea{resize:vertical;font-style:italic}
.err-msg{color:var(--wax);font-style:italic;margin-top:.9rem;text-align:center}
.form-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.6rem}

/* footer */
footer{position:relative;z-index:2;text-align:center;padding:2.4rem 1.4rem 3rem}
footer .script{font-size:1.9rem;color:var(--olive-dark)}
footer .caps{color:var(--gold-deep);display:block;margin-top:.4rem;font-size:.6rem}

/* toast */
.toast{
  position:fixed;bottom:1.4rem;left:50%;transform:translate(-50%,18px);
  background:var(--olive-dark);color:var(--cream);padding:.8rem 1.4rem;border-radius:999px;
  font-family:var(--sans);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:all .35s;z-index:300;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--wax)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}