/* ============================================================
   AT STUDIO — PREMIUM WEDDING TEMPLATE
   Main Stylesheet — style.css
   © 2025 AT Studio. All Rights Reserved.

   TABLE OF CONTENTS:
   01 — CSS Variables (color theme — set by script.js)
   02 — Reset & Base
   03 — Typography Scale
   04 — Reusable Utilities
   05 — Page Loader
   06 — Navigation
   07 — Hero Section
   08 — Countdown Section
   09 — Save The Date Section
   10 — Couple Note Section
   11 — Our Story / Timeline Section
   12 — Gallery Section
   13 — Lightbox
   14 — Wedding Party Section
   15 — Event Schedule Section
   16 — Dress Code Section
   17 — Registry Section
   18 — FAQs Section
   19 — RSVP Section
   20 — Footer
   21 — Scroll Reveal Animations
   22 — Responsive — Tablet (768px)
   23 — Responsive — Desktop (1024px)
   24 — Responsive — Large Desktop (1440px)
   25 — Responsive — TV / Ultra Wide (1920px+)
   26 — Responsive — Landscape Mobile
   ============================================================ */


/* ============================================================
   01 — CSS VARIABLES
   Color variables are set exclusively in theme.css (loaded before
   this file). DO NOT define --primary, --secondary, --dark,
   --muted, --white, --border, or --overlay here — doing so would
   override theme.css since style.css loads second.
   ============================================================ */
:root {
    /* Typography scale — fluid sizing for all screen sizes
       Format: clamp(minimum, preferred, maximum)
       Scales smoothly without needing media queries */
    --text-hero:        clamp(3rem, 10vw, 8rem);    /* couple names in hero */
    --text-h2:          clamp(1.8rem, 4vw, 3rem);   /* section titles */
    --text-h3:          clamp(1.2rem, 2.5vw, 1.8rem);
    --text-body:        clamp(0.9rem, 1.8vw, 1.05rem);
    --text-label:       clamp(0.6rem, 1.2vw, 0.72rem);
    --text-countdown:   clamp(2.5rem, 7vw, 5.5rem); /* countdown numbers */

    /* Spacing scale */
    --section-padding:  clamp(60px, 10vw, 120px);
    --container-max:    1200px;
    --container-pad:    clamp(20px, 5vw, 60px);

    /* Animation timing */
    --transition-fast:  0.25s ease;
    --transition-med:   0.4s ease;
    --transition-slow:  0.7s ease;
}


/* ============================================================
   01b — SECTION BACKGROUND ALTERNATION CLASSES
   Applied dynamically by script.js after section toggles run.
   Ensures white → cream → white alternation only on VISIBLE sections.
   bg-odd  = var(--white)      sections 1, 3, 5…
   bg-even = var(--secondary)  sections 2, 4, 6…
   These override the static backgrounds on each section.
   ============================================================ */
.bg-odd  { background: var(--white)     !important; }
.bg-even { background: var(--secondary) !important; }

/* Also re-tint the timeline dot border to match its section background */
.bg-odd  .timeline-dot { border-color: var(--white)     !important; }
.bg-even .timeline-dot { border-color: var(--secondary) !important; }



/* ============================================================
   02 — RESET & BASE STYLES
   Removes default browser styles for consistent rendering.
   ============================================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;    /* smooth scrolling when nav links clicked */
    font-size: 16px;
}

body {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    color: var(--dark);
    background-color: var(--secondary);
    line-height: 1.7;
    overflow-x: hidden;         /* prevent horizontal scroll */
    -webkit-font-smoothing: antialiased;    /* smoother text on Mac/iOS */
}

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

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

button {
    font-family: 'Jost', sans-serif;
    cursor: pointer;
    border: none;
    background: none;
}

ul {
    list-style: none;
}

/* Disable right-click context menu (basic code protection) */
/* More protection applied in script.js */

/* ── CSS-level content protection ───────────────────────────
   Prevents text highlighting, image long-press save on mobile,
   and makes casual content copying much harder for guests.
   Input/textarea elements are explicitly re-enabled below.    */
body {
    -webkit-user-select: none;   /* Safari / Chrome iOS */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* IE / Edge legacy */
    user-select: none;
}

/* Re-enable text selection only inside form fields */
input, textarea, select {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Prevent iOS long-press "Save Image" / "Copy" context menu on all images */
img {
    -webkit-touch-callout: none;   /* iOS Safari */
    -webkit-user-drag: none;       /* Chrome/Safari drag prevention */
    user-drag: none;
    pointer-events: none;          /* disables right-click and drag on images */
}

/* Re-enable pointer events on gallery items and lightbox images
   (need clicks to open the lightbox) */
.gallery-item {
    pointer-events: auto;
}
.lightbox-img {
    pointer-events: none;   /* image itself still not draggable/right-clickable */
}

/* QR code must be clickable — override the global img { pointer-events: none } */
.registry-qr-img {
    pointer-events: auto;
}


/* ============================================================
   03 — TYPOGRAPHY SCALE
   Global heading and text styles.
   ============================================================ */

/* All headings use Cormorant Garamond */
h1, h2, h3, h4 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    line-height: 1.1;
}

/* Section label — small spaced caps above every title */
.section-label {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 400;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: clamp(8px, 1.5vw, 14px);
    display: block;
}

/* Section main title */
.section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: var(--text-h2);
    font-weight: 300;
    font-style: italic;
    color: var(--dark);
    margin-bottom: clamp(10px, 2vw, 16px);
}

/* Section subtitle — below the title */
.section-subtitle {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-body);
    font-weight: 300;
    color: var(--muted);
    margin-bottom: clamp(40px, 6vw, 70px);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
   04 — REUSABLE UTILITIES
   ============================================================ */

/* Centered container for all section content */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    text-align: center;
}

/* Gold divider line with diamond center — used in multiple sections */
.gold-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: clamp(20px, 3vw, 32px) auto;
    max-width: 300px;
}

.gold-divider::before,
.gold-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--primary);
    opacity: 0.5;
}

.gold-divider-diamond {
    color: var(--primary);
    font-size: 0.45rem;
}


/* ============================================================
   05 — PAGE LOADER
   Full-screen loader shown while page assets load.
   Fades out and is removed by script.js once ready.
   ============================================================ */
.page-loader {
    position: fixed;
    inset: 0;
    background: var(--secondary);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* Hidden class — added by script.js to hide the loader */
.page-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Couple names shown in the loader */
.loader-couple {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-style: italic;
    font-weight: 300;
    color: var(--dark);
    animation: fadeInUp 0.8s ease forwards;
}

/* Animated loading bar */
.loader-bar {
    width: clamp(80px, 20vw, 140px);
    height: 1px;
    background: var(--border);
    overflow: hidden;
}

.loader-bar-fill {
    height: 100%;
    background: var(--primary);
    width: 0%;
    animation: loaderFill 1.5s ease forwards;
}

/* Loading dots */
.loader-dots {
    display: flex;
    gap: 6px;
}

.loader-dots span {
    width: 5px;
    height: 5px;
    background: var(--primary);
    border-radius: 50%;
    animation: bounce 1.2s infinite ease-in-out;
}

.loader-dots span:nth-child(1) { animation-delay: 0s;   }
.loader-dots span:nth-child(2) { animation-delay: 0.2s; }
.loader-dots span:nth-child(3) { animation-delay: 0.4s; }


/* ============================================================
   06 — NAVIGATION
   Fixed top bar with couple brand on left, links on right.
   Transparent until scrolled, then white with shadow.
   ============================================================ */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(14px, 2vw, 22px) var(--container-pad);
    background: transparent;
    transition: background var(--transition-med),
                box-shadow var(--transition-med),
                padding var(--transition-med);
}

/* Scrolled state — warm parchment background with shadow */
.nav.scrolled {
    background: rgba(245, 237, 224, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 var(--border);
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Couple brand / initials in top left */
.nav-brand {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    font-style: italic;
    font-weight: 400;
    color: var(--white);                    /* white on hero (transparent nav) */
    letter-spacing: 0.08em;
    transition: color var(--transition-fast);
    cursor: default;
}

/* Nav brand becomes dark once nav has white background */
.nav.scrolled .nav-brand {
    color: var(--dark);
}

/* Navigation links list */
.nav-links {
    display: flex;
    gap: clamp(16px, 3vw, 40px);
    align-items: center;
}

/* Individual nav link */
.nav-link {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    transition: color var(--transition-fast);
    position: relative;
    padding-bottom: 3px;
}

/* Underline hover effect */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 1px;
    background: var(--primary);
    transition: width var(--transition-med);
}

.nav-link:hover::after {
    width: 100%;
}

/* Nav links become dark once nav has white background */
.nav.scrolled .nav-link {
    color: var(--muted);
}

.nav.scrolled .nav-link:hover {
    color: var(--primary);
}

/* Hamburger button — only visible on mobile */
.nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
    cursor: pointer;
    position: relative;
    z-index: 1500;   /* above nav-links overlay (1400) so X is always tappable */
}

.nav-hamburger span {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--white);
    transition: all var(--transition-fast);
}

.nav.scrolled .nav-hamburger span {
    background: var(--dark);
}

/* Hamburger open state — X icon */
.nav-hamburger.open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.nav-hamburger.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.nav-hamburger.open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}


/* ============================================================
   07 — HERO SECTION
   Full screen. Background photo. Couple names. Parallax.
   ============================================================ */
.hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Background photo container */
.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.05);     /* slight scale for parallax effect */
    transition: transform 0.1s linear;
}

/* Dark overlay for readability */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay);
}

/* Botanical corner decorations */
.hero-botanical {
    position: absolute;
    z-index: 2;
    color: var(--primary);
    opacity: 0.30;
    pointer-events: none;
}

.hero-botanical--tl {
    top: 0;
    left: 0;
    width: clamp(100px, 18vw, 200px);
}

.hero-botanical--br {
    bottom: 0;
    right: 0;
    width: clamp(100px, 18vw, 200px);
    transform: rotate(180deg);
}

/* Hero content — centered text block */
.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: var(--white);
    padding: 0 var(--container-pad);

    /* Staggered fade-in animation */
    animation: fadeInUp 1.2s ease forwards;
}

/* "Together with their families" label */
.hero-label {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 300;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: clamp(16px, 3vw, 28px);
}

/* Groom's name */
.hero-groom,
.hero-bride {
    font-family: 'Cormorant Garamond', serif;
    font-size: var(--text-hero);
    font-weight: 300;
    line-height: 0.9;
    color: var(--white);
    letter-spacing: -0.01em;
}

/* Ampersand between names */
.hero-ampersand-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 3vw, 28px);
    margin: clamp(6px, 1.5vw, 14px) 0;
}

.hero-line {
    width: clamp(30px, 8vw, 80px);
    height: 1px;
    background: rgba(201, 169, 110, 0.5);   /* semi-transparent gold */
}

.hero-ampersand {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.2rem, 3.5vw, 2.5rem);
    font-style: italic;
    color: var(--primary);
    font-weight: 300;
}

/* Wedding date below names */
.hero-date {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 300;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-top: clamp(16px, 3vw, 28px);
    margin-bottom: clamp(8px, 1.5vw, 14px);
}

/* Romantic tagline */
.hero-tagline {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    font-style: italic;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: clamp(10px, 2vw, 16px);
}

/* Personalized guest greeting — subtle, below tagline */
/* Only visible when guest name is known from gate session */
.hero-greeting {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 300;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: clamp(20px, 3vw, 32px);
}

/* RSVP call-to-action button in hero */
.hero-cta {
    display: inline-block;
    border: 1px solid var(--primary);
    color: var(--primary);
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 400;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    padding: clamp(10px, 1.5vw, 14px) clamp(24px, 4vw, 40px);
    transition: all var(--transition-med);
}

.hero-cta:hover {
    background: var(--primary);
    color: var(--white);
}

/* Scroll indicator at bottom of hero */
.hero-scroll {
    position: absolute;
    bottom: clamp(20px, 4vw, 40px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Animated line that drops down */
.hero-scroll-line {
    width: 1px;
    height: clamp(30px, 5vw, 50px);
    background: linear-gradient(to bottom, transparent, var(--primary));
    animation: scrollLine 2s ease-in-out infinite;
}

.hero-scroll-text {
    font-family: 'Jost', sans-serif;
    font-size: 0.58rem;
    font-weight: 300;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}


/* ============================================================
   08 — COUNTDOWN SECTION
   Live timer to the wedding date.
   ============================================================ */
.countdown {
    padding: clamp(80px, 14vw, 140px) 0;
    background: var(--white);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    text-align: center;
    min-height: 50vh;
    display: flex;
    align-items: center;
}

/* Center the inner container vertically when using flexbox */
.countdown .container {
    width: 100%;
}

/* Botanical arc above the section label */
.countdown-botanical {
    color: var(--primary);
    opacity: 0.3;
    margin: 0 auto clamp(16px, 2vw, 24px);
    width: clamp(100px, 18vw, 160px);
}

/* Wedding date shown below the label, above the timer */
.countdown-date {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    font-style: italic;
    font-weight: 300;
    color: var(--muted);
    letter-spacing: 0.04em;
    margin-bottom: clamp(24px, 4vw, 40px);
    margin-top: 6px;
}

/* Timer grid — 4 units side by side — CENTERED */
.countdown-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2vw, 24px);
    margin-top: clamp(20px, 4vw, 40px);
    flex-wrap: wrap;        /* allow wrapping on very small screens */
    width: 100%;            /* take full width */
}

.countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    /* ADD these three lines: */
    border: 1px solid var(--border);
    padding: clamp(16px, 2.5vw, 28px) clamp(20px, 3vw, 36px);
    min-width: clamp(70px, 12vw, 110px);
}

/* The number itself */
.countdown-number {
    font-family: 'Cormorant Garamond', serif;
    font-size: var(--text-countdown);
    font-weight: 300;
    color: var(--dark);
    line-height: 1;
    letter-spacing: -0.02em;
    display: block;
    min-width: 1ch;             /* prevents layout shift as number changes */
}

/* "Days", "Hours", etc. labels */
.countdown-label {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 300;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Colon separator between units */
.countdown-sep {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 300;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 20px;        /* offset to align with numbers, not labels */
}

/* Stagger animation delays for countdown units */
.countdown-unit:nth-child(1) { animation-delay: 0s;    }
.countdown-unit:nth-child(2) { animation-delay: 0.12s; }
.countdown-unit:nth-child(3) { animation-delay: 0.24s; }
.countdown-unit:nth-child(4) { animation-delay: 0.36s; }

/* "Today is the day!" message shown when countdown reaches zero */
.countdown-wedding-day {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-style: italic;
    color: var(--primary);
    margin-top: 20px;
}


/* ============================================================
   09 — SAVE THE DATE SECTION
   YouTube video embed.
   ============================================================ */
.save-the-date {
    padding: var(--section-padding) 0;
    background: var(--secondary);
    text-align: center;
}

/* Botanical SVG above the save the date section */
.std-botanical {
    color: var(--primary);
    opacity: 0.35;
    margin: 0 auto clamp(20px, 3vw, 32px);
    width: clamp(80px, 15vw, 140px);
}

/* "Save the Date Film" label above the video */
.std-film-label {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 400;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: clamp(16px, 2.5vw, 24px);
    display: block;
    opacity: 0.7;
}

/* 16:9 video wrapper — maintains aspect ratio on all screens */
.video-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

/* Gold-tinted frame around the video */
.video-frame-outer {
    padding: 6px;
    border: 1px solid rgba(201, 169, 110, 0.35);
    background: transparent;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;    /* 16:9 aspect ratio formula */
    height: 0;
    overflow: hidden;
    border: none;
}

/* YouTube iframe fills the container */
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}


/* ============================================================
   10 — COUPLE NOTE SECTION
   Pull quote style personal message.
   ============================================================ */
.couple-note {
    padding: var(--section-padding) 0;
    background: var(--white);
    text-align: center;
}

/* Botanical SVG above the quote — gold tinted */
.couple-note-botanical {
    color: var(--primary);
    opacity: 0.35;
    margin: 0 auto clamp(20px, 3vw, 32px);
    width: clamp(80px, 15vw, 140px);
}

/* Large decorative opening quote mark */
.couple-note-quote-mark {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(4rem, 10vw, 8rem);
    color: var(--primary);
    opacity: 0.2;
    line-height: 0.5;
    margin-bottom: clamp(10px, 2vw, 20px);
    font-style: italic;
}

/* The message text */
.couple-note-message {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-style: italic;
    font-weight: 300;
    color: var(--dark);
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.9;
}

/* Divider between message and signature */
.couple-note-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: clamp(24px, 4vw, 40px) auto;
    max-width: 240px;
}

.couple-note-divider span:first-child,
.couple-note-divider span:last-child {
    flex: 1;
    height: 1px;
    background: var(--primary);
    opacity: 0.4;
    display: block;
}

.couple-note-diamond {
    color: var(--primary);
    font-size: 0.4rem;
}

/* Signature below the message */
.couple-note-signature {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1rem, 2vw, 1.3rem);
    font-style: italic;
    color: var(--muted);
    font-weight: 300;
}


/* ============================================================
   11 — OUR STORY / TIMELINE SECTION
   Vertical timeline with alternating layout on desktop.
   ============================================================ */
.our-story {
    padding: var(--section-padding) 0;
    background: var(--secondary);
}

/* Timeline wrapper — vertical line runs through center on desktop */
.timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

/* The vertical gold line (visible on desktop only) */
.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--primary), transparent);
    opacity: 0.4;
}

/* Individual milestone item */
.timeline-item {
    display: flex;
    gap: clamp(20px, 4vw, 50px);
    margin-bottom: clamp(40px, 7vw, 80px);
    align-items: center;
    position: relative;
}

/* Alternating layout: even items flip to right on desktop */
.timeline-item:nth-child(even) {
    flex-direction: row-reverse;
}

/* Photo side */
.timeline-photo {
    flex: 1;
    max-width: 300px;
}

