/* ============================================================
   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-body:        clamp(0.9rem, 1.8vw, 1.05rem);
    --text-label:       clamp(0.6rem, 1.2vw, 0.72rem);

    /* 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 → dark → white alternation only on VISIBLE sections.
   The full .bg-odd/.bg-even background + text-color rules live
   further down (see "SECTION ALTERNATION"); only the timeline-dot
   border for light sections is set here since nothing later
   overrides it.
   ============================================================ */
.bg-odd .timeline-dot { border-color: var(--white) !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-card-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(var(--text-on-dark-rgb), 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;
    /* The couple's photo has more empty wall above their heads than
       ground below their feet. On the very wide/short viewports common
       for desktop browsers, "cover" can only show ~76% of the photo's
       height — not enough to fit both head and feet in full — so this
       anchors toward the top third, which keeps faces and headroom
       intact and only trims a little off the very bottom (shoes/hem)
       instead of cutting heads off. */
    background-position: center 25%;
    background-repeat: no-repeat;
    transform: scale(1.05);     /* slight scale for parallax effect */
    transition: transform 0.1s linear;
}

/* Dark overlay for readability
   Fixed value (not var(--overlay)) so the hero text stays legible no matter
   what the theme sets. Increase the alpha (0.38) for darker, decrease for lighter. */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 8, 8, 0.38);
}

/* 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: color-mix(in srgb, var(--primary) 50%, transparent);   /* 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;
    width: max-content;
    max-width: min(240px, 70vw);
}

/* 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;
    flex-shrink: 0;
}

.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);
    text-align: center;
    width: 100%;
}


/* ============================================================
   08 — COUNTDOWN SECTION
   Live timer to the wedding date.
   ============================================================ */
/* ── Countdown: cinematic editorial layout ──────────────────── */
.countdown {
    position: relative;
    overflow: hidden;
    padding: clamp(100px, 18vw, 180px) 0;
    background: var(--white);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    text-align: center;
    min-height: 60vh;
    display: flex;
    align-items: center;
}

/* Radial spotlight overlay — rendered as a pseudo-element */
.countdown-spotlight {
    pointer-events: none;
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 60% 70% at 50% 45%,
        rgba(160, 20, 20, 0.55) 0%,
        transparent 70%
    );
    z-index: 1;
}

/* Center the inner container */
.countdown .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Eyebrow label above the numbers */
.countdown-eyebrow {
    font-family: 'Jost', sans-serif;
    font-size: clamp(0.6rem, 1.5vw, 0.75rem);
    font-weight: 300;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin-bottom: clamp(28px, 5vw, 56px);
}

/* Botanical arc — keep rule but hidden (no element in HTML) */

/* Wedding date line — keep rule */

/* Timer row — no gaps between boxes, just flowing numbers */
.countdown-timer {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(20px, 5vw, 64px);
    width: 100%;
    flex-wrap: nowrap;
}

/* Each unit: no border, no background, no box */
.countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 1vw, 12px);
    border: none;
    padding: 0;
    background: transparent;
    min-width: unset;
}

/* Big italic number — the centrepiece */
.countdown-number {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(4rem, 14vw, 11rem);
    font-weight: 300;
    font-style: italic;
    color: var(--white);
    line-height: 0.9;
    letter-spacing: -0.01em;
    display: block;
    min-width: 1ch;
    text-shadow: 0 2px 40px rgba(0,0,0,0.5);
}

/* Small label below number */
.countdown-label {
    font-family: 'Jost', sans-serif;
    font-size: clamp(0.55rem, 1.2vw, 0.7rem);
    font-weight: 300;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
}

/* Separator — hidden (we use spacing instead) */

/* 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: rgba(255,255,255,0.85);
    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 color-mix(in srgb, var(--primary) 35%, transparent);
    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 {
    position: relative;
    flex: 0 0 auto;
    /* Padding creates the mat/border gap around the photo */
    padding: 14px;
    max-width: 280px;
    width: clamp(180px, 22vw, 280px);
    box-sizing: border-box;
    background: var(--white);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

/* Hardcoded CSS picture frame — thin inner rule inset from the mat edge */
.timeline-photo::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid var(--primary);
    opacity: 0.55;
    pointer-events: none;
    z-index: 2;
}

.timeline-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    object-position: center top;
    border: none;
    position: relative;
    z-index: 1;
    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: color-mix(in srgb, var(--primary) 15%, transparent);
    opacity: 0;
    transition: opacity var(--transition-med);
}

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

/* Photos beyond the initial count — hidden until "See More" is tapped */
.gallery-item--hidden {
    display: none;
}

/* "See More" button wrapper */
.gallery-see-more-wrap {
    text-align: center;
    margin-top: clamp(20px, 3vw, 32px);
}

/* "See More" button — matches the schedule map / registry link buttons */
.gallery-see-more-btn {
    display: inline-block;
    background: none;
    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: 12px 32px;
    cursor: pointer;
    transition: all var(--transition-med);
}

.gallery-see-more-btn:hover {
    background: var(--primary);
    color: var(--white);
}


/* ============================================================
   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 color-mix(in srgb, var(--primary) 20%, transparent);
    display: block;
}

/* The photo-protection script (script.js → protectImages) wraps every <img>
   in a .at-img-wrap div. Inside the lightbox that wrapper must fill the
   photo container, otherwise the img's max-height:100% has no definite
   height to resolve against and portrait photos overflow + get clipped
   by the wrapper's overflow:hidden. The wrapper now fills the box and
   centers the photo, so the whole image is always visible (contain). */
.lightbox-content .at-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
}

