/*
 * Template "Bulan Sabit Lelap" (Aqiqah & Kelahiran) — a calm night lullaby.
 * Deep, cozy midnight blue + warm moonlight gold + a soft lilac accent, alternating with ivory storybook pages.
 * Signature pieces (inline SVG in sections/_*): the knitted crescent cradle with its cloud pillow and the photo
 * in the moon's glow (_moon), the crib mobile whose thread becomes the rundown timeline (_mobile), the night
 * lamp (_lamp), the prayer mat corner (_mat), the sleeping baby silhouette (_sleeper), knitted bands (.bs-knit),
 * static stars. The baby section is a "kartu lelap" (a lullaby book page per baby).
 * Mobile-first, one column (~460px) on a night backdrop on wide screens.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (midnight blue / plum / night teal: titles on ivory, buttons, frames)
 *   --inv-accent (moonlight gold: the crescent, moons, tags; text on it = --inv-deep)
 *   --inv-background (ivory)   --inv-text   --inv-deep (the night sections)   --inv-shine (light gold on night)
 *   --inv-lilac (the soft accent: knitted bands, chips, the sleeping baby, shadows)
 * Everything else is mixed from those, so a new variant only needs these seven colours.
 *
 * Section tones (set on each section in its partial): .bs-tone--night (deep, static stars), --ivory (storybook
 * page), --lilac (a soft lilac wash), --moon (a moonlight-gold band). Night and light alternate down the page.
 *
 * Motion only runs with html.inv-anim (set by <x-inv.head> unless the guest prefers reduced motion);
 * without it everything is shown finished. Nothing moves continuously.
 *
 * Contents: 1 base · 2 section tones & photo backgrounds · 3 shared pieces (heading, moon, knit, lamp, mat,
 *           mobile, sleeper) · 4 cover · 5 sections in page order · 6 forms (RSVP, wishes) ·
 *           7 shared components · 8 screen sizes · 9 motion
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Biru Tengah Malam" variant (the variant's colours override these) */
    --inv-primary: #25336f;
    --inv-accent: #e8ad45;
    --inv-background: #fbf6ea;
    --inv-text: #1a1e38;
    --inv-deep: #121a42;
    --inv-shine: #ffd98a;
    --inv-lilac: #b8a5ee;
    --inv-radius: 18px;

    --bs-serif: 'Young Serif', Georgia, 'Times New Roman', serif;
    --bs-sans: 'Quicksand', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-col: 460px;
    --bs-paper: color-mix(in srgb, #fff 62%, var(--inv-background));
    --bs-ink: color-mix(in srgb, var(--inv-primary) 72%, var(--inv-deep));
    --bs-muted: color-mix(in srgb, var(--inv-text) 78%, var(--inv-background));
    --bs-ivory-muted: color-mix(in srgb, var(--inv-background) 82%, transparent);
    --bs-lilac-soft: color-mix(in srgb, var(--inv-lilac) 32%, var(--inv-background));
    --bs-lilac-ink: color-mix(in srgb, var(--inv-lilac) 45%, var(--inv-deep));
    --bs-ring: color-mix(in srgb, var(--inv-primary) 18%, transparent);
    --bs-drop: 0 22px 40px -22px color-mix(in srgb, var(--inv-deep) 75%, transparent);

    /* static stars: small dots and a few four-pointed stars on a 260px tile (white; dimmed per use) */
    --bs-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260' fill='white'%3E%3Ccircle cx='18' cy='26' r='1.3'/%3E%3Ccircle cx='92' cy='14' r='.9'/%3E%3Ccircle cx='170' cy='48' r='1.4'/%3E%3Ccircle cx='236' cy='22' r='1'/%3E%3Ccircle cx='54' cy='96' r='1'/%3E%3Ccircle cx='128' cy='120' r='1.5'/%3E%3Ccircle cx='214' cy='132' r='.9'/%3E%3Ccircle cx='30' cy='176' r='1.4'/%3E%3Ccircle cx='106' cy='208' r='1'/%3E%3Ccircle cx='182' cy='196' r='1.2'/%3E%3Ccircle cx='246' cy='238' r='1.4'/%3E%3Ccircle cx='70' cy='246' r='.9'/%3E%3Cpath d='M204 84l1.5 4.5 4.5 1.5-4.5 1.5-1.5 4.5-1.5-4.5-4.5-1.5 4.5-1.5Z'/%3E%3Cpath d='M64 140l1.2 3.6 3.6 1.2-3.6 1.2-1.2 3.6-1.2-3.6-3.6-1.2 3.6-1.2Z'/%3E%3Cpath d='M150 238l1 3 3 1-3 1-1 3-1-3-3-1 3-1Z'/%3E%3C/svg%3E");
    /* knit stitches: two leaning loops per stitch, white highlights and a dark outline (works on any colour) */
    --bs-knit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14'%3E%3Cg fill='white' fill-opacity='.34' stroke='black' stroke-opacity='.16' stroke-width='.8'%3E%3Cellipse cx='3.4' cy='7' rx='2.2' ry='5.3' transform='rotate(-26 3.4 7)'/%3E%3Cellipse cx='8.6' cy='7' rx='2.2' ry='5.3' transform='rotate(26 8.6 7)'/%3E%3C/g%3E%3C/svg%3E");
    /* a small crescent, as a mask */
    --bs-crescent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.6 1.4A7 7 0 1 0 14.6 12 5.7 5.7 0 0 1 10.6 1.4Z'/%3E%3C/svg%3E");
    --bs-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.7 5.6 4.9 9.8 10.5 10.5-5.6.7-9.8 4.9-10.5 10.5C11.3 16.9 7.1 12.7 1.5 12 7.1 11.3 11.3 7.1 12 1.5Z'/%3E%3C/svg%3E");
    --bs-star5: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3 6.4 7 .9-5.1 4.8 1.3 6.9L12 17.4l-6.2 3.4 1.3-6.9L2 9.1l7-.9Z' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
    --bs-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M6 16.5c-3.6 0-4.6-4.6-1.4-5.6C4.2 6.8 8.6 5 11 7.6c1.2-4.4 7.6-4.6 8.4.4 3.6-.2 4.6 4.6 1.6 6.6-.5 1.2-1.4 1.9-2.6 1.9Z'/%3E%3C/svg%3E");

    /* colours of the shared components */
    --inv-ambient-1: var(--inv-shine);
    --inv-ambient-2: var(--inv-lilac);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--inv-background);
    color: var(--inv-text);
    font-family: var(--bs-sans);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.65;
    font-variant-numeric: lining-nums;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: var(--inv-primary); }

.bs-preview {
    position: sticky; top: 0; z-index: 60; padding: .5rem 1rem; text-align: center;
    background: #fff4d6; color: #6b4e00; font-size: .8125rem;
}

/* the one column of the page; every section paints its own full-width background */
.bs-main { max-width: var(--bs-col); margin: 0 auto; }
.bs-branding { max-width: var(--bs-col); margin: 0 auto; }

.bs-section { position: relative; isolation: isolate; overflow: hidden; padding: 4.25rem 1.4rem; text-align: center; }
.bs-section > p { margin: 0 auto 1rem; max-width: 34ch; }

.bs-arabic { font-family: 'Amiri', 'Traditional Arabic', serif; line-height: 1.9; color: var(--inv-primary); }
.bs-amp { font-family: var(--bs-serif); font-weight: 400; }

/* ---------- 2. section tones & photo backgrounds ---------- */

/* night: the deep colour, a primary glow, a lilac haze in the corner and static stars */
.bs-tone--night {
    color: var(--inv-background);
    background:
        radial-gradient(70% 34% at 100% 0%, color-mix(in srgb, var(--inv-lilac) 24%, transparent), transparent 75%),
        radial-gradient(90% 50% at 0% 10%, color-mix(in srgb, var(--inv-primary) 85%, transparent), transparent 75%),
        radial-gradient(70% 40% at 50% 100%, color-mix(in srgb, var(--inv-primary) 55%, transparent), transparent 75%),
        var(--inv-deep);
}
.bs-tone--night::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--bs-stars) center top / 260px 260px repeat; opacity: .55;
}
.bs-tone--night a:not(.inv-button) { color: var(--inv-shine); }
.bs-tone--night .bs-arabic { color: var(--inv-shine); }

/* ivory: a storybook page with a faint lilac glow and very faint stars in the primary colour */
.bs-tone--ivory {
    background:
        radial-gradient(60% 30% at 100% 0%, color-mix(in srgb, var(--inv-lilac) 22%, transparent), transparent 75%),
        radial-gradient(60% 30% at 0% 100%, color-mix(in srgb, var(--inv-accent) 12%, transparent), transparent 75%),
        var(--inv-background);
}
/* lilac: a soft wash of the lilac accent */
.bs-tone--lilac {
    background:
        radial-gradient(80% 40% at 50% 0%, color-mix(in srgb, #fff 45%, transparent), transparent 75%),
        linear-gradient(180deg, var(--bs-lilac-soft), color-mix(in srgb, var(--inv-lilac) 14%, var(--inv-background)));
}
.bs-tone--ivory::before, .bs-tone--lilac::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-primary); opacity: .1;
    -webkit-mask: var(--bs-stars) center top / 260px 260px repeat; mask: var(--bs-stars) center top / 260px 260px repeat;
}

/* moon: a full moonlight-gold band */
.bs-tone--moon {
    color: var(--inv-deep);
    background:
        radial-gradient(70% 60% at 50% 0%, color-mix(in srgb, var(--inv-shine) 85%, #fff), transparent 75%),
        linear-gradient(180deg, var(--inv-shine), var(--inv-accent));
}
.bs-tone--moon::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-deep); opacity: .1;
    -webkit-mask: var(--bs-stars) center top / 260px 260px repeat; mask: var(--bs-stars) center top / 260px 260px repeat;
}

