/* Tyler & Megan — dark academia wedding site */

:root {
  --bg: #1b1610;
  --cream: #F8F4E3;
  --gold: #C4A95B;
  --burgundy: #7B1E28;
  --burgundy-hover: #8f2530;
  --green: #166D3B;
  --green-hover: #1a8047;
  --sage: #98AE87;
  --rose: #B77C87;
  --ink: #2a1c12;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: 'EB Garamond', serif;
  overflow-x: hidden;
}
/* Subtle paper grain over the whole page — sells the "pressed stationery / dark academia" feel
   without competing with content. Fixed, non-interactive, and very low opacity. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--burgundy); color: var(--cream); }
input::placeholder, textarea::placeholder { color: rgba(248,244,227,0.32); }

a { color: inherit; }

/* ========== Motion ========== */
@keyframes tmDrift {
  0%, 100% { transform: translateY(var(--py, 0px)) rotate(var(--r, 0deg)); }
  50% { transform: translateY(calc(var(--py, 0px) - 14px)) rotate(var(--r, 0deg)); }
}
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.85s cubic-bezier(.22,.7,.2,1), transform 0.85s cubic-bezier(.22,.7,.2,1); }
.reveal.is-revealed { opacity: 1; transform: none; }

@keyframes tmHeroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
[data-hi] { animation: tmHeroIn 0.9s cubic-bezier(.22,.7,.2,1) both; }
[data-hi="1"] { animation-delay: 0.08s; } [data-hi="2"] { animation-delay: 0.22s; }
[data-hi="3"] { animation-delay: 0.36s; } [data-hi="4"] { animation-delay: 0.47s; }
[data-hi="5"] { animation-delay: 0.56s; } [data-hi="6"] { animation-delay: 0.70s; }
[data-hi="7"] { animation-delay: 0.82s; } [data-hi="8"] { animation-delay: 0.93s; }
[data-hi="9"] { animation-delay: 1.06s; }

@keyframes tmLineDraw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.timeline-line { transform: scaleY(0); transform-origin: top center; }
.reveal.is-revealed .timeline-line { animation: tmLineDraw 0.6s cubic-bezier(.22,.7,.2,1) both 0.45s; }

.faq-a { overflow: hidden; transition: max-height 0.45s cubic-bezier(.22,.7,.2,1); max-height: 0; }
.faq-item.is-open .faq-a { max-height: 420px; }

