/* ============================================================
   LUXE ENVELOPE — Template stylesheet
   Premium editorial wedding look: ivory paper, champagne washes,
   zachte arches, serif display (Cormorant) + rustige sans (Mulish).
   Kleuren komen uit de CSS-vars van de site (--color-primary,
   --color-text, --color-background) zodat paletten werken.
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Mulish:wght@300;400;500;600;700&display=swap');

/* ---------- Design tokens (afgeleid van palet) ---------- */
:root {
    --lux-serif: 'Cormorant Garamond', Georgia, serif;
    --lux-sans: 'Mulish', 'Helvetica Neue', sans-serif;

    --lux-ink: var(--color-text, #40322C);
    --lux-accent: var(--color-primary, #A5715F);
    --lux-paper: var(--color-background, #FAF5EF);

    --lux-surface: color-mix(in srgb, #ffffff 78%, var(--lux-paper));
    --lux-surface-soft: color-mix(in srgb, var(--lux-accent) 5%, var(--lux-paper));
    --lux-line: color-mix(in srgb, var(--lux-accent) 16%, transparent);
    --lux-line-soft: color-mix(in srgb, var(--lux-accent) 9%, transparent);
    --lux-shadow: 0 30px 60px -38px color-mix(in srgb, var(--lux-accent) 55%, transparent);
    --lux-shadow-soft: 0 18px 44px -30px color-mix(in srgb, var(--lux-accent) 45%, transparent);

    --lux-radius: 22px;
    --lux-radius-sm: 14px;
}

/* ---------- Lange woorden & URL safety ---------- */
html { overflow-wrap: anywhere; word-break: normal; }

:where(h1, h2, h3, h4, p, li, blockquote, figcaption,
    .text-content, .form-intro, .form-label,
    .timeline-title, .timeline-description,
    .title-blok-h1, .title-blok-h2, .title-blok-h3,
    .header-namen, .hero-card .couple-names) {
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

a, .is-url, .is-email, code, pre { overflow-wrap: anywhere; word-break: break-word; }

.countdown-value, .countdown-number { word-break: keep-all; hyphens: none; }

/* ============================================================
   BASE — ivory paper met zachte champagne-washes
   ============================================================ */
body {
    margin: 0;
    padding: 0;
    background-color: var(--lux-paper);
    background-image:
        radial-gradient(1200px 640px at 85% -6%, color-mix(in srgb, var(--lux-accent) 7%, transparent), transparent 60%),
        radial-gradient(1000px 700px at -10% 30%, color-mix(in srgb, #ffffff 55%, transparent), transparent 55%),
        radial-gradient(900px 620px at 50% 110%, color-mix(in srgb, var(--lux-accent) 6%, transparent), transparent 60%);
    background-attachment: fixed;
    font-family: var(--lux-sans);
    color: var(--lux-ink);
    font-weight: 400;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

main { padding-bottom: 72px; }

/* Sectie-ademruimte */
[data-card-id] { padding: 34px 0 !important; }
[data-card-id]:first-child { padding-top: 0 !important; }
[data-card-id]:last-child { padding-bottom: 0 !important; }
[data-card-id]:has(.hero-card) { padding-top: 0 !important; }

/* ============================================================
   HEADER & NAVIGATIE
   ============================================================ */
header {
    background: color-mix(in srgb, var(--lux-paper) 82%, #ffffff);
    position: relative;
    z-index: 50;
    border-bottom: 1px solid var(--lux-line-soft);
    backdrop-filter: blur(6px);
}

#publicNav { position: relative; padding: 20px 22px 18px; }

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Monogram "A & D" */
.header-namen {
    font-family: var(--lux-serif);
    font-weight: 500;
    color: var(--lux-accent);
    font-size: 30px;
    line-height: 1;
    letter-spacing: 0.1em;
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    position: relative;
}
.header-namen .en-teken {
    font-family: var(--lux-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 0.72em;
    opacity: 0.75;
    letter-spacing: 0;
}

/* Hamburger */
.nav-toggle {
    --size: 40px;
    --line-w: 26px;
    --line-h: 1.4px;
    --gap: 7px;
    position: relative;
    display: inline-block;
    width: var(--size);
    height: var(--size);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    outline-offset: 4px;
}
.nav-toggle::before,
.nav-toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    width: var(--line-w);
    height: var(--line-h);
    background: var(--lux-accent);
    border-radius: 2px;
    transform-origin: center;
    transform: translateX(-50%);
    transition: transform 240ms ease, top 240ms ease;
}
.nav-toggle::before { top: calc(50% - (var(--gap) / 2) - var(--line-h)); }
.nav-toggle::after { top: calc(50% + (var(--gap) / 2)); }
.nav-toggle.is-open::before { top: 50%; transform: translateX(-50%) rotate(45deg); }
.nav-toggle.is-open::after { top: 50%; transform: translateX(-50%) rotate(-45deg); }

/* Mobiel menu-drawer */
.nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: color-mix(in srgb, var(--lux-paper) 55%, #ffffff);
    list-style: none;
    margin: 0;
    padding: 10px 26px 24px;
    display: none;
    flex-direction: column;
    z-index: 100;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: var(--lux-shadow-soft);
}
.nav-menu.active { display: flex; }
.nav-menu li { list-style: none; }
.nav-menu .nav-link {
    font-family: var(--lux-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--lux-ink);
    text-decoration: none;
    padding: 15px 0;
    display: block;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}
.nav-menu .nav-link.is-active { color: var(--lux-accent); }

@media (max-width: 899px) {
    .nav-menu { border-top: 1px solid var(--lux-line-soft); }
    .nav-menu li { border-bottom: 1px solid var(--lux-line-soft); }
    .nav-menu li:last-child { border-bottom: 0; }
}

/* Desktop: monogram gecentreerd + horizontale nav */
@media (min-width: 900px) {
    #publicNav { padding: 34px 40px 20px; text-align: center; }
    .header-container { justify-content: center; }
    .header-namen { font-size: 42px; }
    .header-namen::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -13px;
        transform: translateX(-50%) rotate(45deg);
        width: 5px;
        height: 5px;
        background: color-mix(in srgb, var(--lux-accent) 55%, transparent);
    }
    .nav-toggle { display: none; }
    .nav-menu {
        position: static;
        background: transparent;
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 38px;
        padding: 28px 0 0;
        margin: 0;
        box-shadow: none;
        border-radius: 0;
    }
    .nav-menu .nav-link {
        font-size: 11px;
        padding: 4px 0;
        letter-spacing: 0.28em;
        position: relative;
        transition: color 180ms ease;
    }
    .nav-menu .nav-link::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -6px;
        width: 0;
        height: 1px;
        background: var(--lux-accent);
        transform: translateX(-50%);
        transition: width 220ms ease;
    }
    .nav-menu .nav-link:hover { color: var(--lux-accent); }
    .nav-menu .nav-link:hover::after,
    .nav-menu .nav-link.is-active::after { width: 100%; }
}

.hide-deco-namen .header-namen { display: none !important; }

/* ---------- LANGUAGE SWITCHER ---------- */
.language-switcher { position: relative; display: inline-flex; align-items: center; }
.lang-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 7px 15px !important;
    font-family: var(--lux-sans) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase;
    border-radius: 999px !important;
    background: transparent !important;
    border: 1px solid var(--lux-line) !important;
    color: var(--lux-accent) !important;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease;
}
.lang-toggle:hover {
    background: color-mix(in srgb, var(--lux-accent) 7%, transparent) !important;
    border-color: var(--lux-accent) !important;
}
.lang-toggle svg { width: 10px; height: 10px; stroke: currentColor; }
.lang-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    margin: 0 !important;
    background: var(--lux-surface) !important;
    border: 1px solid var(--lux-line) !important;
    border-radius: 14px !important;
    box-shadow: var(--lux-shadow-soft) !important;
    min-width: 190px !important;
    z-index: 100;
    overflow: hidden;
}
.lang-option {
    display: block !important;
    padding: 12px 18px !important;
    font-family: var(--lux-sans) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--lux-ink) !important;
    text-decoration: none !important;
    letter-spacing: 0.04em !important;
    transition: background 150ms ease;
}
.lang-option:hover { background: color-mix(in srgb, var(--lux-accent) 6%, transparent) !important; }

@media (max-width: 899px) {
    .nav-menu .language-switcher { padding: 10px 0; }
    .lang-dropdown {
        left: 0 !important;
        right: auto !important;
        top: auto !important;
        bottom: calc(100% + 8px) !important;
    }
}

/* ============================================================
   TITLE
   ============================================================ */
.title-blok-h1, .title-blok-h2, .title-blok-h3 {
    font-family: var(--lux-serif);
    color: var(--lux-accent);
    font-weight: 500;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
}
.title-blok-h1 {
    font-size: clamp(38px, 6vw, 64px);
    line-height: 1.08;
    letter-spacing: 0.01em;
    margin: 34px 0 20px;
}
.title-blok-h2 {
    font-size: clamp(28px, 4.2vw, 44px);
    line-height: 1.14;
    letter-spacing: 0.01em;
    margin: 28px 0 16px;
}
.title-blok-h3 {
    font-family: var(--lux-sans);
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--lux-accent);
    margin: 24px 0 12px;
}

/* ============================================================
   TEXT
   ============================================================ */
.text-card { display: flex; justify-content: center; padding: 0 24px; }
.text-card .text-content {
    max-width: 620px;
    width: 100%;
    font-family: var(--lux-sans);
    color: var(--lux-ink);
    font-size: 16px;
    line-height: 1.85;
    font-weight: 400;
    text-align: left;
    letter-spacing: 0.005em;
}
.text-card .text-content p { margin: 0 0 1.15em; }
.text-card .text-content p:last-child { margin-bottom: 0; }
.text-card .text-content strong { font-weight: 700; }
.text-card .text-content em { font-style: italic; }
.text-card .text-content a {
    color: var(--lux-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}
/* Editorial drop-cap op de eerste alinea */
.text-card .text-content > p:first-child::first-letter {
    float: left;
    font-family: var(--lux-serif);
    color: var(--lux-accent);
    font-size: 3.3em;
    line-height: 0.78;
    font-weight: 500;
    padding: 7px 12px 0 0;
}
/* Opsomming met een fijn champagne-streepje i.p.v. standaard bolletje */
.text-card .text-content ul { list-style: none; margin: 0 0 1.15em; padding-left: 0; }
.text-card .text-content ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.text-card .text-content ul li {
    position: relative;
    padding-left: 1.5em;
    margin: 0.5em 0;
}
.text-card .text-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.82em;
    width: 12px;
    height: 1px;
    background: var(--lux-accent);
}
.text-card .text-content ol li { margin: 0.5em 0; }
.text-card .text-content ol li::marker { color: var(--lux-accent); }
.text-card .text-content h1,
.text-card .text-content h2,
.text-card .text-content h3 {
    font-family: var(--lux-serif);
    color: var(--lux-accent);
    font-weight: 500;
    letter-spacing: 0.01em;
    margin: 1.4em 0 0.5em;
}

/* ============================================================
   BANNER / HERO — arch-vorm als uitnodigingskaart
   ============================================================ */
.hero-card {
    position: relative;
    width: 100%;
    max-width: 1080px;
    margin: 18px auto 0;
    padding: 0 14px;
    overflow: visible;
    box-sizing: border-box;
}
.hero-card img {
    display: block;
    width: 100%;
    height: min(74vh, 640px);
    min-height: 440px;
    object-fit: cover;
    border-radius: 999px 999px var(--lux-radius) var(--lux-radius);
    box-shadow: var(--lux-shadow);
}
@media (min-width: 900px) {
    .hero-card { padding: 0 24px; margin-top: 26px; }
    .hero-card img { height: min(78vh, 720px); }
}

.hero-card .hero-overlay {
    position: absolute;
    inset: 0 14px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    padding: 0 16px 48px;
    border-radius: 999px 999px var(--lux-radius) var(--lux-radius);
    /* Warme scrim onderaan zodat de primary-gekleurde namen (net als de
       andere templates) leesbaar op de foto staan. */
    background: linear-gradient(180deg,
        rgba(28,18,14,0) 30%,
        rgba(28,18,14,0.28) 60%,
        rgba(28,18,14,0.72) 100%);
}
@media (min-width: 900px) {
    .hero-card .hero-overlay { inset: 0 24px; padding-bottom: 64px; }
}

/* Fijne binnenrand — briefpapier-detail */
.hero-card .hero-overlay::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(255, 250, 243, 0.4);
    border-radius: 999px 999px calc(var(--lux-radius) - 8px) calc(var(--lux-radius) - 8px);
    pointer-events: none;
}

.hero-card .couple-names {
    font-family: var(--lux-serif) !important;
    color: var(--lux-accent);
    font-size: clamp(44px, 9vw, 96px) !important;
    font-weight: 500 !important;
    line-height: 1.05;
    margin: 0;
    letter-spacing: 0.015em;
    text-shadow: 0 2px 22px rgba(20, 12, 8, 0.55), 0 1px 3px rgba(20, 12, 8, 0.4);
}
.hero-card .hero-title {
    font-family: var(--lux-sans) !important;
    color: color-mix(in srgb, var(--lux-accent) 30%, #FFFAF3);
    font-size: clamp(10px, 1.2vw, 13px) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    margin: 18px 0 0 !important;
    text-shadow: 0 1px 12px rgba(20, 12, 8, 0.55);
    font-style: normal;
    opacity: 0.95;
}

/* Zonder foto: zachte champagne-arch zodat het alsnog premium oogt */
.hero-card.hero-card--no-image > div[aria-hidden] {
    height: min(58vh, 520px);
    min-height: 380px;
    border-radius: 999px 999px var(--lux-radius) var(--lux-radius);
    background:
        radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--lux-accent) 16%, var(--lux-paper)), color-mix(in srgb, var(--lux-accent) 6%, var(--lux-paper)) 70%);
    box-shadow: var(--lux-shadow-soft);
}
.hero-card--no-image .hero-overlay { background: none; align-items: center; padding-bottom: 0; }
.hero-card--no-image .hero-overlay::before { border-color: color-mix(in srgb, var(--lux-accent) 30%, transparent); }
.hero-card--no-image .couple-names { color: var(--lux-accent); text-shadow: none; }
.hero-card--no-image .hero-title { color: var(--lux-accent); text-shadow: none; }

