/* ============================================================
   WEDDING INVITATION — COMPLETE STYLESHEET
   ============================================================
   Design System: Olive & Sage Wedding Theme
   Fonts: Tenor Sans, Montserrat, Poppins, Edwardian (script), Brittany
   
   CUSTOMIZE: Search for "CUSTOMIZE" to find all customizable values.
   Color palette variables are at the top for easy theming.
   ============================================================ */

/* ============================================================
   1. CUSTOM FONT FACES (LOCAL, NO CDN)
   ============================================================ */
@font-face {
  font-family: 'Tenor Sans';
  src: url('../assets/fonts/a0b90fb4308ee44f-s.p.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/904be59b21bd51cb-s.p.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/904be59b21bd51cb-s.p.woff2') format('woff2'); /* Fallback for bold */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Great Vibes';
  src: url('../assets/fonts/great-vibes.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/eafabf029ad39a43-s.p.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   2. CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================ */

/* ============================================================
   3. CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================
   CUSTOMIZE: Change these values to re-theme the entire site */
:root {
  /* Primary Colors */
  --color-primary: #37432b;           /* Deep olive — buttons, strong accents */
  --color-primary-light: #51603f;     /* Olive — borders, timeline nodes */
  --color-accent: #a6a591;            /* Sage green — dividers, social icons, subtle accents */
  --color-accent-warm: #716156;       /* Warm brown — couple name color */
  
  /* Background Colors */
  --color-bg-ivory: #F9F6F0;         /* Warm ivory — card backgrounds */
  --color-bg-cream: #fbf4ef;         /* Light cream — photo borders */
  --color-bg-light: #f9f9f8;         /* Off-white — alternate section bg */
  --color-bg-sage: rgba(173, 180, 173, 0.5); /* Sage tint — countdown bg */
  --color-bg-overlay: rgba(240, 238, 233, 0.4); /* Loading screen overlay */
  
  /* Text Colors */
  --color-text-dark: #111827;         /* gray-900 */
  --color-text: #1f2937;              /* gray-800 */
  --color-text-medium: #4b5563;       /* gray-600 */
  --color-text-light: #6b7280;        /* gray-500 */
  
  /* UI Colors */
  --color-border: #ecebe7;
  --color-border-beige: #f5f5dc;
  --color-shadow: rgba(0, 0, 0, 0.1);
  --color-white: #ffffff;
  --color-black: #000000;

  /* Typography */
  --font-script: 'Great Vibes', cursive;
  --font-heading: 'Tenor Sans', 'Georgia', serif;
  --font-body: 'Montserrat', 'Helvetica Neue', sans-serif;
  --font-accent: 'Great Vibes', cursive;
  --font-text: 'Poppins', sans-serif;

  /* Spacing Scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 5rem;
  --space-5xl: 6rem;

  /* Animation Timing */
  --ease-reveal: cubic-bezier(0.5, 0, 0, 1);
  --duration-fast: 300ms;
  --duration-medium: 500ms;
  --duration-slow: 800ms;
  --duration-slower: 1000ms;
  --duration-slowest: 1200ms;

  /* Borders & Radii */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;
}

/* ============================================================
   4. CSS RESET & BASE STYLES
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  overflow-x: hidden;
}

body.no-scroll {
  overflow: hidden;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

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

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

input, select, textarea {
  font-family: var(--font-heading);
  font-size: 1rem;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-ivory);
}
::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-light);
}

/* ============================================================
   5. UTILITY CLASSES
   ============================================================ */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 768px) {
  .container { padding: 0 1.5rem; }
}

.font-heading { font-family: var(--font-heading); }
.font-script { font-family: var(--font-script); }
.font-body { font-family: var(--font-body); }

.text-center { text-align: center; }
.text-justify { text-align: justify; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ============================================================
   6. FLOATING DECORATIONS (Hearts, Sparkles, etc.)
   ============================================================ */
.floating-decorations {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.floating-decorations .deco {
  position: absolute;
  color: rgba(251, 207, 232, 0.3); /* rose-200 at 30% */
}

.deco--pulse { animation: pulse 2s ease-in-out infinite; }
.deco--bounce { animation: bounce 1s ease-in-out infinite; }

.deco--1 { top: 5rem; left: 2.5rem; opacity: 0.3; }
.deco--2 { top: 10rem; right: 5rem; opacity: 0.2; }
.deco--3 { bottom: 10rem; left: 5rem; opacity: 0.25; }
.deco--4 { bottom: 15rem; right: 2.5rem; opacity: 0.3; }

/* ============================================================
   7. MUSIC TOGGLE BUTTON
   ============================================================ */
.music-toggle {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 50;
  padding: 0.75rem;
  border-radius: var(--radius-full);
  background: var(--color-text-dark);
  color: var(--color-white);
  box-shadow: 0 10px 15px -3px var(--color-shadow);
  transition: all var(--duration-fast) ease;
  opacity: 0;
  pointer-events: none;
  transform: translateY(1rem);
}

.music-toggle.visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.music-toggle:hover {
  background: #374151;
}

.music-toggle svg {
  width: 24px;
  height: 24px;
}

/* ============================================================
   8. LOADING SCREEN (Invitation Overlay)
   ============================================================ */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: opacity var(--duration-slower) ease;
}

.loading-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

.loading-screen__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.loading-screen__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.loading-screen__overlay {
  position: absolute;
  inset: 0;
  background: var(--color-bg-overlay);
}

.loading-screen__content {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 350px;
}

/* Flower decorations on loading screen */
.loading-screen__flower {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.15));
  left: 50%;
  opacity: 0;
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  filter: blur(12px);
  transform: translateX(-50%) scale(0.8);
  transition: all 1.2s var(--ease-reveal);
}