.timeline-photo img {
    width: 100%;
    aspect-ratio: 4/5;           /* portrait crop */
    object-fit: cover;
    object-position: center top;
    border: 1px solid var(--border);
    transition: transform var(--transition-slow);
}

.timeline-photo img:hover {
    transform: scale(1.02);
}

/* Center dot on the timeline line */
.timeline-dot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: 50%;
    border: 2px solid var(--secondary);
    z-index: 1;
    flex-shrink: 0;
}

/* Text side */
.timeline-text {
    flex: 1;
    text-align: left;
    padding: clamp(16px, 2vw, 24px) 0;
}

/* Even items: text aligns right */
.timeline-item:nth-child(even) .timeline-text {
    text-align: right;
}

/* Date label above the title */
.timeline-date {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 400;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 8px;
}

/* Milestone title */
.timeline-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.3rem, 2.5vw, 1.9rem);
    font-style: italic;
    font-weight: 300;
    color: var(--dark);
    margin-bottom: 10px;
}

/* Description text */
.timeline-description {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-body);
    font-weight: 300;
    color: var(--muted);
    line-height: 1.8;
}


/* ============================================================
   12 — GALLERY SECTION
   Masonry-style photo grid.
   ============================================================ */
.gallery {
    padding: var(--section-padding) 0;
    background: var(--white);
}

/* CSS columns masonry grid */
.gallery-grid {
    column-count: 2;            /* 2 columns by default (mobile) */
    column-gap: clamp(8px, 1.5vw, 16px);
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

/* Individual gallery item */
.gallery-item {
    break-inside: avoid;        /* prevents photo from breaking across columns */
    margin-bottom: clamp(8px, 1.5vw, 16px);
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

/* Photo itself — no border, editorial feel */
.gallery-item img {
    width: 100%;
    display: block;
    transition: transform 0.6s ease;
    border: none;
}

/* Hover: zoom in */
.gallery-item:hover img {
    transform: scale(1.04);
}

/* Hover overlay with gold tint */
.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(201, 169, 110, 0.15);
    opacity: 0;
    transition: opacity var(--transition-med);
}

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


/* ============================================================
   13 — LIGHTBOX
   Full-screen photo viewer. Opens when gallery photo is clicked.
   NOTE: The lightbox div is a direct child of <body> — NOT inside
   the gallery section — to avoid CSS transform stacking context
   issues that would prevent position:fixed from covering the viewport.
   ============================================================ */
.lightbox {
    display: none;              /* hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(20, 18, 16, 0.96);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

/* Active state — shown when photo is clicked */
.lightbox.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease forwards;
}

/* The photo container — centered within the lightbox overlay */
.lightbox-content {
    position: absolute;
    top: 56px;      /* below close button */
    left: 0;
    right: 0;
    bottom: 72px;   /* above counter + some space */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 56px; /* horizontal room for prev/next arrows */
}

/* When music player is active, shrink bottom so image stays
   centered in the visible area above the music bar */
body.has-music-player .lightbox-content {
    bottom: 132px;  /* 72px base + ~60px music player */
}

/* The photo itself */
.lightbox-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center center;
    border: 1px solid rgba(201, 169, 110, 0.2);
    display: block;
}

/* Close button top right — large tap target */
.lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.4rem;
    cursor: pointer;
    transition: color var(--transition-fast);
    padding: 12px 16px;
    line-height: 1;
    background: rgba(0,0,0,0.3);
    border: none;
    border-radius: 4px;
    z-index: 2010;  /* above lightbox content */
}

.lightbox-close:hover {
    color: var(--primary);
    background: rgba(0,0,0,0.5);
}

/* Previous / Next buttons — vertically centered in the full lightbox */
.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.5rem;
    cursor: pointer;
    padding: clamp(12px, 2vw, 20px);
    transition: color var(--transition-fast);
    background: rgba(0,0,0,0.2);
    border: none;
    line-height: 1;
    border-radius: 4px;
    z-index: 2010;
}

.lightbox-prev { left: 8px;  }
.lightbox-next { right: 8px; }

.lightbox-prev:hover,
.lightbox-next:hover {
    color: var(--primary);
    background: rgba(0,0,0,0.4);
}

/* "3 / 8" counter — sits just above the music bar */
.lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Jost', sans-serif;
    font-size: 0.7rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.5);
    z-index: 2010;
}

/* When music player is active, push counter up above it */
body.has-music-player .lightbox-counter {
    bottom: 76px;  /* 60px music bar + 16px gap */
}

/* Hide nav while lightbox is active so controls are never blocked */
body.lightbox-open .nav {
    display: none !important;
}


/* ============================================================
   14 — WEDDING PARTY SECTION
   On mobile: horizontal swipe tabs (categories) + vertical
   scrollable name list within each panel.
   On desktop: elegant 2-column program grid (full list visible).
   ============================================================ */
.wedding-party {
    padding: var(--section-padding) 0;
    background: var(--secondary);
}

/* ── DESKTOP LAYOUT: program-style 2-column grid ─────────── */
/* Groups container — 2-column grid on desktop */
.party-groups {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 52px);
    max-width: 760px;
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

@media (min-width: 640px) {
    .party-groups {
        grid-template-columns: 1fr 1fr;
    }
}

/* Individual group block */
.party-group {
    text-align: center;
    border-top: 1px solid var(--border);
    padding-top: clamp(20px, 3vw, 28px);
}

/* Group heading */
.party-group-title {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 400;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: clamp(12px, 2vw, 18px);
    font-style: normal;
    line-height: 1.4;
}

/* Individual name */
.party-group-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    font-style: italic;
    font-weight: 300;
    color: var(--dark);
    line-height: 1.8;
    margin-bottom: 2px;
}

/* ── MOBILE CAROUSEL LAYOUT ──────────────────────────────── */
/* Hidden on desktop, shown on mobile by JS */
.party-carousel {
    display: none;
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

/* Tab row — horizontally scrollable category pills */
.party-tabs {
    display: flex;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
    padding-bottom: 0;
}

.party-tabs::-webkit-scrollbar {
    display: none;                  /* Chrome/Safari */
}

.party-tab {
    flex-shrink: 0;
    font-family: 'Jost', sans-serif;
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 10px 14px 9px;
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;            /* sit on top of container border */
    transition: color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.party-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* Panel wrapper — clips to fixed height, one panel visible at a time */
.party-panels {
    position: relative;
    border: 1px solid var(--border);
    border-top: none;
    background: var(--white);
}

/* Individual panel */
.party-panel {
    display: none;
    flex-direction: column;
    max-height: 280px;              /* ~8-9 names visible; rest scrolls */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.party-panel::-webkit-scrollbar {
    width: 3px;
}

.party-panel::-webkit-scrollbar-track {
    background: transparent;
}

.party-panel::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

.party-panel.active {
    display: flex;
}

/* Name entry inside carousel panel */
.party-panel-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    font-style: italic;
    font-weight: 300;
    color: var(--dark);
    line-height: 1.9;
    text-align: center;
    padding: 2px 0;
    border-bottom: 1px solid rgba(232, 221, 208, 0.4);
}

.party-panel-name:last-child {
    border-bottom: none;
}

/* Scroll hint — fades out when panel is scrolled fully */
.party-panel-hint {
    text-align: center;
    font-family: 'Jost', sans-serif;
    font-size: 0.58rem;
    font-weight: 300;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0.6;
    padding: 8px 0 4px;
    pointer-events: none;
}

/* Show carousel on mobile, hide desktop grid */
@media (max-width: 639px) {
    .party-groups   { display: none; }
    .party-carousel { display: flex; }
}

/* ── Legacy fallback styles (kept for backward compat) ────── */
.party-principals {
    display: flex;
    justify-content: center;
    gap: clamp(20px, 4vw, 50px);
    margin-bottom: clamp(30px, 5vw, 60px);
    flex-wrap: wrap;
}

.party-rows {
    display: flex;
    justify-content: center;
    gap: clamp(30px, 6vw, 80px);
    flex-wrap: wrap;
    margin-bottom: clamp(20px, 4vw, 40px);
}

.party-column {
    text-align: center;
    min-width: 160px;
}

.party-column-title {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 400;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: clamp(16px, 3vw, 24px);
    display: block;
}

.party-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: clamp(16px, 2.5vw, 24px);
}

.party-member-photo {
    width: clamp(60px, 10vw, 90px);
    height: clamp(60px, 10vw, 90px);
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}

.party-member-initials {
    width: clamp(60px, 10vw, 90px);
    height: clamp(60px, 10vw, 90px);
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1rem, 2vw, 1.4rem);
    font-style: italic;
    color: var(--primary);
    font-weight: 300;
}

.party-member-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(0.95rem, 2vw, 1.2rem);
    font-style: italic;
    font-weight: 300;
    color: var(--dark);
}

.party-member-role {
    font-family: 'Jost', sans-serif;
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--muted);
}

.party-extras {
    display: flex;
    justify-content: center;
    gap: clamp(20px, 4vw, 50px);
    flex-wrap: wrap;
}


/* ============================================================
   15 — EVENT SCHEDULE SECTION
   Two cards: Ceremony and Reception.
   Each has expandable Order of Events.
   ============================================================ */
.schedule {
    padding: var(--section-padding) 0;
    background: var(--white);
}

/* Cards container — side by side on tablet+ */
.schedule-cards {
    display: flex;
    flex-direction: column;     /* stacked on mobile */
    gap: clamp(20px, 4vw, 40px);
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

/* Individual event card */
.schedule-card {
    background: var(--secondary);
    border: 1px solid var(--border);
    padding: clamp(28px, 4vw, 48px);
    text-align: center;
    flex: 1;
}

/* Card top row: label + icon */
.schedule-card-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: clamp(14px, 2vw, 20px);
}

/* "Ceremony" / "Reception" label */
.schedule-card-label {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 400;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--primary);
}

.schedule-card-icon {
    color: var(--primary);
    font-size: 0.6rem;
    opacity: 0.6;
}

/* Venue name */
.schedule-card-venue {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.3rem, 2.5vw, 1.9rem);
    font-style: italic;
    font-weight: 300;
    color: var(--dark);
    margin-bottom: 8px;
}

/* Address */
.schedule-card-address {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-body);
    font-weight: 300;
    color: var(--muted);
    margin-bottom: clamp(14px, 2vw, 20px);
}

/* Time */
.schedule-card-time {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 300;
    color: var(--dark);
    display: block;
    margin-bottom: clamp(16px, 2.5vw, 24px);
}

/* Google Maps button */
.schedule-map-btn {
    display: inline-block;
    border: 1px solid var(--primary);
    color: var(--primary);
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    padding: 10px 24px;
    margin-bottom: clamp(20px, 3vw, 32px);
    transition: all var(--transition-med);
}

.schedule-map-btn:hover {
    background: var(--primary);
    color: var(--white);
}

/* "Add to Calendar" ICS download button */
.schedule-ics-btn {
    display: inline-block;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    padding: 10px 24px;
    margin-bottom: clamp(20px, 3vw, 32px);
    margin-left: 10px;
    cursor: pointer;
    background: none;
    transition: all var(--transition-med);
}

.schedule-ics-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* "Order of Events" toggle button */
.schedule-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    padding-top: clamp(14px, 2vw, 20px);
    cursor: pointer;
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color var(--transition-fast);
}

.schedule-toggle:hover {
    color: var(--primary);
}

/* +/- icon on the toggle */
.schedule-toggle-icon {
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--primary);
    transition: transform var(--transition-fast);
}

/* Rotated when open */
.schedule-toggle-icon.open {
    transform: rotate(45deg);
}

/* Expandable order of events list */
.order-of-events {
    text-align: left;
    padding-top: clamp(14px, 2vw, 20px);
    border-top: 1px solid var(--border);
    margin-top: clamp(14px, 2vw, 20px);
}

/* Individual timeline entry */
.order-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: clamp(8px, 1.5vw, 12px) 0;
    border-bottom: 1px solid rgba(232, 221, 208, 0.5);
}

.order-item:last-child {
    border-bottom: none;
}

/* Time on the left */
.order-item-time {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--primary);
    min-width: 60px;
    padding-top: 2px;
}

/* Event name on the right */
.order-item-event {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    font-style: italic;
    color: var(--dark);
    font-weight: 300;
}


/* ============================================================
   16 — DRESS CODE SECTION
   Visual color swatches + description text.
   ============================================================ */
.dresscode {
    padding: var(--section-padding) 0;
    background: var(--secondary);
    text-align: center;
}

/* "Garden Formal" theme label */
.dresscode-theme {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.3rem, 3vw, 2rem);
    font-style: italic;
    font-weight: 300;
    color: var(--primary);
    margin-bottom: clamp(12px, 2vw, 20px);
}

/* Description text */
.dresscode-description {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-body);
    font-weight: 300;
    color: var(--muted);
    max-width: 560px;
    margin: 0 auto clamp(30px, 5vw, 50px);
    line-height: 1.8;
}

/* Color swatches row */
.dresscode-swatches {
    display: flex;
    justify-content: center;
    gap: clamp(16px, 3vw, 32px);
    flex-wrap: wrap;
}

/* Individual swatch */
.swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* The colored circle */
.swatch-circle {
    width: clamp(50px, 8vw, 72px);
    height: clamp(50px, 8vw, 72px);
    border-radius: 50%;
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(44, 44, 44, 0.08);
    transition: transform var(--transition-fast);
}

.swatch:hover .swatch-circle {
    transform: scale(1.08);
}

/* Color name label below circle */
.swatch-label {
    font-family: 'Jost', sans-serif;
    font-size: 0.62rem;
    font-weight: 300;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--muted);
}


/* ── GROUPED DRESS CODE (3-column layout) ────────────────────── */
.dresscode-groups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 2vw, 24px);
    max-width: 860px;
    margin: 0 auto;
}

.dresscode-group {
    background: var(--white);
    border: 1px solid var(--border);
    padding: clamp(20px, 3vw, 32px) clamp(14px, 2vw, 24px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 1.5vw, 16px);
}

.dresscode-group-label {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--primary);
    text-align: center;
    line-height: 1.5;
}

.dresscode-group-instruction {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(0.85rem, 1.6vw, 1rem);
    font-style: italic;
    font-weight: 300;
    color: var(--muted);
    text-align: center;
    line-height: 1.6;
}

.dresscode-group-swatches {
    display: flex;
    gap: clamp(8px, 1.5vw, 14px);
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .dresscode-groups {
        grid-template-columns: 1fr;
        max-width: 340px;
    }
}


/* ============================================================
   17 — REGISTRY SECTION
   Bank + GCash + Maya cards — minimal, clean.
   ============================================================ */
.registry {
    padding: var(--section-padding) 0;
    background: var(--dark-section);
    text-align: center;
}

/* Message above the cards - on dark section, use light color */
.registry-message {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-style: italic;
    font-weight: 300;
    color: var(--white);
    max-width: 560px;
    margin: 0 auto clamp(30px, 5vw, 50px);
    line-height: 1.8;
}

/* Cards row — stacked on mobile, side by side on tablet+ */
.registry-cards {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2.5vw, 24px);
    align-items: center;
    justify-content: center;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

/* When 2+ cards are visible — row layout on tablet+ */
@media (min-width: 640px) {
    .registry-cards {
        flex-direction: row;
        align-items: stretch;   /* equal height cards */
        flex-wrap: nowrap;      /* always single row on tablet+ */
    }

    /* Each card takes equal width — no max-width cap so 3 fit cleanly */
    .registry-card {
        flex: 1 1 0;
        max-width: none;
        min-width: 0;
    }
}

/* Individual registry card — bank, GCash, or Maya */
.registry-card {
    background: var(--white);
    border: 1px solid var(--border);
    padding: clamp(24px, 4vw, 40px);
    width: 100%;
    max-width: 380px;
    text-align: center;
}

/* Card type label — "Bank Transfer", "GCash", "Maya" */
/* Tiny spaced caps — very subtle, minimal */
.registry-card-type {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 400;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: clamp(12px, 2vw, 18px);
    opacity: 0.8;
}

/* Bank / platform name */
.registry-bank {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 400;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}

/* Account holder name */
.registry-account-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-style: italic;
    font-weight: 300;
    color: var(--dark);
    margin-bottom: clamp(14px, 2vw, 20px);
}

/* Account/mobile number row with copy button */
.registry-number-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--secondary);
    border: 1px solid var(--border);
    padding: clamp(10px, 1.5vw, 14px) clamp(10px, 1.5vw, 16px);
    overflow: hidden;
}

/* The number itself */
.registry-account-number {
    font-family: 'Jost', sans-serif;
    font-size: clamp(0.78rem, 1.4vw, 0.95rem);
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--dark);
    white-space: nowrap;
}

/* Copy button */
.registry-copy-btn {
    font-family: 'Jost', sans-serif;
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--primary);
    border: 1px solid var(--primary);
    padding: 5px 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
    background: none;
    flex-shrink: 0;
}

.registry-copy-btn:hover {
    background: var(--primary);
    color: var(--white);
}

/* QR Code registry card */
.registry-card--qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2vw, 18px);
}

/* QR-only layout — center the single card */
.registry-cards--qr-only {
    justify-content: center;
}

.registry-cards--qr-only .registry-card {
    max-width: 300px;
}

.registry-qr-img {
    width: clamp(140px, 22vw, 220px);
    height: clamp(140px, 22vw, 220px);
    object-fit: contain;
    border: 1px solid var(--border);
    padding: 10px;
    background: var(--white);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.registry-qr-img:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 30px rgba(44, 44, 44, 0.12);
}

.registry-qr-label {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 300;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Subtle "tap to enlarge" hint below label */
.registry-qr-hint {
    font-family: 'Jost', sans-serif;
    font-size: 0.6rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--primary);
    opacity: 0.65;
}

