/*
 * Template "Gala Reuni" (Reuni & Halal Bihalal) — an elegant evening reunion gala in black tie.
 * Deep black (midnight / emerald / burgundy in the other variants) bands with champagne gold and soft light,
 * alternating with ivory sections; a blush accent. Gold text only on the dark bands; on ivory the text is ink and
 * the accent words a deep rose. Signature pieces: the crystal chandelier, string lights, the spotlight beam and the
 * dance-floor pool of light, two toasting glasses, art-deco fans, numbered table cards, the engraved plaque, the
 * dress code card, the evening programme, a VIP pass, the RSVP card with a foil seal, black member cards, place
 * cards. Mobile-first, one column (~460px) on a deep backdrop on wide screens.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (ink / midnight / emerald / burgundy: dark cards, buttons on ivory)
 *   --inv-accent (blush: glows, swatch ring, mixed into --gr-rose for accent words on ivory)
 *   --inv-background (ivory)   --inv-text   --inv-deep (dark bands)   --inv-shine (champagne gold, on dark only)
 *   --inv-gold (darker gold lines on ivory)   --inv-soft (champagne 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): .gr-tone--deep (the dark band with a spotlight glow and a
 * faint static sparkle), --light (ivory with a faint deco scale pattern), --soft (a champagne tint).
 *
 * Motion only runs with html.inv-anim (set by <x-inv.head> unless the guest prefers reduced motion); without it
 * everything is shown finished. Nothing moves continuously.
 *
 * Contents: 1 base · 2 section tones · 3 shared pieces (heading, fan, chandelier, lights, glasses, seal, card,
 *           divider) · 4 cover · 5 sections in page order · 6 forms (RSVP, wishes) · 7 shared components ·
 *           8 screen sizes · 9 motion
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Hitam Sampanye" variant (the variant's colours override these) */
    --inv-primary: #1c1916;
    --inv-accent: #d29a94;
    --inv-background: #f8f2e8;
    --inv-text: #1d1a17;
    --inv-deep: #0c0b0a;
    --inv-shine: #e6c890;
    --inv-gold: #9c7637;
    --inv-soft: #efe4d1;
    --inv-radius: 4px;

    --gr-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --gr-sans: 'Josefin Sans', 'Avenir Next', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --gr-script: 'Great Vibes', 'Segoe Script', cursive;
    --gr-col: 460px;
    --gr-paper: color-mix(in srgb, #fff 55%, var(--inv-background));
    --gr-ink: color-mix(in srgb, var(--inv-primary) 70%, var(--inv-deep));
    --gr-rose: color-mix(in srgb, var(--inv-accent) 56%, var(--inv-deep));
    --gr-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    --gr-cream: color-mix(in srgb, var(--inv-background) 84%, transparent);
    --gr-line: color-mix(in srgb, var(--inv-gold) 55%, transparent);
    --gr-line-dark: color-mix(in srgb, var(--inv-shine) 50%, transparent);
    --gr-drop: 0 26px 42px -26px color-mix(in srgb, var(--inv-deep) 75%, transparent);
    /* champagne foil: a metallic sweep of the variant's gold */
    --gr-foil: linear-gradient(120deg,
        color-mix(in srgb, var(--inv-shine) 62%, #fff) 0%, var(--inv-shine) 28%,
        color-mix(in srgb, var(--inv-shine) 72%, var(--inv-gold)) 52%, var(--inv-shine) 72%,
        color-mix(in srgb, var(--inv-shine) 55%, #fff) 100%);

    /* colours of the shared components */
    --inv-ambient-1: var(--inv-shine);
    --inv-ambient-2: color-mix(in srgb, var(--inv-accent) 70%, #fff);
}

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

body {
    margin: 0;
    background: var(--inv-background);
    color: var(--inv-text);
    font-family: var(--gr-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(--gr-ink); }

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

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

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

/* ---------- 2. section tones ---------- */

/* deep: a spotlight glow from the top, a low blush glow, and a sparse static sparkle (two dot grids) */
.gr-tone--deep {
    color: var(--inv-background);
    background:
        radial-gradient(70% 38% at 50% 0%, color-mix(in srgb, var(--inv-shine) 16%, transparent), transparent 75%),
        radial-gradient(90% 50% at 0% 0%, color-mix(in srgb, var(--inv-primary) 90%, transparent), transparent 70%),
        radial-gradient(70% 30% at 100% 100%, color-mix(in srgb, var(--inv-accent) 14%, transparent), transparent 75%),
        var(--inv-deep);
}
.gr-tone--deep::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .7;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--inv-shine) 55%, transparent) .8px, transparent 1.5px) 0 0 / 47px 53px,
        radial-gradient(circle, color-mix(in srgb, #fff 45%, transparent) .6px, transparent 1.3px) 21px 30px / 71px 67px;
    -webkit-mask: linear-gradient(180deg, #000, transparent 70%); mask: linear-gradient(180deg, #000, transparent 70%);
}
.gr-tone--deep a:not(.inv-button) { color: var(--inv-shine); }
.gr-tone--deep .gr-arabic { color: var(--inv-shine); }

/* light: ivory with a faint art-deco scale pattern and a champagne glow at the top */
.gr-tone--light {
    background:
        radial-gradient(80% 30% at 50% 0%, color-mix(in srgb, var(--inv-shine) 26%, transparent), transparent 75%),
        radial-gradient(circle at 50% 100%, transparent 0 13px, color-mix(in srgb, var(--inv-gold) 11%, transparent) 13px 14px, transparent 14px 19px, color-mix(in srgb, var(--inv-gold) 8%, transparent) 19px 20px, transparent 20px) 0 0 / 44px 22px,
        var(--inv-background);
}
/* soft: a champagne tint with a fine gold rule at the top */
.gr-tone--soft {
    background:
        linear-gradient(90deg, transparent 10%, var(--gr-line) 50%, transparent 90%) top / 100% 1px no-repeat,
        radial-gradient(80% 40% at 50% 0%, color-mix(in srgb, #fff 50%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-soft), color-mix(in srgb, var(--inv-soft) 50%, var(--inv-background)));
}

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

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

/* section heading: a fan crown, a letter-spaced eyebrow between fine lines, the display title, the italic word */
.gr-heading { margin: 0 0 2.2rem; }
.gr-heading--left { text-align: left; }
.gr-heading__fan { width: 3.4rem; margin: 0 auto .7rem; color: var(--inv-gold); }
.gr-heading__eyebrow {
    display: inline-flex; align-items: center; gap: .7rem; margin: 0 0 .65rem;
    font-size: .68rem; font-weight: 700; line-height: 1.2; letter-spacing: .3em; text-transform: uppercase; color: var(--gr-rose);
}
.gr-heading__eyebrow::before, .gr-heading__eyebrow::after { content: ''; width: 1.6rem; height: 1px; background: currentColor; opacity: .7; }
.gr-heading__title {
    margin: 0; font-family: var(--gr-display); font-size: 2.35rem; font-weight: 600; line-height: 1.1;
    letter-spacing: -.005em; color: var(--gr-ink); text-wrap: balance;
}
.gr-heading__title em { font-weight: 500; font-style: italic; color: var(--gr-rose); }
.gr-tone--deep .gr-heading__fan { color: var(--inv-shine); }
.gr-tone--deep .gr-heading__eyebrow { color: var(--inv-shine); }
.gr-tone--deep .gr-heading__title { color: #fff; }
.gr-tone--deep .gr-heading__title em { color: var(--inv-shine); }

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

/* the art-deco fan (sections/_fan) */
.gr-fan { display: block; overflow: visible; }
.gr-fan__arc { stroke-width: 1.4; }
.gr-fan__ray { stroke-width: .9; opacity: .8; }
.gr-fan__base { stroke-width: 1.2; }

/* the chandelier (sections/_chandelier) */
.gr-chandelier { display: block; overflow: visible; color: var(--inv-shine); }
.gr-chandelier path, .gr-chandelier ellipse { stroke-width: 1.5; }
.gr-chandelier .gr-chandelier__thin { stroke-width: 1; }
.gr-chandelier__glows circle { fill: var(--inv-shine); stroke: none; opacity: .2; }
.gr-chandelier__glows .gr-chandelier__halo { opacity: .07; }
.gr-chandelier__bulb { fill: color-mix(in srgb, #fff 70%, var(--inv-shine)); stroke: none; }
.gr-chandelier__beads { stroke-width: 2.3 !important; stroke-dasharray: 0 4.4; }
.gr-chandelier__crystal { fill: color-mix(in srgb, #fff 32%, transparent); stroke-width: .9 !important; }

/* string lights (sections/_lights): across the top of a dark band */
.gr-lights { display: block; overflow: visible; }
.gr-section__lights { position: absolute; z-index: 0; top: 0; left: -2%; width: 104%; pointer-events: none; }
.gr-lights__wire { stroke: color-mix(in srgb, var(--inv-shine) 45%, #000); stroke-width: 1.1; }
.gr-lights__socket { fill: color-mix(in srgb, var(--inv-shine) 40%, #000); }
.gr-lights__lamp { fill: color-mix(in srgb, #fff 62%, var(--inv-shine)); }
.gr-lights__glow { fill: var(--inv-shine); opacity: .22; }

/* two toasting glasses (sections/_glasses) */
.gr-glasses { display: block; overflow: visible; color: var(--inv-shine); }
.gr-glasses__drink { fill: color-mix(in srgb, var(--inv-shine) 34%, transparent); stroke: none; }
.gr-glasses__bubble { stroke-width: 1.6; opacity: .85; }
.gr-glasses__shine { stroke: #fff; stroke-width: 1; opacity: .45; }
.gr-glasses__spark path { stroke-width: 1.3; }

/* the foil seal (sections/_seal): a scalloped champagne rosette with the text pressed in */
.gr-seal {
    position: relative; display: grid; place-content: center; width: 4.6rem; aspect-ratio: 1; margin: 0; text-align: center;
    clip-path: var(--gr-seal-clip); color: var(--inv-deep); background: var(--gr-foil); rotate: -10deg;
}
.gr-seal__ring { position: absolute; inset: 11%; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-deep) 40%, transparent), inset 0 2px 5px rgb(255 255 255 / .5); }
.gr-seal strong { font-family: var(--gr-display); font-size: 1.7rem; font-weight: 700; line-height: .9; }
.gr-seal__small { margin-top: .12rem; font-size: .5rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; line-height: 1.2; }
.gr-seal--text .gr-seal__small { padding: 0 .55rem; font-size: .56rem; letter-spacing: .08em; }

/* an ivory card with a double gold rule (opening quote, dress code, wishes form) */
.gr-card { position: relative; margin: 0; padding: 2rem 1.4rem 1.8rem; border-radius: 3px; color: var(--inv-text); background: var(--gr-paper); box-shadow: var(--gr-drop); }
.gr-card::before, .gr-card::after { content: ''; position: absolute; pointer-events: none; }
.gr-card::before { inset: 7px; border: 1px solid var(--gr-line); }
.gr-card::after { inset: 11px; border: 1px solid color-mix(in srgb, var(--inv-gold) 22%, transparent); }
.gr-card > * { position: relative; z-index: 1; }
.gr-card__crown { width: 3.6rem; margin: 0 auto .9rem; color: var(--inv-gold); }

/* a fine rule with a diamond in the middle */
.gr-divider { position: relative; display: block; width: min(9rem, 70%); height: 1px; margin: 1.1rem auto; background: linear-gradient(90deg, transparent, var(--gr-line) 25%, var(--gr-line) 75%, transparent); }
.gr-divider i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; translate: -50% -50%; rotate: 45deg; background: var(--inv-gold); box-shadow: 0 0 0 3px var(--gr-paper); }

/* ---------- 4. cover ---------- */
.gr-cover {
    --chand-w: min(30vw, 8.4rem, 15.5svh);
    --spot-w: min(58vw, 14.5rem, 31svh);
    position: fixed; inset: 0; z-index: 30; overflow-x: hidden; overflow-y: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: safe center;
    min-height: 100svh; padding: 1.1rem 1.6rem 1.7rem;
    isolation: isolate; color: var(--inv-background);
    background:
        radial-gradient(70% 42% at 50% 30%, color-mix(in srgb, var(--inv-primary) 85%, transparent), transparent 75%),
        radial-gradient(60% 30% at 100% 100%, color-mix(in srgb, var(--inv-accent) 14%, transparent), transparent 75%),
        radial-gradient(60% 30% at 0% 100%, color-mix(in srgb, var(--inv-shine) 10%, transparent), transparent 75%),
        var(--inv-deep);
    transition: opacity .9s ease;
}
/* the card's double champagne frame around the screen, stepped notches at the corners */
.gr-cover__frame { position: fixed; inset: 10px; z-index: -1; pointer-events: none; border: 1px solid color-mix(in srgb, var(--inv-shine) 50%, transparent); }
.gr-cover__frame::before {
    content: ''; position: absolute; inset: 4px; border: 1px solid color-mix(in srgb, var(--inv-shine) 22%, transparent);
}
.gr-cover__frame::after {
    content: ''; position: absolute; inset: -5px;
    background:
        linear-gradient(var(--inv-shine), var(--inv-shine)) 0 0 / 9px 9px no-repeat,
        linear-gradient(var(--inv-shine), var(--inv-shine)) 100% 0 / 9px 9px no-repeat,
        linear-gradient(var(--inv-shine), var(--inv-shine)) 0 100% / 9px 9px no-repeat,
        linear-gradient(var(--inv-shine), var(--inv-shine)) 100% 100% / 9px 9px no-repeat;
    -webkit-mask: linear-gradient(#000, #000) center / calc(100% - 8px) calc(100% - 8px) no-repeat, linear-gradient(#000, #000);
    -webkit-mask-composite: xor; mask-composite: exclude; opacity: .85;
}
/* a faint sunburst rising from the bottom of the card */
.gr-cover__sunburst {
    position: fixed; z-index: -1; left: 50%; bottom: 10px; width: min(150vw, 40rem); translate: -50% 0;
    color: var(--inv-shine); opacity: .1; pointer-events: none;
}

.gr-cover__inner { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; text-align: center; transition: transform .9s cubic-bezier(.5, 0, .3, 1); }
.gr-cover__chandelier { width: var(--chand-w); margin: 0 auto; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--inv-shine) 45%, transparent)); }

/* the photo in its lit circle, the beam falling from the chandelier, the foil seal */
.gr-cover__stage { position: relative; width: var(--spot-w); margin: .5rem auto 0; }
.gr-cover__beam {
    position: absolute; z-index: -1; left: -40%; right: -40%; top: calc(var(--chand-w) * -.32); height: calc(var(--spot-w) * .9);
    clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-shine) 34%, transparent), color-mix(in srgb, var(--inv-shine) 10%, transparent) 60%, transparent);
    filter: blur(5px);
}
.gr-spot { position: relative; width: 100%; aspect-ratio: 1; margin: 0; padding: 6px; border-radius: 50%; }
.gr-spot::before {
    content: ''; position: absolute; z-index: -1; inset: -22%; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-shine) 32%, transparent), color-mix(in srgb, var(--inv-shine) 8%, transparent) 70%, transparent);
}
.gr-spot::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    box-shadow: inset 0 0 0 1.5px var(--inv-shine), 0 0 0 7px color-mix(in srgb, var(--inv-deep) 0%, transparent), 0 0 0 8px color-mix(in srgb, var(--inv-shine) 40%, transparent);
}
.gr-spot__photo, .gr-spot__empty { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.gr-spot__photo { object-fit: cover; object-position: center 38%; }
.gr-spot__empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
    background: radial-gradient(70% 60% at 50% 30%, color-mix(in srgb, var(--inv-shine) 22%, transparent), transparent 70%), linear-gradient(180deg, var(--inv-primary), var(--inv-deep));
}
.gr-spot__fan { width: 46%; color: var(--inv-shine); opacity: .8; }
.gr-spot__monogram { font-family: var(--gr-display); font-weight: 600; font-style: italic; font-size: calc(var(--spot-w) * .2); line-height: 1; color: var(--inv-shine); }
.gr-cover__seal { position: absolute; z-index: 2; right: -9%; bottom: -2%; width: calc(var(--spot-w) * .32); min-width: 3.6rem; }
.gr-cover__seal strong { font-size: calc(var(--spot-w) * .12); }

.gr-cover__text { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 1rem; }
.gr-cover__title { margin: 0 0 .45rem; max-width: 100%; font-size: .68rem; font-weight: 700; line-height: 1.3; letter-spacing: .3em; text-transform: uppercase; color: var(--inv-shine); }
.gr-cover__name {
    margin: 0; max-width: 16ch; font-family: var(--gr-display); font-size: clamp(1.75rem, 8vw, 2.3rem); font-weight: 600; line-height: 1.08;
    color: #fff; text-wrap: balance; overflow-wrap: anywhere;
}
.gr-cover__batch { display: flex; align-items: center; gap: .7rem; margin: .55rem 0 0; font-size: .7rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--inv-shine); }
.gr-cover__batch::before, .gr-cover__batch::after { content: ''; width: 1.6rem; height: 1px; background: currentColor; opacity: .7; }
.gr-cover__date { margin: .35rem 0 0; font-size: .88rem; font-weight: 600; letter-spacing: .04em; color: var(--gr-cream); }
.gr-cover__quote {
    max-width: 30ch; margin: .3rem 0 0; font-family: var(--gr-display); font-style: italic; font-weight: 500;
    font-size: .95rem; line-height: 1.38; color: color-mix(in srgb, var(--inv-background) 76%, transparent); text-wrap: balance;
}
.gr-cover__guest {
    width: min(100%, 18rem); margin-top: .85rem; padding: .5rem 1rem .45rem;
    border: 1px solid color-mix(in srgb, var(--inv-shine) 50%, transparent);
    background: color-mix(in srgb, var(--inv-shine) 6%, transparent);
    box-shadow: inset 0 0 0 3px var(--inv-deep), inset 0 0 0 4px color-mix(in srgb, var(--inv-shine) 20%, transparent);
}
.gr-cover__guest-label { margin: 0; font-size: .6rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--gr-cream); }
.gr-cover__guest-name { display: block; font-family: var(--gr-script); font-size: 1.75rem; font-weight: 400; line-height: 1.2; color: var(--inv-shine); overflow-wrap: anywhere; }
.gr-cover__open {
    margin-top: 1rem; min-height: 2.95rem; padding: .78rem 2rem .62rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--inv-deep); background: var(--gr-foil);
    box-shadow: 0 0 0 3px var(--inv-deep), 0 0 0 4px color-mix(in srgb, var(--inv-shine) 55%, transparent), 0 12px 30px -8px color-mix(in srgb, var(--inv-shine) 45%, transparent);
}

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

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

/* opening: string lights, the toasting glasses, the greeting big, the quote on an ivory card */
.gr-opening { padding: 5.4rem 1.5rem 4.4rem; }
.gr-opening__glasses { width: 5.6rem; margin: 0 auto 1.1rem; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--inv-shine) 35%, transparent)); }
.gr-opening__basmalah { margin: 0 0 .6rem; font-size: 1.85rem; }
.gr-opening__greeting {
    margin: 0 auto .9rem; max-width: 16ch; font-family: var(--gr-display); font-size: 2.35rem; font-style: italic; font-weight: 500;
    line-height: 1.12; color: #fff; text-wrap: balance;
}
.gr-opening__message { margin: 0 auto; max-width: 31ch; color: var(--gr-cream); }
.gr-opening__quote { max-width: 21.5rem; margin: 2.6rem auto 0; }
.gr-opening__quote blockquote { margin: 0; font-family: var(--gr-display); font-style: italic; font-weight: 500; font-size: 1.12rem; line-height: 1.5; color: var(--gr-ink); }
.gr-opening__quote figcaption { margin-top: .9rem; font-size: .66rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--gr-rose); }