/* 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;
    }
}

/* Desktop: Principal Sponsors (3rd group) takes a full row to itself,
   so Candle Sponsors (4th) drops to the row below. Cord Sponsor (6th)
   also spans a full row so the pairs after it (Best Man / Maid of Honor,
   Groomsmen / Bridesmaids, Coin / Ring Bearer) stay side by side.
   NOTE: position-based — if you reorder weddingParty.groups in
   config.js, update the nth-child numbers below to match. */
@media (min-width: 640px) {
    .party-groups > .party-group:nth-child(3),
    .party-groups > .party-group:nth-child(6) {
        grid-column: 1 / -1;
    }
}

/* 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);
}

/* Swipe body — wraps the tab label AND the name list as ONE unit with a
   single border/card. Touch listeners bind here (see script.js), so dragging
   from the label or from anywhere in the list does the exact same thing,
   and both tracks below slide together in lockstep. */
.party-swipe-body {
    position: relative;
    border: 1px solid var(--border);
    background: var(--white);
    touch-action: pan-y;      /* reserve vertical panning for the browser; JS owns horizontal */
}

/* Tab viewport — clips the tab track. Only the current category's label is
   ever visible; there is nothing to scroll or tap here on its own anymore. */
.party-tabs {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}

/* Tab track — one full-width label per category, exactly mirroring
   .party-panels-track below so the label always sits above its own list. */
.party-tabs-track {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    will-change: transform;
}

.party-tab {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-family: 'Jost', sans-serif;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 11px 14px 9px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

/* Panel viewport — clips the sliding track, only one "page" visible at a time. */
.party-panels {
    position: relative;
    overflow: hidden;
    background: var(--white);
}

/* Sliding track — holds all category panels side by side in a row.
   JS translateX()'s this by -100% per step to switch categories; dragging
   anywhere on the swipe body moves it (and the tabs track above) 1:1 with
   the finger. */
.party-panels-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    will-change: transform;
}

/* Individual panel — always in-flow (never display:none) so the whole
   panel body is one continuous swipe target, not just its tab. */
.party-panel {
    display: flex;
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
    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;
}

/* 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;
}

/* Swipe hint — tells guests the whole card (label + list) is swipeable
   left/right between categories. Sits above the card; hidden by JS when
   there's only one category (nothing to swipe to). */
.party-swipe-hint {
    text-align: center;
    font-family: 'Jost', sans-serif;
    font-size: 0.6rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0.75;
    padding: 0 0 8px;
    pointer-events: 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);
    line-height: 1.1;
    /* Reserve space for 2 lines (1.1 line-height × 2) so ceremony/reception
       cards stay aligned below this point regardless of venue name length —
       otherwise a short name vs a long wrapping one pushes everything below
       (address, time, buttons) out of sync between the two cards. */
    min-height: 2.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    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);
    text-align: center;
}

/* Time */
/* Time */
.schedule-card-time {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 300;
    color: var(--dark);
    line-height: 1.15;
    /* Reserve space for 2 lines so ceremony/reception cards stay aligned
       below this point even when a time has a suffix like "(Tentative)"
       that wraps to a second line — same issue as the venue name, one
       field down. */
    min-height: 2.3em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    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: 12px;
    align-items: baseline;
    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 — kept on one line and never squeezed by the flex row,
   so it can't break mid-value (e.g. "5:30-6:30" / "PM") the way it did
   when it was allowed to shrink below its own content width. */
.order-item-time {
    font-family: 'Jost', sans-serif;
    font-size: clamp(0.58rem, 1.3vw, var(--text-label));
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--primary);
    flex-shrink: 0;
    white-space: nowrap;
    padding-top: 2px;
}

/* Event name on the right — takes the remaining space; min-width: 0 lets
   it wrap cleanly across two lines on narrow cards instead of overflowing,
   and the font-size trims slightly at smaller widths so it stays on one
   line more often. */
.order-item-event {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(0.88rem, 1.9vw, 1.15rem);
    font-style: italic;
    color: var(--dark);
    font-weight: 300;
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}


/* ============================================================
   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;
}

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

/* The colored circle */
.swatch-circle {
    width: clamp(38px, 10vw, 72px);
    height: clamp(38px, 10vw, 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: clamp(0.48rem, 1.8vw, 0.62rem);
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}


.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;
}

/* ── DRESS CODE ATTIRE CARDS (illustration + per-look swatches) ─ */
.dresscode-looks {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(36px, 6vw, 64px);
}

.dresscode-tier-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2vw, 20px);
    margin: 0 0 clamp(16px, 3vw, 28px);
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 400;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--primary);
}
.dresscode-tier-title::before,
.dresscode-tier-title::after {
    content: "";
    flex: 0 1 80px;
    height: 1px;
    background: currentColor;
    opacity: 0.4;
}

.dresscode-tier-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2.5vw, 28px);
    align-items: stretch;
}

/* Illustration box — bottom-aligned so every figure shares a baseline */
.dresscode-figure {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 4 / 5;
    min-height: 240px;
    flex: 0 0 auto;
}
/* script.js (protectImages) wraps every <img> in .at-img-wrap (inline-block,
   line-height 0). Make that wrapper fill the figure so the image has a
   definite box to size against; the protection overlay stays on top. */
.dresscode-figure .at-img-wrap {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block !important;
}
.dresscode-figure img {
    position: static;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
}

/* If an illustration fails to load, show a visible placeholder instead of a blank card */
.dresscode-figure.is-broken {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border);
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}
.dresscode-figure.is-broken::before { content: "Image not found"; }
.dresscode-figure.is-broken img { display: none; }

.dresscode-group-label {
    margin: 0;
}

.dresscode-group-style {
    margin: -4px 0 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(0.78rem, 1.4vw, 0.92rem);
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-align: center;
    color: var(--primary);
    opacity: 0.75;
}

