/* ============================================================
   Nyasha & Watson — Wedding Invitation
   Self-hosted fonts: Bodoni Moda (display), Poppins (body), Great Vibes (names)
   ============================================================ */

@font-face{ font-family:'Bodoni Moda'; src:url('../fonts/BodoniModa_28pt-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Bodoni Moda'; src:url('../fonts/BodoniModa_28pt-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Bodoni Moda'; src:url('../fonts/BodoniModa_28pt-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Bodoni Moda Small'; src:url('../fonts/BodoniModa_9pt-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('../fonts/Poppins-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('../fonts/Poppins-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('../fonts/Poppins-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('../fonts/Poppins-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('../fonts/Poppins-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Great Vibes'; src:url('../fonts/GreatVibes-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }

:root{
  --ivory:#FBF7F0; --ivory-deep:#F3ECDF; --champagne:#F1E3CC; --champagne-line:#E4D2B0;
  --plum:#3E1730; --plum-2:#5A2444; --plum-soft:#9C7089; --coral:#D97F55; --coral-soft:#EAB08C;
  --gold:#B08A46; --gold-bright:#C9A25E; --text:#3A2430; --text-muted:#8B7A6E;
  --border:#E4D5BE; --surface:#FFFDF9; --success:#5C7A5C; --warning:#B9803D; --error:#A73E3E;
  --shadow-soft:0 18px 44px -22px rgba(62,23,48,.35); --shadow-card:0 10px 28px -16px rgba(62,23,48,.28);
  color-scheme:light;
}
*{box-sizing:border-box;}
[hidden]{ display:none !important; }
html{scroll-behavior:smooth; overflow-x:hidden;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }

body{ margin:0; background:var(--ivory); color:var(--text); font-family:'Poppins',sans-serif; font-weight:300; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
/* Sprays deliberately overhang card edges; clip (not hidden) keeps phones from
   widening the page to fit them without turning html/body into scroll containers. */
@supports (overflow-x:clip){ html, body{ overflow-x:clip; } }
body.locked{ overflow:hidden; height:100%; }

h1,h2,h3,h4{ font-family:'Bodoni Moda',serif; font-weight:600; color:var(--plum); margin:0; text-wrap:balance; }
.script{ font-family:'Great Vibes',cursive; font-weight:400; }
p{ margin:0; line-height:1.7; }
a{ color:inherit; }
button{ font-family:inherit; }
img{ max-width:100%; }

.eyebrow{ font-family:'Poppins',sans-serif; font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); font-weight:500; }
.wrap{ max-width:1080px; margin:0 auto; padding-inline:24px; }
.wrap-narrow{ max-width:720px; margin:0 auto; padding-inline:24px; position:relative; }
section{ padding-block:96px; position:relative; }
@media (max-width:640px){ section{ padding-block:64px; } }
.hr-gold{ border:none; height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent); margin-block:28px; }

/* Floral spray accents. The artwork is a diagonal spray (bottom-left to
   top-right) whose densest bloom sits at ~50% x / ~41% y of the image. Each
   spray is centred on a card corner and laid perpendicular to that corner's
   bisector, so it wraps around the corner. --w sets the size, --in how far the
   bloom sits inside the card corner, --rot a slight tilt so the arms follow
   the card edges instead of reaching toward the text. */
.spray{ --w:220px; --in:0px; --rot:0deg; position:absolute; width:var(--w); height:auto; pointer-events:none; z-index:2; user-select:none; filter:drop-shadow(0 6px 10px rgba(62,23,48,.12)); }
.spray--tl{ top:calc(var(--in) - var(--w) * .41); left:calc(var(--in) - var(--w) * .5); transform:rotate(var(--rot)); }
.spray--br{ bottom:calc(var(--in) - var(--w) * .41); right:calc(var(--in) - var(--w) * .5); transform:rotate(calc(180deg + var(--rot))); }
.spray--tr{ top:calc(var(--in) - var(--w) * .41); right:calc(var(--in) - var(--w) * .5); transform:scaleX(-1) rotate(var(--rot)); }
.spray--bl{ bottom:calc(var(--in) - var(--w) * .41); left:calc(var(--in) - var(--w) * .5); transform:scaleY(-1) rotate(var(--rot)); }

/* opening cover */
#cover{ position:fixed; inset:0; z-index:999;
  background:
    radial-gradient(circle at 18% 12%, rgba(201,162,94,.14), transparent 55%),
    radial-gradient(circle at 85% 88%, rgba(217,127,85,.12), transparent 50%),
    var(--ivory);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .9s ease, visibility .9s ease;
}
#cover.opened{ opacity:0; visibility:hidden; pointer-events:none; }
.cover-card{ position:relative; width:min(440px,88vw); padding:52px 30px 40px; background:var(--surface); border:1px solid var(--champagne-line); box-shadow:var(--shadow-soft); text-align:center; transform:translateY(0) scale(1); transition:transform .8s cubic-bezier(.2,.7,.2,1), opacity .8s ease; }
#cover.opened .cover-card{ transform:translateY(-24px) scale(.96); opacity:0; }
.cover-frame{ position:absolute; inset:10px; border:1px solid var(--gold); opacity:.55; pointer-events:none; }
.cover-card .spray{ --w:196px; --in:26px; --rot:-6deg; }
@media (max-width:520px){ .cover-card{ padding-top:74px; } .cover-card .spray{ --w:128px; --in:12px; } }
.cover-eyebrow{ font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--text-muted); }
.cover-rings{ width:38px; height:auto; color:var(--gold); margin:20px auto 6px; display:block; opacity:.85; }
.cover-names{ font-family:'Great Vibes',cursive; font-weight:400; font-size:clamp(3rem,13vw,4rem); line-height:1.3; margin-top:16px; color:var(--plum); -webkit-text-stroke:.9px var(--plum); text-stroke:.9px var(--plum); }
/* The script names carry a plum outline for weight; the ampersand's outline must
   match its own coral fill rather than inherit the plum. */
.cover-amp, .hero-amp, .footer-amp, .brand b{ -webkit-text-stroke-color:currentColor; }
.cover-amp{ color:var(--coral); font-size:.8em; display:inline-block; margin:0 .22em; }
.cover-date{ margin-top:18px; font-family:'Bodoni Moda',serif; font-size:1rem; letter-spacing:.08em; color:var(--plum-2); }
.cover-venue{ margin-top:4px; font-size:.8rem; color:var(--text-muted); }
.open-btn{ margin-top:28px; display:inline-flex; align-items:center; gap:10px; background:var(--plum); color:var(--ivory); border:none; padding:14px 30px; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; cursor:pointer; transition:background .25s ease, transform .25s ease; }
.open-btn:hover{ background:var(--plum-2); transform:translateY(-1px); }
.cover-hint{ margin-top:14px; font-size:.68rem; letter-spacing:.08em; color:var(--text-muted); }

/* nav */
.topnav{ position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between; padding:16px 28px; background:rgba(251,247,240,.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
@media (max-width:820px){ .topnav{ display:none; } }
.brand{ font-family:'Great Vibes',cursive; font-size:1.5rem; color:var(--plum); text-decoration:none; }
.brand b{ color:var(--coral); font-weight:400; }
.navlinks{ display:flex; gap:30px; list-style:none; margin:0; padding:0; }
.navlinks a{ text-decoration:none; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--plum-2); position:relative; padding-bottom:4px; }
.navlinks a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--gold); transition:right .25s ease; }
.navlinks a:hover::after{ right:0; }
.nav-cta{ background:var(--plum); color:var(--ivory); text-decoration:none; padding:10px 20px; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; }

.bottomnav{ display:none; position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:40; background:rgba(62,23,48,.94); backdrop-filter:blur(8px); border-radius:999px; padding:8px; box-shadow:0 14px 30px -14px rgba(62,23,48,.55); }
@media (max-width:820px){ .bottomnav{ display:flex; } }
.bottomnav ul{ display:flex; width:100%; list-style:none; margin:0; padding:0; }
.bottomnav li{ flex:1; }
.bottomnav a{ display:flex; flex-direction:column; align-items:center; gap:3px; text-decoration:none; color:#E9D9CE; font-size:.6rem; letter-spacing:.05em; text-transform:uppercase; padding:8px 2px; border-radius:999px; }
.bottomnav a.active{ color:var(--ivory); background:rgba(255,255,255,.1); }
.bottomnav svg{ width:18px; height:18px; }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px; font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; border:1px solid transparent; cursor:pointer; text-decoration:none; transition:all .22s ease; min-height:48px; }
.btn-primary{ background:var(--plum); color:var(--ivory); } .btn-primary:hover{ background:var(--plum-2); transform:translateY(-1px); }
.btn-outline{ background:transparent; color:var(--plum); border-color:var(--plum); } .btn-outline:hover{ background:var(--plum); color:var(--ivory); }
.btn-gold{ background:var(--gold); color:var(--ivory); } .btn-gold:hover{ background:var(--gold-bright); }
.btn-ghost{ background:var(--champagne); color:var(--plum-2); border-color:var(--champagne-line); } .btn-ghost:hover{ background:var(--champagne-line); }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none !important; }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; }

