/*
 * Template "Nostalgia 90-an" (Reuni & Halal Bihalal) — 90s / early-2000s pop nostalgia for a reunion.
 * A deep purple (midnight) with hot pink, teal and a yellow highlight on off-white paper, memphis shapes and
 * halftone dots, thick dark outlines with flat offset shadows (the 90s sticker look), Bungee titles with a
 * handwritten marker word.
 * Signature pieces: the cassette tape with a handwritten label (sections/_cassette: cover, closing), the
 * J-card with the cover photo as its art (cover), the walkman (opening), Polaroids (organizer, gallery), the
 * boombox display (party), gig flyers (events), the old cellphone with a pixel screen (countdown), the
 * mixtape tracklist (rundown), VHS tapes with a camcorder overlay (story), the CRT TV (live streaming), the
 * radio request card (RSVP), the binder diary (wishes), phone cards (gift), crew passes (committee), pagers
 * (contacts). Mobile-first, one column (~460px) on a deep backdrop on wide screens.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (purple / teal / charcoal / navy: titles, cassette shells, phone)
 *   --inv-deep (dark bands, outlines)   --inv-accent (hot pink / vermilion / pink / orange: bands, tags)
 *   --inv-pop (teal / aqua / cyan: second accent, offset shadows)   --inv-shine (yellow / lime: highlights,
 *   stickers, buttons on dark)   --inv-background (off-white paper)   --inv-text   --inv-soft (light tint)
 * Everything else is mixed from those, so a new variant only needs these eight colours.
 *
 * Section tones (set on each section in its partial): .n90-tone--light (paper with a halftone corner),
 * --soft (the light tint), --deep (the dark band with halftone dots), --hot (a deep hot-pink band).
 * Light and dark alternate down the page.
 *
 * Tilts use the individual `rotate` property (not `transform`), so the reveal-on-scroll transforms of
 * invitation.js never undo them.
 *
 * Motion only runs with html.inv-anim (set by <x-inv.head> unless the guest prefers reduced motion); without
 * it everything is shown finished. Nothing loops or flashes.
 *
 * Contents: 1 base · 2 section tones & photo backgrounds · 3 shared pieces (heading, shapes, cassette,
 *           polaroid, starburst, chips) · 4 cover · 5 sections in page order · 6 forms (RSVP, wishes) ·
 *           7 shared components · 8 screen sizes · 9 motion
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Ungu Pink" variant (the variant's colours override these) */
    --inv-primary: #4c1d95;
    --inv-accent: #e11d74;
    --inv-background: #fbf7f0;
    --inv-text: #1f1532;
    --inv-deep: #1e0a3c;
    --inv-pop: #0fb5ae;
    --inv-shine: #ffd23f;
    --inv-soft: #efe4fa;
    --inv-radius: 14px;

    --n90-display: 'Bungee', 'Arial Black', Impact, sans-serif;
    --n90-sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --n90-hand: 'Permanent Marker', 'Segoe Print', 'Bradley Hand', cursive;
    --n90-pixel: 'VT323', ui-monospace, 'Courier New', monospace;
    --n90-col: 460px;

    --n90-paper: color-mix(in srgb, #fff 72%, var(--inv-background));
    --n90-title: color-mix(in srgb, var(--inv-primary) 72%, var(--inv-deep));
    --n90-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    --n90-cream-muted: color-mix(in srgb, var(--inv-background) 86%, transparent);
    --n90-hot: color-mix(in srgb, var(--inv-accent) 80%, var(--inv-deep));
    --n90-hot-ink: color-mix(in srgb, var(--inv-accent) 72%, var(--inv-deep));
    --n90-pop-ink: color-mix(in srgb, var(--inv-pop) 52%, var(--inv-deep));
    --n90-ring: color-mix(in srgb, var(--inv-deep) 16%, transparent);
    --n90-outline: 0 0 0 2.5px var(--inv-deep);
    --n90-drop: 0 22px 36px -24px color-mix(in srgb, var(--inv-deep) 75%, transparent);
    /* the green-grey LCD of the phone and the pagers */
    --n90-lcd: #b9c79d;
    --n90-lcd-ink: #1e2a14;

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

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

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

img { max-width: 100%; }
a { color: var(--n90-title); }

.n90-preview {
    position: sticky; top: 0; z-index: 60; padding: .5rem 1rem; text-align: center;
    background: #fff4d6; color: #6b4e00; font-size: .8125rem;
}

/* the one column of the page; every section paints its own full-width background */
.n90-main { max-width: var(--n90-col); margin: 0 auto; }
.n90-branding { max-width: var(--n90-col); margin: 0 auto; }

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

.n90-arabic { font-family: 'Amiri', 'Traditional Arabic', serif; line-height: 1.9; }

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

/* light: off-white paper, a soft tint glow and a pink halftone patch in the top corner */
.n90-tone--light {
    background:
        radial-gradient(70% 28% at 0% 100%, color-mix(in srgb, var(--inv-soft) 85%, transparent), transparent 75%),
        var(--inv-background);
}
.n90-tone--light::before, .n90-tone--soft::before {
    content: ''; position: absolute; z-index: -1; top: 0; right: 0; width: 13rem; height: 11rem; pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--inv-accent) 34%, transparent) 1.6px, transparent 2.2px) 0 0 / 9px 9px;
    -webkit-mask: radial-gradient(100% 100% at 100% 0%, #000 10%, transparent 70%);
    mask: radial-gradient(100% 100% at 100% 0%, #000 10%, transparent 70%);
}
/* soft: the light tint, a teal halftone patch */
.n90-tone--soft {
    background:
        radial-gradient(80% 36% at 50% 0%, color-mix(in srgb, #fff 50%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-soft), color-mix(in srgb, var(--inv-soft) 55%, var(--inv-background)));
}
.n90-tone--soft::before { background: radial-gradient(circle, color-mix(in srgb, var(--inv-pop) 45%, transparent) 1.6px, transparent 2.2px) 0 0 / 9px 9px; }

/* deep: the band colour with a glow of the primary, a low hot glow and a halftone that fades out */
.n90-tone--deep {
    color: var(--inv-background);
    background:
        radial-gradient(90% 45% at 12% 0%, color-mix(in srgb, var(--inv-primary) 80%, transparent), transparent 75%),
        radial-gradient(70% 30% at 92% 100%, color-mix(in srgb, var(--inv-accent) 22%, transparent), transparent 75%),
        var(--inv-deep);
}
.n90-tone--deep::before, .n90-tone--hot::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(circle, rgb(255 255 255 / .1) 1.3px, transparent 1.9px) 0 0 / 10px 10px;
    -webkit-mask: linear-gradient(160deg, #000, transparent 45%, transparent 60%, #000);
    mask: linear-gradient(160deg, #000, transparent 45%, transparent 60%, #000);
}
.n90-tone--deep a:not(.inv-button) { color: var(--inv-shine); }
.n90-tone--deep .n90-arabic { color: var(--inv-shine); }

/* hot: a deep hot-pink band (white text keeps ≥ 4.5:1) */
.n90-tone--hot {
    color: #fff;
    background:
        radial-gradient(80% 45% at 50% 0%, color-mix(in srgb, var(--inv-shine) 22%, transparent), transparent 75%),
        radial-gradient(70% 40% at 0% 100%, color-mix(in srgb, var(--inv-deep) 45%, transparent), transparent 75%),
        var(--n90-hot);
}
.n90-tone--hot::before { background: radial-gradient(circle, rgb(255 255 255 / .16) 1.3px, transparent 1.9px) 0 0 / 10px 10px; }

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

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

/* section heading: a play triangle + letter-spaced eyebrow, a Bungee title with a small offset shadow, the
   last word handwritten in marker */
.n90-heading { margin: 0 0 2.2rem; }
.n90-heading--left { text-align: left; }
.n90-heading__eyebrow {
    display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .7rem;
    font-size: .7rem; font-weight: 700; line-height: 1.2; letter-spacing: .22em; text-transform: uppercase; color: var(--n90-hot-ink);
}
.n90-heading__eyebrow::before {
    content: ''; width: .62rem; height: .72rem; flex: none; background: var(--inv-pop);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.n90-heading__title {
    margin: 0; font-family: var(--n90-display); font-size: 1.95rem; font-weight: 400; line-height: 1.08;
    letter-spacing: .01em; color: var(--n90-title); text-wrap: balance;
}
.n90-heading__main { text-shadow: 2px 2px 0 color-mix(in srgb, var(--inv-pop) 55%, transparent); }
.n90-heading__title em {
    display: inline-block; margin-left: .05em; font-family: var(--n90-hand); font-style: normal; font-weight: 400;
    font-size: 1.1em; line-height: 1; text-transform: none; color: var(--n90-hot-ink); rotate: -4deg;
}
.n90-tone--deep .n90-heading__eyebrow { color: var(--inv-shine); }
.n90-tone--deep .n90-heading__title { color: #fff; }
.n90-tone--deep .n90-heading__main { text-shadow: 2px 2px 0 var(--inv-accent); }
.n90-tone--deep .n90-heading__title em { color: var(--inv-shine); }
.n90-tone--hot .n90-heading__eyebrow { color: #fff; }
.n90-tone--hot .n90-heading__eyebrow::before { background: var(--inv-shine); }
.n90-tone--hot .n90-heading__title { color: #fff; }
.n90-tone--hot .n90-heading__main { text-shadow: 2px 2px 0 var(--inv-deep); }
.n90-tone--hot .n90-heading__title em { color: var(--inv-shine); }

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

/* memphis shapes (sections/_shape): placed by each section; the colour is the shape's color */
.n90-shape { position: absolute; z-index: -1; display: block; width: 2.6rem; height: 2.6rem; pointer-events: none; overflow: visible; }

/* the cassette (sections/_cassette): sizes in container units, so it scales with --cas-w */
.n90-cassette { --cas-w: 18rem; container-type: inline-size; width: var(--cas-w); max-width: 100%; }
.n90-cassette__shell {
    position: relative; padding: 5cqi 5.5cqi 12.5cqi; border-radius: 4.5cqi;
    background:
        linear-gradient(180deg, rgb(255 255 255 / .14), transparent 30%),
        linear-gradient(160deg, color-mix(in srgb, var(--inv-primary) 82%, #fff), var(--inv-primary) 42%, color-mix(in srgb, var(--inv-primary) 45%, var(--inv-deep)));
    box-shadow: 0 0 0 .9cqi var(--inv-deep), inset 0 .6cqi 0 rgb(255 255 255 / .18), inset 0 -1.2cqi 0 rgb(0 0 0 / .25), 3cqi 3cqi 0 .9cqi var(--inv-accent);
}
.n90-cassette__screw {
    position: absolute; width: 3.2cqi; height: 3.2cqi; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f6f4fa, #9a96a6 60%, #5e5a68);
    box-shadow: inset 0 0 0 .35cqi rgb(0 0 0 / .25);
}
.n90-cassette__screw::after { content: ''; position: absolute; left: 20%; right: 20%; top: 45%; height: 10%; background: rgb(0 0 0 / .45); rotate: 35deg; }
.n90-cassette__screw--tl { top: 1.2cqi; left: 1.3cqi; }
.n90-cassette__screw--tr { top: 1.2cqi; right: 1.3cqi; }
.n90-cassette__screw--bl { bottom: 1.6cqi; left: 1.3cqi; }
.n90-cassette__screw--br { bottom: 1.6cqi; right: 1.3cqi; }
/* the paper label: a hot band on top, a teal + yellow stripe at the foot */
.n90-cassette__label {
    position: relative; display: flex; flex-direction: column; align-items: center; padding: 6.2cqi 7cqi 6.4cqi; border-radius: 2.4cqi;
    text-align: center; color: var(--inv-deep);
    background:
        linear-gradient(var(--inv-accent), var(--inv-accent)) top / 100% 3.6cqi no-repeat,
        linear-gradient(var(--inv-pop), var(--inv-pop)) bottom 2.2cqi left 0 / 100% 1.6cqi no-repeat,
        linear-gradient(var(--inv-shine), var(--inv-shine)) bottom .6cqi left 0 / 100% 1.6cqi no-repeat,
        repeating-linear-gradient(180deg, transparent 0 5.6cqi, color-mix(in srgb, var(--inv-deep) 9%, transparent) 5.6cqi calc(5.6cqi + 1px)) 0 4cqi,
        #fffdf6;
    box-shadow: inset 0 0 0 .35cqi rgb(0 0 0 / .08);
}
.n90-cassette__side {
    position: absolute; left: 2.6cqi; top: 5.4cqi; display: grid; place-items: center; width: 6.2cqi; height: 6.8cqi; border-radius: 1cqi;
    font-family: var(--n90-display); font-size: 4.4cqi; line-height: 1; color: #fff; background: var(--inv-deep);
}
.n90-cassette__small {
    display: block; max-width: 100%; margin: 0 0 .4cqi; padding: 0 5cqi; font-size: 3.1cqi; font-weight: 700; line-height: 1.25;
    letter-spacing: .18em; text-transform: uppercase; color: var(--n90-hot-ink); overflow-wrap: anywhere;
}
.n90-cassette__title {
    display: block; max-width: 100%; margin: 0; padding: 0 3cqi; font-family: var(--n90-hand); font-weight: 400;
    font-size: 7.4cqi; line-height: 1.08; color: var(--inv-deep); overflow-wrap: anywhere; text-wrap: balance;
}
.n90-cassette--long .n90-cassette__title { font-size: 6.2cqi; }
.n90-cassette--xlong .n90-cassette__title { font-size: 5cqi; }
.n90-cassette__window { display: block; width: 62cqi; margin-top: 2.2cqi; }
.n90-cassette__reels { display: block; width: 100%; overflow: visible; }
.n90-cassette__glass { fill: color-mix(in srgb, var(--inv-deep) 88%, #000); stroke: color-mix(in srgb, var(--inv-deep) 60%, #000); stroke-width: 1; }
.n90-cassette__tape { fill: #5b3b2c; }
.n90-cassette__tape-line { stroke: #5b3b2c; stroke-width: 1.4; }
.n90-cassette__reel { transform-box: fill-box; transform-origin: center; }
.n90-cassette__reel circle { fill: #fffdf6; stroke: var(--inv-deep); stroke-width: 1.2; }
.n90-cassette__reel path { stroke: var(--inv-deep); stroke-width: 1.6; stroke-linecap: round; }
/* the head block at the bottom of the shell with its two guide holes */
.n90-cassette__head {
    position: absolute; left: 21%; right: 21%; bottom: 0; height: 10.5cqi; border-radius: 1cqi 1cqi 0 0;
    background:
        radial-gradient(circle at 22% 58%, var(--inv-deep) 1.4cqi, transparent 1.6cqi),
        radial-gradient(circle at 78% 58%, var(--inv-deep) 1.4cqi, transparent 1.6cqi),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 55%, var(--inv-deep)), color-mix(in srgb, var(--inv-primary) 35%, var(--inv-deep)));
    clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
}

/* the Polaroid (sections/_polaroid): white frame, wide bottom margin with a marker caption, tape on top */
.n90-polaroid {
    --pol-w: 12rem; --pol-ratio: 1 / 1; --pol-pos: center 35%; --pol-tilt: -3deg;
    position: relative; width: var(--pol-w); margin: 0; padding: calc(var(--pol-w) * .055) calc(var(--pol-w) * .055) 0;
    border-radius: 3px; background: #fffefb; rotate: var(--pol-tilt);
    box-shadow: 0 0 0 2px var(--inv-deep), 0 22px 30px -18px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.n90-polaroid__window { position: relative; overflow: hidden; aspect-ratio: var(--pol-ratio); background: var(--inv-deep); }
.n90-polaroid__window::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); }
.n90-polaroid__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pol-pos); }
.n90-polaroid__empty {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
    color: var(--inv-shine);
    background:
        radial-gradient(circle, color-mix(in srgb, var(--inv-accent) 45%, transparent) 1.4px, transparent 2px) 0 0 / 9px 9px,
        linear-gradient(160deg, var(--inv-primary), var(--inv-deep));
}
.n90-polaroid__tapeart { width: 46%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linejoin: round; }
.n90-polaroid__monogram { font-family: var(--n90-display); font-size: calc(var(--pol-w) * .16); line-height: 1; color: #fff; text-shadow: 2px 2px 0 var(--inv-accent); }
.n90-polaroid__caption {
    margin: 0; padding: calc(var(--pol-w) * .035) .3rem calc(var(--pol-w) * .06); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: clip;
    font-family: var(--n90-hand); font-size: max(1rem, calc(var(--pol-w) * .095)); line-height: 1.2; color: var(--inv-deep);
}
.n90-polaroid__tape {
    position: absolute; z-index: 1; top: calc(var(--pol-w) * -.06); left: 50%; width: calc(var(--pol-w) * .36); height: calc(var(--pol-w) * .11); min-height: 16px;
    translate: -50% 0; rotate: -4deg;
    background: repeating-linear-gradient(90deg, rgb(255 255 255 / .25) 0 4px, transparent 4px 9px), color-mix(in srgb, var(--inv-pop) 80%, transparent);
    clip-path: polygon(3% 0, 97% 6%, 100% 30%, 96% 55%, 100% 80%, 97% 100%, 2% 95%, 0 70%, 4% 45%, 0 18%);
}

/* the yellow starburst sticker with the milestone ("20" big + "tahun"); the shape is drawn by ::before
   (clipped), a deep copy offset behind it by ::after */
.n90-burst {
    position: relative; isolation: isolate; display: grid; place-content: center; width: 4.9rem; height: 4.9rem; margin: 0; text-align: center; rotate: 10deg;
    color: var(--inv-deep);
}
.n90-burst::before, .n90-burst::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    clip-path: polygon(50% 0, 59.5% 14.6%, 75% 6.7%, 76.4% 24%, 93.3% 25%, 85.6% 40.6%, 100% 50%, 85.6% 59.4%, 93.3% 75%, 76.4% 76%, 75% 93.3%, 59.5% 85.4%, 50% 100%, 40.5% 85.4%, 25% 93.3%, 23.6% 76%, 6.7% 75%, 14.4% 59.4%, 0 50%, 14.4% 40.6%, 6.7% 25%, 23.6% 24%, 25% 6.7%, 40.5% 14.6%);
}
.n90-burst::before { background: radial-gradient(circle at 40% 35%, color-mix(in srgb, #fff 35%, var(--inv-shine)), var(--inv-shine) 60%); }
.n90-burst::after { z-index: -2; translate: 3px 4px; background: var(--inv-deep); }
.n90-burst strong { font-family: var(--n90-display); font-size: 1.7rem; font-weight: 400; line-height: .95; }
.n90-burst span { font-size: .56rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; }
.n90-burst--text span { padding: 0 .7rem; font-size: .6rem; letter-spacing: .04em; }

/* chips */
.n90-chip {
    display: inline-block; padding: .28rem .8rem; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: #fff; background: var(--inv-deep);
}
.n90-chip--pop { color: var(--inv-deep); background: var(--inv-shine); }

/* ---------- 4. cover ---------- */
.n90-cover {
    --jw: min(80vw, 20rem, 44svh);
    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.5rem 1.25rem 1.6rem;
    isolation: isolate; color: var(--inv-text);
    background:
        radial-gradient(70% 34% at 50% 30%, color-mix(in srgb, var(--inv-soft) 90%, transparent), transparent 75%),
        radial-gradient(60% 24% at 100% 100%, color-mix(in srgb, var(--inv-shine) 22%, transparent), transparent 75%),
        var(--inv-background);
    transition: opacity .8s ease;
}
.n90-cover__inner { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; text-align: center; transition: transform .8s cubic-bezier(.5, 0, .3, 1); }

/* halftone patches and memphis shapes around the edges */
.n90-cover__dots { position: absolute; z-index: -1; width: 12rem; height: 12rem; pointer-events: none; }
.n90-cover__dots--top {
    top: 0; right: 0;
    background: radial-gradient(circle, color-mix(in srgb, var(--inv-accent) 40%, transparent) 1.8px, transparent 2.4px) 0 0 / 10px 10px;
    -webkit-mask: radial-gradient(100% 100% at 100% 0%, #000 15%, transparent 70%); mask: radial-gradient(100% 100% at 100% 0%, #000 15%, transparent 70%);
}
.n90-cover__dots--bottom {
    bottom: 0; left: 0;
    background: radial-gradient(circle, color-mix(in srgb, var(--inv-pop) 50%, transparent) 1.8px, transparent 2.4px) 0 0 / 10px 10px;
    -webkit-mask: radial-gradient(100% 100% at 0% 100%, #000 15%, transparent 70%); mask: radial-gradient(100% 100% at 0% 100%, #000 15%, transparent 70%);
}
.n90-cover__shape { position: absolute; z-index: -1; }
.n90-cover__shape--squiggle { top: 3.2rem; left: -.6rem; width: 3.4rem; color: var(--inv-pop); rotate: -12deg; }
.n90-cover__shape--triangle { top: 1.1rem; right: 1.2rem; width: 1.8rem; height: 1.8rem; color: var(--inv-shine); rotate: 18deg; }
.n90-cover__shape--ring { bottom: 5.5rem; right: -1rem; width: 3.2rem; height: 3.2rem; color: color-mix(in srgb, var(--inv-primary) 55%, transparent); }
.n90-cover__shape--zigzag { bottom: 1.2rem; left: 1rem; width: 3rem; color: color-mix(in srgb, var(--inv-accent) 70%, transparent); }

.n90-cover__title { margin: 0 0 1.2rem; max-width: 100%; }
.n90-cover__title span {
    display: inline-block; padding: .38rem .9rem .34rem; border-radius: 4px; rotate: -2deg;
    font-size: .7rem; font-weight: 700; line-height: 1.25; letter-spacing: .2em; text-transform: uppercase;
    color: #fff; background: var(--n90-hot); box-shadow: 3px 3px 0 var(--inv-deep);
}

/* the art: a deep block behind, the J-card with the photo, the starburst, the cassette in front */
.n90-cover__art { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }
.n90-cover__art::before {
    content: ''; position: absolute; z-index: -1; top: calc(var(--jw) * -.05); left: calc(50% - var(--jw) * .58); width: calc(var(--jw) * .7); height: calc(var(--jw) * .62);
    border-radius: 14px; rotate: -6deg; background: var(--inv-primary);
    background-image: radial-gradient(circle, rgb(255 255 255 / .16) 1.4px, transparent 2px); background-size: 9px 9px;
}
.n90-jcard {
    position: relative; width: var(--jw); margin: 0; padding: calc(var(--jw) * .028) calc(var(--jw) * .028) 0; border-radius: 6px; rotate: -2deg;
    background: #fffefb; box-shadow: var(--n90-outline), 8px 8px 0 2.5px var(--inv-pop);
}
.n90-jcard__art { position: relative; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 3px; background: var(--inv-deep); }
.n90-jcard__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.n90-jcard__empty {
    position: absolute; inset: 0; display: grid; place-items: center;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--inv-accent) 50%, transparent) 1.5px, transparent 2.1px) 0 0 / 10px 10px,
        radial-gradient(70% 60% at 70% 30%, color-mix(in srgb, var(--inv-pop) 45%, transparent), transparent 70%),
        linear-gradient(150deg, var(--inv-primary), var(--inv-deep));
}
.n90-jcard__empty span { font-family: var(--n90-display); font-size: calc(var(--jw) * .26); line-height: 1; color: #fff; text-shadow: 4px 4px 0 var(--inv-accent); }
.n90-jcard__strip { display: flex; align-items: center; gap: .55rem; height: calc(var(--jw) * .105); min-height: 1.7rem; padding: 0 .2rem; }
.n90-jcard__side { font-family: var(--n90-display); font-size: .72rem; line-height: 1; color: var(--n90-hot-ink); white-space: nowrap; }
.n90-jcard__stripes {
    flex: 1; height: .62rem; border-radius: 2px;
    background: linear-gradient(180deg, var(--inv-accent) 0 33%, var(--inv-shine) 33% 66%, var(--inv-pop) 66%);
}
.n90-jcard__mark { max-width: 40%; font-family: var(--n90-hand); font-size: 1rem; line-height: 1; color: var(--inv-deep); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.n90-cover__burst { position: absolute; z-index: 3; top: calc(var(--jw) * -.1); right: calc(50% - var(--jw) * .5 - 1.1rem); }
.n90-cover__cassette {
    --cas-w: calc(var(--jw) * .88);
    position: relative; z-index: 2; margin-top: calc(var(--jw) * -.012); translate: calc(var(--jw) * .06) 0; rotate: -2deg;
}

.n90-cover__text { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 1.05rem; }
.n90-cover__date {
    margin: 0; font-family: var(--n90-display); font-size: .92rem; line-height: 1.25; color: var(--n90-title);
}
.n90-cover__quote {
    max-width: 32ch; margin: .4rem 0 0; font-size: .9rem; font-weight: 500; line-height: 1.4; color: var(--n90-muted); text-wrap: balance;
}
.n90-cover__quote::before { content: '“'; color: var(--n90-hot-ink); font-weight: 700; }
.n90-cover__quote::after { content: '”'; color: var(--n90-hot-ink); font-weight: 700; }
.n90-cover__guest {
    position: relative; width: min(100%, 18rem); margin-top: .85rem; padding: 1.25rem .9rem .55rem; border-radius: 8px; rotate: -1deg;
    background:
        linear-gradient(var(--inv-accent), var(--inv-accent)) top / 100% .5rem no-repeat,
        repeating-linear-gradient(180deg, transparent 0 21px, color-mix(in srgb, var(--inv-deep) 9%, transparent) 21px 22px) 0 .9rem,
        #fffefb;
    box-shadow: var(--n90-outline), 5px 5px 0 2.5px var(--inv-shine);
}
.n90-cover__guest-label { margin: 0; font-size: .62rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--n90-hot-ink); }
.n90-cover__guest-name {
    display: block; margin: .1rem 0 0; font-family: var(--n90-hand); font-size: 1.4rem; line-height: 1.2; color: var(--inv-deep); overflow-wrap: anywhere;
}
.n90-cover__open {
    display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.05rem; min-height: 3rem; padding: .7rem 1.7rem .7rem 1.35rem;
    border-radius: 999px; font-weight: 700; letter-spacing: .02em;
    background: var(--inv-deep); color: #fff; box-shadow: 4px 4px 0 var(--inv-accent);
}
.n90-cover__play { width: 1.05rem; height: 1.05rem; fill: var(--inv-shine); }

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

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

/* opening: the walkman with headphones, the greeting big, the quote on a liner-notes card */
.n90-opening { padding: 3.8rem 1.5rem 4.4rem; }
.n90-opening__plus { top: 2.2rem; right: 1.5rem; width: 1.7rem; height: 1.7rem; color: var(--inv-shine); rotate: 12deg; z-index: 0; }
.n90-opening__half { bottom: -.6rem; left: -1rem; width: 5rem; height: 5rem; color: color-mix(in srgb, var(--inv-pop) 55%, transparent); rotate: 20deg; }
.n90-walkman { display: block; width: min(15.5rem, 78%); margin: 0 auto 1.1rem; overflow: visible; }
.n90-walkman__band { fill: none; stroke: color-mix(in srgb, var(--inv-background) 85%, transparent); stroke-width: 6; stroke-linecap: round; }
.n90-walkman__pad { fill: none; stroke: var(--inv-accent); stroke-width: 7; stroke-linecap: round; }
.n90-walkman__cup { fill: var(--inv-accent); stroke: var(--inv-deep); stroke-width: 2; }
.n90-walkman__foam { fill: var(--inv-shine); }
.n90-walkman__cord { fill: none; stroke: color-mix(in srgb, var(--inv-background) 70%, transparent); stroke-width: 2.2; stroke-linecap: round; }
.n90-walkman__body { fill: var(--inv-pop); stroke: var(--inv-deep); stroke-width: 2; }
.n90-walkman__key { fill: color-mix(in srgb, var(--inv-background) 80%, transparent); }
.n90-walkman__key--hot { fill: var(--inv-shine); }
.n90-walkman__window { fill: var(--inv-deep); }
.n90-walkman__reel { fill: none; stroke: var(--inv-shine); stroke-width: 2.4; }
.n90-walkman__stripe { stroke: var(--inv-deep); stroke-width: 2.4; opacity: .55; }
.n90-walkman__dial { fill: var(--inv-deep); stroke: var(--inv-shine); stroke-width: 2; }
.n90-opening__basmalah { margin: 0 0 .6rem; font-size: 1.85rem; }
.n90-opening__greeting {
    margin: 0 auto .9rem; max-width: 14ch; font-family: var(--n90-display); font-size: 2.15rem; line-height: 1.08;
    color: #fff; text-shadow: 3px 3px 0 var(--inv-accent), 6px 6px 0 color-mix(in srgb, var(--inv-pop) 70%, transparent); text-wrap: balance;
}
.n90-opening__message { margin: 0 auto; max-width: 31ch; color: var(--n90-cream-muted); }
.n90-liner {
    position: relative; max-width: 21.5rem; margin: 2.6rem auto 0; padding: 0 1.2rem 1.25rem; border-radius: 6px; rotate: -1.2deg; text-align: left;
    color: var(--inv-text); background: #fffefb; box-shadow: 0 0 0 2.5px var(--inv-deep), 7px 7px 0 2.5px var(--inv-shine);
}
.n90-liner__head {
    margin: 0 -1.2rem 1rem; padding: .45rem 1.2rem .4rem; border-radius: 6px 6px 0 0;
    font-size: .64rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #fff;
    background: linear-gradient(90deg, var(--n90-hot) 0 60%, var(--inv-pop) 60% 80%, var(--inv-shine) 80%);
}
.n90-liner blockquote { margin: 0; font-size: 1.04rem; font-weight: 600; line-height: 1.5; color: var(--n90-title); }
.n90-liner figcaption {
    display: inline-block; margin-top: .8rem; padding: .2rem .65rem; border-radius: 4px; font-family: var(--n90-hand); font-size: 1.05rem;
    line-height: 1.2; color: var(--n90-hot-ink); background: color-mix(in srgb, var(--inv-accent) 12%, #fff);
}

/* organizer: a big Polaroid with tape, the starburst, memphis shapes; the member card */
.n90-organizer__art { position: relative; display: flex; justify-content: center; padding: .6rem 0 0; }
.n90-organizer__polaroid { --pol-w: min(16rem, 74%); --pol-tilt: -3deg; --pol-ratio: 1 / 1; --pol-pos: center 30%; }
.n90-organizer__polaroid .n90-polaroid__caption { font-size: 1.35rem; }
.n90-organizer__burst { position: absolute; z-index: 2; top: -.4rem; right: max(.1rem, calc(50% - 9.6rem)); }
.n90-organizer__ring { top: 1.2rem; left: max(-.5rem, calc(50% - 10.5rem)); width: 3.6rem; height: 3.6rem; color: var(--inv-pop); }
.n90-organizer__zigzag { bottom: 1rem; right: max(-.4rem, calc(50% - 10.6rem)); width: 3.4rem; color: var(--inv-accent); rotate: -25deg; }
.n90-organizer__dots {
    position: absolute; z-index: -1; left: 50%; top: 30%; width: 13rem; height: 9rem; translate: -60% 0;
    background: radial-gradient(circle, color-mix(in srgb, var(--inv-primary) 35%, transparent) 1.5px, transparent 2.1px) 0 0 / 9px 9px;
    -webkit-mask: radial-gradient(closest-side, #000 30%, transparent); mask: radial-gradient(closest-side, #000 30%, transparent);
}
.n90-organizer__card {
    position: relative; z-index: 2; margin: 2rem .5rem 0 0; padding: 1.5rem 1.2rem 1.45rem; border-radius: 16px; background: #fff;
    box-shadow: var(--n90-outline), 9px 9px 0 2.5px var(--inv-accent);
}
.n90-organizer__name { margin: 0; font-family: var(--n90-display); font-weight: 400; font-size: 1.75rem; line-height: 1.1; color: var(--n90-title); overflow-wrap: anywhere; text-wrap: balance; }
.n90-organizer__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: .85rem 0 0; }
.n90-organizer__tagline { margin: 1rem auto 0; max-width: 24ch; font-family: var(--n90-hand); font-size: 1.28rem; line-height: 1.45; color: var(--inv-deep); }
.n90-organizer__tagline span {
    -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .15em;
    background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--inv-shine) 70%, transparent) 55%, color-mix(in srgb, var(--inv-shine) 70%, transparent) 90%, transparent 90%);
}

/* party (hot band): the boombox display, the T-shirt card, the sticky note, the hashtag */
.n90-party__triangle { top: 1.6rem; left: 1.2rem; width: 2rem; height: 2rem; color: var(--inv-shine); rotate: -14deg; }
.n90-party__squiggle { bottom: 2.4rem; right: -.5rem; width: 3.6rem; color: color-mix(in srgb, #fff 55%, transparent); rotate: 10deg; }
.n90-boombox {
    position: relative; display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) 3.4rem; align-items: center; gap: .55rem;
    max-width: 22rem; margin: 1.4rem auto 0; padding: .7rem; border-radius: 18px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 80%, #fff), var(--inv-deep) 40%);
    box-shadow: 0 0 0 2.5px var(--inv-deep), 7px 7px 0 2.5px var(--inv-shine);
}
.n90-boombox__handle {
    position: absolute; left: 22%; right: 22%; top: -1.2rem; height: 1.6rem; border: 5px solid var(--inv-deep); border-bottom: 0; border-radius: 14px 14px 0 0;
}
.n90-boombox__speaker {
    aspect-ratio: 1; border-radius: 50%;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--inv-background) 25%, transparent) 1.2px, transparent 1.7px) 0 0 / 6px 6px,
        radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--inv-primary) 60%, #000), #0b0710 70%);
    box-shadow: inset 0 0 0 3px color-mix(in srgb, #fff 20%, transparent), 0 0 0 2px #000;
}
.n90-boombox__display {
    padding: .6rem .6rem .5rem; border-radius: 8px; text-align: center; color: var(--inv-shine);
    background: radial-gradient(90% 90% at 50% 0%, color-mix(in srgb, var(--inv-pop) 22%, transparent), transparent 70%), #08060c;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-pop) 45%, transparent);
}
.n90-boombox__now { margin: 0; font-family: var(--n90-pixel); font-size: 1.05rem; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--inv-pop); }
.n90-boombox__theme { margin: .3rem 0 .45rem; font-family: var(--n90-display); font-size: 1.22rem; line-height: 1.12; color: var(--inv-shine); overflow-wrap: anywhere; }
.n90-boombox__eq { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 1rem; }
.n90-boombox__eq i { width: 5px; border-radius: 1px; background: var(--inv-accent); }
.n90-boombox__eq i:nth-child(1) { height: 40%; } .n90-boombox__eq i:nth-child(2) { height: 75%; } .n90-boombox__eq i:nth-child(3) { height: 55%; }
.n90-boombox__eq i:nth-child(4) { height: 100%; background: var(--inv-shine); } .n90-boombox__eq i:nth-child(5) { height: 70%; } .n90-boombox__eq i:nth-child(6) { height: 85%; }
.n90-boombox__eq i:nth-child(7) { height: 45%; } .n90-boombox__eq i:nth-child(8) { height: 65%; background: var(--inv-pop); } .n90-boombox__eq i:nth-child(9) { height: 35%; } .n90-boombox__eq i:nth-child(10) { height: 50%; }
.n90-party__label { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--n90-hot-ink); }
.n90-party__dress {
    display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); align-items: center; gap: 1rem; max-width: 21rem; margin: 1.7rem auto 0; padding: 1.1rem 1.15rem;
    border-radius: 16px; text-align: left; color: var(--inv-text); background: #fff; box-shadow: 0 0 0 2.5px var(--inv-deep), 7px 7px 0 2.5px var(--inv-pop);
}
.n90-party__shirt { display: block; width: 100%; overflow: visible; }
.n90-party__shirt-body { fill: var(--n90-pick, #fff); stroke: var(--inv-deep); stroke-width: 2.2; stroke-linejoin: round; transition: fill .35s ease; }
.n90-party__shirt-line { fill: none; stroke: var(--inv-deep); stroke-width: 1.6; stroke-linecap: round; opacity: .75; }
.n90-party__shirt-stripe { fill: none; stroke: var(--inv-accent); stroke-width: 3; opacity: .55; }
.n90-party__dress-name { margin: .15rem 0 0; font-size: 1.12rem; font-weight: 700; line-height: 1.25; color: var(--n90-title); }
.n90-swatches { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.n90-swatch {
    width: 1.9rem; height: 1.9rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--n90-swatch);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18), 0 0 0 2px #fff, 0 0 0 3.5px var(--inv-deep);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease;
}
.n90-swatch[aria-pressed="true"] { transform: scale(1.15); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18), 0 0 0 2px #fff, 0 0 0 4.5px var(--inv-accent); }
.n90-swatch:focus-visible { outline: 2px solid var(--inv-deep); outline-offset: 4px; }
.n90-party__hint { margin: .5rem 0 0; font-size: .76rem; color: var(--n90-muted); }
.n90-party__hint--light { margin: .55rem auto 0 !important; color: rgb(255 255 255 / .88); }
.n90-party__note {
    position: relative; max-width: 19rem !important; margin: 2.3rem auto 0 !important; padding: 1.35rem 1.2rem 1.1rem; rotate: 1.6deg; text-align: left;
    font-family: var(--n90-hand); font-size: 1.25rem; line-height: 1.35; color: var(--inv-deep);
    background: linear-gradient(180deg, color-mix(in srgb, #fff 18%, var(--inv-shine)), var(--inv-shine));
    box-shadow: 0 0 0 2.5px var(--inv-deep), 6px 6px 0 2.5px var(--inv-deep);
}
.n90-party__note-tape {
    position: absolute; top: -.75rem; left: 50%; width: 5.5rem; height: 1.4rem; translate: -50% 0; rotate: -3deg;
    background: repeating-linear-gradient(90deg, rgb(255 255 255 / .3) 0 4px, transparent 4px 9px), color-mix(in srgb, var(--inv-pop) 85%, transparent);
    clip-path: polygon(3% 0, 97% 6%, 100% 30%, 96% 55%, 100% 80%, 97% 100%, 2% 95%, 0 70%, 4% 45%, 0 18%);
}
.n90-party__hashtag {
    display: inline-flex; align-items: center; gap: .6rem; max-width: 100%; margin-top: 2rem; padding: .35rem .4rem .35rem 1rem; border-radius: 999px;
    background: var(--inv-deep); box-shadow: 4px 4px 0 var(--inv-shine);
}
.n90-party__hashtag-text { min-width: 0; font-size: 1.05rem; font-weight: 700; color: #fff; overflow-wrap: anywhere; }
.n90-party__copy {
    flex: none; min-height: 2.2rem; padding: .3rem .9rem; border: 0; border-radius: 999px; cursor: pointer;
    font: 700 .78rem/1 var(--n90-sans); color: var(--inv-deep); background: var(--inv-shine);
}

/* events: gig flyers — a white card with a thick outline and an offset shadow, a yellow date disc */
.n90-events__plus { top: 2rem; left: 1.4rem; width: 1.6rem; height: 1.6rem; color: var(--inv-pop); rotate: 15deg; }
.n90-flyer {
    position: relative; margin: 0 12px 0 0; padding: 0 0 1.25rem; border-radius: 16px; background: #fff; text-align: left;
    box-shadow: var(--n90-outline), 10px 10px 0 2.5px var(--inv-accent);
}
.n90-flyer + .n90-flyer { margin-top: 2.8rem; }
.n90-flyer--flip { margin: 0 0 0 12px; box-shadow: var(--n90-outline), -10px 10px 0 2.5px var(--inv-pop); }
.n90-flyer--flip + .n90-flyer { margin-top: 2.8rem; }
.n90-flyer__media { position: relative; overflow: hidden; margin: .55rem .55rem 0; border-radius: 11px; }
.n90-flyer__media::after {
    content: ''; position: absolute; right: 0; bottom: 0; width: 45%; height: 50%; pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--inv-shine) 75%, transparent) 1.5px, transparent 2.1px) 0 0 / 8px 8px;
    -webkit-mask: radial-gradient(100% 100% at 100% 100%, #000 10%, transparent 70%); mask: radial-gradient(100% 100% at 100% 100%, #000 10%, transparent 70%);
}
.n90-flyer__photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 55%; }
.n90-flyer__top { display: flex; align-items: center; gap: .95rem; padding: 1.15rem 1.15rem 0; }
.n90-flyer--flip .n90-flyer__top { flex-direction: row-reverse; text-align: right; }
.n90-flyer__date {
    display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 5.2rem; height: 5.2rem; margin: 0;
    border-radius: 50%; color: var(--inv-deep); background: var(--inv-shine); box-shadow: 0 0 0 2.5px var(--inv-deep), 3px 4px 0 2.5px var(--inv-deep);
    rotate: -6deg;
}
.n90-flyer--flip .n90-flyer__date { rotate: 6deg; background: var(--inv-pop); }
.n90-flyer__weekday { font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1; }
.n90-flyer__day { font-family: var(--n90-display); font-size: 2.05rem; line-height: 1; }
.n90-flyer__month { font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.n90-flyer__head { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.n90-flyer__no { font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--n90-hot-ink); }
.n90-flyer__name { margin: .15rem 0 0; font-family: var(--n90-display); font-weight: 400; font-size: 1.25rem; line-height: 1.15; color: var(--n90-title); }
.n90-flyer__full { margin: .25rem 0 0; font-size: .82rem; font-weight: 600; color: var(--n90-muted); }
.n90-flyer__rows { display: grid; gap: .75rem; margin: 1.1rem 1.15rem 0; padding: 1.05rem 0 0; list-style: none; font-size: .9rem; border-top: 2.5px dashed var(--n90-ring); }
.n90-flyer__rows li { display: flex; align-items: flex-start; gap: .7rem; }
.n90-flyer__rows .n90-icon { width: 2.1rem; height: 2.1rem; padding: .45rem; border-radius: 50%; color: #fff; background: var(--inv-deep); }
.n90-flyer__rows li > span { padding-top: .3rem; }
.n90-flyer__venue { display: block; font-weight: 700; }
.n90-flyer__address { display: block; font-size: .86rem; color: var(--n90-muted); }
.n90-flyer .inv-maps { margin: 1.15rem 1.15rem 0; text-align: center; }
.n90-flyer .inv-maps .inv-button { width: 100%; font-weight: 700; }
.n90-flyer .inv-maps__frame { height: 190px; border-radius: 12px; box-shadow: 0 0 0 2px var(--inv-deep); }

/* countdown: the old cellphone — antenna, earpiece, the LCD with date and the countdown, soft keys, keypad */
.n90-countdown__ring { top: 3rem; right: -1.2rem; width: 4.5rem; height: 4.5rem; color: color-mix(in srgb, var(--inv-pop) 50%, transparent); }
.n90-countdown__zigzag { bottom: 3rem; left: -.4rem; width: 3.6rem; color: color-mix(in srgb, var(--inv-shine) 70%, transparent); rotate: -20deg; }
.n90-phone {
    position: relative; width: min(16.5rem, 86%); margin: 1.6rem auto 0; padding: 1.7rem .95rem 1.25rem; border-radius: 2.4rem 2.4rem 3rem 3rem;
    background:
        linear-gradient(90deg, rgb(255 255 255 / .16), transparent 18%, transparent 82%, rgb(0 0 0 / .18)),
        linear-gradient(170deg, color-mix(in srgb, var(--inv-primary) 70%, #fff), var(--inv-primary) 40%, color-mix(in srgb, var(--inv-primary) 60%, var(--inv-deep)));
    box-shadow: 0 0 0 2.5px #000, 9px 9px 0 2.5px var(--inv-accent), 0 30px 40px -20px rgb(0 0 0 / .7);
}
.n90-phone__antenna { position: absolute; top: -1.5rem; right: 2rem; width: .85rem; height: 2rem; border-radius: .5rem .5rem 0 0; background: #15121c; box-shadow: 0 0 0 2px #000; }
.n90-phone__ear { position: absolute; top: .75rem; left: 50%; width: 3rem; height: .38rem; translate: -50% 0; border-radius: 999px; background: #15121c; }
/* the LCD: the top part here, the bottom part is the countdown's first child (below) */
.n90-phone__screen, .n90-phone__countdown > div:first-child {
    color: var(--n90-lcd-ink); border: 6px solid #1a1720;
    background:
        repeating-linear-gradient(0deg, rgb(0 0 0 / .045) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgb(0 0 0 / .035) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, color-mix(in srgb, #fff 18%, var(--n90-lcd)), var(--n90-lcd));
}
.n90-phone__screen { padding: .45rem .7rem .2rem; border-bottom: 0; border-radius: 12px 12px 0 0; font-family: var(--n90-pixel); }
.n90-phone__screen p { margin: 0; }
.n90-phone__status { display: flex; align-items: center; justify-content: space-between; font-size: 1.05rem; line-height: 1; }
.n90-phone__signal { display: inline-flex; align-items: flex-end; gap: 2px; height: .8rem; }
.n90-phone__signal i { width: 3px; background: var(--n90-lcd-ink); }
.n90-phone__signal i:nth-child(1) { height: 25%; } .n90-phone__signal i:nth-child(2) { height: 50%; } .n90-phone__signal i:nth-child(3) { height: 75%; } .n90-phone__signal i:nth-child(4) { height: 100%; }
.n90-phone__battery { position: relative; width: 1.35rem; height: .7rem; border: 2px solid var(--n90-lcd-ink); background: linear-gradient(90deg, var(--n90-lcd-ink) 0 75%, transparent 75%) 1px 1px / calc(100% - 2px) calc(100% - 2px) no-repeat; }
.n90-phone__battery::after { content: ''; position: absolute; right: -5px; top: 2px; width: 3px; height: 3px; background: var(--n90-lcd-ink); }
.n90-phone__weekday { margin-top: .45rem !important; font-size: 1.25rem; line-height: 1; text-transform: uppercase; letter-spacing: .06em; }
.n90-phone__date { font-size: 2.55rem; line-height: .95; letter-spacing: .02em; }
.n90-phone__time { font-size: 1.15rem; line-height: 1.1; }
.n90-phone__countdown > div:first-child { padding: .3rem .4rem .55rem; border-top: 0; border-radius: 0 0 12px 12px; }
.n90-phone__countdown .inv-countdown { gap: .1rem; margin: 0; padding-top: .35rem; border-top: 2px dotted color-mix(in srgb, var(--n90-lcd-ink) 45%, transparent); }
.n90-phone__countdown .inv-countdown__item { min-width: 0; flex: 1; padding: 0; background: none; box-shadow: none; }
.n90-phone__countdown .inv-countdown__value { font-family: var(--n90-pixel); font-weight: 400; font-size: 2.1rem; line-height: 1; color: var(--n90-lcd-ink); font-variant-numeric: tabular-nums; }
.n90-phone__countdown .inv-countdown__label { font-family: var(--n90-pixel); font-size: .98rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--n90-lcd-ink); opacity: .85; }
.n90-phone__countdown .inv-countdown__done { margin: .2rem 0 0; font-family: var(--n90-pixel); font-size: 1.15rem; line-height: 1.15; color: var(--n90-lcd-ink); }
/* the calendar buttons become the soft keys */
.n90-phone__countdown .inv-countdown__actions { display: grid; gap: .5rem; margin-top: 1rem; }
.n90-phone__countdown .inv-countdown__actions .inv-button {
    width: 100%; min-height: 2.6rem; padding: .5rem .8rem; border: 0; border-radius: 999px; font-size: .8rem; font-weight: 700; line-height: 1.2;
    color: #fff; background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .45);
}
.n90-phone__countdown .inv-countdown__actions .inv-button:first-child { color: var(--inv-deep); background: var(--inv-shine); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .18); }
.n90-phone__keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem .55rem; margin-top: 1rem; padding: 0 .6rem; }
.n90-phone__keypad i {
    height: 1.35rem; border-radius: 999px; font-family: var(--n90-pixel); font-style: normal; font-size: .95rem; line-height: 1.35rem;
    color: rgb(255 255 255 / .7); background: rgb(0 0 0 / .22); box-shadow: inset 0 1px 0 rgb(255 255 255 / .14);
}

/* rundown: the mixtape tracklist — a deep spine, then Side A / Side B */
.n90-rundown__triangle { bottom: 2rem; left: 1rem; width: 2.2rem; height: 2.2rem; color: color-mix(in srgb, var(--inv-accent) 55%, transparent); rotate: -18deg; }
.n90-tracklist {
    display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); max-width: 25rem; margin: 0 auto; overflow: hidden; border-radius: 10px; text-align: left; background: #fffefb;
    box-shadow: var(--n90-outline), 9px 9px 0 2.5px var(--inv-primary);
}
.n90-tracklist__spine {
    display: flex; align-items: center; justify-content: center; margin: 0; padding: 1rem 0;
    background:
        linear-gradient(180deg, var(--inv-accent) 0 1.1rem, var(--inv-shine) 1.1rem 1.6rem, var(--inv-pop) 1.6rem 2.1rem, transparent 2.1rem),
        var(--inv-deep);
}
.n90-tracklist__spine span { writing-mode: vertical-rl; rotate: 180deg; font-family: var(--n90-display); font-size: .78rem; letter-spacing: .08em; color: var(--inv-shine); white-space: nowrap; overflow: hidden; max-height: 100%; }
.n90-tracklist__body { padding: 1.15rem 1rem 1.1rem 1.05rem; }
.n90-tracklist__side { display: flex; align-items: center; gap: .6rem; margin: 0 0 .5rem; }
.n90-tracklist__side + .n90-tracklist__list + .n90-tracklist__side, .n90-tracklist__list + .n90-tracklist__side { margin-top: 1.3rem; }
.n90-tracklist__side span { flex: none; padding: .26rem .65rem .2rem; border-radius: 4px; font-family: var(--n90-display); font-size: .82rem; font-weight: 400; line-height: 1.2; color: #fff; background: var(--n90-hot); }
.n90-tracklist__side::after { content: ''; flex: 1; height: 6px; border-radius: 2px; background: linear-gradient(180deg, var(--inv-shine) 0 50%, var(--inv-pop) 50%); }
.n90-tracklist__list { margin: 0; padding: 0; list-style: none; }
.n90-track { display: grid; grid-template-columns: 1.7rem 3.1rem minmax(0, 1fr); gap: .35rem; align-items: baseline; padding: .62rem 0; border-bottom: 2px dotted var(--n90-ring); }
.n90-track:last-child { border-bottom: 0; }
.n90-track__no { font-family: var(--n90-pixel); font-size: 1.15rem; line-height: 1; color: var(--n90-pop-ink); }
.n90-track__time { font-family: var(--n90-display); font-size: .82rem; line-height: 1.2; color: var(--n90-title); font-variant-numeric: tabular-nums; }
.n90-track__body { display: flex; flex-direction: column; min-width: 0; }
.n90-track__body strong { font-size: .96rem; font-weight: 700; line-height: 1.3; color: var(--inv-text); }
.n90-track__body span { margin-top: .1rem; font-size: .84rem; line-height: 1.4; color: var(--n90-muted); }

/* story: home-video tapes — a still with a camcorder overlay, the VHS spine with a handwritten sticker */
.n90-story__squiggle { top: 2.4rem; right: -.4rem; width: 3.6rem; color: color-mix(in srgb, var(--inv-pop) 65%, transparent); rotate: 8deg; }
.n90-story__list { display: grid; gap: 2.8rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.n90-vhs { width: 92%; }
.n90-vhs--flip { margin-left: auto; }
.n90-vhs__screen {
    position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 16px / 20px; background: #000;
    box-shadow: 0 0 0 5px #0c0a10, 0 0 0 7px color-mix(in srgb, #fff 18%, transparent), 10px 10px 0 7px var(--inv-accent);
}
.n90-vhs--flip .n90-vhs__screen { box-shadow: 0 0 0 5px #0c0a10, 0 0 0 7px color-mix(in srgb, #fff 18%, transparent), -10px 10px 0 7px var(--inv-pop); }
.n90-vhs__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: saturate(1.08) contrast(1.03); }
/* faint static scanlines and a soft vignette (no flicker) */
.n90-vhs__screen::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(180deg, rgb(0 0 0 / .1) 0 1px, transparent 1px 3px), radial-gradient(120% 100% at 50% 50%, transparent 60%, rgb(0 0 0 / .45));
}
.n90-vhs__osd { position: absolute; z-index: 1; font-family: var(--n90-pixel); font-size: 1.35rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: #fff; text-shadow: 1px 1px 0 #000, 0 0 3px rgb(0 0 0 / .8); }
.n90-vhs__osd--play { top: .6rem; left: .75rem; }
.n90-vhs__osd--sp { top: .6rem; right: .8rem; }
.n90-vhs__osd--date { bottom: .6rem; right: .8rem; font-size: 1.55rem; color: var(--inv-shine); }
.n90-vhs__spine {
    display: flex; align-items: center; gap: .5rem; height: 2.7rem; margin-top: 1.15rem; padding: .35rem .6rem .35rem .4rem; border-radius: 4px; rotate: -1deg;
    background: linear-gradient(180deg, #2b2830, #121015 60%); box-shadow: 0 0 0 2px #000, 0 12px 18px -10px rgb(0 0 0 / .7);
}
.n90-vhs--flip .n90-vhs__spine { rotate: 1deg; }
.n90-vhs__sticker { display: flex; align-items: center; flex: 1; min-width: 0; height: 100%; padding: 0 .7rem; border-radius: 2px; background: #fffefb; }
.n90-vhs__when { flex: none; font-family: var(--n90-hand); font-size: 1.3rem; line-height: 1; color: var(--n90-hot-ink); }
.n90-vhs__lines { flex: 1; height: 55%; margin-left: .7rem; background: repeating-linear-gradient(180deg, transparent 0 5px, color-mix(in srgb, var(--inv-deep) 22%, transparent) 5px 6px); }
.n90-vhs__mark { flex: none; padding: .1rem .3rem; border: 1.5px solid rgb(255 255 255 / .7); border-radius: 3px; font-family: var(--n90-display); font-size: .62rem; line-height: 1.1; letter-spacing: .08em; color: rgb(255 255 255 / .85); }
.n90-vhs__body { padding: 1rem .2rem 0; }
.n90-vhs__body h3 { margin: 0; font-family: var(--n90-display); font-weight: 400; font-size: 1.18rem; line-height: 1.2; color: #fff; }
.n90-vhs__body p { margin: .45rem 0 0; font-size: .9rem; line-height: 1.55; color: var(--n90-cream-muted); }
/* a moment without a photo: the spine alone, a little bigger */
.n90-vhs--text .n90-vhs__spine { height: 3.4rem; margin-top: 0; }
.n90-vhs--text .n90-vhs__when { font-size: 1.65rem; }

/* gallery: Polaroids with thick bottom margins and coloured offset shadows, tilted in turn */
.n90-gallery__half { top: 1.6rem; left: -1.2rem; width: 4.6rem; height: 4.6rem; color: color-mix(in srgb, var(--inv-shine) 75%, transparent); rotate: 90deg; }
.n90-gallery__plus { bottom: 1.6rem; right: 1.2rem; width: 1.6rem; height: 1.6rem; color: var(--inv-accent); rotate: 10deg; }
.n90-gallery .inv-gallery { gap: 1.05rem .85rem; padding: .3rem .4rem .6rem .2rem; }
.n90-gallery .inv-gallery__item {
    border: 7px solid #fffefb; border-bottom-width: 22px; border-radius: 3px; rotate: -1.8deg;
    box-shadow: 0 0 0 2px var(--inv-deep), 5px 5px 0 2px var(--inv-pop);
}
.n90-gallery .inv-gallery__item:nth-child(even) { rotate: 2deg; box-shadow: 0 0 0 2px var(--inv-deep), 5px 5px 0 2px var(--inv-accent); }
.n90-gallery .inv-gallery__item:nth-child(3n) { rotate: -.8deg; box-shadow: 0 0 0 2px var(--inv-deep), 5px 5px 0 2px var(--inv-shine); }
.n90-gallery .inv-gallery__item:first-child { grid-row: span 2; aspect-ratio: auto; rotate: -2.4deg; }

/* live streaming: a CRT television — light cabinet, curved screen, colour bars, knobs, feet */
.n90-stream { padding-top: 5rem; }
.n90-stream__zigzag { top: 2rem; left: .8rem; width: 3.2rem; color: color-mix(in srgb, var(--inv-shine) 70%, transparent); rotate: -10deg; }
.n90-tv { position: relative; max-width: 22rem; margin: 0 auto; }
.n90-tv__antenna { position: absolute; left: 50%; bottom: calc(100% - 6px); width: 5.5rem; height: 2.4rem; translate: -50% 0; overflow: visible; }
.n90-tv__antenna path { fill: none; stroke: var(--inv-background); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.n90-tv__antenna circle { fill: var(--inv-accent); }
.n90-tv__cabinet {
    display: grid; grid-template-columns: minmax(0, 1fr) 2.8rem; gap: .6rem; padding: .8rem; border-radius: 24px;
    background: linear-gradient(165deg, #fff, color-mix(in srgb, var(--inv-soft) 75%, #d9d4e0));
    box-shadow: 0 0 0 2.5px #000, 9px 9px 0 2.5px var(--inv-accent);
}
.n90-tv__screen {
    position: relative; display: flex; flex-direction: column; align-items: center; padding: 1.1rem 1rem 1.3rem; border-radius: 26px / 34px; color: var(--inv-background);
    background: radial-gradient(90% 80% at 30% 15%, color-mix(in srgb, #fff 14%, transparent), transparent 60%), linear-gradient(160deg, var(--inv-primary), color-mix(in srgb, var(--inv-deep) 85%, #000));
    box-shadow: inset 0 0 0 3px #000, inset 0 0 28px rgb(0 0 0 / .45);
}
.n90-tv__bars { display: flex; width: 80%; height: .7rem; margin-bottom: .8rem; overflow: hidden; border-radius: 3px; }
.n90-tv__bars i { flex: 1; }
.n90-tv__bars i:nth-child(1) { background: #f2f2f2; } .n90-tv__bars i:nth-child(2) { background: #f4d03f; } .n90-tv__bars i:nth-child(3) { background: #3fc6d6; }
.n90-tv__bars i:nth-child(4) { background: #3fbf5a; } .n90-tv__bars i:nth-child(5) { background: #d64fc1; } .n90-tv__bars i:nth-child(6) { background: #e2453c; } .n90-tv__bars i:nth-child(7) { background: #3555d4; }
.n90-tv__live { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .55rem; padding: .18rem .6rem; border-radius: 4px; font-size: .64rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #fff; background: rgb(0 0 0 / .35); }
.n90-tv__live::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 6px #ff3b3b; }
.n90-tv__title { margin: 0 0 .3rem; font-family: var(--n90-display); font-weight: 400; font-size: 1.45rem; line-height: 1.1; color: #fff; text-shadow: 2px 2px 0 var(--inv-accent); }
.n90-tv__screen p { margin: 0; max-width: 28ch; font-size: .86rem; color: var(--n90-cream-muted); }
.n90-tv__screen .n90-tv__note { margin-top: .4rem; font-weight: 700; color: var(--inv-shine); }
.n90-tv__side { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding-top: .5rem; }
.n90-tv__knob { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #b9b3c4 55%, #7d768a); box-shadow: 0 0 0 2px #000, inset 0 -2px 0 rgb(0 0 0 / .2); }
.n90-tv__knob--small { width: 1.5rem; height: 1.5rem; }
.n90-tv__grille { flex: 1; width: 1.6rem; min-height: 2.5rem; margin-top: .2rem; border-radius: 4px; background: repeating-linear-gradient(180deg, #2a2630 0 3px, transparent 3px 6px); }
.n90-tv__feet { display: flex; justify-content: space-between; width: 70%; height: .7rem; margin: 0 auto; }
.n90-tv__feet::before, .n90-tv__feet::after { content: ''; width: 1.6rem; height: 100%; border-radius: 0 0 6px 6px; background: #0b0910; }
.n90-stream__button {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; margin-top: 1.6rem; padding: .7rem 1.5rem; border-radius: 999px;
    font-weight: 700; color: var(--inv-deep) !important; background: var(--inv-shine) !important; box-shadow: 4px 4px 0 var(--inv-accent);
}

/* RSVP: the radio request card — a deep head with the tuner, the form on paper */
.n90-rsvp__ring { bottom: 2rem; left: -1rem; width: 4rem; height: 4rem; color: color-mix(in srgb, var(--inv-accent) 45%, transparent); }
.n90-radio {
    max-width: 25rem; margin: 0 auto; overflow: hidden; border-radius: 18px; background: var(--n90-paper); text-align: left;
    box-shadow: var(--n90-outline), 10px 10px 0 2.5px var(--inv-pop);
}
.n90-radio__head {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .3rem .8rem; padding: 1rem 1.1rem .95rem; color: #fff;
    background: radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--inv-accent) 40%, transparent), transparent 60%), linear-gradient(150deg, var(--inv-primary), var(--inv-deep));
}
.n90-radio__label { margin: 0; font-size: .64rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-shine); }
.n90-radio__for { margin: .1rem 0 0; font-family: var(--n90-display); font-size: 1.15rem; line-height: 1.15; overflow-wrap: anywhere; }
.n90-radio__onair {
    padding: .25rem .55rem; border-radius: 4px; font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: rgb(255 255 255 / .55); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .35); transition: background-color .4s ease, color .4s ease, box-shadow .4s ease;
}
.n90-radio__onair.is-on { color: #fff; background: #e8263b; box-shadow: 0 0 14px rgb(232 38 59 / .75); }
.n90-radio__tuner {
    position: relative; grid-column: 1 / -1; display: block; height: 2.3rem; margin-top: .55rem; border-radius: 6px;
    background: repeating-linear-gradient(90deg, rgb(255 255 255 / .45) 0 1px, transparent 1px 8px) left 0 bottom 3px / 100% 7px no-repeat, #0b0811;
    box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .18);
}
.n90-radio__scale { display: flex; justify-content: space-between; padding: .15rem .6rem 0; font-family: var(--n90-pixel); font-size: .98rem; line-height: 1; color: var(--inv-shine); }
.n90-radio__scale i { font-style: normal; }
.n90-radio__needle { position: absolute; top: 3px; bottom: 3px; left: 58%; width: 3px; border-radius: 2px; background: var(--inv-accent); box-shadow: 0 0 6px var(--inv-accent); transition: left 1.2s cubic-bezier(.3, 1.2, .5, 1); }
.n90-radio:has(.n90-radio__onair.is-on) .n90-radio__needle { left: 76%; }
.n90-radio__card {
    position: relative; padding: 1.45rem 1.15rem 1.4rem;
    background:
        linear-gradient(90deg, var(--inv-accent) 0 33%, var(--inv-shine) 33% 66%, var(--inv-pop) 66%) top / 100% 5px no-repeat,
        var(--n90-paper);
}
.n90-radio__intro { margin: 0 auto 1.1rem; max-width: 32ch; font-size: .9rem; text-align: center; color: var(--n90-muted); }
.n90-radio__sent { margin-bottom: 1rem; text-align: center; }
.n90-radio__stamp {
    display: inline-block; margin: .3rem 0 .7rem; padding: .35rem 1rem .3rem; rotate: -6deg; border-radius: 8px;
    font-family: var(--n90-display); font-size: 1.15rem; line-height: 1.2; color: var(--n90-hot-ink);
    box-shadow: inset 0 0 0 3px var(--n90-hot-ink), inset 0 0 0 5px var(--n90-paper), inset 0 0 0 6.5px var(--n90-hot-ink);
}
html.inv-anim .n90-radio__sent .n90-radio__stamp { animation: n90-stamp .55s cubic-bezier(.3, 1.4, .6, 1) both; }
.n90-radio__line { margin: 0; font-size: .9rem; color: var(--n90-muted); }
.n90-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .84rem; font-weight: 700; text-align: center; color: var(--n90-hot-ink); }

/* gift ("Iuran & donasi"): prepaid phone cards with a coloured band and a gold chip, two per row */
.n90-gift__burst { top: 2rem; right: 1.1rem; width: 2.2rem; height: 2.2rem; color: var(--inv-shine); rotate: 10deg; }
.n90-gift__intro { color: var(--n90-muted); }
.n90-gift__treasurer { display: inline-flex !important; align-items: center; gap: .5rem; padding: .35rem .9rem; border-radius: 999px; font-size: .84rem; font-weight: 700; color: var(--inv-deep); background: var(--inv-shine); }
.n90-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .85rem; margin-top: 1.5rem; }
.n90-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.n90-gift .inv-gift__account,
.n90-gift .inv-gift__address {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; margin: 0;
    padding: 2.55rem .75rem 1rem; color: var(--inv-text); border-radius: 14px;
    background: linear-gradient(var(--n90-band, var(--n90-hot)), var(--n90-band, var(--n90-hot))) top / 100% 1.75rem no-repeat, #fff;
    box-shadow: var(--n90-outline), 5px 5px 0 2.5px var(--n90-band-shadow, var(--inv-pop));
}
.n90-gift .inv-gift__account:nth-child(even) { --n90-band: var(--n90-pop-ink); --n90-band-shadow: var(--inv-accent); }
/* the gold chip on the band */
.n90-gift .inv-gift__account::before {
    content: ''; position: absolute; top: .4rem; left: .75rem; width: 1.6rem; height: 1.05rem; border-radius: 3px;
    background:
        linear-gradient(90deg, transparent 32%, rgb(0 0 0 / .25) 32% 36%, transparent 36% 64%, rgb(0 0 0 / .25) 64% 68%, transparent 68%),
        linear-gradient(180deg, transparent 45%, rgb(0 0 0 / .25) 45% 55%, transparent 55%),
        linear-gradient(135deg, #f7e08a, #c9a134 60%, #f1d06a);
}
.n90-gift .inv-gift__account p, .n90-gift .inv-gift__address p { margin: 0; }
.n90-gift .inv-gift__bank { font-weight: 700; font-size: .86rem; color: var(--n90-title); }
.n90-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .4rem; background: #fff; }
.n90-gift .inv-gift__logo img { max-width: 5rem; }
.n90-gift .inv-gift__number {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .98rem; font-weight: 700;
    letter-spacing: .03em; line-height: 1.3; overflow-wrap: anywhere; color: var(--inv-text);
}
.n90-gift .inv-gift__holder { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--n90-muted); overflow-wrap: anywhere; }
.n90-gift .inv-button { margin-top: .35rem; min-height: 2.25rem; padding: .35rem .9rem; font-size: .76rem; font-weight: 700; }
.n90-gift .inv-gift__account.inv-gift__address { --n90-band: var(--inv-deep); --n90-band-shadow: var(--inv-shine); margin-top: 1rem; font-size: .875rem; }
.n90-gift .inv-gift__address::before { display: none; }
.n90-gift .inv-gift__address .inv-gift__bank { position: absolute; top: .3rem; left: 0; right: 0; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-shine); }
.n90-gift .inv-gift__address .inv-gift__holder { font-size: .72rem; }

/* co-hosts ("Panitia"): crew passes on lanyards, two per row, tilted in turn */
.n90-cohosts { padding-bottom: 4.6rem; }
.n90-cohosts__zigzag { top: 2rem; right: 1rem; width: 3rem; color: var(--inv-shine); rotate: 12deg; }
.n90-cohosts__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem .9rem; max-width: 24rem; margin: 0 auto; padding: 1.4rem 0 0; list-style: none; }
.n90-pass {
    position: relative; display: flex; flex-direction: column; align-items: center; padding: 1.2rem 0 0; border-radius: 12px; rotate: -2deg;
    color: var(--inv-text); background: #fff; box-shadow: 0 0 0 2.5px var(--inv-deep), 5px 5px 0 2.5px var(--inv-deep);
}
.n90-pass:nth-child(even) { rotate: 2deg; }
.n90-pass:nth-child(4n + 3) { rotate: 1deg; }
.n90-pass:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .45rem); }
.n90-pass__lanyard {
    position: absolute; bottom: calc(100% - .55rem); left: 50%; width: 1rem; height: 1.9rem; translate: -50% 0;
    background: repeating-linear-gradient(180deg, var(--inv-shine) 0 5px, var(--inv-deep) 5px 9px); box-shadow: 0 0 0 1.5px var(--inv-deep);
}
.n90-pass__slot { position: absolute; top: .4rem; left: 50%; width: 1.9rem; height: .42rem; translate: -50% 0; border-radius: 999px; background: var(--n90-hot); box-shadow: inset 0 0 0 1.5px var(--inv-deep); }
.n90-pass__band { width: 100%; margin: 0; padding: .3rem .4rem .26rem; font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; line-height: 1.2; color: var(--inv-shine); background: var(--inv-deep); overflow-wrap: anywhere; }
.n90-pass__name { margin: 0; padding: .5rem .55rem .55rem; font-family: var(--n90-hand); font-size: 1.15rem; line-height: 1.2; color: var(--inv-deep); overflow-wrap: anywhere; }
.n90-pass__foot {
    width: 100%; margin-top: auto; padding: .22rem 0 .2rem; border-radius: 0 0 10px 10px; font-family: var(--n90-display); font-size: .62rem; letter-spacing: .3em; line-height: 1.2; color: #fff;
    background: linear-gradient(90deg, var(--inv-accent) 0 40%, var(--inv-pop) 40% 75%, var(--inv-shine) 75%);
    text-shadow: 1px 1px 0 var(--inv-deep);
}

/* contacts: pagers — a body in the primary colour, the LCD with name and role, the Chat key */
.n90-contacts__list { display: grid; gap: 1rem; max-width: 24rem; margin: 0 auto; }
.n90-pager {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .65rem .7rem .65rem .65rem; border-radius: 16px;
    background: linear-gradient(170deg, color-mix(in srgb, var(--inv-pop) 80%, #fff), var(--inv-pop) 45%, color-mix(in srgb, var(--inv-pop) 65%, var(--inv-deep)));
    box-shadow: 0 0 0 2.5px #000, 6px 6px 0 2.5px var(--inv-accent);
}
.n90-pager:nth-child(even) { background: linear-gradient(170deg, color-mix(in srgb, var(--inv-shine) 75%, #fff), var(--inv-shine) 45%, color-mix(in srgb, var(--inv-shine) 72%, var(--inv-deep))); box-shadow: 0 0 0 2.5px #000, 6px 6px 0 2.5px var(--inv-pop); }
.n90-pager__screen {
    min-width: 0; padding: .45rem .7rem .45rem; border-radius: 8px; text-align: left; font-family: var(--n90-pixel); color: var(--n90-lcd-ink);
    background: repeating-linear-gradient(0deg, rgb(0 0 0 / .045) 0 1px, transparent 1px 3px), linear-gradient(180deg, color-mix(in srgb, #fff 18%, var(--n90-lcd)), var(--n90-lcd));
    box-shadow: inset 0 0 0 3px #1a1720, inset 0 3px 6px rgb(0 0 0 / .25);
}
.n90-pager__screen p { margin: 0; }
.n90-pager__name { font-size: 1.45rem; line-height: 1.05; overflow-wrap: anywhere; }
.n90-pager__role { font-size: 1.08rem; line-height: 1.1; opacity: .85; }
.n90-pager__phone { font-size: 1.15rem; line-height: 1.1; }
.n90-pager__button { min-height: 2.6rem; padding: .45rem .95rem; border-radius: 999px; font-size: .82rem; font-weight: 700; color: #fff !important; background: var(--inv-deep) !important; box-shadow: inset 0 -3px 0 rgb(255 255 255 / .12); }
.n90-pager__button .n90-icon { width: 1.05rem; height: 1.05rem; }

/* health protocol: white chips with a thick outline and a hot check */
.n90-protocol__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.n90-protocol__list li { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border-radius: 999px; font-size: .86rem; font-weight: 600; background: #fff; box-shadow: 0 0 0 2px var(--inv-deep), 3px 3px 0 2px var(--inv-pop); }
.n90-protocol__list .n90-icon { width: 1rem; height: 1rem; color: var(--n90-hot-ink); }
.n90-protocol__note { font-size: .88rem; color: var(--n90-muted); }

/* vendors: the "thanks to" credits card */
.n90-vendors { padding-bottom: 4.6rem; }
.n90-vendors__list { max-width: 24rem; margin: 0 auto; padding: .35rem 1.15rem; list-style: none; border-radius: 16px; background: #fff; box-shadow: var(--n90-outline), 8px 8px 0 2.5px var(--inv-shine); }
.n90-vendor { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem 0; text-align: left; border-bottom: 2px dotted var(--n90-ring); }
.n90-vendor:last-child { border-bottom: 0; }
.n90-vendor__text { display: flex; flex-direction: column; min-width: 0; }
.n90-vendor__role { font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--n90-hot-ink); }
.n90-vendor__name { font-size: 1.02rem; font-weight: 700; line-height: 1.3; color: var(--inv-text); overflow-wrap: anywhere; }
.n90-vendor__link {
    display: inline-flex; align-items: center; gap: .3rem; flex: none; min-height: 2.2rem; padding: .3rem .7rem; border-radius: 999px;
    font-size: .74rem; font-weight: 700; text-decoration: none; color: var(--inv-deep); background: color-mix(in srgb, var(--inv-pop) 22%, #fff);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-pop) 55%, var(--inv-deep));
}
.n90-vendor__link .n90-icon { width: .95rem; height: .95rem; }

/* closing: the rewind — full photo fading into deep with the camcorder overlay, the cassette, the thanks */
.n90-closing { padding: 3rem 1.6rem 1.2rem; background: radial-gradient(90% 40% at 15% 0%, color-mix(in srgb, var(--inv-primary) 75%, transparent), transparent 75%), var(--inv-deep); }
.n90-closing::before { -webkit-mask: linear-gradient(180deg, #000, transparent 50%); mask: linear-gradient(180deg, #000, transparent 50%); }
.n90-closing--photo { padding-top: 0; }
.n90-closing__photo { position: relative; z-index: -1; height: min(60svh, 28.75rem); margin: 0 -1.6rem; overflow: hidden; }
.n90-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 35%; --inv-parallax: 30px; }
.n90-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    background:
        repeating-linear-gradient(180deg, rgb(0 0 0 / .08) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 25%, transparent), transparent 22%, transparent 40%, color-mix(in srgb, var(--inv-deep) 60%, transparent) 66%, var(--inv-deep) 97%);
}
.n90-closing__osd {
    position: absolute; z-index: 1; top: 1rem; left: 1.2rem; display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--n90-pixel); font-size: 1.6rem; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 1px 1px 0 #000, 0 0 4px rgb(0 0 0 / .8);
}
.n90-closing__osd span { color: var(--inv-shine); letter-spacing: -.1em; }
.n90-closing__osd--inline { position: static; justify-content: center; margin: 0 0 1.2rem; }
.n90-closing__body { position: relative; }
.n90-closing--photo .n90-closing__body { margin-top: -4rem; }
.n90-closing__cassette { --cas-w: min(11.5rem, 58%); margin: 0 auto 1.1rem; rotate: -3deg; }
.n90-closing__eyebrow { margin: 0 0 .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-shine); }
.n90-closing__title { margin: 0 0 .7rem; font-family: var(--n90-display); font-weight: 400; font-size: clamp(1.9rem, 8.5vw, 2.2rem); line-height: 1.05; color: #fff; text-shadow: 3px 3px 0 var(--inv-accent); }
.n90-closing__title em { display: inline-block; font-family: var(--n90-hand); font-style: normal; font-size: 1.05em; color: var(--inv-shine); rotate: -4deg; text-shadow: none; }
.n90-closing__message { margin: 0 auto; max-width: 32ch; font-size: .92rem; line-height: 1.6; color: var(--n90-cream-muted); }
.n90-closing__salam { margin: .8rem auto 0; max-width: 26ch; font-family: var(--n90-hand); font-size: 1.2rem; line-height: 1.3; color: var(--inv-shine); }
.n90-closing__signature { margin: .55rem auto 0; max-width: 30ch; font-size: .86rem; color: var(--n90-cream-muted); }
.n90-closing__shapes { display: flex; justify-content: center; align-items: center; gap: .9rem; margin: 1rem 0 0; }
.n90-closing__shape { position: static; width: 1.25rem; height: 1.25rem; }
.n90-closing__shape--a { color: var(--inv-accent); rotate: -12deg; }
.n90-closing__shape--b { width: 2rem; color: var(--inv-pop); }
.n90-closing__shape--c { color: var(--inv-shine); }

/* ---------- 6. forms (shared RSVP + wishes, restyled) ---------- */
.n90-main .inv-form { gap: 1rem; text-align: left; }
.n90-main .inv-form label, .n90-main .inv-form__choices legend { font-size: .84rem; font-weight: 700; color: var(--inv-text); }
.n90-main .inv-form input:not([type=radio]):not([type=checkbox]),
.n90-main .inv-form select,
.n90-main .inv-form textarea {
    width: 100%; min-height: 2.9rem; padding: .7rem .9rem; border: 0; border-radius: 10px;
    font: 400 .95rem/1.4 var(--n90-sans); color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--inv-deep) 30%, transparent);
    transition: box-shadow .2s ease;
}
.n90-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='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .8rem center / 1.1rem no-repeat;
}
.n90-main .inv-form input:not([type=radio]):focus-visible,
.n90-main .inv-form select:focus-visible,
.n90-main .inv-form textarea:focus-visible {
    outline: none; box-shadow: inset 0 0 0 2.5px var(--inv-deep), 0 0 0 4px color-mix(in srgb, var(--inv-pop) 45%, transparent);
}
.n90-main .inv-form button[type=submit] { width: 100%; min-height: 3rem; font-weight: 700; color: #fff; background: var(--inv-deep); box-shadow: 4px 4px 0 var(--inv-accent); }
.n90-main .inv-form .inv-button--outline { width: 100%; min-height: 2.75rem; }
.n90-main .inv-form__notice { text-align: center; }

/* the three answers as big cards with icons (the radio dot is hidden but still focusable) */
.n90-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.n90-rsvp .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.n90-rsvp .inv-form__choices label {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .45rem;
    min-height: 5.4rem; padding: .85rem .3rem .75rem; border-radius: 12px; cursor: pointer; text-align: center;
    font-size: .84rem; font-weight: 700; line-height: 1.2; color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--inv-deep) 28%, transparent);
    transition: background-color .25s ease, color .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.n90-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* icon: a tinted circle (::before) with a check, a cross or a question mark on it (::after, a mask in the text colour) */
.n90-rsvp .inv-form__choices label::before {
    content: ''; width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--inv-shine) 45%, #fff);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease;
}
.n90-rsvp .inv-form__choices label::after {
    content: ''; position: absolute; left: 50%; top: 1.3rem; width: 1.2rem; height: 1.2rem; margin-left: -.6rem;
    background: currentColor; color: var(--inv-deep); pointer-events: none;
    -webkit-mask: var(--n90-choice-icon) center / contain no-repeat; mask: var(--n90-choice-icon) center / contain no-repeat;
}
.n90-rsvp .inv-form__choices label:nth-of-type(1) {
    --n90-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");
}
.n90-rsvp .inv-form__choices label:nth-of-type(2) {
    --n90-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");
}
.n90-rsvp .inv-form__choices label:nth-of-type(3) {
    --n90-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");
}
.n90-rsvp .inv-form__choices label:has(input:checked) {
    color: #fff; background: var(--inv-deep); transform: translateY(-3px);
    box-shadow: 4px 4px 0 var(--inv-accent);
}
.n90-rsvp .inv-form__choices label:has(input:checked)::before { background-color: rgb(255 255 255 / .2); transform: scale(1.1); }
.n90-rsvp .inv-form__choices label:has(input:checked)::after { color: #fff; }
.n90-rsvp .inv-form__choices label:has(input:focus-visible) { outline: 2px solid var(--inv-accent); outline-offset: 3px; }

/* wishes: the binder diary — punched holes and a pink margin line, the wishes as notes with coloured edges */
.n90-wishes__plus { top: 2.2rem; right: 1.4rem; width: 1.6rem; height: 1.6rem; color: var(--inv-shine); rotate: 20deg; }
.n90-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.n90-wishes .inv-form {
    padding: 1.4rem 1.1rem 1.3rem 2.7rem; border-radius: 8px; color: var(--inv-text);
    background:
        radial-gradient(circle at 1.05rem 50%, var(--inv-deep) .42rem, color-mix(in srgb, var(--inv-deep) 30%, transparent) .48rem, transparent .55rem) 0 .4rem / 2.2rem 2.4rem repeat-y,
        linear-gradient(90deg, transparent 2.15rem, color-mix(in srgb, var(--inv-accent) 45%, transparent) 2.15rem calc(2.15rem + 2px), transparent calc(2.15rem + 2px)),
        repeating-linear-gradient(180deg, transparent 0 27px, color-mix(in srgb, var(--inv-pop) 22%, transparent) 27px 28px),
        #fffefb;
    box-shadow: 8px 8px 0 0 var(--inv-accent);
}
.n90-wishes .inv-form label { color: var(--inv-text); }
.n90-wishes .inv-wishes__list { margin-top: 1.6rem; }
.n90-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .55rem; border-radius: 14px; background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .18);
}
.n90-wishes .inv-wish { padding: .75rem .9rem; border-radius: 4px 12px 12px 4px; background: #fffefb; color: var(--inv-text); text-align: left; border-left: 5px solid var(--inv-accent); }
.n90-wishes .inv-wish:nth-child(3n + 2) { border-left-color: var(--inv-pop); }
.n90-wishes .inv-wish:nth-child(3n) { border-left-color: var(--inv-shine); }
.n90-wishes .inv-wish__name { font-weight: 700; color: var(--n90-title); }
.n90-wishes .inv-wish__message { font-size: .9rem; line-height: 1.5; }
.n90-wishes .inv-wish__time { font-size: .72rem; color: var(--n90-muted); opacity: 1; }
.n90-wishes .inv-wishes__pager button, .n90-wishes .inv-wishes__pager .inv-button { color: #fff; }

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

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

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

/* short phones: the J-card, the cassette and the type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .n90-cover { --jw: min(74vw, 18rem, 38svh); padding-top: 1.2rem; padding-bottom: 1.3rem; }
    .n90-cover__title { margin-bottom: .95rem; }
    .n90-cover__text { margin-top: .85rem; }
    .n90-cover__quote { font-size: .86rem; }
    .n90-cover__guest { margin-top: .7rem; }
    .n90-cover__open { margin-top: .85rem; }
}
@media (max-height: 660px) {
    .n90-cover { --jw: min(68vw, 35svh); padding-top: 1rem; padding-bottom: 1.1rem; }
    .n90-cover__title { margin-bottom: .8rem; }
    .n90-cover__title span { font-size: .64rem; }
    .n90-cover .n90-burst { width: 4.1rem; height: 4.1rem; }
    .n90-cover .n90-burst strong { font-size: 1.4rem; }
    .n90-cover__text { margin-top: .7rem; }
    .n90-cover__date { font-size: .84rem; }
    .n90-cover__quote { margin-top: .3rem; font-size: .8rem; line-height: 1.32; }
    .n90-cover__guest { margin-top: .6rem; padding-top: 1.05rem; padding-bottom: .45rem; }
    .n90-cover__guest-name { font-size: 1.25rem; }
    .n90-cover__open { min-height: 2.75rem; margin-top: .7rem; padding: .55rem 1.5rem .55rem 1.2rem; }
}
/* very short screens (in-app browsers): a smaller art and quote, so everything fits */
@media (max-height: 600px) {
    .n90-cover { --jw: min(60vw, 30svh); padding-top: .8rem; }
    .n90-cover__title { margin-bottom: .7rem; }
    .n90-cover__quote { font-size: .76rem; line-height: 1.28; }
}

/* wide screens: the phone-width column on a deep backdrop with halftone dots */
@media (min-width: 560px) {
    body.n90-body {
        background:
            radial-gradient(70vw 60vh at 50% 0%, color-mix(in srgb, var(--inv-primary) 60%, transparent), transparent 70%),
            var(--inv-deep);
        background-attachment: fixed;
    }
    body.n90-body::before {
        content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
        background: radial-gradient(circle, color-mix(in srgb, var(--inv-accent) 22%, transparent) 1.3px, transparent 1.9px) 0 0 / 14px 14px;
    }
    .n90-main { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
}

/* ---------- 9. motion ---------- */
@keyframes n90-drop-in { from { opacity: 0; translate: 0 -22px; scale: 1.04; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes n90-zoom-out { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes n90-slide-out { from { opacity: 0; transform: translateY(-46%) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes n90-pop { 0% { opacity: 0; scale: .4; } 70% { opacity: 1; scale: 1.12; } 100% { opacity: 1; scale: 1; } }
@keyframes n90-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes n90-rewind { from { transform: rotate(0deg); } to { transform: rotate(-540deg); } }
@keyframes n90-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes n90-stamp { 0% { opacity: 0; scale: 1.8; } 70% { opacity: 1; scale: .94; } 100% { opacity: 1; scale: 1; } }

/* cover (≤ 2.5 s, once): the J-card drops in (0–.75 s) while its photo settles (0–1.1 s), the cassette slides
   out from behind it (.5–1.2 s) and its reels turn once (1–2.2 s), the starburst pops (1.05 s); the text
   follows through its inv-enter delays (1.15–1.45 s + .6 s) */
html.inv-anim .n90-jcard { animation: n90-drop-in .75s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .n90-jcard__photo { animation: n90-zoom-out 1.1s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .n90-cover__cassette { animation: n90-slide-out .7s cubic-bezier(.2, .8, .3, 1.05) .5s both; }
html.inv-anim .n90-cassette--play .n90-cassette__reel { animation: n90-spin 1.2s cubic-bezier(.3, .1, .3, 1) 1s both; }
html.inv-anim .n90-cover__burst { animation: n90-pop .5s cubic-bezier(.34, 1.56, .64, 1) 1.05s both; }
html.inv-anim .n90-cover__art::before { animation: n90-fade .6s ease .1s both; }

/* the closing: the reels turn backwards once when the section part is revealed; the overlay fades in */
html.inv-anim .is-revealed .n90-cassette--rewind .n90-cassette__reel { animation: n90-rewind 1.6s cubic-bezier(.25, .1, .25, 1) .3s both; }
html.inv-anim .n90-closing__osd { opacity: 0; transition: opacity .6s ease .2s; }
html.inv-anim .is-revealed .n90-closing__osd, html.inv-anim .n90-closing__photo.is-revealed .n90-closing__osd, html.inv-anim .is-revealed.n90-closing__osd { opacity: 1; }

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

/* ---------- 10. intro scene "Putar Kaset Angkatan" (scene.json + sections/_scene) ----------
   The intro is teleported to <body>: everything here stands on its own classes. */
.n90-scene-wall {
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(180deg, rgb(255 255 255 / .035) 0 1px, transparent 1px 4px),
        radial-gradient(circle, color-mix(in srgb, var(--inv-accent) 30%, transparent) 1.4px, transparent 2px) 0 0 / 11px 11px,
        radial-gradient(90% 45% at 15% 5%, color-mix(in srgb, var(--inv-primary) 85%, transparent), transparent 75%),
        radial-gradient(80% 35% at 90% 100%, color-mix(in srgb, var(--inv-accent) 30%, transparent), transparent 75%),
        radial-gradient(60% 30% at 50% 52%, color-mix(in srgb, var(--inv-pop) 18%, transparent), transparent 75%),
        var(--inv-deep);
}
.n90-scene-osd { display: flex; flex-direction: column; gap: .1rem; font-family: var(--n90-pixel); line-height: 1; color: #fff; text-shadow: 2px 0 0 color-mix(in srgb, var(--inv-accent) 70%, transparent), -2px 0 0 color-mix(in srgb, var(--inv-pop) 60%, transparent); }
.n90-scene-osd__play { font-size: 1.7rem; letter-spacing: .06em; }
.n90-scene-osd__date { font-size: 1.15rem; letter-spacing: .08em; color: var(--inv-shine); }
.n90-scene-shape { position: static; width: 100%; height: 100%; }
.n90-scene-shape--squiggle { color: var(--inv-pop); }
.n90-scene-shape--triangle { color: var(--inv-shine); }
.n90-scene-shape--zigzag { color: var(--inv-accent); }
.n90-scene-shape--ring { color: color-mix(in srgb, var(--inv-pop) 80%, #fff); }
.n90-scene-cassette { --cas-w: 100%; filter: drop-shadow(0 18px 18px rgb(0 0 0 / .45)); }
/* the reels turn while the tape "plays", then stop */
.n90-scene-cassette .n90-cassette__reel { animation: n90-spin 1.1s linear .9s 5 both; }
.n90-scene-burst { position: absolute; inset: 0; container-type: size; display: grid; place-items: center; }
.n90-scene-burst .n90-burst { width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); rotate: 0deg; }
.n90-scene-burst .n90-burst strong { font-size: calc(min(100cqw, 100cqh) * .36); }
.n90-scene-burst .n90-burst span { font-size: calc(min(100cqw, 100cqh) * .12); }
.inv-scene__art > .n90-scene-walkman { width: 100%; height: auto; margin: 0; filter: drop-shadow(0 14px 14px rgb(0 0 0 / .4)); }

/* the name card: the J-card insert — a hot band "▶ SIDE A", ruled off-white paper, the school's name in marker,
   teal + yellow stripes at the foot, a deep outline and a hot offset shadow like the cassette */
body.n90-body .inv-intro--scene .inv-scene__card {
    top: 52.5%; aspect-ratio: auto; overflow: hidden; rotate: -2deg;
    -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 0 1.2rem 2rem; border-radius: 10px;
    background:
        linear-gradient(var(--inv-pop), var(--inv-pop)) bottom 13px left 0 / 100% 7px no-repeat,
        linear-gradient(var(--inv-shine), var(--inv-shine)) bottom 4px left 0 / 100% 7px no-repeat,
        repeating-linear-gradient(180deg, transparent 0 22px, color-mix(in srgb, var(--inv-deep) 8%, transparent) 22px 23px),
        #fffdf6;
    box-shadow: 0 0 0 3px var(--inv-deep), 8px 8px 0 3px var(--inv-accent), 0 30px 40px -18px rgb(0 0 0 / .6);
}
body.n90-body .inv-scene__card::before {
    content: '\25B6\00A0 Side A'; display: block; margin: 0 -1.2rem 1rem; padding: .5rem 1rem .4rem;
    font-family: var(--n90-display); font-size: .95rem; letter-spacing: .12em; line-height: 1.1; text-transform: uppercase;
    color: #fff; background: var(--inv-accent);
}
body.n90-body .inv-scene__card .inv-intro__label {
    justify-self: center; font-family: var(--n90-sans); font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--n90-hot-ink);
}
body.n90-body .inv-scene__card .inv-intro__names {
    font-family: var(--n90-hand) !important; font-weight: 400; font-size: clamp(2rem, 9.5vw, 2.7rem); line-height: 1.08; color: var(--inv-deep); overflow-wrap: anywhere;
}
body.n90-body .inv-scene__card .inv-intro__rule { height: 5px; width: 2.6rem; border-radius: 3px; background: var(--inv-pop); }
body.n90-body .inv-scene__card .inv-intro__date { font-family: var(--n90-sans); font-weight: 700; font-size: .84rem; color: var(--n90-title); }
@media (prefers-reduced-motion: reduce) {
    .n90-scene-cassette .n90-cassette__reel { animation: none; }
}
/* short phones (≈ 360×640): a tighter card */
@media (min-aspect-ratio: 10 / 19) {
    body.n90-body .inv-intro--scene .inv-scene__card { top: 53%; padding-bottom: 1.7rem; }
    body.n90-body .inv-scene__card::before { margin-bottom: .7rem; padding: .35rem 1rem .3rem; }
    .n90-scene-cassette { --cas-w: 84%; margin: 3.5% auto 0; }
    .n90-scene-osd__play { font-size: 1.45rem; }
    .n90-scene-osd__date { font-size: 1rem; }
}