.bg-even .dresscode-group-style { color: var(--text-on-dark) !important; opacity: 0.8; }

.dresscode-group-attire {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
    color: var(--dark);
}

/* Swatches sit at the bottom of each card so they line up across a row */
.dresscode-group .dresscode-group-swatches {
    margin-top: auto;
    padding-top: clamp(6px, 1.5vw, 12px);
    gap: clamp(4px, 1.5vw, 16px);
    flex-wrap: nowrap;
    align-items: flex-start;
}
.dresscode-group .swatch {
    width: clamp(60px, 15vw, 84px);
    flex: 0 1 auto;
    min-width: 0;
    gap: 8px;
}
.dresscode-group .swatch-circle {
    width: clamp(34px, 7vw, 46px);
    height: clamp(34px, 7vw, 46px);
    max-width: 100%;
    aspect-ratio: 1 / 1;
}
.dresscode-group .swatch-label {
    font-size: clamp(0.48rem, 1.4vw, 0.58rem);
    letter-spacing: 0.12em;
    line-height: 1.45;
    text-align: center;
    min-height: 2.9em;   /* reserve 2 lines so circles align across cards */
}

/* Dark (bg-even) sections: readable labels + visible edges on light swatches */
.bg-even .dresscode-group .swatch-label {
    color: var(--text-on-dark) !important;
    opacity: 0.85;
}
.bg-even .dresscode-group .swatch-circle {
    border-color: rgba(var(--text-on-dark-rgb), 0.5);
}
.bg-even .dresscode-group-attire { color: var(--text-on-dark) !important; }
.bg-even .dresscode-tier-title   { color: var(--text-on-dark) !important; }

@media (max-width: 640px) {
    .dresscode-tier-grid {
        grid-template-columns: 1fr;
        max-width: 380px;
        margin: 0 auto;
    }
}


/* ============================================================
   17 — REGISTRY SECTION
   Bank Transfer + E-Wallet 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;
    width: 100%;
    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 Transfer or E-Wallet */
.registry-card {
    background: var(--white);
    border: 1px solid var(--border);
    padding: clamp(24px, 4vw, 40px);
    width: 100%;
    max-width: 380px;
    text-align: center;
    container-type: inline-size;   /* lets .registry-account-name size itself off the card's own width, not the viewport */
}

/* Card type label — "Bank Transfer", "E-Wallet" */
/* 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;
}

/* QR code shown inline inside the bank / e-wallet card */
.registry-qr-wrap-inline {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(8px, 1.5vw, 12px);
    cursor: pointer;
}

.registry-card-qr-img {
    width: clamp(120px, 20vw, 160px);
    height: clamp(120px, 20vw, 160px);
    object-fit: contain;
    border: 1px solid var(--border);
    padding: 8px;
    background: var(--white);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

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

/* "Tap to Zoom" hint under the inline QR code */
.registry-card-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;
    margin-bottom: clamp(14px, 2vw, 20px);
}

/* Account holder name */
.registry-account-name {
    font-family: 'Cormorant Garamond', serif;
    /* Sized off the card's own content width (via container-type on .registry-card),
       so it shrinks correctly whether the card is full-width on mobile or one of
       2-3 columns — a fixed vw value can't tell the difference between those. */
    font-size: clamp(0.85rem, 7cqw, 1.6rem);
    font-style: italic;
    font-weight: 300;
    color: var(--dark);
    margin-bottom: clamp(14px, 2vw, 20px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Account/mobile number row with copy button */
.registry-number-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: transparent;
    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 */

/* Subtle "tap to enlarge" hint below label */

/* ── 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: clamp(0.52rem, 2vw, 0.68rem);
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

/* Small caps label above the registry QR modal image — "Bank Transfer" / "E-Wallet" */
.qr-lightbox-eyebrow {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-label);
    font-weight: 400;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--primary);
    opacity: 0.8;
}

/* Account holder name shown under the registry QR modal image */
.qr-lightbox-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-style: italic;
    font-weight: 300;
    color: var(--dark);
}

/* 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: clamp(0.85rem, 1.6vw, 1rem);
    font-weight: 300;
    color: var(--white);
    letter-spacing: 0.06em;
    margin-bottom: clamp(30px, 5vw, 50px);
    text-align: center;
    opacity: 0.85;
}

.rsvp-deadline strong {
    color: var(--primary);
    font-weight: 500;
    letter-spacing: 0.04em;
    background: var(--white);
    padding: 2px 10px;
}

/* ── 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;
}

/* The 200px min-width works fine on tablet/desktop, but on small phones
   two buttons at 200px + gap is wider than the screen, so flex-wrap
   pushes "Regretfully Declines" onto its own row below "Joyfully
   Accepts". Let them shrink here so both stay side by side. */
@media (max-width: 480px) {
    .rsvp-btn-row {
        flex-wrap: nowrap;
        gap: 10px;
    }

    .rsvp-choice-btn {
        min-width: 0;
        max-width: none;
        padding: clamp(20px, 6vw, 28px) 10px;
    }
}

.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 ────────────────────────────── */

/* Meal option pill buttons */

/* Back link */

/* 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: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
}

.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: color-mix(in srgb, var(--primary) 6%, transparent) !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: color-mix(in srgb, var(--primary) 8%, transparent);
    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: color-mix(in srgb, var(--primary) 8%, transparent);
}

.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: pan-x pan-y; /* allow scroll gestures to pass through; blocks only pinch/callout */
    -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: color-mix(in srgb, var(--primary) 25%, transparent);
    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: color-mix(in srgb, var(--primary) 30%, transparent);
    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
   Persistent fixed bar at the very bottom of the page.
   Manual play/pause only — hidden entirely when config.music
   has no musicUrl set. Shown with display:flex by script.js.
   ============================================================ */