/* organizer: the black deco frame ("then") with the seal, the engraved plaque, the tagline */
.gr-organizer__art { position: relative; display: flex; justify-content: center; padding-top: 1.2rem; filter: drop-shadow(0 24px 22px color-mix(in srgb, var(--inv-deep) 40%, transparent)); }
.gr-frame {
    position: relative; width: min(16rem, 78%); margin: 0; padding: 12px 12px 7px; border-radius: 2px;
    background:
        linear-gradient(var(--inv-shine), var(--inv-shine)) 0 0 / 7px 7px no-repeat,
        linear-gradient(var(--inv-shine), var(--inv-shine)) 100% 0 / 7px 7px no-repeat,
        linear-gradient(var(--inv-shine), var(--inv-shine)) 0 100% / 7px 7px no-repeat,
        linear-gradient(var(--inv-shine), var(--inv-shine)) 100% 100% / 7px 7px no-repeat,
        linear-gradient(160deg, color-mix(in srgb, var(--inv-primary) 88%, #fff), var(--inv-deep) 55%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-gold) 60%, transparent);
}
.gr-frame::before { content: ''; position: absolute; inset: 6px; pointer-events: none; border: 1px solid color-mix(in srgb, var(--inv-shine) 60%, transparent); }
.gr-frame__window { position: relative; overflow: hidden; aspect-ratio: 4 / 3.3; background: var(--inv-deep); }
.gr-frame__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 34%; filter: sepia(.22) saturate(.9) contrast(1.03); }
.gr-frame__empty {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
    background: radial-gradient(70% 60% at 50% 30%, color-mix(in srgb, var(--inv-shine) 22%, transparent), transparent 70%), linear-gradient(180deg, var(--inv-primary), var(--inv-deep));
}
.gr-frame__fan { width: 40%; color: var(--inv-shine); }
.gr-frame__monogram { font-family: var(--gr-display); font-style: italic; font-weight: 600; font-size: 2.2rem; line-height: 1; color: var(--inv-shine); }
.gr-frame__caption { margin: 6px 0 0; font-size: .58rem; font-weight: 700; letter-spacing: .4em; text-transform: uppercase; color: var(--inv-shine); }
.gr-organizer__seal { position: absolute; z-index: 3; top: .3rem; right: max(.2rem, calc(50% - 9.2rem)); }

/* the engraved plaque: a dark plate with a bevelled gold edge and four screws */
.gr-plaque {
    position: relative; max-width: 20rem; margin: 2.3rem auto 0; padding: 1.5rem 1.3rem 1.35rem; border-radius: 3px; color: #fff;
    background:
        radial-gradient(circle at 12px 12px, var(--inv-shine) 2px, transparent 2.6px),
        radial-gradient(circle at calc(100% - 12px) 12px, var(--inv-shine) 2px, transparent 2.6px),
        radial-gradient(circle at 12px calc(100% - 12px), var(--inv-shine) 2px, transparent 2.6px),
        radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), var(--inv-shine) 2px, transparent 2.6px),
        radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, #fff 10%, transparent), transparent 70%),
        linear-gradient(165deg, var(--inv-primary), var(--inv-deep));
    box-shadow: 0 0 0 2px var(--inv-gold), 0 0 0 3.5px var(--inv-shine), 0 0 0 5px color-mix(in srgb, var(--inv-gold) 70%, #000), var(--gr-drop);
}
.gr-plaque::before { content: ''; position: absolute; inset: 22px 8px; pointer-events: none; border-top: 1px solid var(--gr-line-dark); border-bottom: 1px solid var(--gr-line-dark); }
.gr-plaque p { margin: 0; }
.gr-plaque__label { font-size: .6rem; font-weight: 700; letter-spacing: .36em; text-transform: uppercase; color: var(--inv-shine); }
.gr-plaque__batch {
    margin-top: .45rem !important; font-family: var(--gr-display); font-size: 2rem; font-weight: 700; line-height: 1.08;
    background: var(--gr-foil); -webkit-background-clip: text; background-clip: text; color: transparent; overflow-wrap: anywhere;
}
.gr-plaque__name { margin: .45rem 0 0; font-family: var(--gr-sans); font-size: .9rem; font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--gr-cream); overflow-wrap: anywhere; text-wrap: balance; }
.gr-plaque__milestone { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: .65rem !important; font-family: var(--gr-display); font-style: italic; font-size: 1.05rem; color: var(--inv-shine); }
.gr-plaque__milestone::before, .gr-plaque__milestone::after { content: ''; width: 1.4rem; height: 1px; background: currentColor; opacity: .7; }
.gr-organizer__tagline { margin: 1.7rem auto 0 !important; max-width: 26ch !important; font-family: var(--gr-display); font-style: italic; font-weight: 500; font-size: 1.2rem; line-height: 1.5; color: var(--gr-ink); }