/* hero */
#home{ padding-top:70px; text-align:center; }
.hero-eyebrow{ font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); }
.hero-names{ font-family:'Great Vibes',cursive; font-weight:400; font-size:clamp(4rem,15vw,7.5rem); line-height:1.25; margin-top:16px; color:var(--plum); -webkit-text-stroke:1.1px var(--plum); text-stroke:1.1px var(--plum); }
.hero-amp{ color:var(--coral); font-size:.7em; display:inline-block; margin:0 .18em; vertical-align:.05em; }
.name-part{ display:inline-block; white-space:nowrap; }
.hero-sub{ margin-top:18px; font-family:'Bodoni Moda',serif; font-size:1.05rem; color:var(--plum-2); letter-spacing:.04em; }
.hero-sub span{ color:var(--text-muted); font-family:'Poppins',sans-serif; }
.invite-hint{ margin-top:14px; display:inline-block; padding:8px 18px; font-size:.8rem; color:var(--plum); background:var(--champagne); border:1px solid var(--champagne-line); border-radius:99px; }
.checkin-banner{ margin-top:14px; display:inline-flex; align-items:center; gap:10px; padding:8px 10px 8px 18px; font-size:.8rem; color:var(--plum-2); background:var(--surface); border:1px solid var(--border); border-radius:99px; }
.checkin-banner.done{ color:var(--success); background:#E7EFE3; border-color:transparent; }
.checkin-banner .btn{ padding:8px 16px; }

.countdown{ display:flex; justify-content:center; gap:14px; margin-top:44px; flex-wrap:wrap; }
.cd-unit{ background:var(--surface); border:1px solid var(--border); min-width:84px; padding:16px 10px; box-shadow:var(--shadow-card); }
.cd-num{ font-family:'Bodoni Moda',serif; font-size:2.1rem; color:var(--plum); font-variant-numeric:tabular-nums; }
.cd-label{ font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-muted); margin-top:4px; }
.hero-cta{ margin-top:44px; justify-content:center; }