/* a client photo behind a section, under a strong gradient of the section's own tone */
.bs-bgphoto { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.bs-bgphoto img { display: block; width: 100%; height: calc(100% + 80px); margin-top: -40px; object-fit: cover; object-position: center 45%; --inv-parallax: 40px; }
.bs-bgphoto::after { content: ''; position: absolute; inset: 0; }
.bs-tone--night .bs-bgphoto::after {
    background:
        radial-gradient(80% 45% at 50% 0%, color-mix(in srgb, var(--inv-primary) 45%, transparent), transparent),
        linear-gradient(180deg,
            color-mix(in srgb, var(--inv-deep) 90%, transparent),
            color-mix(in srgb, var(--inv-deep) 74%, transparent) 45%,
            color-mix(in srgb, var(--inv-deep) 95%, transparent));
}

/* ---------- 3. shared pieces ---------- */

/* section heading: a tiny gold crescent + letter-spaced eyebrow, a storybook title, the last word highlighted */
.bs-heading { margin: 0 0 2rem; }
.bs-heading--left { text-align: left; }
.bs-heading__eyebrow {
    display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .65rem;
    font-size: .7rem; font-weight: 700; line-height: 1.2; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-primary);
}
.bs-heading__moon { width: .95rem; height: .95rem; flex: none; fill: var(--inv-accent); }
.bs-heading__title {
    margin: 0; font-family: var(--bs-serif); font-size: 2.3rem; font-weight: 400; line-height: 1.12;
    letter-spacing: -.01em; color: var(--bs-ink); text-wrap: balance;
}
.bs-heading__title em {
    font-style: normal; color: var(--inv-primary); padding: 0 .12em;
    background: linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--inv-lilac) 55%, transparent) 58%, color-mix(in srgb, var(--inv-lilac) 55%, transparent) 92%, transparent 92%);
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.bs-tone--night .bs-heading__eyebrow { color: var(--inv-lilac); }
.bs-tone--night .bs-heading__moon { fill: var(--inv-shine); }
.bs-tone--night .bs-heading__title { color: #fff; }
.bs-tone--night .bs-heading__title em { color: var(--inv-shine); background: none; text-shadow: 0 0 22px color-mix(in srgb, var(--inv-shine) 45%, transparent); }
.bs-tone--moon .bs-heading__eyebrow { color: var(--inv-deep); }
.bs-tone--moon .bs-heading__moon { fill: var(--inv-deep); }
.bs-tone--moon .bs-heading__title { color: var(--inv-deep); }
.bs-tone--moon .bs-heading__title em { color: var(--inv-deep); background: linear-gradient(180deg, transparent 58%, rgb(255 255 255 / .6) 58%, rgb(255 255 255 / .6) 92%, transparent 92%); }

/* icons */
.bs-icon { width: 1.15rem; height: 1.15rem; flex: none; }
.bs-star { display: block; }

/* knitted band (a strip of lilac knit stitches) */
.bs-knit {
    height: 16px;
    background: var(--bs-knit) 0 0 / 12px 14px repeat-x, linear-gradient(180deg, color-mix(in srgb, var(--inv-lilac) 85%, #fff), var(--inv-lilac));
}

/* the moon (sections/_moon): glow, knitted crescent, cloud pillow, the round photo window */
.bs-moon { --moon-w: 18rem; position: relative; isolation: isolate; width: var(--moon-w); aspect-ratio: 1; margin: 0 auto; flex: none; }
.bs-moon::before {
    content: ''; position: absolute; z-index: -1; inset: -6% -10% 4%; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side at 50% 44%, color-mix(in srgb, var(--inv-shine) 46%, transparent), color-mix(in srgb, var(--inv-shine) 14%, transparent) 62%, transparent);
}
.bs-moon__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bs-moon__stop-light { stop-color: var(--inv-shine); }
.bs-moon__stop-mid { stop-color: var(--inv-accent); }
.bs-moon__stop-dark { stop-color: color-mix(in srgb, var(--inv-accent) 72%, var(--inv-deep)); }
.bs-moon pattern ellipse { fill: #fff; fill-opacity: .2; stroke: color-mix(in srgb, var(--inv-deep) 60%, transparent); stroke-opacity: .28; stroke-width: .7; }
.bs-moon__rim { fill: none; stroke: #fff; stroke-opacity: .5; stroke-width: 2.4; stroke-linecap: round; }
.bs-moon__seam { fill: none; stroke: color-mix(in srgb, var(--inv-deep) 55%, transparent); stroke-width: 1.6; stroke-dasharray: 3 6; stroke-linecap: round; }
.bs-moon__cloud-mid { stop-color: color-mix(in srgb, var(--inv-lilac) 22%, #fff); }
.bs-moon__cloud-edge { stop-color: color-mix(in srgb, var(--inv-lilac) 70%, #fff); }
.bs-moon__pillow { filter: drop-shadow(0 6px 6px color-mix(in srgb, var(--inv-deep) 30%, transparent)); }
.bs-moon__pillow-line { fill: none; stroke: color-mix(in srgb, var(--inv-lilac) 80%, var(--inv-deep)); stroke-opacity: .55; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 5; }
.bs-moon__star { fill: var(--inv-shine); }
.bs-moon__star--small { opacity: .8; }
.bs-moon__dot { fill: var(--inv-shine); opacity: .7; }
.bs-moon__window {
    position: absolute; left: 20.667%; top: 10%; width: 58.667%; aspect-ratio: 1; overflow: hidden; border-radius: 50%;
    background: var(--inv-deep);
    box-shadow:
        0 0 0 4px var(--inv-background),
        0 0 0 5.5px color-mix(in srgb, var(--inv-accent) 85%, transparent),
        0 0 46px 6px color-mix(in srgb, var(--inv-shine) 42%, transparent);
}
.bs-moon__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.bs-moon__empty {
    position: absolute; inset: 0; display: grid; place-items: center;
    background:
        radial-gradient(70% 50% at 30% 25%, color-mix(in srgb, var(--inv-lilac) 45%, transparent), transparent 70%),
        linear-gradient(170deg, var(--inv-primary), var(--inv-deep));
}
.bs-moon__empty::before { content: ''; position: absolute; inset: 0; background: var(--bs-stars) center / 200px 200px; opacity: .6; }
.bs-moon__sleeper { position: absolute; left: 14%; right: 14%; bottom: 14%; width: 72%; color: var(--inv-lilac); }
.bs-moon__initial {
    position: relative; margin-bottom: 38%; font-family: var(--bs-serif); line-height: 1;
    font-size: calc(var(--moon-w) * .2); color: var(--inv-shine); text-shadow: 0 0 24px color-mix(in srgb, var(--inv-shine) 60%, transparent);
}
.bs-moon__initial--many { font-size: calc(var(--moon-w) * .12); white-space: nowrap; }
.bs-moon--ornament::before { inset: 0 -6% 10%; }

/* the sleeping baby silhouette */
.bs-sleeper { display: block; overflow: visible; }
.bs-sleeper__cloud { opacity: .45; }
.bs-sleeper__line { fill: none; stroke: var(--inv-deep); stroke-opacity: .55; stroke-width: 1.8; stroke-linecap: round; }
.bs-sleeper__z { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }

/* night lamp */
.bs-lamp { display: block; overflow: visible; }
.bs-lamp__glow-in { stop-color: var(--inv-shine); stop-opacity: .5; }
.bs-lamp__glow-out { stop-color: var(--inv-shine); stop-opacity: 0; }
.bs-lamp__shade-edge { stop-color: color-mix(in srgb, var(--inv-accent) 55%, var(--inv-background)); }
.bs-lamp__shade-mid { stop-color: #fff9ea; }
.bs-lamp__pleat { fill: none; stroke: color-mix(in srgb, var(--inv-accent) 70%, transparent); stroke-width: 1.4; stroke-linecap: round; }
.bs-lamp__knob { fill: var(--inv-accent); }
.bs-lamp__bulb { fill: var(--inv-shine); filter: blur(1.5px); }
.bs-lamp__base { fill: color-mix(in srgb, var(--inv-accent) 62%, var(--inv-deep)); }

/* prayer mat */
.bs-mat { display: block; overflow: visible; }
.bs-mat__fringe { fill: none; stroke: color-mix(in srgb, var(--inv-accent) 80%, var(--inv-background)); stroke-width: 1.6; stroke-linecap: round; }
.bs-mat__rug { fill: color-mix(in srgb, var(--inv-lilac) 55%, var(--inv-primary)); }
.bs-mat__band { fill: none; stroke: var(--inv-accent); stroke-width: 2; }
.bs-mat__field { fill: var(--inv-primary); }
.bs-mat__arch { fill: none; stroke: var(--inv-shine); stroke-width: 1.5; stroke-dasharray: 3 4; }
.bs-mat__line { fill: none; stroke: var(--inv-shine); stroke-width: 1.2; }
.bs-mat__lamp { fill: var(--inv-accent); }
.bs-mat__dots { fill: none; stroke: var(--inv-shine); stroke-width: 3; stroke-linecap: round; }

/* crib mobile */
.bs-mobile { display: block; overflow: visible; }
.bs-mobile__thread { fill: none; stroke: color-mix(in srgb, var(--inv-background) 55%, transparent); stroke-width: 1.3; }
.bs-mobile__ring { fill: none; stroke: var(--inv-accent); stroke-width: 2.4; }
.bs-mobile__arm { fill: none; stroke: var(--inv-accent); stroke-width: 5; stroke-linecap: round; }
.bs-mobile__bead { fill: var(--inv-shine); }
.bs-mobile__felt { stroke: color-mix(in srgb, var(--inv-deep) 45%, transparent); stroke-width: 1; stroke-dasharray: 2 2.5; }
.bs-mobile__felt--moon { fill: var(--inv-lilac); }
.bs-mobile__felt--star { fill: var(--inv-accent); }
.bs-mobile__felt--cloud { fill: color-mix(in srgb, #fff 88%, var(--inv-lilac)); }
.bs-mobile__swing { transform-box: view-box; transform-origin: 22px 54px; }
.bs-mobile__swing--b { transform-origin: 84px 36px; }
.bs-mobile__swing--c { transform-origin: 216px 36px; }
.bs-mobile__swing--d { transform-origin: 278px 54px; }

/* ---------- 4. cover ---------- */
.bs-cover {
    position: fixed; inset: 0; z-index: 30; overflow-x: hidden; overflow-y: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: safe center;
    min-height: 100svh; padding: 1.9rem 1.4rem 2.4rem;
    isolation: isolate; color: var(--inv-background);
    background:
        radial-gradient(80% 40% at 85% 0%, color-mix(in srgb, var(--inv-lilac) 30%, transparent), transparent 72%),
        radial-gradient(90% 55% at 50% 34%, color-mix(in srgb, var(--inv-primary) 95%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-deep), color-mix(in srgb, var(--inv-deep) 80%, var(--inv-primary)));
    transition: opacity .9s ease;
}
.bs-cover__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--bs-stars) center top / 260px 260px repeat; opacity: .7; }
.bs-cover__inner { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; text-align: center; transition: transform .9s cubic-bezier(.5, 0, .3, 1); }

.bs-cover__title {
    display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 .4rem;
    font-size: .72rem; font-weight: 700; line-height: 1.2; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-lilac);
}
.bs-cover__title::before, .bs-cover__title::after { content: ''; width: .8rem; height: .8rem; background: var(--inv-shine); -webkit-mask: var(--bs-star) center / contain no-repeat; mask: var(--bs-star) center / contain no-repeat; }

.bs-moon--cover { --moon-w: min(86vw, 21rem, 44svh); }

.bs-cover__text { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: -.2rem; }
.bs-cover__name {
    margin: 0; font-family: var(--bs-serif); font-size: 3.1rem; font-weight: 400; line-height: 1.05; letter-spacing: -.01em;
    color: var(--inv-shine); text-shadow: 0 0 26px color-mix(in srgb, var(--inv-shine) 40%, transparent); overflow-wrap: anywhere;
}
.bs-cover--many .bs-cover__name { font-size: 2.3rem; }
.bs-cover__date { margin: .4rem 0 0; font-size: .92rem; font-weight: 700; letter-spacing: .04em; color: var(--inv-background); }
.bs-cover__quote { max-width: 30ch; margin: .3rem 0 0; font-size: .9rem; line-height: 1.45; color: var(--bs-ivory-muted); }
.bs-cover__guest {
    width: min(100%, 19rem); margin: .9rem 0 0; padding: .5rem 1rem .6rem; border-radius: 18px;
    background: color-mix(in srgb, var(--inv-background) 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-lilac) 50%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.bs-cover__guest p { margin: 0; font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-lilac); }
.bs-cover__guest-name { display: block; font-family: var(--bs-serif); font-size: 1.15rem; line-height: 1.3; color: #fff; overflow-wrap: anywhere; }
.bs-cover__open {
    margin-top: .95rem; min-height: 3rem; padding: .7rem 2rem; font-weight: 700; letter-spacing: .02em;
    background: linear-gradient(180deg, var(--inv-shine), var(--inv-accent)); color: var(--inv-deep);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-deep) 30%, transparent), 0 0 0 4.5px color-mix(in srgb, var(--inv-shine) 60%, transparent), 0 0 28px color-mix(in srgb, var(--inv-shine) 45%, transparent);
}
/* a knitted blanket edge along the bottom, scalloped on top */
.bs-cover__blanket {
    position: absolute; left: 0; right: 0; bottom: 0; height: 14px; opacity: .9;
    -webkit-mask: radial-gradient(circle at 9px 0, transparent 5px, #000 5.5px) 0 0 / 18px 100% repeat-x;
    mask: radial-gradient(circle at 9px 0, transparent 5px, #000 5.5px) 0 0 / 18px 100% repeat-x;
}

/* opening: the cover fades and the moon floats up (never blocks: .9s) */
.bs-cover--leave { transition: opacity .9s ease .1s; }
.bs-cover--gone { opacity: 0; }
.bs-cover--gone .bs-cover__inner { transform: translateY(-2.5rem); }

/* ---------- 5. sections ---------- */

/* opening: the night lamp's light pools behind the basmalah over the faint photo */
.bs-opening { padding: 3rem 1.6rem 4.4rem; }
.bs-opening__lamp { width: min(15rem, 72vw); margin: 0 auto -1.2rem; }
.bs-opening__body { position: relative; max-width: 22rem; margin: 0 auto; }
.bs-opening__basmalah { margin: 0 0 .8rem; font-size: 1.9rem; text-shadow: 0 0 20px color-mix(in srgb, var(--inv-shine) 35%, transparent); }
.bs-opening__greeting { margin: 0 auto .9rem; max-width: 20ch; font-family: var(--bs-serif); font-size: 1.36rem; line-height: 1.35; color: #fff; }
.bs-opening__message { margin: 0 auto; max-width: 30ch; color: var(--bs-ivory-muted); }
.bs-opening__stars { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bs-opening__star { position: absolute; width: .9rem; color: var(--inv-shine); opacity: .7; }
.bs-opening__star:nth-child(1) { left: 9%; top: 18%; }
.bs-opening__star:nth-child(2) { right: 10%; top: 30%; width: 1.4rem; opacity: .9; }
.bs-opening__star:nth-child(3) { left: 16%; bottom: 14%; width: .7rem; }

/* baby: one lullaby book page per baby ("kartu lelap") */
.bs-babies { padding-left: 1.2rem; padding-right: 1.2rem; }
.bs-page {
    position: relative; margin: 0 .35rem 0 .6rem; padding: 1.5rem 1.25rem 1.8rem; text-align: center;
    border-radius: 6px 24px 24px 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--inv-lilac) 10%, var(--bs-paper)), var(--bs-paper) 8%);
    box-shadow:
        inset 0 0 0 7px var(--bs-paper),
        inset 0 0 0 8px color-mix(in srgb, var(--inv-primary) 22%, transparent),
        -5px 4px 0 0 color-mix(in srgb, var(--inv-lilac) 45%, var(--inv-background)),
        -9px 8px 0 0 color-mix(in srgb, var(--inv-lilac) 25%, var(--inv-background)),
        0 26px 40px -26px color-mix(in srgb, var(--inv-deep) 70%, transparent);
    transform: rotate(-.6deg);
}
.bs-page--flip { transform: rotate(.6deg); }
.bs-page + .bs-page { margin-top: 2.6rem; }
/* the folded corner at the bottom right */
.bs-page::after {
    content: ''; position: absolute; right: 0; bottom: 0; width: 2.2rem; height: 2.2rem; border-radius: 0 0 24px 0;
    background: linear-gradient(315deg, var(--inv-background) 48%, color-mix(in srgb, var(--inv-lilac) 50%, #fff) 50%, color-mix(in srgb, var(--inv-lilac) 25%, #fff));
    box-shadow: -3px -3px 6px -3px color-mix(in srgb, var(--inv-deep) 30%, transparent);
}
.bs-page__ribbon {
    position: absolute; top: -6px; right: 1.7rem; width: 1.15rem; height: 4.2rem;
    background: linear-gradient(90deg, color-mix(in srgb, var(--inv-lilac) 80%, var(--inv-deep)), var(--inv-lilac) 45%, color-mix(in srgb, var(--inv-lilac) 85%, var(--inv-deep)));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
}
.bs-page__head {
    display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: .5rem; margin: 0 0 .6rem; padding-right: 2.6rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-primary);
}
.bs-page__head > span:first-child::before {
    content: ''; display: inline-block; width: .8rem; height: .8rem; margin-right: .4rem; vertical-align: -.1rem; background: var(--inv-accent);
    -webkit-mask: var(--bs-crescent) center / contain no-repeat; mask: var(--bs-crescent) center / contain no-repeat;
}
.bs-page__order { padding: .18rem .6rem; border-radius: 999px; letter-spacing: .08em; text-transform: none; font-size: .74rem; color: var(--bs-lilac-ink); background: var(--bs-lilac-soft); }
.bs-moon--baby { --moon-w: min(15.5rem, 66vw); }
/* the moon on the page sits on a night disc, so the gold reads on the ivory paper */
.bs-moon--baby::after {
    content: ''; position: absolute; z-index: -2; inset: 6.67%; border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, var(--inv-primary), var(--inv-deep) 72%);
}
.bs-moon--baby .bs-moon__window { box-shadow: 0 0 0 3px var(--bs-paper), 0 0 0 4.5px var(--inv-accent), 0 0 30px 4px color-mix(in srgb, var(--inv-shine) 40%, transparent); }
.bs-page--many .bs-moon--baby { --moon-w: min(13rem, 56vw); }
.bs-page__who { margin-top: .3rem; }
.bs-page__nickname { margin: 0; font-family: var(--bs-serif); font-size: 3rem; line-height: 1; letter-spacing: -.015em; color: var(--inv-primary); overflow-wrap: anywhere; }
.bs-page__name { margin: .45rem 0 0; font-family: var(--bs-serif); font-size: 1.2rem; font-weight: 400; line-height: 1.25; color: var(--bs-ink); overflow-wrap: anywhere; text-wrap: balance; }
.bs-page__chip { display: inline-block; margin: .55rem 0 0; padding: .2rem .8rem; border-radius: 999px; font-size: .76rem; font-weight: 700; color: var(--inv-deep); background: color-mix(in srgb, var(--inv-accent) 55%, #fff); }

/* weight, length, time: three moon-phase medallions (a night disc with a gold crescent of growing width) */
.bs-phases { display: flex; justify-content: center; gap: .55rem; margin: 1.3rem 0 0; }
.bs-phase { display: flex; flex-direction: column-reverse; align-items: center; gap: .35rem; flex: 0 1 6rem; min-width: 0; }
.bs-phase dt { font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bs-muted); }
.bs-phase dd {
    --lit: 5px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 5.6rem; aspect-ratio: 1; margin: 0;
    border-radius: 50%; color: #fff; text-align: center;
    background: radial-gradient(circle at 60% 40%, var(--inv-primary), var(--inv-deep) 75%);
    box-shadow: inset var(--lit) calc(var(--lit) * -.35) 0 0 var(--inv-accent), 0 0 0 3px var(--bs-paper), 0 0 0 4px color-mix(in srgb, var(--inv-accent) 60%, transparent), 0 12px 18px -10px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.bs-phase--2 dd { --lit: 9px; }
.bs-phase--3 dd { --lit: 13px; }
.bs-phase__num { padding-left: var(--lit); font-family: var(--bs-serif); font-size: 1.4rem; line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; color: #fff; }
.bs-page--many .bs-phase__num { font-size: 1.25rem; }
.bs-phase__unit { padding-left: var(--lit); margin-top: .1rem; font-size: .7rem; font-weight: 700; color: var(--inv-shine); }

/* date and place as book lines with dotted leaders */
.bs-page__lines { margin: 1.3rem 0 0; padding: 0; list-style: none; text-align: left; }
.bs-page__lines li { display: flex; align-items: baseline; gap: .45rem; padding: .3rem 0; }
.bs-page__key { flex: none; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-muted); }
.bs-page__dots { flex: 1 1 1rem; min-width: .8rem; border-bottom: 2px dotted color-mix(in srgb, var(--inv-primary) 30%, transparent); transform: translateY(-.25rem); }
.bs-page__value { max-width: 64%; font-family: var(--bs-serif); font-size: .98rem; line-height: 1.3; text-align: right; color: var(--bs-ink); }

/* the name meaning: the page's verse between two small stars */
.bs-verse { margin: 1.3rem 0 0; padding: 1rem 1rem 1.1rem; border-radius: 20px; background: color-mix(in srgb, var(--inv-lilac) 18%, var(--bs-paper)); }
.bs-verse figcaption { display: flex; align-items: center; justify-content: center; gap: .45rem; font-size: .66rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-primary); }
.bs-verse__star { width: .75rem; color: var(--inv-accent); }
.bs-verse blockquote { margin: .5rem 0 0; font-family: var(--bs-serif); font-size: 1.02rem; line-height: 1.6; color: var(--inv-text); }
.bs-page__number { margin: 1rem 0 0; font-family: var(--bs-serif); font-size: .9rem; color: var(--bs-muted); }
.bs-page__number::before, .bs-page__number::after { content: '—'; margin: 0 .5rem; color: color-mix(in srgb, var(--inv-primary) 35%, transparent); }

/* parents: a night block with a small gold crescent */
.bs-parents {
    position: relative; isolation: isolate; overflow: hidden; margin: 2.8rem 0 0; padding: 1.5rem 1.4rem 1.4rem; border-radius: 26px; text-align: left;
    color: var(--inv-background); background: radial-gradient(70% 70% at 100% 0%, color-mix(in srgb, var(--inv-lilac) 28%, transparent), transparent 70%), linear-gradient(140deg, var(--inv-primary), var(--inv-deep));
    box-shadow: var(--bs-drop);
}
.bs-parents::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--bs-stars) center / 200px 200px; opacity: .45; }
.bs-parents__moon { position: absolute; right: 1.1rem; top: 1rem; width: 2.6rem; height: 2.6rem; fill: var(--inv-shine); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--inv-shine) 60%, transparent)); }
.bs-parents__label { margin: 0 0 .35rem; font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-lilac); }
.bs-parents__names { display: flex; flex-direction: column; margin: 0; padding-right: 2.6rem; font-family: var(--bs-serif); font-size: 1.36rem; line-height: 1.3; color: #fff; }
.bs-parents__names .bs-amp { font-size: 1.05rem; color: var(--inv-shine); }
.bs-parents__address {
    display: flex; align-items: flex-start; gap: .5rem; margin: .95rem 0 0; padding-top: .85rem; font-size: .86rem; color: var(--bs-ivory-muted);
    border-top: 1px dashed color-mix(in srgb, var(--inv-background) 35%, transparent);
}
.bs-parents__address .bs-icon { margin-top: .15rem; color: var(--inv-shine); }

/* message: no card; the sleeping baby on a cloud in the corner, words in the storybook serif */
.bs-message { text-align: left; padding-bottom: 7rem; }
.bs-message__sleeper { position: absolute; z-index: -1; right: -.6rem; bottom: .6rem; width: 11.5rem; color: var(--inv-lilac); opacity: .5; }
.bs-message__quote { position: relative; margin: 0; }
.bs-message__mark { display: block; width: 2.5rem; height: 1.9rem; margin: 0 0 .8rem; fill: var(--inv-accent); }
.bs-message__quote p { margin: 0; font-family: var(--bs-serif); font-size: 1.3rem; line-height: 1.55; color: #fff; }
.bs-message__quote cite {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.3rem; padding: .35rem .95rem .35rem .65rem; border-radius: 999px;
    font-style: normal; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--inv-deep); background: var(--inv-lilac);
}
.bs-message__quote cite svg { width: .9rem; height: .9rem; fill: var(--inv-deep); }

/* events: a white card, the arched photo window, a full-moon date disc rising over the photo's edge */
.bs-event {
    margin: 0 12px 0 0; padding: 0 0 1.3rem; border-radius: 28px; background: #fff; text-align: left;
    box-shadow: 0 0 0 1.5px var(--bs-ring), 12px 12px 0 0 var(--bs-lilac-soft);
}
.bs-event + .bs-event { margin-top: 2.6rem; }
.bs-event--flip { margin: 0 0 0 12px; box-shadow: 0 0 0 1.5px var(--bs-ring), -12px 12px 0 0 color-mix(in srgb, var(--inv-accent) 35%, var(--inv-background)); }
.bs-event--flip + .bs-event { margin-top: 2.6rem; }
.bs-event__media { padding: .55rem .55rem 0; }
.bs-event__photo { display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: center 55%; border-radius: 160px 160px 20px 20px / 120px 120px 20px 20px; }
.bs-event__top { display: flex; align-items: flex-end; gap: .9rem; padding: 1.2rem 1.15rem 0; }
.bs-event__media + .bs-event__top { margin-top: -3rem; }
.bs-event__media + .bs-event__top .bs-event__head { padding-top: 3.3rem; }
.bs-event--flip .bs-event__top { flex-direction: row-reverse; text-align: right; }
.bs-event__date {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 5.2rem; aspect-ratio: 1; margin: 0;
    border-radius: 50%; color: var(--inv-deep);
    background:
        radial-gradient(circle at 30% 70%, color-mix(in srgb, var(--inv-accent) 70%, transparent) 0 7%, transparent 8%),
        radial-gradient(circle at 74% 32%, color-mix(in srgb, var(--inv-accent) 60%, transparent) 0 5%, transparent 6%),
        radial-gradient(circle at 38% 30%, #fff8e0, var(--inv-shine) 45%, var(--inv-accent));
    box-shadow: 0 0 0 4px #fff, 0 0 26px 2px color-mix(in srgb, var(--inv-shine) 55%, transparent);
}
.bs-event__weekday { font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.bs-event__day { font-family: var(--bs-serif); font-size: 2.1rem; line-height: 1; }
.bs-event__month { font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bs-event--flip .bs-event__date {
    background:
        radial-gradient(circle at 30% 70%, color-mix(in srgb, var(--inv-lilac) 80%, #fff) 0 7%, transparent 8%),
        radial-gradient(circle at 38% 30%, #fff, color-mix(in srgb, var(--inv-lilac) 55%, #fff) 50%, var(--inv-lilac));
    box-shadow: 0 0 0 4px #fff, 0 0 24px 2px color-mix(in srgb, var(--inv-lilac) 60%, transparent);
}
.bs-event__head { min-width: 0; padding-bottom: .3rem; }
.bs-event__name { margin: 0; font-family: var(--bs-serif); font-size: 1.42rem; font-weight: 400; line-height: 1.15; color: var(--inv-primary); }
.bs-event__full { margin: .2rem 0 0; font-size: .8rem; font-weight: 600; color: var(--bs-muted); }
.bs-event__rows { display: grid; gap: .75rem; margin: 1.1rem 1.15rem 0; padding: 1rem 0 0; list-style: none; font-size: .9rem; border-top: 2px dotted var(--bs-ring); }
.bs-event__rows li { display: flex; align-items: flex-start; gap: .7rem; }
.bs-event__rows .bs-icon { width: 2.1rem; height: 2.1rem; padding: .45rem; border-radius: 50%; color: var(--inv-primary); background: var(--bs-lilac-soft); }
.bs-event__rows li > span { padding-top: .3rem; }
.bs-event__venue { display: block; font-weight: 700; }
.bs-event__address { display: block; font-size: .85rem; color: var(--bs-muted); }
.bs-event .inv-maps { margin: 1.15rem 1.15rem 0; text-align: center; }
.bs-event .inv-maps .inv-button { width: 100%; font-weight: 700; background: var(--inv-primary); color: #fff; }
.bs-event .inv-maps__frame { height: 190px; border-radius: 18px; }

/* countdown: four moons in four phases (a lilac shadow slides off an ivory disc) */
.bs-countdown .inv-countdown { gap: clamp(.5rem, 2.6vw, .85rem); }
.bs-countdown .inv-countdown__item {
    --shade: 0px;
    display: grid; place-content: center; width: clamp(4rem, 18.5vw, 4.7rem); min-width: 0; aspect-ratio: 1; padding: 0;
    border-radius: 50%; color: var(--inv-text); background: radial-gradient(circle at 40% 35%, #fff, var(--bs-paper) 55%, color-mix(in srgb, var(--inv-shine) 45%, var(--bs-paper)));
    box-shadow: inset calc(var(--shade) * -1) calc(var(--shade) * -.3) 0 0 color-mix(in srgb, var(--inv-lilac) 55%, var(--bs-paper)), 0 0 0 3px color-mix(in srgb, var(--inv-deep) 70%, transparent), 0 0 0 4.5px color-mix(in srgb, var(--inv-shine) 60%, transparent), 0 0 26px color-mix(in srgb, var(--inv-shine) 30%, transparent);
}
.bs-countdown .inv-countdown__item:nth-child(1) { --shade: 16px; }
.bs-countdown .inv-countdown__item:nth-child(2) { --shade: 11px; }
.bs-countdown .inv-countdown__item:nth-child(3) { --shade: 6px; }
.bs-countdown .inv-countdown__value { font-variant-numeric: lining-nums tabular-nums; font-family: var(--bs-serif); font-size: 1.65rem; line-height: 1.05; color: var(--inv-primary); }
.bs-countdown .inv-countdown__label { margin-top: .05rem; font-size: .55rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bs-muted); }
.bs-countdown .inv-countdown__done { font-family: var(--bs-serif); font-size: 1.3rem; color: var(--inv-shine); }
.bs-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 2rem; }
.bs-countdown .inv-countdown__actions .inv-button {
    width: min(100%, 17rem); min-height: 2.75rem; padding: .6rem 1rem; font-size: .84rem; font-weight: 700;
    color: var(--inv-background); background: color-mix(in srgb, var(--inv-background) 10%, transparent);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-background) 55%, transparent);
}
.bs-countdown .inv-countdown__actions .inv-button:first-child { color: var(--inv-deep); background: linear-gradient(180deg, var(--inv-shine), var(--inv-accent)); box-shadow: none; }
.bs-countdown .inv-cal {
    --inv-cal-bg: var(--bs-paper); --inv-cal-mark: var(--inv-primary);
    max-width: 19rem; margin: 2.8rem auto 0; border-radius: 26px; box-shadow: 10px 10px 0 0 var(--inv-lilac), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.bs-countdown .inv-cal__month { font-family: var(--bs-serif); font-size: 1.4rem; color: var(--inv-primary); }

/* prayer: a calm moonlit panel (arched top) on the ivory page, a prayer mat in the corner */
.bs-prayer { padding-bottom: 5.4rem; }
.bs-prayer__panel {
    position: relative; z-index: 1; isolation: isolate; overflow: hidden; max-width: 22rem; margin: 0 auto; padding: 3.4rem 1.4rem 2.6rem;
    border-radius: 11rem 11rem 28px 28px / 9rem 9rem 28px 28px; color: var(--inv-background);
    background:
        radial-gradient(60% 40% at 78% 8%, color-mix(in srgb, var(--inv-shine) 30%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-primary), var(--inv-deep) 70%);
    box-shadow: 0 0 0 5px var(--inv-background), 0 0 0 6.5px color-mix(in srgb, var(--inv-accent) 70%, transparent), var(--bs-drop);
}
.bs-prayer__panel::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--bs-stars) center / 220px 220px; opacity: .6; }
.bs-prayer__moon {
    position: absolute; z-index: -1; right: 18%; top: 1.4rem; width: 2.6rem; aspect-ratio: 1; border-radius: 50%;
    box-shadow: inset -9px 4px 0 0 var(--inv-shine), 0 0 30px 4px color-mix(in srgb, var(--inv-shine) 30%, transparent);
    transform: rotate(-20deg);
}
.bs-prayer__eyebrow {
    display: inline-block; margin: 0 0 .9rem; padding: .28rem .85rem; border-radius: 999px; font-size: .68rem; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase; color: var(--inv-deep); background: var(--inv-lilac);
}
.bs-prayer__arabic { margin: 0 0 1rem; font-size: 1.6rem; color: var(--inv-shine); text-shadow: 0 0 18px color-mix(in srgb, var(--inv-shine) 30%, transparent); }
.bs-prayer__text { margin: 0; }
.bs-prayer__text p { margin: 0; font-family: var(--bs-serif); font-size: 1.02rem; line-height: 1.6; color: #fff; }
.bs-prayer__text cite {
    display: inline-block; margin-top: 1rem; padding: .28rem .8rem; border-radius: 999px; font-style: normal; font-size: .72rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--inv-deep); background: linear-gradient(180deg, var(--inv-shine), var(--inv-accent));
}
.bs-prayer__mat { position: absolute; z-index: 2; right: max(1rem, calc(50% - 11.6rem)); bottom: .2rem; width: 4.4rem; transform: rotate(-80deg); filter: drop-shadow(0 8px 8px color-mix(in srgb, var(--inv-deep) 25%, transparent)); }

/* rundown: the crib mobile; its centre thread runs down the list, steps hang on it in turn right / left */
.bs-rundown { padding-bottom: 4.6rem; }
.bs-rundown .bs-heading { margin-bottom: 1.2rem; }
.bs-rundown__mobile { width: min(19rem, 86%); margin: 0 auto; }
.bs-rundown__list { position: relative; margin: 0; padding: .4rem 0 0; list-style: none; }
.bs-rundown__list::before {
    content: ''; position: absolute; left: 50%; top: 0; bottom: 1.4rem; width: 1.3px; margin-left: -.65px; transform-origin: top;
    background: color-mix(in srgb, var(--inv-background) 55%, transparent);
}
.bs-rundown__item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 2.6rem minmax(0, 1fr); align-items: start; }
.bs-rundown__item + .bs-rundown__item { margin-top: -1.1rem; }
.bs-rundown__felt {
    grid-column: 2; grid-row: 1; justify-self: center; width: 1.7rem; height: 1.7rem; margin-top: .85rem;
    -webkit-mask: var(--bs-star5) center / contain no-repeat; mask: var(--bs-star5) center / contain no-repeat;
    background: linear-gradient(180deg, var(--inv-shine), var(--inv-accent));
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--inv-shine) 50%, transparent));
}
.bs-rundown__felt--moon { -webkit-mask-image: var(--bs-crescent); mask-image: var(--bs-crescent); background: var(--inv-lilac); }
.bs-rundown__felt--cloud { height: 1.3rem; margin-top: 1.05rem; -webkit-mask-image: var(--bs-cloud); mask-image: var(--bs-cloud); background: color-mix(in srgb, #fff 90%, var(--inv-lilac)); }
.bs-rundown__card {
    grid-column: 3; grid-row: 1; position: relative; padding: .65rem .85rem .8rem; border-radius: 18px; text-align: left;
    background: color-mix(in srgb, var(--inv-background) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-background) 18%, transparent);
}
/* a short thread from the ornament to the card */
.bs-rundown__card::before { content: ''; position: absolute; top: 1.7rem; left: -.75rem; width: .75rem; border-top: 1.3px dashed color-mix(in srgb, var(--inv-background) 45%, transparent); }
.bs-rundown__item--left .bs-rundown__card { grid-column: 1; text-align: right; }
.bs-rundown__item--left .bs-rundown__card::before { left: auto; right: -.75rem; }
.bs-rundown__time {
    display: inline-block; margin-bottom: .3rem; padding: .16rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 700;
    font-variant-numeric: tabular-nums; color: var(--inv-deep); background: linear-gradient(180deg, var(--inv-shine), var(--inv-accent));
}
.bs-rundown__card h3 { margin: 0; font-size: .95rem; font-weight: 700; line-height: 1.35; color: #fff; }
.bs-rundown__card p { margin: .15rem 0 0; font-size: .82rem; line-height: 1.45; color: var(--bs-ivory-muted); }

/* story: nights along a dotted line, each marked by a growing moon */
.bs-story__list { position: relative; display: grid; gap: 2rem; margin: 0; padding: 0 0 0 3.1rem; list-style: none; text-align: left; }
.bs-story__list::before { content: ''; position: absolute; left: 1.05rem; top: 1.2rem; bottom: 1.2rem; border-left: 2px dotted color-mix(in srgb, var(--inv-primary) 30%, transparent); }
.bs-story__item { position: relative; }
.bs-story__moon {
    position: absolute; left: -3.1rem; top: 0; width: 2.2rem; height: 2.2rem; overflow: hidden; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--inv-shine), var(--inv-accent));
    box-shadow: 0 0 0 4px var(--inv-background), 0 0 0 5.5px color-mix(in srgb, var(--inv-accent) 55%, transparent), 0 0 16px color-mix(in srgb, var(--inv-shine) 60%, transparent);
}
/* the dark side slides away as the story goes on: thin crescent → full moon */
.bs-story__moon::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--inv-primary);
    transform: translateX(calc(28% + var(--phase, 1) * 90%));
}
.bs-story__when {
    display: inline-block; padding: .2rem .7rem; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--bs-lilac-ink); background: var(--bs-lilac-soft);
}
.bs-story__body h3 { margin: .5rem 0 0; font-family: var(--bs-serif); font-size: 1.3rem; font-weight: 400; line-height: 1.25; color: var(--bs-ink); }
.bs-story__body p { margin: .4rem 0 0; font-size: .9rem; line-height: 1.6; color: var(--bs-muted); }
.bs-story__media { margin-top: .9rem; padding: 5px; border-radius: 150px 150px 22px 22px / 100px 100px 22px 22px; background: #fff; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 60%, transparent), 10px 10px 0 0 var(--bs-lilac-soft); }
.bs-story__photo { display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 145px 145px 18px 18px / 96px 96px 18px 18px; }

/* gallery: the first photo across both columns under an arched top; the others rounded with a gold ring */
.bs-gallery .inv-gallery { gap: .6rem; }
.bs-gallery .inv-gallery__item { border-radius: 20px; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--inv-shine) 55%, transparent), 0 16px 28px -18px rgb(0 0 0 / .7); }
.bs-gallery .inv-gallery__item:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3.4; border-radius: 200px 200px 22px 22px / 150px 150px 22px 22px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--inv-deep) 70%, transparent), 0 0 0 5.5px var(--inv-accent), 0 0 36px color-mix(in srgb, var(--inv-shine) 25%, transparent); }

