/* =================================================================
   Sarah & Maurice — Save the Date
   Soft romantic garden. Built to be edited: tokens live in :root.
   ================================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Neutrals (tinted warm, never pure) */
  --cream:      oklch(0.974 0.013 88);
  --cream-deep: oklch(0.953 0.019 86);
  --paper:      oklch(0.993 0.006 92);

  /* Ink */
  --ink:        oklch(0.31 0.022 152);
  --ink-soft:   oklch(0.45 0.022 150);

  /* Botanicals */
  --sage:       oklch(0.64 0.045 150);
  --sage-deep:  oklch(0.50 0.050 152);
  --sage-mist:  oklch(0.86 0.030 150);
  --forest:     oklch(0.34 0.040 152);

  /* Romance + metal */
  --blush:      oklch(0.87 0.045 24);
  --rose:       oklch(0.69 0.092 19);
  --gold:       oklch(0.74 0.075 80);
  --gold-deep:  oklch(0.62 0.080 76);

  --line:       oklch(0.84 0.018 88);
  --line-soft:  oklch(0.89 0.014 88);

  /* Type */
  --serif:  "Cormorant Garamond", "Hoefler Text", Georgia, serif;
  --sans:   "Jost", "Helvetica Neue", Arial, sans-serif;
  --script: "Pinyon Script", "Snell Roundhand", cursive;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);   /* ease-out-expo-ish */
  --ease-soft: cubic-bezier(0.33, 0, 0.2, 1);

  /* Rhythm */
  --section-y: clamp(4.5rem, 11vw, 9.5rem);
  --wrap: 72rem;
  --wrap-narrow: 44rem;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  background-color: var(--cream);
  background-image:
    radial-gradient(120% 80% at 50% -10%, oklch(0.98 0.02 90) 0%, transparent 55%),
    radial-gradient(90% 70% at 100% 100%, oklch(0.95 0.03 150 / 0.5) 0%, transparent 60%);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--blush); color: var(--ink); }
[hidden] { display: none !important; }

/* ---------- Layout helpers ---------- */
.wrap { width: min(100% - 2.6rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.6rem, var(--wrap-narrow)); }
.center { text-align: center; }
.section { padding-block: var(--section-y); position: relative; }
section[id] { scroll-margin-top: 84px; }
.section--tint { background: oklch(0.95 0.02 88 / 0.6); }
.dot { color: var(--gold-deep); padding-inline: 0.15em; }

/* Petals sit behind content */
#petals { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main { position: relative; z-index: 1; }

/* ---------- Typography ---------- */
.couple {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3.4rem, 12vw, 8.5rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.amp { font-family: var(--script); font-weight: 400; color: var(--gold-deep); font-size: 0.78em; padding-inline: 0.06em; }

.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: 0.005em;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  color: var(--ink);
}
.h3__no {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  color: var(--gold-deep);
  transform: translateY(-0.25em);
}

.eyebrow {
  font-family: var(--sans);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: clamp(0.66rem, 1.4vw, 0.78rem);
  color: var(--sage-deep);
}
.eyebrow--hero { color: var(--gold-deep); }

.lead {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 36ch;
  margin-inline: auto;
}
.lead--soft { color: var(--ink-soft); font-style: italic; margin-top: 1.4rem; }

.section__head { margin-bottom: clamp(2.6rem, 6vw, 4.5rem); }
.section__head .eyebrow { margin-bottom: 0.9rem; }
.section__head .h2 { margin-bottom: 1.2rem; }
.section__intro {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 56ch;
  margin-inline: auto;
}

/* ---------- Dividers / sprig marks ---------- */
.divider { width: clamp(150px, 26vw, 240px); height: auto; color: var(--gold); margin: clamp(1.6rem, 4vw, 2.6rem) auto 0; }
.sprig-mark { width: clamp(74px, 12vw, 110px); height: auto; color: var(--sage); margin: 0 auto 1.4rem; opacity: 0.85; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--sans); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.74rem;
  text-decoration: none; border-radius: 999px;
  padding: 0.95rem 1.9rem; min-height: 44px;
  transition: transform 0.5s var(--ease), background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.btn--solid { background: var(--forest); color: var(--cream); box-shadow: 0 1px 0 oklch(0.34 0.04 152 / 0.4); }
