/* ============================================================
   THEME
   ============================================================ */
:root {
  --emerald-deep: #0b3b2e;
  --emerald:      #1a5c44;
  --emerald-soft: #2d7d5f;
  --gold:         #c8a24a;
  --gold-light:   #e7d3a1;
  --champagne:    #f6efdd;
  --ivory:        #fbf8f0;
  --ink:          #22302a;
  --ink-soft:     #4a5a52;

  --display: "Tangerine", cursive;
  --serif:   "Cormorant Garamond", Georgia, serif;
  --caps:    "Marcellus", serif;

  --maxw: 540px;
  --frame: 736px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--serif);
  color: var(--ink);
  background: #111;
  line-height: 1.6;
  overflow-x: hidden;
  /* centre the phone frame on desktop */
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100dvh;
}
img { max-width: 100%; display: block; }

/* ============================================================
   PHONE FRAME
   ============================================================ */
#app-frame {
  width: 100%;
  max-width: var(--frame);
  background: var(--ivory);
  position: relative;
  flex: 1 0 auto;           /* stretch to fill body height */
  /* subtle phone-screen rim visible on wide desktop */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07),
    0 32px 80px rgba(0,0,0,.75);
}

/* ============================================================
   SHARED TYPE
   ============================================================ */
.eyebrow {
  font-family: var(--caps);
  letter-spacing: .32em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--gold);
}
.script {
  font-family: var(--display);
  line-height: .9;
  color: var(--emerald-deep);
}
.divider {
  display: flex; align-items: center; justify-content: center;
  gap: .8rem; margin: 1.4rem auto; color: var(--gold);
}
.divider::before, .divider::after {
  content: ""; height: 1px; width: 42px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.divider::after { transform: scaleX(-1); }
.divider span { font-size: 1.1rem; line-height: 1; }

/* ============================================================
   SCENE SYSTEM
   — fixed + horizontally centred so it stays within the frame
     even on wide desktop
   ============================================================ */
.scene {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, var(--frame));
  height: 100dvh;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.scene.hidden { display: none; }
.scene.scene-fading {
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}

/* ============================================================
   VIDEO INTRO SCENE
   ============================================================ */
#scene-video {
  background: #000;
  cursor: pointer;
}

/* Two stacked videos – vid1 is visible first, vid2 crossfades in */
.scene-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 1s ease;
}
#vid1 { opacity: 1; z-index: 1; }
#vid2 { opacity: 0; z-index: 2; }

#vid1.fading-out { opacity: 0; }
#vid2.fading-in  { opacity: 1; }

/* --- initial overlay (shown while vid1 is paused) --- */
.vid-init-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 3.5rem 2rem 5rem;
  text-align: center;
  background: transparent;
  transition: opacity .9s ease;
}
.vid-init-overlay.hidden-out {
  opacity: 0;
  pointer-events: none;
}

.vid-names-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
}
.vid-name {
  font-family: var(--display);
  font-size: clamp(3rem, 11vw, 5.5rem);
  color: #3b2005;
  line-height: 1;
  text-shadow:
    0 -1px 2px rgba(0,0,0,.55),
    0  1px 1px rgba(255,230,160,.7),
    0  2px 6px  rgba(0,0,0,.18);
  letter-spacing: .04em;
  margin: 0;
}
.vid-ornament {
  color: #5a3810;
  font-size: .95rem;
  letter-spacing: .6em;
  margin: .5rem 0;
  opacity: .8;
  text-shadow:
    0 -1px 1px rgba(0,0,0,.4),
    0  1px 1px rgba(255,230,160,.55);
}
.vid-request {
  font-family: var(--caps);
  font-size: clamp(1rem, 3.5vw, 1.4rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #4a2e0a;
  line-height: 2;
  text-shadow:
    0 -1px 1px rgba(0,0,0,.4),
    0  1px 1px rgba(255,230,160,.55);
}

/* tap hint */
.vid-tap-hint {
  position: absolute;
  bottom: 2.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  font-family: var(--caps);
  font-size: .6rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: #5a3810;
  white-space: nowrap;
  text-shadow:
    0 -1px 1px rgba(0,0,0,.4),
    0  1px 1px rgba(255,230,160,.55);
  animation: pulse 2.4s ease-in-out infinite;
  transition: opacity .9s ease;
}
.vid-tap-hint.hidden-out { opacity: 0; }

/* --- end overlay (fades in near the end of vid2) --- */
.vid-end-overlay {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg,
    rgba(0,0,0,.06) 0%,
    rgba(0,0,0,.16) 100%
  );
  opacity: 0;
  transition: opacity 1.8s ease;
  text-align: center;
  padding: 2rem 1.5rem;
  pointer-events: none;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vid-end-overlay.visible { opacity: 1; pointer-events: auto; }
.vid-continue-hint {
  position: static;
  transform: none;
  margin-top: 2rem;
  animation: pulse 2.4s ease-in-out infinite;
}

.vid-end-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  max-width: 360px;
}

