/*
 * Template "Haji Mabrur" (Syukuran & Rumah Baru) — "Pulang membawa berkah": a walimatul safar / syukuran for
 * coming home from hajj or umrah, calm and illuminated. A deep night-blue sky (the deep colour), warm ivory and
 * sand grounds, gold (as text only on dark grounds) and a dusty-rose accent.
 * Signature pieces (original inline SVG): pointed arabesque arches with a double gold line (sections/_arch),
 * desert dunes at dawn with a rising sun and a dotted flight path ending in a small plane (sections/_dunes),
 * hanging lanterns (sections/_lantern), a brass water jug with dates (sections/_stilllife), eight-point
 * stars (sections/_star, .hm-seal), an eight-point-star lattice print, a gold geometric band (.hm-band) and a
 * prayer-mat strip (.hm-mat). Mobile-first, one column (~460px) on a night backdrop on wide screens.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (night blue / teal / brown / plum: titles, buttons, medallions)
 *   --inv-accent (dusty rose: italic accents, tags, flaps; text on it via --hm-rose)
 *   --inv-background (warm ivory)   --inv-text   --inv-deep (night bands)   --inv-shine (gold on dark)
 *   --inv-gold (gold lines on light grounds)   --inv-soft (sand tint)
 * Everything else is mixed from those, so a new variant only needs these eight colours.
 *
 * Section tones (set on each section in its partial): .hm-tone--light (ivory), --sand, --deep (night),
 * --rose (a deep dusty-rose band). Light and dark alternate down the page.
 *
 * 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, arch, dunes, lantern,
 *           still life, seal, band, mat) · 4 cover · 5 sections in page order · 6 forms (RSVP, wishes) ·
 *           7 shared components · 8 screen sizes · 9 motion
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Biru Malam Emas" variant (the variant's colours override these) */
    --inv-primary: #1f3d72;
    --inv-accent: #b4606c;
    --inv-background: #f9f2e6;
    --inv-text: #1a2233;
    --inv-deep: #0f1e3c;
    --inv-shine: #e8c47c;
    --inv-gold: #a07a2a;
    --inv-soft: #eedfc5;
    --inv-radius: 16px;

    --hm-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
    --hm-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --hm-col: 460px;
    --hm-paper: color-mix(in srgb, #fff 68%, var(--inv-background));
    --hm-title: color-mix(in srgb, var(--inv-primary) 78%, var(--inv-deep));
    --hm-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    --hm-cream-muted: color-mix(in srgb, var(--inv-background) 86%, transparent);
    --hm-ring: color-mix(in srgb, var(--inv-primary) 18%, transparent);
    --hm-rose: color-mix(in srgb, var(--inv-accent) 78%, var(--inv-deep));
    --hm-rose-text: color-mix(in srgb, var(--inv-accent) 88%, var(--inv-deep));
    --hm-dune: color-mix(in srgb, var(--inv-deep) 84%, var(--inv-accent));
    --hm-gold-grad: linear-gradient(135deg, color-mix(in srgb, var(--inv-shine) 70%, #fff), var(--inv-shine) 45%, color-mix(in srgb, var(--inv-shine) 55%, var(--inv-gold)));
    --hm-drop: 0 22px 40px -22px color-mix(in srgb, var(--inv-deep) 75%, transparent);

    /* the eight-point-star lattice print (a mask, so it takes any colour) */
    --hm-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M22 12L24.93 14.93L29.07 14.93L29.07 19.07L32 22L29.07 24.93L29.07 29.07L24.93 29.07L22 32L19.07 29.07L14.93 29.07L14.93 24.93L12 22L14.93 19.07L14.93 14.93L19.07 14.93Z'/%3E%3Cpath d='M0 0l5 0M0 0l0 5M44 0l-5 0M44 0l0 5M0 44l5 0M0 44l0-5M44 44l-5 0M44 44l0-5'/%3E%3Cpath d='M22 0v6M22 38v6M0 22h6M38 22h6'/%3E%3C/g%3E%3C/svg%3E");
    /* the geometric border band: stars and diamonds between two lines (horizontal and vertical tiles) */
    --hm-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 .7h28M0 13.3h28M0 7h2M12 7h4M26 7h2' stroke='%23000' stroke-width='1.1' fill='none'/%3E%3Cpath d='M7 2.2L8.41 3.61L10.39 3.61L10.39 5.59L11.8 7L10.39 8.41L10.39 10.39L8.41 10.39L7 11.8L5.59 10.39L3.61 10.39L3.61 8.41L2.2 7L3.61 5.59L3.61 3.61L5.59 3.61Z'/%3E%3Cpath d='M21 4.2l2.8 2.8-2.8 2.8-2.8-2.8Z'/%3E%3C/svg%3E");
    --hm-band-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='28' viewBox='0 0 14 28'%3E%3Cpath d='M.7 0v28M13.3 0v28M7 0v2M7 12v4M7 26v2' stroke='%23000' stroke-width='1.1' fill='none'/%3E%3Cpath d='M7 2.2L8.41 3.61L10.39 3.61L10.39 5.59L11.8 7L10.39 8.41L10.39 10.39L8.41 10.39L7 11.8L5.59 10.39L3.61 10.39L3.61 8.41L2.2 7L3.61 5.59L3.61 3.61L5.59 3.61Z'/%3E%3Cpath d='M7 18.2l2.8 2.8-2.8 2.8-2.8-2.8Z'/%3E%3C/svg%3E");
    /* shapes: the eight-point star, the tall pointed arch (5:7), the wide arch (1:1) and a low arch (2:1) */
    --hm-seal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0.2L15.46 3.66L20.34 3.66L20.34 8.54L23.8 12L20.34 15.46L20.34 20.34L15.46 20.34L12 23.8L8.54 20.34L3.66 20.34L3.66 15.46L0.2 12L3.66 8.54L3.66 3.66L8.54 3.66Z'/%3E%3C/svg%3E");
    --hm-arch-tall: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140V52C0 30 22 14 50 0c28 14 50 30 50 52v88Z'/%3E%3C/svg%3E");
    --hm-arch-wide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V42C0 24 22 11 50 0c28 11 50 24 50 42v58Z'/%3E%3C/svg%3E");
    --hm-arch-low: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V40C0 24 40 10 80 0c40 10 80 24 80 40v60Z'/%3E%3C/svg%3E");

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

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

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

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

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

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

.hm-arabic { font-family: 'Amiri', 'Traditional Arabic', serif; line-height: 1.9; color: var(--inv-primary); }
.hm-amp { font-family: var(--hm-display); font-style: italic; font-weight: 600; color: var(--hm-rose-text); }
.hm-star { display: block; fill: currentColor; }

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

/* light: warm ivory with a dawn-rose glow in one corner, a sand glow in the other, and the faint star lattice */
.hm-tone--light {
    background:
        radial-gradient(65% 30% at 100% 0%, color-mix(in srgb, var(--inv-accent) 14%, transparent), transparent 75%),
        radial-gradient(70% 34% at 0% 100%, color-mix(in srgb, var(--inv-soft) 80%, transparent), transparent 75%),
        var(--inv-background);
}
/* sand: a warm wash of the sand colour */
.hm-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) 50%, var(--inv-background)));
}
.hm-tone--light::before, .hm-tone--sand::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-gold); opacity: .1;
    -webkit-mask: var(--hm-lattice) center top / 44px 44px repeat; mask: var(--hm-lattice) center top / 44px 44px repeat;
}

/* deep: the night — a glow of the primary up top, a faint dawn rose low, the lattice in gold */
.hm-tone--deep {
    color: var(--inv-background);
    background:
        radial-gradient(90% 45% at 15% 0%, color-mix(in srgb, var(--inv-primary) 85%, transparent), transparent 75%),
        radial-gradient(80% 32% at 85% 100%, color-mix(in srgb, var(--inv-accent) 26%, transparent), transparent 75%),
        var(--inv-deep);
}
.hm-tone--deep::before, .hm-tone--rose::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-shine); opacity: .08;
    -webkit-mask: var(--hm-lattice) center top / 44px 44px repeat; mask: var(--hm-lattice) center top / 44px 44px repeat;
}
.hm-tone--deep a:not(.inv-button) { color: var(--inv-shine); }
.hm-tone--deep .hm-arabic { color: var(--inv-shine); }

/* rose: a deep dusty-rose band (white text keeps ≥ 4.5:1) */
.hm-tone--rose {
    color: #fff;
    background:
        radial-gradient(80% 50% 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) 45%, transparent), transparent 75%),
        var(--hm-rose);
}

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

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

