/* ==========================================================================
   Poppy & Jasper — Animated Reveal Wedding Site
   Elegant, refined style: sage green + ivory + charcoal ink + antique gold
   ========================================================================== */

:root {
  /* Vibrant jewel-tone palette (v2): bold emerald + bright gold + a new
     fuchsia accent, on the original neutral ivory/charcoal anchors. The
     token NAMES are unchanged (--sage/--gold/etc.) so every existing
     usage across the intro scenes and real site picks up the new values
     automatically — only the hex VALUES changed, plus the new
     --fuchsia/--fuchsia-deep/--fuchsia-pale trio. See
     ANIMATED_REVEAL_V2_PLAN.md for the contrast verification behind
     each choice. */
  --sage: #0f9960;
  --sage-deep: #0b7a43;
  --sage-pale: #dff2e6;
  --ivory: #faf6ee;
  --ivory-deep: #f0e8d6;
  --gold: #eab308;
  --gold-deep: #9c5400;
  --gold-pale: #fbe8a6;
  --fuchsia: #c4267a;
  --fuchsia-deep: #9c1c60;
  --fuchsia-pale: #f9d9e7;
  --charcoal: #263238;
  --ink: #2c2b27;
  --ink-soft: #6c655c;
  --hairline: rgba(38, 50, 56, 0.14);
  --shadow-soft: 0 12px 28px rgba(38, 50, 56, 0.1);
  --shadow-lift: 0 18px 40px rgba(38, 50, 56, 0.16);
  --header-height: 76px;

  --font-display: "Playfair Display", "Georgia", serif;
  --font-body: "Karla", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---- Reset / base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
}

html.js-intro-active {
  overflow: hidden;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.7;
  font-size: 16.5px;
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--charcoal);
  margin: 0;
}

p {
  margin: 0 0 1em;
}

.container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.75rem;
}

.container-narrow {
  max-width: 720px;
}

.eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--gold-deep);
  letter-spacing: 0.03em;
  margin: 0 0 0.35rem;
  text-align: center;
}

/* ---- Shared visual motif (Phase 6) ----
   The small botanical sprig used at low opacity in the intro's scratch
   card pattern, reused here above section eyebrows so the intro and the
   real site read as one visual system rather than two stitched-together
   aesthetics. */
.section-sprig {
  display: flex;
  justify-content: center;
  margin: 0 0 0.5rem;
}

.section-sprig svg {
  width: 22px;
  height: 22px;
  opacity: 0.55;
}

.section-title {
  text-align: center;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  max-width: 40rem;
  margin: 0 auto 2.5rem;
}

