/* ============ DESIGN TOKENS ============ */
:root{
  --cream:#FAF7F2;
  --paper:#FFFEFB;
  --ticket:#F2E8D7;
  --ticket-line:#E4D5B8;
  --beige:#D9C3A5;
  --ink:#262626;
  --ink-soft:#6B6156;
  --pink:#EF5F76;
  --pink-deep:#D8435B;
  --pink-dusty:#E9A1A7;
  --pink-wash:#FBE9EA;
  --burgundy:#7F2935;
  --blue:#6D8EA3;
  --blue-wash:#EAF0F3;
  --line: rgba(38,38,38,.13);
  --line-strong: rgba(38,38,38,.24);

  --font-display:"Fraunces","Iowan Old Style",Georgia,serif;
  --font-body:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:"Space Mono","SFMono-Regular",Consolas,monospace;
  --font-hand:"Caveat",cursive;

  --wrap:1160px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; text-wrap:balance; font-weight:400; }
p{ margin:0; }
button{ font-family:inherit; }
svg{ display:block; }
::selection{ background:var(--pink); color:#fff; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }

section{ padding:100px 0; position:relative; }
@media (max-width:760px){ section{ padding:64px 0; } }

/* One-off section padding overrides, targeted by the page's own anchor IDs
   rather than extra classes. */
#facts{ padding-top:50px; padding-bottom:0; }
#kids{ padding-top:0; }

.eyebrow{
  font-family:var(--font-mono); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--burgundy);
  display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{ content:""; width:16px; height:1.5px; background:var(--burgundy); display:inline-block; }
.eyebrow-center{ justify-content:center; }

.h2{
  font-family:var(--font-display); font-weight:600; color:var(--ink);
  font-size:clamp(32px,4.6vw,52px); line-height:1.08; letter-spacing:-.01em;
  margin-top:16px; max-width:14ch;
}
.lede{ font-size:17.5px; color:var(--ink-soft); max-width:52ch; margin-top:18px; }
.lede-center{ margin-left:auto; margin-right:auto; }
.lede-tight{ margin-top:8px; }

.btn{
  display:inline-flex; align-items:center; gap:9px; justify-content:center;
  font-weight:700; font-size:15px; font-family:var(--font-body);
  padding:15px 30px; border-radius:999px;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  transition:transform .15s ease, opacity .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
@media (prefers-reduced-motion: reduce){ .btn{ transition:none; } }
.btn:hover{ transform:translateY(-1px); }
.btn:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; }
.btn-primary{ background:var(--pink); color:#fff; }
.btn-primary:hover{ background:var(--pink-deep); }
.btn-outline{ background:transparent; border-color:var(--line-strong); color:var(--ink); }
.btn-outline:hover{ border-color:var(--ink); }
.btn-ghost{ background:transparent; border:none; padding:15px 6px; color:var(--ink); text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--line-strong); }
.btn-ghost:hover{ text-decoration-color:var(--ink); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; transform:none; }

.tint-beige{ background:var(--ticket); }
.tint-blue{ background:var(--blue-wash); }
.tint-pink{ background:var(--pink-wash); }

/* ============ SR-ONLY / ICONS ============ */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ============ NAV ============ */
.nav{ position:sticky; top:0; z-index:80; background:rgba(250,247,242,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 28px; max-width:var(--wrap); margin:0 auto; }
.brand{ font-family:var(--font-display); font-weight:600; font-size:21px; text-decoration:none; color:var(--ink); letter-spacing:-.01em; display:flex; align-items:baseline; gap:1px; }
.brand em{ font-style:italic; color:var(--pink); font-weight:500; }
.navlinks{ display:flex; gap:28px; list-style:none; margin:0; padding:0; font-weight:600; font-size:13.5px; }
.navlinks a{ text-decoration:none; opacity:.72; }
.navlinks a:hover{ opacity:1; }
.navright{ display:flex; align-items:center; gap:18px; flex-shrink:0; }
.navrsvp{ padding:10px 20px; font-size:13.5px; }
.navburger{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
.navburger span{ display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; }
@media (max-width:860px){ .navlinks{ display:none; } .navburger{ display:block; } }
.mobilemenu{ display:none; flex-direction:column; gap:2px; padding:6px 28px 18px; border-top:1px solid var(--line); }
.mobilemenu.open{ display:flex; }
.mobilemenu a{ text-decoration:none; color:var(--ink); font-weight:600; font-size:15px; padding:10px 0; border-bottom:1px solid var(--line); }

/* ============ HERO ============ */
.hero{ padding:56px 0 0; overflow:hidden; }
.hero-inner{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:20px; position:relative; }
@media (max-width:900px){ .hero-inner{ grid-template-columns:1fr; text-align:center; } }

.hero-copy{ position:relative; z-index:2; }
.hero-kicker{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.hero-names{ font-family:var(--font-display); font-weight:600; font-size:clamp(48px,8.4vw,96px); line-height:.98; letter-spacing:-.02em; margin-top:14px; }
.hero-names .amp{ font-style:italic; color:var(--pink); font-weight:500; }
.hero-married{ font-family:var(--font-hand); color:var(--burgundy); font-size:clamp(22px,2.6vw,30px); margin-top:2px; display:block; }
.hero-date{ font-family:var(--font-display); font-weight:600; font-size:clamp(30px,4vw,42px); color:var(--ink); margin-top:22px; font-variant-numeric:tabular-nums; }
.hero-loc{ font-family:var(--font-mono); font-weight:700; font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:6px; }
.hero-loc-dark{ color:rgba(250,247,242,.55); margin-top:10px; }
.hero-dest{ margin-top:26px; font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--pink-deep); font-weight:700; }
.hero-cta{ display:flex; align-items:center; gap:22px; margin-top:30px; flex-wrap:wrap; }
@media (max-width:900px){ .hero-cta{ justify-content:center; } }
.hero-scroll{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-decoration:none; color:var(--ink-soft); display:inline-flex; align-items:center; gap:6px; }
.hero-scroll svg{ width:13px; height:13px; animation:bob 2.2s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(4px);} }
@media (prefers-reduced-motion: reduce){ .hero-scroll svg{ animation:none; } }

.hero-media{ position:relative; display:flex; justify-content:center; align-items:flex-end; min-height:360px; }
.hero-media img{ width:100%; max-width:310px; position:relative; z-index:2; filter:drop-shadow(0 30px 40px rgba(38,29,20,.16)); }
@media (max-width:900px){ .hero-media{ margin-top:8px; } .hero-media img{ max-width:220px; } }
.hero-blob{ position:absolute; width:420px; height:420px; border-radius:50%; background:var(--pink-wash); left:50%; top:52%; transform:translate(-50%,-50%); z-index:0; }
@media (max-width:900px){ .hero-blob{ width:300px; height:300px; } }
.hero-heart{ position:absolute; width:60px; opacity:.5; pointer-events:none; z-index:1; animation:drift 7s ease-in-out infinite; }
.hero-heart-1{ top:6%; left:2%; --r:-8deg; }
.hero-heart-2{ bottom:10%; right:0%; width:44px; --r:10deg; animation-delay:1.4s; }
@keyframes drift{ 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); } 50%{ transform:translateY(-14px) rotate(var(--r,0deg)); } }
@media (prefers-reduced-motion: reduce){ .hero-heart{ animation:none; } }