/* section heading: a star + letter-spaced eyebrow + star, a serif title (last part italic), an arabesque rule */
.hm-heading { margin: 0 0 2.1rem; }
.hm-heading--left { text-align: left; }
.hm-heading__eyebrow {
    display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .5rem;
    font-size: .7rem; font-weight: 600; line-height: 1.2; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-primary);
}
.hm-heading__star { width: .62rem; height: .62rem; flex: none; color: var(--hm-rose-text); }
.hm-heading__title {
    margin: 0; font-family: var(--hm-display); font-size: 2.6rem; font-weight: 600; line-height: 1.04;
    letter-spacing: -.005em; color: var(--hm-title); text-wrap: balance;
}
.hm-heading__title em { font-style: italic; font-weight: 500; color: var(--hm-rose-text); }
.hm-heading__rule { display: block; width: 9.5rem; height: .85rem; margin: .8rem auto 0; color: var(--inv-gold); overflow: visible; }
.hm-heading--left .hm-heading__rule { margin-left: 0; }
.hm-heading__rule .hm-line { stroke-width: 1.3; }
.hm-heading__rule-star { fill: currentColor; }
.hm-tone--deep .hm-heading__eyebrow { color: var(--inv-shine); }
.hm-tone--deep .hm-heading__star { color: var(--inv-shine); }
.hm-tone--deep .hm-heading__title { color: #fff; }
.hm-tone--deep .hm-heading__title em { color: var(--inv-shine); }
.hm-tone--deep .hm-heading__rule { color: var(--inv-shine); }
.hm-tone--rose .hm-heading__eyebrow { color: #fff; }
.hm-tone--rose .hm-heading__star { color: var(--inv-shine); }
.hm-tone--rose .hm-heading__title { color: #fff; }
.hm-tone--rose .hm-heading__title em { color: var(--inv-shine); }
.hm-tone--rose .hm-heading__rule { color: var(--inv-shine); }

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

/* the gold geometric band along the top edge of a deep section */
.hm-band {
    position: absolute; left: 0; right: 0; top: 0; height: 14px; pointer-events: none;
    background: linear-gradient(90deg, color-mix(in srgb, var(--inv-shine) 55%, transparent), var(--inv-shine) 30% 70%, color-mix(in srgb, var(--inv-shine) 55%, transparent));
    opacity: .85;
    -webkit-mask: var(--hm-band) center / 28px 14px repeat-x; mask: var(--hm-band) center / 28px 14px repeat-x;
}

/* the pointed arch photo frame (sections/_arch): a masked window, a double gold line, a star finial, a plinth;
   --arch-w sets the size, --arch-pos the crop */
.hm-arch {
    --arch-w: 12rem; --arch-pos: center 35%; --arch-mask: var(--hm-arch-tall); --arch-ratio: 5 / 7;
    position: relative; isolation: isolate; width: var(--arch-w); margin: 0; flex: none; color: var(--inv-gold);
}
.hm-arch--wide { --arch-mask: var(--hm-arch-wide); --arch-ratio: 1 / 1; }
.hm-arch__line { position: absolute; z-index: -1; top: -13px; left: -10px; right: -10px; bottom: 0; width: calc(100% + 20px); height: calc(100% + 13px); overflow: visible; pointer-events: none; }
.hm-arch__line path { stroke-width: 1.6; }
.hm-arch__line .hm-arch__inner { stroke-width: .9; opacity: .75; }
.hm-arch__finial { position: absolute; left: 50%; top: -1.95rem; width: 1.15rem; height: 1.15rem; margin-left: -.575rem; color: var(--inv-gold); }
.hm-arch__window {
    position: relative; overflow: hidden; aspect-ratio: var(--arch-ratio); background: var(--inv-primary);
    -webkit-mask: var(--arch-mask) center / 100% 100% no-repeat; mask: var(--arch-mask) center / 100% 100% no-repeat;
}
.hm-arch__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--arch-pos); }
.hm-arch__empty {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 22%;
    color: #fff;
    background: linear-gradient(180deg, var(--inv-deep), color-mix(in srgb, var(--inv-primary) 80%, var(--inv-deep)) 32%, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-primary)) 62%, color-mix(in srgb, var(--inv-shine) 80%, var(--inv-accent)) 84%);
}
.hm-arch__moon { position: absolute; left: 22%; top: 24%; width: 15%; fill: var(--inv-shine); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--inv-shine) 70%, transparent)); }
.hm-arch__monogram { position: relative; z-index: 1; font-family: var(--hm-display); font-style: italic; font-weight: 600; line-height: 1; white-space: nowrap; font-size: calc(var(--arch-w) * .17); text-shadow: 0 2px 12px rgb(0 0 0 / .35); }
.hm-arch__dunes { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 42%; }
.hm-arch__plinth {
    position: absolute; z-index: 1; left: -16px; right: -16px; bottom: -7px; height: 7px; border-radius: 2px;
    background: var(--hm-gold-grad);
    box-shadow: 0 8px 14px -8px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.hm-tone--deep .hm-arch, .hm-tone--rose .hm-arch { color: var(--inv-shine); }

/* desert dunes (sections/_dunes): the default colours are for a dawn sky; uses override the stops */
.hm-dunes { display: block; overflow: visible; }
.hm-dunes__halo-core { stop-color: var(--inv-shine); stop-opacity: .85; }
.hm-dunes__halo-edge { stop-color: var(--inv-shine); stop-opacity: 0; }
.hm-dunes__sun { fill: color-mix(in srgb, var(--inv-shine) 70%, #fff); }
.hm-dunes__far-top { stop-color: color-mix(in srgb, var(--inv-accent) 55%, var(--inv-shine)); }
.hm-dunes__far-bottom { stop-color: color-mix(in srgb, var(--inv-accent) 75%, var(--inv-deep)); }
.hm-dunes__mid-top { stop-color: color-mix(in srgb, var(--inv-accent) 60%, var(--inv-deep)); }
.hm-dunes__mid-bottom { stop-color: color-mix(in srgb, var(--inv-accent) 30%, var(--inv-deep)); }
.hm-dunes__near-top { stop-color: color-mix(in srgb, var(--inv-deep) 80%, var(--inv-accent)); }
.hm-dunes__near-bottom { stop-color: var(--hm-dune); }
.hm-dunes__crest { fill: none; stroke: var(--inv-shine); stroke-width: 1; stroke-linecap: round; opacity: .45; }
.hm-dunes__crest--near { opacity: .3; }
.hm-dunes__path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: .1 6; opacity: .75; }
.hm-dunes__plane { fill: #fff; opacity: .92; }

/* the hanging lantern (sections/_lantern) */
.hm-lantern { display: block; overflow: visible; transform-origin: 50% 0; }
.hm-lantern__gold-dark { stop-color: color-mix(in srgb, var(--inv-gold) 75%, var(--inv-deep)); }
.hm-lantern__gold-light { stop-color: color-mix(in srgb, var(--inv-shine) 65%, #fff); }
.hm-lantern__light-core { stop-color: #fff6dc; }
.hm-lantern__light-mid { stop-color: var(--inv-shine); }
.hm-lantern__light-edge { stop-color: color-mix(in srgb, var(--inv-accent) 70%, var(--inv-shine)); }
.hm-lantern__halo-core { stop-color: var(--inv-shine); stop-opacity: .55; }
.hm-lantern__halo-edge { stop-color: var(--inv-shine); stop-opacity: 0; }
.hm-lantern__chain { fill: none; stroke: color-mix(in srgb, var(--inv-shine) 80%, var(--inv-gold)); stroke-width: 1; stroke-dasharray: 2.4 1.4; }
.hm-lantern__ring { fill: none; stroke: color-mix(in srgb, var(--inv-shine) 80%, var(--inv-gold)); stroke-width: 1.2; }
.hm-lantern__bead { fill: var(--inv-accent); }

/* the still life (sections/_stilllife) */
.hm-still { display: block; overflow: visible; }
.hm-still__brass-dark { stop-color: color-mix(in srgb, var(--inv-gold) 70%, #3a2408); }
.hm-still__brass-light { stop-color: color-mix(in srgb, var(--inv-shine) 60%, #fff); }
.hm-still__brass-mid { stop-color: color-mix(in srgb, var(--inv-shine) 70%, var(--inv-gold)); }
.hm-still__shadow { fill: rgb(0 0 0 / .28); }
.hm-still__handle { fill: none; stroke: color-mix(in srgb, var(--inv-gold) 80%, var(--inv-shine)); stroke-width: 3.4; stroke-linecap: round; }
.hm-still__band { fill: none; stroke: color-mix(in srgb, var(--inv-gold) 60%, #3a2408); stroke-width: 1.1; }
.hm-still__dots { fill: none; stroke: color-mix(in srgb, var(--inv-gold) 60%, #3a2408); stroke-width: 2.2; stroke-linecap: round; }
.hm-still__shine { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; opacity: .55; }
.hm-still__plate-top { fill: color-mix(in srgb, var(--inv-shine) 55%, var(--inv-gold)); opacity: .7; }
.hm-still__date-shine { fill: none; stroke: #fff; stroke-width: 1; stroke-linecap: round; opacity: .38; }

/* the eight-point-star seal with the monogram (host, closing) */
.hm-seal {
    position: relative; isolation: isolate; display: grid; place-items: center; width: 4rem; height: 4rem; margin: 0; flex: none;
    filter: drop-shadow(0 10px 12px color-mix(in srgb, var(--inv-deep) 45%, transparent));
}
.hm-seal::before, .hm-seal::after {
    content: ''; position: absolute; z-index: -1; -webkit-mask: var(--hm-seal) center / contain no-repeat; mask: var(--hm-seal) center / contain no-repeat;
}
.hm-seal::before { inset: 0; background: var(--hm-gold-grad); }
.hm-seal::after { inset: 4px; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-primary) 75%, #fff), var(--inv-primary) 45%, var(--inv-deep)); }
.hm-seal span { padding: 0 .2rem; font-family: var(--hm-display); font-weight: 600; font-style: italic; font-size: 1.05rem; line-height: 1; white-space: nowrap; color: #fff; }

/* the prayer-mat strip: a dusty-rose band with gold borders, a star row and a short fringe */
.hm-mat {
    position: relative; width: min(23rem, 100%); height: 2.9rem; margin: 0 auto; border-radius: 3px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--hm-rose) 80%, #fff), var(--hm-rose) 40%, color-mix(in srgb, var(--hm-rose) 80%, #000));
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--hm-rose) 70%, #000), inset 0 0 0 4.5px var(--inv-shine), 0 14px 20px -12px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.hm-mat::before {
    content: ''; position: absolute; inset: 8px 12px; background: var(--inv-shine); opacity: .85;
    -webkit-mask: var(--hm-band) center / 30px 15px repeat-x; mask: var(--hm-band) center / 30px 15px repeat-x;
}
.hm-mat::after {
    content: ''; position: absolute; left: 8px; right: 8px; top: 100%; height: 11px;
    background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-soft) 70%, var(--inv-shine)) 0 1.5px, transparent 1.5px 5px);
    -webkit-mask: linear-gradient(180deg, #000 55%, transparent); mask: linear-gradient(180deg, #000 55%, transparent);
}

/* ---------- 4. cover ---------- */
.hm-cover {
    --arch-cover: min(56vw, 14.5rem, calc(40svh * .714));
    position: fixed; inset: 0; z-index: 30; overflow-x: hidden; overflow-y: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: safe center;
    min-height: 100svh; padding: 2.1rem 1.4rem 1.9rem;
    isolation: isolate; color: #fff;
    background:
        radial-gradient(90% 40% at 50% 0%, color-mix(in srgb, var(--inv-primary) 80%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-deep), color-mix(in srgb, var(--inv-primary) 55%, var(--inv-deep)) 55%, var(--inv-deep));
    transition: opacity .9s ease;
}
/* still stars: a few points of light in the upper sky (no movement) */
.hm-cover__sky {
    position: absolute; inset: 0 0 45%; z-index: -2; pointer-events: none;
    background:
        radial-gradient(1.4px 1.4px at 12% 18%, #fff 90%, transparent),
        radial-gradient(1.1px 1.1px at 27% 8%, #fff 90%, transparent),
        radial-gradient(1.6px 1.6px at 70% 12%, #fff 90%, transparent),
        radial-gradient(1.1px 1.1px at 84% 26%, #fff 90%, transparent),
        radial-gradient(1.2px 1.2px at 92% 6%, #fff 90%, transparent),
        radial-gradient(1px 1px at 40% 22%, #fff 90%, transparent),
        radial-gradient(1.3px 1.3px at 6% 40%, #fff 90%, transparent),
        radial-gradient(1px 1px at 58% 30%, #fff 90%, transparent),
        radial-gradient(1.2px 1.2px at 95% 44%, #fff 90%, transparent);
    opacity: .75;
}
.hm-cover::before {
    content: ''; position: absolute; inset: 0; z-index: -3; pointer-events: none; opacity: .05; background: var(--inv-shine);
    -webkit-mask: var(--hm-lattice) center top / 44px 44px repeat; mask: var(--hm-lattice) center top / 44px 44px repeat;
}
.hm-cover__lantern { position: absolute; top: 0; z-index: 2; width: 2.3rem; height: auto; }
.hm-cover__lantern--left { left: max(4%, calc(50% - 15rem)); }
.hm-cover__lantern--right { right: max(5%, calc(50% - 15rem)); width: 1.85rem; }

.hm-cover__inner { position: relative; 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); }

.hm-cover__title {
    display: inline-flex; align-items: center; gap: .55rem; max-width: calc(100% - 4.6rem); margin: 0 0 2.8rem;
    font-size: .7rem; font-weight: 600; line-height: 1.35; letter-spacing: .2em; text-wrap: balance; text-transform: uppercase; color: var(--inv-shine);
}
.hm-cover__title::before, .hm-cover__title::after { content: ''; flex: none; width: 1.3rem; height: 1px; background: var(--inv-shine); opacity: .8; }

.hm-cover__art { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }
/* the dawn rising behind the arch's lower half */
.hm-cover__art::before {
    content: ''; position: absolute; z-index: -2; left: 50%; bottom: 4%; width: calc(var(--arch-cover) * 2.6); height: calc(var(--arch-cover) * 1.5);
    transform: translateX(-50%); pointer-events: none; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-shine) 75%, #fff) 0%, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-shine)) 38%, color-mix(in srgb, var(--inv-accent) 40%, transparent) 62%, transparent);
    opacity: .9;
}
.hm-arch--cover { --arch-w: var(--arch-cover); --arch-pos: 50% 34%; }
.hm-cover__moon { position: absolute; z-index: 1; top: 4%; left: calc(50% - var(--arch-cover) / 2 - 3.2rem); width: 1.9rem; fill: var(--inv-shine); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--inv-shine) 70%, transparent)); }
.hm-cover__twinkle { position: absolute; z-index: 1; color: var(--inv-shine); }
.hm-cover__twinkle--a { top: 22%; left: calc(50% - var(--arch-cover) / 2 - 1.9rem); width: .55rem; height: .55rem; opacity: .8; }
.hm-cover__twinkle--b { top: 12%; right: calc(50% - var(--arch-cover) / 2 - 2.6rem); width: .8rem; height: .8rem; }
/* the land: the dunes behind the arch's foot, then the near dune as the ground of the lower half
   (its colour spreads sideways and down with a clipped box-shadow, so it never adds scroll height) */
.hm-cover__land { position: absolute; z-index: -1; left: 50%; bottom: 0; width: max(100vw, 30rem); transform: translateX(-50%); pointer-events: none; }
.hm-cover__dunes { width: 100%; height: auto; aspect-ratio: 400 / 120; max-height: calc(var(--arch-cover) * .62); }
.hm-cover__text {
    position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; padding-top: 1.25rem;
    background: var(--hm-dune); box-shadow: 0 0 0 100vmax var(--hm-dune); clip-path: inset(0 -100vmax -100vmax);
}
.hm-cover__name {
    margin: 0; max-width: 100%; font-family: var(--hm-display); font-weight: 600; font-size: clamp(2rem, 8.6vw, 2.5rem); line-height: 1.05;
    color: #fff; overflow-wrap: anywhere; text-wrap: balance;
}
.hm-cover__date { display: inline-flex; align-items: center; gap: .5rem; margin: .45rem 0 0; font-size: .86rem; font-weight: 500; letter-spacing: .08em; color: var(--inv-shine); }
.hm-cover__date-star { width: .5rem; height: .5rem; flex: none; }
.hm-cover__quote {
    max-width: 31ch; margin: .45rem 0 0; font-family: var(--hm-display); font-style: italic; font-weight: 500;
    font-size: 1.08rem; line-height: 1.36; color: var(--hm-cream-muted);
}
.hm-cover__guest {
    width: min(100%, 19rem); margin: .9rem 0 0; padding: .5rem 1rem .6rem; border-radius: 14px;
    background: color-mix(in srgb, #fff 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-shine) 55%, transparent);
}
.hm-cover__guest p { margin: 0; font-size: .62rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-shine); }
.hm-cover__guest-name { display: block; font-family: var(--hm-display); font-weight: 600; font-size: 1.3rem; line-height: 1.22; color: #fff; overflow-wrap: anywhere; }
.hm-cover__open {
    margin-top: 1rem; min-height: 3rem; padding: .7rem 2rem; font-weight: 600; letter-spacing: .04em;
    background: var(--hm-gold-grad); color: var(--inv-deep);
    box-shadow: 0 0 0 3px var(--hm-dune), 0 0 0 4.2px color-mix(in srgb, var(--inv-shine) 70%, transparent), 0 14px 24px -12px rgb(0 0 0 / .6);
}

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

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

/* opening: a lantern glowing over the greeting; the quote on an ivory panel with a pointed top */
.hm-opening { padding: 0 1.6rem 4.6rem; }
.hm-opening__light { position: relative; display: flex; justify-content: center; margin: 0 auto 1rem; }
.hm-opening__light::before {
    content: ''; position: absolute; left: 50%; top: 52%; width: 15rem; height: 15rem; transform: translate(-50%, -50%); border-radius: 50%; z-index: -1;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-shine) 30%, transparent), transparent);
}
.hm-opening__lantern { width: 2.9rem; }
.hm-opening__basmalah { margin: 0 0 .5rem !important; font-size: 1.9rem; }
.hm-opening__greeting { margin: 0 auto .8rem; max-width: 22ch; font-family: var(--hm-display); font-size: 1.62rem; font-weight: 500; font-style: italic; line-height: 1.25; color: #fff; }
.hm-opening__message { max-width: 30ch !important; color: var(--hm-cream-muted); }
.hm-opening__quote {
    position: relative; max-width: 22rem; margin: 3.4rem auto 0; padding: 3rem 1.5rem 1.6rem; color: var(--inv-text);
}
.hm-opening__quote::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(70% 40% at 50% 0%, color-mix(in srgb, var(--inv-shine) 30%, transparent), transparent 70%), var(--hm-paper);
    -webkit-mask: var(--hm-arch-low) center top / 100% 7rem no-repeat, linear-gradient(#000, #000) center bottom / 100% calc(100% - 6.9rem) no-repeat;
    mask: var(--hm-arch-low) center top / 100% 7rem no-repeat, linear-gradient(#000, #000) center bottom / 100% calc(100% - 6.9rem) no-repeat;
    border-radius: 0 0 18px 18px;
}
.hm-opening__quote::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 0 0 18px 18px; background: var(--hm-gold-grad);
}
.hm-opening__finial { position: absolute; left: 50%; top: -1.6rem; width: 1.2rem; height: 1.2rem; margin-left: -.6rem; color: var(--inv-shine); }
.hm-opening__quote blockquote { margin: 0; font-family: var(--hm-display); font-style: italic; font-weight: 500; font-size: 1.24rem; line-height: 1.42; color: var(--hm-title); }
.hm-opening__quote figcaption {
    display: inline-block; margin-top: .85rem; padding: .22rem .75rem; border-radius: 999px; font-size: .68rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: #fff; background: var(--hm-rose);
}

/* host: the family photo in a big arch set off-centre, a rose arch shape behind, the monogram seal beside it,
   and an ivory card edged with the gold geometric band */
.hm-host__art { position: relative; display: flex; justify-content: center; padding: 2.4rem 0 .6rem; }
.hm-arch--host { --arch-w: min(14.5rem, 60vw); --arch-pos: center 35%; transform: translateX(-1.4rem); }
.hm-host__shape {
    position: absolute; z-index: -1; left: 50%; top: 3.8rem; bottom: .6rem; width: min(14.5rem, 60vw); transform: translateX(-38%);
    background: linear-gradient(170deg, color-mix(in srgb, var(--inv-accent) 45%, var(--inv-soft)), color-mix(in srgb, var(--inv-accent) 75%, var(--inv-soft)));
    -webkit-mask: var(--hm-arch-tall) center / 100% 100% no-repeat; mask: var(--hm-arch-tall) center / 100% 100% no-repeat;
}
.hm-host__seal { position: absolute; z-index: 2; right: max(.2rem, calc(50% - min(7.25rem, 30vw) - 4.6rem)); bottom: 1.4rem; }
.hm-host__card {
    position: relative; z-index: 2; margin: 2rem 0 0; padding: 1.6rem 1.3rem 0 2.4rem; overflow: hidden; border-radius: 6px 24px 24px 6px;
    text-align: left; background: var(--hm-paper);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-gold) 30%, transparent), var(--hm-drop);
}
.hm-host__card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1.15rem;
    background: linear-gradient(180deg, var(--hm-rose), color-mix(in srgb, var(--hm-rose) 70%, var(--inv-deep)));
}
.hm-host__card::after {
    content: ''; position: absolute; left: 2px; top: 0; bottom: 0; width: 14px; background: var(--inv-shine); opacity: .9;
    -webkit-mask: var(--hm-band-v) center top / 14px 28px repeat-y; mask: var(--hm-band-v) center top / 14px 28px repeat-y;
}
.hm-host__short { margin: 0 0 .1rem; font-family: var(--hm-display); font-style: italic; font-weight: 600; font-size: 1.32rem; line-height: 1.2; color: var(--hm-rose-text); }
.hm-host__family { margin: 0; font-family: var(--hm-display); font-weight: 600; font-size: 2.2rem; line-height: 1.04; color: var(--hm-title); overflow-wrap: anywhere; text-wrap: balance; }
.hm-host__couple {
    display: flex; flex-direction: column; align-items: flex-start; gap: .05rem; margin: .9rem 0 1.3rem; padding-top: .85rem;
    font-size: 1.02rem; font-weight: 500; line-height: 1.35; color: var(--inv-text);
    border-top: 1px solid color-mix(in srgb, var(--inv-gold) 40%, transparent);
}
.hm-host__couple .hm-amp { font-size: 1.3rem; line-height: 1.1; }
.hm-host__members {
    display: flex; align-items: flex-start; gap: .75rem; margin: 0 -1.3rem 0 -1.25rem; padding: 1rem 1.3rem 1.1rem 1.25rem;
    background: linear-gradient(135deg, var(--inv-soft), color-mix(in srgb, var(--inv-soft) 45%, #fff));
}
.hm-host__members-icon { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; flex: none; border-radius: 50%; color: var(--inv-shine); background: var(--inv-primary); }
.hm-host__members p { margin: 0; font-size: .93rem; font-weight: 500; line-height: 1.45; }
.hm-host__members small { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--hm-rose-text); }

/* occasion: a pointed window onto dawn over the dunes, the type big, the intent italic between gold lines */
.hm-occasion { padding: 4rem 1.5rem 4.4rem; }
.hm-occasion__window { position: relative; width: min(20rem, 92%); margin: 1.4rem auto 2rem; }
.hm-occasion__frame { position: absolute; z-index: 1; top: -11px; left: -10px; width: calc(100% + 20px); height: calc(100% + 11px); color: var(--inv-shine); overflow: visible; pointer-events: none; }
.hm-occasion__frame path { stroke-width: 1.5; }
.hm-occasion__scene {
    position: relative; overflow: hidden; aspect-ratio: 10 / 7;
    background:
        radial-gradient(1.2px 1.2px at 18% 16%, #fff 90%, transparent),
        radial-gradient(1px 1px at 72% 10%, #fff 90%, transparent),
        radial-gradient(1.3px 1.3px at 86% 24%, #fff 90%, transparent),
        radial-gradient(1px 1px at 38% 26%, #fff 90%, transparent),
        linear-gradient(180deg, var(--inv-deep) 2%, color-mix(in srgb, var(--inv-primary) 80%, var(--inv-deep)) 24%, color-mix(in srgb, var(--inv-accent) 65%, var(--inv-primary)) 52%, color-mix(in srgb, var(--inv-shine) 70%, var(--inv-accent)) 74%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80V36C0 20 24 9 50 0c26 9 50 20 50 36v44Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80V36C0 20 24 9 50 0c26 9 50 20 50 36v44Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.hm-occasion__moon { position: absolute; left: 20%; top: 20%; width: 9%; fill: color-mix(in srgb, var(--inv-shine) 70%, #fff); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--inv-shine) 80%, transparent)); }
.hm-occasion__dunes { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; aspect-ratio: 400 / 140; }
.hm-occasion__dunes .hm-dunes__near-bottom { stop-color: var(--inv-deep); }
.hm-occasion__eyebrow { margin: 0 0 .5rem !important; font-size: .72rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--inv-shine); }
.hm-occasion__type { margin: 0 auto 1.3rem; max-width: 15ch; font-family: var(--hm-display); font-weight: 600; font-size: 2.75rem; line-height: 1.02; color: #fff; text-wrap: balance; }
.hm-occasion__intent {
    position: relative; max-width: 30ch !important; margin: 0 auto !important; padding: 1.1rem 0;
    font-family: var(--hm-display); font-style: italic; font-weight: 500; font-size: 1.24rem; line-height: 1.48; color: #fff;
    border-top: 1px solid color-mix(in srgb, var(--inv-shine) 55%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--inv-shine) 55%, transparent);
}
.hm-occasion__star { width: 1rem; height: 1rem; margin: -.5rem auto 0; color: var(--inv-shine); position: relative; }
.hm-occasion__star::before { content: none; }

/* home: the photo in a wide pointed window, a rose travel tag with the moving-in date, the story, the address */
.hm-home { padding-bottom: 4.2rem; }
.hm-arch--home { --arch-w: min(18.5rem, 82vw); --arch-pos: center 62%; margin: 2.6rem auto 0; }
.hm-home .hm-home__tag {
    position: relative; display: flex; align-items: center; gap: .55rem; width: max-content; max-width: 100%; margin: 1.6rem auto 0; padding: .45rem 1rem .45rem .55rem;
    clip-path: polygon(0 50%, 1.1rem 0, 100% 0, 100% 100%, 1.1rem 100%); padding-left: 1.35rem;
    transform: rotate(-3deg); text-align: left; color: #fff;
    background: linear-gradient(180deg, color-mix(in srgb, var(--hm-rose) 80%, #fff), var(--hm-rose));
}
.hm-home__tag-hole { width: .55rem; height: .55rem; flex: none; border-radius: 50%; background: var(--inv-soft); box-shadow: inset 0 1px 2px rgb(0 0 0 / .35); }
.hm-home__tag-text { font-family: var(--hm-display); font-weight: 600; font-size: 1.12rem; line-height: 1.15; }
.hm-home__tag-text small { display: block; font-family: var(--hm-sans); font-size: .56rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-soft); }
.hm-home__story {
    max-width: 30ch !important; margin: 1.7rem auto 1.6rem !important; font-family: var(--hm-display); font-style: italic; font-weight: 500;
    font-size: 1.26rem; line-height: 1.46; color: var(--hm-title);
}
.hm-home__address {
    position: relative; display: flex; align-items: flex-start; gap: .8rem; max-width: 22rem; margin: 0 auto; padding: 1rem 1.15rem 1rem 1.9rem; text-align: left;
    overflow: hidden; border-radius: 4px 18px 18px 4px; background: var(--hm-paper);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-gold) 30%, transparent), 0 16px 26px -20px color-mix(in srgb, var(--inv-deep) 60%, transparent);
}
.hm-home__address::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: .8rem; background: var(--inv-primary);
}
.hm-home__address-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; border-radius: 50%; color: var(--inv-shine); background: var(--inv-primary); }
.hm-home__address p { margin: 0; font-size: .92rem; font-weight: 500; line-height: 1.5; }
.hm-home__address small { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--hm-rose-text); }

/* events: an ivory card with a fine gold inner line, the photo under a pointed top, a star medallion date */
.hm-event + .hm-event { margin-top: 2.6rem; }
.hm-event__card {
    position: relative; padding: 0 0 1.4rem; border-radius: 24px; background: var(--hm-paper); text-align: left;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-gold) 30%, transparent), var(--hm-drop);
}
.hm-event__card::before {
    content: ''; position: absolute; inset: 6px; border-radius: 19px; pointer-events: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-gold) 35%, transparent);
}
.hm-event__media { padding: .7rem .7rem 0; }
.hm-event__photo {
    display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: center 55%;
    -webkit-mask: var(--hm-arch-low) center / 100% 100% no-repeat; mask: var(--hm-arch-low) center / 100% 100% no-repeat;
}
.hm-event__top { display: flex; align-items: flex-end; gap: .9rem; padding: 1.4rem 1.2rem 0; }
.hm-event__media + .hm-event__top { margin-top: -3.1rem; }
/* only the medallion rises over the photo; the name always starts below it */
.hm-event__media + .hm-event__top .hm-event__head { padding-top: 3.4rem; }
.hm-event--flip .hm-event__top { flex-direction: row-reverse; text-align: right; }
.hm-event__date {
    position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
    width: 5.6rem; height: 5.6rem; margin: 0; color: #fff; text-align: center;
    filter: drop-shadow(0 10px 12px color-mix(in srgb, var(--inv-deep) 40%, transparent));
}
.hm-event__date::before, .hm-event__date::after {
    content: ''; position: absolute; z-index: -1; -webkit-mask: var(--hm-seal) center / contain no-repeat; mask: var(--hm-seal) center / contain no-repeat;
}
.hm-event__date::before { inset: 0; background: var(--hm-gold-grad); }
.hm-event__date::after { inset: 4px; background: radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--inv-primary) 80%, #fff), var(--inv-primary) 45%, var(--inv-deep)); }
.hm-event--flip .hm-event__date::after { background: radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--hm-rose) 75%, #fff), var(--hm-rose) 50%, color-mix(in srgb, var(--hm-rose) 70%, var(--inv-deep))); }
.hm-event__weekday { font-size: .58rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-shine); }
.hm-event--flip .hm-event__weekday { color: #fff; }
.hm-event__day { font-family: var(--hm-display); font-weight: 700; font-size: 2.05rem; line-height: .95; }
.hm-event__month { font-size: .54rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.hm-event__head { min-width: 0; padding-bottom: .3rem; }
.hm-event__name { margin: 0; font-family: var(--hm-display); font-weight: 600; font-size: 1.75rem; line-height: 1.08; color: var(--hm-title); }
.hm-event__full { margin: .2rem 0 0; font-size: .8rem; font-weight: 500; color: var(--hm-muted); }
.hm-event__rows { display: grid; gap: .75rem; margin: 1.1rem 1.2rem 0; padding: 1rem 0 0; list-style: none; font-size: .92rem; border-top: 1px solid color-mix(in srgb, var(--inv-gold) 35%, transparent); }
.hm-event__rows li { display: flex; align-items: flex-start; gap: .7rem; }
.hm-event__rows .hm-icon { width: 2.1rem; height: 2.1rem; padding: .45rem; border-radius: 50%; color: var(--inv-primary); background: var(--inv-soft); }
.hm-event__rows li > span { padding-top: .3rem; }
.hm-event__venue { display: block; font-weight: 600; }
.hm-event__address { display: block; font-size: .86rem; color: var(--hm-muted); }
.hm-event .inv-maps { margin: 1.15rem 1.2rem 0; text-align: center; }
.hm-event .inv-maps .inv-button { width: 100%; font-weight: 600; }
.hm-event .inv-maps__frame { height: 190px; border-radius: 18px; }

/* countdown: little lantern windows (night glass, a gold line, a star on top), the calendar below */
.hm-countdown .inv-countdown { gap: clamp(.5rem, 2.6vw, .85rem); margin-top: 1.2rem; }
.hm-countdown .inv-countdown__item {
    position: relative; display: grid; place-content: center; width: clamp(4rem, 18vw, 4.6rem); min-width: 0; aspect-ratio: 4 / 5.4; padding: .7rem 0 .2rem;
    border-radius: 50% 50% 10px 10px / 34% 34% 10px 10px; color: #fff;
    background: radial-gradient(80% 60% at 50% 85%, color-mix(in srgb, var(--inv-shine) 30%, transparent), transparent 70%), color-mix(in srgb, var(--inv-deep) 70%, var(--inv-primary));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-shine) 75%, transparent), inset 0 0 0 4px color-mix(in srgb, var(--inv-deep) 50%, transparent), inset 0 0 0 5px color-mix(in srgb, var(--inv-shine) 30%, transparent), 0 18px 26px -12px rgb(0 0 0 / .55);
}
.hm-countdown .inv-countdown__item::before {
    content: ''; position: absolute; left: 50%; top: -.8rem; width: .65rem; height: .65rem; margin-left: -.325rem; background: var(--inv-shine);
    -webkit-mask: var(--hm-seal) center / contain no-repeat; mask: var(--hm-seal) center / contain no-repeat;
}
.hm-countdown .inv-countdown__value { font-variant-numeric: lining-nums tabular-nums; font-family: var(--hm-display); font-weight: 700; font-size: 2.05rem; line-height: 1; color: var(--inv-shine); }
.hm-countdown .inv-countdown__label { margin-top: .15rem; font-size: .54rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--hm-cream-muted); }
.hm-countdown .inv-countdown__done { font-family: var(--hm-display); font-size: 1.4rem; font-style: italic; color: var(--inv-shine); }
.hm-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 2rem; }
.hm-countdown .inv-countdown__actions .inv-button {
    width: min(100%, 17rem); min-height: 2.75rem; padding: .6rem 1rem; font-size: .84rem; font-weight: 600;
    color: var(--inv-background); background: color-mix(in srgb, var(--inv-background) 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-shine) 60%, transparent);
}
.hm-countdown .inv-countdown__actions .inv-button:first-child { color: var(--inv-deep); background: var(--hm-gold-grad); box-shadow: none; }
.hm-countdown .inv-cal {
    --inv-cal-bg: var(--hm-paper); --inv-cal-mark: var(--inv-accent);
    max-width: 19rem; margin: 2.8rem auto 0; border-radius: 140px 140px 20px 20px / 64px 64px 20px 20px; padding-top: 1.8rem;
    box-shadow: 0 0 0 1px var(--inv-shine), 0 0 0 6px color-mix(in srgb, var(--inv-deep) 60%, transparent), 0 0 0 7px color-mix(in srgb, var(--inv-shine) 45%, transparent), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.hm-countdown .inv-cal__month { font-family: var(--hm-display); font-weight: 600; font-size: 1.6rem; font-style: italic; color: var(--hm-title); }

/* prayer: a lantern over an ivory mihrab panel glowing from inside, resting on a prayer-mat strip */
.hm-prayer {
    padding-top: 0; padding-bottom: 4.6rem;
    background:
        radial-gradient(62% 40% at 50% 42%, color-mix(in srgb, var(--inv-shine) 55%, transparent), transparent 72%),
        linear-gradient(180deg, var(--inv-background), color-mix(in srgb, var(--inv-soft) 70%, var(--inv-background)));
}
.hm-prayer__lantern { width: 2.6rem; margin: 0 auto -.15rem; }
.hm-prayer__panel { position: relative; isolation: isolate; max-width: 21rem; margin: 1.6rem auto 0; padding: 5.4rem 1.5rem 2.6rem; color: var(--inv-text); }
.hm-prayer__panel::before {
    content: ''; position: absolute; inset: 0; z-index: -2;
    background:
        radial-gradient(80% 45% at 50% 38%, color-mix(in srgb, var(--inv-shine) 30%, transparent), transparent 75%),
        linear-gradient(180deg, #fff, var(--hm-paper));
    -webkit-mask: var(--hm-arch-tall) center / 100% 100% no-repeat; mask: var(--hm-arch-tall) center / 100% 100% no-repeat;
}
.hm-prayer__line { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; color: var(--inv-gold); overflow: visible; pointer-events: none; }
.hm-prayer__line path { stroke-width: 1.6; }
.hm-prayer__line .hm-prayer__line-inner { stroke-width: .9; opacity: .7; }
.hm-prayer__eyebrow {
    display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 1rem; padding: .3rem .85rem; border-radius: 999px; font-size: .66rem; font-weight: 600;
    letter-spacing: .22em; text-transform: uppercase; color: var(--inv-primary); background: var(--inv-soft);
}
.hm-prayer__star { width: .6rem; height: .6rem; color: var(--hm-rose-text); }
.hm-prayer__arabic { margin: 0 0 1rem; font-size: 1.65rem; color: var(--hm-title); }
.hm-prayer__text { margin: 0; }
.hm-prayer__text p { margin: 0; font-family: var(--hm-display); font-size: 1.24rem; font-weight: 500; font-style: italic; line-height: 1.46; }
.hm-prayer__text cite {
    display: inline-block; margin-top: 1rem; padding: .28rem .85rem; border-radius: 999px; font-style: normal; font-size: .68rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: var(--inv-shine); background: var(--inv-primary);
}
.hm-prayer .hm-mat { margin-top: -1px; }

/* rundown: a gold line with a star at every step, big gold times, hairline splits, the jug and dates below */
.hm-rundown { padding-top: 5rem; }
.hm-rundown__list { position: relative; margin: 0; padding: 0 0 0 1.6rem; list-style: none; text-align: left; }
.hm-rundown__list::before {
    content: ''; position: absolute; left: .45rem; top: .9rem; bottom: .9rem; width: 1px; transform-origin: top;
    background: linear-gradient(180deg, transparent, var(--inv-shine) 8% 92%, transparent);
}
.hm-rundown__item { position: relative; display: grid; grid-template-columns: 3.9rem minmax(0, 1fr); align-items: baseline; column-gap: .8rem; padding: .85rem 0; border-bottom: 1px solid color-mix(in srgb, var(--inv-background) 14%, transparent); }
.hm-rundown__item:last-child { border-bottom: 0; }
.hm-rundown__node { position: absolute; left: -1.6rem; top: 1.3rem; width: .9rem; height: .9rem; margin-left: .01rem; color: var(--inv-shine); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--inv-shine) 70%, transparent)); }
.hm-rundown__time { font-family: var(--hm-display); font-weight: 700; font-size: 1.55rem; line-height: 1; font-variant-numeric: lining-nums tabular-nums; color: var(--inv-shine); }
.hm-rundown__body h3 { margin: 0; font-size: 1.02rem; font-weight: 500; line-height: 1.35; color: #fff; }
.hm-rundown__body p { margin: .15rem 0 0; font-size: .86rem; color: var(--hm-cream-muted); }
.hm-rundown__still { width: 10.5rem; margin: 1.6rem 0 -1.2rem auto; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--inv-shine) 22%, transparent)); }

/* story: a dotted rose road down the left, round nodes (plane → star → crescent), chapters beside it */
.hm-story__list { position: relative; display: grid; gap: 2.2rem; margin: 0; padding: 0 0 0 3.2rem; list-style: none; text-align: left; }
.hm-story__list::before {
    content: ''; position: absolute; left: 1.2rem; top: 1rem; bottom: 1rem; width: 4px; margin-left: -2px;
    background: radial-gradient(circle, var(--inv-accent) 1.5px, transparent 2px) center top / 4px 10px repeat-y;
}
.hm-story__item { position: relative; }
.hm-story__node {
    position: absolute; left: -3.2rem; top: 0; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
    color: var(--inv-shine); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-primary) 80%, #fff), var(--inv-primary) 50%, var(--inv-deep));
    box-shadow: 0 0 0 3px var(--inv-background), 0 0 0 4.2px var(--inv-gold);
}
.hm-story__node .hm-icon { width: 1.2rem; height: 1.2rem; }
.hm-story__node .hm-star { width: .95rem; height: .95rem; }
.hm-story__media {
    position: relative; margin: 0 0 .9rem; padding: 3px; background: var(--hm-gold-grad);
    -webkit-mask: var(--hm-arch-low) center / 100% 100% no-repeat; mask: var(--hm-arch-low) center / 100% 100% no-repeat;
}
.hm-story__item--alt .hm-story__media { background: linear-gradient(135deg, color-mix(in srgb, var(--inv-accent) 60%, #fff), var(--inv-accent)); }
.hm-story__photo {
    display: block; width: 100%; aspect-ratio: 16 / 10.5; object-fit: cover;
    -webkit-mask: var(--hm-arch-low) center / 100% 100% no-repeat; mask: var(--hm-arch-low) center / 100% 100% no-repeat;
}
.hm-story__when {
    display: inline-block; padding: .2rem .7rem; border-radius: 999px; font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    color: #fff; background: var(--hm-rose);
}
.hm-story__body h3 { margin: .45rem 0 0; font-family: var(--hm-display); font-weight: 600; font-size: 1.6rem; line-height: 1.1; color: var(--hm-title); }
.hm-story__body p { margin: .35rem 0 0; font-size: .9rem; line-height: 1.55; color: var(--hm-muted); }
.hm-story__item--text .hm-story__body { padding: 1rem 1.15rem 1.1rem; border-radius: 18px; background: var(--inv-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-gold) 25%, transparent); }
.hm-story__item--text .hm-story__node { top: .7rem; }

/* gallery: the first photo a tall pointed arch over two rows, the others rounded with a fine ivory ring */
.hm-gallery { padding-top: 5rem; }
.hm-gallery .inv-gallery { gap: .65rem; }
.hm-gallery .inv-gallery__item { border-radius: 14px; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--inv-shine) 45%, transparent), 0 16px 28px -18px rgb(0 0 0 / .7); }
.hm-gallery .inv-gallery__item:first-child {
    grid-row: span 2; aspect-ratio: auto; border-radius: 0; box-shadow: none;
    -webkit-mask: var(--hm-arch-tall) center / 100% 100% no-repeat; mask: var(--hm-arch-tall) center / 100% 100% no-repeat;
}

/* live streaming: a night card with a pointed top-left corner and the lattice */
.hm-stream__card {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem 1rem; max-width: 24rem; margin: 0 auto; padding: 1.5rem 1.35rem 1.4rem;
    border-radius: 90px 24px 24px 24px / 60px 24px 24px 24px; color: var(--inv-background); text-align: left;
    background: radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--inv-primary) 80%, #fff 8%), transparent 70%), linear-gradient(140deg, var(--inv-primary), var(--inv-deep));
    box-shadow: 10px 10px 0 0 color-mix(in srgb, var(--inv-accent) 45%, transparent), var(--hm-drop);
}
.hm-stream__card::before {
    content: ''; position: absolute; inset: 0; z-index: -1; background: var(--inv-shine); opacity: .1;
    -webkit-mask: var(--hm-lattice) center / 44px 44px repeat; mask: var(--hm-lattice) center / 44px 44px repeat;
}
.hm-stream__icon { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; color: var(--inv-deep); background: var(--hm-gold-grad); }
.hm-stream__icon .hm-icon { width: 1.7rem; height: 1.7rem; }
.hm-stream__title { margin: 0 0 .15rem; font-family: var(--hm-display); font-weight: 600; font-size: 1.8rem; line-height: 1.05; color: #fff; }
.hm-stream__text p { margin: 0; font-size: .88rem; color: var(--hm-cream-muted); }
.hm-stream__text .hm-stream__note { margin-top: .3rem; font-weight: 600; color: var(--inv-shine); }
.hm-stream__button { grid-column: 1 / -1; min-height: 2.75rem; color: var(--inv-deep) !important; background: var(--hm-gold-grad) !important; font-weight: 600; }

/* RSVP card: an ivory card crowned with a pointed arch cap (gold line, star finial), a rose block behind */
.hm-rsvp__house { position: relative; margin: 1.4rem 10px 0 0; }
.hm-rsvp__cap { display: block; width: 100%; height: 5rem; margin-bottom: -1px; overflow: visible; }
.hm-rsvp__cap-fill { fill: var(--hm-paper); }
.hm-rsvp__cap-line { fill: none; stroke: var(--inv-gold); stroke-width: 1.4; }
.hm-rsvp__finial { position: absolute; left: 50%; top: -1.35rem; width: 1.1rem; height: 1.1rem; margin-left: -.55rem; color: var(--inv-shine); }
.hm-rsvp__card {
    position: relative; padding: .6rem 1.15rem 1.4rem; border-radius: 0 0 22px 22px; color: var(--inv-text); background: var(--hm-paper);
    box-shadow: 10px 10px 0 0 color-mix(in srgb, var(--inv-accent) 65%, transparent), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.hm-rsvp__intro { margin: 0 auto 1.1rem; max-width: 30ch; font-size: .92rem; color: var(--hm-muted); }
.hm-rsvp__sent { margin-bottom: 1rem; }
.hm-rsvp__check { display: block; width: 4.25rem; height: 4.25rem; margin: 0 auto .5rem; }
.hm-rsvp__check circle { fill: var(--inv-primary); }
.hm-rsvp__check path { fill: none; stroke: var(--inv-shine); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
html.inv-anim .hm-rsvp__sent .hm-rsvp__check { animation: hm-bounce .8s cubic-bezier(.34, 1.56, .64, 1) both; }
html.inv-anim .hm-rsvp__sent .hm-rsvp__check path { animation: hm-draw .45s ease-out .35s both; }
.hm-rsvp__thanks { margin: 0; font-family: var(--hm-display); font-weight: 600; font-size: 1.9rem; color: var(--hm-title); }
.hm-rsvp__line { margin: .1rem 0 0; font-size: .9rem; color: var(--hm-muted); }
.hm-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .84rem; font-weight: 600; color: var(--hm-rose-text); }

/* gift: ivory envelope cards (a rose flap closed by a gold star seal), two per row; the address below */
.hm-gift__intro { color: var(--hm-cream-muted); }
.hm-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.3rem; }
.hm-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.hm-gift .inv-gift__account,
.hm-gift .inv-gift__address {
    position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; margin: 0; overflow: hidden;
    padding: 2.6rem .75rem 1rem; border-radius: 16px; color: var(--inv-text); background: var(--hm-paper);
    box-shadow: 0 18px 30px -20px rgb(0 0 0 / .6);
}
.hm-gift .inv-gift__account::before,
.hm-gift .inv-gift__address::before {
    content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 2rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--hm-rose) 85%, #fff), var(--hm-rose));
    clip-path: polygon(0 0, 100% 0, 100% 15%, 50% 100%, 0 15%);
}
.hm-gift .inv-gift__account::after,
.hm-gift .inv-gift__address::after {
    content: ''; position: absolute; left: 50%; top: 1.25rem; width: 1.2rem; height: 1.2rem; margin-left: -.6rem; background: var(--hm-gold-grad);
    -webkit-mask: var(--hm-seal) center / contain no-repeat; mask: var(--hm-seal) center / contain no-repeat;
}
.hm-gift .inv-gift__account p, .hm-gift .inv-gift__address p { margin: 0; }
.hm-gift .inv-gift__bank { font-weight: 600; font-size: .88rem; color: var(--hm-title); }
.hm-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .4rem; background: #fff; }
.hm-gift .inv-gift__logo img { max-width: 5rem; }
.hm-gift .inv-gift__number {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .98rem; font-weight: 700;
    letter-spacing: .03em; line-height: 1.3; overflow-wrap: anywhere; color: var(--inv-text);
}
.hm-gift .inv-gift__holder { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--hm-muted); overflow-wrap: anywhere; }
.hm-gift .inv-button { margin-top: .35rem; min-height: 2.25rem; padding: .35rem .9rem; font-size: .74rem; font-weight: 600; }
.hm-gift .inv-gift__address { margin-top: .75rem; font-size: .875rem; }
.hm-gift .inv-gift__address .inv-gift__holder { font-size: .72rem; }

/* co-hosts: the names in the display serif, one per line, split by a tiny gold star */
.hm-cohosts__list { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.hm-cohosts__list li { max-width: 26ch; font-family: var(--hm-display); font-weight: 600; font-size: 1.45rem; line-height: 1.25; color: #fff; }
.hm-cohosts__list li + li::before {
    content: ''; display: block; width: .7rem; height: .7rem; margin: 0 auto .6rem; background: var(--inv-shine);
    -webkit-mask: var(--hm-seal) center / contain no-repeat; mask: var(--hm-seal) center / contain no-repeat;
}

/* contacts: ivory rows with the initial on a pointed-arch badge and a WhatsApp button */
.hm-contacts__list { display: grid; gap: .75rem; max-width: 24rem; margin: 0 auto; }
.hm-contact {
    display: grid; grid-template-columns: 2.9rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .6rem .6rem .6rem .7rem; border-radius: 20px;
    background: var(--hm-paper); text-align: left; box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-gold) 30%, transparent), 0 12px 22px -18px color-mix(in srgb, var(--inv-deep) 60%, transparent);
}
.hm-contact__avatar {
    display: grid; place-items: center; width: 2.9rem; height: 3.3rem; padding-top: .45rem;
    font-family: var(--hm-display); font-weight: 600; font-size: 1.45rem; color: var(--inv-shine); background: linear-gradient(180deg, var(--inv-primary), var(--inv-deep));
    -webkit-mask: var(--hm-arch-tall) center / 100% 100% no-repeat; mask: var(--hm-arch-tall) center / 100% 100% no-repeat;
}
.hm-contact p { margin: 0; }
.hm-contact__name { font-weight: 600; font-size: .96rem; line-height: 1.3; overflow-wrap: anywhere; }
.hm-contact__role { font-size: .8rem; color: var(--hm-muted); }
.hm-contact__phone { font-size: .85rem; }
.hm-contact__button { min-height: 2.5rem; padding: .45rem .95rem; font-size: .8rem; font-weight: 600; }
.hm-contact__button .hm-icon { width: 1.05rem; height: 1.05rem; }

/* health protocol: ivory chips on sand */
.hm-protocol__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.hm-protocol__list li {
    display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border-radius: 999px; font-size: .86rem; font-weight: 500;
    background: var(--hm-paper); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-gold) 35%, transparent);
}
.hm-protocol__list .hm-icon { width: 1rem; height: 1rem; color: var(--inv-primary); }
.hm-protocol__note { font-size: .9rem; color: var(--hm-muted); }

