/* ============================================================
   Emily & Cam — Wedding Website
   Homepage Styles
   Mobile-first · Cinematic · Editorial
   ============================================================ */


/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root
{

  /* ── Colors ── */

  --color-bg:             #0a0a0a;

  --color-text-primary:   #f5f0eb;

  --color-text-secondary: #c8bfb3;

  --color-accent:         #b8975a;

  --color-soft-dune:      #E4DDCC;

  --color-classic-taupe:  #C1B5A5;

  --color-umber:          #443A35;

  --color-black:          #252525;

  /* ── Overlay layers ── */

  --overlay-top:  rgba(0, 0, 0, 0.12);

  --overlay-mid:  rgba(0, 0, 0, 0.38);

  --overlay-dark: rgba(0, 0, 0, 0.72);

  /* ── Typefaces ── */

  --font-serif: 'Cormorant Garamond', Georgia, serif;

  --font-sans:  'Inter', system-ui, sans-serif;

  /* ── Fluid type scale
        Formula: clamp(min, preferred-vw, max)
        Scales smoothly between breakpoints — no jumps ── */

  --fs-eyebrow:  clamp(0.75rem,  1.8vw, 0.82rem);

  --fs-names:    clamp(3.2rem,   9vw,   7.5rem);

  --fs-date:     clamp(0.875rem, 2vw,   1.125rem);

  --fs-location: clamp(0.875rem, 1.5vw, 0.9rem);

  --fs-cta:      clamp(0.875rem, 1.5vw, 0.92rem);

  /* ── Spacing ── */

  --hero-content-max: 40rem;

  --content-gap:      clamp(0.5rem, 1.5dvh, 0.9rem);

}


/* ============================================================
   RESET & BASE
   ============================================================ */