.vid-couple {
  font-family: var(--display);
  font-size: clamp(3.2rem, 11vw, 6rem);
  color: #fff;
  line-height: .85;
  text-shadow:
    0 0 1px rgba(0,0,0,.6),
    0 1px 3px rgba(0,0,0,.9),
    0 3px 10px rgba(0,0,0,.55);
  margin-bottom: .2rem;
  white-space: nowrap;
}
.vid-req-text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.05rem, 3vw, 1.3rem);
  letter-spacing: .04em;
  color: #fff;
  line-height: 1.7;
  width: 100%;
  max-width: 560px;
  text-align: center;
  text-shadow:
    0 0 2px rgba(0,0,0,.7),
    0 1px 5px rgba(0,0,0,.95),
    0 3px 14px rgba(0,0,0,.7);
}
.vid-date-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.vid-date-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.4rem;
}
.vid-date-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .26rem;
}
.vid-date-unit span {
  font-family: var(--caps);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: clamp(1rem, 3vw, 1.4rem);
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 0 1px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.85);
}
.vid-day-num {
  font-family: var(--caps);
  font-size: clamp(3.5rem, 12vw, 6rem);
  font-weight: 400;
  color: #fff;
  line-height: 1;
  text-shadow:
    0 0 1px rgba(0,0,0,.6),
    0 1px 3px rgba(0,0,0,.9),
    0 3px 10px rgba(0,0,0,.55);
}
.vid-dow {
  font-family: var(--caps);
  letter-spacing: .36em;
  text-transform: uppercase;
  font-size: clamp(1rem, 3vw, 1.4rem);
  color: #fff;
  margin-top: .3rem;
  text-align: center;
  padding-left: .36em;
  text-shadow: 0 0 1px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.85);
}
.vid-where {
  font-family: var(--caps);
  letter-spacing: .24em;
  text-transform: uppercase;
  font-size: clamp(.85rem, 2.4vw, 1.1rem);
  color: var(--gold-light);
  margin-top: .28rem;
  text-shadow: 0 0 1px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.8);
}
.vid-venue {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.1rem, 3.2vw, 1.5rem);
  color: #fff;
  line-height: 1.5;
  text-shadow:
    0 0 2px rgba(0,0,0,.7),
    0 1px 5px rgba(0,0,0,.95),
    0 3px 14px rgba(0,0,0,.7);
}
.vid-time {
  font-family: var(--caps);
  letter-spacing: .17em;
  text-transform: uppercase;
  font-size: clamp(.85rem, 2.4vw, 1.1rem);
  color: rgba(255,255,255,.92);
  margin-top: .14rem;
  text-shadow: 0 0 1px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.8);
}

@keyframes pulse { 0%,100%{opacity:.35} 50%{opacity:1} }

/* ============================================================
   PAGE WRAPPER
   ============================================================ */
.page { opacity: 0; transition: opacity 1.4s ease; }
.page.revealed { opacity: 1; }
section { padding: 5rem 1.5rem; position: relative; }
.inner { max-width: var(--maxw); margin: 0 auto; text-align: center; }

/* ============================================================
   HERO — baroque arch image background
   ============================================================ */