/* live streaming: a night card with a moon glow */
.bs-stream__card {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem 1rem; max-width: 24rem; margin: 0 auto; padding: 1.35rem 1.35rem 1.4rem;
    border-radius: 30px; color: var(--inv-background); text-align: left;
    background: radial-gradient(60% 80% at 0% 0%, color-mix(in srgb, var(--inv-shine) 24%, transparent), transparent 70%), linear-gradient(140deg, var(--inv-primary), var(--inv-deep));
    box-shadow: 10px 10px 0 0 var(--bs-lilac-soft), var(--bs-drop);
}
.bs-stream__icon { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; color: var(--inv-deep); background: radial-gradient(circle at 35% 30%, #fff8e0, var(--inv-shine) 45%, var(--inv-accent)); box-shadow: 0 0 22px color-mix(in srgb, var(--inv-shine) 55%, transparent); }
.bs-stream__icon .bs-icon { width: 1.7rem; height: 1.7rem; }
.bs-stream__title { margin: 0 0 .15rem; font-family: var(--bs-serif); font-size: 1.5rem; font-weight: 400; line-height: 1.1; color: #fff; }
.bs-stream__text p { margin: 0; font-size: .86rem; color: var(--bs-ivory-muted); }
.bs-stream__text .bs-stream__note { margin-top: .3rem; font-weight: 700; color: var(--inv-shine); }
.bs-stream__button { grid-column: 1 / -1; min-height: 2.75rem; color: var(--inv-deep) !important; background: linear-gradient(180deg, var(--inv-shine), var(--inv-accent)) !important; font-weight: 700; }

/* RSVP card: ivory with a knitted lilac band along the top */
.bs-rsvp__card {
    position: relative; overflow: hidden; margin-right: 10px; padding: 2.3rem 1.15rem 1.4rem; border-radius: 26px; color: var(--inv-text); background: var(--bs-paper);
    box-shadow: 10px 10px 0 0 color-mix(in srgb, var(--inv-lilac) 70%, transparent), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.bs-rsvp__card::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 15px;
    background: var(--bs-knit) 0 0 / 12px 14px repeat-x, linear-gradient(180deg, color-mix(in srgb, var(--inv-lilac) 85%, #fff), var(--inv-lilac));
}
.bs-rsvp__intro { margin: 0 auto 1.1rem; max-width: 30ch; font-size: .9rem; color: var(--bs-muted); }
.bs-rsvp__sent { margin-bottom: 1rem; }
.bs-rsvp__check { display: block; width: 4.25rem; height: 4.25rem; margin: 0 auto .5rem; }
.bs-rsvp__check circle { fill: var(--inv-primary); }
.bs-rsvp__check path { fill: none; stroke: var(--inv-shine); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
html.inv-anim .bs-rsvp__sent .bs-rsvp__check { animation: bs-bounce .8s cubic-bezier(.34, 1.56, .64, 1) both; }
html.inv-anim .bs-rsvp__sent .bs-rsvp__check path { animation: bs-draw .45s ease-out .35s both; }
.bs-rsvp__thanks { margin: 0; font-family: var(--bs-serif); font-size: 1.55rem; color: var(--inv-primary); }
.bs-rsvp__line { margin: .1rem 0 0; font-size: .9rem; color: var(--bs-muted); }
.bs-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .84rem; font-weight: 700; color: var(--inv-primary); }

/* gift: ivory pillow cards with a gold crescent on top, two per row; the address below */
.bs-gift__intro { color: var(--bs-ivory-muted); }
.bs-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.3rem; }
.bs-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.bs-gift .inv-gift__account,
.bs-gift .inv-gift__address {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; margin: 0; overflow: hidden;
    padding: 2.5rem .75rem 1rem; border-radius: 26px 26px 20px 20px; color: var(--inv-text); background: var(--bs-paper);
    box-shadow: inset 0 -6px 0 0 color-mix(in srgb, var(--inv-lilac) 35%, transparent), 0 18px 30px -20px rgb(0 0 0 / .6);
}
.bs-gift .inv-gift__account::before {
    content: ''; position: absolute; left: 50%; top: .7rem; width: 1.5rem; height: 1.5rem; margin-left: -.75rem; background: var(--inv-accent);
    -webkit-mask: var(--bs-crescent) center / contain no-repeat; mask: var(--bs-crescent) center / contain no-repeat;
}
.bs-gift .inv-gift__account p, .bs-gift .inv-gift__address p { margin: 0; }
.bs-gift .inv-gift__bank { font-weight: 700; font-size: .85rem; color: var(--inv-primary); }
.bs-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .4rem; background: #fff; }
.bs-gift .inv-gift__logo img { max-width: 5rem; }
.bs-gift .inv-gift__number {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .98rem; font-weight: 700;
    letter-spacing: .03em; line-height: 1.3; overflow-wrap: anywhere; color: var(--inv-text);
}
.bs-gift .inv-gift__holder { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-muted); overflow-wrap: anywhere; }
.bs-gift .inv-button { margin-top: .35rem; min-height: 2.25rem; padding: .35rem .9rem; font-size: .74rem; font-weight: 700; background: var(--inv-primary); color: #fff; }
.bs-gift .inv-gift__address { margin-top: .75rem; padding-top: 2.5rem; font-size: .875rem; box-shadow: 8px 8px 0 0 var(--inv-lilac); }
.bs-gift .inv-gift__address .inv-gift__holder { font-size: .72rem; }

/* wishlist: tags hanging on threads from a garland, a gold star with the number on every thread */
.bs-wishlist__intro { color: var(--bs-muted); font-size: .92rem; }
.bs-wishlist__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: .4rem .8rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.bs-wishlist__item { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding-top: .9rem; }
/* the garland: a soft swag across the top of every tag */
.bs-wishlist__item::before {
    content: ''; position: absolute; top: 0; left: -.5rem; right: -.5rem; height: 1rem;
    border-bottom: 1.5px solid color-mix(in srgb, var(--inv-primary) 35%, transparent); border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.bs-wishlist__item:nth-child(even) { margin-top: 1.8rem; }
.bs-wishlist__hang { position: relative; display: grid; place-items: center; width: 2.5rem; height: 3.5rem; padding-top: 1rem; }
.bs-wishlist__hang::before { content: ''; position: absolute; left: 50%; top: 0; height: 1.2rem; border-left: 1.4px solid color-mix(in srgb, var(--inv-primary) 40%, transparent); }
.bs-wishlist__hang::after { content: ''; position: absolute; left: 50%; bottom: -.7rem; height: 1.1rem; border-left: 1.4px solid color-mix(in srgb, var(--inv-primary) 40%, transparent); }
.bs-wishlist__star { width: 2.5rem; height: 2.5rem; grid-area: 1 / 1; color: var(--inv-accent); filter: drop-shadow(0 3px 4px color-mix(in srgb, var(--inv-accent) 45%, transparent)); }
.bs-wishlist__number { position: relative; grid-area: 1 / 1; font-family: var(--bs-serif); font-size: .82rem; line-height: 1; color: var(--inv-deep); }
.bs-wishlist__tag {
    position: relative; width: 100%; margin-top: .6rem; padding: 1.35rem .8rem 1rem; border-radius: 14px 14px 20px 20px; text-align: center;
    background: #fff; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--inv-lilac) 70%, transparent), 0 14px 22px -16px color-mix(in srgb, var(--inv-deep) 55%, transparent);
    transform: rotate(-1.5deg);
}
.bs-wishlist__item:nth-child(even) .bs-wishlist__tag { transform: rotate(1.5deg); }
/* the punched hole the thread goes through */
.bs-wishlist__tag::before {
    content: ''; position: absolute; left: 50%; top: .45rem; width: .6rem; height: .6rem; margin-left: -.3rem; border-radius: 50%;
    background: var(--inv-background); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 80%, transparent);
}
.bs-wishlist__photo { display: block; width: 3.4rem; height: 3.4rem; margin: 0 auto .5rem; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 2px var(--inv-accent); }
.bs-wishlist__tag p { margin: 0; }
.bs-wishlist__name { font-family: var(--bs-serif); font-size: 1.02rem; line-height: 1.3; color: var(--bs-ink); overflow-wrap: anywhere; }
.bs-wishlist__note { margin-top: .2rem !important; font-size: .8rem; line-height: 1.4; color: var(--bs-muted); }
.bs-wishlist__shop { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.2rem; margin-top: .2rem; font-size: .8rem; font-weight: 700; text-decoration: none; }
.bs-wishlist__shop .bs-icon { width: 1rem; height: 1rem; }

/* co-hosts: names in the storybook serif on the moonlight band, split by small night stars */
.bs-cohosts__list { display: flex; flex-direction: column; align-items: center; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.bs-cohosts__list li { max-width: 26ch; font-family: var(--bs-serif); font-size: 1.12rem; line-height: 1.35; color: var(--inv-deep); }
.bs-cohosts__list li + li::before {
    content: ''; display: block; width: .7rem; height: .7rem; margin: 0 auto .55rem; background: var(--inv-deep); opacity: .7;
    -webkit-mask: var(--bs-star) center / contain no-repeat; mask: var(--bs-star) center / contain no-repeat;
}

/* contacts: pill rows with the initial on a night disc and a WhatsApp button */
.bs-contacts__list { display: grid; gap: .75rem; max-width: 24rem; margin: 0 auto; }
.bs-contact {
    display: grid; grid-template-columns: 2.9rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .6rem .6rem .6rem .65rem; border-radius: 999px;
    background: #fff; text-align: left; box-shadow: 0 0 0 1.5px var(--bs-ring), 6px 6px 0 0 var(--bs-lilac-soft);
}
.bs-contact__avatar {
    display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%;
    font-family: var(--bs-serif); font-size: 1.3rem; color: var(--inv-shine); background: radial-gradient(circle at 40% 35%, var(--inv-primary), var(--inv-deep));
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--inv-accent);
}
.bs-contact p { margin: 0; }
.bs-contact__name { font-weight: 700; font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; }
.bs-contact__role { font-size: .78rem; color: var(--bs-muted); }
.bs-contact__phone { font-size: .85rem; }
.bs-contact__button { min-height: 2.5rem; padding: .45rem .95rem; font-size: .8rem; font-weight: 700; background: var(--inv-primary); color: #fff; }
.bs-contact__button .bs-icon { width: 1.05rem; height: 1.05rem; }

/* health protocol: white chips on lilac */
.bs-protocol__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.bs-protocol__list li {
    display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border-radius: 999px; font-size: .84rem; font-weight: 600;
    background: #fff; box-shadow: inset 0 0 0 1px var(--bs-ring);
}
.bs-protocol__list .bs-icon { width: 1rem; height: 1rem; color: var(--inv-primary); }
.bs-protocol__note { font-size: .88rem; color: var(--bs-muted); }

/* vendors: a white card of rows split by dotted lines */
.bs-vendors__list { max-width: 24rem; margin: 0 auto; padding: .3rem 1.15rem; list-style: none; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1.5px var(--bs-ring), var(--bs-drop); }
.bs-vendor { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem 0; text-align: left; border-bottom: 2px dotted var(--bs-ring); }
.bs-vendor:last-child { border-bottom: 0; }
.bs-vendor__text { display: flex; flex-direction: column; min-width: 0; }
.bs-vendor__role { font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-primary); }
.bs-vendor__name { font-family: var(--bs-serif); font-size: 1.06rem; line-height: 1.3; color: var(--inv-text); overflow-wrap: anywhere; }
.bs-vendor__link {
    display: inline-flex; align-items: center; gap: .3rem; flex: none; min-height: 2.2rem; padding: .3rem .7rem; border-radius: 999px;
    font-size: .74rem; font-weight: 700; text-decoration: none; background: var(--bs-lilac-soft); color: var(--inv-primary);
}
.bs-vendor__link .bs-icon { width: .95rem; height: .95rem; }

/* closing: the full photo fading into the night, the knitted crescent with its pillow, the thanks */
.bs-closing { padding: 2.8rem 1.6rem 1.8rem; }
.bs-closing--photo { padding-top: 0; }
.bs-closing__photo { position: relative; z-index: -1; height: min(60svh, 28.75rem); margin: 0 -1.6rem; overflow: hidden; }
.bs-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 22%; --inv-parallax: 30px; }
.bs-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 36%, color-mix(in srgb, var(--inv-deep) 55%, transparent) 64%, var(--inv-deep) 97%);
}
.bs-closing__body { position: relative; }
.bs-closing--photo .bs-closing__body { margin-top: -5.8rem; }
.bs-moon--closing { --moon-w: 6.6rem; margin-bottom: -.4rem; }
.bs-closing__eyebrow { margin: 0 0 .3rem; font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-lilac); }
.bs-closing__title { margin: 0 0 .7rem; font-family: var(--bs-serif); font-size: clamp(1.9rem, 8.5vw, 2.4rem); font-weight: 400; line-height: 1.05; letter-spacing: -.01em; color: #fff; }
.bs-closing__title em { font-style: normal; color: var(--inv-shine); text-shadow: 0 0 22px color-mix(in srgb, var(--inv-shine) 45%, transparent); }
.bs-closing__message { margin: 0 auto; max-width: 32ch; font-size: .92rem; line-height: 1.6; color: var(--bs-ivory-muted); }
.bs-closing__salam { margin: .8rem auto 0; max-width: 30ch; font-family: var(--bs-serif); font-size: 1.02rem; line-height: 1.4; color: var(--inv-shine); }
.bs-closing__signature { margin: .7rem auto 0; max-width: 30ch; font-size: .86rem; color: var(--bs-ivory-muted); }
.bs-closing__names {
    display: flex; flex-direction: column; align-items: center; margin: 1.1rem 0 0; font-family: var(--bs-serif); font-size: 2rem; line-height: 1.1;
    color: var(--inv-shine); text-shadow: 0 0 24px color-mix(in srgb, var(--inv-shine) 40%, transparent); overflow-wrap: anywhere;
}
.bs-closing__names span { margin-bottom: .35rem; font-family: var(--bs-sans); font-size: .66rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-lilac); text-shadow: none; }