*,
*::before,
*::after
{

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

html
{

  scroll-behavior: smooth;

  -webkit-text-size-adjust: 100%;

  text-size-adjust: 100%;

}

body
{

  background-color: var(--color-bg);

  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

img
{

  display: block;

  max-width: 100%;

}

a
{

  text-decoration: none;

  color: inherit;

}


/* ============================================================
   KEYFRAME ANIMATIONS
   ============================================================ */

/* ── Hero image: slow cinematic drift ── */

@keyframes heroDrift
{

  from
  {

    transform: scale(1.0);

  }

  to
  {

    transform: scale(1.06);

  }

}

/* ── Text elements: staggered reveal from below ── */

@keyframes fadeUp
{

  from
  {

    opacity: 0;

    transform: translateY(10px);

  }

  to
  {

    opacity: 1;

    transform: translateY(0);

  }

}

/* ── Scroll cue: light traveling down a line ── */

@keyframes scrollLight
{

  0%
  {

    top: -60%;

  }

  100%
  {

    top: 110%;

  }

}

/* ── Envelope flap opens backward ── */

@keyframes envelopeFlapOpen
{

  0%
  {

    transform: perspective(1000px) rotateX(0deg);

  }

  100%
  {

    transform: perspective(1000px) rotateX(-165deg);

  }

}

/* ── Invitation card springs out of envelope ── */

@keyframes cardPop
{

  0%
  {

    opacity: 0;

    transform: translateX(-50%) translateY(70px) scale(0.94);

  }

  55%
  {

    opacity: 1;

    transform: translateX(-50%) translateY(calc(var(--invite-open-y) - 12px)) scale(1.018);

  }

  75%
  {

    transform: translateX(-50%) translateY(calc(var(--invite-open-y) + 4px)) scale(0.997);

  }

  100%
  {

    opacity: 1;

    transform: translateX(-50%) translateY(var(--invite-open-y)) scale(1);

  }

}

/* ── Invitation card folds back down ── */

@keyframes cardClose
{

  0%
  {

    opacity: 1;

    transform: translateX(-50%) translateY(var(--invite-open-y)) scale(1);

  }

  100%
  {

    opacity: 0;

    transform: translateX(-50%) translateY(60px) scale(0.95);

  }

}

/* ── Envelope flap folds shut ── */

@keyframes flapClose
{

  0%
  {

    transform: perspective(1000px) rotateX(-165deg);

  }

  100%
  {

    transform: perspective(1000px) rotateX(0deg);

  }

}

/* ── Botanical layer: very gentle vertical drift ── */

@keyframes botanicalFloat
{

  from
  {

    transform: translate(-50%, -50%) translateY(0px);

  }

  to
  {

    transform: translate(-50%, -50%) translateY(-8px);

  }

}

/* ── RSVP sparkle particles: pulse in and out ── */

@keyframes sparkPulse
{

  0%,
  100%
  {

    transform: scale(0) rotate(0deg);

    opacity: 0;

  }

  20%
  {

    transform: scale(1.15) rotate(-12deg);

    opacity: 1;

  }

  55%
  {

    transform: scale(0.9) rotate(12deg);

    opacity: 0.8;

  }

  85%
  {

    transform: scale(0) rotate(30deg);

    opacity: 0;

  }

}

/* ── RSVP button entrance from nav panel ── */

@keyframes rsvpEnter
{

  from
  {

    opacity: 0;

    transform: translateY(14px);

  }

  to
  {

    opacity: 1;

    transform: translateY(0);

  }

}


/* ============================================================
   SITE HEADER
   Fixed overlay — lives above every section.
   Transparent background lets hero and section colors show through.
   pointer-events: none on the bar passes clicks through the
   empty middle; re-enabled on logo and button only.
   ============================================================ */

.site-header
{

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 200;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: clamp(0.6rem, 1.5vh, 1rem) clamp(1.5rem, 4vw, 3rem);

  pointer-events: none;

  /* Fade in with hero — starts invisible, JS adds .is-loaded */
  opacity: 0;

  transition: opacity 0s;

}

body.is-loaded .site-header
{
  animation: fadeUp 1s ease-out 0.2s forwards;
}

/* ── Restore interactivity on interactive elements ── */

.site-header__logo,
.site-header__menu
{
  pointer-events: auto;
}

/* ── Logo ── */

.site-header__logo
{

  display: block;

  line-height: 0;

}

.site-header__logo-img
{

  height: 120px;

  width: auto;

  display: block;

  /* Render in umber — legible over soft-dune right panel and light sections */
  filter: brightness(0) saturate(0%) sepia(40%) hue-rotate(340deg) brightness(0.28);

  opacity: 0.92;

}

/* ── Menu button ── */

.site-header__menu
{

  appearance: none;

  -webkit-appearance: none;

  background: none;

  border: none;

  cursor: pointer;

  color: var(--color-accent);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 8px;

  position: relative;

  transition: transform 0.18s ease;

}

.site-header__menu:active
{
  transform: scale(0.96);
}

.site-header__menu:focus-visible
{

  outline: 1px solid var(--color-accent);

  outline-offset: 6px;

  border-radius: 2px;

}

/* ── Wedding knot icon (closed state) ── */

.site-header__menuIcon
{

  display: block;

  width: 85px;

  height: 85px;

  object-fit: contain;

  flex-shrink: 0;

  filter: brightness(0);

  opacity: 0.85;

  transition:
    opacity   0.28s ease,
    transform 0.28s ease;

  will-change: opacity, transform;

}

.site-header__menu:hover .site-header__menuIcon
{

  opacity: 1;

  transform: rotate(12deg);

}

/* Open state: knot fades and scales out */

.site-header__menu[aria-expanded="true"] .site-header__menuIcon
{

  opacity: 0;

  transform: scale(0.75) rotate(45deg);

  transition-duration: 0.25s;

}

/* ── Close × icon (open state only) ── */

.site-header__closeIcon
{

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 34px;

  height: 34px;

  flex-shrink: 0;

  opacity: 0;

  pointer-events: none;

  /* Slight delay so knot is mostly gone first */
  transition: opacity 0.3s ease 0.05s;

}

/* × drawn with two 4px bars at ±45° */

.site-header__closeIcon::before,
.site-header__closeIcon::after
{

  content: '';

  position: absolute;

  top: 50%;

  left: 50%;

  width: 100%;

  height: 4px;

  background-color: var(--color-accent);

  border-radius: 2px;

}

.site-header__closeIcon::before
{
  transform: translate(-50%, -50%) rotate(45deg);
}

.site-header__closeIcon::after
{
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Open state: × fades in */

.site-header__menu[aria-expanded="true"] .site-header__closeIcon
{

  opacity: 1;

  transition-delay: 0.12s;

}


/* ============================================================
   NAVIGATION PANEL
   Slides down from top-left, covers full height.
   z-index: 190 — sits below the header (200) so the burger
   button appears to float inside the panel at its exact position.
   ============================================================ */

.nav-panel
{

  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100%;

  background-color: #050505;

  z-index: 190;

  display: flex;

  align-items: center;

  justify-content: center;

  /* Reveals downward — clips from bottom edge upward */
  clip-path: inset(0 0 100% 0);

  transition: clip-path 0.75s cubic-bezier(0.76, 0, 0.24, 1);

  pointer-events: none;

}

.nav-panel.is-open
{

  clip-path: inset(0 0 0% 0);

  pointer-events: auto;

}

/* ── Inner wrapper — centers RSVP + rule + links vertically ── */

.nav-panel__inner
{

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: clamp(1.6rem, 3.2vh, 2.4rem);

}

/* ── Thin gold rule between RSVP and nav links ── */

.nav-panel__rule
{

  width: clamp(2.5rem, 6vw, 4rem);

  height: 1px;

  background-color: var(--color-accent);

  opacity: 0.3;

  flex-shrink: 0;

}

/* ── Nav links list ── */

.nav-panel__list
{

  list-style: none;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: clamp(1.75rem, 3.5vh, 2.75rem);

}

/* ── Each list item fades and rises after panel reveals ── */

.nav-panel__list li
{

  opacity: 0;

  transform: translateY(14px);

  transition:
    opacity 0.45s ease,
    transform 0.45s ease;

}

.nav-panel.is-open .nav-panel__list li
{

  opacity: 1;

  transform: translateY(0);

}

.nav-panel.is-open .nav-panel__list li:nth-child(1)
{
  transition-delay: 0.38s;
}

.nav-panel.is-open .nav-panel__list li:nth-child(2)
{
  transition-delay: 0.46s;
}

.nav-panel.is-open .nav-panel__list li:nth-child(3)
{
  transition-delay: 0.54s;
}

.nav-panel.is-open .nav-panel__list li:nth-child(4)
{
  transition-delay: 0.62s;
}

.nav-panel.is-open .nav-panel__list li:nth-child(5)
{
  transition-delay: 0.70s;
}

/* ── Link typography ── */

.nav-panel__link
{

  display: inline-block;

  position: relative;

  font-family: var(--font-serif);

  font-style: italic;

  font-weight: 300;

  font-size: clamp(1.6rem, 3.2vw, 2.8rem);

  letter-spacing: 0.07em;

  color: var(--color-accent);

  white-space: nowrap;

}

/* Elegant centered underline — grows from center on hover */

.nav-panel__link::after
{

  content: '';

  position: absolute;

  bottom: -4px;

  left: 50%;

  transform: translateX(-50%);

  width: 0;

  height: 1px;

  background-color: var(--color-accent);

  opacity: 0.75;

  transition: width 0.45s cubic-bezier(0.65, 0, 0.35, 1);

}

.nav-panel__link:hover::after,
.nav-panel__link:focus-visible::after
{
  width: 100%;
}

.nav-panel__link:focus-visible
{

  outline: 1px solid var(--color-accent);

  outline-offset: 8px;

  border-radius: 1px;

}

/* Coming-soon links — not yet navigable */

.nav-panel__link[aria-disabled="true"]
{

  opacity: 0.3;

  pointer-events: none;

  cursor: default;

}


/* ============================================================
   RSVP SPARKLE BUTTON
   --spark-dur drives both animation-duration and staggered
   delays simultaneously; changing it on hover restarts all
   sparkle animations at the new (faster) speed.
   ============================================================ */

/* ── Button ── */

.nav-rsvp
{

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-family: var(--font-serif);

  font-style: italic;

  font-size: clamp(1.6rem, 3.2vw, 2.8rem);

  font-weight: 300;

  letter-spacing: 0.07em;

  color: var(--color-accent);

  padding: 0.28em 1.1em;

  border: 1px solid var(--color-accent);

  /* Hover transitions only — entrance uses rsvpEnter animation */
  transition:
    border-color 0.38s ease,
    color        0.38s ease;

  --spark-dur: 2.6s;

}

/* Heavier weight inside the invitation card */

.invitation-card .nav-rsvp
{
  font-weight: 700;
}

.nav-panel.is-open .nav-rsvp
{
  animation: rsvpEnter 0.45s ease 0.25s both;
}

.nav-rsvp:hover,
.nav-rsvp:focus-visible
{

  --spark-dur: 0.62s;

  border-color: #d4b870;

  color: #d4b870;

  outline: none;

}

/* ── Sparkle particles — 4-pointed star via clip-path ── */

.nav-rsvp__spark
{

  position: absolute;

  width: 6px;

  height: 6px;

  background-color: var(--color-accent);

  clip-path: polygon(50% 0%, 56% 44%, 100% 50%, 56% 56%, 50% 100%, 44% 56%, 0% 50%, 44% 44%);

  pointer-events: none;

  animation: sparkPulse var(--spark-dur) ease-in-out infinite;

}

/* ── Particle positions scattered around the button perimeter ── */

.nav-rsvp__spark--1
{

  top: -10px;

  left: 16%;

  animation-delay: calc(var(--spark-dur) * 0);

}

.nav-rsvp__spark--2
{

  top: -9px;

  right: 18%;

  animation-delay: calc(var(--spark-dur) * 0.167);

}

.nav-rsvp__spark--3
{

  top: calc(50% - 3px);

  left: -11px;

  animation-delay: calc(var(--spark-dur) * 0.333);

}

.nav-rsvp__spark--4
{

  top: calc(50% - 3px);

  right: -11px;

  animation-delay: calc(var(--spark-dur) * 0.5);

}

.nav-rsvp__spark--5
{

  bottom: -9px;

  left: 24%;

  animation-delay: calc(var(--spark-dur) * 0.667);

}

.nav-rsvp__spark--6
{

  bottom: -10px;

  right: 20%;

  animation-delay: calc(var(--spark-dur) * 0.833);

}


/* ============================================================
   HERO — SECTION SHELL
   Mobile-first: full viewport height, dark background fallback.
   ============================================================ */

.hero
{

  position: relative;

  width: 100%;

  height: 100vh;       /* Fallback for older browsers */
  height: 100dvh;      /* Dynamic — adjusts as browser chrome shows/hides */

  min-height: 100svh;  /* Small-viewport safety floor */

  overflow: hidden;

  background-color: var(--color-bg);

}


/* ============================================================
   HERO — MEDIA LAYER
   Fullscreen engagement photograph.
   ============================================================ */

.hero__media
{

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

}

.hero__img
{

  width: 100%;

  height: 100%;

  object-fit: cover;

  /* Mobile default: bias toward top 25% — keeps faces in frame on tall crops */
  object-position: center 25%;

}


/* ============================================================
   HERO — OVERLAY
   Two-layer gradient: vertical readability + soft edge vignette.
   ============================================================ */

.hero__overlay
{

  position: absolute;

  inset: 0;

  background:
    /* Layer 1: vertical — open top, dark bottom for text legibility */
    linear-gradient(
      to bottom,
      var(--overlay-top)  0%,
      var(--overlay-mid)  45%,
      var(--overlay-dark) 100%
    ),
    /* Layer 2: soft edge vignette — keeps image feeling contained */
    radial-gradient(
      ellipse 140% 90% at 50% 5%,
      transparent        35%,
      rgba(0, 0, 0, 0.28) 100%
    );

  pointer-events: none;

}


/* ============================================================
   HERO — CONTENT BLOCK
   Mobile: centered stack pinned above the bottom edge.
   ============================================================ */

/* ── Desktop monogram column — hidden on mobile ── */

.hero__monogram
{
  display: none;
}

/* ── Mobile overlay content ── */

.hero__content
{

  position: absolute;

  /* Centered, elevated from bottom edge */
  bottom: clamp(2.5rem, 8dvh, 5rem);

  left: 50%;

  transform: translateX(-50%);

  width: min(90%, var(--hero-content-max));

  text-align: center;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: var(--content-gap);

}


/* ============================================================
   HERO — TYPOGRAPHY
   All hero text starts invisible and animates in via JS .is-loaded.
   ============================================================ */

/* ── Eyebrow label ── */

.hero__eyebrow
{

  font-family: var(--font-sans);

  font-size: var(--fs-eyebrow);

  font-weight: 300;

  letter-spacing: 0.38em;

  text-transform: uppercase;

  color: var(--color-text-secondary);

  opacity: 0;

}

body.is-loaded .hero__eyebrow
{
  animation: fadeUp 1.2s ease-out 0.4s forwards;
}

/* ── Biblical verse and attribution ── */

.hero__verse
{

  max-width: min(30rem, 88vw);

  margin: 0;

  font-family: var(--font-serif);

  font-style: italic;

  color: var(--color-text-primary);

  opacity: 0;

}

.hero__verse blockquote
{

  font-size: clamp(3.25rem, 8.5vw, 4.95rem);

  font-weight: 300;

  line-height: 1.12;

  color: inherit;

  opacity: 0.92;

}

.hero__verse figcaption
{

  margin-top: clamp(0.8rem, 2vh, 1.1rem);

  font-family: var(--font-sans);

  font-size: clamp(0.75rem, 1.5vw, 0.82rem);

  font-style: normal;

  font-weight: 300;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: inherit;

  opacity: 0.62;

}

body.is-loaded .hero__verse
{
  animation: fadeUp 1.2s ease-out 0.9s forwards;
}


/* ============================================================
   SCROLL CUE
   Mobile-only: elegant animated line replacing the CTA.
   Hidden at 960px+ via the desktop media query.
   ============================================================ */

.scroll-cue
{

  display: flex;

  flex-direction: column;

  align-items: center;

  margin-top: clamp(1.5rem, 4dvh, 2.5rem);

  opacity: 0;

}

body.is-loaded .scroll-cue
{
  animation: fadeUp 1.2s ease-out 1.6s forwards;
}

.scroll-cue__track
{

  position: relative;

  width: 1px;

  height: 48px;

  overflow: hidden;

  background-color: rgba(245, 240, 235, 0.15);

}

.scroll-cue__light
{

  position: absolute;

  top: -60%;

  left: 0;

  width: 100%;

  height: 60%;

  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(245, 240, 235, 0.85) 50%,
    transparent 100%
  );

  animation: scrollLight 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;

}


/* ============================================================
   INVITATION SECTION
   Full-viewport section centered on umber.
   position: relative is the containing block for the
   absolutely-placed envelope scene and botanical layer.
   ============================================================ */

.invitation-section
{

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: clamp(680px, 82dvh, 860px);

  padding: clamp(3.5rem, 7vh, 5rem) clamp(1.5rem, 6vw, 3rem);

  background-color: var(--color-umber);

}


/* ============================================================
   ENVELOPE SCENE
   Card (z:2) sits 20px below envelope bottom (bottom:-20px).
   Envelope (z:1) fills the scene, partially covering card base.
   has-observer hides the card until scroll threshold fires.
   ============================================================ */

.envelope-scene
{

  position: relative;

  width: min(94vw, 540px);

  height: clamp(140px, 20vw, 200px);

  margin-top: 3vh;

  --invite-open-y: 204px;

}

/* Card hidden until reveal — pointer-events:none prevents blocking envelope clicks */

.envelope-scene.has-observer:not(.is-animating) .invitation-card
{

  opacity: 0;

  transform: translateX(-50%) translateY(70px) scale(0.96);

  pointer-events: none;

}

/* ── Animation triggers ── */

.envelope-scene.is-animating .envelope__flap
{
  animation: envelopeFlapOpen 0.85s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}

.envelope-scene.is-animating .invitation-card
{
  animation: cardPop 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.85s both;
}

.envelope-scene.is-animating.is-closing .invitation-card
{

  animation: cardClose 0.45s ease-in forwards;

  pointer-events: none;

}

.envelope-scene.is-animating.is-closing .envelope__flap
{
  animation: flapClose 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.25s forwards;
}

/* ── Envelope shell ── */

.envelope
{

  position: absolute;

  inset: 0;

  z-index: 1;

  background-color: #ece3d0;

  border: 1px solid rgba(184, 151, 90, 0.22);

  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.18),
    0 2px 6px  rgba(0, 0, 0, 0.10);

  perspective: 1000px;

  perspective-origin: 50% 0%;

}

/* ── Decorative fold-crease lines on envelope face ── */

.envelope__back
{

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to bottom right,
      transparent calc(50% - 0.6px),
      rgba(193,176,145,0.4) calc(50% - 0.6px),
      rgba(193,176,145,0.4) calc(50% + 0.6px),
      transparent calc(50% + 0.6px)
    ),
    linear-gradient(
      to bottom left,
      transparent calc(50% - 0.6px),
      rgba(193,176,145,0.4) calc(50% - 0.6px),
      rgba(193,176,145,0.4) calc(50% + 0.6px),
      transparent calc(50% + 0.6px)
    );

}