/* ============================================================
   IMAGE — foto_tekst
   ============================================================ */
.image-card { margin: 40px 0; }
.image-card .foto-tekst {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    box-sizing: border-box;
}
.image-card .foto-tekst .image-side { width: 100%; max-width: 460px; }
.image-card .foto-tekst .image-side img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    border-radius: 999px 999px var(--lux-radius) var(--lux-radius);
    box-shadow: var(--lux-shadow-soft);
}
.image-card .foto-tekst .text-side {
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 18px;
}
.image-card .foto-tekst .text-side h2 {
    font-family: var(--lux-serif);
    color: var(--lux-accent);
    font-weight: 500;
    font-size: clamp(30px, 4.4vw, 48px);
    line-height: 1.08;
    margin: 0;
    letter-spacing: 0.01em;
    position: relative;
    padding-bottom: 16px;
}
.image-card .foto-tekst .text-side h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 1px;
    background: color-mix(in srgb, var(--lux-accent) 55%, transparent);
}
.image-card .foto-tekst .text-side .description {
    font-family: var(--lux-sans);
    color: var(--lux-ink);
    font-size: 15.5px;
    line-height: 1.85;
    font-weight: 400;
}
.image-card .foto-tekst .text-side .description p { margin: 0 0 1em; }
.image-card .foto-tekst .text-side .description p:last-child { margin-bottom: 0; }
.image-card .foto-tekst .text-side .description a {
    color: var(--lux-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
}
@media (min-width: 900px) {
    .image-card .foto-tekst { flex-direction: row; gap: 72px; align-items: center; justify-content: center; }
    .image-card .foto-tekst .image-side { flex: 0 1 440px; max-width: 440px; }
    .image-card .foto-tekst .text-side { flex: 0 1 430px; }
}

/* ---------- IMAGE — grote_foto ---------- */
.image-card .grote-foto {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 0 14px;
    box-sizing: border-box;
}
.image-card .grote-foto img {
    order: 1;
    width: 100%;
    height: min(72vh, 660px);
    min-height: 420px;
    object-fit: cover;
    display: block;
    /* Arch-top, net als de hero en de foto-tekst — de premium signatuur */
    border-radius: 999px 999px var(--lux-radius) var(--lux-radius);
    box-shadow: var(--lux-shadow);
}
.image-card .grote-foto h2 {
    order: 2;
    font-family: var(--lux-sans);
    color: var(--lux-accent);
    text-align: center;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    margin: 22px 24px 0;
}
.image-card .grote-foto h2:empty { display: none; }
@media (min-width: 900px) {
    .image-card .grote-foto { padding: 0 24px; }
}

/* ---------- IMAGE — collage ---------- */
.collage-layout {
    padding: 0 14px;
    max-width: 1080px;
    margin: 0 auto;
    box-sizing: border-box;
}
@media (min-width: 768px) { .collage-layout { padding: 0 24px; } }
.collage-layout > h2 {
    font-family: var(--lux-serif);
    color: var(--lux-accent);
    text-align: center;
    font-weight: 500;
    font-size: clamp(26px, 3.8vw, 40px);
    line-height: 1.12;
    margin: 0 0 34px;
    letter-spacing: 0.01em;
    position: relative;
    padding-bottom: 20px;
}
.collage-layout > h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 44px;
    height: 1px;
    background: color-mix(in srgb, var(--lux-accent) 40%, transparent);
}

