/* ============================================================
   WEDSITE — Global Stylesheet
   All visual values are defined as CSS variables in :root.
   No hardcoded colors, fonts, sizes, or spacing outside :root.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Lora:wght@300;400;500;600;700&family=Pinyon+Script&display=swap');

/* ============================================================
   :ROOT — Design Tokens
   ============================================================ */

:root {
  /* Colors */
  --color-bg:           #F5F0EB;
  --color-surface:      #EDE7DF;
  --color-border:       #D6CCBF;
  --color-text:         #2C2520;
  --color-text-muted:   #7A6E65;
  --color-accent:       #8B6F5E;
  --color-accent-light: #C4A898;
  --color-white:        #FDFAF7;
  --color-overlay:      rgba(44, 37, 32, 0.55);
  --color-bg-dark:      #111111;
  --color-bg-dark-overlay: rgba(17, 17, 17, 0.85);
  --color-edge-on-dark: rgba(255, 255, 255, 0.1);
  --border-edge-on-dark: 1px solid var(--color-edge-on-dark);
  --color-text-light:   #F5F0EB;
  --color-text-gray:    #BBBBBB;
  --color-border-muted: #696969;
  --color-bg-cta-hover: #1a1a1a;
  --color-border-on-dark: #222222;
  --color-text-primary:   #FAFAFA;
  --color-on-dark-pure:   #FFFFFF;
  --color-black:          #000000;
  --color-cta-muted:      #CCCCCC;
  --color-text-secondary: #BBBBBB;
  --nav-cta-surface:        #1f1f1f;
  --nav-cta-text-on-surface: #fff;
  --nav-gutter-inline:       var(--space-64);
  --story-teaser-cta-stroke-bounds-h: 4px;
  --story-teaser-corner-max-h: clamp(128px, 22vw, 240px);
  --story-teaser-corner-max-w: min(62vw, 480px);
  --story-teaser-corner-h-outset: calc(var(--space-64) + var(--space-12));
  --story-teaser-content-nudge: var(--space-72);
  --story-teaser-padding-inline: 0px;
  --story-teaser-content-max-width: min(46rem, 100%);

  /* Venue teaser — Figma reference typography */
  --venue-teaser-heading-size:     15px;
  --venue-teaser-heading-tracking: 4.199px;
  --venue-teaser-heading-stroke:   0.51px;
  --venue-teaser-copy-size:        17px;
  --venue-teaser-copy-tracking:    4px;
  --venue-teaser-copy-stroke:      0.41px;
  --venue-teaser-copy-opacity:     0.7;

  /* Prompt arrows (envelope + RSVP) */
  --prompt-arrow-width:        8px;
  --prompt-arrow-height:       40px;
  --prompt-arrow-bob-distance: 5px;

  /* What to expect — accordion labels */
  --accordion-label-tracking: var(--venue-teaser-copy-tracking);
  --accordion-caret-width:  7px;
  --accordion-caret-height: 5px;
  --schedule-event-tracking: 2.5px;
  --schedule-suit-size:      0.65em;
  --schedule-time-tracking:  1px;

  /* Typography — Families */
  --font-display:        'Georgia', serif;
  --font-story-serif:    'Times New Roman', Times, serif;
  --font-display-script: 'Pinyon Script', cursive;
  --font-display-caps:   'Lora', serif;
  --font-body-lora:      'Lora', serif;
  --font-display-cinzel: 'Cinzel', serif;
  --font-countdown:      'Cinzel', serif;
  --font-body:           'Helvetica Neue', Arial, sans-serif;
  --font-mono:           'Courier New', monospace;

  /* Shadows */
  --shadow-envelope: 0 8px 48px rgba(255, 255, 255, 0.12);

  /* Typography — Sizes */
  --size-display: clamp(2rem, 5vw, 3.5rem);
  --size-h1:      clamp(1.75rem, 4vw, 2.75rem);
  --size-h2:      clamp(1.35rem, 3vw, 2rem);
  --size-h3:      clamp(1.1rem, 2.5vw, 1.4rem);
  --size-body:    1rem;
  --size-small:   0.875rem;
  --size-caption: 0.75rem;
  --size-hero-tagline: clamp(13px, 2.6vw, 17px);
  --size-hero-meta: clamp(12px, 2.2vw, 17px);
  --size-section-heading: clamp(2.25rem, 5vw, 3.375rem);

  /* Typography — Leading & Tracking */
  --leading-tight: 1.15;
  --leading-body:  1.65;
  --tracking-wide:  0.12em;
  --tracking-wider: 0.21em;
  /* Reference caps (nav logotype + hero Lora lines) */
  --tracking-nav-logo:     0.23em;
  --tracking-hero-tagline: clamp(1.95px, 0.5vw, 4.0px);
  --tracking-hero-meta:    clamp(1.44px, 0.4vw, 3.6px);

  /* Typography — Weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* Spacing */
  --space-4:  4px;
  --space-8:  8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-18: 18px;
  --space-24: 24px;
  --space-27: 27px;
  --space-32: 32px;
  --space-34: 34px;
  --space-48: 48px;
  --space-63: 63px;
  --space-64: 64px;
  --space-69: 69px;
  --space-87: 87px;
  --space-96: 96px;
  --space-97: 97px;

  /* Hero — Figma vertical rhythm (tagline gap = names gap ÷ 4) */
  --hero-gap-tagline-names: 22px;
  --hero-gap-names-date:    88px;

  /* RSVP countdown */
  --rsvp-section-padding-y:     97px;
  --rsvp-countdown-row-gap:     44px;
  --rsvp-countdown-row-max-w:   788px;
  --flourish-divider-width:     230px;
  --rsvp-subtitle-size:         clamp(13px, 1.8vw, 16px);
  --rsvp-subtitle-tracking:     4.2px;
  --rsvp-header-gap:              var(--space-8);
  --rsvp-countdown-number-size: clamp(32px, 6vw, 54px);
  --rsvp-countdown-label-size:  clamp(11px, 1.4vw, 15px);
  --rsvp-countdown-label-tracking: 2.85px;
  --rsvp-countdown-unit-gap:      var(--space-4);
  --rsvp-cta-margin-top:          var(--space-16);
  --cta-link-transition:        200ms ease;

  /* Layout */
  --hero-content-max-width: 741px;
  --max-width:  860px;
  --nav-height: 96px;
  --hero-min-height: calc(100dvh - var(--nav-height));

  /* Motion */
  --transition-fast:   150ms ease;
  --transition-base:   280ms ease;
  --transition-slow:   500ms ease;
  --transition-xslow:  800ms ease;

  /* Envelope gate */
  --envelope-fade-duration:  700ms;
  --envelope-fade-ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --envelope-seal-duration:  350ms;
  --envelope-flap-duration:  700ms;
  --envelope-stage-exit:     500ms;
  --envelope-reveal-delay:   200ms;
  --envelope-fade-overlap:   0.5;

  /* Email gate */
  --email-gate-z-index:              1001;
  --email-gate-display-size:         clamp(3rem, 8vw, 3.5rem);
  --email-gate-body-size:            clamp(0.8125rem, 2.2vw, 1rem);
  --email-gate-input-font-size:      max(16px, clamp(0.8125rem, 2.2vw, 1rem));
  --email-gate-submit-size:          clamp(0.8125rem, 2vw, 0.9375rem);
  --email-gate-submit-tracking:      clamp(1.95px, 0.5vw, 2.85px);
  --email-gate-stack-gap:            clamp(2.5rem, 6vw, 3rem);
  --email-gate-copy-gap:             clamp(1.25rem, 3vw, 1.5rem);
  --email-gate-form-gap:             clamp(2.375rem, 5.5vw, 2.625rem);
  --email-gate-input-max-w:          min(400px, calc(100vw - 2 * var(--space-24)));
  --email-gate-rule-width:           175px;
  --email-gate-flourish-width:       clamp(173px, 40vw, 230px);
  --color-email-gate-input-border:   rgba(250, 250, 250, 0.25);
  --email-gate-error-size:           clamp(0.75rem, 2vw, 0.875rem);

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
}


/* ============================================================
   RESET
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font-family: inherit;
}


/* ============================================================
   BODY
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
}

body.envelope-active,
body.gate-active {
  overflow: hidden;
}

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


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
}

h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }
h4 { font-size: var(--size-body); }
h5 { font-size: var(--size-small); }

.display-heading {
  font-family: var(--font-display);
  font-size: var(--size-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
}

.label {
  font-family: var(--font-body);
  font-size: var(--size-caption);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
}


/* ============================================================
   LAYOUT
   ============================================================ */

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-24);
}

.section {
  padding-block: var(--space-96);
}

.section--sm {
  padding-block: var(--space-48);
}


/* ============================================================
   NAV
   ============================================================ */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: #111111;
  border-bottom: var(--border-edge-on-dark);
  z-index: 100;
}

.site-nav__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  gap: var(--space-16);
  width: 100%;
  max-width: 100%;
  min-height: var(--nav-height);
  height: auto;
  margin: 0;
  padding: var(--space-24) var(--space-64);
  box-sizing: border-box;
}

.site-nav__logo {
  font-family: var(--font-display-caps);
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav-logo);
  color: #F5F0EB;
  text-decoration: none;
  flex-shrink: 0;
}

.site-nav__trailing {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-16);
  flex-shrink: 0;
}

.site-nav__cta[hidden] {
  display: none !important;
}

.site-nav__cta.btn {
  color: var(--nav-cta-text-on-surface);
  text-align: center;
  font-family: 'Lora', serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 145%;
  letter-spacing: 2px;
  text-transform: none;
  background-color: #191919;
  border: 1px;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}

