/* ============================================================
   SAGE LINEN - Template stylesheet (16 okt 2026)
   Licht en warm: linnen papier met korrel, saliegroen als accent,
   grote cursieve Newsreader-koppen en Jost voor de rest. Kleuren
   komen uit de CSS-vars van de site (--color-primary, --color-text,
   --color-background), zodat de paletten werken.

   Elk blok heeft een eigen vorm: hero als tijdschriftspread (namen
   links, boogfoto rechts met een saliegroene schijf erachter), aftel-
   klok als munten, dagplanning met grote cursieve tijden op een
   tintband, citaat als saliegroene band, welkomstfoto als boog met
   schijf en een drop cap, collage met boog, cirkel en rechthoek door
   elkaar, ronde kaart bij de locatie, RSVP met een groene kop, team
   in dubbele ringen. Geen tekst in CSS content.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400&family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* ---------- Tokens ---------- */
:root {
    --sl-serif: 'Newsreader', 'Times New Roman', Georgia, serif;
    --sl-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;

    --sl-ink: var(--color-text, #2F3430);
    --sl-sage: var(--color-primary, #5F6F5B);
    --sl-linen: var(--color-background, #F5F2EB);

    --sl-surface: color-mix(in srgb, #ffffff 58%, var(--sl-linen));
    --sl-tint: color-mix(in srgb, var(--sl-sage) 9%, var(--sl-linen));
    --sl-tint-strong: color-mix(in srgb, var(--sl-sage) 18%, var(--sl-linen));
    --sl-line: color-mix(in srgb, var(--sl-sage) 30%, transparent);
    --sl-line-soft: color-mix(in srgb, var(--sl-sage) 15%, transparent);
    --sl-muted: color-mix(in srgb, var(--sl-ink) 62%, transparent);
    --sl-on-sage: color-mix(in srgb, var(--sl-linen) 94%, #ffffff);
    --sl-shadow: 0 34px 70px -46px color-mix(in srgb, var(--sl-ink) 55%, transparent);

    --sl-radius: 28px;
    --sl-radius-sm: 18px;
    --sl-arch: 999px 999px 28px 28px;
    --sl-gutter: clamp(16px, 4vw, 48px);
    --sl-wide: 1240px;
    --sl-text: 780px;

    --sl-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Lange woorden ---------- */
:where(p, li, blockquote, figcaption, .text-content, .description, .form-intro, .form-label,
    .timeline-title, .timeline-description, .title-blok-h1, .title-blok-h2, .title-blok-h3) {
    overflow-wrap: anywhere;
    word-break: normal;
}
a, .is-url, .is-email, code, pre { overflow-wrap: anywhere; }
.countdown-value, .countdown-number { word-break: keep-all; hyphens: none; }

/* ============================================================
   BASIS
   ============================================================ */
body {
    margin: 0;
    padding: 0;
    background-color: var(--sl-linen);
    /* Linnen: fijne korrel (SVG-ruis) over twee zachte lichtvlekken. */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.33 0 0 0 0 0.31 0 0 0 0 0.26 0 0 0 0.085 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        radial-gradient(1100px 620px at 88% -8%, color-mix(in srgb, var(--sl-sage) 9%, transparent), transparent 62%),
        radial-gradient(900px 560px at -8% 38%, color-mix(in srgb, #ffffff 60%, transparent), transparent 58%);
    background-repeat: repeat, no-repeat, no-repeat;
    font-family: var(--sl-sans);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.7;
    color: var(--sl-ink);
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

main { padding-bottom: 0; }

/* Lucht tussen de blokken */
[data-card-id] { padding: 36px 0 !important; }
[data-card-id]:first-child { padding-top: 0 !important; }
[data-card-id]:last-child { padding-bottom: 56px !important; }
[data-card-id]:has(.hero-card) { padding-top: 0 !important; }
/* De dagplanning op een zachte tintband, het citaat en de voet op salie:
   zo wisselt de pagina van toon en is niet alles linnen. */
[data-card-id]:has(.schedule-wrapper) { background: var(--sl-tint); padding: 64px 0 !important; }
[data-card-id]:has(.quote-card) { padding: 0 !important; }
[data-card-id]:has(.quote-card):last-child { padding-bottom: 64px !important; }
.section + .section { padding-top: 24px; }

h1, h2, h3, h4 { font-family: var(--sl-serif); font-weight: 400; color: var(--sl-ink); margin: 0; }

/* ============================================================
   HEADER & NAVIGATIE
   ============================================================ */
header {
    position: relative;
    z-index: 50;
    background: var(--sl-linen);
    border-bottom: 1px solid var(--sl-line-soft);
}

#publicNav {
    position: relative;
    max-width: 1320px;
    margin: 0 auto;
    padding: 14px 20px;
}

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

/* Logo: de initialen in een rond zegel */
.header-namen {
    box-sizing: border-box;
    width: 54px;
    height: 54px;
    border: 1px solid var(--sl-sage);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-family: var(--sl-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0;
    color: var(--sl-sage);
    text-decoration: none;
}
.header-namen .en-teken {
    font-family: var(--sl-serif);
    font-style: italic;
    font-weight: 300;
    font-size: 0.78em;
    opacity: 0.7;
}
/* Eigen tekst langer dan de initialen: het rondje wordt een pil */
.header-namen--lang { width: auto; padding: 0 18px; border-radius: 999px; font-size: 18px; }
.hide-deco-namen .header-namen { display: none !important; }

/* Menuknop: twee lijntjes */
.nav-toggle {
    --size: 40px;
    --line-w: 24px;
    --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(--sl-sage);
    border-radius: 2px;
    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); }

/* Telefoon: uitklapmenu onder de balk */
.nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 6px 24px 22px;
    background: color-mix(in srgb, #ffffff 40%, var(--sl-linen));
    border-bottom: 1px solid var(--sl-line-soft);
    box-shadow: 0 30px 50px -40px color-mix(in srgb, var(--sl-ink) 50%, transparent);
    z-index: 100;
}
.nav-menu.active { display: flex; }
.nav-menu li { list-style: none; border-bottom: 1px solid var(--sl-line-soft); }
.nav-menu li:last-child { border-bottom: 0; }
.nav-menu .nav-link {
    display: block;
    padding: 15px 0;
    font-family: var(--sl-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-align: center;
    color: var(--sl-ink);
    text-decoration: none;
}
.nav-menu .nav-link.is-active { color: var(--sl-sage); }

/* Groot scherm: zegel links, menu rechts op één regel */
@media (min-width: 900px) {
    #publicNav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
        padding: 18px clamp(24px, 5vw, 64px);
    }
    .header-container { flex: 0 0 auto; }
    .nav-toggle { display: none; }
    .nav-menu {
        position: static;
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 6px 34px;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    .nav-menu li { border: 0; }
    .nav-menu .nav-link {
        position: relative;
        padding: 8px 0;
        font-size: 11.5px;
        letter-spacing: 0.22em;
        transition: color 180ms ease;
    }
    .nav-menu .nav-link::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 2px;
        height: 1px;
        background: var(--sl-sage);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 260ms var(--sl-ease);
    }
    .nav-menu .nav-link:hover { color: var(--sl-sage); }
    .nav-menu .nav-link:hover::after,
    .nav-menu .nav-link.is-active::after { transform: scaleX(1); }
}

/* Taalkeuze */
#publicNav .lang-toggle {
    font-family: var(--sl-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    padding: 8px 14px;
    color: var(--sl-sage);
    background: transparent;
    border: 1px solid var(--sl-line);
    border-radius: 999px;
}
#publicNav .lang-toggle:hover { background: var(--sl-tint); border-color: var(--sl-sage); }
#publicNav .lang-dropdown {
    background: var(--sl-surface);
    border: 1px solid var(--sl-line-soft);
    border-radius: 16px;
    box-shadow: var(--sl-shadow);
    min-width: 190px;
}
#publicNav .lang-option {
    font-family: var(--sl-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    padding: 12px 18px;
    color: var(--sl-ink);
}
#publicNav .lang-option:hover { background: var(--sl-tint); }

/* ============================================================
   HERO: tijdschriftspread. Links de ondertitel als label en de namen
   groot en cursief, rechts de foto als boog met een saliegroene
   schijf erachter. Op de telefoon onder elkaar.
   ============================================================ */
.hero-card {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: var(--sl-wide);
    margin: 0 auto;
    padding: 28px var(--sl-gutter) 0;
}
.hero-card :is(img, video) {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 78vh;
    object-fit: cover;
    border-radius: var(--sl-arch);
    box-shadow: var(--sl-shadow);
    /* Dun lijntje in de foto, als een gedrukte kaart met passe-partout. */
    outline: 1px solid rgba(255, 255, 255, 0.55);
    outline-offset: -14px;
}
.hero-card.hero-card--no-image > div[aria-hidden] {
    width: 100%;
    aspect-ratio: 4 / 5;
    height: auto;
    max-height: 60vh;
    border-radius: var(--sl-arch);
    background:
        radial-gradient(600px 300px at 20% 0%, color-mix(in srgb, var(--sl-sage) 18%, transparent), transparent 70%),
        var(--sl-tint);
}
/* De schijf: een volle salie-cirkel die linksonder achter de foto uitkomt */
.hero-card::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: clamp(160px, 34vw, 240px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--sl-sage);
    left: calc(var(--sl-gutter) - 24px);
    bottom: -28px;
    pointer-events: none;
}
.hero-card .hero-overlay {
    position: static;
    order: -1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0 6px;
    background: none;
}
.hero-card .hero-overlay .text-center {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 22px;
    padding: 0;
}
.hero-card .couple-names {
    font-family: var(--sl-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(52px, 13vw, 76px);
    line-height: 0.95;
    letter-spacing: -0.01em;
    color: var(--sl-ink);
    text-shadow: none;
    margin: 0;
    text-wrap: balance;
}
/* Ondertitel als label in een pil */
.hero-card .hero-title {
    display: inline-block;
    font-family: var(--sl-sans);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--sl-sage);
    margin: 0;
    padding: 9px 18px 8px 22px;
    border: 1px solid var(--sl-sage);
    border-radius: 999px;
    text-shadow: none;
}
.hero-card .hero-badge { display: none; }

@media (min-width: 900px) {
    .hero-card {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
        align-items: center;
        gap: clamp(32px, 5vw, 72px);
        padding-top: 40px;
    }
    .hero-card > :is(img, video, div[aria-hidden]) { grid-column: 2; grid-row: 1; }
    .hero-card .hero-overlay { grid-column: 1; grid-row: 1; justify-content: flex-start; padding: 0; }
    .hero-card .hero-overlay .text-center { align-items: flex-start; text-align: left !important; }
    .hero-card .couple-names { font-size: clamp(64px, 7.4vw, 118px); }
    .hero-card::after {
        width: clamp(220px, 24vw, 330px);
        left: auto;
        right: calc(var(--sl-gutter) + 26%);
        bottom: -36px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .hero-card .hero-overlay .text-center { animation: sl-rise 1s var(--sl-ease) both; }
    .hero-card :is(img, video) { animation: sl-fade 1.2s 0.15s ease both; }
    .hero-card::after { animation: sl-pop 1.1s 0.35s var(--sl-ease) both; }
}

/* ============================================================
   TITELS, TITEL + TEKST, TEKST
   ============================================================ */
.title-blok-h1, .title-blok-h2, .title-blok-h3 {
    font-family: var(--sl-serif);
    font-weight: 400;
    color: var(--sl-sage);
    text-align: center;
    line-height: 1.1;
    max-width: var(--sl-text);
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
    text-wrap: balance;
}
.title-blok-h1 { font-size: clamp(40px, 5.6vw, 72px); font-style: italic; }
.title-blok-h2 { font-size: clamp(32px, 4.4vw, 54px); }
.title-blok-h3 { font-size: clamp(24px, 3vw, 34px); font-style: italic; }

.title-text-section { padding: 0; }
.title-text-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px 56px;
    align-items: start;
    max-width: 1080px;
}
.title-text-grid > h2 {
    font-family: var(--sl-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.02;
    color: var(--sl-sage);
    letter-spacing: -0.01em;
    text-wrap: balance;
}
.title-text-grid .text-content {
    font-family: var(--sl-sans);
    font-size: 17px;
    line-height: 1.75;
    color: var(--sl-ink);
    max-width: 62ch;
}
@media (min-width: 900px) {
    .title-text-grid { grid-template-columns: 5fr 7fr; }
    .title-text-grid > h2 { position: sticky; top: 24px; }
    .title-text-grid .text-content { padding-top: 10px; }
    .title-text-grid.blok-uitgelijnd { grid-template-columns: 1fr; }
}

.text-card { padding: 0 20px; }
.text-card .text-content {
    max-width: 68ch;
    margin: 0 auto;
    font-family: var(--sl-sans);
    font-size: 17px;
    line-height: 1.75;
    color: var(--sl-ink);
}
.text-content h1, .text-content h2, .text-content h3, .description h2, .description h3 {
    font-family: var(--sl-serif);
    font-weight: 400;
    color: var(--sl-sage);
    line-height: 1.15;
    margin: 0 0 0.5em;
}
.text-content h1 { font-size: clamp(34px, 4vw, 48px); }
.text-content h2 { font-size: clamp(28px, 3.4vw, 40px); }
.text-content h3 { font-size: clamp(22px, 2.6vw, 28px); }
.text-content p, .description p { margin: 0 0 1.1em; }
.text-content p:last-child, .description p:last-child { margin-bottom: 0; }
.text-content a, .description a { color: var(--sl-sage); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.text-content strong, .description strong { font-weight: 600; color: var(--sl-ink); }
.text-content em, .description em { font-family: var(--sl-serif); font-style: italic; font-size: 1.08em; }
.text-content ul, .description ul { padding-left: 1.2em; margin: 0 0 1.1em; }
.text-content ol, .description ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.text-content li, .description li { margin: 0.25em 0; }
.text-content blockquote, .description blockquote {
    margin: 1.2em 0;
    padding-left: 1.2em;
    border-left: 1px solid var(--sl-sage);
    font-family: var(--sl-serif);
    font-style: italic;
    font-size: 1.25em;
    line-height: 1.4;
}

/* ============================================================
   AFTELKLOK: munten. De dagen in een volle salie-cirkel, uren,
   minuten en seconden in dunne ringen ernaast.
   ============================================================ */
.card-countdown {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
    text-align: center;
}
.countdown-title {
    font-family: var(--sl-serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.2;
    color: var(--sl-ink);
    margin: 0 auto 34px;
    max-width: 24ch;
    text-wrap: balance;
}
.countdown-title .countdown-date {
    font-family: var(--sl-sans);
    font-style: normal;
    font-weight: 500;
    font-size: 11.5px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--sl-sage);
    opacity: 1;
    margin-bottom: 14px;
}
.countdown-timers {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(8px, 1.6vw, 20px);
}
.countdown-unit {
    box-sizing: border-box;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: clamp(66px, 9.4vw, 112px);
    height: clamp(66px, 9.4vw, 112px);
    border-radius: 50%;
    border: 1px solid var(--sl-line);
    padding: 0;
    min-width: 0;
}
.countdown-unit:first-child {
    width: clamp(122px, 16vw, 186px);
    height: clamp(122px, 16vw, 186px);
    background: var(--sl-sage);
    border-color: var(--sl-sage);
    box-shadow: 0 0 0 8px var(--sl-linen), 0 0 0 9px var(--sl-line), 0 30px 50px -36px color-mix(in srgb, var(--sl-sage) 80%, transparent);
    margin: 56px 64px 56px 0;
}
.countdown-value {
    font-family: var(--sl-serif);
    font-weight: 300;
    font-size: clamp(22px, 3.2vw, 36px);
    line-height: 1;
    color: var(--sl-sage);
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -0.02em;
}
.countdown-unit:first-child .countdown-value { font-size: clamp(44px, 6vw, 72px); color: var(--sl-on-sage); }
.countdown-label {
    margin-top: 6px;
    font-family: var(--sl-sans);
    font-weight: 500;
    font-size: 8.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sl-muted);
}
.countdown-unit:first-child .countdown-label { font-size: 10px; letter-spacing: 0.28em; color: var(--sl-on-sage); opacity: 0.85; margin-top: 8px; }

@media (prefers-reduced-motion: no-preference) {
    [data-card-id].le-anim-in .countdown-unit { animation: sl-pop 0.8s var(--sl-ease) both; }
    [data-card-id].le-anim-in .countdown-unit:nth-child(2) { animation-delay: 0.1s; }
    [data-card-id].le-anim-in .countdown-unit:nth-child(3) { animation-delay: 0.2s; }
    [data-card-id].le-anim-in .countdown-unit:nth-child(4) { animation-delay: 0.3s; }
}

/* ============================================================
   DAGPLANNING: grote cursieve tijden links, onderdeel en
   omschrijving rechts, op de tintband.
   ============================================================ */
.schedule-wrapper { max-width: 860px; margin-left: auto; margin-right: auto; }
.schedule-container { padding: 0 20px; }
.schedule-heading {
    font-family: var(--sl-serif);
    font-weight: 400;
    font-size: clamp(34px, 4.4vw, 54px);
    line-height: 1.08;
    color: var(--sl-sage);
    text-align: center;
    margin: 0 0 30px;
    text-wrap: balance;
}
.schedule-heading::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    margin: 18px auto 0;
    background: var(--sl-sage);
    transform: rotate(45deg);
}
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { display: none; }
.timeline-dot { display: none; }
.timeline-item {
    position: relative;
    margin: 0;
    padding: 26px 0;
    border-top: 1px solid var(--sl-line);
}
.timeline-item:first-child { border-top: 0; padding-top: 6px; }
.timeline-item.last { margin-bottom: 0; }
.timeline-content {
    display: grid;
    grid-template-columns: minmax(150px, 210px) 1fr;
    grid-template-areas: "tijd titel" "tijd tekst";
    column-gap: 30px;
    align-items: center;
}
.timeline-content > img { grid-column: 1 / -1; border-radius: var(--sl-radius-sm); margin-bottom: 14px; }
.timeline-time {
    grid-area: tijd;
    align-self: center;
    font-family: var(--sl-serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(44px, 5.4vw, 72px);
    line-height: 1;
    color: var(--sl-sage);
    white-space: nowrap;
    background: none;
    padding: 0;
    border-radius: 0;
    letter-spacing: -0.02em;
}
.timeline-title {
    grid-area: titel;
    font-family: var(--sl-serif);
    font-weight: 400;
    font-size: 27px;
    line-height: 1.15;
    color: var(--sl-ink);
    margin: 0 0 4px;
}
.timeline-description {
    grid-area: tekst;
    font-family: var(--sl-sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--sl-muted);
    margin: 0;
}

@media (max-width: 640px) {
    .timeline-content { grid-template-columns: 1fr; grid-template-areas: "tijd" "titel" "tekst"; }
    .timeline-time { font-size: 40px; margin-bottom: 6px; }
    .timeline-title { font-size: 23px; }
}
@media (prefers-reduced-motion: no-preference) {
    [data-card-id].le-anim-in .timeline-item { animation: sl-rise 0.7s var(--sl-ease) both; }
    [data-card-id].le-anim-in .timeline-item:nth-child(2) { animation-delay: 0.08s; }
    [data-card-id].le-anim-in .timeline-item:nth-child(3) { animation-delay: 0.16s; }
    [data-card-id].le-anim-in .timeline-item:nth-child(4) { animation-delay: 0.24s; }
    [data-card-id].le-anim-in .timeline-item:nth-child(5) { animation-delay: 0.32s; }
    [data-card-id].le-anim-in .timeline-item:nth-child(6) { animation-delay: 0.4s; }
    [data-card-id].le-anim-in .timeline-item:nth-child(n+7) { animation-delay: 0.48s; }
}

/* ============================================================
   CITAAT: een saliegroene band over de volle breedte, het citaat
   in linnen met een groot aanhalingsteken erachter.
   ============================================================ */
.quote-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding: clamp(64px, 9vw, 120px) 24px;
    background: var(--sl-sage);
    color: var(--sl-on-sage);
    text-align: center;
}
/* Laurierkrans in linnen achter het citaat */
.quote-card { isolation: isolate; }
.quote-card::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(250px, 40vw, 460px);
    aspect-ratio: 888 / 769;
    transform: translate(-50%, -50%);
    background: var(--sl-on-sage);
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
    -webkit-mask: url('botanisch/laurier.png') center / contain no-repeat;
    mask: url('botanisch/laurier.png') center / contain no-repeat;
}
.quote-img { display: none; }
.quote-text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 880px;
    margin: 0 auto;
}
.quote-text blockquote {
    font-family: var(--sl-serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(30px, 4.2vw, 54px);
    line-height: 1.2;
    color: inherit;
    margin: 0;
    text-wrap: balance;
}
.quote-text h2 {
    font-family: var(--sl-sans);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: inherit;
    opacity: 0.8;
    margin: 24px 0 0;
}
.quote-text .blok-links, .quote-text.blok-links { align-items: flex-start; text-align: left; }
.quote-text .blok-rechts, .quote-text.blok-rechts { align-items: flex-end; text-align: right; }
/* Een eigen achtergrondkleur van het paar gaat voor: dan geen band. */
[data-card-id].blok-vlak .quote-card { background: transparent; color: var(--sl-ink); }
[data-card-id].blok-vlak .quote-card::before { color: var(--sl-sage); }

@media (prefers-reduced-motion: no-preference) {
    [data-card-id].le-anim-in .quote-text { animation: sl-rise 0.9s var(--sl-ease) both; }
}

/* ============================================================
   FOTO & TEKST: boogfoto met een salie-schijf erachter, kop
   cursief, de tekst begint met een grote beginletter.
   ============================================================ */
.image-card { margin-left: auto; margin-right: auto; }
.foto-tekst {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 var(--sl-gutter);
    isolation: isolate;
}
.foto-tekst .image-side { position: relative; padding: 0 0 0 26px; }
.foto-tekst .image-side::before {
    content: '';
    position: absolute;
    left: -6px;
    bottom: -26px;
    width: 52%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--sl-sage);
    z-index: -1;
}
.foto-tekst .image-side img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--sl-arch);
    box-shadow: var(--sl-shadow);
}
.foto-tekst .image-side img.full-image { aspect-ratio: auto; }
.foto-tekst .text-side { padding: 44px 0 0; }
.foto-tekst .text-side h2 {
    font-family: var(--sl-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(40px, 5.2vw, 68px);
    line-height: 1.0;
    letter-spacing: -0.01em;
    color: var(--sl-sage);
    margin: 0 0 20px;
    text-wrap: balance;
}
.foto-tekst .text-side .description {
    font-family: var(--sl-sans);
    font-size: 17px;
    line-height: 1.75;
    color: var(--sl-ink);
    max-width: 48ch;
}
.foto-tekst .text-side .description > p:first-child::first-letter {
    float: left;
    font-family: var(--sl-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 4.2em;
    line-height: 0.78;
    margin: 0.06em 0.14em 0 0;
    color: var(--sl-sage);
}
@media (min-width: 768px) {
    .image-card .foto-tekst { align-items: center !important; gap: 72px !important; }
    .foto-tekst .text-side { padding: 0; }
}
@media (prefers-reduced-motion: no-preference) {
    [data-card-id].le-anim-in .foto-tekst .image-side { animation: sl-rise 0.9s var(--sl-ease) both; }
    [data-card-id].le-anim-in .foto-tekst .text-side { animation: sl-rise 0.9s 0.15s var(--sl-ease) both; }
}

/* ============================================================
   GROTE FOTO: van rand tot rand, met een lijntje erin
   ============================================================ */
.image-card .grote-foto { max-width: none; margin: 0; padding: 0; }
.image-card .grote-foto h2 {
    font-family: var(--sl-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(32px, 4.2vw, 50px);
    line-height: 1.1;
    color: var(--sl-sage);
    text-align: center;
    margin: 0 0 26px;
    padding: 0 20px;
}
.image-card .grote-foto img {
    display: block;
    width: 100%;
    height: min(78vh, 820px);
    object-fit: cover;
    border-radius: 0;
    outline: 1px solid rgba(255, 255, 255, 0.5);
    outline-offset: -22px;
}
.image-card .grote-foto img.full-image { height: auto; }

/* ============================================================
   COLLAGE: boog, cirkel en rechthoek door elkaar
   ============================================================ */
.collage-layout {
    max-width: var(--sl-wide);
    margin: 0 auto;
    padding: 0 var(--sl-gutter);
}
.collage-layout > h2 {
    font-family: var(--sl-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(36px, 4.6vw, 58px);
    line-height: 1.05;
    color: var(--sl-sage);
    text-align: center;
    margin: 0 0 36px !important;
    text-wrap: balance;
}
.collage-layout .en-rail-nav { display: none !important; }
.collage-grid { display: grid; gap: 24px; align-items: center; }
.collage-grid .tile { position: relative; overflow: hidden; border-radius: 14px; background: var(--sl-tint); }
.collage-grid .tile img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform 900ms var(--sl-ease);
}
.collage-grid .tile:hover img { transform: scale(1.03); }
/* De vormen: om de drie tegels een boog, een cirkel en een rechthoek */
.collage-grid .tile:nth-child(3n+1) { border-radius: var(--sl-arch); }
.collage-grid .tile:nth-child(3n+2) { border-radius: 50%; }
.collage-grid .tile:nth-child(3n+2) img { aspect-ratio: 1; }
.collage-grid .tile:nth-child(3n) { border-radius: 14px; box-shadow: 0 0 0 8px var(--sl-linen), 0 0 0 9px var(--sl-line); }
.collage-grid.l1 { grid-template-columns: 1fr; max-width: 860px; margin-left: auto; margin-right: auto; }
.collage-grid.l1 .tile { border-radius: var(--sl-arch); }
.collage-grid.l1 .tile img { aspect-ratio: 3 / 2; }
.collage-grid.l2 { grid-template-columns: repeat(2, 1fr); }
.collage-grid.l3 { grid-template-columns: repeat(3, 1fr); }
.collage-grid.l4 { grid-template-columns: repeat(2, 1fr); }
.collage-grid.l5 { grid-template-columns: repeat(6, 1fr); }
.collage-grid.l5 .tile-1, .collage-grid.l5 .tile-2, .collage-grid.l5 .tile-3 { grid-column: span 2; }
.collage-grid.l5 .tile-4, .collage-grid.l5 .tile-5 { grid-column: span 3; }
.collage-grid.l5 .tile-4, .collage-grid.l5 .tile-5 { border-radius: 14px; }
.collage-grid.l5 .tile-4 img, .collage-grid.l5 .tile-5 img { aspect-ratio: 3 / 2; }
.collage-grid.l6 { grid-template-columns: repeat(3, 1fr); }
.collage-grid.lmasonry { display: block; columns: 3; column-gap: 24px; }
.collage-grid.lmasonry .tile { margin-bottom: 24px; break-inside: avoid; border-radius: 14px; box-shadow: none; }
.collage-grid.lmasonry .tile img { aspect-ratio: auto; height: auto; }
.collage-grid.full-photos .tile { border-radius: 14px; box-shadow: none; }
.collage-grid.full-photos .tile img { aspect-ratio: auto; height: auto; }

@media (prefers-reduced-motion: no-preference) {
    [data-card-id].le-anim-in .collage-grid .tile { animation: sl-pop 0.9s var(--sl-ease) both; }
    [data-card-id].le-anim-in .collage-grid .tile:nth-child(2) { animation-delay: 0.1s; }
    [data-card-id].le-anim-in .collage-grid .tile:nth-child(3) { animation-delay: 0.2s; }
    [data-card-id].le-anim-in .collage-grid .tile:nth-child(4) { animation-delay: 0.3s; }
    [data-card-id].le-anim-in .collage-grid .tile:nth-child(5) { animation-delay: 0.4s; }
    [data-card-id].le-anim-in .collage-grid .tile:nth-child(n+6) { animation-delay: 0.5s; }
}

/* ============================================================
   TEAM: ronde portretten in een dubbele ring, rol als label
   ============================================================ */
main .people-grid { gap: 44px 28px; padding: 0 var(--sl-gutter); }
.person-card { padding: 0 8px; }
.person-card img,
.person-card .avatar {
    display: block;
    width: 100%;
    max-width: 230px;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 0 9px var(--sl-linen), 0 0 0 10px var(--sl-line);
}
.person-card .avatar {
    display: grid;
    place-items: center;
    background: var(--sl-tint);
    color: var(--sl-sage);
    font-family: var(--sl-serif);
}
.person-card h3 {
    font-family: var(--sl-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 27px;
    line-height: 1.2;
    color: var(--sl-ink);
    text-align: center;
    margin: 22px 0 10px;
}
.person-card p {
    display: inline-block;
    font-family: var(--sl-sans);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: center;
    color: var(--sl-sage);
    margin: 0;
    padding: 7px 14px 6px;
    border: 1px solid var(--sl-line);
    border-radius: 999px;
}
@media (prefers-reduced-motion: no-preference) {
    [data-card-id].le-anim-in .person-card { animation: sl-rise 0.8s var(--sl-ease) both; }
    [data-card-id].le-anim-in .person-card:nth-child(2) { animation-delay: 0.08s; }
    [data-card-id].le-anim-in .person-card:nth-child(3) { animation-delay: 0.16s; }
    [data-card-id].le-anim-in .person-card:nth-child(4) { animation-delay: 0.24s; }
    [data-card-id].le-anim-in .person-card:nth-child(n+5) { animation-delay: 0.32s; }
}

/* ============================================================
   AFTELKLOK + KAART: links de tekst en de teller, rechts een
   ronde kaart in een dubbele ring.
   ============================================================ */
section.countdown-map {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--sl-gutter);
}
.countdown-map .countdown {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.countdown-map .countdown h2 {
    font-family: var(--sl-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(40px, 5vw, 66px);
    line-height: 1.02;
    color: var(--sl-sage);
    margin: 0 0 10px;
    text-wrap: balance;
}
.countdown-map .countdown-days {
    font-family: var(--sl-sans);
    font-weight: 500;
    font-size: 11.5px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--sl-muted);
    margin: 0 0 26px;
}
.countdown-map .live-countdown .countdown-wrapper { display: flex; flex-wrap: nowrap; gap: 0; justify-content: center; }
.countdown-map .live-countdown .countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px clamp(10px, 1.6vw, 20px);
}
.countdown-map .live-countdown .countdown-item + .countdown-item { border-left: 1px solid var(--sl-line); }
.countdown-map .live-countdown .countdown-item .countdown-number {
    font-family: var(--sl-serif);
    font-weight: 300;
    font-size: clamp(34px, 3.6vw, 50px);
    line-height: 1;
    color: var(--sl-ink);
    font-variant-numeric: tabular-nums lining-nums;
}
.countdown-map .live-countdown .countdown-item .countdown-text {
    margin-top: 8px;
    font-family: var(--sl-sans);
    font-weight: 500;
    font-size: 9.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--sl-muted);
}
.map-link-wrapper { margin-top: 28px; }
.map-link {
    display: inline-block;
    font-family: var(--sl-sans);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sl-on-sage);
    background: var(--sl-sage);
    padding: 14px 28px;
    border-radius: 999px;
    text-decoration: none;
    transition: background 200ms ease, transform 200ms ease;
}
.map-link:hover { background: color-mix(in srgb, var(--sl-sage) 85%, var(--sl-ink)); transform: translateY(-1px); }
.countdown-map .map {
    position: relative;
    width: min(100%, 420px);
    aspect-ratio: 1;
    min-height: 0;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: var(--sl-tint);
    box-shadow: 0 0 0 12px var(--sl-linen), 0 0 0 13px var(--sl-line), var(--sl-shadow);
}
.countdown-map .map-click-area { display: block; height: 100%; }
.countdown-map .forever-map { height: 100%; min-height: 0; }
@media (min-width: 900px) {
    section.countdown-map { grid-template-columns: 1.1fr 1fr; gap: 64px; }
    .countdown-map .countdown { align-items: flex-start; text-align: left; }
    .countdown-map .live-countdown .countdown-wrapper { justify-content: flex-start; }
    .countdown-map .live-countdown .countdown-item:first-child { padding-left: 0; }
    .countdown-map .map { width: min(100%, 460px); margin: 0 0 0 auto; }
}

/* Los kaartblok */
.googlemaps-card { max-width: var(--sl-wide); margin: 0 auto; padding: 0 var(--sl-gutter); }
.googlemaps-card .forever-map { border-radius: var(--sl-radius); box-shadow: var(--sl-shadow); height: 420px; }
.googlemaps-card .map-link-wrapper { text-align: center; margin-top: 22px; }

/* ============================================================
   FORMULIER (RSVP): kaart met een saliegroene kop, velden als
   lijnen eronder.
   ============================================================ */
.form-container { padding: 0; }
.card-form {
    --sl-form-x: clamp(22px, 5vw, 56px);
    position: relative;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--sl-form-x) clamp(36px, 5vw, 52px);
    background: var(--sl-surface);
    border: 1px solid var(--sl-line-soft);
    border-radius: var(--sl-radius);
    box-shadow: var(--sl-shadow);
    text-align: center;
    overflow: hidden;
}
.form-title {
    font-family: var(--sl-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(36px, 4.6vw, 54px);
    line-height: 1.05;
    color: var(--sl-on-sage);
    background: var(--sl-sage);
    margin: 0 calc(-1 * var(--sl-form-x)) 0;
    padding: clamp(36px, 5vw, 52px) 24px 14px;
    text-wrap: balance;
}
.form-intro {
    font-family: var(--sl-sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--sl-on-sage);
    opacity: 0.88;
    background: var(--sl-sage);
    margin: 0 calc(-1 * var(--sl-form-x)) 36px;
    padding: 0 clamp(24px, 8vw, 80px) clamp(32px, 4.6vw, 44px);
}
/* Alleen een kop (geen intro) of een bedankje: de kop sluit de band zelf af */
.form-title:last-child,
.form-title + .form-success,
.form-title + .form-fields,
.form-title + div[x-show],
.form-title + p[style] { margin-top: 0; }
.form-title:not(:has(~ .form-intro)) { padding-bottom: clamp(32px, 4.6vw, 44px); margin-bottom: 36px; }
.form-success {
    font-family: var(--sl-serif);
    font-style: italic;
    font-size: 24px;
    line-height: 1.35;
    color: var(--sl-sage);
    padding: 12px 0 4px;
}
.form-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 22px 28px;
    text-align: left;
}
.form-group { flex: 1 1 44%; min-width: 200px; }
.form-group.full-width { flex-basis: 100%; }
.form-label {
    display: block;
    font-family: var(--sl-sans);
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--sl-muted);
    margin-bottom: 4px;
}
.form-required { color: var(--sl-sage); }
.card-form input.form-input,
.card-form textarea.form-textarea,
.card-form select.form-select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sl-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--sl-sans) !important;
    font-size: 17px !important;
    line-height: 1.4;
    color: var(--sl-ink) !important;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 180ms ease;
}
.card-form select.form-select {
    cursor: pointer;
    padding-right: 28px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235F6F5B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 4px center !important;
}
.card-form select.form-select option { background: var(--sl-linen); color: var(--sl-ink); }
.card-form input.form-input:focus,
.card-form textarea.form-textarea:focus,
.card-form select.form-select:focus {
    outline: none;
    border-bottom-color: var(--sl-sage) !important;
    box-shadow: 0 1px 0 0 var(--sl-sage) !important;
}
.card-form input::placeholder, .card-form textarea::placeholder { color: var(--sl-ink); opacity: 0.4; }
.card-form textarea.form-textarea { resize: vertical; min-height: 96px; }
.form-checkboxes { justify-content: flex-start; }
.form-checkboxes .rsvp-choice span { font-family: var(--sl-sans); font-size: 14px; letter-spacing: 0.04em; }
.form-actions { margin-top: 32px; text-align: center; }
.card-form .form-submit,
.card-form button.form-submit {
    display: inline-block;
    padding: 16px 44px;
    background: var(--sl-sage);
    color: var(--sl-on-sage);
    border: 1px solid var(--sl-sage);
    border-radius: 999px;
    font-family: var(--sl-sans);
    font-weight: 500;
    font-size: 11.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.card-form .form-submit:hover {
    background: color-mix(in srgb, var(--sl-sage) 85%, var(--sl-ink));
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--sl-sage) 80%, transparent);
}
.card-form .form-submit:disabled { opacity: 0.6; cursor: default; }
.form-error { font-family: var(--sl-sans); }