.head{ text-align:center; max-width:600px; margin:0 auto 52px; }
.head h2{ font-size:clamp(2rem,5vw,2.8rem); margin-top:10px; }
.head p.lede{ margin-top:16px; color:var(--text-muted); font-size:.98rem; }

.message-card{ background:var(--surface); border:1px solid var(--border); padding:64px 72px 52px; text-align:center; box-shadow:var(--shadow-card); position:relative; }
.message-card .spray{ --w:210px; --in:18px; --rot:-6deg; }
@media (max-width:640px){ .message-card{ padding:68px 22px 48px; } .message-card .spray{ --w:124px; --in:8px; } }
.message-card p{ font-size:1.08rem; color:var(--plum-2); font-family:'Bodoni Moda',serif; font-style:italic; font-weight:400; }
.message-sign{ margin-top:26px; font-family:'Great Vibes',cursive; font-size:1.9rem; color:var(--coral); -webkit-text-stroke:.5px var(--coral); text-stroke:.5px var(--coral); }

.info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:84px; }
@media (max-width:900px){ .info-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .info-grid{ grid-template-columns:1fr; } }
.info-card{ background:var(--surface); border:1px solid var(--border); padding:26px 22px; }
.info-card .ic-label{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.info-card .ic-value{ margin-top:8px; font-family:'Bodoni Moda',serif; font-size:1.3rem; color:var(--plum); }
.info-card .ic-note{ margin-top:6px; font-size:.78rem; color:var(--text-muted); }
.tbc{ display:inline-block; margin-top:8px; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--warning); background:#FBEEDF; border:1px solid #EFD9B8; padding:3px 8px; }

.venue-card{ background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-card); overflow:hidden; }
.venue-top{ padding:44px 40px 8px; }
@media (max-width:640px){ .venue-top{ padding:32px 22px 4px; } }
.venue-map{ height:0; padding-bottom:42%; position:relative; background:var(--champagne); border-top:1px solid var(--border); }
@media (max-width:640px){ .venue-map{ padding-bottom:70%; } }
.venue-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:saturate(.9); }
.venue-facts{ display:flex; gap:26px; flex-wrap:wrap; margin-top:22px; }
.venue-fact{ font-size:.82rem; color:var(--plum-2); display:flex; align-items:center; gap:8px; }
.venue-fact svg{ width:16px; height:16px; color:var(--gold); flex:none; }
.venue-desc{ margin-top:16px; color:var(--text-muted); font-size:.94rem; max-width:60ch; }
.venue-actions{ display:flex; gap:14px; flex-wrap:wrap; padding:26px 40px 40px; }
@media (max-width:640px){ .venue-actions{ padding:22px 22px 32px; } }