/* ── QR CODE LIGHTBOX ─────────────────────────────────────────
   Full-screen overlay for enlarged QR scanning.
   Tap outside the card or press × to close.
   ──────────────────────────────────────────────────────────── */
.qr-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(44, 30, 16, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 5vw, 60px);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: qr-fade-in 0.22s ease;
}

@keyframes qr-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.qr-lightbox-close {
    position: fixed;
    top: clamp(16px, 3vw, 28px);
    right: clamp(16px, 3vw, 28px);
    width: 44px;
    height: 44px;
    background: var(--white);
    border: 1px solid var(--border);
    color: var(--dark);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), color var(--transition-fast);
    z-index: 2001;
}

.qr-lightbox-close:hover {
    background: var(--dark);
    color: var(--white);
}

.qr-lightbox-inner {
    background: var(--white);
    border: 1px solid var(--border);
    padding: clamp(24px, 5vw, 48px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 3vw, 28px);
    max-width: 440px;
    width: 100%;
    animation: qr-slide-up 0.25s ease;
}

@keyframes qr-slide-up {
    from { transform: translateY(12px); opacity: 0.6; }
    to   { transform: translateY(0);   opacity: 1;   }
}

.qr-lightbox-img {
    width: min(80vw, 80vh, 340px);
    height: min(80vw, 80vh, 340px);
    object-fit: contain;
    display: block;
}

.qr-lightbox-label {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 300;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Confirmation text after copy */
.registry-copy-confirm {
    font-family: 'Jost', sans-serif;
    font-size: 0.72rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: var(--primary);
    margin-top: 10px;
}

/* Optional online registry link button */
.registry-link-btn {
    display: inline-block;
    margin-top: clamp(20px, 3vw, 30px);
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    padding: 12px 28px;
    transition: all var(--transition-med);
}

.registry-link-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}


/* ============================================================
   18 — FAQs SECTION
   Expandable accordion items.
   ============================================================ */
.faqs {
    padding: var(--section-padding) 0;
    background: var(--secondary);
}

/* FAQ list container */
.faqs-list {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

/* Individual FAQ item */
.faq-item {
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

.faq-item:first-child {
    border-top: 1px solid var(--border);
}

/* Question row — clickable */
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(16px, 2.5vw, 22px) 0;
    cursor: pointer;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    font-style: italic;
    font-weight: 300;
    color: var(--dark);
    transition: color var(--transition-fast);
    text-align: left;
    gap: 16px;
}

.faq-question:hover {
    color: var(--primary);
}

/* +/- icon */
.faq-icon {
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--primary);
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.faq-icon.open {
    transform: rotate(45deg);
}

/* Answer text — hidden by default */
.faq-answer {
    display: none;
    padding: 0 0 clamp(16px, 2.5vw, 22px) 0;
    font-family: 'Jost', sans-serif;
    font-size: var(--text-body);
    font-weight: 300;
    color: var(--muted);
    line-height: 1.8;
    text-align: left;
}

.faq-answer.open {
    display: block;
}


/* ============================================================
   19 — RSVP SECTION
   Full form. Submits to Google Sheets via Apps Script.
   ============================================================ */
.rsvp {
    padding: var(--section-padding) 0;
    background: var(--white);
    position: relative;
}

/* Botanical decoration at top of RSVP section */
.rsvp-botanical {
    color: var(--primary);
    opacity: 0.2;
    text-align: center;
    margin-bottom: clamp(-10px, -2vw, -20px);
    pointer-events: none;
}

.rsvp-botanical svg {
    width: clamp(200px, 50vw, 400px);
    margin: 0 auto;
}

/* RSVP deadline notice */
.rsvp-deadline {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-body);
    font-weight: 300;
    color: var(--muted);
    margin-bottom: clamp(30px, 5vw, 50px);
}

.rsvp-deadline strong {
    color: var(--primary);
    font-weight: 400;
}

/* ── RSVP Button Choice UI ──────────────────────────────── */

/* Outer wrapper replacing the old form */
.rsvp-choice {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 var(--container-pad);
    text-align: center;
}

/* Step 1 — the two main choice buttons */
.rsvp-buttons {
    animation: fadeInUp 0.6s ease forwards;
}

/* Prompt text above the buttons */
.rsvp-choice-prompt {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    font-style: italic;
    font-weight: 300;
    color: var(--muted);
    margin-bottom: clamp(28px, 5vw, 44px);
    letter-spacing: 0.03em;
}

/* Row that holds both buttons side-by-side */
.rsvp-btn-row {
    display: flex;
    gap: clamp(14px, 3vw, 24px);
    justify-content: center;
    flex-wrap: wrap;
}

/* Base card button */
.rsvp-choice-btn {
    flex: 1;
    min-width: 200px;
    max-width: 260px;
    padding: clamp(28px, 5vw, 44px) clamp(16px, 3vw, 28px);
    background: var(--secondary);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.35s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
}

.rsvp-choice-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary);
    transform: scaleX(0);
    transition: transform 0.35s ease;
    transform-origin: center;
}

.rsvp-choice-btn:hover::after,
.rsvp-choice-btn:focus::after {
    transform: scaleX(1);
}

.rsvp-choice-btn:hover,
.rsvp-choice-btn:focus {
    border-color: var(--primary);
    background: var(--white);
    outline: none;
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.06);
}

/* Visible focus ring for keyboard-only navigation */
.rsvp-choice-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* Icon inside each button */
.rsvp-choice-btn-icon {
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: var(--primary);
    line-height: 1;
    transition: transform 0.35s ease;
}

.rsvp-choice-btn:hover .rsvp-choice-btn-icon {
    transform: scale(1.15);
}

/* Label inside each button */
.rsvp-choice-btn-label {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--dark);
    transition: color 0.35s ease;
}

.rsvp-choice-btn:hover .rsvp-choice-btn-label {
    color: var(--primary);
}

/* Decline button — slightly muted by default */
.rsvp-choice-btn--decline .rsvp-choice-btn-icon {
    color: var(--muted);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
}

.rsvp-choice-btn--decline .rsvp-choice-btn-label {
    color: var(--muted);
}

.rsvp-choice-btn--decline:hover .rsvp-choice-btn-label,
.rsvp-choice-btn--decline:hover .rsvp-choice-btn-icon {
    color: var(--dark);
}

.rsvp-choice-btn--decline::after {
    background: var(--muted);
}


/* ── Step 2 — Meal Selection ────────────────────────────── */

.rsvp-step-2 {
    animation: fadeInUp 0.5s ease forwards;
}

.rsvp-step-2-sub {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-body);
    font-weight: 300;
    color: var(--muted);
    margin-bottom: clamp(24px, 4vw, 40px);
    letter-spacing: 0.05em;
}

/* Meal option pill buttons */
.rsvp-meal-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 380px;
    margin: 0 auto clamp(24px, 4vw, 36px);
}

.rsvp-meal-btn {
    width: 100%;
    padding: clamp(14px, 2vw, 18px) clamp(20px, 3vw, 28px);
    background: var(--secondary);
    border: 1px solid var(--border);
    color: var(--dark);
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.rsvp-meal-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 2px;
    background: var(--primary);
    transform: scaleY(0);
    transition: transform 0.3s ease;
    transform-origin: center;
}

.rsvp-meal-btn:hover,
.rsvp-meal-btn:focus {
    border-color: var(--primary);
    background: var(--white);
    color: var(--primary);
    outline: none;
    padding-left: clamp(26px, 4vw, 38px);
}

.rsvp-meal-btn:hover::before,
.rsvp-meal-btn:focus::before {
    transform: scaleY(1);
}

/* Back link */
.rsvp-back-btn {
    background: none;
    border: none;
    font-family: 'Jost', sans-serif;
    font-size: 0.7rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    color: var(--muted);
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.25s ease;
    text-transform: uppercase;
    margin-top: 8px;
}

.rsvp-back-btn:hover {
    color: var(--dark);
}

/* Success state — shown after form submission */
.rsvp-success {
    text-align: center;
    padding: clamp(40px, 7vw, 80px) var(--container-pad);
    animation: fadeInUp 0.8s ease forwards;
}

.rsvp-success-icon {
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--primary);
    margin-bottom: clamp(16px, 2.5vw, 24px);
}

.rsvp-success-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-style: italic;
    font-weight: 300;
    color: var(--dark);
    margin-bottom: 12px;
}

.rsvp-success-message {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-body);
    font-weight: 300;
    color: var(--muted);
    line-height: 1.8;
}

/* ── Group summary shown on success screen ── */
.rsvp-group-summary {
    margin-top: clamp(28px, 4vw, 40px);
    text-align: left;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

.rsvp-summary-label {
    font-family: 'Jost', sans-serif;
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
    text-align: center;
    margin-bottom: 16px;
}

.rsvp-summary-list {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.rsvp-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    gap: 12px;
    border-bottom: 1px solid var(--border);
}

.rsvp-summary-row:last-child {
    border-bottom: none;
}

.rsvp-summary-name {
    font-family: 'Jost', sans-serif;
    font-size: 0.85rem;
    font-weight: 300;
    color: var(--dark);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rsvp-summary-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Jost', sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    white-space: nowrap;
    padding: 3px 10px;
    border-radius: 20px;
    flex-shrink: 0;
}

.rsvp-summary-attending {
    background: rgba(201, 169, 110, 0.1);
    color: var(--primary);
    border: 1px solid rgba(201, 169, 110, 0.3);
}

.rsvp-summary-declined {
    background: rgba(140, 123, 107, 0.08);
    color: var(--muted);
    border: 1px solid var(--border);
}

.rsvp-summary-pending {
    background: transparent;
    color: var(--muted);
    border: 1px dashed var(--border);
    opacity: 0.75;
}

.rsvp-summary-icon {
    font-size: 0.65rem;
}


/* ============================================================
   19b — RSVP COMPANION / CONFIRM STYLES
   Companion rows, Yes/No buttons, confirm button, children
   counter — all injected dynamically by script.js initRSVP().
   ============================================================ */

/* Selected state for the main JOYFULLY ACCEPTS / REGRETFULLY DECLINES cards */
.rsvp-choice-btn--selected {
    border-color: var(--primary) !important;
    background: rgba(201, 169, 110, 0.06) !important;
}

.rsvp-choice-btn--selected .rsvp-choice-btn-icon {
    color: var(--primary);
}

/* "And for your group?" section */
.rsvp-companions {
    margin-top: clamp(24px, 4vw, 36px);
    animation: fadeInUp 0.4s ease forwards;
}

.rsvp-companions-label {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: clamp(12px, 2vw, 18px);
    text-align: center;
}

/* One companion per row — name on left, Yes/No on right */
.rsvp-companion-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: var(--white);
    margin-bottom: 0.5rem;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.rsvp-companion-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    font-weight: 300;
    color: var(--dark);
    flex: 1;
    text-align: left;
}

.rsvp-companion-btns {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

/* Compact Yes / No pill buttons for each companion */
.rsvp-companion-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: transparent;
    font-family: 'Jost', sans-serif;
    font-size: 0.7rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.rsvp-companion-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.rsvp-companion-btn-icon {
    font-size: 0.55rem;
    color: var(--primary);
}

/* Yes button selected */
.rsvp-companion-yes.rsvp-companion-btn--selected {
    border-color: var(--primary);
    background: rgba(201, 169, 110, 0.08);
    color: var(--primary);
}

/* No button selected */
.rsvp-companion-no.rsvp-companion-btn--selected {
    border-color: var(--muted);
    background: rgba(140, 123, 107, 0.06);
    color: var(--muted);
}

/* Read-only status badge (already-responded companions) */
.rsvp-status-badge {
    font-family: 'Jost', sans-serif;
    font-size: 0.68rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.3rem 0.75rem;
    border-radius: 2px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.rsvp-status-confirmed {
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(92, 16, 16, 0.06);
}
.rsvp-status-declined {
    color: var(--muted);
    border-color: var(--border);
    background: transparent;
}

/* +1 and children wrapper reuse companion styles */
.rsvp-plusone-wrap,
.rsvp-children-wrap {
    margin-top: clamp(16px, 2.5vw, 24px);
    animation: fadeInUp 0.3s ease forwards;
}

/* Children counter — − 0 + */
.rsvp-children-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}

.rsvp-counter-btn {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: transparent;
    font-size: 1.1rem;
    color: var(--primary);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.rsvp-counter-btn:hover {
    border-color: var(--primary);
    background: rgba(201, 169, 110, 0.08);
}

.rsvp-counter-val {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--dark);
    min-width: 1.5rem;
    text-align: center;
}

.rsvp-counter-label {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
    margin-bottom: 0.5rem;
}

/* Confirm RSVP button */
.rsvp-confirm-wrap {
    margin-top: clamp(24px, 4vw, 36px);
    text-align: center;
    animation: fadeInUp 0.3s ease forwards;
}

.rsvp-confirm-btn {
    display: inline-block;
    padding: 0.85rem 2.5rem;
    border: 1px solid var(--primary);
    border-radius: 2px;
    background: transparent;
    font-family: 'Jost', sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--primary);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}

.rsvp-confirm-btn:hover {
    background: var(--primary);
    color: var(--white);
}

/* ── at-img-wrap / at-img-overlay — JS-injected photo protection ──────
   script.js wraps every <img> in .at-img-wrap and places a transparent
   .at-img-overlay on top. The overlay intercepts all pointer events so
   right-click, drag, and long-press save never reach the image itself.   */
.at-img-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
    overflow: hidden;
    -webkit-touch-callout: none;
}

.at-img-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: transparent;
    pointer-events: all;
    touch-action: none;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
}

/* ── Keepsake download button ────────────────────────────────────────── */
.footer-keepsake {
    margin: 2rem 0 1.5rem;
    text-align: center;
}

.keepsake-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Jost', sans-serif;
    font-size: 0.72rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0.65rem 1.5rem;
    border-radius: 2px;
    cursor: pointer;
    transition: border-color 0.3s ease, color 0.3s ease;
}

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

.keepsake-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.keepsake-icon {
    font-size: 0.6rem;
    color: var(--primary);
    opacity: 0.8;
}

.keepsake-hint {
    font-family: 'Jost', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.2);
    margin-top: 0.5rem;
    font-weight: 300;
}


/* ============================================================
   20 — FOOTER
   Thank you message, couple names, watermark, admin link.
   ============================================================ */
.footer {
    padding: var(--section-padding) 0 clamp(40px, 6vw, 70px);
    background: var(--dark);
    text-align: center;
}

/* Botanical decoration at top of footer */
.footer-botanical {
    color: rgba(201, 169, 110, 0.25);
    text-align: center;
    margin-bottom: clamp(20px, 3vw, 32px);
    pointer-events: none;
}

.footer-botanical svg {
    width: clamp(200px, 50vw, 360px);
    margin: 0 auto;
}

.footer-content {
    padding: 0 var(--container-pad);
}

/* Couple names in footer */
.footer-couple {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 5vw, 3.5rem);
    font-style: italic;
    font-weight: 300;
    color: var(--white);
    margin-bottom: 8px;
}

/* Date in footer */
.footer-date {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 300;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: clamp(20px, 3vw, 32px);
}

/* Gold divider in footer */
.footer-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 auto clamp(24px, 4vw, 40px);
    max-width: 200px;
}

.footer-divider span:first-child,
.footer-divider span:last-child {
    flex: 1;
    height: 1px;
    background: rgba(201, 169, 110, 0.3);
    display: block;
}

.footer-diamond {
    color: var(--primary);
    font-size: 0.4rem;
    opacity: 0.6;
}

/* Thank you message */
.footer-thanks {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-body);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.9;
    margin-bottom: clamp(20px, 3vw, 32px);
}

/* Bible verse / quote */
.footer-verse {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    font-style: italic;
    color: rgba(255, 255, 255, 0.25);
    line-height: 1.9;
    max-width: 480px;
    margin: 0 auto clamp(30px, 5vw, 50px);
}

.footer-verse-ref {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: 0.65rem;
    font-style: normal;
    letter-spacing: 0.2em;
    margin-top: 10px;
    opacity: 0.6;
}

/* AT Studio watermark */
.footer-watermark {
    margin-bottom: 14px;
}

.footer-watermark a {
    font-family: 'Jost', sans-serif;
    font-size: 0.62rem;
    font-weight: 300;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.2);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-watermark a:hover {
    color: var(--primary);
}

/* Logo watermark variant */
.footer-watermark-logo {
    display: block;
    height: 28px;             /* subtle — credit, not advertisement */
    width: auto;
    opacity: 0.30;            /* ghosted to match the delicate text watermark above */
    filter: brightness(0) invert(1) grayscale(1); /* renders white on dark footer, theme-neutral */
    transition: opacity 0.3s ease;
}

.footer-watermark a:hover .footer-watermark-logo {
    opacity: 0.70;            /* lifts gently on hover */
}

/* Copyright line */
.footer-copyright {
    font-family: 'Jost', sans-serif;
    font-size: 0.58rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.12);
}

/* Hidden admin link — discreet dot */
.footer-admin-link {
    display: inline-block;
    margin-top: 16px;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: color var(--transition-fast);
    text-decoration: none;
}

.footer-admin-link:hover {
    color: var(--primary);
}


/* ============================================================
   20b — MUSIC PLAYER
   Fixed bottom bar. Shows only when musicUrl is configured.
   Slides up from the bottom on page load after a short delay.
   ============================================================ */
.music-player {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: rgba(26, 10, 10, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(201, 169, 110, 0.25);
    padding: clamp(10px, 1.5vw, 14px) clamp(16px, 3vw, 32px);
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 20px);

    /* Starts hidden below the screen */
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.6s ease;
}

/* Visible state — added by script.js after delay */
.music-player.visible {
    transform: translateY(0);
    opacity: 1;
}