.loading-screen__flower--top {
  top: -4rem;
  width: 220px;
}

.loading-screen__flower--bottom {
  bottom: -5rem;
  width: 240px;
}

.loading-screen__flower.revealed {
  opacity: 1;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  filter: blur(0);
  transform: translateX(-50%) scale(1);
}

@media (min-width: 768px) {
  .loading-screen__flower--top { width: 280px; }
  .loading-screen__flower--bottom { width: 300px; bottom: -6.25rem; }
}

@media (min-width: 1024px) {
  .loading-screen__flower--top { top: -3.75rem; width: 200px; }
  .loading-screen__flower--bottom { bottom: -7.5rem; width: 220px; }
}

/* Glassmorphic pill-shaped card */
.loading-screen__card {
  position: relative;
  z-index: 10;
  width: 100%;
  aspect-ratio: 2 / 3.2;
  max-height: 85vh;
  border-radius: var(--radius-full);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.4);
  text-align: center;
  padding: 2rem;
  opacity: 0;
  transform: scale(0.9);
  transition: all var(--duration-slower) var(--ease-reveal);
}

.loading-screen__card.revealed {
  opacity: 1;
  transform: scale(1);
}

.loading-screen__card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 3rem 0;
}

.loading-screen__subtitle {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-text);
  margin-bottom: 0.25rem;
  text-align: center;
  padding: 0 1rem;
  opacity: 0;
  transform: translateY(10px);
  transition: all var(--duration-slow) var(--ease-reveal) 0.6s;
}

.loading-screen__subtitle.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* CUSTOMIZE: Couple names on loading screen */
.loading-screen__names {
  font-family: var(--font-script);
  font-size: 3rem;
  color: var(--color-text-dark);
  line-height: 1.15;
  margin-bottom: 3rem;
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--duration-slow) var(--ease-reveal) 0.9s;
}

.loading-screen__names.revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 768px) {
  .loading-screen__names { font-size: 3.75rem; }
}

.loading-screen__names .ampersand {
  font-size: 1.875rem;
  display: block;
}

@media (min-width: 768px) {
  .loading-screen__names .ampersand { font-size: 2.25rem; }
}

.loading-screen__cta-wrap {
  opacity: 0;
  transform: translateY(10px);
  transition: all var(--duration-slow) var(--ease-reveal) 1.2s;
}

.loading-screen__cta-wrap.revealed {
  opacity: 1;
  transform: translateY(0);
}

.loading-screen__cta {
  font-family: var(--font-heading);
  padding: 0.75rem 2.5rem;
  border: 1px solid var(--color-text-dark);
  color: var(--color-text-dark);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 10px;
  background: transparent;
  transition: all var(--duration-medium) ease;
  position: relative;
  z-index: 30;
}

.loading-screen__cta:hover {
  background: var(--color-text-dark);
  color: var(--color-white);
}

/* ============================================================
   9. MAIN CONTENT WRAPPER
   ============================================================ */
.main-content {
  opacity: 0;
  transition: opacity var(--duration-slower) ease;
}

.main-content.visible {
  opacity: 1;
}

/* ============================================================
   10. NAVIGATION
   ============================================================ */
.nav {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 72rem;
  padding: 0 1rem;
  z-index: 20;
}

.nav__inner {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .nav__inner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}

.nav__links {
  display: none;
  justify-content: center;
  width: 100%;
  gap: 1.5rem;
  font-size: 0.875rem;
  font-family: var(--font-heading);
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .nav__links { display: flex; }
}

.nav__links a {
  transition: color var(--duration-fast) ease;
}

.nav__links a:hover {
  color: var(--color-primary-light);
}

/* Mobile nav toggle */
.nav__mobile-toggle {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  color: var(--color-primary-light);
  margin-top: 0.5rem;
}

@media (min-width: 768px) {
  .nav__mobile-toggle { display: none; }
}

.nav__mobile-toggle button {
  color: inherit;
  padding: 0.25rem;
}

.nav__mobile-menu {
  display: none;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  margin-top: 0.5rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-lg);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  color: var(--color-primary);
  text-align: center;
}

.nav__mobile-menu.open {
  display: flex;
}

.nav__mobile-menu a:hover {
  color: var(--color-primary-light);
}

/* ============================================================
   11. HERO SECTION
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.hero__video-wrap {
  position: absolute;
  inset: 0;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(166, 165, 145, 0.05),
    rgba(240, 224, 178, 0.2),
    rgba(247, 217, 140, 0.2)
  );
}

.hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 64rem;
  padding: 0 1rem;
  margin-top: 6rem;
}

@media (min-width: 768px) {
  .hero__content { margin-top: 0; }
}

/* "We're Getting Married" badge */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(55, 67, 43, 0.3);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  margin-bottom: 2rem;
}

.hero__badge-text {
  font-size: 0.875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-family: var(--font-heading);
  color: var(--color-primary);
  padding: 0 0.5rem;
  text-align: center;
}

.hero__badge svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}

/* CUSTOMIZE: Couple names on hero */
.hero__names {
  font-family: var(--font-script);
  font-size: 4.5rem;
  color: var(--color-primary);
  margin-bottom: 2rem;
  line-height: 1.1;
}

