/*
 * Template "Halal Bihalal" (Reuni & Halal Bihalal) — a festive Idul Fitri gathering: warm cream, a deep
 * Lebaran colour (leaf green by default) with gold, a ketupat yellow-green and a joyful soft orange.
 * Signature pieces (SVG symbols in sections/_defs): woven ketupat hanging in pairs (.hb-hang), the crescent
 * with a star, oil lanterns (pelita) on a cord (rundown), the bedug with the date on its skin (countdown),
 * two hands meeting in a salam (opening), a plate of opor & ketupat (party), eight-pointed star seals and
 * medallions (.hb-star), tile frames with cut corners (.hb-frame) and bands of Islamic geometric pattern
 * (.hb-band, CSS masks so they take the variant colours). Mobile-first, one column (~460px) on a deep
 * backdrop on wide screens.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (leaf green / teal / maroon / navy: titles, buttons, frames)   --inv-deep (dark bands)
 *   --inv-accent (soft orange: joyful accents; on light grounds as text via --hb-accent-ink)
 *   --inv-shine (bright gold on dark)   --inv-gold (darker gold lines on light)   --inv-leaf (ketupat
 *   yellow-green)   --inv-background (cream)   --inv-soft (cream tint)   --inv-text
 * Everything else is mixed from those, so a new variant only needs these nine colours.
 *
 * Section tones (set on each section in its partial): .hb-tone--light (cream + a faint star lattice),
 * --sand (warm tint), --deep (the dark colour + a faint gold lattice and a band of stars on its top edge),
 * --jade (the primary colour). Light and dark alternate down the page.
 *
 * Tilts use the individual `rotate` property (not `transform`), so the reveal-on-scroll transforms of
 * invitation.js never undo them.
 *
 * Motion only runs with html.inv-anim (set by <x-inv.head> unless the guest prefers reduced motion);
 * without it everything is shown finished.
 *
 * Contents: 1 base · 2 section tones & photo backgrounds · 3 shared pieces (heading, band, ketupat, star,
 *           frame, guest box, chips, quote) · 4 cover · 5 sections in page order · 6 forms (RSVP, wishes) ·
 *           7 shared components · 8 screen sizes · 9 motion
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Hijau Ketupat" variant (the variant's colours override these) */
    --inv-primary: #17643f;
    --inv-accent: #e8742c;
    --inv-background: #fbf5e4;
    --inv-text: #1a2a1f;
    --inv-deep: #0b3824;
    --inv-shine: #f3c652;
    --inv-gold: #a97c1c;
    --inv-soft: #f0e4c4;
    --inv-leaf: #b3cb3a;
    --inv-radius: 14px;

    --hb-display: 'Reem Kufi', 'Trebuchet MS', system-ui, sans-serif;
    --hb-sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --hb-serif: 'Amiri', Georgia, 'Times New Roman', serif;
    --hb-col: 460px;
    --hb-paper: color-mix(in srgb, #fff 72%, var(--inv-background));
    --hb-title: color-mix(in srgb, var(--inv-primary) 80%, var(--inv-deep));
    --hb-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    --hb-cream-muted: color-mix(in srgb, var(--inv-background) 86%, transparent);
    --hb-ring: color-mix(in srgb, var(--inv-primary) 16%, transparent);
    --hb-accent-ink: color-mix(in srgb, var(--inv-accent) 72%, var(--inv-deep));
    --hb-leaf-deep: color-mix(in srgb, var(--inv-leaf) 55%, var(--inv-primary));
    --hb-drop: 0 22px 40px -22px color-mix(in srgb, var(--inv-deep) 70%, transparent);
    --hb-cut: 14px;

    /* patterns (mask images, painted in any colour through background): a band of eight-pointed stars between two
       rules with half diamonds at the joins, a lattice of stars and diamonds, and a field of tiny stars */
    --hb-band-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16'%3E%3Cpath d='M0 0h24v1.3H0zM0 14.7h24V16H0z'/%3E%3Cpath fill-rule='evenodd' d='M12 2.4 13.53 4.3 15.96 4.04 15.7 6.47 17.6 8 15.7 9.53 15.96 11.96 13.53 11.7 12 13.6 10.47 11.7 8.04 11.96 8.3 9.53 6.4 8 8.3 6.47 8.04 4.04 10.47 4.3ZM12 5.8a2.2 2.2 0 1 0 0 4.4 2.2 2.2 0 1 0 0-4.4Z'/%3E%3Cpath d='M0 5.3 2.7 8 0 10.7ZM24 5.3 21.3 8 24 10.7Z'/%3E%3C/svg%3E");
    --hb-lattice-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='none' stroke='black' stroke-width='1.1'%3E%3Cpath d='M20 11 29 20 20 29 11 20ZM13.64 13.64H26.36V26.36H13.64ZM20 0V11M20 29V40M0 20H11M29 20H40M0 6 6 0M34 0 40 6M40 34 34 40M6 40 0 34'/%3E%3C/svg%3E");
    --hb-dots-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M7 3.2 7.9 5.1 9.9 4.1 8.9 6.1 10.8 7 8.9 7.9 9.9 9.9 7.9 8.9 7 10.8 6.1 8.9 4.1 9.9 5.1 7.9 3.2 7 5.1 6.1 4.1 4.1 6.1 5.1Z'/%3E%3C/svg%3E");

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

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

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

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

.hb-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

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

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

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

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

/* the chamfered (cut-corner) tile shape used by frames and cards */
.hb-cut { clip-path: polygon(var(--hb-cut) 0, calc(100% - var(--hb-cut)) 0, 100% var(--hb-cut), 100% calc(100% - var(--hb-cut)), calc(100% - var(--hb-cut)) 100%, var(--hb-cut) 100%, 0 calc(100% - var(--hb-cut)), 0 var(--hb-cut)); }

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

/* light: cream with a gold glow in one corner, a leaf glow in the other, and a faint star lattice */
.hb-tone--light {
    background:
        radial-gradient(60% 26% at 100% 0%, color-mix(in srgb, var(--inv-shine) 24%, transparent), transparent 75%),
        radial-gradient(60% 26% at 0% 100%, color-mix(in srgb, var(--inv-leaf) 18%, transparent), transparent 75%),
        var(--inv-background);
}
/* sand: a warm wash of the cream tint */
.hb-tone--sand {
    background:
        radial-gradient(80% 40% at 50% 0%, color-mix(in srgb, #fff 45%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-soft), color-mix(in srgb, var(--inv-soft) 45%, var(--inv-background)));
}
.hb-tone--light::before, .hb-tone--sand::before, .hb-tone--deep::before, .hb-tone--jade::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-gold); opacity: .09;
    -webkit-mask: var(--hb-lattice-tile) center top / 40px 40px; mask: var(--hb-lattice-tile) center top / 40px 40px;
}
.hb-tone--sand::before { opacity: .11; }

/* deep: the band colour with a glow of the primary and a low warm glow, a gold lattice, a band on its top edge */
.hb-tone--deep {
    color: var(--inv-background);
    background:
        radial-gradient(90% 45% at 10% 0%, color-mix(in srgb, var(--inv-primary) 85%, transparent), transparent 75%),
        radial-gradient(70% 30% at 90% 100%, color-mix(in srgb, var(--inv-accent) 18%, transparent), transparent 75%),
        var(--inv-deep);
}
.hb-tone--deep::before { background: var(--inv-shine); opacity: .07; }
.hb-tone--deep::after, .hb-tone--jade::after {
    content: ''; position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: 12px; pointer-events: none;
    background: linear-gradient(90deg, var(--inv-gold), var(--inv-shine), var(--inv-gold)); opacity: .75;
    -webkit-mask: var(--hb-band-tile) center / auto 100% repeat-x; mask: var(--hb-band-tile) center / auto 100% repeat-x;
}
.hb-tone--deep a:not(.inv-button) { color: var(--inv-shine); }
.hb-tone--deep .hb-arabic { color: var(--inv-shine); }

/* jade: a band of the primary colour (white text keeps ≥ 4.5:1) */
.hb-tone--jade {
    color: #fff;
    background:
        radial-gradient(80% 45% at 50% 0%, color-mix(in srgb, var(--inv-shine) 22%, transparent), transparent 75%),
        radial-gradient(70% 40% at 0% 100%, color-mix(in srgb, var(--inv-deep) 55%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 70%, var(--inv-deep)));
}
.hb-tone--jade::before { background: #fff; opacity: .07; }

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

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

/* section heading: a letter-spaced eyebrow between two tiny stars, the kufi title, the last word in the accent
   colour over a soft ketupat-green wash */
.hb-heading { margin: 0 0 2.2rem; }
.hb-heading--left { text-align: left; }
.hb-heading__eyebrow {
    display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 .5rem;
    font-size: .7rem; font-weight: 800; line-height: 1.2; letter-spacing: .22em; text-transform: uppercase; color: var(--hb-accent-ink);
}
.hb-heading__eyebrow::before, .hb-heading__eyebrow::after {
    content: ''; flex: none; width: .7rem; height: .7rem; background: var(--inv-gold);
    -webkit-mask: var(--hb-dots-tile) center / 140% 140% no-repeat; mask: var(--hb-dots-tile) center / 140% 140% no-repeat;
}
.hb-heading__title {
    margin: 0; font-family: var(--hb-display); font-size: 2.35rem; font-weight: 600; line-height: 1.1;
    letter-spacing: -.005em; color: var(--hb-title); text-wrap: balance;
}
.hb-heading__title em { position: relative; z-index: 0; display: inline-block; font-style: normal; color: var(--hb-accent-ink); }
.hb-heading__title em::after {
    content: ''; position: absolute; z-index: -1; left: -.12em; right: -.12em; bottom: .06em; height: .4em;
    border-radius: 999px; background: var(--inv-leaf); opacity: .38;
}
.hb-tone--deep .hb-heading__eyebrow, .hb-tone--jade .hb-heading__eyebrow { color: var(--inv-shine); }
.hb-tone--deep .hb-heading__eyebrow::before, .hb-tone--deep .hb-heading__eyebrow::after,
.hb-tone--jade .hb-heading__eyebrow::before, .hb-tone--jade .hb-heading__eyebrow::after { background: var(--inv-shine); }
.hb-tone--deep .hb-heading__title, .hb-tone--jade .hb-heading__title { color: #fff; }
.hb-tone--deep .hb-heading__title em, .hb-tone--jade .hb-heading__title em { color: var(--inv-shine); }
.hb-tone--deep .hb-heading__title em::after, .hb-tone--jade .hb-heading__title em::after { background: var(--inv-leaf); opacity: .28; }

/* Reem Kufi has a very narrow word space: open it up wherever the display face sets more than one word */
:is(.hb-heading__title, .hb-cover__name, .hb-organizer__name, .hb-party__theme-name, .hb-party__dress-name, .hb-event__name,
    .hb-story__body h3, .hb-stream__title, .hb-rsvp__for, .hb-cohost__name, .hb-vendor__name, .hb-closing__title, .hb-closing__name,
    .hb-opening__greeting, .hb-guest__name, .hb-opening__minal, .hb-party__hashtag-text, .hb-frame__monogram) { word-spacing: .14em; }

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

/* a band of geometric stars (gold) */
.hb-band {
    display: block; height: 16px; background: linear-gradient(90deg, var(--inv-gold), var(--inv-shine) 50%, var(--inv-gold));
    -webkit-mask: var(--hb-band-tile) center / auto 100% repeat-x; mask: var(--hb-band-tile) center / auto 100% repeat-x;
}
.hb-band--thin { height: 11px; }

/* a ketupat hanging on its string: --hang = string length, --k-w = the ketupat's width */
.hb-hang {
    --hang: 2rem; --k-w: 2.4rem;
    position: absolute; z-index: 2; display: block; width: var(--k-w); padding-top: var(--hang); transform-origin: 50% 0; pointer-events: none;
}
.hb-hang::before {
    content: ''; position: absolute; top: 0; left: 50%; width: 1.5px; height: calc(var(--hang) + 2px); margin-left: -.75px;
    background: linear-gradient(180deg, var(--inv-gold), var(--inv-shine));
}
.hb-ketupat { display: block; width: 100%; height: auto; aspect-ratio: 60 / 124; margin-top: calc(var(--k-w) * -.13); overflow: visible; filter: drop-shadow(0 6px 6px rgb(0 0 0 / .22)); }
/* the ketupat's parts (inside the #hb-ketupat symbol) */
.hb-k__a { fill: var(--k-light, var(--inv-leaf)); }
.hb-k__b { fill: var(--k-dark, color-mix(in srgb, var(--inv-leaf) 58%, var(--inv-primary))); }
.hb-k__seam { fill: none; stroke: color-mix(in srgb, var(--inv-deep) 50%, transparent); stroke-width: .8; }
.hb-k__edge { fill: none; stroke: color-mix(in srgb, var(--inv-deep) 55%, transparent); stroke-width: 1; }
.hb-k__tail { fill: color-mix(in srgb, var(--inv-leaf) 75%, var(--inv-primary)); }
.hb-k__tail--b { fill: color-mix(in srgb, var(--inv-leaf) 48%, var(--inv-primary)); }
.hb-k__knot { fill: none; stroke: color-mix(in srgb, var(--inv-leaf) 55%, var(--inv-primary)); stroke-width: 2.2; }
/* the lantern's parts (inside the #hb-lantern symbol) */
.hb-l__metal { fill: url(#hb-gold); }
.hb-l__metal-line { fill: none; stroke: var(--inv-shine); stroke-width: 1.6; }
.hb-l__rib { fill: none; stroke: var(--inv-gold); stroke-width: 1.1; opacity: .85; }
.hb-l__rib--edge { stroke-width: 1.4; opacity: 1; }
.hb-l__tassel { fill: var(--inv-accent); }

/* an eight-pointed star seal / medallion: a gold outer star, a coloured inner star, text on top */
.hb-star {
    --star-w: 4.8rem; --star-fill: var(--inv-primary); --star-ink: #fff;
    position: relative; display: inline-grid; place-items: center; flex: none; width: var(--star-w); height: var(--star-w); margin: 0;
}
.hb-star > svg { position: absolute; display: block; }
.hb-star__outer { inset: 0; width: 100%; height: 100%; color: var(--inv-shine); filter: drop-shadow(0 8px 10px rgb(0 0 0 / .28)); }
.hb-star__inner { inset: 9%; width: 82%; height: 82%; color: var(--star-fill); }
.hb-star__content { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; text-align: center; color: var(--star-ink); }
.hb-star__top, .hb-star__bottom { font-size: calc(var(--star-w) * .115); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hb-star__big { font-family: var(--hb-display); font-weight: 700; font-size: calc(var(--star-w) * .36); line-height: .95; }
/* the milestone seal */
.hb-seal { --star-w: 5rem; --star-fill: var(--inv-accent); rotate: 8deg; }
.hb-seal .hb-star__bottom { margin-top: .1rem; }
.hb-seal--text .hb-star__bottom { max-width: 70%; font-size: calc(var(--star-w) * .12); letter-spacing: .04em; line-height: 1.15; }

/* a tile frame with cut corners: gold edge, a deep mat patterned with tiny stars, a fine gold line, the photo */
.hb-frame {
    --frame-w: 15rem; --frame-ratio: 4 / 5; --frame-pad: .62rem; --hb-cut: 18px;
    position: relative; width: var(--frame-w); margin: 0; padding: var(--frame-pad);
    background: linear-gradient(135deg, color-mix(in srgb, #fff 45%, var(--inv-shine)), var(--inv-shine) 30%, var(--inv-gold) 70%, var(--inv-shine));
    clip-path: polygon(var(--hb-cut) 0, calc(100% - var(--hb-cut)) 0, 100% var(--hb-cut), 100% calc(100% - var(--hb-cut)), calc(100% - var(--hb-cut)) 100%, var(--hb-cut) 100%, 0 calc(100% - var(--hb-cut)), 0 var(--hb-cut));
}
.hb-frame__mat {
    --c: calc(var(--hb-cut) - 1px);
    position: absolute; inset: 2px; background: linear-gradient(160deg, var(--inv-primary), var(--inv-deep));
    clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
.hb-frame__mat::before {
    content: ''; position: absolute; inset: 0; background: var(--inv-shine); opacity: .45;
    -webkit-mask: var(--hb-dots-tile) center / 10px 10px; mask: var(--hb-dots-tile) center / 10px 10px;
}
.hb-frame__window {
    --c: calc(var(--hb-cut) * .62);
    position: relative; overflow: hidden; aspect-ratio: var(--frame-ratio); background: var(--inv-deep);
    clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
    box-shadow: inset 0 0 0 1.5px var(--inv-shine);
}
.hb-frame__window::after {
    content: ''; position: absolute; inset: 4px; pointer-events: none; border: 1px solid color-mix(in srgb, var(--inv-shine) 70%, transparent);
    clip-path: inherit;
}
.hb-frame__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--frame-pos, center 35%); }
.hb-frame__empty {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
    color: var(--inv-background);
    background:
        radial-gradient(70% 45% at 50% 80%, color-mix(in srgb, var(--inv-shine) 30%, transparent), transparent 72%),
        linear-gradient(180deg, var(--inv-deep), var(--inv-primary));
}
.hb-frame__empty::before {
    content: ''; position: absolute; inset: 0; background: var(--inv-shine); opacity: .12;
    -webkit-mask: var(--hb-lattice-tile) center / 34px 34px; mask: var(--hb-lattice-tile) center / 34px 34px;
}
.hb-frame__empty-moon { position: relative; width: 38%; }
.hb-frame__monogram { position: relative; font-family: var(--hb-display); font-weight: 700; line-height: 1; white-space: nowrap; font-size: calc(var(--frame-w) * .17); color: var(--inv-shine); }
/* a light frame variant: cream mat */
.hb-frame--light .hb-frame__mat { background: linear-gradient(160deg, #fffdf6, var(--inv-soft)); }
.hb-frame--light .hb-frame__mat::before { background: var(--inv-gold); opacity: .3; }

/* a ribbon with folded ends (under a frame) */
.hb-ribbon { position: relative; z-index: 3; display: inline-block; margin: 0; filter: drop-shadow(0 8px 10px rgb(0 0 0 / .2)); }
.hb-ribbon span {
    display: block; padding: .38rem 1.6rem .4rem; font-size: .7rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
    color: var(--inv-shine); background: linear-gradient(180deg, var(--inv-primary), var(--inv-deep));
    clip-path: polygon(0 0, 100% 0, calc(100% - .7rem) 50%, 100% 100%, 0 100%, .7rem 50%);
}

/* chips */
.hb-chip {
    display: inline-block; padding: .26rem .8rem; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: #fff; background: var(--inv-primary);
}
.hb-chip--leaf { color: var(--inv-deep); background: var(--inv-leaf); }

/* a diamond tag (ketupat green) with the text upright on it */
.hb-diamond {
    display: inline-grid; place-items: center; min-width: 3.6rem; height: 2rem; padding: 0 1.3rem;
    font-family: var(--hb-display); font-weight: 700; font-size: 1rem; line-height: 1; color: var(--inv-deep);
    background: linear-gradient(135deg, color-mix(in srgb, #fff 30%, var(--inv-leaf)), var(--inv-leaf));
    clip-path: polygon(.9rem 0, calc(100% - .9rem) 0, 100% 50%, calc(100% - .9rem) 100%, .9rem 100%, 0 50%);
}

/* the guest box: a cream card with cut corners and a band of stars along its top */
.hb-guest {
    --hb-cut: 12px;
    position: relative; padding: 1.05rem 1rem .75rem; text-align: center; color: var(--inv-text);
    background: linear-gradient(180deg, #fffdf6, var(--hb-paper));
    clip-path: polygon(var(--hb-cut) 0, calc(100% - var(--hb-cut)) 0, 100% var(--hb-cut), 100% calc(100% - var(--hb-cut)), calc(100% - var(--hb-cut)) 100%, var(--hb-cut) 100%, 0 calc(100% - var(--hb-cut)), 0 var(--hb-cut));
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-gold) 45%, transparent);
}
.hb-guest::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 10px;
    background: var(--inv-primary);
    -webkit-mask: var(--hb-band-tile) center / auto 100% repeat-x; mask: var(--hb-band-tile) center / auto 100% repeat-x;
}
.hb-guest__label { margin: 0; font-size: .62rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--hb-accent-ink); }
.hb-guest__name { display: block; margin: .1rem 0 0; font-family: var(--hb-display); font-weight: 600; font-size: 1.32rem; line-height: 1.2; color: var(--hb-title); overflow-wrap: anywhere; }

/* a quote card: cream, cut corners, a band of stars along the top */
.hb-quote {
    --hb-cut: 14px;
    position: relative; margin: 0 auto; padding: 1.7rem 1.3rem 1.3rem; max-width: 24rem; color: var(--inv-text);
    background: linear-gradient(180deg, #fffdf6, var(--hb-paper));
    clip-path: polygon(var(--hb-cut) 0, calc(100% - var(--hb-cut)) 0, 100% var(--hb-cut), 100% calc(100% - var(--hb-cut)), calc(100% - var(--hb-cut)) 100%, var(--hb-cut) 100%, 0 calc(100% - var(--hb-cut)), 0 var(--hb-cut));
}
.hb-quote::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 12px; background: linear-gradient(90deg, var(--inv-gold), var(--inv-shine), var(--inv-gold));
    -webkit-mask: var(--hb-band-tile) center / auto 100% repeat-x; mask: var(--hb-band-tile) center / auto 100% repeat-x;
}
.hb-quote blockquote { margin: 0; font-family: var(--hb-serif); font-style: italic; font-size: 1.12rem; line-height: 1.55; color: var(--hb-title); }
.hb-quote figcaption {
    display: inline-block; margin-top: .8rem; padding: .2rem .8rem; border-radius: 999px;
    font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-deep); background: var(--inv-leaf);
}

/* ---------- 4. cover ---------- */
.hb-cover {
    --ph-w: min(60vw, 15rem, calc(37svh * .8));
    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.4rem 1rem 2rem;
    isolation: isolate; color: var(--inv-text);
    background:
        radial-gradient(70% 34% at 50% 30%, color-mix(in srgb, var(--inv-shine) 34%, transparent), transparent 72%),
        radial-gradient(60% 26% at 100% 0%, color-mix(in srgb, var(--inv-leaf) 22%, transparent), transparent 72%),
        radial-gradient(70% 28% at 0% 100%, color-mix(in srgb, var(--inv-accent) 12%, transparent), transparent 75%),
        var(--inv-background);
    transition: opacity .9s ease;
}
.hb-cover::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--inv-gold); opacity: .1;
    -webkit-mask: var(--hb-lattice-tile) center top / 40px 40px; mask: var(--hb-lattice-tile) center top / 40px 40px;
}
.hb-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); }
.hb-cover__band { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; }

.hb-cover__title {
    display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .5rem; max-width: 100%;
    font-size: .7rem; font-weight: 800; line-height: 1.25; letter-spacing: .22em; text-transform: uppercase; color: var(--hb-accent-ink);
}
.hb-cover__title::before, .hb-cover__title::after {
    content: ''; flex: none; width: .75rem; height: .75rem; background: var(--inv-gold);
    -webkit-mask: var(--hb-dots-tile) center / 140% 140% no-repeat; mask: var(--hb-dots-tile) center / 140% 140% no-repeat;
}

/* the art: a garland across the top (gold cord), the crescent hanging from its middle, ketupat in pairs on
   both sides, the framed photo, the seal at its lower-right corner */
.hb-cover__art {
    position: relative; display: flex; justify-content: center; width: calc(var(--ph-w) * 1.52); max-width: 100%;
    padding-top: calc(var(--ph-w) * .38); margin-bottom: 1.1rem;
}
.hb-cover__garland { position: absolute; top: 0; left: 0; width: 100%; height: calc(var(--ph-w) * .12); overflow: visible; }
.hb-cover__garland path, .hb-closing__cord path { fill: none; stroke: var(--inv-gold); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
/* attach points on the cord (x as a share of the width, y as a share of the cord height): .07 → .28, .18 → .46,
   .5 → .69 */
.hb-cover__k { --k-w: calc(var(--ph-w) * .18); }
.hb-cover__k--1 { left: calc(7% - var(--k-w) / 2); top: calc(var(--ph-w) * .12 * .28); --hang: calc(var(--ph-w) * .34); }
.hb-cover__k--2 { left: calc(18% - var(--k-w) / 2); top: calc(var(--ph-w) * .12 * .46); --hang: calc(var(--ph-w) * .05); --k-w: calc(var(--ph-w) * .14); }
.hb-cover__k--3 { left: calc(82% - var(--k-w) / 2); top: calc(var(--ph-w) * .12 * .46); --hang: calc(var(--ph-w) * .05); --k-w: calc(var(--ph-w) * .14); }
.hb-cover__k--4 { left: calc(93% - var(--k-w) / 2); top: calc(var(--ph-w) * .12 * .28); --hang: calc(var(--ph-w) * .34); }
.hb-cover__moon {
    position: absolute; z-index: 2; left: 50%; top: calc(var(--ph-w) * .12 * .69); width: calc(var(--ph-w) * .23); margin-left: calc(var(--ph-w) * -.115);
    padding-top: calc(var(--ph-w) * .03); transform-origin: 50% 0;
}
.hb-cover__moon::before { content: ''; position: absolute; top: 0; left: 50%; width: 1.5px; height: calc(var(--ph-w) * .045); margin-left: -.75px; background: var(--inv-gold); }
.hb-cover__moon svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--inv-shine) 70%, transparent)) drop-shadow(0 4px 4px rgb(0 0 0 / .18)); }
.hb-cover__frame { --frame-w: calc(var(--ph-w) + 1.24rem); filter: drop-shadow(0 18px 22px color-mix(in srgb, var(--inv-deep) 45%, transparent)); }
.hb-cover__frame { --frame-pos: center 40%; }
.hb-cover__seal { --star-w: calc(var(--ph-w) * .3); position: absolute; z-index: 3; bottom: calc(var(--ph-w) * -.1); right: calc(50% - var(--ph-w) * .5 - 1.4rem); }