.section {
  padding: 5rem 0;
  position: relative;
}

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.85rem 2rem;
  border-radius: 2px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
  background: var(--charcoal);
  color: var(--ivory);
  box-shadow: var(--shadow-soft);
  border-color: var(--charcoal);
}
.btn-primary:hover {
  background: var(--sage-deep);
  border-color: var(--sage-deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.btn-primary:active {
  transform: translateY(-1px) scale(0.98);
}

.btn-ghost {
  background: transparent;
  border-color: var(--gold-deep);
  color: var(--gold-deep);
}
.btn-ghost:hover {
  background: var(--gold-pale);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.btn-ghost:active {
  transform: translateY(-1px) scale(0.98);
}

.btn-block {
  width: 100%;
  text-align: center;
}

/* ==========================================================================
   INTRO OVERLAY — 8-scene cinematic reveal
   Only becomes a fixed page-covering overlay while html has .js-intro-active
   (added via inline <script> at top of <body>, removed by main.js when the
   sequence finishes / is skipped / times out). Without that class it's a
   normal in-flow block so a no-JS visitor can just scroll straight past it.

   Architecture: 8 full-viewport `.reveal-scene` containers (generalized from
   the prior 4-step `.intro-step` pattern), shown/hidden by toggling
   `.is-active` — an auto-advancing GSAP timeline chain, not scroll-driven
   (see ANIMATED_REVEAL_V2_PLAN.md §5 for the rationale).
   ========================================================================== */

.intro-overlay {
  position: relative;
  width: 100%;
}

html.js-intro-active .intro-overlay {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 500;
  overflow: hidden;
  background: var(--charcoal);
}

html.js-intro-active .intro-overlay.is-dismissed {
  display: none;
}

.reveal-scene {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  overflow: hidden;
}

html.js-intro-active .reveal-scene.is-active {
  display: flex;
}

.intro-skip {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 600;
  background: rgba(250, 246, 238, 0.9);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.55rem 1.1rem;
  border-radius: 2px;
  box-shadow: var(--shadow-soft);
  display: none;
}

html.js-intro-active .intro-skip {
  display: inline-block;
}

.intro-skip:hover {
  background: #fff;
  transform: translateY(-1px);
}

.intro-amp {
  color: var(--gold);
  font-style: italic;
}

/* ==========================================================================
   SCENE 1 — The Tease
   Minimal ivory background, small rings/sparkle motif, restrained ambient
   petal drift. No navigation visible. Explicit tap-to-continue (this scene
   deliberately does not auto-advance — see plan §5).
   ========================================================================== */
.scene-tease {
  background: var(--ivory);
  gap: 1.5rem;
  cursor: pointer;
}

.tease-rings {
  width: min(180px, 40vw);
  opacity: 0;
}

.tease-rings-img {
  width: 100%;
  height: auto;
  display: block;
}

.tease-sparkle {
  position: absolute;
  width: 22px;
  pointer-events: none;
}

.tease-sparkle-1 { top: -6%; right: 8%; }
.tease-sparkle-2 { bottom: 4%; left: 4%; width: 16px; }

.tease-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.3rem, 4.2vw, 2.1rem);
  color: var(--charcoal);
  max-width: 22rem;
  margin: 0;
  opacity: 0;
}

.tease-cta {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--gold-deep);
  margin: 0;
  opacity: 0;
}

.tease-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.tease-petal {
  position: absolute;
  width: 20px;
  opacity: 0.35;
}

.tease-petal-1 { top: 14%; left: 12%; }
.tease-petal-2 { bottom: 12%; right: 14%; width: 16px; }

/* ==========================================================================
   SCENE 2 — Curtains
   Real SVG drape/fabric shapes (extracted from indian-wedding-bro.svg,
   recolored) open outward with a fabric-like combination of translate +
   slight rotate/scale, revealing a soft ivory/sage backdrop behind.
   ========================================================================== */
.scene-curtains {
  padding: 0;
  z-index: 10;
}

.curtain-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, var(--sage-pale) 0%, var(--ivory) 70%);
}

.curtain-panel {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 1;
  will-change: transform;
}

.curtain-left {
  left: 0;
  transform-origin: left center;
}
.curtain-right {
  right: 0;
  transform-origin: right center;
}

/* The source artwork's natural aspect ratio (~0.5, tall/narrow) is
   preserved via height:100%/width:auto rather than object-fit:cover, so
   the drape/fabric shape is never stretched or cropped — each panel's
   width is simply whatever that aspect ratio produces at full viewport
   height. */
.curtain-svg {
  height: 100%;
  width: auto;
  display: block;
  filter: drop-shadow(6px 0 18px rgba(38, 50, 56, 0.25));
}

.curtain-right .curtain-svg {
  transform: scaleX(-1);
}

/* ==========================================================================
   SCENE 3 + 4 — Signature illustration (hands/hearts/sprigs) -> names ->
   announcement. One shared container so Scene 4 continues Scene 3's
   composition rather than cutting to something new (per plan §4).
   ========================================================================== */
/* This single scene now carries the names, the hands/hearts illustration,
   AND the scratch card all on one screen (a live simplification during
   build — see comment in index.html) — so every element here is sized
   compactly with small gaps rather than each having a full viewport's
   worth of room to itself. */
