/*
 * Template "Berkah Ananda" (Aqiqah & Kelahiran): a gentle, elegant Islamic welcome for a newborn.
 * Deep forest green + champagne gold + ivory with a soft blush accent; soft Arabic calligraphy as a visual
 * element, fine gold arabesque line art that draws itself once, round-topped arches with pearl strings,
 * eight-point star medallions for the birth data. Mobile-first, one column (~460px) on wide screens.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (forest green / night blue / maroon / plum: dark sections, panels, names on ivory)
 *   --inv-accent (champagne gold: lines, buttons)   --inv-shine (light gold: text accents on dark)
 *   --inv-background (ivory)   --inv-text   --inv-deep (darker primary, gradients)   --inv-blush (soft accent)
 * SVG ornaments are painted with the gradients of sections/_defs (#ba-gold, #ba-gold-deep, #ba-pearl).
 *
 * Section tones (set on each section in its partial): .ba-tone--dark, --ivory, --blush, --gold.
 * 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 tones & photo backgrounds · 3 shared pieces (heading, line art, arch, star) ·
 *           4 cover · 5 sections in page order · 6 forms · 7 shared components · 8 screen sizes · 9 motion
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Hijau Emas" variant (the variant's colours override these) */
    --inv-primary: #0f3d33;
    --inv-accent: #d9b56a;
    --inv-background: #f6efe2;
    --inv-text: #1b2a25;
    --inv-deep: #082a22;
    --inv-shine: #f1d89a;
    --inv-blush: #e7b8a8;
    --inv-radius: 16px;

    --ba-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
    --ba-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ba-arabic: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif;
    --ba-col: 460px;

    --ba-paper: color-mix(in srgb, #fff 62%, var(--inv-background));
    /* gold that stays readable on ivory (labels, small text) */
    --ba-gold-ink: color-mix(in srgb, var(--inv-accent) 52%, var(--inv-text));
    --ba-title: color-mix(in srgb, var(--inv-primary) 85%, var(--inv-text));
    --ba-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    --ba-ivory-muted: color-mix(in srgb, var(--inv-background) 84%, transparent);
    --ba-hair: color-mix(in srgb, var(--inv-accent) 55%, transparent);
    --ba-hair-soft: color-mix(in srgb, var(--inv-accent) 30%, transparent);
    --ba-drop: 0 24px 44px -26px color-mix(in srgb, var(--inv-deep) 80%, transparent);
    --ba-gold-grad: linear-gradient(100deg, var(--inv-shine), var(--inv-accent) 38%, var(--inv-shine) 62%, var(--inv-accent));

    /* a faint lattice of overlapping circles (classic Islamic geometry), as a mask so it takes any colour */
    --ba-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44' fill='none' stroke='%23000' stroke-width='.8'%3E%3Ccircle cx='0' cy='0' r='22'/%3E%3Ccircle cx='44' cy='0' r='22'/%3E%3Ccircle cx='0' cy='44' r='22'/%3E%3Ccircle cx='44' cy='44' r='22'/%3E%3Ccircle cx='22' cy='22' r='22'/%3E%3C/svg%3E");

    --inv-ambient-1: var(--inv-accent);
    --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(--ba-sans);
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: var(--inv-primary); }
.ba-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

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

.ba-main { max-width: var(--ba-col); margin: 0 auto; }
.ba-branding { max-width: var(--ba-col); margin: 0 auto; }

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

/* calligraphy: Amiri in a gold gradient (on light sections: the primary colour) */
.ba-calligraphy {
    font-family: var(--ba-arabic); font-weight: 700; line-height: 1.9;
    color: var(--inv-shine); background: var(--ba-gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ba-amp { font-family: var(--ba-display); font-style: italic; font-weight: 500; }

/* ---------- 2. tones & photo backgrounds ---------- */
.ba-tone--dark {
    color: var(--inv-background);
    background:
        radial-gradient(80% 40% at 50% 0%, color-mix(in srgb, var(--inv-accent) 14%, transparent), transparent 72%),
        radial-gradient(70% 40% at 100% 100%, color-mix(in srgb, var(--inv-deep) 85%, transparent), transparent 75%),
        var(--inv-primary);
}
.ba-tone--dark::before, .ba-cover::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--inv-accent); opacity: .075;
    -webkit-mask: var(--ba-lattice) center top / 44px 44px repeat; mask: var(--ba-lattice) center top / 44px 44px repeat;
}
.ba-tone--dark a:not(.inv-button) { color: var(--inv-shine); }

.ba-tone--ivory {
    background:
        radial-gradient(70% 30% at 0% 0%, color-mix(in srgb, var(--inv-blush) 22%, transparent), transparent 75%),
        radial-gradient(70% 30% at 100% 100%, color-mix(in srgb, var(--inv-accent) 14%, transparent), transparent 75%),
        var(--inv-background);
}
.ba-tone--blush {
    background:
        radial-gradient(80% 36% at 50% 0%, color-mix(in srgb, #fff 50%, transparent), transparent 75%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-blush) 42%, var(--inv-background)), color-mix(in srgb, var(--inv-blush) 22%, var(--inv-background)));
}
.ba-tone--ivory::before, .ba-tone--blush::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--inv-accent); opacity: .11;
    -webkit-mask: var(--ba-lattice) center top / 44px 44px repeat; mask: var(--ba-lattice) center top / 44px 44px repeat;
}
.ba-tone--gold {
    color: var(--inv-deep);
    background:
        radial-gradient(70% 70% at 50% 0%, color-mix(in srgb, #fff 34%, transparent), transparent 75%),
        linear-gradient(135deg, var(--inv-shine), var(--inv-accent) 55%, color-mix(in srgb, var(--inv-accent) 85%, var(--inv-deep)));
}
.ba-tone--gold::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--inv-primary); opacity: .1;
    -webkit-mask: var(--ba-lattice) center top / 44px 44px repeat; mask: var(--ba-lattice) center top / 44px 44px repeat;
}

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

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