@media (min-width: 768px) {
  .hero__names { font-size: 6rem; }
}

/* CUSTOMIZE: Wedding date */
.hero__date {
  font-size: 1.125rem;
  font-family: var(--font-heading);
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .hero__date { font-size: 1.5rem; }
}

/* "Swipe up for more" */
.hero__scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  cursor: pointer;
  animation: bounce 1s ease-in-out infinite;
}

.hero__scroll-hint-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__scroll-hint p {
  font-size: 0.875rem;
  font-family: var(--font-heading);
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}

@media (min-width: 768px) {
  .hero__scroll-hint p { font-size: 1rem; }
}

.hero__scroll-hint svg {
  width: 32px;
  height: 32px;
  color: var(--color-primary);
}

/* ============================================================
   12. QUOTE / BIBLE VERSE SECTION
   ============================================================ */
.quote-section {
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
  background: var(--color-black);
}

@media (min-width: 768px) {
  .quote-section { height: 100vh; }
}

.quote-section__img-wrap {
  width: 100%;
  height: 100%;
}

.quote-section__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.25) brightness(0.5);
  transition: all 700ms ease;
}

.quote-section__img:hover {
  filter: grayscale(0%) brightness(0.9);
}

.quote-section__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.quote-section__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent, rgba(0, 0, 0, 0.6));
  pointer-events: none;
}

.quote-section__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
  pointer-events: none;
}

.quote-section__text {
  font-family: var(--font-script);
  color: var(--color-white);
  font-size: 2.25rem;
  line-height: 1.2;
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) { .quote-section__text { font-size: 3.75rem; } }
@media (min-width: 1024px) { .quote-section__text { font-size: 4.5rem; } }

.quote-section__attribution {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.quote-section__line {
  width: 2rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}

.quote-section__source {
  font-family: var(--font-heading);
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .quote-section__source { font-size: 0.75rem; }
}

.quote-section__footer {
  position: absolute;
  bottom: 2.5rem;
  left: 2.5rem;
  right: 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.quote-section__label {
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-heading);
  font-size: 9px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
}

/* ============================================================
   13. COUNTDOWN SECTION
   ============================================================ */
.countdown {
  width: 100%;
  padding: 5rem 0;
  background: var(--color-bg-sage);
}

.countdown__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  text-align: center;
}

.countdown__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.countdown__title {
  font-size: 2.25rem;
  font-family: var(--font-heading);
  color: var(--color-text-dark);
}

.countdown__subtitle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--color-text-dark);
}

.countdown__subtitle-wrap svg {
  width: 20px;
  height: 20px;
}

.countdown__subtitle {
  font-size: 1.125rem;
  font-family: var(--font-heading);
  color: var(--color-text-medium);
}

.countdown__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 56rem;
  width: 100%;
}

@media (min-width: 768px) {
  .countdown__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
  }
}

.countdown__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 15px -3px var(--color-shadow);
  border: 1px solid var(--color-border-beige);
}

.countdown__number {
  font-size: 3rem;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--color-text-dark);
  line-height: 1;
}

@media (min-width: 768px) {
  .countdown__number { font-size: 3.75rem; }
}

.countdown__label {
  font-size: 0.875rem;
  color: var(--color-text-dark);
  font-weight: 500;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.5rem;
}

/* ============================================================
   14. COUPLE PROFILES SECTION
   ============================================================ */
.couple {
  width: 100%;
  padding: 6rem 0;
  background: var(--color-white);
}

.couple__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  margin-bottom: 5rem;
}

.couple__title {
  font-size: 2.25rem;
  font-family: var(--font-heading);
  color: var(--color-text);
}

.couple__divider {
  width: 8rem;
  height: 4px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
}

.couple__description {
  font-size: 1.25rem;
  color: var(--color-text-medium);
  max-width: 40rem;
  font-family: var(--font-heading);
}

.couple__grid {
  display: grid;
  gap: 4rem;
  align-items: center;
  max-width: 72rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .couple__grid { grid-template-columns: repeat(2, 1fr); }
}

.couple__person {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
}

.couple__photo-wrap {
  position: relative;
}

.couple__photo-circle {
  width: 20rem;
  height: 20rem;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 8px solid var(--color-bg-cream);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.couple__photo-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.couple__crown {
  position: absolute;
  top: -1rem;
  right: -1rem;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  padding: 0.75rem;
  box-shadow: 0 10px 15px -3px var(--color-shadow);
}

.couple__crown svg {
  width: 24px;
  height: 24px;
  color: var(--color-white);
}

/* CUSTOMIZE: Names, roles, parents, quotes */
.couple__name {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  color: var(--color-accent-warm);
}

.couple__info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--color-text-medium);
}

.couple__role {
  font-size: 1.125rem;
  font-family: var(--font-heading);
}

.couple__parents {
  font-family: var(--font-heading);
  color: var(--color-text-medium);
}

.couple__quote {
  font-style: italic;
  font-family: var(--font-heading);
}

.couple__socials {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.couple__social-link {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  transition: all var(--duration-fast) ease;
}

.couple__social-link:hover {
  box-shadow: 0 10px 15px -3px var(--color-shadow);
  transform: scale(1.1);
}

.couple__social-link svg {
  width: 20px;
  height: 20px;
}

/* ============================================================
   15. LOVE STORY / TIMELINE SECTION
   ============================================================ */
.love-story {
  width: 100%;
  padding: 6rem 0;
  background: var(--color-bg-light);
}

.love-story__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  margin-bottom: 5rem;
}

