/*
 * Template "Gang Lebaran" (Reuni & Halal Bihalal) — the halal bihalal of a neighbourhood as a street party (pesta
 * rakyat) in the gang: lively, funny and warm, still polite. Magenta, tosca and bright yellow (+ an orange "pop") on
 * warm cream, with a deep plum night for the dark bands. Everything is drawn in SVG/CSS: the decorated RT gate
 * (sections/_gate), strings of party bulbs (_bulbs), umbul-umbul (_umbul), garlands of triangle flags and ketupat
 * (_bunting, _ketupat), a row of estate houses (_houses), the round blue biscuit tin with rengginang inside (_kaleng,
 * the interaction in "Tema & dress code") and a jar of nastar (_toples).
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (magenta: titles' accents, buttons, awnings)   --inv-accent (tosca: pills, bands; text via --gl-accent-ink)
 *   --inv-background (warm cream)   --inv-text   --inv-deep (the plum night: dark bands, titles on light)
 *   --inv-shine (bright yellow: bulbs, badges, accents on dark)   --inv-soft (peach: the soft tone)   --inv-pop (orange)
 * Everything else is mixed from those, so a new variant only needs these eight colours.
 *
 * Section tones (set on each section in its partial): .gl-tone--cream (cream with a faint ketupat lattice),
 * --soft (peach), --night (plum night with stars), --pop (a magenta band with polka dots), --tosca (a deep tosca band).
 *
 * Revision standard (docs/template-guide.md section 10): the cover is sized in px steps per screen height (never
 * svh: Chrome on iPhone sizes it to the whole screen). 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 · 3 shared pieces (heading, bulbs, bunting, ketupat, houses, umbul, gate, tap) ·
 *           4 cover · 5 sections in page order · 6 forms · 7 shared components · 8 screen sizes · 9 motion ·
 *           10 intro scene
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Pesta Gang" variant (the variant's colours override these) */
    --inv-primary: #c2185b;
    --inv-accent: #0fa39a;
    --inv-background: #fff6e6;
    --inv-text: #2b1033;
    --inv-deep: #3b0f4f;
    --inv-shine: #ffc928;
    --inv-soft: #ffe0c7;
    --inv-pop: #ff7a1a;
    --inv-radius: 16px;

    --gl-display: 'Baloo 2', 'Nunito', system-ui, sans-serif;
    --gl-sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --gl-script: var(--inv-font-display, 'Great Vibes', cursive);
    --gl-col: 460px;
    --gl-paper: color-mix(in srgb, #fff 72%, var(--inv-background));
    --gl-title: color-mix(in srgb, var(--inv-deep) 92%, var(--inv-primary));
    --gl-primary-ink: color-mix(in srgb, var(--inv-primary) 86%, var(--inv-deep));
    --gl-accent-ink: color-mix(in srgb, var(--inv-accent) 64%, var(--inv-deep));
    --gl-muted: color-mix(in srgb, var(--inv-text) 78%, var(--inv-background));
    --gl-on-dark: color-mix(in srgb, #fff 84%, var(--inv-shine));
    --gl-on-dark-muted: color-mix(in srgb, #fff 80%, transparent);
    --gl-ring: color-mix(in srgb, var(--inv-deep) 14%, transparent);
    --gl-drop: 0 20px 34px -20px color-mix(in srgb, var(--inv-deep) 70%, transparent);
    --gl-tosca-band: color-mix(in srgb, var(--inv-accent) 62%, var(--inv-deep));
    --gl-pop-band: color-mix(in srgb, var(--inv-primary) 90%, var(--inv-deep));
    --gl-wood: #9a5b2a;
    --gl-bamboo: #d8b45c;

    /* a faint ketupat lattice (two diagonal line sets) for the cream tone */
    --gl-lattice:
        repeating-linear-gradient(45deg, transparent 0 22px, color-mix(in srgb, var(--inv-primary) 6%, transparent) 22px 23.5px),
        repeating-linear-gradient(-45deg, transparent 0 22px, color-mix(in srgb, var(--inv-accent) 7%, transparent) 22px 23.5px);
    /* polka dots for the bands */
    --gl-dots: radial-gradient(circle, rgb(255 255 255 / .13) 2.2px, transparent 2.8px) 0 0 / 22px 22px;
    /* a scalloped edge (hajatan awning), used as a mask: stripes on top, half circles along the foot */
    --gl-scallop: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, radial-gradient(9px at 50% 0, #000 97%, #0000) 0 100% / 18px 9px repeat-x;

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

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

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

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

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

.gl-main { max-width: var(--gl-col); margin: 0 auto; overflow-x: clip; }
.gl-branding { max-width: var(--gl-col); margin: 0 auto; }

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

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

/* ---------- 2. section tones ---------- */
.gl-tone--cream {
    background:
        radial-gradient(60% 24% at 100% 0%, color-mix(in srgb, var(--inv-shine) 24%, transparent), transparent 75%),
        radial-gradient(60% 24% at 0% 100%, color-mix(in srgb, var(--inv-accent) 12%, transparent), transparent 75%),
        var(--gl-lattice), var(--inv-background);
}
.gl-tone--soft {
    background:
        radial-gradient(80% 30% at 50% 0%, color-mix(in srgb, #fff 55%, transparent), transparent 75%),
        radial-gradient(circle, color-mix(in srgb, var(--inv-primary) 10%, transparent) 1.6px, transparent 2.2px) 0 0 / 20px 20px,
        linear-gradient(180deg, var(--inv-soft), color-mix(in srgb, var(--inv-soft) 50%, var(--inv-background)));
}
.gl-tone--night {
    color: var(--gl-on-dark);
    background:
        radial-gradient(1.5px 1.5px at 12% 14%, #fff, transparent), radial-gradient(1.2px 1.2px at 32% 6%, #fff, transparent),
        radial-gradient(1.4px 1.4px at 78% 18%, #fff, transparent), radial-gradient(1.2px 1.2px at 58% 30%, #fff, transparent),
        radial-gradient(1.3px 1.3px at 90% 46%, #fff, transparent), radial-gradient(1.2px 1.2px at 6% 58%, #fff, transparent),
        radial-gradient(90% 40% at 50% 100%, color-mix(in srgb, var(--inv-primary) 45%, transparent), transparent 75%),
        radial-gradient(70% 30% at 100% 0%, color-mix(in srgb, var(--inv-accent) 22%, transparent), transparent 75%),
        var(--inv-deep);
}
.gl-tone--pop {
    color: #fff;
    background:
        radial-gradient(80% 40% at 50% 0%, color-mix(in srgb, var(--inv-pop) 38%, transparent), transparent 75%),
        radial-gradient(70% 40% at 0% 100%, color-mix(in srgb, var(--inv-deep) 45%, transparent), transparent 75%),
        var(--gl-dots), var(--gl-pop-band);
}
.gl-tone--tosca {
    color: #fff;
    background:
        radial-gradient(80% 40% at 100% 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) 40%, transparent), transparent 75%),
        var(--gl-dots), var(--gl-tosca-band);
}
:is(.gl-tone--night, .gl-tone--pop, .gl-tone--tosca) a:not(.inv-button) { color: var(--inv-shine); }
.gl-tone--night .gl-arabic { color: var(--inv-shine); }

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

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

/* section heading: an eyebrow pill between two little ketupat, a chunky title, the last word in the script font */
.gl-heading { margin: 0 0 2rem; }
.gl-heading__eyebrow {
    display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .5rem;
    font-size: .7rem; font-weight: 900; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; color: var(--gl-accent-ink);
}
.gl-heading__eyebrow span { padding: .28rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--inv-accent) 14%, #fff); }
.gl-heading__ketupat { width: .95rem; height: 1.4rem; flex: none; margin-top: -.35rem; }
.gl-heading__title {
    margin: 0; font-family: var(--gl-display); font-size: 2.3rem; font-weight: 800; line-height: 1.02;
    letter-spacing: -.01em; color: var(--gl-title); text-wrap: balance;
}
.gl-heading__title em {
    display: inline-block; margin-left: .06em; font-family: var(--gl-script); font-style: normal; font-weight: 400; font-size: 1.32em;
    line-height: .8; word-spacing: .1em; color: var(--gl-primary-ink);
}
:is(.gl-tone--night, .gl-tone--pop, .gl-tone--tosca) .gl-heading__title { color: #fff; }
:is(.gl-tone--night, .gl-tone--pop, .gl-tone--tosca) .gl-heading__title em { color: var(--inv-shine); }
:is(.gl-tone--night, .gl-tone--pop, .gl-tone--tosca) .gl-heading__eyebrow { color: var(--inv-deep); }
:is(.gl-tone--night, .gl-tone--pop, .gl-tone--tosca) .gl-heading__eyebrow span { background: var(--inv-shine); }

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

/* the string of party bulbs (sections/_bulbs) */
.gl-bulbs { display: block; overflow: visible; }
.gl-bulbs__wire { stroke: color-mix(in srgb, var(--inv-deep) 70%, transparent); stroke-width: 1.6; }
.gl-tone--night .gl-bulbs__wire, .gl-cover .gl-bulbs__wire, .gl-scene-bulbs .gl-bulbs__wire { stroke: color-mix(in srgb, var(--inv-deep) 55%, #000); }
.gl-bulb { --b: var(--inv-shine); }
.gl-bulb--1 { --b: var(--inv-primary); }
.gl-bulb--2 { --b: var(--inv-shine); }
.gl-bulb--3 { --b: var(--inv-accent); }
.gl-bulb--4 { --b: var(--inv-pop); }
.gl-bulb--5 { --b: #fff3c4; }
.gl-bulb__glow { fill: var(--b); opacity: .32; }
.gl-bulb__cap { fill: #4a4458; }
.gl-bulb__glass { fill: var(--b); stroke: color-mix(in srgb, var(--b) 70%, #000); stroke-width: .6; }
.gl-bulb__shine { fill: #fff; opacity: .75; }

/* a section with a string of bulbs or a garland along its top edge */
.gl-section__bulbs { position: absolute; top: -.15rem; left: -1%; width: 102%; height: auto; pointer-events: none; }
.gl-section__bunting { position: absolute; top: -.1rem; left: 0; width: 100%; height: auto; pointer-events: none; }
.gl-section:has(> .gl-section__bulbs) { padding-top: 5.4rem; }
.gl-section:has(> .gl-section__bunting) { padding-top: 5.6rem; }

/* the garland of triangle flags and ketupat (sections/_bunting) */
.gl-bunting { display: block; overflow: visible; }
.gl-bunting__rope { stroke: color-mix(in srgb, var(--inv-deep) 65%, transparent); stroke-width: 1.6; }
.gl-tone--pop .gl-bunting__rope, .gl-tone--tosca .gl-bunting__rope { stroke: rgb(255 255 255 / .7); }
.gl-bunting__flag { fill: var(--f); }
.gl-bunting__flag--1 { --f: var(--inv-primary); }
.gl-bunting__flag--2 { --f: var(--inv-shine); }
.gl-bunting__flag--3 { --f: var(--inv-accent); }
.gl-bunting__flag--4 { --f: var(--inv-pop); }
.gl-tone--pop .gl-bunting__flag--1 { --f: #fff; }
.gl-bunting__stripe { stroke: rgb(255 255 255 / .55); stroke-width: 2; stroke-linecap: round; }
.gl-tone--pop .gl-bunting__flag--1 .gl-bunting__stripe { stroke: var(--inv-primary); }

/* one ketupat (sections/_ketupat, and the ketupat in the garland) */
.gl-ketupat { display: block; overflow: visible; }
.gl-ketupat__body { fill: #9cc33a; }
.gl-ketupat__weave { stroke: #5c8a16; stroke-width: 1.6; stroke-linecap: round; fill: none; }
.gl-ketupat__edge { fill: none; stroke: #4c7412; stroke-width: 1.4; stroke-linejoin: round; }
.gl-ketupat__string { stroke: #8a6d3b; stroke-width: 1.5; fill: none; }
.gl-ketupat__tail { stroke: #86b52a; stroke-width: 3.2; stroke-linecap: round; fill: none; }
.gl-tone--night .gl-ketupat__string, .gl-tone--pop .gl-ketupat__string, .gl-tone--tosca .gl-ketupat__string { stroke: rgb(255 255 255 / .6); }

/* the row of estate houses (sections/_houses) — night colours: dusky walls, glowing windows */
.gl-houses { display: block; }
.gl-house__wall { fill: color-mix(in srgb, var(--inv-deep) 62%, var(--inv-soft)); }
.gl-house__wall--2 { fill: color-mix(in srgb, var(--inv-deep) 72%, var(--inv-accent)); }
.gl-house__wall--3 { fill: color-mix(in srgb, var(--inv-deep) 66%, var(--inv-primary)); }
.gl-house__roof { fill: var(--inv-primary); }
.gl-house__roof--2 { fill: var(--inv-pop); }
.gl-house__roof--3 { fill: var(--inv-accent); }
.gl-house__roof--4 { fill: color-mix(in srgb, var(--inv-shine) 80%, var(--inv-pop)); }
.gl-house__vent { fill: var(--inv-shine); opacity: .85; }
.gl-house__window { fill: var(--inv-shine); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--inv-shine) 80%, transparent)); }
.gl-house__bar { stroke: color-mix(in srgb, var(--inv-deep) 60%, transparent); stroke-width: 1.4; }
.gl-house__door { fill: color-mix(in srgb, var(--inv-deep) 55%, #000); }
.gl-houses__fence { stroke: color-mix(in srgb, #fff 55%, var(--inv-soft)); stroke-width: 1.6; fill: none; opacity: .75; }
.gl-houses__fence--posts { stroke-width: 2; }
.gl-houses__ground { fill: color-mix(in srgb, var(--inv-deep) 60%, #000); }

/* the moon and star (opening, closing, scene) */
.gl-moon { fill: var(--inv-shine); }
.gl-star { fill: #fff6cf; }

/* the umbul-umbul (sections/_umbul) */
.gl-umbul { display: block; overflow: visible; }
.gl-umbul--flip .gl-umbul__all { transform: scaleX(-1); transform-box: view-box; transform-origin: 24px 0; }
.gl-umbul__pole { stroke: var(--gl-bamboo); stroke-width: 3.6; stroke-linecap: round; fill: none; }
.gl-umbul__nodes { stroke: #a07a2c; stroke-width: 2; stroke-linecap: round; }
.gl-umbul__tip { fill: var(--inv-shine); }
.gl-umbul__flag { transform-box: view-box; transform-origin: 11px 18px; }
.gl-umbul--1 { --u-band: var(--inv-primary); --u-stripe: var(--inv-shine); }
.gl-umbul--2 { --u-band: var(--inv-accent); --u-stripe: var(--inv-pop); }
.gl-umbul--3 { --u-band: var(--inv-accent); --u-stripe: var(--inv-shine); }
.gl-umbul--4 { --u-band: var(--inv-pop); --u-stripe: var(--inv-primary); }
.gl-umbul__band { fill: var(--u-band); }
.gl-umbul__stripe { fill: var(--u-stripe); }
.gl-umbul__dots { stroke: #fff; stroke-width: 3.4; stroke-linecap: round; opacity: .8; }

/* the decorated RT gate (sections/_gate): striped pillars, crescent finials, crossbeam + bulbs, the painted sign */
.gl-gate {
    --pillar: 1.5rem; --beam-y: 3.7rem;
    position: relative; width: 100%; padding: calc(var(--beam-y) + .55rem) var(--pillar) 0;
}
.gl-gate__opening {
    position: relative; height: var(--gl-photo-h, 18rem); overflow: hidden; background: var(--inv-deep);
    -webkit-mask: linear-gradient(180deg, #000 82%, rgb(0 0 0 / .4) 96%, transparent); mask: linear-gradient(180deg, #000 82%, rgb(0 0 0 / .4) 96%, transparent);
}
.gl-gate__photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.gl-gate__photo--bg { background: center 25% / cover no-repeat; }
.gl-gate__empty {
    position: absolute; inset: 0;
    background: radial-gradient(80% 50% at 50% 100%, color-mix(in srgb, var(--inv-primary) 55%, transparent), transparent 75%), var(--inv-deep);
}
.gl-gate__moon { position: absolute; top: 18%; right: 14%; width: 22%; fill: var(--inv-shine); }
.gl-gate__houses { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 45%; }
.gl-gate__pillar {
    position: absolute; z-index: 2; top: var(--beam-y); bottom: -.35rem; width: var(--pillar); border-radius: 4px 4px 2px 2px;
    background: repeating-linear-gradient(-35deg, var(--inv-primary) 0 9px, #fff 9px 13px, var(--inv-accent) 13px 22px, #fff 22px 26px, var(--inv-shine) 26px 35px, #fff 35px 39px);
    box-shadow: inset 3px 0 0 rgb(255 255 255 / .35), inset -4px 0 0 rgb(0 0 0 / .14), 0 10px 18px -8px rgb(0 0 0 / .4);
}
.gl-gate__pillar--left { left: 0; }
.gl-gate__pillar--right { right: 0; }
.gl-gate__pillar::after {
    content: ''; position: absolute; left: -.3rem; right: -.3rem; bottom: 0; height: .75rem; border-radius: 3px;
    background: var(--inv-deep); box-shadow: inset 0 2px 0 rgb(255 255 255 / .18);
}
.gl-gate__finial { position: absolute; left: 50%; bottom: calc(100% + .55rem); width: 1.5rem; margin-left: -.75rem; overflow: visible; fill: var(--inv-shine); }
.gl-gate__finial-star { fill: #fff; }
.gl-gate__finial-stem { stroke: var(--inv-deep); stroke-width: 3; }
.gl-gate__beam {
    position: absolute; z-index: 3; top: var(--beam-y); left: -.3rem; right: -.3rem; height: .62rem; border-radius: 3px;
    background: radial-gradient(circle, var(--inv-shine) 1.6px, transparent 2.2px) 0 50% / 12px 100% repeat-x, var(--inv-deep);
    box-shadow: 0 6px 10px -6px rgb(0 0 0 / .5);
}
.gl-gate__bulbs { position: absolute; z-index: 3; top: calc(var(--beam-y) + .3rem); left: var(--pillar); width: calc(100% - var(--pillar) * 2); height: auto; pointer-events: none; }
.gl-gate__sign {
    position: absolute; z-index: 4; top: 0; left: 50%; width: 76%; height: calc(var(--beam-y) + .45rem); translate: -50% 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .45rem .8rem .25rem;
    color: #fff; text-align: center;
    background:
        radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--inv-pop) 40%, transparent), transparent 70%),
        var(--inv-primary);
    border-radius: 50% 50% .7rem .7rem / 60% 60% .7rem .7rem;
    box-shadow: inset 0 0 0 3px var(--inv-shine), inset 0 0 0 5px var(--inv-primary), inset 0 0 0 6.5px color-mix(in srgb, #fff 70%, var(--inv-shine)), 0 10px 18px -10px rgb(0 0 0 / .55);
}
.gl-gate__ribbon {
    display: block; font-family: var(--gl-script); font-size: 1.05rem; line-height: 1.1; color: var(--inv-shine); white-space: nowrap; word-spacing: .12em;
}
.gl-gate__title {
    margin: 0; max-width: 100%; font-family: var(--gl-display); font-size: 1.12rem; font-weight: 800; line-height: 1.08; letter-spacing: .01em; text-wrap: balance;
    text-shadow: 0 2px 0 color-mix(in srgb, var(--inv-deep) 55%, transparent);
}
.gl-gate__badge {
    position: absolute; top: -.75rem; left: 50%; display: grid; place-items: center; min-width: 1.85rem; height: 1.85rem; padding: 0 .35rem; translate: -50% 0;
    border-radius: 999px; font-family: var(--gl-display); font-size: .86rem; font-weight: 800; line-height: 1; color: var(--inv-deep);
    background: var(--inv-shine); box-shadow: 0 0 0 2.5px var(--inv-primary), 0 4px 8px -3px rgb(0 0 0 / .4);
}

/* the tap marker: two pulsing rings, a tapping hand and a label */
.gl-tap { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.gl-tap__ring {
    position: absolute; left: var(--tap-x, 50%); top: var(--tap-y, 50%); width: 5.6rem; aspect-ratio: 1; margin: -2.8rem 0 0 -2.8rem; border-radius: 50%;
    border: 3px solid var(--inv-shine); opacity: 0;
}
.gl-tap__hand {
    position: absolute; left: calc(var(--tap-x, 50%) + 1.1rem); top: calc(var(--tap-y, 50%) + .6rem); width: 2.7rem; height: 2.7rem;
    fill: #fff; stroke: var(--inv-deep); stroke-width: 1.5; stroke-linejoin: round; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .35));
}
.gl-tap__label {
    position: absolute; left: 50%; bottom: -.6rem; translate: -50% 0; white-space: nowrap;
    padding: .42rem 1.05rem; border-radius: 999px; font-size: .8rem; font-weight: 900; letter-spacing: .04em;
    color: var(--inv-deep); background: var(--inv-shine); box-shadow: 0 0 0 2.5px #fff, 0 8px 16px -8px rgb(0 0 0 / .55);
}

/* the round yellow badge (organizer milestone) */
.gl-badge {
    display: grid; place-content: center; width: 5rem; height: 5rem; margin: 0; border-radius: 50%; text-align: center; rotate: 10deg;
    color: var(--inv-deep);
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, #fff 40%, var(--inv-shine)), var(--inv-shine) 62%);
    box-shadow: inset 0 0 0 3px var(--inv-shine), inset 0 0 0 4.5px var(--inv-primary), 0 10px 18px -10px rgb(0 0 0 / .55);
}
.gl-badge strong { font-family: var(--gl-display); font-size: 1.9rem; font-weight: 800; line-height: 1; }
.gl-badge span { margin-top: .05rem; padding: 0 .55rem; font-size: .52rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; }
.gl-badge--text span { font-size: .62rem; }

/* ---------- 4. cover ---------- */
.gl-cover {
    --gl-photo-h: 330px;
    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;
    padding: 1.15rem 1rem 1.6rem; isolation: isolate; color: var(--inv-text);
    background:
        radial-gradient(80% 30% at 50% 0%, color-mix(in srgb, var(--inv-shine) 30%, transparent), transparent 72%),
        radial-gradient(60% 30% at 0% 60%, color-mix(in srgb, var(--inv-primary) 14%, transparent), transparent 72%),
        radial-gradient(60% 30% at 100% 70%, color-mix(in srgb, var(--inv-accent) 16%, transparent), transparent 72%),
        var(--gl-lattice), var(--inv-background);
    transition: opacity .9s ease;
}
.gl-cover__inner { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; min-height: 100%; justify-content: center; text-align: center; transition: transform .9s cubic-bezier(.5, 0, .3, 1); }

.gl-cover__stage { position: relative; display: flex; justify-content: center; width: 100%; padding: 0 2.5rem; }
.gl-cover__gate { max-width: 19.5rem; }
.gl-cover__umbul { position: absolute; bottom: -.4rem; width: 2.3rem; height: calc(var(--gl-photo-h) + 1.4rem); }
.gl-cover__umbul--left { left: .1rem; }
.gl-cover__umbul--right { right: .1rem; }

.gl-cover__text { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: .75rem; }
.gl-cover__name {
    margin: 0; max-width: 17ch; font-family: var(--gl-display); font-size: clamp(1.65rem, 7.4vw, 2.1rem); font-weight: 800; line-height: 1.04;
    letter-spacing: -.01em; color: var(--gl-title); text-wrap: balance; overflow-wrap: anywhere;
}
.gl-cover__batch {
    margin: .45rem 0 0; padding: .22rem .85rem; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .04em;
    color: #fff; background: var(--gl-accent-ink);
}
.gl-cover__date {
    display: inline-flex; align-items: center; gap: .45rem; margin: .45rem 0 0; font-size: .92rem; font-weight: 900; color: var(--gl-primary-ink);
}
.gl-cover__date::before, .gl-cover__date::after { content: ''; width: .45rem; height: .45rem; rotate: 45deg; border-radius: 1px; background: var(--inv-shine); box-shadow: 0 0 0 1.5px var(--inv-pop); }
.gl-cover__quote {
    max-width: 32ch; margin: .3rem 0 0; font-size: .9rem; font-style: italic; font-weight: 600; line-height: 1.38; color: var(--gl-muted); text-wrap: balance;
}
.gl-guest {
    position: relative; width: min(100%, 18.5rem); margin: 0; padding: 1.35rem .9rem .55rem; border-radius: 4px 4px 14px 14px; background: #fff;
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--inv-primary) 22%, transparent), 0 14px 22px -16px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.gl-guest__awning {
    position: absolute; top: -.3rem; left: -.35rem; right: -.35rem; height: 1.35rem; border-radius: 4px 4px 0 0;
    background: repeating-linear-gradient(90deg, var(--inv-primary) 0 18px, #fff 18px 36px);
    -webkit-mask: var(--gl-scallop); mask: var(--gl-scallop);
    filter: drop-shadow(0 2px 1px rgb(0 0 0 / .12));
}
.gl-guest__label { margin: 0; font-size: .62rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--gl-accent-ink); }
.gl-guest__name { display: block; margin: 0; font-family: var(--gl-display); font-size: 1.32rem; font-weight: 700; line-height: 1.2; color: var(--gl-title); overflow-wrap: anywhere; }
.gl-cover__guest { margin-top: .8rem; }
.gl-cover__open {
    margin-top: .95rem; min-height: 3rem; padding: .7rem 1.9rem; font-family: var(--gl-display); font-size: 1.02rem; font-weight: 800; letter-spacing: .01em;
    color: #fff; background: var(--inv-primary);
    box-shadow: 0 0 0 3px var(--inv-background), 0 0 0 5px var(--inv-shine), 0 14px 24px -12px color-mix(in srgb, var(--inv-primary) 80%, transparent);
}

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

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

/* opening: bulbs, moon, the greeting, the quote on a cloth banner between bamboo poles, the houses */
.gl-opening { padding-bottom: 0; }
.gl-opening__moon { position: absolute; z-index: -1; top: 4.4rem; right: 1.1rem; width: 3.4rem; }
.gl-opening__basmalah { margin: .3rem auto .9rem !important; font-size: 1.7rem; }
.gl-opening__greeting {
    margin: 0 auto .8rem !important; max-width: 18ch !important; font-family: var(--gl-display); font-size: 1.95rem; font-weight: 800; line-height: 1.1;
    color: var(--inv-shine); text-wrap: balance;
}
.gl-opening__message { font-size: .95rem; color: var(--gl-on-dark-muted); max-width: 33ch !important; }
.gl-banner { position: relative; margin: 2.2rem auto 0; max-width: 23rem; padding: 0 1.25rem; }
.gl-banner__pole { position: absolute; top: -1.2rem; bottom: -1.6rem; width: .5rem; border-radius: 4px; background: linear-gradient(90deg, #b78a35, var(--gl-bamboo) 40%, #a77b2c); }
.gl-banner__pole::after { content: ''; position: absolute; left: -2px; right: -2px; top: 30%; height: 3px; background: #8f6824; box-shadow: 0 2.4rem 0 #8f6824; }
.gl-banner__pole--left { left: 0; }
.gl-banner__pole--right { right: 0; }
.gl-banner__cloth {
    position: relative; padding: 1.3rem 1.1rem 1.15rem; color: var(--inv-text);
    background:
        linear-gradient(90deg, rgb(0 0 0 / .05), transparent 12%, transparent 88%, rgb(0 0 0 / .05)),
        #fffaf0;
    clip-path: polygon(0 3%, 25% 0, 50% 2.5%, 75% 0, 100% 3%, 100% 97%, 75% 100%, 50% 97.5%, 25% 100%, 0 97%);
    box-shadow: inset 0 6px 0 var(--inv-primary), inset 0 -6px 0 var(--inv-accent);
}
.gl-banner__cloth blockquote { margin: 0; font-size: .98rem; font-weight: 700; font-style: italic; line-height: 1.5; color: var(--gl-title); }
.gl-banner__cloth figcaption {
    display: inline-block; margin-top: .65rem; padding: .2rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 900; letter-spacing: .06em;
    color: #fff; background: var(--inv-primary);
}
.gl-opening__houses { width: calc(100% + 2.7rem); height: 6rem; margin: 2.6rem -1.35rem 0; }

/* organizer: the house with a gable roof and bulbs on the eave, the photo as its front, the number plate, the badge */
.gl-home { position: relative; max-width: 19rem; margin: 0 auto; padding-top: 5.2rem; }
.gl-home__roof { position: absolute; z-index: 2; top: 0; left: -1rem; width: calc(100% + 2rem); height: 5.6rem; overflow: visible; filter: drop-shadow(0 8px 8px rgb(0 0 0 / .18)); }
.gl-home__roof-fill { fill: var(--inv-primary); }
.gl-home__roof-tiles { stroke: rgb(255 255 255 / .3); stroke-width: 3; vector-effect: non-scaling-stroke; }
.gl-home__roof-edge { fill: none; stroke: var(--inv-deep); stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.gl-home__vent { fill: var(--inv-shine); }
.gl-home__vent-bars { stroke: var(--inv-deep); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.gl-home__bulbs { position: absolute; z-index: 3; top: 4.6rem; left: -.6rem; width: calc(100% + 1.2rem); height: auto; }
.gl-home__front {
    position: relative; margin: 0; aspect-ratio: 4 / 3.3; overflow: hidden; border-radius: 0 0 10px 10px;
    background: color-mix(in srgb, var(--inv-soft) 70%, #fff);
    box-shadow: 0 0 0 5px #fff, 0 0 0 7px color-mix(in srgb, var(--inv-deep) 18%, transparent), var(--gl-drop);
}
.gl-home__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.gl-home__empty { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-around; padding: 0 1.2rem; background: repeating-linear-gradient(180deg, transparent 0 18px, rgb(0 0 0 / .04) 18px 19px), color-mix(in srgb, var(--inv-soft) 70%, #fff); }
.gl-home__window { width: 34%; height: 40%; margin-bottom: 30%; border-radius: 4px; background: linear-gradient(90deg, transparent 48%, var(--inv-deep) 48% 52%, transparent 52%), var(--inv-shine); box-shadow: 0 0 0 4px var(--inv-deep); }
.gl-home__door { width: 24%; height: 62%; border-radius: 4px 4px 0 0; background: var(--inv-accent); box-shadow: 0 0 0 4px var(--inv-deep); }
.gl-home__plate {
    position: absolute; left: .7rem; bottom: .7rem; display: inline-flex; align-items: baseline; gap: .25rem; padding: .2rem .65rem .25rem; border-radius: 6px;
    font-family: var(--gl-display); font-size: 1.15rem; font-weight: 800; line-height: 1.1; color: #fff; background: #1f4fb8;
    box-shadow: inset 0 0 0 2px #1f4fb8, inset 0 0 0 3.5px #fff, 0 6px 10px -4px rgb(0 0 0 / .45);
}
.gl-home__plate span { font-family: var(--gl-sans); font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.gl-home__badge { position: absolute; z-index: 4; top: 3.4rem; right: -.8rem; }
.gl-organizer__card {
    position: relative; max-width: 23rem; margin: 1.7rem auto 0; padding: 1.25rem 1.2rem 1.3rem; border-radius: 18px; background: #fff;
    box-shadow: inset 0 -6px 0 var(--inv-accent), 0 0 0 1.5px var(--gl-ring), var(--gl-drop);
}
.gl-organizer__name { margin: 0; font-family: var(--gl-display); font-size: 1.65rem; font-weight: 800; line-height: 1.08; color: var(--gl-title); text-wrap: balance; overflow-wrap: anywhere; }
.gl-organizer__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin: .55rem 0 0; }
.gl-organizer__batch--soft { color: var(--inv-deep) !important; background: var(--inv-shine) !important; }
.gl-organizer__batch {
    display: inline-block; margin: 0; padding: .22rem .8rem; border-radius: 999px; font-size: .76rem; font-weight: 800;
    color: #fff; background: var(--gl-accent-ink);
}
.gl-organizer__tagline { margin: .7rem 0 0; font-family: var(--gl-script); font-size: 1.7rem; line-height: 1.15; word-spacing: .12em; color: var(--gl-primary-ink); text-wrap: balance; }

/* party (magenta band): the biscuit tin, then the theme ticket, the dress-code card, the note and the hashtag */
.gl-tin {
    --tap-x: 50%; --tap-y: 56%;
    position: relative; display: block; width: min(15.5rem, 80%); margin: .4rem auto 0; padding: 0; border: 0; background: none; cursor: pointer;
    color: inherit; -webkit-tap-highlight-color: transparent;
}
.gl-tin:focus-visible { outline: 3px solid var(--inv-shine); outline-offset: 6px; border-radius: 20px; }
.gl-kaleng { display: block; width: 100%; height: auto; overflow: visible; }
.gl-tin__shadow { fill: rgb(0 0 0 / .28); }
.gl-tin__inside { fill: #0a1c4c; }
.gl-tin__grain { stroke: #c18f45; stroke-width: 2.3; stroke-linecap: round; }
.gl-tin__ring { fill: none; stroke: rgb(255 255 255 / .6); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: .1 6; }
.gl-tin__label-rim { fill: #f2c546; }
.gl-tin__label { fill: #fff8e8; }
.gl-tin__nastar { fill: #eaa73a; stroke: #b6721a; stroke-width: 1.2; }
.gl-tin__clove { stroke: #6b3a12; stroke-width: 2.4; stroke-linecap: round; }
.gl-tin__salju { fill: #fff; stroke: #e3d6bf; stroke-width: 1.2; }
.gl-tin__keju { fill: #f6c94e; stroke: #c98d1c; stroke-width: 1.2; }
.gl-tin__leaf { fill: #3aa35a; }
.gl-tin__glint { stroke: rgb(255 255 255 / .3); stroke-width: 6; stroke-linecap: round; }
.gl-tin__lid-ring { fill: none; stroke: rgb(255 255 255 / .5); stroke-width: 2; }
.gl-tin__lid-ring--dots { stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: .1 6; }
.gl-tin__lid-star { fill: #ffd54a; }
.gl-tin__lid, .gl-tin__crackers, .gl-tin__cracker { transform-box: fill-box; transform-origin: 50% 50%; }
/* the open pose (also the state without JavaScript): the lid rests tilted on the right, the rengginang stick out */
.gl-tin__lid { transform: translate(34%, -62%) rotate(22deg); }
.gl-tin__crackers { transform: translateY(-14px); }
.gl-tin__joke {
    position: absolute; z-index: 4; top: -1.5rem; left: -1.2rem; rotate: -9deg; padding: .32rem .8rem .36rem; border-radius: 12px;
    font-family: var(--gl-display); font-size: 1.05rem; font-weight: 800; line-height: 1.1; white-space: nowrap; color: var(--inv-deep); background: var(--inv-shine);
    box-shadow: 0 0 0 2.5px #fff, 0 10px 16px -8px rgb(0 0 0 / .5);
}
.gl-tin__joke::after { content: ''; position: absolute; right: 1.1rem; bottom: -.45rem; width: .9rem; height: .9rem; rotate: 45deg; background: var(--inv-shine); border-radius: 0 0 3px 0; }
/* the closed pose, only while armed (JavaScript on) */
.gl-party.is-armed .gl-tin__lid { transform: none; }
.gl-party.is-armed .gl-tin__crackers { transform: translateY(16px); }
.gl-party.is-armed .gl-tin__joke { opacity: 0; }
.gl-party.is-armed :is(.gl-party__reveal, .gl-party__lead) { display: none; }
.gl-party__lead { margin: 1.4rem auto 1rem !important; font-weight: 700; text-wrap: balance; color: var(--gl-on-dark); }

.gl-party__reveal { display: grid; gap: 1rem; max-width: 24rem; margin: 0 auto; }
.gl-party__label { display: block; font-size: .64rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--gl-primary-ink); }
.gl-party__ticket {
    position: relative; padding: 1rem 1.2rem 1.05rem; border-radius: 16px; color: var(--inv-text); background: var(--gl-paper);
    box-shadow: inset 0 0 0 2px var(--gl-paper), inset 0 0 0 4px color-mix(in srgb, var(--inv-primary) 35%, transparent), 0 16px 26px -16px rgb(0 0 0 / .6);
}
.gl-party__ticket::before, .gl-party__ticket::after { content: ''; position: absolute; top: 50%; width: 1.1rem; height: 1.1rem; margin-top: -.55rem; border-radius: 50%; background: var(--gl-pop-band); }
.gl-party__ticket::before { left: -.55rem; }
.gl-party__ticket::after { right: -.55rem; }
.gl-party__theme { margin: .2rem 0 0; font-family: var(--gl-display); font-size: 1.55rem; font-weight: 800; line-height: 1.1; color: var(--gl-title); text-wrap: balance; }
.gl-party__dress {
    display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); align-items: center; gap: .9rem; padding: 1rem 1.1rem; border-radius: 16px; text-align: left;
    color: var(--inv-text); background: #fff; box-shadow: 0 16px 26px -16px rgb(0 0 0 / .6);
}
.gl-party__shirt { width: 100%; height: auto; overflow: visible; }
.gl-party__shirt-body { fill: var(--gl-pick, var(--inv-accent)); stroke: var(--inv-deep); stroke-width: 1.6; stroke-linejoin: round; transition: fill .35s ease; }
.gl-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; }
.gl-party__dress-name { margin: .1rem 0 0; font-family: var(--gl-display); font-size: 1.2rem; font-weight: 800; line-height: 1.15; color: var(--gl-title); }
.gl-swatches { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .55rem; }
.gl-swatch {
    width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--gl-swatch);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15), 0 0 0 2px #fff, 0 0 0 3.5px color-mix(in srgb, var(--inv-deep) 22%, transparent);
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease;
}
.gl-swatch[aria-pressed=true] { transform: scale(1.12); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15), 0 0 0 2px #fff, 0 0 0 4.5px var(--inv-primary); }
.gl-swatch:focus-visible { outline: 2px solid var(--inv-primary); outline-offset: 4px; }
.gl-party__hint { margin: .45rem 0 0; font-size: .74rem; color: var(--gl-muted); }
.gl-party__hint--light { margin: -.4rem 0 0; text-align: center; color: var(--gl-on-dark-muted); }
.gl-party__note {
    position: relative; margin: 0; padding: 1.1rem 1.15rem 1rem 3.4rem; border-radius: 16px; text-align: left; font-size: .9rem; font-weight: 700; line-height: 1.5;
    color: var(--inv-deep); background: var(--inv-shine); box-shadow: 0 16px 26px -16px rgb(0 0 0 / .6);
}
/* a little plate of ketupat opor on the note (the potluck) */
.gl-party__note::before {
    content: ''; position: absolute; left: .85rem; top: 1rem; width: 1.9rem; height: 1.9rem; border-radius: 50%;
    background:
        linear-gradient(45deg, transparent 38%, #5c8a16 38% 42%, transparent 42% 58%, #5c8a16 58% 62%, transparent 62%) 50% 46% / .95rem .95rem no-repeat,
        linear-gradient(-45deg, transparent 38%, #5c8a16 38% 42%, transparent 42% 58%, #5c8a16 58% 62%, transparent 62%) 50% 46% / .95rem .95rem no-repeat,
        radial-gradient(circle at 50% 46%, #9cc33a .5rem, transparent .52rem),
        radial-gradient(circle, #fff 60%, #e9dcc5 62% 70%, #fff 72%);
    box-shadow: 0 3px 6px -2px rgb(0 0 0 / .35);
}
.gl-party__hashtag {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .45rem .5rem .45rem 1.05rem; border-radius: 999px;
    background: var(--inv-deep); box-shadow: 0 0 0 2px color-mix(in srgb, var(--inv-shine) 60%, transparent);
}
.gl-party__hashtag-text { min-width: 0; font-family: var(--gl-display); font-size: 1.12rem; font-weight: 800; color: var(--inv-shine); overflow-wrap: anywhere; text-align: left; }
.gl-party__copy {
    flex: none; min-height: 2.3rem; padding: .3rem 1rem; border: 0; border-radius: 999px; cursor: pointer;
    font: 900 .78rem/1 var(--gl-sans); color: var(--inv-deep); background: var(--inv-shine);
}

/* events: a card under a striped hajatan awning, a round "tanggalan" badge, icon rows */
.gl-events .gl-heading { margin-bottom: 2.5rem; }
.gl-event {
    position: relative; max-width: 25rem; margin: 0 auto 2.6rem; padding-top: 1.05rem; border-radius: 6px 6px 20px 20px; text-align: left;
    background: #fff; box-shadow: 0 0 0 1.5px var(--gl-ring), var(--gl-drop);
}
.gl-event:last-child { margin-bottom: 0; }
.gl-event__awning {
    position: absolute; z-index: 2; top: -.9rem; left: -.45rem; right: -.45rem; height: 1.9rem; border-radius: 6px 6px 0 0;
    background: repeating-linear-gradient(90deg, var(--inv-primary) 0 18px, #fff 18px 36px);
    -webkit-mask: var(--gl-scallop); mask: var(--gl-scallop);
    filter: drop-shadow(0 3px 2px rgb(0 0 0 / .15));
}
.gl-event--alt .gl-event__awning { background: repeating-linear-gradient(90deg, var(--inv-accent) 0 18px, #fff 18px 36px); }
.gl-event__media { margin: 0 .8rem; overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 10; }
.gl-event__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.gl-event__body { padding: 1rem 1.1rem 1.25rem; }
.gl-event__top { display: grid; grid-template-columns: 4.7rem minmax(0, 1fr); align-items: center; gap: .9rem; }
.gl-event__date {
    display: grid; place-content: center; width: 4.7rem; height: 4.7rem; margin: 0; border-radius: 50%; text-align: center; color: var(--inv-deep);
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, #fff 40%, var(--inv-shine)), var(--inv-shine) 62%);
    box-shadow: inset 0 0 0 3px var(--inv-shine), inset 0 0 0 4.5px var(--inv-primary), 0 8px 14px -8px rgb(0 0 0 / .45);
}
.gl-event--alt .gl-event__date { box-shadow: inset 0 0 0 3px var(--inv-shine), inset 0 0 0 4.5px var(--inv-accent), 0 8px 14px -8px rgb(0 0 0 / .45); }
.gl-event__weekday, .gl-event__month { font-size: .56rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; line-height: 1.1; }
.gl-event__day { font-family: var(--gl-display); font-size: 1.95rem; font-weight: 800; line-height: .95; }
.gl-event__no { font-size: .64rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--gl-accent-ink); }
.gl-event__name { margin: .05rem 0 0; font-family: var(--gl-display); font-size: 1.3rem; font-weight: 800; line-height: 1.12; color: var(--gl-title); text-wrap: balance; }
.gl-event__full { margin: .15rem 0 0; font-size: .82rem; font-weight: 700; color: var(--gl-muted); }
.gl-event__rows { display: grid; gap: .6rem; margin: 1rem 0 0; padding: .9rem 0 0; list-style: none; border-top: 2px dashed color-mix(in srgb, var(--inv-primary) 22%, transparent); }
.gl-event__rows li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: start; gap: .6rem; font-size: .9rem; line-height: 1.45; }
.gl-event__rows .gl-icon {
    width: 2rem; height: 2rem; padding: .42rem; border-radius: 50%; color: var(--gl-accent-ink); background: color-mix(in srgb, var(--inv-accent) 14%, #fff);
}
.gl-event__rows li > span { padding-top: .2rem; }
.gl-event__venue { display: block; font-weight: 800; color: var(--gl-title); }
.gl-event__address { display: block; color: var(--gl-muted); }
.gl-event .inv-maps__frame { margin-top: 1rem; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1.5px var(--gl-ring); }
.gl-event .inv-button { margin-top: 1rem; min-height: 2.75rem; font-weight: 800; }

/* countdown: the painted sign on ropes, the countdown as glowing party bulbs */
.gl-sign { position: relative; width: 12.5rem; margin: 0 auto 2.6rem; padding-top: 1.6rem; }
.gl-sign__ropes { position: absolute; top: 0; left: 22%; right: 22%; height: 2rem; border: 2px solid color-mix(in srgb, var(--gl-bamboo) 80%, #fff); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.gl-sign__board {
    position: relative; padding: .85rem .6rem .9rem; border-radius: 14px; rotate: -2deg; color: var(--inv-text);
    background: var(--gl-paper);
    box-shadow: inset 0 0 0 4px var(--inv-primary), inset 0 0 0 7px var(--gl-paper), inset 0 0 0 8.5px var(--inv-shine), 0 24px 30px -18px rgb(0 0 0 / .7);
}
.gl-sign__board p { margin: 0; }
.gl-sign__weekday { font-size: .74rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--gl-accent-ink); }
.gl-sign__day { font-family: var(--gl-display); font-size: 4.6rem; font-weight: 800; line-height: .92; color: var(--gl-primary-ink); }
.gl-sign__month { font-size: .8rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--gl-title); }
.gl-sign__time { display: inline-block; margin-top: .45rem !important; padding: .15rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 800; color: var(--inv-deep); background: var(--inv-shine); }
.gl-countdown .inv-countdown { gap: clamp(.5rem, 2.6vw, .85rem); }
.gl-countdown .inv-countdown__item {
    --b: var(--inv-primary); --b-ink: #fff;
    position: relative; display: grid; place-content: center; width: clamp(3.9rem, 18vw, 4.5rem); min-width: 0; aspect-ratio: 1; margin-top: .7rem; padding: 0;
    border-radius: 50% 50% 46% 46%; color: var(--b-ink);
    background: radial-gradient(circle at 35% 28%, color-mix(in srgb, #fff 55%, var(--b)), var(--b) 52%, color-mix(in srgb, var(--b) 72%, #000));
    box-shadow: 0 0 0 3px rgb(255 255 255 / .12), 0 0 28px -2px color-mix(in srgb, var(--b) 85%, transparent);
}
.gl-countdown .inv-countdown__item::before {
    content: ''; position: absolute; left: 50%; top: -.65rem; width: 1.1rem; height: .8rem; margin-left: -.55rem; border-radius: 3px 3px 2px 2px;
    background: linear-gradient(90deg, #6f6a7d, #c9c4d6 45%, #6f6a7d);
}
.gl-countdown .inv-countdown__item:nth-child(2) { --b: var(--inv-shine); --b-ink: var(--inv-deep); }
.gl-countdown .inv-countdown__item:nth-child(3) { --b: var(--inv-accent); }
.gl-countdown .inv-countdown__item:nth-child(4) { --b: var(--inv-pop); --b-ink: var(--inv-deep); }
.gl-countdown .inv-countdown__value { font-variant-numeric: lining-nums tabular-nums; font-family: var(--gl-display); font-weight: 800; font-size: 1.7rem; line-height: 1; }
.gl-countdown .inv-countdown__label { margin-top: .1rem; font-size: .56rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; opacity: .95; }
.gl-countdown .inv-countdown__done { font-family: var(--gl-display); font-size: 1.35rem; font-weight: 800; color: var(--inv-shine); }
.gl-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 2rem; }
.gl-countdown .inv-countdown__actions .inv-button {
    width: min(100%, 17rem); min-height: 2.75rem; padding: .6rem 1rem; font-size: .86rem; font-weight: 800;
    color: #fff; background: color-mix(in srgb, #fff 10%, transparent); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .55);
}
.gl-countdown .inv-countdown__actions .inv-button:first-child { color: var(--inv-deep); background: var(--inv-shine); box-shadow: none; }

/* rundown: flags on poles along the paved gang, the steps on white cards */
.gl-lane { position: relative; max-width: 24rem; margin: 0 auto; padding: .4rem 0 0; list-style: none; text-align: left; }
.gl-lane::before {
    content: ''; position: absolute; top: 0; bottom: -1.2rem; left: .55rem; width: 2.1rem; border-radius: 999px;
    background:
        repeating-linear-gradient(180deg, color-mix(in srgb, #fff 85%, var(--inv-shine)) 0 12px, transparent 12px 24px) center / 3px 100% no-repeat,
        color-mix(in srgb, var(--inv-deep) 62%, var(--inv-soft));
    box-shadow: inset 0 0 0 3px rgb(255 255 255 / .35);
}
.gl-lane__step { --f: var(--inv-primary); --f-ink: #fff; position: relative; display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .45rem; margin-bottom: 1.1rem; }
.gl-lane__step--2 { --f: var(--inv-shine); --f-ink: var(--inv-deep); }
.gl-lane__step--3 { --f: var(--gl-accent-ink); }
.gl-lane__step--4 { --f: var(--inv-pop); --f-ink: var(--inv-deep); }
.gl-lane__flag { position: relative; display: block; height: 3rem; padding: .35rem 0 0 1.6rem; }
/* the pole from the middle of the road, with a bulb at its foot */
.gl-lane__flag::before { content: ''; position: absolute; left: 1.52rem; top: .2rem; width: 3px; height: 2.7rem; border-radius: 2px; background: var(--inv-deep); }
.gl-lane__flag::after {
    content: ''; position: absolute; left: calc(1.6rem - .42rem); top: 2.75rem; width: .84rem; height: .84rem; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, var(--f) 60%); box-shadow: 0 0 10px var(--f);
}
.gl-lane__time {
    position: relative; display: grid; place-items: center start; width: 4.25rem; height: 2.05rem; padding-left: .55rem;
    font-family: var(--gl-display); font-size: .98rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; color: var(--f-ink); background: var(--f);
    clip-path: polygon(0 0, 100% 0, 84% 50%, 100% 100%, 0 100%);
    filter: drop-shadow(0 3px 2px rgb(0 0 0 / .15));
}
.gl-lane__card {
    padding: .7rem .9rem .75rem; border-radius: 14px; background: #fff;
    box-shadow: inset 4px 0 0 var(--f), 0 0 0 1.5px var(--gl-ring), 0 12px 20px -16px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.gl-lane__card h3 { margin: 0; font-size: .98rem; font-weight: 800; line-height: 1.35; color: var(--gl-title); }
.gl-lane__card p { margin: .1rem 0 0; font-size: .84rem; line-height: 1.45; color: var(--gl-muted); }
.gl-lane__end { position: relative; width: 2.2rem; height: auto; margin: -.1rem 0 0 .5rem; }

/* story (tosca band): prints pegged on a washing line, notes for moments without a photo */
.gl-story__list { display: grid; gap: 2.2rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.gl-story__item { position: relative; display: grid; grid-template-columns: 45% minmax(0, 1fr); align-items: center; gap: 1.1rem; padding-top: 1.1rem; }
.gl-story__item--flip { grid-template-columns: minmax(0, 1fr) 45%; }
.gl-story__item--flip .gl-story__print { order: 2; rotate: 3.5deg; }
.gl-story__line { position: absolute; top: .25rem; left: -1.35rem; right: -1.35rem; height: 2px; background: rgb(255 255 255 / .55); rotate: -1deg; }
.gl-story__item--flip .gl-story__line { rotate: 1deg; }
.gl-story__print {
    position: relative; margin: 0; padding: 7px 7px 7px; border-radius: 4px; background: #fffdf8; rotate: -3.5deg;
    box-shadow: 0 18px 26px -16px rgb(0 0 0 / .65);
}
.gl-story__print img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; border-radius: 2px; }
.gl-peg {
    position: absolute; z-index: 2; top: -1.15rem; left: 50%; width: .7rem; height: 1.9rem; margin-left: -.35rem; border-radius: 3px;
    background: linear-gradient(90deg, #b9813f, #e2b46c 45%, #b9813f); box-shadow: 0 2px 3px rgb(0 0 0 / .3);
}
.gl-peg::after { content: ''; position: absolute; left: -2px; right: -2px; top: 45%; height: 4px; border-radius: 2px; background: #8d8a96; }
.gl-story__when {
    position: absolute; left: 50%; bottom: -.75rem; translate: -50% 0; white-space: nowrap; padding: .12rem .7rem .16rem; border-radius: 999px;
    font-family: var(--gl-display); font-size: .92rem; font-weight: 800; line-height: 1.2; color: var(--inv-deep); background: var(--inv-shine);
    box-shadow: 0 6px 10px -6px rgb(0 0 0 / .5);
}
.gl-story__body h3 { margin: 0; font-family: var(--gl-display); font-weight: 800; font-size: 1.3rem; line-height: 1.12; color: #fff; }
.gl-story__body p { margin: .4rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--gl-on-dark-muted); }
.gl-story__item--text { display: block; }
.gl-story__item--text .gl-story__body {
    position: relative; padding: 1.5rem 1.15rem 1.15rem; border-radius: 6px; rotate: -1deg; color: var(--inv-text);
    background: color-mix(in srgb, var(--inv-shine) 22%, #fff); box-shadow: 0 18px 26px -18px rgb(0 0 0 / .6);
}
.gl-story__item--text:nth-child(4n + 3) .gl-story__body { rotate: 1deg; background: color-mix(in srgb, var(--inv-primary) 12%, #fff); }
.gl-story__item--text .gl-story__body h3 { color: var(--gl-title); }
.gl-story__item--text .gl-story__body p { color: var(--gl-muted); }
.gl-story__item--text .gl-story__when { left: 1rem; top: -.75rem; bottom: auto; translate: none; color: #fff; background: var(--inv-primary); }
.gl-story__item--text .gl-peg { left: auto; right: 2rem; }

/* gallery: thick painted frames in the cycling colours, a slight tilt; the first one tall over two rows */
.gl-gallery .inv-gallery { gap: .9rem .8rem; padding: .3rem .2rem; }
.gl-gallery .inv-gallery__item {
    border: 6px solid var(--inv-primary); border-radius: 14px; rotate: -1.5deg;
    box-shadow: 0 0 0 2px #fff, 0 14px 22px -14px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.gl-gallery .inv-gallery__item:nth-child(4n + 2) { border-color: var(--inv-accent); rotate: 1.6deg; }
.gl-gallery .inv-gallery__item:nth-child(4n + 3) { border-color: var(--inv-shine); rotate: 1deg; }
.gl-gallery .inv-gallery__item:nth-child(4n) { border-color: var(--inv-pop); rotate: -1deg; }
.gl-gallery .inv-gallery__item:first-child { grid-row: span 2; aspect-ratio: auto; rotate: -2deg; }

/* live streaming: the layar tancap — a screen between bamboo poles */
.gl-screen { position: relative; max-width: 22rem; margin: 0 auto; padding: 1.4rem 1.3rem 2.4rem; }
.gl-screen__pole { position: absolute; top: 0; bottom: 0; width: .55rem; border-radius: 4px; background: linear-gradient(90deg, #b78a35, var(--gl-bamboo) 40%, #a77b2c); }
.gl-screen__pole::after { content: ''; position: absolute; left: -2px; right: -2px; top: 25%; height: 3px; background: #8f6824; box-shadow: 0 3rem 0 #8f6824, 0 6rem 0 #8f6824; }
.gl-screen__pole--left { left: .2rem; }
.gl-screen__pole--right { right: .2rem; }
.gl-screen__cloth {
    position: relative; display: flex; flex-direction: column; align-items: center; padding: 1.5rem 1.1rem 1.35rem;
    background: linear-gradient(180deg, #fff, #f3eee6); box-shadow: inset 0 0 0 4px var(--inv-deep), 0 18px 26px -18px rgb(0 0 0 / .55);
}
.gl-screen__cloth::before, .gl-screen__cloth::after { content: ''; position: absolute; top: .8rem; width: 1.2rem; height: 2px; background: #8f6824; }
.gl-screen__cloth::before { left: -1rem; }
.gl-screen__cloth::after { right: -1rem; }
.gl-screen__icon { display: grid; place-items: center; width: 3.3rem; height: 3.3rem; margin-bottom: .6rem; border-radius: 50%; color: #fff; background: var(--inv-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--inv-shine) 60%, transparent); }
.gl-screen__icon .gl-icon { width: 1.7rem; height: 1.7rem; }
.gl-screen__title { margin: 0 0 .2rem; font-family: var(--gl-display); font-weight: 800; font-size: 1.65rem; line-height: 1.1; color: var(--gl-title); }
.gl-screen__cloth p { margin: 0; max-width: 28ch; font-size: .88rem; color: var(--gl-muted); }
.gl-screen__cloth .gl-screen__note { margin-top: .35rem; font-weight: 800; color: var(--gl-primary-ink); }
.gl-stream__button { min-height: 2.9rem; padding: .6rem 1.6rem; font-weight: 800; }

/* RSVP: the "kupon hadir" — a magenta head, notches at the perforation, the form on warm paper */
.gl-rsvp__wrap { max-width: 25rem; margin: 0 auto; filter: drop-shadow(0 22px 26px rgb(0 0 0 / .45)); }
.gl-coupon {
    --cut: 5rem;
    border-radius: 18px; overflow: hidden; background: var(--gl-paper);
    -webkit-mask: radial-gradient(circle 12px at 0 var(--cut), #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% var(--cut), #0000 97%, #000) right / 51% 100% no-repeat;
    mask: radial-gradient(circle 12px at 0 var(--cut), #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% var(--cut), #0000 97%, #000) right / 51% 100% no-repeat;
}
.gl-coupon__head {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem; height: var(--cut); padding: 0 1.2rem; text-align: left; color: #fff;
    background: radial-gradient(80% 140% at 100% 0%, color-mix(in srgb, var(--inv-pop) 50%, transparent), transparent 60%), var(--gl-dots), var(--inv-primary);
}
.gl-coupon__label { margin: 0; font-size: .64rem; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-shine); }
.gl-coupon__for { margin: .1rem 0 0; font-family: var(--gl-display); font-weight: 800; font-size: 1.15rem; line-height: 1.12; overflow-wrap: anywhere; text-wrap: balance; }
.gl-coupon__no {
    flex: none; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; rotate: 8deg;
    font-family: var(--gl-display); font-size: 1.2rem; font-weight: 800; line-height: .9; color: var(--inv-deep); background: var(--inv-shine);
    box-shadow: 0 0 0 2.5px #fff;
}
.gl-coupon__no small { display: block; font-family: var(--gl-sans); font-size: .5rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.gl-coupon__card { position: relative; padding: 1.5rem 1.15rem 1.4rem; color: var(--inv-text); border-top: 2px dashed color-mix(in srgb, var(--inv-primary) 30%, transparent); }
.gl-coupon__intro { margin: 0 auto 1.1rem; max-width: 30ch; font-size: .9rem; color: var(--gl-muted); }
.gl-coupon__sent { margin-bottom: 1rem; }
.gl-coupon__stamp {
    display: inline-block; margin: .3rem 0 .7rem; padding: .3rem 1rem .35rem; rotate: -7deg; border-radius: 10px;
    font-family: var(--gl-display); font-size: 1.3rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--gl-primary-ink);
    box-shadow: inset 0 0 0 3px var(--gl-primary-ink), inset 0 0 0 5px var(--gl-paper), inset 0 0 0 6.5px var(--gl-primary-ink);
}
html.inv-anim .gl-coupon__sent .gl-coupon__stamp { animation: gl-stamp .55s cubic-bezier(.3, 1.4, .6, 1) both; }
.gl-coupon__line { margin: 0; font-size: .9rem; color: var(--gl-muted); }
.gl-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .84rem; font-weight: 800; color: var(--gl-primary-ink); }

/* wishes: the form under a jar of nastar, the wishes as speech bubbles */
.gl-wishes__box { position: relative; max-width: 25rem; margin: 0 auto; padding-top: 1.2rem; }
.gl-wishes__toples { position: absolute; z-index: 2; top: -1.9rem; right: .3rem; width: 4.4rem; height: auto; rotate: 8deg; filter: drop-shadow(0 8px 8px rgb(0 0 0 / .18)); }
.gl-toples__shadow { fill: rgb(0 0 0 / .12); }
.gl-toples__glass { fill: rgb(255 255 255 / .55); stroke: color-mix(in srgb, var(--inv-deep) 30%, #fff); stroke-width: 1.6; }
.gl-toples__tart { fill: #eaa73a; stroke: #b6721a; stroke-width: 1; }
.gl-toples__clove { stroke: #6b3a12; stroke-width: 2.2; stroke-linecap: round; }
.gl-toples__score { stroke: #c4801f; stroke-width: 1.6; stroke-linecap: round; }
.gl-toples__hi { stroke: rgb(255 255 255 / .85); stroke-width: 3; stroke-linecap: round; }
.gl-toples__neck { fill: color-mix(in srgb, #fff 70%, var(--inv-soft)); stroke: color-mix(in srgb, var(--inv-deep) 30%, #fff); stroke-width: 1.4; }
.gl-toples__lid { fill: #d6232f; }
.gl-toples__knob { fill: #b51a25; }
.gl-toples__lid-hi { stroke: rgb(255 255 255 / .45); stroke-width: 2.4; stroke-linecap: round; }
.gl-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.gl-wishes .inv-form {
    padding: 1.4rem 1.1rem 1.3rem; border-radius: 18px; background: #fff;
    box-shadow: inset 0 6px 0 var(--inv-primary), 0 0 0 1.5px var(--gl-ring), var(--gl-drop);
}
.gl-wishes .inv-wishes__list { margin-top: 1.5rem; }
.gl-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .6rem; border-radius: 18px; background: color-mix(in srgb, var(--inv-soft) 55%, #fff); box-shadow: inset 0 0 0 1.5px var(--gl-ring);
}
.gl-wishes .inv-wish {
    padding: .75rem .9rem; border-radius: 16px 16px 16px 4px; text-align: left; background: #fff;
    box-shadow: 0 2px 10px rgb(0 0 0 / .05), inset 0 0 0 1.5px color-mix(in srgb, var(--inv-primary) 16%, transparent);
}
.gl-wishes .inv-wish:nth-child(3n + 2) { background: color-mix(in srgb, var(--inv-accent) 10%, #fff); border-radius: 16px 16px 4px 16px; }
.gl-wishes .inv-wish:nth-child(3n + 3) { background: color-mix(in srgb, var(--inv-shine) 18%, #fff); }
.gl-wishes .inv-wish__name { font-weight: 900; color: var(--gl-title); }
.gl-wishes .inv-wish__message { font-size: .88rem; line-height: 1.5; }
.gl-wishes .inv-wish__time { font-size: .72rem; color: var(--gl-muted); opacity: 1; }

/* gift ("Iuran & donasi", magenta band): Lebaran envelopes with a flap and a ketupat seal */
.gl-gift__intro { color: var(--gl-on-dark-muted); }
.gl-gift__treasurer { display: inline-flex !important; align-items: center; gap: .5rem; padding: .35rem .9rem; border-radius: 999px; font-size: .84rem; font-weight: 800; color: var(--inv-deep); background: var(--inv-shine); }
.gl-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1.4rem; }
.gl-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: min(100%, 15rem); }
.gl-gift .inv-gift__account,
.gl-gift .inv-gift__address {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; margin: 0; overflow: hidden;
    padding: 2.6rem .8rem 1rem; border-radius: 12px; color: var(--inv-text); background: var(--gl-paper);
    box-shadow: 0 18px 28px -20px rgb(0 0 0 / .7);
}
/* the folded flap and the ketupat seal */
.gl-gift .inv-gift__account::before, .gl-gift .inv-gift__address::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 85%, #fff), var(--gl-accent-ink));
    clip-path: polygon(0 0, 100% 0, 100% 15%, 50% 100%, 0 15%);
}
.gl-gift .inv-gift__account::after, .gl-gift .inv-gift__address::after {
    content: ''; position: absolute; top: 1.25rem; left: 50%; width: 1.25rem; height: 1.25rem; margin-left: -.625rem; rotate: 45deg; border-radius: 2px;
    background:
        linear-gradient(90deg, transparent 45%, #5c8a16 45% 55%, transparent 55%),
        linear-gradient(0deg, transparent 45%, #5c8a16 45% 55%, transparent 55%), #9cc33a;
    box-shadow: 0 0 0 2px var(--gl-paper);
}
.gl-gift .inv-gift__account p, .gl-gift .inv-gift__address p { margin: 0; }
.gl-gift .inv-gift__bank { font-weight: 900; font-size: .85rem; color: var(--gl-title); }
.gl-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .4rem; background: #fff; }
.gl-gift .inv-gift__logo img { max-width: 5rem; }
.gl-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);
}
.gl-gift .inv-gift__holder { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gl-muted); overflow-wrap: anywhere; }
.gl-gift .inv-button { margin-top: .35rem; min-height: 2.25rem; padding: .35rem .9rem; font-size: .76rem; font-weight: 800; }
.gl-gift .inv-gift__address { margin-top: .8rem; font-size: .875rem; }
.gl-gift .inv-gift__address .inv-gift__holder { font-size: .72rem; }

/* co-hosts ("Panitia"): the RT notice board — cork in a wooden frame, pinned notes */
.gl-board {
    position: relative; max-width: 24rem; margin: 0 auto; padding: 3.2rem .9rem 1.3rem; border-radius: 12px;
    background:
        radial-gradient(circle, rgb(120 70 20 / .22) 1px, transparent 1.6px) 0 0 / 9px 9px,
        radial-gradient(circle, rgb(255 240 200 / .25) 1px, transparent 1.6px) 4px 5px / 11px 11px,
        #d9a86a;
    box-shadow: inset 0 0 0 9px var(--gl-wood), inset 0 0 0 11px #6e3f1a, var(--gl-drop);
}
.gl-board__plank {
    position: absolute; top: .3rem; left: 50%; translate: -50% 0; margin: 0; padding: .32rem 1rem; border-radius: 6px; white-space: nowrap;
    font-family: var(--gl-display); font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--inv-shine); background: var(--inv-deep);
    box-shadow: 0 4px 8px -3px rgb(0 0 0 / .45);
}
.gl-board__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .75rem; margin: 0; padding: .4rem .3rem 0; list-style: none; }
.gl-board__note {
    --pin: var(--inv-primary);
    position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 5rem; padding: 1.1rem .6rem .8rem; rotate: -1.8deg;
    background: #fff; box-shadow: 0 10px 14px -10px rgb(0 0 0 / .55);
}
.gl-board__note:nth-child(4n + 2) { --pin: var(--inv-accent); rotate: 2deg; background: color-mix(in srgb, var(--inv-shine) 30%, #fff); }
.gl-board__note:nth-child(4n + 3) { --pin: var(--inv-pop); rotate: 1deg; background: color-mix(in srgb, var(--inv-accent) 16%, #fff); }
.gl-board__note:nth-child(4n) { --pin: var(--inv-shine); rotate: -1deg; background: color-mix(in srgb, var(--inv-primary) 12%, #fff); }
.gl-board__note:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .4rem); }
.gl-board__pin {
    position: absolute; top: .35rem; left: 50%; width: .85rem; height: .85rem; margin-left: -.425rem; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, var(--pin) 55%, color-mix(in srgb, var(--pin) 70%, #000)); box-shadow: 0 3px 3px rgb(0 0 0 / .35);
}
.gl-board__role { font-size: .58rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--gl-primary-ink); }
.gl-board__name { font-family: var(--gl-display); font-size: 1.04rem; font-weight: 800; line-height: 1.15; color: var(--gl-title); overflow-wrap: anywhere; text-wrap: balance; }

/* contacts (tosca band): committee ID cards on lanyards */
.gl-contacts { padding-top: 4.8rem; }
.gl-contacts__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem .8rem; max-width: 24rem; margin: 0 auto; padding-top: 1.6rem; }
.gl-idcard:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .4rem); }
.gl-idcard {
    position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 2.3rem .7rem 1rem; border-radius: 14px;
    color: var(--inv-text); background: #fff; box-shadow: 0 18px 26px -16px rgb(0 0 0 / .6);
}
.gl-idcard:nth-child(even) { rotate: 1.5deg; }
.gl-idcard:nth-child(odd) { rotate: -1.5deg; }
.gl-idcard__lanyard {
    position: absolute; top: -2rem; left: 50%; width: .9rem; height: 2.5rem; margin-left: -.45rem; border-radius: 2px;
    background: repeating-linear-gradient(180deg, var(--inv-shine) 0 6px, var(--inv-primary) 6px 12px);
}
.gl-idcard__band {
    position: absolute; top: 0; left: 0; right: 0; height: 1.55rem; padding-top: .55rem; border-radius: 14px 14px 0 0;
    font-size: .52rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; line-height: 1; color: #fff; background: var(--inv-primary);
}
.gl-idcard__band::before { content: ''; position: absolute; top: .22rem; left: 50%; width: 1.6rem; height: .32rem; margin-left: -.8rem; border-radius: 999px; background: color-mix(in srgb, var(--inv-primary) 50%, #000); }
.gl-idcard:nth-child(even) .gl-idcard__band { color: var(--inv-deep); background: var(--inv-pop); }
.gl-idcard__avatar {
    display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .4rem; border-radius: 50%;
    font-family: var(--gl-display); font-weight: 800; font-size: 1.45rem; color: #fff; background: var(--gl-accent-ink);
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--inv-shine);
}
.gl-idcard p { margin: 0; }
.gl-idcard__name { font-weight: 900; font-size: .95rem; line-height: 1.25; color: var(--gl-title); overflow-wrap: anywhere; }
.gl-idcard__role { font-size: .76rem; line-height: 1.3; color: var(--gl-muted); }
.gl-idcard__phone { margin-top: .4rem !important; font-size: .85rem; font-weight: 700; }
.gl-idcard__button { display: inline-flex; align-items: center; gap: .35rem; margin-top: .65rem; min-height: 2.4rem; padding: .4rem 1rem; font-size: .8rem; font-weight: 800; }
.gl-idcard__button .gl-icon { width: 1.05rem; height: 1.05rem; }

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

/* vendors: little shop signboards */
.gl-vendors__list { display: grid; gap: .8rem; max-width: 23rem; margin: 0 auto; padding: 0; list-style: none; }
.gl-vendor {
    --f: var(--inv-primary);
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .2rem .8rem; padding: .7rem .8rem .75rem 1rem; border-radius: 14px; text-align: left;
    background: #fff; box-shadow: inset 5px 0 0 var(--f), 0 0 0 1.5px var(--gl-ring), 0 12px 20px -16px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.gl-vendor--2 { --f: var(--inv-accent); }
.gl-vendor--3 { --f: var(--inv-pop); }
.gl-vendor--4 { --f: var(--inv-shine); }
.gl-vendor__role { grid-column: 1; font-size: .62rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--gl-accent-ink); }
.gl-vendor__name { grid-column: 1; font-family: var(--gl-display); font-weight: 800; font-size: 1.1rem; line-height: 1.2; color: var(--gl-title); overflow-wrap: anywhere; }
.gl-vendor__link {
    grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: .3rem; min-height: 2.2rem; padding: .3rem .7rem; border-radius: 999px;
    font-size: .74rem; font-weight: 800; text-decoration: none; color: var(--inv-deep); background: color-mix(in srgb, var(--inv-shine) 40%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-pop) 40%, transparent);
}
.gl-vendor__link .gl-icon { width: .95rem; height: .95rem; }

/* closing: the photo fading into the night, the bulbs, the thanks, the name on a painted sign, the houses */
.gl-closing { padding: 3.4rem 1.6rem 0; }
.gl-section.gl-closing--photo { padding-top: 0; }
.gl-closing__photo {
    position: relative; z-index: -1; height: min(96vw, 25rem); margin: 0 -1.6rem; overflow: hidden;
    -webkit-mask: linear-gradient(180deg, #000 0, #000 50%, rgb(0 0 0 / .55) 72%, rgb(0 0 0 / .15) 90%, transparent 100%);
    mask: linear-gradient(180deg, #000 0, #000 50%, rgb(0 0 0 / .55) 72%, rgb(0 0 0 / .15) 90%, transparent 100%);
}
.gl-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 25%; --inv-parallax: 30px; }
.gl-closing__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, color-mix(in srgb, var(--inv-deep) 55%, transparent) 66%, var(--inv-deep) 97%); }
.gl-closing__bulbs { z-index: 1; }
.gl-closing--photo .gl-closing__bulbs { top: -.15rem; }
.gl-closing__body { position: relative; }
.gl-closing--photo .gl-closing__body { margin-top: -5.2rem; }
.gl-closing__moon { display: block; width: 2.6rem; margin: 0 auto .5rem; }
.gl-closing__eyebrow { margin: 0 0 .25rem; font-size: .72rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: var(--inv-shine); }
.gl-closing__title { margin: 0 0 .7rem; font-family: var(--gl-display); font-weight: 800; font-size: clamp(2rem, 9vw, 2.45rem); line-height: 1.02; color: #fff; }
.gl-closing__title em { font-family: var(--gl-script); font-style: normal; font-weight: 400; font-size: 1.3em; line-height: .8; color: var(--inv-shine); }
.gl-closing__message { margin: 0 auto; max-width: 32ch; font-size: .92rem; line-height: 1.58; color: var(--gl-on-dark-muted); }
.gl-closing__salam { margin: .8rem auto 0; max-width: 26ch; font-family: var(--gl-display); font-size: 1.08rem; font-weight: 700; line-height: 1.3; color: var(--inv-shine); }
.gl-closing__signature { margin: .35rem auto 0; max-width: 30ch; font-size: .84rem; color: var(--gl-on-dark-muted); }
.gl-closing__sign { position: relative; width: min(100%, 17rem); margin: 1.4rem auto 0; padding-bottom: 1.2rem; }
.gl-closing__sign-posts { position: absolute; bottom: 0; left: 18%; right: 18%; height: 2rem; border-left: .4rem solid var(--gl-bamboo); border-right: .4rem solid var(--gl-bamboo); }
.gl-closing__name {
    position: relative; margin: 0; padding: .7rem 1rem .75rem; border-radius: 14px; rotate: -1.5deg;
    font-family: var(--gl-display); font-size: 1.35rem; font-weight: 800; line-height: 1.1; color: #fff; text-wrap: balance; overflow-wrap: anywhere;
    background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--inv-pop) 40%, transparent), transparent 70%), var(--inv-primary);
    box-shadow: inset 0 0 0 3px var(--inv-shine), inset 0 0 0 5px var(--inv-primary), inset 0 0 0 6.5px color-mix(in srgb, #fff 70%, var(--inv-shine)), 0 14px 22px -12px rgb(0 0 0 / .6);
}
.gl-closing__houses { width: calc(100% + 3.2rem); height: 4.4rem; margin: .4rem -1.6rem 0; }

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

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

/* ---------- 7. shared components ---------- */
.gl-main .inv-button { font-weight: 800; }
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(--gl-sans);
}
/* the room under the page (for the fixed menu and music button) continues the closing's night */
.gl-main ~ .inv-music__space { background: color-mix(in srgb, var(--inv-deep) 60%, #000); }
.gl-main ~ .gl-branding ~ .inv-music__space { background: var(--inv-end-bg, color-mix(in srgb, var(--inv-deep) 60%, #000)); }

/* ---------- 8. screen sizes ---------- */
/* the cover in px steps per screen height (never svh: Chrome on iPhone sizes it to the whole screen) */
@media (max-height: 800px) {
    .gl-cover { --gl-photo-h: 300px; }
}
@media (max-height: 760px) {
    .gl-cover { --gl-photo-h: 268px; padding-top: 1rem; padding-bottom: 1.4rem; }
    .gl-cover__name { font-size: clamp(1.55rem, 7vw, 1.95rem); }
    .gl-cover__guest { margin-top: .7rem; }
    .gl-cover__open { margin-top: .85rem; }
}
@media (max-height: 720px) {
    .gl-cover { --gl-photo-h: 244px; }
    .gl-cover__quote { font-size: .86rem; line-height: 1.32; }
}
@media (max-height: 680px) {
    .gl-cover { --gl-photo-h: 214px; padding-top: .85rem; padding-bottom: 1.2rem; }
    .gl-gate { --beam-y: 3.35rem; }
    .gl-gate__title { font-size: 1.02rem; }
    .gl-gate__ribbon { font-size: .95rem; }
    .gl-cover__text { margin-top: .55rem; }
    .gl-cover__name { font-size: clamp(1.45rem, 6.6vw, 1.8rem); }
    .gl-cover__batch { margin-top: .35rem; font-size: .7rem; }
    .gl-cover__date { margin-top: .35rem; font-size: .86rem; }
    .gl-cover__quote { font-size: .82rem; line-height: 1.3; }
    .gl-guest { padding-top: 1.25rem; padding-bottom: .45rem; }
    .gl-guest__name { font-size: 1.2rem; }
    .gl-cover__guest { margin-top: .6rem; }
    .gl-cover__open { min-height: 2.75rem; margin-top: .75rem; padding: .55rem 1.6rem; }
}
@media (max-height: 630px) {
    .gl-cover { --gl-photo-h: 186px; }
}
@media (max-height: 580px) {
    .gl-cover { --gl-photo-h: 156px; }
    .gl-cover__quote { font-size: .78rem; }
}

/* wide screens: the phone-width column on a plum night with bulbs-coloured dots */
@media (min-width: 560px) {
    body.gl-body {
        background:
            radial-gradient(70vw 60vh at 50% 0%, color-mix(in srgb, var(--inv-primary) 45%, transparent), transparent 70%),
            var(--inv-deep);
        background-attachment: fixed;
    }
    body.gl-body::before {
        content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
        background: radial-gradient(circle, color-mix(in srgb, var(--inv-shine) 30%, transparent) 1.4px, transparent 2px) 0 0 / 26px 26px;
    }
    .gl-main { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
}

/* ---------- 9. motion ---------- */
@keyframes gl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gl-rise { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes gl-gate-in { from { opacity: 0; transform: translateY(28px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes gl-zoom-out { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes gl-sign-in { 0% { opacity: 0; transform: translateY(-30px) rotate(-6deg); } 60% { opacity: 1; transform: translateY(3px) rotate(2deg); } 80% { transform: rotate(-1deg); } 100% { opacity: 1; transform: none; } }
@keyframes gl-pole-in { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes gl-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes gl-glow { 0%, 100% { opacity: .32; } 50% { opacity: .06; } }
@keyframes gl-light-on { 0% { opacity: .18; } 60% { opacity: 1; } 75% { opacity: .5; } 100% { opacity: 1; } }
@keyframes gl-flutter { 0%, 100% { transform: skewY(0deg) scaleX(1); } 30% { transform: skewY(-2.5deg) scaleX(.92); } 65% { transform: skewY(2deg) scaleX(1.04); } }
@keyframes gl-flag { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(4deg); } }
@keyframes gl-sway { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
@keyframes gl-ping { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes gl-tap { 0%, 100% { transform: translate(0, 0) scale(1); } 45% { transform: translate(-5px, -6px) scale(.9); } }
@keyframes gl-wobble { 0%, 100% { rotate: 0deg; } 20% { rotate: -4deg; } 40% { rotate: 3.5deg; } 60% { rotate: -2.5deg; } 80% { rotate: 1.5deg; } }
@keyframes gl-lid-off {
    0% { transform: none; }
    25% { transform: translate(0, -24%) rotate(-6deg); }
    60% { transform: translate(28%, -95%) rotate(40deg); }
    100% { transform: translate(34%, -62%) rotate(22deg); }
}
@keyframes gl-crackers-up { 0% { transform: translateY(16px); } 55% { transform: translateY(-26px); } 75% { transform: translateY(-10px); } 100% { transform: translateY(-14px); } }
@keyframes gl-joke { 0% { opacity: 0; transform: scale(.3) rotate(-20deg); } 60% { opacity: 1; transform: scale(1.12) rotate(4deg); } 100% { opacity: 1; transform: none; } }
@keyframes gl-stamp { 0% { opacity: 0; scale: 1.8; } 70% { opacity: 1; scale: .94; } 100% { opacity: 1; scale: 1; } }

/* cover (≤ 2.5 s, once): the gate rises (0–.8 s) while its photo settles (0–1.2 s), the sign drops and swings
   (.35–1.25 s), the umbul-umbul rise (.3–1.1 s); then the bulbs twinkle and the flags flutter for good */
html.inv-anim .gl-cover__gate { animation: gl-gate-in .8s cubic-bezier(.2, .8, .2, 1) both; }
html.inv-anim .gl-cover .gl-gate__photo { animation: gl-zoom-out 1.2s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .gl-cover .gl-gate__sign { animation: gl-sign-in .9s cubic-bezier(.3, .8, .3, 1) .35s both; transform-origin: 50% 0; }
html.inv-anim .gl-cover__umbul { animation: gl-pole-in .8s cubic-bezier(.2, .8, .2, 1) .3s both; }
html.inv-anim .gl-cover__umbul--right { animation-delay: .42s; }
html.inv-anim .gl-umbul__flag { animation: gl-flutter 2.8s ease-in-out infinite; }
html.inv-anim .gl-umbul--3 .gl-umbul__flag, html.inv-anim .gl-umbul--4 .gl-umbul__flag { animation-duration: 3.3s; animation-delay: -.8s; }
html.inv-anim .gl-bulb__glass { animation: gl-twinkle 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.41s); }
html.inv-anim .gl-bulb__glow { animation: gl-glow 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.41s); }
html.inv-anim .gl-bunting__flag, html.inv-anim .gl-bunting__ketupat { animation: gl-flag 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); }
html.inv-anim .gl-sign__board { animation: gl-sway 5s ease-in-out infinite; transform-origin: 50% 0; }

/* the tap marker */
html.inv-anim .gl-tap__ring { animation: gl-ping 1.8s ease-out infinite; }
html.inv-anim .gl-tap__ring--late { animation-delay: .9s; }
html.inv-anim .gl-tap__hand { animation: gl-tap 1.3s ease-in-out infinite; }
.gl-tap__ring { opacity: .6; }
html.inv-anim .gl-party.is-armed .gl-tin__art { animation: gl-wobble 2.6s ease-in-out 1s infinite; transform-origin: 50% 90%; }

/* the tin opens: the lid flies off and lands tilted, the rengginang pop up, the joke label pops, the contents rise */
html.inv-anim .gl-party.is-open .gl-tin__lid { animation: gl-lid-off .8s cubic-bezier(.3, .7, .3, 1) both; }
html.inv-anim .gl-party.is-open .gl-tin__crackers { animation: gl-crackers-up .7s cubic-bezier(.3, 1.3, .5, 1) .25s both; }
html.inv-anim .gl-party.is-open .gl-tin__joke { animation: gl-joke .55s cubic-bezier(.34, 1.56, .64, 1) .55s both; }
html.inv-anim .gl-party.is-open .gl-party__lead { animation: gl-rise .6s cubic-bezier(.2, .8, .2, 1) .8s both; }
html.inv-anim .gl-party.is-open .gl-party__reveal > * { animation: gl-rise .6s cubic-bezier(.2, .8, .2, 1) both; }
html.inv-anim .gl-party.is-open .gl-party__reveal > :nth-child(1) { animation-delay: .95s; }
html.inv-anim .gl-party.is-open .gl-party__reveal > :nth-child(2) { animation-delay: 1.08s; }
html.inv-anim .gl-party.is-open .gl-party__reveal > :nth-child(3) { animation-delay: 1.21s; }
html.inv-anim .gl-party.is-open .gl-party__reveal > :nth-child(4) { animation-delay: 1.34s; }
html.inv-anim .gl-party.is-open .gl-party__reveal > :nth-child(5) { animation-delay: 1.47s; }

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

/* ---------- 10. intro scene "Malam di Gang" (scene.json + sections/_scene) ----------
   The intro is teleported to <body>: everything here stands on its own classes. */
.gl-scene-houses { position: absolute; inset: 0; }
.gl-scene-houses__art { display: block; width: 100%; height: 100%; }
.gl-scene-bulbs { position: absolute; inset: 0; }
.gl-scene-bulbs__art { display: block; width: 100%; height: auto; }
/* the bulbs light up one after another (the glass first dim, then on) */
html.inv-anim .gl-scene-bulbs .gl-bulb { opacity: .18; animation: gl-light-on .5s ease forwards; animation-delay: calc(.7s + var(--i) * .14s); }
html.inv-anim .gl-scene-bulbs--low .gl-bulb { animation-delay: calc(1.4s + var(--i) * .14s); }
.gl-scene-moon { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--inv-shine) 60%, transparent)); }
.gl-scene-umbul { position: absolute; inset: 0; }
.gl-scene-umbul__art { display: block; width: 100%; height: 100%; }
.gl-scene-gate { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 18px 20px rgb(0 0 0 / .4)); }
.gl-scene-gate__stripe-white { fill: #fff; }
.gl-scene-gate__stripe-a { fill: var(--inv-primary); }
.gl-scene-gate__stripe-b { fill: var(--inv-accent); }
.gl-scene-gate__cap { fill: color-mix(in srgb, var(--inv-deep) 65%, #000); }
.gl-scene-gate__finial { fill: var(--inv-shine); }
.gl-scene-gate__stem { stroke: color-mix(in srgb, var(--inv-deep) 65%, #000); stroke-width: 4; }
.gl-scene-gate__beam { fill: color-mix(in srgb, var(--inv-deep) 65%, #000); }
.gl-scene-gate__sign { fill: var(--inv-primary); stroke: var(--inv-shine); stroke-width: 4; }
.gl-scene-gate__sign-line { fill: none; stroke: color-mix(in srgb, #fff 70%, var(--inv-shine)); stroke-width: 1.6; stroke-dasharray: 2 5; stroke-linecap: round; }
.gl-scene-gate__text { font-family: var(--gl-script); font-size: 26px; fill: var(--inv-shine); }
.gl-scene-gate__text--big { font-family: var(--gl-display); font-weight: 800; font-size: 25px; fill: #fff; letter-spacing: .5px; }

/* the name card: a painted sign hung in the gate's opening */
body.gl-body .inv-intro--scene .inv-scene__card {
    top: 73%; aspect-ratio: auto; overflow: visible;
    -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 1.15rem 1.1rem 1.25rem; border-radius: 18px;
    background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--inv-pop) 40%, transparent), transparent 70%), var(--inv-primary);
    box-shadow: inset 0 0 0 3px var(--inv-shine), inset 0 0 0 5px var(--inv-primary), inset 0 0 0 6.5px color-mix(in srgb, #fff 70%, var(--inv-shine)), 0 26px 40px -16px rgb(0 0 0 / .7), 0 0 40px -6px color-mix(in srgb, var(--inv-shine) 45%, transparent);
}
body.gl-body .inv-scene__card .inv-intro__label {
    justify-self: center; font-family: var(--gl-sans); font-size: .66rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: var(--inv-shine);
}
body.gl-body .inv-scene__card .inv-intro__names {
    font-family: var(--gl-display) !important; font-weight: 800; font-size: clamp(1.6rem, 7.4vw, 2.1rem); line-height: 1.05; color: #fff; overflow-wrap: anywhere; text-wrap: balance;
}
body.gl-body .inv-scene__card .inv-intro__rule { height: 4px; width: 2.4rem; border-radius: 3px; background: var(--inv-shine); }
body.gl-body .inv-scene__card .inv-intro__date { font-family: var(--gl-sans); font-weight: 800; font-size: .86rem; color: #fff; }
@media (prefers-reduced-motion: reduce) {
    .gl-scene-bulbs .gl-bulb { animation: none; opacity: 1; }
}
/* short phones (≈ 360×640): the card sits a little higher in the gate */
@media (min-aspect-ratio: 10 / 19) {
    body.gl-body .inv-intro--scene .inv-scene__card { top: 70%; padding: .9rem 1rem 1rem; }
}