.scene-signature {
  z-index: 9;
  gap: 0.6rem;
  background: var(--charcoal);
  justify-content: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.signature-illustration {
  position: relative;
  width: min(150px, 34vw);
  max-width: 170px;
  height: min(150px, 34vw);
  max-height: 170px;
}

.signature-hands {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}

.signature-hearts {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}

.signature-sprig {
  position: absolute;
  width: 38px;
  opacity: 0;
}

.signature-sprig-left {
  bottom: -6%;
  left: -14%;
}

.signature-sprig-right {
  bottom: -8%;
  right: -16%;
  transform: scaleX(-1);
}

.signature-sparkle {
  position: absolute;
  width: 16px;
  top: 38%;
  right: 22%;
  opacity: 0;
}

.signature-names {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
}

/* "Poppy loves Jasper" reads as a single line, per client direction —
   only the flourish drops to its own line below. */
.signature-names-line {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 0.5em;
  flex-wrap: nowrap;
}

.signature-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  color: var(--ivory);
  opacity: 0;
  display: block;
}

.signature-loves {
  font-family: "Petit Formal Script", var(--font-display), cursive;
  font-size: clamp(0.85rem, 2vw, 1.05rem);
  color: var(--gold);
  opacity: 0;
  display: block;
  line-height: 1.3;
}

.signature-flourish {
  width: min(90px, 22vw);
  margin-top: 0.15rem;
  opacity: 0;
}

/* ==========================================================================
   Scratch reveal (part of the same combined scene as above)
   Same underlying canvas mechanic as before (see js/main.js
   setupScratchCard), restyled with botanical framing extracted from
   flowers-rafiki.svg.
   ========================================================================== */
.scratch-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: var(--ivory);
  margin: 0;
  position: relative;
  z-index: 1;
}

.scratch-heading-word {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity;
}

/* Positioning context for the shadow/frame/card trio — sized to the card
   itself so shadow/frame placement is relative to the CARD, not the
   viewport center (the old full-screen-scene math no longer applies now
   that this card sits lower in a stacked, single-screen composition). */
.scratch-card-group {
  position: relative;
  width: min(280px, 78vw);
}

.scratch-card-shadow {
  position: absolute;
  width: 88%;
  height: 20px;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%) scale(0.85);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 72%);
  opacity: 0;
  filter: blur(2px);
  z-index: 1;
  pointer-events: none;
}

.scratch-card-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.scratch-frame-flower {
  position: absolute;
  width: 60px;
  opacity: 0;
}

.scratch-frame-flower-tl {
  top: -34px;
  left: -30px;
}

.scratch-frame-flower-br {
  bottom: -28px;
  right: -22px;
  transform: scaleX(-1);
  width: 46px;
}

.scratch-card-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  height: min(160px, 40vw);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  background: var(--ivory);
  border: 1px solid rgba(234, 179, 8, 0.35);
  opacity: 0;
  will-change: transform, opacity;
}

.scratch-reveal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sage-pale);
}

.scratch-reveal-pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scratch-reveal-text {
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  letter-spacing: 0.04em;
  color: var(--charcoal);
  text-align: center;
  margin: 0;
  padding: 0 1rem;
}

.scratch-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  touch-action: none;
}

.scratch-card-wrap:hover .scratch-canvas {
  cursor: grab;
}

.scratch-card-wrap.is-scratching .scratch-canvas {
  cursor: grabbing;
}

.scratch-surface-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 3;
  pointer-events: none;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1rem, 3.6vw, 1.3rem);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 0 rgba(184, 137, 10, 0.9), 0 2px 4px rgba(38, 26, 10, 0.35);
  text-align: center;
  white-space: nowrap;
}

.scratch-gesture-hint {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.scratch-gesture-hint::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -30%;
  width: 35%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-40%) skewX(-12deg);
  opacity: 0;
}

.scratch-gesture-hint.is-playing::before {
  animation: scratch-shimmer-sweep 1.4s ease-in-out 1;
}

@keyframes scratch-shimmer-sweep {
  0% { transform: translateX(-40%) skewX(-12deg); opacity: 0; }
  15% { opacity: 0.9; }
  60% { opacity: 0.6; }
  100% { transform: translateX(340%) skewX(-12deg); opacity: 0; }
}