#hero {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: hidden;
  position: relative;
  padding: 3rem 1.5rem;
}
/* very light scrim — keeps subject visible, text carries its own contrast */
#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.16) 100%);
  z-index: 1;
}
/* centered, radial-masked, faint portrait */
.hero-photo-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
}
.hero-photo-center img {
  width: min(84%, 400px);
  height: auto;
  opacity: .62;
  display: block;
  -webkit-mask-image: radial-gradient(ellipse 65% 70% at center, black 35%, transparent 78%);
  mask-image:         radial-gradient(ellipse 65% 70% at center, black 35%, transparent 78%);
}

.hero-content {
  position: relative;
  z-index: 4;
  text-align: center;
  width: 100%;
  max-width: min(96vw, 680px);
  margin: 0 auto;
  padding: 2.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  background: transparent;
  border: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hero-fleuron {
  font-size: clamp(3rem, 10vw, 5rem);
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1;
  margin-bottom: .3rem;
  text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 0 18px rgba(200,162,74,.5);
}

.couple-names {
  font-family: var(--display);
  font-size: clamp(3.2rem, 11vw, 6rem);
  color: #fff;
  line-height: .85;
  text-shadow:
    0 0 1px rgba(0,0,0,.6),
    0 1px 3px rgba(0,0,0,.9),
    0 3px 10px rgba(0,0,0,.55);
  margin-bottom: .2rem;
  white-space: nowrap;
}
.hero-request {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.05rem, 3vw, 1.3rem);
  letter-spacing: .04em;
  color: #fff;
  line-height: 1.7;
  width: 100%;
  max-width: 560px;
  text-shadow:
    0 0 2px rgba(0,0,0,.7),
    0 1px 5px rgba(0,0,0,.95),
    0 3px 14px rgba(0,0,0,.7);
}
.hero-date-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.hero-date-block {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.4rem;
}
.date-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .26rem;
}
.date-unit span {
  font-family: var(--caps);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: clamp(1rem, 3vw, 1.4rem);
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 0 1px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.85);
}
.hero-day-num {
  font-family: var(--caps);
  font-size: clamp(3.5rem, 12vw, 6rem);
  font-weight: 400;
  color: #fff;
  line-height: 1;
  text-shadow:
    0 0 1px rgba(0,0,0,.6),
    0 1px 3px rgba(0,0,0,.9),
    0 3px 10px rgba(0,0,0,.55);
}
.date-rule-line {
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.date-dow {
  font-family: var(--caps);
  letter-spacing: .36em;
  text-transform: uppercase;
  font-size: clamp(1rem, 3vw, 1.4rem);
  color: #fff;
  margin-top: .3rem;
  text-align: center;
  padding-left: .36em;
  text-shadow: 0 0 1px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.85);
}
.hero-where {
  font-family: var(--caps);
  letter-spacing: .24em;
  text-transform: uppercase;
  font-size: clamp(.85rem, 2.4vw, 1.1rem);
  color: var(--gold-light);
  margin-top: .28rem;
  text-shadow: 0 0 1px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.8);
}
.hero-venue {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.1rem, 3.2vw, 1.5rem);
  color: #fff;
  line-height: 1.5;
  text-shadow:
    0 0 2px rgba(0,0,0,.7),
    0 1px 5px rgba(0,0,0,.95),
    0 3px 14px rgba(0,0,0,.7);
}
.hero-time {
  font-family: var(--caps);
  letter-spacing: .17em;
  text-transform: uppercase;
  font-size: clamp(.85rem, 2.4vw, 1.1rem);
  color: rgba(255,255,255,.92);
  margin-top: .14rem;
  text-shadow: 0 0 1px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.8);
}

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: none; }

