/* ==========================================================================
   NANCY & GIDEON — WEDDING WEBSITE
   Design system: quiet editorial luxury, built from a single deep-to-pale
   emerald gradient (moodboard: #051F20 → #0B2B26 → #163832 → #235347 →
   #8EB69B → #DAF1DE), with one true white introduced for contrast.
   No other hues are used anywhere in this file.
   ========================================================================== */

:root{
  /* ---- palette (locked to the emerald moodboard) ---- */
  --abyss:        #051F20;   /* darkest — ink, deep backgrounds */
  --deep:         #0B2B26;   /* secondary dark, gradients */
  --forest:       #163832;   /* rich forest — dark section blocks */
  --emerald:      #235347;   /* mid green — accents, buttons, links */
  --sage:         #8EB69B;   /* soft sage — accents, hover, hairlines on dark */
  --mint:         #DAF1DE;   /* pale mint — light backgrounds, tinted paper */
  --paper:        #FBFDFA;   /* true white, warmed a hair — contrast sections */
  --ivory:        #F1F7F2;   /* soft mint-tinted ivory — alternate light bg */

  /* ---- gold accent — reserved for the hero, where it sits over the
     floral portrait and needs to read as warm metallic against forest ---- */
  --gold:         #C9A24B;
  --gold-soft:    #E8D8AA;
  --hero-forest:  #0E2621;

  --ink:          var(--abyss);
  --ink-soft:     #3C544D;
  --on-dark:      var(--mint);
  --on-dark-soft: rgba(218,241,222,0.72);
  --line:         rgba(5,31,32,0.14);
  --line-soft:    rgba(5,31,32,0.08);
  --line-on-dark: rgba(218,241,222,0.22);

  /* ---- signature blend — mixed only from sage + mint + emerald ---- */
  --sheen: linear-gradient(120deg, var(--sage) 0%, var(--mint) 45%, var(--sage) 100%);
  --sheen-deep: linear-gradient(120deg, var(--emerald) 0%, var(--sage) 50%, var(--emerald) 100%);

  /* ---- type ---- */
  --font-display: 'Fraunces', serif;
  --font-script:  'Beau Rivage', cursive;
  --font-body:    'Manrope', sans-serif;

  /* ---- rhythm ---- */
  --section-pad: clamp(5rem, 9vw, 9rem);
  --gutter: clamp(1.5rem, 6vw, 6rem);
  --radius: 2px;
  --radius-md: 6px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.16,.8,.28,1);

  --shadow-soft: 0 20px 50px -28px rgba(5,31,32,0.28);
  --shadow-deep: 0 46px 100px -40px rgba(5,31,32,0.45);
}