/* Play/pause button */
.music-play-btn {
    width: clamp(36px, 5vw, 44px);
    height: clamp(36px, 5vw, 44px);
    border-radius: 50%;
    border: 1px solid rgba(201, 169, 110, 0.5);
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.music-play-btn:hover {
    background: rgba(201, 169, 110, 0.15);
    border-color: var(--primary);
}

.music-play-icon {
    font-size: clamp(0.65rem, 1.2vw, 0.8rem);
    color: var(--primary);
    display: block;
    line-height: 1;
    padding-left: 2px;  /* optical center for play triangle */
}

/* Song info */
.music-info {
    flex: 1;
    min-width: 0;    /* allows truncation */
}

.music-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(0.85rem, 1.8vw, 1rem);
    font-style: italic;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.music-artist {
    font-family: 'Jost', sans-serif;
    font-size: 0.62rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Animated sound wave bars */
.music-wave {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 20px;
    flex-shrink: 0;
}

.music-wave span {
    display: block;
    width: 3px;
    height: 4px;
    background: rgba(201, 169, 110, 0.35);
    border-radius: 2px;
    transition: background var(--transition-fast);
}

/* Wave animation — only plays when music is playing */
.music-wave.playing span {
    background: var(--primary);
    animation: musicWave 1.2s ease-in-out infinite;
}

.music-wave.playing span:nth-child(1) { animation-delay: 0s;    animation-duration: 1.1s; }
.music-wave.playing span:nth-child(2) { animation-delay: 0.15s; animation-duration: 0.9s; }
.music-wave.playing span:nth-child(3) { animation-delay: 0.3s;  animation-duration: 1.3s; }
.music-wave.playing span:nth-child(4) { animation-delay: 0.1s;  animation-duration: 1.0s; }
.music-wave.playing span:nth-child(5) { animation-delay: 0.2s;  animation-duration: 1.2s; }

/* Pad the footer a bit when music player is visible */
.music-player.visible ~ footer,
body.has-music-player .footer {
    padding-bottom: calc(var(--section-padding) + 60px);
}

@keyframes musicWave {
    0%, 100% { height: 4px;  }
    50%       { height: 18px; }
}


/* ============================================================
   21 — SCROLL REVEAL ANIMATIONS
   Elements with class "reveal" fade in as they enter the viewport.
   Triggered by the Intersection Observer in script.js.
   ============================================================ */

/* Initial hidden state — elements start invisible and shifted down */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Visible state — added by script.js when element enters view */
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger effect — each sequential reveal item waits a bit longer */
.reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal:nth-child(4) { transition-delay: 0.3s; }
.reveal:nth-child(5) { transition-delay: 0.4s; }


/* ============================================================
   22 — RESPONSIVE — TABLET (768px+)
   ============================================================ */
@media (min-width: 768px) {

    /* Navigation — show links, hide hamburger */
    .nav-hamburger { display: none; }
    .nav-links {
        display: flex !important;   /* override mobile hidden state */
        position: static;
        background: none;
        box-shadow: none;
        padding: 0;
        flex-direction: row;
    }

    /* Schedule cards — side by side */
    .schedule-cards {
        flex-direction: row;
    }

    /* Gallery — 3 columns */
    .gallery-grid {
        column-count: 3;
    }

    /* Timeline — alternating layout activates */
    .timeline::before {
        display: block;
    }

    /* Party members — larger circles */
    .party-member-initials,
    .party-member-photo {
        width: 80px;
        height: 80px;
    }
}


/* ============================================================
   23 — RESPONSIVE — DESKTOP (1024px+)
   ============================================================ */
@media (min-width: 1024px) {

    /* Gallery — 3 columns, wider gaps */
    .gallery-grid {
        column-count: 3;
        column-gap: 20px;
    }

    /* Timeline — full alternating layout with center line */
    .timeline-item {
        flex-direction: row;
    }

    .timeline-item:nth-child(even) {
        flex-direction: row-reverse;
    }

    /* Party — larger circles */
    .party-member-initials,
    .party-member-photo {
        width: 90px;
        height: 90px;
    }
}


/* ============================================================
   24 — RESPONSIVE — LARGE DESKTOP (1440px+)
   ============================================================ */
@media (min-width: 1440px) {

    /* Gallery — 4 columns */
    .gallery-grid {
        column-count: 4;
    }
}


/* ============================================================
   25 — RESPONSIVE — TV / ULTRA WIDE (1920px+)
   ============================================================ */
@media (min-width: 1920px) {

    /* Container max width grows slightly */
    :root {
        --container-max: 1400px;
    }

    /* Gallery — 4 columns with larger gaps */
    .gallery-grid {
        column-count: 4;
        column-gap: 24px;
    }
}


/* ============================================================
   26 — RESPONSIVE — MOBILE ONLY (max 767px)
   Hamburger menu + mobile-specific layout adjustments.
   ============================================================ */
@media (max-width: 767px) {
    /* Global dark backdrop for open mobile menu */
    body.menu-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(26, 10, 10, 0.97);
        z-index: 1290;
        pointer-events: none;
    }

    /* Ensure the mobile nav overlay sits above music player and all page layers */
    body.menu-open .nav {
        z-index: 1300;
    }


    /* Show hamburger button */
    .nav-hamburger {
        display: flex;
    }

    /* Nav links — fullscreen overlay when open */
    .nav-links {
        display: none;              /* hidden by default */
        position: fixed;
        inset: 0;
        background: rgba(26, 10, 10, 0.97);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 32px;
        z-index: 1100;
    }

    /* Show nav links when menu is open */
    .nav-links.open {
        display: flex;
        animation: fadeIn 0.3s ease forwards;
        background: rgba(26, 10, 10, 0.97);
    }

    body.menu-open #nav-links {
        display: flex !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(26, 10, 10, 0.97) !important;
    }

    /* CRITICAL: When menu is open, remove backdrop-filter from nav.
       backdrop-filter creates a stacking context that traps position:fixed
       children on iOS/Android, preventing the overlay from covering the screen */
    body.menu-open .nav {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Keep brand and hamburger visible above the overlay */
    body.menu-open .nav .nav-brand {
        color: var(--white) !important;
        position: relative;
        z-index: 1500;
    }

    body.menu-open .nav .nav-hamburger span {
        background: var(--white) !important;
    }

    /* iOS Safari fix — prevents page jump when menu locks scroll */
    body.menu-open {
        overflow: hidden;
        /* No position:fixed — we handle scroll lock purely in JS */
    }

    /* Nav links are white on the dark overlay */
    .nav-links .nav-link {
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.75rem;
        letter-spacing: 0.4em;
    }

    .nav-links .nav-link:hover {
        color: var(--primary);
    }

    /* Timeline — single column on mobile */
    .timeline::before { display: none; }
    .timeline-dot     { display: none; }

    .timeline-item,
    .timeline-item:nth-child(even) {
        flex-direction: column;
        text-align: center;
    }

    .timeline-photo {
        max-width: 100%;
    }

    .timeline-text,
    .timeline-item:nth-child(even) .timeline-text {
        text-align: center;
    }

    /* Party — reduce gap */
    .party-rows {
        gap: 30px;
    }

    /* Gallery — 2 columns */
    .gallery-grid {
        column-count: 2;
    }

    /* Schedule buttons — stack on mobile */
    .schedule-map-btn,
    .schedule-ics-btn {
        display: block;
        margin-left: 0;
        margin-bottom: 10px;
        width: 100%;
        text-align: center;
    }

    /* Music player — tighter on small screens */
    .music-player {
        padding: 10px 14px;
    }

    .music-artist {
        display: none;    /* hide artist name on very small screens */
    }

    /* Keep lightbox controls visible and image centered on small screens */
    .lightbox-content {
        top: 52px;
        bottom: 60px;
        padding: 0 40px;
    }

    body.has-music-player .lightbox-content {
        bottom: 120px;
    }

    body.has-music-player .lightbox-counter {
        bottom: 72px;
    }

    .lightbox-close {
        top: 10px;
        right: 10px;
    }

    .lightbox-prev { left: 4px; }
    .lightbox-next { right: 4px; }
}


/* ============================================================
   LANDSCAPE MOBILE (max height 500px)
   Special handling for phones held sideways.
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {

    .hero {
        min-height: 100vh;
    }

    .hero-content {
        padding-top: 60px;
    }

    .hero-groom,
    .hero-bride {
        font-size: clamp(2rem, 8vh, 4rem);
    }
}


/* ============================================================
   GLOBAL KEYFRAME ANIMATIONS
   Used throughout all sections.
   ============================================================ */

/* Fade up from below */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Simple fade in */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Bouncing dots */
@keyframes bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%            { transform: scale(1.0); opacity: 1;   }
}

/* Scroll line pulse */
@keyframes scrollLine {
    0%   { height: 0;                     opacity: 0; }
    50%  { height: clamp(30px, 5vw, 50px); opacity: 1; }
    100% { height: clamp(30px, 5vw, 50px); opacity: 0; }
}

/* Loader bar fill */
@keyframes loaderFill {
    from { width: 0%;   }
    to   { width: 100%; }
}

/* ============================================================
   AT STUDIO — PREMIUM WEDDING TEMPLATE
   style.css — Main Stylesheet
   © 2025 AT Studio. All Rights Reserved.
   Unauthorized copying or redistribution is prohibited.
   ============================================================ */

/* ============================================================
   01c — OLD MONEY THEME ENHANCEMENTS
   Applied on top of the base Minimalist template.
   Adds: lace dividers, paper texture, refined typography,
   section treatment, burgundy accent details.
   ============================================================ */

/* ── Google Fonts: add Playfair Display for old-money headings ──
   Import at top of HTML before stylesheets:
   <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Jost:wght@300;400&display=swap" rel="stylesheet">
   ─────────────────────────────────────────────────────────── */

/* ── Paper / Parchment texture overlay on body ─────────────────
   Adds subtle aged-paper grain across the whole page.          */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* ── Section headings: Playfair Display for richer old money feel */
h1, h2, h3, h4 {
    font-family: 'Playfair Display', 'Cormorant Garamond', serif;
}

.section-title {
    font-family: 'Playfair Display', 'Cormorant Garamond', serif;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* ── Section label: refined spaced caps in burgundy ─────────── */
.section-label {
    color: var(--primary);
    letter-spacing: 0.45em;
    opacity: 0.85;
}

/* ── Lace SVG Divider ────────────────────────────────────────── */
/* Used between sections as a decorative element.
   Add to HTML:  <div class="lace-divider" aria-hidden="true"></div>  */
.lace-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 700px;
    overflow: hidden;
    line-height: 0;
    opacity: 0.35;
    color: var(--primary);
}

.lace-divider svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Standalone lace block with spacing — drop between any two sections */
.lace-divider-section {
    padding: 0;
    margin: 0;
    background: transparent;
    position: relative;
    z-index: 1;
    pointer-events: none;
}

/* ── Gold divider → upgraded to burgundy wine rule ──────────── */
.gold-divider::before,
.gold-divider::after {
    background: var(--primary);
    opacity: 0.35;
}

/* ── Nav scrolled: warm parchment background ─────────────────── */
.nav.scrolled {
    background: rgba(245, 237, 224, 0.97);
    box-shadow: 0 1px 0 var(--border), 0 2px 16px rgba(44, 26, 26, 0.08);
}

/* ── Hero: burgundy vignette at bottom edge ─────────────────── */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 180px;
    background: linear-gradient(to top, rgba(44, 26, 26, 0.5), transparent);
    z-index: 2;
    pointer-events: none;
}

/* ── Hero botanical corners: burgundy tint ──────────────────── */
.hero-botanical {
    color: var(--primary);
    opacity: 0.22;
}

/* ── Hero ampersand line: warm burgundy ─────────────────────── */
.hero-line {
    background: rgba(122, 28, 28, 0.45);
}

.hero-ampersand {
    color: rgba(255, 253, 249, 0.75);
}

/* ── Hero CTA button: old money outlined style ──────────────── */
.hero-cta {
    border: 1px solid rgba(255, 253, 249, 0.55);
    color: rgba(255, 253, 249, 0.9);
    letter-spacing: 0.4em;
    padding: 14px 40px;
    transition: all 0.45s ease;
}

.hero-cta:hover {
    background: rgba(122, 28, 28, 0.75);
    border-color: var(--primary);
    color: var(--white);
}

/* ── Scroll line: burgundy gradient ─────────────────────────── */
.hero-scroll-line {
    background: linear-gradient(to bottom, transparent, rgba(122, 28, 28, 0.7));
}

/* ── Countdown: subtle parchment borders ────────────────────── */
.countdown-unit {
    border-color: var(--border);
    background: transparent;
    position: relative;
}

/* Thin burgundy top accent on countdown boxes */
.countdown-unit::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 20%;
    right: 20%;
    height: 2px;
    background: var(--primary);
    opacity: 0.6;
}

.countdown-sep {
    color: var(--primary);
    opacity: 0.5;
}

/* ── Video frame: burgundy instead of gold ──────────────────── */
.video-frame-outer {
    border-color: rgba(122, 28, 28, 0.30);
    padding: 8px;
}

/* ── Cards: refined parchment with subtle left accent ───────── */
.schedule-card {
    border-left: 3px solid var(--primary);
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--secondary);
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.schedule-card:hover {
    box-shadow: 0 8px 40px rgba(44, 26, 26, 0.09);
    transform: translateY(-2px);
}

/* ── Registry cards: same treatment ─────────────────────────── */
.registry-card {
    border-left: 3px solid var(--primary);
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--secondary);
}