.timeline{ position:relative; max-width:640px; margin:0 auto; }
.timeline::before{ content:""; position:absolute; left:86px; top:6px; bottom:6px; width:1px; background:var(--champagne-line); }
@media (max-width:520px){ .timeline::before{ left:64px; } }
.t-item{ position:relative; display:flex; gap:26px; padding-bottom:38px; }
.t-item:last-child{ padding-bottom:0; }
.t-time{ width:86px; flex:none; text-align:right; font-family:'Bodoni Moda',serif; color:var(--plum); font-size:1rem; padding-top:2px; padding-right:16px; white-space:nowrap; }
@media (max-width:520px){ .t-time{ width:64px; font-size:.76rem; padding-right:10px; } }
.t-dot{ position:absolute; left:82px; top:7px; width:9px; height:9px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 4px var(--ivory); }
@media (max-width:520px){ .t-dot{ left:60px; } }
.t-body{ padding-left:34px; }
@media (max-width:520px){ .t-body{ padding-left:26px; } }
.t-title{ font-family:'Poppins',sans-serif; font-weight:500; font-size:.95rem; letter-spacing:.02em; color:var(--text); }
.t-desc{ margin-top:4px; font-size:.82rem; color:var(--text-muted); }
.programme-note{ text-align:center; margin-top:44px; font-size:.8rem; color:var(--text-muted); }

.attire-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:36px; align-items:start; }
@media (max-width:820px){ .attire-grid{ grid-template-columns:1fr; } }
.attire-card{ background:var(--surface); border:1px solid var(--border); padding:34px; box-shadow:var(--shadow-card); }
.attire-tip{ margin-top:16px; padding-top:16px; border-top:1px dashed var(--border); font-family:'Bodoni Moda',serif; font-style:italic; font-size:.98rem; color:var(--plum-2); }
/* palette: tall capsules, like fabric swatches */
.swatches{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:22px; align-items:start; }
.swatch{ text-align:center; min-width:0; }
.swatch-chip{ width:52px; height:118px; margin:0 auto; border-radius:999px; background:var(--c);
  background-image:linear-gradient(160deg, rgba(255,255,255,.35), rgba(255,255,255,0) 45%, rgba(0,0,0,.06));
  box-shadow:0 10px 22px -12px rgba(62,23,48,.45), inset 0 0 0 1px rgba(0,0,0,.06); }