/* ── Flap — triangle pointing down, folds backward on open ── */

.envelope__flap
{

  position: absolute;

  top: -1px;

  left: -1px;

  right: -1px;

  height: 72%;

  /* V-shape: open triangle pointing down */
  clip-path: polygon(0 0, 100% 0, 50% 100%);

  background-color: #e0d4bb;

  border-top: 1px solid rgba(184, 151, 90, 0.22);

  transform-origin: center top;

  z-index: 3;

  will-change: transform;

}

/* ── Wax seal — sits at ~65% down the flap, rotates with it ── */

.envelope__seal
{

  position: absolute;

  top: 60%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: clamp(42px, 5.5vw, 54px);

  height: clamp(42px, 5.5vw, 54px);

  border-radius: 50%;

  background: radial-gradient(circle at 40% 38%, #d4aa6a, var(--color-accent) 60%, #9a7a3e);

  border: 1px solid rgba(255, 255, 255, 0.25);

  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.22),
    inset 0 1px 2px rgba(255,255,255,0.2);

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: var(--font-serif);

  font-size: clamp(0.75rem, 0.75vw, 0.82rem);

  font-style: italic;

  color: #1c1410;

  letter-spacing: 0.02em;

  user-select: none;

}

.envelope__seal em
{

  font-style: normal;

  color: #2c1e10;

}