.site-nav__cta.btn:hover,
.site-nav__cta.btn:focus-visible {
  color: var(--nav-cta-text-on-surface);
  background-color: transparent;
  border-color: var(--nav-cta-surface);
}

.site-nav__links {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: auto;
  right: var(--space-64);
  width: auto;
  min-width: 240px;
  max-width: min(320px, calc(100vw - var(--space-64) - var(--space-16)));
  flex: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  background-color: #111111;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  padding: var(--space-16) var(--space-24);
  z-index: 99;
  list-style: none;
}

.site-nav__links.is-open {
  display: flex;
}

.site-nav__links a {
  display: block;
  width: 100%;
  font-family: var(--font-display-caps);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: var(--tracking-nav-logo);
  text-transform: uppercase;
  color: #CCCCCC;
  text-decoration: none;
  padding-block: var(--space-12);
  border-bottom: none;
  transition: color var(--transition-fast), font-weight var(--transition-fast);
}

.site-nav__links a:hover,
.site-nav__links a:focus-visible {
  color: #FAFAFA;
  font-weight: 700;
}

.site-nav__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  color: #F5F0EB;
  padding: var(--space-8);
  flex-shrink: 0;
  position: relative;
  z-index: 102;
  -webkit-appearance: none;
  appearance: none;
  min-width: 44px;
  min-height: 44px;
}

.site-nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: currentColor;
  border-radius: 1px;
  flex-shrink: 0;
}

.nav-offset {
  height: var(--nav-height);
  flex-shrink: 0;
}


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

   .site-footer {
    background-color: var(--color-bg-dark);
    border-top: var(--border-edge-on-dark);
    padding-block: var(--space-48);
  }
  
  .site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-16);
    width: 100%;
    padding-inline: var(--space-64);
    box-sizing: border-box;
    flex-wrap: nowrap;
  }
  
  .site-footer__details {
    display: flex;
    align-items: center;
    gap: var(--space-16);
  }
  
  .site-footer__tagline,
  .site-footer__date,
  .site-footer__time {
    font-family: var(--font-display-cinzel);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-nav-logo);
    color: var(--color-text-light);
    margin: 0;
    white-space: nowrap;
    line-height: 1;
  }
  
  .site-footer__suit {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    flex-shrink: 0;
    line-height: 1;
    position: relative;
    top: -0.05em;
  }


/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-48);
  font-family: var(--font-body);
  font-size: var(--size-small);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
}

.btn--primary {
  background-color: var(--color-text);
  color: var(--color-white);
  border: 1px solid var(--color-text);
}

.btn--primary:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-text);
}

.btn--outline:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn--nav {
  padding: var(--space-8) var(--space-24);
  font-size: 0.65rem;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  border-radius: 5px;
  background-color: var(--nav-cta-surface);
}


/* ============================================================
   PAGE HEADER
   ============================================================ */

.page-header {
  text-align: center;
  padding-block: var(--space-96) var(--space-48);
  border-bottom: 1px solid var(--color-border);
}


/* ============================================================
   EMAIL GATE
   ============================================================ */

#email-gate[hidden] {
  display: none !important;
}

#email-gate:not([hidden]) {
  display: flex;
}

#email-gate {
  position: fixed;
  inset: 0;
  z-index: calc(var(--email-gate-z-index) + 1);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
}

.email-gate__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--email-gate-stack-gap);
  width: 100%;
  max-width: min(560px, calc(100vw - 2 * var(--space-24)));
}

.email-gate__flourish {
  display: block;
  width: var(--email-gate-flourish-width);
  height: auto;
  opacity: 0.55;
}

.email-gate__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--email-gate-copy-gap);
  text-align: center;
  width: 100%;
}

.email-gate__display {
  margin: 0;
  font-family: var(--font-display-script);
  font-size: var(--email-gate-display-size);
  font-weight: var(--weight-regular);
  line-height: 0.64;
  color: var(--color-text-primary);
}

.email-gate__instruction {
  margin: 0;
  width: max-content;
  max-width: min(560px, calc(100vw - 2 * var(--space-24)));
  font-family: Lora;
  font-size: var(--email-gate-body-size);
  font-weight: var(--weight-medium);
  line-height: 1.375;
  white-space: nowrap;
  color: var(--color-on-dark-pure);
}

.email-gate__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--email-gate-form-gap);
  width: min(var(--email-gate-input-max-w), 100%);
}

.email-gate__input {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-16);
  font-family: var(--font-story-serif);
  font-size: var(--email-gate-input-font-size);
  font-weight: var(--weight-regular);
  line-height: 1.375;
  color: rgba(255, 255, 255, 0.5);
  background-color: transparent;
  border: 0.25px solid var(--color-email-gate-input-border);
  border-radius: 0;
  outline: none;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.email-gate__input::placeholder {
  color: var(--color-text-gray);
  opacity: 1;
}

.email-gate__input:focus-visible {
  border-color: var(--color-text-gray);
  box-shadow: 0 0 0 1px var(--color-text-gray);
}

.email-gate__error {
  margin: calc(-1 * var(--space-16)) 0 0;
  width: 100%;
  font-family: var(--font-story-serif);
  font-size: var(--email-gate-error-size);
  line-height: 1.45;
  text-align: center;
  color: var(--color-text-gray);
}

.email-gate__error:empty {
  display: none;
}

.email-gate__submit-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--email-gate-rule-width);
  padding: var(--space-16) 0;
}

.email-gate__rule {
  display: none;
}

.email-gate__submit-wrap::before,
.email-gate__submit-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: var(--story-teaser-cta-stroke-bounds-h);
  background-color: var(--color-on-dark-pure);
  opacity: 0;
  transition: opacity var(--cta-link-transition);
  pointer-events: none;
}

.email-gate__submit-wrap::before {
  top: 0;
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 6.25%,
    50% 25%,
    0% 6.25%
  );
}

.email-gate__submit-wrap::after {
  bottom: 0;
  clip-path: polygon(
    0% 93.75%,
    50% 75%,
    100% 93.75%,
    100% 100%,
    0% 100%
  );
}

.email-gate__submit-wrap:hover::before,
.email-gate__submit-wrap:hover::after,
.email-gate__submit-wrap:focus-within::before,
.email-gate__submit-wrap:focus-within::after {
  opacity: 1;
}

.email-gate__submit {
  margin: 0;
  padding: var(--space-12) var(--space-4);
  font-family: var(--font-display-cinzel);
  font-size: var(--email-gate-submit-size);
  font-weight: var(--weight-medium);
  line-height: 1.45;
  letter-spacing: var(--email-gate-submit-tracking);
  text-transform: uppercase;
  color: var(--color-cta-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--cta-link-transition),
              opacity var(--transition-fast);
}

.email-gate__submit-wrap:hover .email-gate__submit,
.email-gate__submit:focus-visible {
  color: var(--color-text-primary);
}

.email-gate__submit:focus-visible {
  outline: 2px solid var(--color-accent-light);
  outline-offset: 4px;
}

.email-gate__submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}


/* ─── HOME DECLINED MESSAGE ─── */

.home-declined-msg__eyebrow {
  font-family: var(--font-display-cinzel);
  font-size: 0.7rem;
  font-weight: var(--weight-medium);
  font-variant-caps: small-caps;
  letter-spacing: 0.18em;
  color: var(--color-text-primary);
  margin: var(--space-32) 0 var(--space-12);
}

.home-declined-msg__body {
  font-family: var(--font-story-serif);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-24);
}

.home-declined-msg__cta {
  display: inline-block;
  padding: var(--space-12) var(--space-32);
  font-family: var(--font-display-cinzel);
  font-size: var(--email-gate-submit-size, 0.75rem);
  font-weight: var(--weight-medium);
  letter-spacing: var(--email-gate-submit-tracking, 0.2em);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-bg-dark);
  background-color: var(--color-bg);
  transition: opacity var(--transition-fast);
}

.home-declined-msg__cta:hover,
.home-declined-msg__cta:focus-visible {
  opacity: 0.85;
}


/* ============================================================
   SCROLL REVEAL
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-slow),
              transform var(--transition-slow);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   PAGE — HOME
   ============================================================ */

.page-home {
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
}


/* ============================================================
   ENVELOPE STAGE
   ============================================================ */

#envelope-stage[hidden] {
  display: none !important;
}

#envelope-stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: #111111;
  z-index: var(--email-gate-z-index);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: opacity var(--envelope-stage-exit) var(--envelope-fade-ease);
}

#envelope-stage.is-exiting {
  opacity: 0;
  pointer-events: none;
}

#envelope-wrap {
  position: relative;
  width: 92vw;
  max-width: 560px;
  perspective: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tap-prompt-gap, var(--space-12));
}

#envelope-art {
  position: relative;
  width: 100%;
  overflow: hidden;
  filter: drop-shadow(var(--shadow-envelope));
}

#env-closed {
  position: relative;
  opacity: 1;
  margin-bottom: calc(-100% * 1024 / 1536 * var(--envelope-tail-ratio, 0.15));
}

@media (min-width: 768px) {
  #envelope-wrap {
    width: 560px;
  }
}

.env-state {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  will-change: opacity;
  transition: opacity var(--envelope-fade-duration) var(--envelope-fade-ease);
  user-select: none;
  pointer-events: none;
}

.env-state.active {
  opacity: 1;
}

.env-state:not(.active) {
  will-change: auto;
}