/* ================= RESET ================= */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul,ol{ list-style:none; margin:0; padding:0; }
button, input, select, textarea{ font-family: inherit; font-size: 1rem; color: inherit; }
h1,h2,h3,h4,p{ margin:0; }
section{ padding: var(--section-pad) var(--gutter); position: relative; overflow: hidden; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

:focus-visible{ outline: 2px solid var(--sage); outline-offset: 3px; }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ================= SIGNATURE ORNAMENT — a single continuous-line sprig,
   the one recurring mark of this design. It opens every major section and
   reappears (mirrored / rotated) as a quiet corner watermark, so the whole
   page reads as one hand rather than a kit of stock flourishes. ================= */
.sprig{
  display:block; margin: 0 auto clamp(2.25rem, 5vw, 3.25rem);
  width: 46px; height: 64px; opacity: 0.9;
}
.sprig--on-dark{ color: var(--sage); }
.sprig--on-light{ color: var(--emerald); }

section:not(.hero) .section-head .sprig{ color: inherit; }

/* corner watermark botanical — large, faint, single-line */
.watermark{
  position:absolute; width: min(30vw, 340px); aspect-ratio: 1/1.4;
  pointer-events:none; z-index:0; opacity:0.07;
}
.watermark svg{ width:100%; height:100%; }
.watermark--story{ right:-6%; bottom:-10%; transform: rotate(8deg); color: var(--emerald); }
.watermark--party{ left:-7%; top:-8%; transform: scaleX(-1) rotate(6deg); color: var(--sage); }
.watermark--gallery{ right:-6%; top:-6%; color: var(--emerald); }
.watermark--rsvp{ left:-6%; bottom:-10%; color: var(--sage); opacity:0.08; }

.story .section-head, .story-photo, .timeline-story,
.party .section-head, .party-cols,
.gallery .section-head, .gallery-grid,
.rsvp .section-head, .rsvp-form{ position:relative; z-index:1; }

/* ================= SECTION SYSTEM — clean, full-bleed color blocks.
   No floating cards, no torn edges: identity comes from color, type and
   rhythm alone, in the editorial tradition. ================= */
.panel{ position:relative; z-index:1; }
.panel--paper{ background: var(--paper); color: var(--ink); }
.panel--ivory{ background: var(--ivory); color: var(--ink); }
.panel--forest{
  background: linear-gradient(165deg, var(--forest) 0%, var(--deep) 100%);
  color: var(--on-dark);
}
.panel--abyss{
  background: linear-gradient(165deg, var(--abyss) 0%, #030f10 100%);
  color: var(--on-dark);
}
.panel--sage{ background: linear-gradient(180deg, var(--mint) 0%, #cfe8d6 100%); color: var(--ink); }

.panel--forest .venue-panel h3, .panel--abyss h3{ color: var(--on-dark); }
.panel--forest .venue-panel p:not(.venue-panel__where){ color: var(--on-dark-soft); }
.panel--forest .venue-panel__where{ color: var(--sage); }
.panel--forest .venue-strip__label{ color: var(--sage); }
.panel--forest .venue-map__frame{ filter: grayscale(0.2) sepia(0.05) brightness(0.97) hue-rotate(-6deg); }

/* thin rule that seams one panel into the next */
.seam{ height:1px; background: var(--line-soft); }
.seam--on-dark{ background: var(--line-on-dark); }

/* ================= TYPE HELPERS ================= */
.eyebrow{
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--emerald);
  margin-bottom: 1.15rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before, .eyebrow::after{
  content:""; width: 22px; height:1px; background: currentColor; opacity:0.55;
}
.section-head--light .eyebrow{ color: var(--sage); }
.script{
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1;
}
.section-title{
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 20ch;
}
.section-intro{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.08rem;
  color: var(--ink-soft);
  max-width: 56ch;
  margin-top: 1.3rem;
}
.section-head{
  max-width: 900px;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section-head--light .section-title,
.section-head--light .section-intro{ color: var(--on-dark); }
.section-head--light .section-intro{ color: var(--on-dark-soft); }

/* ================= REVEAL ON SCROLL ================= */
.reveal{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ================= BUTTONS ================= */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 2.35rem;
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.45s var(--ease);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::before{
  content:"";
  position:absolute; inset:0;
  background: var(--emerald);
  opacity:0;
  transform: translateX(-100%);
  transition: transform 0.55s var(--ease), opacity 0.35s;
  z-index:-1;
}
.btn--primary{ background: var(--abyss); color: var(--mint); border-color: var(--abyss); }
.btn--primary:hover{ border-color: var(--emerald); color: var(--paper); letter-spacing: 0.24em; }
.btn--primary:hover::before{ opacity:1; transform: translateX(0); }
.btn--ghost{ background: transparent; color: var(--on-dark); border-color: var(--line-on-dark); }
.btn--ghost:hover{ border-color: var(--sage); color: var(--sage); }
.btn--wide{ width: 100%; padding: 1.1rem; }

/* ================= PROGRESS SEAL (signature scroll element) ================= */
.progress-seal{
  position: fixed;
  right: clamp(0.9rem, 3vw, 2.2rem);
  bottom: clamp(0.9rem, 3vw, 2.2rem);
  width: 58px; height: 58px;
  z-index: 500;
  pointer-events: none;
  filter: drop-shadow(0 10px 22px rgba(5,31,32,0.28));
}
.progress-ring{ width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-ring__track{
  fill: rgba(251,253,250,0.9);
  stroke: var(--line);
  stroke-width: 2;
}
.progress-ring__fill{
  fill: none;
  stroke: var(--emerald);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 289;
  stroke-dashoffset: 289;
  transition: stroke-dashoffset 0.15s linear;
}
.progress-seal__mark{
  position: absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.progress-seal__mark img{ width: 58%; height:auto; display:block; }

/* ================= HEADER / NAV ================= */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 400;
  padding: 1.35rem var(--gutter);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), padding 0.4s var(--ease);
}
.site-header.is-scrolled{
  background: rgba(5,31,32,0.88);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 1px 0 var(--line-on-dark), 0 24px 44px -32px rgba(5,31,32,0.5);
  padding: 0.85rem var(--gutter);
}
.site-header.is-scrolled .nav a{ color: var(--on-dark-soft); }
.site-header.is-scrolled .nav a:hover{ color: var(--mint); }
.site-header.is-scrolled .nav__cta{ border-color: var(--mint); color: var(--mint) !important; }
.site-header.is-scrolled .nav__cta:hover{ background: var(--mint); color: var(--abyss) !important; }
.site-header.is-scrolled .nav-toggle span{ background: var(--mint); }

.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width: 1400px; margin: 0 auto;
}
.brand{ display:flex; align-items:center; line-height:0; }
.brand__mark{ height: clamp(28px, 4vw, 38px); width:auto; display:block; transition: transform .4s var(--ease); }
.brand:hover .brand__mark{ transform: scale(1.05); }
.nav{
  display:flex; align-items:center; gap: clamp(1.1rem, 2vw, 2.1rem);
  font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase;
  font-weight: 600;
}
.nav a{ position:relative; padding-bottom: 4px; color: var(--ink-soft); transition: color .3s; }
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: var(--sage); transition: right .4s var(--ease);
}
.nav a:hover{ color: var(--ink); }
.nav a:hover::after{ right:0; }
.nav__cta{
  border: 1px solid var(--ink); padding: 0.6rem 1.2rem; color: var(--ink) !important;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.nav__cta::after{ display:none; }
.nav__cta:hover{ background: var(--ink); color: var(--mint) !important; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; z-index:401;
}
.nav-toggle span{ width:24px; height:1px; background: var(--ink); transition: all .3s; }

/* ================= HERO ================= */
.hero{
  min-height: 100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  text-align:center;
  padding: 8rem var(--gutter) 5rem;
  background:
    linear-gradient(180deg, rgba(14,38,33,0.32) 0%, rgba(14,38,33,0.12) 26%, rgba(14,38,33,0.62) 74%, rgba(14,38,33,0.92) 100%),
    url("assets/images/hero-floral-bg.webp") center 42%/cover no-repeat,
    var(--hero-forest);
  overflow: hidden;
}
.hero__botanical{
  position:absolute; width: min(40vw, 420px); aspect-ratio: 1/1.4; opacity:0.35; z-index:0;
  color: var(--gold-soft);
  animation: driftBotanical 16s ease-in-out infinite;
}
.hero__botanical--left{ left:-6%; top:6%; }
.hero__botanical--right{ right:-8%; bottom:10%; transform: scaleX(-1) rotate(6deg); animation-delay:-8s; }
@keyframes driftBotanical{
  0%, 100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-12px) rotate(1deg); }
}
.hero__botanical--right{ animation-name: driftBotanicalR; }
@keyframes driftBotanicalR{
  0%, 100%{ transform: scaleX(-1) rotate(6deg) translateY(0); }
  50%{ transform: scaleX(-1) rotate(6deg) translateY(-12px); }
}
.hero__content{
  position:relative; z-index:1; max-width: 880px;
  animation: heroRise 1.5s var(--ease-soft) both;
}
@keyframes heroRise{ from{ opacity:0; transform: translateY(20px);} to{ opacity:1; transform:translateY(0);} }
.hero .eyebrow{ color: var(--gold-soft); justify-content:center; width:100%; text-shadow: 0 2px 14px rgba(14,38,33,0.6); }
.hero__names{
  display:flex; align-items:center; justify-content:center; gap: clamp(0.6rem,3vw,1.6rem);
  font-family: var(--font-script);
  font-size: clamp(3.6rem, 11vw, 7.4rem);
  color: var(--gold);
  margin: 0.6rem 0 1.3rem;
  line-height: 0.9;
  text-shadow: 0 6px 40px rgba(5,20,18,0.65);
}
.hero__amp{ font-family: var(--font-display); font-style: italic; font-size: 0.42em; color: var(--gold-soft); }
.hero__tagline{
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.1rem, 2.1vw, 1.35rem); color: var(--mint);
  max-width: 44ch; margin: 0 auto;
  text-shadow: 0 2px 16px rgba(14,38,33,0.7);
}
.hero__meta{
  display:flex; align-items:center; justify-content:center; gap: clamp(1.2rem,3vw,2.8rem);
  margin: 2.75rem auto 2.85rem; flex-wrap: wrap;
  padding: 1.4rem clamp(1.6rem, 3vw, 3rem);
  border-top: 1px solid rgba(201,162,75,0.4);
  border-bottom: 1px solid rgba(201,162,75,0.4);
  background: rgba(14,38,33,0.42);
  border-radius: var(--radius-md);
  backdrop-filter: blur(2px);
}
.hero__meta-item{ display:flex; flex-direction:column; gap:0.35rem; }
.hero__meta-label{ font-size:0.66rem; letter-spacing:0.24em; text-transform:uppercase; color: var(--gold-soft); }
.hero__meta-value{ font-family: var(--font-display); font-size:1.28rem; color: var(--gold); }
.hero__divider{ width:1px; height:32px; background: rgba(201,162,75,0.4); }
.hero__actions{ display:flex; gap:1.1rem; justify-content:center; flex-wrap:wrap; }
.hero__actions .btn--primary{ background: var(--gold); color: var(--hero-forest); border-color: var(--gold); }
.hero__actions .btn--primary:hover{ color: var(--gold); }
.hero__actions .btn--primary::before{ background: var(--hero-forest); }
.hero__actions .btn--ghost{ color: var(--gold-soft); border-color: rgba(201,162,75,0.55); }
.hero__actions .btn--ghost:hover{ color: var(--hero-forest); background: var(--gold-soft); }

.scroll-cue{
  position:absolute; bottom: 1.8rem; left:50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:0.6rem;
  font-size:0.66rem; letter-spacing:0.24em; text-transform:uppercase; color: var(--gold-soft);
  z-index:1;
}
.scroll-cue__line{ width:1px; height:34px; background: rgba(201,162,75,0.4); position:relative; overflow:hidden; }
.scroll-cue__line::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background: var(--gold); animation: scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* ================= COUNTDOWN STRIP ================= */
.countdown{
  padding: 2.75rem var(--gutter);
  background: var(--abyss);
  color: var(--on-dark);
  text-align:center;
  border-bottom: 1px solid var(--line-on-dark);
}
.countdown__inner{ display:flex; justify-content:center; align-items:stretch; gap:0; flex-wrap:wrap; }
.countdown__item{
  display:flex; flex-direction:column; align-items:center; gap:0.4rem; position:relative;
  padding: 0 clamp(1.2rem,4vw,3.2rem);
  border-left: 1px solid var(--line-on-dark);
}
.countdown__item:first-child{ border-left:none; }
.countdown__num{ font-family: var(--font-display); font-weight:500; font-size: clamp(2rem,4vw,2.9rem); color: var(--mint); line-height:1; font-variant-numeric: tabular-nums; }
.countdown__label{ font-size:0.64rem; letter-spacing:0.24em; text-transform:uppercase; color: var(--sage); margin-top:0.15rem; }
.countdown__note{ margin-top:1.5rem; font-size:0.86rem; font-style:italic; font-family: var(--font-display); color: var(--on-dark-soft); }

/* ================= STORY PHOTO BANNER ================= */
.story-photo{
  max-width: 880px; margin: 0 auto clamp(3.25rem, 6vw, 5rem);
  aspect-ratio: 21/9; overflow: hidden; border-radius: var(--radius-md);
  position:relative;
  box-shadow: var(--shadow-soft);
}
.story-photo img{ width:100%; height:100%; object-fit: cover; object-position: center 35%; transition: transform 1.3s var(--ease-soft); }
.story-photo:hover img{ transform: scale(1.04); }

/* ================= FRAME UTILITY — thin hairline inset shared by every
   photograph, so venue shots, gallery, and portraits read as one set ===== */
.frame{ position:relative; }
.frame::before{
  content:"";
  position:absolute; inset:9px;
  border: 1px solid rgba(251,253,250,0.5);
  z-index:2; pointer-events:none;
}

/* ================= STORY TIMELINE ================= */
.timeline-story{
  max-width: 760px; margin: 0 auto;
  border-left: 1px solid var(--line);
  padding-left: clamp(1.8rem, 4vw, 3.25rem);
}
.timeline-story__item{ position:relative; padding-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.timeline-story__item:last-child{ padding-bottom:0; }
.timeline-story__item::before{
  content:""; position:absolute; left: calc(-1 * clamp(1.8rem,4vw,3.25rem) - 5px); top:6px;
  width:9px; height:9px; border-radius:50%; background: var(--paper); border: 1.5px solid var(--sage);
  transition: transform .4s var(--ease), background .4s var(--ease);
}
.timeline-story__item:hover::before{ background: var(--sage); transform: scale(1.25); }
.timeline-story__year{
  font-family: var(--font-display); font-style:italic; color: var(--emerald);
  font-size:1.08rem; margin-bottom:0.45rem; letter-spacing: 0.02em;
}
.timeline-story__body h3{
  font-family: var(--font-display); font-weight:500; font-size:1.8rem; margin-bottom:0.6rem;
}
.timeline-story__body p{ color: var(--ink-soft); max-width: 56ch; }

/* ================= WEDDING PARTY ================= */
.party-cols{
  max-width: 980px; margin: 0 auto;
  display:grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 5vw, 5.5rem);
}
.party-col-title{
  font-family: var(--font-display); font-size: 1.55rem; font-weight:500; color: var(--ink);
}
.party-col-sub{
  font-size:0.76rem; letter-spacing:0.12em; text-transform:uppercase; color: var(--emerald);
  margin: 0.4rem 0 1.7rem;
}
.party-list{ display:flex; flex-direction:column; }
.party-list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding: 0.9rem 0; border-bottom: 1px solid var(--line-soft);
  font-size: 1.01rem; color: var(--ink-soft);
  transition: padding-left .3s var(--ease), color .3s var(--ease);
}
.party-list li:hover{ padding-left: 0.4rem; color: var(--ink); }
.party-list li:last-child{ border-bottom:none; }
.party-list li.honor{ color: var(--ink); font-weight:600; }
.party-list .role{
  font-family: var(--font-display); font-style:italic; font-size:0.9rem; color: var(--emerald);
}

/* ================= VENUES ================= */
.venue-split{ max-width:1160px; margin: 0 auto; display:flex; flex-direction:column; gap: clamp(2.5rem,4vw,4rem); position:relative; z-index:1; }
.venue-panel{ display:grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.5rem,4vw,3.75rem); align-items:center; }
.venue-panel--reverse{ grid-template-columns: 1.1fr 1fr; }
.venue-panel--reverse .venue-panel__art{ order:2; }
.venue-panel__art{
  aspect-ratio: 4/3; position:relative; overflow:hidden; border-radius: var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-soft);
}
.venue-panel__art img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform 1.15s var(--ease-soft);
}
.venue-panel__art:hover img{ transform: scale(1.05); }
.venue-panel__art::after{ content:""; position:absolute; inset:0; }
.venue-panel__art--i::after{ background: linear-gradient(160deg, rgba(11,43,38,0.4), rgba(5,31,32,0.55)); }
.venue-panel__art--ii::after{ background: linear-gradient(160deg, rgba(35,83,71,0.4), rgba(11,43,38,0.55)); }
.venue-panel__roman{ position:relative; z-index:1; font-family: var(--font-display); font-size: 6rem; color: rgba(218,241,222,0.9); font-style:italic; text-shadow: 0 2px 20px rgba(0,0,0,0.35); }
.venue-panel__where{ font-size:0.85rem; letter-spacing:0.06em; color: var(--sage); font-weight:600; margin: 0.55rem 0 1.1rem; }
.venue-panel h3{ font-family: var(--font-display); font-size: clamp(1.85rem,3vw,2.4rem); font-weight:500; }
.venue-panel p:not(.venue-panel__where){ color: var(--on-dark-soft); max-width: 46ch; }

