/*
 * Batak Ulos Gorga: Batak Toba adat, light and modern.
 * The three sacred colors black (--inv-ink / --inv-background), red (--inv-primary) and white (--inv-ivory),
 * with a little gold (--inv-accent). Gorga drawings are SVG symbols in sections/_defs; the ulos is a real
 * woven cloth (img/, Cooper Hewitt CC0): hanging under the cover photo, draped across the couple, its fringe
 * at the foot of panels. Sections alternate: dark (.bu-dark), ivory (.bu-light) and red (.bu-red).
 * Fonts: the client's pair (--inv-font-display for names, --inv-font-heading for titles) + Jost.
 * All classes start with "bu-".
 */

:root {
    --inv-primary: #b3121c;
    --inv-accent: #d9a63e;
    --inv-background: #110b0a;
    --inv-text: #f7efe4;
    --inv-surface: #1e1413;
    --inv-ivory: #f7efe2;
    --inv-ink: #130c0b;
    --inv-thread: #f4ece0;
    --inv-label: #e8b64c;
    --inv-radius: 14px;

    --bu-w: 460px;
    --bu-display: var(--inv-font-display, 'Allura'), 'Great Vibes', cursive;
    --bu-head: var(--inv-font-heading, 'Cinzel'), Georgia, serif;
    --bu-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --bu-gold-bg: linear-gradient(120deg, color-mix(in srgb, var(--inv-accent) 62%, #fff) 0%, var(--inv-accent) 32%, color-mix(in srgb, var(--inv-accent) 72%, #3a2200) 58%, color-mix(in srgb, var(--inv-accent) 70%, #fff) 82%, var(--inv-accent) 100%);
    --bu-red-bg: linear-gradient(150deg, color-mix(in srgb, var(--inv-primary) 88%, #fff 12%), var(--inv-primary) 45%, color-mix(in srgb, var(--inv-primary) 70%, #000));
    --bu-deep: color-mix(in srgb, var(--inv-background) 82%, #000);
    --bu-red-deep: color-mix(in srgb, var(--inv-primary) 62%, var(--inv-ink));

    /* context tokens: dark by default, redefined for ivory and red sections */
    --bu-bg: var(--inv-background);
    --bu-fg: var(--inv-text);
    --bu-muted: color-mix(in srgb, var(--inv-text) 82%, transparent);
    --bu-gold: var(--inv-label);
    --bu-line: color-mix(in srgb, var(--inv-accent) 55%, transparent);
    --bu-line-soft: color-mix(in srgb, var(--inv-accent) 24%, transparent);
    --bu-btn-bg: var(--bu-red-bg);
    --bu-btn-fg: #fff;
    --bu-card-bg: color-mix(in srgb, var(--inv-surface) 82%, transparent);
    --bu-field-bg: color-mix(in srgb, var(--inv-background) 70%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--inv-background); scroll-behavior: smooth; }

body.bu-body {
    margin: 0;
    background: var(--inv-background);
    color: var(--inv-text);
    font: 400 1rem/1.7 var(--bu-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }

.bu-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.bu-icon { width: 1.1em; height: 1.1em; flex: none; }
.bu-amp { font: 400 .5em/1 var(--bu-head); color: var(--bu-gold); }

/* ---------- backdrop (wide screens) and the column ---------- */

.bu-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--bu-deep); }
.bu-backdrop::before {
    content: ''; position: absolute; inset: -60px;
    background: var(--bu-photo, none) center / cover no-repeat;
    filter: blur(28px) saturate(.8) brightness(.45);
}
.bu-backdrop::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--inv-primary) 35%, transparent), transparent 70%),
        radial-gradient(ellipse at center, color-mix(in srgb, var(--inv-ink) 45%, transparent) 30%, color-mix(in srgb, var(--inv-ink) 92%, transparent) 100%);
}

.bu-page {
    position: relative; z-index: 1;
    width: min(100%, var(--bu-w)); min-height: 100vh; margin: 0 auto;
    background: var(--inv-background);
    overflow-x: clip;
}
@media (min-width: 520px) {
    .bu-page { box-shadow: 0 0 0 1px var(--bu-line-soft), 0 0 90px rgb(0 0 0 / .6); }
}
@media (max-width: 519px) {
    .bu-backdrop { display: none; }
}

.bu-preview {
    position: fixed; z-index: 60; top: 0; left: 0; right: 0;
    width: min(100%, var(--bu-w)); margin: 0 auto; padding: .35rem .75rem;
    background: var(--bu-gold-bg); color: var(--inv-ink);
    font: 500 .68rem/1.3 var(--bu-sans); text-align: center; letter-spacing: .03em;
}

/* ---------- shared pieces: label, title, gorga band, sprays, ulos fringe ---------- */

.bu-label {
    position: relative; z-index: 2;
    font: 600 .7rem/1.4 var(--bu-sans); letter-spacing: .4em; text-transform: uppercase;
    color: var(--bu-gold);
}
.bu-title { margin-top: .4rem; font: 500 clamp(1.6rem, 7.2vw, 2rem)/1.2 var(--bu-head); letter-spacing: .03em; color: var(--bu-fg); }
.bu-heading { position: relative; z-index: 2; margin-bottom: 2.2rem; }
.bu-heading__curl { display: block; width: 3.6rem; height: 1.35rem; margin: .8rem auto 0; overflow: visible; }
.bu-heading--left { text-align: left; }
.bu-heading--left .bu-heading__curl { margin-left: 0; transform-origin: 0 50%; }

.bu-lead { position: relative; max-width: 24rem; margin: 0 auto 1.6rem; color: var(--bu-muted); font-size: .98rem; }

/* running gorga scrolls between thin gold rules */
.bu-band {
    position: relative; height: 28px;
    border-block: 1px solid color-mix(in srgb, var(--inv-accent) 70%, transparent);
    box-shadow: 0 6px 16px -10px rgb(0 0 0 / .7);
}
.bu-band svg { display: block; width: 100%; height: 100%; }
.bu-section > .bu-band--top { position: absolute; z-index: 2; top: 0; left: 0; right: 0; }
.bu-section:has(> .bu-band--top) { padding-top: 6rem; }