.scratch-hint {
  font-size: 0.88rem;
  color: var(--ivory-deep);
  margin: 0;
  position: relative;
  z-index: 1;
  opacity: 0;
}

/* ==========================================================================
   SCENE 6 — Date animation
   The month/day/year segments settle in individually as illustrated beats
   before resolving into the combined "09 · 18 · 27" format.
   ========================================================================== */
.scene-date {
  z-index: 7;
  gap: 1rem;
  background: var(--charcoal);
}

.date-anim-segments {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.date-segment {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ivory);
  opacity: 0;
  display: block;
}

#dateSegMonth {
  font-size: clamp(1.1rem, 3.2vw, 1.5rem);
  color: var(--gold);
  text-transform: uppercase;
}

#dateSegDay {
  font-size: clamp(2.6rem, 9vw, 4.4rem);
}

#dateSegYear {
  font-size: clamp(1.3rem, 4vw, 1.9rem);
  color: var(--ivory-deep);
}

.date-anim-combined {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  color: var(--ivory);
  letter-spacing: 0.06em;
  margin: 0;
  opacity: 0;
}

.date-anim-sparkle {
  position: absolute;
  width: 30px;
  top: 30%;
  right: 26%;
  opacity: 0;
}

/* ==========================================================================
   SCENE 7 — Save the Date
   Full-screen stationery composition reusing proposal-scene.svg (already
   correctly attired, already recolored) plus flowers-rafiki-derived field
   accents. This is the composition that Scene 8 morphs into the real hero.
   ========================================================================== */
/* Text block and illustration flow normally, stacked top-to-bottom, so
   they can never overlap regardless of viewport height (the previous
   absolute-positioned/bottom-anchored illustration combined with a
   vertically-centered text block could collide on shorter screens). */
.scene-save {
  z-index: 6;
  background: linear-gradient(180deg, var(--charcoal) 0%, #1c2529 100%);
  gap: 0.6rem;
  justify-content: flex-start;
  padding-top: 3rem;
  overflow-y: auto;
}

.save-illustration {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  width: 100%;
  margin-top: 0.75rem;
}

.save-couple-illustration {
  width: min(220px, 52vw);
  max-width: 260px;
  opacity: 0.9;
}

.save-field-flower {
  position: absolute;
  width: 90px;
  opacity: 0.5;
}

.save-field-flower-left {
  bottom: -2%;
  left: 4%;
}

.save-field-flower-right {
  bottom: -4%;
  right: 4%;
  transform: scaleX(-1);
  width: 76px;
}

.save-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
}

.save-kicker {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--gold);
  margin: 0 0 0.4rem;
  opacity: 0;
}

.save-for {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--ivory-deep);
  margin: 0 0 0.15rem;
  opacity: 0;
}

.save-names {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 6vw, 3rem);
  color: var(--ivory);
  margin: 0 0 0.3rem;
  opacity: 0;
}

.save-date {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ivory);
  margin: 0 0 0.1rem;
  opacity: 0;
}

.save-venue {
  font-size: 0.98rem;
  color: var(--ivory-deep);
  margin: 0;
  opacity: 0;
}

.save-location {
  font-size: 0.92rem;
  color: var(--ivory-deep);
  margin: 0 0 1.25rem;
  opacity: 0;
}

.intro-continue {
  opacity: 0;
}

/* ---- Scene 7 -> 8: card/date-scene -> real homepage morph ----
   The intro overlay is kept visible (pointer-events disabled) and
   cross-faded with the real site rather than snapped away via
   display:none, so there's no hard cut and no flash of mismatched
   background color. */
.intro-overlay.is-transitioning {
  pointer-events: none;
}

.intro-overlay.is-transitioning .intro-skip {
  display: none;
}

/* Real hero starts invisible until the morph timeline explicitly reveals
   it — prevents any flash-of-content before the intro finishes, and gives
   the transition timeline full control of the crossfade. */
html.js-intro-active .hero {
  opacity: 0;
}

/* Hero illustration (proposal-scene.svg reused for Scene 7 -> 8 visual
   continuity) starts invisible/offset; the morph timeline fades/positions
   it in to align with where Scene 7's copy of the same illustration was. */