/* ============ QUICK FACTS ============ */
.facts{ padding:34px 0; }
.facts-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
@media (max-width:700px){ .facts-grid{ grid-template-columns:1fr 1fr; row-gap:26px; } }
.fact{ padding:0 30px; border-left:1.5px dashed var(--line-strong); text-align:left; }
.fact:first-child{ border-left:none; }
@media (max-width:700px){ .fact:nth-child(odd){ border-left:none; } .fact{ padding:0 18px; border-left:1.5px dashed var(--line-strong); } .fact:nth-child(1),.fact:nth-child(2){ padding-top:0; } }
.fact-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--burgundy); font-weight:700; }
.fact-value{ font-family:var(--font-display); font-size:20px; font-weight:600; margin-top:8px; line-height:1.25; }

/* ============ SECTION HEADER ============ */
.shead{ max-width:640px; }
.shead.center{ margin:0 auto; text-align:center; }

/* ============ THE WEDDING (timeline) ============ */
.wed-layout{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:start; margin-top:56px; }
@media (max-width:900px){ .wed-layout{ grid-template-columns:1fr; gap:40px; } }
.wed-art{ position:relative; }
.wed-art img{ width:100%; max-width:250px; margin:0 auto; }
.timeline{ display:flex; flex-direction:column; }
.stop{ display:grid; grid-template-columns:90px 1fr; gap:22px; padding:26px 0; border-top:1.5px dashed var(--line-strong); }
.stop:first-child{ border-top:none; }
.stop-time{ font-family:var(--font-mono); font-weight:700; font-size:15px; color:var(--ink-soft); padding-top:3px; font-variant-numeric:tabular-nums; }
.stop-gate{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--pink-deep); font-weight:700; display:block; margin-bottom:6px; }
.stop-name{ font-family:var(--font-display); font-size:24px; font-weight:600; }
.stop-place{ color:var(--ink-soft); font-size:15px; margin-top:5px; }
.wed-note{ margin-top:30px; font-size:16px; color:var(--ink-soft); max-width:52ch; }
.wed-btns{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }
.wed-btns .btn{ padding:12px 20px; font-size:13.5px; }

