/*
 * Template "Retro Disco" (Ulang Tahun, dewasa): a 70s disco party for a grown-up milestone birthday.
 * Mirrored disco ball, curved 70s rainbow stripes, vinyl records, a hi-fi receiver, warm sunset tones.
 * Mobile-first, one centered column (~460px) on a night-club backdrop with sunset rings on wide screens.
 *
 * Colors come from the chosen color variant (template.json → <x-inv.head>):
 *   --inv-primary (hot pink / orange), --inv-accent, --inv-background, --inv-text,
 *   --inv-deep (dark panels: cover, poster, pass header, closing), --inv-glow (text on deep panels),
 *   --inv-paper (cards), --inv-btn / --inv-btnink (buttons on the page), --inv-s1…s4 (the four sunset stripes)
 * The light variants (Senja, Alpukat) and the dark ones (Disko perak, Anggur) share every rule: cards use
 * --inv-paper and all tints are mixed from the text and background colors.
 *
 * 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 and the ball, records and lights stand still.
 *
 * Contents: 1 base · 2 shared pieces (records, disco ball, heading, bands, chips) · 3 cover · 4 sections in page
 *           order · 5 forms (RSVP pass, jukebox) · 6 shared components · 7 screen sizes · 8 motion
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = "Senja 70-an"; the variant overrides them on html:root */
    --inv-deep: #5b3a29;
    --inv-glow: #fbefd9;
    --inv-paper: #fff8ea;
    --inv-btn: #5b3a29;
    --inv-btnink: #fbefd9;
    --inv-s1: #e9b44c;
    --inv-s2: #f4a259;
    --inv-s3: #e76f8a;
    --inv-s4: #b5523b;

    --rd-display: 'Shrikhand', 'Cooper Black', Georgia, serif;
    --rd-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --rd-line: color-mix(in srgb, var(--inv-text) 15%, transparent);
    --rd-muted: color-mix(in srgb, var(--inv-text) 76%, var(--inv-background));
    /* the hot color as text: dark enough on cream, light enough on navy */
    --rd-hot: color-mix(in srgb, var(--inv-primary) 52%, var(--inv-text));
    --rd-ink-on-stripe: color-mix(in srgb, var(--inv-deep) 72%, #000);
    --rd-field: color-mix(in srgb, var(--inv-background) 45%, var(--inv-paper));
    --rd-shadow: 0 20px 40px -26px rgb(0 0 0 / .55);
    --rd-shadow-sm: 0 8px 20px -14px rgb(0 0 0 / .45);
    /* the four stripes as a vertical band (used for edges and dividers) */
    --rd-stripes-x: linear-gradient(90deg, var(--inv-s1) 0 25%, var(--inv-s2) 0 50%, var(--inv-s3) 0 75%, var(--inv-s4) 0);
    --rd-stripes-y: linear-gradient(var(--inv-s1) 0 25%, var(--inv-s2) 0 50%, var(--inv-s3) 0 75%, var(--inv-s4) 0);

    --inv-radius: 18px;
    --inv-font-display: var(--rd-display);
}

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

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

img { max-width: 100%; }
a { color: var(--rd-hot); }

.retro-disco-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 */
.retro-disco-main { max-width: 460px; margin: 0 auto; padding: 0 1.25rem; background: var(--inv-background); overflow-x: clip; }
.retro-disco-branding { max-width: 460px; margin: 0 auto; background: var(--inv-background); color: var(--inv-text); }
/* 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.retro-disco-body .retro-disco-branding.inv-branding { padding-bottom: 3.4rem; }
body.retro-disco-body:not(:has(.inv-music__space)) .retro-disco-branding.inv-branding { padding-bottom: 7.9rem; }
/* without the branding (Eksklusif) the closing stage is the end: it only needs room when there is no music spacer */
body.retro-disco-body:not(:has(.inv-music__space)):not(:has(.inv-branding)) .retro-disco-main { padding-bottom: 4.5rem; }

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

/* ---------- 2. shared pieces ---------- */

