/* ==========================================================================
   AN ✦ NC — Wedding Website
   style.css
   Ink-emerald & antique gold, editorial luxury. Mobile-first.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Colour */
  --ink-emerald: #081C02;
  --ink-emerald-light: #17332A;
  --ink-emerald-lighter: #1F3D33;
  --ivory-silk: #F6F0E4;
  --ivory-shade: #EFE6D3;
  --ivory-line: rgba(20, 19, 16, 0.1);
  --antique-gold: #B8935A;
  --gold-bright: #D9B67E;
  --gold-dim: rgba(184, 147, 90, 0.35);
  --oxblood: #5E1B20;
  --oxblood-bright: #7A2A2F;
  --deep-ink: #141310;
  --champagne-mute: #C9BBA0;
  --champagne-line: rgba(201, 187, 160, 0.22);
  --white: #FFFFFF;

  /* Typography */
  --font-display: 'Playfair Display', 'Times New Roman', serif;
  --font-editorial: 'Newsreader', Georgia, serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --size-display-xl: clamp(2.75rem, 12vw, 6rem);
  --size-display-l: clamp(2rem, 7vw, 3.5rem);
  --size-display-m: clamp(1.5rem, 4vw, 2.25rem);
  --size-body-l: clamp(1.05rem, 2.5vw, 1.25rem);
  --size-body-m: 1rem;
  --size-caption: 0.75rem;

  --tracking-eyebrow: 0.16em;
  --tracking-display: 0.01em;

  /* Spacing */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3.5rem;
  --space-xl: 5.5rem;
  --space-2xl: 8rem;
  --space-3xl: 11rem;

  --section-padding-y: clamp(3.5rem, 9vw, 6.5rem);
  --section-padding-x: clamp(1.5rem, 6vw, 4rem);
  --content-max: 1160px;
  --content-narrow: 720px;

  /* Shape */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-pill: 999px;

  /* Shadow — soft only, never heavy */
  --shadow-soft: 0 20px 50px rgba(15, 36, 28, 0.08);
  --shadow-lift: 0 12px 30px rgba(15, 36, 28, 0.12);
  --shadow-gold-glow: 0 0 0 1px var(--gold-dim), 0 8px 24px rgba(184, 147, 90, 0.18);

  /* Motion */
  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 240ms;
  --duration-base: 480ms;
  --duration-slow: 900ms;
  --duration-cinematic: 1800ms;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink-emerald);
  color: var(--deep-ink);
  font-family: var(--font-ui);
  font-size: var(--size-body-m);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.no-scroll {
  overflow: hidden;
  height: 100vh;
}

/* Any element using the native [hidden] attribute must actually hide,
   even when a component class elsewhere sets its own display value. */
[hidden] {
  display: none !important;
}

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

h1, h2, h3, p, ol, ul, fieldset {
  margin: 0;
  padding: 0;
}

fieldset {
  border: none;
}

ol {
  list-style: none;
}

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

button {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

input,
textarea {
  font-family: inherit;
  font-size: var(--size-body-m);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--ivory-silk);
}

::-webkit-scrollbar-thumb {
  background: var(--champagne-mute);
  border-radius: var(--radius-pill);
  border: 2px solid var(--ivory-silk);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--antique-gold);
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--champagne-mute) var(--ivory-silk);
}

/* Focus visibility — always kept, never removed */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 1.5px solid var(--antique-gold);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. TYPE UTILITIES
   -------------------------------------------------------------------------- */
.section-eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--size-caption);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--antique-gold);
  text-align: center;
  margin-bottom: var(--space-xs);
}

.section-eyebrow--light {
  color: var(--gold-bright);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--size-display-l);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  color: var(--deep-ink);
  text-align: center;
  margin-bottom: var(--space-lg);
}

.section-title--light {
  color: var(--ivory-silk);
}

.diamond {
  display: inline-block;
  margin: 0 0.35em;
  color: var(--antique-gold);
  font-size: 0.75em;
  transform: translateY(-0.05em);
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.95rem 2.2rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-soft),
              color var(--duration-base) var(--ease-soft),
              border-color var(--duration-base) var(--ease-soft),
              transform var(--duration-fast) var(--ease-soft),
              box-shadow var(--duration-base) var(--ease-soft);
}

.btn--gold {
  background: var(--antique-gold);
  color: var(--ivory-silk);
  border-color: var(--antique-gold);
}