.hb-cover__text { display: flex; flex-direction: column; align-items: center; width: 100%; }
.hb-cover__name {
    margin: 0; max-width: 16ch; font-family: var(--hb-display); font-size: clamp(1.75rem, 8.2vw, 2.3rem); font-weight: 700; line-height: 1.08;
    color: var(--hb-title); text-wrap: balance; overflow-wrap: anywhere;
}
.hb-cover__batch {
    margin: .5rem 0 0; padding: .24rem .9rem; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
    color: var(--inv-deep); background: var(--inv-leaf);
}
.hb-cover__date { margin: .45rem 0 0; font-size: .9rem; font-weight: 800; color: var(--inv-deep); }
.hb-cover__quote {
    max-width: 30ch; margin: .2rem 0 0; font-family: var(--hb-serif); font-style: italic;
    font-size: 1.05rem; line-height: 1.35; color: var(--hb-muted); text-wrap: balance;
}
.hb-cover__guest { width: min(100%, 18rem); margin-top: .8rem; }
.hb-cover__open {
    margin-top: 1rem; min-height: 3rem; padding: .7rem 2rem; font-weight: 800; letter-spacing: .02em;
    background: linear-gradient(180deg, var(--inv-primary), var(--inv-deep)); color: #fff;
    box-shadow: 0 0 0 3px var(--inv-background), 0 0 0 4.5px var(--inv-shine), 0 14px 24px -12px color-mix(in srgb, var(--inv-deep) 80%, transparent);
}

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

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