.btn--solid:hover { background: oklch(0.40 0.045 152); transform: translateY(-2px); box-shadow: 0 10px 26px oklch(0.34 0.04 152 / 0.25); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); margin-top: 2rem; }
.btn--ghost:hover { border-color: var(--sage); color: var(--sage-deep); transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }

/* =================================================================
   NAV
   ================================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem clamp(1.3rem, 4vw, 2.6rem);
  transition: background-color 0.5s var(--ease), box-shadow 0.5s var(--ease), padding 0.5s var(--ease);
}
.nav.is-scrolled {
  background: oklch(0.974 0.013 88 / 0.9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--line-soft);
  padding-block: 0.8rem;
}
.nav__mark { text-decoration: none; }
.nav__mono {
  font-family: var(--serif); font-weight: 500; font-size: 1.35rem; letter-spacing: 0.04em; color: var(--ink);
  opacity: 0; transform: translateY(-6px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.nav.is-scrolled .nav__mono { opacity: 1; transform: none; }
.nav__amp { font-family: var(--script); color: var(--gold-deep); font-size: 0.9em; padding-inline: 0.04em; }
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.2rem);
  opacity: 0; transform: translateY(-6px); transition: opacity 0.6s var(--ease) 0.05s, transform 0.6s var(--ease) 0.05s; }
.nav.is-scrolled .nav__links { opacity: 1; transform: none; }
.nav__links a {
  font-family: var(--sans); font-weight: 400; text-decoration: none;
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; color: var(--ink-soft);
  position: relative; padding-block: 0.3rem; transition: color 0.3s var(--ease);
}
.nav__links a:not(.nav__cta)::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--sage); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease);
}
.nav__links a:not(.nav__cta):hover { color: var(--ink); }
.nav__links a:not(.nav__cta):hover::after { transform: scaleX(1); }
.nav__cta { color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 0.55rem 1.1rem; transition: border-color 0.3s var(--ease), color 0.3s var(--ease); }
.nav__cta:hover { border-color: var(--sage); color: var(--sage-deep); }
@media (max-width: 720px) {
  .nav__links a:not(.nav__cta) { display: none; }
  .nav__mono { opacity: 1; transform: none; }
  .nav__links { opacity: 1; transform: none; }
}

/* =================================================================
   HERO
   ================================================================= */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center; padding: 6.5rem 1.4rem 2.2rem; overflow: hidden;
}
.hero__wash {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 16%, oklch(0.99 0.03 92 / 0.9) 0%, transparent 60%),
    radial-gradient(70% 60% at 50% 120%, oklch(0.93 0.04 150 / 0.55) 0%, transparent 60%);
}
.hero__inner { position: relative; z-index: 2; max-width: 60rem; width: 100%; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; }

.eyebrow--hero {
  display: inline-flex; align-items: center; gap: 1.1rem; margin-bottom: clamp(1.4rem, 4vw, 2.4rem);
}
.eyebrow--hero::before, .eyebrow--hero::after {
  content: ""; width: clamp(28px, 7vw, 58px); height: 1px; background: var(--gold); opacity: 0.8;
}

/* Crest / monogram */
.crest { position: relative; width: clamp(116px, 20vw, 168px); aspect-ratio: 1; margin: 0 auto clamp(0.6rem, 2vw, 1.2rem); }
.crest__wreath { width: 100%; height: 100%; color: var(--sage); opacity: 0.9; }
.crest__initials {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 3.2vw, 1.95rem); letter-spacing: 0.06em; color: var(--ink);
}
.crest__amp { font-family: var(--script); color: var(--gold-deep); font-size: 1.15em; line-height: 0; padding-inline: 0.12em; transform: translateY(0.04em); }
.crest--sm { width: 96px; margin-bottom: 1.2rem; }

.hero__sub {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.3rem, 3vw, 2rem); color: var(--ink-soft);
  margin-top: clamp(0.6rem, 2vw, 1.1rem);
}
.hero__meta { margin-top: clamp(1.8rem, 5vw, 3rem); }
.hero__date {
  font-family: var(--sans); font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.24em; font-size: clamp(0.82rem, 1.8vw, 1rem); color: var(--ink);
}
.hero__rule { width: clamp(160px, 30vw, 240px); height: auto; color: var(--gold); margin: 1.3rem auto; }
.hero__place {
  font-family: var(--serif); font-size: clamp(1.05rem, 2.2vw, 1.35rem); line-height: 1.5; color: var(--ink-soft);
}
.hero__place span { font-style: italic; }