.love-story__title {
  font-size: 2.25rem;
  font-family: var(--font-heading);
  color: var(--color-text);
}

.love-story__divider {
  width: 8rem;
  height: 4px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
}

.love-story__description {
  font-size: 1.25rem;
  color: var(--color-text-medium);
  max-width: 48rem;
  font-family: var(--font-heading);
}

.love-story__grid {
  display: grid;
  gap: 4rem;
  align-items: center;
  max-width: 80rem;
  margin: 0 auto;
  margin-top: 3rem;
}

@media (min-width: 1024px) {
  .love-story__grid { grid-template-columns: repeat(2, 1fr); }
}

.love-story__events {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* Individual timeline event */
.love-story__event {
  position: relative;
  padding-left: 2rem;
  border-left: 4px solid var(--color-bg-cream);
}

.love-story__event:last-child {
  border-color: #e7d2cb;
}

.love-story__event-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.love-story__event-header svg {
  width: 20px;
  height: 20px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.love-story__event-title {
  font-size: 1.5rem;
  color: var(--color-text);
  font-family: var(--font-heading);
}

.love-story__event-time {
  font-size: 0.875rem;
  color: var(--color-text-light);
  font-family: var(--font-heading);
}

.love-story__event-text {
  color: var(--color-text-medium);
  line-height: 1.7;
  font-family: var(--font-heading);
}

/* Photo + Quote card on right */
.love-story__photo-wrap {
  position: relative;
}

.love-story__photo-container {
  position: relative;
  height: 600px;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.love-story__photo-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.love-story__photo-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent);
}

.love-story__promise-card {
  position: absolute;
  bottom: -2rem;
  right: -2rem;
  background: var(--color-white);
  padding: 2rem;
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 25px -5px var(--color-shadow);
  max-width: 24rem;
  border: 1px solid rgba(251, 113, 133, 0.1);
}

.love-story__promise-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

.love-story__promise-header svg {
  width: 24px;
  height: 24px;
}

.love-story__promise-header span {
  font-weight: 600;
  font-size: 1.125rem;
  font-family: var(--font-heading);
}

.love-story__promise-text {
  color: #374151;
  font-style: italic;
  font-family: var(--font-heading);
}

/* ============================================================
   16. WEDDING DETAILS SECTION (Pill Cards)
   ============================================================ */
.details {
  width: 100%;
  padding: 6rem 0;
  background: var(--color-white);
}

.details__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  margin-bottom: 5rem;
}

.details__title {
  font-size: 2.25rem;
  font-family: var(--font-heading);
  color: var(--color-text);
}

.details__divider {
  width: 8rem;
  height: 4px;
  background: var(--color-primary-light);
  border-radius: var(--radius-full);
}

.details__description {
  font-size: 1.25rem;
  color: var(--color-text-medium);
  max-width: 48rem;
  font-family: var(--font-heading);
}

.details__grid {
  display: grid;
  gap: 3rem;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 1024px) {
  .details__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Pill-shaped detail card */
.detail-card {
  position: relative;
  padding: 2rem 2.5rem;
  border-radius: 500px 500px 500px 500px;
  border-top-left-radius: 500px;
  border-top-right-radius: 500px;
  border: 6px solid rgba(81, 96, 63, 0.3);
  box-shadow: 0 20px 25px -5px var(--color-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 850px;
  overflow: hidden;
  background: var(--color-bg-ivory);
}

.detail-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.detail-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}

/* Card heading */
.detail-card__heading-wrap {
  position: relative;
  z-index: 10;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4rem;
}

.detail-card__heading {
  font-size: 1.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-primary-light);
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .detail-card__heading { font-size: 1.875rem; }
}

.detail-card__heading-line {
  height: 1px;
  background: var(--color-primary-light);
  margin-bottom: 2.5rem;
  transition: width var(--duration-slower) var(--ease-reveal);
  width: 0;
}

.detail-card__heading-line.revealed {
  width: 100%;
}

/* Polaroid-style photo inside card */
.detail-card__polaroid-wrap {
  position: relative;
  z-index: 10;
  margin-bottom: 1rem;
}

.detail-card__polaroid {
  position: relative;
  width: 10rem;
  height: 12rem;
  margin-bottom: 1rem;
}

.detail-card__polaroid-shadow {
  position: absolute;
  inset: 0;
  background: rgba(81, 96, 63, 0.05);
  border: 1px solid rgba(81, 96, 63, 0.1);
  border-radius: var(--radius-full) var(--radius-full) 0 0;
}

.detail-card__polaroid-inner {
  position: absolute;
  inset: 0;
  background: var(--color-white);
  box-shadow: 0 10px 15px -3px var(--color-shadow);
  border: 4px solid var(--color-white);
  border-radius: var(--radius-full) var(--radius-full) 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.detail-card__polaroid-img-wrap {
  flex: 1;
  background: rgba(81, 96, 63, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.detail-card__polaroid-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-card__polaroid-caption {
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  font-family: var(--font-script);
  color: var(--color-primary-light);
  font-size: 0.875rem;
}

/* Detail card body info */
.detail-card__body {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  color: var(--color-primary-light);
  font-family: var(--font-heading);
  flex: 1;
  width: 100%;
}

.detail-card__day-label {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.6;
}

.detail-card__date {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.detail-card__time {
  font-size: 1rem;
  letter-spacing: 0.05em;
  border-top: 1px solid rgba(81, 96, 63, 0.2);
  border-bottom: 1px solid rgba(81, 96, 63, 0.2);
  padding: 0.5rem 1rem;
  display: inline-block;
}

.detail-card__venue-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

.detail-card__venue-wrap svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary-light);
}

.detail-card__venue-name {
  font-size: 1.125rem;
  font-weight: 500;
}

.detail-card__venue-address {
  font-size: 0.875rem;
  line-height: 1.6;
  max-width: 200px;
  opacity: 0.8;
  margin: 0 auto;
}

/* Album card variant */
.detail-card__album-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0 1rem;
}

.detail-card__album-label {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-primary-light);
  font-weight: 700;
}