.btn--gold:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  box-shadow: var(--shadow-gold-glow);
  transform: translateY(-1px);
}

.btn--outline-gold {
  background: transparent;
  color: var(--antique-gold);
  border-color: var(--antique-gold);
}

.btn--outline-gold:hover {
  background: var(--antique-gold);
  color: var(--ivory-silk);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   8. FLOATING MUSIC PLAYER & WHATSAPP SHARE
   -------------------------------------------------------------------------- */
.music-player {
  position: fixed;
  left: var(--space-sm);
  bottom: var(--space-sm);
  z-index: 90;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(246, 240, 228, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--gold-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lift);
  transition: transform var(--duration-fast) var(--ease-soft), box-shadow var(--duration-base) var(--ease-soft);
}

.music-player:hover {
  transform: scale(1.06);
  box-shadow: var(--shadow-gold-glow);
}

.music-player__icon {
  width: 18px;
  height: 18px;
  fill: var(--deep-ink);
}

.music-player__icon--pause {
  display: none;
}

.music-player[aria-pressed="true"] .music-player__icon--play {
  display: none;
}

.music-player[aria-pressed="true"] .music-player__icon--pause {
  display: block;
}

.music-player[aria-pressed="true"] {
  animation: pulse-ring 2.4s ease-in-out infinite;
}

@keyframes pulse-ring {
  0%, 100% { box-shadow: var(--shadow-lift); }
  50% { box-shadow: 0 0 0 8px rgba(184, 147, 90, 0.12), var(--shadow-lift); }
}

.whatsapp-share {
  position: fixed;
  right: var(--space-sm);
  bottom: var(--space-sm);
  z-index: 90;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ink-emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lift);
  transition: transform var(--duration-fast) var(--ease-soft), box-shadow var(--duration-base) var(--ease-soft);
}

.whatsapp-share:hover {
  transform: scale(1.06);
  box-shadow: var(--shadow-gold-glow);
}

.whatsapp-share svg {
  width: 20px;
  height: 20px;
  fill: var(--gold-bright);
}

/* Back-to-top — injected by script.js, styled here */
.back-to-top {
  position: fixed;
  right: var(--space-sm);
  bottom: calc(var(--space-sm) + 64px);
  z-index: 89;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(246, 240, 228, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--gold-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--deep-ink);
  font-size: 1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  box-shadow: var(--shadow-lift);
  transition: opacity var(--duration-base) var(--ease-soft),
              transform var(--duration-base) var(--ease-soft),
              visibility var(--duration-base) var(--ease-soft);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-2px);
}

.countdown__calendar-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
}

.calendar-alt-link {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--champagne-mute);
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.8;
  transition: opacity var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft);
}

.calendar-alt-link:hover {
  opacity: 1;
  color: var(--gold-bright);
}

/* --------------------------------------------------------------------------
   13b. WHATSAPP SHARE TOOLTIP
   -------------------------------------------------------------------------- */
.share-tooltip {
  position: fixed;
  right: var(--space-sm);
  bottom: calc(var(--space-sm) + 64px);
  z-index: 91;
  max-width: 168px;
  padding: 0.55rem 0.85rem;
  background: var(--ink-emerald);
  color: var(--ivory-silk);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  line-height: 1.4;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--duration-base) var(--ease-soft),
              transform var(--duration-base) var(--ease-soft),
              visibility var(--duration-base) var(--ease-soft);
  cursor: pointer;
}

.share-tooltip::after {
  content: '';
  position: absolute;
  right: 18px;
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: var(--ink-emerald);
  transform: rotate(45deg);
}

.share-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


/* --------------------------------------------------------------------------
   9. SCROLL REVEAL UTILITY
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(4px);
  transition: opacity var(--duration-slow) var(--ease-luxury),
              transform var(--duration-slow) var(--ease-luxury),
              filter var(--duration-slow) var(--ease-luxury);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* --------------------------------------------------------------------------
   9b. SECTION JUMP DOTS — quiet one-click wayfinding, not a nav bar
   -------------------------------------------------------------------------- */
.section-dots {
  position: fixed;
  right: clamp(8px, 2.4vw, 22px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  mix-blend-mode: difference;
}

.section-dots__btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.section-dots__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.5;
  transition: opacity var(--duration-base) var(--ease-soft),
              transform var(--duration-base) var(--ease-soft);
}