/* hero entry animations */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.hero-content > * {
  opacity: 0;
  animation: heroFadeUp .8s ease forwards;
}
.hero-content > *:nth-child(1) { animation-delay: .2s; }
.hero-content > *:nth-child(2) { animation-delay: .42s; }
.hero-content > *:nth-child(3) { animation-delay: .6s; }
.hero-content > *:nth-child(4) { animation-delay: .75s; }
.hero-content > *:nth-child(5) { animation-delay: .88s; }
.hero-content > *:nth-child(6) { animation-delay: 1s; }
.hero-content > *:nth-child(7) { animation-delay: 1.1s; }
.hero-content > *:nth-child(8) { animation-delay: 1.2s; }
.page:not(.revealed) .hero-content > * { animation-play-state: paused; }

.scroll-cue {
  position: absolute;
  bottom: 1.3rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--caps);
  font-size: .58rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  z-index: 1;
  cursor: pointer;
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,7px)} }

/* ============================================================
   COUNTDOWN
   ============================================================ */
#countdown {
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.52) 0%,
      rgba(0,0,0,.42) 40%,
      rgba(0,0,0,.38) 100%
    ),
    url('asset/1_.jpeg') center / cover;
  color: var(--champagne);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#countdown .eyebrow {
  color: var(--gold-light);
}
#countdown h2 {
  font-family: var(--display);
  font-size: clamp(2.8rem, 7vw, 4.2rem);
  color: var(--champagne);
  margin: .4rem 0 1.8rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.clock { display: flex; justify-content: center; gap: 1.2rem; flex-wrap: wrap; }
.unit { min-width: 80px; }
.unit b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(3rem, 8vw, 4.4rem);
  font-weight: 600;
  color: var(--gold-light);
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.unit small {
  font-family: var(--caps);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--champagne);
}

/* ============================================================
   CURTAIN — schedule reveal
   ============================================================ */
#schedule {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.38) 0%,
      rgba(0,0,0,.48) 100%
    ),
    url('asset/1_.jpeg') center / cover;
  color: var(--champagne);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.curtain {
  position: absolute;
  top: 0;
  width: calc(50% + 2px); /* 2px overlap seals the centre gap */
  height: 100%;
  z-index: 5;
  will-change: transform;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.13)  0px,
      rgba(255,255,255,.04) 10px,
      rgba(0,0,0,.16)       18px,
      rgba(255,255,255,.02) 28px,
      rgba(0,0,0,.11)       38px,
      rgba(255,255,255,.07) 48px,
      rgba(0,0,0,.07)       58px,
      transparent           68px
    ),
    linear-gradient(170deg, #1d6b50 0%, #0b3b2e 55%, #07291f 100%);
}

/* Gathered swag — wider than panel, rounded down, casts shadow */
.curtain::before {
  content: '';
  position: absolute;
  top: 0;
  left: -8%;
  width: 116%;
  height: 88px;
  background: inherit;
  border-radius: 0 0 50% 50% / 0 0 44px 44px;
  box-shadow: 0 10px 28px rgba(0,0,0,.4);
  z-index: 1;
}

/* Gold inner-edge trim — class-specific so each side is correct */
.curtain-l::after, .curtain-r::after {
  content: '';
  position: absolute;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg,
    var(--gold-light),
    var(--gold)       25%,
    var(--gold-light) 50%,
    var(--gold)       75%,
    var(--gold-light)
  );
  z-index: 2;
}

.curtain-l { left: 0; transform: translateX(calc(var(--curtain, 0) * -100%)); }
.curtain-l::after { right: 0; }

.curtain-r { right: 0; transform: translateX(calc(var(--curtain, 0) * 100%)); }
.curtain-r::after { left: 0; }

/* ============================================================
   SCHEDULE
   ============================================================ */
#schedule h2, #venue h2, #gallery h2, #rsvp h2 {
  font-family: var(--display);
  font-size: 3.2rem;
  color: var(--emerald-deep);
  margin: .3rem 0 .4rem;
}
#schedule h2 {
  color: var(--champagne);
  font-size: clamp(2.8rem, 7vw, 4.2rem);
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
#schedule .eyebrow {
  color: var(--gold-light);
}
#schedule .divider { color: var(--gold-light); }
.timeline { margin-top: 2.2rem; text-align: left; position: relative; padding-left: 2rem; }
.timeline::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 1px; background: linear-gradient(var(--gold), transparent);
}
.event { position: relative; padding: 0 0 2rem .4rem; }
.event::before {
  content: ""; position: absolute; left: -1.85rem; top: .45rem;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px var(--champagne);
}
.event time { font-family: var(--caps); letter-spacing: .12em; color: var(--gold); font-size: .82rem; }
.event h3 { font-family: var(--serif); font-weight: 600; font-size: 1.45rem; color: var(--emerald-deep); margin: .1rem 0 .2rem; }
.event p { color: var(--ink-soft); font-size: 1rem; }