.music-player {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    background: rgba(20, 18, 16, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.music-play-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: var(--white, #fff);
    font-size: 0.7rem;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.music-play-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
}

.music-play-btn:active {
    transform: scale(0.94);
}

.music-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.music-title {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--white, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.music-artist {
    font-family: 'Jost', sans-serif;
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 2px 0 0;
}

/* Small equalizer-style indicator — animates only while playing */
.music-wave {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 14px;
    color: rgba(255, 255, 255, 0.5);
}

.music-wave span {
    display: inline-block;
    width: 3px;
    height: 100%;
    background: currentColor;
    border-radius: 1px;
    transform: scaleY(0.35);
    transform-origin: center;
    transition: opacity var(--transition-fast);
}

.music-player.is-playing .music-wave {
    color: var(--primary, #a88a5a);
}

.music-player.is-playing .music-wave span {
    animation: music-wave-bounce 0.9s ease-in-out infinite;
}

.music-player.is-playing .music-wave span:nth-child(1) { animation-delay: 0s; }
.music-player.is-playing .music-wave span:nth-child(2) { animation-delay: 0.12s; }
.music-player.is-playing .music-wave span:nth-child(3) { animation-delay: 0.24s; }
.music-player.is-playing .music-wave span:nth-child(4) { animation-delay: 0.36s; }
.music-player.is-playing .music-wave span:nth-child(5) { animation-delay: 0.48s; }

@keyframes music-wave-bounce {
    0%, 100% { transform: scaleY(0.35); }
    50%      { transform: scaleY(1); }
}


/* ============================================================
   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 mobile sizing handled by the lace-frame override block below */

    .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>  */

/* Standalone lace block with spacing — drop between any two sections */

/* ── 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(var(--text-on-dark-rgb), 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: cinematic — no boxes, no separators ─────────── */
.countdown-unit {
    border: none !important;
    background: transparent;
    position: relative;
}

.countdown-unit::before {
    display: none !important;
}

/* ── 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-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
   Light sections: var(--white)
   Dark sections:  var(--dark-section)
   (This is the full, canonical .bg-odd/.bg-even definition — an
   earlier, now-removed duplicate near the top of this file used to
   set .bg-even to var(--secondary), but it was always overridden
   by this later block anyway, so it was dead weight.)
   ============================================================ */

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

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

/* All text on dark sections flips to light */
.bg-even .section-label {
    color: rgba(var(--text-on-dark-rgb), 0.65) !important;
}
.bg-even .section-title {
    color: var(--text-on-dark) !important;
}
.bg-even .section-subtitle {
    color: rgba(var(--text-on-dark-rgb), 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(var(--text-on-dark-rgb), 0.80) !important;
}
.bg-even h1,
.bg-even h2,
.bg-even h3,
.bg-even h4 {
    color: var(--text-on-dark) !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(var(--text-on-dark-rgb), 0.08) !important;
    border-color: rgba(var(--text-on-dark-rgb), 0.18) !important;
    border-left-color: rgba(var(--text-on-dark-rgb), 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: var(--text-on-dark) !important;
}

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

/* Gold divider on dark sections */
.bg-even .gold-divider::before,
.bg-even .gold-divider::after {
    background: rgba(var(--text-on-dark-rgb), 0.35) !important;
}
.bg-even .gold-divider-diamond {
    color: rgba(var(--text-on-dark-rgb), 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(var(--text-on-dark-rgb), 0.30) !important;
}
.bg-even .couple-note-diamond {
    color: rgba(var(--text-on-dark-rgb), 0.55) !important;
}

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

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

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

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

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

/* Countdown units on dark sections */
.bg-even .countdown-unit {
    border-color: rgba(var(--text-on-dark-rgb), 0.22) !important;
}
.bg-even .countdown-unit::before {
    background: rgba(var(--text-on-dark-rgb), 0.40) !important;
}
.bg-even .countdown-number {
    color: var(--text-on-dark) !important;
}
.bg-even .countdown-label {
    color: rgba(var(--text-on-dark-rgb), 0.60) !important;
}
/* Video frame on dark sections */
.bg-even .video-frame-outer {
    border-color: rgba(var(--text-on-dark-rgb), 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>
   ============================================================ */

/* Full-width lace scallop strip — sits at top of dark section */

/* When lace sits on top of a DARK section (scallops face down into section) */
/* When lace sits on top of a LIGHT section (scallops face down into section) */


/* ============================================================
   LACE BORDER DECORATIONS
   Lace-edged card for photo/content blocks (like image 6)
   ============================================================ */

/* Lace overlay — drawn with repeating radial gradients (CSS-only, no image needed) */

/* ── 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: var(--text-on-dark) !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,
.dresscode-description,
.registry-message,
.faq-answer p,
.footer-thanks,
.footer-verse {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Section subtitles stay centered */
.section-subtitle {
    text-align: center;
}

/* ── 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(var(--text-on-dark-rgb), 0.15);
    outline-offset: -8px;
    /* Corner roses using box-shadow layering */
    box-shadow:
        0 0 0 1px rgba(var(--text-on-dark-rgb), 0.12),
        inset 0 0 0 1px rgba(var(--text-on-dark-rgb), 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(var(--text-on-dark-rgb), 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');

    /* Dark-section photo overlay — now follows the client's theme.
       Pulls from --overlay in theme.css (edit the color there, not
       here) so every preset (Dusty Blue, Sage, Lavender, etc.) tints
       its dark sections to match instead of the old fixed red-black. */
    --overlay-dark:  var(--overlay);
}

/* 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 — round divider accents (used between sections)
   lace-doilly1-transparent.png (simple round — for dividers)
   ============================================================ */

/* ── Round lace doily divider — between sections ─────────────
   Centered decorative accent at section header               */


/* ============================================================
   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 !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-height: none !important;
    z-index: 1;
    padding: clamp(24px, 4vw, 40px) clamp(20px, 3vw, 32px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 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 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 */

/* Bottom lace trim — flipped */



/* ============================================================
   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: hardcoded CSS picture frame ──
   Photo stays portrait rectangle. A white mat + thin inset rule
   wraps around the outside. Padding on .timeline-photo creates
   the mat gap; .timeline-photo::after draws the inner border line. */

/* On dark sections — warm cream mat instead of white, softer border */
.bg-even .timeline-photo {
    background: var(--secondary);
}
.bg-even .timeline-photo::after {
    border-color: var(--border);
    opacity: 0.7;
}


/* ── 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: var(--secondary) !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: var(--dark) !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;
}


/* 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(var(--text-on-dark-rgb), 0.25);
}
.bg-even .lace-ornament-line span {
    color: rgba(var(--text-on-dark-rgb), 0.40);
    font-size: 0.5rem;
    letter-spacing: 0.3em;
}

/* ── 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;
}

/* ── 4b. RSVP subtitle emphasis — call out key policy phrases
   (e.g. "strictly adults-only", "no plus-ones") without a harsh
   all-caps or bright-red look. Wrap the phrase in the RSVP note
   text with: <span class="rsvp-emphasis">strictly adults-only</span>
   Italic + the accent color + a thin underline reads as an elegant
   aside rather than a warning label, matching the invitation's tone. */
.rsvp-emphasis {
    font-style: italic;
    color: var(--primary);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: rgba(122, 28, 28, 0.35);
    text-underline-offset: 3px;
}


/* ── 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;
}



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

   Lace colour: antique cream var(--text-on-dark)
   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
   ============================================================ */




/* ============================================================
   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 centering is fully handled by the equivalent,
   more complete rule in the "FIXES — ROUND 3" section below (it also
   adds justify-content), so it isn't repeated here. */
.countdown-timer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !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;
}




/* ============================================================
   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 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;
}
/* ==========================================================================
   SCHEDULE CARD ILLUSTRATION
   ========================================================================== */
.schedule-card-illustration {
    width: 100%;
    margin-bottom: 20px;
    border-radius: 4px;
    overflow: hidden;
}

.schedule-card-illustration img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: center top;
    display: block;
    border-radius: 4px;
}

/* ============================================================
   REGISTRY — PHOTO SHARING QR CODE SECTION
   ============================================================ */

/* ============================================================
   TIMELINE PHOTO — HARDCODED CSS PICTURE FRAME
   Photo stays portrait rectangle (no oval clip). Padding on the
   wrapper creates a mat around the photo; ::after draws a thin
   inset border line to finish the frame — no image dependency.
   ============================================================ */

.timeline-photo,
.bg-even .timeline-photo,
.bg-odd  .timeline-photo {
    position: relative !important;
    flex: 0 0 auto !important;
    width: clamp(220px, 30vw, 320px) !important;
    max-width: 320px !important;
    /* Padding = the mat between the photo edge and the frame border */
    padding: 14px !important;
    box-sizing: border-box !important;
    background: var(--white) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16) !important;
    border: none !important;
    margin: 0 !important;
    overflow: visible !important;
}

.bg-even .timeline-photo {
    background: var(--secondary) !important;
}

.timeline-photo::before,
.bg-even .timeline-photo::before,
.bg-odd  .timeline-photo::before {
    display: none !important;
    content: none !important;
}

/* Thin inset border line — the "frame" itself */
.timeline-photo::after,
.bg-odd  .timeline-photo::after {
    content: '' !important;
    position: absolute !important;
    inset: 6px !important;
    border: 1px solid var(--primary) !important;
    opacity: 0.55 !important;
    pointer-events: none !important;
    z-index: 2 !important;
    background: none !important;
}

.bg-even .timeline-photo::after {
    content: '' !important;
    position: absolute !important;
    inset: 6px !important;
    border: 1px solid var(--border) !important;
    opacity: 0.7 !important;
    pointer-events: none !important;
    z-index: 2 !important;
    background: none !important;
}

/* Photo — portrait rectangle, no clip-path, sits ON TOP of the frame border */
.timeline-photo img,
.bg-even .timeline-photo img,
.bg-odd  .timeline-photo img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 3/4 !important;
    object-fit: cover !important;
    object-position: center center !important;
    border: none !important;
    clip-path: none !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 3 !important;
    transition: transform 0.4s ease !important;
    filter: none !important;
}

.timeline-photo img:hover,
.bg-even .timeline-photo img:hover,
.bg-odd  .timeline-photo img:hover {
    transform: scale(1.02) !important;
}

/* ── Mobile: smaller frame, centered ── */
@media (max-width: 767px) {
    .timeline-photo,
    .bg-even .timeline-photo,
    .bg-odd  .timeline-photo {
        width: clamp(200px, 70vw, 280px) !important;
        max-width: clamp(200px, 70vw, 280px) !important;
        padding: 12px !important;
        margin: 0 auto !important;
        overflow: visible !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,
    .timeline-text { text-align: center !important; padding: 0 16px 16px !important; }
    .timeline-dot { position: static !important; transform: none !important; margin: 8px auto !important; }
}
/* ============================================================
   COUNTDOWN — MOBILE SINGLE ROW FIX (end of file, wins cascade)
   ============================================================ */
@media (max-width: 480px) {
    .countdown-timer {
        flex-wrap: nowrap !important;
        gap: 3px !important;
    }
    .countdown-unit {
        min-width: 0 !important;
        flex: 0 0 auto !important;
        padding: 10px 7px !important;
    }
    .countdown-number {
        font-size: clamp(1.5rem, 6.5vw, 2rem) !important;
        min-width: 0 !important;
    }
    .countdown-label {
        font-size: 0.52rem !important;
        letter-spacing: 0.1em !important;
    }
}

/* ============================================================
   COUNTDOWN REDESIGN — CINEMATIC EDITORIAL
   Overrides all previous countdown rules.
   Inspo: large italic numerals, no boxes, spotlight bg.
   ============================================================ */

/* ── Strip ALL box chrome from countdown units ──────────────── */
.countdown-unit,
.bg-even .countdown-unit,
.bg-odd  .countdown-unit {
    border: none !important;
    border-color: transparent !important;
    padding: 0 !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    background: transparent !important;
}

.countdown-unit::before,
.bg-even .countdown-unit::before,
.countdown-unit::after,
.bg-even .countdown-unit::after {
    display: none !important;
    content: none !important;
}

/* ── Numbers: massive italic white ──────────────────────────── */
.countdown-number,
.bg-even .countdown-number,
.bg-odd  .countdown-number {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(2.5rem, 7vw, 5.5rem) !important;
    font-weight: 300 !important;
    font-style: italic !important;
    color: var(--white) !important;
    line-height: 0.9 !important;
    letter-spacing: -0.01em !important;
    text-shadow: 0 2px 40px rgba(0,0,0,0.5) !important;
}

/* ── Labels: small spaced caps ──────────────────────────────── */
.countdown-label,
.bg-even .countdown-label,
.bg-odd  .countdown-label {
    font-family: 'Jost', sans-serif !important;
    font-size: clamp(0.55rem, 1.2vw, 0.7rem) !important;
    font-weight: 300 !important;
    letter-spacing: 0.35em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.45) !important;
}

/* ── Timer row ───────────────────────────────────────────────── */
.countdown-timer {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: clamp(24px, 6vw, 72px) !important;
    flex-wrap: nowrap !important;
    margin-top: 0 !important;
    width: 100% !important;
}

/* ── Eyebrow label ───────────────────────────────────────────── */
.countdown-eyebrow {
    font-family: 'Jost', sans-serif;
    font-size: clamp(0.6rem, 1.5vw, 0.75rem);
    font-weight: 300;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: clamp(28px, 5vw, 56px);
    margin-top: 0;
}

/* ── Section padding & centering ────────────────────────────── */
.countdown {
    padding: clamp(100px, 18vw, 180px) 0 !important;
    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;
}

/* ── Mobile: allow slight shrink but keep on one line ────────── */
@media (max-width: 480px) {
    .countdown-number,
    .bg-even .countdown-number {
        font-size: clamp(2.8rem, 10vw, 4rem) !important;
    }
    .countdown-timer {
        gap: clamp(12px, 4vw, 24px) !important;
    }
    .countdown-label,
    .bg-even .countdown-label {
        font-size: 0.5rem !important;
        letter-spacing: 0.2em !important;
    }
}


/* ============================================================
   COUNTDOWN — STAGE REDESIGN v2
   100vh, vignette overlay (not flat dark), cream numbers,
   content nudged into the spotlight sweet spot.
   ============================================================ */

/* ── 1. Full viewport height ─────────────────────────────────── */
.countdown,
#countdown,
#countdown.bg-even {
    min-height: 100vh !important;
    height: 100vh !important;
    padding: 0 !important;
}

/* ── 2. Override bg-even flat overlay → vignette only ──────────
   Layer order (back to front):
   1. The curtain photo
   2. A radial vignette that darkens only the edges/corners
   3. A very subtle dark film to slightly tone the centre        */
#countdown.bg-even {
    background-image:
        radial-gradient(
            ellipse 55% 60% at 50% 42%,
            rgba(0,0,0,0.00) 0%,
            rgba(0,0,0,0.10) 40%,
            rgba(0,0,0,0.55) 75%,
            rgba(0,0,0,0.80) 100%
        ),
        var(--bg-countdown) !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
}

/* ── 3. Remove the CSS spotlight div (no longer needed) ─────── */
.countdown-spotlight {
    display: none !important;
}

/* ── 4. Vertically position content — nudge up into spotlight ── */
.countdown .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* Push content so numbers land at ~42% height (spotlight center) */
    margin-top: -4vh !important;
}

/* ── 5. Numbers: warm cream instead of stark white ───────────── */
.countdown-number,
.bg-even .countdown-number {
    color: var(--text-on-dark) !important;
    text-shadow:
        0 0 60px rgba(200, 60, 20, 0.3),
        0 2px 20px rgba(0,0,0,0.4) !important;
}

/* ── 6. Eyebrow + labels: slightly warmer tone ───────────────── */
.countdown-eyebrow {
    color: rgba(242, 230, 213, 0.5) !important;
    margin-bottom: clamp(20px, 3vw, 36px) !important;
}

.countdown-label,
.bg-even .countdown-label {
    color: rgba(242, 230, 213, 0.45) !important;
    margin-top: clamp(8px, 1.2vw, 14px) !important;
}

/* ── 7. Mobile: reduce height to 80vh so it doesn't crush ────── */
@media (max-width: 600px) {
    .countdown,
    #countdown,
    #countdown.bg-even {
        min-height: 80vh !important;
        height: 80vh !important;
    }
    .countdown .container {
        margin-top: -6vh !important;
    }
}


/* ============================================================
   COUNTDOWN — IMAGE SWAP v3
   Use pre-processed dark curtain (vignette baked in).
   Remove all CSS overlay layers — image handles it all.
   ============================================================ */

:root {
    --bg-countdown: url('assets/images/curtain-dark.webp');
}

#countdown.bg-even {
    background-image:
        var(--bg-countdown) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Numbers: pure cream — warm against the deep red */
.countdown-number,
.bg-even .countdown-number {
    color: var(--text-on-dark) !important;
    text-shadow:
        0 0 80px rgba(120, 0, 0, 0.4),
        0 2px 12px rgba(0,0,0,0.6) !important;
}

.countdown-eyebrow {
    color: rgba(239, 224, 204, 0.45) !important;
}

.countdown-label,
.bg-even .countdown-label {
    color: rgba(239, 224, 204, 0.4) !important;
}


/* ============================================================
   COUNTDOWN — FINAL POLISH
   1. Playfair Display font (matches inspo)
   2. True vertical centering
   3. Updated curtain image centered
   ============================================================ */

/* ── Font swap to Playfair Display ──────────────────────────── */
.countdown-number,
.bg-even .countdown-number {
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    color: var(--text-on-dark) !important;
    text-shadow:
        0 0 80px rgba(120, 0, 0, 0.35),
        0 2px 12px rgba(0,0,0,0.55) !important;
}

/* ── True vertical center — remove the upward nudge ─────────── */
.countdown .container {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ── Section: ensure flexbox centers content perfectly ──────── */
.countdown,
#countdown,
#countdown.bg-even {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ── Updated image: centered spotlight ──────────────────────── */
#countdown.bg-even {
    background-position: center center !important;
}


/* ============================================================
   COUNTDOWN — CENTERING FIX
   Kill the padding that was fighting flexbox align-items center.
   ============================================================ */

.countdown,
#countdown,
#countdown.bg-even {
    padding: 0 !important;
    height: 100vh !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.countdown .container {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* ============================================================
   COUNTDOWN — RESPONSIVE SPOTLIGHT IMAGES
   Desktop: wide horizontal spotlight (curtain-dark.webp)
   Mobile:  tall vertical spotlight (curtain-dark-mobile.webp)
   ============================================================ */

/* Desktop default — already set via --bg-countdown */
#countdown.bg-even {
    background-image: url('assets/images/curtain-dark.webp') !important;
    background-size: cover !important;
    background-position: center center !important;
}

/* Mobile: swap to portrait-optimized version */
@media (max-width: 768px) {
    #countdown.bg-even {
        background-image: url('assets/images/curtain-dark-mobile1.webp') !important;
        background-size: cover !important;
        background-position: center center !important;
    }
}

/* ============================================================
   MOBILE COUNTDOWN — Black overlay instead of red
   Lets the natural wine-red curtain photo show through with
   a dark vignette that matches desktop moodiness.
   ============================================================ */
@media (max-width: 768px) {
    /* Replace red radial spotlight with a dark black vignette */
    .countdown-spotlight {
        display: block !important;
        background: radial-gradient(
            ellipse 80% 60% at 50% 45%,
            rgba(0, 0, 0, 0.0) 0%,
            rgba(0, 0, 0, 0.55) 70%,
            rgba(0, 0, 0, 0.80) 100%
        ) !important;
    }

    /* Remove red glow from number text-shadow */
    .countdown-number,
    .bg-even .countdown-number {
        text-shadow: 0 2px 20px rgba(0,0,0,0.6) !important;
    }

    /* Reset background blend mode so photo renders naturally */
    #countdown.bg-even {
        background-blend-mode: normal !important;
    }
}