/* gorga tendrils */
.bu-spray { position: absolute; z-index: 1; width: clamp(118px, 33vw, 150px); aspect-ratio: 240 / 140; overflow: visible; pointer-events: none; }
.bu-spray--tl { top: .5rem; left: -1.2rem; }
.bu-spray--tr { top: .5rem; right: -1.2rem; transform: scaleX(-1); }
.bu-section:has(> .bu-spray--tl, > .bu-spray--tr) { padding-top: 6.4rem; }
.bu-spray--bl { bottom: 1rem; left: -1.4rem; transform: scaleY(-1); }
.bu-spray--br { bottom: 1rem; right: -1.4rem; transform: scale(-1, -1); }
.bu-spray--soft { opacity: .3; }
.bu-section .bu-spray { opacity: .3; }
.bu-dark .bu-spray:not(.bu-spray--soft), .bu-red .bu-spray:not(.bu-spray--soft) { opacity: .5; }
.bu-spray use { transform-origin: 30% 90%; transform-box: fill-box; }

/* the ulos fringe (rambu) from the real cloth, falling from the foot of a panel */
.bu-fringe {
    display: block; height: 2.7rem;
    background: var(--bu-ulos-fringe) 0 0 / 100% 100% no-repeat;
    filter: drop-shadow(0 6px 6px rgb(0 0 0 / .3));
}

/* ---------- buttons (shared components) ---------- */

.inv-button {
    gap: .55rem; padding: .85rem 1.5rem; border-radius: 999px;
    background: var(--bu-btn-bg); color: var(--bu-btn-fg);
    font: 600 .74rem/1.2 var(--bu-sans); letter-spacing: .18em; text-transform: uppercase;
    box-shadow: 0 12px 24px -12px rgb(0 0 0 / .6), inset 0 0 0 1px rgb(255 255 255 / .22);
}
.inv-button--outline {
    background: transparent; color: var(--bu-gold);
    box-shadow: inset 0 0 0 1px var(--bu-line);
}
.inv-button--outline:hover { background: color-mix(in srgb, var(--inv-accent) 12%, transparent); }
.inv-button .bu-icon { width: 1.15rem; height: 1.15rem; }

.bu-pill {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: .8rem; padding: .45rem .95rem;
    border-radius: 999px; color: var(--bu-gold); text-decoration: none;
    box-shadow: inset 0 0 0 1px var(--bu-line);
    font: 500 .78rem/1 var(--bu-sans); letter-spacing: .03em;
    transition: background .25s ease;
}
.bu-pill:hover { background: color-mix(in srgb, var(--inv-accent) 12%, transparent); }

/* ---------- the Rumah Bolon (cover; the closing uses the roof only) ---------- */

.bu-house { position: relative; width: var(--bu-house-w, 300px); margin: 0 auto; }
.bu-house__roof {
    position: relative; z-index: 2; display: block; width: 100%; aspect-ratio: 400 / 190; overflow: visible;
    filter: drop-shadow(0 12px 14px rgb(0 0 0 / .5));
}
/* the walls lean outward: the photo is wider at the top */
.bu-house__wall {
    position: relative; z-index: 1;
    width: 65%; margin: calc(var(--bu-house-w, 300px) * -.05) auto 0;
    padding: 2px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 80%, #fff), color-mix(in srgb, var(--inv-accent) 60%, #000));
    clip-path: polygon(0 0, 100% 0, 91% 100%, 9% 100%);
    filter: drop-shadow(0 20px 30px rgb(0 0 0 / .55));
}
.bu-house__photo {
    position: relative; display: grid; place-items: center;
    aspect-ratio: 1 / 1.1;
    background: var(--bu-photo, none) center 30% / cover no-repeat, var(--bu-red-bg);
    clip-path: polygon(0 0, 100% 0, 91% 100%, 9% 100%);
}
.bu-house__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgb(0 0 0 / .28), transparent 22%, transparent 70%, rgb(0 0 0 / .35));
}
.bu-house__photo--plain::before {
    content: ''; position: absolute; inset: 0; opacity: .25;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0 10C4 10 5 1 13 1a4.5 4.5 0 0 1 0 9a3.5 3.5 0 0 1 0-7a2.5 2.5 0 0 1 0 5M13 10h7c4 0 5 9 13 9a4.5 4.5 0 0 0 0-9a3.5 3.5 0 0 0 0 7a2.5 2.5 0 0 0 0-5M33 10h7' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 40px 20px;
}
.bu-house__mono { position: relative; z-index: 1; display: flex; gap: .4rem; font: 400 4.4rem/1 var(--bu-display); color: var(--inv-ivory); text-shadow: 0 4px 18px rgb(0 0 0 / .4); }
/* the real ulos hanging over the foot of the wall */
.bu-house__ulos {
    position: relative; z-index: 3; display: block;
    width: 40%; height: auto; margin: calc(var(--bu-house-w, 300px) * -.075) auto 0;
    filter: drop-shadow(0 10px 12px rgb(0 0 0 / .55));
}

/* ---------- cover ---------- */

.bu-cover {
    position: fixed; inset: 0; z-index: 30;
    width: min(100%, var(--bu-w)); margin: 0 auto;
    display: flex; overflow-x: hidden; overflow-y: auto;
    background:
        radial-gradient(90% 45% at 50% 18%, color-mix(in srgb, var(--inv-primary) 42%, transparent), transparent 72%),
        linear-gradient(180deg, var(--inv-background), var(--bu-deep));
    color: var(--inv-text);
}
.bu-cover__bg { position: absolute; inset: 0; overflow: hidden; }
.bu-cover__bg::before {
    content: ''; position: absolute; inset: -40px;
    background: var(--bu-photo, none) center 30% / cover no-repeat;
    filter: blur(16px) saturate(1.1) brightness(.5);
    opacity: .75;
}
.bu-cover__bg::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(80% 40% at 50% 24%, color-mix(in srgb, var(--inv-primary) 45%, transparent), transparent 75%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-background) 55%, transparent) 0%, color-mix(in srgb, var(--inv-background) 35%, transparent) 40%, color-mix(in srgb, var(--inv-background) 90%, transparent) 64%, color-mix(in srgb, var(--bu-red-deep) 92%, transparent) 100%);
}
.bu-cover > .bu-spray { width: clamp(96px, 27vw, 120px); top: auto; opacity: .45; }
.bu-spray--cover-l { left: -1.6rem; bottom: .6rem; transform: scaleY(-1) rotate(-6deg); }
.bu-spray--cover-r { right: -1.6rem; bottom: .6rem; transform: scale(-1, -1) rotate(-6deg); }

