/*
 * 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; }
body.balap-juara-body:not(:has(.inv-music__space)) .balap-juara-branding.inv-branding { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }

/* 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; }
}

/* ---------- intro scene "Lampu Hijau, Gas!" (scene.json + sections/_scene; the intro lives in <body>, outside the
   page column): the camera rolls up to the start line, the lights go red one by one, then green, the car shoots in
   with confetti, the trophy pops up and the pit board (the card) shows the name. */
.balap-juara-scene-track {
    position: absolute; inset: 0; overflow: hidden;
    background:
        radial-gradient(circle, rgb(255 255 255 / .05) 1px, transparent 1.5px) 0 0 / 9px 9px,
        radial-gradient(80% 40% at 50% 46%, color-mix(in srgb, var(--inv-primary) 40%, transparent), transparent 72%),
        linear-gradient(to bottom, color-mix(in srgb, var(--balap-juara-asphalt) 78%, #000), var(--balap-juara-asphalt) 45%);
}
/* the lanes into the distance (as on the cover); they rush in until the start, then stop */
.balap-juara-scene-track span {
    position: absolute; left: 50%; bottom: 2%; width: 170%; height: 64%; translate: -50% 0; opacity: .55;
    transform: perspective(240px) rotateX(58deg); transform-origin: 50% 100%;
    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%);
}
/* the kerb the car parks on */
.balap-juara-scene-track::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 3.2%; height: 12px;
    background: var(--balap-juara-kerb); box-shadow: 0 -6px 16px rgb(0 0 0 / .35);
}
.balap-juara-scene-band { width: 100%; height: 100%; background: var(--balap-juara-chequer) 0 0 / 16px 16px; box-shadow: 0 4px 12px rgb(0 0 0 / .4); }
.inv-scene__art > .balap-juara-scene-flag, .inv-scene__art > .balap-juara-scene-trophy { height: auto; filter: drop-shadow(0 8px 14px rgb(0 0 0 / .45)); }
.inv-scene__art > .balap-juara-scene-car { height: auto; filter: drop-shadow(0 12px 18px rgb(0 0 0 / .5)); }
.balap-juara-scene-gantry { width: 100%; margin: 0; }
.balap-juara-scene-gantry .balap-juara-gantry__pod { padding: .38rem; }
.balap-juara-scene-gantry .balap-juara-gantry__pod i { width: clamp(1.25rem, 6.2vw, 1.6rem); }
/* lights: red pod by pod from .35s, all green at ~2.9s, "GO!" right after (the car shoots in then) */
html.inv-anim .inv-intro.is-playing .balap-juara-scene-gantry .balap-juara-gantry__pod i { animation: balap-juara-lights-0 2.8s linear .35s both; }
html.inv-anim .inv-intro.is-playing .balap-juara-scene-gantry .balap-juara-gantry__pod:nth-child(2) i { animation-name: balap-juara-lights-1; }
html.inv-anim .inv-intro.is-playing .balap-juara-scene-gantry .balap-juara-gantry__pod:nth-child(3) i { animation-name: balap-juara-lights-2; }
html.inv-anim .inv-intro.is-playing .balap-juara-scene-gantry .balap-juara-gantry__pod:nth-child(4) i { animation-name: balap-juara-lights-3; }
html.inv-anim .inv-intro.is-playing .balap-juara-scene-gantry .balap-juara-gantry__pod:nth-child(5) i { animation-name: balap-juara-lights-4; }
html.inv-anim .inv-intro.is-playing .balap-juara-scene-gantry .balap-juara-gantry__go { animation: balap-juara-go .5s cubic-bezier(.34, 1.56, .64, 1) 2.9s both; }
html.inv-anim .inv-intro.is-playing .balap-juara-scene-track span { animation: balap-juara-lanes .4s linear 7; }
html.inv-anim .inv-intro.is-playing .balap-juara-scene-car .balap-juara-car__wheel { animation: balap-juara-spin .3s linear 12; }
html.inv-anim .inv-intro.is-playing .balap-juara-scene-car .balap-juara-car__streaks { animation: balap-juara-scene-streaks 1.3s ease 2.8s both; }
@keyframes balap-juara-scene-streaks { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
/* confetti burst at "GO!" (14 pieces, transform only) */
.balap-juara-scene-confetti { position: absolute; inset: 0; overflow: hidden; }
.balap-juara-scene-confetti i {
    position: absolute; top: -4%; left: calc(var(--x) * 1%); width: 8px; height: 13px; border-radius: 2px;
    background: var(--c, var(--inv-accent)); opacity: 0; --x: 50; --d: 0s;
}
.balap-juara-scene-confetti i:nth-child(1) { --x: 6; --d: 0s; }
.balap-juara-scene-confetti i:nth-child(2) { --x: 14; --d: .5s; --c: #fff; }
.balap-juara-scene-confetti i:nth-child(3) { --x: 22; --d: .2s; --c: var(--inv-primary); }
.balap-juara-scene-confetti i:nth-child(4) { --x: 30; --d: .9s; --c: var(--balap-juara-gold); }
.balap-juara-scene-confetti i:nth-child(5) { --x: 38; --d: .35s; }
.balap-juara-scene-confetti i:nth-child(6) { --x: 46; --d: 1.1s; --c: #fff; }
.balap-juara-scene-confetti i:nth-child(7) { --x: 54; --d: .1s; --c: var(--inv-primary); }
.balap-juara-scene-confetti i:nth-child(8) { --x: 62; --d: .7s; --c: var(--balap-juara-gold); }
.balap-juara-scene-confetti i:nth-child(9) { --x: 70; --d: .25s; }
.balap-juara-scene-confetti i:nth-child(10) { --x: 78; --d: 1s; --c: #fff; }
.balap-juara-scene-confetti i:nth-child(11) { --x: 86; --d: .45s; --c: var(--inv-primary); }
.balap-juara-scene-confetti i:nth-child(12) { --x: 93; --d: .8s; --c: var(--balap-juara-gold); }
.balap-juara-scene-confetti i:nth-child(13) { --x: 10; --d: 1.4s; --c: var(--balap-juara-gold); }
.balap-juara-scene-confetti i:nth-child(14) { --x: 89; --d: 1.6s; }
html.inv-anim .inv-intro.is-playing .balap-juara-scene-confetti i { animation: balap-juara-scene-fall 3.4s linear calc(2.9s + var(--d)) infinite; }
@keyframes balap-juara-scene-fall {
    0% { opacity: 1; transform: translate(0, 0) rotate(0); }
    50% { transform: translate(14px, 55vh) rotate(260deg) scaleX(.4); }
    90% { opacity: 1; }
    100% { opacity: 0; transform: translate(-10px, 110vh) rotate(540deg); }
}
/* the card: a white pit board in a team-colour frame, a chequered strip on top */
body.balap-juara-body .inv-intro--scene .inv-scene__card {
    top: 49%; aspect-ratio: auto; padding: 1.9rem 1.2rem 1.4rem; overflow: hidden; border-radius: 18px;
    -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--balap-juara-paper); color: var(--inv-text);
    box-shadow: 0 0 0 4px #fff, 0 0 0 9px var(--inv-primary), 0 30px 50px -20px rgb(0 0 0 / .85);
}
body.balap-juara-body .inv-scene__card::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--balap-juara-chequer) 0 0 / 12px 12px;
}
body.balap-juara-body .inv-scene__card .inv-intro__label {
    justify-self: center; margin: 0 0 .2rem; padding: .3rem .8rem .25rem; color: var(--balap-juara-asphalt); background: var(--inv-accent);
    font: 700 .78rem/1.2 var(--balap-juara-cond); letter-spacing: .16em; text-transform: uppercase;
    clip-path: polygon(.5rem 0, 100% 0, calc(100% - .5rem) 100%, 0 100%);
}
body.balap-juara-body .inv-scene__card .inv-intro__names {
    margin: .45rem 0 .1rem; color: var(--inv-primary); font: 400 clamp(2.3rem, 11.5vw, 3.3rem)/1.02 var(--balap-juara-display);
    font-family: var(--balap-juara-display) !important; letter-spacing: 0; transform: skewX(-6deg);
}
body.balap-juara-body .inv-scene__card .inv-intro__rule { width: 7rem; height: 6px; border-radius: 2px; margin: .8rem auto .7rem; background: var(--balap-juara-kerb); background-size: auto; }
body.balap-juara-body .inv-scene__card .inv-intro__date { color: var(--inv-text); font: 700 .95rem/1.3 var(--balap-juara-cond); letter-spacing: .1em; text-transform: uppercase; }
/* the race number, big and outlined behind the card */
.balap-juara-scene-number { display: grid; place-items: center; width: 100%; height: 100%; }
.balap-juara-scene-number span {
    font: 400 min(52vw, 34svh)/1 var(--balap-juara-display); color: color-mix(in srgb, var(--inv-primary) 22%, transparent);
    -webkit-text-stroke: 3px color-mix(in srgb, var(--inv-accent) 70%, transparent); transform: skewX(-8deg); white-space: nowrap;
}