.detail-card__album-text {
  font-size: 1rem;
  line-height: 1.6;
  font-style: italic;
  opacity: 0.8;
}

.detail-card__album-hashtag {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.5;
  font-weight: 700;
}

/* CTA button inside detail card */
.detail-card__cta-wrap {
  position: relative;
  z-index: 10;
  padding: 2.5rem 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.detail-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2.5rem;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-family: var(--font-heading);
  color: var(--color-white);
  font-weight: 600;
  background: var(--color-primary);
  box-shadow: 0 10px 15px -3px var(--color-shadow);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transition: all var(--duration-fast) ease;
}

.detail-card__cta:hover {
  background: var(--color-primary-light);
}

.detail-card__cta svg {
  width: 14px;
  height: 14px;
}

/* ============================================================
   17. WEDDING DAY TIMELINE
   ============================================================ */
.day-timeline {
  margin-top: 6rem;
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}

.day-timeline__header {
  text-align: center;
  margin-bottom: 4rem;
}

.day-timeline__title {
  font-size: 2.25rem;
  font-family: var(--font-heading);
  color: var(--color-text);
  margin-bottom: 1rem;
}

.day-timeline__divider {
  width: 6rem;
  height: 4px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  margin: 0 auto;
}

.day-timeline__line-wrap {
  position: relative;
}

.day-timeline__vertical-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: 4px;
  background: #6b6f5e;
}

.day-timeline__events {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

/* Individual timeline event */
.day-event {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 768px) {
  .day-event { flex-direction: row; }
  .day-event--reverse { flex-direction: row-reverse; }
}

.day-event__node {
  z-index: 10;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  border: 4px solid var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  box-shadow: 0 10px 15px -3px var(--color-shadow);
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .day-event__node {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

.day-event__node svg {
  width: 32px;
  height: 32px;
}

.day-event__content {
  width: 100%;
  margin-top: 1.5rem;
  text-align: center;
}

@media (min-width: 768px) {
  .day-event__content {
    width: 50%;
    margin-top: 0;
    padding-right: 2rem;
    text-align: right;
  }

  .day-event--reverse .day-event__content {
    padding-right: 0;
    padding-left: 2rem;
    text-align: left;
  }
}

.day-event__card {
  background: var(--color-white);
  padding: 1.5rem;
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 15px -3px var(--color-shadow);
  border: 1px solid #f3f4f6;
}

.day-event__time {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
  font-family: var(--font-heading);
}

.day-event__name {
  font-size: 1.25rem;
  font-family: var(--font-heading);
  color: #374151;
  margin-bottom: 0.5rem;
}

.day-event__desc {
  color: var(--color-text-medium);
  font-family: var(--font-heading);
}

/* ============================================================
   18. GOOGLE MAP EMBED
   ============================================================ */
.map-section {
  width: 100%;
  margin-top: 4rem;
  padding: 0 1rem;
  display: flex;
  justify-content: center;
}

.map-section iframe {
  border: 0;
  max-width: 800px;
  width: 100%;
  height: 450px;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 15px -3px var(--color-shadow);
}

/* ============================================================
   19. RSVP SECTION
   ============================================================ */
.rsvp {
  width: 100%;
  padding: 3rem 0;
  background: var(--color-white);
}

.rsvp__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  margin-bottom: 5rem;
}

.rsvp__title {
  font-size: 2.25rem;
  font-family: var(--font-heading);
  color: var(--color-text);
}

.rsvp__divider {
  width: 8rem;
  height: 4px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
}

.rsvp__description {
  font-size: 1.25rem;
  color: var(--color-text-medium);
  max-width: 48rem;
  font-family: var(--font-heading);
  text-align: justify;
}

.rsvp__grid {
  display: grid;
  gap: 4rem;
  align-items: center;
  max-width: 72rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .rsvp__grid { grid-template-columns: repeat(2, 1fr); }
}

/* RSVP photo side */
.rsvp__photo-wrap {
  position: relative;
}

.rsvp__photo-container {
  position: relative;
  height: 500px;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.rsvp__photo-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rsvp__photo-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
}

.rsvp__save-card {
  position: absolute;
  bottom: -2rem;
  left: -2rem;
  background: var(--color-white);
  padding: 2rem;
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 25px -5px var(--color-shadow);
  max-width: 24rem;
  border: 1px solid var(--color-border);
}

.rsvp__save-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-text-dark);
  margin-bottom: 0.75rem;
}

.rsvp__save-card-header svg {
  width: 24px;
  height: 24px;
}

.rsvp__save-card-header span {
  font-weight: 600;
  font-size: 1.125rem;
  font-family: var(--font-heading);
}

.rsvp__save-card p {
  color: #374151;
  line-height: 1.6;
  text-align: justify;
}