.swatch-chip.is-light{ box-shadow:0 10px 22px -12px rgba(62,23,48,.3), inset 0 0 0 1px var(--champagne-line); }
.swatch-name{ margin-top:12px; font-size:.64rem; line-height:1.4; letter-spacing:.08em; text-transform:uppercase; color:var(--plum-2); }

/* card preview section */
.card-stage{ display:flex; justify-content:center; }
.card-frame{ width:min(460px,90vw); aspect-ratio:1080/1350; box-shadow:var(--shadow-soft); border-radius:4px; overflow:hidden; border:1px solid var(--border); background:var(--ivory); }
.card-frame svg{ width:100%; height:100%; display:block; }
/* the card's RSVP / venue links are invisible over the artwork; only keyboard focus shows */
.card-svg a.wn-hot{ cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent; }
.card-svg a.wn-hot:focus-visible rect{ stroke:var(--gold); stroke-width:4; }

/* rsvp — the stage holds the sprays behind the shell, so the opaque shell hides
   their inner half and the flowers only ever peek out around the corners. */
.rsvp-stage{ position:relative; max-width:640px; margin:0 auto; }
.rsvp-stage .spray{ --w:200px; --in:8px; --rot:-6deg; z-index:0; }
@media (max-width:640px){ .rsvp-stage .spray{ --w:140px; --in:6px; } }
.rsvp-shell{ position:relative; z-index:1; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-soft); }
.rsvp-closed{ padding:40px 30px 38px; text-align:center; }
.rsvp-closed .confirm-badge svg{ color:var(--plum-2); }
.rsvp-closed-mine{ margin:20px auto 0; max-width:420px; padding:12px 16px; background:var(--champagne); border:1px solid var(--champagne-line); font-size:.86rem; color:var(--plum-2); }
.rsvp-closed-mine strong{ color:var(--plum); font-weight:500; }
.rsvp-closed-help{ margin-top:20px; font-size:.82rem; color:var(--text-muted); }
.rsvp-already{ margin:22px 28px 0; padding:12px 16px; background:var(--champagne); border:1px solid var(--champagne-line); font-size:.84rem; color:var(--plum-2); }
.rsvp-already strong{ color:var(--plum); font-weight:500; }
.about-you{ margin-top:28px; padding-top:22px; border-top:1px dashed var(--border); }
.about-you-head{ font-family:'Bodoni Moda',serif; font-size:1.05rem; color:var(--plum); }
.about-you-sub{ margin-top:4px; font-size:.78rem; color:var(--text-muted); }
.about-you .field{ margin-top:16px; }
.chip-group{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ border:1px solid var(--border); background:var(--ivory); color:var(--plum-2); padding:9px 16px; min-height:40px; border-radius:99px; font-family:'Poppins',sans-serif; font-size:.82rem; cursor:pointer; transition:all .18s ease; }
.chip:hover{ border-color:var(--gold); }
.chip[aria-checked="true"]{ background:var(--plum); border-color:var(--plum); color:var(--ivory); }
.rsvp-error{ margin-top:14px; font-size:.82rem; color:var(--error); text-align:right; }
.other-ways{ margin-top:22px; border-top:1px solid var(--border); padding-top:14px; }
.other-ways summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--plum-2); padding:8px 0; }
.other-ways summary::-webkit-details-marker{ display:none; }
.other-ways summary svg{ transition:transform .2s ease; }
.other-ways[open] summary svg{ transform:rotate(180deg); }
.other-ways-sub{ font-size:.78rem; color:var(--text-muted); margin-top:4px; }
.other-ways-list{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px; }
@media (max-width:480px){ .other-ways-list{ grid-template-columns:repeat(2,1fr); } }
.ow-item{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px; border:1px solid var(--border); background:var(--ivory); color:var(--plum-2); font-family:'Poppins',sans-serif; font-size:.76rem; letter-spacing:.04em; cursor:pointer; transition:all .18s ease; }
.ow-item:hover{ border-color:var(--plum); background:var(--champagne); }
.ow-item svg{ width:20px; height:20px; color:var(--coral); }
.ow-item:disabled{ opacity:.45; cursor:not-allowed; }
.confirm-summary{ margin:18px auto 0; max-width:360px; }
.rsvp-progress{ display:flex; gap:6px; padding:22px 28px 0; }
.rp-seg{ flex:1; height:3px; background:var(--border); }
.rp-seg.done{ background:var(--gold); }
.rsvp-body{ padding:32px 34px 36px; }
@media (max-width:560px){ .rsvp-body{ padding:26px 20px 30px; } }
.step-title{ font-size:1.5rem; }
.step-sub{ margin-top:8px; color:var(--text-muted); font-size:.86rem; }
.field{ margin-top:22px; }
.field label{ display:block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--plum-2); margin-bottom:8px; }
.field input[type=text], .field input[type=tel], .field input[type=email], .field textarea{ width:100%; border:1px solid var(--border); background:var(--ivory); padding:13px 14px; font-family:'Poppins',sans-serif; font-size:.92rem; color:var(--text); }
.field input:focus, .field textarea:focus{ outline:2px solid var(--gold); outline-offset:1px; }
.field textarea{ resize:vertical; min-height:88px; }
.phone-row{ display:flex; gap:8px; }
.phone-row select{ flex:none; width:108px; border:1px solid var(--border); background:var(--ivory); padding:13px 8px; font-family:'Poppins',sans-serif; font-size:.82rem; color:var(--text); }
.phone-row input[type=tel]{ flex:1; min-width:0; }
.choice-cards{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:20px; }
.choice-card{ display:flex; align-items:center; gap:14px; border:1px solid var(--border); padding:16px 18px; cursor:pointer; background:var(--ivory); transition:border-color .2s, background .2s; }
.choice-card:hover{ border-color:var(--gold); }
.choice-card input{ accent-color:var(--plum); width:18px; height:18px; flex:none; }
.choice-card .cc-title{ font-family:'Bodoni Moda',serif; font-size:1.1rem; color:var(--plum); }
.choice-card .cc-sub{ font-size:.76rem; color:var(--text-muted); margin-top:2px; }
.choice-card.selected{ border-color:var(--plum); background:var(--champagne); }
.stepper{ display:flex; align-items:center; gap:18px; margin-top:14px; }
.stepper button{ width:42px; height:42px; border:1px solid var(--plum); background:var(--surface); color:var(--plum); font-size:1.2rem; cursor:pointer; }
.stepper button:hover{ background:var(--plum); color:var(--ivory); }
.stepper-count{ font-family:'Bodoni Moda',serif; font-size:1.5rem; min-width:34px; text-align:center; }
.rsvp-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:32px; gap:12px; }
.link-btn{ background:none; border:none; color:var(--text-muted); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; padding:10px; }
.link-btn:hover{ color:var(--plum); }
.summary-row{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--border); font-size:.86rem; }
.summary-row:last-child{ border-bottom:none; }
.summary-row .sr-k{ color:var(--text-muted); }
.summary-row .sr-v{ color:var(--plum-2); text-align:right; max-width:60%; }
.confirm-badge{ width:64px; height:64px; border-radius:50%; background:var(--champagne); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.confirm-badge svg{ width:30px; height:30px; color:var(--success); }
.confirm-badge .cb-pending{ display:none; color:var(--warning); }
#confirmPane.is-pending .confirm-badge{ background:#FBEEDF; }
#confirmPane.is-pending .cb-done{ display:none; }
#confirmPane.is-pending .cb-pending{ display:block; }
.rsvp-deadline{ text-align:center; margin-top:20px; font-size:.78rem; color:var(--text-muted); }
/* clear the bottom-left spray that hangs below the RSVP card on phones */
@media (max-width:640px){ .rsvp-deadline{ margin-top:84px; } }

.save-card-wrap{ text-align:center; }
.card-links{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:22px; }
.card-link{ display:inline-flex; align-items:center; gap:7px; padding:10px 16px; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--plum-2); text-decoration:none; border:1px solid var(--border); background:var(--surface); }
.card-link:hover{ border-color:var(--gold); color:var(--plum); }
.card-link svg{ width:15px; height:15px; color:var(--coral); flex:none; }