/* opening: the salam moment (crescent, greeting of the day, the hands, "mohon maaf"), a band, then the client text */
.hb-opening { padding: 4.2rem 1.5rem 4.4rem; }
.hb-opening__moment { position: relative; margin: 0 auto 1.6rem; }
.hb-opening__moment::before {
    content: ''; position: absolute; z-index: -1; left: 50%; top: 52%; width: 17rem; height: 13rem; translate: -50% -50%; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-shine) 22%, transparent), transparent);
}
.hb-opening__moon { display: block; width: 2.6rem; margin: 0 auto .7rem; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--inv-shine) 60%, transparent)); }
.hb-opening__minal {
    margin: 0 0 .3rem !important; font-family: var(--hb-display); font-size: .86rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-shine);
}
.hb-opening__hands { display: block; width: min(15rem, 70vw); margin: 0 auto; color: var(--inv-shine); overflow: visible; }
.hb-hands path { stroke-width: 2.2; }
.hb-hands .hb-hands__thin { stroke-width: 1.4; }
.hb-hands__palm { fill: color-mix(in srgb, var(--inv-shine) 10%, transparent); }
.hb-hands__cuff { fill: color-mix(in srgb, var(--inv-shine) 18%, var(--inv-deep)); }
.hb-hands__spark { fill: currentColor; stroke: none; }
.hb-opening__maaf {
    margin: .2rem auto 0 !important; max-width: none !important; font-family: var(--hb-serif); font-style: italic; font-weight: 700;
    font-size: clamp(1.75rem, 8.4vw, 2.25rem); line-height: 1.15; color: #fff; text-wrap: balance;
}
.hb-opening__band { width: 11rem; margin: 0 auto 1.8rem; opacity: .9; }
.hb-opening__basmalah { margin: 0 auto .6rem !important; font-size: 1.75rem; }
.hb-opening__greeting { margin: 0 auto .7rem !important; font-family: var(--hb-display); font-weight: 600; font-size: 1.85rem; line-height: 1.15; color: var(--inv-shine); }
.hb-opening__message { color: var(--hb-cream-muted); }
.hb-opening__quote { margin-top: 2rem; box-shadow: 0 24px 30px -20px rgb(0 0 0 / .6); }