/* vendors: an ivory card of rows split by dotted gold lines */
.hm-vendors__list { max-width: 24rem; margin: 0 auto; padding: .3rem 1.15rem; list-style: none; border-radius: 22px; background: var(--hm-paper); box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-gold) 30%, transparent), var(--hm-drop); }
.hm-vendor { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem 0; text-align: left; border-bottom: 1.5px dotted color-mix(in srgb, var(--inv-gold) 45%, transparent); }
.hm-vendor:last-child { border-bottom: 0; }
.hm-vendor__text { display: flex; flex-direction: column; min-width: 0; }
.hm-vendor__role { font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--hm-rose-text); }
.hm-vendor__name { font-family: var(--hm-display); font-weight: 600; font-size: 1.3rem; line-height: 1.2; color: var(--inv-text); overflow-wrap: anywhere; }
.hm-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: 600; text-decoration: none; background: var(--inv-soft); color: var(--inv-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 18%, transparent);
}
.hm-vendor__link .hm-icon { width: .95rem; height: .95rem; }

/* closing: the full photo fading into the night with dunes rising over its foot, lanterns at the sides */
.hm-closing { padding: 0 1.6rem 2.4rem; background: radial-gradient(100% 30% at 50% 100%, color-mix(in srgb, var(--inv-primary) 45%, transparent), transparent 80%), var(--inv-deep); }
.hm-closing__top { position: relative; z-index: 0; margin: 0 -1.6rem; min-height: 10rem; }
.hm-closing__photo { position: relative; height: min(92vw, 52svh, 23rem); overflow: hidden; }
.hm-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 22%; --inv-parallax: 30px; }
.hm-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 35%, transparent), transparent 22%, transparent 40%, color-mix(in srgb, var(--inv-deep) 50%, transparent) 62%, color-mix(in srgb, var(--inv-deep) 88%, transparent) 82%, var(--inv-deep) 96%);
}
.hm-closing__dunes { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: auto; aspect-ratio: 400 / 120; }
.hm-closing__dunes .hm-dunes__far-top { stop-color: color-mix(in srgb, var(--inv-accent) 35%, var(--inv-deep)); stop-opacity: .5; }
.hm-closing__dunes .hm-dunes__far-bottom { stop-color: var(--inv-deep); stop-opacity: .6; }
.hm-closing__dunes .hm-dunes__mid-top { stop-color: color-mix(in srgb, var(--inv-primary) 50%, var(--inv-deep)); stop-opacity: .85; }
.hm-closing__dunes .hm-dunes__mid-bottom { stop-color: var(--inv-deep); }
.hm-closing__dunes .hm-dunes__near-top, .hm-closing__dunes .hm-dunes__near-bottom { stop-color: var(--inv-deep); }
.hm-closing__lantern { position: absolute; z-index: 1; top: 0; width: 1.8rem; }
.hm-closing__lantern--left { left: 7%; }
.hm-closing__lantern--right { right: 8%; width: 1.5rem; }
.hm-closing__body { position: relative; z-index: 1; margin-top: -1.4rem; }
.hm-closing__moon { display: block; width: 1.7rem; margin: 0 auto .5rem; fill: var(--inv-shine); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--inv-shine) 70%, transparent)); }
.hm-closing__eyebrow { margin: 0 0 .3rem; font-size: .7rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-shine); }
.hm-closing__title { margin: 0 0 .7rem; font-family: var(--hm-display); font-weight: 600; font-size: clamp(1.9rem, 8.5vw, 2.4rem); line-height: 1; color: #fff; }
.hm-closing__title em { font-style: italic; font-weight: 500; color: var(--inv-shine); }
.hm-closing__message { margin: 0 auto; max-width: 32ch; font-size: .92rem; line-height: 1.6; color: var(--hm-cream-muted); }
.hm-closing__salam { margin: .75rem auto 0; max-width: 24ch; font-family: var(--hm-display); font-size: 1.1rem; font-weight: 500; font-style: italic; line-height: 1.32; color: var(--inv-shine); }
.hm-closing__signature { margin: .75rem auto 0; max-width: 30ch; font-size: .88rem; color: var(--hm-cream-muted); }
.hm-closing__family { position: relative; display: flex; flex-direction: column; align-items: center; gap: .45rem; margin-top: 1.3rem; }
.hm-closing__family::before {
    content: ''; position: absolute; z-index: -1; top: 1.55rem; left: -1.6rem; right: -1.6rem; height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--inv-shine) 65%, transparent) 25%, color-mix(in srgb, var(--inv-shine) 65%, transparent) 75%, transparent);
}
.hm-closing__seal { width: 3.1rem; height: 3.1rem; }
.hm-closing__seal span { font-size: .84rem; }
.hm-closing__seal::before { box-shadow: none; }
.hm-closing__name { margin: 0; max-width: 22ch; font-family: var(--hm-display); font-weight: 600; font-size: 1.5rem; line-height: 1.12; color: #fff; text-wrap: balance; }

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

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

/* wishes: the form on an ivory card with a night offset block, the wishes in a scroll box of about three */
.hm-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.hm-wishes .inv-form {
    margin-right: 8px; padding: 1.3rem 1.1rem; border-radius: 22px; background: var(--hm-paper);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-gold) 30%, transparent), 8px 8px 0 0 var(--inv-primary);
}
.hm-wishes .inv-wishes__list { margin-top: 1.4rem; }
.hm-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .55rem; border-radius: 20px; background: color-mix(in srgb, #fff 45%, transparent); box-shadow: inset 0 0 0 1px var(--hm-ring);
}
.hm-wishes .inv-wish { position: relative; padding: .75rem .9rem .75rem 1rem; border-radius: 14px; background: #fff; text-align: left; box-shadow: 0 2px 10px rgb(0 0 0 / .05); border-left: 3px solid var(--inv-accent); }
.hm-wishes .inv-wish__name { font-weight: 600; color: var(--hm-title); }
.hm-wishes .inv-wish__message { font-size: .9rem; line-height: 1.5; }
.hm-wishes .inv-wish__time { font-size: .72rem; color: var(--hm-muted); }

/* ---------- 7. shared components ---------- */
.hm-main .inv-button { font-weight: 600; }
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(--hm-sans);
}

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

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