/* Gezelschap (RSVP per persoon) en extra gasten */
.card-form .grsvp-card { background: color-mix(in srgb, var(--sl-sage) 5%, transparent); border-color: var(--sl-line-soft); border-radius: var(--sl-radius-sm); text-align: left; }
.card-form .grsvp-name { font-family: var(--sl-serif); font-weight: 400; font-size: 22px; border-bottom-color: var(--sl-line-soft); }
.card-form .grsvp-input-row label, .card-form .grsvp-att-label { font-family: var(--sl-sans); letter-spacing: 0.18em; text-transform: uppercase; font-size: 10.5px; }
.card-form .grsvp-input-row input {
    background: transparent; border: 0; border-bottom: 1px solid var(--sl-line); border-radius: 0; padding: 8px 0;
    font-family: var(--sl-sans); font-size: 16px; color: var(--sl-ink);
}
.card-form .grsvp-btn { font-family: var(--sl-sans); letter-spacing: 0.08em; background: transparent; border-color: var(--sl-line); color: var(--sl-ink); }
.card-form .grsvp-btn.active-yes { background: var(--sl-sage); border-color: var(--sl-sage); }
.card-form .rsvp-extra { text-align: left; }
.card-form .rsvp-extra > div { border-color: var(--sl-line-soft) !important; border-radius: var(--sl-radius-sm) !important; }
.card-form .rsvp-extra button[type="button"]:last-child { font-family: var(--sl-sans); letter-spacing: 0.08em; border-radius: 999px !important; border-color: var(--sl-line) !important; }