/* organizer: the hanging frame (cords from a star nail), ketupat beside it, ribbon, seal; then the greeting card */
.hb-organizer__art { --o-w: min(14.5rem, 60vw); position: relative; display: flex; flex-direction: column; align-items: center; width: calc(var(--o-w) + 6rem); max-width: 100%; margin: 0 auto 2rem; padding-top: 3.3rem; }
/* a festive cord across the top (attach points: x .5 → y .5, .895 → .25, .965 → .14 of its height) */
.hb-organizer__garland { position: absolute; top: 0; left: 0; width: 100%; height: 1.4rem; overflow: visible; }
.hb-organizer__garland path { fill: none; stroke: var(--inv-gold); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.hb-organizer__cords { position: absolute; top: .7rem; left: 50%; width: calc(var(--o-w) * .84); height: 2.85rem; translate: -50% 0; overflow: visible; }
.hb-organizer__cords path { fill: none; stroke: var(--inv-gold); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.hb-organizer__nail { position: absolute; z-index: 2; top: .05rem; left: 50%; width: 1.3rem; margin-left: -.65rem; color: var(--inv-gold); filter: drop-shadow(0 2px 2px rgb(0 0 0 / .2)); }
.hb-organizer__frame { --frame-w: var(--o-w); --frame-ratio: 1 / 1; --hb-cut: 16px; rotate: -1.2deg; filter: drop-shadow(0 18px 22px color-mix(in srgb, var(--inv-deep) 40%, transparent)); }
.hb-organizer__ribbon { margin-top: -1rem; }
.hb-organizer__seal { --star-w: 4.4rem; position: absolute; z-index: 3; top: 2.5rem; left: calc(50% - var(--o-w) / 2 - 1.5rem); rotate: -10deg; }
.hb-organizer__k { --k-w: 1.85rem; }
.hb-organizer__k--1 { left: calc(89.5% - var(--k-w) / 2); top: calc(1.4rem * .25); --hang: 1.4rem; }
.hb-organizer__k--2 { left: calc(96.5% - var(--k-w) / 2); top: calc(1.4rem * .14); --hang: 4.4rem; --k-w: 2.1rem; }
.hb-organizer__card {
    --hb-cut: 16px;
    position: relative; max-width: 24rem; margin: 0 auto; padding: 1.5rem 1.3rem 1.5rem 2.6rem; text-align: left; color: var(--inv-text);
    background: linear-gradient(180deg, #fffdf6, var(--hb-paper));
    clip-path: polygon(var(--hb-cut) 0, calc(100% - var(--hb-cut)) 0, 100% var(--hb-cut), 100% calc(100% - var(--hb-cut)), calc(100% - var(--hb-cut)) 100%, var(--hb-cut) 100%, 0 calc(100% - var(--hb-cut)), 0 var(--hb-cut));
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-gold) 35%, transparent);
}
/* the greeting card's deep band on the left edge with a column of stars */
.hb-organizer__card::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 1.35rem; background: linear-gradient(180deg, var(--inv-primary), var(--inv-deep));
}
.hb-organizer__card::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: .2rem; width: .95rem; background: var(--inv-shine); opacity: .8;
    -webkit-mask: var(--hb-dots-tile) center top / 100% auto repeat-y; mask: var(--hb-dots-tile) center top / 100% auto repeat-y;
}
.hb-organizer__name { margin: 0; font-family: var(--hb-display); font-weight: 700; font-size: 1.85rem; line-height: 1.12; color: var(--hb-title); overflow-wrap: anywhere; }
.hb-organizer__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0 0; }
.hb-organizer__tagline { margin: .9rem 0 0; font-family: var(--hb-serif); font-style: italic; font-size: 1.12rem; line-height: 1.5; color: var(--hb-title); }
.hb-organizer__tagline span { background: linear-gradient(transparent 60%, color-mix(in srgb, var(--inv-leaf) 38%, transparent) 60%); box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* party (jade band): the plate of the feast, the theme tag, the dress-code card, the note, the hashtag */
.hb-plate { display: block; width: min(17rem, 78vw); margin: -.6rem auto 1rem; overflow: visible; }
.hb-plate__shadow { fill: rgb(0 0 0 / .22); }
.hb-plate__dish { fill: #fffdf6; stroke: var(--inv-shine); stroke-width: 2.5; }
.hb-plate__rim { fill: none; stroke: var(--inv-gold); stroke-width: 1.6; stroke-dasharray: .5 5; stroke-linecap: round; }
.hb-plate__leaf { fill: #3e8a3c; }
.hb-plate__rib { fill: none; stroke: #2b6b2c; stroke-width: 1.2; stroke-linecap: round; }
.hb-plate__bowl { fill: #fff; stroke: #dccaa0; stroke-width: 2; }
.hb-plate__opor { fill: #ecb54d; }
.hb-plate__chicken { fill: #c4863a; }
.hb-plate__egg { fill: #fffdf3; }
.hb-plate__yolk { fill: #f2a52a; }
.hb-plate__chili { fill: none; stroke: #d9462a; stroke-width: 2.4; stroke-linecap: round; }
.hb-party__label { display: block; font-size: .64rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--hb-accent-ink); }
.hb-party__theme {
    --hb-cut: 16px;
    position: relative; max-width: 22rem; margin: 0 auto 1.1rem; padding: 1.55rem 1.2rem 1.2rem; color: var(--inv-text);
    background: linear-gradient(180deg, #fffdf6, var(--hb-paper));
    clip-path: polygon(var(--hb-cut) 0, calc(100% - var(--hb-cut)) 0, 100% var(--hb-cut), 100% calc(100% - var(--hb-cut)), calc(100% - var(--hb-cut)) 100%, var(--hb-cut) 100%, 0 calc(100% - var(--hb-cut)), 0 var(--hb-cut));
}
.hb-party__theme-band { position: absolute; top: 0; left: 0; right: 0; height: 12px; background: var(--inv-primary); }
.hb-party__theme-name { margin: .25rem 0 0; font-family: var(--hb-display); font-weight: 700; font-size: 2rem; line-height: 1.1; color: var(--hb-title); overflow-wrap: anywhere; }
.hb-party__dress {
    display: grid; grid-template-columns: 5rem minmax(0, 1fr); align-items: center; gap: 1rem; max-width: 22rem; margin: 0 auto 1.1rem; padding: 1.1rem 1.1rem;
    border-radius: 16px; text-align: left; color: var(--inv-text); background: #fffdf6;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-gold) 35%, transparent), 0 20px 28px -20px rgb(0 0 0 / .55);
}
.hb-party__shirt { width: 5rem; height: auto; overflow: visible; }
.hb-party__shirt-body { fill: var(--hb-pick, var(--inv-soft)); stroke: var(--inv-deep); stroke-width: 1.6; stroke-linejoin: round; transition: fill .35s ease; }
.hb-party__shirt-line { fill: none; stroke: color-mix(in srgb, var(--inv-deep) 70%, transparent); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.hb-party__dress-name { margin: .15rem 0 0; font-family: var(--hb-display); font-weight: 600; font-size: 1.2rem; line-height: 1.25; color: var(--hb-title); }
.hb-swatches { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.hb-swatch {
    width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--hb-swatch);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18), 0 0 0 2px #fff, 0 0 0 3px color-mix(in srgb, var(--inv-primary) 25%, transparent);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.hb-swatch[aria-pressed="true"] { transform: scale(1.12); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18), 0 0 0 2px #fff, 0 0 0 4px var(--inv-accent); }
.hb-swatch:focus-visible { outline: 2px solid var(--inv-accent); outline-offset: 4px; }
.hb-party__hint { margin: .45rem 0 0; font-size: .74rem; line-height: 1.4; color: var(--hb-muted); }
.hb-party__hint--light { margin-top: .55rem; color: color-mix(in srgb, #fff 85%, transparent); }
.hb-party__note {
    position: relative; display: flex !important; align-items: center; gap: .9rem; max-width: 22rem !important; margin: 0 auto 1.4rem !important; padding: 1rem 1.1rem;
    border-radius: 14px; text-align: left; font-family: var(--hb-serif); font-style: italic; font-size: 1.08rem; line-height: 1.45; color: #fff;
    background: color-mix(in srgb, var(--inv-deep) 42%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-shine) 55%, transparent);
}
.hb-party__note-k { flex: none; width: 1.9rem; height: auto; overflow: visible; }
.hb-party__hashtag {
    display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; padding: .35rem .35rem .35rem 1rem; border-radius: 999px;
    color: var(--inv-deep); background: var(--inv-shine); box-shadow: 0 14px 22px -14px rgb(0 0 0 / .6);
}
.hb-party__hashtag-text { min-width: 0; font-family: var(--hb-display); font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.hb-party__copy {
    flex: none; min-height: 2.2rem; padding: .3rem .9rem; border: 0; border-radius: 999px; cursor: pointer;
    font: 800 .74rem/1 var(--hb-sans); color: #fff; background: var(--inv-deep);
}

/* events: a photo with cut corners, then the card — the star medallion, the name, a band, icon rows, maps */
.hb-event + .hb-event { margin-top: 2.8rem; }
.hb-event__media {
    --hb-cut: 18px;
    position: relative; z-index: 1; margin: 0 .4rem; padding: 4px; background: linear-gradient(135deg, var(--inv-shine), var(--inv-gold));
    clip-path: polygon(var(--hb-cut) 0, calc(100% - var(--hb-cut)) 0, 100% var(--hb-cut), 100% 100%, 0 100%, 0 var(--hb-cut));
}
.hb-event__photo {
    display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 55%;
    clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%, 0 15px);
}
.hb-event__card {
    position: relative; padding: 0 0 1.3rem; border-radius: 0 0 18px 18px; background: #fffdf8; text-align: left;
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--inv-gold) 30%, transparent), 0 24px 30px -22px color-mix(in srgb, var(--inv-deep) 60%, transparent);
}
.hb-event:not(.hb-event--photo) .hb-event__card { margin-top: 2.2rem; border-radius: 18px; }
.hb-event__top { display: flex; align-items: center; gap: .9rem; padding: 0 1.1rem; }
.hb-event__medal { --star-w: 5.6rem; margin-top: -2.2rem; }
.hb-event__medal .hb-star__big { font-size: 1.95rem; }
.hb-event__medal .hb-star__top, .hb-event__medal .hb-star__bottom { font-size: .54rem; letter-spacing: .08em; }
.hb-event--flip .hb-event__top { flex-direction: row-reverse; text-align: right; }
.hb-event--flip .hb-event__medal { --star-fill: var(--hb-accent-ink); }
.hb-event__head { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding-top: .9rem; }
.hb-event__no { font-size: .62rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--hb-accent-ink); }
.hb-event__name { margin: .1rem 0 0; font-family: var(--hb-display); font-weight: 700; font-size: 1.4rem; line-height: 1.15; color: var(--hb-title); }
.hb-event__full { margin: .15rem 0 0; font-size: .8rem; font-weight: 700; color: var(--hb-muted); }
.hb-event__band { margin: 1.1rem 1.1rem 0; opacity: .7; }
.hb-event__rows { display: grid; gap: .75rem; margin: 1rem 0 0; padding: 0 1.1rem; list-style: none; font-size: .9rem; }
.hb-event__rows li { display: flex; align-items: flex-start; gap: .7rem; }
.hb-event__rows .hb-icon { width: 2.1rem; height: 2.1rem; padding: .45rem; border-radius: 50%; color: var(--inv-deep); background: color-mix(in srgb, var(--inv-leaf) 38%, #fff); }
.hb-event__rows li > span { padding-top: .3rem; }
.hb-event__venue { display: block; font-weight: 800; }
.hb-event__address { display: block; font-size: .85rem; color: var(--hb-muted); }
.hb-event .inv-maps { margin: 1.15rem 1.1rem 0; text-align: center; }
.hb-event .inv-maps .inv-button { width: 100%; font-weight: 700; }
.hb-event .inv-maps__frame { height: 190px; border-radius: 14px; }

/* countdown: the bedug with the date on its skin, the countdown as cream tiles with cut corners */
.hb-bedug { position: relative; width: min(19rem, 86vw); margin: -.4rem auto 2.2rem; }
.hb-bedug__art { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 22px 22px rgb(0 0 0 / .4)); }
.hb-bedug__leg { fill: none; stroke: #6b4220; stroke-width: 7; stroke-linecap: round; }
.hb-bedug__base { fill: none; stroke: #4c2c14; stroke-width: 6; stroke-linecap: round; }
.hb-bedug__ring { fill: none; stroke: var(--inv-shine); stroke-opacity: .6; stroke-width: 3; }
.hb-bedug__shine { fill: none; stroke: #fff; stroke-opacity: .18; stroke-width: 5; stroke-linecap: round; }
.hb-bedug__pegs { fill: var(--inv-shine); }
.hb-bedug__stick { fill: none; stroke: #8a5a2b; stroke-width: 6; stroke-linecap: round; }
.hb-bedug__knob { fill: var(--inv-accent); }
.hb-bedug__waves { fill: none; stroke: var(--inv-shine); stroke-width: 3; stroke-linecap: round; }
/* the date on the skin: the skin's centre is at 33.8% / 48% of the drawing */
.hb-bedug__date {
    position: absolute; left: 33.8%; top: 48%; width: 40%; translate: -50% -50%; text-align: center; color: var(--inv-deep);
}
.hb-bedug__date p { margin: 0; }
.hb-bedug__weekday { font-size: .64rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--hb-accent-ink); }
.hb-bedug__day { font-family: var(--hb-display); font-weight: 700; font-size: 3.5rem; line-height: .95; color: var(--hb-title); }
.hb-bedug__month { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hb-bedug__time { margin-top: .15rem !important; font-size: .7rem; font-weight: 700; color: var(--hb-muted); }
.hb-countdown .inv-countdown { gap: clamp(.45rem, 2.4vw, .75rem); }
.hb-countdown .inv-countdown__item {
    --hb-cut: 12px;
    display: grid; place-content: center; width: clamp(4rem, 18.5vw, 4.6rem); min-width: 0; aspect-ratio: 1; padding: .3rem 0 .2rem;
    color: var(--inv-text); background: linear-gradient(180deg, #fffdf6, var(--hb-paper));
    clip-path: polygon(var(--hb-cut) 0, calc(100% - var(--hb-cut)) 0, 100% var(--hb-cut), 100% calc(100% - var(--hb-cut)), calc(100% - var(--hb-cut)) 100%, var(--hb-cut) 100%, 0 calc(100% - var(--hb-cut)), 0 var(--hb-cut));
    box-shadow: inset 0 0 0 2px var(--inv-shine), inset 0 0 0 4px #fffdf6, inset 0 0 0 5px color-mix(in srgb, var(--inv-gold) 55%, transparent);
}
.hb-countdown .inv-countdown__value { font-variant-numeric: lining-nums tabular-nums; font-family: var(--hb-display); font-weight: 700; font-size: 1.75rem; line-height: 1.05; color: var(--hb-title); }
.hb-countdown .inv-countdown__label { margin-top: .1rem; font-size: .55rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--hb-accent-ink); opacity: 1; }
.hb-countdown .inv-countdown__done { font-family: var(--hb-serif); font-size: 1.4rem; font-style: italic; color: var(--inv-shine); }
.hb-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 2rem; }
.hb-countdown .inv-countdown__actions .inv-button {
    width: min(100%, 17rem); min-height: 2.75rem; padding: .6rem 1rem; font-size: .84rem; font-weight: 700;
    color: var(--inv-background); background: color-mix(in srgb, var(--inv-background) 10%, transparent);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-background) 55%, transparent);
}
.hb-countdown .inv-countdown__actions .inv-button:first-child { color: var(--inv-deep); background: var(--inv-shine); box-shadow: none; }

/* rundown: a gold cord down the left with one lantern per step, the step on a cream card beside it */
.hb-lanterns { position: relative; max-width: 25rem; margin: 0 auto; padding: 0 0 0 .2rem; list-style: none; text-align: left; }
.hb-lanterns::before {
    content: ''; position: absolute; top: -1.2rem; bottom: 1.2rem; left: 1.55rem; width: 2px; border-radius: 2px;
    background: linear-gradient(180deg, transparent, var(--inv-gold) 1.2rem, var(--inv-gold) calc(100% - 1.5rem), transparent);
}
.hb-lanterns__item { position: relative; display: grid; grid-template-columns: 2.9rem minmax(0, 1fr); align-items: start; gap: .7rem; }
.hb-lanterns__item + .hb-lanterns__item { margin-top: .85rem; }
.hb-lanterns__lamp { position: relative; width: 1.85rem; height: auto; margin: 0 0 0 .55rem; overflow: visible; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--inv-shine) 75%, transparent)); transform-origin: 50% 0; }
.hb-lanterns__card {
    padding: .7rem .95rem .75rem; border-radius: 4px 14px 14px 14px; background: #fffdf8;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-gold) 30%, transparent), 0 12px 20px -16px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.hb-lanterns__item:nth-child(even) .hb-lanterns__card { background: color-mix(in srgb, var(--inv-leaf) 16%, #fffdf8); }
.hb-lanterns__time { display: block; font-family: var(--hb-display); font-weight: 700; font-size: 1.15rem; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--hb-accent-ink); }
.hb-lanterns__card h3 { margin: .15rem 0 0; font-size: .98rem; font-weight: 800; line-height: 1.35; color: var(--inv-text); }
.hb-lanterns__card p { margin: .1rem 0 0; font-size: .84rem; line-height: 1.45; color: var(--hb-muted); }

/* story: framed photos beside the text, alternating sides and tilts; the time on a diamond tag */
.hb-story__list { position: relative; display: grid; gap: 2.6rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.hb-story__item { position: relative; display: grid; grid-template-columns: 44% minmax(0, 1fr); align-items: center; gap: 1.2rem; }
.hb-story__item--flip { grid-template-columns: minmax(0, 1fr) 44%; }
.hb-story__frame {
    --hb-cut: 14px;
    position: relative; margin: 0; padding: 4px; rotate: -3deg; background: linear-gradient(135deg, color-mix(in srgb, #fff 40%, var(--inv-shine)), var(--inv-gold));
    clip-path: polygon(var(--hb-cut) 0, calc(100% - var(--hb-cut)) 0, 100% var(--hb-cut), 100% calc(100% - var(--hb-cut)), calc(100% - var(--hb-cut)) 100%, var(--hb-cut) 100%, 0 calc(100% - var(--hb-cut)), 0 var(--hb-cut));
}
.hb-story__frame img {
    display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 35%;
    clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
}
.hb-story__item--flip .hb-story__frame { order: 2; rotate: 3deg; }
.hb-story__when { position: absolute; z-index: 2; top: -.8rem; left: -.3rem; }
.hb-story__item--flip .hb-story__when { left: auto; right: -.3rem; }
.hb-story__body h3 { margin: 0; font-family: var(--hb-display); font-weight: 600; font-size: 1.35rem; line-height: 1.18; color: #fff; }
.hb-story__body p { margin: .45rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--hb-cream-muted); }
/* a moment without a photo: a translucent card across the full width, the diamond tag on its top edge */
.hb-story__item--text {
    display: block; padding: 1.8rem 1.25rem 1.3rem; border-radius: 16px;
    background: color-mix(in srgb, var(--inv-primary) 35%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-shine) 45%, transparent);
}
.hb-story__item--text .hb-story__when { top: -1rem; left: 1rem; }

/* gallery: cut corners, a fine gold inner line; the first photo tall over two rows */
.hb-gallery .inv-gallery { gap: .7rem; }
.hb-gallery .inv-gallery__item {
    --hb-cut: 12px; position: relative; border-radius: 0;
    clip-path: polygon(var(--hb-cut) 0, calc(100% - var(--hb-cut)) 0, 100% var(--hb-cut), 100% calc(100% - var(--hb-cut)), calc(100% - var(--hb-cut)) 100%, var(--hb-cut) 100%, 0 calc(100% - var(--hb-cut)), 0 var(--hb-cut));
}
.hb-gallery .inv-gallery__item::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--inv-shine) 85%, transparent), inset 0 0 0 5px color-mix(in srgb, #fff 55%, transparent);
}
.hb-gallery .inv-gallery__item:first-child { grid-row: span 2; aspect-ratio: auto; }

/* live streaming: a night-sky card with a crescent, the play button in a star, a gold button */
.hb-stream__card {
    --hb-cut: 18px;
    position: relative; max-width: 22rem; margin: 0 auto; padding: 2rem 1.3rem 2.2rem; color: var(--inv-background);
    background:
        radial-gradient(70% 50% at 85% 0%, color-mix(in srgb, var(--inv-shine) 22%, transparent), transparent 70%),
        linear-gradient(170deg, var(--inv-primary), var(--inv-deep) 75%);
    clip-path: polygon(var(--hb-cut) 0, calc(100% - var(--hb-cut)) 0, 100% var(--hb-cut), 100% calc(100% - var(--hb-cut)), calc(100% - var(--hb-cut)) 100%, var(--hb-cut) 100%, 0 calc(100% - var(--hb-cut)), 0 var(--hb-cut));
}
.hb-stream__moon { position: absolute; top: .9rem; right: 1rem; width: 2.8rem; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--inv-shine) 60%, transparent)); }
.hb-stream__icon { position: relative; display: grid; place-items: center; width: 4rem; height: 4rem; margin: 0 auto .7rem; color: #fff; }
.hb-stream__star { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--inv-accent); filter: drop-shadow(0 0 0 2px var(--inv-shine)); }
.hb-stream__icon .hb-icon { position: relative; width: 1.7rem; height: 1.7rem; }
.hb-stream__title { margin: 0 0 .3rem; font-family: var(--hb-display); font-weight: 700; font-size: 1.75rem; line-height: 1.1; color: #fff; }
.hb-stream__card p { margin: 0 auto; max-width: 28ch; font-size: .88rem; color: var(--hb-cream-muted); }
.hb-stream__card .hb-stream__note { margin-top: .4rem; font-weight: 700; color: var(--inv-shine); }
.hb-stream__button { width: min(100%, 15rem); min-height: 2.75rem; margin-top: 1.2rem; color: var(--inv-deep) !important; background: var(--inv-shine) !important; font-weight: 800; }
.hb-stream__band { position: absolute; left: 0; right: 0; bottom: 0; opacity: .8; }

/* RSVP: a cream card with cut corners, a primary head with a band of stars, the form below */
.hb-rsvp__wrap { max-width: 25rem; margin: 0 auto; filter: drop-shadow(0 22px 26px rgb(0 0 0 / .45)); }
.hb-rsvp__card {
    --hb-cut: 18px;
    background: linear-gradient(180deg, #fffdf6, var(--hb-paper));
    clip-path: polygon(var(--hb-cut) 0, calc(100% - var(--hb-cut)) 0, 100% var(--hb-cut), 100% calc(100% - var(--hb-cut)), calc(100% - var(--hb-cut)) 100%, var(--hb-cut) 100%, 0 calc(100% - var(--hb-cut)), 0 var(--hb-cut));
}
.hb-rsvp__head {
    position: relative; padding: 1.5rem 1.2rem 1.1rem; color: #fff;
    background: radial-gradient(80% 140% at 100% 0%, color-mix(in srgb, var(--inv-shine) 30%, transparent), transparent 60%), linear-gradient(120deg, var(--inv-primary), var(--inv-deep));
}
.hb-rsvp__band { position: absolute; left: 0; right: 0; bottom: 0; }
.hb-rsvp__label { margin: 0; font-size: .64rem; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; color: var(--inv-shine); }
.hb-rsvp__for { margin: .15rem 0 .2rem; font-family: var(--hb-display); font-weight: 700; font-size: 1.45rem; line-height: 1.15; overflow-wrap: anywhere; }
.hb-rsvp__body { position: relative; padding: 1.5rem 1.15rem 1.4rem; color: var(--inv-text); }
.hb-rsvp__intro { margin: 0 auto 1.1rem; max-width: 30ch; font-size: .9rem; color: var(--hb-muted); }
.hb-rsvp__sent { margin-bottom: 1rem; }
.hb-rsvp__line { margin: 0; font-size: .9rem; color: var(--hb-muted); }
.hb-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .84rem; font-weight: 700; color: var(--hb-accent-ink); }
/* the ketupat stamp: a diamond seal with a double ring, the woven ketupat and the answer */
.hb-stamp {
    position: relative; display: grid; place-items: center; width: 8.4rem; height: 8.4rem; margin: .4rem auto .8rem; color: var(--hb-accent-ink);
}
.hb-stamp::before, .hb-stamp::after {
    content: ''; position: absolute; inset: 0; rotate: 45deg; scale: .72; border-radius: 10px;
    border: 3px solid currentColor;
}
.hb-stamp::after { inset: 7px; border-width: 1.5px; border-style: dashed; }
.hb-stamp__k { position: relative; width: 2.7rem; height: auto; margin-top: -.6rem; overflow: visible; }
.hb-stamp__text {
    position: absolute; left: 50%; top: 64%; translate: -50% 0; padding: .14rem .6rem; rotate: -8deg; white-space: nowrap; border-radius: 4px;
    font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--hb-accent-ink);
    box-shadow: 0 0 0 2px var(--hb-paper), 0 0 0 3.5px var(--hb-accent-ink);
}

/* gift ("Iuran & donasi"): amplop lebaran — green envelopes with a flap and a gold star seal; address card below */
.hb-gift__intro { color: var(--hb-cream-muted); }
.hb-gift__treasurer { display: inline-flex !important; align-items: center; gap: .5rem; padding: .35rem .9rem; border-radius: 999px; font-size: .84rem; font-weight: 700; color: var(--inv-deep); background: var(--inv-shine); }
.hb-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1.4rem; }
.hb-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.hb-gift .inv-gift__account:not(.inv-gift__address) {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; margin: 0;
    padding: 3rem .7rem 1rem; border-radius: 10px; color: var(--inv-background); overflow: hidden;
    background:
        radial-gradient(90% 60% at 50% 100%, color-mix(in srgb, var(--inv-shine) 18%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 85%, #fff), var(--inv-primary));
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-shine) 60%, transparent), 0 18px 28px -18px rgb(0 0 0 / .7);
}
/* the envelope's flap and its seal */
.hb-gift .inv-gift__account:not(.inv-gift__address)::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2.6rem;
    background: linear-gradient(180deg, var(--inv-deep), color-mix(in srgb, var(--inv-deep) 70%, var(--inv-primary)));
    clip-path: polygon(0 0, 100% 0, 100% 15%, 50% 100%, 0 15%);
    filter: drop-shadow(0 2px 0 var(--inv-shine));
}
.hb-gift .inv-gift__account:not(.inv-gift__address)::after {
    content: ''; position: absolute; top: 1.6rem; left: 50%; width: 1.7rem; height: 1.7rem; margin-left: -.85rem;
    background: linear-gradient(135deg, color-mix(in srgb, #fff 45%, var(--inv-shine)), var(--inv-gold));
    clip-path: polygon(50% 0, 64.66% 14.62%, 85.36% 14.64%, 85.38% 35.34%, 100% 50%, 85.38% 64.66%, 85.36% 85.36%, 64.66% 85.38%, 50% 100%, 35.34% 85.38%, 14.64% 85.36%, 14.62% 64.66%, 0 50%, 14.62% 35.34%, 14.64% 14.64%, 35.34% 14.62%);
}
.hb-gift .inv-gift__account p, .hb-gift .inv-gift__address p { margin: 0; }
.hb-gift .inv-gift__account:not(.inv-gift__address) .inv-gift__bank { margin-top: .3rem !important; font-weight: 800; font-size: .85rem; color: #fff; }
.hb-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .4rem; background: #fff; }
.hb-gift .inv-gift__logo img { max-width: 5rem; }
.hb-gift .inv-gift__account:not(.inv-gift__address) .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: #fff;
}
.hb-gift .inv-gift__account:not(.inv-gift__address) .inv-gift__holder { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--hb-cream-muted); overflow-wrap: anywhere; }
.hb-gift .inv-gift__account:not(.inv-gift__address) .inv-button { margin-top: .4rem; min-height: 2.25rem; padding: .35rem .9rem; font-size: .74rem; font-weight: 800; color: var(--inv-deep); background: var(--inv-shine); }
.hb-gift .inv-gift__account.inv-gift__address {
    --hb-cut: 14px;
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; margin: .9rem 0 0; padding: 1.6rem 1rem 1.2rem;
    font-size: .875rem; color: var(--inv-text); background: linear-gradient(180deg, #fffdf6, var(--hb-paper));
    clip-path: polygon(var(--hb-cut) 0, calc(100% - var(--hb-cut)) 0, 100% var(--hb-cut), 100% calc(100% - var(--hb-cut)), calc(100% - var(--hb-cut)) 100%, var(--hb-cut) 100%, 0 calc(100% - var(--hb-cut)), 0 var(--hb-cut));
}
.hb-gift .inv-gift__account.inv-gift__address::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 11px; background: linear-gradient(90deg, var(--inv-gold), var(--inv-shine), var(--inv-gold));
    -webkit-mask: var(--hb-band-tile) center / auto 100% repeat-x; mask: var(--hb-band-tile) center / auto 100% repeat-x;
}
.hb-gift .inv-gift__address .inv-gift__bank { font-weight: 800; font-size: .85rem; color: var(--hb-title); }
.hb-gift .inv-gift__address .inv-gift__holder { font-size: .72rem; color: var(--hb-muted); }
.hb-gift .inv-gift__address .inv-button { margin-top: .4rem; min-height: 2.25rem; padding: .35rem .9rem; font-size: .74rem; font-weight: 800; }

/* co-hosts ("Panitia"): cream cards with cut corners hung from a small green diamond, two per row */
.hb-cohosts__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem .8rem; max-width: 24rem; margin: 0 auto; padding: .6rem 0 0; list-style: none; }
.hb-cohost {
    --hb-cut: 12px;
    position: relative; padding: 1.25rem .7rem .95rem; text-align: center; background: #fffdf8;
    clip-path: polygon(var(--hb-cut) 0, calc(100% - var(--hb-cut)) 0, 100% var(--hb-cut), 100% calc(100% - var(--hb-cut)), calc(100% - var(--hb-cut)) 100%, var(--hb-cut) 100%, 0 calc(100% - var(--hb-cut)), 0 var(--hb-cut));
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-gold) 40%, transparent), inset 0 -5px 0 var(--inv-leaf);
}
.hb-cohost__pin {
    position: absolute; top: .45rem; left: 50%; width: .7rem; height: .7rem; margin-left: -.35rem; rotate: 45deg; background: var(--inv-accent);
}
.hb-cohosts__list > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .4rem); }
.hb-cohost p { margin: 0; }
.hb-cohost__role { font-size: .62rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--hb-accent-ink); }
.hb-cohost__name { margin-top: .25rem !important; font-family: var(--hb-display); font-weight: 600; font-size: 1.05rem; line-height: 1.25; color: var(--hb-title); overflow-wrap: anywhere; }