.collage-grid { display: grid; gap: 12px; margin-bottom: 12px; }
.collage-grid:last-child { margin-bottom: 0; }
.collage-grid .tile {
    overflow: hidden;
    border-radius: var(--lux-radius-sm);
    box-shadow: var(--lux-shadow-soft);
}
.collage-grid .tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 600ms cubic-bezier(.22,.61,.36,1);
}
.collage-grid .tile:hover img { transform: scale(1.045); }

.collage-grid.l1 { grid-template-columns: 1fr; }
.collage-grid.l1 .tile { aspect-ratio: 3 / 2; }
.collage-grid.l2 { grid-template-columns: 1fr 1fr; }
.collage-grid.l2 .tile { aspect-ratio: 4 / 5; }
/* l3 — feature links, twee gestapeld rechts (editorial i.p.v. 3 gelijke) */
.collage-grid.l3 {
    grid-template-columns: 1.35fr 1fr;
    grid-auto-rows: clamp(120px, 18.5vw, 215px);
}
.collage-grid.l3 .tile { aspect-ratio: auto; }
.collage-grid.l3 .tile-1 { grid-column: 1; grid-row: 1 / 3; }
.collage-grid.l3 .tile-2 { grid-column: 2; grid-row: 1; }
.collage-grid.l3 .tile-3 { grid-column: 2; grid-row: 2; }

.collage-grid.l4 { grid-template-columns: repeat(2, 1fr); }
.collage-grid.l4 .tile { aspect-ratio: 1; }

.collage-grid.l5,
.collage-grid.lmasonry { grid-template-columns: repeat(3, 1fr); }
.collage-grid.l5 .tile,
.collage-grid.lmasonry .tile { aspect-ratio: 4 / 5; }

/* l6 — editorial mozaïek: groot feature-beeld linksboven + variatie */
.collage-grid.l6 {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(96px, 15.5vw, 200px);
}
.collage-grid.l6 .tile { aspect-ratio: auto; }
.collage-grid.l6 .tile-1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.collage-grid.l6 .tile-2 { grid-column: 3 / 5; grid-row: 1; }
.collage-grid.l6 .tile-3 { grid-column: 3;     grid-row: 2; }
.collage-grid.l6 .tile-4 { grid-column: 4;     grid-row: 2; }
.collage-grid.l6 .tile-5 { grid-column: 1 / 3; grid-row: 3; }
.collage-grid.l6 .tile-6 { grid-column: 3 / 5; grid-row: 3; }

@media (max-width: 640px) {
    .collage-grid.l5,
    .collage-grid.lmasonry { grid-template-columns: repeat(2, 1fr); }
    .collage-grid.l3 {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: clamp(120px, 33vw, 200px);
    }
    .collage-grid.l3 .tile-1 { grid-column: 1 / 3; grid-row: 1; }
    .collage-grid.l3 .tile-2 { grid-column: 1; grid-row: 2; }
    .collage-grid.l3 .tile-3 { grid-column: 2; grid-row: 2; }
    .collage-grid.l6 {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: clamp(115px, 32vw, 190px);
    }
    .collage-grid.l6 .tile-1 { grid-column: 1 / 3; grid-row: 1; }
    .collage-grid.l6 .tile-2 { grid-column: 1; grid-row: 2; }
    .collage-grid.l6 .tile-3 { grid-column: 2; grid-row: 2; }
    .collage-grid.l6 .tile-4 { grid-column: 1; grid-row: 3; }
    .collage-grid.l6 .tile-5 { grid-column: 2; grid-row: 3; }
    .collage-grid.l6 .tile-6 { grid-column: 1 / 3; grid-row: 4; }
}

/* ============================================================
   QUOTE
   ============================================================ */
.quote-card {
    max-width: 720px;
    margin: 52px auto;
    padding: 0 28px;
    text-align: center;
    box-sizing: border-box;
}
.quote-card .quote-img { display: none; }
.quote-card .quote-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    position: relative;
    padding-top: 46px;
}
.quote-card .quote-text::before {
    content: '\201C';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--lux-serif);
    font-size: 96px;
    line-height: 1;
    color: color-mix(in srgb, var(--lux-accent) 34%, transparent);
}
/* Afsluitende hairline onder de quote — geeft de pull-quote structuur */
.quote-card .quote-text::after {
    content: '';
    width: 46px;
    height: 1px;
    background: color-mix(in srgb, var(--lux-accent) 45%, transparent);
}
.quote-card blockquote {
    font-family: var(--lux-serif);
    font-style: italic;
    color: var(--lux-accent);
    font-size: clamp(26px, 3.8vw, 40px);
    line-height: 1.4;
    margin: 0;
    font-weight: 400;
    max-width: 620px;
}
.quote-card h2 {
    font-family: var(--lux-sans);
    color: var(--lux-accent);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    margin: 0;
}
.quote-card h2:empty { display: none; }

/* ============================================================
   COUNTDOWN
   ============================================================ */
/* Editorial "datum-masthead": de dagen zijn het typografische statement
   (groot Cormorant-cijfer tussen twee fijne regels), uren/min/sec een
   ingetogen, punt-gescheiden bijregel eronder. Geen timer-blokjes. */