/* ============================================================
   EVENT SCHEDULE — SOLID IVORY CARDS
   Client request: remove the striped background from the
   Ceremony / Reception cards and use a solid colour that suits
   the Old Money Red theme.

   The cards are now plain CSS (no image files needed):
     - solid ivory panel (same cream as the illustrations, so the
       line drawings blend in seamlessly)
     - a fine double burgundy keyline drawn with ::before / ::after
       (a nod to the double border of the old frame)

   These now derive from theme.css — change the palette there and
   these cards recolor automatically, no editing needed here.
   ============================================================ */
#schedule {
    --sched-paper:      var(--secondary);                  /* card colour */
    --sched-ink:        var(--dark);                        /* main text */
    --sched-accent:     var(--primary);                     /* label, icons, map button */
    --sched-muted:      var(--muted);                       /* address text */
    --sched-line:       rgba(var(--primary-rgb), 0.55);     /* outer keyline */
    --sched-line-soft:  rgba(var(--primary-rgb), 0.35);     /* inner keyline + illustration ring */
    --sched-rule:       rgba(var(--primary-rgb), 0.28);     /* dividers */
    --sched-rule-soft:  rgba(var(--primary-rgb), 0.22);
}

/* Grid (not flex) so % padding on the card resolves against the
   card's own width. One 420px column on mobile, two on tablet+. */