/* contacts: cream rows with the initial on a small star, the name and role, a WhatsApp button */
.hb-contacts__list { display: grid; gap: .75rem; max-width: 24rem; margin: 0 auto; }
.hb-contact {
    display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .55rem .6rem .55rem .55rem; border-radius: 18px;
    color: var(--inv-text); background: #fffdf6; text-align: left; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-shine) 55%, transparent), 0 18px 26px -18px rgb(0 0 0 / .6);
}
.hb-contact__avatar { --star-w: 3.2rem; }
.hb-contact__avatar .hb-star__big { font-size: 1.25rem; }
.hb-contact p { margin: 0; }
.hb-contact__name { font-weight: 800; font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; }
.hb-contact__role { font-size: .78rem; color: var(--hb-muted); }
.hb-contact__phone { font-size: .85rem; }
.hb-contact__button { min-height: 2.5rem; padding: .45rem .95rem; font-size: .8rem; font-weight: 800; }
.hb-contact__button .hb-icon { width: 1.05rem; height: 1.05rem; }

/* health protocol: white chips with a check in a green circle */
.hb-protocol__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.hb-protocol__list li {
    display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem .4rem .45rem; border-radius: 999px; font-size: .84rem; font-weight: 700;
    background: #fff; box-shadow: inset 0 0 0 1px var(--hb-ring);
}
.hb-protocol__list .hb-icon { width: 1.5rem; height: 1.5rem; padding: .25rem; border-radius: 50%; color: var(--inv-deep); background: var(--inv-leaf); }
.hb-protocol__note { font-size: .88rem; color: var(--hb-muted); }