/* ============================================================
   INVITATION CARD
   Absolutely positioned — pops out of envelope on scroll.
   ============================================================ */

.invitation-card
{

  position: absolute;

  bottom: -20px;

  left: 50%;

  transform: translateX(-50%);

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  width: min(90vw, 500px);

  padding: clamp(3rem, 6vh, 4.5rem) clamp(2.5rem, 5vw, 3.5rem);

  gap: clamp(1rem, 2.2vh, 1.4rem);

  background-color: #faf7f2;

  border: 1px solid rgba(184, 151, 90, 0.28);

  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 20px 60px rgba(0, 0, 0, 0.18);

}

/* ── Botanical ornament SVGs ── */

.invitation-card__ornament
{

  width: clamp(80px, 55%, 130px);

  height: auto;

}

/* ── "YOU'VE BEEN INVITED" header label ── */

.invitation-card__headline
{

  font-family: var(--font-sans);

  font-size: clamp(0.875rem, 1.3vw, 0.92rem);

  font-weight: 300;

  letter-spacing: 0.52em;

  text-transform: uppercase;

  color: var(--color-accent);

}

/* ── "TOGETHER FOREVER" label ── */

.invitation-card__together
{

  font-family: var(--font-sans);

  font-size: clamp(0.875rem, 1.2vw, 0.92rem);

  font-weight: 300;

  letter-spacing: 0.42em;

  text-transform: uppercase;

  color: #9c8a7a;

}

/* ── Names heading ── */

.invitation-card__names
{

  font-family: var(--font-serif);

  font-size: clamp(2.8rem, 5.5vw, 4.2rem);

  font-weight: 300;

  font-style: italic;

  line-height: 1.0;

  color: #1c1814;

  margin: 0;

}

.invitation-card__names span
{
  color: var(--color-accent);
}

/* ── Thin gold rule ── */

.invitation-card__rule
{

  width: clamp(1.8rem, 6vw, 2.8rem);

  height: 1px;

  background-color: var(--color-accent);

  opacity: 0.65;

  flex-shrink: 0;

}

/* ── Body invitation text ── */

.invitation-card__invite
{

  font-family: var(--font-serif);

  font-style: italic;

  font-weight: 300;

  font-size: clamp(1.25rem, 2vw, 1.5rem);

  line-height: 1.9;

  color: #3d3530;

}

/* ── Date ── */

.invitation-card__date
{

  font-family: var(--font-sans);

  font-size: clamp(0.875rem, 1.2vw, 0.92rem);

  font-weight: 300;

  letter-spacing: 0.24em;

  text-transform: uppercase;

  color: #2c2820;

}

/* ── Spelled-out year ── */

.invitation-card__year
{

  font-family: var(--font-sans);

  font-size: clamp(0.875rem, 1vw, 0.92rem);

  font-weight: 300;

  letter-spacing: 0.28em;

  text-transform: uppercase;

  color: #5a4e47;

  margin-top: -0.4rem;

}

/* ── Venue name ── */

.invitation-card__venue
{

  font-family: var(--font-serif);

  font-size: clamp(1.125rem, 2.2vw, 1.5rem);

  font-weight: 400;

  font-style: italic;

  color: #1c1814;

}

/* ── Location label ── */

.invitation-card__location
{

  font-family: var(--font-sans);

  font-size: clamp(0.875rem, 1.1vw, 0.92rem);

  font-weight: 300;

  letter-spacing: 0.3em;

  text-transform: uppercase;

  color: #6b5d52;

}

/* ── Close invite button ── */

.invitation-card__close-btn
{

  appearance: none;

  -webkit-appearance: none;

  background: none;

  border: none;

  cursor: pointer;

  font-family: var(--font-sans);

  font-size: clamp(0.875rem, 0.95vw, 0.92rem);

  font-weight: 300;

  letter-spacing: 0.34em;

  text-transform: uppercase;

  color: #9c8a7a;

  padding: 0.25em 0;

  transition: color 0.25s ease;

}

.invitation-card__close-btn:hover,
.invitation-card__close-btn:focus-visible
{

  color: var(--color-accent);

  outline: none;

}


/* ============================================================
   SCROLL-REVEAL SYSTEM
   [data-reveal] elements start hidden and fade up when they
   enter the viewport via IntersectionObserver in indexJS.js.
   ============================================================ */

[data-reveal]
{

  opacity: 0;

  transform: translateY(26px);

  transition:
    opacity 1s ease,
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);

  transition-delay: calc(var(--reveal-delay, 0) * 120ms);

}

[data-reveal].is-visible
{

  opacity: 1;

  transform: translateY(0);

}

[data-reveal-delay="1"]
{
  --reveal-delay: 1;
}

[data-reveal-delay="2"]
{
  --reveal-delay: 2;
}

[data-reveal-delay="3"]
{
  --reveal-delay: 3;
}

[data-reveal-delay="4"]
{
  --reveal-delay: 4;
}

[data-reveal-delay="5"]
{
  --reveal-delay: 5;
}

[data-reveal-delay="6"]
{
  --reveal-delay: 6;
}

[data-reveal-delay="7"]
{
  --reveal-delay: 7;
}

[data-reveal-delay="8"]
{
  --reveal-delay: 8;
}


/* ============================================================
   VENUE SECTION
   Editorial two-column composition: photograph left, type right.
   Mobile: centered vertical stack with stationery feeling.
   ============================================================ */

.venue-section
{

  position: relative;

  overflow: hidden;

  background-color: var(--color-umber);

  padding: clamp(4rem, 8vh, 6.5rem) clamp(1.5rem, 5vw, 4rem);

}

.venue-section__inner
{

  display: grid;

  grid-template-columns: 1fr;

  gap: clamp(2.8rem, 6vh, 4.5rem);

  width: min(1180px, 100%);

  margin: 0 auto;

}

/* ── Photograph — pure image, no card treatment ── */

.venue-section__media
{

  overflow: hidden;

  background-color: #d7ccba;

}

.venue-section__image
{

  width: 100%;

  aspect-ratio: 4 / 5;

  height: auto;

  object-fit: cover;

  display: block;

  transform: translateY(var(--venue-parallax-y, 0px)) scale(1.08);

  transform-origin: center;

  transition: transform 0.18s linear;

  will-change: transform;

}

/* ── Editorial type stack ── */

.venue-section__body
{

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  color: var(--color-text-primary);

  gap: clamp(1rem, 2.4vh, 1.4rem);

}

.venue-section__eyebrow
{

  font-family: var(--font-sans);

  font-size: clamp(0.75rem, 1.2vw, 0.82rem);

  font-weight: 300;

  letter-spacing: 0.52em;

  text-transform: uppercase;

  color: var(--color-accent);

}

.venue-section__rule
{

  width: clamp(2rem, 6vw, 3.2rem);

  height: 1px;

  background-color: var(--color-accent);

  opacity: 0.55;

  flex-shrink: 0;

}

.venue-section__name
{

  font-family: var(--font-serif);

  font-size: clamp(3.4rem, 9vw, 5.6rem);

  font-style: italic;

  font-weight: 300;

  line-height: 0.94;

  letter-spacing: -0.01em;

  color: var(--color-text-primary);

  margin: 0;

}