.venue-strip{ max-width:1160px; margin: clamp(3rem,5vw,4.5rem) auto 0; position:relative; z-index:1; }
.venue-strip__label{
  text-align:center; font-family: var(--font-display); font-style:italic; font-size:1.15rem;
  color: var(--sage); margin-bottom: 1.6rem;
}
.venue-strip__grid{ display:grid; grid-template-columns: repeat(2, 1fr); max-width: 720px; margin: 0 auto; gap: clamp(1rem, 2vw, 1.6rem); }
.venue-strip__item{ position:relative; overflow:hidden; border-radius: var(--radius-md); aspect-ratio: 4/3.1; box-shadow: var(--shadow-soft); }
.venue-strip__item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform 1s var(--ease-soft); }
.venue-strip__item:hover img{ transform: scale(1.07); }
.venue-strip__item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding: 0.9rem 1.1rem;
  font-family: var(--font-display); font-style:italic; font-size:0.9rem; color: var(--mint);
  background: linear-gradient(to top, rgba(5,31,32,0.75), transparent);
}

.venue-maps{ max-width:1160px; margin: clamp(3rem,5vw,4.5rem) auto 0; position:relative; z-index:1; display:grid; grid-template-columns: 1fr; gap: clamp(2rem,4vw,3rem); }
.venue-map{ display:grid; grid-template-columns: 1fr; gap: clamp(1.2rem,2.5vw,2rem); align-items:stretch; }
.venue-map__frame{ aspect-ratio: 16/10; overflow:hidden; border:1px solid var(--line-on-dark); filter: grayscale(0.2) sepia(0.05); border-radius: var(--radius-md); }
.venue-map__frame iframe{ width:100%; height:100%; border:0; }
.venue-map__caption{
  background: rgba(218,241,222,0.06); border: 1px solid var(--line-on-dark); color: var(--on-dark);
  padding: 2.1rem; display:flex; flex-direction:column; justify-content:center; gap:0.6rem;
  border-radius: var(--radius-md);
}
.venue-map__caption h4{ font-family: var(--font-display); font-size:1.5rem; color: var(--mint); }
.venue-map__caption p{ color: var(--on-dark-soft); }
.venue-map__caption a{ margin-top:0.6rem; font-size:0.83rem; color: var(--sage); text-decoration: underline; text-underline-offset:4px; transition: opacity .3s; }
.venue-map__caption a:hover{ opacity:0.75; }