/* ============ THE WEEKEND (cards) ============ */
.weekend-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px; }
@media (max-width:860px){ .weekend-grid{ grid-template-columns:1fr; } }
.wcard{ background:var(--paper); border:1.5px solid var(--line); border-radius:24px; padding:30px 26px 28px; display:flex; flex-direction:column; min-height:290px; }
.wcard-day{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; }
.wcard-title{ font-family:var(--font-display); font-size:26px; font-weight:600; margin-top:10px; }
.wcard-body{ font-size:15.5px; color:var(--ink-soft); margin-top:14px; flex:1; }
.wcard-tag{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--pink-deep); font-weight:700; margin-top:18px; display:inline-block; border:1px dashed var(--pink-dusty); border-radius:999px; padding:6px 12px; width:fit-content; }
.wcard-main{ border-color:var(--pink-dusty); background:var(--pink-wash); position:relative; overflow:hidden; }
.wcard-clip{ position:relative; overflow:hidden; }
.wcard-art{ position:absolute; right:-18px; bottom:-16px; width:88px; opacity:.9; pointer-events:none; }
.wcard-art-sm{ width:74px; right:-10px; bottom:-12px; opacity:.85; }
@media (max-width:860px){ .wcard{ min-height:0; } }

/* ============ TRAVEL ============ */
.travel-top{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center; }
@media (max-width:900px){ .travel-top{ grid-template-columns:1fr; } }
.travel-top img{ max-width:265px; margin:0 auto; }
.travel-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:48px; }
@media (max-width:900px){ .travel-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .travel-grid{ grid-template-columns:1fr; } }
.tcard{ background:var(--paper); border:1.5px solid var(--line); border-radius:18px; padding:22px 20px; }
.tcard-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--burgundy); font-weight:700; }
.tcard-body{ font-size:14.5px; color:var(--ink-soft); margin-top:10px; }
.goodknow{ margin-top:26px; background:var(--blue-wash); border-radius:18px; padding:22px 26px; display:flex; gap:16px; align-items:flex-start; }
.goodknow svg{ width:22px; height:22px; color:var(--blue); flex-shrink:0; margin-top:2px; }
.goodknow-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); font-weight:700; }
.goodknow p{ font-size:15px; color:var(--ink); margin-top:6px; }

/* ============ STAY ============ */
.stay-lede-row{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.book-early{ font-family:var(--font-display); font-style:italic; font-weight:600; font-size:22px; color:var(--pink-deep); }
.stay-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
@media (max-width:900px){ .stay-grid{ grid-template-columns:1fr; } }
.scard{ border:1.5px solid var(--line); border-radius:22px; padding:28px 24px; background:var(--paper); display:flex; flex-direction:column; }
.scard-tag{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--pink-deep); font-weight:700; background:var(--pink-wash); border-radius:999px; padding:6px 12px; width:fit-content; margin-bottom:14px; }
.scard-tag.quiet{ color:var(--ink-soft); background:var(--ticket); }
.scard-title{ font-family:var(--font-display); font-size:22px; font-weight:600; }
.scard-body{ font-size:15px; color:var(--ink-soft); margin-top:12px; flex:1; }
.scard-note{ font-size:13.5px; color:var(--ink-soft); margin-top:14px; font-style:italic; }
.scard .btn{ margin-top:18px; padding:11px 18px; font-size:13.5px; align-self:flex-start; }