/* ---- Schedule-specific overrides for dark image background ---- */
#schedule .timeline::before {
  background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.1));
}
#schedule .event::before {
  background: var(--champagne);
  box-shadow: 0 0 0 3px var(--gold-light), 0 0 10px rgba(231,211,161,.55);
}
#schedule .event time {
  font-size: 1rem;
  color: var(--gold-light);
}
#schedule .event h3 {
  color: var(--champagne);
  font-size: 1.75rem;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}
#schedule .event p  {
  color: rgba(255,255,255,.9);
  font-size: 1.08rem;
  line-height: 1.65;
}
.event-icon {
  display: inline-block;
  margin-right: .45em;
  font-size: 1.1em;
  vertical-align: middle;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
#schedule .event::before { box-shadow: 0 0 0 4px rgba(255,255,255,.2); }

/* ============================================================
   VENUE
   ============================================================ */
#venue {
  background: linear-gradient(180deg, #a8c0a4 0%, #bccfb8 30%, #cddac9 70%, #d8e4d4 100%);
  padding: 6rem 1.5rem;
}

/* Physical invitation card */
.venue-card {
  position: relative;
  background: #faf8f0;
  max-width: 460px;
  margin: 0 auto;
  border: 1px solid rgba(200,162,74,.3);
  box-shadow:
    0 2px 4px rgba(0,0,0,.06),
    0 10px 32px rgba(0,0,0,.13),
    0 28px 72px rgba(0,0,0,.09);
  overflow: hidden;
}

/* Gold L-bracket corner accents */
.vc-corner {
  position: absolute;
  width: 24px;
  height: 24px;
  z-index: 5;
  pointer-events: none;
}
.vc-tl { top: 11px; left: 11px;  border-top: 1.5px solid var(--gold); border-left:  1.5px solid var(--gold); }
.vc-tr { top: 11px; right: 11px; border-top: 1.5px solid var(--gold); border-right: 1.5px solid var(--gold); }
.vc-bl { bottom: 11px; left: 11px;  border-bottom: 1.5px solid var(--gold); border-left:  1.5px solid var(--gold); }
.vc-br { bottom: 11px; right: 11px; border-bottom: 1.5px solid var(--gold); border-right: 1.5px solid var(--gold); }

/* Bouquet image fading into ivory card */
.venue-bouquet {
  width: 100%;
  line-height: 0;
  overflow: hidden;
}
.venue-bouquet img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 52%, transparent 100%);
  mask-image:         linear-gradient(180deg, black 0%, black 52%, transparent 100%);
}

/* Card text body */
.venue-card-body {
  padding: 0 2.5rem 3rem;
  text-align: center;
}

#venue h2 {
  color: var(--emerald-deep);
  font-size: clamp(2rem, 6vw, 2.8rem);
  margin: .2rem 0 .5rem;
}

/* Double-rule ornament separator */
.venue-rule {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .9rem auto;
  max-width: 200px;
  color: var(--gold);
  font-size: .75rem;
  opacity: .75;
}
.venue-rule::before,
.venue-rule::after {
  content: '';
  flex: 1;
  height: 0;
  border-top: 1px solid var(--gold);
}

.venue-ornament {
  font-size: 1.1rem;
  color: var(--gold);
  opacity: .7;
  margin: .2rem 0 1rem;
}