#flap-finish {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 38%;
  background: transparent;
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform var(--envelope-flap-duration) var(--envelope-fade-ease);
  transform-style: preserve-3d;
  pointer-events: none;
  z-index: 3;
}

#flap-finish.finish-open {
  transform: rotateX(-50deg);
}

#wax-seal-wrap {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  cursor: pointer;
  width: clamp(56px, 14vw, 80px);
  height: clamp(56px, 14vw, 80px);
  transition: opacity var(--envelope-seal-duration) var(--envelope-fade-ease),
              transform var(--envelope-seal-duration) var(--envelope-fade-ease);
}

#wax-seal-wrap:hover {
  transform: translate(-50%, -50%) scale(1.06);
}

#wax-seal-wrap.fade-out {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  pointer-events: none;
}

#wax-seal {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}

#tap-prompt {
  --tap-prompt-gap: var(--space-12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tap-prompt-gap);
  color: var(--color-black);
  opacity: 0;
  transition: opacity var(--envelope-seal-duration) var(--envelope-fade-ease);
  pointer-events: none;
  user-select: none;
}

#tap-prompt.visible {
  opacity: 1;
}

.prompt-arrow {
  width: var(--prompt-arrow-width);
  height: var(--prompt-arrow-height);
  display: block;
  flex-shrink: 0;
}

.prompt-arrow--down {
  transform: scaleY(-1);
}

.prompt-arrow--dark {
  color: #ffffff;
}

.prompt-arrow--light {
  color: var(--color-on-dark-pure);
}

@keyframes prompt-arrow-bob-up {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(calc(-1 * var(--prompt-arrow-bob-distance)));
  }
}

#tap-prompt.visible .prompt-arrow--up.prompt-arrow--animate {
  animation: prompt-arrow-bob-up 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  #tap-prompt.visible .prompt-arrow--up.prompt-arrow--animate {
    animation: none;
  }

  #envelope-stage,
  .env-state,
  #flap-finish,
  #wax-seal-wrap,
  #tap-prompt,
  #page-content {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .env-state {
    will-change: auto;
  }
}

#tap-label {
  font-family: var(--font-display-caps);
  font-size: 10px;
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

#page-content {
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--envelope-stage-exit) var(--envelope-fade-ease);
}

#page-content.revealed {
  opacity: 1;
}

#page-content.revealed-settled {
  opacity: 1;
}


/* ============================================================
   HERO
   ============================================================ */

.hero {
  min-height: clamp(
    420px,
    calc(70dvh + 12vw),
    calc(100dvh - var(--nav-height))
  );
  display: flex;
  flex-direction: column;
  text-align: center;
  background-color: var(--color-bg-dark);
  padding-block: 0;
  box-sizing: border-box;
}

.hero__inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  gap: var(--space-27);
}

.hero__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 0;
  margin-bottom: 0;
  container-type: inline-size;
  container-name: hero;
}

.hero__label {
  font-family: var(--font-display-caps);
  font-size: var(--size-caption);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-gray);
}

.hero__tagline {
  font-family: var(--font-display-caps);
  font-size: clamp(15px, 2.294cqi, 17px);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  -webkit-text-stroke: 0.03em #fff;
  paint-order: stroke fill;
  margin: 0 0 var(--hero-gap-tagline-names) 0;
  max-width: var(--hero-content-max-width);
  width: 100%;
  margin-inline: auto;
}

.hero__names {
  margin: 0 0 var(--hero-gap-names-date) 0;
  padding: 0;
  width: 100%;
  text-align: center;
}

.hero__names-img {
  display: block;
  width: 100%;
  max-width: var(--hero-content-max-width);
  height: auto;
  margin-inline: auto;
}

@media (max-width: 768px) {
  :root {
    --hero-gap-names-date: clamp(48px, 12vw, 63px);
    --hero-gap-tagline-names: calc(var(--hero-gap-names-date) / 4);
  }

  .hero__date {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.25em;
  }

  .hero__date,
  .hero__detail,
  .hero__sep {
    font-weight: 600;
    -webkit-text-stroke: 0.035em #fff;
  }
}

.hero__date,
.hero__details {
  margin: 0;
  flex-shrink: 0;
}

.hero__date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.706em;
  padding: 0;
  flex-wrap: nowrap;
  max-width: var(--hero-content-max-width);
  width: 100%;
  margin-inline: auto;
}

.hero__date,
.hero__detail,
.hero__sep {
  font-family: var(--font-display-caps);
  font-size: clamp(13px, 3.239cqi, 20px);
  font-weight: 500;
  letter-spacing: calc(0.24em - 1px);
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  -webkit-text-stroke: 0.027em #fff;
  paint-order: stroke fill;
  line-height: 1;
}

.hero__date {
  letter-spacing: 3px;
}

.hero__detail {
  text-transform: none;
  white-space: nowrap;
}

.hero__sep {
  flex-shrink: 0;
}

.hero__suit {
  font-size: 0.65rem;
  color: var(--color-text-secondary);
  flex-shrink: 0;
  line-height: 1;
  position: relative;
  top: -0.05em;
}

.hero__details {
  padding-bottom: var(--space-32);
}

@media (max-width: 480px) {
  .hero__suit {
    font-size: 0.5rem;
  }
}

@media (max-width: 400px) {
  .hero__date {
    gap: 0.35em;
  }
}

.hero__main .btn--primary {
  background: unset;
  background-color: var(--color-bg-dark);
  color: var(--color-white);
  border: 1px solid var(--color-border-muted);
  padding: var(--space-18) var(--space-48);
  margin-top: var(--space-34);
  margin-bottom: var(--space-34);
}

.hero__main .btn--primary:hover {
  background: unset;
  background-color: var(--color-bg-cta-hover);
  border-color: var(--color-border-muted);
  color: var(--color-white);
}

.hero__cta {
  text-transform: none;
  letter-spacing: var(--tracking-wide);
}


/* ============================================================
   STORY TEASER
   ============================================================ */

/* Shared flourish frame (Our Story top + Venue bottom) */
.story-teaser,
.venue-teaser {
  position: relative;
  overflow-x: visible;
  background-color: var(--color-bg-dark);
  --flourish-gutter-inline: max(var(--space-8), calc(var(--nav-gutter-inline) - var(--space-32)));
}

.story-teaser {
  text-align: left;
}

.story-teaser .story-teaser__inner,
.venue-teaser .venue-teaser__inner {
  position: relative;
  padding-block: clamp(var(--space-64), 10vw, var(--space-96));
  padding-inline: var(--story-teaser-padding-inline);
}

.story-teaser__corners,
.venue-teaser__corners {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.story-teaser__corner,
.venue-teaser__corner {
  position: absolute;
  height: var(--story-teaser-corner-max-h);
  width: auto;
  max-width: var(--story-teaser-corner-max-w);
  object-fit: contain;
}

.story-teaser__corner {
  top: 0;
}

.story-teaser__corner--tl {
  left: calc(50% - 50vw + var(--flourish-gutter-inline));
  right: auto;
  object-position: top left;
}

.story-teaser__corner--tr {
  right: calc(50% - 50vw + var(--flourish-gutter-inline));
  left: auto;
  object-position: top right;
}

.venue-teaser__corner {
  bottom: 0;
  transform: scaleY(-1);
}

.venue-teaser__corner--bl {
  left: calc(50% - 50vw + var(--flourish-gutter-inline));
  right: auto;
  object-position: bottom left;
}

.venue-teaser__corner--br {
  right: calc(50% - 50vw + var(--flourish-gutter-inline));
  left: auto;
  object-position: bottom right;
}

.story-teaser__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.48fr) minmax(0, 0.52fr);
  align-items: center;
  gap: clamp(var(--space-24), 4vw, var(--space-48));
  width: 100%;
  max-width: min(var(--hero-content-max-width), calc(100vw - 2 * var(--flourish-gutter-inline)));
  margin-inline: auto;
  min-height: 520px;
  padding-top: 0;
  padding-inline: var(--flourish-gutter-inline);
  box-sizing: border-box;
}

.story-teaser__col--media {
  width: 100%;
  line-height: 0;
}

.story-teaser__photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

.story-teaser__col--content {
  text-align: left;
  max-width: var(--story-teaser-content-max-width);
  width: 100%;
  justify-self: stretch;
  padding-top: 72px;
}

.story-teaser__heading {
  font-family: var(--font-display-script);
  font-size: var(--size-section-heading);
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  line-height: normal;
  margin: 0 0 var(--space-24);
}

.story-teaser__copy {
  font-family: var(--font-display-caps);
  font-size: 15px;
  font-weight: var(--weight-light);
  color: var(--color-text-light);
  line-height: var(--leading-body);
  margin: 0;
  width: 451px;
  max-width: 100%;
  text-wrap: pretty;
}

.story-teaser__cta {
  position: relative;
  display: inline-block;
  margin-top: var(--space-24);
  margin-bottom: 78px;
  padding: var(--space-16) 0;
  font-family: var(--font-display-caps);
  font-size: var(--size-small);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-light);
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

/* Top stroke: flat along top; ~1px thick mid / ~0.25px ends (4px draw box) */
.story-teaser__cta::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--story-teaser-cta-stroke-bounds-h);
  background-color: var(--color-text-light);
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 6.25%,
    50% 25%,
    0% 6.25%
  );
}

/* Bottom stroke: flat along bottom; same taper */
.story-teaser__cta::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--story-teaser-cta-stroke-bounds-h);
  background-color: var(--color-text-light);
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
  clip-path: polygon(
    0% 93.75%,
    50% 75%,
    100% 93.75%,
    100% 100%,
    0% 100%
  );
}