@media (min-width: 900px){
  .venue-maps{ grid-template-columns: 1fr 1fr; }
  .venue-map{ grid-template-columns: 1fr; }
}

/* ================= FIND MY TABLE ================= */
.table-finder__box{ max-width: 640px; margin: 0 auto; text-align:center; position:relative; z-index:1; }
.table-finder__row{ display:flex; gap:0.8rem; flex-wrap:wrap; justify-content:center; }
.table-finder__row input{
  flex: 1 1 280px; background: var(--paper); border: 1px solid rgba(5,31,32,0.18);
  padding: 0.9rem 1.15rem; border-radius: var(--radius); font-size: 1rem;
  transition: border-color .3s, box-shadow .3s;
}
.table-finder__row input:focus{ border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(35,83,71,0.14); }
.table-finder__row .btn{ flex: 0 0 auto; }
.table-finder__results{ margin-top: 1.8rem; text-align:left; }
.table-finder__placeholder{ text-align:center; color: var(--ink-soft); font-style:italic; font-family: var(--font-display); font-size:1.06rem; }
.table-finder__card{
  background: var(--paper); border: 1px solid rgba(5,31,32,0.14);
  border-radius: var(--radius-md); padding: 1.55rem 1.85rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-bottom: 0.8rem; box-shadow: var(--shadow-soft);
  animation: cardRise .5s var(--ease-soft) both;
}
@keyframes cardRise{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:translateY(0); } }
.table-finder__card-name{ font-family: var(--font-display); font-size:1.28rem; color: var(--ink); }
.table-finder__card-role{ font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--emerald); margin-top:0.2rem; }
.table-finder__card-table{
  font-family: var(--font-display); font-size:1.05rem; font-weight:500;
  color: var(--mint); background: var(--abyss); padding:0.55rem 1.1rem; border-radius:2px; white-space:nowrap;
}
.table-finder__match-btn{
  display:block; width:100%; text-align:left; background: var(--paper); border:1px solid rgba(5,31,32,0.14);
  padding: 0.95rem 1.25rem; border-radius: var(--radius); margin-bottom:0.65rem; cursor:pointer;
  font-family: var(--font-body); font-size:0.95rem; color: var(--ink); transition: border-color .25s, transform .25s;
}
.table-finder__match-btn:hover{ border-color: var(--emerald); transform: translateX(3px); }
.table-finder__note{ margin-top:1.3rem; font-size:0.85rem; color: var(--ink-soft); text-align:center; }
.table-finder__note a{ text-decoration:underline; text-underline-offset:3px; color: var(--emerald); }