/* ── Dress code groups: old money panel feel ─────────────────── */
.dresscode-group {
    border-left: 3px solid var(--primary);
    background: var(--secondary);
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* ── FAQ items: elegant rule style ─────────────────────────── */
.faq-item {
    border-color: var(--border);
}

.faq-question:hover {
    color: var(--primary);
}

.faq-icon {
    color: var(--primary);
}

/* ── Buttons: old money outlined style (no radius, clean lines) */
.schedule-map-btn,
.rsvp-confirm-btn,
.hero-cta {
    border-radius: 0;
    letter-spacing: 0.35em;
}

.schedule-map-btn:hover,
.rsvp-confirm-btn:hover {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

/* Copy button */
.registry-copy-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
}

/* ── RSVP choice buttons: parchment with burgundy accent ─────── */
.rsvp-choice-btn {
    background: var(--secondary);
    border: 1px solid var(--border);
    border-radius: 0;
    transition: all 0.4s ease;
}

.rsvp-choice-btn::after {
    background: var(--primary);
    height: 3px;
}

.rsvp-choice-btn:hover {
    border-color: var(--primary);
    background: var(--white);
    box-shadow: 0 6px 24px rgba(44, 26, 26, 0.08);
}

/* Selected state */
.rsvp-choice-btn--selected {
    border-color: var(--primary) !important;
    background: rgba(122, 28, 28, 0.04) !important;
}

/* Attending badge: burgundy */
.rsvp-summary-attending {
    background: rgba(122, 28, 28, 0.07);
    color: var(--primary);
    border: 1px solid rgba(122, 28, 28, 0.25);
}

/* ── Gallery: burgundy hover overlay ────────────────────────── */
.gallery-item::after {
    background: rgba(122, 28, 28, 0.12);
}

/* ── Lightbox: dark burgundy-brown overlay ───────────────────── */
.lightbox {
    background: rgba(30, 16, 16, 0.97);
}

.lightbox-img {
    border-color: rgba(122, 28, 28, 0.2);
}

/* ── Timeline dot: burgundy ─────────────────────────────────── */
.timeline-dot {
    background: var(--primary);
    border-color: var(--secondary);
    width: 12px;
    height: 12px;
}

.timeline::before {
    background: linear-gradient(to bottom, transparent, var(--primary), transparent);
    opacity: 0.3;
}

/* ── Footer: very dark burgundy-brown base ───────────────────── */
.footer {
    background-color: var(--dark-section);
    background-image:
        linear-gradient(var(--overlay-dark), var(--overlay-dark)),
        var(--bg-footer);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.footer-botanical {
    color: rgba(122, 28, 28, 0.3);
}

.footer-divider span:first-child,
.footer-divider span:last-child {
    background: rgba(122, 28, 28, 0.4);
}

.footer-diamond {
    color: var(--primary);
}

/* ── Music player: dark burgundy ────────────────────────────── */
.music-player {
    background: rgba(26, 10, 10, 0.97);
    border-top: 1px solid rgba(122, 28, 28, 0.3);
}

.music-play-btn {
    border-color: rgba(122, 28, 28, 0.5);
}

.music-play-btn:hover {
    background: rgba(122, 28, 28, 0.15);
    border-color: var(--primary);
}

/* ── QR lightbox: dark burgundy ─────────────────────────────── */
.qr-lightbox {
    background: rgba(44, 26, 26, 0.88);
}

/* ── Page loader: centered couple name on parchment ─────────── */
.page-loader {
    background: var(--secondary);
}

.loader-bar-fill {
    background: var(--primary);
}

.loader-dots span {
    background: var(--primary);
}

/* ── Loader bar for old money: thicker and centered ─────────── */
.loader-bar {
    height: 2px;
    width: clamp(100px, 22vw, 160px);
}

/* ============================================================
   SECTION ALTERNATION — OLD MONEY BURGUNDY
   Light sections: warm parchment / off-white
   Dark sections:  deep wine burgundy (#3D0C0C)
   ============================================================ */

/* ── Light sections (odd) ───────────────────────────────────── */
.bg-odd  { background: var(--white)     !important; }

/* ── Dark sections (even) — FULL DEEP BURGUNDY ──────────────── */
.bg-even {
    background: var(--dark-section) !important;
}

/* All text on dark sections flips to light */
.bg-even .section-label {
    color: rgba(245, 237, 224, 0.65) !important;
}
.bg-even .section-title {
    color: #F5EDE0 !important;
}
.bg-even .section-subtitle {
    color: rgba(245, 237, 224, 0.70) !important;
}
.bg-even p,
.bg-even li,
.bg-even span:not(.gold-divider-diamond):not(.couple-note-diamond):not(.footer-diamond) {
    color: rgba(245, 237, 224, 0.80) !important;
}
.bg-even h1,
.bg-even h2,
.bg-even h3,
.bg-even h4 {
    color: #F5EDE0 !important;
}

/* Cards inside dark sections get a semi-transparent parchment feel */
.bg-even .schedule-card,
.bg-even .registry-card,
.bg-even .dresscode-group {
    background: rgba(245, 237, 224, 0.08) !important;
    border-color: rgba(245, 237, 224, 0.18) !important;
    border-left-color: rgba(245, 237, 224, 0.40) !important;
}
.bg-even .schedule-card p,
.bg-even .schedule-card h3,
.bg-even .schedule-card span,
.bg-even .registry-card p,
.bg-even .registry-card h3,
.bg-even .registry-card span,
.bg-even .dresscode-group p,
.bg-even .dresscode-group h3 {
    color: #F5EDE0 !important;
}

/* Buttons on dark sections */
.bg-even .schedule-map-btn,
.bg-even .schedule-ics-btn,
.bg-even .registry-copy-btn {
    border-color: rgba(245, 237, 224, 0.45) !important;
    color: #F5EDE0 !important;
    background: transparent !important;
}
.bg-even .schedule-map-btn:hover,
.bg-even .schedule-ics-btn:hover,
.bg-even .registry-copy-btn:hover {
    background: rgba(245, 237, 224, 0.15) !important;
}

/* Gold divider on dark sections */
.bg-even .gold-divider::before,
.bg-even .gold-divider::after {
    background: rgba(245, 237, 224, 0.35) !important;
}
.bg-even .gold-divider-diamond {
    color: rgba(245, 237, 224, 0.60) !important;
}

/* Couple note divider on dark sections */
.bg-even .couple-note-divider span:first-child,
.bg-even .couple-note-divider span:last-child {
    background: rgba(245, 237, 224, 0.30) !important;
}
.bg-even .couple-note-diamond {
    color: rgba(245, 237, 224, 0.55) !important;
}

/* Timeline vertical line on dark sections */
.bg-even .timeline::before {
    background: linear-gradient(to bottom, transparent, rgba(245, 237, 224, 0.30), transparent) !important;
    opacity: 1 !important;
}
.bg-even .timeline-dot {
    background: #F5EDE0 !important;
    border-color: var(--dark-section) !important;
}
.bg-even .timeline-date {
    color: rgba(245, 237, 224, 0.55) !important;
}
.bg-even .timeline-photo img {
    border-color: rgba(245, 237, 224, 0.20) !important;
}

/* FAQ accordion on dark sections */
.bg-even .faq-item {
    border-color: rgba(245, 237, 224, 0.20) !important;
}
.bg-even .faq-question {
    color: #F5EDE0 !important;
}
.bg-even .faq-question:hover {
    color: rgba(245, 237, 224, 0.75) !important;
}
.bg-even .faq-icon {
    color: rgba(245, 237, 224, 0.55) !important;
}
.bg-even .faq-answer {
    color: rgba(245, 237, 224, 0.70) !important;
}

/* RSVP section on dark background */
.bg-even .rsvp-choice-btn {
    background: rgba(245, 237, 224, 0.08) !important;
    border-color: rgba(245, 237, 224, 0.35) !important;
    color: #F5EDE0 !important;
}
.bg-even .rsvp-choice-btn:hover {
    background: rgba(245, 237, 224, 0.15) !important;
}
.bg-even .rsvp-confirm-btn {
    border-color: rgba(245, 237, 224, 0.55) !important;
    color: #F5EDE0 !important;
}
.bg-even .rsvp-confirm-btn:hover {
    background: rgba(245, 237, 224, 0.15) !important;
}

/* Companion rows + status elements on dark (wine) RSVP background */
.bg-even .rsvp-companions-label {
    color: rgba(245, 237, 224, 0.55) !important;
}
.bg-even .rsvp-companion-row {
    background: rgba(245, 237, 224, 0.05) !important;
    border-color: rgba(245, 237, 224, 0.18) !important;
}
.bg-even .rsvp-companion-name {
    color: #F5EDE0 !important;
}
.bg-even .rsvp-companion-btn {
    border-color: rgba(245, 237, 224, 0.28) !important;
    color: rgba(245, 237, 224, 0.65) !important;
    background: transparent !important;
}
.bg-even .rsvp-companion-btn:hover {
    border-color: rgba(245, 237, 224, 0.65) !important;
    color: #F5EDE0 !important;
}
.bg-even .rsvp-companion-btn-icon {
    color: rgba(245, 237, 224, 0.75) !important;
}
.bg-even .rsvp-companion-yes.rsvp-companion-btn--selected {
    border-color: rgba(245, 237, 224, 0.80) !important;
    background: rgba(245, 237, 224, 0.12) !important;
    color: #F5EDE0 !important;
}
.bg-even .rsvp-companion-no.rsvp-companion-btn--selected {
    border-color: rgba(245, 237, 224, 0.35) !important;
    background: rgba(245, 237, 224, 0.06) !important;
    color: rgba(245, 237, 224, 0.50) !important;
}
.bg-even .rsvp-status-badge {
    border-color: rgba(245, 237, 224, 0.25) !important;
    color: rgba(245, 237, 224, 0.60) !important;
    background: transparent !important;
}
.bg-even .rsvp-status-confirmed {
    border-color: rgba(245, 237, 224, 0.55) !important;
    color: rgba(245, 237, 224, 0.90) !important;
    background: rgba(245, 237, 224, 0.08) !important;
}
.bg-even .rsvp-status-declined {
    border-color: rgba(245, 237, 224, 0.20) !important;
    color: rgba(245, 237, 224, 0.40) !important;
}

/* Botanical SVGs on dark sections */
.bg-even .countdown-botanical,
.bg-even .std-botanical,
.bg-even .couple-note-botanical,
.bg-even .rsvp-botanical {
    color: rgba(245, 237, 224, 0.22) !important;
}

/* Countdown units on dark sections */
.bg-even .countdown-unit {
    border-color: rgba(245, 237, 224, 0.22) !important;
}
.bg-even .countdown-unit::before {
    background: rgba(245, 237, 224, 0.40) !important;
}
.bg-even .countdown-number {
    color: #F5EDE0 !important;
}
.bg-even .countdown-label {
    color: rgba(245, 237, 224, 0.60) !important;
}
.bg-even .countdown-sep {
    color: rgba(245, 237, 224, 0.45) !important;
    opacity: 1 !important;
}

/* Video frame on dark sections */
.bg-even .video-frame-outer {
    border-color: rgba(245, 237, 224, 0.22) !important;
}


/* ============================================================
   LACE DIVIDER — Sits BETWEEN sections at the transition edge
   Usage in main.html:
   <div class="lace-divider-wrap" aria-hidden="true">
     <div class="lace-row lace-top">…svg…</div>
   </div>
   ============================================================ */
.lace-divider-wrap {
    position: relative;
    z-index: 2;
    pointer-events: none;
    line-height: 0;
    /* No height — it sits flush between two sections */
}

/* Full-width lace scallop strip — sits at top of dark section */
.lace-row {
    display: block;
    width: 100%;
    overflow: hidden;
}

/* When lace sits on top of a DARK section (scallops face down into section) */
.lace-row--onto-dark {
    color: var(--dark-section);        /* lace color = dark section color */
    background: var(--white); /* the light section color above it */
}
/* When lace sits on top of a LIGHT section (scallops face down into section) */
.lace-row--onto-light {
    color: var(--white);   /* lace = light section color */
    background: var(--dark-section);   /* dark section above it */
}

.lace-row svg {
    display: block;
    width: 100%;
    height: clamp(28px, 4vw, 48px);
}


/* ============================================================
   LACE BORDER DECORATIONS
   Lace-edged card for photo/content blocks (like image 6)
   ============================================================ */
.lace-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border);
    padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px);
    max-width: 600px;
    margin: 0 auto;
}

/* Lace overlay — drawn with repeating radial gradients (CSS-only, no image needed) */
.lace-card::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid var(--border);
    pointer-events: none;
    z-index: 0;
}

.lace-card > * {
    position: relative;
    z-index: 1;
}

/* ── Couple note: large opening quote in burgundy ───────────── */
.couple-note-quote-mark {
    color: var(--primary);
    opacity: 0.18;
}

/* ── Dresscode theme label: burgundy italic ─────────────────── */
.dresscode-theme {
    color: var(--primary);
}

/* ── Mobile menu: very dark burgundy-brown overlay ───────────── */
@media (max-width: 767px) {
    body.menu-open::before {
        background: rgba(26, 10, 10, 0.98);
    }

    .nav-links.open,
    body.menu-open #nav-links {
        background: rgba(26, 10, 10, 0.98) !important;
    }
}


/* ============================================================
   LACE DIVIDER SVG DEFINITION
   ─────────────────────────────────────────────────────────────
   How to use in HTML between any two sections:

   <div class="lace-divider-section" aria-hidden="true">
     <div class="lace-divider">
       <svg viewBox="0 0 800 40" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
         <!-- row of scallop arcs -->
         <path d="M0,40 Q10,10 20,40 Q30,10 40,40 Q50,10 60,40 Q70,10 80,40 Q90,10 100,40 Q110,10 120,40 Q130,10 140,40 Q150,10 160,40 Q170,10 180,40 Q190,10 200,40 Q210,10 220,40 Q230,10 240,40 Q250,10 260,40 Q270,10 280,40 Q290,10 300,40 Q310,10 320,40 Q330,10 340,40 Q350,10 360,40 Q370,10 380,40 Q390,10 400,40 Q410,10 420,40 Q430,10 440,40 Q450,10 460,40 Q470,10 480,40 Q490,10 500,40 Q510,10 520,40 Q530,10 540,40 Q550,10 560,40 Q570,10 580,40 Q590,10 600,40 Q610,10 620,40 Q630,10 640,40 Q650,10 660,40 Q670,10 680,40 Q690,10 700,40 Q710,10 720,40 Q730,10 740,40 Q750,10 760,40 Q770,10 780,40 Q790,10 800,40"
               fill="none" stroke="currentColor" stroke-width="1"/>
         <!-- dot row above scallops -->
         <g fill="currentColor" opacity="0.5">
           <circle cx="20" cy="6" r="1.5"/>
           <circle cx="60" cy="6" r="1.5"/>
           <circle cx="100" cy="6" r="1.5"/>
           <circle cx="140" cy="6" r="1.5"/>
           <circle cx="180" cy="6" r="1.5"/>
           <circle cx="220" cy="6" r="1.5"/>
           <circle cx="260" cy="6" r="1.5"/>
           <circle cx="300" cy="6" r="1.5"/>
           <circle cx="340" cy="6" r="1.5"/>
           <circle cx="380" cy="6" r="1.5"/>
           <circle cx="420" cy="6" r="1.5"/>
           <circle cx="460" cy="6" r="1.5"/>
           <circle cx="500" cy="6" r="1.5"/>
           <circle cx="540" cy="6" r="1.5"/>
           <circle cx="580" cy="6" r="1.5"/>
           <circle cx="620" cy="6" r="1.5"/>
           <circle cx="660" cy="6" r="1.5"/>
           <circle cx="700" cy="6" r="1.5"/>
           <circle cx="740" cy="6" r="1.5"/>
           <circle cx="780" cy="6" r="1.5"/>
         </g>
       </svg>
     </div>
   </div>

   ─────────────────────────────────────────────────────────────
   For an INVERTED lace (scallops pointing up — use on top edge
   of dark sections like footer):
   Add style="transform: rotate(180deg)" on the <div class="lace-divider">
   ============================================================ */


/* ============================================================
   AT STUDIO — PREMIUM WEDDING TEMPLATE
   style.css — Old Money Theme Extension
   © 2025 AT Studio. All Rights Reserved.
   ============================================================ */


/* ============================================================
   LACE SCALLOP TRANSITIONS — bg-even dark sections
   Adds a scalloped lace edge at the top and bottom of every
   dark (bg-even) section, biting into the adjacent light section.
   Pure CSS — no HTML changes needed.
   ============================================================ */

.bg-even {
    position: relative;
    z-index: 2;
    overflow: visible !important;
}

/* Top scallop — dark section bites UP into the light section above */
.bg-even::before {
    content: '';
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    height: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M0,28 Q10,0 20,28 Q30,0 40,28 Z' fill='%233A0A0A'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 40px 28px;
    pointer-events: none;
    z-index: 3;
}

/* Bottom scallop — dark section bites DOWN into the light section below */
.bg-even::after {
    content: '';
    position: absolute;
    bottom: -24px;
    left: 0;
    right: 0;
    height: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M0,0 Q10,28 20,0 Q30,28 40,0 Z' fill='%233A0A0A'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 40px 28px;
    pointer-events: none;
    z-index: 3;
}

/* Light sections sit below dark sections */
.bg-odd {
    position: relative;
    z-index: 1;
}

/* Padding adjustment — give the lace scallops room to breathe */
.bg-even {
    padding-top: calc(var(--section-padding) + 10px);
    padding-bottom: calc(var(--section-padding) + 10px);
}

/* ============================================================
   OLD MONEY TYPOGRAPHY ENHANCEMENTS
   Matches the reference's calligraphic section titles and
   editorial justified body text.
   ============================================================ */

/* ── Section titles: switch to calligraphic script ──────────── */
/* Pinyon Script is loaded via main.html Google Fonts link.
   Falls back to Cormorant Garamond if not loaded. */
.section-title {
    font-family: 'Pinyon Script', 'Cormorant Garamond', serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: clamp(2.4rem, 6vw, 4.2rem) !important;
    letter-spacing: 0.01em;
    line-height: 1.15 !important;
}

/* Section titles on dark sections stay cream */
.bg-even .section-title {
    color: #EDE5D8 !important;
}

/* ── Hero names: keep Cormorant, but slightly heavier ────────── */
.hero-groom,
.hero-bride {
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* ── Body text on light sections: justified editorial feel ───── */
.timeline-description,
.couple-note-message,
.section-subtitle,
.dresscode-description,
.registry-message,
.faq-answer p,
.schedule-card-address,
.footer-thanks,
.footer-verse {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* ── Timeline title: calligraphic script ────────────────────── */
.timeline-title {
    font-family: 'Pinyon Script', 'Cormorant Garamond', serif;
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-style: normal;
}

/* ── Couple note message: larger, more editorial ────────────── */
.couple-note-message {
    font-size: clamp(1rem, 2.2vw, 1.35rem);
    line-height: 2;
}

/* ── Section label: slightly more spaced, refined ───────────── */
.section-label {
    letter-spacing: 0.5em;
    font-size: clamp(0.58rem, 1.1vw, 0.7rem);
}


/* ============================================================
   TEXTURE SYSTEM — OLD MONEY LINEN & VELVET
   Adds paper/fabric texture to both light and dark sections.
   Pure CSS — no image files needed.
   ============================================================ */

/* ── CREAM SECTIONS: linen/paper grain texture ───────────────
   Uses a repeating SVG noise pattern that creates fine vertical
   grain lines, replicating the linen/handmade-paper feel in the
   reference. Layered under the background color.              */
.bg-odd {
    background-image:
        /* Fine vertical linen grain */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(160, 130, 100, 0.03) 2px,
            rgba(160, 130, 100, 0.03) 3px
        ),
        /* Subtle horizontal weave cross-threads */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 8px,
            rgba(140, 110, 80, 0.02) 8px,
            rgba(140, 110, 80, 0.02) 9px
        ) !important;
    background-size: 3px 9px !important;
}

/* ── DARK SECTIONS: velvet/noise texture ─────────────────────
   Uses layered radial gradients and noise to simulate the
   aged velvet / leather look seen in the red reference sections. */
.bg-even {
    background-image:
        /* Subtle noise grain on top */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
        /* Vignette: slightly darker at edges, lighter toward center */
        radial-gradient(
            ellipse at center,
            rgba(80, 10, 10, 0.0) 0%,
            rgba(20, 0, 0, 0.35) 100%
        ) !important;
    background-size: 200px 200px, cover !important;
    background-blend-mode: overlay, normal !important;
}

/* ── CURTAIN DRAPE EFFECT on dark sections ───────────────────
   Replicates the velvet curtain panels visible in the reference.
   Subtle vertical shadow columns that feel like draped fabric.  */
.bg-even::before {
    /* Override: keep the lace scallop but add curtain columns behind it */
    background-image:
        /* Lace scallop (kept) */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M0,28 Q10,0 20,28 Q30,0 40,28 Z' fill='%233A0A0A'/%3E%3C/svg%3E"),
        /* Curtain panel shadows */
        repeating-linear-gradient(
            90deg,
            rgba(0,0,0,0.08) 0px,
            transparent 30px,
            transparent 90px,
            rgba(0,0,0,0.08) 120px
        ) !important;
    background-size: 40px 28px, 120px 100% !important;
    background-repeat: repeat-x, repeat !important;
}


/* ============================================================
   LACE DOILY CARD — registry/gifts section
   Recreates the lace-bordered card from the reference (image 6).
   Applied to the registry section cards on dark backgrounds.
   ============================================================ */
.bg-even .registry-card,
.bg-even .schedule-card {
    position: relative;
    /* Inner double border to simulate doily card frame */
    outline: 1px solid rgba(245, 237, 224, 0.15);
    outline-offset: -8px;
    /* Corner roses using box-shadow layering */
    box-shadow:
        0 0 0 1px rgba(245, 237, 224, 0.12),
        inset 0 0 0 1px rgba(245, 237, 224, 0.08),
        0 8px 40px rgba(0, 0, 0, 0.25) !important;
}

/* ── Decorative corner dots on dark cards (lace corners) ──── */
.bg-even .registry-card::before,
.bg-even .schedule-card::before {
    content: '✦';
    position: absolute;
    top: 10px;
    left: 14px;
    font-size: 0.5rem;
    color: rgba(245, 237, 224, 0.25);
    pointer-events: none;
}