.card-countdown {
    max-width: 560px;
    margin: 52px auto;
    padding: 0 24px;
    text-align: center;
    box-sizing: border-box;
}
.countdown-title {
    font-family: var(--lux-sans);
    color: var(--lux-accent);
    font-weight: 700;
    font-size: 11px;
    line-height: 1.6;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    margin: 0 0 26px;
}

.countdown-timers {
    display: block;
    text-align: center;
    max-width: 460px;
    margin: 0 auto;
}

/* DAGEN — het statement (gecentreerde masthead op een eigen regel) */
.countdown-unit:first-child {
    display: block;
    width: fit-content;
    min-width: 200px;
    text-align: center;
    padding: 20px 44px 22px;
    margin: 0 auto 26px;
    border-top: 1px solid color-mix(in srgb, var(--lux-accent) 26%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--lux-accent) 26%, transparent);
}
.countdown-unit:first-child .countdown-value {
    font-family: var(--lux-serif);
    color: var(--lux-accent);
    font-size: clamp(88px, 24vw, 140px);
    font-weight: 500;
    line-height: 0.92;
    letter-spacing: 0.01em;
    font-variant-numeric: lining-nums;
}
.countdown-unit:first-child .countdown-label {
    font-family: var(--lux-sans);
    color: var(--lux-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    margin-top: 12px;
    opacity: 0.85;
}

/* uren · minuten · seconden — ingetogen bijregel eronder */
.countdown-unit:nth-child(n+2) {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    padding: 0 20px;
    position: relative;
}
.countdown-unit:nth-child(n+2) .countdown-value {
    font-family: var(--lux-serif);
    color: var(--lux-accent);
    font-size: 26px;
    font-weight: 500;
    line-height: 1;
    opacity: 0.92;
}
.countdown-unit:nth-child(n+2) .countdown-label {
    font-family: var(--lux-sans);
    color: var(--lux-ink);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-top: 8px;
    opacity: 0.5;
}
/* fijne punt-scheiding tussen de drie kleine eenheden */
.countdown-unit:nth-child(n+3)::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 12px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--lux-accent) 50%, transparent);
}
@media (max-width: 640px) {
    .countdown-unit:first-child { min-width: 190px; padding: 16px 30px 18px; }
    .countdown-unit:nth-child(n+2) { padding: 0 14px; }
    .countdown-unit:nth-child(n+2) .countdown-value { font-size: 22px; }
}

/* ============================================================
   SCHEDULE — elegante tijdlijn in zachte kaart
   ============================================================ */
.schedule-wrapper {
    max-width: 700px;
    margin: 36px auto;
    padding: 0 18px;
    box-sizing: border-box;
}
/* Open, luchtig — geen zwaar kaartje meer eromheen */
.schedule-container {
    padding: 4px 4px !important;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
@media (min-width: 640px) { .schedule-container { padding: 4px 16px !important; } }

.schedule-heading {
    font-family: var(--lux-serif);
    color: var(--lux-accent);
    text-align: center;
    font-weight: 500;
    font-size: clamp(26px, 3.6vw, 38px);
    line-height: 1.12;
    margin: 0 0 40px;
    letter-spacing: 0.01em;
    position: relative;
    padding-bottom: 20px;
}
.schedule-heading::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 44px;
    height: 1px;
    background: color-mix(in srgb, var(--lux-accent) 40%, transparent);
}

/* Editorial dag-tijdlijn: grote Cormorant-tijden als statement (zoals de
   countdown), een fijne champagne-lijn met diamant-markers, en de events
   als letterspaced caps. */
.timeline {
    list-style: none;
    margin: 0 auto;
    max-width: 440px;
    padding: 0;
    position: relative;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 14px;
    bottom: 16px;
    width: 1px;
    background: color-mix(in srgb, var(--lux-accent) 22%, transparent);
}
.timeline-item {
    position: relative;
    padding: 0 0 40px 42px;
    border: 0;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
    display: block !important;
    content: '';
    position: absolute;
    left: 1px;
    top: 15px;
    width: 9px;
    height: 9px;
    transform: rotate(45deg);
    background: var(--lux-accent);
    box-shadow: 0 0 0 5px var(--lux-paper);
}
.timeline-dot { display: none; }

.timeline-content { display: flex; flex-direction: column; }
.timeline-content img { display: none; }

.timeline-time {
    order: 0;
    font-family: var(--lux-serif);
    color: var(--lux-accent);
    font-size: clamp(36px, 8.5vw, 50px);
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: 0.01em;
    margin: 0;
    text-align: left;
    font-variant-numeric: lining-nums;
}
.timeline-title {
    order: 1;
    font-family: var(--lux-sans);
    color: var(--lux-accent);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    line-height: 1.4;
    margin: 12px 0 0;
}
.timeline-description {
    order: 2;
    font-family: var(--lux-sans);
    color: var(--lux-ink);
    font-size: 13.5px;
    line-height: 1.65;
    font-weight: 400;
    margin: 6px 0 0;
    opacity: 0.7;
    max-width: 40ch;
}
@media (max-width: 640px) {
    .timeline-item { padding-left: 36px; padding-bottom: 34px; }
    .timeline-time { font-size: clamp(34px, 11vw, 44px); }
}

/* ── Entree-animatie van de dag-tijdlijn ──────────────────────────────
   Keyframe-animaties (betrouwbaarder dan transitions: spelen ook af als het
   blok al bij de eerste paint zichtbaar is). Hookt op de globale
   scroll-observer die .is-visible op de card zet en alleen actief is als
   beweging mag — zonder fae-anim-ready (o.a. reduced-motion) blijft alles
   statisch zichtbaar. De lijn tekent zich van boven naar beneden, de
   diamanten poppen, en de tijden schuiven gestaffeld omhoog. */
@keyframes le-tl-rise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}
@keyframes le-tl-line {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}
@keyframes le-tl-pop {
    0%   { opacity: 0; transform: rotate(45deg) scale(0.2); }
    72%  { opacity: 1; transform: rotate(45deg) scale(1.18); }
    100% { opacity: 1; transform: rotate(45deg) scale(1); }
}

/* Getriggerd door de EIGEN observer (champagne-ivory-anim.blade.php) die
   `.le-anim-in` op de card zet zodra die écht in beeld is — niet de globale
   `.is-visible` die te vroeg vuurt. Whole-card fade voor dit blok uit; de
   kinderen animeren zelf. */
html.fae-anim-ready [data-card-id]:has(.timeline) {
    opacity: 1 !important;
    transform: none !important;
}
/* Verborgen startstaat tot de observer 'm onthult */
html.fae-anim-ready [data-card-id]:has(.timeline):not(.le-anim-in) .schedule-heading,
html.fae-anim-ready [data-card-id]:has(.timeline):not(.le-anim-in) .timeline-item { opacity: 0; }
html.fae-anim-ready [data-card-id]:has(.timeline):not(.le-anim-in) .timeline::before { transform: scaleY(0); }
html.fae-anim-ready [data-card-id]:has(.timeline):not(.le-anim-in) .timeline-item::before { opacity: 0; }