/* ============================================================
   GASTENBOEK & FOTOALBUM (inline gestylede blokken)
   ============================================================ */
.card-guestbook, .card-album-qr { max-width: 820px; margin-left: auto; margin-right: auto; padding: 0 20px; }
.card-guestbook .schedule-heading, .card-album-qr .schedule-heading,
.card-menu .schedule-heading, .card-giftlist .schedule-heading, .card-accommodation .schedule-heading { margin-bottom: 0; font-style: italic; }
.card-guestbook .text-content, .card-album-qr .text-content,
.card-menu .text-content, .card-giftlist .text-content, .card-accommodation .text-content {
    font-family: var(--sl-sans);
    font-size: 16px;
    color: var(--sl-muted);
    max-width: 44ch;
    margin-left: auto;
    margin-right: auto;
}
.card-guestbook input, .card-guestbook textarea, .card-guestbook select {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sl-line) !important;
    border-radius: 0 !important;
    padding: 10px 0 !important;
    font-family: var(--sl-sans) !important;
    font-size: 16px !important;
    color: var(--sl-ink) !important;
}
.card-guestbook input:focus, .card-guestbook textarea:focus, .card-guestbook select:focus { outline: none; border-bottom-color: var(--sl-sage) !important; }
.card-guestbook input::placeholder, .card-guestbook textarea::placeholder { color: var(--sl-ink); opacity: 0.45; }
.card-guestbook button[type="submit"],
.card-album-qr a[href] {
    font-family: var(--sl-sans) !important;
    font-weight: 500 !important;
    font-size: 11.5px !important;
    letter-spacing: 0.26em !important;
    text-transform: uppercase !important;
    padding: 15px 36px !important;
    color: var(--sl-on-sage) !important;
}
.card-guestbook div[style*="rgba(255,255,255,0.6)"] {
    background: var(--sl-surface) !important;
    border-color: var(--sl-line-soft) !important;
    border-radius: var(--sl-radius-sm) !important;
}
.card-guestbook div[style*="rgba(255,255,255,0.6)"] p[style*="font-weight: 700"] { font-family: var(--sl-serif) !important; font-weight: 400 !important; font-size: 20px !important; }
.card-album-qr div[style*="background: #ffffff"] {
    border-radius: 50% !important;
    padding: 40px !important;
    border-color: var(--sl-line-soft) !important;
    box-shadow: 0 0 0 10px var(--sl-linen), 0 0 0 11px var(--sl-line), var(--sl-shadow);
}
.card-album-qr .album-qr-photos div[style*="background: #fff"] { border-radius: var(--sl-radius-sm) !important; }