#schedule .schedule-cards {
    display: grid;
    grid-template-columns: minmax(0, 420px);
    justify-content: center;
    align-items: stretch;
    gap: clamp(28px, 5vw, 56px);
    max-width: 960px;
}
@media (min-width: 768px) {
    #schedule .schedule-cards {
        grid-template-columns: repeat(2, minmax(0, 420px));
    }
}

/* The card itself: solid colour, no background image */
#schedule .schedule-card {
    position: relative;
    isolation: isolate;
    width: 100%;
    padding: 11% 9% 9% !important;       /* % of card width; clears the keylines */
    border: none !important;
    outline: none !important;
    border-radius: 0;
    background: var(--sched-paper) !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.38) !important;
}

/* Double keyline inside the card (replaces the old image caps) */
#schedule .schedule-card::before,
#schedule .schedule-card::after {
    content: '';
    position: absolute;
    top: auto; right: auto; bottom: auto; left: auto;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    background: none;
    font-size: 0;
    pointer-events: none;
    z-index: -1;
}
#schedule .schedule-card::before {
    inset: 10px;
    border: 1px solid var(--sched-line);
}
#schedule .schedule-card::after {
    inset: 15px;
    border: 1px solid var(--sched-line-soft);
}

/* Text colours (beats the older .bg-even / .bg-odd !important card colour rules) */
#schedule .schedule-card p,
#schedule .schedule-card h3,
#schedule .schedule-card span {
    color: var(--sched-ink) !important;
}
#schedule .schedule-card .schedule-card-label,
#schedule .schedule-card .schedule-card-icon,
#schedule .schedule-card .schedule-toggle-icon {
    color: var(--sched-accent) !important;
}
#schedule .schedule-card .schedule-card-address {
    color: var(--sched-muted) !important;
}