/* ============ WEAR ============ */
.wear-layout{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
@media (max-width:900px){ .wear-layout{ grid-template-columns:1fr; text-align:center; gap:36px; } }
.wear-layout img{ max-width:310px; margin:0 auto; }
.wear-copy .h2{ max-width:11ch; }
@media (max-width:900px){ .wear-copy .h2{ margin-left:auto; margin-right:auto; } .wear-copy .lede{ margin-left:auto; margin-right:auto; } }

/* ============ GIFTS ============ */
.gifts-inner{ display:flex; align-items:center; gap:40px; justify-content:center; text-align:center; flex-direction:column; max-width:560px; margin:0 auto; }
.gifts-inner img{ width:135px; }

/* ============ KIDS ============ */
.kids-inner{ display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center; background:var(--paper); border:1.5px solid var(--line); border-radius:24px; padding:36px 40px; }
@media (max-width:640px){ .kids-inner{ grid-template-columns:1fr; text-align:center; padding:30px 26px; } }
.kids-inner svg{ width:56px; height:56px; color:var(--pink); flex-shrink:0; }
@media (max-width:640px){ .kids-inner svg{ margin:0 auto; } }
.h2-kids{ font-size:clamp(24px,3vw,30px); max-width:none; }
.kids-note{ font-family:var(--font-hand); font-size:20px; color:var(--burgundy); margin-top:8px; display:block; }

/* ============ RSVP ============ */
.rsvp-section{ background:var(--ink); color:var(--cream); border-radius:40px; padding:64px 0; position:relative; overflow:hidden; }
@media (max-width:760px){ .rsvp-section{ border-radius:26px; padding:44px 0; } }
.rsvp-section .eyebrow{ color:var(--pink-dusty); }
.rsvp-section .eyebrow::before{ background:var(--pink-dusty); }
.rsvp-section .h2{ color:var(--cream); }
.disco-ball-art{ position:absolute; top:-40px; right:6%; width:96px; opacity:.9; pointer-events:none; }
.rsvp-section .lede{ color:rgba(250,247,242,.68); }
.rsvp-wrap{ max-width:640px; margin:0 auto; padding:0 28px; }
.rsvp-card{ background:var(--cream); color:var(--ink); border-radius:26px; padding:40px 36px; margin-top:44px; box-shadow:0 40px 80px -30px rgba(0,0,0,.5); }
@media (max-width:600px){ .rsvp-card{ padding:28px 22px; border-radius:20px; } }

.rprogress{ display:flex; align-items:center; gap:10px; margin-bottom:28px; }
.rprogress-track{ flex:1; height:5px; background:var(--line); border-radius:99px; overflow:hidden; }
.rprogress-fill{ height:100%; background:var(--pink); border-radius:99px; transition:width .35s ease; width:16.6%; }
@media (prefers-reduced-motion: reduce){ .rprogress-fill{ transition:none; } }
.rprogress-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; }
/* The progress bar only means something once JS drives step-by-step
   navigation; without JS every step is visible at once. */
.rprogress{ display:none; }
.js .rprogress{ display:flex; }

/* Every step is visible by default so the form keeps working without JS.
   Only once JS is confirmed running (html.js) do we switch to one-step-at-a-time. */
.js .rstep{ display:none; }
.js .rstep.active{ display:block; animation:stepin .3s ease; }
@keyframes stepin{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion: reduce){ .js .rstep.active{ animation:none; } }
.rstep + .rstep{ margin-top:40px; padding-top:32px; border-top:1.5px dashed var(--line-strong); }

.rstep-title{ font-family:var(--font-display); font-size:25px; font-weight:600; }
.rstep-sub{ font-size:14.5px; color:var(--ink-soft); margin-top:6px; }