/* A soft, low-opacity backdrop watermark behind the hero copy — reused
   from Scene 7/8's transition for visual continuity (see plan §11), but
   kept small and faint enough that it never competes with or sits behind
   the RSVP button/text (the button remains fully legible against the
   plain gradient background, not against the illustration). */
.hero-illustration {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(220px, 38vw);
  max-width: 260px;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 246, 238, 0.92);
  border-bottom: 1px solid var(--hairline);
  /* NOTE: no backdrop-filter/filter/transform directly on this element —
     that creates a containing block that breaks position:fixed children
     (the mobile nav). The frosted-glass effect lives on ::before instead. */
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: -1;
}

.header-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.brand-mono {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.brand-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--charcoal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.amp {
  color: var(--gold-deep);
  font-style: italic;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.site-nav ul {
  list-style: none;
  display: flex;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
}

.site-nav a {
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  position: relative;
  padding-bottom: 4px;
}

.site-nav ul a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--gold-deep);
  transition: width 0.25s ease;
}

.site-nav ul a:hover::after {
  width: 100%;
}

.nav-cta {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: transparent;
  border: 1.5px solid var(--charcoal);
  color: var(--charcoal);
  padding: 0.55rem 1.15rem;
  border-radius: 2px;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.nav-cta:hover {
  background: var(--charcoal);
  color: var(--ivory);
  transform: translateY(-1px);
}
.nav-cta:active {
  transform: translateY(0) scale(0.97);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--charcoal);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  padding: 7rem 1.5rem 6rem;
  text-align: center;
  background: linear-gradient(180deg, var(--sage-pale) 0%, var(--ivory) 65%);
  overflow: hidden;
}

.hero-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.confetti-dot {
  position: absolute;
  border-radius: 50%;
  opacity: 0.4;
}
.dot-1 { width: 10px; height: 10px; background: var(--gold); top: 10%; left: 8%; }
.dot-2 { width: 7px; height: 7px; background: var(--sage-deep); top: 20%; left: 85%; }
.dot-3 { width: 12px; height: 12px; background: var(--gold-deep); top: 65%; left: 6%; }
.dot-4 { width: 8px; height: 8px; background: var(--sage); top: 75%; left: 90%; }
.dot-5 { width: 6px; height: 6px; background: var(--gold); top: 40%; left: 92%; }
.dot-6 { width: 9px; height: 9px; background: var(--sage-deep); top: 85%; left: 15%; }

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  margin: 0 auto;
}

.hero-kicker {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--gold-deep);
  margin-bottom: 0.75rem;
}

.hero-names {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 1.1;
}

.hero-tagline {
  font-size: 1.15rem;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
  margin-top: 0.9rem;
  font-weight: 500;
}

.hero-date {
  font-size: 1.2rem;
  color: var(--charcoal);
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.15rem;
  font-family: var(--font-body);
  letter-spacing: 0.03em;
}

.hero-venue {
  color: var(--ink-soft);
  margin-bottom: 2rem;
}

/* ==========================================================================
   STORY
   ========================================================================== */
.story-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3rem;
  align-items: center;
}

.story-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: var(--shadow-lift);
}

.story-copy p {
  color: var(--ink-soft);
}

/* ==========================================================================
   DETAILS
   ========================================================================== */
.details {
  background: var(--sage-pale);
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.detail-card {
  background: var(--ivory);
  border-radius: 4px;
  padding: 2rem 1.75rem;
  text-align: center;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--hairline);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.detail-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.detail-card h3 {
  font-size: 1.35rem;
  margin-bottom: 0.5rem;
}

.detail-time {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold-deep);
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
}

.detail-note {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--hairline);
}

/* ==========================================================================
   TRAVEL
   ========================================================================== */
.travel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}

.travel-card {
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 1.75rem 2rem;
  box-shadow: var(--shadow-soft);
}

.travel-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--charcoal);
}

.travel-card p {
  color: var(--ink-soft);
  margin: 0;
}

/* ==========================================================================
   RSVP
   ========================================================================== */