/* ================= RSVP ================= */
.rsvp-form{ max-width: 620px; margin: 0 auto; display:flex; flex-direction:column; gap: 1.4rem; position:relative; z-index:1; }
.form-row{ display:flex; flex-direction:column; gap:0.55rem; }
.form-row--split{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.form-row--split > div{ display:flex; flex-direction:column; gap:0.55rem; }
.form-row label, .form-row legend{
  font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; color: var(--sage);
}
.form-row input[type="text"], .form-row input[type="email"], .form-row input[type="tel"], .form-row input[type="number"], .form-row select, .form-row textarea{
  background: rgba(218,241,222,0.06);
  border: 1px solid var(--line-on-dark);
  color: var(--on-dark);
  padding: 0.9rem 1.05rem;
  border-radius: var(--radius);
  transition: border-color .3s, background .3s;
}
.form-row input::placeholder, .form-row textarea::placeholder{ color: rgba(218,241,222,0.38); }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ border-color: var(--sage); background: rgba(218,241,222,0.1); }
.form-row select option{ color: var(--ink); }
.form-row--fieldset{ border:none; padding:0; margin:0; }
.radio-group{ display:flex; gap:0.85rem; flex-wrap:wrap; }
.radio-pill{
  display:flex; align-items:center; gap:0.5rem;
  border:1px solid var(--line-on-dark); padding:0.7rem 1.15rem; border-radius: 999px;
  font-size:0.85rem; text-transform:none; letter-spacing:0.02em; cursor:pointer;
  transition: border-color .3s, background .3s;
}
.radio-pill:has(input:checked){ border-color: var(--sage); background: rgba(142,182,155,0.14); }
.form-status{ font-size:0.86rem; font-style:italic; font-family: var(--font-display); min-height:1.4em; color: var(--sage); }
.rsvp-alt{ margin-top:0.65rem; font-size:0.85rem; color: var(--on-dark-soft); text-align:center; }
.rsvp-alt a{ color: var(--mint); border-bottom: 1px solid var(--line-on-dark); }