/* ============================================================
   PAPER GRAIN OVERLAY — global subtle noise
   Applied to the whole page body for a unified aged-paper feel.
   ============================================================ */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.018;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 300px 300px;
    mix-blend-mode: multiply;
}

/* ============================================================
   REAL TEXTURE BACKGROUNDS — PHOTO-BASED
   Replaces CSS-only noise with actual velvet + parchment images.
   Files must be in the same folder as style.css:
     velvet-bg2.webp   — dark red curtain/velvet
     bg1.webp         — crumpled cream paper
     bg2.webp         — smooth grey-beige linen
   ============================================================ */

/* ── CREAM / LIGHT sections: crumpled aged paper ─────────────
   bg1.webp is the primary warm cream texture (more aged/dramatic)
   bg2.webp is layered beneath for added depth                  */
.bg-odd {
    background-color: var(--white) !important;
    background-image:
        url('assets/images/bg22.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-blend-mode: multiply !important;
}

/* ── DARK / BURGUNDY sections: CSS variable defaults ─────────
   script.js reads config.sectionBackgrounds and sets these
   CSS variables at runtime. Fallback = velvet-bg2.webp.
   Each section gets its own image from config.js.            */

/* CSS variable defaults — overridden by script.js at runtime */
:root {
    --bg-countdown:  url('assets/images/velvet-bg2.webp');
    --bg-save-date:  url('assets/images/oldmoney1.webp');
    --bg-couple-note: url('assets/images/velvet-bg2.webp');
    --bg-our-story:  url('assets/images/wine2.webp');
    --bg-gallery:    url('assets/images/oldmoney2.webp');
    --bg-party:      url('assets/images/wine2.webp');
    --bg-schedule:   url('assets/images/velvet-bg2.webp');
    --bg-dresscode:  url('assets/images/velvet-bg2.webp');
    --bg-registry:   url('assets/images/oldmoney2.webp');
    --bg-faqs:       url('assets/images/wine3.webp');
    --bg-rsvp:       url('assets/images/velvet-bg2.webp');
    --bg-footer:     url('assets/images/wine1.webp');
    --overlay-dark:  rgba(20, 4, 4, 0.65);
}

/* Base rule — fallback for any bg-even without a matching ID */
.bg-even {
    background-color: var(--dark-section) !important;
    background-image:
        linear-gradient(var(--overlay-dark), var(--overlay-dark)),
        url('assets/images/velvet-bg2.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Per-section backgrounds — each uses its own --bg-* variable */
#countdown.bg-even {
    background-color: var(--dark-section) !important;
    background-image:
        linear-gradient(var(--overlay-dark), var(--overlay-dark)),
        var(--bg-countdown) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

#save-the-date.bg-even {
    background-color: var(--dark-section) !important;
    background-image:
        linear-gradient(var(--overlay-dark), var(--overlay-dark)),
        var(--bg-save-date) !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
}

#couple-note.bg-even {
    background-color: var(--dark-section) !important;
    background-image:
        linear-gradient(var(--overlay-dark), var(--overlay-dark)),
        var(--bg-couple-note) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

#our-story.bg-even {
    background-color: var(--dark-section) !important;
    background-image:
        linear-gradient(var(--overlay-dark), var(--overlay-dark)),
        var(--bg-our-story) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

#gallery.bg-even {
    background-color: var(--dark-section) !important;
    background-image:
        linear-gradient(var(--overlay-dark), var(--overlay-dark)),
        var(--bg-gallery) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

#wedding-party.bg-even {
    background-color: var(--dark-section) !important;
    background-image:
        linear-gradient(var(--overlay-dark), var(--overlay-dark)),
        var(--bg-party) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

#dresscode.bg-even {
    background-color: var(--dark-section) !important;
    background-image:
        linear-gradient(var(--overlay-dark), var(--overlay-dark)),
        var(--bg-dresscode) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

#registry.bg-even {
    background-color: var(--dark-section) !important;
    background-image:
        linear-gradient(var(--overlay-dark), var(--overlay-dark)),
        var(--bg-registry) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

#faqs.bg-even {
    background-color: var(--dark-section) !important;
    background-image:
        linear-gradient(var(--overlay-dark), var(--overlay-dark)),
        var(--bg-faqs) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

#schedule.bg-even {
    background-color: var(--dark-section) !important;
    background-image:
        linear-gradient(var(--overlay-dark), var(--overlay-dark)),
        var(--bg-schedule) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

#rsvp.bg-even {
    background-color: var(--dark-section) !important;
    background-image:
        linear-gradient(var(--overlay-dark), var(--overlay-dark)),
        var(--bg-rsvp) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* ── Page loader: smooth linen bg2 ───────────────────────────  */
.page-loader {
    background-color: var(--secondary) !important;
    background-image: url('assets/images/bg22.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-blend-mode: multiply !important;
}

/* ── Body base: smooth linen bg2 for non-alternating areas ─── */
body {
    background-color: var(--secondary) !important;
    background-image: url('assets/images/bg22.webp') !important;
    background-size: 100% auto !important;
    background-attachment: fixed !important;
    background-blend-mode: multiply !important;
}


/* ============================================================
   LACE DOILY — "The Details" badge + section accents
   lace-doilly3-transparent.png (oval with bow — star pick)
   lace-doilly1-transparent.png (simple round — for dividers)
   ============================================================ */

/* ── Lace doily badge — floats above dark/light transition ─── */
.lace-badge-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0 auto clamp(-20px, -2vw, -30px);
    z-index: 10;
    pointer-events: none;
}

.lace-badge-img {
    width: clamp(90px, 14vw, 140px);
    height: auto;
    opacity: 0.82;
    filter: drop-shadow(0 4px 16px rgba(44,26,26,0.22));
}

/* ── Round lace doily divider — between sections ─────────────
   Centered decorative accent at section header               */
.lace-doily-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto clamp(16px, 2vw, 24px);
    position: relative;
    z-index: 5;
    pointer-events: none;
    padding-top: clamp(24px, 3vw, 36px);
}

.lace-doily-divider img {
    width: clamp(50px, 8vw, 80px);
    height: auto;
    opacity: 0.45;
    filter: drop-shadow(0 2px 6px rgba(44,26,26,0.12));
    display: block;
}

/* On dark sections, tint the doily cream */
.bg-even .lace-doily-divider img {
    filter: brightness(0) invert(1) opacity(0.30)
            drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}


/* ============================================================
   LACE FRAME — Registry / Gifts section card
   lace-frame2-transparent.png (cream square lace frame)
   Wraps the gift/registry card exactly like reference Image 6
   ============================================================ */

/* Container that holds the lace frame + content together */
.lace-frame-card {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(16px, 3vw, 28px);
}

/* The lace frame image — purely decorative border overlay */
.lace-frame-card .lace-frame-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    z-index: 2;           /* above content so frame edge sits on top */
    opacity: 0.55;
    filter: drop-shadow(0 4px 24px rgba(44,26,26,0.15));
}

/* Content sits below the frame overlay */
.lace-frame-card .lace-frame-content {
    position: relative;
    z-index: 1;
    padding: clamp(24px, 4vw, 40px) clamp(20px, 3vw, 32px);
}

/* On dark sections, adjust frame brightness and add appropriate styling */
.registry .lace-frame-card .lace-frame-img {
    opacity: 0.48;
    filter: brightness(1.12) sepia(0.1) drop-shadow(0 6px 28px rgba(0,0,0,0.35));
}


/* ============================================================
   LACE SECTION DIVIDERS — between cream and burgundy sections
   Uses lace-doilly1-transparent.png as a centered ornament
   sitting right at the section boundary
   ============================================================ */

.lace-section-ornament {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    margin: 0 auto;
    padding: 0;
    height: 0;           /* takes no height — purely decorative overlay */
    pointer-events: none;
}

.lace-section-ornament img {
    position: absolute;
    width: clamp(60px, 10vw, 100px);
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.40;
    filter: drop-shadow(0 2px 6px rgba(44,26,26,0.20));
}


/* ============================================================
   LACE TRIM STRIPS — horizontal lace edge between sections
   Uses CSS scallop but now with the real lace frame image
   clipped to just the top edge for a trim effect
   ============================================================ */

/* Top lace trim — sits at the very top of a section */
.lace-trim-top {
    width: 100%;
    display: flex;
    justify-content: center;
    pointer-events: none;
    margin-bottom: clamp(20px, 3vw, 32px);
}

.lace-trim-top img,
.lace-trim-bottom img {
    width: 100%;
    max-width: 700px;
    height: clamp(40px, 6vw, 70px);
    object-fit: cover;
    object-position: top center;
    opacity: 0.35;
}

/* Bottom lace trim — flipped */
.lace-trim-bottom {
    width: 100%;
    display: flex;
    justify-content: center;
    pointer-events: none;
    margin-top: clamp(20px, 3vw, 32px);
}

.lace-trim-bottom img {
    transform: scaleY(-1);   /* flip to face downward */
    object-position: bottom center;
}



/* ============================================================
   COMPREHENSIVE FIXES — Round 3
   1. Timeline photo lace borders (like reference Image 1)
   2. bg-odd text readability — darker text on parchment
   3. Lace doily positioning fixes
   4. Footer text alignment fix
   5. RSVP subtitle box fix
   ============================================================ */

/* ── 1. TIMELINE PHOTOS: lace-bordered oval/square frames ────
   Replicates the lace picture frame look from reference Image 1.
   Uses lace-doilly2-transparent.png as a pseudo-element overlay
   sitting on top of each timeline photo.                      */
.timeline-photo {
    position: relative;
    display: inline-block;
}

/* Lace frame overlay on each timeline photo */
.timeline-photo::after {
    content: '';
    position: absolute;
    inset: -12%;
    width: 124%;
    height: 124%;
    background-image: url('assets/images/lace-doilly2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 2;
    opacity: 0.75;
}

/* The photo itself sits below the lace frame */
.timeline-photo img {
    position: relative;
    z-index: 1;
    border: none !important;
}

/* On dark sections — tint lace cream */
.bg-even .timeline-photo::after {
    filter: brightness(0) invert(1) opacity(0.5);
}


/* ── 2. TEXT READABILITY on bg-odd (parchment) sections ──────
   bg2.webp is grey-beige which can wash out dark text.
   Adding a subtle warm overlay and darkening text colors.     */

/* Warm cream tint layer over the texture on light sections */
.bg-odd {
    background-color: #D9CBBA !important;  /* --secondary: warm parchment base */
}

/* Darken all body text on light sections */
.bg-odd .section-label          { color: var(--primary) !important; opacity: 1 !important; }
.bg-odd .section-title          { color: var(--dark) !important; }
.bg-odd .section-subtitle       { color: var(--muted) !important; opacity: 1 !important; }
.bg-odd .timeline-date          { color: var(--primary) !important; }
.bg-odd .timeline-title         { color: var(--dark) !important; }
.bg-odd .timeline-description   { color: #4A3030 !important; }
.bg-odd .party-group-title      { color: var(--primary) !important; }
.bg-odd .party-group-name       { color: var(--dark) !important; }
.bg-odd .couple-note-message    { color: var(--dark) !important; }
.bg-odd .couple-note-signature  { color: var(--muted) !important; }
.bg-odd .schedule-card-venue    { color: var(--dark) !important; }
.bg-odd .schedule-card-address  { color: var(--muted) !important; }
.bg-odd .schedule-card-time     { color: var(--dark) !important; }
.bg-odd .faq-question           { color: var(--dark) !important; }
.bg-odd .faq-answer             { color: var(--muted) !important; }
.bg-odd .registry-message       { color: var(--muted) !important; }
.bg-odd .countdown-number       { color: var(--dark) !important; }
.bg-odd .countdown-label        { color: var(--muted) !important; }
.bg-odd p, .bg-odd li           { color: var(--dark) !important; }
.bg-odd h1, .bg-odd h2,
.bg-odd h3, .bg-odd h4         { color: var(--dark) !important; }

/* Cards on light sections: clean white with visible border */
.bg-odd .schedule-card,
.bg-odd .registry-card,
.bg-odd .dresscode-group {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: var(--border) !important;
}


/* ── 3. LACE DOILY DIVIDER — remove from countdown (dark section) ─
   The doily on countdown was showing as a tiny dark square because
   lace-doilly1 has no proper transparency on dark bg.
   Replace with a simple CSS ornament instead.                */
.bg-even .lace-doily-divider {
    display: none !important;
}

/* Simple ornamental line for dark sections instead */
.bg-even .lace-ornament-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 auto clamp(16px, 2vw, 24px);
    padding-top: clamp(20px, 3vw, 32px);
}
.bg-even .lace-ornament-line::before,
.bg-even .lace-ornament-line::after {
    content: '';
    flex: 1;
    max-width: 80px;
    height: 1px;
    background: rgba(245, 237, 224, 0.25);
}
.bg-even .lace-ornament-line span {
    color: rgba(245, 237, 224, 0.40);
    font-size: 0.5rem;
    letter-spacing: 0.3em;
}

/* Lace doily on light sections: show properly */
.bg-odd .lace-doily-divider img {
    filter: none !important;
    opacity: 0.50 !important;
}


/* ── 4. RSVP subtitle — remove box/border rendering ─────────
   The green-circled box around "We have saved a seat just for you"
   is from the rsvp-subtitle inside .rsvp-choice which inherits
   a border from the card context. Clear it.                   */
.rsvp .section-subtitle,
.rsvp .rsvp-deadline,
#rsvp-subtitle {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
}


/* ── 5. FOOTER text alignment — left-aligned text fix ────────
   Image 5 shows footer-thanks floating to the left corner.
   Ensure footer content is properly centered.               */
.footer-content {
    text-align: center !important;
}
.footer-thanks,
.footer-verse {
    text-align: center !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    max-width: 480px;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ── 6. LACE FRAME on registry cards — fix overlay issue ─────
   The frame img was covering the card content.
   Use it purely as a decorative corner/edge element with
   pointer-events off and reduced opacity.                     */
.lace-frame-card {
    overflow: visible !important;
}
.lace-frame-card .lace-frame-img {
    opacity: 0.30 !important;
    mix-blend-mode: luminosity;
    pointer-events: none !important;
}
.bg-even .lace-frame-card .lace-frame-img {
    filter: brightness(2) opacity(0.20) !important;
    mix-blend-mode: screen;
}


/* ── 7. LACE BADGE (RSVP doily3) — tighter, more elegant ────  */
.lace-badge-wrap {
    margin-bottom: 8px !important;
}
.lace-badge-img {
    width: clamp(80px, 11vw, 115px) !important;
    opacity: 0.88 !important;
}


/* ── 8. COUNTDOWN dark square fix — hide broken img safely ──  */
.lace-doily-divider img[src="assets/images/lace-doilly1.png"] {
    /* If file missing, show nothing instead of broken square */
    min-width: 0 !important;
    min-height: 0 !important;
}
.lace-doily-divider:has(img:not([complete])) {
    display: none;
}

/* ============================================================
   ROUND 6 — JOURNEY SECTION: lace-frame1.webp PHOTO OVERLAY
   Uses the real lace frame image as a decorative overlay on
   each timeline photo. The frame image sits on top of the photo
   via ::after, sized wider than the photo so the lace border
   peeks out on all sides like a real picture mat.
   File path: assets/images/lace-frame1.webp
   ============================================================ */

/* Reset ALL previous timeline-photo box-shadow/border/padding
   rules from Round 4 and Round 5 so we start clean.
   Frame sits OUTSIDE the wrapper, not overlapping the image.   */
.timeline-photo,
.bg-even .timeline-photo,
.bg-odd  .timeline-photo {
    position: relative !important;
    display: inline-block !important;
    /* Padding creates space INSIDE the wrapper for the frame border area */
    padding: clamp(18px, 3vw, 32px) !important;
    background: transparent !important;
    background-image: none !important;
    /* Remove all ring box-shadows from previous rounds */
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    /* Margins around the entire wrapped element */
    margin: clamp(28px, 4vw, 44px) !important;
    flex-shrink: 0 !important;
    /* flex sizing */
    flex: 1 !important;
    max-width: 300px !important;
}

/* Remove the old corner rosette ::before from Round 5 */
.timeline-photo::before,
.bg-even .timeline-photo::before,
.bg-odd  .timeline-photo::before {
    display: none !important;
    content: none !important;
}

/* Frame background sits on the wrapper padding area (OUTSIDE the photo) */
.timeline-photo::after,
.bg-even .timeline-photo::after,
.bg-odd  .timeline-photo::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    /* Sits at the wrapper edge — doesn't overlap the photo itself */
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    /* The lace frame image */
    background-image: url('assets/images/.webp') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    pointer-events: none !important;
    z-index: 0 !important;           /* sits BEHIND everything */
    opacity: 0.92 !important;
    /* Subtle depth shadow on the frame itself */
    filter: drop-shadow(0 6px 20px rgba(44, 26, 26, 0.28)) !important;
}

/* The actual photo — sits ON TOP of the frame (now z-index: 2) */
.timeline-photo img {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 4/5 !important;       /* portrait crop */
    object-fit: cover !important;
    object-position: center top !important;
    border: none !important;            /* frame image handles the border */
    box-shadow: none !important;
    transition: transform 0.7s ease !important;
}

.timeline-photo img:hover {
    transform: scale(1.025) !important;
}

/* On DARK sections (bg-even): slightly brighten the frame
   so it reads against the deep burgundy bg                   */
.bg-even .timeline-photo::after {
    opacity: 0.88 !important;
    filter: brightness(1.08) drop-shadow(0 6px 20px rgba(0,0,0,0.45)) !important;
}

/* On LIGHT sections (bg-odd): warm the frame slightly */
.bg-odd .timeline-photo::after {
    opacity: 0.90 !important;
    filter: sepia(0.08) drop-shadow(0 4px 14px rgba(44,26,26,0.18)) !important;
}