/* RSVP Form */
.rsvp__form-wrap {
  background: rgba(166, 165, 145, 0.1);
  padding: 2.5rem;
  border-radius: var(--radius-2xl);
  box-shadow: 0 20px 25px -5px var(--color-shadow);
  border: 1px solid var(--color-border);
}

.rsvp__form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.rsvp__form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .rsvp__form-row { grid-template-columns: repeat(2, 1fr); }
}

.rsvp__form-group label {
  display: block;
  color: #374151;
  font-weight: 500;
  margin-bottom: 0.5rem;
  font-family: var(--font-heading);
}

.rsvp__form-group input,
.rsvp__form-group select,
.rsvp__form-group textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-family: var(--font-heading);
  transition: all var(--duration-fast) ease;
  background: var(--color-white);
}

.rsvp__form-group input:focus,
.rsvp__form-group select:focus,
.rsvp__form-group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(166, 165, 145, 0.2);
}

.rsvp__select-wrap {
  position: relative;
}

.rsvp__select-wrap select {
  appearance: none;
  padding-right: 2.5rem;
}

.rsvp__select-wrap svg {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--color-text-light);
  pointer-events: none;
}

.rsvp__submit {
  width: 100%;
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-lg);
  padding: 0.75rem;
  font-size: 1.125rem;
  font-weight: 500;
  font-family: var(--font-heading);
  box-shadow: 0 10px 15px -3px var(--color-shadow);
  transition: all var(--duration-fast) ease;
  cursor: pointer;
}

.rsvp__submit:hover {
  background: rgba(166, 165, 145, 0.8);
  box-shadow: 0 20px 25px -5px var(--color-shadow);
  transform: scale(1.05);
}

/* Google Calendar link */
.rsvp__calendar-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1.5rem;
  background: var(--color-white);
  border: 1px solid #d1d5db;
  border-radius: var(--radius-lg);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 500;
  transition: all var(--duration-fast) ease;
}

.rsvp__calendar-link:hover {
  background: #f9fafb;
  box-shadow: 0 4px 6px -1px var(--color-shadow);
}

.rsvp__calendar-link svg {
  width: 20px;
  height: 20px;
  color: var(--color-accent);
}

/* ============================================================
   20. BRIDAL PARTY SECTION
   ============================================================ */
.bridal-party {
  width: 100%;
  padding: 6rem 0;
  background: var(--color-bg-light);
}

.bridal-party__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  margin-bottom: 5rem;
}

.bridal-party__title {
  font-size: 2.25rem;
  font-family: var(--font-heading);
  color: var(--color-text);
}

.bridal-party__divider {
  width: 8rem;
  height: 4px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
}

.bridal-party__description {
  font-size: 1.25rem;
  color: var(--color-text-medium);
  max-width: 48rem;
  font-family: var(--font-heading);
}

.bridal-party__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 64rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .bridal-party__grid { grid-template-columns: repeat(4, 1fr); }
}

.bridal-party__member {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}

.bridal-party__photo {
  width: 8rem;
  height: 8rem;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 4px solid var(--color-bg-cream);
  box-shadow: 0 10px 15px -3px var(--color-shadow);
  position: relative;
}

@media (min-width: 768px) {
  .bridal-party__photo { width: 10rem; height: 10rem; }
}

.bridal-party__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bridal-party__photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--duration-fast) ease;
  border-radius: var(--radius-full);
}

.bridal-party__photo:hover .bridal-party__photo-overlay {
  opacity: 1;
}

.bridal-party__member-name {
  font-size: 1.125rem;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text);
}

.bridal-party__member-role {
  font-size: 0.875rem;
  font-family: var(--font-heading);
  color: var(--color-text-medium);
}

/* ============================================================
   21. GIFT REGISTRY SECTION
   ============================================================ */
.registry {
  width: 100%;
  padding: 6rem 0;
  background: var(--color-white);
}

.registry__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  margin-bottom: 5rem;
}

.registry__title {
  font-size: 2.25rem;
  font-family: var(--font-heading);
  color: var(--color-text);
}

.registry__divider {
  width: 8rem;
  height: 4px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
}

.registry__description {
  font-size: 1.25rem;
  color: var(--color-text-medium);
  max-width: 48rem;
  font-family: var(--font-heading);
}

.registry__grid {
  display: grid;
  gap: 2rem;
  max-width: 64rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .registry__grid { grid-template-columns: repeat(3, 1fr); }
}

.registry__card {
  background: var(--color-bg-ivory);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  text-align: center;
  transition: all var(--duration-fast) ease;
}

.registry__card:hover {
  box-shadow: 0 20px 25px -5px var(--color-shadow);
  transform: translateY(-4px);
}

.registry__card-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  border-radius: var(--radius-full);
  background: rgba(166, 165, 145, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}

.registry__card-icon svg {
  width: 24px;
  height: 24px;
}

.registry__card-title {
  font-size: 1.25rem;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.registry__card-desc {
  font-size: 0.875rem;
  color: var(--color-text-medium);
  font-family: var(--font-heading);
  margin-bottom: 1.5rem;
}

.registry__card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.5rem;
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all var(--duration-fast) ease;
}

.registry__card-link:hover {
  background: var(--color-primary-light);
}

/* ============================================================
   22. NOTE FROM COUPLE SECTION
   ============================================================ */
.couple-note {
  width: 100%;
  padding: 6rem 0;
  background: var(--color-bg-ivory);
}