/* Hero floral corners */
.hero__florals { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.floral { position: absolute; width: clamp(120px, 22vw, 260px); height: auto; color: var(--sage); opacity: 0.55; will-change: transform; }
.floral--tl { top: clamp(70px, 12vh, 130px); left: -1.5rem; }
.floral--tr { top: clamp(70px, 12vh, 130px); right: -1.5rem; transform: scaleX(-1); }
.floral--bl { bottom: 1rem; left: -1.5rem; transform: scaleY(-1); }
.floral--br { bottom: 1rem; right: -1.5rem; transform: scale(-1, -1); }

/* Scroll cue */
.scrollcue {
  position: relative; z-index: 2; margin-top: 1.6rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem; text-decoration: none;
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.62rem; color: var(--ink-soft);
}
.scrollcue__line { width: 1px; height: 46px; background: linear-gradient(var(--sage), transparent); position: relative; overflow: hidden; }
.scrollcue__line::after {
  content: ""; position: absolute; top: -40%; left: 0; width: 100%; height: 40%; background: var(--gold-deep);
  animation: cue 2.4s var(--ease-soft) infinite;
}
@keyframes cue { 0% { top: -45%; } 70%,100% { top: 100%; } }

/* =================================================================
   WELCOME
   ================================================================= */
.welcome .eyebrow { margin-bottom: 1.6rem; }

/* =================================================================
   THE DAY / COUNTDOWN
   ================================================================= */
.day__date {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  margin: 1.4rem 0 1rem;
}
.day__weekday { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.32em; font-size: clamp(0.74rem, 1.6vw, 0.9rem); color: var(--sage-deep); }
.day__main { font-family: var(--serif); font-weight: 300; font-size: clamp(2.8rem, 8vw, 5.5rem); line-height: 1; color: var(--ink); }
.day__year { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--gold-deep); }
.day__venue { font-family: var(--serif); font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--ink-soft); margin-bottom: clamp(2rem, 5vw, 3.2rem); }

.countdown {
  display: flex; align-items: flex-start; justify-content: center; gap: clamp(0.5rem, 2.5vw, 1.6rem);
  margin: 0 auto clamp(2rem, 5vw, 3rem);
}
.cd { display: flex; flex-direction: column; align-items: center; min-width: clamp(48px, 12vw, 78px); }
.cd__num {
  font-family: var(--serif); font-weight: 400; font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 6vw, 3.6rem); line-height: 1; color: var(--ink);
}
.cd__lbl { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.2em; font-size: clamp(0.56rem, 1.3vw, 0.68rem); color: var(--ink-soft); margin-top: 0.6rem; }
.cd__sep { width: 1px; align-self: stretch; background: var(--line); margin-top: 0.3rem; height: clamp(2rem, 6vw, 3.6rem); }

.day__note { font-family: var(--serif); font-size: clamp(1.02rem, 2vw, 1.2rem); color: var(--ink-soft); max-width: 44ch; margin: 0 auto; }

/* =================================================================
   TRAVEL & ACCOMMODATIONS
   ================================================================= */
.block { max-width: 56rem; margin: 0 auto clamp(3rem, 7vw, 5rem); }
.block:last-child { margin-bottom: 0; }
.block .h3 { margin-bottom: 1rem; }
.block__intro { font-size: clamp(1rem, 1.9vw, 1.12rem); color: var(--ink-soft); max-width: 60ch; margin-bottom: 1.8rem; }
.block__foot { font-size: 0.98rem; color: var(--ink-soft); margin-top: 1.6rem; }
.block__foot strong { color: var(--ink); font-weight: 500; }

/* Airports */
.airports { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.airports li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(0.8rem, 3vw, 1.8rem);
  padding: 1.15rem 0; border-bottom: 1px solid var(--line);
}
.airports__code { font-family: var(--serif); font-size: clamp(1.4rem, 3.4vw, 1.9rem); letter-spacing: 0.05em; color: var(--sage-deep); }
.airports__name { font-family: var(--sans); font-size: clamp(0.92rem, 1.8vw, 1.05rem); color: var(--ink); }
.airports__meta { font-family: var(--sans); font-size: clamp(0.78rem, 1.6vw, 0.92rem); color: var(--ink-soft); text-align: right; }