.story-teaser__cta:hover::before,
.story-teaser__cta:hover::after,
.story-teaser__cta:focus-visible::before,
.story-teaser__cta:focus-visible::after {
  opacity: 1;
}

.story-teaser__cta:focus-visible {
  outline: 2px solid var(--color-accent-light);
  outline-offset: 4px;
}

/* Shared text CTA — matches Read Our Story hover strokes */
.cta-link {
  position: relative;
  display: inline-block;
  padding: var(--space-16) 0;
  font-family: var(--font-display-caps);
  font-size: var(--size-small);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-cta-muted);
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  transition: color var(--cta-link-transition);
}

.cta-link::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--story-teaser-cta-stroke-bounds-h);
  background-color: var(--color-on-dark-pure);
  opacity: 0;
  transition: opacity var(--cta-link-transition);
  pointer-events: none;
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 6.25%,
    50% 25%,
    0% 6.25%
  );
}

.cta-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--story-teaser-cta-stroke-bounds-h);
  background-color: var(--color-on-dark-pure);
  opacity: 0;
  transition: opacity var(--cta-link-transition);
  pointer-events: none;
  clip-path: polygon(
    0% 93.75%,
    50% 75%,
    100% 93.75%,
    100% 100%,
    0% 100%
  );
}

.cta-link:hover,
.cta-link:focus-visible {
  color: var(--color-text-primary);
}

.cta-link:hover::before,
.cta-link:hover::after,
.cta-link:focus-visible::before,
.cta-link:focus-visible::after {
  opacity: 1;
}

.cta-link:focus-visible {
  outline: 2px solid var(--color-accent-light);
  outline-offset: 4px;
}

@media (min-width: 901px) and (max-width: 1024px) {
  .story-teaser__grid {
    max-width: min(940px, calc(100vw - 2 * var(--flourish-gutter-inline)));
    grid-template-columns: minmax(0, 0.54fr) minmax(0, 0.46fr);
  }
}

@media (min-width: 1025px) {
  .story-teaser .story-teaser__inner,
  .venue-teaser .venue-teaser__inner {
    max-width: 940px;
  }

  .story-teaser__grid {
    max-width: min(940px, calc(100vw - 2 * var(--flourish-gutter-inline)));
    grid-template-columns: minmax(0, 0.54fr) minmax(0, 0.46fr);
  }
}

@media (max-width: 1010px) {
  .hero,
  .venue-teaser {
    --story-teaser-padding-inline: var(--space-24);
  }

  .hero .hero__inner {
    padding-inline: var(--story-teaser-padding-inline);
  }

  .hero__date {
    padding-inline: 0;
  }
}

@media (max-width: 903px) {
  .story-teaser,
  .venue-teaser {
    --story-teaser-corner-max-h: 222.2px;
    --story-teaser-corner-max-w: 480px;
  }
}

/* ============================================================
   MOBILE STACK — LOCKED (approved layout, do not change)
   Story + venue single-column, flourishes, copy padding
   ============================================================ */
@media (max-width: 900px) {
  .story-teaser,
  .venue-teaser {
    --story-teaser-corner-max-h: min(182px, 38vw);
    --story-teaser-corner-max-w: min(168px, calc(50vw - var(--flourish-gutter-inline)));
  }

  .story-teaser__corner,
  .venue-teaser__corner {
    max-width: calc(50vw - var(--flourish-gutter-inline));
  }

  .story-teaser__grid {
    grid-template-columns: 1fr;
    gap: var(--space-32);
    width: 100%;
    max-width: none;
    min-height: 0;
    padding-top: 0;
    padding-inline: var(--flourish-gutter-inline);
  }

  .story-teaser .story-teaser__inner,
  .venue-teaser .venue-teaser__inner {
    padding-block: var(--space-64);
    max-width: none;
  }

  .story-teaser__col--media {
    display: flex;
    justify-content: center;
  }

  .story-teaser__col--content {
    max-width: none;
    justify-self: stretch;
    padding-top: 0;
    text-align: center;
  }

  .story-teaser__photo {
    width: 100%;
    max-width: 420px;
    height: auto;
    object-position: center top;
  }

  .story-teaser__copy {
    width: auto;
    font-size: 13px;
    padding-inline: var(--space-32);
  }

  .venue-teaser__content {
    padding-bottom: calc(var(--story-teaser-corner-max-h) + var(--space-24));
  }
}
/* ============================================================
   RSVP SECTION
   ============================================================ */

.rsvp-section {
  background-color: var(--color-bg-dark);
}

.rsvp-section.section {
  padding-block: var(--rsvp-section-padding-y);
}

.rsvp-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-24);
  text-align: center;
}

.rsvp-section__title {
  font-family: var(--font-display-script);
  font-size: var(--size-section-heading);
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  line-height: normal;
  text-align: center;
  margin: 0;
}

.rsvp-section__subtitle {
  font-family: var(--font-display-caps);
  font-size: var(--rsvp-subtitle-size);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--rsvp-subtitle-tracking);
  text-align: center;
  text-transform: uppercase;
  margin: calc(var(--rsvp-header-gap) - var(--space-24)) 0 0;
}

.flourish-divider {
  display: block;
  width: var(--flourish-divider-width);
  height: auto;
}

.countdown-row {
  display: flex;
  flex-direction: row;
  gap: var(--rsvp-countdown-row-gap);
  align-items: center;
  justify-content: center;
  max-width: var(--rsvp-countdown-row-max-w);
  width: 100%;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rsvp-countdown-unit-gap);
}

.countdown-unit__number {
  font-family: var(--font-countdown);
  font-size: var(--rsvp-countdown-number-size);
  font-weight: var(--weight-bold);
  color: var(--color-text-light);
  text-align: center;
  line-height: 1;
}

.countdown-unit__label {
  font-family: var(--font-display-caps);
  font-size: var(--rsvp-countdown-label-size);
  font-weight: var(--weight-bold);
  color: var(--color-text-light);
  letter-spacing: var(--rsvp-countdown-label-tracking);
  text-align: center;
  text-transform: uppercase;
}

.rsvp-section__deadline-label {
  font-family: var(--font-display-caps);
  font-size: var(--rsvp-subtitle-size);
  font-weight: var(--weight-medium);
  color: var(--color-text-light);
  letter-spacing: var(--rsvp-subtitle-tracking);
  text-align: center;
  text-transform: uppercase;
  margin: 0;
}

.countdown-arrow {
  display: inline-block;
  margin-left: var(--space-8);
  font-size: 1.2em;
  letter-spacing: 0;
}

.rsvp-scroll-arrow {
  display: flex;
  justify-content: center;
  padding: var(--space-8) 0;
}

.rsvp-scroll-arrow .countdown-arrow {
  margin-left: 0;
}

.rsvp-section .cta-link {
  margin-top: var(--rsvp-cta-margin-top);
}

.rsvp-section__prompt {
  display: flex;
  justify-content: center;
  margin-top: var(--space-12);
  margin-bottom: var(--space-8);
}

.rsvp-section__prompt + .cta-link {
  margin-top: 0;
}

@media (max-width: 768px) {
  .countdown-row {
    gap: var(--space-24);
  }
}

@media (max-width: 480px) {
  .countdown-row {
    gap: var(--space-16);
  }

  .countdown-section {
    padding: var(--space-64) var(--space-24);
  }

  .flourish-divider {
    width: 160px;
  }
}


/* ============================================================
   VENUE TEASER
   ============================================================ */

.venue-teaser {
  text-align: center;
}

.venue-teaser__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  padding-bottom: max(
    0px,
    calc(var(--story-teaser-corner-max-h) - var(--story-teaser-content-nudge))
  );
}

.venue-teaser__heading {
  font-family: var(--font-display-caps);
  font-size: var(--venue-teaser-heading-size);
  font-weight: var(--weight-regular);
  font-style: normal;
  line-height: normal;
  letter-spacing: var(--venue-teaser-heading-tracking);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-on-dark-pure);
  -webkit-text-stroke-width: var(--venue-teaser-heading-stroke);
  -webkit-text-stroke-color: var(--color-on-dark-pure);
  margin: 0;
}

.venue-teaser__copy {
  font-family: var(--font-display-caps);
  font-size: var(--venue-teaser-copy-size);
  font-weight: var(--weight-regular);
  font-style: normal;
  line-height: normal;
  letter-spacing: var(--venue-teaser-copy-tracking);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-on-dark-pure);
  opacity: var(--venue-teaser-copy-opacity);
  -webkit-text-stroke-width: var(--venue-teaser-copy-stroke);
  -webkit-text-stroke-color: var(--color-on-dark-pure);
  margin: 0;
  text-wrap: pretty;
}


/* ============================================================
   WHAT TO EXPECT
   ============================================================ */

.what-to-expect {
  background-color: var(--color-bg-dark);
  text-align: center;
}

.what-to-expect__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  padding-inline: var(--nav-gutter-inline);
}

.what-to-expect__title {
  font-family: var(--font-display-script);
  font-size: var(--size-section-heading);
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  line-height: normal;
  text-align: center;
  text-transform: none;
  margin: 0;
}

.what-to-expect__accordion {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
  text-align: left;
}

.accordion-item {
  border-bottom: 1px solid var(--color-border-muted);
}

.accordion-item:first-child {
  border-top: none;
}

.accordion-item__trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

.accordion-item__label {
  font-family: var(--font-body-lora);
  font-size: var(--size-body);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--accordion-label-tracking);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  transition: color var(--transition-fast);
}