.bu-cover__inner {
    position: relative; z-index: 2;
    width: 100%; min-height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: .55rem;
    padding: clamp(.9rem, 3svh, 1.6rem) 1.4rem clamp(1.6rem, 5svh, 2.6rem);
    text-align: center;
    --bu-house-w: min(96vw, 410px, calc((100svh - 20rem) / 1.36));
}
.bu-house--cover { margin-bottom: .5rem; }

.bu-cover__title {
    font: 600 .7rem/1.4 var(--bu-sans); letter-spacing: .42em; text-transform: uppercase; color: var(--bu-gold);
}
.bu-cover__names {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .45rem;
    font: 400 clamp(2.6rem, 12.5vw, 3.4rem)/1.1 var(--bu-display); color: var(--inv-text);
    text-shadow: 0 2px 18px color-mix(in srgb, var(--inv-background) 80%, transparent);
}
.bu-cover__names .bu-amp { font-size: .45em; }
.bu-cover__date {
    display: flex; align-items: center; gap: .7rem;
    font: 500 .74rem/1.4 var(--bu-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--bu-muted);
}
.bu-cover__date::before, .bu-cover__date::after {
    content: ''; width: 1.4rem; height: 1px; background: linear-gradient(90deg, transparent, var(--inv-accent));
}
.bu-cover__date::after { transform: scaleX(-1); }

.bu-guest {
    width: min(100%, 19rem); margin-top: .2rem; padding: .6rem 1rem .65rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--inv-background) 52%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 28%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.bu-guest__label { font: 500 .62rem/1.4 var(--bu-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--bu-gold); }
.bu-guest__name { margin-top: .2rem; font: 500 1.08rem/1.3 var(--bu-head); overflow-wrap: anywhere; }
.bu-open { margin-top: .35rem; }

.bu-cover--leave { transition: transform 1.1s cubic-bezier(.7, 0, .3, 1), opacity 1.1s ease; }
.bu-cover--gone { transform: translateY(-100%); opacity: 0; }

/* opening moment: the photo fades in while drawing closer, the roof settles, the ulos unrolls */
@media (prefers-reduced-motion: no-preference) {
    .bu-house--cover .bu-house__photo { animation: bu-photo-in 1.6s cubic-bezier(.2, .7, .2, 1) both; }
    .bu-house--cover .bu-house__roof { animation: bu-roof-in 1.2s cubic-bezier(.2, .7, .2, 1) .15s both; }
    .bu-house--cover .bu-house__ulos { animation: bu-unroll 1s cubic-bezier(.2, .7, .2, 1) .7s both; }
}
@keyframes bu-photo-in { from { opacity: 0; transform: scale(1.1); } }
@keyframes bu-roof-in { from { opacity: 0; transform: translateY(-14px); } }
@keyframes bu-unroll { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 -20% 0); } }

/* ---------- hero (first screen after opening) ---------- */

.bu-hero {
    position: relative; overflow: hidden; isolation: isolate;
    min-height: min(100vh, 860px); min-height: min(100svh, 860px);
    padding: 5rem 1.5rem 3.5rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
    text-align: center;
    --bu-veil: linear-gradient(180deg, color-mix(in srgb, var(--inv-background) 88%, transparent), color-mix(in srgb, var(--inv-background) 70%, transparent) 40%, color-mix(in srgb, var(--bu-red-deep) 90%, transparent) 100%);
}
.bu-hero > .bu-spray { top: .8rem; width: clamp(130px, 38vw, 170px); opacity: .8; }
.bu-medal {
    position: relative; z-index: 2; display: grid; place-items: center;
    width: 6.2rem; aspect-ratio: 1; margin: 1.2rem 0 .8rem;
}
.bu-medal::before {
    content: ''; position: absolute; inset: 14%; transform: rotate(45deg);
    background: var(--bu-red-bg);
    box-shadow: 0 0 0 1.5px var(--inv-ivory), 0 0 0 5px var(--inv-ink), 0 0 0 6px color-mix(in srgb, var(--inv-accent) 70%, transparent), 0 18px 30px -12px rgb(0 0 0 / .6);
}
.bu-medal__letters { position: relative; display: flex; align-items: center; gap: .35rem; font: 500 1.35rem/1 var(--bu-head); color: var(--inv-ivory); }
.bu-medal__dot { width: 5px; height: 5px; background: var(--inv-accent); transform: rotate(45deg); }
.bu-hero__names {
    position: relative; z-index: 2;
    font: 400 clamp(2.8rem, 13vw, 3.6rem)/1.15 var(--bu-display); color: var(--bu-fg);
}
.bu-hero__date { position: relative; z-index: 2; font: 500 .76rem/1.4 var(--bu-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--bu-gold); }
.bu-hero__quote { position: relative; z-index: 2; width: min(100%, 22rem); margin: 2rem auto 0; }
.bu-hero__quote blockquote {
    margin: 0; padding: 1.3rem 1.4rem 1.2rem;
    border-radius: 14px 14px 0 0;
    background: var(--bu-red-bg); color: #fff;
    font: italic 400 .98rem/1.6 var(--bu-sans);
    box-shadow: 0 22px 40px -24px rgb(0 0 0 / .8);
}
.bu-hero__quote .bu-fringe { margin: 0 .2rem; }

/* ---------- sections ---------- */

.bu-main { position: relative; background: var(--inv-background); }