/* Illustration: fine keyline ring */
#schedule .schedule-card-illustration {
    border-radius: 2px;
    overflow: visible;
    box-shadow:
        0 0 0 1px  var(--sched-line),
        0 0 0 4px  var(--sched-paper),
        0 0 0 5px  var(--sched-line-soft);
}
#schedule .schedule-card-illustration img {
    border-radius: 2px;
}

/* Map button */
#schedule .schedule-map-btn {
    border-color: var(--sched-accent) !important;
    color: var(--sched-accent) !important;
    background: transparent !important;
}
#schedule .schedule-map-btn:hover {
    background: var(--sched-accent) !important;
    color: var(--sched-paper) !important;
    border-color: var(--sched-accent) !important;
}

/* Order of Events toggle + expanded list */
#schedule .schedule-toggle {
    border-top-color: var(--sched-rule) !important;
}
#schedule .schedule-toggle:hover span {
    color: var(--sched-accent) !important;
}
#schedule .order-of-events {
    border-top-color: var(--sched-rule) !important;
    color: var(--sched-ink);
}
#schedule .order-of-events *,
#schedule .schedule-card .order-of-events p,
#schedule .schedule-card .order-of-events span {
    color: var(--sched-ink) !important;
    border-color: var(--sched-rule-soft) !important;
}