.field{ margin-top:22px; }
.field label{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; margin-bottom:8px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea{
  width:100%; border:1.5px solid var(--line-strong); border-radius:12px; padding:13px 15px; font-family:var(--font-body); font-size:15.5px; color:var(--ink); background:var(--paper);
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--pink); }
.field textarea{ resize:vertical; min-height:80px; }
.field-hint{ font-size:12.5px; color:var(--ink-soft); margin-top:6px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }

/* Choice / check pills are native radio or checkbox inputs, visually hidden,
   paired with an adjacent label styled as the pill. The :checked sibling
   selector drives the selected look without any JS. */
.choice-input, .check-input{ position:absolute; opacity:0; width:1px; height:1px; overflow:hidden; }
.choice-row{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
.choice{ flex:1; min-width:130px; border:1.5px solid var(--line-strong); border-radius:14px; padding:16px; text-align:center; cursor:pointer; font-weight:700; font-size:15px; background:var(--paper); transition:border-color .15s ease, background .15s ease; }
.choice:hover{ border-color:var(--ink); }
.choice-input:checked + .choice{ border-color:var(--pink); background:var(--pink-wash); color:var(--pink-deep); }
.choice-input:focus-visible + .choice{ outline:3px solid var(--blue); outline-offset:2px; }
.choice-sm{ padding:11px; font-size:13.5px; flex:1; min-width:80px; }

.stepper{ display:inline-flex; align-items:center; gap:0; border:1.5px solid var(--line-strong); border-radius:12px; overflow:hidden; margin-top:8px; }
.stepper button{ width:42px; height:42px; border:none; background:var(--paper); font-size:18px; cursor:pointer; color:var(--ink); }
.stepper button:hover{ background:var(--ticket); }
.stepper input[type="number"]{
  width:46px; height:42px; text-align:center; font-family:var(--font-mono); font-weight:700; font-size:15px;
  border:none; border-left:1.5px solid var(--line-strong); border-right:1.5px solid var(--line-strong);
  background:var(--paper); color:var(--ink); appearance:textfield;
}
.stepper input[type="number"]::-webkit-inner-spin-button,
.stepper input[type="number"]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }

.check-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.check{ border:1.5px solid var(--line-strong); border-radius:999px; padding:9px 16px; font-size:13.5px; font-weight:600; cursor:pointer; background:var(--paper); }
.check-input:checked + .check{ border-color:var(--pink); background:var(--pink-wash); color:var(--pink-deep); }
.check-input:focus-visible + .check{ outline:3px solid var(--blue); outline-offset:2px; }

.drink-row{ display:flex; gap:16px; align-items:flex-start; margin-top:10px; }
.drink-row img{ width:48px; flex-shrink:0; margin-top:4px; }
.drink-row .field{ margin-top:0; flex:1; }

.rnav{ display:flex; justify-content:space-between; align-items:center; margin-top:32px; gap:14px; }
/* Back/Next only make sense once JS is driving one step at a time. */
.rnav [data-back], .rnav [data-next]{ display:none; }
.js .rnav [data-back], .js .rnav [data-next]{ display:inline-flex; }
.js .rstep [type="submit"]{ display:none; }
.js .rstep.active [type="submit"]{ display:inline-flex; }

.rsuccess{ text-align:center; padding:16px 4px 6px; position:relative; }
.rsuccess-title{ font-family:var(--font-display); font-size:30px; font-weight:600; position:relative; z-index:1; }
.rsuccess-body{ margin-top:12px; font-family:var(--font-hand); font-size:22px; color:var(--burgundy); position:relative; z-index:1; }
.rsuccess-confetti{ position:absolute; inset:-20px -10px auto -10px; width:calc(100% + 20px); opacity:.5; z-index:0; pointer-events:none; }
.rsuccess-portrait{ position:relative; z-index:1; width:112px; margin:0 auto 10px; }
.confetti-piece{ position:fixed; top:-5%; z-index:200; pointer-events:none; border-radius:2px; }