/* party: the dress code card, the note, the hashtag */
.gr-dress { max-width: 21rem; margin: 0 auto; padding-top: 1.7rem; }
.gr-dress__label { margin: 0; font-size: .64rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--gr-rose); }
.gr-dress__theme { margin: .3rem 0 0; font-family: var(--gr-display); font-weight: 600; font-size: 1.95rem; line-height: 1.1; color: var(--gr-ink); overflow-wrap: anywhere; }
.gr-dress__name { margin: .3rem 0 0; font-family: var(--gr-display); font-style: italic; font-weight: 500; font-size: 1.25rem; line-height: 1.3; color: var(--gr-ink); }
.gr-dress__try { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); align-items: center; gap: 1rem; margin-top: 1.1rem; text-align: left; }
.gr-dress__jacket { display: block; width: 100%; overflow: visible; }
.gr-dress__shirt { fill: #fff; stroke: var(--inv-deep); stroke-width: 1.4; stroke-linejoin: round; }
.gr-dress__body { fill: var(--gr-pick, var(--inv-deep)); stroke: var(--inv-deep); stroke-width: 1.6; stroke-linejoin: round; transition: fill .35s ease; }
.gr-dress__line { fill: none; stroke: rgb(128 128 128 / .75); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.gr-dress__button { fill: var(--inv-gold); }
.gr-swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.gr-swatch {
    width: 1.9rem; height: 1.9rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .45), transparent 45%), var(--gr-swatch);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2), 0 0 0 2px var(--gr-paper), 0 0 0 3px var(--gr-line);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease;
}
.gr-swatch[aria-pressed="true"] { transform: scale(1.15); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2), 0 0 0 2px var(--gr-paper), 0 0 0 4px var(--inv-gold); }
.gr-swatch:focus-visible { outline: 2px solid var(--gr-ink); outline-offset: 4px; }
.gr-dress__hint { margin: .5rem 0 0; font-size: .76rem; color: var(--gr-muted); }
.gr-party__note {
    position: relative; max-width: 21rem !important; margin: 2rem auto 0 !important; padding: 1.1rem 1.3rem;
    font-family: var(--gr-display); font-style: italic; font-size: 1.05rem; line-height: 1.5; color: var(--gr-cream);
    border-top: 1px solid var(--gr-line-dark); border-bottom: 1px solid var(--gr-line-dark);
}
.gr-party__note::before, .gr-party__note::after { content: ''; position: absolute; left: 50%; width: 7px; height: 7px; translate: -50% -50%; rotate: 45deg; background: var(--inv-shine); }
.gr-party__note::before { top: 0; }
.gr-party__note::after { top: 100%; }
.gr-party__hashtag {
    display: inline-flex; align-items: center; gap: .6rem; max-width: 100%; margin-top: 2rem; padding: .35rem .4rem .35rem 1.1rem; border-radius: 999px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-shine) 60%, transparent);
}
.gr-party__hashtag-text { min-width: 0; font-family: var(--gr-display); font-style: italic; font-weight: 600; font-size: 1.1rem; color: var(--inv-shine); overflow-wrap: anywhere; }
.gr-party__copy {
    flex: none; min-height: 2.2rem; padding: .4rem .95rem .3rem; border: 0; border-radius: 999px; cursor: pointer;
    font: 700 .72rem/1 var(--gr-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--inv-deep); background: var(--gr-foil);
}
.gr-party__hint { margin: .6rem auto 0 !important; font-size: .78rem; color: var(--gr-cream); }