.section-dots__btn:hover .section-dots__dot,
.section-dots__btn:focus-visible .section-dots__dot {
  opacity: 0.9;
  transform: scale(1.3);
}

.section-dots__btn.is-active .section-dots__dot {
  opacity: 1;
  transform: scale(1.6);
}

.section-dots__btn:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 2px;
  border-radius: 50%;
}

/* Label appears on hover/focus only — kept out of the flow entirely so it
   never reads as a persistent menu. */
.section-dots__btn::after {
  content: attr(data-label);
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  margin-right: 4px;
  padding: 4px 9px;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: #fff;
  color: #000;
  border-radius: var(--radius-sm);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-fast) var(--ease-soft), visibility var(--duration-fast) var(--ease-soft);
  pointer-events: none;
}

.section-dots__btn:hover::after,
.section-dots__btn:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 640px) {
  .section-dots {
    gap: 4px;
  }
  .section-dots__btn {
    width: 22px;
    height: 22px;
  }
}


/* ==========================================================================
   AN ✦ NC — OPENING SCREEN
   Wax press -> simple fade -> hero. No split, no sheets, no extra transition.
   ========================================================================== */

.opening-gate {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #081c02;
  opacity: 1;
  visibility: visible;
  transition: opacity 850ms cubic-bezier(.22, 1, .36, 1), visibility 850ms linear;
}

.opening-gate__texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("assets/images/opening-paper-texture.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #081c02;
}

.opening-gate__center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  transform: translateY(-1vh);
  transition: opacity 350ms ease, transform 450ms cubic-bezier(.22,1,.36,1);
}

.opening-wax-seal {
  position: relative;
  z-index: 3;
  width: clamp(180px, 28vw, 230px);
  aspect-ratio: 1168 / 1024;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 180ms ease, filter 180ms ease;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.4));
}

.opening-wax-seal__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* Accessibility label: keep the duplicate AN ✦ NC text visually absent. */
.opening-wax-seal .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.opening-wax-seal:hover { transform: scale(1.035); }

.opening-wax-seal.is-pressed {
  transform: scale(.90) translateY(1px);
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.48)) brightness(.96);
}

.opening-instruction {
  margin: 26px 0 0;
  color: #d6b25f;
  font-family: "Allura", cursive;
  font-size: clamp(1.6rem, 6vw, 2.15rem);
  line-height: 1;
  letter-spacing: .02em;
  text-shadow: 0 1px 0 rgba(255,255,255,.12), 0 2px 6px rgba(0,0,0,.45);
  animation: opening-breathe 3s ease-in-out infinite;
}

