/*
 * Template "Bingkisan Berkah" (Pengajian & Hari Besar Islam) — a santunan for orphans and poor children in Ramadan in
 * layered PAPER-CUT: every ornament is cut paper stacked in layers with a soft shadow between them (#bb-paper in
 * sections/_defs). Cheerful and kind: sunflower yellow, leaf green, sky blue and coral on cream.
 * Signature pieces: the gift box with a big bow (sections/_gift), paper crescents, stars, ketupat and hearts on strings
 * (sections/_hang), the kampung on paper hills (sections/_village), giving hands (sections/_hands), paper flowers
 * (sections/_flower), a paper garland divider (sections/_divider).
 * Mobile-first, one column (~460px) on a night backdrop with paper stars on wide screens.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (leaf green: buttons, the maps button)   --inv-accent (sunflower: ribbons, tags, stars)
 *   --inv-background (cream)   --inv-text (ink)   --inv-deep (the night bands, titles on light)
 *   --inv-shine (light yellow on dark)   --inv-soft (pale sky: the sky tone)   --inv-sky   --inv-coral   --inv-leaf
 *
 * Section tones (set on each section in its partial): .bb-tone--light (cream with paper confetti), --sky (pale sky),
 * --sun (a warm sunflower wash), --deep (Ramadan night with paper stars), --dusk (night melting into sky blue).
 * Motion only runs with html.inv-anim (set by <x-inv.head> unless the guest prefers reduced motion).
 *
 * Revision standard (docs/template-guide.md section 10): the cover in px steps per screen height (never svh/vh),
 * ornaments clear of faces, photos melting into sections with masks, a compact closing.
 *
 * Contents: 1 base · 2 tones · 3 shared pieces · 4 cover · 5 sections in page order · 6 forms · 7 shared components
 *           · 8 screen sizes · 9 motion · 10 intro scene
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Bunga Matahari" variant (the variant's colours override these) */
    --inv-primary: #1f8a4c;
    --inv-accent: #f7b500;
    --inv-background: #fff7e6;
    --inv-text: #24304a;
    --inv-deep: #1b4a8c;
    --inv-shine: #ffe066;
    --inv-soft: #d6efff;
    --inv-sky: #3fa9e6;
    --inv-coral: #ff6b57;
    --inv-leaf: #7cc243;
    --inv-radius: 16px;

    --bb-round: 'Fredoka', 'Nunito', system-ui, sans-serif;
    --bb-script: var(--inv-font-display, 'Parisienne'), 'Brush Script MT', cursive;
    --bb-serif: var(--inv-font-heading, 'Marcellus'), Georgia, serif;
    --bb-sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bb-col: 460px;

    --bb-paper: color-mix(in srgb, #fff 66%, var(--inv-background));
    --bb-title: var(--inv-deep);
    --bb-muted: color-mix(in srgb, var(--inv-text) 76%, var(--inv-background));
    --bb-cream-muted: color-mix(in srgb, #fff 86%, transparent);
    --bb-coral-dark: color-mix(in srgb, var(--inv-coral) 76%, #5a1000);
    --bb-coral-ink: color-mix(in srgb, var(--inv-coral) 70%, #3a0500);
    --bb-coral-light: color-mix(in srgb, var(--inv-coral) 55%, #fff);
    --bb-accent-dark: color-mix(in srgb, var(--inv-accent) 72%, #6a3200);
    --bb-leaf-dark: color-mix(in srgb, var(--inv-leaf) 45%, var(--inv-primary));
    --bb-sky-dark: color-mix(in srgb, var(--inv-sky) 72%, var(--inv-deep));
    --bb-line: color-mix(in srgb, var(--inv-accent) 55%, transparent);
    /* the lift of a sheet of paper: a hard little edge and a soft shadow */
    --bb-lift: 0 2px 0 rgb(42 26 6 / .1), 0 14px 24px -14px rgb(42 26 6 / .45);
    --bb-drop: drop-shadow(0 2px 0 rgb(42 26 6 / .12)) drop-shadow(0 10px 14px rgb(42 26 6 / .28));

    /* paper confetti for the grounds: a sparkle, a heart, a diamond and dots on a 72px tile (a mask: takes any colour) */
    --bb-ground: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='%23000'%3E%3Cpath d='M16 8.5 18.2 13.8 23.5 16 18.2 18.2 16 23.5 13.8 18.2 8.5 16 13.8 13.8Z'/%3E%3Cpath d='M52 53C46.8 49.6 45 46.8 45 44 45 41.2 47.6 39.6 49.6 39.9 50.8 40.1 51.6 40.9 52 41.9 52.4 40.9 53.2 40.1 54.4 39.9 56.4 39.6 59 41.2 59 44 59 46.8 57.2 49.6 52 53Z'/%3E%3Cpath d='M44 20 48 24 44 28 40 24Z'/%3E%3Ccircle cx='22' cy='56' r='2.2'/%3E%3Ccircle cx='64' cy='12' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
    /* a five-pointed star and a heart as masks (bullets, eyebrow marks) */
    --bb-star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10.5 -10.5 21 21'%3E%3Cpath d='M0-10 2.59-3.56 9.51-3.09 4.18 1.36 5.88 8.09 0 4.4-5.88 8.09-4.18 1.36-9.51-3.09-2.59-3.56Z'/%3E%3C/svg%3E");
    --bb-heart-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10.5 -10.5 21 21'%3E%3Cpath d='M0 8.6C-7 3.8-10 .2-10-3.6-10-7.6-6.4-9.9-3.6-9.5-1.9-9.2-.6-8.1 0-6.7.6-8.1 1.9-9.2 3.6-9.5 6.4-9.9 10-7.6 10-3.6 10 .2 7 3.8 0 8.6Z'/%3E%3C/svg%3E");

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

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

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

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

.bb-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

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

.bb-main { max-width: var(--bb-col); margin: 0 auto; overflow-x: clip; }
.bb-branding { max-width: var(--bb-col); margin: 0 auto; }

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

.bb-arabic { font-family: 'Amiri', 'Traditional Arabic', serif; line-height: 1.9; color: var(--bb-title); }
.bb-icon { width: 1.15rem; height: 1.15rem; flex: none; }

/* paper fills (used by the SVG ornaments) */
.bb-fill-coral { fill: var(--inv-coral); }
.bb-fill-coraldark { fill: var(--bb-coral-dark); }
.bb-fill-sun { fill: var(--inv-accent); }
.bb-fill-shine { fill: var(--inv-shine); }
.bb-fill-sky { fill: var(--inv-sky); }
.bb-fill-leaf { fill: var(--inv-leaf); }
.bb-fill-leafdark { fill: var(--bb-leaf-dark); }
.bb-fill-cream { fill: var(--bb-paper); }
.bb-fill-window { fill: var(--inv-shine); }
.bb-fill-door { fill: color-mix(in srgb, var(--inv-deep) 80%, #000); }
.bb-fill-dot { fill: var(--bb-accent-dark); }
.bb-fill-ink { fill: color-mix(in srgb, var(--inv-deep) 70%, #111); }
.bb-fill-skin { fill: #c58a5c; }

/* ---------- 2. section tones ---------- */
.bb-tone--light {
    background:
        radial-gradient(60% 26% at 100% 0%, color-mix(in srgb, var(--inv-soft) 90%, transparent), transparent 75%),
        radial-gradient(60% 26% at 0% 100%, color-mix(in srgb, var(--inv-accent) 18%, transparent), transparent 75%),
        var(--inv-background);
}
.bb-tone--sky {
    background:
        radial-gradient(70% 30% at 50% 0%, color-mix(in srgb, #fff 60%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-soft), color-mix(in srgb, var(--inv-soft) 45%, var(--inv-background)));
}
.bb-tone--sun {
    background:
        radial-gradient(70% 30% at 50% 0%, color-mix(in srgb, #fff 55%, transparent), transparent 75%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 30%, var(--inv-background)), color-mix(in srgb, var(--inv-accent) 12%, var(--inv-background)));
}
/* paper confetti in two colours (two masked layers, offset) */
.bb-tone--light::before, .bb-tone--sky::before, .bb-tone--sun::before,
.bb-tone--light::after, .bb-tone--sky::after, .bb-tone--sun::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    -webkit-mask: var(--bb-ground) 0 0 / 72px 72px repeat; mask: var(--bb-ground) 0 0 / 72px 72px repeat;
}
.bb-tone--light::before, .bb-tone--sun::before { background: var(--inv-coral); opacity: .13; }
.bb-tone--light::after, .bb-tone--sun::after { background: var(--inv-sky); opacity: .14; -webkit-mask-position: 36px 36px; mask-position: 36px 36px; }
.bb-tone--sky::before { background: #fff; opacity: .8; }
.bb-tone--sky::after { background: var(--inv-sky); opacity: .14; -webkit-mask-position: 36px 36px; mask-position: 36px 36px; }
/* calm (memorial): no confetti */
.bb-tone--calm::before, .bb-tone--calm::after { display: none; }

.bb-tone--deep, .bb-tone--dusk { color: #fff; }
.bb-tone--deep {
    background:
        radial-gradient(80% 36% at 10% 0%, color-mix(in srgb, var(--inv-sky) 40%, transparent), transparent 75%),
        radial-gradient(70% 30% at 100% 100%, color-mix(in srgb, var(--inv-coral) 22%, transparent), transparent 75%),
        var(--inv-deep);
}
.bb-tone--dusk {
    background:
        radial-gradient(60% 24% at 50% 46%, color-mix(in srgb, var(--inv-shine) 22%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-deep) 0%, color-mix(in srgb, var(--inv-deep) 58%, var(--inv-sky)) 55%, color-mix(in srgb, var(--inv-deep) 30%, var(--inv-sky)) 100%);
}
/* paper stars on the night */
.bb-tone--deep::before, .bb-tone--dusk::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--inv-shine); opacity: .2;
    -webkit-mask: var(--bb-ground) 0 0 / 72px 72px repeat; mask: var(--bb-ground) 0 0 / 72px 72px repeat;
}
.bb-tone--deep a:not(.inv-button), .bb-tone--dusk a:not(.inv-button) { color: var(--inv-shine); }
.bb-tone--deep .bb-arabic { color: var(--inv-shine); }
.bb-tone--deep .bb-prayer__panel .bb-arabic { color: var(--bb-title); }

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

/* paper clouds at the sides of sky sections */
.bb-section__cloud { position: absolute; z-index: -1; width: 7.5rem; fill: #fff; pointer-events: none; }
.bb-section__cloud--l { left: -2.6rem; top: 1.4rem; }
.bb-section__cloud--r { right: -2.2rem; top: 5.2rem; width: 6rem; }

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

/* heading: a rounded eyebrow between a star and a heart, a round title, the last word in the script font */
.bb-heading { margin: 0 0 1.8rem; }
.bb-heading__eyebrow {
    display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .55rem; padding: .28rem .85rem; border-radius: 999px;
    font-family: var(--bb-round); font-size: .7rem; font-weight: 600; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase;
    color: var(--bb-coral-ink); background: color-mix(in srgb, var(--inv-accent) 24%, #fff);
    box-shadow: 0 2px 0 rgb(42 26 6 / .08);
}
.bb-heading__eyebrow::before, .bb-heading__eyebrow::after { content: ''; width: 10px; height: 10px; flex: none; background: var(--inv-accent); -webkit-mask: var(--bb-star-mask) center / contain no-repeat; mask: var(--bb-star-mask) center / contain no-repeat; }
.bb-heading__eyebrow::after { background: var(--inv-coral); -webkit-mask-image: var(--bb-heart-mask); mask-image: var(--bb-heart-mask); }
.bb-heading__title {
    margin: 0; font-family: var(--bb-round); font-size: 2.05rem; font-weight: 600; line-height: 1.12;
    color: var(--bb-title); text-wrap: balance;
}
.bb-heading__title em {
    display: inline-block; padding: 0 .08em .08em; font-family: var(--bb-script); font-style: normal; font-weight: 400;
    font-size: 1.3em; line-height: .9; word-spacing: .12em; color: var(--bb-coral-ink);
}
.bb-heading__divider { margin: .7rem auto 0; }
.bb-tone--deep .bb-heading__eyebrow, .bb-tone--dusk .bb-heading__eyebrow { color: var(--inv-deep); background: var(--inv-shine); }
.bb-tone--deep .bb-heading__title, .bb-tone--dusk .bb-heading__title { color: #fff; text-shadow: 0 3px 0 rgb(0 0 0 / .14); }
.bb-tone--deep .bb-heading__title em, .bb-tone--dusk .bb-heading__title em { color: var(--inv-shine); }

/* the paper garland divider */
.bb-divider { display: block; width: min(12.5rem, 68%); height: auto; overflow: visible; }
.bb-divider__string { fill: none; stroke: var(--bb-accent-dark); stroke-width: 1.2; stroke-linecap: round; }
.bb-tone--deep .bb-divider__string, .bb-tone--dusk .bb-divider__string { stroke: color-mix(in srgb, var(--inv-shine) 75%, #fff); }

/* hanging paper ornaments */
.bb-hang { display: block; overflow: visible; pointer-events: none; --bb-string: var(--bb-accent-dark); }
.bb-tone--deep .bb-hang, .bb-tone--dusk .bb-hang, .bb-cover .bb-hang { --bb-string: color-mix(in srgb, var(--inv-shine) 70%, #fff); }
.bb-hang__string { fill: none; stroke: var(--bb-string); stroke-width: 1.2; }
.bb-hang__ring { fill: none; stroke: var(--bb-string); stroke-width: 1.2; }
.bb-hang__back { fill: var(--bb-h1); }
.bb-hang__front { fill: var(--bb-h2); }
.bb-hang__spark { fill: var(--bb-h1); }
.bb-hang__tail { fill: var(--inv-coral); }
.bb-hang__weave { fill: none; stroke: var(--bb-h1); stroke-width: 1.3; stroke-linecap: round; }
.bb-tone-accent { --bb-h1: var(--inv-accent); --bb-h2: var(--inv-shine); }
.bb-tone-coral { --bb-h1: var(--inv-coral); --bb-h2: var(--bb-coral-light); }
.bb-tone-leaf { --bb-h1: var(--inv-primary); --bb-h2: var(--inv-leaf); }
.bb-tone-sky { --bb-h1: var(--inv-sky); --bb-h2: var(--inv-soft); }
.bb-tone-shine { --bb-h1: var(--inv-shine); --bb-h2: #fff; }

/* the gift box */
.bb-gift {
    --bb-box: var(--inv-coral); --bb-box-dark: var(--bb-coral-dark); --bb-ribbon: var(--inv-accent); --bb-ribbon-dark: var(--bb-accent-dark);
    display: block; overflow: visible;
}
.bb-gift__shadow { fill: rgb(0 0 0 / .2); }
.bb-gift__back { fill: var(--bb-box-dark); }
.bb-gift__front { fill: var(--bb-box); }
.bb-gift__dots { fill: color-mix(in srgb, var(--bb-box) 55%, #fff); }
.bb-gift__ribbon, .bb-gift__loop, .bb-gift__knot { fill: var(--bb-ribbon); }
.bb-gift__ribbon-line { fill: var(--bb-ribbon-dark); opacity: .55; }
.bb-gift__fold { fill: var(--bb-ribbon-dark); }
.bb-gift__shine { fill: #fff; opacity: .65; }
.bb-gift__string { stroke: var(--bb-ribbon-dark); stroke-width: 1.4; stroke-linecap: round; }
.bb-gift__tag-card { fill: var(--bb-paper); }
.bb-gift__tag-hole { fill: var(--bb-ribbon-dark); }
.bb-gift__tag-heart { fill: var(--inv-coral); }
.bb-gift__glow { fill: var(--inv-shine); opacity: 0; filter: blur(14px); }
.bb-gift__bit--1 { fill: var(--inv-shine); }
.bb-gift__bit--2 { fill: var(--bb-coral-light); }
.bb-gift__bit--3 { fill: var(--inv-accent); }
.bb-gift__bit--4 { fill: var(--inv-sky); }
.bb-gift__bit--5 { fill: var(--inv-leaf); }

/* giving hands and paper flowers */
.bb-hands { display: block; overflow: visible; pointer-events: none; }
.bb-hands__palm { fill: color-mix(in srgb, #fff 55%, #f6c9a0); }
.bb-hands__line { fill: none; stroke: color-mix(in srgb, #8a5a36 70%, transparent); stroke-width: 1.3; stroke-linecap: round; }
.bb-hands__heart { fill: var(--inv-coral); }
.bb-hands__heart-in { fill: var(--bb-coral-light); }
.bb-hands__star { fill: var(--inv-accent); }
.bb-flower { display: block; overflow: visible; pointer-events: none; }
.bb-village { display: block; pointer-events: none; }
.bb-village__hill-back { fill: var(--inv-leaf); }
.bb-village__hill-front { fill: var(--inv-primary); }

/* the tap marker: two pulsing rings, a tapping hand and a label */
.bb-tap { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.bb-tap__ring {
    position: absolute; left: 50%; top: 36%; width: 5.4rem; aspect-ratio: 1; margin: -2.7rem 0 0 -2.7rem; border-radius: 50%;
    border: 2.5px solid #fff; opacity: 0;
}
.bb-tap__hand {
    position: absolute; left: 55%; top: 38%; width: 2.6rem; height: 2.6rem;
    fill: #fff; stroke: var(--inv-deep); stroke-width: 1.4; stroke-linejoin: round;
    filter: drop-shadow(0 4px 6px rgb(0 0 0 / .35));
}
.bb-tap__label {
    position: absolute; left: 50%; top: -1.9rem; transform: translateX(-50%); white-space: nowrap;
    padding: .36rem .95rem; border-radius: 999px; font-family: var(--bb-round); font-size: .8rem; font-weight: 600; letter-spacing: .03em;
    color: var(--inv-deep); background: var(--inv-shine); box-shadow: 0 3px 0 var(--bb-accent-dark), 0 10px 16px -8px rgb(0 0 0 / .5);
}

/* ---------- 4. cover ---------- */
.bb-cover {
    --bb-frame-w: 15rem;
    --bb-village-h: 132px;
    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;
    padding: 1.4rem 1.3rem 1.7rem; isolation: isolate; color: #fff;
    background:
        radial-gradient(64% 30% at 50% 34%, color-mix(in srgb, var(--inv-shine) 24%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-deep) 0%, color-mix(in srgb, var(--inv-deep) 62%, var(--inv-sky)) 52%, color-mix(in srgb, var(--inv-deep) 30%, var(--inv-sky)) 100%);
    transition: opacity .9s ease;
}
.bb-cover__sky { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.bb-cover__cloud { position: absolute; fill: color-mix(in srgb, #fff 86%, var(--inv-sky)); }
.bb-cover__cloud--a { left: -2.4rem; top: 14%; width: 8rem; opacity: .9; }
.bb-cover__cloud--b { right: -2.6rem; top: 44%; width: 7rem; opacity: .85; }
.bb-cover__cloud--c { left: -1.8rem; top: 62%; width: 5.4rem; opacity: .7; }
.bb-cover__star { position: absolute; fill: var(--inv-shine); }
.bb-cover__village { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; width: 100%; height: var(--bb-village-h); }

.bb-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); }
.bb-cover__host {
    max-width: 18rem; margin: 0 0 2.2rem; font-family: var(--bb-round);
    font-size: .74rem; font-weight: 600; line-height: 1.35; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-shine); text-wrap: balance;
}

/* the gift-box window: two coloured sheets turned behind, the photo in a cream border, a ribbon, the bow on top */
.bb-cover__art { position: relative; width: var(--bb-frame-w); }
.bb-cover__art::before {
    content: ''; position: absolute; z-index: -1; left: -26%; right: -26%; top: -6%; bottom: -10%; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-shine) 34%, transparent), transparent);
}
.bb-frame { position: relative; width: 100%; aspect-ratio: 4 / 4.65; }
.bb-frame__layer { position: absolute; inset: 0; border-radius: 18px; box-shadow: var(--bb-lift); }
.bb-frame__layer--a { background: var(--inv-coral); transform: rotate(-5.5deg) translate(-4px, 6px); }
.bb-frame__layer--b { background: var(--inv-accent); transform: rotate(4deg) translate(5px, 3px); }
.bb-frame__window {
    position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: 16px; border: 6px solid var(--bb-paper);
    background: radial-gradient(70% 50% at 50% 30%, color-mix(in srgb, var(--inv-leaf) 55%, transparent), transparent 70%), linear-gradient(170deg, var(--inv-primary), var(--inv-deep));
    box-shadow: var(--bb-lift);
}
.bb-frame__photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.bb-frame__initials { font-family: var(--bb-round); font-weight: 600; font-size: calc(var(--bb-frame-w) * .24); line-height: 1; color: #fff; text-shadow: 0 4px 0 rgb(0 0 0 / .15); }
/* the ribbon across the foot of the photo (notched ends), never over the faces */
.bb-frame__ribbon {
    position: absolute; left: -7%; right: -7%; bottom: 7%; height: 8.5%;
    background: linear-gradient(180deg, transparent 44%, color-mix(in srgb, var(--bb-accent-dark) 60%, transparent) 44% 56%, transparent 56%), var(--inv-accent);
    clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%);
    filter: drop-shadow(0 2px 0 rgb(0 0 0 / .15));
}
.bb-frame__bow { position: absolute; left: 50%; top: calc(var(--bb-frame-w) * -.15); width: 40%; height: auto; transform: translateX(-50%); filter: drop-shadow(0 3px 3px rgb(0 0 0 / .25)); }

/* paper ornaments hanging on strings from above, beside the photo */
.bb-cover__hang { position: absolute; z-index: 2; width: 2.6rem; transform-origin: 50% 0; }
.bb-cover__hang::before {
    content: ''; position: absolute; left: 50%; bottom: 100%; width: 1.2px; height: 40rem; margin-left: -.6px;
    background: color-mix(in srgb, var(--inv-shine) 70%, #fff);
}
.bb-cover__hang .bb-hang { width: 100%; height: auto; }
.bb-cover__hang--l1 { left: -3.5rem; top: -1.4rem; }
.bb-cover__hang--l2 { left: -2.75rem; top: 26%; width: 2.1rem; }
.bb-cover__hang--r1 { right: -3.4rem; top: -.8rem; }
.bb-cover__hang--r2 { right: -2.8rem; top: 30%; width: 2.2rem; }

.bb-cover__title {
    margin: 1rem 0 0; max-width: 100%; font-family: var(--bb-round); font-size: 2.1rem; font-weight: 600; line-height: 1.08;
    color: #fff; text-wrap: balance; text-shadow: 0 3px 0 rgb(0 0 0 / .18);
}
.bb-cover__date { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3rem .6rem; margin: .55rem 0 0; filter: drop-shadow(0 2px 0 rgb(0 0 0 / .18)); }
/* the date on a gift tag (a notched end with a hole) */
.bb-cover__tag {
    display: inline-block; padding: .28rem 1rem .3rem 1.55rem; font-family: var(--bb-round); font-size: .98rem; font-weight: 600; letter-spacing: .01em;
    color: var(--inv-text); background: radial-gradient(circle at .85rem 50%, transparent 3px, var(--inv-accent) 3.6px);
    clip-path: polygon(.75rem 0, 100% 0, 100% 100%, .75rem 100%, 0 50%);
}
.bb-cover__hijri { font-family: var(--bb-round); font-size: .95rem; font-weight: 500; color: var(--inv-shine); }
.bb-cover__quote { max-width: 30ch; margin: .5rem 0 0; font-style: italic; font-size: 1rem; line-height: 1.38; color: var(--bb-cream-muted); }
.bb-cover__guest {
    position: relative; width: min(100%, 17.5rem); margin: 1rem 0 0; padding: .55rem 1rem .5rem; border-radius: 6px;
    color: var(--inv-text); background: var(--bb-paper); transform: rotate(-1.2deg); box-shadow: var(--bb-lift);
}
/* a strip of washi tape holding the card */
.bb-cover__guest::before {
    content: ''; position: absolute; left: -1.1rem; top: -.1rem; width: 3.6rem; height: .95rem; transform: rotate(-32deg);
    background: color-mix(in srgb, var(--inv-coral) 62%, transparent);
    -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent calc(100% - 2px)); mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent calc(100% - 2px));
}
.bb-cover__guest p { margin: 0; font-family: var(--bb-round); font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--bb-coral-ink); }
.bb-cover__guest-name { display: block; font-family: var(--bb-round); font-size: 1.22rem; font-weight: 600; line-height: 1.22; color: var(--bb-title); overflow-wrap: anywhere; }
.bb-cover__open {
    display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; min-height: 2.95rem; padding: .65rem 1.8rem;
    font-family: var(--bb-round); font-size: 1rem; font-weight: 600; letter-spacing: .02em;
    color: #fff; background: var(--inv-coral); border-radius: 999px;
    box-shadow: 0 4px 0 var(--bb-coral-dark), 0 16px 26px -12px rgb(0 0 0 / .55);
}
.bb-cover__open::before {
    content: ''; width: 1.15rem; height: 1.15rem; flex: none; background: currentColor;
    -webkit-mask: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='8.5' width='17' height='4' rx='1'/%3E%3Cpath d='M5 12.5V20h14v-7.5M12 8.5V20M12 8.5S10.5 4 8 4.5 7 8.5 12 8.5Zm0 0s1.5-4.5 4-4S17 8.5 12 8.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='8.5' width='17' height='4' rx='1'/%3E%3Cpath d='M5 12.5V20h14v-7.5M12 8.5V20M12 8.5S10.5 4 8 4.5 7 8.5 12 8.5Zm0 0s1.5-4.5 4-4S17 8.5 12 8.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* leaving: the cover fades and lifts away (never blocks: .9s) */
.bb-cover--leave { transition: opacity .9s ease .1s; }
.bb-cover--gone { opacity: 0; }
.bb-cover--gone .bb-cover__inner { transform: translateY(-2.5rem); }

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

/* opening: a greeting card on two turned sheets, a crescent hanging over it, paper flowers on two corners */
.bb-opening { padding: 4.6rem 1.4rem 4.4rem; }
.bb-card { position: relative; isolation: isolate; max-width: 22.5rem; margin: 0 auto; }
.bb-card__sheet { position: absolute; inset: 0; z-index: 0; border-radius: 22px; box-shadow: var(--bb-lift); }
.bb-card__sheet--a { background: var(--inv-sky); transform: rotate(-3.2deg) translate(-3px, 4px); }
.bb-card__sheet--b { background: var(--inv-accent); transform: rotate(2.6deg) translate(4px, 7px); }
.bb-card__body {
    position: relative; z-index: 1; padding: 2.9rem 1.45rem 2.4rem; border-radius: 20px; background: var(--bb-paper); box-shadow: var(--bb-lift);
}
.bb-card__body::before {
    content: ''; position: absolute; inset: 9px; border-radius: 14px; pointer-events: none;
    border: 1.6px dashed color-mix(in srgb, var(--inv-accent) 75%, transparent);
}
.bb-card__hang { position: absolute; z-index: 2; left: 50%; top: -3.4rem; width: 2.6rem; margin-left: -1.3rem; transform-origin: 50% 0; }
.bb-card__flower { position: absolute; z-index: 2; width: 4.2rem; }
.bb-card__flower--tr { right: -1.4rem; top: 46%; width: 3.8rem; }
.bb-card__flower--bl { left: -1.3rem; bottom: -1.5rem; width: 3.6rem; }
.bb-opening__basmalah { margin: 0 0 .5rem; font-size: 1.7rem; }
.bb-opening__greeting { margin: 0 auto; max-width: 22ch; font-family: var(--bb-serif); font-size: 1.36rem; line-height: 1.32; color: var(--bb-title); }
.bb-opening__divider { margin: .9rem auto; }
.bb-opening__message { margin: 0 auto; max-width: 30ch; color: var(--bb-muted); }
.bb-opening__quote { margin: 1.5rem 0 0; padding: 1.3rem 1rem 1.1rem; border-radius: 14px; background: color-mix(in srgb, var(--inv-soft) 75%, #fff); }
.bb-opening__mark { display: block; width: 1.8rem; height: 1.8rem; margin: -2.3rem auto .6rem; fill: var(--inv-coral); overflow: visible; }
.bb-opening__quote p { margin: 0; font-family: var(--bb-serif); font-size: 1.06rem; line-height: 1.55; color: var(--inv-text); }
.bb-opening__quote cite, .bb-prayer__text cite {
    display: inline-block; margin-top: .9rem; padding: .26rem .9rem; border-radius: 999px; font-style: normal; font-family: var(--bb-round); font-size: .74rem; font-weight: 600;
    letter-spacing: .08em; color: var(--inv-text); background: var(--inv-accent); box-shadow: 0 2px 0 var(--bb-accent-dark);
}

/* organizer: the photo in a paper house, a rosette with the logo or monogram, the board, the name and the motto */
.bb-house { position: relative; width: min(13.8rem, 64vw); margin: 0 auto; }
.bb-house__roof { position: relative; z-index: 2; display: block; width: 116%; margin: 0 -8% -14px; overflow: visible; }
.bb-house__wall { position: relative; z-index: 1; padding: 10px; border-radius: 4px 4px 16px 16px; background: var(--bb-paper); box-shadow: var(--bb-lift); }
.bb-house__window {
    position: relative; display: grid; place-items: center; aspect-ratio: 4 / 4.3; overflow: hidden; border-radius: 10px;
    background: radial-gradient(70% 50% at 50% 30%, color-mix(in srgb, var(--inv-leaf) 55%, transparent), transparent 70%), linear-gradient(170deg, var(--inv-primary), var(--inv-deep));
}
.bb-house__window img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.bb-house__initials { font-family: var(--bb-round); font-size: 3.2rem; font-weight: 600; color: #fff; }
.bb-rosette {
    position: relative; z-index: 3; display: grid; place-items: center; width: 5rem; height: 5rem; margin: -2.5rem auto 0; overflow: hidden;
    border-radius: 50%; border: 4px solid var(--bb-paper); color: var(--inv-text); background: var(--inv-accent);
    outline: 3px dashed var(--inv-coral); outline-offset: -11px;
    font-family: var(--bb-round); font-size: 1.55rem; font-weight: 600; line-height: 1;
    filter: drop-shadow(0 3px 0 rgb(42 26 6 / .12)) drop-shadow(0 10px 12px rgb(42 26 6 / .25));
}
.bb-rosette span { padding: 0 .4rem; text-align: center; overflow-wrap: anywhere; }
.bb-rosette--logo { background: #fff; outline: 0; }
.bb-rosette img { width: 76%; height: 76%; object-fit: contain; }
.bb-organizer__unit { margin: 1.1rem auto 0 !important; font-family: var(--bb-round); font-size: .72rem; font-weight: 600; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; color: var(--bb-coral-ink); }
.bb-organizer__name { margin: .3rem auto 0; max-width: 18ch; font-family: var(--bb-round); font-size: 1.95rem; font-weight: 600; line-height: 1.12; color: var(--bb-title); text-wrap: balance; overflow-wrap: anywhere; }
.bb-organizer__tagline { margin: .5rem auto 0 !important; max-width: 20rem !important; text-wrap: balance; font-family: var(--bb-script); font-size: 1.6rem; line-height: 1.2; word-spacing: .1em; color: var(--bb-coral-ink); }
.bb-organizer__tagline::before, .bb-organizer__tagline::after { content: ''; display: inline-block; width: 11px; height: 11px; margin: 0 .45rem; vertical-align: .1em; background: var(--inv-coral); -webkit-mask: var(--bb-heart-mask) center / contain no-repeat; mask: var(--bb-heart-mask) center / contain no-repeat; }

/* occasion: a garland of paper ornaments, the type, the Hijri crescent badge, the theme tag, the intent, giving hands */
.bb-occasion { padding-top: 7.2rem; }
.bb-garland { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: 0 2.6rem; pointer-events: none; }
.bb-garland__item { width: 1.9rem; height: auto; transform-origin: 50% 0; }
.bb-occasion__eyebrow { margin: 0 0 .5rem !important; font-family: var(--bb-round); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-shine); }
.bb-occasion__type { margin: 0 auto; max-width: 16ch; font-family: var(--bb-round); font-size: 2rem; font-weight: 600; line-height: 1.15; color: #fff; text-wrap: balance; text-shadow: 0 3px 0 rgb(0 0 0 / .18); }
.bb-occasion__hijri {
    display: inline-flex !important; align-items: center; gap: .5rem; margin: 1.1rem auto 0 !important; padding: .42rem 1.1rem .42rem .75rem; border-radius: 999px;
    font-family: var(--bb-round); font-size: 1.06rem; font-weight: 600; color: var(--inv-deep); background: var(--bb-paper); box-shadow: 0 3px 0 rgb(0 0 0 / .18);
}
.bb-occasion__hijri svg { width: 1.45rem; height: 1.45rem; fill: var(--inv-accent); overflow: visible; }
.bb-occasion__theme {
    max-width: 19.5rem; margin: 1.4rem auto 0; padding: 1rem 1.2rem 1.1rem; border-radius: 14px; color: #fff; background: var(--inv-coral);
    transform: rotate(-1.4deg); box-shadow: 0 3px 0 var(--bb-coral-dark), 0 18px 26px -16px rgb(0 0 0 / .6);
}
.bb-occasion__theme-label { margin: 0; font-family: var(--bb-round); font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, #fff 82%, transparent); }
.bb-occasion__theme-text { margin: .15rem 0 0; font-family: var(--bb-round); font-size: 1.18rem; font-weight: 500; line-height: 1.32; text-wrap: balance; }
.bb-occasion__intent { margin: 1.5rem auto 0 !important; max-width: 32ch; font-size: .98rem; line-height: 1.62; color: var(--bb-cream-muted); }
.bb-occasion__hands { width: 6.6rem; margin: 1rem auto 0; color: var(--inv-shine); }

/* memorial: quiet — a small oval portrait under a crescent, the name, the years, the words */
.bb-memorial__moon { display: block; width: 1.9rem; margin: 0 auto .4rem; fill: var(--inv-accent); overflow: visible; }
.bb-memorial__eyebrow { margin: 0 auto .9rem !important; font-family: var(--bb-round); font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--bb-muted); }
.bb-memorial__portrait {
    position: relative; display: grid; place-items: center; width: 8.4rem; aspect-ratio: 4 / 5; margin: 0 auto; overflow: hidden; border-radius: 50%;
    background: linear-gradient(170deg, var(--inv-soft), color-mix(in srgb, var(--inv-sky) 60%, var(--inv-deep)));
    border: 5px solid var(--bb-paper); filter: drop-shadow(0 10px 14px rgb(42 26 6 / .25));
}
.bb-memorial__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.bb-memorial__initial { font-family: var(--bb-round); font-size: 2.8rem; font-weight: 600; color: #fff; }
.bb-memorial__name { margin: 1.2rem auto 0; max-width: 20ch; font-family: var(--bb-round); font-size: 1.7rem; font-weight: 600; line-height: 1.18; color: var(--bb-title); text-wrap: balance; }
.bb-memorial__years { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem .9rem; margin: .45rem auto 0 !important; font-size: .88rem; color: var(--bb-muted); }
.bb-memorial__years span + span::before { content: '·'; margin-right: .9rem; color: var(--inv-accent); }
.bb-memorial__message { margin-top: 1.1rem !important; font-family: var(--bb-serif); font-size: 1.06rem; line-height: 1.6; color: var(--inv-text); max-width: 30ch !important; }
.bb-memorial__fatihah {
    display: inline-block; margin: .2rem auto 0 !important; padding: .32rem 1.1rem; border-radius: 999px; font-family: var(--bb-round); font-size: .8rem; font-weight: 600;
    color: var(--bb-title); background: color-mix(in srgb, var(--inv-soft) 80%, #fff);
}

/* events: paper cards on a coloured sheet, washi tape, a gift-tag date */
.bb-event {
    --bb-sheet: var(--inv-sky);
    position: relative; max-width: 25rem; margin: 0 auto; padding: .8rem .8rem 1.4rem; border-radius: 18px; background: var(--bb-paper); text-align: left;
    box-shadow: 8px 9px 0 var(--bb-sheet), 0 22px 30px -18px rgb(42 26 6 / .5);
}
.bb-event--coral { --bb-sheet: var(--inv-coral); }
.bb-event--leaf { --bb-sheet: var(--inv-leaf); }
.bb-event + .bb-event { margin-top: 2.8rem; }
.bb-event__tape {
    position: absolute; z-index: 2; left: 50%; top: -.65rem; width: 5.2rem; height: 1.3rem; margin-left: -2.6rem; transform: rotate(-3deg);
    background: color-mix(in srgb, var(--inv-accent) 62%, transparent);
}
.bb-event__media { position: relative; }
.bb-event__photo { display: block; width: 100%; aspect-ratio: 16 / 10.5; object-fit: cover; object-position: center 30%; border-radius: 12px; }
.bb-event__top { display: flex; align-items: center; gap: .9rem; padding: 1.1rem .5rem 0; }
.bb-event__date {
    display: flex; flex-direction: column; align-items: center; flex: none; width: 4.5rem; margin: 0; padding: 1.15rem 0 .55rem;
    border-radius: 10px 10px 12px 12px; font-family: var(--bb-round); color: var(--inv-text);
    background: radial-gradient(circle at 50% .58rem, transparent 3.4px, var(--inv-accent) 4px);
    box-shadow: 0 3px 0 var(--bb-accent-dark);
    font-size: .62rem; font-weight: 600; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase;
}
.bb-event__date strong { font-size: 1.85rem; font-weight: 600; line-height: 1; letter-spacing: 0; }
.bb-event__head { min-width: 0; }
.bb-event__name { margin: 0; font-family: var(--bb-round); font-size: 1.4rem; font-weight: 600; line-height: 1.15; color: var(--bb-title); }
.bb-event__full { margin: .15rem 0 0; font-size: .82rem; color: var(--bb-muted); }
.bb-event__rows { display: grid; gap: .7rem; margin: 1rem .5rem 0; padding: 1rem 0 0; list-style: none; font-size: .92rem; border-top: 2px dashed color-mix(in srgb, var(--inv-accent) 55%, transparent); }
.bb-event__rows li { display: flex; align-items: flex-start; gap: .65rem; }
.bb-event__rows .bb-icon { width: 2rem; height: 2rem; padding: .42rem; border-radius: 50%; color: #fff; background: var(--inv-coral); }
.bb-event__rows li > span { padding-top: .28rem; }
.bb-event__venue { display: block; font-weight: 700; }
.bb-event__address { display: block; font-size: .86rem; color: var(--bb-muted); }
.bb-event .inv-maps { margin: 1.1rem .5rem 0; text-align: center; }
.bb-event .inv-maps .inv-button { width: 100%; font-family: var(--bb-round); font-weight: 600; background: var(--inv-primary); box-shadow: 0 3px 0 color-mix(in srgb, var(--inv-primary) 70%, #000); }
.bb-event .inv-maps__frame { height: 180px; border-radius: 12px; }

/* countdown: little paper gift boxes with a lid and a bow */
.bb-countdown .inv-countdown { gap: clamp(.5rem, 2.6vw, .85rem); padding-top: .9rem; }
.bb-countdown .inv-countdown__item {
    --bb-cd: var(--inv-coral); --bb-cd-dark: var(--bb-coral-dark);
    position: relative; display: grid; place-content: center; width: clamp(4rem, 18.5vw, 4.6rem); min-width: 0; aspect-ratio: 1 / 1.02; padding: .7rem 0 0;
    border-radius: 8px 8px 10px 10px; color: #fff; background: var(--bb-cd); box-shadow: 0 3px 0 var(--bb-cd-dark), 0 14px 20px -12px rgb(42 26 6 / .5);
}
.bb-countdown .inv-countdown__item:nth-child(2) { --bb-cd: var(--inv-accent); --bb-cd-dark: var(--bb-accent-dark); color: var(--inv-text); }
.bb-countdown .inv-countdown__item:nth-child(3) { --bb-cd: var(--inv-sky); --bb-cd-dark: var(--bb-sky-dark); }
.bb-countdown .inv-countdown__item:nth-child(4) { --bb-cd: var(--inv-primary); --bb-cd-dark: color-mix(in srgb, var(--inv-primary) 65%, #000); }
/* the lid */
.bb-countdown .inv-countdown__item::before {
    content: ''; position: absolute; left: -4px; right: -4px; top: 0; height: 24%; border-radius: 6px;
    background: linear-gradient(90deg, transparent 43%, color-mix(in srgb, #fff 70%, transparent) 43% 57%, transparent 57%), var(--bb-cd-dark);
}
/* the bow */
.bb-countdown .inv-countdown__item::after {
    content: ''; position: absolute; left: 50%; top: -.85rem; width: 1.9rem; height: 1rem; margin-left: -.95rem; background: color-mix(in srgb, #fff 82%, var(--bb-cd));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 20'%3E%3Cpath d='M19 15C14 6 3 0 1 7c-2 7 9 9 18 8Zm0 0c5-9 16-15 18-8 2 7-9 9-18 8Z'/%3E%3Ccircle cx='19' cy='15' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 20'%3E%3Cpath d='M19 15C14 6 3 0 1 7c-2 7 9 9 18 8Zm0 0c5-9 16-15 18-8 2 7-9 9-18 8Z'/%3E%3Ccircle cx='19' cy='15' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bb-countdown .inv-countdown__value { font-variant-numeric: lining-nums tabular-nums; font-family: var(--bb-round); font-size: 1.75rem; font-weight: 600; line-height: 1; }
.bb-countdown .inv-countdown__label { margin-top: .1rem; font-family: var(--bb-round); font-size: .58rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.bb-countdown .inv-countdown__done { font-family: var(--bb-round); font-size: 1.3rem; font-weight: 600; color: var(--bb-title); }
.bb-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 2rem; }
.bb-countdown .inv-countdown__actions .inv-button {
    width: min(100%, 17rem); min-height: 2.75rem; padding: .6rem 1rem; font-family: var(--bb-round); font-size: .88rem; font-weight: 600;
    color: var(--bb-title); background: var(--bb-paper); box-shadow: 0 3px 0 rgb(42 26 6 / .12);
}
.bb-countdown .inv-countdown__actions .inv-button:first-child { color: #fff; background: var(--inv-coral); box-shadow: 0 3px 0 var(--bb-coral-dark); }
.bb-countdown .inv-cal {
    --inv-cal-bg: var(--bb-paper); --inv-cal-mark: var(--inv-coral);
    max-width: 19rem; margin: 2.6rem auto 0; border-radius: 20px;
    box-shadow: -8px 9px 0 var(--inv-accent), 0 22px 30px -18px rgb(42 26 6 / .5);
}
.bb-countdown .inv-cal__month { font-family: var(--bb-round); font-size: 1.35rem; font-weight: 600; color: var(--bb-title); }

/* speakers: the main one in a big round paper window, the others as compact rows */
.bb-speakers__list { display: grid; gap: .9rem; max-width: 25rem; margin: 0 auto; padding: 0; list-style: none; }
.bb-speaker {
    display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); align-items: center; gap: 1rem; padding: .8rem 1rem .8rem .8rem; border-radius: 18px;
    text-align: left; background: var(--bb-paper); box-shadow: var(--bb-lift);
}
.bb-speaker__window {
    position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 50%;
    border: 3px solid var(--inv-accent);
    background: radial-gradient(70% 50% at 50% 30%, color-mix(in srgb, var(--inv-leaf) 55%, transparent), transparent 70%), linear-gradient(170deg, var(--inv-sky), var(--inv-deep));
}
.bb-speaker__window img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.bb-speaker__letter { font-family: var(--bb-round); font-size: 1.8rem; font-weight: 600; color: #fff; }
.bb-speaker__role { margin: 0; font-family: var(--bb-round); font-size: .68rem; font-weight: 600; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; color: var(--bb-coral-ink); }
.bb-speaker__name { margin: .15rem 0 0; font-family: var(--bb-round); font-size: 1.22rem; font-weight: 600; line-height: 1.2; color: var(--bb-title); overflow-wrap: anywhere; }
.bb-speaker__topic { margin: .3rem 0 0; font-size: .92rem; line-height: 1.4; color: var(--bb-muted); }
.bb-speaker--main {
    grid-template-columns: 1fr; justify-items: center; gap: 0; padding: 1.4rem 1.1rem 1.4rem; text-align: center;
    box-shadow: -8px 9px 0 var(--inv-coral), 0 22px 30px -18px rgb(42 26 6 / .5);
}
.bb-speaker--main .bb-speaker__window {
    width: min(11rem, 54vw); border: 6px solid var(--bb-paper); outline: 4px solid var(--inv-accent); outline-offset: 0;
    filter: drop-shadow(0 10px 14px rgb(42 26 6 / .3));
}
.bb-speaker--main .bb-speaker__letter { font-size: 3.4rem; }
.bb-speaker--main .bb-speaker__text { margin-top: 1rem; }
.bb-speaker--main .bb-speaker__name { font-size: 1.55rem; }
.bb-speaker--main .bb-speaker__topic {
    display: inline-block; margin-top: .65rem; padding: .5rem 1rem; border-radius: 12px; font-size: 1rem; font-weight: 600; color: var(--inv-text);
    background: color-mix(in srgb, var(--inv-soft) 80%, #fff); transform: rotate(-1deg);
}

/* prayer: an arched paper panel on a sky sheet, three ornaments hanging over it from the section's top */
.bb-prayer { padding-top: 6.8rem; }
.bb-prayer__panel {
    position: relative; max-width: 22rem; margin: 0 auto; padding: 3rem 1.4rem 2.6rem; border-radius: 50% 50% 18px 18px / 7rem 7rem 18px 18px;
    color: var(--inv-text); background: var(--bb-paper);
    box-shadow: 8px 9px 0 var(--inv-sky), 0 22px 30px -18px rgb(0 0 0 / .6);
}
.bb-prayer__hangs { position: absolute; left: 50%; top: -6.8rem; display: flex; align-items: flex-start; gap: 1.6rem; transform: translateX(-50%); pointer-events: none; }
.bb-prayer__hang { width: 1.7rem; height: auto; transform-origin: 50% 0; }
.bb-prayer__hang--main { width: 2.4rem; }
.bb-prayer__eyebrow { margin: 0 0 .8rem; font-family: var(--bb-round); font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--bb-coral-ink); }
.bb-prayer__arabic { margin: 0 0 1rem; font-size: 1.5rem; text-wrap: balance; }
.bb-prayer__text { margin: 0; }
.bb-prayer__text p { margin: 0; font-family: var(--bb-serif); font-size: 1.06rem; line-height: 1.55; }

/* rundown: a paper string with pennant flags for the times, cream strips for the steps */
.bb-rundown__list { position: relative; max-width: 24rem; margin: 0 auto; padding: 0; list-style: none; text-align: left; }
.bb-rundown__list::before {
    content: ''; position: absolute; left: .5rem; top: .2rem; bottom: .6rem; width: 2px; transform-origin: top;
    background: repeating-linear-gradient(180deg, var(--bb-accent-dark) 0 6px, transparent 6px 10px);
}
.bb-rundown__item { --bb-flag: var(--inv-coral); --bb-flag-ink: #fff; position: relative; display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); align-items: start; column-gap: .7rem; padding: 0 0 1rem; }
.bb-rundown__item--sky { --bb-flag: var(--inv-sky); }
.bb-rundown__item--leaf { --bb-flag: var(--inv-primary); }
.bb-rundown__item--sun { --bb-flag: var(--inv-accent); --bb-flag-ink: var(--inv-text); }
.bb-rundown__item:last-child { padding-bottom: 0; }
.bb-rundown__time {
    position: relative; margin-top: .5rem; padding: .3rem .9rem .3rem .7rem; font-family: var(--bb-round); font-size: .86rem; font-weight: 600;
    font-variant-numeric: tabular-nums; color: var(--bb-flag-ink); background: var(--bb-flag);
    clip-path: polygon(0 0, 100% 0, 86% 50%, 100% 100%, 0 100%);
}
.bb-rundown__body { padding: .7rem .95rem .75rem; border-radius: 12px; background: var(--bb-paper); box-shadow: var(--bb-lift); }
.bb-rundown__body h3 { margin: 0; font-family: var(--bb-round); font-size: 1.06rem; font-weight: 600; line-height: 1.3; color: var(--bb-title); }
.bb-rundown__body p { margin: .1rem 0 0; font-size: .86rem; color: var(--bb-muted); }

/* charity: the heart of the page — "Buka bingkisan" */
.bb-charity { padding-bottom: 4.6rem; }
.bb-charity--photo { padding-top: 0; }
.bb-charity__photo {
    position: relative; z-index: -1; height: 15rem; margin: 0 -1.4rem -3.4rem; overflow: hidden;
    -webkit-mask: linear-gradient(180deg, #000 42%, transparent); mask: linear-gradient(180deg, #000 42%, transparent);
}
.bb-charity__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; opacity: .9; }
.bb-charity__title { margin: 0 auto; max-width: 18ch; font-family: var(--bb-round); font-size: 1.6rem; font-weight: 600; line-height: 1.2; color: #fff; text-wrap: balance; text-shadow: 0 3px 0 rgb(0 0 0 / .16); }
.bb-charity__text { margin-top: .8rem !important; color: var(--bb-cream-muted); font-size: .95rem; }
.bb-unwrap { margin-top: 1.4rem; }
.bb-unwrap__box {
    position: relative; display: block; width: min(15.5rem, 72vw); margin: 3.4rem auto 0; padding: 0; border: 0; cursor: pointer;
    background: none; -webkit-tap-highlight-color: transparent;
}
.bb-unwrap__box:focus-visible { outline: 3px solid var(--inv-shine); outline-offset: 6px; border-radius: 1rem; }
.bb-unwrap__gift { width: 100%; height: auto; filter: drop-shadow(0 18px 18px rgb(0 0 0 / .25)); }
.bb-unwrap__gift--still { width: min(13rem, 62vw); margin: 2.4rem auto 0; }
/* the pieces that move (SVG transforms on their own boxes) */
.bb-unwrap .bb-gift__bow, .bb-unwrap .bb-gift__lid, .bb-unwrap .bb-gift__band, .bb-unwrap .bb-gift__tag, .bb-unwrap .bb-gift__bit { transform-box: fill-box; transform-origin: 50% 50%; }
.bb-unwrap .bb-gift__bow { transition: transform .7s cubic-bezier(.3, .8, .3, 1), opacity .5s ease .15s; }
.bb-unwrap .bb-gift__tag { transition: transform .6s ease, opacity .4s ease; }
.bb-unwrap .bb-gift__band { transition: opacity .4s ease .2s; }
.bb-unwrap .bb-gift__lid { transform-origin: 0% 100%; transition: transform .8s cubic-bezier(.3, 1.35, .5, 1) .32s; }
.bb-unwrap .bb-gift__glow { transition: opacity .9s ease .5s; }
.bb-unwrap .bb-gift__bit { transition: transform .9s cubic-bezier(.3, 1.4, .5, 1), opacity .3s ease; transition-delay: .55s; }
.bb-unwrap .bb-gift__bit--2 { transition-delay: .6s; }
.bb-unwrap .bb-gift__bit--3 { transition-delay: .66s; }
.bb-unwrap .bb-gift__bit--4 { transition-delay: .72s; }
.bb-unwrap .bb-gift__bit--5 { transition-delay: .78s; }
/* open: the default state (and the state without JavaScript); armed = closed until tapped */
.bb-charity:not(.is-armed) .bb-gift__bow { transform: translate(34px, -60px) rotate(38deg) scale(.5); opacity: 0; }
.bb-charity:not(.is-armed) .bb-gift__tag { transform: translate(14px, 40px) rotate(30deg); opacity: 0; }
.bb-charity:not(.is-armed) .bb-gift__band { opacity: 0; }
.bb-charity:not(.is-armed) .bb-gift__lid { transform: translate(-2px, -16px) rotate(-12deg); }
.bb-charity:not(.is-armed) .bb-gift__glow { opacity: .85; }
.bb-charity:not(.is-armed) .bb-gift__bit--1 { transform: translate(-40px, -50px) rotate(-24deg) scale(1.3); }
.bb-charity:not(.is-armed) .bb-gift__bit--2 { transform: translate(2px, -66px) scale(1.4); }
.bb-charity:not(.is-armed) .bb-gift__bit--3 { transform: translate(42px, -52px) rotate(22deg) scale(1.3); }
.bb-charity:not(.is-armed) .bb-gift__bit--4 { transform: translate(-64px, -22px) scale(1.2); }
.bb-charity:not(.is-armed) .bb-gift__bit--5 { transform: translate(62px, -26px) rotate(-14deg) scale(1.2); }
.bb-charity.is-armed .bb-gift__bit { transform: translateY(16px) scale(0); opacity: 0; }
/* the tap marker sits on the bow */
.bb-unwrap .bb-tap__ring { top: 33%; }
.bb-unwrap .bb-tap__hand { top: 36%; }

/* what comes out of the box: the beneficiaries banner and the needs as small cards (collapsed while armed) */
.bb-unwrap__reveal { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .9s cubic-bezier(.3, .8, .3, 1) .45s; }
.bb-charity.is-armed .bb-unwrap__reveal { grid-template-rows: 0fr; }
.bb-unwrap__inner { min-height: 0; overflow: hidden; padding: .8rem .4rem 1rem; }
.bb-unwrap__banner {
    display: inline-flex !important; flex-direction: column; align-items: center; margin: .2rem auto 0 !important; padding: .55rem 2.1rem .6rem;
    font-family: var(--bb-round); line-height: 1.2; color: var(--inv-text); background: var(--inv-shine);
    clip-path: polygon(0 0, 100% 0, calc(100% - .9rem) 50%, 100% 100%, 0 100%, .9rem 50%);
    transition: opacity .6s ease .75s, transform .8s cubic-bezier(.3, 1.4, .5, 1) .75s;
}
.bb-unwrap__banner-label { font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--bb-coral-ink); }
.bb-unwrap__banner strong { font-size: 1.22rem; font-weight: 600; text-wrap: balance; }
.bb-unwrap__lead { margin: 1.2rem 0 .7rem !important; font-family: var(--bb-round); font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--inv-shine); transition: opacity .6s ease .9s; }
.bb-unwrap__needs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; max-width: 24rem; margin: 0 auto; padding: 0; list-style: none; }
.bb-unwrap__needs .bb-need:last-child:nth-child(odd) { grid-column: 1 / -1; }
.bb-need {
    --bb-need: var(--inv-coral); --r: -1.4deg;
    display: flex; align-items: flex-start; gap: .5rem; padding: .75rem .75rem .7rem; border-radius: 12px; text-align: left;
    font-size: .9rem; font-weight: 600; line-height: 1.35; color: var(--inv-text); background: var(--bb-paper);
    border-top: 5px solid var(--bb-need); box-shadow: 0 3px 0 rgb(0 0 0 / .14), 0 14px 18px -12px rgb(0 0 0 / .5);
    transform: rotate(var(--r));
    transition: opacity .5s ease, transform .8s cubic-bezier(.3, 1.4, .5, 1); transition-delay: calc(1s + var(--i) * .13s);
}
.bb-need:nth-child(even) { --r: 1.3deg; }
.bb-need--sky { --bb-need: var(--inv-sky); }
.bb-need--leaf { --bb-need: var(--inv-primary); }
.bb-need--sun { --bb-need: var(--inv-accent); }
.bb-need svg { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .1rem; fill: var(--bb-need); overflow: visible; }
.bb-charity.is-armed .bb-need { opacity: 0; transform: translateY(-3.5rem) scale(.4); transition-delay: 0s; }
.bb-charity.is-armed .bb-unwrap__banner { opacity: 0; transform: translateY(-2rem) scale(.6); transition-delay: 0s; }
.bb-charity.is-armed .bb-unwrap__lead { opacity: 0; transition-delay: 0s; }
.bb-charity__give { margin-top: 1.6rem; }
.bb-charity__hands { width: 6rem; margin: 0 auto .2rem; color: var(--inv-shine); }
.bb-charity__button {
    display: inline-flex; align-items: center; gap: .45rem; min-height: 2.9rem; padding: .6rem 1.7rem; text-decoration: none;
    font-family: var(--bb-round); font-weight: 600; color: #fff !important; background: var(--inv-coral) !important; border-radius: 999px;
    box-shadow: 0 4px 0 var(--bb-coral-dark), 0 16px 24px -12px rgb(0 0 0 / .5);
}

/* story: polaroids with washi tape beside the text, alternating; text-only chapters as paper notes */
.bb-story__list { display: grid; gap: 2.3rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.bb-story__item { display: grid; grid-template-columns: 42% minmax(0, 1fr); align-items: center; gap: 1.2rem; }
.bb-story__item--flip { grid-template-columns: minmax(0, 1fr) 42%; }
.bb-story__item--flip .bb-story__media { order: 2; transform: rotate(2.6deg); }
.bb-story__media { position: relative; padding: .45rem .45rem 1.5rem; background: var(--bb-paper); border-radius: 4px; transform: rotate(-2.6deg); box-shadow: var(--bb-lift); }
.bb-story__tape {
    position: absolute; z-index: 1; left: 50%; top: -.55rem; width: 3.8rem; height: 1rem; margin-left: -1.9rem; transform: rotate(-4deg);
    background: color-mix(in srgb, var(--inv-coral) 58%, transparent);
}
.bb-story__item--flip .bb-story__tape { background: color-mix(in srgb, var(--inv-sky) 60%, transparent); }
.bb-story__photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 28%; border-radius: 2px; }
.bb-story__when {
    display: inline-block; padding: .2rem .75rem; border-radius: 999px; font-family: var(--bb-round); font-size: .7rem; font-weight: 600; letter-spacing: .08em;
    color: #fff; background: var(--inv-coral);
}
.bb-story__item:nth-child(3n+2) .bb-story__when { background: var(--inv-sky); }
.bb-story__item:nth-child(3n) .bb-story__when { background: var(--inv-primary); }
.bb-story__body h3 { margin: .5rem 0 0; font-family: var(--bb-round); font-size: 1.28rem; font-weight: 600; line-height: 1.18; color: var(--bb-title); }
.bb-story__body p { margin: .35rem 0 0; font-size: .9rem; line-height: 1.55; color: var(--bb-muted); }
.bb-story__item--text { grid-template-columns: 2.8rem minmax(0, 1fr); align-items: start; gap: .9rem; padding: 1.15rem 1.2rem; border-radius: 16px; background: color-mix(in srgb, var(--inv-soft) 70%, #fff); box-shadow: var(--bb-lift); }
.bb-story__dot { position: relative; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; }
.bb-story__dot svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--inv-accent); overflow: visible; }
.bb-story__dot span { position: relative; padding-top: .2rem; font-family: var(--bb-round); font-size: 1rem; font-weight: 600; color: var(--inv-text); }

/* etiquette: a paper sheet on a coral sheet, pinned with a flower, rows with a small heart */
.bb-etiquette__sheet {
    position: relative; max-width: 24rem; margin: 0 auto; padding: 1.2rem 1.1rem .9rem; border-radius: 18px; background: var(--bb-paper);
    box-shadow: 8px 9px 0 var(--inv-coral), 0 22px 30px -18px rgb(42 26 6 / .5);
}
.bb-etiquette__flower { position: absolute; right: -1rem; top: -1.6rem; width: 3.6rem; }
.bb-etiquette__list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.bb-etiquette__list li { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); align-items: start; gap: .7rem; padding: .45rem .3rem; font-size: .93rem; line-height: 1.5; }
.bb-etiquette__list li + li { border-top: 2px dashed color-mix(in srgb, var(--inv-accent) 45%, transparent); padding-top: .65rem; }
.bb-etiquette__list svg { width: 1.1rem; height: 1.1rem; margin-top: .2rem; fill: var(--inv-coral); overflow: visible; }

/* gallery: cream paper prints turned a little */
.bb-gallery .inv-gallery { gap: .85rem; padding: .3rem; }
.bb-gallery .inv-gallery__item { padding: 5px; border-radius: 6px; background: var(--bb-paper); box-shadow: 0 3px 0 rgb(0 0 0 / .18), 0 16px 22px -14px rgb(0 0 0 / .7); transform: rotate(-1.6deg); }
.bb-gallery .inv-gallery__item:nth-child(even) { transform: rotate(1.5deg); }
.bb-gallery .inv-gallery__item img, .bb-gallery .inv-gallery__item video { border-radius: 3px; }

/* live streaming */
.bb-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;
    border-radius: 20px; color: #fff; text-align: left;
    background: radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, #fff 18%, transparent), transparent 70%), linear-gradient(140deg, var(--inv-sky), var(--inv-deep));
    box-shadow: 8px 9px 0 var(--inv-coral), 0 22px 30px -18px rgb(42 26 6 / .5);
}
.bb-stream__icon { display: grid; place-items: center; width: 3.3rem; height: 3.3rem; border-radius: 50%; color: var(--inv-text); background: var(--inv-accent); }
.bb-stream__icon .bb-icon { width: 1.65rem; height: 1.65rem; }
.bb-stream__title { margin: 0 0 .1rem; font-family: var(--bb-round); font-size: 1.5rem; font-weight: 600; line-height: 1.1; color: #fff; }
.bb-stream__text p { margin: 0; font-size: .88rem; color: var(--bb-cream-muted); }
.bb-stream__text .bb-stream__note { margin-top: .3rem; font-weight: 700; color: var(--inv-shine); }
.bb-stream__button { grid-column: 1 / -1; min-height: 2.75rem; font-family: var(--bb-round); color: var(--inv-text) !important; background: var(--inv-accent) !important; font-weight: 600; box-shadow: 0 3px 0 var(--bb-accent-dark); }

/* RSVP card: cream paper with a paper bunting along the top */
.bb-rsvp__card {
    position: relative; overflow: hidden; max-width: 25rem; margin: 0 auto; padding: 2.5rem 1.15rem 1.4rem; border-radius: 18px; color: var(--inv-text); background: var(--bb-paper);
    box-shadow: 8px 9px 0 var(--inv-accent), 0 22px 30px -18px rgb(42 26 6 / .5);
}
.bb-bunting {
    position: absolute; left: 0; right: 0; top: 0; height: 1.25rem;
    background: repeating-linear-gradient(90deg, var(--inv-coral) 0 26px, var(--inv-accent) 26px 52px, var(--inv-sky) 52px 78px, var(--inv-primary) 78px 104px);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 20'%3E%3Cpath d='M2 0H24L13 20Z'/%3E%3C/svg%3E") 0 0 / 26px 100% repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 20'%3E%3Cpath d='M2 0H24L13 20Z'/%3E%3C/svg%3E") 0 0 / 26px 100% repeat-x;
}
.bb-rsvp__intro { margin: 0 auto 1.1rem; max-width: 30ch; font-size: .92rem; color: var(--bb-muted); }
.bb-rsvp__sent { margin-bottom: 1rem; }
.bb-rsvp__heart { display: block; width: 4rem; height: 4rem; margin: 0 auto .5rem; fill: var(--inv-coral); overflow: visible; }
html.inv-anim .bb-rsvp__sent .bb-rsvp__heart { animation: bb-bounce .8s cubic-bezier(.34, 1.56, .64, 1) both; }
.bb-rsvp__thanks { margin: 0; font-family: var(--bb-script); font-size: 2.3rem; line-height: 1.1; color: var(--bb-coral-ink); }
.bb-rsvp__line { margin: .1rem 0 0; font-size: .92rem; color: var(--bb-muted); }
.bb-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-family: var(--bb-round); font-size: .86rem; font-weight: 600; color: var(--bb-title); }

/* gift: cream paper gift tags with a coloured band and a hole, two per row (odd last across) */
.bb-gift-section__hands { width: 6.4rem; margin: -1rem auto .6rem; color: var(--inv-shine); }
.bb-gift-section__intro { color: var(--bb-cream-muted) !important; }
.bb-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1.3rem; filter: drop-shadow(0 3px 0 rgb(0 0 0 / .16)) drop-shadow(0 14px 14px rgb(0 0 0 / .3)); }
.bb-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.bb-gift .inv-gift__account,
.bb-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.1rem .75rem 1rem; border-radius: 12px; color: var(--inv-text); background: var(--bb-paper);
}
.bb-gift .inv-gift__account { clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%, 0 16px); }
.bb-gift .inv-gift__account::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1.25rem; background: var(--inv-coral); }
.bb-gift .inv-gift__account:nth-child(3n+2)::before { background: var(--inv-sky); }
.bb-gift .inv-gift__account:nth-child(3n)::before { background: var(--inv-primary); }
/* the hole of the tag */
.bb-gift .inv-gift__account::after { content: ''; position: absolute; left: 50%; top: .3rem; width: .65rem; height: .65rem; margin-left: -.325rem; border-radius: 50%; background: var(--inv-deep); }
.bb-gift .inv-gift__account p, .bb-gift .inv-gift__address p { margin: 0; }
.bb-gift .inv-gift__bank { font-family: var(--bb-round); font-weight: 600; font-size: .9rem; color: var(--bb-title); }
.bb-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .4rem; background: #fff; }
.bb-gift .inv-gift__logo img { max-width: 5rem; }
.bb-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); }
.bb-gift .inv-gift__holder { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--bb-muted); overflow-wrap: anywhere; }
.bb-gift .inv-button { margin-top: .35rem; min-height: 2.25rem; padding: .35rem .9rem; font-family: var(--bb-round); font-size: .78rem; font-weight: 600; color: #fff; background: var(--inv-coral); box-shadow: 0 3px 0 var(--bb-coral-dark); }
.bb-gift .inv-gift__address { margin-top: .9rem; padding-top: 1.1rem; font-size: .88rem; box-shadow: 0 3px 0 rgb(0 0 0 / .16), 0 14px 18px -12px rgb(0 0 0 / .5); }
.bb-gift .inv-gift__address .inv-gift__holder { font-size: .74rem; }

/* co-hosts: names on coloured paper pills */
.bb-cohosts__list { display: flex; flex-direction: column; align-items: center; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.bb-cohost {
    --bb-pill: var(--inv-coral); --bb-pill-dark: var(--bb-coral-dark);
    max-width: 100%; padding: .5rem 1.3rem; border-radius: 999px; font-family: var(--bb-round); font-size: 1.04rem; font-weight: 600; line-height: 1.3;
    color: #fff; background: var(--bb-pill); box-shadow: 0 3px 0 var(--bb-pill-dark); text-wrap: balance;
}
.bb-cohost:nth-child(odd) { transform: rotate(-1deg); }
.bb-cohost:nth-child(even) { transform: rotate(1deg); }
.bb-cohost--sky { --bb-pill: var(--inv-sky); --bb-pill-dark: var(--bb-sky-dark); }
.bb-cohost--leaf { --bb-pill: var(--inv-primary); --bb-pill-dark: color-mix(in srgb, var(--inv-primary) 65%, #000); }

/* contacts */
.bb-contacts__list { display: grid; gap: .75rem; max-width: 24rem; margin: 0 auto; }
.bb-contact {
    display: grid; grid-template-columns: 2.9rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .55rem .55rem .55rem .6rem; border-radius: 999px;
    background: var(--bb-paper); text-align: left; box-shadow: var(--bb-lift);
}
.bb-contact__avatar { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; font-family: var(--bb-round); font-size: 1.3rem; font-weight: 600; color: #fff; background: var(--inv-coral); }
.bb-contact__avatar--sky { background: var(--inv-sky); }
.bb-contact__avatar--leaf { background: var(--inv-primary); }
.bb-contact p { margin: 0; }
.bb-contact__name { font-weight: 700; font-size: .96rem; line-height: 1.3; overflow-wrap: anywhere; }
.bb-contact__role { font-size: .8rem; color: var(--bb-muted); }
.bb-contact__phone { font-size: .85rem; }
.bb-contact__button { min-height: 2.5rem; padding: .45rem .95rem; font-family: var(--bb-round); font-size: .82rem; font-weight: 600; background: var(--inv-primary); box-shadow: 0 3px 0 color-mix(in srgb, var(--inv-primary) 65%, #000); }
.bb-contact__button .bb-icon { width: 1.05rem; height: 1.05rem; }

/* health protocol */
.bb-protocol__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.bb-protocol__list li { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border-radius: 999px; font-size: .86rem; font-weight: 600; background: var(--bb-paper); box-shadow: var(--bb-lift); }
.bb-protocol__list .bb-icon { width: 1rem; height: 1rem; color: var(--inv-primary); }
.bb-protocol__note { font-size: .9rem; color: var(--bb-muted); }

/* vendors (donatur & sponsor) */
.bb-vendors__list { max-width: 24rem; margin: 0 auto; padding: .3rem 1.15rem; list-style: none; border-radius: 18px; background: var(--bb-paper); box-shadow: -8px 9px 0 var(--inv-leaf), 0 22px 30px -18px rgb(42 26 6 / .5); }
.bb-vendor { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem 0; text-align: left; border-bottom: 2px dashed color-mix(in srgb, var(--inv-accent) 45%, transparent); }
.bb-vendor:last-child { border-bottom: 0; }
.bb-vendor__text { display: flex; flex-direction: column; min-width: 0; }
.bb-vendor__role { font-family: var(--bb-round); font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bb-coral-ink); }
.bb-vendor__name { font-family: var(--bb-round); font-size: 1.1rem; font-weight: 600; line-height: 1.25; color: var(--bb-title); overflow-wrap: anywhere; }
.bb-vendor__link {
    display: inline-flex; align-items: center; gap: .3rem; flex: none; min-height: 2.2rem; padding: .3rem .7rem; border-radius: 999px;
    font-size: .76rem; font-weight: 700; text-decoration: none; color: var(--bb-title); box-shadow: inset 0 0 0 1.5px var(--bb-line);
}
.bb-vendor__link .bb-icon { width: .95rem; height: .95rem; }

/* closing: compact — the photo melting into the dusk, three hanging ornaments, the thanks, the names, the kampung */
.bb-closing { padding: 2.6rem 1.5rem 5.9rem; }
.bb-closing--photo { padding-top: 0; }
.bb-closing__photo {
    position: relative; z-index: -1; height: min(22rem, calc(var(--inv-screen, 100svh) * .48)); margin: 0 -1.5rem; overflow: hidden;
    -webkit-mask: linear-gradient(180deg, #000 52%, transparent); mask: linear-gradient(180deg, #000 52%, transparent);
}
.bb-closing__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.bb-closing__body { position: relative; }
.bb-closing--photo .bb-closing__body { margin-top: -4.6rem; }
.bb-closing__hangs { display: flex; justify-content: center; align-items: flex-start; gap: 1.2rem; margin: 0 auto .3rem; }
.bb-closing__hang { width: 1.5rem; height: auto; transform-origin: 50% 0; }
.bb-closing__hang--main { width: 2.2rem; }
.bb-closing__title { margin: 0 0 .6rem; font-family: var(--bb-round); font-size: 2.1rem; font-weight: 600; line-height: 1.05; color: #fff; text-shadow: 0 3px 0 rgb(0 0 0 / .16); }
.bb-closing__title em { font-family: var(--bb-script); font-style: normal; font-weight: 400; font-size: 1.35em; color: var(--inv-shine); text-shadow: none; }
.bb-closing__message { margin: 0 auto; max-width: 32ch; font-size: .92rem; line-height: 1.58; color: var(--bb-cream-muted); }
.bb-closing__salam { margin: .7rem auto 0; max-width: 28ch; font-family: var(--bb-serif); font-size: 1.02rem; line-height: 1.38; color: var(--inv-shine); }
.bb-closing__signature { margin: .45rem auto 0; max-width: 30ch; font-size: .86rem; color: var(--bb-cream-muted); }
.bb-closing__names { margin: .5rem auto 0; max-width: 16ch; font-family: var(--bb-script); font-size: 2.35rem; word-spacing: .12em; line-height: 1.15; padding: 0 .15em .08em; color: var(--inv-shine); text-wrap: balance; text-shadow: 0 3px 0 rgb(0 0 0 / .18); }
.bb-closing__village { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; width: 100%; height: 84px; }

/* ---------- 6. forms (shared RSVP + wishes, restyled) ---------- */
.bb-main .inv-form { gap: 1rem; text-align: left; }
.bb-main .inv-form label, .bb-main .inv-form__choices legend { font-size: .84rem; font-weight: 700; color: var(--inv-text); }
.bb-main .inv-form input:not([type=radio]):not([type=checkbox]),
.bb-main .inv-form select,
.bb-main .inv-form textarea {
    width: 100%; min-height: 2.9rem; padding: .7rem .9rem; border: 0; border-radius: 12px;
    font: 400 .95rem/1.4 var(--bb-sans); color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-sky) 45%, transparent);
    transition: box-shadow .2s ease;
}
.bb-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;
}
.bb-main .inv-form input:not([type=radio]):focus-visible,
.bb-main .inv-form select:focus-visible,
.bb-main .inv-form textarea:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--inv-sky), 0 0 0 4px color-mix(in srgb, var(--inv-accent) 40%, transparent); }
.bb-main .inv-form button[type=submit] { width: 100%; min-height: 3rem; font-family: var(--bb-round); font-weight: 600; color: #fff; background: var(--inv-coral); box-shadow: 0 4px 0 var(--bb-coral-dark); }
.bb-main .inv-form .inv-button--outline { width: 100%; min-height: 2.75rem; }
.bb-main .inv-form__notice { text-align: center; }

/* the three answers as paper cards with icons (the radio dot is hidden but still focusable) */
.bb-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.bb-rsvp .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.bb-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: 14px; cursor: pointer; text-align: center;
    font-family: var(--bb-round); font-size: .86rem; font-weight: 600; line-height: 1.2; color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-sky) 40%, transparent), 0 3px 0 rgb(42 26 6 / .08);
    transition: background-color .25s ease, color .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.bb-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bb-rsvp .inv-form__choices label::before { content: ''; width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none; background: var(--inv-soft); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease; }
.bb-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(--bb-sky-dark); pointer-events: none;
    -webkit-mask: var(--bb-choice-icon) center / contain no-repeat; mask: var(--bb-choice-icon) center / contain no-repeat;
}
.bb-rsvp .inv-form__choices label:nth-of-type(1) { --bb-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"); }
.bb-rsvp .inv-form__choices label:nth-of-type(2) { --bb-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"); }
.bb-rsvp .inv-form__choices label:nth-of-type(3) { --bb-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"); }
.bb-rsvp .inv-form__choices label:has(input:checked) { color: #fff; background: var(--inv-coral); transform: translateY(-3px) rotate(-1deg); box-shadow: 0 4px 0 var(--bb-coral-dark), 0 12px 22px -12px rgb(0 0 0 / .5); }
.bb-rsvp .inv-form__choices label:has(input:checked)::before { background-color: rgb(255 255 255 / .25); transform: scale(1.1); }
.bb-rsvp .inv-form__choices label:has(input:checked)::after { color: #fff; }
.bb-rsvp .inv-form__choices label:has(input:focus-visible) { outline: 2px solid var(--inv-sky); outline-offset: 3px; }

/* wishes */
.bb-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.bb-wishes .inv-form { padding: 1.3rem 1.1rem; border-radius: 18px; background: var(--bb-paper); box-shadow: 8px 9px 0 var(--inv-coral), 0 22px 30px -18px rgb(42 26 6 / .5); }
.bb-wishes .inv-wishes__list { margin-top: 1.8rem; }
.bb-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list { padding: .55rem; border-radius: 16px; background: color-mix(in srgb, #fff 50%, transparent); }
.bb-wishes .inv-wish { padding: .75rem .9rem; border-radius: 12px; background: #fff; text-align: left; box-shadow: 0 2px 0 rgb(42 26 6 / .08); border-left: 4px solid var(--inv-coral); }
.bb-wishes .inv-wish:nth-child(3n+2) { border-left-color: var(--inv-sky); }
.bb-wishes .inv-wish:nth-child(3n) { border-left-color: var(--inv-primary); }
.bb-wishes .inv-wish__name { font-family: var(--bb-round); font-weight: 600; color: var(--bb-title); }
.bb-wishes .inv-wish__message { font-size: .9rem; line-height: 1.5; }
.bb-wishes .inv-wish__time { font-size: .72rem; color: var(--bb-muted); }

/* ---------- 7. shared components ---------- */
.bb-main .inv-button { font-weight: 600; }
body .inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--inv-deep) 95%, transparent);
    --inv-nav-text: color-mix(in srgb, #fff 72%, transparent);
    --inv-nav-active: var(--inv-shine);
    font-family: var(--bb-round);
}

/* ---------- 8. screen sizes ---------- */
/* the cover in px steps per screen height (never svh: Chrome on iPhone sizes it to the whole screen) */
@media (max-height: 800px) {
    .bb-cover { --bb-frame-w: 14rem; }
}
@media (max-height: 740px) {
    .bb-cover { --bb-frame-w: 12.4rem; --bb-village-h: 96px; padding-top: 1.1rem; padding-bottom: 1.3rem; }
    .bb-cover__host { margin-bottom: 1.9rem; }
    .bb-cover__title { font-size: 1.9rem; margin-top: .8rem; }
    .bb-cover__quote { font-size: .94rem; margin-top: .4rem; }
    .bb-cover__guest { margin-top: .85rem; }
    .bb-cover__open { margin-top: .8rem; }
    .bb-cover__hang { width: 2.3rem; }
    .bb-cover__hang--l1 { left: -3rem; }
    .bb-cover__hang--r1 { right: -2.9rem; }
}
@media (max-height: 680px) {
    .bb-cover { --bb-frame-w: 10.8rem; --bb-village-h: 82px; padding-top: .9rem; padding-bottom: 1.1rem; }
    .bb-cover__host { font-size: .66rem; margin-bottom: 1.6rem; }
    .bb-cover__title { font-size: 1.72rem; }
    .bb-cover__tag { font-size: .9rem; }
    .bb-cover__hijri { font-size: .88rem; }
    .bb-cover__quote { font-size: .88rem; line-height: 1.32; }
    .bb-cover__guest { padding: .42rem .85rem .4rem; }
    .bb-cover__guest-name { font-size: 1.1rem; }
    .bb-cover__open { min-height: 2.75rem; padding: .55rem 1.6rem; }
    .bb-cover__hang { width: 2.1rem; }
    .bb-cover__hang--l2, .bb-cover__hang--r2 { width: 1.9rem; }
}
@media (max-height: 620px) {
    .bb-cover { --bb-frame-w: 9.4rem; }
    .bb-cover__title { font-size: 1.55rem; }
    .bb-cover__quote { font-size: .84rem; }
}
@media (max-width: 360px) {
    .bb-cover__title { font-size: 1.72rem; }
    .bb-cover__hang--l1 { left: -2.8rem; }
    .bb-cover__hang--r1 { right: -2.7rem; }
}

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

/* ---------- 9. motion ---------- */
@keyframes bb-bounce { 0% { transform: scale(0); } 55% { transform: scale(1.15); } 75% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes bb-zoom-out { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes bb-fan-a { from { transform: none; opacity: 0; } to { transform: rotate(-5.5deg) translate(-4px, 6px); opacity: 1; } }
@keyframes bb-fan-b { from { transform: none; opacity: 0; } to { transform: rotate(4deg) translate(5px, 3px); opacity: 1; } }
@keyframes bb-rise { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes bb-pop { 0% { opacity: 0; transform: translateX(-50%) scale(.2) rotate(-20deg); } 70% { opacity: 1; transform: translateX(-50%) scale(1.12) rotate(4deg); } 100% { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes bb-drop { from { opacity: 0; transform: translateY(-3rem); } to { opacity: 1; transform: none; } }
@keyframes bb-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes bb-hills { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bb-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(14px); } }
@keyframes bb-twinkle { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes bb-breathe { 0%, 100% { opacity: .7; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes bb-ping { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes bb-tap { 0%, 100% { transform: translate(0, 0) scale(1); } 45% { transform: translate(-3px, -5px) scale(.92); } }
@keyframes bb-wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-3deg); } 40% { transform: rotate(3deg); } 60% { transform: rotate(-2deg); } 80% { transform: rotate(1deg); } }
@keyframes bb-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* cover (≤ 2.5 s, once): the sheets fan out, the photo settles, the bow pops on, the ornaments drop in and sway, the
   hills rise; then a living ground: the light breathes, the clouds drift, the stars twinkle */
html.inv-anim .bb-frame--cover .bb-frame__layer--a { animation: bb-fan-a .8s cubic-bezier(.2, .8, .3, 1) .25s both; }
html.inv-anim .bb-frame--cover .bb-frame__layer--b { animation: bb-fan-b .8s cubic-bezier(.2, .8, .3, 1) .4s both; }
html.inv-anim .bb-frame--cover .bb-frame__window { animation: bb-rise .8s cubic-bezier(.2, .7, .2, 1) .05s both; }
html.inv-anim .bb-frame--cover .bb-frame__photo { animation: bb-zoom-out 1.4s cubic-bezier(.2, .7, .2, 1) .05s both; }
html.inv-anim .bb-frame--cover .bb-frame__ribbon { animation: bb-rise .6s ease .6s both; }
html.inv-anim .bb-frame__bow { animation: bb-pop .7s cubic-bezier(.3, 1.3, .5, 1) .75s both; }
html.inv-anim .bb-cover__hang { animation: bb-drop .9s cubic-bezier(.3, 1.3, .5, 1) .45s both, bb-sway 5s ease-in-out 1.4s infinite; }
html.inv-anim .bb-cover__hang--l2 { animation-delay: .6s, 2s; }
html.inv-anim .bb-cover__hang--r1 { animation-delay: .52s, 1.7s; }
html.inv-anim .bb-cover__hang--r2 { animation-delay: .68s, 2.3s; }
html.inv-anim .bb-cover__village { animation: bb-hills 1s cubic-bezier(.2, .8, .3, 1) .2s both; }
html.inv-anim .bb-cover__art::before { animation: bb-breathe 5s ease-in-out infinite; }
html.inv-anim .bb-cover__cloud { animation: bb-drift 9s ease-in-out infinite; }
html.inv-anim .bb-cover__cloud--b { animation-duration: 11s; animation-direction: reverse; }
html.inv-anim .bb-cover__star, html.inv-anim .bb-scene-stars svg { animation: bb-twinkle 2.8s ease-in-out var(--d, 0s) infinite; }

/* hanging ornaments sway everywhere */
html.inv-anim :is(.bb-card__hang, .bb-garland__item, .bb-prayer__hang, .bb-closing__hang) { animation: bb-sway 5.5s ease-in-out infinite; }
html.inv-anim .bb-garland__item:nth-child(even), html.inv-anim .bb-prayer__hang--main { animation-delay: -2.4s; }

/* the gift waits with a small wiggle until it is opened */
html.inv-anim .bb-charity.is-armed .bb-unwrap__gift { transform-origin: 50% 90%; animation: bb-wiggle 2.6s ease-in-out 1s infinite; }

/* the tap marker: rings ping outward, the hand taps */
html.inv-anim .bb-tap__ring { animation: bb-ping 1.8s ease-out infinite; }
html.inv-anim .bb-tap__ring--late { animation-delay: .9s; }
html.inv-anim .bb-tap__hand { animation: bb-tap 1.2s ease-in-out infinite; }
html:not(.inv-anim) .bb-tap__ring { opacity: .6; }

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

@media (prefers-reduced-motion: reduce) {
    .bb-cover, .bb-cover--leave, .bb-cover__inner, .bb-unwrap *, .bb-unwrap__reveal, .bb-need { transition: none !important; }
}

/* ---------- 10. intro scene "Bingkisan Kertas" (scene.json + sections/_scene) ----------
   The intro is teleported to <body>: everything here stands on its own classes. */
.bb-scene-stars { position: absolute; inset: 0; }
.bb-scene-stars svg { position: absolute; fill: var(--inv-shine); }
.bb-scene-fit { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.bb-scene-fit--bottom { align-items: flex-end; }
.bb-scene-fit > svg { width: 100%; height: 100%; overflow: visible; }
.bb-scene-cloud { fill: color-mix(in srgb, #fff 88%, var(--inv-sky)); }
.bb-scene-burst__glow { fill: var(--inv-shine); opacity: .55; filter: blur(16px); }
.bb-scene-hang { position: absolute; inset: 0; display: flex; justify-content: center; }
.bb-scene-hang__art { width: auto; height: 100%; --bb-string: color-mix(in srgb, var(--inv-shine) 70%, #fff); }
/* the name card: cream paper on a coral sheet with a stitched border */
body.bb-body .inv-intro--scene .inv-scene__card {
    top: 67%;
    -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none; aspect-ratio: auto;
    padding: 1.5rem 1.2rem 1.25rem; border-radius: 18px; background: var(--bb-paper);
    box-shadow: inset 0 0 0 8px var(--bb-paper), inset 0 0 0 9.6px color-mix(in srgb, var(--inv-accent) 70%, transparent), 8px 9px 0 var(--inv-coral), 0 24px 40px -14px rgb(0 0 0 / .55);
}
body.bb-body .inv-scene__card .inv-intro__label { font-family: var(--bb-round); font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--bb-coral-ink); }
body.bb-body .inv-scene__card .inv-intro__names { color: var(--bb-title); line-height: 1.1; overflow-wrap: anywhere; }
body.bb-body .inv-scene__card .inv-intro__rule { height: 2px; width: 3rem; border-radius: 2px; background: var(--inv-accent); }
body.bb-body .inv-scene__card .inv-intro__date { font-family: var(--bb-round); font-weight: 500; font-size: .95rem; color: var(--bb-muted); white-space: nowrap; }