/* Hotels — editorial list, not card grid */
.hotels { list-style: none; padding: 0; }
.hotel {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(0.8rem, 3vw, 2.5rem); align-items: start;
  padding: clamp(1.4rem, 3vw, 1.9rem) 0; border-top: 1px solid var(--line);
}
.hotel:last-child { border-bottom: 1px solid var(--line); }
.hotel__name { font-family: var(--serif); font-weight: 500; font-size: clamp(1.2rem, 2.6vw, 1.5rem); color: var(--ink); margin-bottom: 0.4rem; }
.hotel__desc { font-size: 0.98rem; color: var(--ink-soft); max-width: 44ch; }
.hotel__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.hotel__detail { font-family: var(--sans); font-size: 0.84rem; color: var(--ink-soft); }
.hotel__link {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem;
  text-decoration: none; color: var(--sage-deep); transition: color 0.3s var(--ease), gap 0.3s var(--ease);
}
.hotel__link:hover { color: var(--gold-deep); }

.tag {
  display: inline-block; font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.6rem; color: var(--gold-deep); border: 1px solid var(--gold); border-radius: 999px;
  padding: 0.25rem 0.6rem; margin-left: 0.5rem; white-space: nowrap;
}
.airports__meta .tag { margin-left: 0.4rem; }
.tag--soft { color: var(--sage-deep); border-color: var(--sage-mist); background: oklch(0.95 0.03 150 / 0.5); margin-left: 0; }

/* =================================================================
   OUR STORY — timeline
   ================================================================= */
.timeline { position: relative; max-width: 40rem; margin: 0 auto; padding-left: clamp(2.4rem, 8vw, 3.6rem); }
.timeline__vine { position: absolute; top: 0; left: 0; width: clamp(2rem, 7vw, 3rem); height: 100%; color: var(--sage); opacity: 0.8; }
.timeline__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: clamp(2.4rem, 6vw, 3.6rem); }
.tl { position: relative; }
.tl__dot {
  position: absolute; left: calc(-1 * clamp(2.4rem, 8vw, 3.6rem) + clamp(0.85rem, 3vw, 1.3rem));
  top: 0.55rem; width: 11px; height: 11px; border-radius: 50%;
  background: var(--cream); border: 1.5px solid var(--sage); transform: translateX(-50%);
}
.tl__dot--bloom { background: var(--blush); border-color: var(--rose); width: 13px; height: 13px; }
.tl__year { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.24em; font-size: 0.72rem; color: var(--gold-deep); margin-bottom: 0.5rem; }
.tl__title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--ink); margin-bottom: 0.5rem; }
.tl__text { font-family: var(--serif); font-size: clamp(1.05rem, 2vw, 1.22rem); line-height: 1.55; color: var(--ink-soft); max-width: 46ch; }
.tl__photo { margin: 1.4rem 0 0; max-width: 20rem; }
.tl__photo img { width: 100%; border-radius: 4px; display: block; box-shadow: 0 26px 50px -34px oklch(0.34 0.04 152 / 0.5); }

/* =================================================================
   STATEMENT PHOTO
   ================================================================= */
.statement { padding-block: clamp(1.5rem, 5vw, 3.5rem); position: relative; z-index: 1; }
.statement__figure { margin: 0; }
.statement__frame { position: relative; max-width: 62rem; margin: 0 auto; }
.statement__frame img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 42%;
  border-radius: 5px; display: block;
  box-shadow: 0 50px 90px -55px oklch(0.34 0.04 152 / 0.55);
}
.statement__corner { position: absolute; width: clamp(82px, 12vw, 132px); height: auto; color: var(--sage); opacity: 0.9; pointer-events: none; }
.statement__corner--tl { top: -14px; left: -10px; }
.statement__corner--br { bottom: -14px; right: -10px; transform: scale(-1, -1); }
.statement__cap { text-align: center; margin-top: 1.5rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.02rem, 2vw, 1.25rem); color: var(--ink-soft); }
.statement__cap .dot { font-style: normal; }

/* =================================================================
   VENUE ILLUSTRATION (watercolor washes + self-drawing line art)
   ================================================================= */