@keyframes opening-breathe {
  0%, 100% { opacity: .68; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

.opening-gate.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.opening-gate.is-hidden .opening-gate__center {
  opacity: 0;
  transform: translateY(-1vh) scale(.985);
}

@media (prefers-reduced-motion: reduce) {
  .opening-instruction { animation: none; }
  .opening-gate, .opening-gate__center { transition: none; }
}

/* --------------------------------------------------------------------------
   10. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--ink-emerald);
  opacity: 1;
}

.hero__media {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,36,28,0.15) 0%, rgba(15,36,28,0.55) 65%, var(--ink-emerald) 100%),
              radial-gradient(ellipse at 50% 30%, var(--ink-emerald-lighter), var(--ink-emerald) 75%);
  background-size: cover;
  background-position: center;
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  width: min(100%, 760px);
  padding: 0 var(--space-md) clamp(4.5rem, 10vh, 7rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.hero__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--size-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold-bright);
}

.hero__names {
  font-family: var(--font-display);
  font-size: var(--size-display-xl);
  font-weight: 500;
  color: var(--ivory-silk);
  line-height: 1.05;
}

.hero__ornament {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.hero__ornament span {
  width: 44px;
  height: 1px;
  background: var(--gold-dim);
}

.hero__ornament svg {
  fill: var(--antique-gold);
}

.hero__date {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--size-body-l);
  color: var(--champagne-mute);
}

.hero__time {
  font-family: var(--font-ui);
  font-size: var(--size-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--champagne-mute);
  opacity: 0.9;
  margin-top: var(--space-2xs);
}

.hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--space-md);
  transform: translateX(-50%);
  z-index: 2;
  width: 24px;
  height: 40px;
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-pill);
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.hero__scroll-cue span {
  width: 3px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--antique-gold);
  animation: scroll-cue-bounce 1.8s ease-in-out infinite;
}

@keyframes scroll-cue-bounce {
  0% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(10px); opacity: 0.2; }
  100% { transform: translateY(0); opacity: 0; }
}

/* --------------------------------------------------------------------------
   11. SECTION BASE — dark/ivory rhythm
   -------------------------------------------------------------------------- */
section {
  padding: var(--section-padding-y) var(--section-padding-x);
  position: static;
}

.countdown,
.wishlist,
.site-footer {
  background: var(--ink-emerald);
  color: var(--ivory-silk);
}

.details,
.welcome,
.what-awaits,
.gallery,
.venue,
.rsvp,
.memory {
  background: var(--ivory-silk);
}

/* Cinematic colour blends at the handful of spots where the page moves
   between the dark emerald ground and the ivory ground, so sections read
   as one continuous scene rather than stacked blocks. Purely decorative
   ::before overlays, non-interactive, sized to fade out within the first
   part of the section. */
.welcome::before,
.wishlist::before,
.rsvp::before,
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(50px, 8vw, 90px);
  pointer-events: none;
}

.welcome::before {
  background: linear-gradient(180deg, var(--ink-emerald) 0%, rgba(8, 28, 2, 0.45) 60%, rgba(8, 28, 2, 0) 100%);
}

.wishlist::before {
  background: linear-gradient(180deg, var(--ink-emerald) 0%, rgba(8, 28, 2, 0.45) 60%, rgba(8, 28, 2, 0) 100%);
}

.rsvp::before {
  background: linear-gradient(180deg, var(--ink-emerald) 0%, rgba(8, 28, 2, 0.45) 60%, rgba(8, 28, 2, 0) 100%);
}

.site-footer::before {
  background: linear-gradient(180deg, var(--ink-emerald) 0%, rgba(8, 28, 2, 0.45) 60%, rgba(8, 28, 2, 0) 100%);
}

/* --------------------------------------------------------------------------
   12. COUNTDOWN
   -------------------------------------------------------------------------- */
.countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
}

.countdown__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--size-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold-bright);
}

.countdown__label {
  font-family: var(--font-display);
  font-size: var(--size-display-m);
  color: var(--ivory-silk);
}

.countdown__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2xs);
  width: 100%;
  max-width: 480px;
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-2xs);
  border: 1px solid var(--champagne-line);
  border-radius: var(--radius-sm);
  background: rgba(246, 240, 228, 0.03);
}

.countdown__value {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6vw, 2.5rem);
  color: var(--ivory-silk);
  font-variant-numeric: tabular-nums;
}

.countdown__unit-label {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--champagne-mute);
}

/* --------------------------------------------------------------------------
   13. WELCOME — a short, warm note right after the countdown
   -------------------------------------------------------------------------- */
.welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* A note, not a destination: noticeably shorter than a full section so
   busy readers pass through it in one glance rather than one more scroll. */
.welcome--compact {
  padding-top: clamp(4.5rem, 11vw, 6rem);
  padding-bottom: clamp(2.5rem, 6vw, 3.5rem);
}

.welcome__text {
  max-width: var(--content-narrow);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.welcome__text p {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--size-body-l);
  color: var(--deep-ink);
  opacity: 0.85;
  line-height: 1.85;
}

/* --------------------------------------------------------------------------
   14. OUR DATE + WEDDING DETAILS
   -------------------------------------------------------------------------- */
.details__intro {
  max-width: var(--content-narrow);
  margin: 0 auto var(--space-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.details__intro p {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--size-body-l);
  color: var(--deep-ink);
  opacity: 0.85;
  line-height: 1.8;
}

.details__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  max-width: var(--content-max);
  margin: 0 auto;
}

.details__grid .detail-card {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  border: 1px solid var(--ivory-line);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-base) var(--ease-soft), transform var(--duration-base) var(--ease-soft);
  white-space: pre-line;
}

.details__grid .detail-card:hover {
  border-color: var(--gold-dim);
  transform: translateY(-3px);
}

.details__grid .detail-card__icon {
  width: 28px;
  height: 28px;
  margin: 0 auto var(--space-sm);
  color: var(--antique-gold);
}