/* events: numbered table cards — a tent card with a fold, a medallion with the table number on the top edge */
.gr-table { position: relative; padding-top: 3.6rem; }
.gr-table + .gr-table { margin-top: 2.4rem; }
.gr-table::after {
    content: ''; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -14px; height: 22px; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-deep) 30%, transparent), transparent);
}
.gr-table__card {
    position: relative; padding: 2.6rem 1.3rem 1.5rem; border-radius: 3px; text-align: center; color: var(--inv-text);
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-soft) 80%, #fff) 0 12px, color-mix(in srgb, var(--inv-gold) 35%, transparent) 12px 13px, var(--gr-paper) 13px);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-gold) 25%, transparent), 0 26px 36px -26px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.gr-table__card::before { content: ''; position: absolute; inset: 20px 8px 8px; pointer-events: none; border: 1px solid var(--gr-line); }
.gr-table__card > * { position: relative; }
.gr-table__number { position: absolute !important; z-index: 2; left: 50%; top: -3.6rem; width: 7.4rem; height: 5.6rem; margin: 0; translate: -50% 0; }
.gr-table__fan { position: absolute; left: 0; top: 0; width: 100%; color: var(--inv-gold); }
.gr-table__medal {
    position: absolute; left: 50%; bottom: 0; display: grid; place-content: center; width: 3.9rem; height: 3.9rem; translate: -50% 0; border-radius: 50%;
    color: #fff; background: radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--inv-primary) 70%, #fff 12%), var(--inv-deep) 70%);
    box-shadow: 0 0 0 2px var(--gr-paper), 0 0 0 3.5px var(--inv-gold), 0 10px 16px -8px rgb(0 0 0 / .5);
}
.gr-table__medal small { font-size: .46rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--inv-shine); line-height: 1; padding-left: .3em; }
.gr-table__medal strong { font-family: var(--gr-display); font-size: 1.45rem; font-weight: 700; line-height: 1; margin-top: .15rem; }
.gr-table__media { margin: 0 0 1.2rem; padding: 4px; border: 1px solid var(--gr-line); }
.gr-table__photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 55%; }
.gr-table__name { margin: 0; font-family: var(--gr-display); font-weight: 600; font-size: 1.55rem; line-height: 1.15; color: var(--gr-ink); text-wrap: balance; }
.gr-table__date { margin: .4rem 0 0; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gr-rose); }
.gr-table__rows { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; text-align: left; font-size: .92rem; }
.gr-table__rows li { display: flex; align-items: flex-start; gap: .75rem; }
.gr-table__rows .gr-icon { width: 2.1rem; height: 2.1rem; padding: .48rem; border-radius: 50%; color: var(--gr-ink); box-shadow: inset 0 0 0 1px var(--gr-line); }
.gr-table__rows li > span { padding-top: .42rem; }
.gr-table__venue { display: block; font-weight: 700; }
.gr-table__address { display: block; font-size: .86rem; color: var(--gr-muted); }
.gr-table .inv-maps { margin: 1.2rem 0 0; text-align: center; }
.gr-table .inv-maps .inv-button { width: 100%; min-height: 2.8rem; padding-top: .8rem; padding-bottom: .62rem; font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: var(--gr-ink); }
.gr-table .inv-maps__frame { height: 190px; border-radius: 2px; }
/* every second table card is black with champagne */
.gr-table--dark .gr-table__card {
    color: var(--inv-background);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 70%, #000) 0 12px, color-mix(in srgb, var(--inv-shine) 40%, transparent) 12px 13px, transparent 13px),
        radial-gradient(90% 50% at 50% 0%, color-mix(in srgb, var(--inv-shine) 12%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-primary), var(--inv-deep));
}
.gr-table--dark .gr-table__card::before { border-color: var(--gr-line-dark); }
.gr-table--dark .gr-table__medal { color: var(--gr-ink); background: var(--gr-foil); box-shadow: 0 0 0 2px var(--inv-background), 0 0 0 3.5px var(--inv-gold), 0 10px 16px -8px rgb(0 0 0 / .5); }
.gr-table--dark .gr-table__medal small { color: var(--gr-ink); }
.gr-table--dark .gr-table__name { color: #fff; }
.gr-table--dark .gr-table__date { color: var(--inv-shine); }
.gr-table--dark .gr-table__media { border-color: var(--gr-line-dark); }
.gr-table--dark .gr-divider { background: linear-gradient(90deg, transparent, var(--gr-line-dark) 25%, var(--gr-line-dark) 75%, transparent); }
.gr-table--dark .gr-divider i { background: var(--inv-shine); box-shadow: 0 0 0 3px var(--inv-deep); }
.gr-table--dark .gr-table__rows .gr-icon { color: var(--inv-shine); box-shadow: inset 0 0 0 1px var(--gr-line-dark); }
.gr-table--dark .gr-table__address { color: var(--gr-cream); }
.gr-table--dark a:not(.inv-button) { color: var(--inv-shine); }
.gr-table--dark .inv-maps .inv-button { color: var(--inv-deep); background: var(--gr-foil); }

/* countdown: the spotlight beam, the pool of light on the dance floor, the date, arched panels */
.gr-countdown__beam {
    position: absolute; z-index: -1; left: 50%; top: 0; width: 130%; height: 78%; translate: -50% 0; pointer-events: none;
    clip-path: polygon(45% 0, 55% 0, 86% 100%, 14% 100%);
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-shine) 26%, transparent), color-mix(in srgb, var(--inv-shine) 8%, transparent) 70%, transparent);
    filter: blur(6px);
}
.gr-floor { position: relative; width: min(18rem, 88%); margin: -.6rem auto 2.4rem; padding: .4rem 0 2.6rem; }
.gr-floor::before {
    content: ''; position: absolute; z-index: -1; left: -16%; right: -16%; bottom: -.4rem; height: 6rem; border-radius: 50%; pointer-events: none;
    background:
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-shine) 18%, transparent) 0 1px, transparent 1px 24px),
        radial-gradient(closest-side, color-mix(in srgb, var(--inv-shine) 50%, transparent), color-mix(in srgb, var(--inv-shine) 16%, transparent) 65%, transparent);
    -webkit-mask: radial-gradient(closest-side, #000 45%, transparent); mask: radial-gradient(closest-side, #000 45%, transparent);
}
.gr-floor p { margin: 0; }
.gr-floor__glasses { width: 4.8rem; margin: 0 auto .5rem; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--inv-shine) 40%, transparent)); }
.gr-floor__weekday { font-size: .72rem; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; color: var(--inv-shine); }
.gr-floor__day { display: flex; align-items: center; justify-content: center; gap: 1rem; font-family: var(--gr-display); font-weight: 600; font-size: 5.4rem; line-height: 1.02; color: #fff; }
.gr-floor__day::before, .gr-floor__day::after { content: ''; width: 2.6rem; height: 1px; background: linear-gradient(90deg, transparent, var(--inv-shine)); }
.gr-floor__day::after { rotate: 180deg; }
.gr-floor__month { font-size: .76rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--gr-cream); }
.gr-floor__time { margin-top: .25rem !important; font-family: var(--gr-display); font-style: italic; font-size: 1rem; color: var(--inv-shine); }
.gr-countdown .inv-countdown { gap: clamp(.45rem, 2.4vw, .75rem); }
.gr-countdown .inv-countdown__item {
    display: grid; place-content: center; width: clamp(4rem, 18.5vw, 4.6rem); min-width: 0; aspect-ratio: 4 / 5.2; padding: .7rem 0 .3rem;
    border-radius: 999px 999px 4px 4px; color: #fff;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-shine) 14%, transparent), color-mix(in srgb, var(--inv-shine) 3%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-shine) 60%, 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) 18%, transparent);
}
.gr-countdown .inv-countdown__value { font-variant-numeric: lining-nums tabular-nums; font-family: var(--gr-display); font-weight: 600; font-size: 1.8rem; line-height: 1.05; color: #fff; }
.gr-countdown .inv-countdown__label { margin-top: .2rem; font-size: .54rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--inv-shine); opacity: 1; }
.gr-countdown .inv-countdown__done { font-family: var(--gr-display); font-size: 1.3rem; font-style: italic; color: var(--inv-shine); }
.gr-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 2rem; }
.gr-countdown .inv-countdown__actions .inv-button {
    width: min(100%, 17rem); min-height: 2.75rem; padding: .72rem 1rem .58rem; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--inv-shine); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-shine) 60%, transparent);
}
.gr-countdown .inv-countdown__actions .inv-button:first-child { color: var(--inv-deep); background: var(--gr-foil); box-shadow: none; }