.bu-section {
    position: relative; overflow: hidden; isolation: isolate;
    padding: 4.5rem 1.5rem;
    text-align: center; color: var(--bu-fg);
    background:
        radial-gradient(110% 50% at 50% 0%, color-mix(in srgb, var(--inv-primary) 18%, transparent), transparent 72%),
        linear-gradient(180deg, var(--inv-background), var(--bu-deep));
    --bu-veil: linear-gradient(180deg, color-mix(in srgb, var(--inv-background) 86%, transparent), color-mix(in srgb, var(--inv-background) 78%, transparent) 50%, color-mix(in srgb, var(--inv-background) 94%, transparent));
}
/* ivory: the sacred white, warm cloth */
.bu-light {
    --bu-bg: var(--inv-ivory);
    --bu-fg: var(--inv-ink);
    --bu-muted: color-mix(in srgb, var(--inv-ink) 82%, transparent);
    --bu-gold: color-mix(in srgb, var(--inv-primary) 82%, var(--inv-ink));
    --bu-line: color-mix(in srgb, color-mix(in srgb, var(--inv-accent) 60%, var(--inv-ink)) 50%, transparent);
    --bu-line-soft: color-mix(in srgb, color-mix(in srgb, var(--inv-accent) 60%, var(--inv-ink)) 22%, transparent);
    --bu-card-bg: #fff;
    --bu-field-bg: #fff;
    --bu-veil: linear-gradient(180deg, color-mix(in srgb, var(--inv-ivory) 90%, transparent), color-mix(in srgb, var(--inv-ivory) 80%, transparent) 45%, color-mix(in srgb, var(--inv-ivory) 94%, transparent));
    background:
        radial-gradient(90% 40% at 100% 100%, color-mix(in srgb, var(--inv-primary) 9%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-ivory), color-mix(in srgb, var(--inv-ivory) 92%, var(--inv-accent)));
}
/* red: deep sacred red */
.bu-red {
    --bu-bg: var(--inv-primary);
    --bu-fg: #fff;
    --bu-muted: color-mix(in srgb, #fff 88%, transparent);
    --bu-gold: color-mix(in srgb, var(--inv-accent) 45%, #fff);
    --bu-line: color-mix(in srgb, #fff 45%, transparent);
    --bu-line-soft: color-mix(in srgb, #fff 20%, transparent);
    --bu-btn-bg: linear-gradient(135deg, color-mix(in srgb, var(--inv-ink) 90%, #fff 6%), var(--inv-ink));
    --bu-btn-fg: #fff;
    --bu-card-bg: color-mix(in srgb, var(--inv-ink) 55%, transparent);
    --bu-field-bg: color-mix(in srgb, var(--inv-ink) 45%, transparent);
    --bu-veil: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 90%, transparent), color-mix(in srgb, var(--inv-primary) 74%, transparent) 50%, color-mix(in srgb, var(--bu-red-deep) 94%, transparent));
    background: linear-gradient(180deg, var(--inv-primary), var(--bu-red-deep));
}

.bu-section > * { position: relative; z-index: 1; }
.bu-section > .bu-spray { position: absolute; z-index: 0; }

/* photo-gradient backgrounds */
.bu-section > .bu-photobg, .bu-hero > .bu-photobg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.bu-photobg__img { position: absolute; inset: -48px 0; background: var(--bu-photo) center / cover no-repeat; filter: saturate(.95); --inv-parallax: 36px; }
.bu-photobg::after { content: ''; position: absolute; inset: 0; background: var(--bu-veil); }
.bu-light .bu-photobg__img { filter: saturate(.8) contrast(.9); }
.bu-photobg--plain::after {
    background:
        radial-gradient(70% 40% at 20% 10%, color-mix(in srgb, var(--inv-primary) 26%, transparent), transparent 70%),
        radial-gradient(70% 40% at 90% 100%, color-mix(in srgb, var(--inv-accent) 16%, transparent), transparent 70%),
        var(--bu-veil);
}

.bu-card {
    position: relative; overflow: hidden;
    background: var(--bu-card-bg);
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px var(--bu-line-soft), 0 24px 44px -30px rgb(0 0 0 / .65);
}
.bu-dark .bu-card { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* opening */
.bu-opening { padding-top: 4rem; }
.bu-opening .bu-label { margin-bottom: 1rem; }
.bu-arabic { font: 400 1.75rem/1.8 'Amiri', serif; color: var(--inv-primary); margin-bottom: .5rem; }
.bu-opening__greeting { margin-bottom: 1rem; font: 500 1.15rem/1.45 var(--bu-head); color: var(--bu-fg); }
.bu-verse {
    position: relative; max-width: 22.5rem; margin: 2.4rem auto 0; padding: 0;
    text-align: left;
}
.bu-verse__strip {
    position: absolute; z-index: 1; left: 0; top: 0; bottom: 2.7rem; width: 20px;
    border-radius: 14px 0 0 0; overflow: hidden;
    box-shadow: 1px 0 0 color-mix(in srgb, var(--inv-accent) 70%, transparent);
}
.bu-verse__strip svg { display: block; width: 100%; height: 100%; }
.bu-verse__body {
    padding: 1.5rem 1.4rem 1.3rem 2.6rem;
    border-radius: 14px 14px 0 0;
    background:
        radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--inv-primary) 40%, transparent), transparent 70%),
        var(--inv-ink);
    color: var(--inv-ivory);
    box-shadow: 0 24px 40px -26px rgb(0 0 0 / .7);
}
.bu-verse blockquote { margin: 0; font: italic 400 .98rem/1.7 var(--bu-sans); }
.bu-verse figcaption { margin-top: .8rem; font: 600 .66rem/1.4 var(--bu-sans); letter-spacing: .28em; text-transform: uppercase; color: var(--inv-label); }
.bu-verse .bu-fringe { margin: 0 .3rem; }

/* couple */
.bu-couple { padding-bottom: 4rem; }
.bu-person {
    display: grid; grid-template-columns: 44% minmax(0, 1fr); column-gap: 1.1rem; align-items: center;
    text-align: left;
}
.bu-person--flip { grid-template-columns: minmax(0, 1fr) 44%; text-align: right; }
.bu-person--flip .bu-person__frame { order: 2; }
.bu-person__frame { position: relative; aspect-ratio: 3 / 4.1; }
/* a red block offset behind, then the photo in a slim gold gable rim */
.bu-person__frame::before {
    content: ''; position: absolute; inset: 0; transform: translate(9px, 9px);
    background: var(--bu-red-bg); opacity: .9;
    clip-path: polygon(50% 0, 100% 15%, 100% 100%, 0 100%, 0 15%);
}
.bu-person--flip .bu-person__frame::before { transform: translate(-9px, 9px); }
.bu-person__frame::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(170deg, color-mix(in srgb, var(--inv-accent) 70%, #fff), color-mix(in srgb, var(--inv-accent) 70%, #000));
    clip-path: polygon(evenodd, 50% 0, 100% 15%, 100% 100%, 0 100%, 0 15%, 50% 0, 50% 3px, 3px calc(15% + 1.5px), 3px calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) calc(15% + 1.5px), 50% 3px);
}
.bu-person__photo {
    position: relative; display: block; width: 100%; height: 100%; object-fit: cover;
    clip-path: polygon(50% 0, 100% 15%, 100% 100%, 0 100%, 0 15%);
}
.bu-person__photo--empty {
    display: grid; place-items: center;
    background: linear-gradient(160deg, var(--inv-primary), var(--inv-ink));
    font: 400 4.5rem/1 var(--bu-display); color: var(--inv-ivory);
}
.bu-person__text { min-width: 0; }
.bu-person__role { font: 600 .62rem/1.4 var(--bu-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--bu-gold); }
.bu-person__nick { margin-top: .1rem; font: 400 2.6rem/1.15 var(--bu-display); color: var(--bu-fg); overflow-wrap: anywhere; }
.bu-person__name { margin-top: .3rem; font: 500 1rem/1.35 var(--bu-head); letter-spacing: .02em; overflow-wrap: anywhere; }
.bu-person__parents { margin-top: .55rem; font-size: .86rem; line-height: 1.5; color: var(--bu-muted); overflow-wrap: anywhere; }
.bu-person__parents strong { color: var(--bu-fg); font-weight: 500; }

/* "mangulosi": the real ulos draped across the section between the two of them */
.bu-mangulosi { position: relative; margin: 2.6rem -1.5rem 2.8rem; height: 7.5rem; }
.bu-drape {
    position: absolute; left: 1rem; right: 1rem; top: calc(50% - 2.3rem); height: 3.6rem;
    display: flex; transform: rotate(-3deg);
    filter: drop-shadow(0 14px 12px rgb(0 0 0 / .5));
}
.bu-drape__cloth { position: relative; flex: 1; container-type: inline-size; }
/* each slice shows its own piece of the stripes, shifted down and tilted along the sag */
.bu-drape__cloth span {
    position: absolute; top: 0; bottom: 0;
    left: calc(var(--i) * 100% / var(--n)); width: calc(100% / var(--n) + 1px);
    background:
        linear-gradient(180deg, rgb(0 0 0 / .3) 0%, transparent 16%, rgb(255 255 255 / .14) 32%, transparent 46%, rgb(0 0 0 / .14) 64%, rgb(255 255 255 / .07) 80%, rgb(0 0 0 / .32) 100%),
        var(--bu-ulos-band) calc(var(--i) * -100cqw / var(--n)) 0 / auto 100% repeat-x;
    transform: translateY(var(--y)) rotate(var(--a));
}
.bu-drape__end { position: relative; z-index: 1; display: block; height: 100%; width: auto; flex: none; }
.bu-drape__end--l { transform: rotate(var(--a)) scaleX(-1); transform-origin: 100% 50%; translate: 0 0; margin-right: -2px; }
.bu-drape__end--r { transform: rotate(var(--a)); transform-origin: 0 50%; margin-left: -2px; }
.bu-mangulosi__amp {
    position: absolute; z-index: 2; left: 50%; top: calc(50% - .5rem + var(--bu-sag, 20px)); translate: -50% -50%;
    display: grid; place-items: center; width: 3.6rem; aspect-ratio: 1; border-radius: 50%;
    background: var(--inv-ink); color: var(--inv-label);
    box-shadow: 0 0 0 1.5px var(--inv-ivory), 0 0 0 4px var(--inv-primary), 0 10px 20px -6px rgb(0 0 0 / .7);
    font: 400 2.3rem/1 var(--bu-display);
}
.bu-mangulosi__label {
    position: absolute; left: 0; right: 0; bottom: -.4rem;
    font: 600 .62rem/1.4 var(--bu-sans); letter-spacing: .4em; text-transform: uppercase; color: var(--bu-gold);
}

/* countdown */
.bu-countdown__date { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; font: 600 .78rem/1.4 var(--bu-sans); letter-spacing: .12em; text-transform: uppercase; }
.bu-countdown__date .bu-icon { width: 1.2rem; height: 1.2rem; color: var(--bu-gold); }
.inv-countdown { gap: .55rem; }
.inv-countdown__item {
    position: relative; overflow: hidden;
    flex: 1; max-width: 5rem; min-width: 0; padding: 1rem .25rem 1.1rem;
    border-radius: 12px 12px 4px 4px; color: #fff;
    background: color-mix(in srgb, var(--inv-ink) 62%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), 0 14px 24px -14px rgb(0 0 0 / .65);
}
.inv-countdown__item::before {
    content: ''; position: absolute; left: 20%; right: 20%; top: 0; height: 2px; border-radius: 2px;
    background: var(--bu-gold-bg);
}
.inv-countdown__value { font: 500 1.8rem/1.1 var(--bu-head); }
.inv-countdown__label { margin-top: .25rem; font: 500 .58rem/1.2 var(--bu-sans); letter-spacing: .16em; text-transform: uppercase; opacity: .9; }
.inv-countdown__done { font-style: italic; color: var(--bu-muted); }
.inv-countdown__actions { margin-top: 1.5rem; }
.inv-countdown__actions .inv-button { padding: .7rem 1rem; font-size: .62rem; letter-spacing: .1em; }

/* events: a red block behind the first card */
.bu-events::before {
    content: ''; position: absolute; z-index: 0; left: 0; right: 0; top: 12.8rem; height: 15rem;
    background:
        radial-gradient(80% 90% at 10% 0%, color-mix(in srgb, var(--inv-primary) 82%, #fff 10%), transparent 70%),
        linear-gradient(170deg, var(--inv-primary), var(--bu-red-deep));
    clip-path: polygon(0 12%, 50% 0, 100% 12%, 100% 100%, 0 100%);
}
.bu-events__list { display: grid; gap: 1.6rem; max-width: 24rem; margin: 0 auto; }
.bu-event {
    position: relative; overflow: hidden;
    padding: .7rem .7rem 1.4rem;
    background: #fff; border-radius: 20px;
    box-shadow: 0 24px 44px -28px rgb(0 0 0 / .55), inset 0 0 0 1px var(--bu-line-soft);
}
.bu-event__photo {
    aspect-ratio: 16 / 10.5; border-radius: 0 0 12px 12px;
    background: var(--bu-photo) center 35% / cover no-repeat;
    clip-path: polygon(0 16%, 50% 0, 100% 16%, 100% 100%, 0 100%);
}
.bu-event__name { margin: 1rem .5rem 0; font: 500 1.35rem/1.25 var(--bu-head); color: var(--inv-primary); overflow-wrap: anywhere; }
.bu-event--plain .bu-event__name { margin-top: .8rem; }
.bu-event__body {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start;
    margin: 1rem .5rem 1.2rem; padding-top: 1rem; text-align: left;
    border-top: 1px solid var(--bu-line-soft);
}
.bu-event__body:not(:has(.bu-event__day)) { grid-template-columns: minmax(0, 1fr); }
.bu-event__day {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 5.2rem; padding: .7rem .3rem .75rem; border-radius: 12px 12px 4px 4px;
    background: var(--bu-red-bg); color: #fff; text-align: center;
    box-shadow: 0 12px 22px -14px color-mix(in srgb, var(--inv-primary) 80%, #000);
}
.bu-event__day span { font: 500 .62rem/1.3 var(--bu-sans); letter-spacing: .1em; text-transform: uppercase; }
.bu-event__day strong { font: 500 2.2rem/1.05 var(--bu-head); }
.bu-event__rows { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.bu-event__rows li { display: flex; gap: .55rem; align-items: flex-start; font-size: .9rem; line-height: 1.45; color: var(--inv-ink); }
.bu-event__rows .bu-icon { width: 1.1rem; height: 1.1rem; margin-top: .12rem; color: var(--inv-primary); }
.bu-event__rows li > span { min-width: 0; overflow-wrap: anywhere; }
.bu-event__time { font-weight: 600; }
.bu-event__venue { display: block; font-weight: 600; }
.bu-event__address { display: block; font-size: .84rem; color: color-mix(in srgb, var(--inv-ink) 80%, transparent); }
.bu-event .inv-maps .inv-button { padding: .7rem 1.3rem; font-size: .66rem; }

/* ---------- love story: zig-zag ---------- */
.bu-story { padding-left: 1rem; padding-right: 1rem; }
.bu-zig { position: relative; margin: 0; padding: 0; list-style: none; }
.bu-zig::before {
    content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, var(--bu-line) 6%, var(--bu-line) 94%, transparent);
}
.bu-zig__item {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1fr) 1.7rem minmax(0, 1fr); column-gap: .6rem; align-items: start;
    grid-template-areas: "text dot meta";
}
.bu-zig__item + .bu-zig__item { margin-top: 2.4rem; }
.bu-zig__item.is-flip { grid-template-areas: "meta dot text"; }
.bu-zig__dot { grid-area: dot; justify-self: center; width: 1.7rem; height: 1.7rem; overflow: visible; }
.bu-zig__dot circle { fill: var(--inv-primary); stroke: var(--inv-ivory); stroke-width: 1.4; }
.bu-zig__dot path { fill: none; stroke: var(--inv-ivory); stroke-width: 1.5; stroke-linecap: round; }
.bu-zig__text { grid-area: text; min-width: 0; text-align: right; }
.is-flip .bu-zig__text { text-align: left; }
.bu-zig__title { font: 500 1.02rem/1.3 var(--bu-head); color: var(--bu-fg); overflow-wrap: anywhere; }
.bu-zig__story { margin-top: .45rem; font-size: .86rem; line-height: 1.55; color: var(--bu-muted); overflow-wrap: anywhere; }
.bu-zig__meta { grid-area: meta; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; text-align: left; }
.is-flip .bu-zig__meta { align-items: flex-end; text-align: right; }
.bu-zig__date { font: 500 1.2rem/1.2 var(--bu-head); color: var(--bu-gold); overflow-wrap: anywhere; }
.bu-zig__photo {
    display: block; width: min(6.4rem, 100%); aspect-ratio: 1; object-fit: cover;
    border-radius: 50% 50% 8px 8px;
    box-shadow: 0 0 0 1.5px var(--inv-ivory), 0 0 0 4px var(--inv-primary), 0 14px 24px -14px rgb(0 0 0 / .6);
}
.bu-zig__item--bare .bu-zig__meta::before {
    content: ''; width: 2.6rem; height: 1rem; opacity: .7;
    background: radial-gradient(circle, var(--bu-gold) 0 1.5px, transparent 2px) 0 50% / .65rem 1rem repeat-x;
}

/* gallery */
.bu-gallery .bu-heading { padding-right: 40%; }
.bu-spray--gallery { top: 2.2rem; right: -1.2rem; transform: scaleX(-1); width: clamp(140px, 42vw, 190px); }
.inv-gallery { gap: .5rem; }
.inv-gallery__item {
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgb(255 255 255 / .35), 0 16px 26px -18px rgb(0 0 0 / .8);
}
.inv-gallery__item:first-child,
.inv-gallery__item:first-child ~ .inv-gallery__item:last-child:nth-child(even) { grid-column: 1 / -1; aspect-ratio: 16 / 10; border-radius: 60px 60px 6px 6px; }
.inv-gallery__play { background: color-mix(in srgb, var(--inv-ink) 70%, transparent); color: var(--inv-ivory); }

/* live streaming */
.bu-live__card { max-width: 24rem; margin: 0 auto; padding: 1.7rem 1.4rem; }
.bu-live__badge {
    display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem;
    border-radius: 999px; background: var(--inv-primary); color: #fff;
    font: 600 .66rem/1 var(--bu-sans); letter-spacing: .2em;
}
.bu-live__badge span { width: .45rem; height: .45rem; border-radius: 50%; background: #ff8a80; animation: bu-blink 1.4s ease-in-out infinite; }
@keyframes bu-blink { 50% { opacity: .25; } }
.bu-live__text { margin: 1rem 0 .5rem; }
.bu-live__note { margin-bottom: 1.2rem; font: 500 .98rem/1.5 var(--bu-sans); color: var(--bu-gold); }
.bu-live__card .inv-button { margin-top: .6rem; }

/* gift: red-black cards with a real ulos stripe at the foot, two per row (a lonely last card spans both) */
.inv-gift { display: grid; gap: .9rem; max-width: 22rem; margin: 0 auto; }
.inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.inv-gift__account {
    position: relative; overflow: hidden; isolation: isolate; min-width: 0;
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .45rem;
    grid-template-areas: "chip bank" "number number" "holder holder" "button button";
    margin: 0; padding: .85rem .85rem 1.7rem;
    border-radius: 16px; text-align: left; color: var(--inv-ivory);
    background:
        linear-gradient(118deg, transparent 22%, rgb(255 255 255 / .09) 36%, transparent 50%),
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--inv-primary) 85%, transparent), transparent 70%),
        linear-gradient(150deg, var(--bu-red-deep), var(--inv-ink) 75%);
    box-shadow: 0 18px 30px -18px rgb(0 0 0 / .8);
}
.inv-gift__account + .inv-gift__account { margin-top: 0; }
.inv-gift__account::before {
    content: ''; grid-area: chip; width: 1.7rem; height: 1.3rem; border-radius: .3rem;
    background:
        linear-gradient(90deg, transparent 31%, rgb(0 0 0 / .25) 31% 33%, transparent 33% 67%, rgb(0 0 0 / .25) 67% 69%, transparent 69%),
        linear-gradient(0deg, transparent 47%, rgb(0 0 0 / .25) 47% 53%, transparent 53%),
        linear-gradient(135deg, #f6e6c4, #c9a160 55%, #ead3a2);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2);
}
.inv-gift__account::after {
    content: ''; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: .85rem;
    background: var(--bu-ulos-band) 0 50% / auto 100% repeat-x;
    box-shadow: 0 -1px 0 color-mix(in srgb, var(--inv-accent) 60%, transparent);
}
.inv-gift__bank {
    grid-area: bank; justify-self: end; min-width: 0; max-width: 100%; margin: 0;
    font: 600 .66rem/1.2 var(--bu-sans); letter-spacing: .06em; text-transform: uppercase; text-align: right; overflow-wrap: anywhere;
}
.inv-gift__logo { height: 1.5rem; max-width: 100%; padding: .2rem .45rem; border-radius: .35rem; }
.inv-gift__logo img { max-width: 4.6rem; }
.inv-gift__number {
    grid-area: number; margin: .75rem 0 .15rem;
    font: 500 .98rem/1.25 var(--bu-sans); letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--inv-ivory);
    overflow-wrap: anywhere;
}
.inv-gift__holder { grid-area: holder; margin: 0; font: 600 .58rem/1.35 var(--bu-sans); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-ivory) 85%, transparent); overflow-wrap: anywhere; }
.inv-gift__account .inv-button {
    grid-area: button; justify-self: start; margin-top: .6rem; padding: .35rem .7rem;
    font-size: .6rem; letter-spacing: .06em; color: #fff; background: rgb(255 255 255 / .08);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35);
}
.inv-gift__account.inv-gift__address {
    display: block; min-height: 0; padding: 1.5rem 1.3rem; text-align: center; color: var(--bu-fg);
    background: var(--bu-card-bg);
    box-shadow: inset 0 0 0 1px var(--bu-line-soft), 0 20px 40px -28px rgb(0 0 0 / .6);
}
.inv-gift__address::before, .inv-gift__address::after { content: none; }
.inv-gift__address .inv-gift__bank { justify-self: auto; text-align: center; font: 600 .66rem/1.4 var(--bu-sans); letter-spacing: .3em; color: var(--bu-gold); }
.inv-gift__address .inv-gift__holder { margin: .6rem 0 .2rem; font: 500 1.05rem/1.3 var(--bu-head); letter-spacing: .02em; text-transform: none; color: var(--bu-fg); }
.inv-gift__address p:not([class]) { color: var(--bu-muted); }
.inv-gift__address .inv-button { margin-top: 1rem; color: #fff; background: var(--bu-red-bg); box-shadow: none; }

/* rsvp & wishes forms */
.bu-form { max-width: 24rem; margin: 0 auto; padding: 1.4rem 1.25rem 1.5rem; text-align: left; }
.bu-form::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: linear-gradient(90deg, var(--inv-ink) 0 20%, var(--inv-primary) 20% 80%, var(--inv-ink) 80%);
    box-shadow: 0 1px 0 var(--inv-ivory);
}
.inv-form { gap: .9rem; }
.inv-form label, .inv-form__choices legend { font: 500 .78rem/1.4 var(--bu-sans); letter-spacing: .04em; color: var(--bu-muted); }
.inv-form input:not([type=radio]):not([type=checkbox]), .inv-form select, .inv-form textarea {
    padding: .7rem .85rem; border-radius: 10px;
    border: 1px solid var(--bu-line);
    background: var(--bu-field-bg); color: var(--bu-fg);
    font: 400 1rem/1.4 var(--bu-sans);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.inv-form input::placeholder, .inv-form textarea::placeholder { color: color-mix(in srgb, var(--bu-fg) 45%, transparent); }
.inv-form input:focus, .inv-form select:focus, .inv-form textarea:focus {
    outline: none; border-color: var(--inv-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-primary) 25%, transparent);
}
.inv-form option { background: #fff; color: var(--inv-ink); }
.inv-form input[type=radio], .inv-form input[type=checkbox] { accent-color: var(--inv-primary); }
.inv-form__choices label { color: var(--bu-fg); font-size: .92rem; }
.inv-form__notice { color: var(--bu-fg); background: color-mix(in srgb, var(--inv-accent) 16%, transparent); border: 1px solid var(--bu-line-soft); }
.inv-form .inv-button { justify-self: stretch; margin-top: .3rem; }
.inv-rsvp__deadline { font-style: italic; color: var(--bu-gold); }

.inv-wishes { --inv-wishes-height: 20rem; }
.inv-wishes__list { gap: .6rem; margin-top: 1.4rem; }
.inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .5rem .45rem .5rem .5rem; border-radius: 12px;
    background: color-mix(in srgb, var(--inv-ivory) 60%, transparent);
    box-shadow: inset 0 0 0 1px var(--bu-line-soft), inset 0 -14px 16px -14px rgb(0 0 0 / .2);
    scrollbar-color: color-mix(in srgb, var(--inv-primary) 50%, transparent) transparent;
}
.inv-wishes__empty { text-align: center; font-style: italic; }
.inv-wish {
    padding: .65rem .8rem; border-radius: 10px;
    background: #fff;
    border: 1px solid var(--bu-line-soft); border-left: 3px solid var(--inv-primary);
}
.inv-wish__name { font: 500 .9rem/1.3 var(--bu-head); color: var(--inv-primary); }
.inv-wish__message { font-size: .88rem; line-height: 1.5; color: var(--inv-ink); }
.inv-wish__time { margin-top: .25rem; font: 400 .68rem/1.3 var(--bu-sans); letter-spacing: .04em; color: color-mix(in srgb, var(--inv-ink) 70%, transparent); }
.inv-wish__reply { margin-top: .5rem; padding: .45rem .65rem; background: color-mix(in srgb, var(--inv-primary) 8%, transparent); }
.inv-wish__reply-text { font-size: .85rem; }
.inv-wishes__page-button { color: var(--inv-primary); }