/* short phones: the cover art and type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .hm-cover { --arch-cover: min(54vw, 13.5rem, calc(36svh * .714)); padding-top: 1.7rem; padding-bottom: 1.5rem; }
    .hm-cover__title { margin-bottom: 2.4rem; }
    .hm-cover__lantern--left { width: 2rem; }
    .hm-cover__lantern--right { width: 1.6rem; }
    .hm-cover__text { padding-top: 1rem; }
    .hm-cover__quote { font-size: 1rem; }
    .hm-cover__guest { margin-top: .75rem; }
    .hm-cover__open { margin-top: .85rem; }
}
@media (max-height: 660px) {
    .hm-cover { --arch-cover: min(50vw, calc(32svh * .714)); padding-top: 1.4rem; padding-bottom: 1.3rem; }
    .hm-cover__title { margin-bottom: 2.35rem; font-size: .66rem; }
    .hm-cover__lantern--left { width: 1.75rem; }
    .hm-cover__lantern--right { width: 1.4rem; }
    .hm-cover__text { padding-top: .85rem; }
    .hm-cover__name { font-size: clamp(1.8rem, 8vw, 2.2rem); }
    .hm-cover__date { margin-top: .3rem; font-size: .8rem; }
    .hm-cover__quote { margin-top: .3rem; font-size: .92rem; line-height: 1.3; }
    .hm-cover__guest { padding: .4rem .85rem .5rem; }
    .hm-cover__guest-name { font-size: 1.15rem; }
    .hm-cover__open { min-height: 2.75rem; padding: .6rem 1.7rem; }
}
/* very short screens (in-app browsers): a smaller arch and quote, so everything fits */
@media (max-height: 600px) {
    .hm-cover { --arch-cover: min(46vw, calc(28svh * .714)); padding-top: 1.1rem; }
    .hm-cover__title { margin-bottom: 2.3rem; }
    .hm-cover__name { font-size: clamp(1.65rem, 7.4vw, 2rem); }
    .hm-cover__quote { font-size: .86rem; line-height: 1.26; }
    .hm-cover__guest { margin-top: .6rem; }
    .hm-cover__open { margin-top: .7rem; }
}

