/*
 * Template "Boneka Beruang" (Aqiqah & Kelahiran): a cozy nursery with a plush teddy bear.
 * Coffee brown + caramel on warm cream, with painted wooden toy blocks (blue, orange, green, rose, natural
 * wood) as the colour accents. Signature pieces: the nickname on wooden ABC blocks (sections/_blocks, they
 * tumble down once on the cover), the plush teddy (sections/_teddy: hugging the stitched pillow frame of the
 * cover photo, peeking over cards elsewhere), stitched dashed seams on cards and sections, a faint knitted
 * texture. Mobile-first, one column (~460px) on a brown knitted backdrop on wide screens.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (coffee / blue / sage / rose: titles, buttons, felt patches)
 *   --inv-accent (caramel / orange: the co-hosts band, small accents)
 *   --inv-background (warm cream)   --inv-text   --inv-deep (the brown sections)   --inv-shine (honey on brown)
 *   --inv-soft (the soft blanket tone, chips)
 * The toy-block paints (--bb-blue … --bb-wood) and the teddy's fur stay the same in every variant.
 *
 * Section tones (set on each section in its partial): .bb-tone--light (cream), --soft (blanket), --deep (brown),
 * --caramel (an accent band). Every section is a quilt panel: a dashed seam runs just inside its edge.
 *
 * Motion only runs with html.inv-anim (set by <x-inv.head> unless the guest prefers reduced motion);
 * without it everything is shown finished.
 *
 * Contents: 1 base · 2 section tones & photo backgrounds · 3 shared pieces (heading, blocks, teddy, chips) ·
 *           4 cover · 5 sections in page order · 6 forms (RSVP, wishes) · 7 shared components ·
 *           8 screen sizes · 9 motion
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Karamel" variant (the variant's colours override these) */
    --inv-primary: #6b4524;
    --inv-accent: #b5793c;
    --inv-background: #f3e6d3;
    --inv-text: #2b1a0c;
    --inv-deep: #4a2c14;
    --inv-shine: #f3c27e;
    --inv-soft: #e8d4b6;
    --inv-radius: 18px;

    --bb-display: 'Baloo 2', 'Nunito', system-ui, sans-serif;
    --bb-sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bb-col: 460px;

    /* the painted toy blocks (fixed: they are the toys, not the theme colour) */
    --bb-blue: #6593c0;
    --bb-orange: #e6a35a;
    --bb-green: #689a63;
    --bb-rose: #d07b7f;
    --bb-wood: #e8c592;
    --bb-ink: #3b230f;

    --bb-paper: color-mix(in srgb, #fff 72%, var(--inv-background));
    --bb-title: color-mix(in srgb, var(--inv-primary) 82%, var(--inv-deep));
    --bb-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    --bb-cream-muted: color-mix(in srgb, var(--inv-background) 86%, transparent);
    --bb-ring: color-mix(in srgb, var(--inv-primary) 20%, transparent);
    --bb-stitch: color-mix(in srgb, var(--inv-primary) 50%, transparent);
    --bb-stitch-light: color-mix(in srgb, var(--inv-background) 45%, transparent);
    --bb-drop: 0 22px 40px -22px color-mix(in srgb, var(--inv-deep) 75%, transparent);

    /* a knitted texture: rows of little "V" stitches (a mask, so it takes any colour) */
    --bb-knit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpath d='M1.5 1.5 7 10.5 12.5 1.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

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

*, *::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%; }
/* whatever shows below the closing (the slim credit, the room for the bottom menu) stays brown */
body.bb-body { background: var(--inv-deep); }
a { color: var(--inv-primary); }

.bb-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.bb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.bb-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 */
.bb-main { max-width: var(--bb-col); margin: 0 auto; }
.bb-branding { max-width: var(--bb-col); margin: 0 auto; }

.bb-section { position: relative; isolation: isolate; overflow: hidden; padding: 4.3rem 1.45rem; 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(--inv-primary); }
.bb-amp { font-family: var(--bb-display); font-weight: 600; }

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

/* light: warm cream with a honey glow and the faint knit */
.bb-tone--light {
    background:
        radial-gradient(70% 30% at 100% 0%, color-mix(in srgb, var(--inv-shine) 28%, transparent), transparent 75%),
        radial-gradient(70% 32% at 0% 100%, color-mix(in srgb, var(--inv-soft) 75%, transparent), transparent 75%),
        var(--inv-background);
}
/* soft: the blanket colour */
.bb-tone--soft {
    background:
        radial-gradient(80% 40% at 50% 0%, color-mix(in srgb, #fff 40%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-soft), color-mix(in srgb, var(--inv-soft) 60%, var(--inv-background)));
}
.bb-tone--light::before, .bb-tone--soft::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-primary); opacity: .055;
    -webkit-mask: var(--bb-knit) center top / 14px 12px repeat; mask: var(--bb-knit) center top / 14px 12px repeat;
}

/* deep: the brown blanket with a warm glow */
.bb-tone--deep {
    color: var(--inv-background);
    background:
        radial-gradient(90% 45% at 10% 0%, color-mix(in srgb, var(--inv-primary) 85%, transparent), transparent 75%),
        radial-gradient(60% 34% at 100% 100%, color-mix(in srgb, var(--inv-accent) 30%, transparent), transparent 75%),
        var(--inv-deep);
}
.bb-tone--deep::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-shine); opacity: .07;
    -webkit-mask: var(--bb-knit) center top / 14px 12px repeat; mask: var(--bb-knit) center top / 14px 12px repeat;
}
.bb-tone--deep a:not(.inv-button) { color: var(--inv-shine); }
.bb-tone--deep .bb-arabic { color: var(--inv-shine); }

/* caramel: a full accent band */
.bb-tone--caramel {
    color: var(--inv-text);
    background:
        radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, #fff 28%, transparent), transparent 75%),
        var(--inv-accent);
}
.bb-tone--caramel::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: #fff; opacity: .12;
    -webkit-mask: var(--bb-knit) center top / 14px 12px repeat; mask: var(--bb-knit) center top / 14px 12px repeat;
}

/* every section is a quilt panel: a dashed seam just inside its edge */
.bb-section::after {
    content: ''; position: absolute; inset: 9px; z-index: -1; pointer-events: none;
    border: 1.5px dashed var(--bb-stitch); border-radius: 26px; opacity: .55;
}
.bb-tone--deep::after { border-color: var(--bb-stitch-light); opacity: .5; }
.bb-tone--caramel::after { border-color: color-mix(in srgb, #fff 70%, transparent); opacity: .7; }

/* a client photo behind a section, under a strong gradient of the section's own tone */
.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 45%; --inv-parallax: 40px; }
.bb-bgphoto::after { content: ''; position: absolute; inset: 0; }
.bb-tone--light .bb-bgphoto::after, .bb-tone--soft .bb-bgphoto::after {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--inv-background) 90%, transparent),
        color-mix(in srgb, var(--inv-background) 78%, transparent) 45%,
        color-mix(in srgb, var(--inv-background) 94%, transparent));
}
.bb-tone--deep .bb-bgphoto::after {
    background:
        radial-gradient(90% 50% at 20% 10%, color-mix(in srgb, var(--inv-primary) 45%, transparent), transparent),
        linear-gradient(180deg,
            color-mix(in srgb, var(--inv-deep) 86%, transparent),
            color-mix(in srgb, var(--inv-deep) 70%, transparent) 45%,
            color-mix(in srgb, var(--inv-deep) 93%, transparent));
}

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

