/*
 * Template "Grand Opening" (Acara Kantor & Komunitas) — the launch of a new store, branch, restaurant or
 * product. Vibrant primary (red by default) with gold and crisp white, deep charcoal bands for contrast.
 * Signature pieces (all original CSS / inline SVG, no image files): a striped scalloped shop awning
 * (sections/_awning), static balloon clusters (_balloons), the satin opening ribbon with a bow that is cut
 * when the invitation opens (_ribbon), bunting (_bunting), a big map pin (_pin), a static neon script,
 * price tags, a promo voucher and a VIP pass with a QR-like pattern (_qr, decoration only).
 * Mobile-first, one column (~460px) on a primary backdrop on wide screens.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (the vivid brand colour: red bands, buttons, titles' highlight)
 *   --inv-shade (a darker primary: gradients, folds)   --inv-accent (gold: neon, tags, buttons on dark)
 *   --inv-ribbon (the opening ribbon and bow)   --inv-background (crisp white)   --inv-text
 *   --inv-deep (charcoal bands)   --inv-soft (a light 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): .go-tone--light (white + faint confetti print),
 * --soft (tint), --red (the primary band, white text), --dark (charcoal), --gold (accent band, deep text).
 *
 * Motion only runs with html.inv-anim (set by <x-inv.head> unless the guest prefers reduced motion);
 * without it everything is shown finished.
 *
 * Contents: 1 base · 2 section tones & photo backgrounds · 3 shared pieces (heading, awning, balloons,
 *           ribbon, bunting, pin, logo, QR) · 4 cover · 5 sections in page order · 6 forms (RSVP, wishes) ·
 *           7 shared components · 8 screen sizes · 9 motion
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Merah Emas" variant (the variant's colours override these) */
    --inv-primary: #d31f2d;
    --inv-shade: #930c1b;
    --inv-accent: #f6b52c;
    --inv-ribbon: #e0212f;
    --inv-background: #fffaf4;
    --inv-text: #26161a;
    --inv-deep: #1d1a1e;
    --inv-soft: #fde7e1;
    --inv-radius: 14px;

    --go-sign: 'Bebas Neue', 'Oswald', Impact, 'Arial Narrow', sans-serif;
    --go-sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --go-script: 'Yellowtail', 'Brush Script MT', cursive;
    --go-col: 460px;
    --go-title: color-mix(in srgb, var(--inv-deep) 88%, var(--inv-primary));
    --go-muted: color-mix(in srgb, var(--inv-text) 76%, var(--inv-background));
    --go-ink: color-mix(in srgb, var(--inv-primary) 88%, var(--inv-deep));
    --go-gold-ink: color-mix(in srgb, var(--inv-accent) 52%, var(--inv-deep));
    --go-gold-light: color-mix(in srgb, var(--inv-accent) 62%, #fff);
    --go-on-dark: color-mix(in srgb, #fff 82%, var(--inv-deep));
    --go-ring: color-mix(in srgb, var(--inv-primary) 14%, transparent);
    --go-foil: linear-gradient(135deg, color-mix(in srgb, var(--inv-accent) 55%, #fff) 0%, var(--inv-accent) 30%, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-deep)) 55%, color-mix(in srgb, var(--inv-accent) 80%, #fff) 78%, var(--inv-accent) 100%);
    --go-confetti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg%3E%3Crect x='12' y='18' width='11' height='4.5' rx='1' transform='rotate(30 17 20)'/%3E%3Ccircle cx='70' cy='30' r='3'/%3E%3Crect x='118' y='12' width='10' height='4.5' rx='1' transform='rotate(-40 123 14)'/%3E%3Cpath d='M28 88q5-6 10 0t10 0' stroke='%23000' stroke-width='2.5' fill='none'/%3E%3Ccircle cx='140' cy='80' r='2.5'/%3E%3Crect x='92' y='96' width='11' height='4.5' rx='1' transform='rotate(70 97 98)'/%3E%3Ccircle cx='20' cy='140' r='2.5'/%3E%3Crect x='60' y='130' width='10' height='4.5' rx='1' transform='rotate(-20 64 132)'/%3E%3Cpath d='M110 140q5-6 10 0t10 0' stroke='%23000' stroke-width='2.5' fill='none'/%3E%3Cpath d='M78 66l2 5 5 .5-4 3 1.5 5-4.5-3-4.5 3 1.5-5-4-3 5-.5Z'/%3E%3C/g%3E%3C/svg%3E");

    /* colours of the shared components */
    --inv-ambient-1: var(--inv-accent);
    --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(--go-sans);
    font-size: 15.5px;
    line-height: 1.62;
    font-variant-numeric: lining-nums;
    -webkit-font-smoothing: antialiased;
}

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

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

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

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

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

/* light: crisp white with a faint two-colour confetti print and warm corner glows */
.go-tone--light {
    background:
        radial-gradient(60% 28% at 100% 0%, color-mix(in srgb, var(--inv-accent) 16%, transparent), transparent 75%),
        radial-gradient(60% 28% at 0% 100%, color-mix(in srgb, var(--inv-primary) 8%, transparent), transparent 75%),
        var(--inv-background);
}
.go-tone--light::before, .go-tone--soft::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .085;
    background: linear-gradient(135deg, var(--inv-primary), var(--inv-accent) 60%, var(--inv-primary));
    -webkit-mask: var(--go-confetti) 0 0 / 170px 170px repeat; mask: var(--go-confetti) 0 0 / 170px 170px repeat;
}
/* soft: a light tint */
.go-tone--soft { background: linear-gradient(180deg, var(--inv-soft), color-mix(in srgb, var(--inv-soft) 40%, var(--inv-background))); }

/* red: the vivid primary band with two soft spotlight beams from the top */
.go-tone--red {
    color: #fff;
    background:
        radial-gradient(80% 40% at 50% 0%, color-mix(in srgb, #fff 16%, transparent), transparent 70%),
        radial-gradient(90% 50% at 50% 110%, color-mix(in srgb, var(--inv-shade) 85%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 70%, var(--inv-shade)));
}
.go-tone--red::before, .go-tone--dark::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        linear-gradient(200deg, transparent 0 18%, color-mix(in srgb, #fff 9%, transparent) 22% 30%, transparent 40%) 0 0 / 100% 70% no-repeat,
        linear-gradient(160deg, transparent 0 58%, color-mix(in srgb, #fff 7%, transparent) 64% 72%, transparent 80%) 0 0 / 100% 70% no-repeat;
}
.go-tone--red a:not(.inv-button) { color: var(--go-gold-light); }
.go-tone--red .go-arabic { color: #fff; }

/* dark: deep charcoal with a primary glow at the top */
.go-tone--dark {
    color: #fff;
    background:
        radial-gradient(90% 35% at 50% 0%, color-mix(in srgb, var(--inv-primary) 34%, transparent), transparent 75%),
        radial-gradient(70% 30% at 100% 100%, color-mix(in srgb, var(--inv-accent) 12%, transparent), transparent 75%),
        var(--inv-deep);
}
.go-tone--dark::before { opacity: .7; }
.go-tone--dark a:not(.inv-button) { color: var(--inv-accent); }
.go-tone--dark .go-arabic { color: var(--inv-accent); }

/* gold: the accent band with deep text (contrast ≥ 4.5:1 in every variant) */
.go-tone--gold {
    color: var(--inv-deep);
    background:
        radial-gradient(80% 50% at 100% 0%, color-mix(in srgb, #fff 34%, transparent), transparent 75%),
        radial-gradient(70% 40% at 0% 100%, color-mix(in srgb, var(--inv-shade) 14%, transparent), transparent 75%),
        var(--inv-accent);
}

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

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

/* section heading: a neon script word over a big sign-lettered title, the last part highlighted */
.go-heading { max-width: 23rem; margin: 0 auto 2rem; }
.go-heading--left { margin-left: 0; text-align: left; }
.go-heading__script {
    display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .15rem;
    font: 400 1.6rem/1.15 var(--go-script); color: var(--go-ink); transform: rotate(-3deg);
}
.go-heading__burst { flex: none; width: .9rem; height: .9rem; fill: var(--inv-accent); }
.go-heading__script:only-child { margin-bottom: 0; }
.go-heading__title {
    margin: 0; font-family: var(--go-sign); font-weight: 400; font-size: clamp(2.6rem, 12vw, 3.1rem);
    line-height: .95; letter-spacing: .012em; color: var(--go-title); text-wrap: balance; overflow-wrap: anywhere;
}
.go-heading__title em { font-style: normal; color: var(--inv-primary); }
/* neon on dark grounds: the script glows in gold (static) */
.go-tone--dark .go-heading__script, .go-tone--red .go-heading__script {
    color: color-mix(in srgb, var(--inv-accent) 70%, #fff);
    text-shadow: 0 0 6px color-mix(in srgb, var(--inv-accent) 75%, transparent), 0 0 18px color-mix(in srgb, var(--inv-accent) 45%, transparent);
}
.go-tone--red .go-heading__burst { fill: #fff; }
.go-tone--dark .go-heading__title, .go-tone--red .go-heading__title { color: #fff; }
.go-tone--dark .go-heading__title em { color: var(--inv-accent); }
.go-tone--red .go-heading__title em { color: var(--go-gold-light); }
.go-tone--gold .go-heading__script { color: var(--inv-deep); }
.go-tone--gold .go-heading__burst { fill: #fff; }
.go-tone--gold .go-heading__title, .go-tone--gold .go-heading__title em { color: var(--inv-deep); }
.go-tone--gold .go-heading__title em { text-decoration: underline; text-decoration-color: #fff; text-decoration-thickness: .08em; text-underline-offset: .1em; }

/* icons */
.go-icon { display: block; flex: none; width: 1.25rem; height: 1.25rem; }

/* gradient stops of the SVG artwork (colours follow the variant) */
.go-stop--hi { stop-color: #fff; stop-opacity: .9; }
.go-stop--red-1 { stop-color: color-mix(in srgb, var(--inv-primary) 85%, #fff); }
.go-stop--red-2 { stop-color: var(--inv-shade); }
.go-stop--gold-1 { stop-color: var(--inv-accent); }
.go-stop--gold-2 { stop-color: color-mix(in srgb, var(--inv-accent) 62%, var(--inv-deep)); }
.go-stop--shade-1 { stop-color: color-mix(in srgb, var(--inv-shade) 80%, #fff); }
.go-stop--shade-2 { stop-color: color-mix(in srgb, var(--inv-shade) 75%, #000); }
.go-stop--rib-light { stop-color: color-mix(in srgb, var(--inv-ribbon) 62%, #fff); }
.go-stop--rib-mid { stop-color: var(--inv-ribbon); }
.go-stop--rib-dark { stop-color: color-mix(in srgb, var(--inv-ribbon) 58%, #000); }
.go-stop--pin-light { stop-color: color-mix(in srgb, var(--inv-primary) 70%, #fff); }
.go-stop--pin-mid { stop-color: var(--inv-primary); }
.go-stop--pin-dark { stop-color: var(--inv-shade); }

/* the shop awning (sections/_awning): a rolled bar, then a striped valance with a scalloped lower edge */
.go-awning {
    --aw-h: 2.5rem; --aw-sc: 12px; --aw-a: var(--inv-primary); --aw-b: #fff;
    position: relative; display: flex; flex-direction: column; height: var(--aw-h); pointer-events: none;
    filter: drop-shadow(0 7px 6px rgb(0 0 0 / .22));
}
.go-awning__roll {
    display: block; flex: none; height: .5rem; border-radius: 99px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 55%, #fff), var(--inv-deep) 70%);
}
.go-awning__valance {
    display: block; flex: 1; margin-top: -1px;
    background:
        linear-gradient(180deg, rgb(255 255 255 / .2), transparent 35%, rgb(0 0 0 / .16) 80%),
        repeating-linear-gradient(90deg, var(--aw-a) 0 calc(var(--aw-sc) * 2), var(--aw-b) calc(var(--aw-sc) * 2) calc(var(--aw-sc) * 4));
    -webkit-mask:
        linear-gradient(#000 0 0) top / 100% calc(100% - var(--aw-sc)) no-repeat,
        radial-gradient(circle at 50% 0, #000 calc(var(--aw-sc) - .5px), transparent var(--aw-sc)) left bottom / calc(var(--aw-sc) * 2) var(--aw-sc) repeat-x;
    mask:
        linear-gradient(#000 0 0) top / 100% calc(100% - var(--aw-sc)) no-repeat,
        radial-gradient(circle at 50% 0, #000 calc(var(--aw-sc) - .5px), transparent var(--aw-sc)) left bottom / calc(var(--aw-sc) * 2) var(--aw-sc) repeat-x;
}
/* the awning edge along the top of a section */
.go-section__awning { --aw-h: 1.9rem; --aw-sc: 10px; position: absolute; top: 0; left: -2px; right: -2px; z-index: 2; }
.go-section__awning .go-awning__roll { border-radius: 0; height: .4rem; }
.go-tone--red .go-section__awning { --aw-a: var(--inv-shade); }

/* balloon clusters (sections/_balloons) */
.go-balloons { display: block; overflow: visible; pointer-events: none; }
.go-balloons--flip { transform: scaleX(-1); }
.go-balloons__strings path { stroke: color-mix(in srgb, var(--inv-deep) 45%, #fff); stroke-width: 1; }
.go-tone--red .go-balloons__strings path, .go-cover .go-balloons__strings path { stroke: color-mix(in srgb, #fff 70%, transparent); }
.go-balloons__glint path { stroke: rgb(255 255 255 / .85); stroke-width: 2.4; stroke-linecap: round; }
.go-balloons__tie--red { fill: var(--inv-shade); }
.go-balloons__tie--gold { fill: color-mix(in srgb, var(--inv-accent) 62%, var(--inv-deep)); }
.go-balloons__tie--shade { fill: color-mix(in srgb, var(--inv-shade) 75%, #000); }
.go-balloons__weight { fill: var(--inv-accent); }

/* the opening ribbon (sections/_ribbon): a satin band in two halves + a bow in the middle */
.go-ribbon { position: relative; display: block; height: 1rem; pointer-events: none; }
.go-ribbon__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.go-ribbon__half { position: absolute; top: 0; bottom: 0; width: 50.5%; filter: drop-shadow(0 4px 4px rgb(0 0 0 / .3)); }
.go-ribbon__half svg { display: block; width: 100%; height: 100%; }
.go-ribbon__half--l { left: 0; transform-origin: 0 50%; }
.go-ribbon__half--r { right: 0; transform-origin: 100% 50%; }
.go-ribbon__stitch { fill: none; stroke: rgb(255 255 255 / .35); stroke-width: .8; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.go-ribbon__bow {
    position: absolute; left: 50%; top: 50%; width: 5rem; height: auto; overflow: visible;
    transform: translate(-50%, -46%); filter: drop-shadow(0 6px 6px rgb(0 0 0 / .32));
}
.go-ribbon__fill--mid { fill: var(--inv-ribbon); }
.go-ribbon__fill--dark { fill: color-mix(in srgb, var(--inv-ribbon) 62%, #000); }
.go-ribbon__fold { fill: color-mix(in srgb, var(--inv-ribbon) 55%, #000); opacity: .55; }
.go-ribbon__sheen { fill: none; stroke: rgb(255 255 255 / .6); stroke-width: 2; stroke-linecap: round; }

/* bunting (sections/_bunting): flags on a sagging string */
.go-bunting {
    position: absolute; top: 0; left: -4%; right: -4%; z-index: 1; display: flex; justify-content: space-between; height: 2.6rem;
    padding: 0 2%; pointer-events: none;
}
.go-bunting::before {
    content: ''; position: absolute; left: 0; right: 0; top: -2.2rem; height: 3rem; border-radius: 0 0 50% 50% / 0 0 100% 100%;
    border-bottom: 1.5px solid color-mix(in srgb, #fff 70%, transparent);
}
.go-bunting span {
    --sag: calc(sin(calc(var(--i) / 12 * 180deg)) * .78rem);
    position: relative; flex: none; width: 1.55rem; height: 1.75rem; margin-top: var(--sag);
    clip-path: polygon(0 0, 100% 0, 50% 100%); background: var(--inv-accent);
    filter: drop-shadow(0 2px 2px rgb(0 0 0 / .2));
}
.go-bunting span:nth-child(4n+2) { background: #fff; }
.go-bunting span:nth-child(4n+3) { background: var(--inv-shade); }
.go-bunting span:nth-child(4n) { background: color-mix(in srgb, var(--inv-primary) 60%, #fff); }

/* the map pin (sections/_pin) */
.go-pin { display: block; overflow: visible; }
.go-pin__shadow { fill: rgb(0 0 0 / .28); }
.go-pin__ring { fill: var(--inv-accent); }
.go-pin__shop { fill: var(--inv-primary); }
.go-pin__wall { fill: color-mix(in srgb, var(--inv-primary) 16%, #fff); }
.go-pin__stripe { stroke: #fff; stroke-width: 1.6; fill: none; }
.go-pin__sheen { fill: none; stroke: rgb(255 255 255 / .55); stroke-width: 3; stroke-linecap: round; }

/* the organizer's logo tile (sections/_logo): white with the logo, or a shop brand mark with the monogram */
.go-logo {
    --logo-size: 3rem;
    position: relative; isolation: isolate; display: inline-grid; place-items: center; flex: none;
    width: var(--logo-size); height: var(--logo-size); overflow: hidden; border-radius: calc(var(--logo-size) * .22);
    background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-deep) 10%, transparent), 0 12px 24px -14px rgb(0 0 0 / .6);
}
.go-logo__img { display: block; width: 80%; height: 80%; object-fit: contain; }
.go-logo--empty {
    background:
        repeating-linear-gradient(90deg, #fff 0 calc(var(--logo-size) / 10), var(--inv-primary) calc(var(--logo-size) / 10) calc(var(--logo-size) / 5)) top / 100% 18% no-repeat,
        linear-gradient(160deg, color-mix(in srgb, var(--inv-primary) 82%, #fff), var(--inv-shade) 90%);
    box-shadow: inset 0 0 0 calc(var(--logo-size) * .04) var(--inv-accent), 0 12px 24px -14px rgb(0 0 0 / .6);
}
.go-logo__mono { padding-top: calc(var(--logo-size) * .12); font-family: var(--go-sign); font-weight: 400; font-size: calc(var(--logo-size) * .44); line-height: 1; letter-spacing: .02em; color: #fff; white-space: nowrap; }
.go-logo--long .go-logo__mono { font-size: calc(var(--logo-size) * .3); }
.go-logo--sm { --logo-size: 2.5rem; }
.go-logo--md { --logo-size: 3.4rem; }
.go-logo--lg { --logo-size: 6.2rem; }

/* the QR-like pattern (sections/_qr, decoration only) */
.go-qr { display: block; flex: none; }
.go-qr__bg { fill: #fff; }
.go-qr__cells { fill: var(--inv-deep); }

/* ---------- 4. cover ---------- */
.go-cover {
    --win-h: clamp(9rem, 35svh, 21rem);
    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.45rem 1.1rem 1.5rem;
    isolation: isolate; color: #fff; text-align: center;
    background:
        radial-gradient(70% 34% at 50% 6%, color-mix(in srgb, #fff 18%, transparent), transparent 72%),
        radial-gradient(90% 40% at 50% 104%, color-mix(in srgb, var(--inv-shade) 90%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 72%, var(--inv-shade)));
    transition: opacity .8s ease;
}
/* the shop wall: fine vertical panel joints */
.go-cover::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: repeating-linear-gradient(90deg, transparent 0 46px, rgb(0 0 0 / .07) 46px 47px, rgb(255 255 255 / .05) 47px 48px);
    -webkit-mask: linear-gradient(180deg, #000, transparent 85%); mask: linear-gradient(180deg, #000, transparent 85%);
}
/* two spotlight beams from the top corners */
.go-cover__beam {
    position: absolute; top: -8%; z-index: -1; width: 70%; height: 95%; pointer-events: none;
    background: linear-gradient(180deg, rgb(255 255 255 / .2), rgb(255 255 255 / .05) 60%, transparent);
    clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
}
.go-cover__beam--l { left: -22%; transform: rotate(-24deg); transform-origin: 50% 0; }
.go-cover__beam--r { right: -22%; transform: rotate(24deg); transform-origin: 50% 0; }
.go-cover__inner { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 390px; }

.go-cover__sign {
    display: inline-flex; align-items: center; gap: .6rem; max-width: 100%; margin: 0 0 .55rem; padding: .3rem .85rem .3rem .3rem;
    border-radius: 99px; background: color-mix(in srgb, var(--inv-deep) 30%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 20%, transparent);
}
.go-cover__sign-text { display: flex; flex-direction: column; min-width: 0; margin: 0; text-align: left; line-height: 1.2; }
.go-cover__org-name { font-weight: 700; font-size: .84rem; color: #fff; overflow-wrap: anywhere; }
.go-cover__org-unit { font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, #fff 78%, transparent); }

/* the neon script line (static glow; it flickers on once in "motion") */
.go-cover__neon {
    margin: 0; font: 400 2rem/1.1 var(--go-script); transform: rotate(-4deg);
    color: color-mix(in srgb, var(--inv-accent) 55%, #fff);
    text-shadow: 0 0 4px color-mix(in srgb, var(--inv-accent) 90%, transparent), 0 0 14px var(--inv-accent), 0 0 30px color-mix(in srgb, var(--inv-accent) 60%, transparent);
}
.go-cover__title {
    margin: .1rem 0 0; max-width: 16ch; font-family: var(--go-sign); font-weight: 400; font-size: clamp(2.9rem, 14vw, 3.6rem);
    line-height: .9; letter-spacing: .015em; color: #fff; text-wrap: balance; overflow-wrap: anywhere;
    text-shadow: 0 3px 0 var(--inv-shade), 0 10px 22px rgb(0 0 0 / .25);
}
.go-cover__title--long { max-width: 19ch; font-size: clamp(2.2rem, 10.5vw, 2.8rem); line-height: .95; }
.go-cover__meta {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .15rem .55rem; margin: .55rem 0 0;
    font-size: .76rem; font-weight: 700; line-height: 1.35; letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
.go-cover__meta-venue { display: inline-flex; align-items: center; gap: .55rem; color: color-mix(in srgb, #fff 85%, transparent); }
.go-cover__meta-venue::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--inv-accent); }

/* the shop: awning, window with the photo, OPEN sign, balloons, ribbon, sill */
.go-cover__store { position: relative; width: 100%; margin-top: .9rem; padding: 0 2.4rem; }
.go-cover__awning { --aw-h: 2.4rem; --aw-sc: 11px; position: relative; z-index: 2; margin: 0 -.7rem; transform-origin: 50% 0; }
.go-cover__window {
    position: relative; height: var(--win-h); margin: -.65rem 0 0; overflow: hidden;
    border: 6px solid var(--inv-deep); border-top-width: 0; background: var(--inv-deep);
    box-shadow: inset 0 0 0 1.5px var(--inv-accent), 0 18px 34px -16px rgb(0 0 0 / .55);
}
.go-cover__photo, .go-cover__empty { display: block; width: 100%; height: 100%; }
.go-cover__photo { object-fit: cover; object-position: center 35%; }
.go-cover__empty {
    display: grid; place-items: center;
    background:
        radial-gradient(70% 60% at 50% 30%, color-mix(in srgb, var(--inv-accent) 55%, transparent), transparent 70%),
        repeating-linear-gradient(180deg, transparent 0 38px, color-mix(in srgb, var(--inv-accent) 30%, transparent) 38px 41px),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-shade) 60%, var(--inv-deep)), var(--inv-deep));
}
.go-cover__empty-mono { font-family: var(--go-sign); font-size: min(6rem, calc(var(--win-h) * .5)); line-height: 1; color: #fff; text-shadow: 0 0 24px color-mix(in srgb, var(--inv-accent) 80%, transparent); }
/* a faint glass reflection */
.go-cover__glass {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 58%, rgb(255 255 255 / .13) 64%, transparent 70%, transparent 74%, rgb(255 255 255 / .08) 77%, transparent 80%);
}
.go-cover__sill {
    position: relative; z-index: 1; display: block; height: .6rem; margin: 0 -.9rem; border-radius: 2px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 60%, #fff), var(--inv-deep));
    box-shadow: 0 8px 14px -6px rgb(0 0 0 / .45);
}
/* the small OPEN sign hanging from the awning */
.go-cover__open-sign {
    position: absolute; z-index: 3; top: 2.05rem; right: 3.2rem; padding-top: .55rem; transform: rotate(5deg); transform-origin: 50% 0;
}
.go-cover__open-sign::before {
    content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: .7rem;
    border: 1.5px solid color-mix(in srgb, var(--inv-deep) 70%, #fff); border-bottom: 0; border-radius: 50% 50% 0 0;
}
.go-cover__open-sign span {
    display: block; padding: .12rem .5rem 0; border-radius: 4px; font-family: var(--go-sign); font-size: 1.05rem; line-height: 1.25; letter-spacing: .14em;
    color: var(--inv-primary); background: #fff; box-shadow: inset 0 0 0 2px var(--inv-primary), 0 6px 10px -4px rgb(0 0 0 / .45);
}
.go-cover__balloons { position: absolute; z-index: 3; bottom: .3rem; width: 5.2rem; height: auto; }
.go-cover__balloons--l { left: -.9rem; }
.go-cover__balloons--r { right: -.9rem; }
/* the ribbon runs across the lower edge of the window, wider than the shop */
.go-cover__ribbon { position: absolute; z-index: 4; left: .2rem; right: .2rem; bottom: calc(.6rem + var(--win-h) * .11); height: .95rem; }

.go-cover__guest {
    position: relative; width: min(100%, 20rem); margin-top: 1rem; padding: .55rem 1rem .6rem; border-radius: 12px;
    color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5.5px color-mix(in srgb, var(--inv-accent) 85%, transparent), 0 16px 28px -16px rgb(0 0 0 / .55);
}
.go-cover__guest-label { margin: 0; font-size: .64rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--go-ink); }
.go-cover__guest-name { display: block; margin-top: .05rem; font-weight: 700; font-size: 1.12rem; line-height: 1.25; color: var(--go-title); overflow-wrap: anywhere; }
.go-cover__quote { max-width: 31ch; margin: .75rem 0 0; font-size: .9rem; font-weight: 500; line-height: 1.42; color: color-mix(in srgb, #fff 90%, transparent); }
.go-cover__open {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    width: min(100%, 20rem); margin-top: .9rem; min-height: 3.05rem; padding: .7rem 1.6rem; border: 0; border-radius: 99px;
    font-weight: 800; font-size: .95rem; letter-spacing: .03em; color: var(--inv-deep); background: var(--go-foil);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .4), 0 14px 26px -12px rgb(0 0 0 / .5);
}
.go-cover__open .go-icon { width: 1.2rem; height: 1.2rem; }

/* opening: the ribbon is cut (halves swing down, the bow drops), then the cover fades */
.go-ribbon__half, .go-ribbon__bow { transition: transform .75s cubic-bezier(.5, 0, .7, .4), opacity .6s ease .2s; }
.go-cover--leave { transition: opacity .7s ease .5s; }
.go-cover--gone { opacity: 0; }
.go-cover--gone .go-ribbon__half--l { transform: rotate(-58deg) translateX(-8%); opacity: 0; }
.go-cover--gone .go-ribbon__half--r { transform: rotate(58deg) translateX(8%); opacity: 0; }
.go-cover--gone .go-ribbon__bow { transform: translate(-50%, 140%) rotate(18deg); opacity: 0; }

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

/* opening: the greeting as the heading over a faint photo, the quote on a neon sign board */
.go-opening { padding-top: 5rem; }
.go-opening__balloons { position: absolute; top: -1.2rem; right: -1.4rem; width: 5.6rem; opacity: .95; z-index: -1; }
.go-opening__basmalah { margin: 0 auto 1rem; font-size: 1.7rem; }
.go-opening .go-heading__title { font-size: clamp(2.3rem, 10.5vw, 2.8rem); }
.go-opening__message { font-size: 1rem; color: var(--inv-text); }
.go-section > .go-opening__message { max-width: 33ch; }
.go-neonboard {
    position: relative; max-width: 22.5rem; margin: 2.2rem auto 0; padding: 1.8rem 1.4rem 1.5rem; border-radius: 18px;
    color: #fff; text-align: center;
    background:
        radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--inv-primary) 26%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 88%, #fff), var(--inv-deep));
    box-shadow: 0 26px 40px -24px rgb(0 0 0 / .6);
}
/* the neon tube frame: an outer gold tube and an inner primary tube, glowing (static) */
.go-neonboard::before, .go-neonboard::after { content: ''; position: absolute; pointer-events: none; border-radius: 12px; }
.go-neonboard::before {
    inset: .55rem; border: 2px solid color-mix(in srgb, var(--inv-accent) 70%, #fff);
    box-shadow: 0 0 6px var(--inv-accent), 0 0 16px color-mix(in srgb, var(--inv-accent) 55%, transparent), inset 0 0 8px color-mix(in srgb, var(--inv-accent) 45%, transparent);
}
.go-neonboard::after {
    inset: .95rem; border-radius: 9px; border: 1.5px solid color-mix(in srgb, var(--inv-primary) 55%, #fff);
    box-shadow: 0 0 6px color-mix(in srgb, var(--inv-primary) 80%, #fff), inset 0 0 6px color-mix(in srgb, var(--inv-primary) 60%, transparent);
    opacity: .85;
}
.go-neonboard__screw { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #f2f2f2, #8a8a8a); }
.go-neonboard__screw--tl { top: .2rem; left: .2rem; }
.go-neonboard__screw--tr { top: .2rem; right: .2rem; }
.go-neonboard__screw--bl { bottom: .2rem; left: .2rem; }
.go-neonboard__screw--br { bottom: .2rem; right: .2rem; }
.go-neonboard blockquote { position: relative; margin: 0; padding: .4rem .7rem 0; font-weight: 600; font-size: 1.12rem; line-height: 1.45; }
.go-neonboard figcaption {
    position: relative; margin-top: .55rem; font: 400 1.35rem/1.2 var(--go-script);
    color: color-mix(in srgb, var(--inv-accent) 60%, #fff); text-shadow: 0 0 8px color-mix(in srgb, var(--inv-accent) 70%, transparent);
}

/* organizer: an illuminated sign plate on the red band, the monogram huge and outlined behind */
.go-organizer { padding-top: 5rem; padding-bottom: 4.4rem; }
.go-organizer__watermark {
    position: absolute; z-index: -1; left: -10%; right: -10%; top: 50%; margin: 0 !important; max-width: none !important; transform: translateY(-50%);
    font-family: var(--go-sign); font-size: clamp(8rem, 56vw, 14rem); line-height: 1; letter-spacing: .02em;
    text-align: center; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, #fff 16%, transparent);
    pointer-events: none;
}
.go-organizer__plate {
    position: relative; max-width: 21.5rem; margin: 0 auto; padding: 2.1rem 1.4rem 1.8rem; border-radius: 16px;
    color: var(--inv-text); background:
        radial-gradient(90% 60% at 50% 0%, #fff, color-mix(in srgb, var(--inv-background) 85%, var(--inv-accent)) 100%);
    box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 7px var(--inv-accent), 0 0 0 1px color-mix(in srgb, var(--inv-shade) 40%, transparent),
        0 0 40px color-mix(in srgb, #fff 26%, transparent), 0 30px 50px -26px rgb(0 0 0 / .55);
}
.go-organizer__bolt { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--inv-accent) 60%, var(--inv-deep))); box-shadow: 0 1px 1px rgb(0 0 0 / .3); }
.go-organizer__bolt:nth-child(1) { top: .9rem; left: .9rem; }
.go-organizer__bolt:nth-child(2) { top: .9rem; right: .9rem; }
.go-organizer__bolt:nth-child(3) { bottom: .9rem; left: .9rem; }
.go-organizer__bolt:nth-child(4) { bottom: .9rem; right: .9rem; }
.go-organizer .go-logo--lg { margin: 0 auto 1rem; }
.go-organizer__label { margin: 0; font: 400 1.45rem/1.2 var(--go-script); color: var(--go-ink); }
.go-organizer__name { margin: .2rem 0 0; font-family: var(--go-sign); font-weight: 400; font-size: 2.4rem; line-height: .98; letter-spacing: .02em; color: var(--go-title); text-wrap: balance; overflow-wrap: anywhere; }
.go-organizer__unit { display: inline-flex; align-items: center; gap: .45rem; margin: .7rem 0 0; font-size: .88rem; font-weight: 600; color: var(--go-muted); }
.go-organizer__unit .go-icon { width: 1.1rem; height: 1.1rem; color: var(--go-ink); }
.go-organizer__tagline { position: relative; margin: -.6rem auto 0 !important; max-width: 19rem !important; }
.go-organizer__tagline span {
    position: relative; display: inline-block; padding: .5rem 1.6rem; font-weight: 800; font-size: .86rem; line-height: 1.3; letter-spacing: .03em;
    color: var(--inv-deep); background: var(--go-foil);
    clip-path: polygon(0 0, 100% 0, calc(100% - .7rem) 50%, 100% 100%, 0 100%, .7rem 50%);
    filter: drop-shadow(0 6px 8px rgb(0 0 0 / .3));
}

/* about: the theme as the heading, a description card with a sticker, price tags, the promo voucher */
.go-about .go-heading__title { font-size: clamp(2.3rem, 10.5vw, 2.9rem); }
.go-about__card {
    position: relative; max-width: 24rem; margin: 0 auto 2.2rem; padding: 1.4rem 1.25rem 1.3rem; border-radius: 18px; text-align: left;
    background: #fff; box-shadow: 0 0 0 1px var(--go-ring), 0 22px 36px -26px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.go-about__description { margin: 0; font-size: 1rem; line-height: 1.65; }
.go-about__sticker {
    position: absolute; top: -1.3rem; right: -.5rem; display: grid; place-items: center; width: 3.9rem; height: 3.9rem; transform: rotate(12deg);
    color: #fff; background: var(--inv-primary);
    clip-path: polygon(50% 0, 61% 12%, 77% 7%, 80% 23%, 95% 30%, 88% 45%, 100% 57%, 86% 67%, 88% 83%, 72% 84%, 63% 98%, 50% 89%, 37% 98%, 28% 84%, 12% 83%, 14% 67%, 0 57%, 12% 45%, 5% 30%, 20% 23%, 23% 7%, 39% 12%);
}
.go-about__sticker span { font-family: var(--go-sign); font-size: 1.15rem; letter-spacing: .08em; line-height: 1; }
.go-about__subtitle {
    display: flex; align-items: center; justify-content: center; gap: .7rem; margin: 0 0 1.2rem;
    font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--go-ink);
}
.go-about__subtitle::before, .go-about__subtitle::after { content: ''; width: 2rem; height: 2px; background: var(--inv-accent); }
/* price tags: punched hole + string, number, text */
.go-about__tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem .7rem; margin: 0; padding: .6rem 0 0; list-style: none; }
.go-tag {
    --tag-bg: var(--inv-primary); --tag-text: #fff; --tag-no: var(--go-gold-light);
    position: relative; display: flex; flex-direction: column; justify-content: center; gap: .25rem; min-width: 0; min-height: 5.2rem;
    padding: 1.35rem .8rem .9rem; text-align: center; color: var(--tag-text); background: var(--tag-bg); border-radius: 6px 6px 12px 12px;
    clip-path: polygon(22% 0, 78% 0, 100% 18%, 100% 100%, 0 100%, 0 18%);
    filter: drop-shadow(0 10px 12px color-mix(in srgb, var(--inv-deep) 22%, transparent));
}
.go-tag::before { content: ''; position: absolute; top: .45rem; left: 50%; width: .55rem; height: .55rem; margin-left: -.275rem; border-radius: 50%; background: var(--inv-background); box-shadow: inset 0 1px 2px rgb(0 0 0 / .35); }
.go-tag:nth-child(3n+2) { --tag-bg: var(--inv-accent); --tag-text: var(--inv-deep); --tag-no: var(--inv-shade); }
.go-tag:nth-child(3n) { --tag-bg: #fff; --tag-text: var(--go-title); --tag-no: var(--go-ink); }
.go-tag:nth-child(3n) { box-shadow: inset 0 0 0 1.5px var(--go-ring); }
.go-tag:nth-child(odd) { transform: rotate(-2.5deg); }
.go-tag:nth-child(even) { transform: rotate(2.5deg); }
.go-tag:last-child:nth-child(odd) { grid-column: 1 / -1; width: 62%; justify-self: center; }
.go-tag__no { font-family: var(--go-sign); font-size: 1rem; line-height: 1; letter-spacing: .1em; color: var(--tag-no); }
.go-tag__text { font-weight: 700; font-size: .92rem; line-height: 1.25; }
.go-tag__text::first-letter { text-transform: uppercase; }
/* the promo voucher */
.go-voucher {
    position: relative; display: flex; align-items: stretch; max-width: 24rem; margin: 2.3rem auto 0; overflow: hidden; border-radius: 14px;
    text-align: left; color: var(--inv-deep); background: var(--go-foil);
    box-shadow: 0 22px 34px -22px color-mix(in srgb, var(--inv-deep) 80%, transparent);
}
.go-voucher__stub {
    position: relative; display: grid; place-items: center; flex: none; width: 3.1rem; color: #fff; background: var(--inv-primary);
}
.go-voucher__stub span { font-family: var(--go-sign); font-size: 1.25rem; letter-spacing: .24em; writing-mode: vertical-rl; transform: rotate(180deg); }
/* tear line with round notches */
.go-voucher__stub::after { content: ''; position: absolute; top: .4rem; bottom: .4rem; right: -1px; width: 2px; background: repeating-linear-gradient(180deg, var(--inv-background) 0 6px, transparent 6px 11px); }
.go-voucher::before, .go-voucher::after { content: ''; position: absolute; left: calc(3.1rem - 9px); z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: var(--inv-background); }
.go-voucher::before { top: -9px; }
.go-voucher::after { bottom: -9px; }
.go-voucher__body { flex: 1; display: grid; gap: .6rem; min-width: 0; margin: 0; padding: 1rem .9rem 1rem 1.15rem; }
.go-voucher__row dt { font-size: .64rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-deep) 75%, transparent); }
.go-voucher__row dd { margin: .05rem 0 0; font-family: var(--go-sign); font-size: 1.45rem; line-height: 1.05; letter-spacing: .02em; overflow-wrap: anywhere; }
.go-voucher__qr { align-self: center; width: 3.6rem; height: 3.6rem; margin-right: .9rem; }

/* events: location cards with a map (or photo) head, a big pin and a date tag */
.go-events { padding-bottom: 4.2rem; }
.go-place {
    position: relative; max-width: 24rem; margin: 0 auto; overflow: hidden; border-radius: 22px; text-align: left; color: var(--inv-text); background: #fff;
    box-shadow: 0 30px 50px -30px rgb(0 0 0 / .8);
}
.go-place + .go-place { margin-top: 2.2rem; }
.go-place__head { position: relative; height: 12.5rem; overflow: hidden; background: color-mix(in srgb, var(--inv-soft) 70%, #fff); }
.go-place__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.go-place__head:not(.go-place__head--map)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgb(0 0 0 / .35)); }
/* the drawn street map */
.go-place__head--map {
    background:
        linear-gradient(90deg, transparent 0 31%, #fff 31% 34%, transparent 34% 71%, #fff 71% 73.5%, transparent 73.5%),
        linear-gradient(0deg, transparent 0 28%, #fff 28% 31%, transparent 31% 66%, #fff 66% 68.5%, transparent 68.5%),
        repeating-linear-gradient(90deg, transparent 0 22px, color-mix(in srgb, #fff 55%, transparent) 22px 23px),
        repeating-linear-gradient(0deg, transparent 0 22px, color-mix(in srgb, #fff 55%, transparent) 22px 23px),
        color-mix(in srgb, var(--inv-soft) 75%, #e9e4dc);
}
.go-place__park { position: absolute; left: 6%; top: 8%; width: 22%; height: 30%; border-radius: 8px; background: color-mix(in srgb, #7cbf7a 55%, var(--inv-soft)); }
.go-place__road {
    position: absolute; left: -10%; right: -10%; top: 50%; height: 12px; margin-top: -6px; transform: rotate(-16deg);
    background: color-mix(in srgb, var(--inv-accent) 70%, #fff); box-shadow: 0 0 0 2px #fff;
}
.go-place__pin { position: absolute; z-index: 2; left: 50%; bottom: .7rem; width: 4.4rem; margin-left: -2.2rem; filter: drop-shadow(0 8px 8px rgb(0 0 0 / .3)); }
.go-place__date {
    position: absolute; z-index: 2; top: .85rem; right: .85rem; display: flex; flex-direction: column; align-items: center; margin: 0;
    padding: .35rem .7rem .4rem; border-radius: 10px; color: var(--inv-deep); background: #fff;
    box-shadow: inset 0 3px 0 var(--inv-primary), 0 10px 18px -10px rgb(0 0 0 / .55);
}
.go-place__day { font-family: var(--go-sign); font-size: 2.1rem; line-height: .95; color: var(--inv-primary); }
.go-place__month { font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.go-place__body { padding: 1.2rem 1.25rem 1.3rem; }
.go-place__no {
    display: inline-block; margin: 0; padding: .2rem .65rem; border-radius: 99px;
    font-size: .66rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #fff; background: var(--inv-primary);
}
.go-place__name { margin: .5rem 0 1rem; font-family: var(--go-sign); font-weight: 400; font-size: 2.1rem; line-height: .98; letter-spacing: .015em; color: var(--go-title); }
.go-place__rows { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; font-size: .92rem; }
.go-place__rows li { display: flex; align-items: flex-start; gap: .75rem; }
.go-place__rows .go-icon { width: 2.05rem; height: 2.05rem; padding: .45rem; border-radius: 50%; color: var(--go-ink); background: var(--inv-soft); }
.go-place__rows li > span { padding-top: .3rem; }
.go-place__venue { display: block; font-weight: 800; }
.go-place__address { display: block; font-size: .86rem; color: var(--go-muted); }
.go-place__maps { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1.5px dashed color-mix(in srgb, var(--inv-primary) 22%, transparent); }
.go-place__maps:not(:has(*)) { display: none; }
.go-place .inv-maps { margin: 0; text-align: center; }
.go-place .inv-maps .inv-button { width: 100%; min-height: 2.9rem; border-radius: 99px; font-weight: 800; color: #fff; background: var(--inv-primary); }
.go-place .inv-maps__frame { height: 180px; margin-top: .8rem; border-radius: 14px; background: var(--inv-soft); }
.go-place--alt .go-place__no { color: var(--inv-deep); background: var(--inv-accent); }
.go-place--alt .go-place__date { box-shadow: inset 0 3px 0 var(--inv-accent), 0 10px 18px -10px rgb(0 0 0 / .55); }
.go-place--alt .inv-maps .inv-button { color: var(--inv-deep); background: var(--go-foil); }

/* countdown: bunting on top, the numbers on white hanging price tags */
.go-countdown { padding-top: 5.4rem; }
.go-countdown .inv-countdown { gap: clamp(.45rem, 2.4vw, .75rem); }
.go-countdown .inv-countdown__item {
    position: relative; display: grid; place-content: center; width: clamp(4.1rem, 19vw, 4.8rem); min-width: 0; aspect-ratio: 4 / 5; padding: 1rem 0 .2rem;
    border-radius: 8px 8px 12px 12px; color: var(--inv-primary); background: #fff;
    clip-path: polygon(24% 0, 76% 0, 100% 16%, 100% 100%, 0 100%, 0 16%);
    filter: drop-shadow(0 14px 14px rgb(0 0 0 / .3));
}
.go-countdown .inv-countdown__item::before { content: ''; position: absolute; top: .4rem; left: 50%; width: .5rem; height: .5rem; margin-left: -.25rem; border-radius: 50%; background: var(--inv-shade); }
.go-countdown .inv-countdown__item:nth-child(even) { transform: rotate(3deg); }
.go-countdown .inv-countdown__item:nth-child(odd) { transform: rotate(-3deg); }
.go-countdown .inv-countdown__item:first-child { color: var(--inv-deep); background: var(--go-foil); }
.go-countdown .inv-countdown__value { font-variant-numeric: lining-nums tabular-nums; font-family: var(--go-sign); font-weight: 400; font-size: 2.4rem; line-height: 1; letter-spacing: .02em; }
.go-countdown .inv-countdown__label { margin-top: .1rem; font-size: .6rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-deep); }
.go-countdown .inv-countdown__done { font: 400 1.8rem/1.2 var(--go-script); color: #fff; }
.go-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 2rem; }
.go-countdown .inv-countdown__actions .inv-button {
    width: min(100%, 17rem); min-height: 2.75rem; padding: .6rem 1rem; border-radius: 99px; font-size: .86rem; font-weight: 700;
    color: #fff; background: color-mix(in srgb, #fff 10%, transparent);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #fff 60%, transparent);
}
.go-countdown .inv-countdown__actions .inv-button:first-child { color: var(--inv-deep); background: var(--go-foil); box-shadow: none; }
.go-countdown .inv-cal {
    --inv-cal-bg: #fff; --inv-cal-text: var(--inv-text); --inv-cal-mark: var(--inv-primary);
    max-width: 19rem; margin: 2.8rem auto 0; border-radius: 16px;
    box-shadow: inset 0 6px 0 var(--inv-accent), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.go-countdown .inv-cal__month { font-family: var(--go-sign); font-weight: 400; font-size: 1.7rem; letter-spacing: .03em; color: var(--go-title); }

/* speakers ("Peresmian oleh"): VIP cards — charcoal, gold inner frame, foil badge */
.go-speakers__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.go-vip {
    position: relative; display: flex; flex-direction: column; min-width: 0; padding: .45rem; border-radius: 20px; color: #fff;
    background: radial-gradient(100% 60% at 50% 0%, color-mix(in srgb, var(--inv-primary) 30%, transparent), transparent 70%), var(--inv-deep);
    box-shadow: 0 24px 36px -24px color-mix(in srgb, var(--inv-deep) 90%, transparent);
}
.go-vip::after { content: ''; position: absolute; inset: .25rem; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--inv-accent) 55%, transparent); pointer-events: none; }
.go-vip__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 12px 12px; background: var(--inv-shade); }
.go-vip__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.go-vip__media--empty {
    display: grid; place-items: center;
    background: radial-gradient(70% 55% at 50% 25%, color-mix(in srgb, #fff 26%, transparent), transparent 70%), linear-gradient(170deg, var(--inv-primary), var(--inv-shade));
}
.go-vip__initials { font-family: var(--go-sign); font-size: 3.4rem; line-height: 1; letter-spacing: .03em; color: #fff; }
.go-vip__badge {
    position: absolute; left: 50%; bottom: .55rem; transform: translateX(-50%); padding: .18rem .7rem .08rem; border-radius: 99px;
    font-family: var(--go-sign); font-size: 1rem; line-height: 1.2; letter-spacing: .2em; color: var(--inv-deep); background: var(--go-foil);
    box-shadow: 0 4px 10px rgb(0 0 0 / .35);
}
.go-vip__text { display: flex; flex-direction: column; flex: 1; padding: .8rem .5rem .55rem; }
.go-vip__lead { margin: 0 0 .2rem; font: 400 1.15rem/1.2 var(--go-script); color: var(--inv-accent); }
.go-vip__name { margin: 0; font-family: var(--go-sign); font-weight: 400; font-size: 1.45rem; line-height: 1.02; letter-spacing: .02em; color: #fff; overflow-wrap: anywhere; }
.go-vip__role { margin: .3rem 0 0; font-size: .78rem; line-height: 1.4; color: var(--go-on-dark); }
.go-vip__topic {
    display: flex; align-items: flex-start; gap: .4rem; margin: auto 0 0; padding: .45rem .55rem; border-radius: 10px;
    font-size: .76rem; font-weight: 700; line-height: 1.35; color: var(--go-gold-light);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 55%, transparent);
}
.go-vip__role + .go-vip__topic, .go-vip__name + .go-vip__topic { margin-top: .7rem; }
.go-vip__topic .go-icon { width: 1rem; height: 1rem; margin-top: .05rem; }
.go-vip--wide { grid-column: 1 / -1; flex-direction: row; gap: .2rem; }
.go-vip--wide .go-vip__media { flex: 0 0 44%; aspect-ratio: auto; min-height: 13.5rem; }
.go-vip--wide .go-vip__text { justify-content: center; padding: .9rem .75rem; }
.go-vip--wide .go-vip__name { font-size: 1.9rem; }
.go-vip--wide .go-vip__topic { margin-top: .85rem; }

/* rundown: the launch timeline along a satin ribbon, gold time tags, starburst nodes */
.go-rundown__list { position: relative; display: grid; gap: 1rem; max-width: 24rem; margin: 0 auto; padding: 0; list-style: none; text-align: left; }
.go-rundown__list::before {
    content: ''; position: absolute; left: 4.55rem; top: .4rem; bottom: .4rem; width: 6px; margin-left: -3px; border-radius: 3px; transform-origin: top;
    background: linear-gradient(90deg, var(--inv-shade), color-mix(in srgb, var(--inv-ribbon) 75%, #fff) 45%, var(--inv-ribbon) 60%, var(--inv-shade));
    box-shadow: -1.5px 0 0 color-mix(in srgb, var(--inv-accent) 70%, transparent), 1.5px 0 0 color-mix(in srgb, var(--inv-accent) 70%, transparent);
}
.go-rundown__item { position: relative; display: grid; grid-template-columns: 3.4rem 1.4rem minmax(0, 1fr); gap: 0 .6rem; align-items: start; }
.go-rundown__time {
    justify-self: end; margin-top: .2rem; padding: .2rem .45rem .1rem; border-radius: 6px;
    font-family: var(--go-sign); font-size: 1.12rem; line-height: 1.1; letter-spacing: .04em; color: var(--inv-deep); background: var(--go-foil);
}
.go-rundown__node { position: relative; z-index: 1; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; margin-top: .25rem; }
.go-rundown__node svg { width: 100%; height: 100%; fill: var(--inv-accent); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--inv-accent) 70%, transparent)); }
.go-rundown__body { padding: .1rem 0 .5rem; }
.go-rundown__body h3 { margin: 0; font-weight: 700; font-size: 1.04rem; line-height: 1.3; color: #fff; }
.go-rundown__body p { margin: .2rem 0 0; font-size: .84rem; line-height: 1.45; color: var(--go-on-dark); }
.go-rundown__item--peak .go-rundown__body {
    padding: .8rem .95rem .9rem; border-radius: 14px;
    background: linear-gradient(140deg, var(--inv-primary), var(--inv-shade));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-accent) 60%, transparent), 0 16px 26px -14px rgb(0 0 0 / .7);
}
.go-rundown__peak { margin: 0 0 .1rem; font: 400 1.15rem/1.2 var(--go-script); color: var(--go-gold-light); }
.go-rundown__item--peak .go-rundown__body p { color: color-mix(in srgb, #fff 88%, transparent); }

/* gallery: a shop window display under a small awning */
.go-gallery__window { position: relative; padding: 0 .3rem; }
.go-gallery__awning { --aw-h: 1.8rem; --aw-sc: 9px; position: relative; z-index: 2; margin: 0 -.6rem -.6rem; }
.go-gallery .inv-gallery { gap: .55rem; }
.go-gallery .inv-gallery__item { border-radius: 8px; box-shadow: 0 0 0 4px #fff, 0 0 0 5px color-mix(in srgb, var(--inv-deep) 14%, transparent), 0 16px 28px -18px color-mix(in srgb, var(--inv-deep) 70%, transparent); }
.go-gallery .inv-gallery__item:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; border-radius: 0 0 10px 10px; box-shadow: 0 0 0 5px var(--inv-deep), 0 20px 32px -18px color-mix(in srgb, var(--inv-deep) 80%, transparent); margin-bottom: .55rem; }

/* live streaming: a charcoal screen with a neon "Live" */
.go-stream { padding-top: 3.8rem; padding-bottom: 3.8rem; }
.go-stream__card {
    position: relative; max-width: 24rem; margin: 0 auto; padding: 1.5rem 1.35rem 1.4rem; border-radius: 22px; text-align: left; color: #fff;
    background: radial-gradient(100% 60% at 100% 0%, color-mix(in srgb, var(--inv-primary) 40%, transparent), transparent 70%), var(--inv-deep);
    box-shadow: inset 0 0 0 6px color-mix(in srgb, #fff 6%, transparent), 0 30px 44px -26px rgb(0 0 0 / .7);
}
.go-stream__live {
    display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; padding: .05rem .8rem .1rem .6rem; border-radius: 10px;
    font: 400 1.6rem/1.2 var(--go-script); color: color-mix(in srgb, var(--inv-primary) 40%, #fff);
    border: 1.5px solid color-mix(in srgb, var(--inv-primary) 50%, #fff);
    text-shadow: 0 0 6px var(--inv-primary), 0 0 16px var(--inv-primary);
    box-shadow: 0 0 8px var(--inv-primary), inset 0 0 8px color-mix(in srgb, var(--inv-primary) 70%, transparent);
}
.go-stream__dot { width: 9px; height: 9px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 8px #ff4d4d; }
.go-stream__head { display: flex; align-items: center; gap: .8rem; }
.go-stream__icon { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; color: var(--inv-deep); background: var(--go-foil); }
.go-stream__icon .go-icon { width: 1.6rem; height: 1.6rem; }
.go-stream__title { margin: 0; font-family: var(--go-sign); font-weight: 400; font-size: 2.2rem; line-height: 1; letter-spacing: .02em; color: #fff; }
.go-stream__text { margin: .9rem 0 0; font-size: .92rem; color: var(--go-on-dark); }
.go-stream__note { margin: .45rem 0 0; font-size: .8rem; font-weight: 700; color: var(--inv-accent); }
.go-stream__button { width: 100%; margin-top: 1.2rem; min-height: 2.9rem; border-radius: 99px; font-weight: 800; color: var(--inv-deep) !important; background: var(--go-foil) !important; }

/* RSVP: the VIP pass — a gold foil header with a punched slot, a tear line with notches, the form */
.go-pass {
    position: relative; max-width: 24rem; margin: 0 auto; border-radius: 22px; color: var(--inv-text);
    filter: drop-shadow(0 26px 30px rgb(0 0 0 / .45));
}
.go-pass__head {
    position: relative; display: flex; align-items: center; gap: .9rem; padding: 1.7rem 1.2rem 1.25rem 1.3rem; overflow: hidden; border-radius: 22px 22px 0 0;
    text-align: left; color: var(--inv-deep); background: var(--go-foil);
}
.go-pass__head::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(115deg, transparent 0 14px, rgb(255 255 255 / .12) 14px 16px);
}
.go-pass__slot { position: absolute; top: .6rem; left: 50%; width: 3rem; height: .45rem; margin-left: -1.5rem; border-radius: 99px; background: color-mix(in srgb, var(--inv-deep) 70%, transparent); box-shadow: inset 0 1px 2px rgb(0 0 0 / .5); }
.go-pass__title { position: relative; z-index: 1; flex: 1; min-width: 0; }
.go-pass__vip { margin: 0; font-family: var(--go-sign); font-size: 3.6rem; line-height: .85; letter-spacing: .08em; color: var(--inv-deep); text-shadow: 0 2px 0 rgb(255 255 255 / .35); }
.go-pass__label { margin: .15rem 0 0; font: 400 1.3rem/1.2 var(--go-script); color: var(--inv-shade); }
.go-pass__event { margin: .1rem 0 0; font-weight: 800; font-size: .92rem; line-height: 1.3; }
.go-pass__qr { position: relative; z-index: 1; width: 4rem; height: 4rem; }
.go-pass__body {
    position: relative; padding: 1.55rem 1.15rem 1.35rem;
    background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-deep) 30%, transparent) 0 7px, transparent 7px 13px) 1.3rem 0 / calc(100% - 2.6rem) 2px no-repeat, #fff;
}
/* the round notches of the tear line: real cut-outs (masks), so the section shows through them */
.go-pass__head {
    -webkit-mask: radial-gradient(circle at 0 100%, transparent 12px, #000 12.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, transparent 12px, #000 12.5px) right / 51% 100% no-repeat;
    mask: radial-gradient(circle at 0 100%, transparent 12px, #000 12.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, transparent 12px, #000 12.5px) right / 51% 100% no-repeat;
}
.go-pass__body {
    border-radius: 0 0 22px 22px;
    -webkit-mask: radial-gradient(circle at 0 0, transparent 12px, #000 12.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, transparent 12px, #000 12.5px) right / 51% 100% no-repeat;
    mask: radial-gradient(circle at 0 0, transparent 12px, #000 12.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, transparent 12px, #000 12.5px) right / 51% 100% no-repeat;
}
.go-pass__intro { margin: 0 auto 1.1rem; max-width: 32ch; font-size: .9rem; text-align: center; color: var(--go-muted); }
.go-pass__sent { margin-bottom: 1rem; text-align: center; }
.go-pass__check { display: block; width: 4.6rem; height: 4.6rem; margin: 0 auto .5rem; }
.go-pass__check-burst { fill: var(--inv-primary); }
.go-pass__check-mark { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.go-pass__thanks { margin: 0; font-family: var(--go-sign); font-size: 2rem; line-height: 1.05; letter-spacing: .02em; color: var(--go-title); }
.go-pass__line { margin: .1rem 0 0; font-size: .9rem; color: var(--go-muted); }
.go-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; text-align: center; font-size: .78rem; font-weight: 700; color: var(--go-ink); }

/* wishes: the form on a white card with a primary block behind; the messages as notes in a scroll box */
.go-wishes__intro { color: var(--go-muted); }
.go-section > .go-wishes__intro { margin-top: -1rem; margin-bottom: 1.6rem; }
.go-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.go-wishes .inv-form {
    margin-right: 8px; padding: 1.3rem 1.1rem; border-radius: 18px; background: #fff;
    box-shadow: 0 0 0 1px var(--go-ring), 8px 8px 0 0 var(--inv-primary);
}
.go-wishes .inv-wishes__list { margin-top: 1.5rem; }
.go-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .55rem; border-radius: 16px; background: color-mix(in srgb, var(--inv-soft) 65%, transparent); box-shadow: inset 0 0 0 1px var(--go-ring);
}
.go-wishes .inv-wish { padding: .8rem .9rem; border-radius: 10px; background: #fff; text-align: left; box-shadow: inset 0 3px 0 var(--inv-primary), 0 2px 10px rgb(0 0 0 / .05); }
.go-wishes .inv-wish:nth-child(3n+2) { box-shadow: inset 0 3px 0 var(--inv-accent), 0 2px 10px rgb(0 0 0 / .05); }
.go-wishes .inv-wish:nth-child(3n) { box-shadow: inset 0 3px 0 var(--inv-deep), 0 2px 10px rgb(0 0 0 / .05); }
.go-wishes .inv-wish__name { font-weight: 800; color: var(--go-title); }
.go-wishes .inv-wish__message { font-size: .9rem; line-height: 1.5; }
.go-wishes .inv-wish__time { font-size: .72rem; color: var(--go-muted); }

/* co-hosts ("Didukung oleh"): white gift tags with a punched hole on the gold band */
.go-cohosts__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 0 auto; padding: 0; max-width: 24rem; list-style: none; }
.go-cohosts__list li {
    position: relative; padding: .6rem 1rem .6rem 1.9rem; font-weight: 700; font-size: .98rem; line-height: 1.3;
    color: var(--inv-deep); background: #fff;
    clip-path: polygon(.8rem 0, 100% 0, 100% 100%, .8rem 100%, 0 50%);
    filter: drop-shadow(0 8px 10px color-mix(in srgb, var(--inv-shade) 25%, transparent));
}
.go-cohosts__list li::before { content: ''; position: absolute; left: .95rem; top: 50%; width: .45rem; height: .45rem; margin-top: -.225rem; border-radius: 50%; background: var(--inv-accent); box-shadow: inset 0 1px 2px rgb(0 0 0 / .3); }

/* vendors ("Sponsor & mitra"): the partner logo wall */
.go-vendors__wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.go-vendor {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 6.4rem; padding: 1rem .8rem;
    border-radius: 14px; text-align: center; background: #fff;
    box-shadow: 0 0 0 1px var(--go-ring), 0 14px 24px -20px color-mix(in srgb, var(--inv-deep) 60%, transparent);
}
.go-vendor--wide { grid-column: 1 / -1; }
.go-vendor__role { font-size: .62rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--go-ink); }
.go-vendor__name { margin: .3rem 0 0; font-family: var(--go-sign); font-weight: 400; font-size: 1.55rem; line-height: 1; letter-spacing: .03em; color: var(--go-title); overflow-wrap: anywhere; }
.go-vendor__link { display: inline-flex; align-items: center; gap: .35rem; margin-top: .45rem; font-size: .78rem; font-weight: 700; text-decoration: none; }
.go-vendor__link .go-icon { width: 1rem; height: 1rem; }
.go-vendor:first-child { min-height: 7.6rem; color: #fff; background: radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, #fff 16%, transparent), transparent 70%), linear-gradient(150deg, var(--inv-primary), var(--inv-shade)); }
.go-vendor:first-child .go-vendor__role { color: var(--go-gold-light); }
.go-vendor:first-child .go-vendor__name { font-size: 2.2rem; color: #fff; }
.go-vendor:first-child .go-vendor__link { color: var(--go-gold-light); }
.go-vendor__star { position: absolute; top: .6rem; right: .6rem; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; color: var(--inv-deep); background: var(--go-foil); }
.go-vendor__star .go-icon { width: 1rem; height: 1rem; fill: currentColor; }

/* contacts: white rows with a round primary initial badge and a WhatsApp button */
.go-contacts__list { display: grid; gap: .7rem; max-width: 24rem; margin: 0 auto; }
.go-contact { display: flex; align-items: center; gap: .85rem; padding: .8rem .8rem .8rem .85rem; border-radius: 16px; text-align: left; background: #fff; box-shadow: 0 0 0 1px var(--go-ring), 0 14px 24px -20px color-mix(in srgb, var(--inv-deep) 60%, transparent); }
.go-contact__avatar {
    display: grid; place-items: center; flex: none; width: 2.8rem; height: 2.8rem; border-radius: 50%;
    font-family: var(--go-sign); font-size: 1.5rem; padding-top: .15rem; color: #fff; background: linear-gradient(150deg, var(--inv-primary), var(--inv-shade));
    box-shadow: 0 0 0 2.5px #fff, 0 0 0 4px var(--inv-accent);
}
.go-contact__text { flex: 1; min-width: 0; }
.go-contact__text p { margin: 0; }
.go-contact__name { font-weight: 800; line-height: 1.3; color: var(--go-title); }
.go-contact__role { font-size: .82rem; color: var(--go-muted); }
.go-contact__phone { font-size: .8rem; color: var(--go-muted); }
.go-contact__button { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.5rem; padding: .45rem .9rem; border-radius: 99px; font-size: .82rem; font-weight: 800; color: #fff; background: var(--inv-primary); }
.go-contact__button .go-icon { width: 1.05rem; height: 1.05rem; }

/* health protocol: white chips with a check on a primary disc */
.go-protocol__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin: 0 auto; padding: 0; max-width: 24rem; list-style: none; }
.go-protocol__list li { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem .45rem .45rem; border-radius: 99px; font-size: .88rem; font-weight: 700; background: #fff; box-shadow: 0 0 0 1px var(--go-ring); }
.go-protocol__list .go-icon { width: 1.6rem; height: 1.6rem; padding: .3rem; border-radius: 50%; color: #fff; background: var(--inv-primary); }
.go-section > .go-protocol__note { margin-top: 1.1rem; font-size: .9rem; color: var(--go-muted); }

/* closing: the full photo fading into the primary colour, balloons at its foot, the thanks, the lockup */
.go-closing { padding: 3.6rem 1.5rem 2rem; }
.go-closing--photo { padding-top: 0; }
.go-closing__photo { position: relative; z-index: -1; height: min(98vw, 27rem); margin: 0 -1.5rem; 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%); }
.go-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 35%; --inv-parallax: 30px; }
.go-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 38%, color-mix(in srgb, var(--inv-primary) 55%, transparent) 64%, var(--inv-primary) 97%);
}
.go-closing__body { position: relative; }
.go-closing--photo .go-closing__body { margin-top: -6.2rem; }
.go-closing__balloons { position: absolute; top: -1.2rem; width: 3.3rem; }
.go-closing__balloons--l { left: -1rem; }
.go-closing__balloons--r { right: -1rem; }
.go-closing:not(.go-closing--photo) .go-closing__balloons { top: -2rem; }
.go-closing__script {
    margin: 0 auto; font: 400 1.85rem/1.1 var(--go-script); transform: rotate(-4deg);
    color: color-mix(in srgb, var(--inv-accent) 55%, #fff);
    text-shadow: 0 0 6px color-mix(in srgb, var(--inv-accent) 80%, transparent), 0 0 20px color-mix(in srgb, var(--inv-accent) 50%, transparent), 0 2px 10px rgb(0 0 0 / .3);
}
.go-closing__title {
    margin: .1rem 0 0; font-family: var(--go-sign); font-weight: 400; font-size: clamp(2.1rem, 9.8vw, 2.6rem); line-height: .95; letter-spacing: .015em;
    color: #fff; text-shadow: 0 3px 0 var(--inv-shade);
}
.go-closing__title em { display: block; font-style: normal; color: var(--go-gold-light); }
.go-section > .go-closing__thanks, .go-closing__thanks { margin: .7rem auto .75rem; font-size: .76rem; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: #fff; }
.go-closing__thanks::before, .go-closing__thanks::after { content: ''; display: inline-block; width: 1.4rem; height: 1.5px; margin: 0 .6rem; vertical-align: middle; background: var(--inv-accent); }
.go-closing__message { margin: 0 auto; max-width: 32ch; font-size: .93rem; line-height: 1.6; color: color-mix(in srgb, #fff 90%, transparent); }
.go-closing__salam { margin: .85rem auto 0; max-width: 26ch; font-weight: 700; font-size: 1.05rem; line-height: 1.4; color: #fff; }
.go-closing__signature { margin: .3rem auto 0; max-width: 30ch; font-size: .9rem; font-weight: 600; color: color-mix(in srgb, #fff 85%, transparent); }
.go-closing__lockup {
    display: flex; align-items: center; justify-content: center; gap: .75rem; max-width: 22rem; margin: 1.3rem auto 0; padding: .65rem .9rem; border-radius: 16px;
    text-align: left; background: color-mix(in srgb, var(--inv-shade) 55%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 50%, transparent);
}
.go-closing__org { display: flex; flex-direction: column; min-width: 0; margin: 0; line-height: 1.3; }
.go-closing__org-name { font-weight: 800; font-size: .95rem; color: #fff; }
.go-closing__org-tagline { margin-top: .1rem; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--go-gold-light); }

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

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

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

/* the room under the page (for the fixed menu and music button) continues the closing's primary colour; with
   the platform credit present, the credit's own measured colour wins */
.go-main ~ .inv-music__space { background: color-mix(in srgb, var(--inv-primary) 70%, var(--inv-shade)); }
.go-main ~ .go-branding ~ .inv-music__space { background: var(--inv-end-bg, color-mix(in srgb, var(--inv-primary) 70%, var(--inv-shade))); }

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

/* short phones: the window and type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .go-cover { --win-h: clamp(8rem, 30svh, 16rem); padding-top: 1.15rem; padding-bottom: 1.2rem; }
    .go-cover__sign { margin-bottom: .4rem; }
    .go-cover__neon { font-size: 1.75rem; }
    .go-cover__title { font-size: clamp(2.6rem, 12.5vw, 3.1rem); }
    .go-cover__title--long { font-size: clamp(2rem, 9.5vw, 2.5rem); }
    .go-cover__store { margin-top: .75rem; }
    .go-cover__guest { margin-top: .85rem; }
    .go-cover__quote { margin-top: .6rem; font-size: .86rem; }
    .go-cover__open { margin-top: .75rem; }
}
@media (max-height: 660px) {
    .go-cover { --win-h: clamp(6.5rem, 25svh, 12rem); padding-top: .9rem; padding-bottom: 1rem; }
    .go-cover .go-logo--sm { --logo-size: 2.1rem; }
    .go-cover__org-unit { display: none; }
    .go-cover__neon { font-size: 1.5rem; }
    .go-cover__title { font-size: clamp(2.2rem, 10.5vw, 2.6rem); }
    .go-cover__title--long { font-size: clamp(1.75rem, 8.4vw, 2.1rem); }
    .go-cover__meta { margin-top: .4rem; font-size: .7rem; }
    .go-cover__store { margin-top: .6rem; }
    .go-cover__awning { --aw-h: 2rem; --aw-sc: 9px; }
    .go-cover__open-sign { top: 1.65rem; }
    .go-cover__balloons { width: 3.8rem; }
    .go-cover__guest { margin-top: .7rem; padding: .45rem .9rem .5rem; }
    .go-cover__guest-name { font-size: 1.02rem; }
    .go-cover__quote { margin-top: .5rem; font-size: .8rem; line-height: 1.36; }
    .go-cover__open { margin-top: .65rem; min-height: 2.75rem; padding: .55rem 1.4rem; }
}
/* very short screens (in-app browsers): a smaller window, quote and title so everything fits */
@media (max-height: 600px) {
    .go-cover { --win-h: clamp(5.5rem, 20svh, 8.5rem); padding-top: 1rem; padding-bottom: .9rem; }
    .go-cover__sign { margin-bottom: .2rem; padding-top: .2rem; padding-bottom: .2rem; }
    .go-cover .go-logo--sm { --logo-size: 1.9rem; }
    .go-cover__awning { --aw-h: 1.7rem; --aw-sc: 8px; }
    .go-cover__open-sign { top: 1.35rem; right: 3rem; }
    .go-cover__open-sign span { font-size: .85rem; }
    .go-cover__guest { margin-top: .6rem; }
    .go-cover__guest-name { font-size: .98rem; }
    .go-cover__neon { font-size: 1.35rem; }
    .go-cover__title { font-size: clamp(2rem, 9.5vw, 2.3rem); }
    .go-cover__title--long { font-size: clamp(1.6rem, 7.6vw, 1.9rem); }
    .go-cover__balloons { width: 3.3rem; }
    .go-cover__quote { font-size: .76rem; }
}

/* wide screens: the phone-width column on a primary backdrop */
@media (min-width: 560px) {
    body.go-body {
        background:
            radial-gradient(70vw 60vh at 50% 0%, color-mix(in srgb, #fff 14%, transparent), transparent 70%),
            linear-gradient(180deg, var(--inv-primary), var(--inv-shade));
        background-attachment: fixed;
    }
    body.go-body::before {
        content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
        background: repeating-linear-gradient(90deg, transparent 0 46px, rgb(0 0 0 / .07) 46px 47px, rgb(255 255 255 / .05) 47px 48px);
    }
    .go-main { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
}

/* ---------- 9. motion ---------- */
@keyframes go-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes go-bounce { 0% { transform: scale(0); } 55% { transform: scale(1.15); } 75% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes go-unroll { from { transform: scaleY(.15); opacity: 0; } 60% { opacity: 1; } to { transform: scaleY(1); opacity: 1; } }
@keyframes go-light { from { filter: brightness(.25); transform: scale(1.08); } to { filter: none; transform: none; } }
@keyframes go-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes go-rise-flip { from { opacity: 0; transform: translateY(40px) scaleX(-1); } to { opacity: 1; transform: scaleX(-1); } }
@keyframes go-flicker { 0%, 18% { opacity: .15; } 20% { opacity: 1; } 24% { opacity: .3; } 30% { opacity: 1; } 34% { opacity: .5; } 40%, 100% { opacity: 1; } }
@keyframes go-swing { 0% { transform: rotate(-14deg); } 40% { transform: rotate(10deg); } 70% { transform: rotate(2deg); } 100% { transform: rotate(5deg); } }
@keyframes go-ribbon-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes go-bow-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.3) rotate(-20deg); } to { opacity: 1; transform: translate(-50%, -46%); } }
@keyframes go-drop { 0% { opacity: 0; transform: translateY(-46px); } 60% { opacity: 1; transform: translateY(4px); } 80% { transform: translateY(-3px); } 100% { opacity: 1; transform: none; } }
@keyframes go-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes go-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* cover (≤ 2.5 s, once): the awning unrolls (0–.7 s), the window lights up as the photo settles (.3–1.5 s),
   the balloons rise (.6–1.6 s), the OPEN sign swings in, the ribbon stretches across and the bow pops (1–1.8 s),
   the neon flickers on (.3–1.5 s); the text follows through its inv-enter delays (up to 1.3 s) */
html.inv-anim .go-cover__awning { animation: go-unroll .7s cubic-bezier(.3, .8, .3, 1) both; }
html.inv-anim :is(.go-cover__photo, .go-cover__empty) { animation: go-light 1.2s ease-out .3s both; }
html.inv-anim .go-cover__balloons--l { animation: go-rise 1s cubic-bezier(.2, .8, .3, 1) .6s both; }
html.inv-anim .go-cover__balloons--r { animation: go-rise-flip 1s cubic-bezier(.2, .8, .3, 1) .7s both; }
html.inv-anim .go-cover__open-sign { animation: go-swing 1.1s ease-out .7s both; }
html.inv-anim .go-cover__ribbon .go-ribbon__half--l { animation: go-ribbon-in .55s cubic-bezier(.3, .8, .3, 1) 1s both; }
html.inv-anim .go-cover__ribbon .go-ribbon__half--r { animation: go-ribbon-in .55s cubic-bezier(.3, .8, .3, 1) 1s both; }
html.inv-anim .go-cover__ribbon .go-ribbon__bow { animation: go-bow-in .6s cubic-bezier(.34, 1.56, .64, 1) 1.3s both; }
html.inv-anim .go-cover__neon { animation: go-flicker 1.2s linear .3s both; }
/* the cut: animations stop holding the ribbon so the leave transitions can move it */
html.inv-anim .go-cover--leave .go-ribbon__half, html.inv-anim .go-cover--leave .go-ribbon__bow { animation: none; }

/* the map pin drops in once when its card is revealed */
html.inv-anim .go-main .go-place__pin .go-pin__body { opacity: 0; }
html.inv-anim :is(.is-revealed .go-place__pin, .go-place__pin.is-revealed) .go-pin__body { animation: go-drop .8s cubic-bezier(.3, .7, .3, 1) .15s both; }

/* the LIVE dot blinks a few times when the card appears, then stays on */
html.inv-anim .is-revealed .go-stream__dot { animation: go-blink 1s ease-in-out .4s 4; }

/* the registration check pops in */
html.inv-anim .go-pass__sent .go-pass__check { animation: go-bounce .8s cubic-bezier(.34, 1.56, .64, 1) both; }
html.inv-anim .go-pass__sent .go-pass__check-mark { animation: go-draw .45s ease-out .35s both; }

/* the timeline ribbon grows while scrolling (the default, without support, is the full line) */
@supports (animation-timeline: view()) {
    html.inv-anim .go-rundown__list::before { animation: go-grow linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; }
}

@media (prefers-reduced-motion: reduce) {
    .go-cover, .go-cover--leave, .go-ribbon__half, .go-ribbon__bow { transition: none; }
}

/* ---------- 10. intro scene "Gunting Pita Peresmian" (scene.json + sections/_scene; the intro lives in <body>) ---------- */
.go-scene-wall { position: absolute; inset: 0; overflow: hidden;
    background:
        radial-gradient(70% 30% at 50% 4%, color-mix(in srgb, #fff 18%, transparent), transparent 72%),
        radial-gradient(90% 40% at 50% 100%, color-mix(in srgb, var(--inv-shade) 90%, transparent), transparent 75%),
        repeating-linear-gradient(90deg, transparent 0 46px, rgb(0 0 0 / .07) 46px 47px, rgb(255 255 255 / .05) 47px 48px),
        linear-gradient(180deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 72%, var(--inv-shade))); }
.go-scene-wall__beam { position: absolute; top: -6%; width: 80%; height: 100%; transform-origin: 50% 0;
    background: linear-gradient(180deg, rgb(255 255 255 / .22), rgb(255 255 255 / .05) 60%, transparent);
    clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); }
.go-scene-wall__beam--l { left: -30%; transform: rotate(-22deg); }
.go-scene-wall__beam--r { right: -30%; transform: rotate(22deg); }
.go-awning.go-scene-awning { --aw-h: 100%; --aw-sc: 13px; height: 100%; }
.go-scene-neon { display: grid; place-items: center; height: 100%; margin: 0; white-space: nowrap; transform: rotate(-4deg);
    font: 400 clamp(1.7rem, 9.5vw, 2.6rem)/1 var(--go-script); color: color-mix(in srgb, var(--inv-accent) 55%, #fff);
    text-shadow: 0 0 4px color-mix(in srgb, var(--inv-accent) 90%, transparent), 0 0 14px var(--inv-accent), 0 0 30px color-mix(in srgb, var(--inv-accent) 60%, transparent); }
/* the shop window behind the sign: the cover photo (or the lit interior with the monogram), deep frame, gold hairline */
.go-scene-window { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border: 6px solid var(--inv-deep); border-top-width: 3px;
    background: radial-gradient(70% 60% at 50% 30%, color-mix(in srgb, var(--inv-accent) 55%, transparent), transparent 70%),
        repeating-linear-gradient(180deg, transparent 0 38px, color-mix(in srgb, var(--inv-accent) 30%, transparent) 38px 41px),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-shade) 60%, var(--inv-deep)), var(--inv-deep));
    box-shadow: inset 0 0 0 1.5px var(--inv-accent), 0 18px 34px -16px rgb(0 0 0 / .55); }
.go-scene-window b { font: 400 clamp(4rem, 24vw, 6rem)/1 var(--go-sign); color: #fff; text-shadow: 0 0 24px color-mix(in srgb, var(--inv-accent) 80%, transparent); }
.go-scene-window i { position: absolute; inset: 0; background: center 35% / cover no-repeat; }
.go-scene-window::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 58%, rgb(255 255 255 / .13) 64%, transparent 70%, transparent 74%, rgb(255 255 255 / .08) 77%, transparent 80%); }
.go-scene-sign { position: relative; display: grid; place-items: start center; height: 100%; padding-top: 1.1rem; }
.go-scene-sign::before { content: ''; position: absolute; top: 0; left: 24%; right: 24%; height: 1.3rem;
    border: 1.5px solid color-mix(in srgb, #fff 75%, transparent); border-bottom: 0; border-radius: 50% 50% 0 0; }
.go-scene-sign span { display: block; padding: .14rem .55rem 0; border-radius: 5px; font-family: var(--go-sign); font-size: clamp(1rem, 5vw, 1.3rem); line-height: 1.25; letter-spacing: .14em;
    color: var(--inv-primary); background: #fff; box-shadow: inset 0 0 0 2px var(--inv-primary), 0 8px 12px -5px rgb(0 0 0 / .5); }
/* the floor: a charcoal band with a red carpet (gold edges) running up to the ribbon */
.go-scene-floor { position: absolute; inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 70%, var(--inv-shade)), var(--inv-deep) 70%);
    box-shadow: 0 -2px 0 color-mix(in srgb, var(--inv-deep) 50%, #fff); }
.go-scene-floor::before, .go-scene-floor span { content: ''; position: absolute; inset: 0; clip-path: polygon(40% 0, 60% 0, 92% 100%, 8% 100%); }
.go-scene-floor::before { background: var(--go-foil); }
.go-scene-floor span { display: block; inset: 0 2.5%; background: linear-gradient(180deg, color-mix(in srgb, var(--inv-ribbon) 70%, #000), var(--inv-ribbon) 45%, color-mix(in srgb, var(--inv-ribbon) 80%, #000)); }
.go-scene-balloons { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.go-scene-balloons .go-balloons { width: 100%; height: auto; max-height: 100%; filter: drop-shadow(0 12px 12px rgb(0 0 0 / .3)); }
.go-scene-balloons .go-balloons__strings path { stroke: color-mix(in srgb, #fff 70%, transparent); }
/* the ribbon halves and the bow reuse sections/_ribbon (one half or the bow each) */
.go-ribbon.go-scene-band, .go-ribbon.go-scene-bow { position: absolute; inset: 0; height: auto; }
.go-scene-band .go-ribbon__half { width: 100%; }
.go-scene-band--l .go-ribbon__half--r, .go-scene-band--r .go-ribbon__half--l, .go-scene-band .go-ribbon__bow, .go-scene-bow .go-ribbon__half { display: none; }
.go-scene-bow .go-ribbon__bow { left: 0; top: 50%; width: 100%; transform: translateY(-50%); transition: none; }
.go-scene-scissors { display: grid; place-items: center; height: 100%; color: var(--inv-accent); filter: drop-shadow(0 6px 6px rgb(0 0 0 / .4)); }
.go-scene-scissors .go-icon { width: 100%; height: 100%; transform: scaleX(-1) rotate(8deg); stroke-width: 2.1; }
.go-scene-scissors .go-icon circle { fill: color-mix(in srgb, var(--inv-deep) 55%, transparent); }
.go-scene-confetti { position: absolute; inset: 0;
    -webkit-mask: radial-gradient(closest-side at 50% 72%, #000 55%, transparent); mask: radial-gradient(closest-side at 50% 72%, #000 55%, transparent); }
.go-scene-confetti::before, .go-scene-confetti::after { content: ''; position: absolute; inset: 0; background: var(--inv-accent);
    -webkit-mask: var(--go-confetti) 0 0 / 130px 130px; mask: var(--go-confetti) 0 0 / 130px 130px; }
.go-scene-confetti::after { background: #fff; -webkit-mask-position: 60px 45px; mask-position: 60px 45px; -webkit-mask-size: 110px 110px; mask-size: 110px 110px; opacity: .9; }

/* the name card: a white shop sign with a gold inner frame under a mini striped awning */
body.go-body .inv-intro--scene .inv-scene__card {
    top: 45%; aspect-ratio: 5 / 5.2; padding: 2.9rem 1.3rem 1.6rem; overflow: visible; border-radius: 14px;
    -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff;
    box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 7.5px color-mix(in srgb, var(--inv-accent) 85%, transparent), 0 26px 44px -18px rgb(0 0 0 / .65);
}
body.go-body .inv-intro--scene .inv-scene__card::before {
    content: ''; position: absolute; left: -8px; right: -8px; top: -10px; height: 2.4rem; border-radius: 6px 6px 0 0;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 55%, #fff) 0 6px, transparent 6px),
        linear-gradient(180deg, rgb(255 255 255 / .2), transparent 35%, rgb(0 0 0 / .16) 80%),
        repeating-linear-gradient(90deg, var(--inv-primary) 0 22px, #fff 22px 44px);
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 11px) no-repeat, radial-gradient(circle at 50% 0, #000 10.5px, transparent 11px) left bottom / 22px 11px repeat-x;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - 11px) no-repeat, radial-gradient(circle at 50% 0, #000 10.5px, transparent 11px) left bottom / 22px 11px repeat-x;
    filter: drop-shadow(0 4px 3px rgb(0 0 0 / .2));
}
body.go-body .inv-scene__card .inv-intro__label { margin-bottom: .55rem; font: 800 .62rem/1.45 var(--go-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--go-ink); text-wrap: balance; }
body.go-body .inv-scene__card .inv-intro__names { font-family: var(--go-sign) !important; font-weight: 400 !important; font-size: clamp(2.2rem, 10.5vw, 3rem); line-height: .95; letter-spacing: .02em; color: var(--go-title); text-wrap: balance; }
body.go-body .inv-scene__card .inv-intro__rule { width: 4.5rem; height: 3px; margin: .8rem auto .7rem; border-radius: 99px; background: var(--go-foil); }
body.go-body .inv-scene__card .inv-intro__date { font: 700 .68rem/1.4 var(--go-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--go-muted); }
body.go-body .inv-intro--scene .inv-intro__skip { background: color-mix(in srgb, var(--inv-deep) 55%, transparent); border-color: rgb(255 255 255 / .35); color: #fff; }