/* line art: gold strokes (deeper gold on the light sections, primary on the gold band) */
.ba-line { fill: none; stroke: url(#ba-gold); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ba-line--thin { stroke-width: .8; opacity: .75; }
.ba-leaf { fill: url(#ba-gold-fill); }
:is(.ba-tone--ivory, .ba-tone--blush) .ba-line { stroke: url(#ba-gold-deep); }
:is(.ba-tone--ivory, .ba-tone--blush) .ba-leaf { fill: var(--ba-gold-ink); }
.ba-tone--gold .ba-line { stroke: var(--inv-primary); }
.ba-tone--gold .ba-leaf { fill: var(--inv-primary); }
.ba-arabesque, .ba-corner { display: block; overflow: visible; }

/* section heading: a letter-spaced label, the serif title with an italic word, the arabesque under it */
.ba-heading { margin: 0 0 2.2rem; }
.ba-heading__eyebrow {
    margin: 0 0 .55rem; font-size: .68rem; font-weight: 600; line-height: 1.3; letter-spacing: .3em; text-transform: uppercase; color: var(--ba-gold-ink);
}
.ba-heading__title {
    margin: 0; font-family: var(--ba-display); font-size: 2.55rem; font-weight: 600; line-height: 1.05; letter-spacing: -.005em; color: var(--ba-title);
    text-wrap: balance;
}
.ba-heading__title em { font-style: italic; font-weight: 500; color: var(--inv-primary); }
.ba-heading__ornament { width: 9.5rem; height: auto; margin: .8rem auto 0; }
.ba-heading--left { text-align: left; }
.ba-heading--left .ba-heading__ornament { margin-left: -1.2rem; }
.ba-tone--dark .ba-heading__eyebrow { color: var(--inv-shine); }
.ba-tone--dark .ba-heading__title { color: #fff; }
.ba-tone--dark .ba-heading__title em { color: var(--inv-shine); }
.ba-tone--gold .ba-heading__eyebrow, .ba-tone--gold .ba-heading__title, .ba-tone--gold .ba-heading__title em { color: var(--inv-deep); }

.ba-icon { width: 1.15rem; height: 1.15rem; flex: none; }

/* the photo arch (sections/_arch): 5:7, ivory frame with a gold hairline, gold line + pearls around it */
.ba-arch {
    --arch-w: 12rem; --arch-pos: center 30%; --arch-frame: calc(var(--arch-w) * .042);
    position: relative; width: var(--arch-w); aspect-ratio: 5 / 7; margin: 0; flex: none;
}
.ba-arch__window {
    position: absolute; inset: 0; overflow: hidden; padding: var(--arch-frame);
    border-radius: 50% 50% 10px 10px / 35.714% 35.714% 10px 10px;
    background: linear-gradient(160deg, #fffaf0, var(--inv-background) 60%, color-mix(in srgb, var(--inv-background) 85%, var(--inv-accent)));
    box-shadow: 0 30px 46px -26px rgb(0 0 0 / .65);
}
/* the gold hairline inside the ivory frame (never over the photo) */
.ba-arch__window::after {
    content: ''; position: absolute; inset: calc(var(--arch-frame) * .42); pointer-events: none;
    border: 1px solid var(--ba-hair); border-radius: 50% 50% 8px 8px / 35.3% 35.3% 8px 8px;
}
.ba-arch__photo, .ba-arch__empty {
    display: block; width: 100%; height: 100%; border-radius: 50% 50% 6px 6px / 34.85% 34.85% 6px 6px;
}
.ba-arch__photo { object-fit: cover; object-position: var(--arch-pos); }
.ba-arch__empty {
    position: relative; display: grid; place-items: center; overflow: hidden;
    background:
        radial-gradient(70% 45% at 50% 34%, color-mix(in srgb, var(--inv-accent) 30%, transparent), transparent 72%),
        linear-gradient(170deg, var(--inv-primary), var(--inv-deep));
}
.ba-arch__empty::before {
    content: ''; position: absolute; inset: 0; background: var(--inv-accent); opacity: .12;
    -webkit-mask: var(--ba-lattice) center / 30px 30px repeat; mask: var(--ba-lattice) center / 30px 30px repeat;
}
.ba-arch__flourish { position: absolute; left: 14%; top: 26%; width: 72%; }
.ba-arch__flourish .ba-line { stroke: url(#ba-gold); }
.ba-arch__flourish .ba-leaf { fill: url(#ba-gold-fill); }
.ba-arch__initial {
    position: relative; margin-top: 16%; font-family: var(--ba-display); font-style: italic; font-weight: 500; line-height: 1;
    font-size: calc(var(--arch-w) * .44);
    color: var(--inv-shine); background: var(--ba-gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ba-arch__initial--many { font-size: calc(var(--arch-w) * .24); white-space: nowrap; }
.ba-arch__frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ba-arch__line { stroke-width: 1.2; }
.ba-pearl { fill: url(#ba-pearl); }
/* on ivory the pearls turn rose so they stay visible */
:is(.ba-tone--ivory, .ba-tone--blush) .ba-pearl { fill: url(#ba-pearl-rose); }
.ba-arch__bead, .ba-arch__crown { fill: url(#ba-gold-fill); }
:is(.ba-tone--ivory, .ba-tone--blush) .ba-arch__bead, :is(.ba-tone--ivory, .ba-tone--blush) .ba-arch__crown { fill: var(--ba-gold-ink); }

/* the eight-point star medallion (sections/_star) */
.ba-star { display: block; overflow: visible; }
.ba-star__body { fill: var(--inv-primary); stroke: url(#ba-gold); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ba-star__inner { fill: none; stroke: var(--ba-hair); stroke-width: .9; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ba-star__ring { fill: none; stroke: var(--ba-hair-soft); stroke-width: .8; vector-effect: non-scaling-stroke; }

/* ---------- 4. cover ---------- */
.ba-cover {
    --arch-cover: min(60vw, 15.5rem, calc(44svh * .714));
    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.8rem 1.4rem 2rem;
    isolation: isolate; color: var(--inv-background);
    background:
        radial-gradient(closest-side at 50% 36%, color-mix(in srgb, var(--inv-accent) 30%, transparent), transparent),
        radial-gradient(90% 50% at 50% 100%, color-mix(in srgb, var(--inv-deep) 90%, transparent), transparent 80%),
        linear-gradient(180deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 60%, var(--inv-deep)));
    transition: opacity .9s ease;
}
.ba-cover__corner { position: absolute; top: .7rem; width: clamp(4.2rem, 19vw, 6rem); opacity: .9; pointer-events: none; }
.ba-cover__corner--l { left: .7rem; }
.ba-cover__corner--r { right: .7rem; transform: scaleX(-1); }
.ba-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); }

.ba-cover__basmalah { margin: 0 0 .1rem; font-size: 1.45rem; line-height: 1.7; }
/* room above the arch for the crown star and the pearls */
.ba-cover__art { position: relative; padding-top: calc(var(--arch-cover) * .2); }
.ba-arch--cover { --arch-w: var(--arch-cover); --arch-pos: 50% 22%; }

.ba-cover__text { display: flex; flex-direction: column; align-items: center; margin-top: 1.3rem; }
.ba-cover__title {
    display: inline-flex; align-items: center; gap: .7rem; margin: 0;
    font-size: .68rem; font-weight: 600; line-height: 1.2; letter-spacing: .34em; text-transform: uppercase; color: var(--inv-shine);
}
.ba-cover__title::before, .ba-cover__title::after { content: ''; width: 1.5rem; height: 1px; background: var(--inv-accent); }
.ba-cover__name {
    margin: .2rem 0 0; max-width: 100%; font-family: var(--ba-display); font-style: italic; font-weight: 500; font-size: 3.9rem; line-height: 1.02;
    letter-spacing: -.01em; color: #fffaf0; overflow-wrap: anywhere; text-shadow: 0 2px 22px color-mix(in srgb, var(--inv-accent) 35%, transparent);
}
.ba-cover--many .ba-cover__name { font-size: 2.8rem; }
.ba-cover__date { margin: .3rem 0 0; font-size: .82rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ba-ivory-muted); }
.ba-cover__quote {
    max-width: 30ch; margin: .45rem 0 0; font-family: var(--ba-display); font-style: italic; font-weight: 500;
    font-size: 1.06rem; line-height: 1.38; color: color-mix(in srgb, var(--inv-background) 80%, transparent);
}
.ba-cover__guest {
    width: min(100%, 18.5rem); margin: .95rem 0 0; padding: .5rem 1rem .6rem; border-radius: 14px;
    background: color-mix(in srgb, var(--inv-deep) 45%, transparent); box-shadow: inset 0 0 0 1px var(--ba-hair);
}
.ba-cover__guest p { margin: 0; font-size: .6rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-shine); }
.ba-cover__guest-name { display: block; font-family: var(--ba-display); font-size: 1.3rem; font-weight: 600; line-height: 1.22; color: #fffaf0; overflow-wrap: anywhere; }
.ba-cover__open {
    margin-top: 1rem; min-height: 3rem; padding: .7rem 2rem; font-weight: 600; letter-spacing: .06em;
    color: var(--inv-deep); background: linear-gradient(180deg, var(--inv-shine), var(--inv-accent));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 0 0 1px color-mix(in srgb, var(--inv-shine) 70%, transparent), 0 12px 26px -10px color-mix(in srgb, var(--inv-accent) 45%, transparent);
}

.ba-cover--leave { transition: opacity .9s ease .1s; }
.ba-cover--gone { opacity: 0; }
.ba-cover--gone .ba-cover__inner { transform: translateY(-2.5rem); }

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

/* opening: a tall gold line doorway behind the basmalah calligraphy, the greeting and the sentence */
.ba-opening { padding: 4.2rem 1.6rem 4.4rem; }
.ba-opening__doorway { position: relative; max-width: 21rem; margin: 0 auto; padding: 4.4rem 1.6rem 2.6rem; }
.ba-opening__arch { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ba-opening__basmalah { margin: 0; font-size: 2.35rem; line-height: 1.75; }
.ba-opening__ornament { width: 10rem; margin: .4rem auto 1.1rem; }
.ba-opening__greeting { margin: 0 auto .9rem; max-width: 20ch; font-family: var(--ba-display); font-size: 1.62rem; font-weight: 500; font-style: italic; line-height: 1.25; color: #fff; }
.ba-opening__message { margin: 0 auto; max-width: 28ch; color: var(--ba-ivory-muted); }

/* baby: the arch + nickname, the full name, the star medallions, the "lahir" ribbon, the meaning; parents */
.ba-babies { padding-bottom: 4.6rem; }
.ba-baby { text-align: left; }
.ba-baby__split { width: 9rem; margin: 2.8rem auto 2.4rem; }
.ba-baby__intro { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 1.1rem; }
.ba-arch--baby { --arch-w: min(10.6rem, 43vw); --arch-pos: center 42%; }
.ba-baby--many .ba-arch--baby { --arch-w: min(8.8rem, 36vw); }
/* room for the pearls, and a blush arch offset behind */
.ba-baby__art { position: relative; isolation: isolate; padding: calc(var(--arch-w, 10rem) * .2) calc(var(--arch-w, 10rem) * .13) 0; }
.ba-baby__art { --arch-w: min(10.6rem, 43vw); }
.ba-baby--many .ba-baby__art { --arch-w: min(8.8rem, 36vw); }
.ba-baby__art::before {
    content: ''; position: absolute; z-index: -1; left: 26%; right: -4%; top: 30%; bottom: -5%;
    border-radius: 50% 50% 12px 12px / 30% 30% 12px 12px;
    background: linear-gradient(170deg, color-mix(in srgb, var(--inv-blush) 75%, #fff), var(--inv-blush));
}
.ba-baby--flip .ba-baby__intro { grid-template-columns: minmax(0, 1fr) auto; }
.ba-baby--flip .ba-baby__art { order: 2; }
.ba-baby--flip .ba-baby__art::before { left: -4%; right: 26%; }
.ba-baby--flip .ba-baby__who, .ba-baby--flip .ba-baby__name { text-align: right; }
.ba-baby__who { padding-bottom: .4rem; min-width: 0; }
.ba-baby__tags { display: flex; flex-direction: column; gap: .15rem; margin: 0 0 .6rem; font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ba-gold-ink); }
.ba-baby__tags span::before { content: '✦'; margin-right: .45em; font-size: .7em; color: var(--inv-accent); }
.ba-baby__nickname {
    margin: 0; font-family: var(--ba-display); font-style: italic; font-weight: 500; font-size: 3.5rem; line-height: .95;
    letter-spacing: -.015em; color: var(--inv-primary); overflow-wrap: anywhere;
}
.ba-baby--many .ba-baby__nickname { font-size: 2.8rem; }
.ba-baby__name {
    margin: 1.3rem 0 1.4rem; font-family: var(--ba-display); font-size: 1.7rem; font-weight: 600; line-height: 1.12;
    color: var(--ba-title); overflow-wrap: anywhere; text-wrap: balance;
}

/* the birth data: three eight-point star medallions */
.ba-medals { display: flex; justify-content: center; gap: clamp(.35rem, 2vw, .7rem); margin: 0; }
.ba-medal {
    position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: min(6.7rem, 29vw); aspect-ratio: 1; text-align: center; color: #fffaf0;
}
.ba-medals--1 .ba-medal, .ba-medals--2 .ba-medal { width: min(7.4rem, 34vw); }
.ba-medal__star { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; filter: drop-shadow(0 12px 14px color-mix(in srgb, var(--inv-deep) 40%, transparent)); }
.ba-medal dt { font-size: .52rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-shine); }
.ba-medal dd { display: flex; align-items: baseline; justify-content: center; gap: .15rem; margin: .05rem 0 0; }
.ba-medal__num { font-family: var(--ba-display); font-size: clamp(1.5rem, 7vw, 1.85rem); font-weight: 600; line-height: 1; font-variant-numeric: lining-nums; }
.ba-medal__unit { font-size: .66rem; font-weight: 500; color: var(--inv-shine); }

/* "lahir" ribbon: the day as a big numeral + weekday/month/year, then the place, between fine gold rules */
.ba-born {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .6rem 1.1rem;
    margin: 1.6rem 0 0; padding: .95rem .3rem; border-block: 1px solid var(--ba-hair);
}
.ba-born::before { content: ''; position: absolute; inset: 3px 0; border-block: 1px solid var(--ba-hair-soft); pointer-events: none; }
.ba-born > :only-child { grid-column: 1 / -1; }
.ba-born__date { display: flex; align-items: center; gap: .6rem; margin: 0; }
.ba-born__day { font-family: var(--ba-display); font-size: 3.3rem; font-weight: 600; line-height: .9; color: var(--inv-primary); font-variant-numeric: lining-nums; }
.ba-born__rest { display: flex; flex-direction: column; font-family: var(--ba-display); font-size: 1.18rem; font-weight: 600; line-height: 1.1; color: var(--ba-title); }
.ba-born__rest small, .ba-born__place small {
    display: block; margin-bottom: .15rem; font-family: var(--ba-sans); font-size: .58rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ba-gold-ink);
}
.ba-born__place { display: flex; align-items: flex-start; gap: .45rem; margin: 0; padding-left: 1rem; border-left: 1px solid var(--ba-hair); font-size: .9rem; font-weight: 500; line-height: 1.35; }
.ba-born > .ba-born__place:only-child { padding-left: 0; border-left: 0; }
.ba-born__place .ba-icon { margin-top: .1rem; color: var(--ba-gold-ink); }

/* the name meaning: a blush panel with a round arch top */
.ba-meaning {
    position: relative; margin: 1.8rem 0 0; padding: 2.3rem 1.4rem 1.5rem; text-align: center;
    border-radius: 12rem 12rem 18px 18px / 4.2rem 4.2rem 18px 18px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-blush) 50%, var(--inv-background)), color-mix(in srgb, var(--inv-blush) 26%, var(--inv-background)));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-blush) 80%, var(--inv-accent));
}
.ba-meaning::before {
    content: '\201C'; position: absolute; left: 50%; top: -.25rem; transform: translateX(-50%);
    font-family: var(--ba-display); font-size: 4.4rem; line-height: 1; color: var(--ba-gold-ink);
}
.ba-meaning figcaption { font-size: .64rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--ba-gold-ink); }
.ba-meaning blockquote { margin: .45rem 0 0; font-family: var(--ba-display); font-style: italic; font-weight: 500; font-size: 1.24rem; line-height: 1.45; color: var(--inv-text); }

/* parents: a dark panel with gold corner flourishes */
.ba-parents {
    position: relative; isolation: isolate; margin: 2.8rem 0 0; padding: 2.1rem 1.4rem 1.7rem; border-radius: 22px;
    color: var(--inv-background); background:
        radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--inv-accent) 18%, transparent), transparent 70%),
        linear-gradient(160deg, var(--inv-primary), var(--inv-deep));
    box-shadow: inset 0 0 0 1px var(--ba-hair), var(--ba-drop);
}
.ba-parents__corner { position: absolute; top: .5rem; width: 3.6rem; }
.ba-parents__corner--l { left: .5rem; }
.ba-parents__corner--r { right: .5rem; transform: scaleX(-1); }
.ba-parents .ba-line { stroke: url(#ba-gold); }
.ba-parents .ba-leaf { fill: url(#ba-gold-fill); }
.ba-parents__label { margin: 0 0 .4rem; font-size: .64rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-shine); }
.ba-parents__names { display: flex; flex-direction: column; margin: 0; font-family: var(--ba-display); font-size: 1.5rem; font-weight: 600; line-height: 1.25; color: #fffaf0; }
.ba-parents__names .ba-amp { font-size: 1.25rem; color: var(--inv-shine); }
.ba-parents__address {
    display: flex; justify-content: center; align-items: flex-start; gap: .5rem; margin: 1rem auto 0; padding-top: .9rem; max-width: 22rem;
    font-size: .86rem; color: var(--ba-ivory-muted); border-top: 1px solid var(--ba-hair-soft);
}
.ba-parents__address .ba-icon { margin-top: .15rem; color: var(--inv-shine); }

/* message: the faint "Alhamdulillah" calligraphy behind large italic words, a gold rule on the left */
.ba-message { text-align: left; padding-right: 1.6rem; }
.ba-message { padding-bottom: 2.2rem; }
.ba-message__callig { margin: 1.2rem -1rem 0; text-align: center; pointer-events: none; }
.ba-message__callig p { margin: 0; font-size: 5.4rem; line-height: 1.55; opacity: .3; white-space: nowrap; }
.ba-message__quote { position: relative; margin: 0; padding: .2rem 0 .2rem 1.3rem; border-left: 1px solid var(--inv-accent); }
.ba-message__quote::before {
    content: ''; position: absolute; left: -5px; top: -5px; width: 9px; height: 9px; transform: rotate(45deg);
    background: var(--inv-accent); box-shadow: 0 0 0 3px var(--inv-primary);
}
.ba-message__quote p { margin: 0; font-family: var(--ba-display); font-style: italic; font-size: 1.5rem; font-weight: 500; line-height: 1.42; color: #fffaf0; }
.ba-message__quote cite {
    display: inline-flex; align-items: center; gap: .7rem; margin-top: 1.2rem;
    font-style: normal; font-size: .7rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-shine);
}
.ba-message__quote cite::before { content: ''; width: 1.8rem; height: 1px; background: var(--inv-accent); }

/* events: a card with a double gold hairline, the photo under a round arch top, the date medallion on its edge */
.ba-event {
    margin: 0 4px; border-radius: 22px; background: var(--ba-paper); text-align: left;
    box-shadow: 0 0 0 1px var(--ba-hair), 0 0 0 5px var(--ba-paper), 0 0 0 6px var(--ba-hair-soft), var(--ba-drop);
}
.ba-event + .ba-event { margin-top: 2.6rem; }
.ba-event__media { padding: .6rem .6rem 0; }
.ba-event__photo {
    display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: center 45%;
    border-radius: 50% 50% 12px 12px / 36% 36% 12px 12px;
}
.ba-event__body { padding: 1.2rem 1.25rem 1.35rem; }
.ba-event--photo .ba-event__body { padding-top: 0; }
.ba-event__date {
    display: flex; flex-direction: column; align-items: center; justify-content: center; width: 5.3rem; aspect-ratio: 1; margin: 0 0 .7rem;
    border-radius: 50%; color: #fffaf0; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--inv-primary) 80%, #fff), var(--inv-primary) 55%, var(--inv-deep));
    box-shadow: 0 0 0 3px var(--ba-paper), 0 0 0 4px var(--inv-accent), 0 14px 22px -12px color-mix(in srgb, var(--inv-deep) 80%, transparent);
}
.ba-event--photo .ba-event__date { margin-top: -2.65rem; position: relative; }
.ba-event--flip .ba-event__date {
    margin-left: auto; color: var(--inv-text);
    background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--inv-blush) 40%, #fff), var(--inv-blush));
}
.ba-event__weekday { font-size: .58rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-shine); }
.ba-event--flip .ba-event__weekday { color: var(--ba-gold-ink); }
.ba-event__day { font-family: var(--ba-display); font-size: 2.15rem; font-weight: 600; line-height: 1; }
.ba-event__month { font-size: .56rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.ba-event--flip .ba-event__name, .ba-event--flip .ba-event__full { text-align: right; }
.ba-event__name { margin: 0; font-family: var(--ba-display); font-size: 1.85rem; font-weight: 600; line-height: 1.08; color: var(--inv-primary); }
.ba-event__full { margin: .25rem 0 0; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ba-gold-ink); }
.ba-event__rows { display: grid; gap: .75rem; margin: 1.1rem 0 0; padding: 1rem 0 0; list-style: none; font-size: .92rem; border-top: 1px solid var(--ba-hair-soft); }
.ba-event__rows li { display: flex; align-items: flex-start; gap: .7rem; }
.ba-event__rows .ba-icon { width: 2rem; height: 2rem; padding: .42rem; border-radius: 50%; color: var(--inv-primary); box-shadow: inset 0 0 0 1px var(--ba-hair); background: color-mix(in srgb, var(--inv-accent) 12%, #fff); }
.ba-event__rows li > span { padding-top: .25rem; }
.ba-event__venue { display: block; font-weight: 600; }
.ba-event__address { display: block; font-size: .86rem; color: var(--ba-muted); }
.ba-event .inv-maps { margin: 1.15rem 0 0; text-align: center; }
.ba-event .inv-maps .inv-button { width: 100%; font-weight: 600; }
.ba-event .inv-maps__frame { height: 190px; border-radius: 14px; }

/* countdown: four small ivory arches with a gold hairline */
.ba-countdown .inv-countdown { gap: clamp(.45rem, 2.4vw, .8rem); }
.ba-countdown .inv-countdown__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; width: clamp(3.9rem, 18.5vw, 4.6rem); min-width: 0;
    aspect-ratio: 5 / 6.6; padding: .7rem 0 0; color: var(--inv-text);
    border-radius: 999px 999px 10px 10px; background: linear-gradient(180deg, #fffaf0, var(--inv-background));
    box-shadow: inset 0 0 0 3px #fffaf0, inset 0 0 0 4px var(--ba-hair), 0 18px 26px -14px rgb(0 0 0 / .6);
}
.ba-countdown .inv-countdown__value { font-family: var(--ba-display); font-size: 1.95rem; font-weight: 600; line-height: 1; color: var(--inv-primary); font-variant-numeric: lining-nums tabular-nums; }
.ba-countdown .inv-countdown__label { margin-top: .15rem; font-size: .5rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ba-gold-ink); }
.ba-countdown .inv-countdown__done { font-family: var(--ba-display); font-size: 1.4rem; font-style: italic; color: var(--inv-shine); }
.ba-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 2rem; }
.ba-countdown .inv-countdown__actions .inv-button {
    width: min(100%, 17rem); min-height: 2.75rem; padding: .6rem 1rem; font-size: .84rem; font-weight: 600;
    color: var(--inv-background); background: color-mix(in srgb, var(--inv-background) 8%, transparent);
    box-shadow: inset 0 0 0 1px var(--ba-hair);
}
.ba-countdown .inv-countdown__actions .inv-button:first-child { color: var(--inv-deep); background: linear-gradient(180deg, var(--inv-shine), var(--inv-accent)); box-shadow: none; }
.ba-countdown .inv-cal {
    --inv-cal-bg: #fffaf0; --inv-cal-mark: var(--inv-primary);
    max-width: 19rem; margin: 2.8rem auto 0; padding-top: 1.8rem; border-radius: 12rem 12rem 18px 18px / 3.6rem 3.6rem 18px 18px;
    box-shadow: inset 0 0 0 4px #fffaf0, inset 0 0 0 5px var(--ba-hair), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.ba-countdown .inv-cal__month { font-family: var(--ba-display); font-size: 1.5rem; font-weight: 600; font-style: italic; color: var(--inv-primary); }

/* prayer — the hero: a tall dark arch panel with a gold line arch, pearls and corner flourishes */
.ba-prayer { padding: 3.6rem 1.1rem 4.2rem; }
.ba-prayer__panel {
    position: relative; isolation: isolate; max-width: 24rem; margin: 0 auto; padding: 7.2rem 1.7rem 3.3rem; color: var(--inv-background);
    border-radius: 999px 999px 26px 26px;
    background:
        radial-gradient(70% 34% at 50% 18%, color-mix(in srgb, var(--inv-accent) 26%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-primary), var(--inv-deep));
    box-shadow: 0 0 0 5px var(--inv-background), 0 0 0 6px var(--ba-hair), 0 34px 60px -30px color-mix(in srgb, var(--inv-deep) 90%, transparent);
}
.ba-prayer__panel::before {
    content: ''; position: absolute; inset: 11px; z-index: -1; pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--inv-accent) 75%, transparent); border-radius: 999px 999px 18px 18px;
}
.ba-prayer__panel::after {
    content: ''; position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none; background: var(--inv-accent); opacity: .08;
    -webkit-mask: var(--ba-lattice) center top / 36px 36px repeat; mask: var(--ba-lattice) center top / 36px 36px repeat;
}
.ba-prayer__pearls { position: absolute; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 2; overflow: visible; pointer-events: none; }
.ba-prayer__corner { position: absolute; bottom: 1.1rem; width: 3.4rem; }
.ba-prayer__corner--l { left: 1.1rem; transform: scaleY(-1); }
.ba-prayer__corner--r { right: 1.1rem; transform: scale(-1, -1); }
.ba-prayer .ba-line { stroke: url(#ba-gold); }
.ba-prayer .ba-leaf { fill: url(#ba-gold-fill); }
.ba-prayer .ba-pearl { fill: url(#ba-pearl); }
.ba-prayer__eyebrow {
    display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 .5rem;
    font-size: .64rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--inv-shine);
}
.ba-prayer__eyebrow::before, .ba-prayer__eyebrow::after { content: ''; width: 1.2rem; height: 1px; background: var(--inv-accent); }
.ba-prayer__arabic { margin: 0; font-size: 1.8rem; line-height: 2.05; }
.ba-prayer__ornament { width: 9rem; margin: .6rem auto 1rem; }
.ba-prayer__text { margin: 0; }
.ba-prayer__text p { margin: 0; font-family: var(--ba-display); font-size: 1.22rem; font-style: italic; font-weight: 500; line-height: 1.45; color: #fffaf0; }
.ba-prayer__text cite {
    display: inline-block; margin-top: 1rem; padding: .3rem .2rem; font-style: normal; font-size: .66rem; font-weight: 600;
    letter-spacing: .24em; text-transform: uppercase; color: var(--inv-shine); border-block: 1px solid var(--ba-hair);
}

/* rundown: a fine gold line with an eight-point star at each step, the times in gold serif numerals */
.ba-rundown__list { position: relative; margin: 0 auto; padding: 0; max-width: 24rem; list-style: none; text-align: left; }
.ba-rundown__list::before {
    content: ''; position: absolute; left: calc(4.4rem + .45rem + .7rem - .5px); top: .4rem; bottom: .6rem; width: 1px; transform-origin: top;
    background: linear-gradient(180deg, transparent, var(--inv-accent) 6%, var(--inv-accent) 94%, transparent);
}
.ba-rundown__item { position: relative; display: grid; grid-template-columns: 4.4rem 1.4rem minmax(0, 1fr); column-gap: .45rem; align-items: start; padding-bottom: 1.35rem; }
.ba-rundown__item:last-child { padding-bottom: 0; }
.ba-rundown__time { padding-top: .05rem; font-family: var(--ba-display); font-size: 1.55rem; font-weight: 600; line-height: 1.1; text-align: right; color: var(--inv-shine); font-variant-numeric: lining-nums tabular-nums; }
.ba-rundown__node { position: relative; justify-self: center; width: .78rem; height: .78rem; margin-top: .55rem; }
.ba-rundown__node::before, .ba-rundown__node::after {
    content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--inv-shine), var(--inv-accent));
    box-shadow: 0 0 0 3px var(--inv-primary);
}
.ba-rundown__node::after { transform: rotate(45deg); box-shadow: none; }
.ba-rundown__body h3 { margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.4; color: #fffaf0; }
.ba-rundown__body p { margin: .15rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--ba-ivory-muted); }

/* story: small arch windows beside the text, alternating; text-only chapters as ivory panels with a numeral */
.ba-story__list { display: grid; gap: 2.4rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.ba-story__item { display: grid; grid-template-columns: 40% minmax(0, 1fr); align-items: center; gap: 1.3rem; }
.ba-story__item--flip { grid-template-columns: minmax(0, 1fr) 40%; }
.ba-story__item--flip .ba-story__media { order: 2; }
.ba-story__media { padding: 6px; }
.ba-story__photo {
    display: block; width: 100%; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 999px 999px 10px 10px;
    box-shadow: 0 0 0 4px #fffaf0, 0 0 0 5px var(--ba-hair), 0 22px 30px -20px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.ba-story__when { display: inline-block; font-size: .64rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ba-gold-ink); }
.ba-story__when::before { content: '✦'; margin-right: .5em; font-size: .8em; color: var(--inv-accent); }
.ba-story__body h3 { margin: .35rem 0 0; font-family: var(--ba-display); font-size: 1.5rem; font-weight: 600; line-height: 1.12; color: var(--ba-title); }
.ba-story__body p { margin: .45rem 0 0; font-size: .9rem; line-height: 1.55; color: var(--ba-muted); }
.ba-story__item--text {
    grid-template-columns: 3rem minmax(0, 1fr); align-items: start; gap: 1rem; padding: 1.3rem 1.25rem; border-radius: 18px;
    background: color-mix(in srgb, #fff 65%, transparent); box-shadow: inset 0 0 0 1px var(--ba-hair);
}
.ba-story__num { font-family: var(--ba-display); font-size: 2.6rem; font-weight: 600; font-style: italic; line-height: .9; color: var(--ba-gold-ink); }

/* gallery: the first photo a tall arch over two rows, the others with a fine gold edge */
.ba-gallery .inv-gallery { gap: .6rem; }
.ba-gallery .inv-gallery__item { border-radius: 14px; box-shadow: 0 0 0 1px var(--ba-hair), 0 16px 28px -18px rgb(0 0 0 / .7); }
.ba-gallery .inv-gallery__item:first-child { grid-row: span 2; aspect-ratio: auto; border-radius: 999px 999px 14px 14px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-primary) 80%, #000), 0 0 0 4px var(--inv-accent), 0 16px 28px -18px rgb(0 0 0 / .7); }

/* live streaming: a dark card with a round arch-topped left edge */
.ba-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.3rem 1.4rem; border-radius: 22px; color: var(--inv-background); text-align: left;
    background: radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--inv-accent) 22%, transparent), transparent 70%), linear-gradient(140deg, var(--inv-primary), var(--inv-deep));
    box-shadow: inset 0 0 0 1px var(--ba-hair), var(--ba-drop);
}
.ba-stream__icon {
    display: grid; place-items: center; width: 3.4rem; aspect-ratio: 5 / 6.4; border-radius: 999px 999px 8px 8px; color: var(--inv-deep);
    background: linear-gradient(180deg, var(--inv-shine), var(--inv-accent));
}
.ba-stream__icon .ba-icon { width: 1.6rem; height: 1.6rem; }
.ba-stream__label { margin: 0; font-size: .6rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-shine); }
.ba-stream__title { margin: .1rem 0 .2rem; font-family: var(--ba-display); font-size: 1.75rem; font-weight: 600; line-height: 1.05; color: #fff; }
.ba-stream__title em { font-weight: 500; color: var(--inv-shine); }
.ba-stream__text p:not(.ba-stream__label) { margin: 0; font-size: .86rem; color: var(--ba-ivory-muted); }
.ba-stream__text .ba-stream__note { margin-top: .3rem !important; font-weight: 600; color: var(--inv-shine) !important; }
.ba-stream__button { grid-column: 1 / -1; min-height: 2.75rem; color: var(--inv-deep) !important; background: linear-gradient(180deg, var(--inv-shine), var(--inv-accent)) !important; font-weight: 600; }

/* RSVP card: ivory with a gentle round top and a gold hairline */
.ba-rsvp__card {
    position: relative; isolation: isolate; padding: 2.6rem 1.15rem 1.4rem; color: var(--inv-text);
    border-radius: 12rem 12rem 22px 22px / 3.6rem 3.6rem 22px 22px; background: var(--ba-paper);
    box-shadow: 0 26px 44px -26px rgb(0 0 0 / .7);
}
.ba-rsvp__card::before {
    content: ''; position: absolute; inset: 6px; z-index: -1; pointer-events: none; border: 1px solid var(--ba-hair);
    border-radius: 12rem 12rem 17px 17px / 3.3rem 3.3rem 17px 17px;
}
.ba-rsvp__intro { margin: 0 auto 1.1rem; max-width: 30ch; font-size: .9rem; color: var(--ba-muted); }
.ba-rsvp__sent { margin-bottom: 1rem; }
.ba-rsvp__check { display: block; width: 4.1rem; height: 4.1rem; margin: 0 auto .5rem; }
.ba-rsvp__check circle { fill: var(--inv-primary); stroke: var(--inv-accent); stroke-width: 2; }
.ba-rsvp__check path { fill: none; stroke: var(--inv-shine); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
html.inv-anim .ba-rsvp__sent .ba-rsvp__check { animation: ba-pop .7s cubic-bezier(.34, 1.56, .64, 1) both; }
html.inv-anim .ba-rsvp__sent .ba-rsvp__check path { animation: ba-draw .45s ease-out .3s both; }
.ba-rsvp__thanks { margin: 0; font-family: var(--ba-display); font-size: 1.6rem; font-style: italic; font-weight: 600; color: var(--inv-primary); }
.ba-rsvp__line { margin: .1rem 0 0; font-size: .9rem; color: var(--ba-muted); }
.ba-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .84rem; font-weight: 600; color: var(--inv-primary); }

/* gift: ivory cards with a round top and a gold hairline, two per row; the address card below */
.ba-gift__intro { color: var(--ba-ivory-muted); }
.ba-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.3rem; }
.ba-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ba-gift .inv-gift__account,
.ba-gift .inv-gift__address {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; margin: 0;
    padding: 1.7rem .75rem 1rem; color: var(--inv-text); background: var(--ba-paper);
    border-radius: 6rem 6rem 14px 14px / 2.4rem 2.4rem 14px 14px;
    box-shadow: inset 0 0 0 4px var(--ba-paper), inset 0 0 0 5px var(--ba-hair), 0 18px 30px -20px rgb(0 0 0 / .6);
}
.ba-gift .inv-gift__account p, .ba-gift .inv-gift__address p { margin: 0; }
.ba-gift .inv-gift__bank { font-weight: 600; font-size: .85rem; color: var(--inv-primary); }
.ba-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .4rem; background: #fff; }
.ba-gift .inv-gift__logo img { max-width: 5rem; }
.ba-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);
}
.ba-gift .inv-gift__holder { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ba-muted); overflow-wrap: anywhere; }
.ba-gift .inv-button { margin-top: .35rem; min-height: 2.25rem; padding: .35rem .9rem; font-size: .74rem; font-weight: 600; }
.ba-gift .inv-gift__address { margin-top: .75rem; font-size: .875rem; border-radius: 14px; }
.ba-gift .inv-gift__address .inv-gift__holder { font-size: .72rem; }

/* wishlist: white rows with a gold hairline and a numbered star */
.ba-wishlist__intro { color: var(--ba-muted); font-size: .92rem; }
.ba-wishlist__list { display: grid; gap: .7rem; margin: 1.3rem 0 0; padding: 0; list-style: none; text-align: left; }
.ba-wishlist__item {
    display: grid; grid-template-columns: 2.9rem minmax(0, 1fr); align-items: start; gap: .95rem; padding: .9rem 1rem; border-radius: 16px;
    background: var(--ba-paper); box-shadow: inset 0 0 0 1px var(--ba-hair-soft), 0 12px 22px -18px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.ba-wishlist__number { position: relative; isolation: isolate; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; font-family: var(--ba-display); font-size: 1.2rem; font-weight: 600; color: #fffaf0; }
.ba-wishlist__star { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.ba-wishlist__star .ba-star__ring { display: none; }
.ba-wishlist__photo { display: block; width: 2.9rem; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 999px 999px 6px 6px; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ba-hair); }
.ba-wishlist__text p { margin: 0; }
.ba-wishlist__name { padding-top: .15rem; font-family: var(--ba-display); font-size: 1.24rem; font-weight: 600; line-height: 1.25; color: var(--ba-title); overflow-wrap: anywhere; }
.ba-wishlist__note { margin-top: .1rem !important; font-size: .86rem; color: var(--ba-muted); }
.ba-wishlist__shop { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.2rem; margin-top: .25rem; font-size: .82rem; font-weight: 600; text-decoration: none; }
.ba-wishlist__shop .ba-icon { width: 1rem; height: 1rem; }

/* co-hosts: the names in the serif on the champagne band, split by small stars */
.ba-cohosts__list { display: flex; flex-direction: column; align-items: center; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.ba-cohosts__list li { max-width: 26ch; font-family: var(--ba-display); font-size: 1.3rem; font-weight: 600; line-height: 1.25; color: var(--inv-deep); }
.ba-cohosts__list li + li::before { content: '✦'; display: block; margin: 0 auto .45rem; font-size: .7rem; line-height: 1; color: var(--inv-primary); }

/* contacts: pill rows with the initial in a primary star and a WhatsApp button */
.ba-contacts__list { display: grid; gap: .75rem; max-width: 24rem; margin: 0 auto; }
.ba-contact {
    display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .6rem .6rem .6rem .7rem; border-radius: 999px;
    background: var(--ba-paper); text-align: left; box-shadow: inset 0 0 0 1px var(--ba-hair), 0 12px 22px -18px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.ba-contact__avatar { position: relative; isolation: isolate; display: grid; place-items: center; width: 3rem; height: 3rem; font-family: var(--ba-display); font-size: 1.35rem; font-weight: 600; color: #fffaf0; }
.ba-contact__star { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.ba-contact__star .ba-star__ring { display: none; }
.ba-contact p { margin: 0; }
.ba-contact__name { font-weight: 600; font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; }
.ba-contact__role { font-size: .78rem; color: var(--ba-muted); }
.ba-contact__phone { font-size: .85rem; }
.ba-contact__button { min-height: 2.5rem; padding: .45rem .95rem; font-size: .8rem; font-weight: 600; }
.ba-contact__button .ba-icon { width: 1.05rem; height: 1.05rem; }

/* health protocol: ivory chips with a gold check */
.ba-protocol__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.ba-protocol__list li {
    display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border-radius: 999px; font-size: .84rem; font-weight: 500;
    background: var(--ba-paper); box-shadow: inset 0 0 0 1px var(--ba-hair);
}
.ba-protocol__list .ba-icon { width: 1rem; height: 1rem; color: var(--ba-gold-ink); }
.ba-protocol__note { font-size: .88rem; color: var(--ba-muted); }

/* vendors: rows split by fine gold lines */
.ba-vendors__list { max-width: 24rem; margin: 0 auto; padding: 0; list-style: none; border-top: 1px solid var(--ba-hair); }
.ba-vendor { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .9rem .2rem; text-align: left; border-bottom: 1px solid var(--ba-hair); }
.ba-vendor__text { display: flex; flex-direction: column; min-width: 0; }
.ba-vendor__role { font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ba-gold-ink); }
.ba-vendor__name { font-family: var(--ba-display); font-size: 1.28rem; font-weight: 600; line-height: 1.2; color: var(--inv-text); overflow-wrap: anywhere; }
.ba-vendor__link {
    display: inline-flex; align-items: center; gap: .3rem; flex: none; min-height: 2.2rem; padding: .3rem .75rem; border-radius: 999px;
    font-size: .74rem; font-weight: 600; text-decoration: none; color: var(--inv-primary); box-shadow: inset 0 0 0 1px var(--ba-hair);
}
.ba-vendor__link .ba-icon { width: .95rem; height: .95rem; }
.ba-tone--dark .ba-vendor__role { color: var(--inv-shine); }
.ba-tone--dark .ba-vendor__name { color: #fffaf0; }
.ba-tone--dark .ba-vendor__link { color: var(--inv-shine); }

/* closing: the full photo fading into the primary colour, a gold line arch with pearls, the thanks, the names */
.ba-closing { padding: 4.4rem 1.6rem 3.3rem; background: radial-gradient(80% 40% at 50% 100%, color-mix(in srgb, var(--inv-accent) 12%, transparent), transparent 75%), var(--inv-primary); }
.ba-closing--photo { padding-top: 0; }
.ba-closing__photo { position: relative; z-index: -1; height: min(125vw, 36rem); margin: 0 -1.6rem; overflow: hidden; }
.ba-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 25%; --inv-parallax: 30px; }
.ba-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 36%, color-mix(in srgb, var(--inv-primary) 55%, transparent) 64%, var(--inv-primary) 97%);
}
.ba-closing__body { position: relative; }
.ba-closing--photo .ba-closing__body { margin-top: -7.5rem; }
.ba-closing__arch { display: block; width: min(17rem, 80%); height: auto; margin: 0 auto -3.7rem; overflow: visible; }
.ba-closing__eyebrow { margin: 0 0 .2rem; font-family: var(--ba-display); font-size: 1.2rem; font-style: italic; font-weight: 500; color: var(--inv-shine); }
.ba-closing__title { margin: 0 0 1rem; font-family: var(--ba-display); font-size: 3.1rem; font-weight: 600; line-height: 1.02; color: #fff; }
.ba-closing__title em { font-style: italic; font-weight: 500; color: var(--inv-shine); }
.ba-closing__message { margin: 0 auto; max-width: 30ch; color: var(--ba-ivory-muted); }
.ba-closing__salam { margin: 1.1rem auto 0; max-width: 24ch; font-family: var(--ba-display); font-size: 1.22rem; font-style: italic; font-weight: 500; line-height: 1.35; color: var(--inv-shine); }
.ba-closing__signature { margin: 1rem auto 0; max-width: 30ch; font-size: .86rem; color: var(--ba-ivory-muted); }
.ba-closing__ornament { width: 9rem; margin: 1.6rem auto .3rem; }
.ba-closing__names {
    margin: 0; font-family: var(--ba-display); font-size: 2.7rem; font-style: italic; font-weight: 500; line-height: 1.1; overflow-wrap: anywhere;
    color: var(--inv-shine); background: var(--ba-gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---------- 6. forms (shared RSVP + wishes, restyled) ---------- */
.ba-main .inv-form { gap: 1rem; text-align: left; }
.ba-main .inv-form label, .ba-main .inv-form__choices legend { font-size: .82rem; font-weight: 600; color: var(--inv-text); }
.ba-main .inv-form input:not([type=radio]):not([type=checkbox]),
.ba-main .inv-form select,
.ba-main .inv-form textarea {
    width: 100%; min-height: 2.9rem; padding: .7rem .9rem; border: 0; border-radius: 12px;
    font: 400 .95rem/1.4 var(--ba-sans); color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 60%, transparent);
    transition: box-shadow .2s ease;
}
.ba-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;
}
.ba-main .inv-form input:not([type=radio]):focus-visible,
.ba-main .inv-form select:focus-visible,
.ba-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-accent) 35%, transparent);
}
.ba-main .inv-form button[type=submit] {
    width: 100%; min-height: 3rem; font-weight: 600; letter-spacing: .04em; color: #fffaf0;
    background: linear-gradient(180deg, var(--inv-primary), var(--inv-deep));
    box-shadow: inset 0 0 0 1px var(--ba-hair), 0 12px 22px -12px color-mix(in srgb, var(--inv-deep) 80%, transparent);
}
.ba-main .inv-form .inv-button--outline { width: 100%; min-height: 2.75rem; }
.ba-main .inv-form__notice { text-align: center; }

/* the three answers as cards with icons (the radio dot is hidden but still focusable) */
.ba-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.ba-rsvp .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.ba-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: 600; line-height: 1.2; color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 60%, transparent);
    transition: background-color .25s ease, color .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.ba-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ba-rsvp .inv-form__choices label::before {
    content: ''; width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--inv-accent) 22%, #fff);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease;
}
.ba-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(--ba-choice-icon) center / contain no-repeat; mask: var(--ba-choice-icon) center / contain no-repeat;
}
.ba-rsvp .inv-form__choices label:nth-of-type(1) {
    --ba-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");
}
.ba-rsvp .inv-form__choices label:nth-of-type(2) {
    --ba-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");
}
.ba-rsvp .inv-form__choices label:nth-of-type(3) {
    --ba-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");
}
.ba-rsvp .inv-form__choices label:has(input:checked) {
    color: #fffaf0; background: linear-gradient(180deg, var(--inv-primary), var(--inv-deep)); transform: translateY(-3px);
    box-shadow: 0 0 0 2px var(--inv-accent), 0 12px 24px -12px color-mix(in srgb, var(--inv-deep) 80%, transparent);
}
.ba-rsvp .inv-form__choices label:has(input:checked)::before { background-color: rgb(255 255 255 / .16); transform: scale(1.1); }
.ba-rsvp .inv-form__choices label:has(input:checked)::after { color: var(--inv-shine); }
.ba-rsvp .inv-form__choices label:has(input:focus-visible) { outline: 2px solid var(--inv-accent); outline-offset: 3px; }

/* wishes: the form on an ivory card with a gold hairline, the wishes in a scroll box */
.ba-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.ba-wishes .inv-form {
    padding: 1.4rem 1.1rem; border-radius: 20px; background: var(--ba-paper);
    box-shadow: inset 0 0 0 4px var(--ba-paper), inset 0 0 0 5px var(--ba-hair), 0 20px 36px -26px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.ba-wishes .inv-wishes__list { margin-top: 1.4rem; }
.ba-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .55rem; border-radius: 18px; background: color-mix(in srgb, #fff 40%, transparent); box-shadow: inset 0 0 0 1px var(--ba-hair-soft);
}
.ba-wishes .inv-wish { position: relative; padding: .75rem .9rem .75rem 1.9rem; border-radius: 14px; background: #fff; text-align: left; box-shadow: 0 2px 10px rgb(0 0 0 / .05); }
.ba-wishes .inv-wish::before { content: '✦'; position: absolute; left: .75rem; top: .78rem; font-size: .7rem; color: var(--inv-accent); }
.ba-wishes .inv-wish__name { font-weight: 600; color: var(--inv-primary); }
.ba-wishes .inv-wish__message { font-size: .88rem; line-height: 1.5; }
.ba-wishes .inv-wish__time { font-size: .72rem; color: var(--ba-muted); }

/* ---------- 7. shared components ---------- */
.ba-main .inv-button { font-weight: 600; }
body .inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--ba-paper) 94%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-text) 72%, transparent);
    --inv-nav-active: var(--inv-primary);
    font-family: var(--ba-sans);
}

/* ---------- 8. screen sizes ---------- */
@media (max-height: 760px) {
    .ba-cover { --arch-cover: min(52vw, 13.4rem, calc(38svh * .714)); padding-top: 1.4rem; padding-bottom: 1.6rem; }
    .ba-cover__basmalah { font-size: 1.3rem; }
    .ba-cover__text { margin-top: 1.05rem; }
    .ba-cover__name { font-size: 3.25rem; }
    .ba-cover__quote { font-size: 1rem; }
    .ba-cover__guest { margin-top: .75rem; }
    .ba-cover__open { margin-top: .85rem; }
}
@media (max-height: 660px) {
    .ba-cover { --arch-cover: min(50vw, calc(36svh * .714)); padding-top: 1.1rem; padding-bottom: 1.3rem; }
    .ba-cover__corner { width: 3.8rem; }
    .ba-cover__basmalah { font-size: 1.15rem; line-height: 1.6; }
    .ba-cover__text { margin-top: .85rem; }
    .ba-cover__title { font-size: .62rem; }
    .ba-cover__name { font-size: 2.85rem; }
    .ba-cover__date { font-size: .76rem; }
    .ba-cover__quote { font-size: .94rem; line-height: 1.3; }
    .ba-cover__guest { padding: .4rem .85rem .5rem; }
    .ba-cover__guest-name { font-size: 1.15rem; }
    .ba-cover__open { min-height: 2.75rem; padding: .6rem 1.7rem; }
}
@media (max-height: 600px) {
    .ba-cover { --arch-cover: min(40vw, calc(29svh * .714)); }
    .ba-cover__name { font-size: 2.55rem; }
    .ba-cover--many .ba-cover__name { font-size: 2.2rem; }
    .ba-cover__quote { font-size: .88rem; }
}

@media (min-width: 560px) {
    body.ba-body {
        background: radial-gradient(70vw 60vh at 50% 0%, color-mix(in srgb, var(--inv-accent) 14%, transparent), transparent 70%), var(--inv-deep);
        background-attachment: fixed;
    }
    body.ba-body::before {
        content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .08; background: var(--inv-accent);
        -webkit-mask: var(--ba-lattice) center / 44px 44px repeat; mask: var(--ba-lattice) center / 44px 44px repeat;
    }
    .ba-main { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
}

/* ---------- 9. motion ---------- */
@keyframes ba-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ba-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ba-pop { 0% { transform: scale(0); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes ba-pearl { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes ba-rise { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ba-settle { from { transform: scale(1.09); } to { transform: scale(1); } }
@keyframes ba-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.ba-pearl { transform-box: fill-box; transform-origin: center; }

/* cover (≤ 2.5 s, once): the arch rises in and its photo settles from a slight zoom (0–1.2 s), the gold line
   draws around it (.3–1.7 s), the pearls appear one after another along the curve (.7–1.7 s), the crown
   star and the corner flourishes follow; the text rises through its inv-enter delays (up to ~2.2 s) */
html.inv-anim .ba-arch--cover { animation: ba-rise 1s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .ba-arch--cover .ba-arch__photo { animation: ba-settle 1.3s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .ba-cover .ba-line { stroke-dasharray: 1; animation: ba-draw 1.4s ease-out .3s both; }
html.inv-anim .ba-cover .ba-corner .ba-line { animation-delay: .5s; }
html.inv-anim .ba-cover .ba-leaf, html.inv-anim .ba-cover .ba-arch__crown, html.inv-anim .ba-cover .ba-arch__bead { animation: ba-fade .6s ease 1.25s both; }
html.inv-anim .ba-cover .ba-pearl { animation: ba-pearl .35s ease-out both; animation-delay: calc(.7s + var(--i, 0) * 34ms); }

/* everywhere else the line art draws itself, and the pearls appear, when its part of the page is revealed */
html.inv-anim [data-reveal] .ba-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.inv-anim [data-reveal].is-revealed .ba-line { animation: ba-draw 1.5s ease-out .2s both; }
html.inv-anim [data-reveal] :is(.ba-leaf, .ba-arch__crown, .ba-arch__bead) { opacity: 0; }
html.inv-anim [data-reveal].is-revealed :is(.ba-leaf, .ba-arch__crown, .ba-arch__bead) { animation: ba-fade .6s ease 1.1s both; }
html.inv-anim [data-reveal] .ba-pearl { opacity: 0; }
html.inv-anim [data-reveal].is-revealed .ba-pearl { animation: ba-pearl .35s ease-out both; animation-delay: calc(.5s + var(--i, 0) * 30ms); }

@supports (animation-timeline: view()) {
    html.inv-anim .ba-rundown__list::before { animation: ba-grow linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; }
}

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