/* vendors: a cream card of rows split by dotted gold lines */
.hb-vendors { padding-bottom: 4.6rem; }
.hb-vendors__list { max-width: 24rem; margin: 0 auto; padding: .3rem 1.15rem; list-style: none; border-radius: 18px; background: #fffdf8; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-gold) 30%, transparent), var(--hb-drop); }
.hb-vendor { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem 0; text-align: left; border-bottom: 2px dotted color-mix(in srgb, var(--inv-gold) 45%, transparent); }
.hb-vendor:last-child { border-bottom: 0; }
.hb-vendor__text { display: flex; flex-direction: column; min-width: 0; }
.hb-vendor__role { font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--hb-accent-ink); }
.hb-vendor__name { font-family: var(--hb-display); font-weight: 600; font-size: 1.12rem; line-height: 1.25; color: var(--inv-text); overflow-wrap: anywhere; }
.hb-vendor__link {
    display: inline-flex; align-items: center; gap: .3rem; flex: none; min-height: 2.2rem; padding: .3rem .7rem; border-radius: 999px;
    font-size: .74rem; font-weight: 700; text-decoration: none; color: var(--inv-deep); background: color-mix(in srgb, var(--inv-leaf) 35%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hb-leaf-deep) 45%, transparent);
}
.hb-vendor__link .hb-icon { width: .95rem; height: .95rem; }