.venue-section__location
{

  font-family: var(--font-sans);

  font-size: clamp(1rem, 1.2vw, 1.1rem);

  font-weight: 300;

  letter-spacing: 0.36em;

  text-transform: uppercase;

  color: rgba(245, 240, 235, 0.55);

}

.venue-section__description
{

  max-width: 30rem;

  font-family: var(--font-serif);

  font-size: clamp(1.375rem, 2vw, 1.65rem);

  font-style: italic;

  font-weight: 300;

  line-height: 1.8;

  color: rgba(245, 240, 235, 0.75);

}

/* ── CTAs — bare tracked links, no box, no shadow ── */

.venue-section__actions
{

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: clamp(0.85rem, 2vh, 1.1rem);

  margin-top: clamp(0.4rem, 1.5vh, 0.8rem);

}

.venue-section__cta
{

  font-family: var(--font-sans);

  font-weight: 300;

  letter-spacing: 0.38em;

  text-transform: uppercase;

  transition: color 0.35s ease, opacity 0.35s ease;

}

.venue-section__cta--primary
{

  position: relative;

  font-size: clamp(1.25rem, 1.5vw, 1.5rem);

  color: var(--color-accent);

  padding-bottom: 0.3em;

}

/* Persistent hairline underline — deepens on hover */

.venue-section__cta--primary::after
{

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 1px;

  background-color: var(--color-accent);

  opacity: 0.38;

  transition: opacity 0.35s ease;

}

.venue-section__cta--primary:hover
{
  color: #d4b870;
}

.venue-section__cta--primary:hover::after
{
  opacity: 1;
}

.venue-section__cta--primary:focus-visible
{

  outline: 1px solid var(--color-accent);

  outline-offset: 6px;

}

/* ============================================================
   TRAVEL GUIDE SECTION
   Homepage: soft-dune gradient, three-column editorial grid.
   ============================================================ */

.travel-guide-section
{

  position: relative;

  padding: clamp(4.5rem, 9vh, 7rem) clamp(1.25rem, 5vw, 4rem);

  background:
    linear-gradient(180deg, #e4ddcc 0%, #eee8dc 48%, #252525 100%);

}

.travel-guide-section__inner
{

  width: min(1180px, 100%);

  margin: 0 auto;

}

/* ── Section intro header ── */

.travel-guide-section__intro
{

  max-width: 44rem;

  margin: 0 auto clamp(2.8rem, 6vh, 4.5rem);

  text-align: center;

}

.travel-guide-section__eyebrow
{

  font-family: var(--font-sans);

  font-size: clamp(0.75rem, 1vw, 0.82rem);

  font-weight: 300;

  letter-spacing: 0.48em;

  text-transform: uppercase;

  color: #8a7461;

}

.travel-guide-section__heading
{

  margin-top: 1rem;

  font-family: var(--font-serif);

  font-size: clamp(3.1rem, 7vw, 5.6rem);

  font-style: italic;

  font-weight: 300;

  line-height: 0.98;

  color: #1c1814;

}

.travel-guide-section__copy
{

  margin-top: clamp(1.1rem, 2.8vh, 1.7rem);

  font-family: var(--font-serif);

  font-size: clamp(1.25rem, 1.8vw, 1.5rem);

  font-style: italic;

  font-weight: 300;

  line-height: 1.75;

  color: #3d3530;

}

.travel-guide-section__divider
{

  width: clamp(2.2rem, 6vw, 3.2rem);

  height: 1px;

  margin: clamp(1.4rem, 3vh, 2rem) auto 0;

  background-color: var(--color-accent);

  opacity: 0.64;

}

/* ── Grid and columns ── */

.travel-guide-grid
{

  display: grid;

  grid-template-columns: 1fr;

  gap: clamp(1.6rem, 4vw, 2.4rem);

}

.travel-guide-column
{

  padding: clamp(1.2rem, 3vw, 1.7rem) 0 0;

  border-top: 1px solid rgba(184, 151, 90, 0.32);

}

.travel-guide-column h3
{

  font-family: var(--font-serif);

  font-size: clamp(1.8rem, 3.5vw, 2.4rem);

  font-style: italic;

  font-weight: 300;

  color: #1c1814;

  margin-bottom: clamp(1rem, 2.5vh, 1.4rem);

}

/* ── Individual item — staggered reveal via IntersectionObserver ── */

.travel-guide-item
{

  display: grid;

  grid-template-columns: 1fr;

  gap: 0.55rem;

  padding: clamp(1rem, 2.6vh, 1.35rem) 0;

  border-bottom: 1px solid rgba(68, 58, 53, 0.12);

  opacity: 0;

  transform: translateY(14px);

  transition:
    opacity 0.85s ease,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);

}

.travel-guide-column.is-visible .travel-guide-item
{

  opacity: 1;

  transform: translateY(0);

}

.travel-guide-column.is-visible .travel-guide-item:nth-of-type(1)
{
  transition-delay: 120ms;
}

.travel-guide-column.is-visible .travel-guide-item:nth-of-type(2)
{
  transition-delay: 220ms;
}

.travel-guide-column.is-visible .travel-guide-item:nth-of-type(3)
{
  transition-delay: 320ms;
}

/* ── Item typography ── */

.travel-guide-item h4
{

  font-family: var(--font-sans);

  font-size: clamp(1rem, 1.2vw, 1.1rem);

  font-weight: 300;

  letter-spacing: 0.18em;

  line-height: 1.45;

  text-transform: uppercase;

  color: #2c2820;

}

.travel-guide-item p
{

  margin-top: 0.36rem;

  font-family: var(--font-serif);

  font-size: 1.25rem;

  font-style: italic;

  font-weight: 400;

  color: #8A6A52;

}

.travel-guide-item a
{

  justify-self: start;

  font-family: var(--font-sans);

  font-size: 0.875rem;

  font-weight: 400;

  letter-spacing: 0.28em;

  text-transform: uppercase;

  color: #7D6032;

  transition:
    color 0.28s ease,
    opacity 0.28s ease;

}

.travel-guide-item a:hover,
.travel-guide-item a:focus-visible
{

  color: #614B25;

  opacity: 0.82;

  outline: none;

}


/* ============================================================
   WEDDING FOOTER
   ============================================================ */

.wedding-footer
{

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  padding: clamp(4.5rem, 9vh, 7rem) clamp(1.5rem, 5vw, 3rem);

  background-color: #252525;

  color: var(--color-text-primary);

}

/* ── Logo ── */

.wedding-footer__logo
{

  width: clamp(82px, 10vw, 118px);

  height: auto;

  margin-bottom: clamp(1.5rem, 3vh, 2rem);

  filter: brightness(0) invert(1);

  opacity: 0.88;

}

/* ── Gold rule ── */

.wedding-footer__divider
{

  width: clamp(2.2rem, 6vw, 3.4rem);

  height: 1px;

  margin-bottom: clamp(1.4rem, 3vh, 1.8rem);

  background-color: var(--color-accent);

  opacity: 0.64;

}

/* ── Names ── */

.wedding-footer__names
{

  font-family: var(--font-serif);

  font-size: clamp(2.6rem, 6vw, 4.8rem);

  font-style: italic;

  font-weight: 300;

  line-height: 1;

}

.wedding-footer__names span
{
  color: var(--color-accent);
}

/* ── Shared uppercase label group ── */