/* ---------- 6. forms (shared RSVP + wishes, restyled) ---------- */
.bs-main .inv-form { gap: 1rem; text-align: left; }
.bs-main .inv-form label, .bs-main .inv-form__choices legend { font-size: .82rem; font-weight: 700; color: var(--inv-text); }
.bs-main .inv-form input:not([type=radio]):not([type=checkbox]),
.bs-main .inv-form select,
.bs-main .inv-form textarea {
    width: 100%; min-height: 2.9rem; padding: .7rem .9rem; border: 0; border-radius: 14px;
    font: 500 .95rem/1.4 var(--bs-sans); color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-primary) 24%, transparent);
    transition: box-shadow .2s ease;
}
.bs-main .inv-form select {
    appearance: none; padding-right: 2.4rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .8rem center / 1.1rem no-repeat;
}
.bs-main .inv-form input:not([type=radio]):focus-visible,
.bs-main .inv-form select:focus-visible,
.bs-main .inv-form textarea:focus-visible {
    outline: none; box-shadow: inset 0 0 0 2px var(--inv-primary), 0 0 0 4px color-mix(in srgb, var(--inv-lilac) 50%, transparent);
}
.bs-main .inv-form button[type=submit] { width: 100%; min-height: 3rem; font-weight: 700; color: #fff; background: var(--inv-primary); box-shadow: 0 12px 22px -12px color-mix(in srgb, var(--inv-primary) 80%, transparent); }
.bs-main .inv-form .inv-button--outline { width: 100%; min-height: 2.75rem; }
.bs-main .inv-form__notice { text-align: center; }

/* the three answers as big cards with icons (the radio dot is hidden but still focusable) */
.bs-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.bs-rsvp .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.bs-rsvp .inv-form__choices label {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .45rem;
    min-height: 5.4rem; padding: .85rem .3rem .75rem; border-radius: 18px; cursor: pointer; text-align: center;
    font-size: .84rem; font-weight: 700; line-height: 1.2; color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-primary) 22%, transparent);
    transition: background-color .25s ease, color .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.bs-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* icon: a tinted circle (::before) with a check, a cross or a question mark on it (::after, a mask in the text colour) */