/* closing: the full photo fading into the deep colour, a garland with the crescent, the thanks, the signature */
.hb-closing { padding: 3rem 1.6rem 1.5rem; }
.hb-closing--photo { padding-top: 0; }
.hb-closing__photo { position: relative; z-index: -1; height: min(56svh, 27rem); margin: 0 -1.6rem; overflow: hidden; }
.hb-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 30%; --inv-parallax: 30px; }
.hb-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 36%, color-mix(in srgb, var(--inv-deep) 55%, transparent) 64%, var(--inv-deep) 97%);
}
.hb-closing__body { position: relative; }
.hb-closing--photo .hb-closing__body { margin-top: -6.6rem; }
.hb-closing__garland { position: relative; width: min(100%, 17rem); height: 4.9rem; margin: 0 auto .3rem; }
.hb-closing__cord { position: absolute; top: 0; left: 0; width: 100%; height: 1.6rem; overflow: visible; }
.hb-closing__k { --k-w: 1.4rem; }
.hb-closing__k--1 { left: calc(7% - var(--k-w) / 2); top: calc(1.6rem * .28); --hang: 1.6rem; }
.hb-closing__k--2 { left: calc(20% - var(--k-w) / 2); top: calc(1.6rem * .5); --hang: .5rem; --k-w: 1.15rem; }
.hb-closing__k--3 { left: calc(80% - var(--k-w) / 2); top: calc(1.6rem * .5); --hang: .5rem; --k-w: 1.15rem; }
.hb-closing__k--4 { left: calc(93% - var(--k-w) / 2); top: calc(1.6rem * .28); --hang: 1.6rem; }
.hb-closing__moon { position: absolute; left: 50%; top: calc(1.6rem * .69); width: 2.5rem; margin-left: -1.25rem; padding-top: .9rem; transform-origin: 50% 0; }
.hb-closing__moon::before { content: ''; position: absolute; top: 0; left: 50%; width: 1.5px; height: 1.1rem; margin-left: -.75px; background: var(--inv-shine); }
.hb-closing__moon svg { display: block; width: 100%; overflow: visible; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--inv-shine) 65%, transparent)); }
.hb-closing__eyebrow { margin: 0 0 .3rem; font-size: .7rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-shine); }
.hb-closing__title { margin: 0 0 .7rem; font-family: var(--hb-display); font-weight: 700; font-size: clamp(1.9rem, 8.5vw, 2.4rem); line-height: 1.05; color: #fff; }
.hb-closing__title em { font-style: normal; color: var(--inv-shine); }
.hb-closing__message { margin: 0 auto; max-width: 32ch; font-size: .92rem; line-height: 1.6; color: var(--hb-cream-muted); }
.hb-closing__salam { margin: .8rem auto 0; max-width: 30ch; font-family: var(--hb-serif); font-size: 1.2rem; font-style: italic; line-height: 1.35; color: var(--inv-shine); }
.hb-closing__signature { margin: .5rem auto 0; max-width: 30ch; font-size: .86rem; color: var(--hb-cream-muted); }
.hb-closing__sign { max-width: 19rem; margin: 1rem auto 0; }
.hb-closing__mono { --star-w: 3.4rem; --star-fill: var(--inv-primary); margin-bottom: .5rem; }
.hb-closing__mono .hb-star__big { font-size: 1.2rem; }
.hb-closing__mono--long .hb-star__big { max-width: 2.5rem; font-size: .72rem; line-height: 1.1; white-space: normal; }
.hb-closing__name { margin: .5rem 0 0; font-family: var(--hb-display); font-weight: 700; font-size: 1.25rem; line-height: 1.2; color: #fff; overflow-wrap: anywhere; }
.hb-closing__batch { margin: .2rem 0 .55rem; font-size: .68rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-leaf); }
.hb-closing__sign .hb-band:last-child { margin-top: .55rem; }

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

/* the three answers as big cards with icons (the radio dot is hidden but still focusable) */
.hb-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.hb-rsvp .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.hb-rsvp .inv-form__choices label {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .45rem;
    min-height: 5.4rem; padding: .85rem .3rem .75rem; border-radius: 14px; cursor: pointer; text-align: center;
    font-size: .84rem; font-weight: 700; line-height: 1.2; color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-primary) 22%, transparent);
    transition: background-color .25s ease, color .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.hb-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* icon: a tinted circle (::before) with a check, a cross or a question mark on it (::after, a mask in the text colour) */
.hb-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-leaf) 40%, #fff);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease;
}
.hb-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(--hb-choice-icon) center / contain no-repeat; mask: var(--hb-choice-icon) center / contain no-repeat;
}
.hb-rsvp .inv-form__choices label:nth-of-type(1) {
    --hb-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");
}
.hb-rsvp .inv-form__choices label:nth-of-type(2) {
    --hb-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");
}
.hb-rsvp .inv-form__choices label:nth-of-type(3) {
    --hb-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");
}
.hb-rsvp .inv-form__choices label:has(input:checked) {
    color: #fff; background: var(--inv-primary); transform: translateY(-3px);
    box-shadow: 0 0 0 3px var(--inv-shine), 0 12px 24px -12px color-mix(in srgb, var(--inv-primary) 80%, transparent);
}
.hb-rsvp .inv-form__choices label:has(input:checked)::before { background-color: rgb(255 255 255 / .2); transform: scale(1.1); }
.hb-rsvp .inv-form__choices label:has(input:checked)::after { color: #fff; }
.hb-rsvp .inv-form__choices label:has(input:focus-visible) { outline: 2px solid var(--inv-accent); outline-offset: 3px; }

/* wishes: the form on a cream card with a band of stars, the wishes as cards with a green edge in a scroll box */
.hb-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.hb-wishes .inv-form {
    --hb-cut: 16px;
    position: relative; padding: 1.8rem 1.15rem 1.3rem; background: #fffdf8;
    clip-path: polygon(var(--hb-cut) 0, calc(100% - var(--hb-cut)) 0, 100% var(--hb-cut), 100% calc(100% - var(--hb-cut)), calc(100% - var(--hb-cut)) 100%, var(--hb-cut) 100%, 0 calc(100% - var(--hb-cut)), 0 var(--hb-cut));
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-gold) 35%, transparent);
}
.hb-wishes .inv-form::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 12px; background: var(--inv-primary);
    -webkit-mask: var(--hb-band-tile) center / auto 100% repeat-x; mask: var(--hb-band-tile) center / auto 100% repeat-x;
}
.hb-wishes .inv-wishes__list { margin-top: 1.5rem; }
.hb-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .55rem; border-radius: 16px; background: color-mix(in srgb, #fff 45%, transparent); box-shadow: inset 0 0 0 1px var(--hb-ring);
}
.hb-wishes .inv-wish { position: relative; padding: .75rem .9rem .75rem 1.1rem; border-radius: 4px 12px 12px 4px; background: #fff; text-align: left; box-shadow: 0 2px 10px rgb(0 0 0 / .05); border-left: 4px solid var(--inv-leaf); }
.hb-wishes .inv-wish::before { content: ''; position: absolute; top: .95rem; left: -.42rem; width: .55rem; height: .55rem; rotate: 45deg; background: var(--inv-gold); }
.hb-wishes .inv-wish__name { font-weight: 800; color: var(--hb-title); }
.hb-wishes .inv-wish__message { font-size: .88rem; line-height: 1.5; }
.hb-wishes .inv-wish__time { font-size: .72rem; color: var(--hb-muted); opacity: 1; }

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

/* the room under the page (for the fixed menu and music button) continues the closing's deep colour; with the
   platform credit present, the credit's own measured colour wins */
.hb-main ~ .inv-music__space { background: var(--inv-deep); }
.hb-main ~ .hb-branding ~ .inv-music__space { background: var(--inv-end-bg, var(--inv-deep)); }

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

/* short phones: the photo and type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .hb-cover { --ph-w: min(56vw, 14rem, calc(31svh * .8)); padding-top: 1.1rem; padding-bottom: 1.6rem; }
    .hb-cover__art { margin-bottom: 1rem; }
    .hb-cover__name { font-size: clamp(1.6rem, 7.4vw, 2.05rem); }
    .hb-cover__quote { font-size: .98rem; }
    .hb-cover__guest { margin-top: .65rem; }
    .hb-cover__open { margin-top: .85rem; }
}
@media (max-height: 660px) {
    .hb-cover { --ph-w: min(52vw, calc(30svh * .8)); padding-top: .9rem; padding-bottom: 1.3rem; }
    .hb-cover__title { margin-bottom: .3rem; font-size: .64rem; }
    .hb-cover__art { margin-bottom: .85rem; }
    .hb-cover__name { font-size: clamp(1.45rem, 6.8vw, 1.85rem); }
    .hb-cover__batch { margin-top: .4rem; }
    .hb-cover__date { margin-top: .35rem; font-size: .84rem; }
    .hb-cover__quote { font-size: .9rem; line-height: 1.3; }
    .hb-cover__guest { margin-top: .55rem; padding: .85rem .9rem .6rem; }
    .hb-guest__name { font-size: 1.18rem; }
    .hb-cover__open { min-height: 2.75rem; margin-top: .75rem; padding: .6rem 1.6rem; }
}
/* very short screens (in-app browsers): a smaller photo and quote, so everything fits */
@media (max-height: 600px) {
    .hb-cover { --ph-w: min(46vw, calc(24svh * .8)); padding-top: .6rem; padding-bottom: 1.1rem; }
    .hb-cover__art { margin-bottom: .7rem; }
    .hb-cover__name { font-size: 1.4rem; }
    .hb-cover__batch { margin-top: .3rem; }
    .hb-cover__quote { font-size: .84rem; line-height: 1.26; }
    .hb-cover__guest { margin-top: .45rem; padding: .75rem .8rem .5rem; }
    .hb-guest__name { font-size: 1.1rem; }
    .hb-cover__open { margin-top: .6rem; }
}

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

/* ---------- 9. motion ---------- */
@keyframes hb-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hb-zoom-out { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes hb-rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
/* a hanging ornament drops on its string and settles with one small swing */
@keyframes hb-drop { 0% { opacity: 0; transform: translateY(-34px) rotate(0); } 55% { opacity: 1; transform: translateY(0) rotate(5deg); } 78% { transform: rotate(-2.5deg); } 100% { opacity: 1; transform: rotate(0); } }
/* the very slow sway afterwards (±2°) */
@keyframes hb-sway { 0%, 100% { rotate: -1.8deg; } 50% { rotate: 1.8deg; } }
@keyframes hb-pop { 0% { opacity: 0; scale: .4; } 70% { opacity: 1; scale: 1.12; } 100% { opacity: 1; scale: 1; } }
@keyframes hb-stamp { 0% { opacity: 0; scale: 1.8; } 70% { opacity: 1; scale: .94; } 100% { opacity: 1; scale: 1; } }
@keyframes hb-glow { 0% { filter: drop-shadow(0 0 0 transparent); } 100% { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--inv-shine) 75%, transparent)); } }
@keyframes hb-beat { 0% { opacity: 0; scale: .8; } 40% { opacity: 1; scale: 1.08; } 100% { opacity: 1; scale: 1; } }