.details__grid .detail-card__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin-bottom: var(--space-2xs);
}

.details__grid .detail-card__text {
  font-family: var(--font-editorial);
  color: var(--deep-ink);
  opacity: 0.8;
  white-space: pre-line;
}

/* --------------------------------------------------------------------------
   16. WHAT AWAITS YOU — To the Moments 🥂
   -------------------------------------------------------------------------- */
.what-awaits {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.what-awaits__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  max-width: var(--content-narrow);
  margin: 0 auto;
}

.what-awaits__grid .awaits-card {
  padding: 0;
  border: 0;
  text-align: center;
}

.awaits-card__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--size-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--antique-gold);
  display: block;
  margin-bottom: var(--space-2xs);
}

.awaits-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: var(--space-sm);
}

.awaits-card__text {
  font-family: var(--font-editorial);
  color: var(--deep-ink);
  opacity: 0.85;
  line-height: 1.75;
}


/* --------------------------------------------------------------------------
   STORY CINEMATIC — the supplied opening sketch, waves and shutter moment
   -------------------------------------------------------------------------- */
.story-cinematic {
  width: min(100%, 900px);
  margin: 0 auto var(--space-xl);
  overflow: visible;
}

/*
   The sketch should read as ink drawn directly onto the page —
   not as a rectangular photograph/card placed on top of it.
*/
.story-cinematic__frame {
  position: relative;
  width: 100%;
  overflow: visible;
  background: transparent;
}

/* Remove the old paper/card texture behind the sketch. */
.story-cinematic__frame::before {
  display: none;
}

#storyOpeningImage {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0;
  transform: scale(1.015);
  clip-path: inset(0 100% 0 0);

  /*
     Multiply lets the pale paper in the source disappear visually
     into the site's ivory background, leaving the pencil/ink marks.
  */
  mix-blend-mode: multiply;

  /* Keep the drawing crisp while slightly reducing the source-paper cast. */
  filter: contrast(1.04) saturate(.72);

  /*
     Softly feather ALL four edges so there is no rectangular boundary.
     The centre remains fully visible; only the outer perimeter dissolves.
  */
  -webkit-mask-image: radial-gradient(ellipse 88% 86% at 50% 50%,
    #000 67%,
    rgba(0,0,0,.96) 76%,
    rgba(0,0,0,.72) 85%,
    rgba(0,0,0,.25) 93%,
    transparent 100%);
  mask-image: radial-gradient(ellipse 88% 86% at 50% 50%,
    #000 67%,
    rgba(0,0,0,.96) 76%,
    rgba(0,0,0,.72) 85%,
    rgba(0,0,0,.25) 93%,
    transparent 100%);

  transition:
    opacity 900ms ease,
    transform 2200ms cubic-bezier(.22,1,.36,1),
    clip-path 2400ms cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform, clip-path;
}

.story-cinematic.is-active #storyOpeningImage {
  opacity: 1;
  transform: scale(1);
  clip-path: inset(0 0 0 0);
}
.story-cinematic__flash {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.story-cinematic__flash.is-flashing {
  opacity: 1;
  transition: opacity 80ms ease-out;
}
.story-cinematic__flash.is-fading {
  opacity: 0;
  transition: opacity 220ms ease-in;
}
.gallery__intro {
  max-width: var(--content-narrow);
  margin-inline: auto;
}
.our-story__lead {
  font-weight: 700;
  font-style: italic;
}
.our-story__nicknames,
.our-story__closing,
.our-story__final {
  font-weight: 700;
  font-style: italic;
}
.our-story__final {
  margin-top: var(--space-sm);
  color: var(--deep-ink);
}

/* --------------------------------------------------------------------------
   17. GALLERY — masonry
   -------------------------------------------------------------------------- */
.gallery__intro {
  max-width: var(--content-max);
  margin: 0 auto var(--space-lg);
  text-align: center;
}

.our-story__title {
  font-family: var(--font-display);
  font-size: var(--size-display-s, 1.6rem);
  color: var(--deep-ink);
  margin-bottom: var(--space-xs);
}

.our-story__subtitle {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 600;
  font-size: var(--size-body-l);
  color: var(--deep-ink);
  opacity: 0.9;
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.our-story__paragraph {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--size-body-m);
  color: var(--deep-ink);
  opacity: 0.85;
  line-height: 1.8;
  margin-bottom: var(--space-sm);
}

.our-story__nicknames {
  font-family: var(--font-editorial);
  font-weight: 600;
  font-style: normal;
  font-size: var(--size-body-l);
  color: var(--antique-gold);
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.our-story__closing {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--size-body-m);
  color: var(--deep-ink);
  opacity: 0.75;
  line-height: 1.8;
}

.gallery__grid {
  columns: 2;
  column-gap: var(--space-sm);
  max-width: var(--content-max);
  margin: 0 auto;
}

.gallery__grid .gallery-item {
  break-inside: avoid;
  margin-bottom: var(--space-sm);
  overflow: hidden;
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
  background: var(--ivory-shade);
}

.gallery__grid .gallery-item img {
  width: 100%;
  display: block;
  transition: transform var(--duration-slow) var(--ease-luxury);
}

.gallery__grid .gallery-item:hover img {
  transform: scale(1.04);
}

.gallery__grid .gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(15,36,28,0.35));
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-soft);
}