/* Small phones: tighten side padding a touch so text has room */
@media (max-width: 380px) {
    #schedule .schedule-card {
        padding-left: 12% !important;
        padding-right: 12% !important;
    }
}


/* ============================================================
   HERO NAMES — CALLIGRAPHY SCRIPT
   Client request: fancier font for "Jason & Gwyn" in the hero.
   Uses Pinyon Script (already loaded in main.html, same font as
   the section titles). Script fonts run smaller and have tall
   swashes, so size is bumped up and line-height opened slightly.
   letter-spacing MUST stay 0 or the joined letters break apart.

   To try another font: change the family below (e.g.
   'Great Vibes' or 'Parisienne') and add it to the Google Fonts
   <link> in main.html.
   ============================================================ */
.hero-groom,
.hero-bride {
    font-family: 'Pinyon Script', 'Cormorant Garamond', serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
    line-height: 1.05;
    font-size: calc(var(--text-hero) * 1.08);
}
/* Phones: script reads smaller than the old serif, so go a bit larger */
@media (max-width: 600px) {
    .hero-groom,
    .hero-bride {
        font-size: calc(var(--text-hero) * 1.4);
    }
}
@media (max-height: 500px) and (orientation: landscape) {
    .hero-groom,
    .hero-bride {
        font-size: clamp(2.2rem, 9vh, 4.4rem);
    }
}


/* ============================================================
   19b — RSVP CLOSED STATE
   Shown after the RSVP deadline. Quiet, formal, on-theme:
   a hairline double frame with a small ornament, like the
   reverse of an engraved invitation card.
   ============================================================ */
.rsvp-closed {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
    padding: clamp(40px, 7vw, 68px) clamp(26px, 5vw, 58px);
    text-align: center;
    border: 1px solid var(--border);
    animation: fadeInUp 0.8s ease forwards;
}

/* inner hairline — the "double frame" */
.rsvp-closed::before {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid var(--border);
    opacity: 0.6;
    pointer-events: none;
}

.rsvp-closed-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: clamp(18px, 3vw, 26px);
}

.rsvp-closed-ornament span {
    flex: 1;
    max-width: 64px;
    height: 1px;
    background: var(--border);
}

.rsvp-closed-ornament em {
    font-style: normal;
    font-size: 0.8rem;
    color: var(--primary);
}

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

.rsvp-closed-message {
    font-family: 'Jost', sans-serif;
    font-size: var(--text-body);
    font-weight: 300;
    line-height: 1.9;
    color: var(--muted);
    max-width: 440px;
    margin: 0 auto;
}

.rsvp-closed-date {
    margin-top: clamp(22px, 3.5vw, 32px);
    padding-top: clamp(18px, 3vw, 24px);
    border-top: 1px solid var(--border);
    font-family: 'Jost', sans-serif;
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--primary);
}

.rsvp-closed-date strong {
    font-weight: 500;
}

/* On the burgundy (bg-even) RSVP section */
.bg-even .rsvp-closed                  { border-color: rgba(var(--text-on-dark-rgb), 0.28); }
.bg-even .rsvp-closed::before          { border-color: rgba(var(--text-on-dark-rgb), 0.14); opacity: 1; }
.bg-even .rsvp-closed-ornament span    { background: rgba(var(--text-on-dark-rgb), 0.35); }
.bg-even .rsvp-closed-ornament em      { color: rgba(var(--text-on-dark-rgb), 0.75); }
.bg-even .rsvp-closed-date             { border-top-color: rgba(var(--text-on-dark-rgb), 0.18); }