/* Menu, cadeaulijst, overnachtingen: al var-gedreven, alleen de letter */
.card-menu, .card-giftlist, .card-accommodation { max-width: 820px; margin-left: auto; margin-right: auto; }
.menu-gang-naam, .gift-name, .stay-name, .stay-jij-kop, .menu-persoon-naam { font-family: var(--sl-serif); font-weight: 400; font-size: 22px; }
.menu-knop, .gift-form button, .gift-vraag > summary, .stay-knop {
    font-family: var(--sl-sans);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 12px 24px;
}
.menu-veld, .gift-form input, .stay-veld { font-family: var(--sl-sans); border-radius: 0; background: transparent; border: 0; border-bottom: 1px solid var(--sl-line); }
.menu-gang, .gift-item, .stay-item { border-top-color: var(--sl-line-soft); }

/* Audio: zachte kaart, cursieve titel */
.tpl-sage-linen .audio-card__inner { border-radius: 999px; padding-right: 28px; background: var(--sl-surface); border-color: var(--sl-line-soft); box-shadow: var(--sl-shadow); }
.tpl-sage-linen .audio-card__title { font-family: var(--sl-serif); font-style: italic; font-weight: 400; font-size: 1.25em; }
.tpl-sage-linen .audio-card__artist { font-family: var(--sl-sans); letter-spacing: 0.06em; }
.tpl-sage-linen .audio-card__toggle { color: var(--sl-on-sage); }