/* ================= GALLERY ================= */
.gallery-grid{
  max-width:1280px; margin:0 auto; position:relative; z-index:1;
  display:grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 235px;
  gap: clamp(0.75rem, 1.6vw, 1.3rem);
}
.gallery-frame{ position:relative; overflow:hidden; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.gallery-frame--tall{ grid-row: span 2; }
.gallery-frame--wide{ grid-column: span 2; }
.gallery-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .85s var(--ease); }
.gallery-frame:hover img{ transform: scale(1.07); }
.gallery-frame figcaption{
  position:absolute; left:0; right:0; bottom:0; padding: 1.05rem 1.25rem;
  font-family: var(--font-display); font-style:italic; font-size:0.96rem; color: var(--mint);
  background: linear-gradient(to top, rgba(5,31,32,0.68), transparent);
  transform: translateY(6px); opacity: 0.9; transition: transform .5s var(--ease);
}
.gallery-frame:hover figcaption{ transform: translateY(0); opacity:1; }

/* ================= FOOTER ================= */
.site-footer{
  background: var(--abyss); color: var(--on-dark);
  text-align:center; padding: clamp(3.5rem,6vw,5rem) var(--gutter) 2.75rem;
  position:relative; overflow:hidden;
}
.site-footer__mark{ display:inline-block; height: clamp(70px, 10vw, 108px); width:auto; margin-bottom: 1.4rem; filter: drop-shadow(0 10px 24px rgba(0,0,0,0.4)); }
.site-footer__verse{
  font-family: var(--font-display); font-style:italic; font-size:1.15rem;
  color: var(--sage); max-width:34ch; margin: 0.4rem auto 1.3rem;
}
.site-footer__verse cite{ display:block; font-style:normal; font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; color: var(--on-dark-soft); margin-top:0.55rem; }
.site-footer__line{ font-family: var(--font-script); font-size:2.4rem; letter-spacing:0.01em; color: var(--mint); }
.site-footer__date{ font-size:0.85rem; color: var(--on-dark-soft); margin-top:0.5rem; }
.site-footer__thanks{ display:inline-block; margin-top:1.6rem; font-size:0.82rem; text-decoration:underline; text-underline-offset:4px; color: var(--sage); transition: opacity .3s; }
.site-footer__thanks:hover{ opacity:0.75; }
.site-footer__credit{ margin-top:2.1rem; font-size:0.72rem; color: var(--on-dark-soft); letter-spacing:0.04em; }

