/*
 * Template "Balap Juara" (Ulang Tahun, boys): race day. Asphalt bands with kerbs, chequered finish flags,
 * white lane lines, an original race car with the age as its number, start lights, pit boards, a podium.
 * Mobile-first, one centered column (~460px) on an asphalt backdrop on wide screens.
 *
 * Colors come from the chosen color variant (template.json → <x-inv.head>):
 *   --inv-primary (team color: red / blue / green / orange), --inv-accent (highlight on asphalt),
 *   --inv-asphalt (the dark track), --inv-background (pit-lane white), --inv-text
 * The accent is used on dark surfaces and for decoration only; small text on light uses the primary/text.
 *
 * Motion only runs with html.inv-anim (set by <x-inv.head> unless the guest prefers reduced motion);
 * without it every drawing is shown finished (start lights green, car parked at the finish).
 *
 * Contents: 1 base · 2 cover · 3 shared pieces (heading, car, flag, helmet, trophy, bands, chips)
 *           · 4 sections in page order · 5 forms (RSVP pass, wishes) · 6 shared components · 7 screen sizes · 8 motion
 */

/* ---------- 1. base ---------- */
:root {
    --balap-juara-display: 'Racing Sans One', 'Barlow Condensed', system-ui, sans-serif;
    --balap-juara-sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --balap-juara-cond: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
    --balap-juara-asphalt: var(--inv-asphalt, #1b1b1f);
    --balap-juara-asphalt-2: color-mix(in srgb, var(--balap-juara-asphalt) 86%, #fff);
    --balap-juara-paper: color-mix(in srgb, #fff 88%, var(--inv-background));
    --balap-juara-tint: color-mix(in srgb, var(--inv-primary) 7%, var(--inv-background));
    --balap-juara-line: color-mix(in srgb, var(--inv-text) 12%, transparent);
    --balap-juara-muted: color-mix(in srgb, var(--inv-text) 74%, var(--inv-background));
    --balap-juara-on-dark: rgb(255 255 255 / .82);
    --balap-juara-gold: #f2b632;
    --balap-juara-shadow: 0 18px 38px -24px color-mix(in srgb, var(--balap-juara-asphalt) 75%, transparent);
    --balap-juara-shadow-sm: 0 8px 18px -12px color-mix(in srgb, var(--balap-juara-asphalt) 60%, transparent);
    /* the chequered pattern: 2×2 squares of --sq */
    --balap-juara-chequer: repeating-conic-gradient(var(--balap-juara-asphalt) 0 25%, #fff 0 50%);
    /* a kerb: team color and white blocks */
    --balap-juara-kerb: repeating-linear-gradient(90deg, var(--inv-primary) 0 22px, #fff 22px 44px);
    /* colors of the shared components */
    --inv-ambient-1: var(--inv-primary);
    --inv-ambient-2: var(--inv-accent);
    --inv-nav-bg: color-mix(in srgb, var(--balap-juara-asphalt) 92%, transparent);
    --inv-nav-text: rgb(255 255 255 / .78);
    --inv-nav-active: var(--inv-primary);
    --inv-radius: 14px;
    --inv-font-display: var(--balap-juara-display);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    /* asphalt below the page: the overscroll and the music spacer match the closing band */
    background: var(--balap-juara-asphalt);
    color: var(--inv-text);
    font-family: var(--balap-juara-sans);
    font-size: 15.5px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

.balap-juara-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 */
.balap-juara-main { max-width: 460px; margin: 0 auto; padding: 0 1.25rem; background: var(--inv-background); overflow-x: clip; }
.balap-juara-branding.inv-branding { max-width: 460px; margin: 0 auto; background: var(--balap-juara-asphalt); color: rgb(255 255 255 / .8); opacity: 1; }
/* the page end: the last line sits ~125px above the end, clear of the bottom menu, the music button and
   the "Gulir" pill. The music player adds its own 72px spacer (.inv-music__space) when music or auto scroll is on. */
body.balap-juara-body .balap-juara-branding.inv-branding { padding-top: .25rem; padding-bottom: 3.4rem; }
body.balap-juara-body:not(:has(.inv-music__space)) .balap-juara-branding.inv-branding { padding-bottom: 7.9rem; }

/* every section: the same rhythm, content centered */
.balap-juara-section { position: relative; padding: 3.4rem 0; text-align: center; }
.balap-juara-section > p { margin: 0 auto 1rem; max-width: 34ch; }

/* an asphalt band across the column, with a kerb on the top and the bottom edge */
.balap-juara-band {
    margin-inline: -1.25rem; padding-inline: 1.25rem; color: #fff;
    background:
        radial-gradient(circle, rgb(255 255 255 / .05) 1px, transparent 1.5px) 0 0 / 9px 9px,
        radial-gradient(circle, rgb(0 0 0 / .25) 1px, transparent 1.5px) 4px 5px / 11px 11px,
        radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--inv-primary) 22%, transparent), transparent 70%),
        var(--balap-juara-asphalt);
}
.balap-juara-band::before, .balap-juara-band::after {
    content: ''; position: absolute; left: 0; right: 0; height: 9px; background: var(--balap-juara-kerb);
}
.balap-juara-band::before { top: 0; }
.balap-juara-band::after { bottom: 0; }

.balap-juara-amp { font-family: var(--balap-juara-display); color: var(--inv-primary); }

/* a small link chip with an icon (Instagram, TikTok) */
.balap-juara-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1.1rem 0 0 !important; max-width: none !important; }
.balap-juara-chip {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .35rem 1rem;
    border-radius: 10px; font-size: .86rem; font-weight: 700; text-decoration: none; color: var(--inv-text);
    background: #fff; box-shadow: inset 0 0 0 1.5px var(--balap-juara-line);
}
.balap-juara-chip .balap-juara-icon { width: 1.1rem; height: 1.1rem; color: var(--inv-primary); }

/* the painted start-grid slots, used as a divider */
.balap-juara-grid-line {
    display: flex; justify-content: center; align-items: center; gap: .55rem; width: 12rem; height: 1.15rem; margin: 1.8rem auto 0; border-radius: 999px;
    background: var(--balap-juara-asphalt); box-shadow: 0 -4px 0 -1px var(--inv-primary), 0 4px 0 -1px var(--inv-primary);
}
.balap-juara-grid-line i { width: 1.6rem; height: 3px; border-radius: 2px; background: #fff; }

/* ---------- 2. cover ---------- */
.balap-juara-cover {
    --balap-juara-art: min(29svh, 60vw);
    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.7rem 1.25rem 2.4rem;
    isolation: isolate; text-align: center; color: #fff;
    background:
        radial-gradient(circle, rgb(255 255 255 / .05) 1px, transparent 1.5px) 0 0 / 9px 9px,
        radial-gradient(75% 42% at 50% 34%, color-mix(in srgb, var(--inv-primary) 34%, transparent), transparent 72%),
        linear-gradient(to bottom, color-mix(in srgb, var(--balap-juara-asphalt) 80%, #000), var(--balap-juara-asphalt) 40%);
}
/* the chequered band along the top */
.balap-juara-cover__band { position: absolute; left: -2%; right: -2%; top: 0; height: 16px; z-index: 1; }
.balap-juara-cover__band span {
    display: block; height: 100%; background: var(--balap-juara-chequer) 0 0 / 16px 16px;
    box-shadow: 0 4px 12px rgb(0 0 0 / .35); transform-origin: 0 0;
}
/* the track into the distance: a dashed centre line and two kerbs, tilted back in 3D */
.balap-juara-cover__lanes {
    position: absolute; left: 50%; bottom: -4svh; z-index: -1; width: 150vw; max-width: 760px; height: 46svh;
    translate: -50% 0; transform: perspective(240px) rotateX(58deg); transform-origin: 50% 100%; opacity: .62;
    background:
        repeating-linear-gradient(to bottom, rgb(255 255 255 / .9) 0 22px, transparent 22px 44px) 50% 0 / 6px 100% no-repeat,
        repeating-linear-gradient(to bottom, var(--inv-primary) 0 22px, #fff 22px 44px) 14% 0 / 16px 100% no-repeat,
        repeating-linear-gradient(to bottom, var(--inv-primary) 0 22px, #fff 22px 44px) 86% 0 / 16px 100% no-repeat;
    -webkit-mask: linear-gradient(to bottom, transparent, #000 45%);
    mask: linear-gradient(to bottom, transparent, #000 45%);
}
.balap-juara-cover__inner { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; }

.balap-juara-cover__title {
    display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 1rem; padding: .32rem .95rem; max-width: 100%;
    font-family: var(--balap-juara-cond); font-size: .82rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3;
    color: var(--balap-juara-asphalt); background: var(--inv-accent); clip-path: polygon(.6rem 0, 100% 0, calc(100% - .6rem) 100%, 0 100%);
    padding-inline: 1.2rem;
}
.balap-juara-cover__title .balap-juara-icon { width: 1rem; height: 1rem; }

/* the art: the photo in a tilted pit-board frame with the car parked across its bottom edge */
.balap-juara-cover__art { position: relative; display: flex; flex-direction: column; align-items: center; }
.balap-juara-cover--photo .balap-juara-cover__art { padding-bottom: calc(var(--balap-juara-art) * .3); }
.balap-juara-cover__frame {
    width: var(--balap-juara-art); aspect-ratio: 1 / 1.04; border-radius: 22px; overflow: hidden; rotate: -3deg;
    box-shadow: 0 0 0 5px #fff, 0 0 0 10px var(--inv-primary), 0 26px 40px -18px rgb(0 0 0 / .8);
    transition: scale .5s ease .2s, translate .5s ease .2s;
}
.balap-juara-cover__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.balap-juara-cover__car { position: absolute; left: 50%; bottom: 0; width: calc(var(--balap-juara-art) * 1.18); margin-left: calc(var(--balap-juara-art) * -.62); }
/* no photo: the car alone is the centerpiece, on a chequered start line between two flags */
.balap-juara-cover--plain .balap-juara-cover__art { padding-top: calc(var(--balap-juara-art) * .2); }
.balap-juara-cover--plain .balap-juara-cover__car { position: relative; left: auto; margin: 0; width: min(calc(var(--balap-juara-art) * 1.45), 88vw); }
.balap-juara-cover__grid { position: absolute; left: 0; right: 0; bottom: calc(var(--balap-juara-art) * .02); height: 12px; background: var(--balap-juara-chequer) 0 0 / 12px 12px; opacity: .9; }
.balap-juara-cover__mini-flag { position: absolute; bottom: 12px; width: calc(var(--balap-juara-art) * .3); }
.balap-juara-cover__mini-flag:first-child { left: 0; rotate: -10deg; }
.balap-juara-cover__mini-flag.balap-juara-flag--mirror { right: 0; rotate: 10deg; }

.balap-juara-cover__name {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .1rem .6rem; margin: .7rem 0 0;
    font-family: var(--balap-juara-display); font-weight: 400; font-size: 3.5rem; line-height: 1; letter-spacing: .02em;
    text-transform: uppercase; color: #fff; text-shadow: 0 6px 24px rgb(0 0 0 / .5); overflow-wrap: anywhere;
}
.balap-juara-cover__number {
    display: inline-block; padding: .08em .3em .02em; font-size: .62em; color: #fff; background: var(--inv-primary);
    transform: skewX(-10deg); box-shadow: 4px 4px 0 var(--inv-accent); text-shadow: none;
}
.balap-juara-cover__date {
    display: inline-flex; align-items: center; gap: .45rem; margin: .65rem 0 0;
    font-family: var(--balap-juara-cond); font-size: 1.02rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.balap-juara-cover__date .balap-juara-icon { width: 1.1rem; height: 1.1rem; color: var(--inv-accent); }
.balap-juara-cover__quote { max-width: 31ch; margin: .45rem auto 0; font-size: .92rem; line-height: 1.45; color: var(--balap-juara-on-dark); }
/* the guest on a pass strip with a chequered edge */
.balap-juara-cover__guest {
    position: relative; width: min(100%, 18rem); margin: 1rem 0 0; padding: .5rem 1rem .55rem 1.6rem; border-radius: 12px; overflow: hidden;
    background: rgb(255 255 255 / .09); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16);
}
.balap-juara-cover__guest::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: .7rem; background: var(--balap-juara-chequer) 0 0 / 7px 7px; }
.balap-juara-cover__guest p { margin: 0; font-family: var(--balap-juara-cond); font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-accent); }
.balap-juara-cover__guest-name { display: block; font-size: 1.22rem; font-weight: 700; line-height: 1.25; color: #fff; overflow-wrap: anywhere; }
.balap-juara-cover__open {
    margin-top: 1.1rem; min-height: 3.1rem; padding: .7rem 1.9rem; border-radius: 12px;
    font-family: var(--balap-juara-cond); font-size: 1.12rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    box-shadow: 0 0 0 3px color-mix(in srgb, #fff 18%, transparent), 0 16px 28px -14px color-mix(in srgb, var(--inv-primary) 90%, transparent);
}
.balap-juara-cover__open .balap-juara-icon { width: 1.2rem; height: 1.2rem; }

/* opening (never blocks, ~1s): the car zooms off, the band waves, the text slides away, the cover fades */
.balap-juara-cover--leave { transition: opacity .5s ease .5s; }
.balap-juara-cover--leave .balap-juara-cover__car { transition: translate .75s cubic-bezier(.55, 0, .85, .35) .1s; }
.balap-juara-cover--leave .balap-juara-cover__inner > :not(.balap-juara-cover__art) { transition: translate .6s cubic-bezier(.5, 0, .75, 0) .25s; }
.balap-juara-cover--gone { opacity: 0; }
.balap-juara-cover--gone .balap-juara-cover__car { translate: 150vw 0; }
.balap-juara-cover--gone .balap-juara-cover__frame { scale: .9; translate: 0 -1rem; }
.balap-juara-cover--gone .balap-juara-cover__inner > :not(.balap-juara-cover__art) { translate: 0 2.5rem; }
.balap-juara-cover--leave .balap-juara-car__streaks { opacity: 1; }

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

/* section heading: slanted eyebrow tag, racing title, chequered accent */
.balap-juara-heading { margin: 0 0 1.9rem; }
.balap-juara-heading__eyebrow {
    display: inline-block; margin: 0 0 .55rem; padding: .22rem .85rem; transform: skewX(-12deg);
    background: var(--inv-primary); color: #fff;
}
.balap-juara-heading__eyebrow span { display: block; transform: skewX(12deg); font-family: var(--balap-juara-cond); font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.35; }
.balap-juara-heading__title { margin: 0; font-family: var(--balap-juara-display); font-size: 2.25rem; font-weight: 400; line-height: 1.08; color: var(--inv-text); }
.balap-juara-heading__accent { display: block; width: 9.4rem; height: 1rem; margin: .55rem auto 0; overflow: visible; }
.balap-juara-heading__speed path { fill: var(--inv-primary); }
.balap-juara-heading__speed .balap-juara-heading__speed-2 { fill: color-mix(in srgb, var(--inv-primary) 45%, transparent); }
.balap-juara-heading__chequer rect { fill: #fff; stroke: none; }
.balap-juara-heading__chequer rect.is-dark { fill: var(--balap-juara-asphalt); }
.balap-juara-heading__chequer { filter: drop-shadow(0 0 .6px color-mix(in srgb, var(--inv-text) 50%, transparent)); }
.balap-juara-heading__speed { transition: transform .8s cubic-bezier(.2, .8, .2, 1) .25s, opacity .5s ease .25s; }
html.inv-anim .balap-juara-heading:not(.is-revealed) .balap-juara-heading__speed--l { transform: translateX(-40px); opacity: 0; }
html.inv-anim .balap-juara-heading:not(.is-revealed) .balap-juara-heading__speed--r { transform: translateX(40px); opacity: 0; }
/* on an asphalt band */
.balap-juara-heading--dark .balap-juara-heading__title { color: #fff; }
.balap-juara-heading--dark .balap-juara-heading__eyebrow { background: var(--inv-accent); color: var(--balap-juara-asphalt); }
.balap-juara-heading--dark .balap-juara-heading__speed .balap-juara-heading__speed-2 { fill: var(--inv-accent); }
.balap-juara-heading--dark .balap-juara-heading__chequer { filter: none; }

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

/* the race car */
.balap-juara-car { display: block; overflow: visible; height: auto; }
.balap-juara-car__body { fill: var(--inv-primary); }
.balap-juara-car__wing, .balap-juara-car__nose { fill: color-mix(in srgb, var(--inv-primary) 60%, #000); }
.balap-juara-car__wing-post { fill: #26262b; }
.balap-juara-car__stripe { fill: #fff; }
.balap-juara-car__stripe--thin { fill: var(--inv-accent); }
.balap-juara-car__cockpit { fill: #1a1a1f; }
.balap-juara-car__helmet { fill: var(--inv-accent); }
.balap-juara-car__visor { fill: #22252e; }
.balap-juara-car__roundel { fill: #fff; stroke: var(--balap-juara-asphalt); stroke-width: 2; }
.balap-juara-car__number { font-family: var(--balap-juara-display); font-size: 21px; fill: var(--balap-juara-asphalt); }
.balap-juara-car__tyre { fill: #141417; stroke: #2c2c33; stroke-width: 2; }
.balap-juara-car__rim { fill: #c9ccd3; }
.balap-juara-car__spokes { stroke: #6b6f78; stroke-width: 2.4; stroke-linecap: round; fill: none; }
.balap-juara-car__shadow { fill: rgb(0 0 0 / .35); }
.balap-juara-car__streaks { opacity: 0; transition: opacity .2s ease; }
.balap-juara-car__streaks path { stroke: rgb(255 255 255 / .75); stroke-width: 3; stroke-linecap: round; }

/* chequered flag */
.balap-juara-flag { display: block; overflow: visible; height: auto; }
.balap-juara-flag--mirror { scale: -1 1; }
.balap-juara-flag__pole { stroke: #c9ccd3; stroke-width: 3; stroke-linecap: round; }
.balap-juara-flag__knob { fill: var(--balap-juara-gold); }
.balap-juara-flag__base { fill: #fff; stroke: #18181c; stroke-width: 1.5; }
.balap-juara-flag__square { fill: #18181c; }
.balap-juara-flag__cloth { transform-box: view-box; transform-origin: 9px 24px; }

/* helmet (the stand-in for a missing photo) */
.balap-juara-helmet { display: block; overflow: visible; }
.balap-juara-helmet__shell { fill: var(--inv-primary); stroke: rgb(0 0 0 / .25); stroke-width: 2; }
.balap-juara-helmet__stripe { fill: #fff; }
.balap-juara-helmet__visor { fill: #1f2229; }
.balap-juara-helmet__shine { stroke: rgb(255 255 255 / .45); stroke-width: 4; stroke-linecap: round; }
.balap-juara-helmet__chin { stroke: rgb(0 0 0 / .3); stroke-width: 4; stroke-linecap: round; }
.balap-juara-helmet__roundel { fill: #fff; stroke: var(--balap-juara-asphalt); stroke-width: 2.5; }
.balap-juara-helmet__initial { font-family: var(--balap-juara-display); font-size: 21px; fill: var(--balap-juara-asphalt); }
.balap-juara-helmet__shadow { fill: rgb(0 0 0 / .25); }

/* trophy (always gold, whatever the variant) */
.balap-juara-trophy { display: block; overflow: visible; }
.balap-juara-trophy__cup { fill: var(--balap-juara-gold); }
.balap-juara-trophy__handle { fill: none; stroke: #d99a1e; stroke-width: 5; stroke-linecap: round; }
.balap-juara-trophy__shine { fill: none; stroke: rgb(255 255 255 / .6); stroke-width: 3; stroke-linecap: round; }
.balap-juara-trophy__star { fill: #fff3cf; }
.balap-juara-trophy__stem, .balap-juara-trophy__base { fill: #d99a1e; }
.balap-juara-trophy__plinth { fill: #2a2a30; }

/* ---------- 4. sections ---------- */

/* opening: the greeting on a slanted race board */
.balap-juara-opening { padding-top: 3.6rem; }
.balap-juara-opening__greeting {
    position: relative; display: inline-block !important; margin: 0 auto 1.1rem !important; padding: .5rem 1.4rem;
    transform: skewX(-10deg); background: var(--balap-juara-asphalt); box-shadow: 5px 5px 0 var(--inv-primary);
}
.balap-juara-opening__greeting span { display: block; transform: skewX(10deg); font-family: var(--balap-juara-display); font-size: 1.45rem; line-height: 1.2; color: #fff; }
.balap-juara-opening__message { font-size: 1.02rem; color: var(--balap-juara-muted); }

/* celebrant: the driver's licence */
.balap-juara-driver {
    width: min(21rem, 100%); margin: 0 auto; border-radius: 22px; overflow: hidden; text-align: left;
    background: var(--balap-juara-paper); box-shadow: var(--balap-juara-shadow), inset 0 0 0 1px var(--balap-juara-line);
}
.balap-juara-driver__head {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .8rem 1rem 1.25rem; color: #fff; background: var(--balap-juara-asphalt);
}
.balap-juara-driver__head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: var(--balap-juara-chequer) 0 0 / 10px 10px; }
.balap-juara-driver__label { font-family: var(--balap-juara-cond); font-size: .9rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.balap-juara-driver__roundel {
    display: grid; place-items: center; min-width: 2.8rem; height: 2.8rem; padding: 0 .3rem; border-radius: 999px;
    font-family: var(--balap-juara-display); font-size: 1.5rem; line-height: 1; color: var(--balap-juara-asphalt); background: #fff;
    box-shadow: 0 0 0 3px var(--inv-primary);
}
.balap-juara-driver__window {
    position: relative; margin: 1rem 1rem 0; aspect-ratio: 1 / 1.02; border-radius: 16px; overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}
.balap-juara-driver__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.balap-juara-driver__empty {
    position: absolute; inset: 0; display: grid; place-items: center;
    background:
        repeating-linear-gradient(-55deg, transparent 0 22px, rgb(255 255 255 / .07) 22px 44px),
        radial-gradient(70% 55% at 50% 45%, color-mix(in srgb, var(--inv-primary) 45%, transparent), transparent 75%),
        var(--balap-juara-asphalt);
}
.balap-juara-driver__helmet { width: 72%; }
.balap-juara-driver__nick {
    position: absolute; left: .8rem; bottom: 1.6rem; max-width: calc(100% - 1.6rem); padding: .1rem .7rem .05rem;
    font-family: var(--balap-juara-display); font-size: 1.5rem; line-height: 1.25; color: #fff; background: var(--inv-primary);
    transform: skewX(-10deg); box-shadow: 4px 4px 0 var(--balap-juara-asphalt); overflow-wrap: anywhere;
}
.balap-juara-driver__body { padding: 1rem 1.15rem 1.1rem; }
.balap-juara-driver__title {
    display: inline-block; margin: 0 0 .4rem; padding: .2rem .75rem; transform: skewX(-10deg);
    font-family: var(--balap-juara-cond); font-size: .82rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--balap-juara-asphalt); background: var(--inv-accent);
}
.balap-juara-driver__name { margin: 0; font-family: var(--balap-juara-display); font-size: 1.75rem; font-weight: 400; line-height: 1.1; color: var(--inv-text); overflow-wrap: anywhere; }
.balap-juara-driver__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .5rem; margin: .9rem 0 0; }
.balap-juara-driver__stats div { padding: .45rem .7rem; border-radius: 10px; background: var(--balap-juara-tint); border-left: 4px solid var(--inv-primary); }
.balap-juara-driver__stats dt { font-family: var(--balap-juara-cond); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--balap-juara-muted); }
.balap-juara-driver__stats dd { margin: 0; font-weight: 700; font-size: .98rem; }
.balap-juara-driver__crew { margin-top: 1rem; padding-top: .9rem; border-top: 2px dashed var(--balap-juara-line); }
.balap-juara-driver__crew-label { margin: 0 0 .2rem; font-family: var(--balap-juara-cond); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--inv-primary); }
.balap-juara-driver__crew-names { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .45rem; margin: 0; font-size: 1.08rem; font-weight: 600; line-height: 1.4; }
.balap-juara-driver .balap-juara-socials { justify-content: flex-start; }
.balap-juara-driver__barcode {
    height: 1.6rem; margin: 0 1.15rem 1.1rem;
    background: repeating-linear-gradient(90deg, var(--balap-juara-asphalt) 0 2px, transparent 2px 5px, var(--balap-juara-asphalt) 5px 9px, transparent 9px 11px, var(--balap-juara-asphalt) 11px 12px, transparent 12px 16px);
    opacity: .75;
}

/* message: the team radio */
.balap-juara-radio {
    margin: 0; padding: 1.1rem 1.2rem 1.25rem; border-radius: 22px; text-align: left; color: #fff;
    background:
        radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--inv-primary) 35%, transparent), transparent 70%),
        var(--balap-juara-asphalt);
    box-shadow: var(--balap-juara-shadow);
}
.balap-juara-radio__bar { display: flex; align-items: center; gap: .65rem; padding-bottom: .85rem; border-bottom: 1px solid rgb(255 255 255 / .14); }
.balap-juara-radio__icon { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--inv-primary); }
.balap-juara-radio__icon .balap-juara-icon { width: 1.2rem; height: 1.2rem; }
.balap-juara-radio__label { font-family: var(--balap-juara-cond); font-size: .86rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.balap-juara-radio__wave { display: flex; align-items: center; gap: 3px; height: 1.5rem; margin-left: auto; }
.balap-juara-radio__wave i { width: 3px; height: 60%; border-radius: 2px; background: var(--inv-accent); transform-origin: center; }
.balap-juara-radio__wave i:nth-child(2n) { height: 100%; }
.balap-juara-radio__wave i:nth-child(3n) { height: 40%; }
.balap-juara-radio__text { margin: .95rem 0 0; }
.balap-juara-radio__text p { margin: 0; font-size: 1.16rem; font-weight: 500; line-height: 1.55; }
.balap-juara-radio__from { margin: .8rem 0 0; font-family: var(--balap-juara-cond); font-size: .95rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--inv-accent); }
.balap-juara-radio__from cite { font-style: normal; }

/* events: circuit cards */
.balap-juara-circuit {
    border-radius: 22px; overflow: hidden; text-align: left; background: var(--balap-juara-paper);
    box-shadow: var(--balap-juara-shadow), inset 0 0 0 1px var(--balap-juara-line);
}
.balap-juara-circuit + .balap-juara-circuit { margin-top: 1.6rem; }
.balap-juara-circuit__photo { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.balap-juara-circuit__head {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .9rem 1rem 1.35rem 1.15rem; color: #fff; background: var(--balap-juara-asphalt);
}
.balap-juara-circuit__head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: var(--balap-juara-chequer) 0 0 / 10px 10px; }
.balap-juara-circuit__titles { min-width: 0; }
.balap-juara-circuit__label { margin: 0; font-family: var(--balap-juara-cond); font-size: .82rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-accent); }
.balap-juara-circuit__name { margin: .1rem 0 0; font-family: var(--balap-juara-display); font-size: 1.6rem; font-weight: 400; line-height: 1.12; overflow-wrap: anywhere; }
.balap-juara-circuit__map { position: relative; flex: none; width: 120px; height: 84px; scale: .82; transform-origin: right center; margin-left: -20px; }
.balap-juara-circuit__map svg { display: block; overflow: visible; }
.balap-juara-circuit__track { fill: none; stroke: #3b3b44; stroke-width: 11; stroke-linejoin: round; }
.balap-juara-circuit__lane { fill: none; stroke: rgb(255 255 255 / .75); stroke-width: 1.3; stroke-dasharray: 4 4; }
.balap-juara-circuit__start { stroke: var(--inv-accent); stroke-width: 3; }
.balap-juara-circuit__dot {
    position: absolute; left: 0; top: 0; width: 12px; height: 8px; margin: -4px 0 0 -6px; border-radius: 4px;
    background: var(--inv-primary); box-shadow: 0 0 0 2px #fff, 0 0 10px var(--inv-primary);
    offset-rotate: auto; offset-distance: 22%;
}
.balap-juara-circuit__body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem 1rem; padding: 1.15rem 1.1rem 1.25rem; }
.balap-juara-circuit__board {
    align-self: start; display: grid; place-items: center; width: 4.4rem; margin: 0; padding: .55rem 0 .5rem;
    color: #fff; background: var(--inv-primary); text-align: center; line-height: 1;
    clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%);
}
.balap-juara-circuit__day { font-family: var(--balap-juara-display); font-size: 2.2rem; font-variant-numeric: lining-nums; }
.balap-juara-circuit__month { margin: .25rem 0 .5rem; font-family: var(--balap-juara-cond); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.15; }
.balap-juara-circuit__rows { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; font-size: .94rem; }
.balap-juara-circuit__rows li { display: flex; align-items: flex-start; gap: .65rem; }
.balap-juara-circuit__rows .balap-juara-icon {
    width: 2.1rem; height: 2.1rem; padding: .45rem; border-radius: 10px; color: var(--inv-primary);
    background: color-mix(in srgb, var(--inv-primary) 11%, transparent);
}
.balap-juara-circuit__rows li > span { padding-top: .3rem; min-width: 0; }
.balap-juara-circuit__venue { display: block; font-weight: 700; }
.balap-juara-circuit__address { display: block; font-size: .88rem; color: var(--balap-juara-muted); }
.balap-juara-circuit .inv-maps { grid-column: 1 / -1; text-align: center; }
.balap-juara-circuit .inv-maps .inv-button { width: 100%; min-height: 2.9rem; border-radius: 12px; font-weight: 700; }
.balap-juara-circuit .inv-maps__frame { height: 190px; border-radius: 14px; }

/* countdown: the start-light gantry over lit LED boards, on an asphalt band */
.balap-juara-gantry { position: relative; width: min(100%, 20rem); margin: 0 auto 1.6rem; }
.balap-juara-gantry__beam { position: relative; display: flex; justify-content: space-between; padding: 0 .35rem; }
/* the striped beam behind the pods, with a leg down each side */
.balap-juara-gantry__beam::before {
    content: ''; position: absolute; left: -.6rem; right: -.6rem; top: 50%; height: 14px; margin-top: -7px; border-radius: 3px;
    background: repeating-linear-gradient(-45deg, var(--inv-accent) 0 8px, #111 8px 16px);
    box-shadow: 0 6px 14px rgb(0 0 0 / .4);
}
.balap-juara-gantry__pod {
    position: relative; display: flex; flex-direction: column; gap: .35rem; padding: .45rem; border-radius: 12px;
    background: #0c0c0f; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .08), 0 8px 16px -8px rgb(0 0 0 / .8);
}
.balap-juara-gantry__pod i {
    --lamp-green: #34d36b;
    --lamp-off: radial-gradient(circle at 35% 30%, #444, #222 60%);
    --lamp-red: radial-gradient(circle at 35% 30%, #ffd0cc, #ff3b30 55%, #a3120b);
    --lamp-on: radial-gradient(circle at 35% 30%, #c8ffd9, #34d36b 55%, #138a3d);
    width: clamp(1.45rem, 7vw, 1.75rem); aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #c8ffd9, var(--lamp-green) 55%, #138a3d);
    box-shadow: 0 0 14px 2px color-mix(in srgb, var(--lamp-green) 70%, transparent);
}
.balap-juara-gantry__go {
    position: absolute; left: 50%; top: 100%; margin-top: .55rem; translate: -50% 0; padding: .1rem .9rem;
    font-family: var(--balap-juara-display); font-size: 1.3rem; line-height: 1.2; color: #0c0c0f; background: #34d36b;
    transform: skewX(-10deg); box-shadow: 0 0 18px rgb(52 211 107 / .55);
}
.balap-juara-countdown__boards { margin-top: 2.9rem; }
.balap-juara-countdown .inv-countdown { gap: clamp(.4rem, 2.2vw, .7rem); }
.balap-juara-countdown .inv-countdown__item {
    position: relative; display: grid; place-content: center; width: clamp(4.1rem, 19vw, 4.7rem); min-width: 0; aspect-ratio: 1 / 1.08; padding: 0;
    border-radius: 12px; color: #fff; background: #0c0c0f;
    box-shadow: inset 0 0 0 2px rgb(255 255 255 / .1), inset 0 -18px 24px -18px color-mix(in srgb, var(--inv-primary) 60%, transparent), 0 10px 18px -10px rgb(0 0 0 / .8);
}
.balap-juara-countdown .inv-countdown__value {
    font-family: var(--balap-juara-display); font-size: 1.95rem; font-variant-numeric: lining-nums tabular-nums; line-height: 1.05;
    color: var(--inv-accent); text-shadow: 0 0 12px color-mix(in srgb, var(--inv-accent) 60%, transparent);
}
.balap-juara-countdown .inv-countdown__label { margin-top: .15rem; font-family: var(--balap-juara-cond); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .78); }
.balap-juara-countdown .inv-countdown__done { font-family: var(--balap-juara-display); font-size: 1.25rem; color: var(--inv-accent); }
.balap-juara-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 1.8rem; }
.balap-juara-countdown .inv-countdown__actions .inv-button {
    width: min(100%, 17.5rem); min-height: 2.85rem; padding: .6rem 1rem; border-radius: 12px; font-size: .9rem; font-weight: 700;
    color: #fff; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .35);
}
.balap-juara-countdown .inv-cal {
    --inv-cal-bg: var(--balap-juara-paper); --inv-cal-text: var(--inv-text); --inv-cal-mark: var(--inv-primary);
    max-width: 19rem; margin: 2.6rem auto .4rem; border-radius: 18px; box-shadow: 0 18px 36px -20px rgb(0 0 0 / .8);
}
.balap-juara-countdown .inv-cal__month { font-family: var(--balap-juara-display); font-size: 1.5rem; color: var(--inv-primary); }

/* party: theme banner, team kit, briefing note, number plate */
.balap-juara-party__label { display: block; font-family: var(--balap-juara-cond); font-size: .82rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.balap-juara-party__theme {
    position: relative; padding: 1.1rem 4rem 1.2rem 1.3rem; text-align: left; color: #fff; overflow: hidden;
    background: var(--inv-primary); clip-path: polygon(0 0, 100% 0, calc(100% - 1rem) 100%, 0 100%); border-radius: 14px 0 0 14px;
}
.balap-juara-party__theme::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 3.4rem; background: var(--balap-juara-chequer) 0 0 / 14px 14px; clip-path: polygon(1rem 0, 100% 0, calc(100% - 1rem) 100%, 0 100%); }
.balap-juara-party__theme-name { margin: .2rem 0 0; font-family: var(--balap-juara-display); font-size: 1.85rem; line-height: 1.12; overflow-wrap: anywhere; }
.balap-juara-party__kit {
    display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding: 1.1rem 1rem; border-radius: 20px; text-align: left;
    background: var(--balap-juara-paper); box-shadow: var(--balap-juara-shadow), inset 0 0 0 1px var(--balap-juara-line);
}
.balap-juara-party__kit-text { min-width: 0; flex: 1; }
.balap-juara-party__kit .balap-juara-party__label { color: var(--inv-primary); }
.balap-juara-party__jersey { width: 6.4rem; flex: none; overflow: visible; filter: drop-shadow(0 8px 10px rgb(0 0 0 / .18)); }
.balap-juara-party__jersey-body { fill: var(--balap-juara-pick, var(--inv-primary)); stroke: var(--balap-juara-asphalt); stroke-width: 2.5; stroke-linejoin: round; transition: fill .35s ease; }
.balap-juara-party__jersey-stripe { fill: rgb(255 255 255 / .35); }
.balap-juara-party__jersey-collar { fill: none; stroke: var(--balap-juara-asphalt); stroke-width: 2.5; }
.balap-juara-party__jersey-roundel { fill: #fff; stroke: var(--balap-juara-asphalt); stroke-width: 2; }
.balap-juara-party__jersey-number { font-family: var(--balap-juara-display); font-size: 19px; fill: var(--balap-juara-asphalt); }
.balap-juara-party__dress-name { margin: .1rem 0 0; font-size: 1.2rem; font-weight: 700; line-height: 1.25; }
.balap-juara-tyres { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .8rem; }
.balap-juara-tyre {
    width: 2.85rem; height: 2.85rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background:
        radial-gradient(circle, var(--balap-juara-swatch) 0 40%, #3a3a40 41% 46%, transparent 47%),
        repeating-conic-gradient(#1b1b1f 0 10deg, #2b2b31 10deg 20deg);
    box-shadow: var(--balap-juara-shadow-sm);
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.balap-juara-tyre[aria-pressed=true] { transform: scale(1.12) rotate(60deg); box-shadow: 0 0 0 3px var(--balap-juara-paper), 0 0 0 5.5px var(--inv-primary), var(--balap-juara-shadow-sm); }
.balap-juara-tyre:focus-visible { outline: 2px solid var(--inv-primary); outline-offset: 6px; }
.balap-juara-party__hint { margin: .7rem 0 0 !important; font-size: .82rem; color: var(--balap-juara-muted); }
.balap-juara-party__kit .balap-juara-party__hint { margin-top: .55rem !important; }
.balap-juara-party__note {
    position: relative; display: flex; align-items: flex-start; gap: .8rem; margin-top: 1rem; padding: 1rem 1rem 1rem 1.35rem; border-radius: 16px; overflow: hidden;
    text-align: left; background: color-mix(in srgb, var(--inv-accent) 18%, var(--balap-juara-paper));
}
.balap-juara-party__note::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: repeating-linear-gradient(-45deg, var(--inv-accent) 0 6px, #111 6px 12px); }
.balap-juara-party__note p { margin: .15rem 0 0; font-size: .95rem; }
.balap-juara-party__note .balap-juara-party__label { color: var(--inv-text); }
.balap-juara-party__note-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; border-radius: 12px; color: #fff; background: #f07a1a; }
.balap-juara-party__note-icon .balap-juara-icon { width: 1.3rem; height: 1.3rem; }
/* the hashtag as a number plate (with four screws) */
.balap-juara-party__plate {
    display: inline-flex; align-items: center; gap: .7rem; max-width: 100%; margin-top: 1.5rem; padding: .45rem .45rem .45rem 1.3rem;
    border-radius: 12px; background:
        radial-gradient(circle at .5rem .5rem, #9ca0a8 2px, transparent 2.5px),
        radial-gradient(circle at calc(100% - .5rem) .5rem, #9ca0a8 2px, transparent 2.5px),
        radial-gradient(circle at .5rem calc(100% - .5rem), #9ca0a8 2px, transparent 2.5px),
        radial-gradient(circle at calc(100% - .5rem) calc(100% - .5rem), #9ca0a8 2px, transparent 2.5px),
        #fff;
    box-shadow: inset 0 0 0 3px var(--balap-juara-asphalt), var(--balap-juara-shadow-sm);
}
.balap-juara-party__plate-text { font-family: var(--balap-juara-display); font-size: 1.35rem; color: var(--inv-text); overflow-wrap: anywhere; text-align: left; }
.balap-juara-party__copy {
    min-height: 2.6rem; padding: .3rem 1rem; border: 0; border-radius: 9px; cursor: pointer; flex: none;
    font: 700 .86rem/1 var(--balap-juara-cond); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--balap-juara-asphalt);
}
.balap-juara-party__copy:focus-visible { outline: 2px solid var(--inv-primary); outline-offset: 2px; }

/* rundown: pit stops on a track down the left side */
.balap-juara-laps { position: relative; padding-left: 4rem; text-align: left; }
.balap-juara-laps__track { position: absolute; left: 0; top: 0; bottom: 0; width: 2.9rem; }
.balap-juara-laps__road {
    position: absolute; left: 0; right: 0; top: 0; bottom: 1.4rem; border-radius: 1.45rem 1.45rem 0 0; transform-origin: top;
    background:
        repeating-linear-gradient(to bottom, rgb(255 255 255 / .85) 0 12px, transparent 12px 24px) 50% 1.2rem / 3px calc(100% - 1.2rem) no-repeat,
        repeating-linear-gradient(to bottom, var(--inv-primary) 0 14px, #fff 14px 28px) 0 0 / 5px 100% no-repeat,
        repeating-linear-gradient(to bottom, var(--inv-primary) 0 14px, #fff 14px 28px) 100% 0 / 5px 100% no-repeat,
        var(--balap-juara-asphalt);
}
.balap-juara-laps__finish { position: absolute; left: 0; right: 0; bottom: 0; height: 1.4rem; background: var(--balap-juara-chequer) 0 0 / 11.6px 11.6px; border-radius: 0 0 6px 6px; }
.balap-juara-laps__car { position: absolute; left: 50%; top: calc(100% - 5.4rem); z-index: 2; width: 5rem; margin-left: -2.5rem; rotate: 90deg; }
.balap-juara-laps__car .balap-juara-car { width: 100%; }
.balap-juara-laps__list { margin: 0; padding: 0; list-style: none; }
.balap-juara-lap { position: relative; padding-bottom: 1rem; }
.balap-juara-lap:last-child { padding-bottom: 2.4rem; }
.balap-juara-lap__marker {
    position: absolute; left: -3.55rem; top: .7rem; z-index: 1; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
    font-family: var(--balap-juara-display); font-size: .95rem; line-height: 1; color: var(--balap-juara-asphalt); background: var(--inv-accent);
    box-shadow: 0 0 0 3px var(--balap-juara-asphalt);
}
/* a short pit-lane arm from the track to the board */
.balap-juara-lap__marker::after { content: ''; position: absolute; left: 100%; top: 50%; width: 1.7rem; border-top: 2.5px dashed color-mix(in srgb, var(--inv-text) 30%, transparent); }
.balap-juara-lap__board {
    padding: .75rem .95rem .85rem; border-radius: 14px; background: var(--balap-juara-paper);
    box-shadow: var(--balap-juara-shadow-sm), inset 0 0 0 1px var(--balap-juara-line); border-left: 5px solid var(--inv-primary);
}
.balap-juara-lap:nth-child(even) .balap-juara-lap__board { border-left-color: var(--balap-juara-asphalt); }
.balap-juara-lap__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: 0 0 .25rem; }
.balap-juara-lap__no { font-family: var(--balap-juara-cond); font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--inv-primary); }
.balap-juara-lap__time {
    padding: .1rem .55rem; border-radius: 6px; font-family: var(--balap-juara-display); font-size: 1rem; line-height: 1.3; font-variant-numeric: tabular-nums;
    color: var(--inv-accent); background: var(--balap-juara-asphalt);
}
.balap-juara-lap__title { margin: 0; font-size: 1.08rem; font-weight: 700; line-height: 1.3; }
.balap-juara-lap__text { margin: .15rem 0 0; font-size: .9rem; color: var(--balap-juara-muted); }

/* story: season cards with the year on a plate that sticks out, joined by stretches of road */
.balap-juara-seasons { margin: 0; padding: 0; list-style: none; text-align: left; }
.balap-juara-season { position: relative; }
.balap-juara-season + .balap-juara-season { padding-top: 2.6rem; }
.balap-juara-season + .balap-juara-season::before {
    content: ''; position: absolute; left: 50%; top: .3rem; width: 1.6rem; height: 2rem; margin-left: -.8rem; transform-origin: top;
    background: repeating-linear-gradient(to bottom, rgb(255 255 255 / .9) 0 6px, transparent 6px 12px) 50% 3px / 3px 100% no-repeat, var(--balap-juara-asphalt);
    box-shadow: -4px 0 0 var(--inv-primary), 4px 0 0 var(--inv-primary);
}
.balap-juara-season__card {
    position: relative; margin: 0 0 0 1.2rem; padding: 1rem 1.1rem 1.15rem; border-radius: 18px; background: var(--balap-juara-paper);
    box-shadow: var(--balap-juara-shadow), inset 0 0 0 1px var(--balap-juara-line);
}
.balap-juara-season:nth-child(even) .balap-juara-season__card { margin: 0 1.2rem 0 0; }
.balap-juara-season__plate {
    display: flex; align-items: baseline; gap: .45rem; width: fit-content; margin: 0 0 .75rem -2.1rem; padding: .25rem .85rem .2rem;
    color: #fff; background: var(--inv-primary); transform: skewX(-10deg); box-shadow: 4px 4px 0 var(--balap-juara-asphalt);
}
.balap-juara-season:nth-child(even) .balap-juara-season__plate { margin: 0 -2.1rem .75rem auto; color: var(--inv-accent); background: var(--balap-juara-asphalt); box-shadow: -4px 4px 0 var(--inv-primary); }
.balap-juara-season__tag { font-family: var(--balap-juara-cond); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.balap-juara-season__year { font-family: var(--balap-juara-display); font-size: 1.45rem; line-height: 1.1; }
.balap-juara-season__photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: .85rem; border-radius: 12px; }
.balap-juara-season__title { margin: 0; font-family: var(--balap-juara-display); font-size: 1.4rem; font-weight: 400; line-height: 1.15; color: var(--inv-text); }
.balap-juara-season__text { margin: .35rem 0 0; font-size: .94rem; color: var(--balap-juara-muted); }

/* gallery: a photo-finish frame */
.balap-juara-gallery__frame {
    position: relative; padding: 1.15rem .55rem; border-radius: 18px; background: var(--balap-juara-asphalt); box-shadow: var(--balap-juara-shadow);
}
.balap-juara-gallery__frame::before, .balap-juara-gallery__frame::after {
    content: ''; position: absolute; left: 1rem; right: 1rem; height: 7px; background: var(--balap-juara-chequer) 0 0 / 7px 7px;
}
.balap-juara-gallery__frame::before { top: .3rem; }
.balap-juara-gallery__frame::after { bottom: .3rem; }
.balap-juara-gallery .inv-gallery { gap: .45rem; }
.balap-juara-gallery .inv-gallery__item { border-radius: 10px; }
.balap-juara-gallery .inv-gallery__item:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }

/* live streaming: a race broadcast */
.balap-juara-stream__card {
    position: relative; padding: 1.6rem 1.3rem; border-radius: 22px; color: #fff;
    background: radial-gradient(70% 70% at 50% 0%, color-mix(in srgb, var(--inv-primary) 45%, transparent), transparent 70%), var(--balap-juara-asphalt);
    box-shadow: var(--balap-juara-shadow);
}
.balap-juara-stream__live {
    position: absolute; left: 1rem; top: 1rem; display: inline-flex; align-items: center; gap: .35rem; margin: 0 !important; padding: .1rem .55rem;
    border-radius: 6px; font-family: var(--balap-juara-cond); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; background: #e11d2e;
}
.balap-juara-stream__live i { width: .5rem; height: .5rem; border-radius: 50%; background: #fff; }
.balap-juara-stream__icon { display: inline-grid; place-items: center; width: 3.3rem; height: 3.3rem; border-radius: 50%; background: rgb(255 255 255 / .14); }
.balap-juara-stream__icon .balap-juara-icon { width: 1.8rem; height: 1.8rem; }
.balap-juara-stream__title { margin: .7rem 0 .3rem; font-family: var(--balap-juara-display); font-size: 1.85rem; font-weight: 400; line-height: 1.1; }
.balap-juara-stream__card p { margin: 0 auto .4rem; max-width: 30ch; font-size: .94rem; color: var(--balap-juara-on-dark); }
.balap-juara-stream__note { font-size: .88rem !important; }
.balap-juara-stream__card .inv-button { margin-top: .7rem; min-height: 2.9rem; border-radius: 12px; background: #fff; color: var(--balap-juara-asphalt); font-weight: 700; }

/* RSVP: the pit pass on a lanyard */
.balap-juara-rsvp .balap-juara-heading { margin-bottom: 3.6rem; }
.balap-juara-pass {
    position: relative; max-width: 24rem; margin: 0 auto; border-radius: 22px; text-align: left;
    background: var(--balap-juara-paper); box-shadow: var(--balap-juara-shadow), inset 0 0 0 1px var(--balap-juara-line);
}
.balap-juara-pass__strap {
    position: absolute; left: 50%; top: -2.9rem; width: 2.2rem; height: 3.4rem; margin-left: -1.1rem; border-radius: 4px 4px 0 0;
    background: repeating-linear-gradient(90deg, var(--inv-primary) 0 7px, #fff 7px 9px, var(--inv-primary) 9px 13px, var(--balap-juara-asphalt) 13px 22px);
}
.balap-juara-pass__strap::after { content: ''; position: absolute; left: 50%; bottom: -.15rem; width: 1.3rem; height: 1.3rem; margin-left: -.65rem; border-radius: 50%; border: 3px solid #b8bcc4; z-index: 2; }
.balap-juara-pass__head {
    position: relative; padding: 1.6rem 4.6rem 1.35rem 1.2rem; border-radius: 22px 22px 0 0; color: #fff; background: var(--balap-juara-asphalt);
}
.balap-juara-pass__head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: var(--balap-juara-chequer) 0 0 / 10px 10px; }
.balap-juara-pass__hole { position: absolute; left: 50%; top: .5rem; width: 2.8rem; height: .55rem; margin-left: -1.4rem; border-radius: 999px; background: var(--inv-background); }
.balap-juara-pass__title { margin: 0; font-family: var(--balap-juara-display); font-size: 2.1rem; line-height: 1; text-transform: uppercase; }
.balap-juara-pass__sub { margin: .3rem 0 0; font-family: var(--balap-juara-cond); font-size: .84rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--inv-accent); }
.balap-juara-pass__number {
    position: absolute; right: 1.1rem; top: 50%; display: grid; place-items: center; min-width: 3.2rem; height: 3.2rem; margin-top: -1.9rem; padding: 0 .3rem;
    border-radius: 999px; font-family: var(--balap-juara-display); font-size: 1.6rem; color: #fff; background: var(--inv-primary); box-shadow: 0 0 0 3px #fff;
}
.balap-juara-pass__body { position: relative; padding: 1.2rem 1.1rem .4rem; }
.balap-juara-pass__intro { margin: 0 0 1rem; font-size: .94rem; color: var(--balap-juara-muted); }
.balap-juara-pass__barcode {
    height: 1.5rem; margin: .4rem 1.1rem 1.1rem;
    background: repeating-linear-gradient(90deg, var(--balap-juara-asphalt) 0 2px, transparent 2px 5px, var(--balap-juara-asphalt) 5px 9px, transparent 9px 11px, var(--balap-juara-asphalt) 11px 12px, transparent 12px 16px);
    opacity: .7;
}
.balap-juara-pass__sent { margin-bottom: 1rem; text-align: center; }
.balap-juara-pass__flag { width: 4.2rem; margin: 0 auto .3rem; }
.balap-juara-pass__stamp {
    position: absolute; right: .9rem; top: -1.3rem; z-index: 3; margin: 0; padding: .1rem .6rem; border: 3px solid var(--inv-primary); border-radius: 8px;
    font-family: var(--balap-juara-display); font-size: 1.25rem; line-height: 1.2; text-transform: uppercase; color: var(--inv-primary);
    background: color-mix(in srgb, #fff 82%, transparent); rotate: -12deg; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--inv-primary) 30%, transparent);
}
.balap-juara-pass__thanks { margin: 0; font-family: var(--balap-juara-display); font-size: 1.6rem; line-height: 1.15; color: var(--inv-primary); }
.balap-juara-pass__line { margin: .3rem auto 0; max-width: 30ch; font-size: .94rem; color: var(--balap-juara-muted); }
.balap-juara-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .88rem; font-weight: 700; color: var(--inv-primary); }

/* gift: the winner's plates */
.balap-juara-gift__trophy { width: 4.2rem; margin: -.6rem auto .9rem; }
.balap-juara-gift__intro { color: var(--balap-juara-muted); }
.balap-juara-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.4rem; }
.balap-juara-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.balap-juara-gift .inv-gift__account {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; margin: 0;
    padding: 1.5rem .75rem 1rem; border-radius: 16px; overflow: hidden; background: var(--balap-juara-paper);
    box-shadow: var(--balap-juara-shadow), inset 0 0 0 1px var(--balap-juara-line);
}
.balap-juara-gift .inv-gift__account::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--balap-juara-chequer) 0 0 / 8px 8px; }
.balap-juara-gift .inv-gift__account p { margin: 0; }
.balap-juara-gift .inv-gift__bank { font-family: var(--balap-juara-cond); font-weight: 700; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; color: var(--inv-primary); }
.balap-juara-gift .inv-gift__logo { height: 1.7rem; padding: .2rem .5rem; border-radius: .4rem; background: #fff; }
.balap-juara-gift .inv-gift__logo img { max-width: 5rem; }
.balap-juara-gift .inv-gift__number {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 1rem; font-weight: 700;
    letter-spacing: .03em; line-height: 1.3; overflow-wrap: anywhere; color: var(--inv-text);
}
.balap-juara-gift .inv-gift__holder { font-size: .76rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--balap-juara-muted); overflow-wrap: anywhere; }
.balap-juara-gift .inv-gift__account .inv-button { margin-top: .4rem; min-height: 2.6rem; padding: .35rem .9rem; border-radius: 10px; font-size: .82rem; font-weight: 700; }
.balap-juara-gift .inv-gift__address { margin-top: .75rem; font-size: .92rem; }

/* wishlist: garage bays that open (the door rolls up, the body unfolds with a grid-rows transition) */
.balap-juara-wishlist__intro { font-size: .92rem; color: var(--balap-juara-muted); }
.balap-juara-wishlist__list { display: grid; gap: .75rem; margin: 1.2rem 0 0; padding: 0; list-style: none; text-align: left; }
.balap-juara-bay {
    border-radius: 16px; background: var(--balap-juara-paper); box-shadow: var(--balap-juara-shadow-sm), inset 0 0 0 1px var(--balap-juara-line);
    transition: box-shadow .3s ease;
}
.balap-juara-bay.is-open { box-shadow: var(--balap-juara-shadow), inset 0 0 0 2px color-mix(in srgb, var(--inv-primary) 45%, transparent); }
.balap-juara-bay__head {
    display: flex; align-items: center; gap: .85rem; width: 100%; min-height: 4.5rem; padding: .7rem 1rem .7rem .8rem;
    border: 0; border-radius: inherit; cursor: pointer; text-align: left; font: inherit; color: inherit; background: none;
}
.balap-juara-bay__head:focus-visible { outline: 2px solid var(--inv-primary); outline-offset: 2px; }
.balap-juara-bay__garage { width: 3.3rem; height: 2.85rem; flex: none; overflow: visible; }
.balap-juara-bay__roof { fill: var(--balap-juara-asphalt); }
.balap-juara-bay__inside { fill: color-mix(in srgb, var(--balap-juara-asphalt) 75%, #fff); }
.balap-juara-bay__box { fill: var(--inv-primary); }
.balap-juara-bay__ribbon { fill: var(--balap-juara-gold); }
.balap-juara-bay__door-plate { fill: #d9dce2; }
.balap-juara-bay__slats { stroke: #9ea3ad; stroke-width: 1.6; }
.balap-juara-bay__frame { fill: none; stroke: var(--balap-juara-asphalt); stroke-width: 3; stroke-linejoin: round; }
.balap-juara-bay__door { transform-box: view-box; transform-origin: 28px 22px; transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.balap-juara-bay.is-open .balap-juara-bay__door { transform: scaleY(.14); }
.balap-juara-bay__label { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.balap-juara-bay__number { font-family: var(--balap-juara-cond); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--inv-primary); }
.balap-juara-bay__name { font-size: 1.06rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.balap-juara-bay__toggle {
    display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 10px; flex: none; color: #fff;
    background: var(--balap-juara-asphalt); transition: transform .35s ease;
}
.balap-juara-bay.is-open .balap-juara-bay__toggle { transform: rotate(180deg); }
.balap-juara-bay__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1), visibility .4s; }
.balap-juara-bay.is-closed .balap-juara-bay__body { grid-template-rows: 0fr; visibility: hidden; }
.balap-juara-bay__inner { min-height: 0; overflow: hidden; padding: 0 1rem; }
.balap-juara-bay__inner > :first-child { margin-top: .1rem; }
.balap-juara-bay__inner > :last-child { margin-bottom: 1rem; }
.balap-juara-bay__photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: .75rem; border-radius: 12px; }
.balap-juara-bay__note { margin: 0 0 .75rem; padding-left: .8rem; font-size: .94rem; color: var(--balap-juara-muted); border-left: 4px solid var(--inv-primary); }
.balap-juara-bay__shop { width: 100%; min-height: 2.8rem; border-radius: 12px; font-size: .9rem; font-weight: 700; }
.balap-juara-bay__shop .balap-juara-icon { width: 1.05rem; height: 1.05rem; }

/* co-hosts: slanted team stickers */
.balap-juara-cohosts__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem .5rem; margin: 0; padding: 0; list-style: none; }
.balap-juara-cohosts__list li { padding: .45rem 1.05rem; transform: skewX(-12deg); color: #fff; background: var(--balap-juara-asphalt); box-shadow: 3px 3px 0 var(--inv-primary); }
.balap-juara-cohosts__list li span { display: block; transform: skewX(12deg); font-size: 1rem; font-weight: 700; line-height: 1.3; }
.balap-juara-cohosts__list li:nth-child(3n + 2) { background: var(--inv-primary); box-shadow: 3px 3px 0 var(--balap-juara-asphalt); }
.balap-juara-cohosts__list li:nth-child(3n) { color: var(--balap-juara-asphalt); background: #fff; box-shadow: inset 0 0 0 2px var(--balap-juara-asphalt), 3px 3px 0 var(--inv-primary); }

/* contacts: race-control cards */
.balap-juara-contacts__list { display: grid; gap: .75rem; }
.balap-juara-contact {
    display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; padding: 1rem; border-radius: 18px; text-align: left;
    background: var(--balap-juara-paper); box-shadow: var(--balap-juara-shadow), inset 0 0 0 1px var(--balap-juara-line); border-top: 5px solid var(--inv-primary);
}
.balap-juara-contact__avatar {
    display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; flex: none;
    font-family: var(--balap-juara-display); font-size: 1.45rem; color: #fff; background: var(--balap-juara-asphalt); box-shadow: 0 0 0 3px var(--inv-primary);
}
.balap-juara-contact__text { min-width: 0; flex: 1; }
.balap-juara-contact p { margin: 0; }
.balap-juara-contact__name { font-weight: 700; font-size: 1.04rem; overflow-wrap: anywhere; }
.balap-juara-contact__role { font-size: .88rem; color: var(--balap-juara-muted); }
.balap-juara-contact__button { flex: 1 1 100%; min-height: 2.8rem; padding: .45rem 1rem; border-radius: 12px; font-size: .92rem; font-weight: 700; }
.balap-juara-contact__button .balap-juara-icon { width: 1.15rem; height: 1.15rem; }
.balap-juara-contact__phone { flex: 1 1 100%; font-weight: 600; }

/* health protocol: slanted rule tags */
.balap-juara-protocol__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.balap-juara-protocol__list li {
    display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 10px; font-size: .9rem; font-weight: 600;
    background: var(--balap-juara-paper); box-shadow: inset 0 0 0 1.5px var(--balap-juara-line);
}
.balap-juara-protocol__list .balap-juara-icon { width: 1rem; height: 1rem; color: var(--inv-primary); }
.balap-juara-protocol__note { font-size: .92rem; color: var(--balap-juara-muted); }

/* vendors: sponsor decals */
.balap-juara-vendors__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.balap-juara-vendors__list > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: min(100%, 13rem); }
.balap-juara-decal {
    display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 5.6rem; padding: .8rem 1.1rem;
    color: #fff; background: var(--balap-juara-asphalt); clip-path: polygon(.8rem 0, 100% 0, calc(100% - .8rem) 100%, 0 100%);
}
.balap-juara-decal:nth-child(3n + 2) { background: var(--inv-primary); }
.balap-juara-decal__role { font-family: var(--balap-juara-cond); font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.balap-juara-decal__name { margin-top: .1rem; font-family: var(--balap-juara-display); font-size: 1.15rem; line-height: 1.15; overflow-wrap: anywhere; }
.balap-juara-decal__link { display: inline-flex; align-items: center; gap: .3rem; min-height: 2rem; font-size: .84rem; font-weight: 600; color: #fff; text-decoration: none; overflow-wrap: anywhere; }
.balap-juara-decal__link .balap-juara-icon { width: .95rem; height: .95rem; }

/* closing: the podium on an asphalt band */
.balap-juara-closing { padding-top: 3.2rem; padding-bottom: 3.3rem; }
.balap-juara-podium { position: relative; width: min(19rem, 100%); height: 15.2rem; margin: 0 auto 1.7rem; }
.balap-juara-podium__flag { position: absolute; top: .4rem; width: 4.2rem; }
.balap-juara-podium__flag--l { left: -.2rem; rotate: -14deg; }
.balap-juara-podium__flag--r { right: -.2rem; rotate: 14deg; }
.balap-juara-podium__winner {
    position: absolute; left: 50%; bottom: 5.9rem; width: 8.4rem; height: 8.4rem; margin-left: -4.2rem; border-radius: 50%; overflow: hidden;
    background: var(--balap-juara-asphalt-2); box-shadow: 0 0 0 5px #fff, 0 0 0 9px var(--balap-juara-gold), 0 18px 30px -12px rgb(0 0 0 / .7);
}
.balap-juara-podium__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.balap-juara-podium__empty { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--inv-primary) 40%, transparent), transparent 70%); }
.balap-juara-podium__helmet { width: 78%; }
.balap-juara-podium__trophy { position: absolute; left: 7%; bottom: 3.9rem; width: 3.5rem; }
.balap-juara-podium__steps { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.balap-juara-podium__step {
    display: grid; place-items: start center; padding-top: .35rem; font-family: var(--balap-juara-display); font-size: 1.7rem; line-height: 1;
    color: var(--balap-juara-asphalt); border-radius: 6px 6px 0 0; box-shadow: inset 0 6px 0 rgb(255 255 255 / .35);
}
.balap-juara-podium__step--1 { width: 36%; height: 5.6rem; color: #fff; background: var(--inv-primary); }
.balap-juara-podium__step--2 { width: 31%; height: 3.8rem; background: #d5d8de; }
.balap-juara-podium__step--3 { width: 31%; height: 2.8rem; background: #d99556; }
.balap-juara-closing__message { margin: 0 auto; max-width: 32ch; font-size: 1.02rem; color: var(--balap-juara-on-dark) !important; }
.balap-juara-closing__signature { margin: 1.4rem auto .15rem !important; font-family: var(--balap-juara-cond); font-size: .95rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--inv-accent); }
.balap-juara-closing__name { margin: 0 auto !important; max-width: none !important; font-family: var(--balap-juara-display); font-size: 3rem; line-height: 1.05; color: #fff; text-transform: uppercase; overflow-wrap: anywhere; }

/* ---------- 5. forms (shared RSVP + wishes, restyled) ---------- */
.balap-juara-main .inv-form { gap: 1rem; }
.balap-juara-main .inv-form label, .balap-juara-main .inv-form__choices legend { font-size: .9rem; font-weight: 700; color: var(--inv-text); }
.balap-juara-main .inv-form input:not([type=radio]):not([type=checkbox]),
.balap-juara-main .inv-form select,
.balap-juara-main .inv-form textarea {
    width: 100%; min-height: 3rem; margin-top: .3rem; padding: .7rem .95rem; border: 0; border-radius: 10px;
    font: 500 1rem/1.4 var(--balap-juara-sans); color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--inv-text) 16%, transparent);
    transition: box-shadow .2s ease;
}
.balap-juara-main .inv-form select {
    appearance: none; padding-right: 2.4rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.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;
}
.balap-juara-main .inv-form input:not([type=radio]):focus-visible,
.balap-juara-main .inv-form select:focus-visible,
.balap-juara-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-primary) 22%, transparent);
}
.balap-juara-main .inv-form button[type=submit] {
    width: 100%; min-height: 3.2rem; border-radius: 12px; font-family: var(--balap-juara-cond); font-size: 1.08rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    box-shadow: 0 14px 24px -14px color-mix(in srgb, var(--inv-primary) 90%, transparent);
}
.balap-juara-main .inv-form .inv-button--outline { width: 100%; min-height: 2.9rem; border-radius: 12px; font-weight: 700; }
.balap-juara-main .inv-form__notice { text-align: center; }

/* the three answers as painted start-grid slots (the radio dot is hidden but still focusable) */
.balap-juara-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.balap-juara-rsvp .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.balap-juara-rsvp .inv-form__choices label {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .45rem;
    min-height: 5.7rem; padding: .9rem .3rem .75rem; border-radius: 12px; cursor: pointer; text-align: center;
    font-size: .9rem; font-weight: 700; line-height: 1.2; color: var(--inv-text); background: #fff;
    border: 2.5px dashed color-mix(in srgb, var(--inv-text) 24%, transparent);
    transition: background-color .25s ease, color .25s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1), border-color .25s ease, box-shadow .25s ease;
}
.balap-juara-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* icon: a tinted disc (::before) with a flag, a cross or a question mark on it (::after, a mask in the text color) */
.balap-juara-rsvp .inv-form__choices label::before {
    content: ''; width: 2.3rem; height: 2.3rem; border-radius: 50%; flex: none;
    background: color-mix(in srgb, var(--inv-primary) 12%, transparent);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease;
}
.balap-juara-rsvp .inv-form__choices label::after {
    content: ''; position: absolute; left: 50%; top: 1.45rem; width: 1.25rem; height: 1.25rem; margin-left: -.625rem;
    background: currentColor; color: var(--inv-primary); pointer-events: none;
    -webkit-mask: var(--balap-juara-choice-icon) center / contain no-repeat; mask: var(--balap-juara-choice-icon) center / contain no-repeat;
}
.balap-juara-rsvp .inv-form__choices label:nth-of-type(1) {
    --balap-juara-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4M5 4.5h13l-2.5 4.5L18 13.5H5'/%3E%3Cpath d='M9.3 4.5v9M13.6 4.5v9M5 9h12.5'/%3E%3C/svg%3E");
}
.balap-juara-rsvp .inv-form__choices label:nth-of-type(2) {
    --balap-juara-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");
}
.balap-juara-rsvp .inv-form__choices label:nth-of-type(3) {
    --balap-juara-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");
}
.balap-juara-rsvp .inv-form__choices label:has(input:checked) {
    color: #fff; background: var(--balap-juara-asphalt); border: 2.5px solid var(--balap-juara-asphalt); transform: translateY(-3px);
    box-shadow: inset 0 5px 0 var(--inv-primary), 0 12px 22px -12px rgb(0 0 0 / .7);
}
.balap-juara-rsvp .inv-form__choices label:has(input:checked)::before { background-color: var(--inv-primary); transform: scale(1.12); }
.balap-juara-rsvp .inv-form__choices label:has(input:checked)::after { color: #fff; }
.balap-juara-rsvp .inv-form__choices label:has(input:focus-visible) { outline: 3px solid var(--inv-primary); outline-offset: 3px; }

/* wishes: the form on a card with a chequered top edge, the wishes as pit boards in a scroll box */
.balap-juara-wishes .inv-wishes { --inv-wishes-height: 20rem; text-align: left; }
.balap-juara-wishes .inv-form {
    position: relative; padding: 1.6rem 1.1rem 1.25rem; border-radius: 18px; overflow: hidden; background: var(--balap-juara-paper);
    box-shadow: var(--balap-juara-shadow), inset 0 0 0 1px var(--balap-juara-line);
}
.balap-juara-wishes .inv-form::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 9px; background: var(--balap-juara-chequer) 0 0 / 9px 9px; }
.balap-juara-wishes .inv-wishes__list { margin-top: 1.1rem; }
.balap-juara-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .6rem; border-radius: 18px; background: var(--balap-juara-asphalt);
}
.balap-juara-wishes .inv-wishes__empty { color: var(--balap-juara-on-dark); text-align: center; }
.balap-juara-wishes .inv-wish { padding: .75rem .95rem; border-radius: 10px; background: #fff; border-left: 5px solid var(--inv-primary); }
.balap-juara-wishes .inv-wish:nth-child(even) { border-left-color: var(--inv-accent); }
.balap-juara-wishes .inv-wish__name { font-family: var(--balap-juara-cond); font-size: .98rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--inv-primary); }
.balap-juara-wishes .inv-wish__message { font-size: .95rem; line-height: 1.5; }
.balap-juara-wishes .inv-wish__time { font-size: .78rem; color: var(--balap-juara-muted); }
.balap-juara-wishes .inv-wishes__more { color: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .4); }

/* ---------- 6. shared components ---------- */
.balap-juara-main .inv-button { font-weight: 700; }
.inv-nav { font-family: var(--balap-juara-sans); border-color: rgb(255 255 255 / .12); }
body .inv-nav { --inv-nav-bg: color-mix(in srgb, var(--balap-juara-asphalt) 92%, transparent); --inv-nav-text: rgb(255 255 255 / .78); --inv-nav-active: var(--inv-primary); }
.inv-nav--icons .inv-nav__item.is-active { box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--inv-primary) 80%, transparent), inset 0 -3px 0 var(--inv-accent); }

/* ---------- 7. screen sizes ---------- */

/* short phones: the cover art and type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .balap-juara-cover { --balap-juara-art: min(25.5svh, 56vw); padding-top: 2.3rem; padding-bottom: 2.2rem; }
    .balap-juara-cover__title { margin-bottom: .85rem; }
    .balap-juara-cover__name { margin-top: .55rem; font-size: 3.05rem; }
    .balap-juara-cover__date { margin-top: .5rem; }
    .balap-juara-cover__quote { font-size: .88rem; }
    .balap-juara-cover__guest { margin-top: .85rem; }
    .balap-juara-cover__open { margin-top: .95rem; }
}
@media (max-height: 660px) {
    .balap-juara-cover { --balap-juara-art: min(22svh, 52vw); padding-top: 1.9rem; padding-bottom: 2.1rem; }
    .balap-juara-cover__title { margin-bottom: .7rem; font-size: .74rem; }
    .balap-juara-cover__name { margin-top: .45rem; font-size: 2.6rem; }
    .balap-juara-cover__date { margin-top: .35rem; font-size: .94rem; }
    .balap-juara-cover__quote { font-size: .84rem; line-height: 1.38; }
    .balap-juara-cover__guest { margin-top: .7rem; padding-block: .4rem .45rem; }
    .balap-juara-cover__guest-name { font-size: 1.1rem; }
    .balap-juara-cover__open { margin-top: .8rem; min-height: 2.9rem; padding: .55rem 1.7rem; }
}

/* wide screens: the phone-width column on an asphalt backdrop with a chequered border on each side */
@media (min-width: 560px) {
    body.balap-juara-body::before {
        content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
        background:
            radial-gradient(circle, rgb(255 255 255 / .05) 1px, transparent 1.5px) 0 0 / 9px 9px,
            radial-gradient(60% 50% at 50% 30%, color-mix(in srgb, var(--inv-primary) 22%, transparent), transparent 75%);
    }
    .balap-juara-main { position: relative; box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 30px 60px -30px rgb(0 0 0 / .8); }
    /* chequered edges along the column */
    .balap-juara-main::before, .balap-juara-main::after {
        content: ''; position: absolute; top: 0; bottom: 0; width: 14px; background: var(--balap-juara-chequer) 0 0 / 14px 14px;
    }
    .balap-juara-main::before { right: 100%; }
    .balap-juara-main::after { left: 100%; }
    .balap-juara-main { overflow-x: visible; }
    .balap-juara-cover { background-size: 9px 9px, 100% 100%, 100% 100%; }
}

/* ---------- 8. motion ---------- */
@keyframes balap-juara-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes balap-juara-lanes { from { background-position: 50% 0, 14% 0, 86% 0; } to { background-position: 50% 44px, 14% 44px, 86% 44px; } }
@keyframes balap-juara-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes balap-juara-spin { to { transform: rotate(1turn); } }
@keyframes balap-juara-wave { 0%, 100% { transform: skewY(0) scaleX(1); } 25% { transform: skewY(-5deg) scaleX(.96); } 75% { transform: skewY(4deg) scaleX(1.02); } }
@keyframes balap-juara-band-wave { 0% { transform: none; } 30% { transform: skewY(2.5deg) translateY(2px); } 60% { transform: skewY(-2deg) translateY(-1px); } 100% { transform: translateY(-120%); } }
@keyframes balap-juara-bars { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes balap-juara-lap { from { offset-distance: 0%; } to { offset-distance: 100%; } }
/* the start lights: off → red (pod by pod, every .45s) → all green at 91% (3.1s) */
@keyframes balap-juara-lights-0 { 0%, 12% { background: var(--lamp-off); box-shadow: none; } 13%, 90.9% { background: var(--lamp-red); box-shadow: 0 0 14px 2px rgb(255 59 48 / .7); } 91%, 100% { background: var(--lamp-on); box-shadow: 0 0 14px 2px rgb(52 211 107 / .7); } }
@keyframes balap-juara-lights-1 { 0%, 25% { background: var(--lamp-off); box-shadow: none; } 26%, 90.9% { background: var(--lamp-red); box-shadow: 0 0 14px 2px rgb(255 59 48 / .7); } 91%, 100% { background: var(--lamp-on); box-shadow: 0 0 14px 2px rgb(52 211 107 / .7); } }
@keyframes balap-juara-lights-2 { 0%, 38% { background: var(--lamp-off); box-shadow: none; } 39%, 90.9% { background: var(--lamp-red); box-shadow: 0 0 14px 2px rgb(255 59 48 / .7); } 91%, 100% { background: var(--lamp-on); box-shadow: 0 0 14px 2px rgb(52 211 107 / .7); } }
@keyframes balap-juara-lights-3 { 0%, 51% { background: var(--lamp-off); box-shadow: none; } 52%, 90.9% { background: var(--lamp-red); box-shadow: 0 0 14px 2px rgb(255 59 48 / .7); } 91%, 100% { background: var(--lamp-on); box-shadow: 0 0 14px 2px rgb(52 211 107 / .7); } }
@keyframes balap-juara-lights-4 { 0%, 64% { background: var(--lamp-off); box-shadow: none; } 65%, 90.9% { background: var(--lamp-red); box-shadow: 0 0 14px 2px rgb(255 59 48 / .7); } 91%, 100% { background: var(--lamp-on); box-shadow: 0 0 14px 2px rgb(52 211 107 / .7); } }
@keyframes balap-juara-go { 0% { opacity: 0; scale: .3; } 60% { opacity: 1; scale: 1.2; } 100% { opacity: 1; scale: 1; } }
@keyframes balap-juara-stamp { 0% { opacity: 0; scale: 2.2; } 60% { opacity: 1; scale: .92; } 100% { opacity: 1; scale: 1; } }
@keyframes balap-juara-pop { 0% { transform: scale(0) rotate(-20deg); } 60% { transform: scale(1.15) rotate(5deg); } 100% { transform: none; } }
@keyframes balap-juara-blink { 50% { opacity: .2; } }
@keyframes balap-juara-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes balap-juara-drive { from { top: 0; } to { top: calc(100% - 5.4rem); } }

/* cover: the lane lines rush towards the guest, the parked car idles, its flags wave */
html.inv-anim .balap-juara-cover__lanes { animation: balap-juara-lanes .9s linear infinite; }
html.inv-anim .balap-juara-cover__car { animation: balap-juara-idle .35s ease-in-out infinite; }
html.inv-anim .balap-juara-cover--leave .balap-juara-car__wheel { animation: balap-juara-spin .18s linear infinite; }
html.inv-anim .balap-juara-cover--leave .balap-juara-cover__band span { animation: balap-juara-band-wave .9s ease-in both; }
html.inv-anim .balap-juara-flag__cloth { animation: balap-juara-wave 2.6s ease-in-out infinite; }
html.inv-anim .balap-juara-flag--mirror .balap-juara-flag__cloth { animation-delay: -1.3s; }

/* team radio: the waveform bounces */
html.inv-anim .balap-juara-radio__wave i { animation: balap-juara-bars 1s ease-in-out infinite; }
html.inv-anim .balap-juara-radio__wave i:nth-child(2) { animation-delay: -.2s; }
html.inv-anim .balap-juara-radio__wave i:nth-child(3) { animation-delay: -.5s; }
html.inv-anim .balap-juara-radio__wave i:nth-child(4) { animation-delay: -.7s; }
html.inv-anim .balap-juara-radio__wave i:nth-child(5) { animation-delay: -.35s; }
html.inv-anim .balap-juara-radio__wave i:nth-child(6) { animation-delay: -.85s; }
html.inv-anim .balap-juara-radio__wave i:nth-child(7) { animation-delay: -.1s; }

/* circuit: the car dot runs laps */
html.inv-anim .balap-juara-circuit__dot { animation: balap-juara-lap 5.5s linear infinite; }

/* start lights: off until revealed, then red one by one, then all green and "GO!" */
html.inv-anim .balap-juara-gantry:not(.is-revealed) .balap-juara-gantry__pod i { background: radial-gradient(circle at 35% 30%, #444, #222 60%); box-shadow: none; }
html.inv-anim .balap-juara-gantry:not(.is-revealed) .balap-juara-gantry__go { opacity: 0; }
html.inv-anim .balap-juara-gantry.is-revealed .balap-juara-gantry__pod i { animation: balap-juara-lights-0 3.4s linear .2s both; }
html.inv-anim .balap-juara-gantry.is-revealed .balap-juara-gantry__pod:nth-child(2) i { animation-name: balap-juara-lights-1; }
html.inv-anim .balap-juara-gantry.is-revealed .balap-juara-gantry__pod:nth-child(3) i { animation-name: balap-juara-lights-2; }
html.inv-anim .balap-juara-gantry.is-revealed .balap-juara-gantry__pod:nth-child(4) i { animation-name: balap-juara-lights-3; }
html.inv-anim .balap-juara-gantry.is-revealed .balap-juara-gantry__pod:nth-child(5) i { animation-name: balap-juara-lights-4; }
html.inv-anim .balap-juara-gantry.is-revealed .balap-juara-gantry__go { animation: balap-juara-go .5s cubic-bezier(.34, 1.56, .64, 1) 3.3s both; }

/* RSVP: the stamp thumps down, the flag pops in */
html.inv-anim .balap-juara-pass.is-entered .balap-juara-pass__stamp { animation: balap-juara-stamp .55s cubic-bezier(.3, 1.4, .6, 1) .15s both; }
html.inv-anim .balap-juara-pass.is-entered .balap-juara-pass__flag { animation: balap-juara-pop .6s cubic-bezier(.34, 1.56, .64, 1) both; }

/* live light blinks; the trophies bob */
html.inv-anim .balap-juara-stream__live i { animation: balap-juara-blink 1.2s steps(1) infinite; }
html.inv-anim .balap-juara-gift__trophy, html.inv-anim .balap-juara-podium__trophy { animation: balap-juara-bob 3s ease-in-out infinite; }

/* the podium winner pops up when the closing scrolls into view */
.balap-juara-podium__winner { transition: scale .6s cubic-bezier(.34, 1.56, .64, 1) .35s; }
html.inv-anim .balap-juara-podium:not(.is-revealed) .balap-juara-podium__winner { scale: 0; }

/* scroll-drawn details (the default, without support, is the finished drawing) */
@supports (animation-timeline: view()) {
    html.inv-anim .balap-juara-laps__road { animation: balap-juara-grow linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; }
    html.inv-anim .balap-juara-laps__car { animation: balap-juara-drive linear both; animation-timeline: --balap-juara-laps; animation-range: entry 40% exit 60%; }
    .balap-juara-laps { view-timeline-name: --balap-juara-laps; }
    html.inv-anim .balap-juara-season + .balap-juara-season::before { animation: balap-juara-grow linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
}

@media (prefers-reduced-motion: reduce) {
    .balap-juara-cover--leave, .balap-juara-cover--leave .balap-juara-cover__car, .balap-juara-cover--leave .balap-juara-cover__inner > *,
    .balap-juara-cover__frame, .balap-juara-heading__speed, .balap-juara-podium__winner, .balap-juara-bay, .balap-juara-bay__body,
    .balap-juara-bay__door, .balap-juara-bay__toggle, .balap-juara-tyre, .balap-juara-party__jersey-body { transition: none; }
    .balap-juara-cover__lanes, .balap-juara-cover__car, .balap-juara-flag__cloth, .balap-juara-radio__wave i, .balap-juara-circuit__dot,
    .balap-juara-gift__trophy, .balap-juara-podium__trophy { animation: none; }
}