/* ---------- closing: the photo fades into red, then black ---------- */
.bu-closing {
    position: relative; overflow: hidden; isolation: isolate;
    text-align: center; color: #fff;
    background: linear-gradient(180deg, var(--inv-primary) 0%, var(--bu-red-deep) 55%, color-mix(in srgb, var(--inv-ink) 92%, var(--inv-primary)) 100%);
    --bu-gold: color-mix(in srgb, var(--inv-accent) 45%, #fff);
    --bu-muted: color-mix(in srgb, #fff 88%, transparent);
}
.bu-closing__photo {
    position: absolute; left: 0; right: 0; top: 0; height: 66%; z-index: -2;
    background: var(--bu-photo) center 30% / cover no-repeat;
    filter: saturate(1.15) contrast(1.04);
    -webkit-mask: linear-gradient(180deg, #000 0%, #000 48%, transparent 100%); mask: linear-gradient(180deg, #000 0%, #000 48%, transparent 100%);
}
/* warm the photo (no grey black-and-white) and deepen it toward the red */
.bu-closing__photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(190deg, #f2c27a, var(--inv-primary) 80%); mix-blend-mode: color; opacity: .38; }
.bu-closing__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .1) 0%, transparent 25%, color-mix(in srgb, var(--inv-primary) 60%, transparent) 75%, var(--inv-primary)); }
.bu-closing__inner { position: relative; padding: 15rem 1.5rem 1.9rem; }
.bu-closing--plain .bu-closing__inner { padding-top: 4.4rem; }
.bu-closing--plain { background: radial-gradient(80% 40% at 50% 0%, color-mix(in srgb, var(--inv-primary) 80%, #fff 14%), transparent 70%), linear-gradient(180deg, var(--inv-primary) 0%, var(--bu-red-deep) 55%, color-mix(in srgb, var(--inv-ink) 92%, var(--inv-primary)) 100%); }
.bu-closing__crown { position: relative; width: min(78%, 280px); margin: 0 auto 1rem; }
.bu-closing__roof { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 400 / 190; overflow: visible; filter: drop-shadow(0 14px 16px rgb(0 0 0 / .5)); }
.bu-closing__crown .bu-spray { width: 62%; bottom: -10%; opacity: .85; }
.bu-spray--cl { left: -40%; transform: scaleY(-1) rotate(10deg); }
.bu-spray--cr { right: -40%; transform: scale(-1, -1) rotate(10deg); }
.bu-closing__thanks { margin-top: .2rem; font: 400 clamp(3rem, 14vw, 3.6rem)/1.15 var(--bu-display); color: #fff; text-shadow: 0 4px 22px rgb(0 0 0 / .35); }
.bu-closing__message { max-width: 24rem; margin: .8rem auto 0; color: var(--bu-muted); }
.bu-closing__names { margin-top: 1.4rem; font: 400 clamp(2.4rem, 11vw, 3rem)/1.2 var(--bu-display); color: var(--inv-label); }
.bu-closing__sign { margin-top: .5rem; font: 600 .68rem/1.4 var(--bu-sans); letter-spacing: .32em; text-transform: uppercase; color: var(--bu-muted); }
.bu-fringe--end { margin: 0 1.5rem; }

/* ---------- shared components: nav, music, to-top, branding, check-in ---------- */

body .inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--inv-ink) 93%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-ivory) 78%, transparent);
    --inv-nav-active: var(--bu-red-bg);
    border-color: color-mix(in srgb, var(--inv-accent) 35%, transparent);
    box-shadow: 0 14px 34px -12px rgb(0 0 0 / .7);
    font-family: var(--bu-sans);
}
.inv-nav__item.is-active { color: #fff; font-weight: 600; }

.inv-music { right: max(1rem, calc((100vw - var(--bu-w)) / 2 + 1rem)); }
.inv-music__button { background: var(--bu-red-bg); color: #fff; box-shadow: 0 8px 22px -8px rgb(0 0 0 / .7), 0 0 0 2px var(--inv-ivory), 0 0 0 4px var(--inv-ink); }

.inv-to-top {
    left: max(1rem, calc((100vw - var(--bu-w)) / 2 + 1rem));
    background: var(--inv-ink); color: var(--inv-ivory);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 50%, transparent), 0 6px 16px -6px rgb(0 0 0 / .6);
}

.bu-branding { position: relative; z-index: 1; color: var(--inv-text); font-family: var(--bu-sans); background: color-mix(in srgb, var(--inv-ink) 92%, var(--inv-primary)); }

.inv-checkin { color: var(--inv-ink); }
.inv-checkin__title { color: var(--inv-primary); }

/* ---------- gentle motion ---------- */
@media (prefers-reduced-motion: no-preference) {
    .bu-spray use { animation: bu-sway 9s ease-in-out infinite alternate; }
    .bu-drape { animation: bu-drift 7s ease-in-out infinite alternate; }
}
@keyframes bu-sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
@keyframes bu-drift { from { transform: rotate(-3deg); } to { transform: translateY(-3px) rotate(-2.4deg); } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .bu-live__badge span { animation: none; }
    .bu-cover--leave { transition: opacity .3s ease; }
    .bu-cover--gone { transform: none; }
}

/* ---------- cover fit: shorter screens ---------- */
@media (max-height: 760px) {
    .bu-cover__inner { gap: .4rem; --bu-house-w: min(94vw, 380px, calc((100svh - 18rem) / 1.36)); }
    .bu-cover__names { font-size: clamp(2.3rem, 11vw, 2.9rem); }
    .bu-guest { padding: .5rem .9rem .55rem; }
}
@media (max-height: 660px) {
    .bu-cover__inner { gap: .3rem; padding-top: .7rem; padding-bottom: 1.4rem; --bu-house-w: min(90vw, calc((100svh - 17.6rem) / 1.38)); }
    .bu-house--cover { margin-bottom: .2rem; }
    .bu-cover__names { font-size: clamp(2.1rem, 10vw, 2.5rem); line-height: 1.05; }
    .bu-cover__title { font-size: .64rem; }
    .bu-guest__name { font-size: 1rem; }
    .bu-open { margin-top: .2rem; }
}

/* ---------- page end: the music player leaves 4.5rem under the page for the nav; without it, the page keeps that room ---------- */
body:not(:has(.inv-music__space)) .bu-page { padding-bottom: 4.5rem; }

/* ---------- intro scene (scene.json, sections/_scene): the Rumah Bolon draws near, its beam and ulos ---------- */
.bu-scene-wall, .bu-scene-band { display: block; width: 100%; height: 100%; }
.bu-scene-band { border-block: 1px solid color-mix(in srgb, var(--inv-accent) 75%, transparent); box-shadow: 0 8px 16px -8px rgb(0 0 0 / .7); }
body.bu-body .inv-scene__card { background: color-mix(in srgb, var(--inv-ivory) 88%, transparent); }