.venue { padding-block: clamp(2rem, 6vw, 4.5rem); position: relative; z-index: 1; }
.venue__inner { max-width: 70rem; margin: 0 auto; text-align: center; }
.venue__art { width: 100%; height: auto; display: block; margin: 0 auto; overflow: visible; }
.v-ink path { fill: none; stroke: #45543b; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Pre-draw states (only when JS is active) */
.js .venue__art .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .venue__art .v-washes { opacity: 0; transform: scale(0.99); transform-origin: 50% 62%; transition: opacity 1.8s var(--ease), transform 1.8s var(--ease); }
.js .venue__art .v-blooms,
.js .venue__art .v-rays,
.js .venue__art .v-grain { opacity: 0; transition: opacity 1.6s var(--ease); }

/* Draw it in once it scrolls into view */
.venue__art.is-drawn .draw { animation: vDraw 2s var(--ease) forwards; }
.venue__art.is-drawn .v-washes { opacity: 1; transform: none; transition-delay: 0.35s; }
.venue__art.is-drawn .v-blooms { opacity: 1; transition-delay: 1.5s; }
.venue__art.is-drawn .v-rays { opacity: 0.55; transition-delay: 1.1s; }
.venue__art.is-drawn .v-grain { opacity: 0.7; transition-delay: 0.5s; }
@keyframes vDraw { to { stroke-dashoffset: 0; } }

/* Stagger the drawing, back to front */
.venue__art.is-drawn .d-trees .draw { animation-delay: 0.05s; }
.venue__art.is-drawn .d-roof .draw  { animation-delay: 0.30s; }
.venue__art.is-drawn .d-gazebo .draw { animation-delay: 0.70s; }
.venue__art.is-drawn .d-green .draw { animation-delay: 1.10s; }
.venue__art.is-drawn .d-beds .draw  { animation-delay: 1.35s; }
.venue__art.is-drawn .d-grass .draw { animation-delay: 1.45s; }

/* Gentle, living motion */
@media (prefers-reduced-motion: no-preference) {
  .venue__art.is-drawn .v-ray { animation: vRay 12s ease-in-out infinite alternate; }
  .venue__art.is-drawn .v-ray:nth-child(2) { animation-duration: 15s; animation-delay: -5s; }
  .venue__art.is-drawn .v-ray:nth-child(3) { animation-duration: 10s; animation-delay: -2s; }
  .venue__art.is-drawn .sway { animation: vSway 7s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 8%; }
}
@keyframes vRay { from { opacity: 0.35; transform: translateX(-12px); } to { opacity: 0.7; transform: translateX(16px); } }
@keyframes vSway { from { transform: rotate(-1.3deg); } to { transform: rotate(1.3deg); } }

.venue__cap { margin-top: 1rem; font-family: var(--serif); font-style: italic; font-size: clamp(1rem, 2vw, 1.2rem); color: var(--ink-soft); }
.venue__cap .dot { font-style: normal; color: var(--gold-deep); }

/* Reduced motion: present it fully drawn, no animation */
@media (prefers-reduced-motion: reduce) {
  .js .venue__art .draw { stroke-dasharray: none; stroke-dashoffset: 0; }
  .js .venue__art .v-washes { opacity: 1; transform: none; }
  .js .venue__art .v-blooms, .js .venue__art .v-grain { opacity: 0.7; }
  .js .venue__art .v-rays { opacity: 0.5; }
}

/* =================================================================
   ADDRESS FORM
   ================================================================= */
.form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem 1.4rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: clamp(1.6rem, 5vw, 3rem);
  box-shadow: 0 30px 60px -40px oklch(0.34 0.04 152 / 0.35);
}
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--sans); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); }
.opt { text-transform: none; letter-spacing: 0; color: var(--sage); font-size: 0.9em; }
.field input, .field textarea {
  font-family: var(--serif); font-size: 1.1rem; color: var(--ink);
  background: var(--cream); border: 1px solid var(--line);
  border-radius: 3px; padding: 0.8rem 0.9rem; width: 100%;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.3s var(--ease);
}
.field textarea { resize: vertical; min-height: 3.2rem; }
.field input::placeholder, .field textarea::placeholder { color: oklch(0.62 0.02 150); font-style: italic; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--sage);
  background: var(--paper); box-shadow: 0 0 0 3px oklch(0.86 0.03 150 / 0.5);
}
.form__foot { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 0.6rem; }
.form__privacy { font-family: var(--sans); font-size: 0.78rem; color: var(--ink-soft); text-align: center; max-width: 40ch; }
.form__error {
  grid-column: 1 / -1; font-family: var(--sans); font-size: 0.86rem; color: var(--rose);
  text-align: center; background: oklch(0.95 0.04 24 / 0.6); border: 1px solid var(--blush); border-radius: 3px; padding: 0.7rem;
}
.btn--solid[aria-busy="true"] { opacity: 0.7; pointer-events: none; }