/* Onthulling: rustige keyframe-animaties met stagger */
html.fae-anim-ready [data-card-id]:has(.timeline).le-anim-in .schedule-heading {
    animation: le-tl-rise .85s cubic-bezier(.22,.61,.36,1) both;
}
html.fae-anim-ready [data-card-id]:has(.timeline).le-anim-in .timeline::before {
    transform-origin: top center;
    animation: le-tl-line 1.4s cubic-bezier(.22,.61,.36,1) .1s both;
}
html.fae-anim-ready [data-card-id]:has(.timeline).le-anim-in .timeline-item {
    animation: le-tl-rise .85s cubic-bezier(.22,.61,.36,1) both;
}
html.fae-anim-ready [data-card-id]:has(.timeline).le-anim-in .timeline-item::before {
    animation: le-tl-pop .62s cubic-bezier(.34,1.56,.64,1) both;
}
/* Stagger: elk tijdstip iets later, de diamant net na z'n tijdstip */
[data-card-id]:has(.timeline).le-anim-in .timeline-item:nth-child(1) { animation-delay: .25s; }
[data-card-id]:has(.timeline).le-anim-in .timeline-item:nth-child(2) { animation-delay: .41s; }
[data-card-id]:has(.timeline).le-anim-in .timeline-item:nth-child(3) { animation-delay: .57s; }
[data-card-id]:has(.timeline).le-anim-in .timeline-item:nth-child(4) { animation-delay: .73s; }
[data-card-id]:has(.timeline).le-anim-in .timeline-item:nth-child(5) { animation-delay: .89s; }
[data-card-id]:has(.timeline).le-anim-in .timeline-item:nth-child(6) { animation-delay: 1.05s; }
[data-card-id]:has(.timeline).le-anim-in .timeline-item:nth-child(7) { animation-delay: 1.21s; }
[data-card-id]:has(.timeline).le-anim-in .timeline-item:nth-child(8) { animation-delay: 1.37s; }
[data-card-id]:has(.timeline).le-anim-in .timeline-item:nth-child(1)::before { animation-delay: .42s; }
[data-card-id]:has(.timeline).le-anim-in .timeline-item:nth-child(2)::before { animation-delay: .58s; }
[data-card-id]:has(.timeline).le-anim-in .timeline-item:nth-child(3)::before { animation-delay: .74s; }
[data-card-id]:has(.timeline).le-anim-in .timeline-item:nth-child(4)::before { animation-delay: .90s; }
[data-card-id]:has(.timeline).le-anim-in .timeline-item:nth-child(5)::before { animation-delay: 1.06s; }
[data-card-id]:has(.timeline).le-anim-in .timeline-item:nth-child(6)::before { animation-delay: 1.22s; }
[data-card-id]:has(.timeline).le-anim-in .timeline-item:nth-child(7)::before { animation-delay: 1.38s; }
[data-card-id]:has(.timeline).le-anim-in .timeline-item:nth-child(8)::before { animation-delay: 1.54s; }

/* ============================================================
   COLUMNS TITLE+TEXT
   ============================================================ */
.title-text-section { padding: 26px 24px; }
.title-text-grid {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 860px !important;
    margin: 0 auto;
}
.title-text-grid > h2 {
    font-family: var(--lux-serif);
    color: var(--lux-accent);
    font-weight: 500;
    font-size: clamp(30px, 4.4vw, 48px);
    line-height: 1.1;
    margin: 0;
    text-align: center;
    letter-spacing: 0.01em;
    max-width: 22ch;
    position: relative;
    padding-bottom: 24px;
}
/* Divider: dunne hairline met een klein diamantje in het midden */
.title-text-grid > h2::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 5px;
    transform: translateX(-50%);
    width: 68px;
    height: 1px;
    background: color-mix(in srgb, var(--lux-accent) 28%, transparent);
}
.title-text-grid > h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%) rotate(45deg);
    width: 7px;
    height: 7px;
    background: var(--lux-accent);
    box-shadow: 0 0 0 4px var(--lux-paper);
}
.title-text-grid .text-content {
    font-family: var(--lux-sans);
    color: var(--lux-ink);
    font-size: 15.5px;
    line-height: 1.85;
    font-weight: 400;
    text-align: center;
    max-width: 560px;
}
.title-text-grid .text-content p { margin: 0 0 1em; }
.title-text-grid .text-content p:last-child { margin-bottom: 0; }
.title-text-grid .text-content a {
    color: var(--lux-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ============================================================
   COLUMNS COUNTDOWN+MAP
   ============================================================ */
.countdown-map {
    box-sizing: border-box;
    max-width: 1040px;
    margin: 36px auto;
    padding: 0 18px;
    display: flex !important;
    flex-direction: column-reverse;
    gap: 30px;
    align-items: center;
    justify-content: center;
}
@media (min-width: 900px) {
    .countdown-map { flex-direction: row-reverse; gap: 64px; align-items: center; }
}

.countdown-map .map {
    width: 100%;
    max-width: 400px;
    flex: 0 1 400px;
    aspect-ratio: 4 / 5;
}
.countdown-map .map > * { width: 100% !important; height: 100% !important; }
.countdown-map .map .map-click-area,
.countdown-map .map .forever-map {
    display: block;
    border-radius: 999px 999px var(--lux-radius) var(--lux-radius);
    border: 0 !important;
    box-shadow: var(--lux-shadow-soft) !important;
    overflow: hidden;
}

.countdown-map .countdown {
    flex: 0 1 420px;
    max-width: 420px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
}
.countdown-map .countdown h2 { order: 1; margin: 0 0 12px; }
.countdown-map .map-link-wrapper { order: 2; margin: 0 0 30px; }
.countdown-map .live-countdown { order: 3; }
.countdown-map .countdown-days { display: none; }

.countdown-map .countdown h2 {
    font-family: var(--lux-serif);
    color: var(--lux-accent);
    font-weight: 500;
    font-size: clamp(26px, 3.6vw, 38px);
    line-height: 1.12;
    letter-spacing: 0.01em;
    text-align: center;
}
.countdown-map .map-link-wrapper { text-align: center; }
.countdown-map .map-link {
    font-family: var(--lux-sans);
    color: var(--lux-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--lux-accent) 40%, transparent);
    padding-bottom: 3px;
}
.countdown-map .map-link:hover { border-bottom-color: var(--lux-accent); }

/* Frameless 2x2 met een fijn hairline-kruis — luchtig, geen zwaar paneel */
.countdown-map .countdown-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
.countdown-map .countdown-item {
    padding: 20px 8px 16px;
    text-align: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}
.countdown-map .countdown-item:nth-child(1),
.countdown-map .countdown-item:nth-child(3) { border-right: 1px solid var(--lux-line); }
.countdown-map .countdown-item:nth-child(1),
.countdown-map .countdown-item:nth-child(2) { border-bottom: 1px solid var(--lux-line); }
.countdown-map .countdown-number {
    font-family: var(--lux-serif);
    color: var(--lux-accent);
    font-size: clamp(34px, 4.4vw, 50px);
    font-weight: 500;
    line-height: 1;
}
.countdown-map .countdown-text {
    font-family: var(--lux-sans);
    color: var(--lux-ink);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-weight: 600;
    margin-top: 10px;
    opacity: 0.7;
}

/* ============================================================
   GOOGLEMAPS — netjes ingekaderd
   ============================================================ */
.googlemaps-card {
    max-width: 1080px;
    margin: 36px auto;
    padding: 0 14px;
    box-sizing: border-box;
}
@media (min-width: 768px) { .googlemaps-card { padding: 0 24px; } }
.googlemaps-card .map-click-area,
.googlemaps-card .forever-map {
    display: block;
    width: 100% !important;
    height: clamp(340px, 48vw, 460px) !important;
    border-radius: var(--lux-radius) !important;
    border: 1px solid var(--lux-line) !important;
    overflow: hidden;
    box-shadow: var(--lux-shadow-soft) !important;
}
.googlemaps-card .map-link-wrapper {
    display: block;
    text-align: center;
    margin-top: 20px;
    padding: 0 20px;
}
.googlemaps-card .map-link {
    font-family: var(--lux-sans);
    color: var(--lux-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--lux-accent) 40%, transparent);
    padding-bottom: 3px;
}
.googlemaps-card .map-link:hover { border-bottom-color: var(--lux-accent); }

/* ============================================================
   PERSON — arch-portretten
   ============================================================ */