/* ================= THANK YOU PAGE (shared classes) ================= */
.thankyou-hero{
  min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  position: relative; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(5,31,32,0.25) 0%, rgba(5,31,32,0.65) 100%),
    url("assets/images/hero-photo.webp") center 25%/cover no-repeat,
    var(--abyss);
  padding: 6rem var(--gutter);
}
.thankyou-hero .script{ font-size: clamp(3.6rem, 9vw, 6.6rem); color: var(--mint); }
.thankyou-body{ max-width:640px; margin: 2.1rem auto 0; text-align:center; position:relative; z-index:1; }
.thankyou-body p{ color: var(--on-dark-soft); font-size:1.08rem; margin-bottom:1.25rem; }
.thankyou-signature{ font-family: var(--font-script); font-size:2.6rem; color: var(--sage); margin-top:1.6rem; }

/* ================= RESPONSIVE ================= */
@media (max-width: 980px){
  .party-cols{ grid-template-columns: 1fr; gap: 2.5rem; }
  .venue-panel, .venue-panel--reverse{ grid-template-columns: 1fr; }
  .venue-panel--reverse .venue-panel__art{ order: 0; }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .venue-strip__grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px){
  .nav-toggle{ display:flex; }
  .nav{
    position: fixed; inset: 0 0 0 auto; width: min(78vw, 340px);
    background: var(--abyss); flex-direction:column; align-items:flex-start;
    padding: 6.5rem 2rem 2rem; gap: 1.6rem;
    transform: translateX(100%); transition: transform .45s var(--ease);
    box-shadow: -10px 0 40px rgba(0,0,0,0.3);
  }
  .nav.is-open{ transform: translateX(0); }
  .nav a{ color: var(--on-dark-soft) !important; }
  .nav a:hover{ color: var(--mint) !important; }
  .nav__cta{ margin-top:0.5rem; border-color: var(--mint) !important; color: var(--mint) !important; }
  .nav__cta:hover{ background: var(--mint); color: var(--abyss) !important; }
  .hero__meta{ gap:1.2rem; }
  .hero__divider{ display:none; }
  .countdown__item{ padding: 0 0.9rem; }
  .form-row--split{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns: 1fr 1fr; grid-auto-rows: 185px; }
  .venue-strip__grid{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .gallery-grid{ grid-template-columns: 1fr; }
  .gallery-frame--tall{ grid-row: span 1; }
  .gallery-frame--wide{ grid-column: span 1; }
  .hero__names{ gap:0.4rem; }
  .table-finder__card{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 768px) {

  .gallery-frame--wide{
      height:240px !important;
  }

  .gallery-frame--tall{
      height:360px !important;
  }



}