/* Mobile: shrink the photo + keep frame proportional */
@media (max-width: 768px) {
    .timeline-photo {
        max-width: 160px !important;
        margin: clamp(20px, 4vw, 32px) auto !important;
        padding: clamp(14px, 2.5vw, 24px) !important;
    }
    .timeline-item {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .timeline-item:nth-child(even) {
        flex-direction: column !important;
    }
    .timeline-item:nth-child(even) .timeline-text {
        text-align: center !important;
    }
    .timeline-dot {
        position: static !important;
        transform: none !important;
        margin: 0 auto !important;
    }
    .timeline-text {
        text-align: center !important;
        padding: 0 16px 16px !important;
    }
}

/* ============================================================
   END ROUND 6
   ============================================================ */

/* ============================================================
   ROUND 7 — JOURNEY PHOTOS: CORRECT LACE FRAME TECHNIQUE
   
   ROOT CAUSE FIX: The frame image has an opaque cream interior
   fill — placing it z-index:2 (on top) blocked the photo.
   
   CORRECT APPROACH:
   • The frame image = background-image on .timeline-photo wrapper
   • background-size: 100% 100% stretches frame to fill the div
   • padding on the wrapper pushes the photo inward so it lands
     exactly in the cream center of the frame
   • The photo sits z-index:1 ABOVE the background frame
   • ::after is cleared (no longer used for the frame)
   • ::before draws the bow detail (optional accent)
   ============================================================ */

/* ── Full reset of Round 4 / 5 / 6 timeline-photo rules ──── */
.timeline-photo,
.bg-even .timeline-photo,
.bg-odd  .timeline-photo {
    /* Layout */
    position: relative !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    /* The frame image is the BACKGROUND of the wrapper div     */
    background-image: url('assets/images/.webp') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: transparent !important;
    /* Padding pushes the <img> inward so it shows through the
       frame's hollow center. Tune these % values to fine-match
       the inner cream area of the specific frame image:
         top    — larger: bow/floral header takes ~20% height
         sides  — frame border is ~16% of width each side
         bottom — floral footer takes ~14% height            */
    padding: 18% 16% 14% 16% !important;
    /* Width of the whole wrapper (frame + photo inside it) */
    width: clamp(220px, 32vw, 340px) !important;
    max-width: 340px !important;
    /* Outer margin so frame doesn't touch section edges */
    margin: clamp(12px, 2vw, 20px) !important;
    /* Remove all box-shadow/border artifacts from prev rounds */
    box-shadow: 0 8px 40px rgba(44,26,26,0.18) !important;
    border: none !important;
    outline: none !important;
}

/* ── Kill ::after (no longer the frame layer) ─────────────── */
.timeline-photo::after,
.bg-even .timeline-photo::after,
.bg-odd  .timeline-photo::after {
    display: none !important;
    content: none !important;
}

/* ── Kill ::before corner rosette from Round 5 ────────────── */
.timeline-photo::before,
.bg-even .timeline-photo::before,
.bg-odd  .timeline-photo::before {
    display: none !important;
    content: none !important;
}

/* ── The actual <img> fills the frame's inner window ───────
   z-index:1 keeps it above the background frame image.
   aspect-ratio keeps portraits consistent across milestones. */
.timeline-photo img {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 3/4 !important;       /* portrait — matches frame proportions */
    object-fit: cover !important;
    object-position: center top !important;
    border: none !important;
    box-shadow: inset 0 0 12px rgba(44,26,26,0.10) !important;
    transition: transform 0.7s ease !important;
}

.timeline-photo img:hover {
    transform: scale(1.03) !important;
}

/* ── Dark sections: slight frame brightness boost ──────────  */
.bg-even .timeline-photo {
    box-shadow: 0 8px 40px rgba(0,0,0,0.40) !important;
}

/* ── Light sections: warm sepia tone on frame ─────────────── */
.bg-odd .timeline-photo {
    filter: sepia(0.06) !important;
    box-shadow: 0 8px 40px rgba(44,26,26,0.15) !important;
}

/* ── Mobile ─────────────────────────────────────────────────  */
@media (max-width: 768px) {
    .timeline-photo,
    .bg-even .timeline-photo,
    .bg-odd  .timeline-photo {
        width: clamp(180px, 55vw, 240px) !important;
        max-width: 240px !important;
        margin: clamp(12px, 3vw, 20px) auto !important;
    }
    .timeline-item {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .timeline-item:nth-child(even) {
        flex-direction: column !important;
    }
    .timeline-item:nth-child(even) .timeline-text {
        text-align: center !important;
    }
    .timeline-dot {
        position: static !important;
        transform: none !important;
        margin: 0 auto !important;
    }
    .timeline-text {
        text-align: center !important;
        padding: 0 16px 16px !important;
    }
}

/* ============================================================
   END ROUND 7
   ============================================================ */

 /* ============================================================
   JOURNEY SECTION — OLD MONEY LACE FRAME
   Append entire contents to the BOTTOM of style.css

   Lace colour: antique cream #F5EDE0
   Reads as embroidered fabric on BOTH section backgrounds:
     bg-even (dark wine)     → cream on burgundy = high contrast
     bg-odd  (light parchment) → tone-on-tone = delicate lace
   ============================================================ */


/* ── 1. RESET ALL PRIOR ROUND OVERRIDES (4-7) ──────────────── */
.timeline-photo,
.bg-even .timeline-photo,
.bg-odd  .timeline-photo {
    position:           relative            !important;
    display:            inline-block        !important;
    width:              clamp(200px, 30vw, 320px) !important;
    max-width:          320px               !important;
    flex:               0 0 auto           !important;
    flex-shrink:        0                  !important;
    padding:            0                  !important;
    background-image:   none               !important;
    background-color:   transparent        !important;
    margin:             clamp(28px, 5vw, 44px) !important;
    border:             none               !important;
    outline:            none               !important;
    box-shadow:         none               !important;
    filter:             none               !important;
}


/* ── 2. PHOTO ────────────────────────────────────────────────── */
.timeline-photo img {
    position:        relative    !important;
    z-index:         1           !important;
    display:         block       !important;
    width:           100%        !important;
    height:          100%        !important;
    aspect-ratio:    3/4         !important;
    object-fit:      cover       !important;
    object-position: center top  !important;
    border:          none        !important;
    box-shadow:      none        !important;
    transition:      transform 0.7s ease !important;
}
.timeline-photo img:hover { transform: scale(1.03) !important; }


/* ── 3. LACE OVERLAY — cream strokes, transparent interior ──── */
.timeline-photo::after,
.bg-even .timeline-photo::after,
.bg-odd  .timeline-photo::after {
    content:             ''         !important;
    display:             block      !important;
    position:            absolute   !important;
    inset:               -10%       !important;
    width:               120%       !important;
    height:              120%       !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 250' fill='none'%3E%3Cpath d='M18 18 Q23 10 28 18 Q33 10 38 18 Q43 10 48 18 Q53 10 58 18 Q63 10 68 18 Q73 10 78 18 Q83 10 88 18 Q93 10 98 18 Q103 10 108 18 Q113 10 118 18 Q123 10 128 18 Q133 10 138 18 Q143 10 148 18 Q153 10 158 18 Q163 10 168 18 Q173 10 178 18 Q183 10 188 18' stroke='%23F5EDE0' stroke-width='1.4' stroke-opacity='0.92' fill='none'/%3E%3Cpath d='M18 232 Q23 240 28 232 Q33 240 38 232 Q43 240 48 232 Q53 240 58 232 Q63 240 68 232 Q73 240 78 232 Q83 240 88 232 Q93 240 98 232 Q103 240 108 232 Q113 240 118 232 Q123 240 128 232 Q133 240 138 232 Q143 240 148 232 Q153 240 158 232 Q163 240 168 232 Q173 240 178 232 Q183 240 188 232' stroke='%23F5EDE0' stroke-width='1.4' stroke-opacity='0.92' fill='none'/%3E%3Cpath d='M18 18 Q10 23 18 28 Q10 33 18 38 Q10 43 18 48 Q10 53 18 58 Q10 63 18 68 Q10 73 18 78 Q10 83 18 88 Q10 93 18 98 Q10 103 18 108 Q10 113 18 118 Q10 123 18 128 Q10 133 18 138 Q10 143 18 148 Q10 153 18 158 Q10 163 18 168 Q10 173 18 178 Q10 183 18 188 Q10 193 18 198 Q10 203 18 208 Q10 213 18 218 Q10 223 18 228 Q10 228 18 232' stroke='%23F5EDE0' stroke-width='1.4' stroke-opacity='0.92' fill='none'/%3E%3Cpath d='M182 18 Q190 23 182 28 Q190 33 182 38 Q190 43 182 48 Q190 53 182 58 Q190 63 182 68 Q190 73 182 78 Q190 83 182 88 Q190 93 182 98 Q190 103 182 108 Q190 113 182 118 Q190 123 182 128 Q190 133 182 138 Q190 143 182 148 Q190 153 182 158 Q190 163 182 168 Q190 173 182 178 Q190 183 182 188 Q190 193 182 198 Q190 203 182 208 Q190 213 182 218 Q190 223 182 228 Q190 228 182 232' stroke='%23F5EDE0' stroke-width='1.4' stroke-opacity='0.92' fill='none'/%3E%3Crect x='22' y='22' width='156' height='206' rx='1' stroke='%23F5EDE0' stroke-width='0.6' stroke-opacity='0.45' fill='none' stroke-dasharray='3 3'/%3E%3Ccircle cx='18' cy='18' r='4.5' stroke='%23F5EDE0' stroke-width='1' stroke-opacity='0.92' fill='none'/%3E%3Ccircle cx='18' cy='18' r='1.8' fill='%23F5EDE0' fill-opacity='0.85'/%3E%3Cpath d='M18 12.5 Q20.5 15.5 18 18 Q15.5 15.5 18 12.5Z' fill='%23F5EDE0' fill-opacity='0.70'/%3E%3Cpath d='M18 23.5 Q20.5 20.5 18 18 Q15.5 20.5 18 23.5Z' fill='%23F5EDE0' fill-opacity='0.70'/%3E%3Cpath d='M12.5 18 Q15.5 20.5 18 18 Q15.5 15.5 12.5 18Z' fill='%23F5EDE0' fill-opacity='0.70'/%3E%3Cpath d='M23.5 18 Q20.5 20.5 18 18 Q20.5 15.5 23.5 18Z' fill='%23F5EDE0' fill-opacity='0.70'/%3E%3Ccircle cx='182' cy='18' r='4.5' stroke='%23F5EDE0' stroke-width='1' stroke-opacity='0.92' fill='none'/%3E%3Ccircle cx='182' cy='18' r='1.8' fill='%23F5EDE0' fill-opacity='0.85'/%3E%3Cpath d='M182 12.5 Q184.5 15.5 182 18 Q179.5 15.5 182 12.5Z' fill='%23F5EDE0' fill-opacity='0.70'/%3E%3Cpath d='M182 23.5 Q184.5 20.5 182 18 Q179.5 20.5 182 23.5Z' fill='%23F5EDE0' fill-opacity='0.70'/%3E%3Cpath d='M176.5 18 Q179.5 20.5 182 18 Q179.5 15.5 176.5 18Z' fill='%23F5EDE0' fill-opacity='0.70'/%3E%3Cpath d='M187.5 18 Q184.5 20.5 182 18 Q184.5 15.5 187.5 18Z' fill='%23F5EDE0' fill-opacity='0.70'/%3E%3Ccircle cx='18' cy='232' r='4.5' stroke='%23F5EDE0' stroke-width='1' stroke-opacity='0.92' fill='none'/%3E%3Ccircle cx='18' cy='232' r='1.8' fill='%23F5EDE0' fill-opacity='0.85'/%3E%3Cpath d='M18 226.5 Q20.5 229.5 18 232 Q15.5 229.5 18 226.5Z' fill='%23F5EDE0' fill-opacity='0.70'/%3E%3Cpath d='M18 237.5 Q20.5 234.5 18 232 Q15.5 234.5 18 237.5Z' fill='%23F5EDE0' fill-opacity='0.70'/%3E%3Cpath d='M12.5 232 Q15.5 234.5 18 232 Q15.5 229.5 12.5 232Z' fill='%23F5EDE0' fill-opacity='0.70'/%3E%3Cpath d='M23.5 232 Q20.5 234.5 18 232 Q20.5 229.5 23.5 232Z' fill='%23F5EDE0' fill-opacity='0.70'/%3E%3Ccircle cx='182' cy='232' r='4.5' stroke='%23F5EDE0' stroke-width='1' stroke-opacity='0.92' fill='none'/%3E%3Ccircle cx='182' cy='232' r='1.8' fill='%23F5EDE0' fill-opacity='0.85'/%3E%3Cpath d='M182 226.5 Q184.5 229.5 182 232 Q179.5 229.5 182 226.5Z' fill='%23F5EDE0' fill-opacity='0.70'/%3E%3Cpath d='M182 237.5 Q184.5 234.5 182 232 Q179.5 234.5 182 237.5Z' fill='%23F5EDE0' fill-opacity='0.70'/%3E%3Cpath d='M176.5 232 Q179.5 234.5 182 232 Q179.5 229.5 176.5 232Z' fill='%23F5EDE0' fill-opacity='0.70'/%3E%3Cpath d='M187.5 232 Q184.5 234.5 182 232 Q184.5 229.5 187.5 232Z' fill='%23F5EDE0' fill-opacity='0.70'/%3E%3C/svg%3E") !important;
    background-size:     100% 100%    !important;
    background-repeat:   no-repeat    !important;
    background-position: center       !important;
    pointer-events:      none         !important;
    z-index:             2            !important;
    filter:              none         !important;
}

/* Kill ::before from all prior rounds */
.timeline-photo::before,
.bg-even .timeline-photo::before,
.bg-odd  .timeline-photo::before {
    display: none  !important;
    content: none  !important;
}


/* ── 4. OPACITY PER SECTION BACKGROUND ────────────────────────
   Dark wine bg  → full opacity (cream pops on burgundy)
   Light parchment bg → 75% (delicate tone-on-tone look)        */
.bg-even .timeline-photo::after { opacity: 1.00 !important; }
.bg-odd  .timeline-photo::after { opacity: 0.75 !important; }


/* ── 5. TIMELINE ACCENTS ────────────────────────────────────── */
.timeline::before {
    background: linear-gradient(to bottom, transparent, var(--primary), transparent) !important;
    opacity: 0.35 !important;
}
.timeline-dot {
    background:   var(--primary)   !important;
    border-color: var(--secondary) !important;
}
.timeline-date { color: var(--primary) !important; }


/* ── 6. MOBILE ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .timeline-photo,
    .bg-even .timeline-photo,
    .bg-odd  .timeline-photo {
        width:     clamp(160px, 52vw, 220px) !important;
        max-width: 220px                     !important;
        margin:    clamp(24px, 5vw, 36px) auto !important;
    }
    .timeline-item { flex-direction: column !important; align-items: center !important; text-align: center !important; }
    .timeline-item:nth-child(even) { flex-direction: column !important; }
    .timeline-item:nth-child(even) .timeline-text { text-align: center !important; }
    .timeline-dot { position: static !important; transform: none !important; margin: 0 auto !important; }
    .timeline-text { text-align: center !important; padding: 0 16px 16px !important; }
}
/* ============================================================ END ============================================================ */

/* ============================================================
   FINAL FIXES — last rules win the cascade
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   FIX 1: COUNTDOWN — hide floating ornament (it is removed from
   HTML too), ensure timer row is truly centered.
───────────────────────────────────────────────────────────── */
.lace-ornament-line {
    display: none !important;
}
.countdown .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
}
.countdown-timer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: clamp(8px, 2vw, 24px) !important;
    margin-top: clamp(20px, 4vw, 40px) !important;
}


/* ─────────────────────────────────────────────────────────────
   FIX 2: JOURNEY FRAME — frame should surround the photo, not
   overlap it. The lace SVG ::after is fine visually (transparent
   fill, only stroked border) BUT it needs to extend BEYOND the
   photo so the scallop edge sits outside the image, not on top.
   
   Solution: give the wrapper NEGATIVE margin to expand it, then
   use ::after with inset:0 so the frame covers only the wrapper.
   The photo fills the center naturally.
   
   Actually simpler: make the wrapper have overflow:visible and
   push ::after OUTWARD with negative inset values, so frame
   border strokes fall outside the photo edges.
───────────────────────────────────────────────────────────── */
.timeline-photo,
.bg-even .timeline-photo,
.bg-odd  .timeline-photo {
    position: relative !important;
    display: inline-block !important;
    width: clamp(200px, 30vw, 320px) !important;
    max-width: 320px !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    /* Extra margin so the outward frame doesn't clip */
    margin: clamp(36px, 6vw, 56px) !important;
    padding: 0 !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    border: none !important;
    outline: none !important;
    overflow: visible !important;
}