.invite-only-note{ text-align:center; margin:48px auto 0; max-width:620px; padding:26px 24px 28px; border-top:1px solid var(--champagne-line); border-bottom:1px solid var(--champagne-line); color:var(--gold); }
.invite-only-note > svg{ width:34px; height:auto; display:block; margin:0 auto 12px; opacity:.85; }
.invite-only-note > p{ text-wrap:balance; font-family:'Bodoni Moda',serif; font-weight:600; font-size:clamp(1.2rem,3.4vw,1.55rem); line-height:1.35; color:var(--plum); letter-spacing:.01em; }
.invite-only-note > span{ display:block; margin-top:8px; font-size:.84rem; color:var(--plum-2); }
/* guest guidelines, under the invitation-only statement */
.guidelines{ margin-top:26px; padding-top:22px; border-top:1px dashed var(--champagne-line); }
.guidelines-head{ font-family:'Poppins',sans-serif; font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); font-weight:500; }
.guidelines-list{ list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; text-align:left; }
@media (max-width:560px){ .guidelines-list{ grid-template-columns:1fr; } }
.guidelines-list li{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; background:var(--surface); border:1px solid var(--border); font-size:.8rem; line-height:1.5; color:var(--text-muted); }
.guidelines-list svg{ width:22px; height:22px; flex:none; color:var(--coral); margin-top:1px; }
.guidelines-list b{ display:block; font-family:'Bodoni Moda',serif; font-weight:600; font-size:.98rem; color:var(--plum); margin-bottom:2px; }