.accordion-item__trigger:hover .accordion-item__label,
.accordion-item.is-open .accordion-item__label {
  color: var(--color-text-primary);
}

.accordion-item__arrow {
  flex-shrink: 0;
  align-self: center;
  margin-left: var(--space-16);
  width: 0;
  height: 0;
  border-top: calc(var(--accordion-caret-width) / 2) solid transparent;
  border-bottom: calc(var(--accordion-caret-width) / 2) solid transparent;
  border-left: var(--accordion-caret-height) solid currentColor;
  font-size: 0;
  line-height: 0;
  transition: transform 0.3s ease;
}

.accordion-item__trigger {
  color: var(--color-text-secondary);
}

.accordion-item__trigger:hover,
.accordion-item.is-open .accordion-item__trigger {
  color: var(--color-text-primary);
}

.accordion-item.is-open .accordion-item__arrow {
  transform: rotate(90deg);
}

.accordion-item__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.accordion-item.is-open .accordion-item__panel {
  max-height: 1000px;
}

.accordion-item__body {
  padding: 0 0 24px 0;
}

.what-to-expect__body {
  font-family: var(--font-body-lora);
  font-size: var(--size-body);
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: 0 0 var(--space-16);
  text-transform: none;
}

.what-to-expect__body:last-child {
  margin-bottom: 0;
}

.what-to-expect__body--story {
  font-size: 15px;
  font-weight: var(--weight-light);
  color: var(--color-text-light);
  line-height: var(--leading-body);
  text-wrap: pretty;
}

.attire-photo {
  margin: var(--space-16) 0 0;
}

.attire-photo img {
  width: 100%;
  height: auto;
  display: block;
}

.what-to-expect__schedule-row {
  display: flex;
  gap: var(--space-16);
  margin-bottom: 8px;
}

.what-to-expect__schedule-row:last-child {
  margin-bottom: 0;
}

.what-to-expect__schedule-time {
  flex-shrink: 0;
  min-width: 80px;
  font-family: var(--font-display-cinzel);
  font-size: var(--size-body);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--schedule-time-tracking);
  color: var(--color-text-secondary);
}

.what-to-expect__schedule-event,
.what-to-expect__menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-body-lora);
  font-size: var(--size-body);
  font-weight: var(--weight-medium);
  letter-spacing: var(--schedule-event-tracking);
  color: var(--color-text-primary);
  text-transform: uppercase;
}

.what-to-expect__schedule-event {
  justify-content: center;
}

.what-to-expect__schedule-event::before,
.what-to-expect__menu-item::before {
  flex-shrink: 0;
  font-size: var(--schedule-suit-size);
  line-height: 1;
  color: var(--color-text-primary);
}

.what-to-expect__schedule-row:nth-child(4n + 1) .what-to-expect__schedule-event::before,
.what-to-expect__menu .what-to-expect__menu-item:nth-child(4n + 1)::before {
  content: '♦';
}

.what-to-expect__schedule-row:nth-child(4n + 2) .what-to-expect__schedule-event::before,
.what-to-expect__menu .what-to-expect__menu-item:nth-child(4n + 2)::before {
  content: '♥';
}

.what-to-expect__schedule-row:nth-child(4n + 3) .what-to-expect__schedule-event::before,
.what-to-expect__menu .what-to-expect__menu-item:nth-child(4n + 3)::before {
  content: '♠';
}

.what-to-expect__schedule-row:nth-child(4n + 4) .what-to-expect__schedule-event::before,
.what-to-expect__menu .what-to-expect__menu-item:nth-child(4n + 4)::before {
  content: '♣';
}

.what-to-expect__menu-item {
  line-height: 1.7;
  margin: 0 0 var(--space-8);
}

.what-to-expect__menu-item:last-child {
  margin-bottom: var(--space-16);
}

.what-to-expect__cta {
  margin-top: var(--space-24);
}


/* ============================================================
   RESPONSIVE — Nav spacing (small screens)
   ============================================================ */

/* MOBILE NAV GUTTERS — LOCKED (approved, do not change) */
@media (max-width: 1023px) {
  :root {
    --nav-gutter-inline: var(--space-16);
  }

  .site-nav__inner,
  .site-footer__inner {
    padding-inline: var(--space-16);
  }

  .site-nav__inner {
    padding-block: var(--space-12);
  }

  .site-nav__links {
    right: var(--space-16);
    max-width: min(320px, calc(100vw - var(--space-32)));
  }

  .site-nav__logo,
  .site-footer__tagline {
    font-size: 0.85rem;
  }

  .site-nav__links a {
    font-size: 0.7rem;
  }
}

/* ============================================================
   RESPONSIVE — 680px
   ============================================================ */

@media (max-width: 680px) {
  .section {
    padding-block: var(--space-64);
  }

  .container {
    padding-inline: var(--space-16);
  }

  .site-footer__inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-12);
    padding-inline: var(--space-16);
    text-align: center;
  }

  .site-footer__details {
    justify-content: center;
    flex-wrap: nowrap;
    gap: var(--space-8);
  }

  .site-footer__tagline,
  .site-footer__date,
  .site-footer__time {
    font-size: 14px;
  }

  /* Match flourish gutters — override generic .container 16px padding */
  .hero .hero__inner,
  .story-teaser .story-teaser__inner,
  .venue-teaser .venue-teaser__inner {
    padding-inline: var(--story-teaser-padding-inline);
  }
}


/* ============================================================
   PAGE — VENUE
   ============================================================ */

.page-venue {
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
  --venue-hero-min-height: clamp(420px, 52vw, 592px);
  --venue-hero-bg-desktop: url('../assets/images/venue/charleston-hero-desktop.jpg?v=2');
  --venue-hero-bg-mobile: url('../assets/images/venue/charleston-hero-mobile.jpg?v=2');
  --venue-section-heading-size: clamp(1.875rem, 4.5vw, 2.5rem);
  --venue-body-size: clamp(15px, 2vw, 20px);
  --venue-body-leading: 1.45;
  --venue-details-label-size: clamp(13px, 1.8vw, 17.5px);
  --venue-details-address-size: clamp(18px, 2.6vw, 22px);
  --venue-label-size: clamp(13px, 1.8vw, 17.5px);
  --venue-label-tracking: clamp(2.8px, 0.45vw, 4.97px);
  --venue-address-size: clamp(13px, 1.8vw, 20.7px);
  --venue-details-address-gap: var(--space-8);
  --venue-details-address-opacity: 0.7;
  --venue-address-tracking: clamp(2.8px, 0.45vw, 4.97px);
  --venue-phone-tracking: clamp(1px, 0.2vw, 1.6px);
  --venue-flourish-gap: clamp(var(--space-32), 5vw, var(--space-48));
  --venue-block-gap: clamp(var(--space-24), 4vw, var(--space-48));
  --venue-section-gap: clamp(var(--space-48), 7vw, 70px);
  --venue-legend-col-gap: clamp(var(--space-32), 5vw, 69px);
  --venue-legend-icon-size: clamp(24px, 3vw, 29px);
  --venue-legend-heading-gap: var(--space-8);
  --venue-legend-body-max: min(384px, 100%);
  --venue-copy-max-width: min(993px, 100%);
  --venue-reservations-grid-gap: clamp(var(--space-32), 5vw, var(--space-64));
}

.site-nav__links a.is-active {
  color: var(--color-text-primary);
  font-weight: var(--weight-bold);
}

/* ── Hero ── */

.page-venue .venue-hero {
  position: relative;
  min-height: var(--venue-hero-min-height);
  padding-block: 0;
  background-color: #000;
  background-image: var(--venue-hero-bg-desktop);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}


/* ── Venue Details ── */

.venue-details {
  background-color: var(--color-bg-dark);
  text-align: center;
}

.venue-details.section {
  padding-block: clamp(var(--space-48), 8vw, var(--space-96));
}

.venue-details__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--venue-block-gap);
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-24);
}

.venue-details__label {
  font-family: var(--font-display-cinzel);
  font-size: var(--venue-details-label-size);
  font-weight: var(--weight-regular);
  letter-spacing: var(--venue-label-tracking);
  text-transform: uppercase;
  color: var(--color-on-dark-pure);
  opacity: 1;
  margin: 0;
}

.venue-details__address {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--venue-details-address-gap);
  font-style: normal;
  margin: 0;
}

.venue-details__address span {
  font-family: var(--font-display-caps);
  font-size: var(--venue-details-address-size);
  font-weight: var(--weight-regular);
  letter-spacing: var(--venue-address-tracking);
  text-transform: uppercase;
  color: var(--color-on-dark-pure);
  opacity: var(--venue-details-address-opacity);
  -webkit-text-stroke-width: var(--venue-teaser-copy-stroke);
  -webkit-text-stroke-color: var(--color-on-dark-pure);
  line-height: 1.1;
}

.venue-details__phone {
  margin: 0;
}

.venue-details__phone a {
  font-family: var(--font-story-serif);
  font-size: var(--venue-body-size);
  font-weight: var(--weight-medium);
  letter-spacing: var(--venue-phone-tracking);
  color: var(--color-on-dark-pure);
  text-decoration: none;
  line-height: var(--venue-body-leading);
}

.venue-details__phone a:hover,
.venue-details__phone a:focus-visible {
  color: var(--color-text-primary);
}

.venue-details__prompt {
  display: flex;
  justify-content: center;
  margin-top: clamp(var(--space-24), 4vw, var(--space-48));
}

.venue-details .flourish-divider--top {
  margin-bottom: calc(var(--venue-flourish-gap) - var(--venue-block-gap));
}