.people-grid,
.my-8.max-w-\[1280px\] {
    max-width: 1080px !important;
    margin: 36px auto !important;
    padding: 0 20px;
    gap: 36px 26px !important;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .people-grid,
    .my-8.max-w-\[1280px\] { padding: 0 24px; }
}
.my-8.max-w-\[1280px\] > .grid { gap: 36px 26px !important; }

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

.person-card { padding: 0; text-align: center; align-items: center; }
.person-card img {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 999px 999px var(--lux-radius-sm) var(--lux-radius-sm);
    margin: 0 auto 18px !important;
    display: block;
    height: auto !important;
    box-shadow: var(--lux-shadow-soft);
}
.person-card .avatar {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 4 / 5;
    height: auto;
    border-radius: 999px 999px var(--lux-radius-sm) var(--lux-radius-sm);
    margin: 0 auto 18px;
    background: var(--lux-surface-soft);
}
.person-card h3 {
    font-family: var(--lux-serif);
    color: var(--lux-accent);
    font-weight: 500;
    font-size: clamp(20px, 2.2vw, 24px);
    line-height: 1.2;
    margin: 0;
    letter-spacing: 0.01em;
}
.person-card p {
    font-family: var(--lux-sans);
    color: var(--lux-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    margin: 13px 0 0;
    padding-top: 13px;
    position: relative;
}
.person-card p::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 1px;
    background: color-mix(in srgb, var(--lux-accent) 42%, transparent);
}
.person-card p:empty { padding-top: 0; margin-top: 0; }
.person-card p:empty::before { display: none; }

/* ============================================================
   GUESTBOOK
   ============================================================ */
.card-guestbook {
    box-sizing: border-box;
    width: calc(100% - 32px);
    max-width: 640px;
    margin: 36px auto;
    padding: 40px 24px;
    background: var(--lux-surface);
    border: 1px solid var(--lux-line-soft);
    border-radius: var(--lux-radius);
    box-shadow: var(--lux-shadow-soft);
}
@media (min-width: 640px) { .card-guestbook { padding: 52px 56px; } }

.card-guestbook .schedule-heading {
    font-family: var(--lux-serif);
    color: var(--lux-accent);
    text-align: center;
    font-weight: 500;
    font-size: clamp(26px, 3.6vw, 38px);
    line-height: 1.12;
    margin: 0;
    letter-spacing: 0.01em;
    text-transform: none;
}
.card-guestbook .text-content {
    font-family: var(--lux-sans) !important;
    color: var(--lux-ink) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-align: center !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    line-height: 1.6;
    margin: 10px 0 0 !important;
    opacity: 0.75 !important;
}

.card-guestbook input[type="text"],
.card-guestbook input[type="email"],
.card-guestbook textarea,
.card-guestbook select {
    background: color-mix(in srgb, var(--lux-accent) 3%, #ffffff) !important;
    background-color: color-mix(in srgb, var(--lux-accent) 3%, #ffffff) !important;
    border: 1px solid var(--lux-line) !important;
    border-radius: var(--lux-radius-sm) !important;
    font-family: var(--lux-sans) !important;
    color: var(--lux-ink) !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    padding: 14px 16px !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}
.card-guestbook input::placeholder,
.card-guestbook textarea::placeholder {
    color: var(--lux-ink) !important;
    opacity: 0.4 !important;
    font-weight: 400 !important;
}
.card-guestbook input:focus,
.card-guestbook textarea:focus,
.card-guestbook select:focus {
    outline: none !important;
    border-color: var(--lux-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lux-accent) 12%, transparent) !important;
}
.card-guestbook textarea { min-height: 140px !important; resize: vertical !important; }

.card-guestbook select {
    background-image: linear-gradient(45deg, transparent 50%, var(--lux-accent) 50%),
                      linear-gradient(135deg, var(--lux-accent) 50%, transparent 50%) !important;
    background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat, no-repeat !important;
    padding-right: 40px !important;
    cursor: pointer;
}

.card-guestbook button[type="submit"] {
    background: var(--lux-accent) !important;
    color: #FFFAF3 !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-family: var(--lux-sans) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: 0.26em !important;
    text-transform: uppercase !important;
    padding: 15px 44px !important;
    cursor: pointer;
    box-shadow: var(--lux-shadow-soft);
    transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
}
.card-guestbook button[type="submit"]:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.card-guestbook p[style*="text-align: center"] {
    font-family: var(--lux-sans) !important;
    color: var(--lux-ink) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

/* ============================================================
   FORM (RSVP) — het pronkstuk
   ============================================================ */
.form-container { max-width: 660px; margin: 0 auto; padding: 0; box-sizing: border-box; }

/* Zachte champagne-wash over de volledige breedte achter het RSVP-blok,
   zodat het als een eigen "moment" op de pagina staat i.p.v. zomaar een box. */
[data-card-id]:has(.card-form) { position: relative; z-index: 0; }
[data-card-id]:has(.card-form)::before {
    content: '';
    position: absolute;
    top: -28px;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background: radial-gradient(58% 90% at 50% 50%,
        color-mix(in srgb, var(--lux-accent) 9%, transparent), transparent 72%);
    z-index: -1;
    pointer-events: none;
}

/* De reply-card zelf: arch-vorm (de signatuur) met een gegraveerd binnenkader */
.card-form {
    width: calc(100% - 32px);
    max-width: 600px;
    margin: 44px auto;
    padding: 56px 30px 52px;
    box-sizing: border-box;
    background:
        radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--lux-accent) 6%, var(--lux-surface)), var(--lux-surface) 62%);
    border: 1px solid var(--lux-line);
    border-radius: 999px 999px var(--lux-radius) var(--lux-radius);
    box-shadow: var(--lux-shadow);
    position: relative;
    overflow: hidden;
}
@media (min-width: 640px) { .card-form { padding: 64px 60px 62px; } }
.form-container .card-form { margin: 44px auto; }

/* Gegraveerd binnenkader, volgt de arch — het "reply-card" detail */
.card-form::before {
    content: '';
    position: absolute;
    inset: 11px;
    border: 1px solid color-mix(in srgb, var(--lux-accent) 24%, transparent);
    border-radius: 999px 999px calc(var(--lux-radius) - 7px) calc(var(--lux-radius) - 7px);
    pointer-events: none;
}

.form-title {
    font-family: var(--lux-serif);
    color: var(--lux-accent);
    text-align: center;
    font-weight: 500;
    font-size: clamp(34px, 4.6vw, 46px);
    line-height: 1.05;
    margin: 0 0 24px;
    padding-bottom: 24px;
    letter-spacing: 0.09em;
    position: relative;
}
/* Lijn + diamant onder de titel (zoals de sectiekoppen) */
.form-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 9px;
    transform: translateX(-50%);
    width: 62px;
    height: 1px;
    background: color-mix(in srgb, var(--lux-accent) 28%, transparent);
}
.form-title::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%) rotate(45deg);
    width: 7px;
    height: 7px;
    background: var(--lux-accent);
    box-shadow: 0 0 0 4px var(--lux-surface);
    z-index: 1;
}
.form-intro {
    font-family: var(--lux-sans);
    color: var(--lux-ink);
    font-size: 13.5px;
    line-height: 1.7;
    text-align: center;
    margin: 0 auto 36px;
    max-width: 40ch;
    font-weight: 400;
    opacity: 0.7;
    letter-spacing: 0.02em;
}
.form-success {
    font-family: var(--lux-serif);
    font-style: italic;
    color: var(--lux-accent);
    font-size: 24px;
    text-align: center;
    padding: 24px 0;
}