.rsvp {
  background: var(--ivory-deep);
}

.rsvp-intro {
  text-align: center;
  color: var(--ink-soft);
  max-width: 34rem;
  margin: -1.25rem auto 2rem;
}

.rsvp-form {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 2.5rem;
  box-shadow: var(--shadow-lift);
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  min-width: 0;
}

.form-row-inline {
  flex-direction: row;
  gap: 1.4rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
}

label {
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--charcoal);
}

input,
select,
textarea {
  width: 100%;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--ivory-deep);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 0.75rem 1rem;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(156, 84, 0, 0.18);
}

.rsvp-thankyou {
  text-align: center;
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 3rem 2rem;
  box-shadow: var(--shadow-lift);
  margin-top: 1.5rem;
}

.thankyou-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--gold-deep);
  margin: 0 auto 0.5rem;
  line-height: 1;
}

.rsvp-thankyou h3 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.rsvp-thankyou p {
  color: var(--ink-soft);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.faq-item {
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 1.1rem 1.5rem;
  box-shadow: var(--shadow-soft);
}

.faq-item summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--charcoal);
  font-size: 1.05rem;
  list-style: none;
  position: relative;
  padding-right: 1.5rem;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1.3rem;
  color: var(--gold-deep);
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  color: var(--ink-soft);
  margin: 0.85rem 0 0;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--charcoal);
  color: var(--ivory-deep);
  text-align: center;
  padding: 3rem 1.5rem 2.5rem;
}

.footer-mono {
  margin: 0 auto 1rem;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.footer-names {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 0.25rem;
}

.footer-date {
  opacity: 0.85;
  margin-bottom: 1.25rem;
}

.footer-copy {
  font-size: 0.8rem;
  opacity: 0.65;
  margin: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .story-grid {
    grid-template-columns: 1fr;
  }
  .story-photo {
    max-width: 320px;
    margin: 0 auto;
  }
  .details-grid {
    grid-template-columns: 1fr;
  }
  .travel-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .site-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100dvh - var(--header-height));
    z-index: 150;
    background: var(--ivory);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2rem;
    padding: 2.5rem 2rem 3rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    visibility: hidden;
  }

  .site-nav.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .site-nav ul {
    flex-direction: column;
    gap: 1.75rem;
    width: 100%;
  }

  .site-nav ul a {
    font-size: 1.3rem;
    font-family: var(--font-display);
    color: var(--charcoal);
  }

  .nav-cta {
    width: 100%;
    text-align: center;
    padding: 0.9rem 1.1rem;
  }

  .nav-toggle {
    display: flex;
  }
}

@media (min-width: 861px) {
  .site-nav {
    visibility: visible;
    transform: none;
  }
}

@media (max-width: 720px) {
  .section {
    padding: 3.5rem 0;
  }
  .hero {
    padding: 4.5rem 1.25rem 3.5rem;
  }
  .rsvp-form {
    padding: 1.75rem 1.25rem;
  }
  .rsvp-thankyou {
    padding: 2.25rem 1.25rem;
  }
  .form-row-inline {
    flex-direction: column;
    gap: 1.4rem;
  }
  .detail-card,
  .travel-card {
    padding: 1.5rem 1.25rem;
  }
  .header-inner {
    padding: 0 1.1rem;
  }
  .brand-text {
    font-size: 1.05rem;
  }
  .signature-illustration {
    width: min(120px, 32vw);
    height: min(120px, 32vw);
  }
  .scratch-frame-flower {
    width: 54px;
  }
  .scratch-frame-flower-br {
    width: 42px;
  }
  .save-couple-illustration {
    width: min(180px, 48vw);
  }
  .save-field-flower {
    width: 70px;
  }
  .save-field-flower-right {
    width: 58px;
  }
}

@media (max-width: 380px) {
  .hero-names {
    font-size: 2.2rem;
  }
  .brand-text {
    max-width: 130px;
  }
  .signature-illustration {
    width: min(105px, 30vw);
    height: min(105px, 30vw);
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition-duration: 0.01ms !important;
  }
}