.bs-rsvp .inv-form__choices label::before {
    content: ''; width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none; background: var(--bs-lilac-soft);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease;
}
.bs-rsvp .inv-form__choices label::after {
    content: ''; position: absolute; left: 50%; top: 1.3rem; width: 1.2rem; height: 1.2rem; margin-left: -.6rem;
    background: currentColor; color: var(--inv-primary); pointer-events: none;
    -webkit-mask: var(--bs-choice-icon) center / contain no-repeat; mask: var(--bs-choice-icon) center / contain no-repeat;
}
.bs-rsvp .inv-form__choices label:nth-of-type(1) {
    --bs-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.bs-rsvp .inv-form__choices label:nth-of-type(2) {
    --bs-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
}
.bs-rsvp .inv-form__choices label:nth-of-type(3) {
    --bs-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M8.5 8.8a3.5 3.5 0 1 1 4.9 3.2c-.9.4-1.4 1.1-1.4 2v.5M12 19h.01'/%3E%3C/svg%3E");
}
.bs-rsvp .inv-form__choices label:has(input:checked) {
    color: #fff; background: var(--inv-primary); transform: translateY(-3px);
    box-shadow: 0 0 0 3px var(--inv-accent), 0 12px 24px -12px color-mix(in srgb, var(--inv-primary) 80%, transparent);
}
.bs-rsvp .inv-form__choices label:has(input:checked)::before { background-color: rgb(255 255 255 / .2); transform: scale(1.1); }
.bs-rsvp .inv-form__choices label:has(input:checked)::after { color: var(--inv-shine); }
.bs-rsvp .inv-form__choices label:has(input:focus-visible) { outline: 2px solid var(--inv-accent); outline-offset: 3px; }

/* wishes: the form on a white card, the wishes in a scroll box of about three */
.bs-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.bs-wishes .inv-form {
    margin-right: 8px; padding: 1.3rem 1.1rem; border-radius: 26px; background: #fff;
    box-shadow: 8px 8px 0 0 var(--inv-primary);
}
.bs-wishes .inv-wishes__list { margin-top: 1.4rem; }
.bs-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .55rem; border-radius: 20px; background: color-mix(in srgb, #fff 45%, transparent); box-shadow: inset 0 0 0 1px var(--bs-ring);
}
.bs-wishes .inv-wish { padding: .75rem .9rem; border-radius: 16px; background: #fff; text-align: left; box-shadow: 0 2px 10px rgb(0 0 0 / .05); border-left: 4px solid var(--inv-accent); }
.bs-wishes .inv-wish__name { font-weight: 700; color: var(--inv-primary); }
.bs-wishes .inv-wish__message { font-size: .88rem; line-height: 1.5; }
.bs-wishes .inv-wish__time { font-size: .72rem; color: var(--bs-muted); }

/* ---------- 7. shared components ---------- */
.bs-main .inv-button { font-weight: 700; }
body .inv-nav {
    --inv-nav-bg: color-mix(in srgb, #fff 94%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-text) 74%, transparent);
    --inv-nav-active: var(--inv-primary);
    font-family: var(--bs-sans);
}

/* ---------- 8. screen sizes ---------- */

/* short phones: the moon and the type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .bs-cover { padding-top: 1.5rem; padding-bottom: 2rem; }
    .bs-moon--cover { --moon-w: min(80vw, 19rem, 41svh); }
    .bs-cover__name { font-size: 2.7rem; }
    .bs-cover__quote { font-size: .86rem; }
    .bs-cover__guest { margin-top: .75rem; }
    .bs-cover__open { margin-top: .85rem; }
}
@media (max-height: 660px) {
    .bs-cover { padding-top: 1.2rem; padding-bottom: 1.7rem; }
    .bs-moon--cover { --moon-w: min(74vw, 38svh); }
    .bs-cover__title { font-size: .64rem; }
    .bs-cover__name { font-size: 2.35rem; }
    .bs-cover--many .bs-cover__name { font-size: 1.9rem; }
    .bs-cover__date { margin-top: .25rem; font-size: .84rem; }
    .bs-cover__quote { font-size: .82rem; line-height: 1.35; }
    .bs-cover__guest { padding: .4rem .85rem .5rem; }
    .bs-cover__guest-name { font-size: 1.05rem; }
    .bs-cover__open { min-height: 2.75rem; padding: .6rem 1.7rem; }
}
/* very short screens (in-app browsers): a smaller moon and quote, so everything fits */
@media (max-height: 600px) {
    .bs-moon--cover { --moon-w: min(66vw, 35svh); }
    .bs-cover__name { font-size: 2.1rem; }
    .bs-cover__quote { font-size: .78rem; line-height: 1.3; }
    .bs-cover__guest { margin-top: .55rem; }
    .bs-cover__open { margin-top: .7rem; }
}

/* wide screens: the phone-width column on a night backdrop with stars */
@media (min-width: 560px) {
    body.bs-body {
        background:
            radial-gradient(70vw 60vh at 50% 0%, color-mix(in srgb, var(--inv-primary) 70%, transparent), transparent 70%),
            var(--inv-deep);
        background-attachment: fixed;
    }
    body.bs-body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .45; background: var(--bs-stars) center / 260px 260px repeat; }
    .bs-main { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
}

/* ---------- 9. motion ---------- */
@keyframes bs-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes bs-bounce { 0% { transform: scale(0); } 55% { transform: scale(1.15); } 75% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes bs-glow { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
/* the crescent rises and rocks to rest like a cradle */
@keyframes bs-rock {
    0% { opacity: 0; transform: translateY(18px) rotate(-7deg); }
    35% { opacity: 1; transform: translateY(0) rotate(4deg); }
    62% { transform: rotate(-2deg); }
    84% { transform: rotate(.8deg); }
    100% { opacity: 1; transform: none; }
}
@keyframes bs-photo-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes bs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bs-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes bs-sway { 0% { transform: rotate(8deg); } 35% { transform: rotate(-5deg); } 65% { transform: rotate(2.5deg); } 100% { transform: rotate(0); } }
@keyframes bs-lamp-on { 0% { opacity: .15; } 40% { opacity: .7; } 55% { opacity: .5; } 100% { opacity: 1; } }

/* cover (≤ 2.5 s, once): the glow brightens (0–1.2 s), the crescent rises and rocks to rest (.15–1.75 s), the
   photo window fades in (.4–1.2 s), the stars appear (1.1–1.6 s); the text follows through its inv-enter delays */
html.inv-anim .bs-moon--cover::before { animation: bs-glow 1.2s ease-out both; }
html.inv-anim .bs-moon--cover .bs-moon__art { transform-origin: 50% 72%; animation: bs-rock 1.6s cubic-bezier(.3, .7, .3, 1) .15s both; }
html.inv-anim .bs-moon--cover .bs-moon__window { animation: bs-photo-in .8s cubic-bezier(.2, .7, .2, 1) .4s both; }
html.inv-anim .bs-cover__sky { animation: bs-fade 1.2s ease .2s both; }

/* the mobile's ornaments sway once to rest, the lamp switches on once, when shown */
html.inv-anim .bs-mobile.is-revealed .bs-mobile__swing { animation: bs-sway 1.8s ease-in-out .3s both; }
html.inv-anim .bs-mobile.is-revealed .bs-mobile__swing--b { animation-delay: .45s; }
html.inv-anim .bs-mobile.is-revealed .bs-mobile__swing--c { animation-delay: .55s; }
html.inv-anim .bs-mobile.is-revealed .bs-mobile__swing--d { animation-delay: .4s; }
html.inv-anim .bs-lamp.is-revealed .bs-lamp__light { animation: bs-lamp-on 1.4s ease-out .3s both; }

/* scroll-drawn details (the default, without support, is the finished drawing) */
@supports (animation-timeline: view()) {
    html.inv-anim .bs-rundown__list::before { animation: bs-grow linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .bs-cover, .bs-cover--leave, .bs-cover__inner { transition: none; }
}

/* ---------- intro scene "Ninabobo Buaian Bulan" (scene.json + sections/_scene; the intro lives in <body>) ---------- */
.bs-scene-cradle { position: relative; }
.bs-scene-cradle .bs-moon { --moon-w: 100%; width: 100%; }
.bs-scene-cradle__baby { position: absolute; left: 22%; top: 35.5%; width: 56%; color: color-mix(in srgb, var(--inv-lilac) 55%, var(--inv-primary)); }
.bs-scene-cradle__baby .bs-sleeper__cloud { display: none; }
.bs-scene-cradle__baby .bs-sleeper__line { stroke: #fff; stroke-opacity: .6; }
.bs-scene-cradle__baby .bs-sleeper__z { color: var(--inv-shine); }
.inv-intro--scene.is-playing .bs-scene-cradle__baby .bs-sleeper__z { animation: bs-scene-sigh 3.2s ease-in-out 2.4s infinite; }
@keyframes bs-scene-sigh { 0%, 100% { opacity: .25; transform: translate(0, 4px); } 50% { opacity: .95; transform: translate(2px, -4px); } }
.inv-intro--scene.is-playing .bs-scene-mobile .bs-mobile__swing { animation: bs-sway 2.6s ease-in-out .5s both; }
.inv-intro--scene.is-playing .bs-scene-mobile .bs-mobile__swing--b { animation-delay: .7s; }
.inv-intro--scene.is-playing .bs-scene-mobile .bs-mobile__swing--c { animation-delay: .8s; }
.inv-intro--scene.is-playing .bs-scene-mobile .bs-mobile__swing--d { animation-delay: .6s; }
.bs-scene-lamp .bs-lamp__light { opacity: .9; }
.inv-scene__art > .bs-scene-cloud { display: block; width: 100%; height: 100%; }
.bs-scene-cloud {
    background: color-mix(in srgb, #fff 86%, var(--inv-lilac));
    -webkit-mask: var(--bs-cloud) center / contain no-repeat; mask: var(--bs-cloud) center / contain no-repeat;
}
.bs-scene-star { color: var(--inv-shine); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--inv-shine) 70%, transparent)); }
/* the card: a round moon window (ivory and gold rings) over the night, like the photo window on the cover */
body.bs-body .inv-intro--scene .inv-scene__card {
    aspect-ratio: 1; padding: 1.6rem; border-radius: 50%; -webkit-mask: none; mask: none;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-primary) 70%, transparent), color-mix(in srgb, var(--inv-deep) 78%, transparent));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-background) 85%, transparent), 0 0 0 5px var(--inv-accent), 0 0 46px 8px color-mix(in srgb, var(--inv-shine) 34%, transparent);
}
body.bs-body .inv-scene__card .inv-intro__label { margin-bottom: .55rem; font: 700 clamp(.58rem, 2.7vw, .68rem)/1.4 var(--bs-sans); letter-spacing: .28em; text-transform: uppercase; color: var(--inv-shine); }
body.bs-body .inv-scene__card .inv-intro__names { font-size: clamp(1.9rem, 9vw, 2.7rem); line-height: 1.08; color: #fff; text-wrap: balance; }
body.bs-body .inv-scene__card .inv-intro__rule { width: 4.5rem; margin: .8rem auto .7rem; background: linear-gradient(90deg, transparent, var(--inv-shine), transparent); }
body.bs-body .inv-scene__card .inv-intro__date { font: 600 clamp(.66rem, 3vw, .78rem)/1.4 var(--bs-sans); letter-spacing: .08em; color: var(--bs-ivory-muted); }
body.bs-body .inv-intro--scene .inv-intro__skip { background: color-mix(in srgb, var(--inv-deep) 55%, transparent); border-color: color-mix(in srgb, var(--inv-shine) 55%, transparent); color: #fff; }
@media (prefers-reduced-motion: reduce) {
    .bs-scene-mobile .bs-mobile__swing, .bs-scene-cradle__baby .bs-sleeper__z { animation: none !important; }
}