.couple-note__inner {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

.couple-note__title {
  font-size: 2.25rem;
  font-family: var(--font-heading);
  color: var(--color-text);
  margin-bottom: 2rem;
}

.couple-note__text {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--color-text-medium);
  font-family: var(--font-heading);
  font-style: italic;
  text-align: justify;
}

/* ============================================================
   23. GALLERY SECTION
   ============================================================ */
.gallery {
  width: 100%;
  padding: 6rem 0;
  background: var(--color-bg-light);
}

.gallery__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  margin-bottom: 3rem;
}

.gallery__title {
  font-size: 2.25rem;
  font-family: var(--font-heading);
  color: var(--color-text);
}

.gallery__divider {
  width: 8rem;
  height: 4px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
}

.gallery__description {
  font-size: 1.25rem;
  color: var(--color-text-medium);
  max-width: 40rem;
  font-family: var(--font-heading);
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 72rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .gallery__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .gallery__grid { grid-template-columns: repeat(4, 1fr); }
}

.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 3 / 4;
  cursor: pointer;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-medium) ease;
}

.gallery__item:hover img {
  transform: scale(1.05);
}

.gallery__item-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity var(--duration-fast) ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery__item:hover .gallery__item-overlay {
  opacity: 1;
}

.gallery__item-overlay svg {
  width: 32px;
  height: 32px;
  color: var(--color-white);
}

.gallery__album-cta {
  text-align: center;
  margin-top: 2rem;
}

.gallery__album-cta p {
  font-family: var(--font-heading);
  color: var(--color-text-medium);
  margin-bottom: 1rem;
}

.gallery__album-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 500;
  transition: all var(--duration-fast) ease;
}

.gallery__album-link:hover {
  background: var(--color-primary-light);
}

/* Gallery stagger delays */
.gallery__item:nth-child(1) { transition-delay: 0ms; }
.gallery__item:nth-child(2) { transition-delay: 100ms; }
.gallery__item:nth-child(3) { transition-delay: 200ms; }
.gallery__item:nth-child(4) { transition-delay: 100ms; }
.gallery__item:nth-child(5) { transition-delay: 200ms; }
.gallery__item:nth-child(6) { transition-delay: 300ms; }
.gallery__item:nth-child(7) { transition-delay: 100ms; }
.gallery__item:nth-child(8) { transition-delay: 200ms; }

/* ============================================================
   24. VENDORS / CREDITS SECTION
   ============================================================ */
.vendors {
  width: 100%;
  padding: 6rem 0;
  background: var(--color-white);
}

.vendors__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  margin-bottom: 3rem;
}

.vendors__title {
  font-size: 2.25rem;
  font-family: var(--font-heading);
  color: var(--color-text);
}

.vendors__divider {
  width: 8rem;
  height: 4px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
}

.vendors__description {
  font-size: 1.125rem;
  color: var(--color-text-medium);
  max-width: 48rem;
  font-family: var(--font-heading);
}

.vendors__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 64rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .vendors__grid { grid-template-columns: repeat(3, 1fr); }
}

.vendor-card {
  background: var(--color-bg-ivory);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  text-align: center;
  transition: all var(--duration-fast) ease;
}

.vendor-card:hover {
  box-shadow: 0 10px 15px -3px var(--color-shadow);
  transform: translateY(-2px);
}

.vendor-card__icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.75rem;
  border-radius: var(--radius-full);
  background: rgba(166, 165, 145, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}

.vendor-card__icon svg {
  width: 20px;
  height: 20px;
}

.vendor-card__name {
  font-size: 1rem;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

.vendor-card__role {
  font-size: 0.75rem;
  font-family: var(--font-heading);
  color: var(--color-text-medium);
}

/* ============================================================
   25. FOOTER
   ============================================================ */
.footer {
  width: 100%;
  padding: 4rem 0 2rem;
  background: var(--color-text-dark);
  color: rgba(255, 255, 255, 0.7);
}

.footer__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.footer__top {
  text-align: center;
  margin-bottom: 3rem;
}

.footer__tagline {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.5rem;
}

.footer__tagline-sub {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  max-width: 36rem;
  margin: 0 auto;
}

.footer__grid {
  display: grid;
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .footer__grid { grid-template-columns: repeat(3, 1fr); }
}

.footer__section-title {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer__links a {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--duration-fast) ease;
  text-transform: capitalize;
}

.footer__links a:hover {
  color: var(--color-white);
}

.footer__detail {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.25rem;
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.5rem;
  text-align: center;
}

.footer__copyright {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 0.5rem;
}

.footer__credit {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
}

.footer__credit a {
  color: rgba(255, 255, 255, 0.5);
  transition: color var(--duration-fast) ease;
}

.footer__credit a:hover {
  color: var(--color-white);
}

/* ============================================================
   26. SCROLL REVEAL ANIMATION SYSTEM
   ============================================================ */

/* Base state: invisible, shifted down */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all var(--duration-slow) var(--ease-reveal);
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1) rotate(0deg);
}

/* Directional variants */
.scroll-reveal--up { transform: translateY(40px); }
.scroll-reveal--down { transform: translateY(-40px); }
.scroll-reveal--left { transform: translateX(-50px); }
.scroll-reveal--right { transform: translateX(50px); }
.scroll-reveal--scale { transform: scale(0.85); }
.scroll-reveal--scale-sm { transform: scale(0.95); }

/* Clip-path variants (for detail cards) */
.scroll-reveal--clip-circle {
  clip-path: circle(0% at 50% 50%);
  transform: scale(0.85);
}