/* cover (≤ 2.5 s, once): the cord draws (0–.7 s), the ketupat drop in on their strings (.3–1.5 s), the crescent
   fades in with its glow (.5–1.2 s), the frame rises while its photo settles from a slight zoom (0–1.1 s), the
   seal pops (1.1 s); the text follows through its inv-enter delays (.95–1.4 s + .6 s); then a very slow sway */
html.inv-anim .hb-cover__garland { animation: hb-fade .6s ease-out both; }
html.inv-anim .hb-cover__frame { animation: hb-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .hb-cover__frame .hb-frame__photo { animation: hb-zoom-out 1.1s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .hb-cover__k { animation: hb-drop 1.1s cubic-bezier(.3, .7, .4, 1) both, hb-sway 6s ease-in-out 1.6s infinite; }
html.inv-anim .hb-cover__k--1 { animation-delay: .3s, 1.6s; }
html.inv-anim .hb-cover__k--2 { animation-delay: .45s, 2.2s; }
html.inv-anim .hb-cover__k--3 { animation-delay: .4s, 1.9s; }
html.inv-anim .hb-cover__k--4 { animation-delay: .55s, 2.5s; }
html.inv-anim .hb-cover__moon { animation: hb-drop 1s cubic-bezier(.3, .7, .4, 1) .5s both; }
html.inv-anim .hb-cover__seal { animation: hb-pop .5s cubic-bezier(.34, 1.56, .64, 1) 1.1s both; }

/* section ornaments: the hands draw themselves once; ketupat sway slowly; lanterns light up one by one */
html.inv-anim .hb-draw .hb-draw__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.inv-anim .hb-draw .hb-hands__spark { opacity: 0; }
html.inv-anim :is(.is-revealed .hb-draw, .hb-draw.is-revealed) .hb-draw__line { animation: hb-draw 1.5s ease-out .2s both; }
html.inv-anim :is(.is-revealed .hb-draw, .hb-draw.is-revealed) .hb-hands__spark { animation: hb-pop .5s cubic-bezier(.34, 1.56, .64, 1) 1.5s both; }
html.inv-anim :is(.hb-organizer__k, .hb-closing__k) { animation: hb-sway 6s ease-in-out infinite; }
html.inv-anim .hb-organizer__k--2, html.inv-anim .hb-closing__k--2, html.inv-anim .hb-closing__k--4 { animation-duration: 7s; animation-delay: -2s; }
html.inv-anim .hb-lanterns__lamp { filter: none; }
html.inv-anim .is-revealed .hb-lanterns__lamp, html.inv-anim .hb-lanterns__item.is-revealed .hb-lanterns__lamp { animation: hb-glow .8s ease .3s both; }
html.inv-anim .is-revealed .hb-bedug__waves path { animation: hb-beat 1.2s ease-out .6s both; transform-origin: 30px 96px; }
html.inv-anim .is-revealed .hb-bedug__waves path:last-child { animation-delay: .8s; }
html.inv-anim .hb-rsvp__sent .hb-stamp { animation: hb-stamp .55s cubic-bezier(.3, 1.4, .6, 1) both; }

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

/* ---------- intro scene "Salam di Bawah Ketupat" (scene.json, sections/_scene) ---------- */
.hb-scene-sky { position: absolute; inset: 0; }
.hb-scene-sky::before { content: ''; position: absolute; inset: 0; background: var(--inv-shine); opacity: .1;
    -webkit-mask: var(--hb-lattice-tile) center / 44px 44px; mask: var(--hb-lattice-tile) center / 44px 44px; }
.hb-scene-sky__star { position: absolute; height: auto; aspect-ratio: 1; color: var(--inv-shine); opacity: .55; }
html.inv-anim .hb-scene-sky__star { animation: hb-scene-twinkle 2.6s ease-in-out infinite alternate; }
.hb-scene-sky__band { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; }
.hb-scene-cord { overflow: visible; }
.hb-scene-cord path { fill: none; stroke: var(--inv-shine); stroke-width: 1.8; vector-effect: non-scaling-stroke; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .3)); }
.hb-scene-k { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 100%; height: 100%; }
.hb-scene-k::before { content: ''; flex: 1; width: 1.5px; margin-bottom: -2px; background: linear-gradient(180deg, var(--inv-gold), var(--inv-shine)); }
.hb-scene-k .hb-ketupat { flex: none; margin-top: 0; }
.hb-scene-moon { display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; }
.hb-scene-moon::before { content: ''; flex: 1; width: 1.5px; background: linear-gradient(180deg, var(--inv-gold), var(--inv-shine)); }
.hb-scene-moon svg { flex: none; display: block; width: 100%; height: auto; aspect-ratio: 1; margin-top: -8%; overflow: visible;
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--inv-shine) 60%, transparent)); }
.hb-scene-hand, .hb-scene-spark { overflow: visible; }
.hb-scene-hand { color: var(--inv-shine); filter: drop-shadow(0 6px 10px rgb(0 0 0 / .3)); }
.hb-scene-hand path { stroke-width: 2.6; }
.hb-scene-hand .hb-hands__thin { stroke-width: 1.6; }
.hb-scene-hand .hb-hands__palm { fill: color-mix(in srgb, var(--inv-shine) 16%, var(--inv-deep)); }
.hb-scene-spark path { fill: #fff8de; filter: drop-shadow(0 0 6px var(--inv-shine)); }
.hb-scene-maaf { margin: 0; display: grid; place-items: center; height: 100%; font: italic 400 clamp(1.05rem, 5vw, 1.4rem)/1 var(--hb-serif);
    color: color-mix(in srgb, var(--inv-shine) 75%, #fff); text-shadow: 0 2px 8px rgb(0 0 0 / .35); }
@keyframes hb-scene-twinkle { from { opacity: .25; scale: .8; } to { opacity: .75; scale: 1.05; } }
/* the card: a cream tile with cut corners, a gold edge and a band of stars across its top */
body.hb-body .inv-intro--scene .inv-scene__card {
    --hb-cut: 18px;
    top: 48%; width: min(var(--scene-card-w, 74vw), 19rem); aspect-ratio: auto; padding: 2.6rem 1.4rem 1.9rem; isolation: isolate;
    -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    background: linear-gradient(135deg, var(--inv-gold), var(--inv-shine) 50%, var(--inv-gold));
    clip-path: polygon(var(--hb-cut) 0, calc(100% - var(--hb-cut)) 0, 100% var(--hb-cut), 100% calc(100% - var(--hb-cut)), calc(100% - var(--hb-cut)) 100%, var(--hb-cut) 100%, 0 calc(100% - var(--hb-cut)), 0 var(--hb-cut));
    color: var(--inv-text);
}
body.hb-body .inv-intro--scene .inv-scene__card::before { content: ''; position: absolute; inset: 3px; z-index: -1; --hb-cut: 16.5px;
    clip-path: polygon(var(--hb-cut) 0, calc(100% - var(--hb-cut)) 0, 100% var(--hb-cut), 100% calc(100% - var(--hb-cut)), calc(100% - var(--hb-cut)) 100%, var(--hb-cut) 100%, 0 calc(100% - var(--hb-cut)), 0 var(--hb-cut));
    background: radial-gradient(90% 50% at 50% 0%, color-mix(in srgb, var(--inv-shine) 22%, transparent), transparent 70%), var(--hb-paper); }
body.hb-body .inv-intro--scene .inv-scene__card::after { content: ''; position: absolute; left: 1.4rem; right: 1.4rem; top: .9rem; height: 12px;
    background: linear-gradient(90deg, var(--inv-gold), var(--inv-shine) 50%, var(--inv-gold));
    -webkit-mask: var(--hb-band-tile) center / auto 100% repeat-x; mask: var(--hb-band-tile) center / auto 100% repeat-x; }
body.hb-body .inv-scene__card .inv-intro__label { margin-bottom: .5rem; font: 800 .64rem/1.4 var(--hb-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--hb-accent-ink); }
body.hb-body .inv-scene__card .inv-intro__names { font-family: var(--hb-display) !important; font-weight: 700; font-size: clamp(1.6rem, 7.4vw, 2.2rem); line-height: 1.12; color: var(--hb-title); text-wrap: balance; }
body.hb-body .inv-scene__card .inv-intro__rule { width: 6rem; margin-block: .75rem .65rem; background: linear-gradient(90deg, transparent, var(--inv-gold) 30%, var(--inv-gold) 70%, transparent); }
body.hb-body .inv-scene__card .inv-intro__date { font: 700 .72rem/1.4 var(--hb-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--hb-title); }
body.hb-body .inv-intro--scene .inv-intro__skip { background: color-mix(in srgb, var(--inv-deep) 60%, transparent); border-color: color-mix(in srgb, var(--inv-shine) 50%, transparent); color: var(--inv-shine); }