footer{ text-align:center; padding:70px 24px 50px; }
.footer-names{ font-family:'Great Vibes',cursive; font-size:2.4rem; line-height:1.3; color:var(--plum); -webkit-text-stroke:.7px var(--plum); text-stroke:.7px var(--plum); }
.footer-amp{ color:var(--coral); font-size:.75em; display:inline-block; margin:0 .18em; }
.footer-note{ margin-top:10px; font-size:.76rem; color:var(--text-muted); letter-spacing:.04em; }

.toast{ position:fixed; left:50%; bottom:calc(90px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,12px); background:var(--plum); color:var(--ivory); padding:12px 22px; font-size:.8rem; letter-spacing:.04em; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; z-index:80; white-space:nowrap; }
.toast.show{ opacity:1; transform:translate(-50%,0); }
@media (min-width:821px){ .toast{ bottom:30px; } }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* self check-in */
.selfcheck-card{ margin:56px auto 0; max-width:520px; text-align:center; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-card); padding:36px 28px 30px; }
.selfcheck-icon{ width:56px; height:56px; border-radius:50%; background:var(--champagne); color:var(--plum); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.selfcheck-icon svg{ width:28px; height:28px; }
.selfcheck-card h3{ font-size:1.6rem; margin-top:6px; }
.selfcheck-lead{ margin-top:10px; font-size:.9rem; color:var(--plum-2); }
.selfcheck-rule{ margin:14px auto 0; max-width:40ch; font-size:.8rem; color:var(--text-muted); padding:10px 14px; background:var(--ivory); border:1px dashed var(--champagne-line); }
.selfcheck-phone{ text-align:left; max-width:340px; margin-inline:auto; }
.selfcheck-card .btn{ margin-top:22px; }
.selfcheck-status{ margin-top:14px; font-size:.84rem; color:var(--plum-2); min-height:1.2em; }
.selfcheck-status.ok{ color:var(--success); font-weight:500; }
.selfcheck-status.warn{ color:var(--warning); }
.selfcheck-card.done{ border-color:#CFE0CB; background:#F4F8F2; }
.selfcheck-card.done .selfcheck-icon{ background:#E7EFE3; color:var(--success); }