/* Success */
.thanks { text-align: center; padding: clamp(2rem, 6vw, 4rem) 1rem; }
.thanks__bloom { width: 60px; height: 60px; color: var(--rose); margin: 0 auto 1.4rem; }
.thanks .h2 { margin-bottom: 0.8rem; }
.thanks .lead { color: var(--ink-soft); }

/* =================================================================
   MORE DETAILS
   ================================================================= */
.more .h2 { margin: 0.9rem 0 1.2rem; }
.comingsoon {
  list-style: none; padding: 0; margin: clamp(2rem, 5vw, 3rem) auto 0; max-width: 40rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem;
}
.comingsoon li {
  font-family: var(--sans); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.6rem 1.2rem; background: oklch(0.99 0.006 92 / 0.6);
}
.welcome-langs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 4vw, 2.4rem);
  margin-top: clamp(2.6rem, 6vw, 4rem);
  font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 2.4vw, 1.5rem); color: var(--sage-deep);
}
.welcome-langs span { position: relative; }
.welcome-langs span:not(:last-child)::after { content: "·"; position: absolute; right: clamp(-0.6rem, -2vw, -1.3rem); color: var(--gold); }

/* =================================================================
   FOOTER
   ================================================================= */
.footer { background: var(--forest); color: oklch(0.92 0.02 90); padding: clamp(3.5rem, 8vw, 5.5rem) 1.4rem; position: relative; z-index: 1; text-align: center; }
.footer .crest__wreath { color: oklch(0.78 0.04 140); opacity: 0.85; }
.footer .crest__initials { color: oklch(0.94 0.02 90); }
.footer .crest__amp { color: var(--gold); }
.footer__couple { font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 6vw, 3.4rem); color: oklch(0.95 0.02 90); margin-bottom: 1rem; }
.footer__couple .amp { color: var(--gold); }
.footer__line { font-family: var(--sans); font-size: 0.86rem; letter-spacing: 0.08em; color: oklch(0.85 0.02 90); }
.footer__line .dot { color: var(--gold); }
.footer__note { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--gold); margin-top: 1.4rem; }

/* =================================================================
   REVEAL + PARALLAX MOTION
   ================================================================= */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Hero entrance (staggered, set running by JS via .hero-ready) */
.js [data-hero] { opacity: 0; transform: translateY(24px); }
.js .hero-ready [data-hero] { animation: heroIn 1.3s var(--ease) forwards; }
.js .hero-ready [data-hero="1"] { animation-delay: 0.1s; }
.js .hero-ready [data-hero="2"] { animation-delay: 0.28s; }
.js .hero-ready [data-hero="3"] { animation-delay: 0.5s; }
.js .hero-ready [data-hero="4"] { animation-delay: 0.78s; }
.js .hero-ready [data-hero="5"] { animation-delay: 0.98s; }
.js .hero-ready [data-hero="6"] { animation-delay: 1.4s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* Wreath line-draw on the crest */
.js .crest__wreath use { will-change: auto; }

/* =================================================================
   REDUCED MOTION
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-hero] { opacity: 1 !important; transform: none !important; animation: none !important; }
  .scrollcue__line::after { animation: none; }
  .floral { transform: none !important; }
  .floral--tr { transform: scaleX(-1) !important; }
  .floral--bl { transform: scaleY(-1) !important; }
  .floral--br { transform: scale(-1,-1) !important; }
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 640px) {
  /* Let hero text breathe; florals recede to the very edges */
  .floral { opacity: 0.4; width: clamp(96px, 26vw, 130px); }
  .floral--tl, .floral--bl { left: -2.6rem; }
  .floral--tr, .floral--br { right: -2.6rem; }
  .floral--tl, .floral--tr { top: clamp(58px, 9vh, 92px); }

  .form { grid-template-columns: 1fr; }
  .airports li { grid-template-columns: auto 1fr; row-gap: 0.2rem; }
  .airports__meta { grid-column: 1 / -1; text-align: left; padding-left: calc(clamp(1.4rem, 3.4vw, 1.9rem) + 1.8rem); }
  .hotel { grid-template-columns: 1fr; }
  .hotel__meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
}