/* section heading: a letter-spaced eyebrow after a tiny toy block, a rounded title, the last word on a felt patch */
.bb-heading { margin: 0 0 2rem; }
.bb-heading--left { text-align: left; }
.bb-heading__eyebrow {
    display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 .55rem;
    font-size: .7rem; font-weight: 900; line-height: 1.2; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-primary);
}
.bb-heading__eyebrow::before, .bb-heading__eyebrow::after {
    content: ''; width: .62rem; height: .62rem; flex: none; border-radius: 3px; transform: rotate(-10deg);
    background: var(--bb-orange); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .18), inset 0 1px 0 rgb(255 255 255 / .4);
}
.bb-heading__eyebrow::after { background: var(--bb-blue); transform: rotate(8deg); }
.bb-heading--left .bb-heading__eyebrow::after { display: none; }
.bb-heading__title {
    margin: 0; font-family: var(--bb-display); font-size: 2.35rem; font-weight: 700; line-height: 1.12;
    letter-spacing: -.01em; color: var(--bb-title); text-wrap: balance;
}
.bb-heading__title em {
    position: relative; display: inline-block; margin-left: .05em; padding: .08em .34em 0; border-radius: .3em;
    font-style: normal; color: #fff; transform: rotate(-2deg);
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 82%, #fff), var(--inv-primary));
    box-shadow: 0 .09em 0 color-mix(in srgb, var(--inv-primary) 65%, #000), 0 .3em .5em -.25em color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.bb-heading__title em::after {
    content: ''; position: absolute; inset: .11em; border: 1.5px dashed color-mix(in srgb, #fff 60%, transparent); border-radius: .22em; pointer-events: none;
}
.bb-tone--deep .bb-heading__eyebrow { color: var(--inv-shine); }
.bb-tone--deep .bb-heading__title { color: #fff; }
.bb-tone--deep .bb-heading__title em {
    color: var(--inv-deep); background: linear-gradient(180deg, color-mix(in srgb, var(--inv-shine) 70%, #fff), var(--inv-shine));
    box-shadow: 0 .09em 0 color-mix(in srgb, var(--inv-shine) 60%, #5a3010), 0 .3em .5em -.25em rgb(0 0 0 / .5);
}
.bb-tone--deep .bb-heading__title em::after { border-color: color-mix(in srgb, var(--inv-deep) 40%, transparent); }
.bb-tone--caramel .bb-heading__eyebrow, .bb-tone--caramel .bb-heading__title { color: var(--inv-text); }
.bb-tone--caramel .bb-heading__title em { color: var(--inv-text); background: var(--bb-paper); box-shadow: 0 .09em 0 color-mix(in srgb, var(--inv-accent) 55%, #3a200c); }
.bb-tone--caramel .bb-heading__title em::after { border-color: color-mix(in srgb, var(--inv-accent) 70%, transparent); }

/* icons */
.bb-icon { width: 1.15rem; height: 1.15rem; flex: none; }

/* felt chips */
.bb-chip {
    position: relative; display: inline-block; padding: .26rem .8rem; border-radius: 10px; font-size: .76rem; font-weight: 800; line-height: 1.4;
    color: var(--inv-deep); background: var(--inv-soft); box-shadow: inset 0 0 0 1.5px var(--bb-ring);
}
.bb-chip--primary { color: #fff; background: var(--inv-primary); box-shadow: none; }
.bb-chip--primary::after { content: ''; position: absolute; inset: 3px; border: 1px dashed rgb(255 255 255 / .5); border-radius: 7px; }

/* the painted wooden toy block: paint over faint grain, light from the top left, a carved inner border and
   the block's depth below; --c is the paint, --r the tilt, --bb-s the size */
.bb-block, .bb-birth__cube, .bb-countdown .inv-countdown__item {
    --c: var(--bb-blue);
    --c-hi: color-mix(in srgb, var(--c) 68%, #fff);
    --c-lo: color-mix(in srgb, var(--c) 74%, #3b2410);
    --ink: #fff;
    position: relative; color: var(--ink);
    background:
        radial-gradient(120% 90% at 22% 12%, rgb(255 255 255 / .34), transparent 55%),
        repeating-linear-gradient(96deg, transparent 0 5px, rgb(80 40 10 / .05) 5px 6px, transparent 6px 11px, rgb(255 255 255 / .06) 11px 12.5px),
        linear-gradient(180deg, var(--c-hi), var(--c) 46%, var(--c-lo));
    box-shadow:
        inset 0 2px 0 rgb(255 255 255 / .5), inset 2px 0 0 rgb(255 255 255 / .2),
        inset 0 -3px 0 rgb(0 0 0 / .16), inset -2px 0 0 rgb(0 0 0 / .08),
        0 4px 0 var(--c-lo),
        0 10px 14px -6px rgb(40 20 5 / .45);
}
.bb-block--blue { --c: var(--bb-blue); }
.bb-block--orange { --c: var(--bb-orange); --ink: var(--bb-ink); }
.bb-block--green { --c: var(--bb-green); }
.bb-block--rose { --c: var(--bb-rose); }
/* natural wood: visible grain rings, the letter painted in the theme colour */
.bb-block--wood {
    --c: var(--bb-wood); --ink: var(--inv-primary);
    background:
        radial-gradient(120% 90% at 22% 12%, rgb(255 255 255 / .38), transparent 55%),
        repeating-radial-gradient(ellipse 140% 55% at 30% 125%, transparent 0 4px, rgb(120 70 25 / .13) 4px 5.4px, transparent 5.4px 8px),
        linear-gradient(180deg, var(--c-hi), var(--c) 46%, var(--c-lo));
}

.bb-block {
    --bb-s: 3rem;
    display: inline-grid; place-items: center; flex: none; width: var(--bb-s); height: var(--bb-s);
    border-radius: calc(var(--bb-s) * .17); transform: rotate(var(--r, 0deg));
    box-shadow:
        inset 0 2px 0 rgb(255 255 255 / .5), inset 2px 0 0 rgb(255 255 255 / .2),
        inset 0 -3px 0 rgb(0 0 0 / .16), inset -2px 0 0 rgb(0 0 0 / .08),
        0 calc(var(--bb-s) * .075) 0 var(--c-lo),
        0 calc(var(--bb-s) * .2) calc(var(--bb-s) * .2) calc(var(--bb-s) * -.08) rgb(40 20 5 / .5);
}
/* the carved border inside the face */
.bb-block::before {
    content: ''; position: absolute; inset: 12%; border-radius: calc(var(--bb-s) * .1); pointer-events: none;
    box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .45), 0 1px 0 rgb(0 0 0 / .1), inset 0 1px 0 rgb(0 0 0 / .12);
}
.bb-block--orange::before, .bb-block--wood::before { box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .55), inset 0 1px 0 rgb(90 50 15 / .2); }
.bb-block__face {
    position: relative; display: block; padding-top: .09em;
    font-family: var(--bb-display); font-size: calc(var(--bb-s) * .6); font-weight: 800; line-height: 1;
    text-shadow: 0 -1px 0 rgb(0 0 0 / .22), 0 1.5px 0 rgb(255 255 255 / .3);
}
.bb-block--orange .bb-block__face, .bb-block--wood .bb-block__face { text-shadow: 0 1.5px 0 rgb(255 255 255 / .45), 0 -1px 0 rgb(90 50 15 / .25); }
.bb-block__face svg { display: block; width: calc(var(--bb-s) * .5); height: calc(var(--bb-s) * .5); fill: currentColor; filter: drop-shadow(0 1.5px 0 rgb(0 0 0 / .18)); }

/* names on blocks (sections/_blocks): the size follows the width (container) and the longest row (--bb-n) */
.bb-blocks {
    --bb-gap: clamp(.22rem, 1.4cqi, .4rem); --bb-max: 3.3rem;
    container-type: inline-size; display: flex; flex-direction: column; align-items: center; gap: .55rem; width: 100%;
}
.bb-blocks .bb-block { --bb-s: min(var(--bb-max), calc((100cqi - (var(--bb-n) - 1) * var(--bb-gap)) / var(--bb-n) - 3px)); }
.bb-blocks__row { display: flex; justify-content: center; align-items: flex-end; gap: var(--bb-gap); }
.bb-blocks__gap { width: calc(var(--bb-gap) * 1.6); }
/* the round wooden bead between twin names */
.bb-blocks__amp {
    display: grid; place-items: center; width: 1.9rem; height: 1.9rem; margin: -.1rem 0; border-radius: 50%;
    font-family: var(--bb-display); font-weight: 800; font-size: 1.05rem; line-height: 1; padding-top: .12em; color: var(--inv-primary);
    background: radial-gradient(circle at 35% 30%, #fff6e6, var(--bb-wood) 55%, color-mix(in srgb, var(--bb-wood) 70%, #6b4220));
    box-shadow: 0 3px 6px -2px rgb(40 20 5 / .45);
}

/* three icon blocks in a little tower (sections/_toys) */
.bb-toys { display: grid; grid-template-columns: auto auto; justify-content: center; column-gap: .15rem; }
.bb-toys .bb-block { --bb-s: 2.6rem; }
.bb-toys__top { grid-column: 1 / -1; justify-self: center; margin-bottom: .1rem; }

/* the teddy (sections/_teddy) */
.bb-teddy { display: block; overflow: visible; }
.bb-teddy__stitch { fill: none; stroke: #6a3f1c; stroke-width: .75; stroke-dasharray: 1.7 1.4; stroke-linecap: round; opacity: .65; }
.bb-teddy__stitch--fine { stroke-width: .55; stroke-dasharray: 1.2 1.1; opacity: .45; }
.bb-teddy__mouth { fill: none; stroke: #3a2312; stroke-width: .95; stroke-linecap: round; }
.bb-teddy__bow-stitch { fill: none; stroke: #fff; stroke-width: .5; stroke-dasharray: 1 .9; opacity: .6; }
.bb-teddy__ring { fill: none; stroke: url(#bb-felt); stroke-width: 7; }
.bb-teddy__ring-shadow { fill: none; stroke: #3b2410; stroke-width: 8.5; opacity: .2; }
.bb-teddy__ring-edge { fill: none; stroke: #7a4d26; stroke-width: .7; opacity: .45; }
.bb-teddy__stitch--ring { stroke: var(--inv-primary); stroke-width: .6; stroke-dasharray: 2 1.6; opacity: .7; }

/* ---------- 4. cover ---------- */
.bb-cover {
    --art: min(84vw, 21rem, 38svh);
    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.6rem 1.25rem 1.7rem;
    isolation: isolate; color: var(--inv-text);
    background:
        radial-gradient(60% 34% at 50% 26%, color-mix(in srgb, var(--inv-shine) 45%, transparent), transparent 72%),
        radial-gradient(70% 34% at 100% 100%, color-mix(in srgb, var(--inv-soft) 95%, transparent), transparent 75%),
        radial-gradient(60% 30% at 0% 0%, color-mix(in srgb, var(--inv-soft) 80%, transparent), transparent 75%),
        var(--inv-background);
    transition: opacity .9s ease;
}
.bb-cover::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .06; background: var(--inv-primary);
    -webkit-mask: var(--bb-knit) center top / 14px 12px repeat; mask: var(--bb-knit) center top / 14px 12px repeat;
}
/* a stitched quilt seam around the whole cover */
.bb-cover::after {
    content: ''; position: fixed; inset: 9px; z-index: -1; pointer-events: none;
    border: 1.5px dashed var(--bb-stitch); border-radius: 26px; opacity: .55;
}
.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); }

/* cover.title on a stitched felt label */
.bb-cover__title { margin: 0 0 .7rem; }
.bb-cover__title span {
    position: relative; display: inline-block; padding: .42rem 1.05rem .4rem; border-radius: 10px;
    font-size: .7rem; font-weight: 900; line-height: 1.2; letter-spacing: .22em; text-transform: uppercase;
    color: #fff; background: var(--inv-primary); box-shadow: 0 3px 0 color-mix(in srgb, var(--inv-primary) 65%, #000);
}
.bb-cover__title span::after { content: ''; position: absolute; inset: 3px; border: 1px dashed rgb(255 255 255 / .55); border-radius: 7px; }

/* the art: the teddy's body behind, the photo in its pillow frame, the ring + head + paws + feet in front.
   Frame = 100 × 110 at (14, 56) of the 128 × 180 drawing */
.bb-cover__art { position: relative; width: var(--art); aspect-ratio: 128 / 180; flex: none; }
.bb-cover__art > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bb-cover__frame {
    position: absolute; left: 10.9375%; top: 31.1111%; width: 78.125%; height: 61.1111%;
    overflow: hidden; border-radius: 22% / 20%;
    background: linear-gradient(170deg, color-mix(in srgb, var(--inv-primary) 80%, #fff), var(--inv-deep));
}
.bb-cover__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.bb-cover__empty { position: absolute; inset: 0; display: grid; place-items: center; }
.bb-cover__empty::before, .bb-baby__empty::before {
    content: ''; position: absolute; inset: 0; background: #fff; opacity: .1;
    -webkit-mask: var(--bb-knit) center / 14px 12px repeat; mask: var(--bb-knit) center / 14px 12px repeat;
}
.bb-cover__initials { --bb-max: 4.6rem; width: 80%; }

.bb-cover__blocks { margin-top: .35rem; width: min(100%, 21rem); --bb-max: 3.2rem; }
.bb-cover--many .bb-cover__blocks { --bb-max: 2.4rem; gap: .3rem; }
/* twins and triplets: the rows of blocks need room, so the teddy steps down */
.bb-cover.bb-cover--many { --art: min(76vw, 19rem, 32svh); }
.bb-cover.bb-cover--three { --art: min(64vw, 16rem, 26svh); }
.bb-cover--three .bb-cover__blocks { --bb-max: 2.1rem; gap: .2rem; }
.bb-cover--many .bb-blocks__amp { width: 1.5rem; height: 1.5rem; font-size: .9rem; }

.bb-cover__text { display: flex; flex-direction: column; align-items: center; margin-top: .9rem; }
.bb-cover__date { margin: 0; font-size: .95rem; font-weight: 800; letter-spacing: .02em; color: var(--inv-primary); }
.bb-cover__quote { max-width: 32ch; margin: .25rem 0 0; font-size: .92rem; font-style: italic; font-weight: 600; line-height: 1.4; color: var(--bb-muted); }
.bb-cover__guest {
    position: relative; width: min(100%, 19rem); margin: .8rem 0 0; padding: .5rem 1rem .55rem; border-radius: 16px; background: #fff;
    box-shadow: 0 0 0 1.5px var(--bb-ring), 0 10px 22px -16px color-mix(in srgb, var(--inv-deep) 60%, transparent);
}
.bb-cover__guest::after { content: ''; position: absolute; inset: 4px; border: 1.2px dashed var(--bb-stitch); border-radius: 12px; opacity: .6; pointer-events: none; }
.bb-cover__guest p { margin: 0; font-size: .64rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: var(--inv-primary); }
.bb-cover__guest-name { display: block; font-family: var(--bb-display); font-size: 1.2rem; font-weight: 700; line-height: 1.25; color: var(--inv-text); overflow-wrap: anywhere; }
.bb-cover__open {
    margin-top: .95rem; min-height: 3rem; padding: .7rem 2rem; font-weight: 800; letter-spacing: .02em;
    background: var(--inv-primary); color: #fff;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--inv-primary) 62%, #000), 0 14px 22px -10px color-mix(in srgb, var(--inv-deep) 80%, transparent);
}

/* opening: 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: the toy tower above a quilted patch with a double seam */
.bb-opening { padding: 4.4rem 1.5rem 4.6rem; }
.bb-opening__patch {
    position: relative; max-width: 23rem; margin: 0 auto; padding: 1.4rem 1.4rem 2.2rem; border-radius: 30px;
    background: color-mix(in srgb, var(--inv-deep) 50%, transparent);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-shine) 30%, transparent);
}
.bb-opening__patch::before, .bb-opening__patch::after {
    content: ''; position: absolute; inset: 7px; border: 1.5px dashed color-mix(in srgb, var(--inv-shine) 55%, transparent); border-radius: 24px; pointer-events: none;
}
.bb-opening__patch::after { inset: 12px; border-color: color-mix(in srgb, var(--inv-background) 22%, transparent); border-radius: 20px; }
.bb-opening__toys { margin: -3.6rem auto 1.1rem; }
.bb-opening__basmalah { margin: 0 0 .7rem; font-size: 1.85rem; }
.bb-opening__greeting { margin: 0 auto .8rem; max-width: 20ch; font-family: var(--bb-display); font-size: 1.45rem; font-weight: 700; line-height: 1.25; color: #fff; }
.bb-opening__message { margin: 0 auto; max-width: 30ch; color: var(--bb-cream-muted); }

/* baby: the stitched pillow frame + the block tower, chips, the name, birth blocks, the meaning, parents */
.bb-babies { padding-bottom: 4.6rem; }
.bb-baby + .bb-baby { margin-top: 3rem; padding-top: 2.6rem; border-top: 2px dashed var(--bb-ring); }
.bb-baby__intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.1rem; }
.bb-baby--flip .bb-baby__frame { order: 2; }
.bb-baby__frame {
    position: relative; width: 100%; max-width: 15rem; aspect-ratio: 4 / 5; margin: 0 0 0 auto; padding: 9px; border-radius: 28px;
    background: linear-gradient(145deg, #fffaf2, color-mix(in srgb, var(--inv-soft) 70%, #fff));
    box-shadow: 0 0 0 1.5px var(--bb-ring), 0 22px 34px -20px color-mix(in srgb, var(--inv-deep) 70%, transparent);
    transform: rotate(-2.5deg);
}
.bb-baby--flip .bb-baby__frame { margin: 0 auto 0 0; transform: rotate(2.5deg); }
.bb-baby__frame::after { content: ''; position: absolute; inset: 4px; border: 1.5px dashed var(--bb-stitch); border-radius: 24px; pointer-events: none; }
.bb-baby__photo, .bb-baby__empty { display: block; width: 100%; height: 100%; border-radius: 20px; }
.bb-baby__photo { object-fit: cover; object-position: center 22%; }
.bb-baby__empty { position: relative; display: grid; place-items: center; overflow: hidden; background: linear-gradient(170deg, color-mix(in srgb, var(--inv-primary) 80%, #fff), var(--inv-deep)); }
.bb-baby__initial { --bb-max: 4.4rem; width: 70%; }
.bb-baby__tower { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.bb-baby__call { margin: 0; font-size: .64rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: var(--inv-primary); white-space: nowrap; }
/* the tower: the letters stacked top to bottom, each a little nudged */
.bb-baby--tower .bb-baby__blocks { width: auto; container-type: normal; }
.bb-baby--tower .bb-baby__blocks .bb-blocks__row { flex-direction: column; align-items: center; gap: 0; }
.bb-baby--tower .bb-baby__blocks .bb-block { --bb-s: min(3.6rem, calc(16.5rem / var(--bb-n))); margin-bottom: calc(var(--bb-s) * .08); }
.bb-baby--tower .bb-baby__blocks .bb-block:nth-child(even) { translate: 4px 0; }
.bb-baby--tower .bb-baby__blocks .bb-block:nth-child(3n) { translate: -3px 0; }
/* a long nickname: the photo full width, the blocks in a row under it */
.bb-baby:not(.bb-baby--tower) .bb-baby__intro { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.bb-baby:not(.bb-baby--tower) .bb-baby__frame { order: 0; max-width: 16rem; margin: 0 auto; }
.bb-baby:not(.bb-baby--tower) .bb-baby__tower { width: 100%; }
.bb-baby:not(.bb-baby--tower) .bb-baby__blocks { --bb-max: 2.9rem; }
.bb-baby--many .bb-baby__frame { max-width: 12.5rem; }

.bb-baby__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 1.6rem 0 0; }
.bb-baby__name {
    margin: .6rem auto 1.4rem; max-width: 18ch; font-family: var(--bb-display); font-size: 1.95rem; font-weight: 700; line-height: 1.12;
    color: var(--bb-title); overflow-wrap: anywhere; text-wrap: balance;
}
.bb-baby--many .bb-baby__name { font-size: 1.7rem; }

/* birth data on little painted blocks; the place on a stitched hang tag */
.bb-birth { text-align: left; }
.bb-birth__label { margin: 0 0 .75rem; font-size: .7rem; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-primary); text-align: center; }
.bb-birth__blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .85rem; margin: 0; }
.bb-birth__cube { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; min-height: 6.4rem; padding: .7rem .85rem .75rem; border-radius: 20px; }
.bb-birth__cube:nth-child(1) { transform: rotate(-1.5deg); }
.bb-birth__cube:nth-child(2) { transform: rotate(1.5deg); }
.bb-birth__cube:nth-child(3) { transform: rotate(1deg); }
.bb-birth__cube:nth-child(4) { transform: rotate(-1deg); }
.bb-birth__cube:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* the carved border, as on the letter blocks */
.bb-birth__cube::before { content: ''; position: absolute; inset: 6px; border-radius: 15px; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .45), inset 0 1px 0 rgb(0 0 0 / .1); pointer-events: none; }
.bb-birth__cube dt {
    position: relative; align-self: flex-start; padding: .14rem .55rem; border-radius: 7px;
    font-size: .62rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--bb-ink); background: rgb(255 250 240 / .9);
}
.bb-birth__cube dd { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .3rem; margin: .35rem 0 0; }
.bb-birth__num {
    font-family: var(--bb-display); font-size: 2.7rem; font-weight: 800; line-height: .95; letter-spacing: -.02em;
    font-variant-numeric: lining-nums tabular-nums; text-shadow: 0 2px 0 rgb(0 0 0 / .2);
}
.bb-block--orange .bb-birth__num { text-shadow: 0 1.5px 0 rgb(255 255 255 / .4); }
.bb-baby--many .bb-birth__num { font-size: 2.3rem; }
.bb-birth__unit { font-size: 1rem; font-weight: 800; }
.bb-birth__month { font-size: .82rem; font-weight: 800; line-height: 1.2; }
.bb-birth__tag {
    position: relative; display: flex; align-items: flex-start; gap: .6rem; margin: 1.3rem 0 0; padding: .8rem 1rem .85rem 2.6rem;
    font-size: .95rem; font-weight: 700; line-height: 1.4; border-radius: 6px 16px 16px 6px; background: #fff;
    clip-path: polygon(1.2rem 0, 100% 0, 100% 100%, 1.2rem 100%, 0 50%);
    filter: drop-shadow(0 8px 10px color-mix(in srgb, var(--inv-deep) 30%, transparent));
}
/* the grommet hole and the seam of the tag */
.bb-birth__tag::before {
    content: ''; position: absolute; left: 1.05rem; top: 50%; width: .75rem; height: .75rem; margin-top: -.375rem; border-radius: 50%;
    background: var(--inv-background); box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--bb-wood) 80%, #8a5a2a);
}
.bb-birth__tag::after { content: ''; position: absolute; inset: 4px 5px 4px 2.2rem; border: 1.2px dashed var(--bb-stitch); border-radius: 4px 12px 12px 4px; pointer-events: none; }
.bb-birth__tag .bb-icon { margin-top: .12rem; color: var(--inv-primary); }
.bb-birth__tag small { display: block; font-size: .62rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--bb-muted); }

/* the name meaning: a stitched ribbon panel */
.bb-meaning {
    position: relative; margin: 1.8rem 0 0; padding: 1.35rem 1.4rem 1.4rem; border-radius: 22px; text-align: left;
    background: linear-gradient(135deg, var(--inv-soft), color-mix(in srgb, var(--inv-soft) 50%, #fff));
}
.bb-meaning::after { content: ''; position: absolute; inset: 6px; border: 1.5px dashed var(--bb-stitch); border-radius: 17px; pointer-events: none; }
.bb-meaning figcaption {
    position: absolute; left: 1.2rem; top: -.75rem; padding: .2rem .75rem; border-radius: 8px;
    font-size: .66rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: #fff; background: var(--bb-rose);
    box-shadow: 0 2px 0 color-mix(in srgb, var(--bb-rose) 70%, #3b2410);
}
.bb-meaning blockquote { position: relative; margin: .2rem 0 0; font-family: var(--bb-display); font-weight: 600; font-size: 1.14rem; line-height: 1.5; color: var(--inv-text); }

/* parents: a brown felt patch with a seam, the teddy peeking over its top edge */
.bb-parents {
    position: relative; margin: 4.4rem 0 0; padding: 1.6rem 1.4rem 1.5rem; border-radius: 26px; text-align: left;
    color: var(--inv-background); background: linear-gradient(140deg, var(--inv-primary), var(--inv-deep));
    box-shadow: var(--bb-drop);
}
.bb-parents::after { content: ''; position: absolute; inset: 6px; border: 1.5px dashed var(--bb-stitch-light); border-radius: 21px; pointer-events: none; }
.bb-parents__teddy { position: absolute; right: 1.2rem; top: -3.75rem; width: 5.6rem; }
.bb-parents__label { margin: 0 0 .35rem; font-size: .68rem; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-shine); }
.bb-parents__names { display: flex; flex-direction: column; margin: 0; font-family: var(--bb-display); font-size: 1.45rem; font-weight: 700; line-height: 1.25; color: #fff; }
.bb-parents__names .bb-amp { font-size: 1.1rem; color: var(--inv-shine); }
.bb-parents__address {
    display: flex; align-items: flex-start; gap: .5rem; margin: .95rem 0 0; padding-top: .85rem; font-size: .88rem; color: var(--bb-cream-muted);
    border-top: 1.5px dashed color-mix(in srgb, var(--inv-background) 30%, transparent);
}
.bb-parents__address .bb-icon { margin-top: .15rem; color: var(--inv-shine); }

/* message: a cream felt card with the teddy peeking over it */
.bb-message { padding-bottom: 4.6rem; }
.bb-message__card {
    position: relative; margin: 3.4rem 4px 0 0; padding: 1.6rem 1.35rem 1.5rem; border-radius: 26px; text-align: left;
    color: var(--inv-text); background: linear-gradient(160deg, #fffaf2, color-mix(in srgb, var(--inv-soft) 60%, #fff));
    box-shadow: 8px 8px 0 0 color-mix(in srgb, var(--inv-shine) 75%, transparent), 0 24px 40px -22px rgb(0 0 0 / .6);
    transform: rotate(-1deg);
}
.bb-message__card::after { content: ''; position: absolute; inset: 6px; border: 1.5px dashed var(--bb-stitch); border-radius: 21px; pointer-events: none; }
.bb-message__teddy { position: absolute; right: 1.4rem; top: -3.9rem; width: 5.9rem; }
.bb-message__quote { position: relative; margin: 0; }
.bb-message__mark { display: block; width: 2.4rem; height: 1.8rem; margin: 0 0 .6rem; fill: var(--bb-orange); }
.bb-message__quote p { margin: 0; font-family: var(--bb-display); font-size: 1.28rem; font-weight: 600; line-height: 1.5; color: var(--inv-text); }
.bb-message__quote cite {
    position: relative; display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.1rem; padding: .38rem .95rem .38rem .55rem; border-radius: 8px;
    font-style: normal; font-size: .74rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
    color: #fff; background: var(--inv-primary); transform: rotate(-2deg);
}
.bb-message__quote cite::before { content: ''; width: .55rem; height: .55rem; border-radius: 50%; background: var(--inv-background); box-shadow: inset 0 1px 2px rgb(0 0 0 / .35); }

/* events: a white felt card with a seam, the photo window, the date on a painted block */
.bb-event + .bb-event { margin-top: 2.6rem; }
.bb-event__card {
    position: relative; 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(--bb-ring), 12px 12px 0 0 var(--inv-soft);
}
.bb-event__card::after { content: ''; position: absolute; inset: 5px; border: 1.5px dashed var(--bb-stitch); border-radius: 23px; pointer-events: none; opacity: .7; }
.bb-event--flip .bb-event__card { margin: 0 0 0 12px; box-shadow: 0 0 0 1.5px var(--bb-ring), -12px 12px 0 0 color-mix(in srgb, var(--bb-orange) 45%, transparent); }
.bb-event__media { padding: .7rem .7rem 0; }
.bb-event__photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 55%; border-radius: 20px; }
.bb-event__top { display: flex; align-items: flex-end; gap: 1rem; padding: 1.3rem 1.2rem 0; }
.bb-event__media + .bb-event__top { margin-top: -2.6rem; }
.bb-event__media + .bb-event__top .bb-event__head { padding-top: 2.9rem; }
.bb-event--flip .bb-event__top { flex-direction: row-reverse; text-align: right; }
.bb-event__date { --bb-s: 4.6rem; margin: 0; }
.bb-event__date .bb-block__face { display: flex; flex-direction: column; align-items: center; padding-top: 0; font-size: 1rem; text-shadow: 0 1.5px 0 rgb(0 0 0 / .18); }
.bb-event__weekday { font-family: var(--bb-sans); font-size: .62rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.bb-event__day { font-size: 2.35rem; font-weight: 800; line-height: .95; padding-top: .08em; }
.bb-event__head { min-width: 0; padding-bottom: .2rem; }
.bb-event__name { margin: 0; font-family: var(--bb-display); font-size: 1.55rem; font-weight: 700; line-height: 1.12; color: var(--bb-title); }
.bb-event__full { margin: .2rem 0 0; font-size: .82rem; font-weight: 700; color: var(--bb-muted); }
.bb-event__rows { display: grid; gap: .75rem; margin: 1.15rem 1.2rem 0; padding: 1rem 0 0; list-style: none; font-size: .92rem; border-top: 1.5px dashed var(--bb-ring); }
.bb-event__rows li { display: flex; align-items: flex-start; gap: .7rem; }
.bb-event__rows .bb-icon { width: 2.1rem; height: 2.1rem; padding: .45rem; border-radius: 10px; color: var(--inv-primary); background: var(--inv-soft); }
.bb-event__rows li > span { padding-top: .3rem; }
.bb-event__venue { display: block; font-weight: 800; }
.bb-event__address { display: block; font-size: .86rem; color: var(--bb-muted); }
.bb-event .inv-maps { margin: 1.15rem 1.2rem 0; text-align: center; }
.bb-event .inv-maps .inv-button { width: 100%; font-weight: 800; }
.bb-event .inv-maps__frame { height: 190px; border-radius: 18px; }

/* countdown: four painted blocks with the numbers carved in; the calendar on a felt card */
.bb-countdown .inv-countdown { gap: clamp(.55rem, 3vw, .95rem); }
.bb-countdown .inv-countdown__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
    width: clamp(4.1rem, 19vw, 4.8rem); min-width: 0; aspect-ratio: 1; padding: .2rem 0 0; border-radius: 16px;
}
.bb-countdown .inv-countdown__item:nth-child(1) { --c: var(--bb-blue); transform: rotate(-3deg); }
.bb-countdown .inv-countdown__item:nth-child(2) { --c: var(--bb-orange); --ink: var(--bb-ink); transform: rotate(2deg); }
.bb-countdown .inv-countdown__item:nth-child(3) { --c: var(--bb-green); transform: rotate(-2deg); }
.bb-countdown .inv-countdown__item:nth-child(4) { --c: var(--bb-rose); transform: rotate(3deg); }
.bb-countdown .inv-countdown__value {
    font-variant-numeric: lining-nums tabular-nums; font-family: var(--bb-display); font-size: 1.95rem; font-weight: 800; line-height: .9;
    text-shadow: 0 2px 0 rgb(0 0 0 / .2);
}
.bb-countdown .inv-countdown__item:nth-child(2) .inv-countdown__value { text-shadow: 0 1.5px 0 rgb(255 255 255 / .4); }
.bb-countdown .inv-countdown__label {
    padding: .05rem .4rem; border-radius: 5px; font-size: .5rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
    color: var(--bb-ink); background: rgb(255 250 240 / .9); opacity: 1;
}
.bb-countdown .inv-countdown__done { font-family: var(--bb-display); font-size: 1.4rem; font-weight: 700; color: var(--inv-shine); }
.bb-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 2.1rem; }
.bb-countdown .inv-countdown__actions .inv-button {
    width: min(100%, 17rem); min-height: 2.75rem; padding: .6rem 1rem; font-size: .85rem; font-weight: 800;
    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);
}
.bb-countdown .inv-countdown__actions .inv-button:first-child { color: var(--inv-deep); background: var(--inv-shine); box-shadow: 0 3px 0 color-mix(in srgb, var(--inv-shine) 55%, #4a2810); }
.bb-countdown .inv-cal {
    --inv-cal-bg: var(--bb-paper); --inv-cal-mark: var(--inv-primary);
    position: relative; max-width: 19rem; margin: 2.8rem auto 0; border-radius: 24px; box-shadow: 10px 10px 0 0 color-mix(in srgb, var(--inv-shine) 70%, transparent), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.bb-countdown .inv-cal::after { content: ''; position: absolute; inset: 5px; border: 1.5px dashed var(--bb-stitch); border-radius: 19px; pointer-events: none; }
.bb-countdown .inv-cal__month { font-family: var(--bb-display); font-size: 1.45rem; font-weight: 700; color: var(--bb-title); }

/* prayer: a white quilted panel with two sewn-on buttons */
.bb-prayer { padding-top: 4.6rem; padding-bottom: 4.6rem; }
.bb-prayer__panel {
    position: relative; max-width: 23rem; margin: 0 auto; padding: 2.4rem 1.4rem 2.3rem; border-radius: 28px;
    color: var(--inv-text); background: #fffdf8;
    box-shadow: 0 0 0 1.5px var(--bb-ring), 10px 12px 0 0 color-mix(in srgb, var(--inv-primary) 22%, transparent), var(--bb-drop);
}
.bb-prayer__panel::after { content: ''; position: absolute; inset: 7px; border: 1.5px dashed var(--bb-stitch); border-radius: 22px; pointer-events: none; }
.bb-button-sewn {
    position: absolute; top: 1.1rem; width: 1.5rem; height: 1.5rem; border-radius: 50%;
    background:
        radial-gradient(circle at 36% 36%, var(--inv-background) 0 1.6px, transparent 2.1px),
        radial-gradient(circle at 64% 36%, var(--inv-background) 0 1.6px, transparent 2.1px),
        radial-gradient(circle at 36% 64%, var(--inv-background) 0 1.6px, transparent 2.1px),
        radial-gradient(circle at 64% 64%, var(--inv-background) 0 1.6px, transparent 2.1px),
        radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--bb-rose) 60%, #fff), var(--bb-rose) 65%, color-mix(in srgb, var(--bb-rose) 70%, #3b2410));
    box-shadow: 0 2px 3px rgb(0 0 0 / .25);
}
.bb-button-sewn--left { left: 1.1rem; }
.bb-button-sewn--right { right: 1.1rem; background-color: transparent; filter: hue-rotate(160deg) saturate(.8); }
.bb-prayer__eyebrow {
    display: inline-block; margin: 0 0 1rem; padding: .3rem .9rem; border-radius: 8px; font-size: .68rem; font-weight: 900;
    letter-spacing: .2em; text-transform: uppercase; color: #fff; background: var(--inv-primary);
}
.bb-prayer__arabic { margin: 0 0 1rem; font-size: 1.62rem; }
.bb-prayer__text { margin: 0; }
.bb-prayer__text p { margin: 0; font-family: var(--bb-display); font-size: 1.1rem; font-weight: 600; line-height: 1.55; }
.bb-prayer__text cite {
    display: inline-block; margin-top: 1rem; padding: .28rem .8rem; border-radius: 8px; font-style: normal; font-size: .72rem; font-weight: 900;
    letter-spacing: .14em; text-transform: uppercase; color: var(--bb-ink); background: var(--bb-orange); transform: rotate(-2deg);
}

/* rundown: a tower of stacked wooden blocks (the times), the steps beside them */
.bb-rundown__list { position: relative; margin: 0; padding: 0; list-style: none; text-align: left; }
.bb-rundown__item { position: relative; display: grid; grid-template-columns: 5rem minmax(0, 1fr); column-gap: .95rem; }
.bb-rundown__time {
    --bb-s: 4.6rem;
    align-self: stretch; width: 4.6rem; height: auto; min-height: 3.4rem; margin-left: var(--nudge, 0); border-radius: 12px;
}
.bb-rundown__time::before { border-radius: 8px; inset: 7px; }
.bb-rundown__time .bb-block__face { font-size: 1.3rem; padding-top: .12em; }
.bb-rundown__body {
    position: relative; margin: .35rem 0; padding: .75rem 1rem .8rem; border-radius: 16px;
    background: color-mix(in srgb, var(--inv-background) 9%, transparent);
}
.bb-rundown__body::after { content: ''; position: absolute; inset: 3px; border: 1.2px dashed color-mix(in srgb, var(--inv-background) 30%, transparent); border-radius: 13px; pointer-events: none; }
.bb-rundown__body h3 { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.35; color: #fff; }
.bb-rundown__body p { margin: .15rem 0 0; font-size: .88rem; color: var(--bb-cream-muted); }

/* story: photos in stitched felt frames beside the text, alternating; text-only chapters as felt patches */
.bb-story__list { display: grid; gap: 2.4rem; 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; }
.bb-story__media {
    position: relative; padding: 7px; border-radius: 22px; background: #fffaf2; transform: rotate(-3deg);
    box-shadow: 0 0 0 1.5px var(--bb-ring), 0 20px 30px -18px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.bb-story__item--flip .bb-story__media { transform: rotate(3deg); }
.bb-story__media::after { content: ''; position: absolute; inset: 3px; border: 1.3px dashed var(--bb-stitch); border-radius: 19px; pointer-events: none; }
.bb-story__photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; }
.bb-story__when {
    display: inline-block; padding: .22rem .7rem; border-radius: 8px; font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
    color: #fff; background: var(--inv-primary);
}
.bb-story__body h3 { margin: .5rem 0 0; font-family: var(--bb-display); font-size: 1.38rem; font-weight: 700; line-height: 1.2; color: var(--bb-title); }
.bb-story__body p { margin: .4rem 0 0; font-size: .9rem; line-height: 1.55; color: var(--bb-muted); }
.bb-story__item--text {
    position: relative; grid-template-columns: 2.9rem minmax(0, 1fr); align-items: start; gap: 1rem; padding: 1.2rem 1.25rem; border-radius: 22px;
    background: var(--inv-soft);
}
.bb-story__item--text::after { content: ''; position: absolute; inset: 5px; border: 1.3px dashed var(--bb-stitch); border-radius: 18px; pointer-events: none; }
.bb-story__dot { --bb-s: 2.75rem; }
.bb-story__dot .bb-block__face { font-size: 1.4rem; }

/* gallery: every photo in a cream felt mount with a seam; the first one tall over two rows */
.bb-gallery .inv-gallery { gap: .7rem; }
.bb-gallery .inv-gallery__item {
    border-radius: 18px; border: 5px solid #fff8ee;
    box-shadow: 0 16px 28px -18px rgb(0 0 0 / .7);
}
.bb-gallery .inv-gallery__item::after { content: ''; position: absolute; inset: 3px; border: 1.3px dashed rgb(255 255 255 / .75); border-radius: 11px; pointer-events: none; }
.bb-gallery .inv-gallery__item:first-child { grid-row: span 2; aspect-ratio: auto; }
.bb-gallery .inv-gallery__item:nth-child(3n + 2) { transform: rotate(1.2deg); }
.bb-gallery .inv-gallery__item:nth-child(3n) { transform: rotate(-1.2deg); }

/* live streaming: a brown felt card with a seam and the play block */
.bb-stream__card {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem 1rem; max-width: 24rem; margin: 0 auto;
    padding: 1.4rem 1.35rem 1.45rem; border-radius: 26px; color: var(--inv-background); text-align: left;
    background: radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, #fff 14%, transparent), transparent 70%), linear-gradient(140deg, var(--inv-primary), var(--inv-deep));
    box-shadow: 10px 10px 0 0 var(--inv-soft), var(--bb-drop);
}
.bb-stream__card::after { content: ''; position: absolute; inset: 6px; border: 1.5px dashed var(--bb-stitch-light); border-radius: 21px; pointer-events: none; }
.bb-stream__icon { --bb-s: 3.5rem; }
.bb-stream__icon .bb-icon { width: 1.8rem; height: 1.8rem; }
.bb-stream__title { margin: 0 0 .15rem; font-family: var(--bb-display); font-size: 1.6rem; font-weight: 700; 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: 800; color: var(--inv-shine); }
.bb-stream__button { position: relative; z-index: 1; grid-column: 1 / -1; min-height: 2.75rem; color: var(--inv-deep) !important; background: var(--inv-shine) !important; font-weight: 800; }

/* RSVP card: cream felt with a seam, the honey block offset behind */
.bb-rsvp__card {
    position: relative; margin-right: 10px; padding: 1.7rem 1.2rem 1.4rem; border-radius: 26px; color: var(--inv-text); background: var(--bb-paper);
    box-shadow: 10px 10px 0 0 color-mix(in srgb, var(--inv-shine) 75%, transparent), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.bb-rsvp__card::after { content: ''; position: absolute; inset: 6px; border: 1.5px dashed var(--bb-stitch); border-radius: 21px; pointer-events: none; }
.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__check { display: block; width: 4.25rem; height: 4.25rem; margin: 0 auto .5rem; }
.bb-rsvp__check circle { fill: var(--inv-primary); }
.bb-rsvp__check path { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
html.inv-anim .bb-rsvp__sent .bb-rsvp__check { animation: bb-bounce .8s cubic-bezier(.34, 1.56, .64, 1) both; }
html.inv-anim .bb-rsvp__sent .bb-rsvp__check path { animation: bb-draw .45s ease-out .35s both; }
.bb-rsvp__thanks { margin: 0; font-family: var(--bb-display); font-size: 1.6rem; font-weight: 700; color: var(--bb-title); }
.bb-rsvp__line { margin: .1rem 0 0; font-size: .92rem; color: var(--bb-muted); }
.bb-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .86rem; font-weight: 700; color: var(--inv-primary); }

/* gift: cream felt hang tags (a grommet hole and a seam), two per row; the address below */
.bb-gift__intro { color: var(--bb-cream-muted); }
.bb-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1.3rem; }
.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;
    padding: 2.1rem .8rem 1.05rem; border-radius: 22px 22px 18px 18px; color: var(--inv-text); background: var(--bb-paper);
    box-shadow: 0 18px 30px -20px rgb(0 0 0 / .6);
}
.bb-gift .inv-gift__account:nth-child(odd) { transform: rotate(-1.2deg); }
.bb-gift .inv-gift__account:nth-child(even) { transform: rotate(1.2deg); }
.bb-gift .inv-gift__account::before {
    content: ''; position: absolute; left: 50%; top: .7rem; width: .85rem; height: .85rem; margin-left: -.425rem; border-radius: 50%;
    background: var(--inv-deep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bb-wood) 85%, #8a5a2a);
}
.bb-gift .inv-gift__account::after, .bb-gift .inv-gift__address::after {
    content: ''; position: absolute; inset: 5px; border: 1.4px dashed var(--bb-stitch); border-radius: 18px 18px 14px 14px; pointer-events: none;
}
.bb-gift .inv-gift__account p, .bb-gift .inv-gift__address p { margin: 0; }
.bb-gift .inv-gift__bank { font-weight: 800; font-size: .86rem; color: var(--inv-primary); }
.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: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bb-muted); overflow-wrap: anywhere; }
.bb-gift .inv-button { position: relative; z-index: 1; margin-top: .35rem; min-height: 2.25rem; padding: .35rem .9rem; font-size: .76rem; font-weight: 800; }
.bb-gift .inv-gift__address { margin-top: 1rem; font-size: .9rem; box-shadow: 8px 8px 0 0 color-mix(in srgb, var(--inv-shine) 70%, transparent); }
.bb-gift .inv-gift__address .inv-gift__holder { font-size: .72rem; }

/* wishlist: white stitched rows with the number on a painted block (or the item photo in a felt frame) */
.bb-wishlist__intro { color: var(--bb-muted); font-size: .94rem; }
.bb-wishlist__list { display: grid; gap: .8rem; margin: 1.3rem 0 0; padding: 0; list-style: none; text-align: left; }
.bb-wishlist__item {
    position: relative; display: grid; grid-template-columns: 2.9rem minmax(0, 1fr); align-items: start; gap: .95rem; padding: .95rem 1rem; border-radius: 20px;
    background: #fff; box-shadow: 0 0 0 1.5px var(--bb-ring), 6px 6px 0 0 var(--inv-soft);
}
.bb-wishlist__item::after { content: ''; position: absolute; inset: 4px; border: 1.2px dashed var(--bb-stitch); border-radius: 16px; pointer-events: none; opacity: .6; }
.bb-wishlist__number { --bb-s: 2.75rem; }
.bb-wishlist__number .bb-block__face { font-size: 1.45rem; }
.bb-wishlist__photo { display: block; width: 2.9rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--bb-ring); }
.bb-wishlist__text p { margin: 0; }
.bb-wishlist__name { padding-top: .1rem; font-family: var(--bb-display); font-size: 1.15rem; font-weight: 700; line-height: 1.3; color: var(--bb-title); overflow-wrap: anywhere; }
.bb-wishlist__note { margin-top: .1rem !important; font-size: .88rem; color: var(--bb-muted); }
.bb-wishlist__shop { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .35rem; min-height: 2.2rem; margin-top: .25rem; font-size: .84rem; font-weight: 800; text-decoration: none; }
.bb-wishlist__shop .bb-icon { width: 1rem; height: 1rem; }

/* co-hosts: the names in rounded type, one per line, split by small stitched dashes, on the caramel band */
.bb-cohosts__list { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.bb-cohosts__list li { max-width: 26ch; font-family: var(--bb-display); font-size: 1.2rem; font-weight: 700; line-height: 1.3; color: var(--inv-text); }
.bb-cohosts__list li + li::before { content: ''; display: block; width: 2.2rem; margin: 0 auto .6rem; border-top: 2px dashed color-mix(in srgb, #fff 80%, transparent); }

/* contacts: stitched pill rows with the initial on a painted block and a WhatsApp button */
.bb-contacts__list { display: grid; gap: .8rem; max-width: 24rem; margin: 0 auto; }
.bb-contact {
    position: relative; display: grid; grid-template-columns: 2.8rem minmax(0, 1fr) auto; align-items: center; gap: .85rem; padding: .7rem .7rem .7rem .8rem; border-radius: 22px;
    background: #fff; text-align: left; box-shadow: 0 0 0 1.5px var(--bb-ring), 6px 6px 0 0 var(--inv-soft);
}
.bb-contact::after { content: ''; position: absolute; inset: 4px; border: 1.2px dashed var(--bb-stitch); border-radius: 18px; pointer-events: none; opacity: .6; }
.bb-contact__avatar { --bb-s: 2.7rem; }
.bb-contact__avatar .bb-block__face { font-size: 1.4rem; }
.bb-contact p { margin: 0; }
.bb-contact__name { font-weight: 800; 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: .86rem; }
.bb-contact__button { position: relative; z-index: 1; min-height: 2.5rem; padding: .45rem .95rem; font-size: .8rem; font-weight: 800; }
.bb-contact__button .bb-icon { width: 1.05rem; height: 1.05rem; }

/* health protocol: white stitched chips */
.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: 12px; font-size: .86rem; font-weight: 700;
    background: #fff; box-shadow: inset 0 0 0 1px var(--bb-ring); outline: 1.2px dashed var(--bb-stitch); outline-offset: -4px;
}
.bb-protocol__list .bb-icon { width: 1rem; height: 1rem; color: var(--inv-primary); }
.bb-protocol__note { font-size: .9rem; color: var(--bb-muted); }

/* vendors: a white stitched card of rows split by dashed seams */
.bb-vendors__list { position: relative; max-width: 24rem; margin: 0 auto; padding: .4rem 1.2rem; list-style: none; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1.5px var(--bb-ring), var(--bb-drop); }
.bb-vendors__list::after { content: ''; position: absolute; inset: 5px; border: 1.3px dashed var(--bb-stitch); border-radius: 19px; pointer-events: none; opacity: .6; }
.bb-vendor { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem 0; text-align: left; border-bottom: 1.5px dashed var(--bb-ring); }
.bb-vendor:last-child { border-bottom: 0; }
.bb-vendor__text { display: flex; flex-direction: column; min-width: 0; }
.bb-vendor__role { font-size: .64rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-primary); }
.bb-vendor__name { font-family: var(--bb-display); font-size: 1.14rem; font-weight: 700; line-height: 1.25; color: var(--inv-text); overflow-wrap: anywhere; }
.bb-vendor__link {
    position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .3rem; flex: none; min-height: 2.2rem; padding: .3rem .7rem; border-radius: 10px;
    font-size: .76rem; font-weight: 800; text-decoration: none; background: var(--inv-soft); color: var(--inv-deep);
}
.bb-vendor__link .bb-icon { width: .95rem; height: .95rem; }

/* closing: the full photo fading into the brown, the teddy peeking over a seam, the thanks, the block names */
.bb-closing { padding: 4.4rem 1.5rem 2.6rem; }
.bb-closing::after { display: none; }
.bb-closing--photo { padding-top: 0; }
.bb-closing__photo { position: relative; z-index: -1; height: min(125vw, 36rem); margin: 0 -1.5rem; overflow: hidden; }
.bb-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 22%; --inv-parallax: 30px; }
.bb-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--inv-deep) 55%, transparent) 68%, var(--inv-deep) 97%);
}
.bb-closing__body { position: relative; }
.bb-closing--photo .bb-closing__body { margin-top: -7rem; }
.bb-closing__seam { position: relative; display: flex; justify-content: center; margin: 0 -1.5rem .9rem; }
.bb-closing__seam::after { content: ''; position: absolute; left: 1rem; right: 1rem; bottom: 2px; border-top: 2px dashed color-mix(in srgb, var(--inv-shine) 55%, transparent); }
.bb-closing__teddy { position: relative; z-index: 1; width: 6.4rem; }
.bb-closing__eyebrow { margin: 0 0 .3rem; font-size: .7rem; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-shine); }
.bb-closing__title { margin: 0 0 1rem; font-family: var(--bb-display); font-size: 2.9rem; font-weight: 800; line-height: 1.05; color: #fff; }
.bb-closing__title em { font-style: normal; color: var(--inv-shine); }
.bb-closing__message { margin: 0 auto; max-width: 30ch; color: var(--bb-cream-muted); }
.bb-closing__salam { margin: 1.1rem auto 0; max-width: 24ch; font-family: var(--bb-display); font-size: 1.18rem; font-weight: 700; line-height: 1.35; color: var(--inv-shine); }
.bb-closing__signature { margin: 1rem auto 0; max-width: 30ch; font-size: .88rem; color: var(--bb-cream-muted); }
.bb-closing__with { margin: 1.8rem 0 .7rem; font-size: .68rem; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-shine); }
.bb-closing__blocks { --bb-max: 3rem; width: min(100%, 20rem); margin: 0 auto; }

/* ---------- 6. forms (shared RSVP + wishes, restyled) ---------- */
.bb-main .inv-form { position: relative; z-index: 1; gap: 1rem; text-align: left; }
.bb-main .inv-form label, .bb-main .inv-form__choices legend { font-size: .84rem; font-weight: 800; 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: 14px;
    font: 500 .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-primary) 26%, 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-primary), 0 0 0 4px color-mix(in srgb, var(--inv-shine) 50%, transparent);
}
.bb-main .inv-form button[type=submit] { width: 100%; min-height: 3rem; font-weight: 800; box-shadow: 0 4px 0 color-mix(in srgb, var(--inv-primary) 62%, #000); }
.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 big 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: 16px; cursor: pointer; text-align: center;
    font-size: .84rem; font-weight: 800; 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;
}
.bb-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* icon: a tinted rounded square (::before) with a check, a cross or a question mark on it (::after, a mask) */
.bb-rsvp .inv-form__choices label::before {
    content: ''; width: 2.1rem; height: 2.1rem; border-radius: 9px; 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(--inv-primary); 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-primary); transform: translateY(-3px);
    box-shadow: 0 4px 0 color-mix(in srgb, var(--inv-primary) 62%, #000), 0 12px 24px -12px color-mix(in srgb, var(--inv-primary) 80%, transparent);
}
.bb-rsvp .inv-form__choices label:has(input:checked)::before { background-color: rgb(255 255 255 / .2); transform: scale(1.1) rotate(-6deg); }
.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(--bb-orange); outline-offset: 3px; }

/* wishes: the form on a white stitched card, the wishes in a scroll box of about three */
.bb-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.bb-wishes .inv-form {
    margin-right: 8px; padding: 1.4rem 1.15rem; border-radius: 24px; background: #fff;
    box-shadow: 8px 8px 0 0 var(--inv-primary);
    outline: 1.4px dashed var(--bb-stitch); outline-offset: -6px;
}
.bb-wishes .inv-wishes__list { margin-top: 1.4rem; }
.bb-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(--bb-ring);
}
.bb-wishes .inv-wish { padding: .75rem .9rem; border-radius: 14px; background: #fff; text-align: left; box-shadow: 0 2px 10px rgb(0 0 0 / .05); border-left: 5px solid var(--bb-blue); }
.bb-wishes .inv-wish:nth-child(4n + 2) { border-left-color: var(--bb-orange); }
.bb-wishes .inv-wish:nth-child(4n + 3) { border-left-color: var(--bb-green); }
.bb-wishes .inv-wish:nth-child(4n + 4) { border-left-color: var(--bb-rose); }
.bb-wishes .inv-wish__name { font-weight: 800; color: var(--inv-primary); }
.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: 700; }
body .inv-nav {
    --inv-nav-bg: color-mix(in srgb, #fffaf2 95%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-text) 74%, transparent);
    --inv-nav-active: var(--inv-primary);
    font-family: var(--bb-sans);
}

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

/* short phones: the cover art and type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .bb-cover { --art: min(76vw, 18rem, 35svh); padding-top: 1.35rem; padding-bottom: 1.35rem; }
    .bb-cover__title { margin-bottom: .5rem; }
    .bb-cover__blocks { --bb-max: 2.85rem; }
    .bb-cover__text { margin-top: .75rem; }
    .bb-cover__quote { font-size: .88rem; }
    .bb-cover__guest { margin-top: .7rem; }
    .bb-cover__open { margin-top: .85rem; }
}
@media (max-height: 680px) {
    .bb-cover { --art: min(70vw, 33svh); padding-top: 1.1rem; padding-bottom: 1.1rem; }
    .bb-cover__title { margin-bottom: .35rem; }
    .bb-cover__title span { padding: .34rem .9rem .32rem; font-size: .64rem; }
    .bb-cover__blocks { --bb-max: 2.5rem; margin-top: .2rem; }
    .bb-cover--many .bb-cover__blocks { --bb-max: 2rem; }
    .bb-cover.bb-cover--many { --art: min(64vw, 27svh); }
    .bb-cover.bb-cover--three { --art: min(52vw, 21svh); }
    .bb-cover--three .bb-cover__blocks { --bb-max: 1.85rem; }
    .bb-cover__text { margin-top: .6rem; }
    .bb-cover__date { font-size: .86rem; }
    .bb-cover__quote { font-size: .82rem; line-height: 1.35; }
    .bb-cover__guest { margin-top: .55rem; padding: .4rem .85rem .45rem; }
    .bb-cover__guest-name { font-size: 1.08rem; }
    .bb-cover__open { margin-top: .7rem; min-height: 2.75rem; padding: .6rem 1.7rem; }
}
/* very short screens (in-app browsers): a smaller teddy and quote, so everything fits */
@media (max-height: 600px) {
    .bb-cover { --art: min(62vw, 30svh); padding-top: .9rem; padding-bottom: .9rem; }
    .bb-cover__blocks { --bb-max: 2.2rem; }
    .bb-cover.bb-cover--many { --art: min(56vw, 24svh); }
    .bb-cover.bb-cover--three { --art: min(46vw, 18svh); }
    .bb-cover__quote { font-size: .78rem; line-height: 1.3; max-width: 36ch; }
}

/* wide screens: the phone-width column on a brown knitted backdrop */
@media (min-width: 560px) {
    body.bb-body {
        background:
            radial-gradient(70vw 60vh at 50% 0%, color-mix(in srgb, var(--inv-primary) 60%, 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: .08; background: var(--inv-shine);
        -webkit-mask: var(--bb-knit) center / 14px 12px repeat; mask: var(--bb-knit) center / 14px 12px repeat;
    }
    .bb-main { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
}

/* ---------- 9. motion ---------- */
@keyframes bb-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes bb-bounce { 0% { transform: scale(0); } 55% { transform: scale(1.15); } 75% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes bb-frame-in { from { opacity: 0; transform: translateY(14px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes bb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bb-zoom-out { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes bb-bear-up { from { opacity: 0; transform: translateY(9%); } to { opacity: 1; transform: none; } }
/* a block falls in tumbling, bumps the floor, rocks once and comes to rest at its own tilt */
@keyframes bb-tumble {
    0% { opacity: 0; transform: translateY(-190%) rotate(calc(var(--r, 0deg) - 50deg)); }
    18% { opacity: 1; }
    56% { transform: translateY(5%) rotate(calc(var(--r, 0deg) + 7deg)); }
    76% { transform: translateY(-10%) rotate(calc(var(--r, 0deg) - 3deg)); }
    100% { opacity: 1; transform: rotate(var(--r, 0deg)); }
}

/* cover (≤ 2.5 s, once): the frame fades up and its photo settles (0–1.1 s), the teddy rises from behind
   (.25–1.15 s), the blocks tumble in one by one (from .85 s, --bb-step apart, .7 s each); the text follows
   through its inv-enter delays (1–1.3 s + 1.1 s) */
html.inv-anim .bb-cover__frame { animation: bb-frame-in .85s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .bb-cover__photo { animation: bb-zoom-out 1.1s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .bb-cover__bear-back,
html.inv-anim .bb-cover__bear .bb-teddy__body { animation: bb-bear-up .9s cubic-bezier(.25, .8, .3, 1.15) .25s both; }
html.inv-anim .bb-cover__bear :is(.bb-teddy__ring, .bb-teddy__ring-shadow, .bb-teddy__ring-edge, .bb-teddy__stitch--ring) { animation: bb-fade .7s ease both; }
html.inv-anim .bb-blocks--tumble .bb-block { animation: bb-tumble .7s cubic-bezier(.33, .7, .4, 1) calc(.85s + var(--i, 0) * var(--bb-step, .11s)) both; }

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