/* a vinyl record (size from --size); its label in the middle, a sheen that turns */
.retro-disco-record {
    --size: 120px;
    --label: var(--inv-s3);
    position: relative; display: grid; place-items: center; flex: none;
    width: var(--size); height: var(--size); border-radius: 50%;
    background:
        radial-gradient(circle, transparent 0 36%, rgb(255 255 255 / .07) 36.5% 37.5%, transparent 38% 61%, rgb(255 255 255 / .06) 61.5% 62.5%, transparent 63%),
        repeating-radial-gradient(circle, #1d1714 0 1.5px, #2a211c 1.5px 3px);
    box-shadow: 0 12px 24px -14px rgb(0 0 0 / .7), 0 0 0 1.5px color-mix(in srgb, var(--inv-glow) 24%, #0d0a08);
}
.retro-disco-record::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: conic-gradient(from 25deg, transparent 0 6%, rgb(255 255 255 / .2) 11%, transparent 17% 50%, rgb(255 255 255 / .14) 60%, transparent 67%);
}
.retro-disco-record__label {
    position: relative; z-index: 1; display: grid; place-items: center; align-content: center;
    width: 40%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
    background: var(--label); color: var(--rd-ink-on-stripe); line-height: 1; text-align: center;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, #fff 25%, transparent);
}
.retro-disco-record__label b { font-family: var(--rd-display); font-weight: 400; font-size: calc(var(--size) * .14); line-height: 1; }
.retro-disco-record__label small { font-size: calc(var(--size) * .062); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.retro-disco-record__label .retro-disco-icon { width: 46%; height: 46%; }
/* an empty label gets the spindle hole */
.retro-disco-record__label:empty::after { content: ''; width: 16%; aspect-ratio: 1; border-radius: 50%; background: #1d1714; }
.retro-disco-record--mini { --size: 74px; }
.retro-disco-record--tiny { --size: 30px; }

/* the mirrored disco ball (size from --ball) */
.retro-disco-ball { --ball: 64px; position: relative; width: var(--ball); height: var(--ball); }
.retro-disco-ball__string {
    position: absolute; left: 50%; bottom: 100%; width: 1.5px; height: 60svh; margin-left: -.75px;
    background: linear-gradient(to top, color-mix(in srgb, #c7cbd9 80%, transparent), color-mix(in srgb, #c7cbd9 10%, transparent));
}
.retro-disco-ball__cap {
    position: absolute; left: 50%; top: -6%; z-index: 1; width: 20%; height: 11%; translate: -50% 0; border-radius: 2px;
    background: linear-gradient(90deg, #8e93a3, #eef0f6 45%, #8e93a3);
}
.retro-disco-ball__globe {
    position: absolute; inset: 0; overflow: hidden; border-radius: 50%; background: #9aa0b4;
    box-shadow: 0 0 calc(var(--ball) * .5) calc(var(--ball) * -.05) color-mix(in srgb, var(--inv-glow) 35%, transparent);
}
/* the mirror tiles: two checkers and the seams; sliding them sideways makes the ball turn */
.retro-disco-ball__tiles {
    --tile: calc(var(--ball) / 7.5);
    position: absolute; inset: 0; border-radius: 50%;
    background-image:
        linear-gradient(90deg, rgb(28 30 52 / .5) 1px, transparent 1px),
        linear-gradient(rgb(28 30 52 / .5) 1px, transparent 1px),
        repeating-conic-gradient(#f4f5fa 0 25%, #b4b9ca 0 50%),
        repeating-conic-gradient(color-mix(in srgb, var(--inv-s3) 45%, #d9dce6) 0 25%, #8e94a8 0 50%);
    background-size: var(--tile) var(--tile), var(--tile) var(--tile), calc(var(--tile) * 2) calc(var(--tile) * 2), calc(var(--tile) * 3) calc(var(--tile) * 3);
    background-blend-mode: normal, normal, multiply, normal;
}
/* a round shine top-left and a dark edge: the sphere */
.retro-disco-ball__shade {
    position: absolute; inset: 0; border-radius: 50%;
    background:
        radial-gradient(circle at 34% 30%, rgb(255 255 255 / .9) 0 5%, rgb(255 255 255 / .28) 15%, transparent 34%),
        radial-gradient(circle at 50% 50%, transparent 46%, rgb(12 14 32 / .5) 70%, rgb(6 7 18 / .85) 100%);
}
.retro-disco-ball__glint {
    position: absolute; width: 22%; aspect-ratio: 1; background: #fff;
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.retro-disco-ball__glint--1 { left: 22%; top: 18%; }
.retro-disco-ball__glint--2 { right: 18%; top: 46%; width: 15%; }
.retro-disco-ball__glint--3 { left: 40%; bottom: 14%; width: 12%; }

/* section heading: a little rainbow over the eyebrow and the title */
.retro-disco-heading { margin: 0 0 1.7rem; }
.retro-disco-heading__rainbow { display: block; width: 4rem; height: auto; margin: 0 auto .45rem; overflow: visible; }
.retro-disco-heading__arc { fill: none; stroke-width: 4.5; stroke-linecap: round; }
.retro-disco-heading__arc--1 { stroke: var(--inv-s1); }
.retro-disco-heading__arc--2 { stroke: var(--inv-s2); }
.retro-disco-heading__arc--3 { stroke: var(--inv-s3); }
.retro-disco-heading__spark { fill: var(--rd-hot); }
.retro-disco-heading__eyebrow {
    margin: 0 0 .25rem; font-size: .7rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--rd-hot);
}
.retro-disco-heading__title {
    margin: 0; font-family: var(--rd-display); font-weight: 400; font-size: 1.85rem; line-height: 1.15; color: var(--inv-text);
}

/* four tapering stripes, used as a divider */
.retro-disco-bands { display: grid; justify-items: center; gap: 3px; margin: 1.6rem auto 0; }
.retro-disco-bands i { display: block; height: 4px; border-radius: 4px; }
.retro-disco-bands i:nth-child(1) { width: 7.5rem; background: var(--inv-s1); }
.retro-disco-bands i:nth-child(2) { width: 6rem; background: var(--inv-s2); }
.retro-disco-bands i:nth-child(3) { width: 4.5rem; background: var(--inv-s3); }
.retro-disco-bands i:nth-child(4) { width: 3rem; background: var(--inv-s4); }

.retro-disco-icon { width: 1.15rem; height: 1.15rem; flex: none; }

/* a small rounded link with an icon (Instagram, TikTok) */
.retro-disco-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1.2rem 0 0 !important; max-width: none !important; }
.retro-disco-chip {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .35rem 1.05rem;
    border-radius: 999px; font-size: .86rem; font-weight: 700; text-decoration: none; color: var(--inv-text);
    background: var(--inv-paper); box-shadow: inset 0 0 0 1.5px var(--rd-line);
}
.retro-disco-chip .retro-disco-icon { color: var(--rd-hot); }

/* ---------- 3. cover ---------- */
.retro-disco-cover {
    --ball: min(11svh, 24vw);
    --arch-h: min(27svh, 58vw);
    --arch-w: calc(var(--arch-h) * .74);
    --ring: calc(var(--arch-h) * .03);
    position: fixed; inset: 0; z-index: 30; overflow-x: hidden; overflow-y: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: safe center;
    min-height: 100svh; padding: 1.4rem 1.25rem 2.6rem;
    isolation: isolate; text-align: center; color: var(--inv-glow);
    background:
        radial-gradient(120% 60% at 50% 12%, color-mix(in srgb, var(--inv-s2) 24%, var(--inv-deep)), transparent 70%),
        linear-gradient(var(--inv-deep), color-mix(in srgb, var(--inv-deep) 82%, #000));
}
/* the wheel of light spots, turning slowly around the ball */
.retro-disco-cover__lights {
    position: absolute; left: 50%; top: 22%; z-index: -2; width: 180vmax; height: 180vmax; translate: -50% -50%;
    pointer-events: none;
}
.retro-disco-cover__spot {
    position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%;
    background: radial-gradient(circle, var(--spot) 0 30%, color-mix(in srgb, var(--spot) 35%, transparent) 50%, transparent 72%);
    opacity: .8;
}
.retro-disco-cover__spot--1 { --spot: var(--inv-glow); }
.retro-disco-cover__spot--2 { --spot: var(--inv-s1); }
.retro-disco-cover__spot--3 { --spot: var(--inv-primary); }
.retro-disco-cover__beam {
    position: absolute; left: 50%; top: 0; z-index: -2; width: 130vw; height: 75svh; translate: -50% 0; pointer-events: none;
    background: conic-gradient(from 180deg at 50% 18%, transparent 0 158deg, color-mix(in srgb, var(--inv-glow) 9%, transparent) 168deg 192deg, transparent 202deg);
    -webkit-mask: linear-gradient(#000 30%, transparent); mask: linear-gradient(#000 30%, transparent);
}
.retro-disco-cover__swoosh { position: absolute; z-index: -1; width: clamp(5.5rem, 27vw, 8.5rem); height: auto; fill: none; stroke-width: 9; stroke-linecap: butt; pointer-events: none; }
.retro-disco-cover__swoosh--left { left: -.5rem; top: -.5rem; rotate: 180deg; scale: 1 -1; }
.retro-disco-cover__swoosh--right { right: -.5rem; top: -.5rem; rotate: 180deg; scale: -1 -1; }
.retro-disco-stroke--1 { stroke: var(--inv-s1); }
.retro-disco-stroke--2 { stroke: var(--inv-s2); }
.retro-disco-stroke--3 { stroke: var(--inv-s3); }
.retro-disco-stroke--4 { stroke: var(--inv-s4); }

/* the lit dance floor at the bottom, in perspective */
.retro-disco-cover__floor { position: absolute; left: -15%; right: -15%; bottom: 0; z-index: -1; height: 24svh; perspective: 260px; pointer-events: none; }
.retro-disco-cover__floor span {
    --tile: 34px;
    position: absolute; inset: 0; transform: rotateX(56deg); transform-origin: 50% 100%;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--inv-glow) 22%, transparent) 1.5px, transparent 1.5px) 0 0 / var(--tile) var(--tile),
        linear-gradient(color-mix(in srgb, var(--inv-glow) 22%, transparent) 1.5px, transparent 1.5px) 0 0 / var(--tile) var(--tile),
        conic-gradient(color-mix(in srgb, var(--inv-s3) 34%, transparent) 0 25%, color-mix(in srgb, var(--inv-s1) 26%, transparent) 0 50%, color-mix(in srgb, var(--inv-s2) 34%, transparent) 0 75%, color-mix(in srgb, var(--inv-s4) 30%, transparent) 0) 0 0 / calc(var(--tile) * 2) calc(var(--tile) * 2);
    -webkit-mask: linear-gradient(transparent, #000 55%); mask: linear-gradient(transparent, #000 55%);
}
.retro-disco-cover__floor span::after {
    content: ''; position: absolute; inset: 0; opacity: 0;
    background: conic-gradient(color-mix(in srgb, var(--inv-s1) 40%, transparent) 0 25%, transparent 0 50%, color-mix(in srgb, var(--inv-s3) 40%, transparent) 0 75%, transparent 0) var(--tile) 0 / calc(var(--tile) * 2) calc(var(--tile) * 2);
}

.retro-disco-cover__inner { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; }

/* the ball hangs over the top of the rainbow arch */
.retro-disco-cover__stage { position: relative; padding-top: calc(var(--ball) * .58); }
.retro-disco-ball--cover { position: absolute; left: 50%; top: 0; z-index: 2; margin-left: calc(var(--ball) / -2); }
.retro-disco-cover__arch {
    width: var(--arch-w); height: var(--arch-h); margin: 0 var(--ring);
    border-radius: 999px 999px 0 0;
    box-shadow: 0 0 0 var(--ring) var(--inv-s1), 0 0 0 calc(var(--ring) * 2) var(--inv-s2), 0 0 0 calc(var(--ring) * 3) var(--inv-s3), 0 0 0 calc(var(--ring) * 4) var(--inv-s4);
    clip-path: inset(calc(var(--ring) * -4.2) calc(var(--ring) * -4.2) 0 calc(var(--ring) * -4.2));
}
.retro-disco-cover__window {
    position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; display: grid; place-items: center;
    background: radial-gradient(circle at 50% 108%, var(--inv-s1) 0 20%, var(--inv-s2) 20% 38%, var(--inv-s3) 38% 56%, var(--inv-s4) 56% 74%, color-mix(in srgb, var(--inv-deep) 80%, #000) 74%);
}
.retro-disco-cover__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.retro-disco-cover__window::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--inv-deep) 30%, transparent), transparent 35%);
}
.retro-disco-cover__monogram {
    position: relative; z-index: 1; margin-top: -12%; font-family: var(--rd-display); font-size: calc(var(--arch-h) * .42); line-height: 1;
    color: var(--inv-glow); text-shadow: 3px 3px 0 var(--inv-deep);
}
/* the age as a round sticker on the arch's corner */
.retro-disco-cover__age {
    position: absolute; right: calc(var(--ring) * -4 - .55rem); bottom: calc(var(--arch-h) * -.04); z-index: 3;
    display: grid; place-items: center; align-content: center; width: calc(var(--arch-h) * .36); min-width: 3.6rem; aspect-ratio: 1; margin: 0;
    border-radius: 50%; rotate: -10deg; line-height: 1;
    background: var(--inv-primary); color: var(--rd-ink-on-stripe);
    box-shadow: 0 0 0 3px var(--inv-deep), 0 10px 20px -10px rgb(0 0 0 / .7);
}
.retro-disco-cover__age::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--rd-ink-on-stripe) 45%, transparent); }
.retro-disco-cover__age span { font-size: .62rem; font-weight: 700; letter-spacing: .08em; }
.retro-disco-cover__age strong { font-family: var(--rd-display); font-weight: 400; font-size: calc(var(--arch-h) * .14); }

.retro-disco-cover__title {
    display: inline-flex; align-items: center; gap: .6rem; margin: 1.15rem 0 0; max-width: 100%;
    font-size: .72rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; line-height: 1.4; color: var(--inv-s1);
}
.retro-disco-cover__title::before, .retro-disco-cover__title::after { content: ''; width: 1.4rem; height: 2px; border-radius: 2px; background: currentColor; flex: none; }
.retro-disco-cover__name {
    margin: .3rem 0 0; font-family: var(--rd-display); font-weight: 400; font-size: 3.2rem; line-height: 1.1;
    color: var(--inv-glow); overflow-wrap: anywhere; letter-spacing: .01em;
    text-shadow: 3px 3px 0 var(--inv-s3), 6px 6px 0 var(--inv-s2);
}
.retro-disco-cover__date { display: inline-flex; align-items: center; gap: .45rem; margin: .7rem 0 0; font-size: .92rem; font-weight: 600; }
.retro-disco-cover__date .retro-disco-icon { color: var(--inv-s1); }
.retro-disco-cover__quote {
    max-width: 30ch; margin: .45rem auto 0; font-size: .9rem; font-style: italic; line-height: 1.45;
    color: color-mix(in srgb, var(--inv-glow) 80%, var(--inv-deep));
}
/* the guest's name on a little ticket with notches */
.retro-disco-cover__guest {
    width: min(100%, 17.5rem); margin: 1.05rem 0 0; padding: .5rem 1.2rem .6rem;
    background: color-mix(in srgb, var(--inv-glow) 10%, var(--inv-deep));
    border-radius: 10px;
    -webkit-mask: radial-gradient(circle at 0 50%, transparent 8px, #000 8.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 8px, #000 8.5px) right / 51% 100% no-repeat;
    mask: radial-gradient(circle at 0 50%, transparent 8px, #000 8.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 8px, #000 8.5px) right / 51% 100% no-repeat;
}
.retro-disco-cover__guest p { margin: 0; font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--inv-s1); }
.retro-disco-cover__guest-name { display: block; font-size: 1.12rem; font-weight: 700; line-height: 1.3; color: var(--inv-glow); overflow-wrap: anywhere; }

.retro-disco-cover__open.inv-button {
    margin-top: 1.1rem; min-height: 3.1rem; padding: .7rem 1.6rem; gap: .55rem;
    font-weight: 700; font-size: .98rem; letter-spacing: .01em;
    background: var(--inv-s1); color: var(--rd-ink-on-stripe);
    box-shadow: 0 0 0 3px var(--inv-deep), 0 0 0 5px color-mix(in srgb, var(--inv-s1) 55%, transparent), 0 14px 26px -12px rgb(0 0 0 / .8);
}
.retro-disco-cover__open .retro-disco-icon { width: 1.25rem; height: 1.25rem; }
.retro-disco-cover__open:focus-visible { outline: 2px solid var(--inv-glow); outline-offset: 6px; }

/* opening: the ball drops, the light spots scatter, the content fades, then the cover (≈1s in all) */
.retro-disco-cover--leave { transition: opacity .45s ease .55s; }
.retro-disco-cover--gone { opacity: 0; }
.retro-disco-cover--leave .inv-enter { animation: none !important; transition: opacity .35s ease .1s, translate .5s ease; }
.retro-disco-cover--gone .retro-disco-cover__inner > .inv-enter { opacity: 0; translate: 0 16px; }
.retro-disco-cover--gone .retro-disco-cover__arch { opacity: 0; translate: 0 10px; }
.retro-disco-cover--gone .retro-disco-cover__age { opacity: 0; }
.retro-disco-cover--leave .retro-disco-ball--cover { animation: none !important; transition: translate .8s cubic-bezier(.55, 0, .85, .35); }
.retro-disco-cover--gone .retro-disco-ball--cover { translate: 0 85svh; }
.retro-disco-cover--leave .retro-disco-cover__lights { transition: scale .95s cubic-bezier(.2, .7, .2, 1), opacity .95s ease; }
.retro-disco-cover--gone .retro-disco-cover__lights { scale: 2.6; opacity: 0; }
.retro-disco-cover--leave .retro-disco-cover__floor { transition: opacity .6s ease, filter .3s ease; }
.retro-disco-cover--gone .retro-disco-cover__floor { opacity: 0; filter: brightness(1.8); }

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

/* opening: a record with the tone arm, the greeting, the sentence */
.retro-disco-opening { padding-top: 3.8rem; }
.retro-disco-opening__deck { position: relative; width: 6.6rem; height: 5rem; margin: 0 auto 1.1rem; }
.retro-disco-opening__deck .retro-disco-record { position: absolute; left: 0; top: 0; }
.retro-disco-opening__arm { position: absolute; right: .9rem; top: -.2rem; width: 2.4rem; height: auto; overflow: visible; }
.retro-disco-opening__arm circle { fill: var(--inv-paper); stroke: var(--rd-muted); stroke-width: 2.5; }
.retro-disco-opening__arm path { fill: none; stroke: var(--rd-muted); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.retro-disco-opening__arm rect { fill: var(--inv-s3); }
.retro-disco-opening__greeting { margin: 0 auto .6rem !important; font-family: var(--rd-display); font-size: 1.6rem; line-height: 1.2; color: var(--rd-hot); }
.retro-disco-opening__message { color: var(--rd-muted); font-size: 1rem; }

/* celebrant: the LP (sleeve + record sliding out) */
.retro-disco-lp { position: relative; width: min(100%, 19rem); margin: 0 auto; padding-top: .9rem; }
.retro-disco-lp__record {
    --size: calc(min(100vw - 2.5rem, 19rem) * .66);
    --label: var(--inv-primary);
    position: absolute; left: 4%; top: calc(.9rem + 3%); z-index: 1;
    translate: 32% 0; transition: translate 1.1s cubic-bezier(.2, .7, .2, 1) .25s;
}
.retro-disco-lp__sleeve {
    position: relative; z-index: 2; width: 72%; aspect-ratio: 1; margin: 0; overflow: hidden;
    border-radius: 6px; background: var(--inv-deep); box-shadow: var(--rd-shadow), 6px 0 14px -10px rgb(0 0 0 / .6);
}
.retro-disco-lp__photo { position: absolute; inset: 0 0 20% 0; width: 100%; height: 80%; object-fit: cover; }
.retro-disco-lp__empty {
    position: absolute; inset: 0 0 20% 0; display: grid; place-items: center;
    background: radial-gradient(circle at 50% 115%, var(--inv-s1) 0 22%, var(--inv-s2) 22% 40%, var(--inv-s3) 40% 58%, var(--inv-s4) 58% 76%, color-mix(in srgb, var(--inv-deep) 82%, #000) 76%);
}
.retro-disco-lp__empty span { margin-top: -18%; font-family: var(--rd-display); font-size: 4.6rem; line-height: 1; color: var(--inv-glow); text-shadow: 3px 3px 0 var(--inv-deep); }
/* the album title strip at the bottom of the sleeve, under four thin stripes */
.retro-disco-lp__caption {
    position: absolute; left: 0; right: 0; bottom: 0; height: 20%; display: grid; place-items: center; padding: 0 .8rem;
    font-family: var(--rd-display); font-size: 1.3rem; line-height: 1.1; color: var(--inv-glow); background: var(--inv-deep);
    overflow-wrap: anywhere;
}
.retro-disco-lp__caption::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; background: var(--rd-stripes-y); }
.retro-disco-lp__sticker {
    position: absolute; left: -.5rem; top: 0; z-index: 3; display: grid; place-items: center;
    width: 5.6rem; aspect-ratio: 1; margin: 0; padding: .55rem; border-radius: 50%; rotate: -12deg;
    background: var(--inv-s1); color: var(--rd-ink-on-stripe); box-shadow: 0 8px 18px -8px rgb(0 0 0 / .6);
    font-size: .66rem; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; text-align: center;
}
.retro-disco-lp__sticker span { overflow-wrap: anywhere; }
.retro-disco-celebrant__name { margin: 1.6rem auto .7rem; max-width: 18ch; font-family: var(--rd-display); font-weight: 400; font-size: 1.7rem; line-height: 1.2; }
/* the album credits */
.retro-disco-credits { width: min(100%, 19rem); margin: 0 auto; text-align: left; }
.retro-disco-credits div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem 0; border-bottom: 1.5px dashed var(--rd-line); }
.retro-disco-credits dt { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rd-muted); }
.retro-disco-credits dd { margin: 0; font-weight: 700; text-align: right; }

/* message: liner notes with the stripes down the left edge */
.retro-disco-notes {
    position: relative; max-width: 22rem; margin: 0 auto; padding: 1.7rem 1.3rem 1.3rem 2.3rem; text-align: left;
    border-radius: 4px 20px 20px 4px; background: var(--inv-paper); box-shadow: var(--rd-shadow);
}
.retro-disco-notes::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; border-radius: 4px 0 0 4px; background: var(--rd-stripes-x); }
.retro-disco-notes__mark { position: absolute; right: 1rem; top: -1.1rem; font-family: var(--rd-display); font-size: 4.2rem; line-height: 1; color: var(--inv-s3); }
.retro-disco-notes__text { margin: 0; }
.retro-disco-notes__text p { margin: 0; font-size: 1rem; font-style: italic; line-height: 1.75; }
.retro-disco-notes__from { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; font-family: var(--rd-display); font-size: 1.15rem; color: var(--rd-hot); }
.retro-disco-notes__from::before { content: ''; width: 1.6rem; height: 2px; background: currentColor; }

/* events: records in their sleeves */
.retro-disco-events__list { display: grid; gap: 2.6rem; }
.retro-disco-sleeve { --rec: 8.4rem; --tone: var(--inv-s3); position: relative; padding-top: calc(var(--rec) * .7); }
.retro-disco-sleeve--1 { --tone: var(--inv-s3); }
.retro-disco-sleeve--2 { --tone: var(--inv-s2); }
.retro-disco-sleeve--3 { --tone: var(--inv-s1); }
.retro-disco-sleeve--4 { --tone: var(--inv-s4); }
.retro-disco-sleeve__record {
    --size: var(--rec); --label: var(--tone);
    position: absolute; left: 50%; top: 0; z-index: 0; margin-left: calc(var(--rec) / -2);
    transition: translate 1s cubic-bezier(.2, .7, .2, 1) .2s;
}
.retro-disco-sleeve__body {
    position: relative; z-index: 1; padding: 1.5rem 1.2rem 1.3rem; border-radius: 22px 22px 18px 18px;
    background: var(--inv-paper); box-shadow: var(--rd-shadow);
}
.retro-disco-sleeve__body::before {
    content: ''; position: absolute; left: 1.2rem; right: 1.2rem; top: 0; height: 9px; border-radius: 0 0 6px 6px;
    background: linear-gradient(var(--tone) 0 33%, transparent 0 50%, color-mix(in srgb, var(--tone) 55%, transparent) 0 83%, transparent 0);
}
.retro-disco-sleeve__side { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--rd-hot); }
.retro-disco-sleeve__photo { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin: .8rem 0 .2rem; border-radius: 14px; }
.retro-disco-sleeve__name { margin: .35rem 0 1rem; font-family: var(--rd-display); font-weight: 400; font-size: 1.5rem; line-height: 1.2; }
.retro-disco-sleeve__rows { display: grid; gap: .75rem; margin: 0 0 1.1rem; padding: 0; list-style: none; text-align: left; }
.retro-disco-sleeve__rows li { display: flex; align-items: flex-start; gap: .75rem; font-size: .95rem; line-height: 1.5; }
.retro-disco-sleeve__rows li > span:last-child { padding-top: .4rem; }
.retro-disco-sleeve__icon {
    display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; border-radius: 50%;
    color: var(--inv-text); background: color-mix(in srgb, var(--tone) 24%, var(--inv-paper)); box-shadow: inset 0 0 0 1.5px var(--tone);
}
.retro-disco-sleeve__venue { display: block; font-weight: 700; }
.retro-disco-sleeve__address { display: block; font-size: .88rem; color: var(--rd-muted); }
.retro-disco-sleeve .inv-maps .inv-button { width: 100%; min-height: 2.9rem; }
.retro-disco-sleeve .inv-maps__frame { height: 190px; border-radius: 14px; }

/* countdown: the hi-fi receiver */
.retro-disco-hifi {
    --metal: #d4d6dc;
    width: min(100%, 23rem); margin: 0 auto; padding: .9rem 1.5rem 1.05rem; border-radius: 14px; color: #2c2b33;
    background:
        repeating-linear-gradient(90deg, rgb(255 255 255 / .16) 0 1px, transparent 1px 3px),
        linear-gradient(#e7e8ec, #c3c6ce);
    box-shadow:
        inset 12px 0 0 var(--inv-deep), inset -12px 0 0 var(--inv-deep),
        inset 13.5px 0 0 color-mix(in srgb, var(--inv-glow) 18%, var(--inv-deep)), inset -13.5px 0 0 color-mix(in srgb, var(--inv-glow) 18%, var(--inv-deep)),
        var(--rd-shadow);
}
.retro-disco-hifi__top { display: flex; align-items: center; justify-content: space-between; padding: 0 .3rem .6rem; }
.retro-disco-hifi__brand { font-family: var(--rd-display); font-size: .95rem; letter-spacing: .02em; color: #3a3540; }
.retro-disco-hifi__lamp { width: .6rem; height: .6rem; border-radius: 50%; background: var(--inv-primary); box-shadow: 0 0 8px var(--inv-primary); }
.retro-disco-hifi__dial {
    position: relative; height: 2.5rem; border-radius: 6px; overflow: hidden;
    background:
        repeating-linear-gradient(90deg, rgb(255 179 71 / .45) 0 1px, transparent 1px 8px) 0 100% / 100% 30% no-repeat,
        linear-gradient(#1d1a1e, #121014);
    box-shadow: inset 0 2px 6px rgb(0 0 0 / .6);
}
.retro-disco-hifi__scale { position: absolute; left: .4rem; right: .4rem; top: .25rem; display: flex; justify-content: space-between; font-size: .62rem; font-weight: 700; color: #ffb347; letter-spacing: .04em; }
.retro-disco-hifi__scale i { font-style: normal; }
.retro-disco-hifi__needle { position: absolute; left: 58%; top: 0; bottom: 0; width: 2px; background: var(--inv-primary); box-shadow: 0 0 6px var(--inv-primary); }
.retro-disco-hifi__display { margin-top: .75rem; }
/* the LED window: amber digits with faint "8" segments behind them */
.retro-disco-led .inv-countdown {
    gap: 0; padding: .85rem .3rem .7rem; border-radius: 10px;
    background: radial-gradient(120% 140% at 50% 0, #2a1a10, #0f0a08 70%);
    box-shadow: inset 0 3px 10px rgb(0 0 0 / .8), 0 0 0 2px #8b8e97;
}
.retro-disco-led .inv-countdown__item { position: relative; flex: 1 1 0; min-width: 0; padding: 0; background: none; border-radius: 0; }
.retro-disco-led .inv-countdown__item + .inv-countdown__item::before {
    content: ''; position: absolute; left: 0; top: 18%; height: 42%; width: 1px; background: rgb(255 179 71 / .2);
}
.retro-disco-led .inv-countdown__value {
    position: relative; display: block; font-family: var(--rd-sans); font-size: 2.15rem; font-weight: 700; line-height: 1.1;
    font-variant-numeric: tabular-nums; letter-spacing: .04em; color: #ffb347; transform: skewX(-7deg);
    text-shadow: 0 0 6px rgb(255 150 50 / .75), 0 0 16px rgb(255 120 40 / .35);
}
.retro-disco-led .inv-countdown__value::before {
    content: attr(data-ghost); position: absolute; inset: 0; z-index: -1; color: rgb(255 179 71 / .08); text-shadow: none;
}
.retro-disco-led .inv-countdown__label { margin-top: .3rem; font-size: .6rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgb(255 179 71 / .72); opacity: 1; }
.retro-disco-led .inv-countdown__done { margin: 0; padding: 1rem; border-radius: 10px; background: #120c09; color: #ffb347; font-weight: 600; }
/* "Simpan ke kalender" as the receiver's push buttons */
.retro-disco-led .inv-countdown__actions { gap: .5rem; margin-top: .85rem; }
.retro-disco-led .inv-countdown__actions .inv-button {
    flex: 1 1 9rem; min-height: 2.75rem; padding: .5rem .7rem; border-radius: 7px;
    font-size: .78rem; font-weight: 700; line-height: 1.25; color: #2c2b33;
    background: linear-gradient(#fbfbfc, #d2d4da); box-shadow: 0 3px 0 #8d9099, inset 0 0 0 1px #a7aab3;
}
.retro-disco-led .inv-countdown__actions .inv-button:active { transform: translateY(2px); box-shadow: 0 1px 0 #8d9099, inset 0 0 0 1px #a7aab3; }
.retro-disco-hifi__knobs { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .9rem; padding: 0 .2rem; }
.retro-disco-hifi__knob {
    position: relative; width: 2.2rem; height: 2.2rem; border-radius: 50%;
    background: conic-gradient(#f6f6f8, #9b9ea8, #f0f1f4, #8d909a, #f6f6f8);
    box-shadow: 0 3px 6px rgb(0 0 0 / .35), inset 0 0 0 4px rgb(255 255 255 / .35);
}
.retro-disco-hifi__knob::after { content: ''; position: absolute; left: 50%; top: 4px; width: 2px; height: 30%; margin-left: -1px; background: #3a3540; border-radius: 2px; }
.retro-disco-hifi__knob:last-child { rotate: 120deg; }
.retro-disco-hifi__bars { display: flex; align-items: flex-end; gap: 4px; height: 1.6rem; }
.retro-disco-hifi__bars i { width: 6px; height: 100%; border-radius: 2px; transform-origin: bottom; background: var(--inv-s3); }
.retro-disco-hifi__bars i:nth-child(4n + 1) { background: var(--inv-s1); scale: 1 .55; }
.retro-disco-hifi__bars i:nth-child(4n + 2) { background: var(--inv-s2); scale: 1 .8; }
.retro-disco-hifi__bars i:nth-child(4n + 3) { background: var(--inv-s3); scale: 1 .4; }
.retro-disco-hifi__bars i:nth-child(4n) { background: var(--inv-s4); scale: 1 .7; }
.retro-disco-countdown .inv-cal {
    --inv-cal-bg: var(--inv-paper); --inv-cal-text: var(--inv-text); --inv-cal-mark: var(--rd-hot);
    margin-top: 2.2rem; border-radius: 16px; box-shadow: var(--rd-shadow);
}

/* party: the gig poster */
.retro-disco-poster {
    position: relative; isolation: isolate; overflow: hidden; padding: 1.9rem 1.15rem 1.35rem; border-radius: 26px;
    background: var(--inv-deep); color: var(--inv-glow); box-shadow: var(--rd-shadow);
}
.retro-disco-poster__burst {
    position: absolute; left: 50%; top: 3.6rem; z-index: -1; width: 46rem; aspect-ratio: 1; translate: -50% -50%;
    background: repeating-conic-gradient(color-mix(in srgb, var(--inv-s2) 20%, transparent) 0 7.5deg, transparent 7.5deg 15deg);
    -webkit-mask: radial-gradient(circle, #000 8%, transparent 42%); mask: radial-gradient(circle, #000 8%, transparent 42%);
}
.retro-disco-poster__label { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-s1); }
.retro-disco-poster__theme-name {
    margin: .25rem 0 0; font-family: var(--rd-display); font-size: 2rem; line-height: 1.15; overflow-wrap: anywhere;
    text-shadow: 2px 2px 0 var(--inv-s3), 4px 4px 0 var(--inv-s4);
}
.retro-disco-poster__dress { margin-top: 1.4rem; padding: 1rem .9rem .9rem; border-radius: 18px; background: color-mix(in srgb, var(--inv-glow) 8%, var(--inv-deep)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-glow) 14%, transparent); }
.retro-disco-poster__dress-head { display: flex; align-items: center; justify-content: center; gap: .85rem; text-align: left; }
.retro-disco-poster__shirt {
    display: grid; place-items: center; width: 3.4rem; height: 3.4rem; flex: none; border-radius: 50%;
    background: color-mix(in srgb, var(--inv-glow) 92%, var(--inv-deep));
}
.retro-disco-poster__shirt .retro-disco-icon { width: 2rem; height: 2rem; fill: var(--retro-disco-pick, var(--inv-s2)); stroke: #2c2b33; stroke-width: 1.3; transition: fill .35s ease; }
.retro-disco-poster__dress-name { margin: .1rem 0 0; font-size: 1.02rem; font-weight: 700; line-height: 1.35; }
.retro-disco-swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1rem; }
/* each color as a little colored vinyl record */
.retro-disco-swatch {
    width: 3rem; height: 3rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background:
        radial-gradient(circle, #1d1714 0 5%, color-mix(in srgb, var(--retro-disco-swatch) 75%, #fff) 6% 26%, transparent 27%),
        repeating-radial-gradient(circle, color-mix(in srgb, var(--retro-disco-swatch) 88%, #000) 0 1.5px, var(--retro-disco-swatch) 1.5px 3px);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--inv-glow) 30%, transparent), 0 6px 12px -6px rgb(0 0 0 / .7);
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.retro-disco-swatch[aria-pressed="true"] { transform: scale(1.14) rotate(200deg); box-shadow: 0 0 0 3px var(--inv-s1), 0 0 18px color-mix(in srgb, var(--inv-s1) 55%, transparent); }
.retro-disco-swatch:focus-visible { outline: 2px solid var(--inv-glow); outline-offset: 4px; }
.retro-disco-poster__hint { margin: .75rem 0 0; font-size: .8rem; color: color-mix(in srgb, var(--inv-glow) 78%, var(--inv-deep)); }
.retro-disco-party__note {
    display: flex; gap: .6rem; align-items: flex-start; max-width: 22rem !important; margin: 1.3rem auto 0 !important; padding: .9rem 1rem;
    border-radius: 16px; background: var(--inv-paper); text-align: left; font-size: .93rem; box-shadow: inset 0 0 0 1.5px var(--rd-line);
}
.retro-disco-party__note .retro-disco-icon { margin-top: .15rem; color: var(--rd-hot); }
.retro-disco-party__hashtag {
    display: inline-flex; align-items: center; gap: .55rem; max-width: 100%; margin-top: 1.2rem; padding: .3rem .3rem .3rem 1.1rem;
    border-radius: 999px; background: var(--inv-paper); box-shadow: inset 0 0 0 1.5px var(--rd-line);
}
.retro-disco-party__hashtag-text { font-weight: 700; color: var(--rd-hot); overflow-wrap: anywhere; }
.retro-disco-party__copy {
    min-height: 2.75rem; padding: 0 1.05rem; border: 0; border-radius: 999px; cursor: pointer;
    font: 700 .82rem var(--rd-sans); background: var(--inv-btn); color: var(--inv-btnink);
}
.retro-disco-party__copy:focus-visible { outline: 2px solid var(--rd-hot); outline-offset: 2px; }
.retro-disco-party__hint { margin-top: .55rem !important; font-size: .8rem; color: var(--rd-muted); }

/* rundown: the tracklist with Side A and Side B */
.retro-disco-tracklist {
    position: relative; display: grid; gap: 1.25rem; max-width: 24rem; margin: 0 auto; padding: 1.4rem 1.15rem 1.3rem; text-align: left;
    border-radius: 10px; background: var(--inv-paper); box-shadow: var(--rd-shadow);
}
.retro-disco-tracklist::before {
    content: 'Stereo'; position: absolute; right: 1rem; top: 1.05rem; padding: .1rem .45rem; border-radius: 4px;
    font-size: .58rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--rd-muted); box-shadow: inset 0 0 0 1px var(--rd-line);
}
.retro-disco-tracklist__side + .retro-disco-tracklist__side { padding-top: 1.15rem; border-top: 1.5px dashed var(--rd-line); }
.retro-disco-tracklist__head { display: flex; align-items: center; gap: .55rem; margin: 0; font-family: var(--rd-display); font-size: 1.3rem; line-height: 1.2; color: var(--rd-hot); }
.retro-disco-tracklist__side:nth-child(2) .retro-disco-record { --label: var(--inv-s2); }
.retro-disco-tracklist__list { display: grid; gap: .8rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.retro-disco-track { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: .6rem; align-items: start; }
.retro-disco-track__no {
    display: grid; place-items: center; height: 1.6rem; margin-top: .05rem; border-radius: 6px;
    font-size: .74rem; font-weight: 700; color: var(--rd-ink-on-stripe); background: var(--inv-s1);
}
.retro-disco-tracklist__side:nth-child(2) .retro-disco-track__no { background: var(--inv-s2); }
.retro-disco-track__line { display: flex; align-items: baseline; gap: .45rem; margin: 0; }
.retro-disco-track__title { font-weight: 700; line-height: 1.35; }
.retro-disco-track__dots { flex: 1 1 1rem; min-width: 1rem; border-bottom: 2px dotted color-mix(in srgb, var(--inv-text) 30%, transparent); translate: 0 -.25rem; transform-origin: left; }
.retro-disco-track__time { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rd-hot); }
.retro-disco-track__desc { margin: .1rem 0 0; font-size: .86rem; line-height: 1.45; color: var(--rd-muted); }

/* story: a stack of singles joined by a groove line */
.retro-disco-singles { position: relative; display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.retro-disco-singles::before {
    content: ''; position: absolute; left: calc(2.4rem - 1.5px); top: 2.6rem; bottom: 2.6rem; width: 3px; transform-origin: top;
    background: repeating-linear-gradient(var(--inv-s2) 0 8px, transparent 8px 14px);
}
.retro-disco-single { position: relative; display: grid; grid-template-columns: 4.8rem minmax(0, 1fr); gap: .85rem; align-items: start; }
.retro-disco-single--1 { --tone: var(--inv-s1); }
.retro-disco-single--2 { --tone: var(--inv-s2); }
.retro-disco-single--3 { --tone: var(--inv-s3); }
.retro-disco-single--4 { --tone: var(--inv-s4); }
.retro-disco-single__record { --size: 4.8rem; --label: var(--tone); transition: rotate 1s cubic-bezier(.2, .7, .2, 1), translate 1s cubic-bezier(.2, .7, .2, 1); }
.retro-disco-single:nth-child(2) .retro-disco-single__record { transition-delay: .15s; }
.retro-disco-single:nth-child(3) .retro-disco-single__record { transition-delay: .3s; }
.retro-disco-single:nth-child(n + 4) .retro-disco-single__record { transition-delay: .45s; }
.retro-disco-single__card { padding: .95rem 1.05rem 1rem; border-radius: 16px; background: var(--inv-paper); box-shadow: var(--rd-shadow-sm), inset 3px 0 0 var(--tone); }
.retro-disco-single__year { margin: 0; font-family: var(--rd-display); font-size: 1.3rem; line-height: 1.1; color: var(--rd-hot); }
.retro-disco-single__card h3 { margin: .2rem 0 .3rem; font-size: 1.02rem; line-height: 1.35; }
.retro-disco-single__card p:not(.retro-disco-single__year) { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--rd-muted); }
.retro-disco-single__photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-top: .75rem; border-radius: 12px; }

/* gallery: photos in 70s shapes (arches on a diagonal) with a thin stripe ring */
.retro-disco-gallery .inv-gallery { gap: .9rem; padding: 5px; }
.retro-disco-gallery .inv-gallery__item { --tone: var(--inv-s2); border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 3px var(--inv-paper), 0 0 0 5px var(--tone); }
.retro-disco-gallery .inv-gallery__item:nth-child(4n + 1), .retro-disco-gallery .inv-gallery__item:nth-child(4n) { border-radius: 999px 999px 16px 16px; }
.retro-disco-gallery .inv-gallery__item:nth-child(4n + 1) { --tone: var(--inv-s3); }
.retro-disco-gallery .inv-gallery__item:nth-child(4n + 2) { --tone: var(--inv-s1); }
.retro-disco-gallery .inv-gallery__item:nth-child(4n) { --tone: var(--inv-s4); }

/* live streaming: a 70s television */
.retro-disco-tv { position: relative; width: min(100%, 19rem); margin: 0 auto; padding-top: 2.4rem; }
.retro-disco-tv__antenna { position: absolute; left: 50%; top: 0; width: 6rem; height: 2.6rem; translate: -50% 0; }
.retro-disco-tv__antenna::before, .retro-disco-tv__antenna::after {
    content: ''; position: absolute; bottom: 0; left: 50%; width: 3px; height: 2.8rem; border-radius: 3px; background: var(--rd-muted); transform-origin: bottom;
}
.retro-disco-tv__antenna::before { rotate: -32deg; }
.retro-disco-tv__antenna::after { rotate: 30deg; }
.retro-disco-tv__set {
    display: grid; grid-template-columns: minmax(0, 1fr) 1.6rem; gap: .8rem; align-items: center; padding: 1rem;
    border-radius: 34px; background: var(--inv-deep); box-shadow: var(--rd-shadow), inset 0 -6px 0 color-mix(in srgb, #000 25%, var(--inv-deep));
}
.retro-disco-tv__screen {
    position: relative; overflow: hidden; padding: 1.3rem .9rem 1.1rem; border-radius: 30px / 24px; color: var(--inv-glow);
    background:
        repeating-linear-gradient(rgb(255 255 255 / .045) 0 2px, transparent 2px 4px),
        radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--inv-glow) 20%, var(--inv-deep)), color-mix(in srgb, var(--inv-glow) 5%, var(--inv-deep)) 75%);
    box-shadow: inset 0 0 0 3px color-mix(in srgb, #000 30%, var(--inv-deep));
}
.retro-disco-tv__screen p { margin: .6rem 0 0; font-size: .9rem; line-height: 1.45; }
.retro-disco-tv__play { display: inline-grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--inv-s1); color: var(--rd-ink-on-stripe); }
.retro-disco-tv__play .retro-disco-icon { width: 1.8rem; height: 1.8rem; }
.retro-disco-tv__knobs { display: grid; gap: .7rem; }
.retro-disco-tv__knobs i { display: block; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6 0 20%, transparent 21%), var(--inv-s1); }
.retro-disco-tv__knobs i + i { background: radial-gradient(circle at 35% 35%, #fff6 0 20%, transparent 21%), var(--inv-s3); }
.retro-disco-stream__note { margin: 1.1rem auto 0 !important; font-size: .9rem; color: var(--rd-muted); }
.retro-disco-stream__button.inv-button { margin-top: 1rem; min-height: 2.9rem; font-weight: 700; background: var(--inv-btn); color: var(--inv-btnink); }

/* gift: cassette tapes, two per row, and an airmail address card */
.retro-disco-gift__intro { color: var(--rd-muted); margin-bottom: 1.4rem !important; }
.retro-disco-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.4rem), 1fr)); gap: .8rem; }
.retro-disco-gift .inv-gift__accounts .inv-gift__account {
    --tone: var(--inv-s2);
    position: relative; margin: 0; padding: 3.2rem .75rem .85rem; border-radius: 12px; text-align: center;
    background: var(--inv-deep); color: var(--inv-glow);
    box-shadow: var(--rd-shadow-sm), inset 0 7px 0 var(--tone);
}
.retro-disco-gift .inv-gift__accounts .inv-gift__account:nth-child(3n + 2) { --tone: var(--inv-s3); }
.retro-disco-gift .inv-gift__accounts .inv-gift__account:nth-child(3n) { --tone: var(--inv-s1); }
/* the window with the two reels */
.retro-disco-gift .inv-gift__accounts .inv-gift__account::before {
    content: ''; position: absolute; left: 50%; top: 1rem; width: 72%; height: 1.75rem; translate: -50% 0; border-radius: 999px;
    background:
        radial-gradient(circle at 22% 50%, var(--inv-deep) 0 .22rem, var(--inv-glow) .24rem .5rem, transparent .53rem),
        radial-gradient(circle at 78% 50%, var(--inv-deep) 0 .22rem, var(--inv-glow) .24rem .5rem, transparent .53rem),
        linear-gradient(90deg, transparent 32%, color-mix(in srgb, var(--tone) 70%, transparent) 32% 68%, transparent 68%) 50% 50% / 100% 30% no-repeat,
        color-mix(in srgb, var(--inv-glow) 16%, var(--inv-deep));
}
.retro-disco-gift .inv-gift__bank { margin: 0 0 .35rem; font-weight: 700; font-size: .9rem; }
.retro-disco-gift .inv-gift__number { margin: 0; font-size: 1.02rem; font-weight: 700; letter-spacing: .04em; overflow-wrap: anywhere; }
.retro-disco-gift .inv-gift__holder { margin: .15rem 0 .7rem; font-size: .8rem; color: color-mix(in srgb, var(--inv-glow) 80%, var(--inv-deep)); overflow-wrap: anywhere; }
.retro-disco-gift .inv-gift__accounts .inv-button--outline {
    width: 100%; min-height: 2.75rem; padding: .45rem .5rem; font-size: .8rem; font-weight: 700;
    color: var(--inv-glow); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-glow) 45%, transparent);
}
.retro-disco-gift .inv-gift__address {
    margin-top: .95rem; padding: 1.1rem 1rem 1rem; border-radius: 14px; text-align: center; color: var(--inv-text);
    border: 7px solid transparent;
    background:
        linear-gradient(var(--inv-paper), var(--inv-paper)) padding-box,
        repeating-linear-gradient(-45deg, var(--inv-s3) 0 10px, var(--inv-paper) 10px 15px, var(--inv-s2) 15px 25px, var(--inv-paper) 25px 30px) border-box;
}
.retro-disco-gift .inv-gift__address .inv-gift__bank { font-family: var(--rd-display); font-weight: 400; font-size: 1.2rem; color: var(--rd-hot); }
.retro-disco-gift .inv-gift__address .inv-gift__holder { color: var(--inv-text); font-weight: 700; font-size: .92rem; margin-bottom: .2rem; }
.retro-disco-gift .inv-gift__address p { margin: .2rem 0; font-size: .92rem; }
.retro-disco-gift .inv-gift__address .inv-button--outline { min-height: 2.75rem; margin-top: .6rem; padding: .5rem 1.3rem; font-weight: 700; color: var(--inv-text); box-shadow: inset 0 0 0 1.5px var(--rd-line); }

/* wishlist: singles in paper sleeves that slide out */
.retro-disco-wishlist__intro { color: var(--rd-muted); font-size: .9rem; }
.retro-disco-wishlist__list { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.retro-disco-wishlist__item { --tone: var(--inv-s3); border-radius: 16px; background: var(--inv-paper); box-shadow: var(--rd-shadow-sm); overflow: hidden; }
.retro-disco-wishlist__item--2 { --tone: var(--inv-s2); }
.retro-disco-wishlist__item--3 { --tone: var(--inv-s1); }
.retro-disco-wishlist__item--4 { --tone: var(--inv-s4); }
.retro-disco-wishlist__head {
    display: grid; grid-template-columns: 5rem minmax(0, 1fr) 2rem; align-items: center; gap: .7rem; width: 100%; min-height: 4.8rem;
    padding: .75rem .9rem; border: 0; background: none; color: var(--inv-text); font: inherit; text-align: left; cursor: pointer;
}
.retro-disco-wishlist__head:focus-visible { outline: 2px solid var(--rd-hot); outline-offset: -4px; border-radius: 16px; }
.retro-disco-wishlist__single { position: relative; width: 5rem; height: 3.4rem; }
.retro-disco-wishlist__sleeve {
    position: absolute; left: 0; top: 0; z-index: 1; width: 3.4rem; height: 3.4rem; border-radius: 5px;
    background: radial-gradient(circle, color-mix(in srgb, var(--tone) 55%, #000) 0 17%, transparent 18%), var(--tone);
    box-shadow: 3px 0 6px -3px rgb(0 0 0 / .45);
}
.retro-disco-wishlist__record { --size: 3.1rem; --label: var(--tone); position: absolute; left: .15rem; top: .15rem; transition: translate .5s cubic-bezier(.2, .7, .2, 1), rotate .5s ease; }
.retro-disco-wishlist__item.is-open .retro-disco-wishlist__record { translate: 1.6rem 0; rotate: 120deg; }
.retro-disco-wishlist__label { display: grid; }
.retro-disco-wishlist__number { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--rd-hot); }
.retro-disco-wishlist__name { font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.retro-disco-wishlist__toggle { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--rd-line); transition: rotate .3s ease; }
.retro-disco-wishlist__item.is-open .retro-disco-wishlist__toggle { rotate: 180deg; }
.retro-disco-wishlist__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s ease; }
.retro-disco-wishlist__item.is-closed .retro-disco-wishlist__body { grid-template-rows: 0fr; }
.retro-disco-wishlist__inner { min-height: 0; overflow: hidden; padding: 0 1rem; }
.retro-disco-wishlist__item.is-open .retro-disco-wishlist__inner, .retro-disco-wishlist__item:not(.is-closed) .retro-disco-wishlist__inner { padding-bottom: 1rem; }
.retro-disco-wishlist__photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.retro-disco-wishlist__note { margin: .6rem 0 0; font-size: .92rem; color: var(--rd-muted); }
.retro-disco-wishlist__shop.inv-button { margin-top: .75rem; min-height: 2.75rem; font-size: .88rem; font-weight: 700; background: var(--inv-btn); color: var(--inv-btnink); }

/* co-hosts: the "featuring" line-up */
.retro-disco-lineup { display: flex; flex-direction: column; align-items: center; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.retro-disco-lineup__name { max-width: 100%; overflow-wrap: anywhere; line-height: 1.3; }
.retro-disco-lineup__name:nth-child(odd) { font-family: var(--rd-display); font-size: 1.32rem; }
.retro-disco-lineup__name:nth-child(even) { font-size: .86rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--rd-hot); }
.retro-disco-lineup__name + .retro-disco-lineup__name::before {
    content: ''; display: block; width: .8rem; height: .8rem; margin: .35rem auto .45rem; background: var(--inv-s2);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

/* contacts: hotline cards with a rotary dial */
.retro-disco-contacts__list { display: grid; gap: .9rem; }
.retro-disco-hotline {
    display: grid; grid-template-columns: 3.9rem minmax(0, 1fr); align-items: center; gap: .9rem; padding: 1rem;
    border-radius: 20px; background: var(--inv-paper); box-shadow: var(--rd-shadow-sm); text-align: left;
}
.retro-disco-hotline__dial {
    position: relative; display: grid; place-items: center; width: 3.9rem; height: 3.9rem; border-radius: 50%;
    background: var(--inv-s2); color: var(--rd-ink-on-stripe);
}
.retro-disco-hotline__dial::before {
    content: ''; position: absolute; inset: 4px; border-radius: 50%;
    background: repeating-conic-gradient(from 8deg, color-mix(in srgb, #fff 60%, transparent) 0 18deg, transparent 18deg 32deg);
    -webkit-mask: radial-gradient(circle, transparent 0 52%, #000 53% 92%, transparent 93%); mask: radial-gradient(circle, transparent 0 52%, #000 53% 92%, transparent 93%);
}
.retro-disco-hotline__dial span { position: relative; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--inv-paper); color: var(--inv-text); font-family: var(--rd-display); font-size: 1rem; }
.retro-disco-hotline__name { margin: 0; font-weight: 700; font-size: 1.02rem; overflow-wrap: anywhere; }
.retro-disco-hotline__role { margin: .1rem 0 0; font-size: .85rem; color: var(--rd-muted); }
.retro-disco-hotline__button.inv-button { grid-column: 1 / -1; min-height: 2.9rem; font-weight: 700; background: var(--inv-btn); color: var(--inv-btnink); }
.retro-disco-hotline__phone { grid-column: 1 / -1; margin: 0; font-weight: 700; text-align: center; }

/* health protocol: round stickers */
.retro-disco-protocol__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.retro-disco-protocol__list li {
    display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .45rem 1rem; border-radius: 999px;
    background: var(--inv-paper); box-shadow: inset 0 0 0 2px var(--inv-s2); font-size: .9rem; font-weight: 600;
}
.retro-disco-protocol__list li:nth-child(even) { box-shadow: inset 0 0 0 2px var(--inv-s3); }
.retro-disco-protocol__list .retro-disco-icon { color: var(--rd-hot); }
.retro-disco-protocol__note { margin-top: 1rem !important; color: var(--rd-muted); }

/* vendors: album credits */
.retro-disco-vendors__list { max-width: 24rem; margin: 0 auto; padding: .4rem 1.1rem; list-style: none; text-align: left; border-radius: 10px; background: var(--inv-paper); box-shadow: var(--rd-shadow-sm); }
.retro-disco-vendor { display: flex; align-items: baseline; gap: .5rem; padding: .75rem 0; }
.retro-disco-vendor + .retro-disco-vendor { border-top: 1.5px dashed var(--rd-line); }
.retro-disco-vendor__role { flex: 0 1 auto; max-width: 45%; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rd-muted); }
.retro-disco-vendor__dots { flex: 1 1 .8rem; min-width: .8rem; border-bottom: 2px dotted color-mix(in srgb, var(--inv-text) 25%, transparent); }
.retro-disco-vendor__who { display: grid; justify-items: end; text-align: right; max-width: 55%; }
.retro-disco-vendor__name { font-weight: 700; font-size: .95rem; line-height: 1.35; overflow-wrap: anywhere; }
.retro-disco-vendor__link { display: inline-flex; align-items: center; min-height: 1.9rem; font-size: .82rem; font-weight: 600; color: var(--rd-hot); overflow-wrap: anywhere; }

/* closing: the last song, on an arched stage */
.retro-disco-closing { padding-bottom: 0; }
.retro-disco-closing__stage {
    position: relative; isolation: isolate; overflow: hidden; padding: 4rem 1.3rem 1.6rem;
    border-radius: 999px 999px 28px 28px / 13rem 13rem 28px 28px;
    background: radial-gradient(120% 70% at 50% 0, color-mix(in srgb, var(--inv-s2) 22%, var(--inv-deep)), var(--inv-deep) 70%);
    color: var(--inv-glow); box-shadow: var(--rd-shadow);
}
.retro-disco-ball--closing { --ball: 3rem; margin: 0 auto 1.1rem; }
.retro-disco-ball--closing .retro-disco-ball__string { height: 4.2rem; }
.retro-disco-closing__record { --size: min(15rem, 62vw); margin: 0 auto; }
/* sunset rings behind the record */
.retro-disco-closing__arch {
    position: absolute; left: 50%; top: calc(4rem + 4.1rem + min(15rem, 62vw) / 2); z-index: -1; width: min(15rem, 62vw); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
    box-shadow: 0 0 0 9px var(--inv-s1), 0 0 0 18px var(--inv-s2), 0 0 0 27px var(--inv-s3), 0 0 0 36px var(--inv-s4);
}
.retro-disco-closing__label { width: 46%; background: var(--inv-s1); }
.retro-disco-closing__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.retro-disco-closing__initial { font-family: var(--rd-display); font-size: 2.6rem; color: var(--rd-ink-on-stripe); }
.retro-disco-closing__message { max-width: 30ch; margin: 3.4rem auto 0; font-size: 1rem; line-height: 1.7; }
.retro-disco-closing__signature { margin: 1.3rem 0 0; font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-s1); }
.retro-disco-closing__name {
    margin: .2rem 0 0; font-family: var(--rd-display); font-size: 2.4rem; line-height: 1.15; overflow-wrap: anywhere;
    text-shadow: 3px 3px 0 var(--inv-s3), 6px 6px 0 var(--inv-s2);
}
.retro-disco-bands--closing { margin-top: 1.2rem; }

/* ---------- 5. forms (shared RSVP + wishes, restyled) ---------- */
.retro-disco-main .inv-form { --field-bg: var(--rd-field); --field-text: var(--inv-text); --field-ring: color-mix(in srgb, var(--inv-text) 22%, transparent); --field-label: var(--rd-muted); gap: 1rem; }
.retro-disco-main .inv-form label, .retro-disco-main .inv-form__choices legend {
    font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--field-label);
}
.retro-disco-main .inv-form input:not([type=radio]):not([type=checkbox]),
.retro-disco-main .inv-form select,
.retro-disco-main .inv-form textarea {
    width: 100%; min-height: 2.95rem; margin-top: .3rem; padding: .7rem .95rem; border: 0; border-radius: 12px;
    font: 500 .98rem/1.4 var(--rd-sans); letter-spacing: 0; text-transform: none; color: var(--field-text); background: var(--field-bg);
    box-shadow: inset 0 0 0 1.5px var(--field-ring); transition: box-shadow .2s ease;
}
.retro-disco-main .inv-form select {
    appearance: none; padding-right: 2.4rem;
    background: var(--field-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .8rem center / 1.1rem no-repeat;
}
.retro-disco-main .inv-form select option { color: #222; background: #fff; }
.retro-disco-main .inv-form input:not([type=radio]):focus-visible,
.retro-disco-main .inv-form select:focus-visible,
.retro-disco-main .inv-form textarea:focus-visible {
    outline: none; box-shadow: inset 0 0 0 2px var(--rd-hot), 0 0 0 4px color-mix(in srgb, var(--inv-s1) 45%, transparent);
}
.retro-disco-main .inv-form button[type=submit] {
    width: 100%; min-height: 3.1rem; font-weight: 700; font-size: 1rem; background: var(--inv-btn); color: var(--inv-btnink);
    box-shadow: 0 4px 0 color-mix(in srgb, var(--inv-btn) 60%, #000);
}
.retro-disco-main .inv-form .inv-button--outline { width: 100%; min-height: 2.9rem; font-weight: 700; color: var(--inv-text); box-shadow: inset 0 0 0 1.5px var(--field-ring); }
.retro-disco-main .inv-form__notice { text-align: center; color: var(--inv-text); background: color-mix(in srgb, var(--inv-s1) 24%, var(--inv-paper)); }
.retro-disco-main .inv-form__error { color: #8f1d14; background: #fde5e2; }
.retro-disco-main .inv-rsvp__deadline { margin: 0 0 .8rem; font-size: .84rem; text-align: center; color: var(--rd-muted); }

/* RSVP: the dance-floor pass */
.retro-disco-pass { position: relative; max-width: 23rem; margin: 2.6rem auto 0; border-radius: 22px; background: var(--inv-paper); box-shadow: var(--rd-shadow); text-align: left; }
/* the lanyard strap and the punched slot */
.retro-disco-pass__slot { position: absolute; left: 50%; top: .85rem; z-index: 2; width: 3.4rem; height: .7rem; translate: -50% 0; border-radius: 999px; background: color-mix(in srgb, var(--inv-background) 70%, #000 0%); box-shadow: inset 0 2px 3px rgb(0 0 0 / .45); }
.retro-disco-pass__slot::before {
    content: ''; position: absolute; left: 50%; bottom: .35rem; width: 1.5rem; height: 3.2rem; translate: -50% 0; border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, var(--inv-s2) 0 33%, var(--inv-s3) 0 66%, var(--inv-s1) 0);
}
.retro-disco-pass__head {
    position: relative; overflow: hidden; padding: 2.1rem 1.2rem 1.4rem; border-radius: 22px 22px 0 0;
    background: var(--inv-deep); color: var(--inv-glow); text-align: center;
}
.retro-disco-pass__head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--rd-stripes-y); }
.retro-disco-pass__kind { margin: 0; font-family: var(--rd-display); font-size: 1.55rem; line-height: 1.2; text-shadow: 2px 2px 0 var(--inv-s3); }
.retro-disco-pass__guest { margin: .45rem 0 .2rem; }
.retro-disco-pass__guest span:first-child { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-s1); }
.retro-disco-pass__guest-name { display: block; font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }
.retro-disco-pass__body { padding: 1.3rem 1.15rem 1.1rem; }
.retro-disco-pass__intro { margin: 0 0 1.1rem; text-align: center; color: var(--rd-muted); font-size: .95rem; }
.retro-disco-pass__foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.2rem 1rem; border-top: 2px dashed var(--rd-line); }
.retro-disco-pass__foot::before, .retro-disco-pass__foot::after { content: ''; position: absolute; top: -.7rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--inv-background); }
.retro-disco-pass__foot::before { left: -.65rem; }
.retro-disco-pass__foot::after { right: -.65rem; }
.retro-disco-pass__barcode { width: 8rem; height: 1.6rem; background: repeating-linear-gradient(90deg, var(--inv-text) 0 2px, transparent 2px 4px, var(--inv-text) 4px 5px, transparent 5px 8px, var(--inv-text) 8px 11px, transparent 11px 13px); opacity: .7; }
.retro-disco-pass__admit { font-size: .7rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--rd-hot); }

/* the three answers as light-up dance-floor tiles (the radio is hidden but still focusable) */
.retro-disco-pass .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.retro-disco-pass .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.retro-disco-pass .inv-form__choices label {
    --tile: var(--inv-s1);
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .4rem;
    min-height: 5.6rem; padding: .75rem .3rem .7rem; border-radius: 10px; cursor: pointer; text-align: center; overflow: hidden;
    font-size: .84rem; font-weight: 700; letter-spacing: 0; text-transform: none; line-height: 1.2; color: var(--inv-text);
    background:
        linear-gradient(90deg, transparent calc(50% - .75px), var(--rd-line) calc(50% - .75px) calc(50% + .75px), transparent 0),
        linear-gradient(transparent calc(50% - .75px), var(--rd-line) calc(50% - .75px) calc(50% + .75px), transparent 0),
        var(--rd-field);
    box-shadow: inset 0 0 0 1.5px var(--rd-line);
    transition: background-color .25s ease, color .25s ease, box-shadow .3s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.retro-disco-pass .inv-form__choices label:nth-of-type(2) { --tile: var(--inv-s3); }
.retro-disco-pass .inv-form__choices label:nth-of-type(3) { --tile: var(--inv-s2); }
.retro-disco-pass .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* icon: a round lamp (::before) with a check, a cross or a question mark (::after, a mask in the text color) */
.retro-disco-pass .inv-form__choices label::before {
    content: ''; width: 2.2rem; height: 2.2rem; margin-bottom: auto; border-radius: 50%; flex: none;
    background: color-mix(in srgb, var(--tile) 30%, transparent); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease;
}
.retro-disco-pass .inv-form__choices label::after {
    content: ''; position: absolute; left: 50%; top: 1.25rem; width: 1.2rem; height: 1.2rem; margin-left: -.6rem;
    background: currentColor; pointer-events: none;
    -webkit-mask: var(--rd-choice-icon) center / contain no-repeat; mask: var(--rd-choice-icon) center / contain no-repeat;
}
.retro-disco-pass .inv-form__choices label:nth-of-type(1) {
    --rd-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.retro-disco-pass .inv-form__choices label:nth-of-type(2) {
    --rd-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");
}
.retro-disco-pass .inv-form__choices label:nth-of-type(3) {
    --rd-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");
}
/* lit: the tile glows in its color */
.retro-disco-pass .inv-form__choices label:has(input:checked) {
    color: var(--rd-ink-on-stripe); transform: translateY(-3px);
    background:
        linear-gradient(90deg, transparent calc(50% - .75px), rgb(255 255 255 / .45) calc(50% - .75px) calc(50% + .75px), transparent 0),
        linear-gradient(transparent calc(50% - .75px), rgb(255 255 255 / .45) calc(50% - .75px) calc(50% + .75px), transparent 0),
        radial-gradient(circle at 50% 45%, color-mix(in srgb, #fff 45%, var(--tile)), var(--tile) 70%);
    box-shadow: 0 0 0 2px var(--tile), 0 10px 26px -6px color-mix(in srgb, var(--tile) 85%, transparent);
}
.retro-disco-pass .inv-form__choices label:has(input:checked)::before { background-color: rgb(255 255 255 / .4); transform: scale(1.12); }
.retro-disco-pass .inv-form__choices label:has(input:focus-visible) { outline: 2px solid var(--rd-hot); outline-offset: 3px; }

/* after sending: the mirror-ball stamp and glints around the pass */
.retro-disco-pass__sent { margin: 0 0 1rem; text-align: center; }
.retro-disco-pass__stamp {
    display: grid; place-items: center; width: 5.4rem; height: 5.4rem; margin: 0 auto .6rem; border-radius: 50%;
    background: color-mix(in srgb, var(--inv-s1) 22%, var(--inv-paper)); box-shadow: 0 0 0 2px var(--inv-s1), 0 0 0 6px color-mix(in srgb, var(--inv-s1) 25%, transparent);
}
.retro-disco-ball--stamp { --ball: 3.4rem; }
.retro-disco-ball--stamp .retro-disco-ball__string, .retro-disco-ball--stamp .retro-disco-ball__cap { display: none; }
.retro-disco-pass__thanks { margin: 0; font-family: var(--rd-display); font-size: 1.35rem; line-height: 1.25; color: var(--rd-hot); }
.retro-disco-pass__line { margin: .35rem auto 0; max-width: 30ch; font-size: .92rem; color: var(--rd-muted); }
.retro-disco-pass__glints { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.retro-disco-pass__glints i {
    position: absolute; width: 1.1rem; height: 1.1rem; opacity: 0; scale: 0; background: var(--inv-s1);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
    transition: opacity .3s ease, scale .5s cubic-bezier(.34, 1.56, .64, 1);
}
.retro-disco-pass__glints i:nth-child(1) { left: -.5rem; top: 18%; }
.retro-disco-pass__glints i:nth-child(2) { right: -.6rem; top: 8%; width: 1.4rem; height: 1.4rem; background: var(--inv-primary); }
.retro-disco-pass__glints i:nth-child(3) { right: -.4rem; top: 55%; width: .8rem; height: .8rem; }
.retro-disco-pass__glints i:nth-child(4) { left: -.7rem; top: 70%; width: 1.3rem; height: 1.3rem; background: var(--inv-s2); }
.retro-disco-pass__glints i:nth-child(5) { left: 30%; top: -.6rem; width: .9rem; height: .9rem; background: var(--inv-primary); }
.retro-disco-pass__glints i:nth-child(6) { right: 22%; bottom: -.5rem; }
.retro-disco-pass.is-stamped .retro-disco-pass__glints i { opacity: 1; scale: 1; }
.retro-disco-pass.is-stamped .retro-disco-pass__glints i:nth-child(2n) { transition-delay: .15s; }
.retro-disco-pass.is-stamped .retro-disco-pass__glints i:nth-child(3n) { transition-delay: .3s; }

/* wishes: the jukebox */
.retro-disco-jukebox { max-width: 23rem; margin: 0 auto; }
.retro-disco-jukebox__crown {
    position: relative; height: 6.2rem; overflow: hidden; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: var(--inv-deep);
}
.retro-disco-jukebox__arc {
    position: absolute; left: 50%; bottom: 0; width: 48%; height: 3.6rem; translate: -50% 0; border-radius: 999px 999px 0 0;
    background: color-mix(in srgb, var(--inv-glow) 12%, var(--inv-deep));
    box-shadow: 0 0 0 7px var(--inv-s1), 0 0 0 14px var(--inv-s2), 0 0 0 21px var(--inv-s3), 0 0 0 28px var(--inv-s4);
}
.retro-disco-jukebox__lights { position: absolute; left: 50%; bottom: .9rem; display: flex; gap: .45rem; translate: -50% 0; }
.retro-disco-jukebox__lights i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--inv-glow); box-shadow: 0 0 8px var(--inv-glow); opacity: .85; }
.retro-disco-jukebox .inv-form {
    --field-bg: color-mix(in srgb, var(--inv-glow) 9%, var(--inv-deep));
    --field-text: var(--inv-glow);
    --field-ring: color-mix(in srgb, var(--inv-glow) 26%, transparent);
    --field-label: color-mix(in srgb, var(--inv-glow) 80%, var(--inv-deep));
    padding: 1.2rem 1.15rem 1.3rem; border-radius: 0 0 22px 22px; background: var(--inv-deep); box-shadow: var(--rd-shadow);
}
.retro-disco-jukebox .inv-form button[type=submit] { background: var(--inv-s1); color: var(--rd-ink-on-stripe); box-shadow: 0 4px 0 color-mix(in srgb, var(--inv-s1) 55%, #000); }
.retro-disco-jukebox .inv-form__notice { color: var(--inv-glow); background: color-mix(in srgb, var(--inv-glow) 14%, var(--inv-deep)); }
.retro-disco-wishes .inv-wishes { --inv-wishes-height: 21rem; }
.retro-disco-wishes .inv-wishes__list { margin-top: 1.2rem; }
.retro-disco-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list { padding: .2rem .35rem .2rem .1rem; }
/* every wish a dedication slip with a tiny record */
.retro-disco-wishes .inv-wish {
    position: relative; padding: .8rem 1rem .75rem 2.6rem; border-radius: 4px 16px 16px 4px;
    background: var(--inv-paper); box-shadow: var(--rd-shadow-sm), inset 5px 0 0 var(--inv-s3);
}
.retro-disco-wishes .inv-wish:nth-child(4n + 2) { box-shadow: var(--rd-shadow-sm), inset 5px 0 0 var(--inv-s2); }
.retro-disco-wishes .inv-wish:nth-child(4n + 3) { box-shadow: var(--rd-shadow-sm), inset 5px 0 0 var(--inv-s1); }
.retro-disco-wishes .inv-wish:nth-child(4n) { box-shadow: var(--rd-shadow-sm), inset 5px 0 0 var(--inv-s4); }
.retro-disco-wishes .inv-wish::before {
    content: ''; position: absolute; left: .85rem; top: .95rem; width: 1.15rem; height: 1.15rem; border-radius: 50%;
    background: radial-gradient(circle, #1d1714 0 10%, var(--inv-s3) 12% 36%, #1d1714 38%);
}
.retro-disco-wishes .inv-wish__name { font-weight: 700; color: var(--rd-hot); }
.retro-disco-wishes .inv-wish__message { font-size: .92rem; line-height: 1.5; }
.retro-disco-wishes .inv-wish__time { font-size: .72rem; color: var(--rd-muted); opacity: 1; }
.retro-disco-wishes .inv-wishes__empty { color: var(--rd-muted); opacity: 1; }
.retro-disco-wishes .inv-wishes__more { min-height: 2.75rem; font-weight: 700; color: var(--inv-text); box-shadow: inset 0 0 0 1.5px var(--rd-line); }

/* ---------- 6. shared components ---------- */
.retro-disco-main .inv-button { font-weight: 700; }
.retro-disco-main .inv-maps .inv-button, .retro-disco-main .inv-gallery + .inv-button { background: var(--inv-btn); color: var(--inv-btnink); }
.retro-disco-body .inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--inv-deep) 93%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-glow) 78%, transparent);
    --inv-nav-active: var(--inv-s1);
    font-family: var(--rd-sans); border-color: color-mix(in srgb, var(--inv-s1) 35%, transparent);
}
.retro-disco-body .inv-music__button { background: var(--inv-deep); color: var(--inv-s1); box-shadow: 0 0 0 2px var(--inv-s1), 0 6px 14px rgb(0 0 0 / .3); }
.retro-disco-body .inv-ambient { --inv-ambient-1: var(--inv-s1); --inv-ambient-2: var(--inv-primary); }
.retro-disco-body .inv-checkin { background: var(--inv-paper); color: var(--inv-text); }

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

/* short phones: the cover art and type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .retro-disco-cover { --ball: min(10.5svh, 22vw); --arch-h: min(26.5svh, 58vw); padding-top: 1.1rem; padding-bottom: 2.4rem; }
    .retro-disco-cover__title { margin-top: 1rem; }
    .retro-disco-cover__name { font-size: 2.8rem; }
    .retro-disco-cover__date { margin-top: .55rem; }
    .retro-disco-cover__quote { font-size: .86rem; }
    .retro-disco-cover__guest { margin-top: .9rem; }
    .retro-disco-cover__open.inv-button { margin-top: 1rem; }
    .retro-disco-cover__swoosh { width: clamp(4.8rem, 23vw, 7rem); }
}
@media (max-height: 660px) {
    .retro-disco-cover { --ball: min(10svh, 21vw); --arch-h: min(25svh, 56vw); padding-top: .8rem; padding-bottom: 2.3rem; }
    .retro-disco-cover__title { margin-top: .8rem; font-size: .66rem; }
    .retro-disco-cover__name { font-size: 2.45rem; text-shadow: 2px 2px 0 var(--inv-s3), 4px 4px 0 var(--inv-s2); }
    .retro-disco-cover__date { margin-top: .4rem; font-size: .86rem; }
    .retro-disco-cover__quote { margin-top: .35rem; font-size: .82rem; line-height: 1.4; }
    .retro-disco-cover__guest { margin-top: .75rem; padding: .4rem 1rem .45rem; }
    .retro-disco-cover__guest-name { font-size: 1.02rem; }
    .retro-disco-cover__open.inv-button { margin-top: .85rem; min-height: 2.9rem; padding: .6rem 1.4rem; }
}

/* narrow phones: the LED digits shrink a little */
@media (max-width: 380px) {
    .retro-disco-led .inv-countdown__value { font-size: 1.85rem; }
    .retro-disco-hifi { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* wide screens: the phone-width column on the night-club backdrop with sunset rings */
@media (min-width: 560px) {
    body.retro-disco-body { background: var(--inv-deep); }
    body.retro-disco-body::before {
        content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
        background:
            radial-gradient(circle at 50% 135%, transparent 0 30%, var(--inv-s1) 30% 33%, transparent 33% 35%, var(--inv-s2) 35% 38%, transparent 38% 40%, var(--inv-s3) 40% 43%, transparent 43% 45%, var(--inv-s4) 45% 48%, transparent 48%),
            radial-gradient(circle, color-mix(in srgb, var(--inv-glow) 22%, transparent) 1.4px, transparent 2px) 0 0 / 46px 46px;
        opacity: .55;
    }
    .retro-disco-main { box-shadow: 0 0 0 1px var(--rd-line), 0 30px 60px -30px rgb(0 0 0 / .6); }
}

/* ---------- 8. motion ---------- */
@keyframes retro-disco-spin { to { rotate: 1turn; } }
@keyframes retro-disco-tiles {
    to { background-position: calc(var(--tile) * 6) 0, calc(var(--tile) * 6) 0, calc(var(--tile) * 6) 0, calc(var(--tile) * 6) 0; }
}
@keyframes retro-disco-twinkle { 0%, 100% { opacity: .2; scale: .7; } 50% { opacity: .9; scale: 1.15; } }
@keyframes retro-disco-glint { 0%, 70%, 100% { scale: 0; } 80% { scale: 1.1; } 90% { scale: .5; } }
@keyframes retro-disco-floor { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes retro-disco-sway { 0%, 100% { rotate: -2.5deg; } 50% { rotate: 2.5deg; } }
@keyframes retro-disco-eq { 0%, 100% { scale: 1 .3; } 50% { scale: 1 1; } }
@keyframes retro-disco-flicker { 0% { opacity: .35; } 30% { opacity: 1; } 45% { opacity: .7; } 100% { opacity: 1; } }
@keyframes retro-disco-drop { 0% { translate: 0 -2.5rem; scale: .6; } 60% { translate: 0 .3rem; scale: 1.05; } 100% { translate: 0 0; scale: 1; } }
@keyframes retro-disco-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes retro-disco-dial { from { left: 8%; } to { left: 90%; } }
@keyframes retro-disco-grow { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes retro-disco-draw-x { from { scale: 0 1; } to { scale: 1 1; } }

/* the disco ball turns (its tiles slide) and glints; it sways a little on its string */
html.inv-anim .retro-disco-ball__tiles { animation: retro-disco-tiles 6s linear infinite; }
html.inv-anim .retro-disco-ball__glint { animation: retro-disco-glint 3.2s ease-in-out infinite; }
html.inv-anim .retro-disco-ball__glint--2 { animation-delay: -1.1s; }
html.inv-anim .retro-disco-ball__glint--3 { animation-delay: -2.2s; }
html.inv-anim .retro-disco-ball--cover, html.inv-anim .retro-disco-ball--closing { transform-origin: 50% -60svh; animation: retro-disco-sway 7s ease-in-out infinite; }
html.inv-anim .retro-disco-ball--closing { transform-origin: 50% -4rem; }
/* the light spots circle slowly and twinkle; the dance floor flashes */
html.inv-anim .retro-disco-cover__lights { animation: retro-disco-spin 50s linear infinite; }
html.inv-anim .retro-disco-cover__spot { animation: retro-disco-twinkle 3.4s ease-in-out var(--d) infinite; }
html.inv-anim .retro-disco-cover__floor span::after { animation: retro-disco-floor 1.6s steps(1) infinite; }
/* every record's sheen turns */
html.inv-anim .retro-disco-record::after { animation: retro-disco-spin 4s linear infinite; }
html.inv-anim .retro-disco-record--mini { animation: retro-disco-spin 2.2s linear infinite; }
html.inv-anim .retro-disco-poster__burst { animation: retro-disco-spin 90s linear infinite; }
html.inv-anim .retro-disco-hifi__bars i { animation: retro-disco-eq 1.1s ease-in-out infinite; }
html.inv-anim .retro-disco-hifi__bars i:nth-child(2n) { animation-duration: .8s; animation-delay: -.3s; }
html.inv-anim .retro-disco-hifi__bars i:nth-child(3n) { animation-duration: 1.4s; animation-delay: -.6s; }
html.inv-anim .retro-disco-hifi__lamp { animation: retro-disco-blink 2.4s ease-in-out infinite; }
html.inv-anim .retro-disco-led .inv-countdown__value.is-flicker { animation: retro-disco-flicker .35s linear; }

/* the heading's little rainbow draws itself when it scrolls into view */
html.inv-anim .retro-disco-heading__arc { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.3, .7, .2, 1) .15s; }
html.inv-anim .retro-disco-heading__arc--2 { transition-delay: .3s; }
html.inv-anim .retro-disco-heading__arc--3 { transition-delay: .45s; }
html.inv-anim .retro-disco-heading.is-revealed .retro-disco-heading__arc { stroke-dashoffset: 0; }

/* the LP's record slides out of its sleeve; the event records rise out of theirs; the singles roll in */
html.inv-anim .retro-disco-lp:not(.is-revealed) .retro-disco-lp__record { translate: 0 0; }
html.inv-anim .retro-disco-sleeve:not(.is-revealed) .retro-disco-sleeve__record { translate: 0 45%; }
html.inv-anim .retro-disco-singles:not(.is-revealed) .retro-disco-single__record { rotate: -220deg; translate: -1.5rem 0; }

/* RSVP: the stamp drops onto the pass, the glints twinkle, the jukebox lights blink after a wish */
html.inv-anim .retro-disco-pass__sent .retro-disco-pass__stamp { animation: retro-disco-drop .7s cubic-bezier(.34, 1.56, .64, 1) both; }
html.inv-anim .retro-disco-pass.is-stamped .retro-disco-pass__glints i { animation: retro-disco-twinkle 2.2s ease-in-out .6s infinite; }
html.inv-anim .retro-disco-pass.is-stamped .retro-disco-pass__glints i:nth-child(2n) { animation-delay: 1s; }
html.inv-anim .retro-disco-jukebox.is-playing .retro-disco-jukebox__lights i { animation: retro-disco-blink .4s ease-in-out 4; }
html.inv-anim .retro-disco-jukebox.is-playing .retro-disco-jukebox__lights i:nth-child(2n) { animation-delay: .2s; }

/* scroll-drawn details (the default, without support, is the finished drawing) */
@supports (animation-timeline: view()) {
    html.inv-anim .retro-disco-hifi__needle { animation: retro-disco-dial linear both; animation-timeline: view(); animation-range: entry 10% exit 40%; }
    html.inv-anim .retro-disco-singles::before { animation: retro-disco-grow linear both; animation-timeline: view(); animation-range: entry 15% cover 55%; }
    html.inv-anim .retro-disco-track__dots { animation: retro-disco-draw-x linear both; animation-timeline: view(); animation-range: entry 10% entry 90%; }
    html.inv-anim .retro-disco-vendor__dots { animation: retro-disco-draw-x linear both; animation-timeline: view(); animation-range: entry 10% entry 90%; }
}

@media (prefers-reduced-motion: reduce) {
    .retro-disco-cover--leave, .retro-disco-cover--leave *, .retro-disco-lp__record, .retro-disco-sleeve__record, .retro-disco-single__record,
    .retro-disco-wishlist__record, .retro-disco-wishlist__toggle, .retro-disco-wishlist__body, .retro-disco-swatch, .retro-disco-pass__glints i { transition: none !important; }
    .retro-disco-ball__tiles, .retro-disco-ball__glint, .retro-disco-ball, .retro-disco-cover__lights, .retro-disco-cover__spot,
    .retro-disco-record, .retro-disco-record::after, .retro-disco-hifi__bars i { animation: none !important; }
    .retro-disco-ball__glint { scale: 1; }
}