/* Scheidingslijn */
.divider-card { padding: 0 var(--sl-gutter); color: var(--sl-sage); }
.divider-card hr { border-color: var(--sl-line); border-top-width: 1px; }
.divider-card .divider-sier .text-xl { font-size: 0; width: 8px; height: 8px; background: var(--sl-sage); transform: rotate(45deg); opacity: 0.9; }

/* Rij met kolommen */
.row-section { padding: 0 var(--sl-gutter); }

/* ============================================================
   TOEGANGSPAGINA
   ============================================================ */
.password-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    font-family: var(--sl-sans);
    color: var(--sl-ink);
    background-color: var(--sl-linen);
    background-image: radial-gradient(900px 600px at 50% -10%, color-mix(in srgb, var(--sl-sage) 10%, transparent), transparent 60%);
}
.password-card {
    position: relative;
    width: 100%;
    max-width: 480px;
    padding: 0 36px 44px;
    background: var(--sl-surface);
    border: 1px solid var(--sl-line-soft);
    border-radius: var(--sl-radius);
    box-shadow: var(--sl-shadow);
    text-align: center;
    overflow: hidden;
}
.password-card .couple-names {
    font-family: var(--sl-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(40px, 7vw, 58px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--sl-on-sage);
    background: var(--sl-sage);
    margin: 0 -36px 0;
    padding: 48px 24px 14px;
}
.password-card .subtitle {
    font-family: var(--sl-sans);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--sl-on-sage);
    opacity: 0.85;
    background: var(--sl-sage);
    margin: 0 -36px 28px;
    padding: 0 24px 34px;
}
.password-card .info-text { font-size: 15px; line-height: 1.7; color: var(--sl-muted); margin: 0 0 24px; }
.password-card .error-text {
    font-size: 13px;
    color: var(--sl-sage);
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--sl-tint);
}
.password-card form { margin-top: 10px; }
.password-card input[type="password"],
.password-card input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--sl-line);
    border-radius: 0;
    font-family: var(--sl-sans);
    font-size: 17px;
    color: var(--sl-ink);
    padding: 12px 0;
    margin-bottom: 22px;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 180ms ease;
}
.password-card input::placeholder { color: var(--sl-ink); opacity: 0.4; }
.password-card input:focus { outline: none; border-bottom-color: var(--sl-sage); }
.password-card button[type="submit"],
.password-card #inviteBtn {
    width: 100%;
    background: var(--sl-sage);
    color: var(--sl-on-sage);
    border: 0;
    border-radius: 999px;
    font-family: var(--sl-sans);
    font-weight: 500;
    font-size: 11.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    padding: 16px 32px;
    cursor: pointer;
    transition: background 200ms ease;
}
.password-card button[type="submit"]:hover,
.password-card #inviteBtn:hover { background: color-mix(in srgb, var(--sl-sage) 85%, var(--sl-ink)); }
@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; }