/* ── Grand Entrance ── */

.venue-entrance {
  background-color: var(--color-bg-dark);
  text-align: center;
}

.venue-entrance.section {
  padding-block: clamp(var(--space-48), 8vw, var(--space-96));
}

.venue-entrance__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--venue-block-gap);
  max-width: min(1277px, 100%);
  margin-inline: auto;
  padding-inline: var(--nav-gutter-inline);
}

.venue-entrance__heading {
  font-family: var(--font-display-script);
  font-size: var(--venue-section-heading-size);
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  line-height: normal;
  margin: 0;
}

.venue-entrance__copy {
  font-family: var(--font-story-serif);
  font-size: var(--venue-body-size);
  font-weight: var(--weight-medium);
  color: var(--color-on-dark-pure);
  line-height: var(--venue-body-leading);
  max-width: var(--venue-copy-max-width);
  margin: 0;
  margin-top: calc(-1 * clamp(8px, 2vw, 28px));
  text-wrap: pretty;
}

.venue-entrance__map {
  display: block;
  width: 100%;
  margin-top: clamp(var(--space-24), 4vw, var(--space-48));
}

.venue-entrance__map img {
  width: 100%;
  height: auto;
  aspect-ratio: 1277 / 730;
  object-fit: cover;
}

.venue-entrance__legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--venue-legend-col-gap);
  width: 100%;
  max-width: min(860px, 100%);
  margin-top: clamp(var(--space-32), 5vw, var(--space-48));
  text-align: left;
}

.venue-entrance__legend-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.venue-entrance__legend-heading {
  display: flex;
  align-items: center;
  gap: var(--venue-legend-heading-gap);
}

.venue-entrance__legend-icon {
  width: var(--venue-legend-icon-size);
  height: var(--venue-legend-icon-size);
  flex-shrink: 0;
}

.venue-entrance__legend-title {
  font-family: var(--font-display-cinzel);
  font-size: var(--venue-label-size);
  font-weight: var(--weight-regular);
  letter-spacing: var(--venue-label-tracking);
  text-transform: uppercase;
  color: var(--color-on-dark-pure);
  opacity: 0.6;
  margin: 0;
  line-height: normal;
}

.venue-entrance__legend-copy {
  font-family: var(--font-story-serif);
  font-size: clamp(15px, 1.8vw, 17px);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  line-height: var(--venue-body-leading);
  max-width: var(--venue-legend-body-max);
  margin: 0;
  text-wrap: pretty;
}

/* ── Special Reservations ── */

.venue-reservations {
  background-color: var(--color-bg-dark);
  text-align: center;
}

.venue-reservations.section {
  padding-block: clamp(var(--space-48), 8vw, var(--space-96));
}

.venue-reservations__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--venue-block-gap);
  max-width: min(1277px, 100%);
  margin-inline: auto;
  padding-inline: var(--nav-gutter-inline);
}

.venue-reservations__heading {
  font-family: var(--font-display-script);
  font-size: var(--venue-section-heading-size);
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  line-height: normal;
  margin: 0;
  max-width: var(--venue-copy-max-width);
  text-wrap: pretty;
}

.venue-reservations__copy {
  font-family: var(--font-story-serif);
  font-size: var(--venue-body-size);
  font-weight: var(--weight-medium);
  color: var(--color-on-dark-pure);
  line-height: var(--venue-body-leading);
  max-width: min(860px, 100%);
  margin: 0;
  margin-top: calc(-1 * clamp(8px, 2vw, 28px));
  text-wrap: pretty;
}

.venue-reservations__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--venue-reservations-grid-gap);
  align-items: stretch;
  width: 100%;
  max-width: min(860px, 100%);
  margin-top: clamp(var(--space-24), 4vw, var(--venue-section-gap));
}

.venue-reservations__photo {
  display: block;
  width: 100%;
  min-height: 100%;
}

.venue-reservations__photo img {
  width: 100%;
  height: 100%;
  min-height: clamp(240px, 35vw, 379px);
  object-fit: cover;
  object-position: center;
}

.venue-reservations__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--venue-block-gap);
  text-align: center;
}

.venue-reservations__logo {
  width: clamp(160px, 22vw, 280px);
  height: auto;
}

.venue-reservations__address {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--venue-details-address-gap);
  font-style: normal;
  margin: 0;
}

.venue-reservations__address span {
  font-family: var(--font-display-caps);
  font-size: var(--venue-address-size);
  font-weight: var(--weight-regular);
  letter-spacing: clamp(2.8px, 0.38vw, 4.14px);
  text-transform: uppercase;
  color: var(--color-on-dark-pure);
  opacity: var(--venue-teaser-copy-opacity);
  -webkit-text-stroke-width: var(--venue-teaser-copy-stroke);
  -webkit-text-stroke-color: var(--color-on-dark-pure);
  line-height: normal;
}

.venue-reservations__phone {
  margin: 0;
}

.venue-reservations__phone a {
  font-family: var(--font-story-serif);
  font-size: var(--venue-body-size);
  font-weight: var(--weight-medium);
  letter-spacing: var(--venue-phone-tracking);
  color: var(--color-on-dark-pure);
  text-decoration: none;
  line-height: var(--venue-body-leading);
}

.venue-reservations__phone a:hover,
.venue-reservations__phone a:focus-visible {
  color: var(--color-text-primary);
}

.venue-reservations__cta {
  margin-top: var(--space-8);
}

/* ── Venue responsive ── */

@media (max-width: 450px) {
  .page-venue {
    --venue-hero-min-height: clamp(260px, 72vw, 380px);
  }
}

@media (max-width: 480px) {
  .page-venue .venue-hero {
    background-image: var(--venue-hero-bg-mobile);
  }

  .venue-details__inner,
  .venue-entrance__inner,
  .venue-reservations__inner {
    padding-inline: var(--space-16);
  }

  .venue-details .flourish-divider,
  .venue-reservations .flourish-divider {
    width: 160px;
  }
}

@media (max-width: 900px) {
  .venue-entrance__legend {
    grid-template-columns: 1fr;
    gap: clamp(var(--space-48), 8vw, var(--space-64));
    text-align: center;
  }

  .venue-entrance__legend-item {
    align-items: center;
  }

  .venue-entrance__legend-heading {
    flex-direction: column;
    align-items: center;
    gap: var(--space-12);
  }

  .venue-entrance__legend-copy {
    max-width: var(--venue-copy-max-width);
    text-align: center;
  }

  .venue-reservations__grid {
    grid-template-columns: 1fr;
    gap: clamp(var(--space-32), 6vw, var(--space-48));
  }

  .venue-reservations__photo img {
    min-height: clamp(200px, 55vw, 320px);
  }
}


/* ============================================================
   PAGE — FAQ
   ============================================================ */

.page-faq {
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
  --faq-index-arrow-gap: clamp(var(--space-24), 4vw, var(--space-32));
}

.faq-page {
  background-color: var(--color-bg-dark);
  text-align: center;
}

.faq-page.section {
  padding-block: 0 clamp(var(--space-48), 8vw, var(--space-96));
}

.faq-page__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--nav-gutter-inline);
}

.faq-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-height: calc(100dvh - var(--nav-height));
  box-sizing: border-box;
  padding-block: var(--space-16);
}

.faq-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  margin-bottom: clamp(var(--space-16), 3vw, var(--space-32));
}

.faq-hero__title {
  font-family: var(--font-display-script);
  font-size: var(--size-section-heading);
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  line-height: normal;
  text-align: center;
  text-transform: none;
  margin: 0;
}

.faq-index {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
}

.faq-index__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.faq-index__prompt {
  display: flex;
  justify-content: center;
  margin-top: var(--faq-index-arrow-gap);
  margin-bottom: var(--faq-index-arrow-gap);
}

.faq-index__list a {
  display: block;
  font-family: var(--font-body-lora);
  font-size: var(--size-body);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--accordion-label-tracking);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.faq-index__list a:hover,
.faq-index__list a:focus-visible {
  color: var(--color-text-primary);
}

.faq-index__list a:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 2px;
}

.faq-sections {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
  padding-top: clamp(var(--space-32), 5vw, var(--space-64));
  text-align: left;
}

.faq-section {
  scroll-margin-top: 96px;
  padding-top: clamp(var(--space-48), 6vw, var(--space-64));
  border-top: 1px solid var(--color-border-muted);
}

.faq-section:first-child {
  padding-top: 0;
  border-top: none;
}

.faq-section__heading {
  font-family: var(--font-body-lora);
  font-size: var(--size-body);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--accordion-label-tracking);
  color: var(--color-text-primary);
  text-transform: uppercase;
  margin: 0 0 var(--space-16);
}

.faq-section__body {
  padding-bottom: clamp(var(--space-32), 5vw, var(--space-48));
}

.faq-section__body .cta-link {
  margin-top: var(--space-24);
}

.faq-section__link {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--transition-fast);
}

.faq-section__link:hover,
.faq-section__link:focus-visible {
  color: var(--color-white);
}

.faq-section__contact-list {
  list-style: none;
  padding: 0;
  margin: var(--space-16) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.faq-section__contact-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-12);
}

.faq-section__contact-name {
  font-family: var(--font-story-serif);
  color: var(--color-text-primary);
  min-width: 7rem;
}


/* ============================================================
   PAGE — RSVP
   ============================================================ */

.page-rsvp {
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
}

.rsvp-page {
  background-color: var(--color-bg-dark);
  min-height: calc(50dvh - var(--nav-height));
}

