/*
 * Template "Roket Pemberani" (Khitanan) — "brave little astronaut": the khitan as a courageous space
 * mission. Deep space indigo sections with a static starfield alternate with light sky / cream sections
 * (a faint blueprint dot grid); vivid accents: rocket red-orange, sunny yellow, teal. All artwork is
 * original inline SVG (rocket, helmet, mission patch, planets); mobile-first, one column (~460px) on a
 * night-sky backdrop on wide screens.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (rocket red: nose cone, fins, buttons)   --inv-on-primary (text on primary)
 *   --inv-accent (sunny yellow: flame, digits, highlights on dark)   --inv-teal (second accent)
 *   --inv-background (cream)   --inv-soft (pale sky)   --inv-text   --inv-ink (primary text on light)
 *   --inv-deep (indigo sections)   --inv-night (the darkest space)
 *
 * Section tones (set on each section in its partial): .rk-tone--light (cream + dot grid), --sky (pale sky),
 * --deep (indigo space), --sun (a sunny band); the cover uses --space. Light and deep alternate down the page.
 *
 * Motion only runs with html.inv-anim (set by <x-inv.head> unless the guest prefers reduced motion);
 * without it everything is shown finished and the rocket does not launch.
 *
 * Contents: 1 base · 2 tones & starfield · 3 shared pieces (heading, planet, patch, rocket, helmet) ·
 *           4 cover · 5 sections in page order · 6 forms · 7 shared components · 8 screen sizes · 9 motion
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Indigo Roket" variant (the variant's colours override these) */
    --inv-primary: #d93a1f;
    --inv-on-primary: #ffffff;
    --inv-accent: #ffc22b;
    --inv-teal: #13b3a2;
    --inv-background: #fdf7ea;
    --inv-soft: #d8eafe;
    --inv-text: #171a42;
    --inv-ink: #c4301a;
    --inv-deep: #1d2163;
    --inv-night: #0c0f36;
    --inv-radius: 18px;

    --rk-display: 'Unbounded', 'Trebuchet MS', system-ui, sans-serif;
    --rk-sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --rk-col: 460px;
    --rk-title: color-mix(in srgb, var(--inv-deep) 88%, var(--inv-text));
    --rk-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    --rk-cream-muted: color-mix(in srgb, #fff 80%, transparent);
    --rk-ring: color-mix(in srgb, var(--inv-deep) 14%, transparent);
    --rk-drop: 0 22px 40px -24px color-mix(in srgb, var(--inv-night) 70%, transparent);
    --rk-metal: linear-gradient(140deg, #f7f9fd, #c4cce0 48%, #8790ae);

    /* a static starfield tile (dots + two four-point sparkles), white; opacity per use */
    --rk-starfield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' fill='%23fff'%3E%3Ccircle cx='12' cy='20' r='1.2' opacity='.9'/%3E%3Ccircle cx='60' cy='48' r='.8' opacity='.6'/%3E%3Ccircle cx='110' cy='14' r='1' opacity='.8'/%3E%3Ccircle cx='170' cy='36' r='1.3' opacity='.9'/%3E%3Ccircle cx='222' cy='70' r='.8' opacity='.5'/%3E%3Ccircle cx='30' cy='96' r='1' opacity='.7'/%3E%3Ccircle cx='142' cy='92' r='.7' opacity='.5'/%3E%3Ccircle cx='200' cy='130' r='1.1' opacity='.8'/%3E%3Ccircle cx='16' cy='170' r='.8' opacity='.6'/%3E%3Ccircle cx='70' cy='204' r='1.2' opacity='.8'/%3E%3Ccircle cx='128' cy='176' r='.9' opacity='.6'/%3E%3Ccircle cx='232' cy='182' r='.7' opacity='.5'/%3E%3Ccircle cx='100' cy='232' r='.8' opacity='.6'/%3E%3Ccircle cx='48' cy='146' r='.6' opacity='.45'/%3E%3Ccircle cx='160' cy='150' r='.6' opacity='.45'/%3E%3Cpath d='M88 110c.6 4.6 3.4 7.4 8 8-4.6.6-7.4 3.4-8 8-.6-4.6-3.4-7.4-8-8 4.6-.6 7.4-3.4 8-8Z' opacity='.9'/%3E%3Cpath d='M190 206c.4 3 2 4.6 5 5-3 .4-4.6 2-5 5-.4-3-2-4.6-5-5 3-.4 4.6-2 5-5Z' opacity='.75'/%3E%3C/svg%3E");
    /* a small filled four-point star (a mask) */
    --rk-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0c.9 5.6 4.4 9.1 10 10-5.6.9-9.1 4.4-10 10-.9-5.6-4.4-9.1-10-10C5.6 9.1 9.1 5.6 10 0Z'/%3E%3C/svg%3E");

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

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

body {
    margin: 0;
    background: var(--inv-background);
    color: var(--inv-text);
    font-family: var(--rk-sans);
    font-size: 15.5px;
    line-height: 1.6;
    font-variant-numeric: lining-nums;
    -webkit-font-smoothing: antialiased;
}

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

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

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

.rk-arabic { font-family: 'Amiri', 'Traditional Arabic', serif; line-height: 1.9; color: var(--inv-deep); }
.rk-amp { color: var(--inv-accent); }

/* a small rounded link with an icon (Instagram) */
.rk-chip {
    display: inline-flex; align-items: center; gap: .35rem; min-height: 2.25rem; padding: .3rem .9rem;
    border-radius: 999px; font-size: .84rem; font-weight: 600; text-decoration: none; color: var(--inv-deep);
    background: var(--inv-soft); box-shadow: inset 0 0 0 1px var(--rk-ring);
}
.rk-chip .rk-icon { width: 1rem; height: 1rem; }
.rk-icon { width: 1.15rem; height: 1.15rem; flex: none; }

/* ---------- 2. section tones & starfield ---------- */

/* the static starfield: a tile of dots and two sparkles (no twinkling) */
.rk-stars {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--rk-starfield) 0 0 / 240px 240px repeat; opacity: .85;
}
.rk-stars--soft { opacity: .45; }

/* space (cover) and deep: indigo with a soft nebula glow of the rocket colour and teal */
.rk-tone--space, .rk-tone--deep { color: #fff; }
.rk-tone--space {
    background:
        radial-gradient(70% 38% at 85% 12%, color-mix(in srgb, var(--inv-teal) 30%, transparent), transparent 72%),
        radial-gradient(80% 40% at 0% 78%, color-mix(in srgb, var(--inv-primary) 30%, transparent), transparent 72%),
        linear-gradient(180deg, var(--inv-deep), var(--inv-night) 92%);
}
.rk-tone--deep {
    background:
        radial-gradient(80% 36% at 100% 0%, color-mix(in srgb, var(--inv-teal) 22%, transparent), transparent 72%),
        radial-gradient(80% 36% at 0% 100%, color-mix(in srgb, var(--inv-primary) 22%, transparent), transparent 72%),
        linear-gradient(180deg, var(--inv-deep), color-mix(in srgb, var(--inv-deep) 55%, var(--inv-night)));
}
.rk-tone--deep a:not(.inv-button) { color: var(--inv-accent); }
.rk-tone--deep .rk-arabic { color: var(--inv-accent); }

/* sky: a fresh pale-sky wash */
.rk-tone--sky {
    background:
        radial-gradient(70% 40% at 50% 0%, rgb(255 255 255 / .7), transparent 75%),
        linear-gradient(180deg, var(--inv-soft), color-mix(in srgb, var(--inv-soft) 45%, var(--inv-background)));
}
/* light: cream with a faint blueprint dot grid and a warm glow */
.rk-tone--light {
    background:
        radial-gradient(60% 30% at 100% 0%, color-mix(in srgb, var(--inv-accent) 16%, transparent), transparent 75%),
        radial-gradient(60% 30% at 0% 100%, color-mix(in srgb, var(--inv-teal) 12%, transparent), transparent 75%),
        var(--inv-background);
}
.rk-tone--light::before, .rk-tone--sky::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--inv-deep) 16%, transparent) 1.1px, transparent 1.6px) 0 0 / 22px 22px;
    -webkit-mask: linear-gradient(180deg, #000, transparent 70%); mask: linear-gradient(180deg, #000, transparent 70%);
}
.rk-tone--sky::before { opacity: .7; }