/* Twee kolommen op desktop, één op mobiel; textarea spant beide */
.form-fields { display: flex; flex-wrap: wrap; gap: 0 30px; }
.form-group { display: flex; flex-direction: column; gap: 9px; padding: 15px 0; flex: 1 1 100%; }
@media (min-width: 560px) {
    .form-group { flex: 1 1 calc(50% - 15px); }
    .form-group.full-width { flex: 1 1 100%; }
}

.form-label {
    font-family: var(--lux-sans);
    color: var(--lux-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin: 0;
    opacity: 0.85;
}
.form-required { color: var(--lux-accent); margin-left: 3px; }

/* Underline-velden — als een formele invulkaart, geen zware boxen */
.card-form input.form-input,
.card-form select.form-select,
.form-container input.form-input,
.form-container select.form-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--lux-line) !important;
    border-radius: 0 !important;
    font-family: var(--lux-sans) !important;
    color: var(--lux-ink) !important;
    font-size: 15.5px !important;
    font-weight: 400 !important;
    padding: 8px 2px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: border-color 200ms ease;
}
.card-form input.form-input:focus,
.card-form select.form-select:focus,
.form-container input.form-input:focus,
.form-container select.form-select:focus {
    outline: none !important;
    border-bottom-color: var(--lux-accent) !important;
    box-shadow: none !important;
}

.card-form select.form-select,
.form-container select.form-select {
    background-image: linear-gradient(45deg, transparent 50%, var(--lux-accent) 50%),
                      linear-gradient(135deg, var(--lux-accent) 50%, transparent 50%) !important;
    background-position: calc(100% - 12px) 16px, calc(100% - 6px) 16px !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat, no-repeat !important;
    padding-right: 28px !important;
    cursor: pointer;
}

.card-form input[type="number"].form-input,
.form-container input[type="number"].form-input { -moz-appearance: textfield !important; }
.card-form input[type="number"].form-input::-webkit-outer-spin-button,
.card-form input[type="number"].form-input::-webkit-inner-spin-button,
.form-container input[type="number"].form-input::-webkit-outer-spin-button,
.form-container input[type="number"].form-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0;
}

.form-group.full-width { padding-top: 16px; }
.card-form textarea.form-textarea,
.form-container textarea.form-textarea {
    appearance: none !important;
    background: color-mix(in srgb, var(--lux-accent) 3%, #ffffff) !important;
    background-color: color-mix(in srgb, var(--lux-accent) 3%, #ffffff) !important;
    border: 1px solid var(--lux-line) !important;
    border-radius: var(--lux-radius-sm) !important;
    font-family: var(--lux-sans) !important;
    color: var(--lux-ink) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    padding: 14px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    resize: vertical;
    min-height: 130px;
    box-shadow: none !important;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}
.card-form textarea.form-textarea:focus,
.form-container textarea.form-textarea:focus {
    outline: none !important;
    border-color: var(--lux-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lux-accent) 12%, transparent) !important;
}

.form-actions { margin-top: 30px; text-align: center; }
.form-submit {
    background: var(--lux-accent);
    color: #FFFAF3;
    border: 0;
    border-radius: 999px;
    font-family: var(--lux-sans);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    padding: 16px 52px;
    cursor: pointer;
    box-shadow: var(--lux-shadow-soft);
    transition: transform 200ms ease, filter 200ms ease;
}
.form-submit:hover { filter: brightness(1.06); transform: translateY(-1px); }

.card-form .form-error,
.form-container .form-error {
    font-family: var(--lux-sans) !important;
    color: var(--lux-accent) !important;
    font-size: 12.5px !important;
    text-align: center !important;
    margin: 12px 0 0 !important;
    padding: 10px 14px !important;
    background: color-mix(in srgb, var(--lux-accent) 8%, transparent) !important;
    border-radius: 10px !important;
}

/* Groeps-RSVP (familieleden) in dezelfde stijl */
.grsvp-card {
    border: 1px solid var(--lux-line) !important;
    border-radius: var(--lux-radius-sm) !important;
    background: color-mix(in srgb, var(--lux-accent) 3%, #ffffff) !important;
}
.grsvp-name {
    font-family: var(--lux-serif) !important;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    color: var(--lux-accent) !important;
    border-bottom: 1px solid var(--lux-line-soft) !important;
}
.grsvp-input-row label { color: var(--lux-ink); opacity: 0.6 !important; letter-spacing: 0.16em !important; }
.grsvp-input-row input {
    border: 1px solid var(--lux-line) !important;
    border-radius: 10px !important;
    font-family: var(--lux-sans) !important;
}
.grsvp-btn {
    border: 1px solid var(--lux-line) !important;
    font-family: var(--lux-sans) !important;
    background: #ffffff !important;
    color: var(--lux-ink) !important;
}
.grsvp-btn:first-child { border-radius: 999px 0 0 999px !important; }
.grsvp-btn:last-child { border-radius: 0 999px 999px 0 !important; }
.grsvp-btn.active-yes {
    background: var(--lux-accent) !important;
    color: #FFFAF3 !important;
    border-color: var(--lux-accent) !important;
    font-weight: 700 !important;
}
.grsvp-btn.active-no {
    background: color-mix(in srgb, var(--lux-ink) 78%, #ffffff) !important;
    color: #FFFAF3 !important;
    border-color: color-mix(in srgb, var(--lux-ink) 78%, #ffffff) !important;
    font-weight: 700 !important;
}

/* ============================================================
   ALBUM QR CARD
   ============================================================ */
.card-album-qr { padding: 0 24px; box-sizing: border-box; }
.card-album-qr .schedule-heading {
    font-family: var(--lux-serif);
    color: var(--lux-accent);
    font-weight: 500;
    font-size: clamp(26px, 3.6vw, 38px);
    letter-spacing: 0.01em;
    text-transform: none;
}

/* ============================================================
   AUDIO CARD — fijnslijpen op de var-gedreven basis
   ============================================================ */
.audio-card__inner {
    border-radius: var(--lux-radius-sm) !important;
    background: var(--lux-surface) !important;
    border: 1px solid var(--lux-line-soft) !important;
    box-shadow: var(--lux-shadow-soft) !important;
}
.audio-card__title { font-family: var(--lux-serif) !important; font-size: 1.15rem; font-weight: 500 !important; }

/* ============================================================
   DIVIDER
   ============================================================ */
/* Line + dashed: fijne champagne hairline i.p.v. grijze 2px-lijn */
.my-8 hr {
    border-color: color-mix(in srgb, var(--lux-accent) 32%, transparent) !important;
    border-top-width: 1px !important;
}
.my-8 hr.border-dashed { border-style: dashed !important; }

/* Fancy divider: de 💍-emoji vervangen door een fijn champagne-ornament,
   met dunne champagne-lijntjes ernaast (past bij de sectie-dividers). */
.my-8 .flex.items-center { max-width: 320px; margin: 0 auto; gap: 16px !important; }
.my-8 .flex.items-center .border-t {
    border-color: color-mix(in srgb, var(--lux-accent) 32%, transparent) !important;
}
.my-8 .flex.items-center > span:not(.border-t) {
    font-size: 0 !important;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
.my-8 .flex.items-center > span:not(.border-t)::before {
    content: '\25C6';
    font-size: 9px;
    color: var(--lux-accent);
    transform: translateY(-1px);
}

/* ============================================================
   PASSWORD SCREEN
   ============================================================ */
.password-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background-color: var(--lux-paper);
    background-image: radial-gradient(900px 600px at 50% -10%, color-mix(in srgb, var(--lux-accent) 8%, transparent), transparent 60%);
}
.password-card {
    width: 100%;
    max-width: 460px;
    padding: 56px 32px;
    background: var(--lux-surface);
    border: 1px solid var(--lux-line-soft);
    border-radius: var(--lux-radius);
    box-shadow: var(--lux-shadow);
    text-align: center;
}
.password-card .couple-names {
    font-family: var(--lux-serif);
    color: var(--lux-accent);
    font-weight: 500;
    font-size: clamp(38px, 7vw, 54px);
    line-height: 1.1;
    margin: 0 0 14px;
    letter-spacing: 0.01em;
}
.password-card .subtitle {
    font-family: var(--lux-sans);
    color: var(--lux-accent);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.28em;
    margin: 0 0 16px;
}
.password-card .info-text {
    font-family: var(--lux-sans);
    color: var(--lux-ink);
    font-size: 14px;
    line-height: 1.7;
    font-weight: 400;
    margin: 0 0 26px;
    opacity: 0.8;
}
.password-card .error-text {
    font-family: var(--lux-sans);
    color: var(--lux-accent);
    font-size: 12.5px;
    text-align: center;
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--lux-accent) 8%, transparent);
}
.password-card form { margin-top: 10px; }
.password-card input[type="password"],
.password-card input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--lux-accent) 3%, #ffffff);
    border: 1px solid var(--lux-line);
    border-radius: var(--lux-radius-sm);
    font-family: var(--lux-sans);
    color: var(--lux-ink);
    font-size: 15px;
    font-weight: 400;
    padding: 14px 16px;
    margin-bottom: 14px;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}