/* rundown: the printed programme of the evening */
.gr-programme { position: relative; max-width: 23rem; margin: 0 auto; border-radius: 3px; overflow: hidden; background: var(--gr-paper); box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-gold) 30%, transparent), var(--gr-drop); }
.gr-programme::after { content: ''; position: absolute; inset: 7px; pointer-events: none; border: 1px solid var(--gr-line); }
.gr-programme__head {
    padding: 1.4rem 1rem 1.2rem; color: #fff;
    background: radial-gradient(80% 90% at 50% 0%, color-mix(in srgb, var(--inv-shine) 20%, transparent), transparent 70%), linear-gradient(180deg, var(--inv-primary), var(--inv-deep));
}
.gr-programme__fan { width: 3.6rem; margin: 0 auto .55rem; color: var(--inv-shine); }
.gr-programme__head p { margin: 0; }
.gr-programme__title { font-size: .76rem; font-weight: 700; letter-spacing: .38em; text-transform: uppercase; color: var(--inv-shine); padding-left: .38em; }
.gr-programme__for { margin-top: .25rem !important; font-family: var(--gr-display); font-style: italic; font-size: 1.1rem; color: #fff; }
.gr-programme__list { margin: 0; padding: 1.3rem 1.4rem 1.7rem; list-style: none; }
.gr-programme__step { position: relative; padding: .2rem 0; }
.gr-programme__step + .gr-programme__step { margin-top: 1.5rem; }
.gr-programme__step + .gr-programme__step::before {
    content: ''; position: absolute; left: 50%; top: -.95rem; width: 5px; height: 5px; translate: -50% 0; rotate: 45deg; background: var(--inv-gold);
    box-shadow: -14px 14px 0 -1.5px transparent;
}
.gr-programme__time {
    display: inline-block; padding: .16rem .75rem .1rem; border-radius: 999px;
    font-family: var(--gr-display); font-style: italic; font-weight: 600; font-size: .92rem; font-variant-numeric: lining-nums tabular-nums;
    color: var(--inv-shine); background: var(--gr-ink);
}
.gr-programme__step h3 { margin: .45rem 0 0; font-family: var(--gr-display); font-weight: 600; font-size: 1.14rem; line-height: 1.3; color: var(--gr-ink); text-wrap: balance; }
.gr-programme__step p { margin: .15rem 0 0; font-size: .86rem; line-height: 1.45; color: var(--gr-muted); }

/* story: memories in slim deco frames under a spotlight, the year as an outlined gold numeral */
.gr-story { padding-top: 5.4rem; }
.gr-story__list { display: grid; gap: 2.8rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.gr-story__item { display: grid; grid-template-columns: 45% minmax(0, 1fr); align-items: center; gap: 1.2rem; }
.gr-story__item--flip { grid-template-columns: minmax(0, 1fr) 45%; }
.gr-story__item--flip .gr-story__frame { order: 2; }
.gr-story__item--flip .gr-story__body { text-align: right; }
.gr-story__frame { position: relative; margin: 0; padding: 5px; outline: 1px solid var(--gr-line-dark); outline-offset: 4px; background: color-mix(in srgb, var(--inv-shine) 18%, transparent); }
.gr-story__frame img {
    display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
    clip-path: polygon(10px 0, calc(100% - 10px) 0, calc(100% - 10px) 5px, calc(100% - 5px) 5px, calc(100% - 5px) 10px, 100% 10px, 100% calc(100% - 10px), calc(100% - 5px) calc(100% - 10px), calc(100% - 5px) calc(100% - 5px), calc(100% - 10px) calc(100% - 5px), calc(100% - 10px) 100%, 10px 100%, 10px calc(100% - 5px), 5px calc(100% - 5px), 5px calc(100% - 10px), 0 calc(100% - 10px), 0 10px, 5px 10px, 5px 5px, 10px 5px);
}
.gr-story__when {
    display: block; margin-bottom: .25rem; font-family: var(--gr-display); font-style: italic; font-weight: 700; font-size: 2.6rem; line-height: 1;
    color: transparent; -webkit-text-stroke: 1px var(--inv-shine); overflow-wrap: anywhere;
}
.gr-story__body h3 { margin: 0; font-family: var(--gr-display); font-weight: 600; font-size: 1.35rem; line-height: 1.18; color: #fff; }
.gr-story__body p { margin: .45rem 0 0; font-size: .9rem; line-height: 1.55; color: var(--gr-cream); }
/* a moment without a photo: a framed card across the full width */
.gr-story__item--text { display: block; padding: 1.5rem 1.3rem 1.4rem; text-align: center; border: 1px solid var(--gr-line-dark); outline: 1px solid color-mix(in srgb, var(--inv-shine) 20%, transparent); outline-offset: 4px; background: color-mix(in srgb, var(--inv-shine) 5%, transparent); }
.gr-story__item--text.gr-story__item--flip .gr-story__body { text-align: center; }

/* gallery: portraits on the ballroom wall — a thin dark frame with a champagne line */
.gr-gallery .inv-gallery { gap: .95rem .85rem; padding: .3rem; }
.gr-gallery .inv-gallery__item {
    border: 4px solid var(--gr-ink); border-radius: 2px; outline: 1px solid var(--gr-line); outline-offset: 3px;
    box-shadow: 0 16px 24px -16px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.gr-gallery .inv-gallery__item:first-child { grid-row: span 2; aspect-ratio: auto; }

/* live streaming: a VIP pass on a champagne lanyard */
.gr-stream { padding-top: 3.4rem; }
.gr-pass { position: relative; max-width: 17.5rem; margin: 0 auto; padding-top: 4.6rem; }
.gr-pass__strap { position: absolute; left: 50%; top: -3.6rem; width: 6rem; height: 8.6rem; translate: -50% 0; pointer-events: none; }
.gr-pass__strap::before, .gr-pass__strap::after {
    content: ''; position: absolute; bottom: 0; left: 50%; width: .95rem; height: 100%; transform-origin: 50% 100%;
    background: repeating-linear-gradient(180deg, rgb(255 255 255 / .12) 0 2px, transparent 2px 6px), linear-gradient(90deg, color-mix(in srgb, var(--inv-accent) 85%, #000), var(--inv-accent) 50%, color-mix(in srgb, var(--inv-accent) 85%, #000));
}
.gr-pass__strap::before { translate: -100% 0; rotate: 16deg; }
.gr-pass__strap::after { rotate: -16deg; }
.gr-pass__clip { position: absolute; z-index: 2; left: 50%; top: 3.9rem; width: 1.6rem; height: 1.5rem; translate: -50% 0; border-radius: 4px 4px 8px 8px; background: var(--gr-foil); box-shadow: 0 3px 4px rgb(0 0 0 / .4); }
.gr-pass__card {
    position: relative; padding: 2.1rem 1.3rem 1.25rem; border-radius: 16px; color: var(--inv-background);
    background:
        radial-gradient(90% 50% at 50% 0%, color-mix(in srgb, var(--inv-shine) 16%, transparent), transparent 70%),
        linear-gradient(165deg, color-mix(in srgb, var(--inv-primary) 92%, #fff), var(--inv-deep) 70%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-shine) 55%, transparent), 0 30px 50px -24px #000;
}
.gr-pass__card::before { content: ''; position: absolute; inset: 8px; border-radius: 10px; pointer-events: none; border: 1px solid color-mix(in srgb, var(--inv-shine) 22%, transparent); }
.gr-pass__card > * { position: relative; }
.gr-pass__slot { position: absolute !important; top: .8rem; left: 50%; width: 2.8rem; height: .5rem; translate: -50% 0; border-radius: 999px; background: var(--inv-deep); box-shadow: inset 0 1px 2px #000, 0 0 0 1px color-mix(in srgb, var(--inv-shine) 30%, transparent); }
.gr-pass__card p { margin: 0 auto; }
.gr-pass__vip {
    margin-top: .35rem !important; font-family: var(--gr-display); font-weight: 700; font-size: 3.3rem; line-height: 1; letter-spacing: .16em; padding-left: .16em;
    background: var(--gr-foil); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gr-pass__access { margin-top: .3rem !important; font-size: .62rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--gr-cream); }
.gr-pass__icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin: 1.1rem auto .55rem; border-radius: 50%; color: var(--inv-deep); background: var(--gr-foil); box-shadow: 0 0 0 4px color-mix(in srgb, var(--inv-shine) 18%, transparent); }
.gr-pass__icon .gr-icon { width: 1.6rem; height: 1.6rem; }
.gr-pass__title { margin: 0 0 .3rem; font-family: var(--gr-display); font-weight: 600; font-size: 1.55rem; line-height: 1.1; color: #fff; }
.gr-pass__text { max-width: 26ch; font-size: .86rem; color: var(--gr-cream); }
.gr-pass__note { max-width: 28ch; margin-top: .45rem !important; font-size: .86rem; font-weight: 700; color: var(--inv-shine); }
.gr-pass__button { width: 100%; min-height: 2.8rem; margin-top: 1.1rem; padding: .78rem 1rem .62rem; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--inv-deep) !important; background: var(--gr-foil) !important; }
.gr-pass__barcode {
    display: block; height: 1.5rem; margin: 1.1rem auto 0; width: 70%; opacity: .5;
    background: repeating-linear-gradient(90deg, var(--inv-shine) 0 2px, transparent 2px 4px, var(--inv-shine) 4px 5px, transparent 5px 8px, var(--inv-shine) 8px 11px, transparent 11px 13px, var(--inv-shine) 13px 14px, transparent 14px 17px);
}

/* RSVP: the RSVP card with a foil seal on its top edge */
.gr-rsvp__card {
    position: relative; max-width: 25rem; margin: 3.9rem auto 0; padding: 3.4rem 1.2rem 1.5rem; border-radius: 3px; color: var(--inv-text); background: var(--gr-paper);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-gold) 30%, transparent), 0 34px 54px -30px color-mix(in srgb, var(--inv-deep) 75%, transparent);
}
.gr-rsvp__card::before, .gr-rsvp__card::after { content: ''; position: absolute; pointer-events: none; }
.gr-rsvp__card::before { inset: 7px; border: 1px solid var(--gr-line); }
.gr-rsvp__card::after { inset: 11px; border: 1px solid color-mix(in srgb, var(--inv-gold) 22%, transparent); }
.gr-rsvp__card > * { position: relative; z-index: 1; }
.gr-rsvp__seal { position: absolute !important; z-index: 2 !important; left: 50%; top: 0; width: 5.2rem; translate: -50% -50%; rotate: 0deg; }
.gr-rsvp__seal strong { font-size: 1.55rem; font-style: italic; }
.gr-rsvp__title { margin: 0; padding-left: .3em; font-family: var(--gr-display); font-weight: 700; font-size: 2.1rem; line-height: 1.1; letter-spacing: .3em; color: var(--gr-ink); }
.gr-rsvp__for { margin: .3rem 0 0; font-family: var(--gr-display); font-style: italic; font-size: 1.08rem; color: var(--gr-rose); overflow-wrap: anywhere; }
.gr-rsvp__intro { margin: 0 auto 1.1rem; max-width: 30ch; font-size: .9rem; color: var(--gr-muted); }
.gr-rsvp__sent { margin-bottom: 1rem; }
.gr-rsvp__stamp {
    display: inline-block; margin: .2rem 0 .7rem; padding: .45rem 1rem .3rem; rotate: -4deg;
    font-size: 1rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gr-rose);
    box-shadow: inset 0 0 0 1.5px var(--gr-rose), inset 0 0 0 4px var(--gr-paper), inset 0 0 0 5px color-mix(in srgb, var(--gr-rose) 60%, transparent);
}
.gr-rsvp__line { margin: 0; font-size: .9rem; color: var(--gr-muted); }
.gr-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .84rem; font-weight: 700; color: var(--gr-rose); }

/* gift ("Iuran & donasi"): black member cards two per row; the address on an ivory card */
.gr-gift__intro { color: var(--gr-muted); }
.gr-gift__treasurer { display: inline-flex !important; align-items: center; gap: .5rem; padding: .4rem .95rem .3rem; border-radius: 999px; font-size: .84rem; font-weight: 600; color: #fff; background: var(--gr-ink); }
.gr-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1.4rem; }
.gr-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.gr-gift .inv-gift__account {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; min-width: 0; margin: 0;
    padding: 1rem .85rem .95rem; border-radius: 12px; text-align: left; color: var(--inv-background);
    background:
        repeating-radial-gradient(circle at 0 100%, color-mix(in srgb, var(--inv-shine) 7%, transparent) 0 1px, transparent 1px 7px),
        radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--inv-shine) 16%, transparent), transparent 60%),
        linear-gradient(160deg, var(--inv-primary), var(--inv-deep));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-shine) 40%, transparent), 0 20px 30px -20px color-mix(in srgb, var(--inv-deep) 85%, transparent);
}
/* the champagne chip in the top-right corner */
.gr-gift .inv-gift__account:not(.inv-gift__address)::before {
    content: ''; position: absolute; top: .95rem; right: .85rem; width: 1.75rem; height: 1.3rem; border-radius: 4px;
    background: linear-gradient(90deg, transparent 45%, rgb(0 0 0 / .25) 45% 55%, transparent 55%), linear-gradient(180deg, transparent 30%, rgb(0 0 0 / .25) 30% 38%, transparent 38% 62%, rgb(0 0 0 / .25) 62% 70%, transparent 70%), var(--gr-foil);
}
.gr-gift .inv-gift__account p { margin: 0; }
.gr-gift .inv-gift__bank { min-height: 1.6rem; display: flex; align-items: center; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--inv-shine); }
.gr-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .4rem; background: #fff; }
.gr-gift .inv-gift__logo img { max-width: 4.6rem; }
.gr-gift .inv-gift__number {
    margin-top: .7rem !important; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .95rem; font-weight: 700;
    letter-spacing: .05em; line-height: 1.3; overflow-wrap: anywhere; color: #fff;
}
.gr-gift .inv-gift__holder { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gr-cream); overflow-wrap: anywhere; }
.gr-gift .inv-button { margin-top: .45rem; min-height: 2.25rem; padding: .48rem .9rem .32rem; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--inv-shine); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-shine) 60%, transparent); }
.gr-gift .inv-gift__address {
    align-items: center; margin-top: .9rem; padding: 1.3rem 1rem 1.2rem; border-radius: 3px; text-align: center; font-size: .9rem; color: var(--inv-text);
    background: var(--gr-paper); box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-gold) 30%, transparent), inset 0 0 0 7px var(--gr-paper), inset 0 0 0 8px var(--gr-line), var(--gr-drop);
}
.gr-gift .inv-gift__address .inv-gift__bank { justify-content: center; color: var(--gr-rose); }
.gr-gift .inv-gift__address .inv-gift__holder { font-size: .72rem; color: var(--gr-muted); }
.gr-gift .inv-gift__address .inv-button { color: #fff; background: var(--gr-ink); box-shadow: none; }

/* co-hosts ("Panitia"): place cards on the table, two per row */
.gr-cohosts__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem .8rem; max-width: 24rem; margin: 0 auto; padding: 0; list-style: none; }
.gr-place {
    position: relative; margin: 0; padding: 1.4rem .7rem 1rem; border-radius: 2px; text-align: center; color: var(--inv-text);
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-soft) 80%, #fff) 0 9px, color-mix(in srgb, var(--inv-gold) 40%, transparent) 9px 10px, var(--gr-paper) 10px);
    box-shadow: 0 18px 22px -16px #000;
}
.gr-place::before { content: ''; position: absolute; inset: 15px 5px 5px; pointer-events: none; border: 1px solid var(--gr-line); }
.gr-place > * { position: relative; }
.gr-place:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .4rem); }
.gr-place__fan { width: 2.3rem; margin: 0 auto .35rem; color: var(--inv-gold); }
.gr-place p { margin: 0; }
.gr-place__role { font-size: .58rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--gr-rose); }
.gr-place__name { margin-top: .3rem !important; font-family: var(--gr-display); font-style: italic; font-weight: 500; font-size: 1.08rem; line-height: 1.3; color: var(--gr-ink); overflow-wrap: anywhere; }