.gallery__grid .gallery-item:hover::after {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   18. LIGHTBOX
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 36, 28, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-soft), visibility var(--duration-base) var(--ease-soft);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox__image {
  max-width: min(90vw, 900px);
  max-height: 80vh;
  object-fit: contain;
  border: 1px solid var(--gold-dim);
  box-shadow: var(--shadow-soft);
}

.lightbox__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  font-size: 2rem;
  line-height: 1;
  color: var(--ivory-silk);
  transition: color var(--duration-fast) var(--ease-soft);
}

.lightbox__close:hover {
  color: var(--antique-gold);
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--ivory-silk);
  padding: var(--space-sm);
  transition: color var(--duration-fast) var(--ease-soft);
}

.lightbox__nav:hover {
  color: var(--antique-gold);
}

.lightbox__nav--prev {
  left: var(--space-2xs);
}

.lightbox__nav--next {
  right: var(--space-2xs);
}

/* --------------------------------------------------------------------------
   19. VENUE — Meet Us Here
   -------------------------------------------------------------------------- */
.venue {
  text-align: center;
}

.venue__place-name {
  font-family: var(--font-display);
  font-size: var(--size-display-m);
  color: var(--deep-ink);
  margin-bottom: var(--space-2xs);
}

.venue__address {
  font-family: var(--font-editorial);
  font-size: var(--size-body-l);
  color: var(--deep-ink);
  opacity: 0.8;
  max-width: var(--content-narrow);
  margin: 0 auto var(--space-md);
}

.venue__map {
  max-width: var(--content-max);
  margin: 0 auto var(--space-md);
  aspect-ratio: 16 / 10;
  border: 1px solid var(--ivory-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.venue__map iframe {
  width: 100%;
  height: 100%;
  border: none;
  filter: grayscale(35%) contrast(1.05);
}

.venue__notes {
  max-width: var(--content-narrow);
  margin: var(--space-lg) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: left;
}

.venue__notes .venue-note__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin-bottom: var(--space-3xs);
}

.venue__notes .venue-note__text {
  font-family: var(--font-editorial);
  color: var(--deep-ink);
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   20. WISHLIST
   -------------------------------------------------------------------------- */
.wishlist {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.wishlist__note {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--size-body-l);
  max-width: var(--content-narrow);
  color: var(--ivory-silk);
  opacity: 0.88;
  line-height: 1.8;
}

/* --------------------------------------------------------------------------
   21. RSVP, SHARE A MEMORY — forms
   -------------------------------------------------------------------------- */
.rsvp__form,
.memory__form {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.memory__intro {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--size-body-l);
  max-width: var(--content-narrow);
  margin: 0 auto var(--space-lg);
  text-align: center;
  color: var(--deep-ink);
  opacity: 0.85;
  line-height: 1.8;
}

.memory__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.form-field label,
.form-field legend {
  font-family: var(--font-ui);
  font-size: var(--size-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--antique-gold);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="number"],
.form-field textarea {
  border: none;
  border-bottom: 1px solid var(--ivory-line);
  background: transparent;
  padding: 0.75rem 0.25rem;
  color: var(--deep-ink);
  transition: border-color var(--duration-base) var(--ease-soft);
  resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {
  border-bottom-color: var(--antique-gold);
  outline: none;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-editorial);
  font-size: var(--size-body-l);
  text-transform: none;
  letter-spacing: 0;
  color: var(--deep-ink);
  margin-top: var(--space-2xs);
}

.radio-option input {
  accent-color: var(--antique-gold);
}

#rsvpEventsFieldset {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.rsvp__status,
.memory__status {
  font-family: var(--font-editorial);
  font-style: italic;
  color: var(--antique-gold);
  min-height: 1.2em;
}

/* --------------------------------------------------------------------------
   22. FOOTER — closing note + seal
   -------------------------------------------------------------------------- */
.site-footer {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-xl);
}

.site-footer__closing {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-bottom: var(--space-md);
}

.site-footer__closing p {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--size-body-l);
  color: var(--champagne-mute);
  line-height: 1.7;
}