/* sun: a full sunny band */
.rk-tone--sun {
    color: var(--inv-text);
    background:
        radial-gradient(80% 50% at 50% 0%, rgb(255 255 255 / .35), transparent 75%),
        var(--inv-accent);
}
.rk-tone--sun::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .14;
    background: radial-gradient(circle, var(--inv-deep) 1.2px, transparent 1.7px) 0 0 / 22px 22px;
}

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

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

/* section heading: a mission label, a bold Unbounded title with a coloured last word, a dotted orbit */
.rk-heading { margin: 0 0 2rem; }
.rk-heading--left { text-align: left; }
.rk-heading__eyebrow {
    display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .8rem; padding: .34rem .85rem .34rem .6rem;
    border-radius: 999px; font-size: .68rem; font-weight: 700; line-height: 1.2; letter-spacing: .2em; text-transform: uppercase;
    color: var(--inv-deep); background: color-mix(in srgb, var(--inv-deep) 9%, transparent);
}
.rk-heading__star { width: .85rem; height: .85rem; flex: none; fill: var(--inv-primary); }
.rk-heading__title {
    margin: 0; font-family: var(--rk-display); font-size: 1.9rem; font-weight: 700; line-height: 1.14;
    letter-spacing: -.02em; color: var(--rk-title);
}
.rk-heading__title em { font-style: normal; color: var(--inv-ink); }
.rk-heading__orbit { display: block; width: 7.4rem; height: 1.05rem; margin: .7rem auto 0; overflow: visible; }
.rk-heading--left .rk-heading__orbit { margin-left: 0; }
.rk-heading__path { fill: none; stroke: var(--inv-teal); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0 7; }
.rk-heading__planet { fill: var(--inv-accent); }
.rk-heading__ring { fill: none; stroke: var(--inv-primary); stroke-width: 2; stroke-linecap: round; }
.rk-tone--deep .rk-heading__eyebrow { color: #fff; background: rgb(255 255 255 / .1); }
.rk-tone--deep .rk-heading__star { fill: var(--inv-accent); }
.rk-tone--deep .rk-heading__title { color: #fff; }
.rk-tone--deep .rk-heading__title em { color: var(--inv-accent); }
.rk-tone--sun .rk-heading__eyebrow { background: rgb(255 255 255 / .62); }
.rk-tone--sun .rk-heading__title { color: var(--inv-deep); }
.rk-tone--sun .rk-heading__title em {
    color: var(--inv-deep); padding: 0 .1em;
    background: linear-gradient(180deg, transparent 58%, rgb(255 255 255 / .7) 58%, rgb(255 255 255 / .7) 92%, transparent 92%);
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.rk-tone--sun .rk-heading__path { stroke: var(--inv-deep); }
.rk-tone--sun .rk-heading__planet { fill: #fff; }

/* planets (sections/_planet) */
.rk-planet { display: block; overflow: visible; pointer-events: none; }
.rk-planet__ball { fill: var(--inv-accent); }
.rk-planet__band { fill: none; stroke: color-mix(in srgb, var(--inv-primary) 70%, var(--inv-accent)); stroke-width: 4.5; stroke-linecap: round; opacity: .55; }
.rk-planet__shade { fill: color-mix(in srgb, var(--inv-primary) 55%, #000); opacity: .28; }
.rk-planet__ring { fill: none; stroke: var(--inv-teal); stroke-width: 4; }
.rk-planet__shine { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .7; }
.rk-planet__moon { fill: color-mix(in srgb, var(--inv-teal) 70%, #fff); }
.rk-planet--moon .rk-planet__shade { fill: var(--inv-deep); opacity: .25; }
.rk-planet__crater { fill: color-mix(in srgb, var(--inv-teal) 75%, var(--inv-deep)); opacity: .45; }

/* the mission patch (sections/_patch) */
.rk-patch { display: block; overflow: visible; filter: drop-shadow(0 8px 10px rgb(0 0 0 / .3)); }
.rk-patch__rim { fill: var(--inv-accent); }
.rk-patch__disc { fill: var(--inv-deep); }
.rk-patch__stitch { fill: none; stroke: color-mix(in srgb, var(--inv-accent) 55%, #7a5200); stroke-width: 1.4; stroke-dasharray: 2.4 2.6; }
.rk-patch__core { fill: color-mix(in srgb, var(--inv-teal) 80%, var(--inv-deep)); }
.rk-patch__orbit { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 0 4.5; opacity: .8; }
.rk-patch__moon, .rk-patch__star { fill: var(--inv-accent); }
.rk-patch__text { fill: #fff; font-family: var(--rk-display); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; }
.rk-patch__text--small { font-size: 8.5px; letter-spacing: .2em; fill: var(--inv-accent); }

/* the rocket (sections/_rocket): drawing 200×312, the photo window placed in % of it */
.rk-rocket { position: relative; width: var(--rk-rocket-w, 16rem); aspect-ratio: 200 / 312; margin: 0; }
.rk-rocket__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rk-rocket__flame { transform-origin: 100px 274px; }
.rk-rocket__flame-core { fill: #fff6cf; }
.rk-rocket__nozzle { fill: color-mix(in srgb, var(--inv-deep) 70%, #8d97b8); }
.rk-rocket__nozzle-shine { fill: #fff; opacity: .25; }
.rk-rocket__fin-edge { fill: none; stroke: rgb(255 255 255 / .35); stroke-width: 2; stroke-linecap: round; }
.rk-rocket__band { fill: none; stroke: var(--inv-accent); stroke-width: 7; }
.rk-rocket__band--thin { stroke-width: 3; }
.rk-rocket__shine { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; opacity: .85; }
.rk-rocket__seam { fill: none; stroke: color-mix(in srgb, var(--inv-deep) 30%, transparent); stroke-width: 1.5; }
.rk-rocket__outline { fill: none; stroke: color-mix(in srgb, var(--inv-night) 22%, transparent); stroke-width: 1.5; }
.rk-rocket__ring-edge { fill: none; stroke: color-mix(in srgb, var(--inv-night) 35%, transparent); stroke-width: 1.5; }
.rk-rocket__ring-inner { fill: var(--inv-night); }
.rk-rocket__rivets circle { fill: color-mix(in srgb, var(--inv-deep) 55%, #9aa4c0); }
.rk-rocket__window { position: absolute; left: 17%; top: 22.44%; width: 66%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--inv-night); }
.rk-rocket__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
/* the cover photo zooms in a little towards the face (portraits are usually half-body) */
.rk-rocket--cover .rk-rocket__photo { transform: scale(1.18); transform-origin: 50% 22%; }
.rk-rocket__empty {
    position: absolute; inset: 0; display: grid; place-items: center;
    background:
        radial-gradient(60% 50% at 70% 25%, color-mix(in srgb, var(--inv-teal) 45%, transparent), transparent 70%),
        var(--rk-starfield) 0 0 / 160px 160px,
        linear-gradient(180deg, var(--inv-deep), var(--inv-night));
}
.rk-rocket__initial { font-family: var(--rk-display); font-weight: 800; font-size: calc(var(--rk-rocket-w, 16rem) * .3); line-height: 1; color: var(--inv-accent); text-shadow: 0 6px 18px rgb(0 0 0 / .35); }
.rk-rocket__initial--many { font-size: calc(var(--rk-rocket-w, 16rem) * .14); white-space: nowrap; }
/* the glass glare: a thin bright arc on the upper-left edge only */
.rk-rocket__glare, .rk-helmet__glare {
    position: absolute; inset: 5%; border-radius: 50%; pointer-events: none;
    border: 3px solid transparent; border-top-color: rgb(255 255 255 / .55); transform: rotate(-38deg);
}

/* the astronaut helmet (sections/_helmet): drawing 120×124, the visor photo in % of it */
.rk-helmet { position: relative; width: 100%; aspect-ratio: 120 / 124; margin: 0; }
.rk-helmet__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 12px rgb(0 0 0 / .18)); }
.rk-helmet__collar { fill: var(--inv-teal); }
.rk-helmet__ear { fill: var(--inv-primary); }
.rk-helmet__antenna { fill: none; stroke: #9aa4c0; stroke-width: 2.6; stroke-linecap: round; }
.rk-helmet__tip { fill: var(--inv-accent); }
.rk-helmet__edge { fill: none; stroke: color-mix(in srgb, var(--inv-night) 18%, transparent); stroke-width: 1.2; }
.rk-helmet__rim { fill: var(--inv-accent); }
.rk-helmet__rim-dark { fill: var(--inv-night); }
.rk-helmet__visor { position: absolute; left: 18.33%; top: 16.13%; width: 63.33%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.rk-helmet__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.rk-helmet__empty {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: var(--rk-starfield) 0 0 / 120px 120px, linear-gradient(180deg, var(--inv-deep), var(--inv-night));
}
.rk-helmet__empty span { font-family: var(--rk-display); font-weight: 800; font-size: 2.6rem; color: var(--inv-accent); }

/* ---------- 4. cover ---------- */
.rk-cover {
    --rk-rocket-w: min(74vw, 19rem, calc(56svh / 1.56));
    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.6rem 1.25rem 1.7rem; isolation: isolate;
    transition: opacity .9s ease;
}
.rk-cover__inner { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; }

/* the art: orbit and planets behind, the rocket (+ patch) in the middle */
.rk-cover__art { position: relative; display: flex; justify-content: center; width: var(--rk-rocket-w); margin-bottom: calc(var(--rk-rocket-w) * -.17); }
.rk-cover__ship { position: relative; z-index: 1; }
.rk-cover__orbit {
    position: absolute; z-index: 0; left: -32%; top: 23%; width: 164%; overflow: visible; transform: rotate(-13deg);
}
.rk-cover__orbit ellipse { fill: none; stroke: rgb(255 255 255 / .55); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 0 7; }
.rk-cover__satellite { fill: var(--inv-teal); }
.rk-cover__planet { position: absolute; z-index: 0; left: -34%; top: 3%; width: 42%; }
.rk-cover__moon { position: absolute; z-index: 0; right: -20%; top: 10%; width: 15%; }
.rk-cover__patch { position: absolute; z-index: 2; left: -16%; top: 60%; width: 36%; transform: rotate(-12deg); }

.rk-cover__text { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; }
.rk-cover__title {
    display: inline-flex; align-items: center; gap: .4rem; margin: 0; padding: .36rem .95rem .36rem .7rem; border-radius: 999px;
    font-size: .7rem; font-weight: 700; line-height: 1.2; letter-spacing: .2em; text-transform: uppercase;
    color: var(--inv-on-primary); background: var(--inv-primary); box-shadow: 0 6px 16px -6px rgb(0 0 0 / .5);
}
.rk-cover__title .rk-icon { width: 1rem; height: 1rem; }
.rk-cover__names {
    margin: .55rem 0 0; font-family: var(--rk-display); font-weight: 800; font-size: 2.9rem; line-height: 1.02;
    letter-spacing: -.03em; color: #fff; overflow-wrap: anywhere; text-shadow: 0 4px 24px rgb(0 0 0 / .35);
}
.rk-cover--many .rk-cover__names { font-size: 2rem; }
.rk-cover__date { margin: .45rem 0 0; font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-accent); }
.rk-cover__quote { max-width: 32ch; margin: .4rem 0 0; font-size: .95rem; line-height: 1.42; color: var(--rk-cream-muted); }
.rk-cover__guest {
    width: min(100%, 19rem); margin: .9rem 0 0; padding: .45rem .95rem .55rem; border-radius: 16px;
    background: rgb(255 255 255 / .09); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .22);
}
.rk-cover__guest p { margin: 0; font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-accent); }
.rk-cover__guest-name { display: block; font-family: var(--rk-display); font-size: 1rem; font-weight: 600; line-height: 1.35; color: #fff; overflow-wrap: anywhere; }
.rk-cover__open {
    margin-top: .95rem; min-height: 3rem; padding: .7rem 1.9rem; font-weight: 700; font-size: 1rem; letter-spacing: .02em;
    color: var(--inv-night) !important; background: var(--inv-accent) !important;
    box-shadow: 0 4px 0 0 color-mix(in srgb, var(--inv-accent) 55%, #6b3a00), 0 14px 26px -10px rgb(0 0 0 / .6);
}

/* leaving: the text drops away, the rocket (with its patch) launches, the cover fades */
.rk-cover--leave { transition: opacity .55s ease .75s; }
.rk-cover--gone { opacity: 0; }

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

/* opening: the white transmission card under the patch, a dotted orbit behind, a planet in the corner */
.rk-opening { padding: 5.4rem 1.4rem 4.6rem; }
.rk-opening__planet { position: absolute; right: -2.4rem; top: 1.2rem; width: 8.5rem; z-index: -1; }
.rk-opening__orbit { position: absolute; left: -12%; top: 12%; width: 124%; z-index: -1; overflow: visible; transform: rotate(-8deg); }
.rk-opening__orbit ellipse { fill: none; stroke: color-mix(in srgb, var(--inv-deep) 28%, transparent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0 8; }
.rk-opening__card {
    position: relative; max-width: 23rem; margin: 2.2rem auto 0; padding: 3.9rem 1.4rem 2rem; border-radius: 28px;
    background: #fff; box-shadow: inset 0 0 0 1.5px var(--rk-ring), var(--rk-drop);
}
.rk-opening__patch { position: absolute; left: 50%; top: -3.3rem; width: 6.6rem; margin-left: -3.3rem; }
.rk-opening__basmalah { margin: 0 0 .7rem; font-size: 1.85rem; }
.rk-opening__greeting { margin: 0 auto .8rem; max-width: 22ch; font-family: var(--rk-display); font-size: 1.02rem; font-weight: 600; line-height: 1.4; color: var(--inv-ink); }
.rk-opening__message { margin: 0 auto; max-width: 30ch; color: var(--rk-muted); }

/* child: the astronaut ID card(s), then the parents as mission control */
.rk-child__list { display: grid; gap: 1.6rem; }
.rk-idcard {
    position: relative; width: 100%; max-width: 22.5rem; margin: 0 auto; overflow: hidden; border-radius: 22px; text-align: left;
    color: var(--inv-text); background: linear-gradient(180deg, #fff, color-mix(in srgb, #fff 80%, var(--inv-soft)));
    box-shadow: 0 0 0 1px rgb(255 255 255 / .4), 0 28px 50px -26px rgb(0 0 0 / .8);
}
.rk-idcard__head {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: 0; padding: .55rem 1rem;
    font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: var(--inv-on-primary); background: var(--inv-primary);
}
.rk-idcard__mission { display: inline-flex; align-items: center; gap: .3rem; }
.rk-idcard__mission svg { width: 1rem; height: 1rem; fill: currentColor; }
.rk-idcard__body { display: grid; grid-template-columns: 44% minmax(0, 1fr); align-items: center; gap: .9rem; padding: 1.1rem 1rem .7rem; }
.rk-idcard__label { margin: 0; font-size: .6rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--rk-muted); }
.rk-idcard__nickname { margin: .05rem 0 .55rem; font-family: var(--rk-display); font-size: 1.75rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--inv-ink); overflow-wrap: anywhere; }
.rk-idcard__name { margin: .1rem 0 0; font-family: var(--rk-display); font-size: .92rem; font-weight: 600; line-height: 1.35; color: var(--rk-title); overflow-wrap: anywhere; }
.rk-idcard__data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .8rem; margin: 0 1rem; padding: .75rem 0; border-top: 1.5px dashed var(--rk-ring); }
.rk-idcard__data > div:only-child { grid-column: 1 / -1; }
.rk-idcard__data dt { font-size: .6rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--rk-muted); }
.rk-idcard__data dd { margin: .1rem 0 0; font-size: .92rem; font-weight: 600; line-height: 1.3; color: var(--inv-text); }
.rk-idcard__ig { margin: 0 1rem .8rem; color: var(--inv-deep) !important; }
.rk-idcard__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1rem .65rem;
    font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-deep); background: var(--inv-soft);
}
.rk-idcard__barcode {
    width: 5.6rem; height: 1.15rem; opacity: .8;
    background: repeating-linear-gradient(90deg, var(--inv-deep) 0 2px, transparent 2px 4px, var(--inv-deep) 4px 5px, transparent 5px 7px, var(--inv-deep) 7px 10px, transparent 10px 12px);
}
.rk-child__parents {
    max-width: 22.5rem; margin: 1.8rem auto 0; padding: 1.15rem 1.2rem 1.2rem; border-radius: 20px; text-align: left;
    background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14);
}
.rk-child__parents-label { display: flex; align-items: center; gap: .45rem; margin: 0 0 .4rem; font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-accent); }
.rk-child__parents-label .rk-icon { width: 1.1rem; height: 1.1rem; }
.rk-child__parents-names { display: flex; flex-direction: column; margin: 0; font-family: var(--rk-display); font-size: 1.08rem; font-weight: 600; line-height: 1.4; color: #fff; }
.rk-child__parents-names .rk-amp { font-size: .9rem; }
.rk-child__address { display: flex; align-items: flex-start; gap: .5rem; margin: .85rem 0 0; padding-top: .8rem; font-size: .88rem; color: var(--rk-cream-muted); border-top: 1px dashed rgb(255 255 255 / .25); }
.rk-child__address .rk-icon { margin-top: .15rem; color: var(--inv-teal); }

/* message: a transmission card on the sunny band */
.rk-message { text-align: left; }
.rk-message__moon { position: absolute; right: -1.2rem; top: 2.2rem; width: 5.5rem; z-index: -1; }
.rk-message__card { position: relative; margin: 0; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 22px 40px -24px color-mix(in srgb, var(--inv-deep) 80%, transparent); }
.rk-message__head { display: flex; align-items: center; gap: .65rem; margin: 0; padding: .65rem .95rem; color: #fff; background: var(--inv-deep); }
.rk-message__head .rk-icon { color: var(--inv-accent); }
.rk-message__wave { display: flex; align-items: center; gap: 3px; height: 1.4rem; }
.rk-message__wave i { display: block; width: 3px; height: var(--h); border-radius: 2px; background: var(--inv-teal); }
.rk-message__live {
    margin-left: auto; padding: .18rem .55rem; border-radius: 999px; font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: var(--inv-on-primary); background: var(--inv-primary);
}
.rk-message__text { margin: 0; padding: 1.25rem 1.25rem 0; font-size: 1.16rem; font-weight: 500; line-height: 1.55; color: var(--inv-text); }
.rk-message__card cite {
    display: flex; align-items: center; gap: .55rem; margin: 1rem 1.25rem 1.3rem; font-style: normal; font-size: .74rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: var(--inv-ink);
}
.rk-message__card cite::before { content: ''; width: 1.6rem; height: 3px; border-radius: 2px; background: var(--inv-primary); }

/* events: mission coordinates cards (red header with a porthole day badge) */
.rk-events__moon { position: absolute; left: -1.6rem; top: 3rem; width: 4.6rem; z-index: -1; opacity: .9; }
.rk-event { max-width: 23rem; margin: 0 auto; overflow: hidden; border-radius: 24px; text-align: left; background: #fff; box-shadow: inset 0 0 0 1.5px var(--rk-ring), var(--rk-drop); }
.rk-event + .rk-event { margin-top: 2rem; }
.rk-event__head { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.05rem; color: var(--inv-on-primary); background: var(--inv-primary); }
.rk-event__day {
    display: grid; place-items: center; flex: none; width: 3.6rem; aspect-ratio: 1; border-radius: 50%;
    font-family: var(--rk-display); font-size: 1.45rem; font-weight: 800; letter-spacing: -.03em; color: var(--inv-night); background: var(--inv-accent);
    box-shadow: 0 0 0 4px rgb(255 255 255 / .35), inset 0 -4px 0 rgb(0 0 0 / .12);
}
.rk-event__when { display: flex; flex-direction: column; min-width: 0; }
.rk-event__code { font-size: .6rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; opacity: .85; }
.rk-event__weekday { font-family: var(--rk-display); font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.rk-event__month { font-size: .86rem; font-weight: 500; opacity: .92; }
.rk-event--alt .rk-event__head { color: #fff; background: var(--inv-deep); }
.rk-event--alt .rk-event__day { background: var(--inv-teal); }
.rk-event__body { padding: 1.05rem 1.05rem 1.3rem; }
.rk-event__media { margin-bottom: 1rem; }
.rk-event__photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 45%; border-radius: 18px; box-shadow: 0 0 0 4px var(--inv-soft); }
.rk-event__name { margin: 0; font-family: var(--rk-display); font-size: 1.28rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--rk-title); }
.rk-event__rows { display: grid; gap: .75rem; margin: 1rem 0 0; padding: 1rem 0 0; list-style: none; font-size: .92rem; border-top: 1.5px dashed var(--rk-ring); }
.rk-event__rows li { display: flex; align-items: flex-start; gap: .7rem; }
.rk-event__rows .rk-icon { width: 2.1rem; height: 2.1rem; padding: .45rem; border-radius: 50%; color: var(--inv-deep); background: var(--inv-soft); }
.rk-event__rows li > span { padding-top: .3rem; }
.rk-event__venue { display: block; font-weight: 700; }
.rk-event__address { display: block; font-size: .86rem; color: var(--rk-muted); }
.rk-event .inv-maps { margin-top: 1.15rem; text-align: center; }
.rk-event .inv-maps .inv-button { width: 100%; font-weight: 700; }
.rk-event .inv-maps__frame { height: 190px; border-radius: 16px; }

/* countdown: the mission-control panel (dark screens, yellow digits, console keys, switches) */
.rk-console {
    max-width: 22.5rem; margin: 0 auto; padding: .85rem .85rem 1.05rem; border-radius: 26px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--inv-deep) 78%, #a9b6e0), color-mix(in srgb, var(--inv-deep) 60%, var(--inv-night)));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 0 0 1.5px rgb(255 255 255 / .08), 0 28px 50px -24px rgb(0 0 0 / .8);
}
.rk-console__bar { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .15rem .25rem .8rem; }
.rk-console__lights { display: inline-flex; gap: .35rem; }
.rk-console__lights i { display: block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--inv-primary); box-shadow: 0 0 8px var(--inv-primary); }
.rk-console__lights i:nth-child(2) { background: var(--inv-accent); box-shadow: 0 0 8px var(--inv-accent); }
.rk-console__lights i:nth-child(3) { background: var(--inv-teal); box-shadow: 0 0 8px var(--inv-teal); }
.rk-console__label { font-family: var(--rk-display); font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--inv-accent); }
.rk-console__status {
    margin-left: auto; padding: .15rem .6rem; border-radius: 999px; font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: var(--inv-night); background: var(--inv-teal);
}
.rk-countdown .inv-countdown { gap: .45rem; }
.rk-countdown .inv-countdown__item {
    display: grid; place-content: center; flex: 1 1 0; min-width: 0; padding: .75rem 0 .6rem; border-radius: 14px; background: var(--inv-night);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-teal) 38%, transparent), inset 0 0 22px color-mix(in srgb, var(--inv-teal) 14%, transparent);
}
.rk-countdown .inv-countdown__value {
    font-variant-numeric: lining-nums tabular-nums; font-family: var(--rk-display); font-size: 1.62rem; font-weight: 700; line-height: 1.05;
    color: var(--inv-accent); text-shadow: 0 0 12px color-mix(in srgb, var(--inv-accent) 45%, transparent);
}
.rk-countdown .inv-countdown__label { margin-top: .2rem; font-size: .56rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-teal) 70%, #fff); }
.rk-countdown .inv-countdown__done { font-family: var(--rk-display); font-size: 1rem; line-height: 1.5; color: var(--inv-accent); }
.rk-countdown .inv-countdown__actions { flex-direction: column; align-items: stretch; gap: .55rem; margin-top: 1rem; }
.rk-countdown .inv-countdown__actions .inv-button {
    width: 100%; min-height: 2.75rem; padding: .6rem 1rem; font-size: .86rem; font-weight: 700;
    color: #fff; background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .35);
}
.rk-countdown .inv-countdown__actions .inv-button:first-child {
    color: var(--inv-on-primary); background: var(--inv-primary);
    box-shadow: 0 4px 0 0 color-mix(in srgb, var(--inv-primary) 55%, #000);
}
.rk-console__switches { display: flex; justify-content: center; gap: .9rem; margin: 1rem 0 0; }
.rk-console__switches i {
    position: relative; display: block; width: 1.7rem; height: .9rem; border-radius: 999px; background: var(--inv-night);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18);
}
.rk-console__switches i::after { content: ''; position: absolute; left: .15rem; top: .15rem; width: .6rem; height: .6rem; border-radius: 50%; background: #9aa4c0; }
.rk-console__switches i.is-on { background: color-mix(in srgb, var(--inv-teal) 75%, var(--inv-night)); }
.rk-console__switches i.is-on::after { left: auto; right: .15rem; background: #fff; }
.rk-countdown .inv-cal {
    --inv-cal-bg: #fff; --inv-cal-mark: var(--inv-primary);
    max-width: 19rem; margin: 2.4rem auto 0; border-radius: 22px; box-shadow: 0 0 0 5px rgb(255 255 255 / .12), 0 24px 44px -24px rgb(0 0 0 / .7);
}
.rk-countdown .inv-cal__month { font-family: var(--rk-display); font-size: 1.25rem; font-weight: 700; color: var(--inv-ink); }

/* prayer: calm — a soft crescent behind a white card */
.rk-prayer { padding-top: 3.2rem; padding-bottom: 4.6rem; }
.rk-prayer__moon { display: block; width: 7rem; height: 7rem; margin: 0 auto -1.6rem; overflow: visible; }
.rk-prayer__moon path:first-child { fill: #fff; filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--inv-deep) 22%, transparent)); }
.rk-prayer__moon path:last-child { fill: var(--inv-accent); }
.rk-prayer__card { position: relative; max-width: 23rem; margin: 0 auto; padding: 2.4rem 1.4rem 1.9rem; border-radius: 28px; background: rgb(255 255 255 / .92); box-shadow: inset 0 0 0 1.5px var(--rk-ring), var(--rk-drop); }
.rk-prayer__eyebrow {
    display: inline-block; margin: 0 0 1rem; padding: .32rem .9rem; border-radius: 999px; font-size: .66rem; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase; color: #fff; background: var(--inv-deep);
}
.rk-prayer__arabic { margin: 0 0 1rem; font-size: 1.6rem; }
.rk-prayer__text { margin: 0; }
.rk-prayer__text p { margin: 0; font-size: 1.06rem; font-weight: 500; line-height: 1.6; color: var(--inv-text); }
.rk-prayer__text cite { display: inline-block; margin-top: .9rem; font-style: normal; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-ink); }

/* rundown: planet stops along a dotted trajectory, alternating sides; each row = [curve from the previous
   stop] + [stop | card]; the stop column continues as a dotted line down to the row's end */
.rk-rundown__list { --rk-stop: 4.4rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.rk-rundown__item { display: grid; grid-template-columns: var(--rk-stop) minmax(0, 1fr); align-items: stretch; column-gap: .85rem; }
.rk-rundown__item--flip { grid-template-columns: minmax(0, 1fr) var(--rk-stop); }
.rk-rundown__item--flip .rk-rundown__stop { order: 2; }
.rk-rundown__path { grid-column: 1 / -1; display: block; width: calc(100% - var(--rk-stop)); height: 2.6rem; margin: 0 calc(var(--rk-stop) / 2); overflow: visible; }
.rk-rundown__path path { fill: none; stroke: color-mix(in srgb, #fff 55%, transparent); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0 7; }
.rk-rundown__stop { display: flex; flex-direction: column; align-items: center; }
.rk-rundown__stop::after { content: ''; flex: 1; width: 0; border-left: 2.4px dotted color-mix(in srgb, #fff 55%, transparent); }
.rk-rundown__item:last-child .rk-rundown__stop::after { display: none; }
.rk-rundown__planet {
    position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: var(--rk-stop); aspect-ratio: 1; border-radius: 50%;
    color: var(--inv-night); background: radial-gradient(circle at 34% 30%, color-mix(in srgb, #fff 40%, var(--inv-accent)), var(--inv-accent) 55%, color-mix(in srgb, var(--inv-accent) 70%, #7a3d00));
    box-shadow: 0 10px 20px -10px rgb(0 0 0 / .7);
}
/* the planet's ring, hidden where it crosses the ball (so it reads as passing behind it) */
.rk-rundown__planet::before {
    content: ''; position: absolute; left: -22%; right: -22%; top: 36%; height: 28%; border-radius: 50%;
    border: 2px solid rgb(255 255 255 / .6); transform: rotate(-16deg);
    -webkit-mask: radial-gradient(circle at 50% 50%, transparent calc(var(--rk-stop) / 2), #000 calc(var(--rk-stop) / 2 + 1px));
    mask: radial-gradient(circle at 50% 50%, transparent calc(var(--rk-stop) / 2), #000 calc(var(--rk-stop) / 2 + 1px));
}
.rk-rundown__item--c1 .rk-rundown__planet { background: radial-gradient(circle at 34% 30%, color-mix(in srgb, #fff 40%, var(--inv-teal)), var(--inv-teal) 55%, color-mix(in srgb, var(--inv-teal) 70%, #002b2a)); }
.rk-rundown__item--c2 .rk-rundown__planet { color: var(--inv-on-primary); background: radial-gradient(circle at 34% 30%, color-mix(in srgb, #fff 35%, var(--inv-primary)), var(--inv-primary) 55%, color-mix(in srgb, var(--inv-primary) 70%, #3a0000)); }
.rk-rundown__time { font-family: var(--rk-display); font-size: .8rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rk-rundown__body {
    position: relative; z-index: 1; min-height: var(--rk-stop); padding: .75rem .95rem .8rem; border-radius: 16px;
    background: color-mix(in srgb, var(--inv-deep) 70%, #8796c8); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), 0 14px 24px -16px rgb(0 0 0 / .6);
}
.rk-rundown__body h3 { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.35; color: #fff; }
.rk-rundown__body p { margin: .15rem 0 0; font-size: .87rem; line-height: 1.45; color: var(--rk-cream-muted); }

/* story: log entries — a round porthole photo overlapping a white log card, alternating sides */
.rk-story__list { display: grid; gap: 2.2rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.rk-story__item { --rk-hole: 8.6rem; display: grid; grid-template-columns: var(--rk-hole) minmax(0, 1fr); align-items: center; }
.rk-story__item--flip { grid-template-columns: minmax(0, 1fr) var(--rk-hole); }
.rk-story__item--flip .rk-story__porthole { order: 2; }
.rk-story__porthole {
    position: relative; z-index: 1; width: var(--rk-hole); aspect-ratio: 1; padding: 7px; border-radius: 50%; background: var(--rk-metal);
    box-shadow: 0 0 0 3px var(--inv-accent), 0 18px 28px -14px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.rk-story__photo { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.rk-story__card {
    min-width: 0; margin-left: -1.8rem; padding: .95rem 1rem 1rem 2.4rem; border-radius: 20px; background: #fff;
    border-top: 4px solid var(--inv-primary); box-shadow: inset 0 0 0 1px var(--rk-ring), var(--rk-drop);
}
.rk-story__item--flip .rk-story__card { margin: 0 -1.8rem 0 0; padding: .95rem 2.4rem 1rem 1rem; border-top-color: var(--inv-teal); }
.rk-story__log {
    display: inline-block; padding: .14rem .55rem; border-radius: 999px; font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: #fff; background: var(--inv-deep);
}
.rk-story__year { display: block; margin-top: .35rem; font-family: var(--rk-display); font-size: 1.45rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--inv-ink); }
.rk-story__card h3 { margin: .3rem 0 0; font-family: var(--rk-display); font-size: .96rem; font-weight: 600; line-height: 1.35; color: var(--rk-title); }
.rk-story__card p { margin: .4rem 0 0; font-size: .87rem; line-height: 1.5; color: var(--rk-muted); }
.rk-story__item--text { grid-template-columns: 3.4rem minmax(0, 1fr); align-items: start; }
.rk-story__item--text .rk-story__card { margin: 0; padding-left: 1rem; }
.rk-story__badge { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; margin: .4rem 0 0 0; border-radius: 50%; color: var(--inv-on-primary); background: var(--inv-primary); box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--inv-accent); }
.rk-story__badge .rk-icon { width: 1.6rem; height: 1.6rem; }

/* gallery: spacecraft windows, the first one wide */
.rk-gallery__planet { position: absolute; right: -2.6rem; top: 1.4rem; width: 8rem; z-index: -1; }
.rk-gallery .inv-gallery { gap: .65rem; }
.rk-gallery .inv-gallery__item { border-radius: 18px; box-shadow: 0 0 0 3px rgb(255 255 255 / .14), 0 18px 28px -18px rgb(0 0 0 / .8); }
.rk-gallery .inv-gallery__item:first-child {
    grid-column: 1 / -1; aspect-ratio: 4 / 3; margin-bottom: .35rem; border-radius: 3.4rem;
    box-shadow: 0 0 0 5px #c9d1e4, 0 0 0 8px var(--inv-accent), 0 24px 40px -20px rgb(0 0 0 / .8);
}

/* live streaming: a deep broadcast card on the sky band */
.rk-stream__card {
    position: relative; isolation: isolate; overflow: hidden; max-width: 23rem; margin: 0 auto; padding: 2rem 1.3rem 1.8rem; border-radius: 26px; color: #fff;
    background:
        radial-gradient(70% 50% at 80% 0%, color-mix(in srgb, var(--inv-teal) 35%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-deep), var(--inv-night));
    box-shadow: var(--rk-drop);
}
.rk-stream__tag {
    display: flex; width: fit-content; align-items: center; gap: .45rem; margin: 0 auto 1.2rem !important; padding: .26rem .75rem; border-radius: 999px;
    font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-on-primary); background: var(--inv-primary);
}
.rk-stream__tag::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.rk-stream__icon { position: relative; display: inline-grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; color: var(--inv-night); background: var(--inv-accent); }
.rk-stream__icon::after { content: ''; position: absolute; inset: -.7rem; border-radius: 50%; border: 2px dotted rgb(255 255 255 / .5); }
.rk-stream__icon .rk-icon { width: 1.7rem; height: 1.7rem; }
.rk-stream__title { margin: 1.1rem 0 .3rem; font-family: var(--rk-display); font-size: 1.4rem; font-weight: 700; line-height: 1.2; color: #fff; }
.rk-stream__card p { margin: 0 auto .4rem; max-width: 30ch; font-size: .92rem; color: var(--rk-cream-muted); }
.rk-stream__note { color: var(--inv-accent) !important; }
.rk-stream__card .inv-button { margin-top: .8rem; min-height: 2.75rem; font-weight: 700; color: var(--inv-night); background: var(--inv-accent); }

/* RSVP card and the check after sending */
.rk-rsvp__card {
    position: relative; padding: 1.5rem 1.15rem 1.4rem; border-radius: 24px; color: var(--inv-text); background: #fff; overflow: hidden;
    box-shadow: 0 28px 50px -26px rgb(0 0 0 / .8);
}
.rk-rsvp__card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--inv-primary), var(--inv-accent), var(--inv-teal)); }
.rk-rsvp__intro { margin: 0 auto 1.1rem; max-width: 30ch; font-size: .92rem; color: var(--rk-muted); }
.rk-rsvp__sent { margin-bottom: 1rem; }
.rk-rsvp__check { display: block; width: 4.25rem; height: 4.25rem; margin: 0 auto .5rem; }
.rk-rsvp__check circle { fill: var(--inv-teal); }
.rk-rsvp__check path { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
html.inv-anim .rk-rsvp__sent .rk-rsvp__check { animation: rk-bounce .8s cubic-bezier(.34, 1.56, .64, 1) both; }
html.inv-anim .rk-rsvp__sent .rk-rsvp__check path { animation: rk-draw .45s ease-out .35s both; }
.rk-rsvp__thanks { margin: 0; font-family: var(--rk-display); font-size: 1.4rem; font-weight: 700; color: var(--inv-ink); }
.rk-rsvp__line { margin: .1rem 0 0; font-size: .92rem; color: var(--rk-muted); }
.rk-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .86rem; font-weight: 600; color: var(--inv-ink); }

/* gift: white capsule cards, two per row (a red-yellow stripe and a star seal); the address below */
.rk-gift__intro { color: var(--rk-cream-muted); }
.rk-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.3rem; }
.rk-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.rk-gift .inv-gift__account,
.rk-gift .inv-gift__address {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; margin: 0; overflow: hidden;
    padding: 1.6rem .75rem 1rem; border-radius: 22px; color: var(--inv-text); background: #fff;
    box-shadow: 0 22px 34px -22px rgb(0 0 0 / .8);
}
.rk-gift .inv-gift__account::before, .rk-gift .inv-gift__address::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: .5rem; background: linear-gradient(90deg, var(--inv-primary), var(--inv-accent));
}
.rk-gift .inv-gift__account::after {
    content: ''; position: absolute; right: .7rem; top: .9rem; width: .9rem; height: .9rem; background: var(--inv-teal);
    -webkit-mask: var(--rk-spark) center / contain no-repeat; mask: var(--rk-spark) center / contain no-repeat;
}
.rk-gift .inv-gift__account p, .rk-gift .inv-gift__address p { margin: 0; }
.rk-gift .inv-gift__bank { font-weight: 700; font-size: .86rem; color: var(--inv-deep); }
.rk-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .4rem; background: #fff; }
.rk-gift .inv-gift__logo img { max-width: 5rem; }
.rk-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);
}
.rk-gift .inv-gift__holder { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rk-muted); overflow-wrap: anywhere; }
.rk-gift .inv-button { margin-top: .35rem; min-height: 2.25rem; padding: .35rem .9rem; font-size: .76rem; font-weight: 700; }
.rk-gift .inv-gift__address { margin-top: .75rem; padding-top: 1.4rem; font-size: .9rem; }
.rk-gift .inv-gift__address .inv-gift__holder { font-size: .72rem; }

/* co-hosts: white chips on the sunny band */
.rk-cohosts__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.rk-cohosts__list li {
    padding: .45rem 1rem; border-radius: 999px; font-size: 1rem; font-weight: 600; line-height: 1.3;
    color: var(--inv-deep); background: #fff; box-shadow: 0 3px 0 0 color-mix(in srgb, var(--inv-deep) 30%, transparent);
}

/* contacts: white cards with the initial in a helmet-like disc and a WhatsApp button */
.rk-contacts__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.rk-contacts__list > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .45rem); }
.rk-contact {
    display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 1.15rem .7rem 1rem; border-radius: 20px;
    background: #fff; box-shadow: inset 0 0 0 1.5px var(--rk-ring), var(--rk-drop);
}
.rk-contact__avatar {
    display: grid; place-items: center; width: 3.1rem; height: 3.1rem; margin-bottom: .6rem; border-radius: 50%;
    font-family: var(--rk-display); font-size: 1.3rem; font-weight: 800; color: var(--inv-accent);
    background: var(--inv-night); box-shadow: 0 0 0 4px #e3e8f3, 0 0 0 6.5px var(--inv-primary);
}
.rk-contact p { margin: 0; }
.rk-contact__name { font-weight: 700; font-size: .96rem; overflow-wrap: anywhere; }
.rk-contact__role { font-size: .8rem; color: var(--rk-muted); }
.rk-contact__button { margin-top: .7rem; min-height: 2.5rem; padding: .45rem .9rem; font-size: .82rem; font-weight: 700; }
.rk-contact__button .rk-icon { width: 1.05rem; height: 1.05rem; }
.rk-contact__phone { margin-top: .5rem !important; font-size: .86rem; }

/* health protocol: white chips on the sky */
.rk-protocol__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.rk-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: inset 0 0 0 1px var(--rk-ring);
}
.rk-protocol__list .rk-icon { width: 1rem; height: 1rem; color: var(--inv-teal); }
.rk-protocol__note { font-size: .9rem; color: var(--rk-muted); }

/* vendors: sky tiles, two per row */
.rk-vendors__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.rk-vendors__list > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.rk-tone--sky .rk-vendor { background: #fff; box-shadow: inset 0 0 0 1px var(--rk-ring); }
.rk-vendor { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: .9rem .6rem; border-radius: 16px; background: var(--inv-soft); }
.rk-vendor__role { font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-deep); }
.rk-vendor__name { margin-top: .2rem; font-family: var(--rk-display); font-size: .98rem; font-weight: 700; line-height: 1.25; color: var(--rk-title); overflow-wrap: anywhere; }
.rk-vendor__link { display: inline-flex; align-items: center; gap: .3rem; min-height: 2rem; font-size: .78rem; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.rk-vendor__link .rk-icon { width: .95rem; height: .95rem; }

/* closing: the full photo fading into the deep colour, a small rocket on its orbit, the thanks */
.rk-closing { padding: 2.8rem 1.5rem 1.8rem; }
.rk-closing--photo { padding-top: 0; }
.rk-closing__photo { position: relative; z-index: -1; height: min(96vw, 24rem); margin: 0 -1.5rem; overflow: hidden; -webkit-mask: linear-gradient(180deg, #000 0, #000 52%, rgb(0 0 0 / .55) 74%, rgb(0 0 0 / .18) 90%, transparent 100%); mask: linear-gradient(180deg, #000 0, #000 52%, rgb(0 0 0 / .55) 74%, rgb(0 0 0 / .18) 90%, transparent 100%); }
.rk-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 22%; --inv-parallax: 30px; }
.rk-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 34%, color-mix(in srgb, var(--inv-deep) 55%, transparent) 64%, color-mix(in srgb, var(--inv-deep) 96%, var(--inv-night)) 98%);
}
.rk-closing--photo .rk-closing__stars { top: min(78vw, 19rem); }
.rk-closing__content { position: relative; max-width: 22rem; margin: 0 auto; }
.rk-closing--photo .rk-closing__content { margin-top: -5.5rem; }
.rk-closing__flight { display: block; width: 100%; max-width: 14rem; margin: 0 auto .4rem; overflow: visible; }
.rk-closing__trail { fill: none; stroke: var(--inv-accent); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0 7; }
.rk-closing__ship-body { fill: #fff; }
.rk-closing__ship-nose, .rk-closing__ship-fin { fill: var(--inv-primary); }
.rk-closing__ship-window { fill: var(--inv-teal); }
.rk-closing__ship-flame { fill: var(--inv-accent); }
.rk-closing__eyebrow { margin: 0 0 .4rem; font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-accent); }
.rk-closing__title { margin: 0 0 .7rem; font-family: var(--rk-display); font-size: clamp(1.9rem, 8.5vw, 2.3rem); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; color: #fff; }
.rk-closing__title em { font-style: normal; color: var(--inv-accent); }
.rk-closing__message { margin: 0 auto; max-width: 30ch; font-size: .92rem; line-height: 1.6; color: var(--rk-cream-muted); }
.rk-closing__salam { margin: .8rem 0 0; font-size: .98rem; font-weight: 600; line-height: 1.4; color: color-mix(in srgb, var(--inv-teal) 55%, #fff); }
.rk-closing__signature { margin: .85rem 0 .15rem; font-size: .86rem; color: var(--rk-cream-muted); }
.rk-closing__names { margin: 0; font-family: var(--rk-display); font-size: 1.9rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--inv-accent); overflow-wrap: anywhere; }
.rk-closing__patch { width: 4.2rem; margin: 1rem auto 0; transform: rotate(-8deg); }

/* ---------- 6. forms (shared RSVP + wishes, restyled) ---------- */
.rk-main .inv-form { gap: 1rem; text-align: left; }
.rk-main .inv-form label, .rk-main .inv-form__choices legend { font-size: .84rem; font-weight: 700; color: var(--inv-text); }
.rk-main .inv-form input:not([type=radio]):not([type=checkbox]),
.rk-main .inv-form select,
.rk-main .inv-form textarea {
    width: 100%; min-height: 2.9rem; padding: .7rem .9rem; border: 0; border-radius: 12px;
    font: 400 .96rem/1.4 var(--rk-sans); color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-deep) 22%, transparent);
    transition: box-shadow .2s ease;
}
.rk-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;
}
.rk-main .inv-form input:not([type=radio]):focus-visible,
.rk-main .inv-form select:focus-visible,
.rk-main .inv-form textarea:focus-visible {
    outline: none; box-shadow: inset 0 0 0 2px var(--inv-deep), 0 0 0 4px color-mix(in srgb, var(--inv-accent) 45%, transparent);
}
.rk-main .inv-form button[type=submit] { width: 100%; min-height: 3rem; font-weight: 700; box-shadow: 0 4px 0 0 color-mix(in srgb, var(--inv-primary) 55%, #000); }
.rk-main .inv-form .inv-button--outline { width: 100%; min-height: 2.75rem; color: var(--inv-deep); box-shadow: inset 0 0 0 1.5px var(--inv-deep); }
.rk-main .inv-form__notice { text-align: center; }

/* the three answers as big cards with icons (the radio dot is hidden but still focusable) */
.rk-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.rk-rsvp .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.rk-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: 16px; cursor: pointer; text-align: center;
    font-size: .84rem; font-weight: 700; line-height: 1.2; color: var(--inv-text); background: color-mix(in srgb, var(--inv-soft) 45%, #fff);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-deep) 16%, transparent);
    transition: background-color .25s ease, color .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.rk-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rk-rsvp .inv-form__choices label::before {
    content: ''; width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none; background: #fff; box-shadow: inset 0 0 0 1px var(--rk-ring);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease;
}
.rk-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(--rk-choice-icon) center / contain no-repeat; mask: var(--rk-choice-icon) center / contain no-repeat;
}
.rk-rsvp .inv-form__choices label:nth-of-type(1) {
    --rk-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");
}
.rk-rsvp .inv-form__choices label:nth-of-type(2) {
    --rk-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");
}
.rk-rsvp .inv-form__choices label:nth-of-type(3) {
    --rk-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");
}
.rk-rsvp .inv-form__choices label:has(input:checked) {
    color: #fff; background: var(--inv-deep); transform: translateY(-3px);
    box-shadow: 0 4px 0 0 var(--inv-accent), 0 12px 24px -12px color-mix(in srgb, var(--inv-deep) 80%, transparent);
}
.rk-rsvp .inv-form__choices label:has(input:checked)::before { background-color: var(--inv-accent); box-shadow: none; transform: scale(1.1); }
.rk-rsvp .inv-form__choices label:has(input:checked)::after { color: var(--inv-night); }
.rk-rsvp .inv-form__choices label:has(input:focus-visible) { outline: 2px solid var(--inv-accent); outline-offset: 3px; }

/* wishes: the form on a white card, the wishes in a scroll box of about three */
.rk-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.rk-wishes .inv-form { padding: 1.3rem 1.1rem; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--rk-ring), var(--rk-drop); }
.rk-wishes .inv-wishes__list { margin-top: 1.4rem; }
.rk-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .55rem; border-radius: 18px; background: color-mix(in srgb, var(--inv-soft) 55%, transparent); box-shadow: inset 0 0 0 1px var(--rk-ring);
}
.rk-wishes .inv-wish { padding: .75rem .9rem; border-radius: 14px; background: #fff; text-align: left; box-shadow: 0 2px 10px rgb(0 0 0 / .05); border-left: 4px solid var(--inv-primary); }
.rk-wishes .inv-wish__name { font-weight: 700; color: var(--inv-deep); }
.rk-wishes .inv-wish__message { font-size: .9rem; line-height: 1.5; }
.rk-wishes .inv-wish__time { font-size: .74rem; color: var(--rk-muted); }

/* ---------- 7. shared components ---------- */
body .inv-button { color: var(--inv-on-primary); }
body .inv-button--outline { color: var(--inv-ink); background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.rk-main .inv-button { font-weight: 600; }
body .inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--inv-night) 92%, transparent);
    --inv-nav-text: rgb(255 255 255 / .74);
    --inv-nav-active: var(--inv-accent);
    border-color: rgb(255 255 255 / .12);
    font-family: var(--rk-sans);
}
body .inv-nav .inv-nav__item.is-active { color: var(--inv-night); }
/* music button and the "Gulir" pill: text in the variant's on-primary colour (dark on the yellow variant) */
body .inv-music__button, body .inv-autoscroll--running { color: var(--inv-on-primary); }
body .inv-autoscroll { color: var(--inv-ink); border-color: color-mix(in srgb, var(--inv-ink) 35%, transparent); }

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

/* short phones: the rocket and type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .rk-cover { --rk-rocket-w: min(70vw, 17.5rem, calc(53svh / 1.56)); padding-top: 1.3rem; padding-bottom: 1.4rem; }
    .rk-cover__names { font-size: 2.6rem; }
    .rk-cover--many .rk-cover__names { font-size: 1.8rem; }
    .rk-cover__quote { font-size: .9rem; }
    .rk-cover__guest { margin-top: .75rem; }
    .rk-cover__open { margin-top: .8rem; }
}
@media (max-height: 660px) {
    .rk-cover { --rk-rocket-w: min(62vw, calc(48svh / 1.56)); padding-top: 1.1rem; padding-bottom: 1.2rem; }
    .rk-cover__names { font-size: 2.3rem; margin-top: .45rem; }
    .rk-cover--many .rk-cover__names { font-size: 1.6rem; }
    .rk-cover__date { margin-top: .3rem; font-size: .74rem; }
    .rk-cover__quote { font-size: .86rem; line-height: 1.35; }
    .rk-cover__guest { padding: .38rem .85rem .45rem; }
    .rk-cover__guest-name { font-size: .94rem; }
    .rk-cover__open { min-height: 2.75rem; padding: .6rem 1.6rem; }
}
/* very short screens (in-app browsers): a smaller rocket and quote, so everything fits */
@media (max-height: 600px) {
    .rk-cover { --rk-rocket-w: min(52vw, calc(41svh / 1.56)); padding-top: 1rem; }
    .rk-cover__names { font-size: 2.05rem; }
    .rk-cover__quote { font-size: .82rem; line-height: 1.3; }
}

/* wide screens: the phone-width column on a night sky */
@media (min-width: 560px) {
    body.rk-body {
        background: var(--rk-starfield) 0 0 / 240px 240px, radial-gradient(70vw 60vh at 50% 0%, var(--inv-deep), transparent 70%), var(--inv-night);
        background-attachment: fixed;
    }
    .rk-main { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
}

/* ---------- 9. motion ---------- */
@keyframes rk-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rk-bounce { 0% { transform: scale(0); } 55% { transform: scale(1.15); } 75% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes rk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rk-rise { from { opacity: 0; transform: translateY(34px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes rk-orbit-in { from { opacity: 0; transform: rotate(-34deg) scale(.86); } to { opacity: 1; transform: rotate(-13deg); } }
/* the open button breathes with a soft light ring (keeps its 3D edge) */
@keyframes rk-pulse {
    0% { box-shadow: 0 4px 0 0 color-mix(in srgb, var(--inv-accent) 55%, #6b3a00), 0 0 0 0 rgb(255 255 255 / .4); }
    70% { box-shadow: 0 4px 0 0 color-mix(in srgb, var(--inv-accent) 55%, #6b3a00), 0 0 0 14px rgb(255 255 255 / 0); }
    100% { box-shadow: 0 4px 0 0 color-mix(in srgb, var(--inv-accent) 55%, #6b3a00), 0 0 0 0 rgb(255 255 255 / 0); }
}
html.inv-anim .rk-cover__open.inv-enter {
    animation: inv-enter 1.1s cubic-bezier(.2, .7, .2, 1) var(--enter-delay, 0s) both, rk-pulse 2.4s ease-out calc(var(--enter-delay, 0s) + 1.4s) infinite;
}
@keyframes rk-pop { 0% { opacity: 0; transform: rotate(-40deg) scale(0); } 70% { opacity: 1; transform: rotate(-8deg) scale(1.1); } 100% { opacity: 1; transform: rotate(-12deg) scale(1); } }

/* cover (≤ 2.5 s, once): the rocket rises into place (0–1.1 s), the orbit swings in and the planets fade
   (.4–1.6 s), the patch pops (1.2–1.9 s); the text follows through its inv-enter delays */
html.inv-anim .rk-rocket--cover { animation: rk-rise 1.1s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .rk-cover__orbit { animation: rk-orbit-in 1.2s cubic-bezier(.2, .7, .2, 1) .4s both; }
html.inv-anim .rk-cover__planet, html.inv-anim .rk-cover__moon { animation: rk-fade .9s ease .7s both; }
html.inv-anim .rk-cover__patch { animation: rk-pop .7s cubic-bezier(.34, 1.56, .64, 1) 1.2s both; }

/* launch (once, when opened): the text drops away, the flame flares, the rocket and its patch lift off */
html.inv-anim .rk-cover__text { transition: opacity .35s ease, transform .35s ease; }
html.inv-anim .rk-cover__ship { transition: transform 1.1s cubic-bezier(.5, 0, .75, .4) .1s; }
html.inv-anim .rk-rocket__flame { transition: transform .35s ease; }
html.inv-anim .rk-cover--gone .rk-cover__text { opacity: 0; transform: translateY(1.5rem); }
html.inv-anim .rk-cover--gone .rk-cover__ship { transform: translateY(-125svh); }
html.inv-anim .rk-cover--gone .rk-rocket__flame { transform: scale(1.25, 1.9); }

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

/* ---------- 10. intro scene "Hitung Mundur Peluncuran" (scene.json + sections/_scene; the intro lives in <body>) ---------- */
/* deep space: the planet and moon drift in, the dotted orbit swings round, T-minus 3·2·1 counts down, smoke bursts
   at the bottom edge and the rocket (the child in its porthole) lifts into view while the stars stream past;
   the mission patch pops on its fin and the names come up on a mission-control panel */
.rk-scene-stars { width: 100%; height: 100%; background: var(--rk-starfield) 0 0 / 200px 200px repeat; opacity: .9; }
.rk-scene-orbit { overflow: visible; }
.rk-scene-orbit ellipse { fill: none; stroke: rgb(255 255 255 / .5); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 0 7; }
.rk-scene-orbit circle { fill: var(--inv-teal); }
.inv-scene__art > .rk-scene-planet { width: 100%; height: 100%; }
.rk-scene-count { display: grid; place-content: center; height: 100%; text-align: center; color: #fff; }
.rk-scene-count span { font: 700 clamp(.7rem, 3.2vw, .85rem)/1 var(--rk-sans); letter-spacing: .32em; text-transform: uppercase; color: var(--inv-teal); }
.rk-scene-count b {
    font: 800 clamp(6rem, 21svh, 11rem)/1 var(--rk-display); letter-spacing: -.04em; color: var(--inv-accent);
    text-shadow: 0 0 34px color-mix(in srgb, var(--inv-accent) 55%, transparent), 0 10px 0 color-mix(in srgb, var(--inv-primary) 70%, #000);
}
.rk-scene-rocket { --rk-rocket-w: calc(33svh * 200 / 312); height: 100%; width: auto; margin: 0 auto; filter: drop-shadow(0 18px 24px rgb(0 0 0 / .45)); }
/* the engine sizes any <img> in a layer; the porthole photo keeps its own crop */
.rk-scene-rocket .rk-rocket__photo { width: 100% !important; height: 100% !important; }
.rk-scene-rocket .rk-rocket__flame { transform-box: view-box; animation: rk-scene-flame .16s ease-in-out infinite alternate; }
@keyframes rk-scene-flame { from { transform: scale(1, 1.05); } to { transform: scale(.92, 1.35); } }
.rk-scene-smoke { position: relative; width: 100%; height: 100%; }
.rk-scene-smoke i { position: absolute; bottom: 0; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, color-mix(in srgb, var(--inv-soft) 70%, #9aa4c0) 70%); opacity: .95; }
.rk-scene-smoke i:nth-child(1) { left: 6%; width: 26%; bottom: -18%; }
.rk-scene-smoke i:nth-child(2) { left: 24%; width: 22%; }
.rk-scene-smoke i:nth-child(3) { left: 37%; width: 28%; bottom: -30%; }
.rk-scene-smoke i:nth-child(4) { left: 56%; width: 21%; }
.rk-scene-smoke i:nth-child(5) { left: 70%; width: 26%; bottom: -16%; }
.inv-scene__art > .rk-scene-patch { width: 100%; height: 100%; }
/* the card: a mission-control panel like the countdown console, the label as the cover's red pill */
body.rk-body .inv-intro--scene .inv-scene__card {
    top: 41%; aspect-ratio: auto; padding: 1.6rem 1.3rem 1.5rem; border-radius: 26px; color: #fff;
    -webkit-mask: none; mask: none;
    background: color-mix(in srgb, var(--inv-night) 72%, transparent);
    box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .18), 0 0 0 5px color-mix(in srgb, var(--inv-accent) 85%, transparent), 0 30px 50px -24px rgb(0 0 0 / .7);
}
body.rk-body .inv-scene__card .inv-intro__label {
    justify-self: center; margin-bottom: .75rem; padding: .34rem .85rem; border-radius: 999px;
    font: 700 clamp(.6rem, 2.8vw, .7rem)/1.3 var(--rk-sans); letter-spacing: .2em; text-transform: uppercase;
    color: var(--inv-on-primary); background: var(--inv-primary);
}
body.rk-body .inv-scene__card .inv-intro__names {
    font-family: var(--rk-display) !important; font-size: clamp(2rem, 10vw, 2.8rem); font-weight: 800; line-height: 1.02;
    letter-spacing: -.03em; color: #fff; overflow-wrap: anywhere;
}
body.rk-body .inv-scene__card .inv-intro__rule {
    width: 6rem; height: 2px; margin: .8rem auto .6rem;
    background: radial-gradient(circle, var(--inv-accent) 1.4px, transparent 1.9px) 0 50% / 8px 4px repeat-x;
}
body.rk-body .inv-scene__card .inv-intro__date { font: 700 clamp(.72rem, 3.3vw, .82rem)/1.4 var(--rk-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--inv-accent); }
body.rk-body .inv-intro--scene .inv-intro__skip { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .35); color: #fff; }
@media (prefers-reduced-motion: reduce) {
    .rk-scene-rocket .rk-rocket__flame { animation: none; }
}
.rk-scene-rocket .rk-rocket__window { background: var(--rk-starfield) 0 0 / 90px 90px, linear-gradient(180deg, var(--inv-deep), var(--inv-night)); }