/* Frame extends OUTSIDE the photo by 12px on all sides */
.timeline-photo::after,
.bg-even .timeline-photo::after,
.bg-odd  .timeline-photo::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: -12px !important;
    width: calc(100% + 24px) !important;
    height: calc(100% + 24px) !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    pointer-events: none !important;
    z-index: 2 !important;
    /* Restate the inline SVG lace border */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 250' fill='none'%3E%3Cpath d='M18 18 Q23 10 28 18 Q33 10 38 18 Q43 10 48 18 Q53 10 58 18 Q63 10 68 18 Q73 10 78 18 Q83 10 88 18 Q93 10 98 18 Q103 10 108 18 Q113 10 118 18 Q123 10 128 18 Q133 10 138 18 Q143 10 148 18 Q153 10 158 18 Q163 10 168 18 Q173 10 178 18 Q183 10 188 18' stroke='%23F5EDE0' stroke-width='1.4' stroke-opacity='0.92' fill='none'/%3E%3Cpath d='M18 232 Q23 240 28 232 Q33 240 38 232 Q43 240 48 232 Q53 240 58 232 Q63 240 68 232 Q73 240 78 232 Q83 240 88 232 Q93 240 98 232 Q103 240 108 232 Q113 240 118 232 Q123 240 128 232 Q133 240 138 232 Q143 240 148 232 Q153 240 158 232 Q163 240 168 232 Q173 240 178 232 Q183 240 188 232' stroke='%23F5EDE0' stroke-width='1.4' stroke-opacity='0.92' fill='none'/%3E%3Cpath d='M18 18 Q10 23 18 28 Q10 33 18 38 Q10 43 18 48 Q10 53 18 58 Q10 63 18 68 Q10 73 18 78 Q10 83 18 88 Q10 93 18 98 Q10 103 18 108 Q10 113 18 118 Q10 123 18 128 Q10 133 18 138 Q10 143 18 148 Q10 153 18 158 Q10 163 18 168 Q10 173 18 178 Q10 183 18 188 Q10 193 18 198 Q10 203 18 208 Q10 213 18 218 Q10 223 18 228 Q10 228 18 232' stroke='%23F5EDE0' stroke-width='1.4' stroke-opacity='0.92' fill='none'/%3E%3Cpath d='M182 18 Q190 23 182 28 Q190 33 182 38 Q190 43 182 48 Q190 53 182 58 Q190 63 182 68 Q190 73 182 78 Q190 83 182 88 Q190 93 182 98 Q190 103 182 108 Q190 113 182 118 Q190 123 182 128 Q190 133 182 138 Q190 143 182 148 Q190 153 182 158 Q190 163 182 168 Q190 173 182 178 Q190 183 182 188 Q190 193 182 198 Q190 203 182 208 Q190 213 182 218 Q190 223 182 228 Q190 228 182 232' stroke='%23F5EDE0' stroke-width='1.4' stroke-opacity='0.92' fill='none'/%3E%3Ccircle cx='18' cy='18' r='4.5' stroke='%23F5EDE0' stroke-width='1' stroke-opacity='0.92' fill='none'/%3E%3Ccircle cx='18' cy='18' r='1.8' fill='%23F5EDE0' fill-opacity='0.85'/%3E%3Ccircle cx='182' cy='18' r='4.5' stroke='%23F5EDE0' stroke-width='1' stroke-opacity='0.92' fill='none'/%3E%3Ccircle cx='182' cy='18' r='1.8' fill='%23F5EDE0' fill-opacity='0.85'/%3E%3Ccircle cx='18' cy='232' r='4.5' stroke='%23F5EDE0' stroke-width='1' stroke-opacity='0.92' fill='none'/%3E%3Ccircle cx='18' cy='232' r='1.8' fill='%23F5EDE0' fill-opacity='0.85'/%3E%3Ccircle cx='182' cy='232' r='4.5' stroke='%23F5EDE0' stroke-width='1' stroke-opacity='0.92' fill='none'/%3E%3Ccircle cx='182' cy='232' r='1.8' fill='%23F5EDE0' fill-opacity='0.85'/%3E%3C/svg%3E") !important;
}

/* Kill ::before on all variants */
.timeline-photo::before,
.bg-even .timeline-photo::before,
.bg-odd  .timeline-photo::before {
    display: none !important;
    content: none !important;
}

/* Photo fills the wrapper, frame hangs outside */
.timeline-photo img {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 3/4 !important;
    object-fit: cover !important;
    object-position: center top !important;
    border: none !important;
    box-shadow: none !important;
    transition: transform 0.7s ease !important;
}
.timeline-photo img:hover { transform: scale(1.03) !important; }

.bg-even .timeline-photo::after { opacity: 1.00 !important; }
.bg-odd  .timeline-photo::after { opacity: 0.80 !important; }

@media (max-width: 768px) {
    .timeline-photo,
    .bg-even .timeline-photo,
    .bg-odd  .timeline-photo {
        width: clamp(160px, 52vw, 220px) !important;
        max-width: 220px !important;
        margin: clamp(28px, 6vw, 44px) auto !important;
    }
    .timeline-item {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .timeline-item:nth-child(even) { flex-direction: column !important; }
    .timeline-item:nth-child(even) .timeline-text { text-align: center !important; }
    .timeline-dot { position: static !important; transform: none !important; margin: 0 auto !important; }
    .timeline-text { text-align: center !important; padding: 0 16px 16px !important; }
}


/* ─────────────────────────────────────────────────────────────
   FIX 3: REGISTRY — cards are parchment-colored on dark bg but
   ALL text is cream (#F5EDE0) — invisible on parchment.
   Fix: dark text on parchment cards; keep the dark section bg.
───────────────────────────────────────────────────────────── */

/* Section stays dark */
.registry {
    background: var(--dark-section) !important;
}

/* Cards: parchment background — look like paper cards on dark bg */
.registry-card,
.bg-even .registry-card {
    background: var(--white) !important;
    border: 1px solid var(--border) !important;
    border-left: 3px solid var(--primary) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.30) !important;
    outline: none !important;
}

/* ALL text inside cards: dark so it reads on parchment */
.registry-card p,
.registry-card h3,
.registry-card span,
.bg-even .registry-card p,
.bg-even .registry-card h3,
.bg-even .registry-card span {
    color: var(--dark) !important;
}
/* Card type label (BANK TRANSFER / GCASH / MAYA) */
.registry-card .registry-card-type,
.bg-even .registry-card .registry-card-type {
    color: var(--primary) !important;
}
/* Account name italic */
.registry-card .registry-account-name,
.bg-even .registry-card .registry-account-name {
    color: var(--dark) !important;
}
/* Number text */
.registry-card .registry-account-number,
.bg-even .registry-card .registry-account-number {
    color: var(--dark) !important;
}
/* Copy button */
.registry-card .registry-copy-btn,
.bg-even .registry-card .registry-copy-btn {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    background: transparent !important;
}
/* Number row background */
.registry-card .registry-number-row,
.bg-even .registry-card .registry-number-row {
    background: var(--secondary) !important;
    border-color: var(--border) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    min-width: 0 !important;
}
/* Section heading/label on dark bg */
.registry .section-title,
.registry .section-label {
    color: var(--white) !important;
}
.registry .registry-message {
    color: var(--white) !important;
    text-align: center !important;
}

/* Registry number truncation */
.registry-account-number {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
}


/* ─────────────────────────────────────────────────────────────
   FIX 4: ALL SUBTITLES — centered, not left/justified
───────────────────────────────────────────────────────────── */
.section-subtitle,
.bg-even .section-subtitle,
.bg-odd  .section-subtitle {
    text-align: center !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
}

/* ============================================================
   END FINAL FIXES
   ============================================================ */

/* ============================================================
   FIXES — ROUND 3
   ============================================================ */

/* ── FIX 1: COUNTDOWN — center align + proper vh height ─────── */
.countdown {
    min-height: 60vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}
.countdown .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
}
.countdown-timer {
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ── FIX 1b: COUNTDOWN LACE SCALLOPS — restore for bg-even ──── */
/* My earlier fix wrongly suppressed ::before/::after on #countdown.
   Countdown IS bg-even so it SHOULD have the scallop edges.
   Re-enable them explicitly here (overrides the display:none). */
#countdown.bg-even::before {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    top: -24px !important;
    left: 0 !important;
    right: 0 !important;
    height: 28px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M0,28 Q10,0 20,28 Q30,0 40,28 Z' fill='%233A0A0A'/%3E%3Cpath d='M0,28 Q10,0 20,28 Q30,0 40,28' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E") !important;
    background-repeat: repeat-x !important;
    background-size: 40px 28px !important;
    pointer-events: none !important;
    z-index: 3 !important;
}
#countdown.bg-even::after {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    bottom: -24px !important;
    left: 0 !important;
    right: 0 !important;
    height: 28px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M0,0 Q10,28 20,0 Q30,28 40,0 Z' fill='%233A0A0A'/%3E%3Cpath d='M0,0 Q10,28 20,0 Q30,28 40,0' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E") !important;
    background-repeat: repeat-x !important;
    background-size: 40px 28px !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

/* Also apply white-edge scallops to ALL other bg-even sections */
.bg-even::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M0,28 Q10,0 20,28 Q30,0 40,28 Z' fill='%233A0A0A'/%3E%3Cpath d='M0,28 Q10,0 20,28 Q30,0 40,28' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E") !important;
    background-repeat: repeat-x !important;
    background-size: 40px 28px !important;
}
.bg-even::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M0,0 Q10,28 20,0 Q30,28 40,0 Z' fill='%233A0A0A'/%3E%3Cpath d='M0,0 Q10,28 20,0 Q30,28 40,0' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E") !important;
    background-repeat: repeat-x !important;
    background-size: 40px 28px !important;
}


/* ── FIX 2: JOURNEY PHOTO — image SMALLER than lace frame ───── */
/* Strategy: shrink the photo so the lace ::after (which sits at
   inset: -20px) has clear air between the image edge and the lace.
   We keep the wrapper size and push the image inward with padding,
   so the frame hangs outside and the image is visibly inside it. */
.timeline-photo,
.bg-even .timeline-photo,
.bg-odd  .timeline-photo {
    position: relative !important;
    display: inline-block !important;
    width: clamp(200px, 30vw, 320px) !important;
    max-width: 320px !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    /* Margin ensures frame doesn't clip against layout edges */
    margin: clamp(48px, 7vw, 68px) !important;
    /* Padding pushes image away from wrapper edges — frame lives in this gap */
    padding: 16px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    overflow: visible !important;
}

/* Frame sits at -20px outset from the wrapper — well outside the padded image */
.timeline-photo::after,
.bg-even .timeline-photo::after,
.bg-odd  .timeline-photo::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: -20px !important;
    width: calc(100% + 40px) !important;
    height: calc(100% + 40px) !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    pointer-events: none !important;
    z-index: 2 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 250' fill='none'%3E%3Cpath d='M18 18 Q23 10 28 18 Q33 10 38 18 Q43 10 48 18 Q53 10 58 18 Q63 10 68 18 Q73 10 78 18 Q83 10 88 18 Q93 10 98 18 Q103 10 108 18 Q113 10 118 18 Q123 10 128 18 Q133 10 138 18 Q143 10 148 18 Q153 10 158 18 Q163 10 168 18 Q173 10 178 18 Q183 10 188 18' stroke='%23F5EDE0' stroke-width='1.4' stroke-opacity='0.92' fill='none'/%3E%3Cpath d='M18 232 Q23 240 28 232 Q33 240 38 232 Q43 240 48 232 Q53 240 58 232 Q63 240 68 232 Q73 240 78 232 Q83 240 88 232 Q93 240 98 232 Q103 240 108 232 Q113 240 118 232 Q123 240 128 232 Q133 240 138 232 Q143 240 148 232 Q153 240 158 232 Q163 240 168 232 Q173 240 178 232 Q183 240 188 232' stroke='%23F5EDE0' stroke-width='1.4' stroke-opacity='0.92' fill='none'/%3E%3Cpath d='M18 18 Q10 23 18 28 Q10 33 18 38 Q10 43 18 48 Q10 53 18 58 Q10 63 18 68 Q10 73 18 78 Q10 83 18 88 Q10 93 18 98 Q10 103 18 108 Q10 113 18 118 Q10 123 18 128 Q10 133 18 138 Q10 143 18 148 Q10 153 18 158 Q10 163 18 168 Q10 173 18 178 Q10 183 18 188 Q10 193 18 198 Q10 203 18 208 Q10 213 18 218 Q10 223 18 228 Q10 228 18 232' stroke='%23F5EDE0' stroke-width='1.4' stroke-opacity='0.92' fill='none'/%3E%3Cpath d='M182 18 Q190 23 182 28 Q190 33 182 38 Q190 43 182 48 Q190 53 182 58 Q190 63 182 68 Q190 73 182 78 Q190 83 182 88 Q190 93 182 98 Q190 103 182 108 Q190 113 182 118 Q190 123 182 128 Q190 133 182 138 Q190 143 182 148 Q190 153 182 158 Q190 163 182 168 Q190 173 182 178 Q190 183 182 188 Q190 193 182 198 Q190 203 182 208 Q190 213 182 218 Q190 223 182 228 Q190 228 182 232' stroke='%23F5EDE0' stroke-width='1.4' stroke-opacity='0.92' fill='none'/%3E%3Ccircle cx='18' cy='18' r='4.5' stroke='%23F5EDE0' stroke-width='1' stroke-opacity='0.92' fill='none'/%3E%3Ccircle cx='18' cy='18' r='1.8' fill='%23F5EDE0' fill-opacity='0.85'/%3E%3Ccircle cx='182' cy='18' r='4.5' stroke='%23F5EDE0' stroke-width='1' stroke-opacity='0.92' fill='none'/%3E%3Ccircle cx='182' cy='18' r='1.8' fill='%23F5EDE0' fill-opacity='0.85'/%3E%3Ccircle cx='18' cy='232' r='4.5' stroke='%23F5EDE0' stroke-width='1' stroke-opacity='0.92' fill='none'/%3E%3Ccircle cx='18' cy='232' r='1.8' fill='%23F5EDE0' fill-opacity='0.85'/%3E%3Ccircle cx='182' cy='232' r='4.5' stroke='%23F5EDE0' stroke-width='1' stroke-opacity='0.92' fill='none'/%3E%3Ccircle cx='182' cy='232' r='1.8' fill='%23F5EDE0' fill-opacity='0.85'/%3E%3C/svg%3E") !important;
}

/* Image fills its padded cell — frame hangs visibly outside */
.timeline-photo img {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3/4 !important;
    object-fit: cover !important;
    object-position: center top !important;
    border: none !important;
    box-shadow: none !important;
    transition: transform 0.7s ease, filter 0.7s ease !important;

    /* ── Layer 1: base color aging ─────────────────────────────
       sepia(0.30)      — warm brownish cast without going B&W
       saturate(0.62)   — colors clearly present but sun-faded
       contrast(0.82)   — lifted blacks, like dye layers decaying
       brightness(1.08) — slightly washed, like old photo paper
       hue-rotate(10deg)— nudges everything toward amber warmth
    ────────────────────────────────────────────────────────── */
    filter: sepia(0.30) saturate(0.62) contrast(0.82) brightness(1.08) hue-rotate(10deg) !important;
}
.timeline-photo img:hover {
    transform: scale(1.03) !important;
    filter: sepia(0.15) saturate(0.80) contrast(0.88) brightness(1.10) hue-rotate(10deg) !important;
}

/* ── Layer 2: grain + vignette + warm amber tint overlay ─────
   ::before sits above the photo but below the lace ::after.
   THREE sub-layers via multiple backgrounds (top to bottom):
   1. Radial vignette — dark edges, bright centre
   2. Warm amber wash — simulates aged dye bleed in old film
   3. SVG feTurbulence grain — the strongest cue for "old photo"
────────────────────────────────────────────────────────────── */
.timeline-photo::before,
.bg-even .timeline-photo::before,
.bg-odd  .timeline-photo::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 16px !important;
    z-index: 2 !important;
    pointer-events: none !important;
    border-radius: 0 !important;
    background:
        radial-gradient(ellipse 85% 85% at 50% 50%, transparent 38%, rgba(30,10,5,0.18) 65%, rgba(30,10,5,0.42) 100%),
        linear-gradient(135deg, rgba(180,110,40,0.10) 0%, rgba(160,90,20,0.13) 50%, rgba(140,75,15,0.10) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='340'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeBlend in='SourceGraphic' mode='overlay'/%3E%3C/filter%3E%3Crect width='260' height='340' filter='url(%23g)' opacity='0.09'/%3E%3C/svg%3E") !important;
    background-size: 100% 100%, 100% 100%, 260px 340px !important;
    background-repeat: no-repeat, no-repeat, repeat !important;
    box-shadow: inset 0 0 18px rgba(80,30,10,0.18) !important;
    opacity: 1 !important;
    transition: opacity 0.7s ease !important;
}

.timeline-photo:hover::before,
.bg-even .timeline-photo:hover::before,
.bg-odd  .timeline-photo:hover::before {
    opacity: 0.45 !important;
}

@media (max-width: 768px) {
    .timeline-photo,
    .bg-even .timeline-photo,
    .bg-odd  .timeline-photo {
        width: clamp(160px, 52vw, 220px) !important;
        max-width: 220px !important;
        padding: 12px !important;
        margin: clamp(36px, 6vw, 52px) auto !important;
    }
    .timeline-item {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .timeline-item:nth-child(even) { flex-direction: column !important; }
    .timeline-item:nth-child(even) .timeline-text { text-align: center !important; }
    .timeline-dot { position: static !important; transform: none !important; margin: 0 auto !important; }
    .timeline-text { text-align: center !important; padding: 0 16px 16px !important; }
}


/* ── FIX 3: REGISTRY CARDS — tabular number alignment ───────── */
/* KEY: card uses align-items:stretch so number-row fills full width.
   Text elements (label, name) are centered via their own text-align. */

.registry-card,
.bg-even .registry-card,
.bg-odd  .registry-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;  /* children stretch to full card width */
}

/* Center the text-only elements individually */
.registry-card .registry-card-type,
.registry-card .registry-bank,
.registry-card .registry-account-name,
.bg-even .registry-card .registry-card-type,
.bg-even .registry-card .registry-bank,
.bg-even .registry-card .registry-account-name {
    text-align: center !important;
    width: 100% !important;
}

/* Number row: stretches full width naturally (align-items:stretch on parent) */
.registry-card .registry-number-row,
.bg-even .registry-card .registry-number-row,
.bg-odd  .registry-card .registry-number-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    gap: 10px !important;
    overflow: hidden !important;
    min-width: 0 !important;
    margin-top: auto !important;
}

/* Number: takes all remaining space, left-aligned, never wraps */
.registry-card .registry-account-number,
.bg-even .registry-card .registry-account-number,
.bg-odd  .registry-card .registry-account-number {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Copy button: right-pinned, never shrinks */
.registry-card .registry-copy-btn,
.bg-even .registry-card .registry-copy-btn,
.bg-odd  .registry-card .registry-copy-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}