/* ============================================================
   FOOTER: saliegroene band
   ============================================================ */
footer {
    margin-top: 0;
    padding: 40px 20px 36px;
    text-align: center;
    background: var(--sl-sage);
    color: var(--sl-on-sage);
}
footer p {
    margin: 0;
    font-family: var(--sl-sans);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--sl-on-sage);
    opacity: 0.85;
}

/* ============================================================
   BOTANISCHE COLLECTIE: twaalf lijntekeningen (botanisch/*.png,
   zwart op transparant) als mask in de paletkleur. Elk blok krijgt
   een andere tekening: hoekboeket en hangende tak bij de hero,
   eucalyptus bij het welkom, krans om de dagen, laurier achter het
   citaat, varen in de kantlijn, olijf en gipskruid op de band van de
   dagplanning, slinger onder de collagekop en in de voet, lavendel
   en wilde bloemen bij de kaart, eucalyptus en pampas op het RSVP.
   ============================================================ */

/* Hero: hoekboeket linksboven, hangende tak rechtsboven */
.hero-card::before {
    content: '';
    position: absolute;
    z-index: -1;
    pointer-events: none;
    width: clamp(150px, 36vw, 330px);
    aspect-ratio: 755 / 918;
    right: -26px;
    top: -4px;
    transform: scaleX(-1);
    background: var(--sl-sage);
    opacity: 0.9;
    -webkit-mask: url('botanisch/hoekboeket.png') center / contain no-repeat;
    mask: url('botanisch/hoekboeket.png') center / contain no-repeat;
}
.hero-card .hero-overlay::after {
    content: '';
    position: absolute;
    display: none;
    pointer-events: none;
    width: clamp(120px, 13vw, 190px);
    aspect-ratio: 466 / 596;
    right: calc(var(--sl-gutter) - 10px);
    top: -14px;
    background: var(--sl-sage);
    opacity: 0.8;
    -webkit-mask: url('botanisch/hangend.png') center / contain no-repeat;
    mask: url('botanisch/hangend.png') center / contain no-repeat;
}
@media (min-width: 900px) {
    .hero-card::before {
        left: calc(var(--sl-gutter) - 50px);
        right: auto;
        top: -30px;
        transform: none;
        width: clamp(200px, 21vw, 300px);
    }
    .hero-card .hero-overlay { align-self: end; padding-bottom: 28px; }
    .hero-card .hero-overlay::after { display: block; right: calc(var(--sl-gutter) - 26px); top: -24px; width: clamp(110px, 11vw, 150px); }
}