/* ============ FAQ ============ */
.faq-list{ margin-top:48px; max-width:760px; }
.faq-item{ border-top:1.5px dashed var(--line-strong); }
.faq-item:last-child{ border-bottom:1.5px dashed var(--line-strong); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 2px; background:none; border:none; text-align:left; cursor:pointer; font-family:var(--font-display); font-size:19px; font-weight:600; color:var(--ink); }
.faq-q .plus{ flex-shrink:0; width:22px; height:22px; position:relative; }
.faq-q .plus::before,.faq-q .plus::after{ content:""; position:absolute; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.faq-q .plus::before{ left:0; top:50%; width:100%; height:2px; transform:translateY(-50%); }
.faq-q .plus::after{ top:0; left:50%; width:2px; height:100%; transform:translateX(-50%); }
.faq-item.open .plus::after{ opacity:0; transform:translateX(-50%) rotate(90deg); }
@media (prefers-reduced-motion: reduce){ .faq-q .plus::before,.faq-q .plus::after{ transition:none; } }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
@media (prefers-reduced-motion: reduce){ .faq-a{ transition:none; } }
.faq-a p{ padding:0 2px 24px; font-size:15.5px; color:var(--ink-soft); max-width:64ch; }
/* Without JS there is no click handler to expand an item, so every answer
   stays open and readable by default. */
.js .faq-a{ max-height:0; }
.js .faq-item.open .faq-a{ max-height:none; }

/* ============ CONTACT ============ */
.contact-inner{ text-align:center; max-width:520px; margin:0 auto; }
.h2-contact{ max-width:34ch; font-size:clamp(24px,3vw,32px); }
.contact-btns{ display:flex; gap:16px; justify-content:center; margin-top:32px; flex-wrap:wrap; }
.wa-btn{ display:inline-flex; align-items:center; gap:10px; background:var(--paper); border:1.5px solid var(--line-strong); border-radius:999px; padding:14px 24px; text-decoration:none; color:var(--ink); font-weight:700; font-size:14.5px; }
.wa-btn:hover{ border-color:var(--ink); }
.wa-btn svg{ width:18px; height:18px; color:#2FAE60; }

/* ============ FOOTER ============ */
.foot{ background:var(--ink); color:var(--cream); padding:64px 0 40px; position:relative; overflow:hidden; }
.foot-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; position:relative; z-index:1; }
.foot-brand{ font-family:var(--font-display); font-weight:600; font-size:26px; }
.foot-brand em{ font-style:italic; color:var(--pink-dusty); }
.foot-meta{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(250,247,242,.6); margin-top:6px; }
.foot-meta-tight{ margin-top:2px; }
.foot-sign{ font-family:var(--font-hand); font-size:24px; color:var(--pink-dusty); margin-top:22px; }
.foot-cadillac{ position:absolute; width:160px; right:-30px; bottom:-30px; opacity:.9; pointer-events:none; }
@media (max-width:700px){ .foot-cadillac{ width:110px; right:-20px; bottom:-16px; opacity:.6; } }

/* ============ MOBILE STICKY RSVP ============ */
.stickybar{ display:none; }
@media (max-width:760px){
  .stickybar{ display:flex; position:fixed; left:14px; right:14px; bottom:14px; z-index:70; }
  .stickybar .btn{ width:100%; box-shadow:0 12px 24px -8px rgba(0,0,0,.35); }
  /* The bar exists to get people to the RSVP form; once that form is
     on screen it would only sit on top of the form's own buttons. */
  .stickybar.at-rsvp{ display:none; }
}

/* ============ REVEAL (progressive enhancement) ============ */
.reveal{ opacity:1; transform:none; }
html.reveal-ready .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
html.reveal-ready .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ html.reveal-ready .reveal{ opacity:1; transform:none; transition:none; } }

/* ============ MISC ============ */
.disco-spin{ animation:spin 22s linear infinite; }
@keyframes spin{ from{ transform:rotate(0);} to{ transform:rotate(360deg);} }
@media (prefers-reduced-motion: reduce){ .disco-spin{ animation:none; } }
.sway{ animation:sway 6s ease-in-out infinite; transform-origin:50% 100%; }
@keyframes sway{ 0%,100%{ transform:rotate(-1.2deg);} 50%{ transform:rotate(1.2deg);} }
@media (prefers-reduced-motion: reduce){ .sway{ animation:none; } }