.wedding-footer__date,
.wedding-footer__place,
.wedding-footer__bottom
{

  font-family: var(--font-sans);

  font-weight: 300;

  text-transform: uppercase;

}

.wedding-footer__date
{

  margin-top: 1rem;

  font-size: 0.875rem;

  letter-spacing: 0.32em;

  color: #c8bfb3;

}

.wedding-footer__place
{

  margin-top: 1rem;

  font-size: 0.875rem;

  letter-spacing: 0.28em;

  line-height: 1.9;

  color: #aaa096;

}

/* ── Footer navigation ── */

.wedding-footer__nav
{

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 0.9rem clamp(1.2rem, 3vw, 2rem);

  margin-top: clamp(2rem, 4vh, 3rem);

}

.wedding-footer__nav a
{

  font-family: var(--font-sans);

  font-size: 0.875rem;

  font-weight: 300;

  letter-spacing: 0.28em;

  text-transform: uppercase;

  color: #c8bfb3;

  transition: color 0.28s ease;

}

.wedding-footer__nav a:hover,
.wedding-footer__nav a:focus-visible
{

  color: var(--color-accent);

  outline: none;

}

.wedding-footer__nav a[aria-disabled="true"]
{

  opacity: 0.3;

  pointer-events: none;

  cursor: default;

}

/* ── "Made with love" line ── */

.wedding-footer__bottom
{

  margin-top: clamp(2.4rem, 5vh, 3.5rem);

  font-size: 0.875rem;

  letter-spacing: 0.22em;

  color: #8f867c;

}

/* ── Developer credit ── */

.wedding-footer__credit
{

  display: inline-flex;

  align-items: center;

  gap: 0.55rem;

  margin-top: clamp(2rem, 4vh, 3rem);

  opacity: 0.34;

  transition: opacity 0.28s ease;

}

.wedding-footer__credit:hover,
.wedding-footer__credit:focus-visible
{

  opacity: 0.58;

  outline: none;

}

.wedding-footer__credit span
{

  font-family: var(--font-sans);

  font-size: 0.875rem;

  font-weight: 300;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: #aaa096;

}

.wedding-footer__credit img
{

  width: 100px;

  height: auto;

}

/* ── Legal / copyright ── */

.wedding-footer__legal
{

  margin-top: 1rem;

  font-family: var(--font-sans);

  font-size: 0.875rem;

  font-weight: 300;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: #8f867c;

  opacity: 0.72;

}


/* ============================================================
   RESPONSIVE — MOBILE-ONLY  (max-width: 959px)

   Strictly scoped so these properties NEVER exist at desktop
   widths — not declared, not canceled. Prevents same-specificity
   cascade ambiguity that can cause scale transforms to leak into
   the desktop grid layout above 960px.
   ============================================================ */

@media (max-width: 959px)
{

  /* Ken Burns drift — fires after JS adds .is-loaded */

  .hero__img
  {

    will-change: transform;

    transform-origin: center center;

  }

  body.is-loaded .hero__img
  {
    animation: heroDrift 22s ease-in-out infinite alternate;
  }

  /* Envelope scene: shorter travel distance on narrower viewports */

  .envelope-scene
  {
    --invite-open-y: 184px;
  }

  /* Logo flips to off-white over the dark nav panel */

  body.nav-is-open .site-header__logo-img
  {

    filter: brightness(0) invert(1);

    opacity: 0.88;

  }

}


/* ============================================================
   RESPONSIVE — TABLET  (750px+)
   Shifts hero content from centered to editorial bottom-left.
   ============================================================ */

@media (min-width: 750px)
{

  .hero__img
  {
    /* Raise subject focus slightly on wider viewports */
    object-position: center 20%;
  }

  .hero__content
  {

    /* Break from center-transform to editorial left anchor */
    left: clamp(3rem, 6vw, 5rem);

    transform: none;

    text-align: left;

    align-items: flex-start;

    bottom: clamp(3rem, 9dvh, 6rem);

    width: min(55%, var(--hero-content-max));

  }

  /* Intentional two-line break at the comma — balanced and legible */

  .hero__eyebrow
  {
    max-width: 22em;
  }

}


/* ============================================================
   RESPONSIVE — TABLET GRID  (768px+)
   Travel guide and travel-item two-column layout.
   ============================================================ */

@media (min-width: 768px)
{

  .travel-guide-grid
  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .travel-guide-item
  {

    grid-template-columns: 1fr auto;

    align-items: end;

  }

  .travel-guide-item a
  {

    justify-self: end;

    white-space: nowrap;

  }

}


/* ============================================================
   RESPONSIVE — DESKTOP EDITORIAL GRID  (960px+)

   Two-column art-directed composition using CSS Grid.
   Stable across 960px → ultrawide. No flexbox guessing.

     ┌──────────────────────┬──────────────────────┐
     │                      │   E                  │
     │  Engagement          │                      │
     │  Photography         │      &        ♡      │
     │  object-fit: cover   │  forever begins here │
     │  controlled crop     │                   C  │
     │  minmax(0, 620px)    │  minmax(420px, 1fr)  │
     └──────────────────────┴──────────────────────┘

   Mobile (≤959px): completely untouched.
   ============================================================ */