.rsvp-page__inner {
  width: min(960px, calc(100% - var(--nav-gutter-inline) * 2));
  margin-inline: auto;
  padding-block: clamp(var(--space-32), 5vw, var(--space-64));
}

.rsvp-confirmation {
  text-align: center;
}

.rsvp-page__status {
  font-family: var(--font-body-lora);
  font-size: var(--size-body);
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
  text-align: center;
}

/* ── Form heading ── */
.rsvp-form__heading {
  font-family: Lora, serif;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  line-height: 1.3;
  margin: 0 0 clamp(var(--space-48), 6vw, var(--space-64));
  text-align: center;
}

.rsvp-form__heading-script {
  display: block;
  font-family: "Pinyon Script", cursive;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: var(--weight-regular);
  line-height: 0.75;
  margin-bottom: -18px;
}

.rsvp-form__heading-sub {
  display: block;
  font-family: Lora, serif;
  font-size: clamp(11px, 1.2vw, 16px);
  font-weight: var(--weight-regular);
  letter-spacing: 0.12em;
  color: var(--color-text-secondary);
  text-transform: uppercase;
}

/* ── Guest first name in Pinyon Script ── */
.rsvp-member--solo {
  padding-left: 0;
}

.rsvp-member--solo .rsvp-member__name {
  min-width: 140px;
}

/* ── Guest first name in Pinyon Script ── */
.rsvp-member__first-name {
  font-family: "Pinyon Script", cursive;
  font-size: 1.5em;
}


/* ── Form rows ── */
.rsvp-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rsvp-form__message {
  font-family: var(--font-body-lora);
  font-size: var(--size-body);
  color: var(--color-text-secondary);
  margin: var(--space-16) 0 0;
  min-height: 1.4em;
  text-align: center;
}

/* ── Member row: name | radios in one line ── */
.rsvp-member {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-16) clamp(var(--space-24), 4vw, var(--space-48));
  border: 0;
  background-color: transparent;
  padding: clamp(var(--space-16), 3vw, var(--space-24)) 0;
  margin: 0;
}

.rsvp-member__name {
  flex: 0 0 auto;
  font-family: Lora, serif;
  font-size: 25px;
  line-height: 1;
  color: var(--color-text-primary);
  margin: 0;
  padding: 0;
  min-width: 180px;
}

.rsvp-member__choices {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12) clamp(var(--space-27), 4vw, var(--space-48));
  flex: 1 1 auto;
  transition: opacity 0.2s ease;
}

.rsvp-choice {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  border: 0;
  padding: 0;
  font-family: var(--font-body-lora);
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.rsvp-choice input[type="radio"] {
  appearance: auto;
  width: 1em;
  height: 1em;
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-text-primary);
  flex-shrink: 0;
}

.rsvp-choice:has(input:checked) {
  color: var(--color-text-primary);
}

.rsvp-choice:not(:has(input:checked)) span {
  opacity: 0.45;
}

.rsvp-choice:not(:has(input:checked)) input[type="radio"] {
  opacity: 0.3;
}

/* ── Per-member include checkbox ── */
.rsvp-member__include-label {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}

.rsvp-member__include {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--color-text-primary);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0 var(--space-12) 0 0;
}

/* Dim + block interaction on unchecked rows */
.rsvp-member:has(.rsvp-member__include:not(:checked)) .rsvp-member__choices {
  opacity: 0.3;
  pointer-events: none;
}

.rsvp-form__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  margin-top: var(--space-24);
}

.rsvp-form__submit,
.rsvp-confirmation__edit {
  align-self: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.rsvp-form__submit:disabled {
  cursor: wait;
  opacity: 0.65;
}

.rsvp-form__save-later {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body-lora);
  font-size: clamp(12px, 1.2vw, 14px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  opacity: 0.6;
  padding: 0;
  transition: opacity 0.2s ease;
}

.rsvp-form__save-later:hover {
  opacity: 1;
}

.rsvp-confirmation__list {
  display: grid;
  gap: var(--space-12);
  list-style: none;
  margin: clamp(var(--space-32), 5vw, var(--space-48)) 0 0;
  padding: 0;
  text-align: left;
}

.rsvp-confirmation__member {
  display: grid;
  gap: var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--color-border-muted);
  background-color: transparent;
  padding: var(--space-16) 0;
  font-family: var(--font-body-lora);
  color: var(--color-text-primary);
}

.rsvp-confirmation__member strong {
  font-family: var(--font-display-cinzel);
  font-size: var(--size-small);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.rsvp-confirmation__member em {
  color: var(--color-text-secondary);
  font-style: normal;
}

@media (max-width: 639px) {
  .rsvp-page__inner {
    width: calc(100% - var(--space-32));
  }

  /* Stack name above choices on narrow viewports */
  .rsvp-member {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
  }

  .rsvp-member__choices {
    gap: var(--space-12) var(--space-24);
  }
}

.faq-back-index {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  transform: translateY(100%);
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.faq-back-index.is-visible {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

.faq-back-index__link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-16) var(--nav-gutter-inline);
  padding-bottom: calc(var(--space-16) + env(safe-area-inset-bottom, 0px));
  background-color: var(--color-bg-dark);
  border: 1px solid var(--color-border-muted);
  border-left: none;
  border-right: none;
  border-bottom: none;
  font-family: var(--font-body-lora);
  font-size: var(--size-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--accordion-label-tracking);
  color: var(--color-text-primary);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.faq-back-index__suit {
  font-size: var(--schedule-suit-size);
  line-height: 1;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.faq-back-index__link:hover,
.faq-back-index__link:focus-visible {
  color: var(--color-white);
}

.faq-back-index__link:hover .faq-back-index__suit,
.faq-back-index__link:focus-visible .faq-back-index__suit {
  color: var(--color-text-primary);
}

.faq-back-index__link:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .faq-back-index {
    transition: none;
  }
}

@media (max-width: 639px) {
  .faq-intro {
    padding-block: var(--space-12);
  }

  .faq-hero {
    margin-bottom: var(--space-16);
  }

  .faq-index__prompt {
    margin-top: var(--space-24);
    margin-bottom: var(--space-24);
  }

  .faq-index__list {
    gap: var(--space-8);
  }
}


/* ============================================================
   PAGE — OUR STORY
   ============================================================ */

.page-our-story {
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);

  --story-hero-pt:            clamp(72px, 8.6vw, 110px);
  --story-hero-pb:            clamp(96px, 11.5vw, 148px);
  --story-hero-gap:           clamp(48px, 6vw, 78px);
  --story-hero-title-size:    clamp(56px, 10.5vw, 135px);
  --story-hero-eyebrow-size:  clamp(11px, 1.3vw, 17px);
  --story-hero-eyebrow-track: clamp(2px, 0.32vw, 4.08px);
  --story-hero-meta-size:     clamp(14px, 1.9vw, 24px);
  --story-hero-meta-track:    clamp(1.5px, 0.28vw, 3.6px);

  --story-collage-h-desktop:  1180px;
  --story-collage-h-mobile:   420px;
  --story-collage-gutter:     40px;
  --story-collage-img02-top:  688px;
  --story-collage-text-top:   825px;

  --story-section-text-pt:    clamp(48px, 10.4vw, 134px);
  --story-section-text-pb:    var(--story-section-text-pl);
  --story-section-text-pl:    clamp(24px, 9.4vw, 121px);
  --story-sticky-scroll-ext:  calc(100dvh - var(--nav-height));
  --story-section-body-max-w: 476px;
  --story-section-body-block-h: 711px;
  --story-section-title-size: clamp(32px, 3.5vw, 52px);
  --story-section-sub-size:   clamp(11px, 1.3vw, 17px);
  --story-section-sub-track:  clamp(2px, 0.32vw, 4.08px);
  --story-section-body-size:  clamp(16px, 1.2vw, 18px);
  --story-section-body-lh:    1.6;

  --story-closing-label-size: clamp(14px, 1.9vw, 25px);
  --story-closing-label-track: clamp(2.5px, 0.47vw, 6px);
  --story-closing-flourish-gap: clamp(48px, 6vw, 64px);
  --story-closing-copy-gap:     clamp(var(--space-48), 6vw, var(--space-96));
  --story-closing-label-stack-gap: clamp(4px, 0.6vw, 8px);
  --story-closing-script-gap:   clamp(32px, 4vw, 48px);
  --story-closing-script-size: clamp(64px, 15.6vw, 200px);
  --story-closing-script-lh:  0.47;
}


/* ── Story main wrapper ── */

.story-main {
  width: 100%;
}


/* ── Hero ── */

.story-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: var(--story-hero-pt);
  padding-bottom: var(--story-hero-pb);
  background-color: var(--color-bg-dark);
  text-align: center;
}

.story-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--story-hero-gap);
  max-width: 860px;
  padding-inline: var(--nav-gutter-inline);
  width: 100%;
}

.story-hero__flourish {
  display: flex;
  justify-content: center;
}

.story-hero__flourish img {
  width: clamp(160px, 18vw, 230px);
  height: auto;
}

.story-hero__eyebrow {
  font-family: var(--font-body-lora);
  font-size: var(--story-hero-eyebrow-size);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--story-hero-eyebrow-track);
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin: 0;
  /* eyebrow + title + meta share the inner flex, not an extra gap wrapper */
  margin-bottom: calc(-1 * var(--story-hero-gap) + clamp(16px, 3.5vw, 46px));
}

.story-hero__title {
  font-family: var(--font-display-script);
  font-size: var(--story-hero-title-size);
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  line-height: 0.82;
  margin: 0;
  text-align: center;
}