/* contacts: white rows with a gold rule, the initial on a black disc, a black WhatsApp button */
.gr-contacts__list { display: grid; gap: .8rem; max-width: 24rem; margin: 0 auto; }
.gr-contact {
    display: grid; grid-template-columns: 2.9rem minmax(0, 1fr) auto; align-items: center; gap: .85rem; padding: .7rem .7rem .7rem .75rem; border-radius: 3px;
    color: var(--inv-text); background: #fff; text-align: left;
    box-shadow: 0 0 0 1px var(--gr-line), inset 0 0 0 4px #fff, inset 0 0 0 5px color-mix(in srgb, var(--inv-gold) 18%, transparent), 0 16px 26px -20px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.gr-contact__avatar {
    display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%;
    font-family: var(--gr-display); font-weight: 600; font-size: 1.3rem; color: var(--inv-shine); background: var(--gr-ink);
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--inv-gold);
}
.gr-contact p { margin: 0; }
.gr-contact__name { font-weight: 700; font-size: .98rem; line-height: 1.3; overflow-wrap: anywhere; }
.gr-contact__role { font-size: .8rem; color: var(--gr-muted); }
.gr-contact__phone { font-size: .85rem; }
.gr-contact__button { min-height: 2.5rem; padding: .5rem .95rem .4rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--gr-ink); }
.gr-contact__button .gr-icon { width: 1.05rem; height: 1.05rem; margin-top: -.15rem; color: var(--inv-shine); }

