/*
 * Template "Family Gathering" (Acara Kantor & Komunitas) — a cheerful outdoor family day / outbound / community
 * picnic, fun but still credible for a company. A warm white page, a fresh deep colour (grass green by
 * default), sunny yellow and orange, sky blue; four fixed team colours (merah, biru, hijau, kuning) for the
 * bunting, cards and score tiles. Signature pieces: bunting (sections/_bunting), layered hills with trees and
 * a tent (sections/_hills), a hot-air balloon (sections/_balloon) and a kite, the cover photo as a postcard
 * with a stamp, the guest's wristband, a gingham picnic mat, a team banner, a park sign, wristband tickets, a
 * scoreboard countdown, a trail map rundown, a clipboard sign-up sheet, booth awnings, a sunset closing.
 * 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 (buttons, links, labels on light grounds)   --inv-accent (the sunny colour: buttons on the
 *   cover, highlights; text on it = --inv-deep)   --inv-background (warm white)   --inv-text   --inv-deep (dark
 *   bands)   --inv-pop (the second, warmer accent)   --inv-sky   --inv-grass (the hills)   --inv-soft (tint)
 *
 * Section tones (set on each section in its partial): .fg-tone--light (warm white), --soft (fresh tint),
 * --deep (the deep colour with faint contour lines, like a park map), --accent (a sunny band with 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, bunting, hills, balloon,
 *           kite, logo) · 4 cover · 5 sections in page order · 6 forms (RSVP, wishes) · 7 shared components ·
 *           8 screen sizes · 9 motion
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Rumput Mentari" variant (the variant's colours override these) */
    --inv-primary: #1b7a3c;
    --inv-accent: #ffc629;
    --inv-background: #fffaf0;
    --inv-text: #1a2a1d;
    --inv-deep: #0d4326;
    --inv-pop: #ff7a2e;
    --inv-sky: #8fd2f2;
    --inv-grass: #6cbf4a;
    --inv-soft: #e8f4d9;
    --inv-radius: 16px;

    /* the four team colours (fixed: the teams are called merah, biru, hijau, kuning) */
    --fg-red: #e2463b;
    --fg-blue: #2b7bd6;
    --fg-green: #2d9e50;
    --fg-yellow: #ffc22e;

    --fg-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
    --fg-sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fg-col: 460px;
    --fg-title: color-mix(in srgb, var(--inv-deep) 86%, var(--inv-primary));
    --fg-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    --fg-on-deep: color-mix(in srgb, #fff 84%, var(--inv-deep));
    --fg-ring: color-mix(in srgb, var(--inv-primary) 16%, transparent);
    --fg-shadow: 0 22px 36px -26px color-mix(in srgb, var(--inv-deep) 80%, transparent);
    --fg-wood: #b5763c;
    --fg-wood-dark: #8a5426;
    /* the gingham picnic mat (two crossing stripes of the primary colour on white) */
    --fg-check: color-mix(in srgb, var(--inv-primary) 34%, transparent);
    --fg-gingham:
        linear-gradient(90deg, var(--fg-check) 50%, transparent 50%) 0 0 / 18px 18px,
        linear-gradient(var(--fg-check) 50%, transparent 50%) 0 0 / 18px 18px,
        #fff;

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

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

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

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

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

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

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

/* team colours: --team (fill), --team-ink (text on it), --team-strong (icons / text on white) */
.fg-team--merah { --team: var(--fg-red); --team-ink: #fff; --team-strong: #c7362c; }
.fg-team--biru { --team: var(--fg-blue); --team-ink: #fff; --team-strong: #1f68bd; }
.fg-team--hijau { --team: var(--fg-green); --team-ink: #fff; --team-strong: #1f8540; }
.fg-team--kuning { --team: var(--fg-yellow); --team-ink: #3a2a00; --team-strong: #a87400; }

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

/* light: warm white with a sun glow in one corner and a grass glow in the other */
.fg-tone--light {
    background:
        radial-gradient(55% 28% at 100% 0%, color-mix(in srgb, var(--inv-accent) 22%, transparent), transparent 75%),
        radial-gradient(60% 26% at 0% 100%, color-mix(in srgb, var(--inv-grass) 14%, transparent), transparent 75%),
        var(--inv-background);
}
/* soft: a fresh tint wash */
.fg-tone--soft {
    background:
        radial-gradient(70% 24% at 0% 0%, color-mix(in srgb, #fff 60%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-soft), color-mix(in srgb, var(--inv-soft) 50%, var(--inv-background)));
}
/* deep: the deep colour with a primary glow and faint contour lines like a park map */
.fg-tone--deep {
    color: #fff;
    background:
        radial-gradient(90% 40% at 0% 0%, color-mix(in srgb, var(--inv-primary) 60%, transparent), transparent 75%),
        radial-gradient(70% 30% at 100% 100%, color-mix(in srgb, var(--inv-pop) 16%, transparent), transparent 75%),
        var(--inv-deep);
}
.fg-tone--deep::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
    background:
        repeating-radial-gradient(ellipse 60% 40% at 85% 15%, transparent 0 22px, color-mix(in srgb, #fff 8%, transparent) 22px 23.5px),
        repeating-radial-gradient(ellipse 50% 36% at 10% 80%, transparent 0 26px, color-mix(in srgb, #fff 6%, transparent) 26px 27.5px);
    -webkit-mask: linear-gradient(180deg, #000, transparent 45%, transparent 55%, #000); mask: linear-gradient(180deg, #000, transparent 45%, transparent 55%, #000);
}
.fg-tone--deep a:not(.inv-button) { color: var(--inv-accent); }
.fg-tone--deep .fg-arabic { color: var(--inv-accent); }
/* accent: a sunny band with deep text */
.fg-tone--accent {
    color: var(--inv-deep);
    background:
        radial-gradient(80% 50% at 100% 0%, color-mix(in srgb, #fff 30%, transparent), transparent 75%),
        var(--inv-accent);
}

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

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

/* section heading: a rounded eyebrow pill with a pennant, a rounded title, the last part on a sunny stroke */
.fg-heading { max-width: 23rem; margin: 0 auto 2rem; }
.fg-heading--left { margin-left: 0; text-align: left; }
.fg-heading__eyebrow {
    display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .8rem; padding: .3rem .8rem .3rem .55rem; border-radius: 99px;
    font-weight: 800; font-size: .7rem; line-height: 1.2; letter-spacing: .13em; text-transform: uppercase;
    color: var(--inv-primary); background: color-mix(in srgb, var(--inv-primary) 10%, #fff);
}
.fg-heading__flag { width: .85rem; height: .95rem; flex: none; }
.fg-heading__pole { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.fg-heading__pennant { fill: var(--inv-pop); }
.fg-heading__eyebrow:only-child { margin-bottom: 0; }
.fg-heading__title {
    margin: 0; font-family: var(--fg-display); font-weight: 600; font-size: clamp(1.9rem, 8.6vw, 2.35rem);
    line-height: 1.1; letter-spacing: -.01em; color: var(--fg-title); text-wrap: balance;
}
.fg-heading__title em {
    font-style: normal; color: var(--inv-primary); padding: 0 .1em;
    background: linear-gradient(176deg, transparent 58%, color-mix(in srgb, var(--inv-accent) 75%, transparent) 58% 90%, transparent 90%);
    border-radius: .2em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.fg-tone--deep .fg-heading__eyebrow { color: var(--inv-accent); background: color-mix(in srgb, #fff 11%, transparent); }
.fg-tone--deep .fg-heading__title { color: #fff; }
.fg-tone--deep .fg-heading__title em { color: var(--inv-accent); background: none; padding: 0; }
.fg-tone--accent .fg-heading__eyebrow { color: var(--inv-deep); background: color-mix(in srgb, #fff 50%, transparent); }
.fg-tone--accent .fg-heading__pennant { fill: var(--inv-deep); }
.fg-tone--accent .fg-heading__title { color: var(--inv-deep); }
.fg-tone--accent .fg-heading__title em { color: var(--inv-deep); background: linear-gradient(176deg, transparent 58%, color-mix(in srgb, #fff 60%, transparent) 58% 90%, transparent 90%); }

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

/* bunting (sections/_bunting) */
.fg-bunting { display: block; overflow: visible; pointer-events: none; }
.fg-bunting__string { fill: none; stroke: color-mix(in srgb, var(--inv-deep) 55%, #fff); stroke-width: 1.4; }
.fg-tone--deep .fg-bunting__string, .fg-closing .fg-bunting__string { stroke: color-mix(in srgb, #fff 55%, transparent); }
.fg-bunting__flag { fill: var(--team); }

/* hills (sections/_hills): colours per place via --fg-hill-far / -mid / -front */
.fg-hills {
    --fg-hill-far: color-mix(in srgb, var(--inv-grass) 55%, #fff);
    --fg-hill-mid: var(--inv-grass);
    --fg-hill-front: color-mix(in srgb, var(--inv-grass) 52%, #0b3418);
    --fg-tree: color-mix(in srgb, var(--inv-grass) 70%, #0b3418);
    display: block; width: 100%; pointer-events: none;
}
.fg-hills__far { fill: var(--fg-hill-far); }
.fg-hills__mid { fill: var(--fg-hill-mid); }
.fg-hills__front { fill: var(--fg-hill-front); }
.fg-hills__crown { fill: var(--fg-tree); }
.fg-hills__crown--alt { fill: color-mix(in srgb, var(--fg-tree) 80%, #fff); }
.fg-hills__trunk { fill: none; stroke: var(--fg-wood-dark); stroke-width: 2.4; stroke-linecap: round; }
.fg-hills__tent-body { fill: var(--inv-pop); }
.fg-hills__tent-side { fill: color-mix(in srgb, var(--inv-pop) 70%, #5a1d00); }
.fg-hills__tent-door { fill: color-mix(in srgb, var(--inv-pop) 35%, #3a1500); }
.fg-hills__pole { fill: none; stroke: var(--fg-wood-dark); stroke-width: 1.6; stroke-linecap: round; }
.fg-hills__pennant { fill: var(--inv-accent); }

/* balloon (sections/_balloon) */
.fg-balloon { display: block; overflow: visible; pointer-events: none; }
.fg-balloon__a { fill: #fff; }
.fg-balloon__b { fill: var(--inv-pop); }
.fg-balloon__c { fill: var(--inv-accent); }
.fg-balloon__shade { fill: rgb(0 0 0 / .1); }
.fg-balloon__band { fill: var(--inv-primary); }
.fg-balloon__rope { fill: none; stroke: color-mix(in srgb, var(--inv-deep) 70%, #fff); stroke-width: 1; }
.fg-balloon__basket { fill: var(--fg-wood); }
.fg-balloon__weave { fill: none; stroke: var(--fg-wood-dark); stroke-width: .9; }

/* kite */
.fg-kite { display: block; overflow: visible; pointer-events: none; }
.fg-kite__a { fill: var(--fg-red); }
.fg-kite__b { fill: var(--fg-yellow); }
.fg-kite__spar { fill: none; stroke: rgb(0 0 0 / .25); stroke-width: 1; }
.fg-kite__tail { fill: none; stroke: color-mix(in srgb, var(--inv-deep) 60%, #fff); stroke-width: 1.1; }
.fg-kite__bow { fill: var(--fg-blue); }

/* clouds: a white pill with two puffs */
.fg-cloud { position: absolute; display: block; width: 4.6rem; height: 1.3rem; border-radius: 99px; background: #fff; opacity: .95; }
.fg-cloud::before, .fg-cloud::after { content: ''; position: absolute; bottom: 30%; border-radius: 50%; background: #fff; }
.fg-cloud::before { left: 16%; width: 1.7rem; height: 1.7rem; }
.fg-cloud::after { left: 42%; width: 2.3rem; height: 2.3rem; }

/* the organizer's logo badge (sections/_logo): white with the logo, or a team badge with the monogram */
.fg-logo {
    --logo-size: 3rem;
    position: relative; isolation: isolate; display: inline-grid; place-items: center; flex: none;
    width: var(--logo-size); height: var(--logo-size); border-radius: 50%; overflow: hidden;
    background: #fff; box-shadow: 0 0 0 calc(var(--logo-size) * .06) var(--inv-accent), 0 12px 22px -12px rgb(0 0 0 / .5);
}
.fg-logo__img { display: block; width: 74%; height: 74%; object-fit: contain; }
.fg-logo--empty {
    background:
        linear-gradient(90deg, var(--fg-red) 0 25%, var(--fg-blue) 25% 50%, var(--fg-green) 50% 75%, var(--fg-yellow) 75%) 50% 78% / 46% 7% no-repeat,
        radial-gradient(90% 90% at 30% 20%, color-mix(in srgb, var(--inv-primary) 85%, #fff), var(--inv-primary) 55%, var(--inv-deep));
}
.fg-logo__mono { margin-top: -.12em; font-family: var(--fg-display); font-weight: 700; font-size: calc(var(--logo-size) * .32); line-height: 1; letter-spacing: .01em; color: #fff; white-space: nowrap; }
.fg-logo--long .fg-logo__mono { font-size: calc(var(--logo-size) * .22); }
.fg-logo--sm { --logo-size: 2.6rem; }
.fg-logo--md { --logo-size: 3.4rem; }
.fg-logo--lg { --logo-size: 6rem; }

/* ---------- 4. cover ---------- */
.fg-cover {
    --cover-photo-h: clamp(9rem, 27svh, 15rem);
    position: fixed; inset: 0; z-index: 30; overflow-x: hidden; overflow-y: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: safe center;
    min-height: 100svh; padding: 2.4rem 1.35rem 1.5rem;
    isolation: isolate; color: var(--inv-text);
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-sky) 88%, #fff) 0%, color-mix(in srgb, var(--inv-sky) 40%, #fff) 48%, color-mix(in srgb, var(--inv-sky) 22%, var(--inv-background)) 70%);
    transition: opacity .9s ease;
}
.fg-cover__sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fg-cover__sun {
    position: absolute; top: 3.2rem; right: -2.4rem; width: 9rem; height: 9rem; border-radius: 50%;
    background: radial-gradient(circle, #fffbe6 0 20%, var(--inv-accent) 62%, color-mix(in srgb, var(--inv-accent) 60%, var(--inv-pop)));
    box-shadow: 0 0 0 1.2rem color-mix(in srgb, var(--inv-accent) 22%, transparent), 0 0 0 2.6rem color-mix(in srgb, var(--inv-accent) 10%, transparent);
}
.fg-cover__cloud--a { top: 26%; left: -1rem; }
.fg-cover__cloud--b { top: 12%; right: 22%; transform: scale(.7); opacity: .85; }
.fg-cover__balloon { position: absolute; top: 15%; left: 7%; width: 2.6rem; }
.fg-cover__bunting { position: absolute; top: -2px; left: -3%; width: 106%; }
.fg-cover__hills { position: absolute; left: 0; right: 0; bottom: 0; height: 30svh; }

.fg-cover__inner { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 390px; text-align: center; transition: transform .9s cubic-bezier(.5, 0, .3, 1); }

.fg-cover__org { display: flex; align-items: center; gap: .65rem; max-width: 100%; margin: 0 0 .9rem; padding: .3rem .9rem .3rem .3rem; border-radius: 99px; background: color-mix(in srgb, #fff 82%, transparent); box-shadow: 0 8px 20px -14px rgb(0 0 0 / .4); }
.fg-cover__org .fg-logo { box-shadow: 0 0 0 2px var(--inv-accent); }
.fg-cover__org-text { display: flex; flex-direction: column; min-width: 0; margin: 0; line-height: 1.2; text-align: left; }
.fg-cover__org-name { font-weight: 900; font-size: .84rem; color: var(--fg-title); }
.fg-cover__org-unit { margin-top: .1rem; font-weight: 800; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--inv-primary); }

.fg-cover__title {
    margin: 0; max-width: 14ch; font-family: var(--fg-display); font-weight: 700; font-size: clamp(2.45rem, 11.5vw, 3.1rem);
    line-height: 1; letter-spacing: -.015em; color: var(--fg-title); text-wrap: balance; overflow-wrap: anywhere;
    text-shadow: 0 2px 0 #fff;
}
.fg-cover__title--long { max-width: 17ch; font-size: clamp(1.85rem, 8.4vw, 2.35rem); line-height: 1.05; }
.fg-cover__meta {
    display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .15rem .5rem; margin: .8rem 0 0; padding: .38rem .9rem;
    border-radius: 99px; font-weight: 800; font-size: .78rem; line-height: 1.3; color: var(--fg-title); background: #fff;
    box-shadow: 0 8px 18px -12px rgb(0 0 0 / .35);
}
.fg-cover__meta .fg-icon { width: 1rem; height: 1rem; color: var(--inv-primary); }
.fg-cover__meta-venue { display: inline-flex; align-items: center; gap: .5rem; }
.fg-cover__meta-venue::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--inv-pop); }

/* the postcard: a white card, slightly turned, the photo fully visible; the stamp on the lower corner */
.fg-postcard {
    position: relative; z-index: 1; width: min(100%, 21.5rem); margin: 1.1rem 0 0; padding: .5rem .5rem .55rem;
    border-radius: 6px; background: #fff; transform: rotate(-2deg);
    box-shadow: 0 1px 0 rgb(0 0 0 / .05), 0 24px 36px -20px rgb(0 0 0 / .55);
}
.fg-postcard:not(:has(.fg-postcard__quote)) { padding-bottom: 1.5rem; }
.fg-postcard__window { height: var(--cover-photo-h); overflow: hidden; border-radius: 3px; background: var(--inv-soft); }
.fg-postcard__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.fg-postcard__empty {
    position: relative; height: 100%; overflow: hidden;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-sky) 90%, #fff), color-mix(in srgb, var(--inv-sky) 35%, #fff));
}
.fg-postcard__empty-sun { position: absolute; top: 14%; left: 50%; width: 4.4rem; height: 4.4rem; margin-left: -2.2rem; border-radius: 50%; background: var(--inv-accent); box-shadow: 0 0 0 .8rem color-mix(in srgb, var(--inv-accent) 25%, transparent); }
.fg-postcard__empty-mono { position: absolute; z-index: 1; top: 50%; left: 0; right: 0; font-family: var(--fg-display); font-weight: 700; font-size: calc(var(--cover-photo-h) * .26); line-height: 1; color: #fff; text-shadow: 0 3px 0 color-mix(in srgb, var(--inv-deep) 50%, transparent); transform: translateY(-50%); }
.fg-postcard__empty-hills { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; }
.fg-postcard__quote {
    margin: .5rem 4.4rem .05rem .3rem; text-align: left;
    font-family: var(--fg-display); font-weight: 500; font-size: .92rem; line-height: 1.3; color: var(--fg-title);
}
/* the stamp: a perforated sunny stamp with the date, pressed on the corner */
.fg-stamp {
    --hole: .5rem;
    position: absolute; right: -.55rem; bottom: -.75rem; display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 3.5rem; height: 4rem; transform: rotate(7deg); background: var(--inv-accent);
    /* perforated edges: a solid middle plus a grid of round holes whose centres sit on the edges */
    -webkit-mask: linear-gradient(#000, #000) center / calc(100% - var(--hole)) calc(100% - var(--hole)) no-repeat, radial-gradient(circle, transparent .15rem, #000 .16rem) calc(var(--hole) / -2) calc(var(--hole) / -2) / var(--hole) var(--hole);
    mask: linear-gradient(#000, #000) center / calc(100% - var(--hole)) calc(100% - var(--hole)) no-repeat, radial-gradient(circle, transparent .15rem, #000 .16rem) calc(var(--hole) / -2) calc(var(--hole) / -2) / var(--hole) var(--hole);
    filter: drop-shadow(0 4px 6px rgb(0 0 0 / .2));
}
.fg-stamp::before { content: ''; position: absolute; inset: .42rem; border: 1.5px solid color-mix(in srgb, var(--inv-deep) 55%, transparent); border-radius: 2px; background: var(--inv-accent); }
.fg-stamp__day, .fg-stamp__month { position: relative; color: var(--inv-deep); }
.fg-stamp__day { font-family: var(--fg-display); font-weight: 700; font-size: 1.45rem; line-height: 1; }
.fg-stamp__day--mono { font-size: .9rem; }
.fg-stamp__month { font-weight: 900; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; }
/* the postmark: two rings and wavy lines beside the stamp */
.fg-postcard__postmark {
    position: absolute; right: 2.3rem; bottom: .1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; opacity: .5; transform: rotate(-12deg);
    border: 1.5px solid color-mix(in srgb, var(--inv-deep) 60%, transparent);
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4.5px color-mix(in srgb, var(--inv-deep) 50%, transparent);
}

/* the guest's wristband */
.fg-band {
    position: relative; z-index: 1; display: flex; align-items: stretch; width: min(100%, 20.5rem); margin-top: 1.35rem; min-height: 3.5rem;
    border-radius: 12px; background: #fff; text-align: left; box-shadow: 0 18px 30px -16px rgb(0 0 0 / .55);
}
.fg-band__clasp { position: relative; flex: none; width: 2.7rem; border-radius: 12px 0 0 12px; background: linear-gradient(160deg, var(--inv-primary), var(--inv-deep)); }
.fg-band__clasp::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: .95rem; height: .95rem; margin: -.475rem 0 0 -.475rem; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff 0 18%, var(--inv-accent) 22% 60%, color-mix(in srgb, var(--inv-accent) 60%, #6b4b00));
    box-shadow: 0 1px 2px rgb(0 0 0 / .4);
}
.fg-band__text { flex: 1; min-width: 0; padding: .5rem .7rem .5rem .85rem; }
.fg-band__label { margin: 0; font-weight: 900; font-size: .6rem; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-primary); }
.fg-band__name { display: block; margin-top: .05rem; font-family: var(--fg-display); font-weight: 600; font-size: 1.15rem; line-height: 1.2; color: var(--fg-title); overflow-wrap: anywhere; }
.fg-band__tail {
    flex: none; width: 2.6rem; border-radius: 0 12px 12px 0;
    background: linear-gradient(90deg, var(--fg-red) 0 25%, var(--fg-blue) 25% 50%, var(--fg-green) 50% 75%, var(--fg-yellow) 75%);
    -webkit-mask: radial-gradient(circle at 100% 50%, transparent .55rem, #000 .58rem);
    mask: radial-gradient(circle at 100% 50%, transparent .55rem, #000 .58rem);
}

.fg-cover__open {
    position: relative; z-index: 1; width: min(100%, 20.5rem); margin-top: .85rem; min-height: 3.1rem; padding: .7rem 1.6rem; border: 0; border-radius: 99px;
    font-family: var(--fg-display); font-weight: 600; font-size: 1.08rem; letter-spacing: .01em; color: var(--inv-deep); background: var(--inv-accent);
    box-shadow: 0 5px 0 color-mix(in srgb, var(--inv-accent) 55%, #5a3d00), 0 18px 28px -14px rgb(0 0 0 / .6);
}

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

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

/* opening: the greeting as the heading over a faint photo, the quote on a note lying on a gingham mat */
.fg-opening { padding-top: 4.8rem; }
.fg-opening__kite { position: absolute; top: 1.6rem; right: 1.4rem; width: 2rem; transform: rotate(16deg); }
.fg-opening__basmalah { margin: 0 auto 1.1rem; font-size: 1.7rem; }
.fg-opening .fg-heading__title { font-size: clamp(1.75rem, 7.8vw, 2.2rem); }
.fg-opening__message { font-size: 1.02rem; color: var(--inv-text); }
.fg-section > .fg-opening__message { max-width: 33ch; }
.fg-note {
    position: relative; max-width: 21.5rem; margin: 2.6rem auto .6rem; padding: 1.5rem 1.3rem 1.35rem; text-align: left;
    border-radius: 16px; background: #fff; box-shadow: var(--fg-shadow);
}
.fg-note::before {
    content: ''; position: absolute; inset: -.85rem -.7rem -.85rem -.7rem; z-index: -1; border-radius: 18px; transform: rotate(-3deg);
    background: var(--fg-gingham); box-shadow: 0 16px 28px -22px rgb(0 0 0 / .5);
}
.fg-note__mark { display: block; width: 2.2rem; margin-bottom: .5rem; fill: var(--inv-accent); }
.fg-note blockquote { margin: 0; font-family: var(--fg-display); font-weight: 500; font-size: 1.22rem; line-height: 1.35; color: var(--fg-title); }
.fg-note figcaption {
    display: inline-block; margin-top: .9rem; padding: .25rem .7rem; border-radius: 99px;
    font-weight: 900; font-size: .66rem; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--inv-deep); background: var(--inv-pop);
}

/* organizer: a team banner hanging from a wooden pole, bunting above, hills below */
.fg-organizer { padding-top: 5rem; padding-bottom: 7.5rem; }
.fg-organizer__bunting { position: absolute; top: -2px; left: -3%; width: 106%; }
.fg-organizer .fg-heading { margin-bottom: 1.4rem; }
.fg-organizer__hills { position: absolute; left: 0; right: 0; bottom: -1px; height: 5.5rem; --fg-hill-far: color-mix(in srgb, var(--inv-deep) 72%, var(--inv-grass)); --fg-hill-mid: color-mix(in srgb, var(--inv-deep) 84%, var(--inv-grass)); --fg-hill-front: var(--inv-background); --fg-tree: color-mix(in srgb, var(--inv-deep) 60%, var(--inv-grass)); }
.fg-banner { position: relative; width: min(100%, 19.5rem); margin: 0 auto; padding-top: .45rem; }
.fg-banner__pole {
    position: absolute; z-index: 2; top: 0; left: -1.1rem; right: -1.1rem; height: .8rem; border-radius: 99px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--fg-wood) 70%, #fff), var(--fg-wood) 45%, var(--fg-wood-dark));
    box-shadow: 0 6px 10px -4px rgb(0 0 0 / .5);
}
.fg-banner__pole::before, .fg-banner__pole::after { content: ''; position: absolute; top: -.25rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6 0 20%, var(--inv-accent) 30%, color-mix(in srgb, var(--inv-accent) 60%, #6b4b00)); }
.fg-banner__pole::before { left: -.4rem; }
.fg-banner__pole::after { right: -.4rem; }
.fg-banner__cloth {
    position: relative; padding: 2.2rem 1.35rem 5.6rem; color: #fff;
    background:
        linear-gradient(90deg, transparent 0 .55rem, color-mix(in srgb, var(--inv-accent) 90%, transparent) .55rem .8rem, transparent .8rem calc(100% - .8rem), color-mix(in srgb, var(--inv-accent) 90%, transparent) calc(100% - .8rem) calc(100% - .55rem), transparent calc(100% - .55rem)),
        radial-gradient(110% 60% at 50% 0%, color-mix(in srgb, #fff 18%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 70%, var(--inv-deep)));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 2.6rem), 0 100%);
    filter: drop-shadow(0 20px 22px rgb(0 0 0 / .35));
}
.fg-banner:not(:has(.fg-banner__ribbon)) .fg-banner__cloth { padding-bottom: 3.8rem; }
.fg-banner .fg-logo--lg { margin: 0 auto 1.1rem; }
.fg-banner__label { margin: 0; font-weight: 900; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-accent); }
.fg-banner__name { margin: .35rem 0 0; font-family: var(--fg-display); font-weight: 600; font-size: 1.8rem; line-height: 1.12; color: #fff; text-wrap: balance; overflow-wrap: anywhere; }
.fg-banner__unit { display: inline-flex; align-items: center; gap: .45rem; margin: .75rem 0 0; font-size: .9rem; font-weight: 800; color: var(--fg-on-deep); }
.fg-banner__unit .fg-icon { width: 1.1rem; height: 1.1rem; color: var(--inv-accent); }
/* the tagline on a sunny ribbon across the lower part of the banner, its ends folded back */
.fg-banner__ribbon {
    position: relative; z-index: 1; margin: -5.15rem -1.4rem 2.8rem; padding: 0 1.2rem; filter: drop-shadow(0 8px 10px rgb(0 0 0 / .3));
}
.fg-banner__ribbon span {
    display: block; padding: .6rem 1.5rem; font-family: var(--fg-display); font-weight: 600; font-size: 1rem; line-height: 1.25;
    color: var(--inv-deep); background: var(--inv-accent);
    clip-path: polygon(0 0, 100% 0, calc(100% - .8rem) 50%, 100% 100%, 0 100%, .8rem 50%);
}

/* about: the theme left-aligned, the description on a speech bubble, activity cards, a park sign */
.fg-about { text-align: left; }
.fg-about .fg-heading { max-width: 24rem; }
.fg-about .fg-heading__title { font-size: clamp(1.75rem, 7.8vw, 2.2rem); }
.fg-section > .fg-about__description {
    position: relative; max-width: none; margin: 0 0 2.2rem; padding: 1rem 1.15rem; font-size: 1rem;
    border-radius: 18px 18px 18px 4px; background: #fff; box-shadow: 0 0 0 1px var(--fg-ring), var(--fg-shadow);
}
.fg-about__description::after { content: ''; position: absolute; left: 0; bottom: -.7rem; width: 1.2rem; height: .8rem; background: #fff; clip-path: polygon(0 0, 100% 0, 0 100%); }
.fg-about__subtitle {
    display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem;
    font-family: var(--fg-display); font-weight: 600; font-size: 1.15rem; color: var(--fg-title);
}
.fg-about__subtitle .fg-icon { width: 1.5rem; height: 1.5rem; color: var(--inv-pop); }
.fg-about__subtitle::after { content: ''; flex: 1; height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--fg-ring) 0 6px, transparent 6px 10px); }
.fg-about__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin: 0; padding: 0; list-style: none; }
.fg-activity {
    display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; min-width: 0; padding: .9rem .85rem 1rem;
    border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--fg-ring), 0 14px 24px -20px color-mix(in srgb, var(--inv-deep) 60%, transparent);
}
.fg-activity:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.fg-activity__icon { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 50%; color: var(--team-ink); background: var(--team); box-shadow: 0 0 0 4px color-mix(in srgb, var(--team) 18%, transparent); }
.fg-activity__icon .fg-icon { width: 1.35rem; height: 1.35rem; }
.fg-activity__text { font-weight: 800; font-size: .92rem; line-height: 1.3; color: var(--fg-title); }
.fg-activity__text::first-letter { text-transform: uppercase; }
/* the park sign: a deep board on two wooden posts */
.fg-sign { margin: 2rem auto 0; max-width: 24rem; }
.fg-sign__board {
    position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 1rem .4rem; border-radius: 16px;
    color: #fff; background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--inv-primary) 70%, transparent), transparent 70%), var(--inv-deep);
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--inv-accent) 85%, transparent), inset 0 0 0 6px var(--inv-deep), var(--fg-shadow);
}
.fg-sign__board--one { grid-template-columns: 1fr; }
.fg-sign__item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 .65rem; padding: .25rem .85rem; }
.fg-sign__item + .fg-sign__item { border-left: 2px dashed color-mix(in srgb, #fff 20%, transparent); }
.fg-sign__icon { grid-row: span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; color: var(--inv-deep); background: var(--inv-accent); }
.fg-sign__item dt { font-weight: 900; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--inv-accent); }
.fg-sign__item dd { margin: .1rem 0 0; font-family: var(--fg-display); font-weight: 600; font-size: 1rem; line-height: 1.2; overflow-wrap: anywhere; }
.fg-sign__posts { display: block; height: 1.5rem; margin: -2px 0 0; background: linear-gradient(90deg, transparent 18%, var(--fg-wood) 18% 21.5%, transparent 21.5% 78.5%, var(--fg-wood) 78.5% 82%, transparent 82%); }

/* events: wristband tickets */
.fg-ticket {
    position: relative; max-width: 24rem; margin: 0 auto; overflow: hidden; border-radius: 22px; text-align: left; background: #fff;
    box-shadow: 0 0 0 1px var(--fg-ring), 0 26px 40px -28px color-mix(in srgb, var(--inv-deep) 75%, transparent);
}
.fg-ticket + .fg-ticket { margin-top: 2rem; }
.fg-ticket__band {
    --band: var(--inv-primary); --band-ink: #fff;
    position: relative; display: flex; align-items: center; height: 2.7rem; color: var(--band-ink); background: var(--band);
    box-shadow: inset 0 -3px 0 rgb(0 0 0 / .12), inset 0 3px 0 rgb(255 255 255 / .14);
}
.fg-ticket__clasp { position: relative; flex: none; align-self: stretch; width: 2.6rem; background: rgb(0 0 0 / .16); }
.fg-ticket__clasp::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: .95rem; height: .95rem; margin: -.475rem 0 0 -.475rem; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff 0 18%, #d9dde3 24% 60%, #8d96a3); box-shadow: 0 1px 2px rgb(0 0 0 / .4);
}
.fg-ticket__no { flex: none; padding: 0 .75rem; font-family: var(--fg-display); font-weight: 600; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; }
.fg-ticket__print { flex: 1; height: 1rem; opacity: .45; background: radial-gradient(circle, currentColor 2.2px, transparent 2.8px) 0 50% / 14px 14px repeat-x; }
.fg-ticket__tail { flex: none; align-self: stretch; width: 2.4rem; margin-left: .7rem; background: rgb(255 255 255 / .2); clip-path: polygon(0 0, 100% 0, 70% 50%, 100% 100%, 0 100%); }
.fg-ticket--alt .fg-ticket__band { --band: var(--inv-pop); --band-ink: var(--inv-deep); }
.fg-ticket__media { padding: .7rem .7rem 0; }
.fg-ticket__photo { display: block; width: 100%; aspect-ratio: 16 / 9.5; object-fit: cover; object-position: center 50%; border-radius: 14px; }
.fg-ticket__body { padding: 1.05rem 1.2rem 1.25rem; }
.fg-ticket__head { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.fg-ticket__date { display: inline-flex; align-items: center; gap: .65rem; margin: 0; padding: .35rem .8rem .35rem .55rem; border-radius: 14px; background: var(--inv-soft); }
.fg-ticket__day { font-family: var(--fg-display); font-weight: 700; font-size: 2.3rem; line-height: 1; color: var(--inv-primary); }
.fg-ticket__month { display: flex; flex-direction: column; font-weight: 800; font-size: .76rem; line-height: 1.35; color: var(--fg-title); }
.fg-ticket__month span:first-child { font-weight: 900; text-transform: uppercase; letter-spacing: .1em; font-size: .66rem; color: var(--inv-primary); }
.fg-ticket__name { margin: 0 0 .95rem; font-family: var(--fg-display); font-weight: 600; font-size: 1.55rem; line-height: 1.12; color: var(--fg-title); }
.fg-ticket__rows { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.fg-ticket__rows li { display: flex; align-items: flex-start; gap: .75rem; }
.fg-ticket__rows .fg-icon { width: 2.05rem; height: 2.05rem; padding: .45rem; border-radius: 50%; color: var(--inv-primary); background: var(--inv-soft); }
.fg-ticket__rows li > span { padding-top: .3rem; }
.fg-ticket__venue { display: block; font-weight: 900; }
.fg-ticket__address { display: block; font-size: .85rem; color: var(--fg-muted); }
.fg-ticket__maps:not(:has(*)) { display: none; }
.fg-ticket__maps { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 2px dashed var(--fg-ring); }
.fg-ticket .inv-maps { margin: 0; text-align: center; }
.fg-ticket .inv-maps .inv-button { width: 100%; border-radius: 99px; font-weight: 800; color: #fff; background: var(--inv-primary); }
.fg-ticket .inv-maps__frame { height: 180px; margin-top: .8rem; border-radius: 14px; background: var(--inv-soft); }
.fg-ticket--alt .fg-ticket__day { color: color-mix(in srgb, var(--inv-pop) 55%, var(--inv-deep)); }

/* countdown: the games scoreboard; the calendar card below */
.fg-score {
    position: relative; max-width: 23rem; margin: 1rem auto 0; padding: 1.9rem .85rem 1.25rem; border-radius: 22px;
    background:
        radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, #fff 8%, transparent), transparent 70%),
        color-mix(in srgb, var(--inv-deep) 70%, #000);
    box-shadow: inset 0 0 0 4px var(--inv-accent), inset 0 0 0 7px color-mix(in srgb, var(--inv-deep) 70%, #000), inset 0 0 0 8px color-mix(in srgb, #fff 14%, transparent), 0 26px 40px -22px rgb(0 0 0 / .8);
}
.fg-score::before, .fg-score::after { content: ''; position: absolute; top: .75rem; width: .55rem; height: .55rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 20%, #b8bec8 30%, #6d7480); }
.fg-score::before { left: .8rem; }
.fg-score::after { right: .8rem; }
.fg-score__plate {
    position: absolute; top: 0; left: 50%; display: inline-flex; align-items: center; gap: .4rem; margin: 0; padding: .35rem .95rem; transform: translate(-50%, -50%);
    border-radius: 99px; white-space: nowrap; font-family: var(--fg-display); font-weight: 600; font-size: .88rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--inv-deep); background: var(--inv-accent); box-shadow: 0 8px 16px -8px rgb(0 0 0 / .6);
}
.fg-score__plate .fg-icon { width: 1.05rem; height: 1.05rem; }
.fg-score__teams { display: flex; justify-content: center; gap: .3rem; margin: 0 0 .9rem !important; max-width: none !important; }
.fg-score__teams span { padding: .12rem .5rem; border-radius: 99px; font-weight: 900; font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; color: var(--team-ink); background: var(--team); }
.fg-countdown .inv-countdown { gap: clamp(.35rem, 2vw, .6rem); }
.fg-countdown .inv-countdown__item {
    position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-end; width: clamp(4rem, 18.5vw, 4.7rem); min-width: 0; padding: 0; overflow: hidden;
    border-radius: 12px; background: #0b0f0c; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 12%, transparent);
}
.fg-countdown .inv-countdown__label { display: block; margin: 0; padding: .22rem 0; opacity: 1; font-weight: 900; font-size: .56rem; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--team-ink); background: var(--team); }
.fg-countdown .inv-countdown__item:nth-child(1) { --team: var(--fg-red); --team-ink: #fff; }
.fg-countdown .inv-countdown__item:nth-child(2) { --team: var(--fg-blue); --team-ink: #fff; }
.fg-countdown .inv-countdown__item:nth-child(3) { --team: var(--fg-green); --team-ink: #fff; }
.fg-countdown .inv-countdown__item:nth-child(4) { --team: var(--fg-yellow); --team-ink: #3a2a00; }
.fg-countdown .inv-countdown__value {
    display: block; padding: .55rem 0 .5rem; font-variant-numeric: tabular-nums; font-family: var(--fg-display); font-weight: 600; font-size: 2.05rem; line-height: 1;
    color: var(--inv-accent); text-shadow: 0 0 12px color-mix(in srgb, var(--inv-accent) 55%, transparent);
    background: repeating-linear-gradient(0deg, transparent 0 3px, rgb(255 255 255 / .03) 3px 4px);
}
.fg-countdown .inv-countdown__done { font-family: var(--fg-display); font-size: 1.25rem; font-weight: 600; color: var(--inv-accent); }
.fg-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .55rem; margin-top: 1.3rem; }
.fg-countdown .inv-countdown__actions .inv-button {
    width: min(100%, 17rem); min-height: 2.7rem; padding: .55rem 1rem; border-radius: 99px; font-size: .86rem; font-weight: 800;
    color: #fff; background: color-mix(in srgb, #fff 8%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #fff 50%, transparent);
}
.fg-countdown .inv-countdown__actions .inv-button:first-child { color: var(--inv-deep); background: var(--inv-accent); box-shadow: none; }
.fg-countdown .inv-cal {
    --inv-cal-bg: #fff; --inv-cal-text: var(--inv-text); --inv-cal-mark: var(--inv-pop);
    max-width: 19rem; margin: 2.4rem auto 0; padding-top: 1.6rem; border-radius: 18px;
    background: linear-gradient(#fff, #fff) 0 12px / 100% calc(100% - 12px) no-repeat, var(--fg-gingham);
    box-shadow: 0 22px 40px -24px rgb(0 0 0 / .6);
}
.fg-countdown .inv-cal__month { font-family: var(--fg-display); font-weight: 600; font-size: 1.35rem; color: var(--fg-title); }

/* speakers: guides with round photos inside a dashed team-colour ring */
.fg-speakers__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.fg-guide {
    display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 1.1rem .75rem 1rem; border-radius: 22px; background: #fff;
    box-shadow: 0 0 0 1px var(--fg-ring), 0 20px 32px -24px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.fg-guide__ring { position: relative; flex: none; width: 6.6rem; height: 6.6rem; margin-bottom: .8rem; padding: 5px; border-radius: 50%; border: 2.5px dashed var(--team); }
.fg-guide__media { width: 100%; height: 100%; overflow: hidden; border-radius: 50%; background: var(--inv-soft); }
.fg-guide__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.fg-guide__media--empty { display: grid; place-items: center; background: radial-gradient(90% 90% at 30% 20%, color-mix(in srgb, var(--team) 80%, #fff), var(--team) 50%, color-mix(in srgb, var(--team) 55%, var(--inv-deep))); }
.fg-guide__initials { font-family: var(--fg-display); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--team-ink); }
.fg-guide__badge { position: absolute; right: -4px; bottom: 2px; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; color: var(--team-ink); background: var(--team); box-shadow: 0 0 0 3px #fff; }
.fg-guide__badge .fg-icon { width: 1.1rem; height: 1.1rem; }
.fg-guide__text { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; width: 100%; }
.fg-guide__lead { margin: 0 0 .3rem; padding: .15rem .55rem; border-radius: 99px; font-weight: 900; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--inv-deep); background: var(--inv-accent); }
.fg-guide__name { margin: 0; font-family: var(--fg-display); font-weight: 600; font-size: 1.05rem; line-height: 1.2; color: var(--fg-title); overflow-wrap: anywhere; }
.fg-guide__role { margin: .3rem 0 0; font-size: .78rem; line-height: 1.4; color: var(--fg-muted); }
.fg-guide__topic {
    display: flex; align-items: flex-start; gap: .35rem; margin: .7rem 0 0; padding: .4rem .6rem; border-radius: 12px; text-align: left;
    font-size: .76rem; font-weight: 800; line-height: 1.35; color: var(--fg-title); background: color-mix(in srgb, var(--team) 14%, #fff);
}
.fg-guide__text > :last-child.fg-guide__topic { margin-top: auto; }
.fg-guide__role + .fg-guide__topic { margin-top: .7rem; }
.fg-guide__topic .fg-icon { width: 1rem; height: 1rem; margin-top: .05rem; color: var(--team-strong); }
.fg-guide--wide { grid-column: 1 / -1; flex-direction: row; gap: 1rem; padding: 1.1rem 1.1rem 1.1rem 1rem; text-align: left; }
.fg-guide--wide .fg-guide__ring { width: 7.8rem; height: 7.8rem; margin: 0; }
.fg-guide--wide .fg-guide__text { align-items: flex-start; justify-content: center; }
.fg-guide--wide .fg-guide__name { font-size: 1.3rem; }
.fg-guide--wide .fg-guide__initials { font-size: 2.5rem; }

/* rundown: a trail map; every stop draws its own stretch of the winding trail */
.fg-rundown { padding-bottom: 4rem; }
.fg-trail { position: relative; margin: 0; padding: 2.6rem 0 0; list-style: none; text-align: left; }
.fg-stop { position: relative; min-height: 7rem; padding: 1.75rem 0 2.1rem; }
.fg-stop--last { min-height: 0; padding-bottom: .5rem; }
.fg-stop__trail { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; }
.fg-stop__road { fill: none; stroke: color-mix(in srgb, var(--inv-accent) 35%, #f1e4c6); stroke-opacity: .9; stroke-width: 11px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fg-stop__dash { fill: none; stroke: color-mix(in srgb, var(--inv-deep) 70%, var(--fg-wood)); stroke-width: 2px; stroke-dasharray: 5 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fg-stop__pin {
    position: absolute; z-index: 1; top: 0; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; transform: translate(-50%, -50%);
    border-radius: 50%; font-family: var(--fg-display); font-weight: 700; font-size: 1.1rem; line-height: 1; color: var(--inv-deep); background: var(--inv-accent);
    box-shadow: 0 0 0 3px var(--inv-deep), 0 0 0 5px color-mix(in srgb, var(--inv-accent) 50%, transparent), 0 8px 14px -6px rgb(0 0 0 / .6);
}
.fg-stop--l .fg-stop__pin { left: 18%; }
.fg-stop--r .fg-stop__pin { left: 82%; }
.fg-stop__time {
    position: absolute; z-index: 1; top: 0; padding: .14rem .55rem; transform: translateY(-50%); border-radius: 7px;
    font-family: var(--fg-display); font-weight: 600; font-size: .86rem; line-height: 1.3; color: var(--inv-deep); background: #fff;
    box-shadow: 0 6px 12px -6px rgb(0 0 0 / .5);
}
.fg-stop--l .fg-stop__time { left: calc(18% + 1.75rem); }
.fg-stop--r .fg-stop__time { right: calc(18% + 1.75rem); }
.fg-stop__body { position: relative; }
.fg-stop--l .fg-stop__body { margin: 0 22% 0 4%; }
.fg-stop--r .fg-stop__body { margin: 0 4% 0 22%; text-align: right; }
.fg-stop__body h3 { margin: 0; font-family: var(--fg-display); font-weight: 600; font-size: 1.06rem; line-height: 1.28; color: #fff; }
.fg-stop__body p { margin: .2rem 0 0; font-size: .84rem; line-height: 1.45; color: var(--fg-on-deep); }
.fg-stop__flag {
    position: absolute; z-index: 1; top: 0; padding: .15rem .55rem; transform: translate(-50%, calc(-100% - 1.45rem)); border-radius: 5px;
    font-weight: 900; font-size: .6rem; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--inv-deep); background: var(--inv-pop);
}
.fg-stop__flag::after { content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: .3rem; margin-left: -1px; background: var(--inv-pop); }
.fg-stop--l .fg-stop__flag--start { left: 18%; }
.fg-stop--r .fg-stop__flag--start { left: 82%; }
.fg-stop__flag--finish {
    padding-left: 1.45rem; transform: translate(-50%, -50%); color: var(--inv-deep); background: #fff;
}
.fg-stop__flag--finish::before { content: ''; position: absolute; left: .3rem; top: 50%; width: .9rem; height: .9rem; margin-top: -.45rem; border-radius: 2px; background: repeating-conic-gradient(#111 0 25%, #fff 0 50%) 0 0 / .45rem .45rem; box-shadow: 0 0 0 1px #111; }
.fg-stop__flag--finish::after { content: none; }
.fg-stop--l .fg-stop__flag--finish { left: 86%; }
.fg-stop--r .fg-stop__flag--finish { left: 14%; }
.fg-stop--first.fg-stop--last .fg-stop__flag--finish { display: none; }
/* the finish flag sits on the trail at the end, so the last time chip and the flag never meet */
.fg-stop--last.fg-stop--l .fg-stop__body { margin-right: 4%; }
.fg-stop--last.fg-stop--r .fg-stop__body { margin-left: 4%; }

/* gallery: white-bordered snapshots turned a little, with team-colour washi tape */
.fg-gallery .inv-gallery { gap: 1.1rem .8rem; }
.fg-gallery .inv-gallery__item { overflow: visible; padding: 5px; border-radius: 6px; background: #fff; box-shadow: 0 16px 26px -18px color-mix(in srgb, var(--inv-deep) 80%, transparent), 0 0 0 1px rgb(0 0 0 / .04); rotate: -1.6deg; }
.fg-gallery .inv-gallery__item:nth-child(even) { rotate: 1.8deg; }
.fg-gallery .inv-gallery__item img, .fg-gallery .inv-gallery__item video { border-radius: 3px; }
.fg-gallery .inv-gallery__item:hover img { transform: none; }
.fg-gallery .inv-gallery__item::after {
    content: ''; position: absolute; z-index: 1; top: -.55rem; left: 50%; width: 3rem; height: 1.05rem; margin-left: -1.5rem; transform: rotate(-4deg);
    background: color-mix(in srgb, var(--fg-yellow) 75%, transparent); box-shadow: 0 1px 2px rgb(0 0 0 / .1);
}
.fg-gallery .inv-gallery__item:nth-child(4n+2)::after { background: color-mix(in srgb, var(--fg-blue) 60%, transparent); transform: rotate(5deg); }
.fg-gallery .inv-gallery__item:nth-child(4n+3)::after { background: color-mix(in srgb, var(--fg-red) 60%, transparent); }
.fg-gallery .inv-gallery__item:nth-child(4n)::after { background: color-mix(in srgb, var(--fg-green) 60%, transparent); transform: rotate(3deg); }
.fg-gallery .inv-gallery__item:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; rotate: -1deg; }

/* live streaming: a sky card with a broadcast mark and small hills */
.fg-stream { padding-top: 3.6rem; padding-bottom: 3.6rem; }
.fg-stream__card {
    position: relative; isolation: isolate; max-width: 24rem; margin: 0 auto; padding: 1.45rem 1.35rem 4.6rem; overflow: hidden; border-radius: 24px; text-align: left;
    color: var(--inv-text);
    background: radial-gradient(60% 40% at 90% 10%, color-mix(in srgb, var(--inv-accent) 45%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--inv-sky) 75%, #fff), color-mix(in srgb, var(--inv-sky) 25%, #fff));
    box-shadow: var(--fg-shadow);
}
.fg-stream__waves { position: absolute; top: 1rem; right: 1rem; width: 3.4rem; }
.fg-stream__waves circle { fill: var(--inv-pop); }
.fg-stream__waves path { fill: none; stroke: var(--inv-primary); stroke-width: 3; stroke-linecap: round; }
.fg-stream__live {
    display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 1rem; padding: .25rem .65rem; border-radius: 99px;
    font-weight: 900; font-size: .7rem; line-height: 1.3; letter-spacing: .18em; text-transform: uppercase; color: #fff; background: #d63a2f;
}
.fg-stream__live span { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.fg-stream__head { display: flex; align-items: center; gap: .75rem; }
.fg-stream__icon { display: grid; place-items: center; flex: none; width: 2.9rem; height: 2.9rem; border-radius: 50%; color: #fff; background: var(--inv-primary); }
.fg-stream__icon .fg-icon { width: 1.55rem; height: 1.55rem; }
.fg-stream__title { margin: 0; font-family: var(--fg-display); font-weight: 600; font-size: 1.6rem; line-height: 1.1; color: var(--fg-title); }
.fg-stream__text { margin: .85rem 0 0; font-size: .92rem; }
.fg-stream__note { margin: .45rem 0 0; font-size: .8rem; font-weight: 800; color: var(--fg-title); }
.fg-stream__button { position: relative; z-index: 1; width: 100%; margin-top: 1.15rem; min-height: 2.85rem; border-radius: 99px; font-weight: 800; color: #fff !important; background: var(--inv-deep) !important; }
.fg-stream__hills { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 4.6rem; }

/* RSVP: a clipboard with a metal clip holding the team sign-up sheet */
.fg-clipboard {
    position: relative; max-width: 24rem; margin: 1.6rem auto 0; padding: 1.7rem .65rem .65rem; border-radius: 22px;
    background: radial-gradient(100% 60% at 50% 0%, color-mix(in srgb, #fff 16%, transparent), transparent 70%), linear-gradient(170deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 65%, var(--inv-deep)));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 18%, transparent), 0 30px 50px -28px rgb(0 0 0 / .8);
}
.fg-clipboard__clip {
    position: absolute; z-index: 2; top: -1rem; left: 50%; width: 7.2rem; height: 2.5rem; margin-left: -3.6rem; border-radius: 12px 12px 7px 7px;
    background: linear-gradient(180deg, #f6f8fa, #b9c0c9 55%, #dfe3e8); box-shadow: 0 6px 10px -4px rgb(0 0 0 / .5), inset 0 -2px 0 rgb(0 0 0 / .12);
}
.fg-clipboard__clip::before { content: ''; position: absolute; top: .45rem; left: 50%; width: 1.8rem; height: .75rem; margin-left: -.9rem; border-radius: 99px; background: color-mix(in srgb, var(--inv-primary) 65%, var(--inv-deep)); box-shadow: inset 0 2px 3px rgb(0 0 0 / .4); }
.fg-sheet {
    overflow: hidden; border-radius: 12px; color: var(--inv-text);
    background: repeating-linear-gradient(180deg, transparent 0 27px, color-mix(in srgb, var(--inv-primary) 7%, transparent) 27px 28px) 0 4.8rem / 100% calc(100% - 4.8rem) no-repeat, #fff;
}
.fg-sheet__head { position: relative; padding: 1.2rem 1.15rem .95rem; text-align: left; border-bottom: 2px dashed var(--fg-ring); }
.fg-sheet__label { margin: 0; font-weight: 900; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-primary); }
.fg-sheet__event { margin: .2rem 4.2rem 0 0; font-family: var(--fg-display); font-weight: 600; font-size: 1.3rem; line-height: 1.2; color: var(--fg-title); }
.fg-sheet__teams { position: absolute; top: 1.25rem; right: 1.05rem; display: flex; gap: .28rem; margin: 0; }
.fg-sheet__teams span { width: .78rem; height: .78rem; border-radius: 50%; background: var(--team); }
.fg-sheet__body { position: relative; padding: 1.2rem 1rem 1.25rem; }
.fg-sheet__intro { margin: 0 auto 1.1rem; max-width: 32ch; font-size: .88rem; text-align: center; color: var(--fg-muted); }
.fg-sheet__sent { margin-bottom: 1rem; text-align: center; }
.fg-sheet__stamp {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 5.6rem; height: 5.6rem; margin: 0 auto .5rem; border-radius: 50%; transform: rotate(-9deg);
    color: var(--inv-primary); border: 3px solid currentColor; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4.5px currentColor;
    font-family: var(--fg-display); font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
}
.fg-sheet__stamp svg { width: 2.2rem; height: 2.2rem; margin-bottom: -.2rem; }
.fg-sheet__stamp path { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.fg-sheet__thanks { margin: 0; font-family: var(--fg-display); font-weight: 600; font-size: 1.55rem; color: var(--fg-title); }
.fg-sheet__line { margin: .1rem 0 0; font-size: .9rem; color: var(--fg-muted); }
.fg-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; text-align: center; font-size: .8rem; font-weight: 800; color: var(--inv-primary); }

/* wishes: the form on a white card lying on a gingham mat; the messages as notes */
.fg-wishes__intro { color: var(--fg-muted); }
.fg-section > .fg-wishes__intro { margin-top: -1rem; margin-bottom: 2rem; }
.fg-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.fg-wishes .inv-form { position: relative; margin: 0 .5rem; padding: 1.3rem 1.1rem; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--fg-ring), var(--fg-shadow); }
.fg-wishes .inv-form::before {
    content: ''; position: absolute; inset: -.7rem -.55rem; z-index: -1; border-radius: 22px; transform: rotate(2deg);
    background: var(--fg-gingham);
}
.fg-wishes .inv-wishes__list { margin-top: 1.8rem; }
.fg-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .55rem; border-radius: 18px; background: color-mix(in srgb, var(--inv-soft) 70%, transparent); box-shadow: inset 0 0 0 1px var(--fg-ring);
}
.fg-wishes .inv-wish { padding: .75rem .9rem; border-radius: 12px; background: #fff; text-align: left; box-shadow: 0 2px 10px rgb(0 0 0 / .05); border-top: 4px solid var(--fg-green); }
.fg-wishes .inv-wish:nth-child(4n+2) { border-top-color: var(--fg-blue); }
.fg-wishes .inv-wish:nth-child(4n+3) { border-top-color: var(--fg-yellow); }
.fg-wishes .inv-wish:nth-child(4n) { border-top-color: var(--fg-red); }
.fg-wishes .inv-wish__name { font-weight: 900; color: var(--fg-title); }
.fg-wishes .inv-wish__message { font-size: .88rem; line-height: 1.5; }
.fg-wishes .inv-wish__time { font-size: .72rem; color: var(--fg-muted); }

/* co-hosts ("Didukung oleh"): pennant flags on the sunny band, bunting above */
.fg-cohosts { padding-top: 5rem; }
.fg-cohosts__bunting { position: absolute; top: -2px; left: -3%; width: 106%; }
.fg-cohosts .fg-bunting__string { stroke: color-mix(in srgb, var(--inv-deep) 50%, transparent); }
.fg-cohosts__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 0 auto; padding: 0; max-width: 24rem; list-style: none; filter: drop-shadow(0 10px 12px color-mix(in srgb, var(--inv-deep) 30%, transparent)); }
.fg-pennant span {
    display: block; padding: .6rem 1.7rem .6rem 1.1rem; font-family: var(--fg-display); font-weight: 600; font-size: 1rem; line-height: 1.3;
    color: var(--inv-deep); background: linear-gradient(90deg, var(--team) 0 .4rem, #fff .4rem);
    clip-path: polygon(0 0, 100% 0, calc(100% - .85rem) 50%, 100% 100%, 0 100%);
}

/* vendors ("Sponsor & mitra"): booths with striped scalloped awnings; the first one big and deep */
.fg-vendors__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.fg-booth { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--fg-ring), 0 14px 24px -20px color-mix(in srgb, var(--inv-deep) 60%, transparent); }
.fg-booth--wide { grid-column: 1 / -1; }
.fg-booth__awning {
    display: block; height: 1.7rem;
    background: repeating-linear-gradient(90deg, var(--team) 0 1.2rem, #fff 1.2rem 2.4rem);
    -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - .6rem) no-repeat, radial-gradient(circle .6rem at 50% 0, #000 98%, transparent) bottom left / 1.2rem .6rem repeat-x;
    mask: linear-gradient(#000, #000) top / 100% calc(100% - .6rem) no-repeat, radial-gradient(circle .6rem at 50% 0, #000 98%, transparent) bottom left / 1.2rem .6rem repeat-x;
    filter: drop-shadow(0 2px 0 rgb(0 0 0 / .08));
}
.fg-booth__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: .7rem .9rem 1rem; }
.fg-booth__role { font-weight: 900; font-size: .6rem; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--inv-primary); }
.fg-booth__name { margin: .35rem 0 0; font-family: var(--fg-display); font-weight: 600; font-size: 1.12rem; line-height: 1.18; color: var(--fg-title); overflow-wrap: anywhere; }
.fg-booth__link { display: inline-flex; align-items: center; gap: .35rem; margin-top: .55rem; font-size: .78rem; font-weight: 800; text-decoration: none; }
.fg-booth__link .fg-icon { width: 1rem; height: 1rem; }
.fg-booth:first-child { background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--inv-primary) 70%, transparent), transparent 70%), var(--inv-deep); }
.fg-booth:first-child .fg-booth__awning { background: repeating-linear-gradient(90deg, var(--inv-accent) 0 1.2rem, #fff 1.2rem 2.4rem); height: 2rem; }
.fg-booth:first-child .fg-booth__body { padding: .9rem 1.2rem 1.25rem; }
.fg-booth:first-child .fg-booth__role { color: var(--inv-accent); }
.fg-booth:first-child .fg-booth__name { font-size: 1.55rem; color: #fff; }
.fg-booth:first-child .fg-booth__link { color: var(--inv-accent); }

/* contacts: white rounded rows, a team-colour initial badge, a WhatsApp button */
.fg-contacts__list { display: grid; gap: .7rem; max-width: 24rem; margin: 0 auto; }
.fg-contact { display: flex; align-items: center; gap: .85rem; padding: .75rem .8rem .75rem .8rem; border-radius: 18px; text-align: left; background: #fff; box-shadow: 0 0 0 1px var(--fg-ring), 0 14px 24px -20px color-mix(in srgb, var(--inv-deep) 60%, transparent); }
.fg-contact__avatar { display: grid; place-items: center; flex: none; width: 2.8rem; height: 2.8rem; border-radius: 50%; font-family: var(--fg-display); font-weight: 700; font-size: 1.2rem; color: var(--team-ink); background: var(--team); box-shadow: 0 0 0 3px color-mix(in srgb, var(--team) 20%, transparent); }
.fg-contact__text { flex: 1; min-width: 0; }
.fg-contact__text p { margin: 0; }
.fg-contact__name { font-weight: 900; line-height: 1.3; color: var(--fg-title); }
.fg-contact__role { font-size: .8rem; color: var(--fg-muted); }
.fg-contact__phone { font-size: .8rem; color: var(--fg-muted); }
.fg-contact__button { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.5rem; padding: .45rem .9rem; border-radius: 99px; font-size: .8rem; font-weight: 800; color: #fff; background: var(--inv-primary); }
.fg-contact__button .fg-icon { width: 1.05rem; height: 1.05rem; }

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

/* closing: a sunset over the hills (photo or sky gradient), the thanks, the organizer lockup */
.fg-closing { padding: 0 1.5rem 1.9rem; }
.fg-closing__scene {
    position: relative; isolation: isolate; height: min(92vw, 25rem); margin: 0 -1.5rem; overflow: hidden;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-sky) 70%, var(--inv-deep)) 0%, color-mix(in srgb, var(--inv-pop) 55%, var(--inv-accent)) 52%, var(--inv-pop) 72%, color-mix(in srgb, var(--inv-pop) 40%, var(--inv-deep)) 88%);
}
.fg-closing__photo { position: absolute; inset: -30px 0 0; z-index: -1; display: block; width: 100%; height: calc(100% + 30px); object-fit: cover; object-position: center 35%; --inv-parallax: 30px; }
.fg-closing__glow { position: absolute; inset: 0; z-index: -1; }
.fg-closing--photo .fg-closing__glow {
    background:
        linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--inv-pop) 38%, transparent) 62%, color-mix(in srgb, var(--inv-pop) 55%, var(--inv-deep)) 86%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 30%, transparent), transparent 22%);
}
.fg-closing__bunting { position: absolute; top: -2px; left: -3%; width: 106%; }
.fg-closing__sun {
    position: absolute; z-index: -1; bottom: 2rem; left: 50%; width: 7rem; height: 7rem; margin-left: -3.5rem; border-radius: 50%;
    background: radial-gradient(circle, #fff7d0 0 22%, var(--inv-accent) 60%, color-mix(in srgb, var(--inv-accent) 50%, var(--inv-pop)));
    box-shadow: 0 0 0 1.4rem color-mix(in srgb, var(--inv-accent) 22%, transparent), 0 0 70px 30px color-mix(in srgb, var(--inv-pop) 45%, transparent);
}
.fg-closing--photo .fg-closing__sun {
    bottom: 1.4rem; width: 3.8rem; height: 3.8rem; margin-left: -1.9rem; opacity: .95; mix-blend-mode: screen; box-shadow: none;
    background: radial-gradient(circle, #fff7d0 0 26%, var(--inv-accent) 50%, color-mix(in srgb, var(--inv-accent) 40%, transparent) 62%, transparent 71%);
}
.fg-closing__hills {
    position: absolute; left: 0; right: 0; bottom: -1px; height: 5.2rem;
    --fg-hill-far: color-mix(in srgb, var(--inv-deep) 62%, var(--inv-grass)); --fg-hill-mid: color-mix(in srgb, var(--inv-deep) 80%, var(--inv-grass));
    --fg-hill-front: var(--inv-deep); --fg-tree: color-mix(in srgb, var(--inv-deep) 70%, #000);
}
.fg-closing__hills .fg-hills__tent-body { fill: color-mix(in srgb, var(--inv-pop) 75%, var(--inv-deep)); }
.fg-closing__body { position: relative; padding-top: .8rem; }
.fg-closing__eyebrow { margin: 0 0 .35rem; font-weight: 900; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-accent); }
.fg-closing__title { margin: 0 0 .7rem; font-family: var(--fg-display); font-weight: 700; font-size: clamp(1.9rem, 8.5vw, 2.4rem); line-height: 1; color: #fff; }
.fg-closing__title em { font-style: normal; color: var(--inv-accent); }
.fg-closing__message { margin: 0 auto; max-width: 32ch; font-size: .93rem; line-height: 1.6; color: var(--fg-on-deep); }
.fg-closing__salam { margin: .85rem auto 0; max-width: 26ch; font-family: var(--fg-display); font-weight: 600; font-size: 1.05rem; line-height: 1.35; color: var(--inv-accent); }
.fg-closing__signature { margin: .3rem auto 0; max-width: 30ch; font-size: .9rem; font-weight: 800; color: #fff; }
.fg-closing__lockup {
    display: flex; align-items: center; justify-content: center; gap: .75rem; max-width: 22rem; margin: 1.4rem auto 0; padding-top: 1rem;
    text-align: left; border-top: 2px dashed color-mix(in srgb, #fff 18%, transparent);
}
.fg-closing__org { display: flex; flex-direction: column; min-width: 0; margin: 0; line-height: 1.3; }
.fg-closing__org-name { font-weight: 900; font-size: .95rem; color: #fff; }
.fg-closing__org-tagline { margin-top: .15rem; font-weight: 800; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--inv-accent); }

/* ---------- 6. forms (shared RSVP + wishes, restyled) ---------- */
.fg-main .inv-form { gap: 1rem; text-align: left; }
.fg-main .inv-form label, .fg-main .inv-form__choices legend { font-size: .84rem; font-weight: 800; color: var(--inv-text); }
.fg-main .inv-form input:not([type=radio]):not([type=checkbox]),
.fg-main .inv-form select,
.fg-main .inv-form textarea {
    width: 100%; min-height: 2.9rem; padding: .7rem .95rem; border: 0; border-radius: 12px;
    font: 400 .95rem/1.4 var(--fg-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;
}
.fg-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;
}
.fg-main .inv-form input:not([type=radio]):focus-visible,
.fg-main .inv-form select:focus-visible,
.fg-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);
}
.fg-main .inv-form button[type=submit] {
    width: 100%; min-height: 3rem; border-radius: 99px; font-family: var(--fg-display); font-weight: 600; font-size: 1.02rem; color: #fff; background: var(--inv-primary);
    box-shadow: 0 4px 0 color-mix(in srgb, var(--inv-primary) 60%, #000), 0 14px 22px -12px color-mix(in srgb, var(--inv-primary) 80%, transparent);
}
.fg-main .inv-form .inv-button--outline { width: 100%; min-height: 2.75rem; border-radius: 99px; }
.fg-main .inv-form__notice { text-align: center; }

/* the three answers as big tiles with icons (the radio dot is hidden but still focusable) */
.fg-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.fg-rsvp .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.fg-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: 16px; cursor: pointer; text-align: center;
    font-size: .82rem; font-weight: 800; 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;
}
.fg-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* icon: a round team-colour badge (::before) with a check, a cross or a question mark on it (::after, a mask) */
.fg-rsvp .inv-form__choices label::before {
    content: ''; width: 2.2rem; height: 2.2rem; border-radius: 50%; flex: none; background: var(--choice, var(--fg-green));
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.fg-rsvp .inv-form__choices label::after {
    content: ''; position: absolute; left: 50%; top: 1.35rem; width: 1.2rem; height: 1.2rem; margin-left: -.6rem;
    background: var(--choice-ink, #fff); pointer-events: none;
    -webkit-mask: var(--fg-choice-icon) center / contain no-repeat; mask: var(--fg-choice-icon) center / contain no-repeat;
}
.fg-rsvp .inv-form__choices label:nth-of-type(1) {
    --choice: var(--fg-green);
    --fg-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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.fg-rsvp .inv-form__choices label:nth-of-type(2) {
    --choice: var(--fg-red);
    --fg-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.8' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
}
.fg-rsvp .inv-form__choices label:nth-of-type(3) {
    --choice: var(--fg-yellow); --choice-ink: #3a2a00;
    --fg-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.8' 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");
}
.fg-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);
}
.fg-rsvp .inv-form__choices label:has(input:checked)::before { transform: scale(1.12); box-shadow: 0 0 0 3px #fff; }
.fg-rsvp .inv-form__choices label:has(input:focus-visible) { outline: 2px solid var(--inv-pop); outline-offset: 3px; }

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

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

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

/* short phones: the postcard and type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .fg-cover { --cover-photo-h: clamp(8rem, 23svh, 12rem); padding-top: 2.1rem; padding-bottom: 1.2rem; }
    .fg-cover__org { margin-bottom: .7rem; }
    .fg-cover__title { font-size: clamp(2.15rem, 10vw, 2.7rem); }
    .fg-cover__title--long { font-size: clamp(1.7rem, 7.8vw, 2.1rem); }
    .fg-cover__meta { margin-top: .6rem; }
    .fg-postcard { margin-top: .9rem; }
    .fg-postcard__quote { font-size: .86rem; }
    .fg-band { margin-top: 1.15rem; }
    .fg-cover__open { margin-top: .75rem; }
}
@media (max-height: 660px) {
    .fg-cover { --cover-photo-h: clamp(6.5rem, 19svh, 10rem); padding-top: 1.9rem; padding-bottom: 1rem; }
    .fg-cover__org { margin-bottom: .55rem; padding: .22rem .75rem .22rem .22rem; }
    .fg-cover .fg-logo--sm { --logo-size: 2.15rem; }
    .fg-cover__title { font-size: clamp(1.95rem, 9vw, 2.35rem); }
    .fg-cover__title--long { font-size: clamp(1.5rem, 7vw, 1.85rem); }
    .fg-cover__meta { margin-top: .5rem; padding: .3rem .8rem; font-size: .72rem; }
    .fg-postcard { margin-top: .75rem; padding: .4rem .4rem .45rem; }
    .fg-postcard__quote { margin-top: .4rem; font-size: .8rem; line-height: 1.25; }
    .fg-stamp { width: 3rem; height: 3.5rem; }
    .fg-stamp__day { font-size: 1.25rem; }
    .fg-band { margin-top: 1rem; min-height: 3.1rem; }
    .fg-band__text { padding: .35rem .65rem .35rem .75rem; }
    .fg-band__name { font-size: 1.05rem; }
    .fg-cover__open { margin-top: .6rem; min-height: 2.8rem; padding: .55rem 1.4rem; }
    .fg-cover__balloon { display: none; }
}
/* very short screens (in-app browsers): a smaller postcard and title so everything fits */
@media (max-height: 600px) {
    .fg-cover { --cover-photo-h: clamp(5.5rem, 17svh, 8.5rem); padding-top: 1.6rem; }
    .fg-cover__title { font-size: clamp(1.75rem, 8vw, 2.05rem); }
    .fg-cover__title--long { font-size: clamp(1.35rem, 6.4vw, 1.6rem); }
    .fg-postcard__quote { font-size: .76rem; }
}

/* wide screens: the phone-width column on a deep backdrop with soft hills */
@media (min-width: 560px) {
    body.fg-body {
        background:
            radial-gradient(70vw 60vh at 50% 0%, color-mix(in srgb, var(--inv-primary) 50%, transparent), transparent 70%),
            var(--inv-deep);
        background-attachment: fixed;
    }
    .fg-main { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
}

/* ---------- 9. motion ---------- */
@keyframes fg-drop { 0% { opacity: 0; transform: translateY(-46px) rotate(-9deg) scale(1.04); } 60% { opacity: 1; transform: translateY(5px) rotate(-1deg) scale(1); } 80% { transform: translateY(-2px) rotate(-2.4deg); } 100% { opacity: 1; transform: rotate(-2deg); } }
@keyframes fg-press { 0% { opacity: 0; transform: rotate(-6deg) scale(1.7); } 65% { opacity: 1; transform: rotate(8deg) scale(.92); } 100% { opacity: 1; transform: rotate(7deg) scale(1); } }
@keyframes fg-flag { 0% { opacity: 0; transform: rotate(-38deg); } 60% { opacity: 1; transform: rotate(10deg); } 82% { transform: rotate(-4deg); } 100% { opacity: 1; transform: none; } }
@keyframes fg-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes fg-bob { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@keyframes fg-sway { from { transform: rotate(10deg); } to { transform: rotate(18deg); } }
@keyframes fg-hills-in { from { transform: translateY(26px); } to { transform: none; } }
@keyframes fg-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes fg-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* cover (≤ 2.5 s, once): the hills settle (0–.9 s), the flags swing in one after another (.3–1.5 s), the
   postcard drops onto the hills and settles (.45–1.55 s), the stamp is pressed on (1.35–1.85 s), the balloon
   rises (0–1.4 s, then bobs very slowly); the text follows through its inv-enter delays (up to 1.3 s) */
html.inv-anim .fg-cover__hills { animation: fg-hills-in .9s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .fg-cover__bunting .fg-bunting__flag { animation: fg-flag .7s cubic-bezier(.3, .7, .3, 1) both; animation-delay: calc(.25s + var(--i) * .07s); }
html.inv-anim .fg-postcard { animation: fg-drop 1.1s cubic-bezier(.3, .7, .3, 1) .45s both; }
html.inv-anim .fg-stamp { animation: fg-press .5s cubic-bezier(.3, .7, .3, 1) 1.35s both; }
html.inv-anim .fg-cover__balloon { animation: fg-rise 1.4s cubic-bezier(.2, .7, .2, 1) both, fg-bob 5s ease-in-out 1.4s infinite alternate; }
html.inv-anim .fg-opening__kite { animation: fg-sway 4s ease-in-out infinite alternate; transform-origin: 50% 20%; }

/* section bunting swings in once when revealed */
html.inv-anim .fg-main .fg-bunting__flag { opacity: 0; }
html.inv-anim :is(.is-revealed .fg-bunting, .fg-bunting.is-revealed) .fg-bunting__flag { animation: fg-flag .7s cubic-bezier(.3, .7, .3, 1) both; animation-delay: calc(var(--i) * .06s); }

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

/* the registration stamp is pressed on and its check drawn */
html.inv-anim .fg-sheet__sent .fg-sheet__stamp { animation: fg-press .6s cubic-bezier(.3, .7, .3, 1) both; }
html.inv-anim .fg-sheet__sent .fg-sheet__stamp path { animation: fg-draw .45s ease-out .35s both; }

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

/* ---------- 10. intro scene "Pagi Ceria di Bukit" (scene.json + sections/_scene; the intro lives in <body>) ---------- */
.fg-scene-sky { position: absolute; inset: 0; background:
    radial-gradient(60% 34% at 88% 24%, color-mix(in srgb, var(--inv-accent) 30%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--inv-sky) 92%, #fff) 0%, color-mix(in srgb, var(--inv-sky) 42%, #fff) 50%, color-mix(in srgb, var(--inv-sky) 20%, var(--inv-background)) 78%); }
.fg-scene-sun { position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
    background: radial-gradient(circle, #fffbe6 0 20%, var(--inv-accent) 62%, color-mix(in srgb, var(--inv-accent) 60%, var(--inv-pop)));
    box-shadow: 0 0 0 1.4rem color-mix(in srgb, var(--inv-accent) 22%, transparent), 0 0 0 3rem color-mix(in srgb, var(--inv-accent) 10%, transparent); }
.fg-scene-cloud { position: absolute; inset: 0; }
.fg-scene-cloud .fg-cloud { left: 0; bottom: 0; width: 100%; height: 55%; }
.fg-scene-cloud .fg-cloud::before { left: 16%; width: 36%; height: auto; aspect-ratio: 1; }
.fg-scene-cloud .fg-cloud::after { left: 42%; width: 48%; height: auto; aspect-ratio: 1; }
.fg-scene-hills, .fg-scene-bunting, .fg-scene-balloon, .fg-scene-kite { position: absolute; inset: 0; }
.fg-scene-hills .fg-hills { width: 100%; height: 100%; }
.fg-scene-hills--far .fg-hills { --fg-hill-far: color-mix(in srgb, var(--inv-grass) 22%, var(--inv-sky)); --fg-hill-mid: color-mix(in srgb, var(--inv-grass) 34%, var(--inv-sky));
    --fg-hill-front: color-mix(in srgb, var(--inv-grass) 46%, var(--inv-sky)); --fg-tree: color-mix(in srgb, var(--inv-grass) 50%, var(--inv-sky)); }
.fg-scene-bunting .fg-bunting { width: 100%; height: 100%; filter: drop-shadow(0 3px 3px rgb(0 0 0 / .12)); }
.fg-scene-balloon .fg-balloon, .fg-scene-kite .fg-kite { width: auto; height: 100%; margin: 0 auto; filter: drop-shadow(0 8px 8px rgb(0 0 0 / .15)); }
html.inv-anim .fg-scene-bunting .fg-bunting__flag { animation: fg-flag .7s cubic-bezier(.3, .7, .3, 1) both; animation-delay: calc(.75s + var(--i) * .07s); }

/* the cover photo as the postcard that drops onto the hills, its stamp pressed on after it lands */
.fg-scene-postcard { position: absolute; inset: 0; padding: 3.2%; border-radius: 6px; background: #fff;
    box-shadow: 0 1px 0 rgb(0 0 0 / .05), 0 22px 30px -18px rgb(0 0 0 / .55); }
.fg-scene-postcard__window { position: relative; isolation: isolate; display: block; height: 100%; overflow: hidden; border-radius: 3px; background: var(--inv-soft); }
.fg-scene-postcard__window i { position: absolute; inset: 0; z-index: 2; background: center 40% / cover no-repeat; }
.fg-scene-postcard__empty { position: absolute; inset: 0; display: grid; place-items: center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-sky) 90%, #fff), color-mix(in srgb, var(--inv-sky) 35%, #fff)); }
.fg-scene-postcard__empty .fg-postcard__empty-sun { top: 8%; left: 18%; margin: 0; width: 2.6rem; height: 2.6rem; }
.fg-scene-postcard__empty .fg-postcard__empty-hills { height: 55%; }
.fg-scene-postcard__empty .fg-logo { z-index: 1; margin-bottom: 8%; }
.fg-scene-postcard .fg-stamp { right: -.6rem; bottom: -.8rem; width: 3rem; height: 3.5rem; }
.fg-scene-postcard .fg-stamp__day { font-size: 1.25rem; }
html.inv-anim .fg-scene-postcard .fg-stamp { animation: fg-press .5s cubic-bezier(.3, .7, .3, 1) 3.55s both; }

/* the name card: the address side of a postcard (white, slightly turned) with a sun stamp and the team stripe */
body.fg-body .inv-intro--scene .inv-scene__card {
    top: 43.5%; aspect-ratio: auto; min-height: 15.5rem; padding: 3.1rem 1.5rem 2.2rem; border-radius: 8px; color: var(--inv-text);
    background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask: none; mask: none; rotate: 1.5deg;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-deep) 8%, transparent), 0 26px 40px -22px color-mix(in srgb, var(--inv-deep) 80%, transparent);
}
body.fg-body .inv-intro--scene .inv-scene__card::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; border-radius: 0 0 8px 8px;
    background: linear-gradient(90deg, var(--fg-red) 0 25%, var(--fg-blue) 25% 50%, var(--fg-green) 50% 75%, var(--fg-yellow) 75%);
}
body.fg-body .inv-intro--scene .inv-scene__card::after {
    --hole: .42rem;
    content: ''; position: absolute; top: .7rem; right: .7rem; width: 2.3rem; height: 2.7rem; rotate: 6deg;
    background: radial-gradient(circle at 50% 46%, #fffbe6 0 14%, var(--inv-pop) 15% 30%, transparent 31%), var(--inv-accent);
    -webkit-mask: linear-gradient(#000, #000) center / calc(100% - var(--hole)) calc(100% - var(--hole)) no-repeat, radial-gradient(circle, transparent .12rem, #000 .13rem) calc(var(--hole) / -2) calc(var(--hole) / -2) / var(--hole) var(--hole);
    mask: linear-gradient(#000, #000) center / calc(100% - var(--hole)) calc(100% - var(--hole)) no-repeat, radial-gradient(circle, transparent .12rem, #000 .13rem) calc(var(--hole) / -2) calc(var(--hole) / -2) / var(--hole) var(--hole);
}
body.fg-body .inv-scene__card .inv-intro__label { margin-bottom: .55rem; font: 900 .64rem/1.4 var(--fg-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--inv-primary); }
body.fg-body .inv-scene__card .inv-intro__names { font-family: var(--fg-display) !important; font-weight: 700; font-size: clamp(1.7rem, 7.8vw, 2.3rem); line-height: 1.08; color: var(--fg-title); text-wrap: balance; }
body.fg-body .inv-scene__card .inv-intro__rule { width: 5.5rem; height: 3px; margin-block: .8rem .7rem; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--inv-pop) 0 8px, transparent 8px 13px); }
body.fg-body .inv-scene__card .inv-intro__date { font: 800 .74rem/1.4 var(--fg-sans); letter-spacing: .06em; color: var(--fg-muted); }
body.fg-body .inv-intro--scene .inv-intro__skip { background: color-mix(in srgb, #fff 80%, transparent); border-color: color-mix(in srgb, var(--inv-deep) 25%, transparent); color: var(--inv-deep); }
.fg-scene-hills--far .fg-hills__trees { display: none; }