.site-footer__see-you {
  margin-top: var(--space-2xs);
  font-size: var(--size-display-m) !important;
  font-style: normal !important;
  color: var(--gold-bright) !important;
}

.site-footer__names {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--ivory-silk);
}

.site-footer__fine-print {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--champagne-mute);
  opacity: 0.6;
  margin-top: var(--space-md);
}

.site-footer__quote {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 0.75rem;
  color: var(--champagne-mute);
  opacity: 0.55;
  max-width: 320px;
  margin-top: var(--space-2xs);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   24. TABLET (≥768px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .details__grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .gallery__grid {
    columns: 3;
  }

  .venue__notes {
    flex-direction: row;
  }
}

/* --------------------------------------------------------------------------
   25. DESKTOP (≥1024px)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .countdown__grid {
    max-width: 620px;
  }

  .gallery__grid {
    columns: 4;
  }

  .rsvp__form,
  .memory__form {
    max-width: 640px;
  }
}

/* --------------------------------------------------------------------------
   26. LARGE DESKTOP (≥1440px)
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  :root {
    --content-max: 1280px;
  }

  .hero__names {
    font-size: 7rem;
  }
}

/* --------------------------------------------------------------------------
   27. ACCESSIBILITY — reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    filter: none;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   27b. STAGGERED REVEAL — grid cards cascade in rather than popping together
   -------------------------------------------------------------------------- */
.details__grid .detail-card:nth-child(1) { transition-delay: 0ms; }
.details__grid .detail-card:nth-child(2) { transition-delay: 110ms; }
.details__grid .detail-card:nth-child(3) { transition-delay: 220ms; }

.what-awaits__grid .awaits-card:nth-child(1) { transition-delay: 0ms; }
.what-awaits__grid .awaits-card:nth-child(2) { transition-delay: 130ms; }

.gallery__grid .gallery-item:nth-child(1) { transition-delay: 0ms; }
.gallery__grid .gallery-item:nth-child(2) { transition-delay: 70ms; }
.gallery__grid .gallery-item:nth-child(3) { transition-delay: 140ms; }
.gallery__grid .gallery-item:nth-child(4) { transition-delay: 210ms; }
.gallery__grid .gallery-item:nth-child(5) { transition-delay: 280ms; }
.gallery__grid .gallery-item:nth-child(n+6) { transition-delay: 340ms; }

@media (prefers-reduced-motion: reduce) {
  .details__grid .detail-card,
  .what-awaits__grid .awaits-card,
  .gallery__grid .gallery-item {
    transition-delay: 0ms !important;
  }
}

/* --------------------------------------------------------------------------
   28. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .music-player,
  .whatsapp-share,
  .back-to-top,
  .lightbox {
    display: none !important;
  }
}


/* ==========================================================================
   AN ✦ NC — ADDITIONAL FIXES
   ========================================================================== */
.hero { align-items: center; justify-content: center; }
.hero__content { width: min(100%, 760px); margin-inline: auto; text-align: center; align-items: center; }
.story-cinematic { width: min(100%, 980px); margin-inline: auto; }
#storyOpeningImage { width: 100%; height: auto; object-fit: contain; }
.awaits-card__text { white-space: pre-line; }
@media (max-width: 640px) {
  .envelope-stage { width: min(90vw, 410px); }
  .envelope-instruction { top: calc(100% + 22px); font-size: clamp(1.45rem, 6vw, 1.8rem); }
  .hero__content { padding-inline: 1.25rem; padding-bottom: 5rem; }
}


/* ==========================================================================
   MOBILE EBOOK / PAGEWISE SCROLL
   Major sections occupy a screen; normal long scrolling remains possible.
   ========================================================================== */
@media (max-width: 767px) {
  html {
    scroll-snap-type: y proximity;
    scroll-padding-top: 0;
  }

  body {
    scroll-snap-type: y proximity;
  }

  main > section,
  .site-footer {
    min-height: 100svh;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    position: relative;
  }

  /* Keep genuinely content-heavy pages flowing naturally beyond one screen.
     They still snap into place when the section is entered. */
  #gallery,
  #rsvp,
  #memory,
  .site-footer {
    min-height: 100svh;
    height: auto;
  }

  /* Centre short, page-like sections within the viewport. */
  #countdown,
  #welcome,
  #details,
  #what-awaits,
  #venue,
  #wishlist {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Preserve the existing compact welcome feel while giving it a page. */
  #welcome.welcome--compact {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
  }

  /* Prevent accidental horizontal overflow on small screens. */
  main,
  main > section,
  .site-footer {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  /* A page cue that feels like an ebook rather than a hard slideshow. */
  .hero__scroll-cue {
    bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}


/* FINAL 8-PHOTO GALLERY */
.gallery-grid img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

@media (max-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }
}
/* ==========================================================================
   7. STORY — REMOVE THE RECTANGULAR IMAGE/CARD FEEL
   ========================================================================== */

.story-cinematic {
  /*
    Keep the exact existing width and position.
    Only remove the "image card" feeling.
  */
  overflow: visible;
}


.story-cinematic__frame {
  background: transparent;
  overflow: hidden;
}


/*
  Remove the cream rectangle that currently sits behind the image.
*/

.story-cinematic__frame::before {
  display: none;
}


/*
  The image remains exactly the same asset:
      assets/images/Intro.png

  We are changing only how its pale paper background interacts
  with the existing ivory page.
*/

#storyOpeningImage {
  background: transparent;

  /*
    Pencil/ink marks remain strong while the pale image paper
    visually merges with the surrounding page.
  */
  mix-blend-mode: multiply;

  /*
    Keep the existing cinematic reveal.
  */
  transform-origin: center center;
}