/* wide screens: the phone-width column on a night backdrop with the lattice */
@media (min-width: 560px) {
    body.hm-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.hm-body::before {
        content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .1; background: var(--inv-shine);
        -webkit-mask: var(--hm-lattice) center / 44px 44px repeat; mask: var(--hm-lattice) center / 44px 44px repeat;
    }
    .hm-main { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
}

/* ---------- 9. motion ---------- */
@keyframes hm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hm-bounce { 0% { transform: scale(0); } 55% { transform: scale(1.15); } 75% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes hm-photo-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes hm-zoom-out { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes hm-rise-line { from { clip-path: inset(100% -20px -20px -20px); } to { clip-path: inset(-20px -20px -20px -20px); } }
@keyframes hm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hm-dawn { from { opacity: 0; transform: translateX(-50%) scale(.85); } to { opacity: .9; transform: translateX(-50%) scale(1); } }
@keyframes hm-dunes-up { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes hm-drop { 0% { opacity: 0; transform: translateY(-28%) rotate(5deg); } 55% { opacity: 1; transform: translateY(0) rotate(-3deg); } 80% { transform: rotate(1.4deg); } 100% { opacity: 1; transform: none; } }
@keyframes hm-sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
@keyframes hm-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes hm-light { 0% { opacity: 0; } 60% { opacity: 1; } 75% { opacity: .7; } 100% { opacity: 1; } }
@keyframes hm-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* cover (≤ 2.5 s, once): the dawn glow brightens (0–1.4 s), the arch fades up and its photo settles from a slight
   zoom (.1–1.3 s) while the gold line rises around it (.3–1.4 s), the dunes rise (.2–1.2 s), the lanterns drop
   in with one soft swing (.4–1.9 s), the crescent and stars appear (1–1.5 s); the text follows (inv-enter) */
html.inv-anim .hm-cover__art::before { animation: hm-dawn 1.4s ease-out both; }
html.inv-anim .hm-arch--cover .hm-arch__window { animation: hm-photo-in 1s cubic-bezier(.2, .7, .2, 1) .1s both; }
html.inv-anim .hm-arch--cover .hm-arch__photo { animation: hm-zoom-out 1.2s cubic-bezier(.2, .7, .2, 1) .1s both; }
html.inv-anim .hm-arch--cover .hm-arch__line { animation: hm-rise-line 1.1s cubic-bezier(.4, 0, .2, 1) .3s both; }
html.inv-anim .hm-arch--cover :is(.hm-arch__finial, .hm-arch__plinth) { animation: hm-fade .6s ease 1s both; }
html.inv-anim .hm-cover__land { animation: hm-dunes-up 1s cubic-bezier(.2, .7, .2, 1) .2s both; }
html.inv-anim .hm-cover__lantern { animation: hm-drop 1.5s cubic-bezier(.3, .7, .3, 1) .4s both, hm-sway 5s ease-in-out 2.4s infinite alternate; }
html.inv-anim .hm-cover__lantern--right { animation-delay: .55s, 2.8s; }
html.inv-anim .hm-cover__moon { animation: hm-fade .6s ease 1s both; }
html.inv-anim .hm-cover__twinkle { animation: hm-pop .5s cubic-bezier(.34, 1.56, .64, 1) 1.2s both; }

/* section lanterns sway very gently; their light comes on when revealed */
html.inv-anim :is(.hm-opening__lantern, .hm-prayer__lantern, .hm-closing__lantern) { animation: hm-sway 5.5s ease-in-out infinite alternate; }
html.inv-anim .hm-closing__lantern--right { animation-duration: 6.5s; animation-delay: -2s; }
html.inv-anim :is(.hm-opening__light, .hm-prayer__lantern, .hm-closing__top) .hm-lantern__halo { opacity: 0; }
html.inv-anim :is(.is-revealed.hm-opening__light, .hm-prayer__lantern.is-revealed, .is-revealed .hm-prayer__lantern, .hm-closing__top.is-revealed) .hm-lantern__halo { animation: hm-light 1s ease .4s both; }

/* the heading rule draws itself, the arch lines rise, when their part of the section is revealed */
html.inv-anim .hm-draw .hm-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.inv-anim :is(.is-revealed .hm-draw, .hm-draw.is-revealed) .hm-line { animation: hm-draw 1.1s ease-out .2s both; }
html.inv-anim .hm-heading__rule-star { opacity: 0; }
html.inv-anim :is(.is-revealed .hm-heading__rule, .hm-heading__rule.is-revealed) .hm-heading__rule-star { animation: hm-pop .5s cubic-bezier(.34, 1.56, .64, 1) .9s both; transform-box: fill-box; transform-origin: center; }
html.inv-anim .hm-main .hm-arch .hm-arch__line { clip-path: inset(100% -20px -20px -20px); }
html.inv-anim .hm-main :is(.is-revealed .hm-arch, .hm-arch.is-revealed) .hm-arch__line { animation: hm-rise-line 1.2s cubic-bezier(.4, 0, .2, 1) .2s both; }
html.inv-anim .hm-occasion__frame { clip-path: inset(100% -20px -20px -20px); }
html.inv-anim :is(.is-revealed .hm-occasion__frame, .hm-occasion__window.is-revealed .hm-occasion__frame) { animation: hm-rise-line 1.3s cubic-bezier(.4, 0, .2, 1) .2s both; }
html.inv-anim .hm-occasion__frame .hm-line { stroke-dasharray: none; stroke-dashoffset: 0; animation: none !important; }

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

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

/* ---------- 10. intro scene "Pulang Membawa Berkah" (scene.json + sections/_scene) ----------
   The night sky over the dunes turns into dawn: still stars and the crescent fade as the sun and its glow
   rise behind the dunes, two lanterns drop in from the top and swing, a small plane flies home along its
   dotted path (drawn behind it), the jug with the dates slides onto the near dune; the card is an ivory
   pointed arch with a gold rim and a star finial, like the cover's photo window. */
.hm-scene-stars { position: absolute; inset: 0; }
.hm-scene-stars::before {
    content: ''; position: absolute; inset: 0 0 40%; opacity: .85;
    background:
        radial-gradient(1.4px 1.4px at 12% 9%, #fff 90%, transparent), radial-gradient(1.1px 1.1px at 30% 5%, #fff 90%, transparent),
        radial-gradient(1.6px 1.6px at 72% 7%, #fff 90%, transparent), radial-gradient(1.1px 1.1px at 86% 18%, #fff 90%, transparent),
        radial-gradient(1.2px 1.2px at 52% 3%, #fff 90%, transparent), radial-gradient(1px 1px at 42% 13%, #fff 90%, transparent),
        radial-gradient(1.3px 1.3px at 6% 30%, #fff 90%, transparent), radial-gradient(1px 1px at 62% 21%, #fff 90%, transparent),
        radial-gradient(1.2px 1.2px at 95% 34%, #fff 90%, transparent), radial-gradient(1px 1px at 22% 40%, #fff 90%, transparent),
        radial-gradient(1.2px 1.2px at 80% 46%, #fff 90%, transparent);
}
.hm-scene-stars::after {
    content: ''; position: absolute; inset: 0; opacity: .06; background: var(--inv-shine);
    -webkit-mask: var(--hm-lattice) center top / 44px 44px repeat; mask: var(--hm-lattice) center top / 44px 44px repeat;
}
.hm-scene-moon { position: absolute; left: 24%; top: 4.5%; width: 7.5vw; max-width: 2.2rem; fill: var(--inv-shine);
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--inv-shine) 70%, transparent)); }
.hm-scene-dawn { position: absolute; inset: 0;
    background: radial-gradient(85% 32% at 50% 84%, color-mix(in srgb, var(--inv-shine) 80%, #fff) 0%, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-shine)) 34%, color-mix(in srgb, var(--inv-accent) 35%, transparent) 62%, transparent 82%); }
.hm-scene-dawn__sun { position: absolute; left: 50%; top: 79%; width: 21vw; max-width: 6rem; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
    background: color-mix(in srgb, var(--inv-shine) 55%, #fff); box-shadow: 0 0 34px 10px color-mix(in srgb, var(--inv-shine) 55%, transparent); }
.inv-scene__art > .hm-scene-dunes { overflow: visible; }
.hm-scene-flight { overflow: visible; }
.hm-scene-flight__path { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: .1 5.2; opacity: .7; }
.hm-scene-flight__plane { fill: #fff; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--inv-shine) 80%, transparent)); transform: translate(-12px, 58px) rotate(-45deg) scale(1.5); }
html.inv-anim .hm-scene-flight__path { animation: hm-scene-path 4s linear 1.15s both; }
html.inv-anim .hm-scene-flight__plane { animation: hm-scene-fly 4s linear .9s both; }
@keyframes hm-scene-path { from { clip-path: inset(-10px 100% -10px -10px); } to { clip-path: inset(-10px -10px -10px -10px); } }
@keyframes hm-scene-fly {
    0% { transform: translate(-12px, 58px) rotate(-45deg) scale(1.5); }
    12.5% { transform: translate(9px, 40.7px) rotate(-34deg) scale(1.5); }
    25% { transform: translate(33px, 27.6px) rotate(-24deg) scale(1.5); }
    37.5% { transform: translate(58.7px, 18.9px) rotate(-14deg) scale(1.5); }
    50% { transform: translate(86px, 14.5px) rotate(-5deg) scale(1.5); }
    62.5% { transform: translate(114px, 14.4px) rotate(4deg) scale(1.5); }
    75% { transform: translate(142px, 18.6px) rotate(13deg) scale(1.5); }
    87.5% { transform: translate(169.7px, 27.2px) rotate(22deg) scale(1.5); }
    100% { transform: translate(196px, 40px) rotate(30deg) scale(1.5); }
}
.hm-scene-lantern, .hm-scene-still { overflow: visible; }
body.hm-body .inv-intro--scene .inv-scene__card {
    --hm-card-arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 250' preserveAspectRatio='none'%3E%3Cpath d='M0 250V80C0 50 44 24 100 0c56 24 100 50 100 80v170Z'/%3E%3C/svg%3E");
    top: 50%; width: min(var(--scene-card-w, 70vw), 17rem); aspect-ratio: auto; padding: 5rem 1.3rem 2.2rem; isolation: isolate;
    -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--inv-text); background: var(--hm-gold-grad);
    -webkit-mask: var(--hm-card-arch) center / 100% 100% no-repeat; mask: var(--hm-card-arch) center / 100% 100% no-repeat;
    filter: drop-shadow(0 18px 30px color-mix(in srgb, var(--inv-deep) 70%, transparent));
}
body.hm-body .inv-intro--scene .inv-scene__card::before { content: ''; position: absolute; inset: 4px; z-index: -1;
    -webkit-mask: var(--hm-card-arch) center / 100% 100% no-repeat; mask: var(--hm-card-arch) center / 100% 100% no-repeat;
    background: radial-gradient(90% 45% at 50% 0%, color-mix(in srgb, var(--inv-shine) 30%, transparent), transparent 70%), var(--hm-paper); }
body.hm-body .inv-intro--scene .inv-scene__card::after { content: ''; position: absolute; left: 50%; top: 2.35rem; width: 1.15rem; height: 1.15rem; translate: -50% 0;
    background: var(--hm-gold-grad); -webkit-mask: var(--hm-seal) center / contain no-repeat; mask: var(--hm-seal) center / contain no-repeat; }
body.hm-body .inv-scene__card .inv-intro__label { margin-bottom: .55rem; font: 600 .64rem/1.4 var(--hm-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--hm-rose-text); }
body.hm-body .inv-scene__card .inv-intro__names { font-family: var(--hm-display) !important; font-weight: 600; font-size: clamp(1.8rem, 8.2vw, 2.35rem); line-height: 1.08; color: var(--hm-title); text-wrap: balance; }
body.hm-body .inv-scene__card .inv-intro__rule { position: relative; width: 6.5rem; margin-block: .8rem .7rem; overflow: visible; background: linear-gradient(90deg, transparent, var(--inv-gold) 30%, var(--inv-gold) 70%, transparent); }
body.hm-body .inv-scene__card .inv-intro__date { font: 500 .72rem/1.4 var(--hm-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--hm-title); }
body.hm-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); }