@media (min-width: 960px)
{

  /* ── Hero: stable CSS Grid, one viewport height ── */

  .hero
  {

    display: grid;

    /*
     * Left column: capped at 620px so the image container stays
     * portrait-friendly (≤ 620×900px) and object-fit: cover never
     * switches to aggressive width-constrained zooming.
     *
     * At 960px: right min (420px) forces left to 540px.
     * Above ~1040px: left grows to 620px, right gets remaining space.
     */
    grid-template-columns: minmax(0, 620px) minmax(420px, 1fr);

    /* Fixed at one viewport height — hero always fits on screen */
    grid-template-rows: minmax(100svh, auto);

    height: auto;

    min-height: unset;

    background-color: var(--color-soft-dune);

    overflow: hidden;

  }

  /* ── Left column: engagement photograph ── */

  .hero__media
  {

    position: relative;

    inset: auto;

    grid-column: 1;

    grid-row: 1;

    width: 100%;

    height: 100%;

    background-color: var(--color-soft-dune);

    overflow: hidden;

  }

  .hero__img
  {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center 22%;

    border: none;

    box-shadow: none;

    transform: none;

    will-change: auto;

  }

  /* Safety net: heroDrift is scoped to max-width:959px above,
     so this never activates — kept for clarity and future-proofing. */

  body.is-loaded .hero__img
  {

    animation: none;

    transform: none;

  }

  /* ── Overlay not needed on desktop (no text over image) ── */

  .hero__overlay
  {
    display: none;
  }

  /* ── Mobile overlay text: hidden on desktop ── */

  .hero__content
  {
    display: none;
  }

  /* ── Mobile scroll cue: hidden on desktop ── */

  .scroll-cue
  {
    display: none;
  }

  /* ── Right column: monogram composition ──
     position: relative makes it the containing block for
     the absolutely-placed monogram elements inside it. */

  .hero__monogram
  {

    grid-column: 2;

    grid-row: 1;

    display: block;

    position: relative;

    background-color: var(--color-soft-dune);

    overflow: hidden;

    pointer-events: none;

  }

  /* ── Ghost heart: oversized editorial watermark ──
     Pushed right so it bleeds toward the panel edge,
     creating visual tension and luxury editorial character. */

  .mono__ghost
  {

    position: absolute;

    top: 48%;

    left: 68%;

    transform: translate(-50%, -50%);

    font-family: var(--font-serif);

    font-style: italic;

    font-weight: 300;

    font-size: clamp(28rem, 58vw, 100rem);

    line-height: 1;

    color: var(--color-classic-taupe);

    opacity: 0.09;

    white-space: nowrap;

    user-select: none;

    pointer-events: none;

  }

  /* ── Editorial identity block ──
     Invitation-suite composition — just type and negative space
     on the soft-dune ground. Shifted left ~5% toward image to
     counterbalance the ghost heart bleed. */

  .mono__block
  {

    position: absolute;

    top: 50%;

    left: 45%;

    transform: translate(-50%, -50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    /* Uncapped — block grows with the column at wider viewports */
    width: min(90%, 560px);

    gap: clamp(0.85rem, 2vh, 1.35rem);

  }

  /* Eyebrow: max-width forces two-line break at comma (960–1099px).
     Overridden to single line at 1100px+. */

  .mono__eyebrow
  {

    font-family: var(--font-sans);

    font-size: clamp(0.75rem, 0.9vw, 0.9rem);

    font-weight: 300;

    letter-spacing: 0.48em;

    text-transform: uppercase;

    color: #9c8a7a;

    max-width: 24em;

  }

  .mono__verse
  {

    max-width: min(92%, 42rem);

    color: var(--color-black);

  }

  .mono__verse blockquote
  {

    font-size: clamp(3.25rem, 4.8vw, 5.65rem);

    line-height: 1.05;

    opacity: 0.82;

  }

  .mono__verse blockquote span
  {

    display: block;

    white-space: nowrap;

  }

  .mono__verse figcaption
  {

    font-size: clamp(0.75rem, 0.82vw, 0.82rem);

    color: #6b5d52;

    opacity: 0.82;

  }

  /* ── Anchor: small heart SVG, lower-right corner ──
     Closes the composition triangle (botanical top-left,
     text center, heart lower-right). */

  .mono__anchor
  {

    position: absolute;

    bottom: clamp(2rem, 4vh, 3.5rem);

    right: clamp(2rem, 4vw, 3.5rem);

    width: clamp(18px, 2vw, 26px);

    height: auto;

    color: var(--color-accent);

    opacity: 0.45;

    pointer-events: none;

    user-select: none;

  }

  /* ── Venue section: editorial two-column split ── */

  .venue-section
  {
    padding: clamp(5rem, 9vh, 8rem) clamp(1.5rem, 5vw, 4rem);
  }

  .venue-section__inner
  {

    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);

    gap: 0;

    column-gap: clamp(3.5rem, 7vw, 6rem);

    align-items: center;

  }

  .venue-section__media
  {

    grid-column: 1;

    grid-row: 1;

  }

  .venue-section__body
  {

    grid-column: 2;

    grid-row: 1;

    align-items: flex-start;

    text-align: left;

  }

  .venue-section__actions
  {
    align-items: flex-start;
  }

  .venue-section__image
  {
    aspect-ratio: 3 / 4;
  }

  /* ── Travel guide: three-column grid ── */

  .travel-guide-grid
  {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* ── Nav panel: matches the hero image column width ── */

  .nav-panel
  {
    width: min(calc(100vw - 420px), 620px);
  }

  /* ── Footer: credit and legal float to corners ── */

  .wedding-footer__credit
  {

    position: absolute;

    right: clamp(1.4rem, 3vw, 2.5rem);

    bottom: clamp(1.2rem, 2.5vw, 2rem);

    margin-top: 0;

  }

  .wedding-footer__legal
  {

    position: absolute;

    left: clamp(1.4rem, 3vw, 2.5rem);

    bottom: clamp(1.2rem, 2.5vw, 2rem);

    margin-top: 0;

    text-align: left;

  }

}


/* ============================================================
   RESPONSIVE — WIDE DESKTOP  (1100px+)

   Eyebrow must stay on one single line. Releases the two-line
   max-width set in the 960px block and widens the identity block
   so the fully-tracked text (~587px at max font) has room.
   ============================================================ */

@media (min-width: 1100px)
{

  .mono__eyebrow
  {

    max-width: none;

    white-space: nowrap;

  }

  .mono__block
  {
    width: min(90%, 680px);
  }

}


/* ============================================================
   ACCESSIBILITY — REDUCED MOTION
   Immediately shows all content and skips all animations.
   ============================================================ */

@media (prefers-reduced-motion: reduce)
{

  .hero__img
  {
    animation: none !important;
  }

  .scroll-cue__light
  {

    animation: none !important;

    top: 25% !important;

    opacity: 0.5 !important;

  }

  body.is-loaded .hero__eyebrow,
  body.is-loaded .hero__verse,
  body.is-loaded .scroll-cue
  {

    animation: none !important;

    opacity: 1 !important;

    transform: none !important;

  }

  /* Skip envelope reveal — show card immediately */

  .envelope-scene.has-observer .invitation-card
  {

    opacity: 1 !important;

    transform: translateX(-50%) translateY(var(--invite-open-y)) scale(1) !important;

  }

  .envelope-scene.is-animating .envelope__flap,
  .envelope-scene.is-animating .invitation-card
  {
    animation: none !important;
  }

  .envelope__flap
  {
    transform: perspective(1000px) rotateX(-165deg) !important;
  }

  [data-reveal]
  {

    opacity: 1 !important;

    transform: none !important;

    transition: none !important;

  }

  .venue-section__image
  {

    transform: none !important;

    transition: none !important;

  }

  .travel-guide-item
  {

    opacity: 1 !important;

    transform: none !important;

    transition: none !important;

  }

}


/* ============================================================
   RSVP MODAL
   Global dialog overlay — z-index 300 sits above the fixed
   header (200) and nav panel (190).
   ============================================================ */

/* ── Overlay wrapper ── */

.rsvpModal
{

  position: fixed;

  inset: 0;

  z-index: 300;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 1.5rem;

  opacity: 0;

  visibility: hidden;

  transition:
    opacity 0.38s ease,
    visibility 0.38s ease;

}

.rsvpModal.is-open
{

  opacity: 1;

  visibility: visible;

}

/* ── Dark backdrop ── */

.rsvpModal__backdrop
{

  position: absolute;

  inset: 0;

  background-color: rgba(10, 10, 10, 0.82);

  cursor: pointer;

}

/* ── Modal panel — styled to match the invitation card ── */

.rsvpModal__panel
{

  position: relative;

  z-index: 1;

  width: min(500px, 100%);

  max-height: 90dvh;

  overflow-y: auto;

  background-color: #faf7f2;

  border: 1px solid rgba(184, 151, 90, 0.28);

  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 24px 80px rgba(0, 0, 0, 0.28);

  padding: clamp(2.5rem, 6vw, 3.5rem) clamp(2rem, 5vw, 3rem);

  transform: translateY(16px) scale(0.97);

  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);

}

.rsvpModal.is-open .rsvpModal__panel
{
  transform: translateY(0) scale(1);
}

/* ── Close button ── */

.rsvpModal__close
{

  position: absolute;

  top: 1.1rem;

  right: 1.25rem;

  appearance: none;

  background: none;

  border: none;

  cursor: pointer;

  font-family: var(--font-sans);

  font-size: 1.75rem;

  font-weight: 300;

  line-height: 1;

  color: #9c8a7a;

  padding: 0.2rem 0.45rem;

  transition: color 0.22s ease;

}

.rsvpModal__close:hover
{
  color: var(--color-accent);
}