.password-card input::placeholder { color: var(--lux-ink); opacity: 0.4; }
.password-card input:focus {
    outline: none;
    border-color: var(--lux-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lux-accent) 12%, transparent);
}
.password-card button[type="submit"],
.password-card #inviteBtn {
    width: 100%;
    background: var(--lux-accent);
    color: #FFFAF3;
    border: 0;
    border-radius: 999px;
    font-family: var(--lux-sans);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    padding: 15px 32px;
    cursor: pointer;
    transition: filter 200ms ease;
}
.password-card button[type="submit"]:hover,
.password-card #inviteBtn:hover { filter: brightness(1.06); }

@keyframes fae-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fae-fade-in 600ms ease-out both; }

/* ============================================================
   PHOTO ALBUM (public) — Luxe Envelope overrides
   ============================================================ */
.album-header {
    border-bottom: 1px solid var(--lux-line-soft) !important;
    background: color-mix(in srgb, var(--lux-paper) 82%, #ffffff) !important;
}
.album-header .couple-names {
    font-family: var(--lux-serif) !important;
    color: var(--lux-accent) !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
}
.album-header .album-title {
    font-family: var(--lux-sans) !important;
    color: var(--lux-accent) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.26em !important;
    text-transform: uppercase !important;
    margin-top: 6px !important;
}
.photo-count {
    background: var(--lux-accent) !important;
    color: #FFFAF3 !important;
    font-family: var(--lux-sans) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
}
.upload-card {
    background: var(--lux-surface) !important;
    border: 1px solid var(--lux-line-soft) !important;
    border-radius: var(--lux-radius) !important;
    box-shadow: var(--lux-shadow-soft) !important;
}
.upload-heading {
    font-family: var(--lux-serif) !important;
    color: var(--lux-accent) !important;
    font-weight: 500 !important;
    font-size: 28px !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
}
.upload-subtitle {
    font-family: var(--lux-sans) !important;
    color: var(--lux-ink) !important;
    opacity: 0.75 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}
.name-input {
    background: color-mix(in srgb, var(--lux-accent) 3%, #ffffff) !important;
    border: 1px solid var(--lux-line) !important;
    border-radius: var(--lux-radius-sm) !important;
    color: var(--lux-ink) !important;
    font-family: var(--lux-sans) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
}
.name-input::placeholder { color: var(--lux-ink) !important; opacity: 0.4 !important; }
.name-input:focus {
    outline: none !important;
    border-color: var(--lux-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lux-accent) 12%, transparent) !important;
}
.dropzone {
    background: color-mix(in srgb, var(--lux-accent) 3%, transparent) !important;
    border: 1px dashed color-mix(in srgb, var(--lux-accent) 40%, transparent) !important;
    border-radius: var(--lux-radius-sm) !important;
    color: var(--lux-ink) !important;
}
.dropzone:hover,
.dropzone.drag-over {
    background: color-mix(in srgb, var(--lux-accent) 6%, transparent) !important;
    border-color: var(--lux-accent) !important;
}
.dropzone-text { font-family: var(--lux-sans) !important; color: var(--lux-ink) !important; font-size: 14px !important; font-weight: 600 !important; }
.dropzone-hint { font-family: var(--lux-sans) !important; color: var(--lux-ink) !important; opacity: 0.55 !important; font-size: 12px !important; font-weight: 400 !important; }
.btn-primary {
    background: var(--lux-accent) !important;
    color: #FFFAF3 !important;
    border-radius: 999px !important;
    font-family: var(--lux-sans) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.26em !important;
    text-transform: uppercase !important;
    padding: 15px 32px !important;
}
.btn-secondary {
    background: transparent !important;
    color: var(--lux-accent) !important;
    border: 1px solid var(--lux-accent) !important;
    border-radius: 999px !important;
    font-family: var(--lux-sans) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.26em !important;
    text-transform: uppercase !important;
    padding: 15px 32px !important;
}
.btn-secondary:hover { background: color-mix(in srgb, var(--lux-accent) 6%, transparent) !important; }
.gallery-heading {
    font-family: var(--lux-serif) !important;
    color: var(--lux-accent) !important;
    font-weight: 500 !important;
    font-size: 24px !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
}
.masonry-item { border-radius: var(--lux-radius-sm) !important; }
.empty-state, .closed-card { color: var(--lux-ink) !important; opacity: 0.75 !important; }
.empty-state p, .closed-card h2, .closed-card p { font-family: var(--lux-sans) !important; color: var(--lux-ink) !important; }
.closed-card h2 {
    font-family: var(--lux-serif) !important;
    font-weight: 500 !important;
    font-size: 26px !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
}
.msg-card p { font-family: var(--lux-sans) !important; color: var(--lux-ink) !important; }
.progress-bar { background: var(--lux-accent) !important; }
.progress-bar-wrap { background: color-mix(in srgb, var(--lux-accent) 12%, transparent) !important; }
.album-footer { color: var(--lux-ink) !important; opacity: 0.6 !important; font-family: var(--lux-sans) !important; }
.album-footer a { color: var(--lux-accent) !important; }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
    margin-top: 0 !important;
    padding: 30px 24px;
    border-top: 1px solid var(--lux-line-soft);
    text-align: center;
    background: transparent;
}
footer p {
    font-family: var(--lux-sans);
    color: var(--lux-ink);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin: 0;
    opacity: 0.6;
}

/* ============================================================
   "Toon de hele foto" varianten
   ============================================================ */
.image-card .grote-foto img.full-image {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}
.image-card .foto-tekst .image-side img.full-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
}
.collage-grid.full-photos {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start !important;
    justify-content: center;
    gap: 12px;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
}
.collage-grid.full-photos .tile {
    grid-area: auto !important;
    aspect-ratio: auto !important;
    height: clamp(200px, 24vw, 340px);
    max-height: none !important;
    max-width: 100%;
    overflow: hidden !important;
    border-radius: var(--lux-radius-sm);
}
.collage-grid.full-photos .tile img {
    position: static !important;
    height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    display: block !important;
}
@media (max-width: 640px) {
    .collage-grid.full-photos .tile { height: auto; width: 100%; }
    .collage-grid.full-photos .tile img { width: 100%; height: auto; }
}

/* ============================================================
   REDUCED MOTION (template-eigen animaties; envelop-intro heeft
   z'n eigen reduced-motion in _shared/envelope-intro.css)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .collage-grid .tile:hover img { transform: none; }
}