/* Welkom: eucalyptustak onder de tekst */
.foto-tekst .text-side { position: relative; }
.foto-tekst .text-side::after {
    content: '';
    position: absolute;
    z-index: -1;
    pointer-events: none;
    right: -12px;
    bottom: -96px;
    width: clamp(190px, 26vw, 360px);
    aspect-ratio: 873 / 542;
    transform: rotate(-8deg);
    background: var(--sl-sage);
    opacity: 0.8;
    -webkit-mask: url('botanisch/eucalyptus.png') center / contain no-repeat;
    mask: url('botanisch/eucalyptus.png') center / contain no-repeat;
}

/* Aftelklok: krans om de dagen */
.countdown-unit:first-child { position: relative; }
.countdown-unit:first-child::before {
    content: '';
    position: absolute;
    z-index: -1;
    pointer-events: none;
    left: 50%;
    top: 50%;
    width: 172%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: var(--sl-sage);
    opacity: 0.9;
    -webkit-mask: url('botanisch/krans.png') center / contain no-repeat;
    mask: url('botanisch/krans.png') center / contain no-repeat;
}

/* Titel + tekst: varen in de kantlijn (alleen breed) */
.title-text-grid { position: relative; }
.title-text-grid::before {
    content: '';
    position: absolute;
    display: none;
    pointer-events: none;
    left: -150px;
    top: -30px;
    width: 120px;
    aspect-ratio: 409 / 767;
    transform: rotate(-14deg);
    background: var(--sl-sage);
    opacity: 0.8;
    -webkit-mask: url('botanisch/varen.png') center / contain no-repeat;
    mask: url('botanisch/varen.png') center / contain no-repeat;
}
@media (min-width: 1300px) { .title-text-grid::before { display: block; } }

/* Dagplanning: olijf rechtsboven en gipskruid linksonder op de band */
[data-card-id]:has(.schedule-wrapper) { position: relative; overflow: hidden; isolation: isolate; }
[data-card-id]:has(.schedule-wrapper)::before,
[data-card-id]:has(.schedule-wrapper)::after {
    content: '';
    position: absolute;
    z-index: -1;
    pointer-events: none;
    display: none;
    background: var(--sl-sage);
}
[data-card-id]:has(.schedule-wrapper)::before {
    right: -40px;
    top: 20px;
    width: clamp(220px, 24vw, 340px);
    aspect-ratio: 565 / 500;
    transform: rotate(16deg);
    opacity: 0.55;
    -webkit-mask: url('botanisch/olijf.png') center / contain no-repeat;
    mask: url('botanisch/olijf.png') center / contain no-repeat;
}
[data-card-id]:has(.schedule-wrapper)::after {
    left: -10px;
    bottom: -60px;
    width: clamp(150px, 17vw, 240px);
    aspect-ratio: 535 / 904;
    transform: rotate(10deg);
    opacity: 0.6;
    -webkit-mask: url('botanisch/gipskruid.png') center / contain no-repeat;
    mask: url('botanisch/gipskruid.png') center / contain no-repeat;
}
@media (min-width: 1100px) {
    [data-card-id]:has(.schedule-wrapper)::before,
    [data-card-id]:has(.schedule-wrapper)::after { display: block; }
}

/* Collagekop: bloemenslinger eronder */
.collage-layout > h2::after {
    content: '';
    display: block;
    width: min(340px, 72%);
    aspect-ratio: 947 / 161;
    margin: 14px auto 0;
    background: var(--sl-sage);
    opacity: 0.85;
    -webkit-mask: url('botanisch/slinger.png') center / contain no-repeat;
    mask: url('botanisch/slinger.png') center / contain no-repeat;
}