/*
  Once visible, remove the rectangular feeling around the edges.
*/

.story-cinematic.is-active #storyOpeningImage {
  mix-blend-mode: multiply;
}


/* ==========================================================================
   8. STORY IMAGE EDGE SOFTENING
   --------------------------------------------------------------------------
   This does NOT crop the actual drawing.
   It simply prevents the four image edges from reading like a card.
   ========================================================================== */

.story-cinematic__frame {
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 5%,
      #000 95%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 5%,
      #000 95%,
      transparent 100%
    );
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .story-cinematic__frame {
    -webkit-mask-image: none;
    mask-image: none;
  }
}
/* ============================================================
   OUR LITTLE STORY — REMOVE THE IMAGE CARD / PAPER BORDER

   The pencil drawing should appear directly on the page.
   No visible rectangular image boundary.
   ============================================================ */

.story-cinematic__frame {
    background: transparent !important;
    overflow: visible !important;

    /*
     * Fade ALL FOUR edges into the page.
     * The centre of the drawing remains fully visible.
     */
    -webkit-mask-image:
        radial-gradient(
            ellipse 78% 78% at center,
            #000 54%,
            rgba(0,0,0,.98) 66%,
            rgba(0,0,0,.72) 78%,
            rgba(0,0,0,.25) 90%,
            transparent 100%
        ) !important;

    mask-image:
        radial-gradient(
            ellipse 78% 78% at center,
            #000 54%,
            rgba(0,0,0,.98) 66%,
            rgba(0,0,0,.72) 78%,
            rgba(0,0,0,.25) 90%,
            transparent 100%
        ) !important;
}


/* Remove the artificial paper/grain layer sitting over it */

.story-cinematic__frame::before {
    display: none !important;
}


/* The actual pencil image */

#storyOpeningImage {
    display: block;

    width: 100%;
    height: auto;

    background: transparent !important;

    /*
     * White/cream pixels blend into the ivory page,
     * while pencil marks remain visible.
     */
    mix-blend-mode: multiply;

    border: none !important;
    box-shadow: none !important;
}


/* Keep the same treatment after the cinematic reveal */

.story-cinematic.is-active #storyOpeningImage {
    mix-blend-mode: multiply;
}