.venue-name { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; color: var(--emerald-deep); margin-top: .3rem; }
.venue-addr { color: var(--ink-soft); font-size: 1rem; margin: .3rem 0 1.5rem; }
.map-embed { margin: 1.4rem 0; border: 1px solid rgba(200,162,74,.3); aspect-ratio: 4/3; width: 100%; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--caps); letter-spacing: .18em; text-transform: uppercase;
  font-size: .7rem; padding: .9rem 1.8rem; border: 1px solid var(--emerald);
  color: var(--emerald-deep); background: transparent; cursor: pointer;
  transition: .3s; text-decoration: none;
}
.btn:hover { background: var(--emerald-deep); color: var(--champagne); }
.btn-gold { border-color: var(--gold); color: #6e5519; }
.btn-gold:hover { background: var(--gold); color: #fff; }
.btn-row { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: .6rem; }

/* ============================================================
   GALLERY
   ============================================================ */
.grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; margin-top: 2rem; }
.grid figure { overflow: hidden; border: 1px solid var(--gold-light); }
.grid img { aspect-ratio: 3/4; object-fit: cover; width: 100%; transition: transform .6s ease; }
.grid figure:hover img { transform: scale(1.06); }
.grid figure:first-child { grid-column: span 2; }
.grid figure:first-child img { aspect-ratio: 16/10; }

/* ============================================================
   RSVP
   ============================================================ */
#rsvp { background: var(--emerald-deep); color: var(--champagne); }
#rsvp h2 { color: var(--champagne); }
#rsvp .eyebrow { color: var(--gold-light); }
#rsvp p.lead { color: var(--gold-light); font-style: italic; margin-bottom: 1.8rem; }
.form { display: grid; gap: 1rem; text-align: left; max-width: 400px; margin: 0 auto; }
.field label { font-family: var(--caps); letter-spacing: .12em; text-transform: uppercase; font-size: .6rem; color: var(--gold-light); display: block; margin-bottom: .32rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .72rem .8rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(231,211,161,.4);
  color: var(--champagne);
  font-family: var(--serif); font-size: 1rem;
}
.field textarea { min-height: 80px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 1px solid var(--gold); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
#rsvp .btn { border-color: var(--gold-light); color: var(--champagne); margin-top: .5rem; }
#rsvp .btn:hover { background: var(--gold); color: #3a2d08; border-color: var(--gold); }

/* ============================================================
   FOOTER
   ============================================================ */
footer { background: var(--ivory); text-align: center; padding: 3.5rem 1.5rem; }
footer .script { font-size: 2.8rem; margin-bottom: .4rem; }
footer .hashtag { font-family: var(--caps); letter-spacing: .25em; color: var(--gold); font-size: .82rem; margin-top: 1rem; }
footer .credit { font-size: .68rem; color: var(--ink-soft); opacity: .6; margin-top: 2.2rem; font-family: var(--caps); letter-spacing: .1em; }

/* ============================================================
   MUSIC TOGGLE
   ============================================================ */
#audio-toggle {
  position: fixed;
  bottom: 1.1rem;
  right: max(calc((100vw - var(--frame)) / 2 + 1rem), 1rem);
  z-index: 200;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--gold); background: rgba(11,59,46,.88);
  color: var(--gold-light); cursor: pointer;
  display: none; align-items: center; justify-content: center;
  font-size: 1.2rem; backdrop-filter: blur(4px); transition: .3s;
}
#audio-toggle.show { display: flex; }
#audio-toggle:hover { background: var(--emerald); color: #fff; }

#music-toggle {
  position: fixed;
  bottom: 1.1rem;
  /* stay within the frame on desktop */
  right: max(calc((100vw - var(--frame)) / 2 + 1rem), 1rem);
  z-index: 200;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--gold); background: rgba(11,59,46,.88);
  color: var(--gold-light); cursor: pointer;
  display: none; align-items: center; justify-content: center;
  font-size: 1.1rem; backdrop-filter: blur(4px); transition: .3s;
}
#music-toggle.show { display: flex; }
#music-toggle:hover { background: var(--emerald); color: #fff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 480px) {
  .hero-content { padding: 1.8rem 1rem; }
  .two { grid-template-columns: 1fr; }
  .hero-date-block { gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: opacity .3s ease !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-content > * { opacity: 1; }
}