/* health protocol: white chips with a gold ring */
.gr-protocol__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.gr-protocol__list li { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem .35rem; border-radius: 999px; font-size: .86rem; background: #fff; box-shadow: inset 0 0 0 1px var(--gr-line); }
.gr-protocol__list .gr-icon { width: 1rem; height: 1rem; color: var(--gr-rose); }
.gr-protocol__note { font-size: .9rem; color: var(--gr-muted); }

/* vendors: centred credits with a gold diamond between them */
.gr-vendors__list { max-width: 22rem; margin: 0 auto; padding: 0; list-style: none; }
.gr-vendor { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.gr-vendor + .gr-vendor { margin-top: 1.1rem; padding-top: 1.2rem; }
.gr-vendor + .gr-vendor::before {
    content: ''; position: absolute; top: 0; left: 50%; width: 6rem; height: 7px; translate: -50% 0;
    background: linear-gradient(45deg, transparent 42%, var(--inv-gold) 42% 58%, transparent 58%) center / 7px 7px no-repeat, linear-gradient(-45deg, transparent 42%, var(--inv-gold) 42% 58%, transparent 58%) center / 7px 7px no-repeat,
        linear-gradient(90deg, transparent, var(--gr-line) 30%, transparent 44%, transparent 56%, var(--gr-line) 70%, transparent) center / 100% 1px no-repeat;
}
.gr-vendor__role { font-size: .62rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--gr-rose); }
.gr-vendor__name { font-family: var(--gr-display); font-weight: 600; font-size: 1.25rem; line-height: 1.25; color: var(--gr-ink); overflow-wrap: anywhere; }
.gr-vendor__link {
    display: inline-flex; align-items: center; gap: .35rem; min-height: 2.2rem; margin-top: .2rem; padding: .35rem .8rem .25rem; border-radius: 999px;
    font-size: .76rem; font-weight: 600; text-decoration: none; color: var(--gr-ink); background: color-mix(in srgb, #fff 60%, transparent); box-shadow: inset 0 0 0 1px var(--gr-line);
}
.gr-vendor__link .gr-icon { width: .95rem; height: .95rem; margin-top: -.12rem; }

/* closing: under the chandelier — the photo fading into the deep colour, the thanks, the glasses, the plate */
.gr-closing { padding: 3.3rem 1.6rem 2.3rem; }
.gr-closing--photo { padding-top: 0; }
.gr-closing__photo { position: relative; z-index: -1; height: min(98vw, 26rem); margin: 0 -1.6rem; overflow: hidden; -webkit-mask: linear-gradient(180deg, #000 0, #000 52%, rgb(0 0 0 / .55) 74%, rgb(0 0 0 / .18) 90%, transparent 100%); mask: linear-gradient(180deg, #000 0, #000 52%, rgb(0 0 0 / .55) 74%, rgb(0 0 0 / .18) 90%, transparent 100%); }
.gr-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 30%; --inv-parallax: 30px; }
.gr-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 20%, transparent), transparent 20%, transparent 34%, color-mix(in srgb, var(--inv-deep) 62%, transparent) 62%, var(--inv-deep) 92%);
}
.gr-closing__body { position: relative; }
.gr-closing--photo .gr-closing__body { margin-top: -4.6rem; }
.gr-closing__body::before {
    content: ''; position: absolute; z-index: -1; left: 50%; top: -3rem; width: 130%; height: 17rem; translate: -50% 0; pointer-events: none;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-shine) 16%, transparent), transparent);
}
.gr-closing__chandelier { width: 6.8rem; margin: 0 auto .6rem; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--inv-shine) 50%, transparent)); }
.gr-closing__eyebrow { margin: 0 0 .35rem; font-size: .68rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--inv-shine); }
.gr-closing__title { margin: 0 0 .7rem; font-family: var(--gr-display); font-weight: 600; font-size: clamp(1.9rem, 8.5vw, 2.4rem); line-height: 1.05; color: #fff; }
.gr-closing__title em { font-style: italic; font-weight: 500; color: var(--inv-shine); }
.gr-closing__message { margin: 0 auto; max-width: 32ch; font-size: .93rem; line-height: 1.6; color: var(--gr-cream); }
.gr-closing__salam { margin: .8rem auto 0; max-width: 24ch; font-family: var(--gr-display); font-size: 1.12rem; font-style: italic; line-height: 1.35; color: var(--inv-shine); }
.gr-closing__signature { margin: .35rem auto 0; max-width: 30ch; font-size: .86rem; color: var(--gr-cream); }
.gr-closing__glasses { width: 3.2rem; margin: 1.2rem auto .6rem; }
.gr-closing__plate {
    display: inline-block; max-width: 100%; padding: .6rem 1.2rem .5rem;
    border: 1px solid color-mix(in srgb, var(--inv-shine) 55%, transparent); outline: 1px solid color-mix(in srgb, var(--inv-shine) 20%, transparent); outline-offset: 4px;
}
.gr-closing__plate p { margin: 0; }
.gr-closing__plate-name { font-family: var(--gr-display); font-weight: 600; font-size: 1.12rem; line-height: 1.25; color: #fff; overflow-wrap: anywhere; }
.gr-closing__plate-batch { margin-top: .2rem !important; font-size: .62rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--inv-shine); }

/* ---------- 6. forms (shared RSVP + wishes, restyled) ---------- */
.gr-main .inv-form { gap: 1rem; text-align: left; }
.gr-main .inv-form label, .gr-main .inv-form__choices legend { font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--inv-text); }
.gr-main .inv-form input:not([type=radio]):not([type=checkbox]),
.gr-main .inv-form select,
.gr-main .inv-form textarea {
    width: 100%; min-height: 2.9rem; padding: .75rem .9rem .6rem; border: 0; border-radius: 3px;
    font: 400 .95rem/1.4 var(--gr-sans); color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-gold) 45%, transparent);
    transition: box-shadow .2s ease;
}
.gr-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;
}
.gr-main .inv-form input:not([type=radio]):focus-visible,
.gr-main .inv-form select:focus-visible,
.gr-main .inv-form textarea:focus-visible {
    outline: none; box-shadow: inset 0 0 0 1.5px var(--gr-ink), 0 0 0 4px color-mix(in srgb, var(--inv-shine) 45%, transparent);
}
.gr-main .inv-form button[type=submit] {
    width: 100%; min-height: 3rem; padding-top: .85rem; padding-bottom: .68rem; font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--inv-shine); background: var(--gr-ink); box-shadow: 0 12px 22px -12px color-mix(in srgb, var(--inv-deep) 80%, transparent);
}
.gr-main .inv-form .inv-button--outline { width: 100%; min-height: 2.75rem; color: var(--gr-ink); box-shadow: inset 0 0 0 1px var(--gr-ink); }
.gr-main .inv-form__notice { text-align: center; }

/* the three answers as cards with icons (the radio dot is hidden but still focusable) */
.gr-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.gr-rsvp .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.gr-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: 3px; cursor: pointer; text-align: center;
    font-size: .82rem; font-weight: 700; line-height: 1.2; color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-gold) 40%, transparent);
    transition: background-color .25s ease, color .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.gr-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.gr-rsvp .inv-form__choices label::before {
    content: ''; width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px var(--gr-line);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.gr-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(--gr-ink); pointer-events: none;
    -webkit-mask: var(--gr-choice-icon) center / contain no-repeat; mask: var(--gr-choice-icon) center / contain no-repeat;
}
.gr-rsvp .inv-form__choices label:nth-of-type(1) {
    --gr-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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.gr-rsvp .inv-form__choices label:nth-of-type(2) {
    --gr-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.4' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
}
.gr-rsvp .inv-form__choices label:nth-of-type(3) {
    --gr-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.4' 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");
}
.gr-rsvp .inv-form__choices label:has(input:checked) {
    color: #fff; background: var(--gr-ink); transform: translateY(-3px);
    box-shadow: 0 0 0 2px var(--inv-shine), 0 12px 24px -12px color-mix(in srgb, var(--inv-deep) 80%, transparent);
}
.gr-rsvp .inv-form__choices label:has(input:checked)::before { box-shadow: inset 0 0 0 1px var(--inv-shine); transform: scale(1.1); }
.gr-rsvp .inv-form__choices label:has(input:checked)::after { color: var(--inv-shine); }
.gr-rsvp .inv-form__choices label:has(input:focus-visible) { outline: 2px solid var(--gr-rose); outline-offset: 3px; }

/* wishes: the guest book — the form on an ivory card, the wishes as dark cards with a champagne rule */
.gr-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.gr-wishes .inv-form {
    position: relative; padding: 1.5rem 1.2rem 1.3rem; border-radius: 3px; background: var(--gr-paper);
    box-shadow: inset 0 0 0 7px var(--gr-paper), inset 0 0 0 8px var(--gr-line), 0 26px 40px -26px #000;
}
.gr-wishes .inv-wishes__list { margin-top: 1.5rem; }
.gr-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list { padding: .55rem; border-radius: 4px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-shine) 25%, transparent); }
.gr-wishes .inv-wish { padding: .8rem .95rem; border-radius: 2px; text-align: left; color: var(--inv-background); background: color-mix(in srgb, #fff 6%, transparent); border-left: 2px solid var(--inv-shine); }
.gr-wishes .inv-wish__name { font-family: var(--gr-display); font-weight: 600; color: #fff; }
.gr-wishes .inv-wish__message { font-size: .9rem; line-height: 1.5; color: var(--gr-cream); }
.gr-wishes .inv-wish__time { font-size: .72rem; color: color-mix(in srgb, var(--inv-background) 65%, transparent); opacity: 1; }
.gr-wishes .inv-wishes__pager .inv-button, .gr-wishes .inv-wishes__more { color: var(--inv-shine); }

/* ---------- 7. shared components ---------- */
.gr-main .inv-button { font-weight: 700; }
body .inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--inv-deep) 92%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-background) 72%, transparent);
    --inv-nav-active: var(--inv-shine);
    font-family: var(--gr-sans);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-shine) 30%, transparent), 0 14px 30px -12px rgb(0 0 0 / .6);
}
body .inv-nav .inv-nav__item.is-active { color: var(--inv-deep); }

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

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

/* short phones: the chandelier, the photo circle and the type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .gr-cover { --chand-w: min(24vw, 6.4rem, 12svh); --spot-w: min(54vw, 13rem, 29svh); padding-top: .9rem; padding-bottom: 1.4rem; }
    .gr-cover__text { margin-top: .85rem; }
    .gr-cover__name { font-size: clamp(1.6rem, 7.4vw, 2.05rem); }
    .gr-cover__quote { font-size: .9rem; }
    .gr-cover__guest { margin-top: .7rem; }
    .gr-cover__open { margin-top: .85rem; }
}
@media (max-height: 660px) {
    .gr-cover { --chand-w: min(22vw, 5.4rem, 10.5svh); --spot-w: min(50vw, 26svh); padding-top: .8rem; padding-bottom: 1.2rem; }
    .gr-cover__stage { margin-top: .35rem; }
    .gr-cover__text { margin-top: .7rem; }
    .gr-cover__title { margin-bottom: .3rem; font-size: .62rem; }
    .gr-cover__name { font-size: clamp(1.45rem, 6.8vw, 1.85rem); }
    .gr-cover__batch { margin-top: .4rem; }
    .gr-cover__date { margin-top: .25rem; font-size: .82rem; }
    .gr-cover__quote { font-size: .82rem; line-height: 1.3; }
    .gr-cover__guest { margin-top: .55rem; padding-top: .4rem; padding-bottom: .35rem; }
    .gr-cover__guest-name { font-size: 1.5rem; }
    .gr-cover__open { min-height: 2.7rem; margin-top: .7rem; padding: .66rem 1.7rem .52rem; }
}
/* very short screens (in-app browsers): smaller circle and quote, so everything fits */
@media (max-height: 600px) {
    .gr-cover { --chand-w: min(20vw, 4.6rem, 10svh); --spot-w: min(46vw, 24svh); }
    .gr-cover__name { font-size: 1.4rem; }
    .gr-cover__quote { font-size: .78rem; line-height: 1.26; }
}

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