.story-hero__title-small {
  display: inline-block;
  font-size: 0.72em;
  line-height: 0.9;
}

.story-hero__title-main {
  white-space: nowrap;
}

.story-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.4vw, 18px);
  font-family: var(--font-body-lora);
  font-size: var(--story-hero-meta-size);
  font-weight: var(--weight-regular);
  letter-spacing: var(--story-hero-meta-track);
  color: var(--color-text-primary);
  margin: 0;
}

.story-hero__dot {
  opacity: 0.6;
  font-size: 0.6em;
}


/* ── Opening collage ── */

.story-collage {
  width: 100%;
  overflow-x: clip;
  overflow-y: clip;
}

.story-collage__inner {
  position: relative;
  width: 100%;
  height: var(--story-collage-h-desktop);
  overflow: visible;
}

.story-collage__img {
  position: absolute;
  display: block;
  object-fit: contain;
}

/* monochrome-01: fills full row-1 (825px tall, gutter-inset) */
.story-collage__img--01 {
  top: 0;
  left: var(--story-collage-gutter);
  width: min(calc(100% - var(--story-collage-gutter) * 2), 1204px);
  height: auto;
}

/* monochrome-02: overlapping lower-right of row-1 and into row-2 */
/* Figma positions: left=706/1284=55%, top=688px, w=578/1284=45%, h=433px */
.story-collage__img--02 {
  top: var(--story-collage-img02-top);
  left: 55%;
  width: min(45%, 578px);
  height: auto;
  max-width: 578px;
}

/* text slot: vertically centered in left empty space below img--01 */
.story-collage__img--03 {
  top: var(--story-collage-text-top);
  bottom: auto;
  left: var(--story-collage-gutter);
  width: min(520px, calc(52% - var(--story-collage-gutter)));
  max-width: none;
  height: calc(var(--story-collage-h-desktop) - var(--story-collage-text-top));
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.story-collage__text {
  font-family: var(--font-display-script);
  font-size: clamp(32px, 3.5vw, 52px);
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  line-height: 1.2;
  text-align: left;
  margin: 0;
  padding-inline: 0;
}

.story-collage__img--01,
.story-collage__img--02 {
  will-change: transform;
}


/* ── Sticky narrative sections (Her / His) ── */

.story-section {
  width: 100%;
  background-color: var(--color-bg-dark);
}

.story-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "media text";
  align-items: start;
  width: 100%;
}

/* His section: photo on right, text on left */
.story-his .story-section__inner {
  grid-template-areas: "text media";
}

.story-section__media {
  grid-area: media;
  position: sticky;
  top: var(--nav-height);
  height: auto;
  align-self: start;
  overflow: visible;
}

.story-section__figure {
  width: 100%;
  margin: 0;
}

.story-section__figure picture {
  display: block;
  width: 100%;
}

.story-section__figure img {
  width: 100%;
  height: auto;
  max-height: var(--story-sticky-scroll-ext);
  object-fit: cover;
  object-position: center top;
  display: block;
}

.story-section__text {
  grid-area: text;
  background-color: transparent;
}

.story-section__content {
  padding-top: var(--story-section-text-pt);
  padding-bottom: var(--story-section-text-pb);
  padding-left: var(--story-section-text-pl);
  padding-right: clamp(var(--space-24), 4vw, var(--space-64));
}

.story-section__runway {
  height: 0;
}

.story-section__title {
  font-family: var(--font-display-script);
  font-size: var(--story-section-title-size);
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  line-height: 1.1;
  margin: 0 0 clamp(8px, 1vw, 12px);
}

.story-section__sub {
  font-family: var(--font-body-lora);
  font-size: var(--story-section-sub-size);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--story-section-sub-track);
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin: 0 0 clamp(var(--space-24), 2.5vw, var(--space-32));
}

.story-section__body {
  font-family: var(--font-story-serif);
  font-size: var(--story-section-body-size);
  font-weight: var(--weight-regular);
  line-height: var(--story-section-body-lh);
  color: var(--color-text-primary);
  max-width: var(--story-section-body-max-w);
  min-height: var(--story-section-body-block-h);
}

.story-section__body p {
  margin: 0;
}

/* His section text padding: center the copy within the left text column. */
.story-his .story-section__content {
  padding-left: var(--story-section-text-pl);
  padding-right: var(--story-section-text-pl);
  padding-bottom: clamp(var(--space-24), 4vw, var(--space-64));
}


/* ── Closing section ── */

.story-closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-block: clamp(var(--space-64), 9.4vw, 121px);
  background-color: var(--color-bg-dark);
  text-align: center;
  overflow: hidden;
}

.story-closing__flourish {
  display: flex;
  justify-content: center;
  margin-bottom: var(--story-closing-flourish-gap);
}

.story-closing__flourish img {
  width: clamp(160px, 18vw, 230px);
  height: auto;
}

.story-closing__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--story-closing-label-stack-gap);
  margin-top: var(--story-closing-copy-gap);
  padding-inline: var(--nav-gutter-inline);
}

.story-closing__copy .story-closing__script {
  margin-top: calc(var(--story-closing-script-gap) - var(--story-closing-label-stack-gap));
}

.story-closing__label {
  font-family: var(--font-body-lora);
  font-size: var(--story-closing-label-size);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--story-closing-label-track);
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin: 0;
}

.story-closing__script {
  font-family: var(--font-display-script);
  font-size: var(--story-closing-script-size);
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  line-height: var(--story-closing-script-lh);
  margin: 0;
}

.story-closing__figure {
  width: calc(100% - var(--story-collage-gutter) * 2);
  max-width: 979px;
  margin: 0 auto;
}

.story-closing__figure picture {
  display: block;
  width: 100%;
}

.story-closing__figure img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

@media (min-width: 768px) and (max-width: 1283px) {
  .page-our-story {
    --story-collage-h-desktop: clamp(780px, 91.9vw, 1180px);
    --story-collage-img02-top: clamp(412px, 53.6vw, 688px);
    --story-collage-text-top: clamp(493px, 64.25vw, 825px);
  }
}


/* ── Mobile (≤ 767px) ── */

@media (max-width: 767px) {

  .page-our-story {
    --story-collage-h-mobile: 650px;
  }

  /* Hero: mobile sizes from Figma (96px title, 13px eyebrow, 12px meta) */
  .story-hero__title {
    font-size: clamp(58px, 22vw, 96px);
  }

  .story-hero__eyebrow {
    font-size: 13px;
    letter-spacing: 1.95px;
  }

  .story-hero__meta {
    font-size: 12px;
    letter-spacing: 1.44px;
  }

  /* Collage: mobile layout from Figma mobile frame (390px wide, 559px tall) */
  .story-collage__inner {
    height: var(--story-collage-h-mobile);
  }

  .story-collage__img--01 {
    left: 0;
    width: 100%;
    height: auto;
    transform: none !important;
    will-change: auto;
  }

  /* monochrome-02 mobile: left=172/390=44.1%, top=200px, w=196/390=50.3%, h=239px */
  .story-collage__img--02 {
    top: 200px;
    left: 44.1%;
    width: 50.3%;
    height: auto;
    max-width: none;
    transform: none !important;
    will-change: auto;
  }

  /* text slot mobile: below the second image with breathing room before Her Path */
  .story-collage__img--03 {
    top: 485px;
    bottom: auto;
    left: 24px;
    width: calc(100% - 48px);
    height: auto;
    max-width: none;
    justify-content: center;
    text-align: center;
  }

  .story-collage__text {
    text-align: center;
  }

  /* Sticky sections: single column, image sticks at top, text overlay scrolls over it */
  .story-section__inner {
    display: block;
    grid-template-areas: none;
    min-height: auto;
  }

  .story-his .story-section__inner {
    grid-template-areas: none;
  }

  .story-section__media {
    position: sticky;
    top: var(--nav-height);
    height: calc(100dvh - var(--nav-height));
    z-index: 1;
  }

  .story-section__figure,
  .story-section__figure picture {
    height: 100%;
  }

  .story-section__figure img {
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center 20%;
  }

  .story-section__text {
    position: relative;
    z-index: 2;
    background-color: transparent;
    margin-top: calc((100dvh - var(--nav-height)) * -0.40);
    min-height: calc((100dvh - var(--nav-height)) * 0.8);
  }

  .story-section__content {
    padding-top: var(--space-32);
    padding-left: var(--space-24);
    padding-right: var(--space-16);
    padding-bottom: var(--space-24);
    background-color: var(--color-bg-dark-overlay);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .story-section__runway {
    display: none;
  }

  .story-his .story-section__content {
    padding-left: var(--space-24);
    padding-right: var(--space-16);
    padding-bottom: var(--space-24);
  }

  .story-section__sub {
    font-size: 15px;
    letter-spacing: 3.6px;
  }

  /* Closing: full-width image on mobile */
  .story-closing__figure {
    width: 100%;
    max-width: none;
  }

  .story-closing__label {
    font-size: 13px;
    letter-spacing: 1.95px;
  }

  .story-closing__copy br {
    display: none;
  }

  .story-closing__copy .story-closing__script {
    margin-top: calc(var(--space-16) - var(--story-closing-label-stack-gap));
  }

  .story-closing__script {
    font-size: clamp(64px, 24vw, 96px);
    line-height: 0.73;
  }
}


/* ── Reduced motion ── */

@media (prefers-reduced-motion: reduce) {
  .story-collage__img {
    will-change: auto;
    transform: none !important;
  }

  .story-section__figure img {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .story-collage__img--03 {
    transition: none;
  }
}