/* Aftelklok + kaart: lavendel naast de kop, wilde bloemen tegen de kaart */
section.countdown-map { position: relative; isolation: isolate; }
.countdown-map .countdown { position: relative; }
.countdown-map .countdown::before {
    content: '';
    position: absolute;
    display: none;
    pointer-events: none;
    left: -78px;
    top: -14px;
    width: 62px;
    aspect-ratio: 315 / 862;
    transform: rotate(-8deg);
    background: var(--sl-sage);
    opacity: 0.8;
    -webkit-mask: url('botanisch/lavendel.png') center / contain no-repeat;
    mask: url('botanisch/lavendel.png') center / contain no-repeat;
}
section.countdown-map::after {
    content: '';
    position: absolute;
    z-index: 1;
    pointer-events: none;
    left: 50%;
    margin-left: -220px;
    bottom: -44px;
    width: 128px;
    aspect-ratio: 480 / 947;
    transform: rotate(-10deg);
    background: var(--sl-sage);
    opacity: 0.88;
    -webkit-mask: url('botanisch/wildbloemen.png') center / contain no-repeat;
    mask: url('botanisch/wildbloemen.png') center / contain no-repeat;
}
@media (min-width: 900px) {
    .countdown-map .countdown::before { display: block; }
    section.countdown-map::after {
        left: auto;
        margin-left: 0;
        right: calc(var(--sl-gutter) + 372px);
        bottom: -70px;
        width: 200px;
    }
}

/* RSVP: eucalyptus in linnen door de groene kop, pampas bij de velden */
.card-form { isolation: isolate; }
.card-form::before,
.card-form::after {
    content: '';
    position: absolute;
    z-index: -1;
    pointer-events: none;
}
.card-form::before {
    z-index: 2;
    left: -40px;
    top: -10px;
    width: clamp(180px, 34vw, 250px);
    aspect-ratio: 873 / 542;
    transform: rotate(-26deg);
    background: var(--sl-on-sage);
    opacity: 0.38;
    -webkit-mask: url('botanisch/eucalyptus.png') center / contain no-repeat;
    mask: url('botanisch/eucalyptus.png') center / contain no-repeat;
}
.card-form::after {
    right: -14px;
    bottom: -26px;
    width: clamp(90px, 14vw, 130px);
    aspect-ratio: 392 / 934;
    transform: rotate(8deg);
    background: var(--sl-sage);
    opacity: 0.7;
    -webkit-mask: url('botanisch/pampas.png') center / contain no-repeat;
    mask: url('botanisch/pampas.png') center / contain no-repeat;
}
.form-title, .form-intro, .form-fields, .form-actions, .form-success { position: relative; z-index: 1; }

/* Voet: slinger in linnen boven de regel */
footer::before {
    content: '';
    display: block;
    width: min(320px, 80%);
    aspect-ratio: 947 / 161;
    margin: 0 auto 18px;
    background: var(--sl-on-sage);
    opacity: 0.85;
    -webkit-mask: url('botanisch/slinger.png') center / contain no-repeat;
    mask: url('botanisch/slinger.png') center / contain no-repeat;
}

/* Toegangspagina: laurier in linnen achter de namen */
.password-card { isolation: isolate; }
.password-card::before {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    left: 50%;
    top: 16px;
    width: 280px;
    aspect-ratio: 888 / 769;
    transform: translateX(-50%);
    background: var(--sl-on-sage);
    opacity: 0.2;
    -webkit-mask: url('botanisch/laurier.png') center / contain no-repeat;
    mask: url('botanisch/laurier.png') center / contain no-repeat;
}
.password-card .couple-names, .password-card .subtitle { position: relative; z-index: 1; }

@media (max-width: 768px) {
    .hero-card::before { width: 150px; right: -20px; top: -2px; }
    .foto-tekst .text-side::after { width: 170px; right: -8px; bottom: -62px; opacity: 0.7; }
    .countdown-unit:first-child { margin: 34px 30px 34px 0; }
    .card-form::before { width: 190px; left: -34px; top: -4px; }
    .card-form::after { width: 84px; right: -12px; bottom: -22px; }
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes sl-rise {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes sl-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes sl-pop {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

/* ============================================================
   TELEFOON
   ============================================================ */
@media (max-width: 768px) {
    body { font-size: 16px; }
    [data-card-id] { padding: 28px 0 !important; }
    [data-card-id]:first-child { padding-top: 0 !important; }
    [data-card-id]:has(.schedule-wrapper) { padding: 44px 0 !important; }
    [data-card-id]:has(.quote-card) { padding: 0 !important; }

    .hero-card { padding: 22px 16px 0; gap: 22px; }
    .hero-card :is(img, video) { max-height: 70vh; outline-offset: -10px; }
    .hero-card .hero-overlay .text-center { gap: 16px; }
    .hero-card .hero-title { font-size: 10px; letter-spacing: 0.28em; padding: 8px 14px 7px 18px; }

    .countdown-timers { gap: 8px; }
    .countdown-unit { width: 64px; height: 64px; }
    .countdown-unit:first-child { width: 118px; height: 118px; margin-right: 4px; box-shadow: 0 0 0 6px var(--sl-linen), 0 0 0 7px var(--sl-line); }
    .countdown-value { font-size: 20px; }
    .countdown-unit:first-child .countdown-value { font-size: 42px; }
    .countdown-label { font-size: 7.5px; letter-spacing: 0.14em; margin-top: 4px; }
    .countdown-unit:first-child .countdown-label { font-size: 9px; }

    .foto-tekst .image-side { padding: 0 0 0 14px; }
    .foto-tekst .image-side::before { left: -4px; bottom: -16px; width: 48%; }
    .foto-tekst .text-side { padding-top: 40px; }
    .foto-tekst .text-side .description > p:first-child::first-letter { font-size: 3.3em; }

    .image-card .grote-foto img { height: 62vh; outline-offset: -14px; }

    .collage-grid { gap: 14px; }
    .collage-grid.l2, .collage-grid.l3, .collage-grid.l4, .collage-grid.l6 { grid-template-columns: repeat(2, 1fr); }
    .collage-grid.l5 { grid-template-columns: repeat(2, 1fr); }
    .collage-grid.l5 .tile-1, .collage-grid.l5 .tile-2, .collage-grid.l5 .tile-3,
    .collage-grid.l5 .tile-4, .collage-grid.l5 .tile-5 { grid-column: auto; }
    .collage-grid.l5 .tile-4 img, .collage-grid.l5 .tile-5 img { aspect-ratio: 4 / 5; }
    .collage-grid .tile:nth-child(3n) { box-shadow: 0 0 0 5px var(--sl-linen), 0 0 0 6px var(--sl-line); }
    .collage-grid.lmasonry { columns: 2; }

    main .people-grid { gap: 32px 16px; }
    .person-card img, .person-card .avatar { max-width: 190px; box-shadow: 0 0 0 6px var(--sl-linen), 0 0 0 7px var(--sl-line); }
    .person-card h3 { font-size: 23px; }

    .countdown-map .live-countdown .countdown-item { padding: 4px 10px; }
    .countdown-map .live-countdown .countdown-item .countdown-number { font-size: 30px; }
    .countdown-map .live-countdown .countdown-item .countdown-text { font-size: 8.5px; letter-spacing: 0.16em; }
    .countdown-map .map { width: min(100%, 320px); box-shadow: 0 0 0 8px var(--sl-linen), 0 0 0 9px var(--sl-line), var(--sl-shadow); }

    .card-form { width: calc(100% - 32px); border-radius: 22px; }
    .form-group { flex-basis: 100%; min-width: 0; }
    .card-guestbook, .card-album-qr { padding: 0 16px; }
    .googlemaps-card .forever-map { height: 320px; }
}
@media (max-width: 400px) {
    .countdown-unit { width: 58px; height: 58px; }
    .countdown-unit:first-child { width: 108px; height: 108px; }
    .countdown-value { font-size: 18px; }
    .countdown-unit:first-child .countdown-value { font-size: 38px; }
    .countdown-label { font-size: 7px; letter-spacing: 0.1em; }
}