/* ---------- 9. motion ---------- */
@keyframes gr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gr-glow-up { from { opacity: 0; } to { opacity: var(--gr-glow-to, .2); } }
@keyframes gr-settle { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes gr-ring-in { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@keyframes gr-seal-in { 0% { opacity: 0; scale: 1.6; rotate: -40deg; } 70% { opacity: 1; scale: .95; } 100% { opacity: 1; scale: 1; rotate: -10deg; } }
@keyframes gr-press { 0% { scale: 1; } 40% { scale: .86; } 100% { scale: 1; } }
@keyframes gr-lamp { from { opacity: .15; } to { opacity: 1; } }

/* cover (≤ 2.5 s, once): the chandelier's bulbs glow up (0–.9 s), the beam fades in (.2–1.1 s), the photo ring opens
   and the photo settles from a slight zoom (.25–1.4 s), the seal turns in (1.1–1.7 s); the text follows through its
   inv-enter delays (.7–1.35 s + .6 s) */
html.inv-anim .gr-cover__chandelier .gr-chandelier__glows circle { animation: gr-glow-up .9s ease both; }
html.inv-anim .gr-cover__chandelier .gr-chandelier__glows .gr-chandelier__halo { --gr-glow-to: .07; }
html.inv-anim .gr-cover__chandelier .gr-chandelier__bulb { animation: gr-lamp .9s ease both; }
html.inv-anim .gr-cover__beam { animation: gr-fade .9s ease .2s both; }
html.inv-anim .gr-cover__spot { animation: gr-ring-in .9s cubic-bezier(.2, .7, .2, 1) .25s both; }
html.inv-anim .gr-cover__spot .gr-spot__photo { animation: gr-settle 1.4s cubic-bezier(.2, .7, .2, 1) .25s both; }
html.inv-anim .gr-cover__seal { animation: gr-seal-in .6s cubic-bezier(.34, 1.4, .64, 1) 1.1s both; }

/* string lights: the bulbs light up one after the other once their section is revealed */
html.inv-anim .gr-section__lights .gr-lights__lamp, html.inv-anim .gr-section__lights .gr-lights__glow { opacity: .1; }
html.inv-anim :is(.is-revealed .gr-section__lights, .gr-section__lights.is-revealed, .gr-section.is-revealed > .gr-section__lights) .gr-lights__lamp { animation: gr-lamp .5s ease calc(var(--i) * .09s + .2s) both; }
html.inv-anim :is(.is-revealed .gr-section__lights, .gr-section__lights.is-revealed, .gr-section.is-revealed > .gr-section__lights) .gr-lights__glow { animation: gr-glow-up .6s ease calc(var(--i) * .09s + .25s) both; --gr-glow-to: .22; }

/* the closing chandelier glows up once when revealed */
html.inv-anim .gr-closing__chandelier .gr-chandelier__glows circle { opacity: 0; }
html.inv-anim :is(.is-revealed .gr-closing__chandelier, .gr-closing__chandelier.is-revealed) .gr-chandelier__glows circle { animation: gr-glow-up 1.1s ease .3s both; }
html.inv-anim :is(.is-revealed .gr-closing__chandelier, .gr-closing__chandelier.is-revealed) .gr-chandelier__glows .gr-chandelier__halo { --gr-glow-to: .07; }

/* the RSVP seal presses down once after sending */
html.inv-anim .gr-rsvp__card.is-sent .gr-rsvp__seal { animation: gr-press .5s cubic-bezier(.3, 1.4, .6, 1) both; }

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

/* ---------- 10. intro scene "Malam Kenangan Angkatan" (scene.json + sections/_scene; the intro lives in <body>) ---------- */
.gr-scene-room { position: absolute; inset: 0; overflow: hidden; background:
    radial-gradient(90% 46% at 50% 0%, color-mix(in srgb, var(--inv-primary) 85%, var(--inv-shine) 6%), transparent 72%),
    radial-gradient(60% 40% at 50% 100%, color-mix(in srgb, var(--inv-primary) 70%, transparent), transparent 80%),
    linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 50%, var(--inv-deep)), var(--inv-deep)); }
.gr-scene-room::after { content: ''; position: absolute; inset: 0; opacity: .5;
    background: radial-gradient(circle, color-mix(in srgb, var(--inv-shine) 55%, transparent) .8px, transparent 1.5px) 0 0 / 47px 53px; }
.gr-scene-room__fan { position: absolute; left: -15%; bottom: 0; width: 130% !important; height: auto !important; color: var(--inv-shine); opacity: .1; }
.gr-scene-beam { position: absolute; inset: 0; clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%); filter: blur(6px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-shine) 26%, transparent), color-mix(in srgb, var(--inv-shine) 10%, transparent) 60%, transparent); }
.gr-scene-floor { position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-shine) 30%, transparent), color-mix(in srgb, var(--inv-shine) 9%, transparent) 62%, transparent); }
.gr-scene-lights svg { width: 100% !important; height: auto !important; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--inv-shine) 45%, transparent)); }
.gr-scene-lights--back { opacity: .45; filter: blur(.6px); }
html.inv-anim .gr-scene-lights .gr-lights__lamp { animation: gr-lamp .45s ease calc(var(--i) * .08s + .6s) both; }
html.inv-anim .gr-scene-lights .gr-lights__glow { --gr-glow-to: .38; animation: gr-glow-up .6s ease calc(var(--i) * .08s + .65s) both; }
html.inv-anim .gr-scene-lights--back :is(.gr-lights__lamp, .gr-lights__glow) { animation-delay: calc(var(--i) * .07s + 1s); --gr-glow-to: .2; }

/* the instant photos clipped to the front string */
.gr-scene-photo { position: relative; padding-top: 16px; filter: drop-shadow(0 12px 14px rgb(0 0 0 / .5)); }
.gr-scene-photo__string { position: absolute; left: 50%; top: -14px; height: 26px; width: 1px; background: color-mix(in srgb, var(--inv-shine) 55%, #000); }
.gr-scene-photo__clip { position: absolute; left: calc(50% - 4px); top: 8px; z-index: 1; width: 8px; height: 15px; border-radius: 2px;
    background: linear-gradient(90deg, var(--inv-gold), color-mix(in srgb, var(--inv-shine) 60%, #fff), var(--inv-gold)); }
.gr-scene-photo__card { display: block; padding: 7% 7% 0; background: var(--gr-paper); border-radius: 2px; }
.gr-scene-photo__frame { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden;
    background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--inv-primary) 70%, var(--inv-shine) 12%), var(--inv-deep)); }
.gr-scene-photo__fan { position: absolute; left: 12%; bottom: 0; width: 76%; color: var(--inv-shine); opacity: .5; }
.gr-scene-photo__frame b { position: relative; font: italic 600 clamp(1.4rem, 8vw, 2.3rem)/1 var(--gr-display); color: var(--inv-shine); }
.gr-scene-photo__frame i { position: absolute; inset: 0; background: center 35% / cover no-repeat; }
.gr-scene-photo--old .gr-scene-photo__frame i { filter: sepia(.75) saturate(.8) contrast(.95) brightness(1.04); }
.gr-scene-photo--old .gr-scene-photo__frame::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 14px rgb(60 40 10 / .45); }
.gr-scene-photo__caption { display: block; min-height: 1.9em; padding: .2em .1em .25em; text-align: center; white-space: nowrap; overflow: hidden;
    font: 400 clamp(.8rem, 3.9vw, 1.05rem)/1.6 var(--gr-script); color: var(--gr-ink); }
.gr-scene-photo--tag .gr-scene-photo__caption { font: 600 clamp(.4rem, 1.95vw, .52rem)/2.6 var(--gr-sans); letter-spacing: .02em; color: var(--gr-rose); }

/* the two flutes and their clink */
.gr-scene-flute { width: auto !important; height: 100% !important; margin: 0 auto; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--inv-shine) 35%, transparent)); }
.gr-scene-spark { color: color-mix(in srgb, var(--inv-shine) 70%, #fff); filter: drop-shadow(0 0 6px var(--inv-shine)); }

/* the name card: an ivory table card with a gold double rule and a deco fan crown */
body.gr-body .inv-intro--scene .inv-scene__card {
    top: 56%; aspect-ratio: 5 / 5.6; padding: 2.4rem 1.4rem 1.8rem; -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible;
    background: linear-gradient(180deg, color-mix(in srgb, #fff 40%, var(--inv-background)), var(--inv-soft)); border-radius: 3px;
    box-shadow: inset 0 0 0 6px var(--gr-paper), inset 0 0 0 7px var(--gr-line), inset 0 0 0 10px var(--gr-paper), inset 0 0 0 10.6px var(--gr-line), 0 30px 50px -18px rgb(0 0 0 / .7);
}
body.gr-body .inv-intro--scene .inv-scene__card::before {
    content: ''; position: absolute; left: 50%; top: -1.7rem; width: 4.6rem; height: 2.3rem; translate: -50% 0; border-radius: 4.6rem 4.6rem 0 0;
    background: radial-gradient(circle at 50% 100%, var(--inv-gold) 0 .55rem, transparent .6rem),
        repeating-conic-gradient(from -90deg at 50% 100%, var(--inv-gold) 0 1.4deg, transparent 1.4deg 15deg),
        var(--gr-paper);
    box-shadow: inset 0 0 0 1px var(--gr-line), 0 -6px 14px -8px rgb(0 0 0 / .5);
}
body.gr-body .inv-scene__card .inv-intro__label { margin-bottom: .8rem; font: 600 .6rem/1.5 var(--gr-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gr-rose); }
body.gr-body .inv-scene__card .inv-intro__names { font-family: var(--gr-display) !important; font-weight: 600; font-size: clamp(1.5rem, 7vw, 2.1rem); line-height: 1.14; color: var(--gr-ink); text-wrap: balance; }
body.gr-body .inv-scene__card .inv-intro__rule { width: 4.5rem; background: linear-gradient(90deg, transparent, var(--inv-gold), transparent); }
body.gr-body .inv-scene__card .inv-intro__date { font: 600 .66rem/1.4 var(--gr-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gr-muted); }
body.gr-body .inv-intro--scene .inv-intro__skip { background: color-mix(in srgb, var(--inv-deep) 70%, transparent); border-color: var(--gr-line-dark); color: var(--inv-shine); }