.rsvpModal__close:focus-visible
{

  outline: 1px solid var(--color-accent);

  outline-offset: 4px;

}

/* ── Modal header ── */

.rsvpModal__header
{

  text-align: center;

  margin-bottom: clamp(1.8rem, 3.5vh, 2.5rem);

}

.rsvpModal__eyebrow
{

  font-family: var(--font-sans);

  font-size: 0.72rem;

  font-weight: 300;

  letter-spacing: 0.48em;

  text-transform: uppercase;

  color: var(--color-accent);

}

.rsvpModal__title
{

  font-family: var(--font-serif);

  font-size: clamp(2.4rem, 5.5vw, 3.2rem);

  font-style: italic;

  font-weight: 300;

  line-height: 1.0;

  color: #1c1814;

  margin: 0.5rem 0 0;

}

.rsvpModal__rule
{

  width: clamp(2rem, 5vw, 2.8rem);

  height: 1px;

  background-color: var(--color-accent);

  opacity: 0.55;

  margin: 1.25rem auto 0;

}

/* ── Form layout ── */

.rsvpModal__form
{

  display: flex;

  flex-direction: column;

  gap: 1.25rem;

}

.rsvpModal__field
{

  display: flex;

  flex-direction: column;

  gap: 0.45rem;

}

.rsvpModal__label
{

  font-family: var(--font-sans);

  font-size: 0.7rem;

  font-weight: 300;

  letter-spacing: 0.24em;

  text-transform: uppercase;

  color: #5a4e47;

}

/* ── Text inputs and select ── */

.rsvpModal__input,
.rsvpModal__select
{

  font-family: var(--font-sans);

  font-size: 1rem;

  font-weight: 300;

  color: #1c1814;

  background-color: rgba(250, 247, 242, 0.9);

  border: 1px solid rgba(68, 58, 53, 0.22);

  border-radius: 0;

  padding: 0.72em 0.85em;

  width: 100%;

  -webkit-appearance: none;

  appearance: none;

  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease;

}

.rsvpModal__input::placeholder
{
  color: rgba(92, 78, 71, 0.38);
}

.rsvpModal__input:focus,
.rsvpModal__select:focus
{

  outline: none;

  border-color: var(--color-accent);

  box-shadow: 0 0 0 2px rgba(184, 151, 90, 0.16);

}

/* ── Custom select arrow ── */

.rsvpModal__select
{

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b8975a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 0.85em center;

  padding-right: 2.5em;

  cursor: pointer;

}

/* ── Song request section ── */

.rsvpModal__divider
{

  width: 100%;

  height: 1px;

  background-color: rgba(184, 151, 90, 0.22);

  margin: 0.25rem 0;

}

.rsvpModal__sectionLabel
{

  font-family: var(--font-sans);

  font-size: 0.7rem;

  font-weight: 300;

  letter-spacing: 0.28em;

  text-transform: uppercase;

  color: #5a4e47;

  display: flex;

  align-items: center;

  gap: 0.75rem;

}

.rsvpModal__optionalTag
{

  font-size: 0.6rem;

  letter-spacing: 0.18em;

  color: var(--color-accent);

  opacity: 0.7;

}

/* ── Submit button ── */

.rsvpModal__submit
{

  position: relative;

  font-family: var(--font-serif);

  font-style: italic;

  font-size: clamp(1.35rem, 2.8vw, 1.7rem);

  font-weight: 300;

  letter-spacing: 0.06em;

  color: var(--color-accent);

  background: none;

  border: 1px solid var(--color-accent);

  padding: 0.32em 1.4em;

  cursor: pointer;

  width: 100%;

  margin-top: 0.5rem;

  transition:
    color 0.32s ease,
    border-color 0.32s ease,
    background-color 0.32s ease;

}

.rsvpModal__submit:hover
{

  color: #faf7f2;

  background-color: var(--color-accent);

}

.rsvpModal__submit:focus-visible
{

  outline: 1px solid var(--color-accent);

  outline-offset: 4px;

}

.rsvpModal__submit:disabled
{

  opacity: 0.45;

  cursor: not-allowed;

  pointer-events: none;

}

/* ── Loading state ── */

.rsvpModal__loadingWrap
{

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 1.5rem;

  min-height: 240px;

}

@keyframes rsvpSpin
{

  to
  {
    transform: rotate(360deg);
  }

}

.rsvpModal__spinner
{

  width: 36px;

  height: 36px;

  border: 1.5px solid rgba(184, 151, 90, 0.2);

  border-top-color: var(--color-accent);

  border-radius: 50%;

  animation: rsvpSpin 0.85s linear infinite;

}

.rsvpModal__loadingText
{

  font-family: var(--font-sans);

  font-size: 0.72rem;

  font-weight: 300;

  letter-spacing: 0.3em;

  text-transform: uppercase;

  color: #9c8a7a;

}

/* ── Success state ── */

.rsvpModal__successWrap
{

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  gap: 1.2rem;

  padding: 1.5rem 0;

}

.rsvpModal__successTitle
{

  font-family: var(--font-serif);

  font-style: italic;

  font-size: clamp(1.6rem, 4vw, 2.2rem);

  font-weight: 300;

  line-height: 1.2;

  color: #1c1814;

}

.rsvpModal__successText
{

  font-family: var(--font-sans);

  font-size: 0.88rem;

  font-weight: 300;

  letter-spacing: 0.14em;

  color: #6b5d52;

}

/* ── Error state ── */

.rsvpModal__errorWrap
{

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  gap: 1.2rem;

  padding: 1.5rem 0;

}

.rsvpModal__errorTitle
{

  font-family: var(--font-serif);

  font-style: italic;

  font-size: clamp(1.5rem, 3.5vw, 2rem);

  font-weight: 300;

  color: #1c1814;

}

.rsvpModal__errorText
{

  font-family: var(--font-sans);

  font-size: 0.88rem;

  font-weight: 300;

  letter-spacing: 0.12em;

  line-height: 1.7;

  color: #6b5d52;

  max-width: 28rem;

}

.rsvpModal__errorActions
{

  display: flex;

  gap: 1rem;

  flex-wrap: wrap;

  justify-content: center;

  margin-top: 0.4rem;

}

/* ── Shared action buttons (success / error) ── */

.rsvpModal__actionBtn
{

  font-family: var(--font-sans);

  font-size: 0.7rem;

  font-weight: 300;

  letter-spacing: 0.34em;

  text-transform: uppercase;

  color: var(--color-accent);

  background: none;

  border: 1px solid var(--color-accent);

  padding: 0.65em 1.6em;

  cursor: pointer;

  transition:
    color 0.28s ease,
    background-color 0.28s ease;

}

.rsvpModal__actionBtn:hover
{

  color: #faf7f2;

  background-color: var(--color-accent);

}

.rsvpModal__actionBtn:focus-visible
{

  outline: 1px solid var(--color-accent);

  outline-offset: 4px;

}

/* ── Secondary action (Try Again) ── */

.rsvpModal__actionBtn--secondary
{

  color: #9c8a7a;

  border-color: rgba(156, 138, 122, 0.42);

}

.rsvpModal__actionBtn--secondary:hover
{

  color: #1c1814;

  background-color: rgba(156, 138, 122, 0.1);

}

/* ── Reduced motion ── */

@media (prefers-reduced-motion: reduce)
{

  .rsvpModal,
  .rsvpModal__panel
  {
    transition: none;
  }

  .rsvpModal__spinner
  {

    animation: none;

    border-top-color: var(--color-accent);

    opacity: 0.65;

  }

}