nav a[data-active] { color: var(--gold) !important; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-revealed, [data-hi], .timeline-line { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ========== Buttons / shared bits ========== */
.btn {
  text-decoration: none;
  display: inline-block;
  padding: 15px 34px;
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: 'EB Garamond', serif;
  background: transparent;
}
.btn--solid { background: var(--burgundy); color: var(--cream); border-color: var(--burgundy); }
.btn--solid:hover { background: var(--burgundy-hover); border-color: var(--gold); }
.btn--outline { color: var(--gold); border-color: rgba(196,169,91,0.55); }
.btn--outline:hover { background: rgba(196,169,91,0.12); }
.btn--green { background: var(--green); color: var(--cream); border-color: var(--green); }
.btn--green:hover { background: var(--green-hover); border-color: var(--gold); }
.btn--small { padding: 13px 26px; font-size: 12.5px; letter-spacing: 2px; }

.section-eyebrow { font-size: 13px; letter-spacing: 5px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.section-title { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(36px,5vw,52px); line-height: 1.05; margin: 0; color: var(--cream); }
.section-divider { display: flex; align-items: center; justify-content: center; gap: 14px; color: rgba(196,169,91,0.6); margin: 14px 0 0; }
.section-divider .line { width: 60px; height: 1px; background: rgba(196,169,91,0.4); }
.section-divider .mark { font-size: 20px; }
/* Section-header dividers draw in when the header scrolls into view. */
.section-header .section-divider .line { width: 0; transition: width 0.75s cubic-bezier(0.22,1,0.36,1) 0.15s; }
.section-header.is-revealed .section-divider .line { width: 60px; }
.section-header .section-divider .mark { opacity: 0; transform: scale(0.6); transition: opacity 0.5s ease 0.4s, transform 0.5s ease 0.4s; }
.section-header.is-revealed .section-divider .mark { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .section-header .section-divider .line { width: 60px; transition: none; }
  .section-header .section-divider .mark { opacity: 1; transform: none; transition: none; }
}
.section-header { text-align: center; max-width: 760px; margin: 0 auto 48px; }

.botanical { position: absolute; pointer-events: none; line-height: 1; animation: tmDrift 12s ease-in-out infinite; }

/* ========== Nav ========== */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 28px;
  padding: 16px 40px;
  background: rgba(22,18,13,0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(196,169,91,0.22);
}
.nav__brand { text-decoration: none; font-family: 'Cormorant Garamond', serif; font-size: 24px; letter-spacing: 5px; color: var(--gold); }
.nav__brand span { opacity: .55; }
.nav__links { display: flex; flex-wrap: wrap; gap: 24px; font-size: 12.5px; letter-spacing: 2.5px; text-transform: uppercase; }
.nav__link { text-decoration: none; color: rgba(248,244,227,0.74); }
.nav__link:hover { color: var(--gold); }
.nav__rsvp { text-decoration: none; color: var(--gold); border: 1px solid rgba(196,169,91,0.55); padding: 6px 16px; }
.nav__rsvp:hover { background: var(--gold); color: var(--bg); }
.nav__hamburger {
  display: none; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(196,169,91,0.4);
  cursor: pointer; color: var(--gold); padding: 7px 13px; font-size: 20px; line-height: 1;
}

.nav-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(12,9,6,0.97);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.nav-overlay.is-open { opacity: 1; pointer-events: auto; }
.nav-overlay__close {
  position: absolute; top: 22px; right: 24px;
  background: transparent; border: 0; cursor: pointer;
  font-size: 28px; color: rgba(196,169,91,0.75); line-height: 1; padding: 8px;
}
.nav-overlay__brand { font-family: 'Cormorant Garamond', serif; font-size: 28px; letter-spacing: 6px; color: var(--gold); margin-bottom: 32px; }
.nav-overlay__link {
  text-decoration: none; font-family: 'Cormorant Garamond', serif;
  font-size: 32px; color: var(--cream); padding: 10px 0; letter-spacing: 2px;
}
.nav-overlay__link:hover { color: var(--gold); }
.nav-overlay__rsvp {
  text-decoration: none; font-size: 18px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(196,169,91,0.55); padding: 14px 40px; margin-top: 24px;
}
.nav-overlay__rsvp:hover { background: var(--gold); color: var(--bg); }

/* ========== Hero ========== */
#home {
  position: relative; min-height: 90vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 70px 24px 90px;
  /* Distinct sections with blended edges. Each section has its own body color (kept solid across its
     middle, 22%-78%) and blends only in a band at its top/bottom edges. Adjacent sections use
     different color families (green / bronze / burgundy / warm) so neighbors never look identical,
     and each section's BOTTOM color is the exact hex used as the NEXT section's TOP color (a blend
     of the two bodies), so the transition band straddles the seam smoothly. Home keeps its hero
     radial glow (nothing sits above it) and just resolves its bottom to the home/story handoff. */
  background: radial-gradient(135% 108% at 50% 0%, #29332a 0%, #1d2620 40%, #201d1d 100%);
  overflow: hidden; scroll-margin-top: 80px;
}
.hero-botanicals { position: absolute; inset: 0; pointer-events: none; }

.hero-card {
  position: relative; z-index: 2;
  width: min(620px, 92vw);
  padding: 28px 46px 46px;
  background: linear-gradient(160deg, #f6f0de, #ece2c9);
  box-shadow: 0 28px 64px rgba(0,0,0,0.55);
  text-align: center;
}
.hero-card__frame { position: absolute; inset: 14px; border: 1px solid rgba(123,30,40,0.3); pointer-events: none; }
.hero-card__corner { position: absolute; font-size: 24px; color: rgba(123,30,40,0.45); }
.hero-card__corner--tl { top: 20px; left: 22px; }
.hero-card__corner--tr { top: 20px; right: 22px; transform: scaleX(-1); }
.hero-card__corner--bl { bottom: 20px; left: 22px; transform: scaleY(-1); }
.hero-card__corner--br { bottom: 20px; right: 22px; transform: scale(-1,-1); }

.hero-seal { display: flex; justify-content: center; margin-bottom: 2px; }
.hero-kicker { font-size: 12px; letter-spacing: 5px; text-transform: uppercase; color: var(--burgundy); margin-bottom: 14px; }
.hero-name { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(40px,7vw,68px); line-height: 1.0; color: var(--ink); }
.hero-amp { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(26px,4vw,36px); color: var(--green); margin: 2px 0; }
.hero-rule { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 22px 0 18px; color: rgba(123,30,40,0.5); }
.hero-rule .line { width: 64px; height: 1px; background: rgba(123,30,40,0.32); }
.hero-rule .mark { font-size: 18px; }
.hero-date { font-size: 15px; letter-spacing: 3px; text-transform: uppercase; color: #3a2e22; }
.hero-venue { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 21px; color: var(--burgundy); margin-top: 6px; }

.countdown { position: relative; z-index: 2; margin-top: 34px; display: flex; align-items: baseline; gap: 14px; color: var(--gold); }
.countdown__num { font-family: 'Cormorant Garamond', serif; font-size: 46px; line-height: 1; }
.countdown__label { font-size: 13px; letter-spacing: 4px; text-transform: uppercase; color: rgba(248,244,227,0.66); }

.hero-actions { position: relative; z-index: 2; margin-top: 30px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* ========== Story ========== */
#story {
  position: relative; padding: 104px 24px;
  background: linear-gradient(180deg, #201d1d 0%, #251419 22%, #251419 78%, #231816 100%);
  scroll-margin-top: 74px; overflow: hidden;
}
.two-col { position: relative; max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 64px; align-items: center; }
.framed-photo { position: relative; padding: 16px; }
.framed-photo::before, .framed-photo::after { content: ""; position: absolute; inset: 0; border: 1px solid; }
.framed-photo--story::before { border-color: rgba(196,169,91,0.5); transform: translate(14px,14px); }
.framed-photo--story::after { border-color: rgba(123,30,40,0.65); transform: translate(-12px,-12px); }
.framed-photo--venue::before { border-color: rgba(196,169,91,0.5); transform: translate(-14px,14px); }
.framed-photo--venue::after { border-color: rgba(22,109,59,0.7); transform: translate(12px,-12px); }
.framed-photo img { position: relative; width: 100%; display: block; object-fit: cover; }

.story-copy .section-divider { justify-content: flex-start; margin: 6px 0 26px; }
.story-copy p { font-size: 18px; line-height: 1.75; color: rgba(248,244,227,0.86); margin: 0 0 18px; }
.story-copy p:last-child { margin-bottom: 0; }
.story-copy .drop-cap { float: left; font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 70px; line-height: 0.74; color: var(--rose); padding: 8px 14px 0 0; }
.story-copy em { font-style: italic; color: var(--sage); }

/* ========== Schedule ========== */
#schedule { padding: 96px 24px; background: linear-gradient(180deg, #231816 0%, #211b13 22%, #211b13 78%, #1b2119 100%); scroll-margin-top: 74px; }
.timeline { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; }
.timeline-row { display: grid; grid-template-columns: 130px 36px 1fr; align-items: start; gap: 8px; }
.timeline-time { text-align: right; font-family: 'Cormorant Garamond', serif; font-size: 24px; color: var(--gold); padding-top: 2px; }
.timeline-rail { display: flex; flex-direction: column; align-items: center; height: 100%; }
.timeline-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--gold); margin-top: 8px; }
.timeline-line { flex: 1; width: 1px; background: rgba(196,169,91,0.3); min-height: 44px; }
.timeline-body { padding-bottom: 34px; }
.timeline-row:last-child .timeline-body { padding-bottom: 0; }
.timeline-title { font-family: 'Cormorant Garamond', serif; font-size: 25px; color: var(--cream); }
.timeline-desc { font-size: 16px; color: rgba(248,244,227,0.62); }

/* ========== Venue ========== */
#venue {
  position: relative; padding: 104px 24px;
  background: linear-gradient(180deg, #1b2119 0%, #14271e 22%, #14271e 78%, #1b2119 100%);
  scroll-margin-top: 74px; overflow: hidden;
}
.venue-grid { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 48px; align-items: center; }
.venue-copy p { font-size: 18px; line-height: 1.7; color: rgba(248,244,227,0.84); margin: 0 0 22px; }
.venue-address { border-top: 1px solid rgba(196,169,91,0.25); border-bottom: 1px solid rgba(196,169,91,0.25); padding: 20px 0; margin-bottom: 26px; }
.venue-address__label { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.venue-address__value { font-family: 'Cormorant Garamond', serif; font-size: 23px; color: var(--cream); line-height: 1.35; }
.venue-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ========== FAQ ========== */
#faq { padding: 96px 24px; background: linear-gradient(180deg, #1b2119 0%, #211b13 22%, #211b13 78%, #25191a 100%); scroll-margin-top: 74px; }
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item { border: 1px solid rgba(196,169,91,0.28); background: rgba(27,22,16,0.45); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  text-align: left; background: transparent; border: 0; cursor: pointer;
  padding: 20px 24px; font-family: 'Cormorant Garamond', serif; font-size: 23px; color: var(--cream);
}
.faq-sign { color: var(--gold); font-size: 24px; flex: none; }
.faq-a__inner { padding: 0 24px 22px; font-size: 17px; line-height: 1.7; color: rgba(248,244,227,0.78); }

/* ========== Registry ========== */
#registry {
  position: relative; padding: 104px 24px;
  background: linear-gradient(180deg, #25191a 0%, #281620 22%, #281620 78%, #1e1f1f 100%);
  scroll-margin-top: 74px; overflow: hidden;
}
#registry .section-header p { font-size: 18px; line-height: 1.7; color: rgba(248,244,227,0.72); max-width: 560px; margin: 0 auto; }
.registry-grid { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 24px; }
.registry-card {
  text-decoration: none; display: block; padding: 38px 30px; text-align: center;
  background: linear-gradient(160deg,#221b13,#191309); border: 1px solid rgba(196,169,91,0.3);
}
.registry-card:hover { border-color: var(--gold); }
.registry-card--rose { background: linear-gradient(160deg,#2a1418,#1d0f12); border-color: rgba(183,124,135,0.35); }
.registry-card--rose:hover { border-color: var(--rose); }
.registry-card__mark { font-size: 30px; color: rgba(196,169,91,0.7); margin-bottom: 14px; }
.registry-card--rose .registry-card__mark { color: rgba(183,124,135,0.8); }
.registry-card__title { font-family: 'Cormorant Garamond', serif; font-size: 28px; color: var(--cream); margin-bottom: 8px; }
.registry-card__desc { font-size: 15px; color: rgba(248,244,227,0.6); margin-bottom: 18px; }
.registry-card__cta { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.registry-card--rose .registry-card__cta { color: var(--rose); }

/* ========== Photos ========== */
#photos { padding: 96px 24px; background: linear-gradient(180deg, #1e1f1f 0%, #14271e 22%, #14271e 78%, #1c2219 100%); scroll-margin-top: 74px; }
#photos .section-header { max-width: 880px; }
#photos .section-header p { font-size: 18px; line-height: 1.7; color: rgba(248,244,227,0.78); max-width: 600px; margin: 0 auto 38px; }
.photo-panel {
  max-width: 880px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: center;
  background: linear-gradient(160deg,#221b13,#181208); border: 1px solid rgba(196,169,91,0.3); padding: 40px;
}
.photo-panel__qr {
  width: 180px; height: 180px; flex: none;
  background: #fff;
  border: 1px solid rgba(196,169,91,0.35);
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 12px;
}
.photo-panel__qr img { width: 100%; height: 100%; object-fit: contain; }
.photo-panel__qr span { font-family: 'EB Garamond', monospace; font-size: 12px; letter-spacing: 1px; color: rgba(248,244,227,0.5); padding: 10px; }
.photo-panel__copy { flex: 1; min-width: 240px; text-align: left; }
.photo-panel__title { font-family: 'Cormorant Garamond', serif; font-size: 26px; color: var(--cream); margin-bottom: 8px; }
.photo-panel__desc { font-size: 16px; line-height: 1.6; color: rgba(248,244,227,0.66); margin-bottom: 22px; }
.photo-panel__note { font-size: 13px; font-style: italic; color: rgba(152,174,135,0.8); margin-top: 14px; }
.photo-panel__badge {
  display: inline-block; margin-bottom: 14px;
  font-family: 'EB Garamond', serif; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(196,169,91,0.5); border-radius: 100px; padding: 5px 14px;
}
.btn--disabled { opacity: 0.55; cursor: default; pointer-events: none; }

/* Veiled QR — covered until the wedding day so it can't be scanned early */
.photo-panel__qr--veiled { position: relative; overflow: hidden; }
.photo-panel__qr--veiled img { filter: blur(2.5px); opacity: 1; }
.photo-veil {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  text-align: center; padding: 14px 14px 52px; color: var(--cream);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.12), rgba(255,255,255,0) 60%),
    repeating-linear-gradient(118deg, rgba(0,0,0,0.10) 0 8px, rgba(255,255,255,0.04) 8px 16px),
    linear-gradient(145deg, #9c2a35, #6d1620 55%, #4f0f17);
  box-shadow: inset 0 0 0 1px rgba(196,169,91,0.55), inset 0 0 22px rgba(0,0,0,0.45);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 96%);
}
.photo-veil::after {
  content: ""; position: absolute; inset: 9px;
  border: 1px dashed rgba(196,169,91,0.5); pointer-events: none;
}
.photo-veil__label { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
.photo-veil__title {
  font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; line-height: 1.05;
}
.photo-veil__sub { font-size: 12px; font-style: italic; letter-spacing: 1px; color: rgba(248,244,227,0.85); }

/* ========== RSVP ========== */
#rsvp {
  position: relative; padding: 96px 24px;
  background: linear-gradient(180deg, #1c2219 0%, #241c13 22%, #241c13 78%, #1a140d 100%);
  scroll-margin-top: 74px; overflow: hidden;
}
.rsvp-wrap { max-width: 620px; margin: 0 auto; position: relative; z-index: 2; }
.rsvp-header { text-align: center; margin-bottom: 40px; }
.rsvp-header p { font-size: 17px; color: rgba(248,244,227,0.72); margin: 0; }
.rsvp-header p span { color: var(--gold); }

.rsvp-card {
  background: linear-gradient(160deg,#f6f0de,#ece2c9);
  box-shadow: 0 24px 56px rgba(0,0,0,0.5);
  padding: 48px 44px;
  position: relative;
}
.rsvp-card::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(123,30,40,0.3); pointer-events: none; }

.rsvp-checking { text-align: center; color: #5a4a39; font-size: 17px; font-style: italic; }

.rsvp-thanks { text-align: center; }
.rsvp-thanks__mark { font-size: 34px; color: rgba(123,30,40,0.6); margin-bottom: 10px; }
.rsvp-thanks__title { font-family: 'Cormorant Garamond', serif; font-size: 34px; color: var(--ink); margin-bottom: 10px; }
.rsvp-thanks p { font-size: 17px; line-height: 1.6; color: #5a4a39; margin: 0 0 22px; }
.rsvp-thanks__reset { background: transparent; border: 1px solid rgba(123,30,40,0.5); color: var(--burgundy); padding: 11px 24px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; font-family: 'EB Garamond', serif; }


/* Inline field label + info affordance (email / phone privacy note). */
.rsvp-labelrow { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.rsvp-labelrow label { margin-bottom: 0 !important; }
.rsvp-info { position: relative; display: inline-flex; }
.rsvp-info__btn {
  width: 17px; height: 17px; border-radius: 50%; border: 1px solid rgba(123,30,40,0.45);
  background: transparent; color: var(--burgundy); font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 12px; line-height: 1; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.rsvp-info__btn:hover, .rsvp-info__btn:focus-visible { background: var(--burgundy); color: var(--cream); outline: none; }
.rsvp-info__tip {
  /* Anchored to the icon's left edge (not centered) so the tip opens rightward into the card and
     never spills off the left side — the icon sits close to the left of the field. */
  position: absolute; bottom: calc(100% + 9px); left: 0; transform: none;
  width: max-content; max-width: 240px; background: var(--ink); color: var(--cream);
  font-size: 12.5px; line-height: 1.45; letter-spacing: 0; text-transform: none;
  padding: 9px 12px; border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  opacity: 0; visibility: hidden; transition: opacity 0.15s ease; z-index: 5; pointer-events: none;
}
.rsvp-info__tip::after {
  content: ''; position: absolute; top: 100%; left: 8px; transform: none;
  border: 6px solid transparent; border-top-color: var(--ink);
}
.rsvp-info:hover .rsvp-info__tip, .rsvp-info__btn:focus-visible + .rsvp-info__tip { opacity: 1; visibility: visible; }
@media (max-width: 480px) { .rsvp-info__tip { max-width: 180px; } }

.rsvp-form { display: flex; flex-direction: column; gap: 28px; position: relative; z-index: 1; }
.rsvp-field label:not(.radio-option):not(.rsvp-checkbox) { display: block; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--burgundy); margin-bottom: 9px; }
.rsvp-field input[type="text"], .rsvp-field input[type="email"], .rsvp-field input[type="number"], .rsvp-field input[type="tel"] {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(123,30,40,0.3);
  color: var(--ink); font-family: 'EB Garamond', serif; font-size: 19px; padding: 8px 2px; outline: none;
}
.rsvp-field input:focus { border-bottom-color: var(--burgundy); }
.rsvp-field textarea {
  width: 100%; background: rgba(255,255,255,0.4); border: 1px solid rgba(123,30,40,0.25);
  color: var(--ink); font-family: 'EB Garamond', serif; font-size: 18px; padding: 14px; outline: none; resize: vertical;
}
.rsvp-field textarea:focus { border-color: var(--burgundy); }
.rsvp-card input::placeholder, .rsvp-card textarea::placeholder { color: rgba(42,28,18,0.35); }

.radio-row { display: flex; flex-wrap: wrap; gap: 12px; }
.radio-option {
  flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: rgba(255,255,255,0.45); border: 1px solid rgba(123,30,40,0.22); border-radius: 2px;
  padding: 14px 14px; color: var(--ink); font-size: 16px; line-height: 1.3; white-space: nowrap; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Custom-drawn radio dot: native radio controls report inconsistent intrinsic sizing across
   browser engines, which throws off flex centering against text differently per-browser even
   with identical CSS. Drawing it ourselves makes the result deterministic everywhere. */
.radio-option input {
  appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0;
  width: 17px; height: 17px; border-radius: 50%; border: 2px solid rgba(123,30,40,0.35);
  background: transparent; position: relative; cursor: pointer;
}
.radio-option input:checked { border-color: var(--green); }
.radio-option--decline input:checked { border-color: var(--burgundy); }
.radio-option input:checked::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 9px; height: 9px; border-radius: 50%; background: var(--green);
}
.radio-option--decline input:checked::after { background: var(--burgundy); }
.radio-option input:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; }
.radio-option:has(input:checked) { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; }
.radio-option--decline:has(input:checked) { border-color: var(--burgundy); box-shadow: 0 0 0 1px var(--burgundy) inset; }

.rsvp-checkbox { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--ink); font-size: 16px; margin-bottom: 16px; }
.rsvp-checkbox input {
  appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0;
  width: 17px; height: 17px; border-radius: 3px; border: 2px solid rgba(123,30,40,0.35);
  background: transparent; position: relative; cursor: pointer;
}
.rsvp-checkbox input:checked { background: var(--green); border-color: var(--green); }
.rsvp-checkbox input:checked::after {
  content: ""; position: absolute; top: 1px; left: 4px; width: 6px; height: 10px;
  border: solid var(--cream); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.rsvp-checkbox input:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; }

.rsvp-note--banner {
  border: 1px solid rgba(123,30,40,0.5); background: rgba(123,30,40,0.1); color: var(--burgundy);
  padding: 15px 18px; font-style: normal; font-size: 14px; font-weight: 600; text-align: left;
}
.rsvp-cancel {
  display: block; margin: -4px auto 4px; align-self: center; background: transparent;
  border: 1px solid rgba(123,30,40,0.5); color: var(--burgundy); padding: 9px 20px;
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; font-family: 'EB Garamond', serif;
}
.rsvp-cancel:hover { background: rgba(123,30,40,0.08); border-color: var(--burgundy); }

.rsvp-songs { display: flex; flex-direction: column; gap: 10px; }
.rsvp-song-row { display: flex; gap: 8px; align-items: center; }
.rsvp-song-row input { flex: 1; }
.rsvp-song-remove {
  flex-shrink: 0; width: 34px; height: 34px; background: rgba(255,255,255,0.45); border: 1px solid rgba(123,30,40,0.25);
  color: var(--ink); font-size: 16px; line-height: 1; cursor: pointer; font-family: 'EB Garamond', serif;
}
.rsvp-song-remove:hover { border-color: var(--burgundy); color: var(--burgundy); }
.rsvp-add {
  align-self: flex-start; margin-top: 10px; background: transparent; border: 0; color: var(--burgundy);
  text-decoration: underline; cursor: pointer; font-size: 14px; font-family: 'EB Garamond', serif; padding: 4px 0;
}
.rsvp-add:disabled { opacity: 0.4; cursor: default; text-decoration: none; }

.rsvp-submit {
  margin-top: 8px; background: var(--burgundy); color: var(--cream); border: 1px solid var(--burgundy);
  padding: 17px; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; font-family: 'EB Garamond', serif;
}
.rsvp-submit:hover { background: var(--burgundy-hover); border-color: var(--ink); }
.rsvp-submit:disabled { opacity: 0.6; cursor: default; }
.rsvp-deadline {
  display: inline-flex; align-items: center; gap: 8px; margin: 20px auto 0;
  font-family: 'Cormorant Garamond', serif; font-size: 17px; letter-spacing: 1px;
  color: var(--gold); border: 1px solid rgba(196,169,91,0.4); border-radius: 100px; padding: 6px 18px;
}
.rsvp-deadline[hidden] { display: none; }
.rsvp-deadline strong { font-weight: 600; color: var(--cream); }

.rsvp-note { font-size: 13px; font-style: italic; color: #8a7a64; text-align: center; }
.rsvp-note a { color: var(--burgundy); }

.rsvp-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rsvp-members { display: flex; flex-direction: column; gap: 14px; }
.rsvp-member {
  background: rgba(255,255,255,0.45); border: 1px solid rgba(123,30,40,0.18);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); padding: 16px 18px;
}
.rsvp-member__name { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: var(--ink); margin-bottom: 10px; }
.rsvp-member__fields {
  display: flex; flex-direction: column; gap: 18px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(123,30,40,0.15);
}

.rsvp-back {
  background: transparent; border: 0; color: #8a7a64; font-size: 13px;
  text-decoration: underline; cursor: pointer; font-family: 'EB Garamond', serif; padding: 4px; margin-top: -6px;
}
.rsvp-back:hover { color: var(--burgundy); }

.rsvp-error {
  border: 1px solid rgba(123,30,40,0.4); background: rgba(123,30,40,0.08); color: var(--burgundy);
  font-size: 15px; line-height: 1.5; padding: 14px 16px; text-align: center;
}
.rsvp-error a { color: var(--burgundy); text-decoration: underline; }

/* ========== RSVP wizard (step-by-step form) ========== */
.rsvp-form--wizard { gap: 22px; }

.rsvp-wizard__progress { height: 3px; background: rgba(123,30,40,0.14); overflow: hidden; }
.rsvp-wizard__progressbar {
  height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--burgundy));
  transition: width 0.32s ease;
}

/* One slide is mounted at a time; a fixed min-height keeps the card from jumping as questions with
   different amounts of content swap in and out. */
.rsvp-slidewrap { position: relative; min-height: 232px; overflow: hidden; }
.rsvp-slide { display: flex; flex-direction: column; gap: 20px; }
.rsvp-slide__kicker {
  font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--burgundy); line-height: 1.1;
}
.rsvp-slide__q { font-family: 'Cormorant Garamond', serif; font-size: 27px; color: var(--ink); line-height: 1.2; }
.rsvp-slide__note { font-size: 14px; font-style: italic; color: #8a7a64; margin-top: -8px; }

.rsvp-slide.is-enter-next { animation: rsvpSlideNext 0.32s ease both; }
.rsvp-slide.is-enter-back { animation: rsvpSlideBack 0.32s ease both; }
@keyframes rsvpSlideNext { from { opacity: 0; transform: translateX(42px); } to { opacity: 1; transform: translateX(0); } }
@keyframes rsvpSlideBack { from { opacity: 0; transform: translateX(-42px); } to { opacity: 1; transform: translateX(0); } }

/* Large tappable answer buttons — same cream/burgundy language as .radio-option. */
.rsvp-opts { display: flex; flex-wrap: wrap; gap: 12px; }
.rsvp-opts--stack { flex-direction: column; }
.rsvp-opt {
  flex: 1; min-width: 130px; text-align: left; cursor: pointer;
  background: rgba(255,255,255,0.45); border: 1px solid rgba(123,30,40,0.22); border-radius: 2px;
  padding: 16px 18px; color: var(--ink); font-family: 'EB Garamond', serif;
  display: flex; flex-direction: column; gap: 3px; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.rsvp-opt:hover { border-color: rgba(123,30,40,0.5); }
.rsvp-opt__label { font-size: 18px; }
.rsvp-opt__sub { font-size: 13px; color: #8a7a64; }
.rsvp-opt.is-selected { border-color: var(--burgundy); box-shadow: 0 0 0 1px var(--burgundy) inset; background: rgba(123,30,40,0.06); }
.rsvp-opt--accept.is-selected { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; background: rgba(22,109,59,0.07); }
.rsvp-opt--accept.is-selected .rsvp-opt__label { color: var(--green); }
.rsvp-opt--decline.is-selected { border-color: var(--burgundy); box-shadow: 0 0 0 1px var(--burgundy) inset; }
.rsvp-opt:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; }

/* Nav row: Back on the left, Next/Submit on the right. */
.rsvp-wizard__nav { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.rsvp-navbtn {
  font-family: 'EB Garamond', serif; cursor: pointer; font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
}
.rsvp-navbtn--next {
  margin-left: auto; background: var(--burgundy); color: var(--cream); border: 1px solid var(--burgundy); padding: 15px 30px;
}
.rsvp-navbtn--next:hover { background: var(--burgundy-hover); border-color: var(--ink); }
.rsvp-navbtn--next:disabled { opacity: 0.6; cursor: default; }
.rsvp-navbtn--back {
  background: transparent; border: 1px solid rgba(123,30,40,0.35); color: var(--burgundy); padding: 15px 24px;
}
.rsvp-navbtn--back:hover { border-color: var(--burgundy); background: rgba(123,30,40,0.05); }

/* Summary / review step */
.rsvp-summary { display: flex; flex-direction: column; gap: 14px; }
.rsvp-summary__member {
  background: rgba(255,255,255,0.45); border: 1px solid rgba(123,30,40,0.18);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); padding: 16px 18px;
}
.rsvp-summary__name { font-family: 'Cormorant Garamond', serif; font-size: 21px; color: var(--ink); margin-bottom: 10px; }
.rsvp-summary__row { display: flex; gap: 12px; padding: 5px 0; border-top: 1px solid rgba(123,30,40,0.10); font-size: 16px; }
.rsvp-summary__row:first-of-type { border-top: 0; }
.rsvp-summary__k { flex-shrink: 0; width: 116px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--burgundy); padding-top: 3px; }
.rsvp-summary__v { color: var(--ink); }
.rsvp-summary__v--accept { color: var(--green); }
.rsvp-summary__v--decline { color: var(--burgundy); }

/* ========== Footer ========== */
.footer { background: #120e0a; border-top: 1px solid rgba(196,169,91,0.22); padding: 56px 24px; text-align: center; }
.footer__brand { font-family: 'Cormorant Garamond', serif; font-size: 30px; letter-spacing: 6px; color: var(--gold); margin-bottom: 10px; }
.footer__brand span { opacity: .55; }
.footer__names { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 20px; color: rgba(248,244,227,0.7); margin-bottom: 6px; }
.footer__tag { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: rgba(248,244,227,0.4); }
.footer__top {
  display: inline-block; margin-top: 24px; text-decoration: none; font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold); border: 1px solid rgba(196,169,91,0.4); padding: 9px 20px;
}
.footer__top:hover { background: rgba(196,169,91,0.12); }

/* ========== Responsive ========== */
@media (max-width: 1024px) {
  .nav { padding: 14px 28px !important; }
  .two-col, .venue-grid { gap: 36px !important; }
}
@media (max-width: 768px) {
  .nav__links { display: none !important; }
  .nav__hamburger { display: flex !important; }
  .nav { padding: 12px 20px !important; }
  #home { padding: 36px 16px 56px !important; }
  #story, #schedule, #venue, #faq, #registry, #photos, #rsvp { padding: 60px 16px !important; }
  .two-col, .venue-grid { display: block !important; }
  .two-col > .reveal:first-child, .venue-grid > .reveal:first-child { margin-bottom: 32px; }
  #story img { height: 280px !important; }
  #venue img { height: 220px !important; }
  .timeline-row { grid-template-columns: 70px 26px 1fr !important; gap: 6px !important; }
  .photo-panel { flex-direction: column !important; align-items: stretch !important; }
  .photo-panel__qr { width: 160px !important; height: 160px !important; margin: 0 auto; }
  .rsvp-card { padding: 36px 22px !important; }
  .radio-row { flex-direction: column !important; }
  .radio-row > label { flex: none !important; width: 100% !important; min-width: unset !important; }
  .rsvp-opts { flex-direction: column !important; }
  .rsvp-opt { min-width: unset !important; }
  .rsvp-slide__q { font-size: 24px !important; }
  .rsvp-summary__k { width: 96px !important; }
  .countdown { flex-wrap: wrap !important; justify-content: center !important; }
}
@media (max-width: 480px) {
  .timeline-row { grid-template-columns: 58px 22px 1fr !important; }
  #home { padding: 24px 12px 44px !important; }
  .nav { padding: 12px 16px !important; }
}