.scroll-reveal--clip-circle.revealed {
  clip-path: circle(100% at 50% 50%);
  transform: scale(1);
  transition: all var(--duration-slowest) var(--ease-reveal);
}

/* Clip inset (for headings) */
.scroll-reveal--clip-inset {
  clip-path: inset(0 50% 0 50%);
  letter-spacing: -0.5em;
}

.scroll-reveal--clip-inset.revealed {
  clip-path: inset(0 0% 0 0%);
  letter-spacing: normal;
  transition: all var(--duration-slower) var(--ease-reveal);
}

/* Polaroid pop-in */
.scroll-reveal--polaroid {
  opacity: 0;
  transform: scale(0.6) rotate(-5deg);
}

.scroll-reveal--polaroid.revealed {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  transition: all 0.6s var(--ease-reveal);
}

.scroll-reveal--polaroid-alt {
  opacity: 0;
  transform: scale(0.6) rotate(5deg);
}

.scroll-reveal--polaroid-alt.revealed {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  transition: all 0.6s var(--ease-reveal);
}

/* Stagger delays */
.scroll-reveal--delay-1 { transition-delay: 100ms; }
.scroll-reveal--delay-2 { transition-delay: 200ms; }
.scroll-reveal--delay-3 { transition-delay: 300ms; }
.scroll-reveal--delay-4 { transition-delay: 400ms; }
.scroll-reveal--delay-5 { transition-delay: 500ms; }
.scroll-reveal--delay-6 { transition-delay: 600ms; }

/* ============================================================
   27. KEYFRAME ANIMATIONS
   ============================================================ */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ============================================================
   28. RESPONSIVE ADJUSTMENTS
   ============================================================ */
@media (max-width: 767px) {
  /* Reduce section padding on mobile */
  .couple, .love-story, .details, .bridal-party, .registry, .gallery, .vendors {
    padding: 3rem 0;
  }

  .couple__header, .love-story__header, .details__header,
  .bridal-party__header, .registry__header, .gallery__header,
  .vendors__header, .rsvp__header {
    margin-bottom: 2.5rem;
  }

  .couple__photo-circle {
    width: 14rem;
    height: 14rem;
  }

  .love-story__photo-container {
    height: 400px;
  }

  .love-story__promise-card {
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: 1rem;
  }

  .rsvp__photo-container {
    height: 300px;
  }

  .rsvp__save-card {
    position: relative;
    bottom: auto;
    left: auto;
    margin-top: 1rem;
  }

  .detail-card {
    min-height: 700px;
  }

  .day-event__content {
    text-align: center;
  }

  .day-timeline__vertical-line {
    display: none;
  }

  .footer__grid {
    text-align: center;
  }
}

/* ==========================================================================
   NEW ARCHED CARD & TIMELINE CSS (Self-contained, NO CDNs)
   ========================================================================== */

/* Arched Card Styles */
.arched-card {
  background-color: #E8EDE3; /* Sage Green */
  border-radius: 200px 200px 10px 10px;
  padding: 20px 20px 50px 20px;
  width: 100%;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 15px 40px rgba(107, 123, 90, 0.1);
  position: relative;
}

.arched-card__image-wrap {
  width: 100%;
  height: 400px;
  border-radius: 180px 180px 0 0;
  overflow: hidden;
  margin-bottom: 35px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.4);
}

.arched-card__title {
  font-family: 'Tenor Sans', serif;
  font-size: 2.2rem;
  color: #37432b;
  margin-bottom: 25px;
}

.arched-card__info-group {
  margin-bottom: 20px;
}

.arched-card__label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #6B7B5A;
  font-weight: 600;
  margin-bottom: 5px;
}

.arched-card__value {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  color: #2A2A2A;
}

.arched-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  padding: 12px 28px;
  border: 1px solid #37432b;
  border-radius: 30px;
  background: transparent;
  color: #37432b;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.arched-card__btn:hover {
  background: #37432b;
  color: #F9F6F0;
}

.arched-card__btn svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   NEW ELEGANT TIMELINE (Cards & Nodes)
   ========================================================================== */
.timeline {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 0;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  width: 1px;
  background-color: rgba(107, 123, 90, 0.3); /* Delicate sage line */
}

.timeline-item {
  position: relative;
  margin-bottom: 40px;
  padding-left: 60px; /* Space for the line and node */
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-node {
  position: absolute;
  left: 20px;
  top: 0;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  background-color: var(--color-primary-sage, #6B7B5A);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px var(--color-bg-ivory, #F9F6F0);
  z-index: 2;
}

.timeline-node svg {
  width: 14px;
  height: 14px;
  color: #FFFFFF;
}

.timeline-content {
  background-color: #FFFFFF;
  padding: 24px 32px;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(107, 123, 90, 0.1);
  position: relative;
}

/* Optional delicate arrow pointing to the timeline */
.timeline-content::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 12px;
  width: 16px;
  height: 16px;
  background-color: #FFFFFF;
  transform: rotate(45deg);
  border-left: 1px solid rgba(107, 123, 90, 0.1);
  border-bottom: 1px solid rgba(107, 123, 90, 0.1);
}

.timeline-time {
  font-family: var(--font-serif, 'Tenor Sans', serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-primary-sage, #6B7B5A);
  margin-bottom: 6px;
}

.timeline-title {
  font-family: var(--font-sans, 'Montserrat', sans-serif);
  font-size: 1.05rem;
  color: var(--color-text, #1f2937);
  font-weight: 500;
}