/*
 * Template "Retro Sekolah" (Reuni & Halal Bihalal) — Indonesian high-school nostalgia of the 2000s.
 * A chalkboard (green by default) with chalk writing and smudges, the painted school wall with its two-tone
 * dado, the school-grey uniform cloth, and the cork "mading". Accents: the flag red and yellow chalk.
 * Signature pieces: the cover board with the pinned photo, the 3×4 ID photo and the chalk tray
 * (.rs-tray), the report card "rapor" with the school stamp (organizer), the announcement and the
 * putih abu-abu uniform on the mading (party), letters on letterhead (events), the flagpole (countdown),
 * the timetable chalked on a framed board (rundown), newsprint clippings and binder pages (story), photos
 * hung with clothes pegs (gallery), the classroom TV (live streaming), the attendance sheet on the exam
 * clipboard (RSVP), the signed uniform shirt (wishes), receipts (gift), the class organisation chart in
 * chalk (panitia), student cards (contacts), the canteen sign and menu board (vendors) and the carved desk
 * (closing). Generic badge (sections/_badge) and school bell (sections/_bell). Mobile-first, one column
 * (~460px) on the board colour on wide screens.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (the board colour: green / navy / wood brown / charcoal)   --inv-deep (the darker board)
 *   --inv-accent (flag red)   --inv-shine (yellow chalk)   --inv-gold (dark yellow for lines on light)
 *   --inv-background (wall white)   --inv-text   --inv-soft (school grey)
 * Everything else is mixed from those, so a new variant only needs these eight colours. Natural materials
 * (wood, cork, paper, the red ID-photo background) keep their own colours in every variant.
 *
 * Section tones (set on each section in its partial): .rs-tone--board (chalkboard), --wall (painted wall
 * with a dado), --grey (uniform-grey cloth), --cork (the mading). Dark and light alternate down the page.
 * Chalk text: .rs-chalk inside board areas gets a grainy chalk mask.
 *
 * 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.
 *
 * Contents: 1 base · 2 section tones · 3 shared pieces (heading, chalk, badge, bell, photo, magnets,
 *           pins, papers, tray, ID photo, label) · 4 cover · 5 sections in page order · 6 forms (RSVP,
 *           wishes) · 7 shared components · 8 screen sizes · 9 motion
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Papan Hijau" variant (the variant's colours override these) */
    --inv-primary: #1e5a43;
    --inv-accent: #c8262c;
    --inv-background: #f4f2ea;
    --inv-text: #1b2420;
    --inv-deep: #143d2e;
    --inv-shine: #f4c632;
    --inv-gold: #8a6a08;
    --inv-soft: #d3d8d4;
    --inv-radius: 12px;

    --rs-display: 'Zilla Slab', 'Rockwell', Georgia, serif;
    --rs-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --rs-hand: 'Kalam', 'Segoe Print', 'Bradley Hand', cursive;
    --rs-col: 460px;

    --rs-chalk-white: color-mix(in srgb, #fff 90%, var(--inv-background));
    --rs-chalk-soft: color-mix(in srgb, #fff 80%, var(--inv-primary));
    --rs-board: color-mix(in srgb, var(--inv-primary) 72%, var(--inv-deep));
    --rs-title: color-mix(in srgb, var(--inv-primary) 70%, var(--inv-deep));
    --rs-red: color-mix(in srgb, var(--inv-accent) 92%, #000);
    --rs-muted: color-mix(in srgb, var(--inv-text) 78%, var(--inv-background));
    --rs-paper: #fffdf6;
    --rs-newsprint: #f1ece0;
    --rs-ink-blue: #23408f;
    --rs-ring: color-mix(in srgb, var(--inv-primary) 18%, transparent);
    --rs-drop: 0 18px 30px -18px rgb(0 0 0 / .55);
    --rs-wood: linear-gradient(180deg, #a36d3f, #7d4d2a 55%, #5f3a1f);
    --rs-wood-grain: repeating-linear-gradient(90deg, rgb(255 255 255 / .06) 0 2px, transparent 2px 9px, rgb(0 0 0 / .07) 9px 10px, transparent 10px 23px);

    /* chalk dust on the board: white specks (feTurbulence, tiled) */
    --rs-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 -.17'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    /* the chalk grain on chalk text: an alpha noise used as a mask */
    --rs-chalk-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.3 2.02'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");

    /* marker scribbles on the signed shirt (wishes): a heart, a star and a wave; a smiley and a squiggle */
    --rs-scribbles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 90'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' opacity='.3'%3E%3Cpath stroke='%23c62828' d='M20 30c6-14 22-14 22 0 0-14 16-14 22 0-4 14-22 24-22 24S24 44 20 30Z'/%3E%3Cpath stroke='%231f4fbf' d='M98 12l6 12 13 2-10 9 3 13-12-7-12 7 3-13-10-9 13-2Z'/%3E%3Cpath stroke='%231e7b3c' d='M10 76c10-8 20 8 30 0s20 8 30 0 20 8 30 0 20 8 30 0'/%3E%3C/g%3E%3C/svg%3E");
    --rs-scribbles-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cg fill='none' stroke-linecap='round' stroke-width='3' opacity='.28'%3E%3Ccircle stroke='%231f4fbf' cx='26' cy='30' r='18'/%3E%3Cpath stroke='%231f4fbf' d='M19 25v2M33 25v2M17 35c5 6 13 6 18 0'/%3E%3Cpath stroke='%23222' d='M56 40c6-16 14-24 20-10s12 8 18-6'/%3E%3C/g%3E%3C/svg%3E");

    /* 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(--rs-sans);
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

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

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

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

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

/* ---------- 2. section tones ---------- */

/* the chalkboard: the board colour, a lighter glow at the top, wide smudges where it was wiped, chalk dust */
.rs-board, .rs-tone--board {
    color: var(--rs-chalk-white);
    background:
        radial-gradient(ellipse 58% 9% at 26% 17%, rgb(255 255 255 / .075), transparent 70%),
        radial-gradient(ellipse 46% 7% at 74% 41%, rgb(255 255 255 / .06), transparent 70%),
        radial-gradient(ellipse 62% 9% at 38% 72%, rgb(255 255 255 / .055), transparent 70%),
        radial-gradient(110% 55% at 50% 0%, color-mix(in srgb, var(--inv-primary) 80%, #fff 8%), transparent 72%),
        var(--rs-noise),
        linear-gradient(180deg, var(--rs-board), var(--inv-deep));
}
.rs-tone--board a:not(.inv-button) { color: var(--inv-shine); }
.rs-tone--board .rs-arabic { color: var(--inv-shine); }

/* the painted school wall: off-white above, the darker painted dado at the foot with its rail line */
.rs-tone--wall {
    background:
        linear-gradient(180deg, transparent calc(100% - 2.1rem), color-mix(in srgb, var(--inv-primary) 55%, transparent) calc(100% - 2.1rem), color-mix(in srgb, var(--inv-primary) 55%, transparent) calc(100% - 1.85rem), color-mix(in srgb, var(--inv-primary) 16%, var(--inv-background)) calc(100% - 1.85rem)),
        radial-gradient(70% 30% at 100% 0%, color-mix(in srgb, var(--inv-shine) 16%, transparent), transparent 72%),
        radial-gradient(60% 24% at 0% 60%, color-mix(in srgb, var(--inv-soft) 60%, transparent), transparent 75%),
        var(--inv-background);
}

/* the school grey: the woven cloth of the grey uniform (a fine twill), a little light from the top */
.rs-tone--grey {
    background:
        radial-gradient(90% 40% at 50% 0%, rgb(255 255 255 / .45), transparent 72%),
        repeating-linear-gradient(45deg, rgb(0 0 0 / .028) 0 2px, transparent 2px 5px),
        linear-gradient(180deg, var(--inv-soft), color-mix(in srgb, var(--inv-soft) 55%, var(--inv-background)));
}

/* the mading: cork speckles in three sizes between two wooden frame rails */
.rs-tone--cork {
    color: var(--inv-text);
    background:
        var(--rs-wood-grain) top / 100% 14px no-repeat,
        var(--rs-wood) top / 100% 14px no-repeat,
        var(--rs-wood-grain) bottom / 100% 14px no-repeat,
        var(--rs-wood) bottom / 100% 14px no-repeat,
        radial-gradient(circle, rgb(72 40 14 / .38) 1px, transparent 1.6px) 0 0 / 7px 9px,
        radial-gradient(circle, rgb(255 236 200 / .32) 1px, transparent 1.7px) 3px 4px / 11px 8px,
        radial-gradient(circle, rgb(95 55 22 / .28) 1.6px, transparent 2.2px) 5px 2px / 13px 15px,
        radial-gradient(80% 50% at 50% 30%, #c99b66, transparent 80%),
        linear-gradient(180deg, #bd8d58, #a8784a);
}
.rs-tone--cork { padding-top: 4.6rem; padding-bottom: 4.6rem; }

/* a client photo behind a section, under a strong gradient of the section's own tone */
.rs-bgphoto { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.rs-bgphoto img { display: block; width: 100%; height: calc(100% + 80px); margin-top: -40px; object-fit: cover; object-position: center 45%; --inv-parallax: 40px; }
.rs-bgphoto::after { content: ''; position: absolute; inset: 0; }
.rs-tone--wall .rs-bgphoto::after {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--inv-background) 92%, transparent),
        color-mix(in srgb, var(--inv-background) 80%, transparent) 45%,
        color-mix(in srgb, var(--inv-background) 96%, transparent));
}
.rs-tone--board .rs-bgphoto::after {
    background:
        var(--rs-noise),
        linear-gradient(180deg,
            color-mix(in srgb, var(--rs-board) 88%, transparent),
            color-mix(in srgb, var(--rs-board) 74%, transparent) 45%,
            color-mix(in srgb, var(--inv-deep) 95%, transparent));
}

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

/* chalk: a grainy mask on chalk text inside board areas */
:is(.rs-board, .rs-tone--board) .rs-chalk {
    -webkit-mask: var(--rs-chalk-mask) 0 0 / 150px 150px repeat;
    mask: var(--rs-chalk-mask) 0 0 / 150px 150px repeat;
}
.rs-chalk { display: inline-block; }

/* section heading: a handwritten eyebrow, a slab title, the last word underlined twice by hand */
.rs-heading { margin: 0 0 2rem; }
.rs-heading--left { text-align: left; }
.rs-heading__eyebrow {
    margin: 0 0 .2rem; font-family: var(--rs-hand); font-size: 1.15rem; font-weight: 700; line-height: 1.2; color: var(--rs-red); rotate: -2deg;
}
.rs-heading__title {
    margin: 0; font-family: var(--rs-display); font-size: 2.45rem; font-weight: 700; line-height: 1.05;
    color: var(--rs-title); text-wrap: balance;
}
.rs-heading__title em { position: relative; display: inline-block; font-style: normal; color: var(--inv-accent); }
.rs-underline {
    position: absolute; left: -.05em; right: -.05em; bottom: -.28em; width: calc(100% + .1em); height: .32em; overflow: visible;
    fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.rs-tone--board .rs-heading__eyebrow { color: var(--inv-shine); }
.rs-tone--board .rs-heading__title { color: var(--rs-chalk-white); }
.rs-tone--board .rs-heading__title em { color: var(--inv-shine); }
/* on the cork, the heading is a paper banner pinned to the board */
.rs-tone--cork .rs-heading {
    position: relative; display: inline-block; margin-bottom: 2.4rem; padding: 1rem 1.5rem 1.15rem; rotate: -1.5deg;
    background: var(--rs-paper); box-shadow: 0 2px 0 rgb(0 0 0 / .06), var(--rs-drop);
}
.rs-tone--cork .rs-heading::before {
    content: ''; position: absolute; top: -.45rem; left: 50%; width: .95rem; height: .95rem; margin-left: -.47rem; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ff8b84, var(--inv-accent) 55%, color-mix(in srgb, var(--inv-accent) 60%, #000));
    box-shadow: 0 3px 4px rgb(0 0 0 / .35);
}
.rs-tone--cork .rs-heading__title { font-size: 2.2rem; }

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

/* the school badge (sections/_badge) */
.rs-badge { display: block; overflow: visible; }
.rs-badge__rim { fill: var(--inv-shine); stroke: color-mix(in srgb, var(--inv-shine) 50%, #000); stroke-width: 1; }
.rs-badge__field { fill: var(--inv-primary); }
.rs-badge__flame { fill: var(--inv-accent); }
.rs-badge__book { fill: #fff; stroke: color-mix(in srgb, var(--inv-primary) 40%, #000); stroke-width: .8; }
.rs-badge__line { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.rs-badge__book + .rs-badge__line { stroke: var(--inv-primary); stroke-width: 1; }
.rs-badge__sprig { fill: none; stroke: var(--inv-shine); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 3 2.4; }
.rs-badge__ribbon { fill: var(--inv-accent); stroke: color-mix(in srgb, var(--inv-accent) 60%, #000); stroke-width: .6; }
.rs-badge__text { fill: #fff; font: 800 6.4px/1 var(--rs-sans); letter-spacing: .12em; }

/* the school bell (sections/_bell) */
.rs-bell { display: block; overflow: visible; }
.rs-bell__body { fill: color-mix(in srgb, currentColor 16%, transparent); }
.rs-bell__clapper { fill: currentColor; }
.rs-bell__swing { transform-origin: 60px 8px; transform-box: view-box; }

/* magnets (round, glossy) and push pins */
.rs-magnet {
    position: absolute; z-index: 3; width: 1.35rem; height: 1.35rem; border-radius: 50%;
    box-shadow: inset 0 -2px 3px rgb(0 0 0 / .3), 0 4px 6px -1px rgb(0 0 0 / .45);
}
.rs-magnet--red { background: radial-gradient(circle at 35% 30%, #ff9a91, var(--inv-accent) 55%, color-mix(in srgb, var(--inv-accent) 65%, #000)); }
.rs-magnet--yellow { background: radial-gradient(circle at 35% 30%, #fff3bf, var(--inv-shine) 55%, color-mix(in srgb, var(--inv-shine) 65%, #000)); }
.rs-pin {
    position: absolute; z-index: 3; top: -.4rem; left: 50%; width: .95rem; height: .95rem; margin-left: -.47rem; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff 0 8%, var(--pin) 30%, color-mix(in srgb, var(--pin) 60%, #000));
    box-shadow: 1px 4px 4px rgb(0 0 0 / .35);
}
.rs-pin--red { --pin: var(--inv-accent); }
.rs-pin--yellow { --pin: #f1b51c; }
.rs-pin--blue { --pin: #2f63c6; }
.rs-pin--green { --pin: #2e9a52; }

/* a paper pinned to the cork */
.rs-paper { position: relative; color: var(--inv-text); background: var(--rs-paper); box-shadow: 0 1px 0 rgb(0 0 0 / .05), var(--rs-drop); }

/* a photo held on the board (sections/_photo) */
.rs-photo {
    --ph-w: 12rem; --ph-ratio: 4 / 3; --ph-pos: center 40%; --ph-tilt: -1.5deg;
    position: relative; width: var(--ph-w); margin: 0; padding: calc(var(--ph-w) * .03); rotate: var(--ph-tilt);
    background: #fff; box-shadow: 0 1px 1px rgb(0 0 0 / .12), 0 20px 30px -16px rgb(0 0 0 / .6);
}
.rs-photo__window { position: relative; overflow: hidden; aspect-ratio: var(--ph-ratio); background: var(--rs-board); }
.rs-photo__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--ph-pos); }
.rs-photo__empty {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
    color: var(--rs-chalk-white);
    background: radial-gradient(ellipse 60% 14% at 30% 25%, rgb(255 255 255 / .08), transparent 70%), var(--rs-noise), linear-gradient(180deg, var(--rs-board), var(--inv-deep));
}
.rs-photo__badge { width: calc(var(--ph-w) * .2); }
.rs-photo__monogram { font-family: var(--rs-hand); font-weight: 700; font-size: calc(var(--ph-w) * .15); line-height: 1; color: var(--inv-shine); -webkit-mask: var(--rs-chalk-mask) 0 0 / 150px; mask: var(--rs-chalk-mask) 0 0 / 150px; }
.rs-photo__caption { margin: 0; padding: .3rem .2rem 0; text-align: center; font-family: var(--rs-hand); font-weight: 700; font-size: 1.05rem; line-height: 1.1; color: var(--rs-ink-blue); }
.rs-photo__magnet--left { top: -.55rem; left: -.45rem; }
.rs-photo__magnet--right { top: -.55rem; right: -.45rem; }
.rs-photo__tape {
    position: absolute; top: -.7rem; left: 50%; width: 5.4rem; height: 1.4rem; margin-left: -2.7rem; rotate: -3deg;
    background: linear-gradient(180deg, rgb(255 255 255 / .55), rgb(255 255 255 / .3)); border-inline: 1px dashed rgb(0 0 0 / .08);
    box-shadow: 0 1px 2px rgb(0 0 0 / .12);
}

/* the 3×4 ID photo ("pas foto") on its red background, with a white border */
.rs-idphoto { position: relative; margin: 0; padding: 4px; background: #fff; box-shadow: 0 10px 18px -10px rgb(0 0 0 / .6); }
.rs-idphoto img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 25%; background: #c8262c; }
.rs-idphoto__empty { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; background: linear-gradient(180deg, #d63a35, #b3221f); }
.rs-idphoto__empty svg { position: absolute; inset: 14% 10% 0; width: 80%; height: 86%; fill: rgb(255 255 255 / .92); }
.rs-idphoto__empty span { position: absolute; left: 0; right: 0; bottom: 9%; text-align: center; font-family: var(--rs-display); font-weight: 700; font-size: 1.15rem; line-height: 1; color: #b3221f; }

/* the exercise-book name label: rounded white sticker, a blue frame line, the name on a dotted line */
.rs-label {
    position: relative; margin: 0; padding: .55rem .9rem .5rem; border-radius: 14px; text-align: left; color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4.5px #2f63c6, inset 0 0 0 7px #fff, inset 0 0 0 8px color-mix(in srgb, var(--inv-accent) 70%, #fff), 0 12px 22px -12px rgb(0 0 0 / .6);
}
.rs-label__head { margin: 0 .2rem; font-size: .62rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #2f63c6; }
.rs-label__name {
    display: block; margin: 0 .2rem .15rem; padding: 0 .1rem .1rem; font-family: var(--rs-hand); font-weight: 700; font-size: 1.45rem; line-height: 1.25;
    color: var(--rs-ink-blue); overflow-wrap: anywhere;
    background: radial-gradient(circle, color-mix(in srgb, #2f63c6 55%, transparent) .8px, transparent 1.2px) 0 100% / 6px 4px repeat-x;
}

/* the chalk tray: a wooden ledge with two sticks of chalk and the felt eraser */
.rs-tray { position: relative; height: 1rem; background: var(--rs-wood-grain), var(--rs-wood); box-shadow: 0 -2px 0 rgb(0 0 0 / .18), 0 8px 12px -6px rgb(0 0 0 / .5); }
.rs-tray__chalk {
    position: absolute; bottom: 70%; left: 14%; width: 2.6rem; height: .5rem; border-radius: 2px 4px 4px 2px; rotate: -4deg;
    background: linear-gradient(180deg, #fff, #dcd9cf); box-shadow: 0 2px 2px rgb(0 0 0 / .25);
}
.rs-tray__chalk--yellow { left: 27%; width: 1.7rem; rotate: 6deg; background: linear-gradient(180deg, #ffeaa0, var(--inv-shine)); }
.rs-tray__eraser {
    position: absolute; bottom: 72%; right: 16%; width: 4.2rem; height: 1.15rem; border-radius: 3px;
    background: linear-gradient(180deg, #b07a46 0 55%, #3a3f46 55% 100%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 3px 4px rgb(0 0 0 / .35);
}
.rs-tray__eraser::after { content: ''; position: absolute; left: -1.4rem; right: 105%; bottom: 0; height: .35rem; border-radius: 50%; background: rgb(255 255 255 / .35); filter: blur(2px); }

/* ---------- 4. cover ---------- */
.rs-cover {
    --ph-cover: min(84vw, 21rem, calc(35svh * 1.3333));
    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.7rem 1.1rem 2.7rem;
    isolation: isolate;
    border-top: 10px solid #7d4d2a;
    transition: opacity .9s ease;
}
/* half-erased lesson chalk left on the board (faint, behind everything) */
.rs-doodles { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: .13; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rs-doodles text { fill: #fff; stroke: none; font: 700 21px/1 var(--rs-hand); }
.rs-cover__art:has(.rs-cover__milestone) .rs-photo__magnet--right { display: none; }
.rs-cover__inner { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; text-align: center; transition: transform .9s cubic-bezier(.5, 0, .3, 1); }

.rs-cover__title {
    position: relative; margin: 0 0 1.35rem; max-width: 100%; padding-bottom: .3rem;
    font-family: var(--rs-hand); font-size: 1.3rem; font-weight: 700; line-height: 1.2; color: var(--inv-shine); rotate: -1.5deg;
}
.rs-cover__title::after {
    content: ''; position: absolute; left: 6%; right: 6%; bottom: 0; height: 3px; border-radius: 3px;
    background: color-mix(in srgb, var(--inv-shine) 80%, transparent);
    -webkit-mask: var(--rs-chalk-mask) 0 0 / 120px; mask: var(--rs-chalk-mask) 0 0 / 120px;
}

/* the big photo held by magnets, the ID photo of back then, "dulu" + arrow, the circled milestone */
.rs-cover__art { position: relative; display: flex; justify-content: center; width: var(--ph-cover); margin-bottom: 1.15rem; }
.rs-cover__art--then { margin-bottom: 2.25rem; }
.rs-photo--cover { --ph-w: var(--ph-cover); --ph-ratio: 4 / 3; --ph-pos: center 40%; --ph-tilt: -1.4deg; }
.rs-photo--cover .rs-photo__badge { width: calc(var(--ph-w) * .16); }
.rs-cover__then { position: absolute; z-index: 4; left: -5%; bottom: -1.6rem; width: calc(var(--ph-cover) * .23); rotate: -5deg; }
.rs-cover__dulu {
    position: absolute; z-index: 4; left: calc(var(--ph-cover) * .2); bottom: -2.15rem; display: flex; align-items: flex-end; gap: .1rem; margin: 0;
    font-family: var(--rs-hand); font-weight: 700; font-size: 1.15rem; line-height: 1; color: var(--rs-chalk-white);
}
.rs-cover__dulu svg { order: -1; width: 1.9rem; height: 1.3rem; fill: none; stroke: var(--rs-chalk-white); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.rs-cover__milestone {
    position: absolute; z-index: 4; top: -1.7rem; right: -1.05rem; display: grid; place-content: center; width: 5rem; height: 4.2rem; margin: 0;
    text-align: center; color: var(--inv-shine); rotate: 6deg;
}
.rs-cover__milestone strong { font-family: var(--rs-display); font-weight: 700; font-size: 2rem; line-height: .85; }
.rs-cover__milestone span { font-family: var(--rs-hand); font-weight: 700; font-size: .95rem; line-height: 1; }
.rs-cover__milestone--text span { padding: 0 .35rem; font-size: .9rem; }
.rs-cover__circle {
    position: absolute; inset: -.2rem -.3rem; z-index: -1; width: calc(100% + .6rem); height: calc(100% + .4rem); overflow: visible;
    fill: color-mix(in srgb, var(--inv-deep) 72%, transparent); stroke: var(--inv-shine); stroke-width: 2.6; stroke-linecap: round;
}

.rs-cover__text { display: flex; flex-direction: column; align-items: center; width: 100%; }
.rs-cover__name {
    margin: 0; max-width: 15ch; font-family: var(--rs-display); font-size: clamp(1.9rem, 8.6vw, 2.5rem); font-weight: 700; line-height: 1.02;
    color: var(--rs-chalk-white); text-wrap: balance; overflow-wrap: anywhere;
}
.rs-cover__batch { margin: .35rem 0 0; font-family: var(--rs-hand); font-weight: 700; font-size: 1.35rem; line-height: 1.15; color: var(--inv-shine); }
.rs-cover__date {
    margin: .45rem 0 0; padding: .2rem .75rem; border-radius: 4px; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: #fff; background: var(--inv-accent); box-shadow: 0 6px 12px -6px rgb(0 0 0 / .6);
}
.rs-cover__quote {
    max-width: 30ch; margin: .6rem 0 0; font-size: .9rem; font-style: italic; line-height: 1.4; color: var(--rs-chalk-soft); text-wrap: balance;
}
.rs-cover__guest { width: min(100%, 18.5rem); margin-top: .85rem; rotate: -1deg; }
.rs-cover__open {
    display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; min-height: 3rem; padding: .7rem 1.8rem;
    font-weight: 800; letter-spacing: .02em; color: var(--inv-deep); background: var(--inv-shine);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-shine) 30%, transparent), 0 14px 24px -12px rgb(0 0 0 / .7);
}
.rs-cover__open .rs-icon { width: 1.2rem; height: 1.2rem; }
.rs-cover__tray { position: absolute; left: 0; right: 0; bottom: 0; }

/* leaving: the board fades and lifts away (never blocks: .9s) */
.rs-cover--leave { transition: opacity .9s ease .1s; }
.rs-cover--gone { opacity: 0; }
.rs-cover--gone .rs-cover__inner { transform: translateY(-2.5rem); }

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

/* opening: the bell in yellow chalk lines, the greeting in chalk, the quote on a framed slate */
.rs-opening { padding: 3.4rem 1.5rem 4.4rem; }
.rs-opening__bell-wrap { position: relative; width: 7.5rem; margin: 0 auto 1.1rem; }
.rs-opening__bell { width: 100%; color: var(--inv-shine); }
.rs-opening__ding {
    position: absolute; left: 88%; top: 62%; white-space: nowrap; font-family: var(--rs-hand); font-weight: 700; font-size: 1rem; color: var(--rs-chalk-soft); rotate: -8deg;
}
.rs-opening__basmalah { margin: 0 auto .4rem !important; font-size: 1.7rem; }
.rs-opening__greeting { margin: 0 auto .9rem !important; font-family: var(--rs-display); font-size: 2.3rem; font-weight: 700; line-height: 1.08; color: var(--rs-chalk-white); text-wrap: balance; }
.rs-opening__message { color: var(--rs-chalk-soft); }
.rs-slate {
    position: relative; margin: 2rem auto 0; max-width: 21rem; padding: 1.4rem 1.3rem 1.25rem; border: 9px solid #8a5630; border-radius: 4px;
    border-image: linear-gradient(135deg, #b07a46, #7d4d2a 50%, #5f3a1f) 9;
    background: radial-gradient(ellipse 70% 20% at 30% 25%, rgb(255 255 255 / .07), transparent 70%), var(--rs-noise), #1f2a26;
    box-shadow: 0 22px 34px -18px rgb(0 0 0 / .8);
    rotate: -1.2deg;
}
.rs-slate blockquote { margin: 0; font-family: var(--rs-hand); font-size: 1.22rem; font-weight: 400; line-height: 1.45; color: var(--rs-chalk-white); }
.rs-slate figcaption { margin-top: .5rem; font-family: var(--rs-hand); font-weight: 700; font-size: 1rem; color: var(--inv-shine); }
.rs-slate .rs-chalk { -webkit-mask: var(--rs-chalk-mask) 0 0 / 150px; mask: var(--rs-chalk-mask) 0 0 / 150px; }

/* organizer: the rapor */
.rs-rapor {
    position: relative; margin: 0 auto; max-width: 23rem; padding: 1.3rem 1.15rem 1.3rem 1.9rem; text-align: left; color: var(--inv-text);
    background:
        linear-gradient(90deg, var(--inv-deep) 0 .85rem, color-mix(in srgb, var(--inv-deep) 70%, #000) .85rem .95rem, transparent .95rem),
        repeating-linear-gradient(180deg, transparent 0 7px, rgb(255 255 255 / .55) 7px 9px) 0 0 / .85rem 100% no-repeat,
        radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--inv-shine) 14%, transparent), transparent 70%),
        var(--rs-paper);
    border-radius: 4px 12px 12px 4px;
    box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 8px 8px 0 0 var(--rs-board), var(--rs-drop);
}
.rs-rapor__head { display: flex; align-items: center; gap: .8rem; padding-bottom: .8rem; border-bottom: 3px double color-mix(in srgb, var(--inv-primary) 55%, transparent); }
.rs-rapor__badge { flex: none; width: 2.9rem; }
.rs-rapor__kicker { margin: 0; font-size: .64rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--rs-red); }
.rs-rapor__name { margin: .1rem 0 0; font-family: var(--rs-display); font-size: 1.55rem; font-weight: 700; line-height: 1.08; color: var(--rs-title); overflow-wrap: anywhere; }
.rs-rapor__row { display: flex; align-items: center; gap: 1rem; margin: 1.1rem 0 .9rem; }
.rs-rapor__photo { flex: none; width: 7.4rem; rotate: -2deg; }
.rs-stamp {
    position: absolute; right: -2.4rem; bottom: -1.2rem; width: 5.6rem; height: 5.6rem; rotate: -14deg; opacity: .82; mix-blend-mode: multiply;
    fill: none; stroke: #5b3fa6; stroke-width: 2;
}
.rs-stamp text { fill: #5b3fa6; stroke: none; font: 800 7.4px/1 var(--rs-sans); letter-spacing: .06em; }
.rs-stamp .rs-stamp__mid { font: 700 16px/1 var(--rs-display); letter-spacing: 0; }
.rs-grade { position: relative; display: grid; justify-items: center; flex: 1; margin: 0; padding: .7rem .2rem; text-align: center; color: var(--rs-red); }
.rs-grade__label { font-family: var(--rs-hand); font-size: 1rem; font-weight: 700; line-height: 1; color: var(--rs-muted); }
.rs-grade strong { font-family: var(--rs-hand); font-size: 3.3rem; font-weight: 700; line-height: .95; }
.rs-grade__rest { font-family: var(--rs-hand); font-size: 1.25rem; font-weight: 700; line-height: 1; }
.rs-grade .rs-grade__word { font-size: 1.5rem; line-height: 1.1; }
.rs-grade__circle { position: absolute; inset: -.1rem 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--inv-accent); stroke-width: 2.6; stroke-linecap: round; }
.rs-rapor__table { margin: 0; padding: 0; }
.rs-rapor__table > div { display: grid; grid-template-columns: 7.6rem minmax(0, 1fr); gap: .5rem; padding: .42rem 0; border-bottom: 1px solid var(--rs-ring); }
.rs-rapor__table dt { position: relative; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--rs-muted); }
.rs-rapor__table dt::after { content: ':'; position: absolute; right: 0; }
.rs-rapor__table dd { margin: 0; font-family: var(--rs-hand); font-size: 1.1rem; font-weight: 700; line-height: 1.3; color: var(--rs-ink-blue); }
.rs-rapor__note { margin-top: 1rem; padding: .7rem .85rem .75rem; border-radius: 6px; background: color-mix(in srgb, var(--inv-shine) 18%, #fff); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-gold) 35%, transparent); }
.rs-rapor__note-label { margin: 0; font-size: .64rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--inv-gold); }
.rs-rapor__note-text { margin: .15rem 0 0; font-family: var(--rs-hand); font-size: 1.2rem; font-weight: 400; line-height: 1.4; color: var(--rs-ink-blue); }

/* party: the mading papers */
.rs-announce { max-width: 21rem; margin: 0 auto 1.6rem; padding: 1.4rem 1.2rem 1.3rem; rotate: 1.2deg; }
.rs-announce__kicker {
    margin: 0 0 .65rem; padding-bottom: .45rem; font-family: var(--rs-display); font-size: 1.25rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--rs-title);
    border-bottom: 4px double color-mix(in srgb, var(--inv-text) 60%, transparent);
}
.rs-announce__lead { margin: 0; font-size: .85rem; color: var(--rs-muted); }
.rs-announce__theme { margin: .1rem 0 0; font-family: var(--rs-display); font-size: 2rem; font-weight: 700; line-height: 1.08; color: var(--inv-accent); text-wrap: balance; }

.rs-uniform {
    display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); align-items: center; gap: .9rem; max-width: 22rem; margin: 0 auto 1.6rem; padding: 1.2rem 1.1rem 1.1rem .8rem;
    text-align: left; rotate: -1.4deg; background: linear-gradient(180deg, #fff, #f6f4ee);
}
.rs-uniform__art { position: relative; }
.rs-uniform__shirt { display: block; width: 100%; overflow: visible; }
.rs-uniform__body { fill: var(--rs-pick, #fff); stroke: #3a4048; stroke-width: 2; stroke-linejoin: round; transition: fill .35s ease; }
.rs-uniform__line { fill: none; stroke: #3a4048; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.rs-uniform__tie { fill: #7f8792; stroke: #3a4048; stroke-width: 1.4; stroke-linejoin: round; }
.rs-uniform__flag-red { fill: #d0312d; }
.rs-uniform__flag-white { fill: #fff; stroke: #3a4048; stroke-width: .6; }
/* the badge sewn on the pocket */
.rs-uniform__badge { position: absolute; left: 61.6%; top: 43%; width: 10.5%; }
.rs-uniform__label { font-size: .64rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--rs-red); }
.rs-uniform__name { margin: .1rem 0 .55rem; font-family: var(--rs-display); font-size: 1.3rem; font-weight: 700; line-height: 1.15; color: var(--rs-title); }
.rs-uniform__hint { margin: .45rem 0 0; font-size: .74rem; line-height: 1.35; color: var(--rs-muted); }
.rs-swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.rs-swatch {
    width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--rs-swatch);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2), 0 0 0 2px #fff, 0 0 0 3px rgb(0 0 0 / .12);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.rs-swatch[aria-pressed="true"] { transform: scale(1.12); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2), 0 0 0 2px #fff, 0 0 0 4px var(--inv-accent); }
.rs-swatch:focus-visible { outline: 2px solid var(--inv-primary); outline-offset: 4px; }

.rs-sticky {
    position: relative; max-width: 17rem; margin: 0 auto 1.6rem !important; padding: 1.3rem 1.1rem 1.15rem; rotate: 2deg; text-align: left;
    font-family: var(--rs-hand); font-size: 1.15rem; line-height: 1.38; color: #3b2f05;
    background: linear-gradient(180deg, #fff3a6, #fde77a); box-shadow: 0 16px 22px -14px rgb(0 0 0 / .6);
}
.rs-party__hashtag {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: .6rem; max-width: 20rem; margin: 0 auto .6rem; padding: .7rem .7rem .7rem 1.1rem;
    rotate: -1deg; color: #fff; background: var(--inv-accent); box-shadow: var(--rs-drop);
    clip-path: polygon(0 0, 100% 0, 98.5% 25%, 100% 50%, 98.5% 75%, 100% 100%, 0 100%, 1.5% 75%, 0 50%, 1.5% 25%);
}
.rs-party__hashtag .rs-pin { top: .2rem; left: 1.2rem; }
.rs-party__hashtag-text { min-width: 0; font-family: var(--rs-display); font-weight: 700; font-size: 1.12rem; overflow-wrap: anywhere; text-align: left; padding-left: .8rem; }
.rs-party__copy {
    flex: none; min-height: 2.2rem; padding: .3rem .9rem; border: 0; border-radius: 999px; cursor: pointer;
    font: 800 .74rem/1 var(--rs-sans); color: var(--inv-deep); background: var(--inv-shine);
}
.rs-party__hint { margin: 0 auto !important; font-size: .78rem; font-weight: 500; color: #3a2512; }

/* events: letters on the school letterhead */
.rs-letter {
    position: relative; margin: 0 4px 2.4rem; padding: 1.15rem 1.15rem 1.25rem; text-align: left; color: var(--inv-text); background: var(--rs-paper); rotate: -.8deg;
    box-shadow: 0 0 0 1px rgb(0 0 0 / .05), var(--rs-drop);
}
.rs-letter:last-child { margin-bottom: 0; }
.rs-letter--flip { rotate: .8deg; }
.rs-letter__media { position: relative; margin: -.2rem -.2rem 1rem; padding: 5px; background: #fff; rotate: 1.5deg; box-shadow: 0 10px 18px -12px rgb(0 0 0 / .6); }
.rs-letter__media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.rs-clip {
    position: absolute; z-index: 2; top: -.9rem; left: 1.3rem; width: .85rem; height: 2.3rem; border: 2.5px solid #9aa2ab; border-radius: 999px;
    box-shadow: inset 0 0 0 2px transparent, 1px 1px 1px rgb(0 0 0 / .2);
}
.rs-clip::after { content: ''; position: absolute; left: 1.5px; right: 1.5px; top: .35rem; bottom: .55rem; border: 2px solid #9aa2ab; border-top: 0; border-radius: 0 0 999px 999px; }
.rs-letter__kop { display: flex; align-items: center; gap: .7rem; padding-bottom: .6rem; border-bottom: 3px solid var(--inv-text); box-shadow: 0 3px 0 var(--rs-paper), 0 4px 0 var(--inv-text); }
.rs-letter__badge { flex: none; width: 2.3rem; }
.rs-letter__org { margin: 0; font-family: var(--rs-display); font-size: 1.05rem; font-weight: 700; line-height: 1.15; text-transform: uppercase; letter-spacing: .03em; color: var(--rs-title); }
.rs-letter__batch { margin: .1rem 0 0; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rs-muted); }
.rs-letter__top { display: flex; align-items: center; gap: .95rem; margin-top: 1.05rem; }
.rs-letter__date {
    display: flex; flex-direction: column; align-items: center; flex: none; width: 4.4rem; margin: 0; padding: .45rem .2rem .5rem; border-radius: 6px;
    color: #fff; background: linear-gradient(180deg, var(--inv-accent), var(--rs-red)); box-shadow: 0 8px 14px -8px rgb(0 0 0 / .5);
}
.rs-letter__date span { font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; }
.rs-letter__date strong { font-family: var(--rs-display); font-size: 2.2rem; font-weight: 700; line-height: 1; }
.rs-letter__head { min-width: 0; }
.rs-letter__no { font-family: var(--rs-hand); font-size: 1rem; font-weight: 700; color: var(--rs-red); }
.rs-letter__name { margin: 0; font-family: var(--rs-display); font-size: 1.45rem; font-weight: 700; line-height: 1.12; color: var(--rs-title); }
.rs-letter__full { margin: .15rem 0 0; font-size: .82rem; font-weight: 700; color: var(--rs-muted); }
.rs-letter__rows { display: grid; gap: .7rem; margin: 1.05rem 0 0; padding: 1rem 0 0; list-style: none; font-size: .9rem; border-top: 1.5px dashed color-mix(in srgb, var(--inv-text) 25%, transparent); }
.rs-letter__rows li { display: flex; align-items: flex-start; gap: .7rem; line-height: 1.45; }
.rs-letter__rows .rs-icon { width: 2rem; height: 2rem; padding: .42rem; border-radius: 50%; color: var(--inv-primary); background: color-mix(in srgb, var(--inv-primary) 12%, #fff); }
.rs-letter__rows li > span { padding-top: .25rem; }
.rs-letter__venue { display: block; font-weight: 800; }
.rs-letter__address { display: block; color: var(--rs-muted); }
.rs-letter .inv-maps { margin: 1.1rem 0 0; text-align: center; }
.rs-letter .inv-maps .inv-button { width: 100%; font-weight: 700; }
.rs-letter .inv-maps__frame { height: 190px; border-radius: 10px; }

/* countdown: the flagpole beside the heading, the date chalked under it, the score cards */
.rs-countdown { padding-top: 3.6rem; }
.rs-countdown__top { display: grid; grid-template-columns: minmax(0, 1fr) 4.6rem; align-items: end; gap: .5rem; margin-bottom: .6rem; }
.rs-countdown__top .rs-heading { margin: 0 0 .8rem; }
.rs-flagpole { width: 100%; height: auto; overflow: visible; }
.rs-flagpole__pole { fill: color-mix(in srgb, #cfd4d8 85%, var(--inv-primary)); }
.rs-flagpole__finial { fill: var(--inv-shine); }
.rs-flagpole__rope { stroke: rgb(255 255 255 / .55); stroke-width: 1; fill: none; }
.rs-flagpole__base { fill: color-mix(in srgb, #fff 45%, var(--inv-primary)); }
.rs-flagpole__red { fill: #e0302b; }
.rs-flagpole__white { fill: #fdfdf8; }
.rs-countdown__date { display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 1.6rem !important; max-width: none !important; text-align: left; }
.rs-countdown__date > span:first-child { font-family: var(--rs-hand); font-size: 1.45rem; font-weight: 700; line-height: 1.2; color: var(--rs-chalk-white); }
.rs-countdown__time { font-family: var(--rs-hand); font-size: 1.15rem; font-weight: 700; color: var(--inv-shine); }
.rs-countdown .inv-countdown { gap: clamp(.4rem, 2.2vw, .7rem); }
.rs-countdown .inv-countdown__item {
    position: relative; flex: 1; min-width: 0; padding: .7rem .2rem .55rem; border-radius: 4px; color: var(--inv-text); background: var(--rs-paper);
    box-shadow: inset 0 6px 0 var(--inv-accent), inset 0 7px 0 rgb(0 0 0 / .08), 0 16px 22px -12px rgb(0 0 0 / .65);
}
.rs-countdown .inv-countdown__item::before, .rs-countdown .inv-countdown__item::after {
    content: ''; position: absolute; top: -.35rem; width: .35rem; height: .7rem; border-radius: 2px; background: #9aa2ab;
}
.rs-countdown .inv-countdown__item::before { left: 22%; }
.rs-countdown .inv-countdown__item::after { right: 22%; }
.rs-countdown .inv-countdown__value { font-variant-numeric: lining-nums tabular-nums; font-family: var(--rs-display); font-weight: 700; font-size: 2rem; line-height: 1.05; color: var(--rs-title); }
.rs-countdown .inv-countdown__label { margin-top: .1rem; font-size: .56rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rs-red); opacity: 1; }
.rs-countdown .inv-countdown__done { font-family: var(--rs-hand); font-size: 1.3rem; color: var(--inv-shine); }
.rs-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 2rem; }
.rs-countdown .inv-countdown__actions .inv-button {
    width: min(100%, 17rem); min-height: 2.75rem; font-weight: 700;
    color: var(--rs-chalk-white); background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .5);
}
.rs-countdown .inv-countdown__actions .inv-button:first-child { color: var(--inv-deep); background: var(--inv-shine); box-shadow: none; }

/* rundown: the timetable on a framed chalkboard */
.rs-schedule {
    position: relative; margin: 0 -.2rem; padding: 1.1rem .9rem 1.6rem; border: 10px solid #7d4d2a; border-bottom-width: 0; text-align: left;
    border-image: linear-gradient(135deg, #b07a46, #7d4d2a 50%, #5f3a1f) 10;
    box-shadow: 0 26px 36px -20px rgb(0 0 0 / .7);
}
.rs-schedule__title { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin: 0 .2rem .6rem; }
.rs-schedule__title > span:first-child { font-family: var(--rs-display); font-size: 1.45rem; font-weight: 700; color: var(--rs-chalk-white); }
.rs-schedule__day { font-family: var(--rs-hand); font-size: 1.15rem; font-weight: 700; color: var(--inv-shine); }
.rs-schedule__head, .rs-schedule__row { display: grid; grid-template-columns: 2.1rem 3.3rem minmax(0, 1fr); gap: .55rem; }
.rs-schedule__head {
    margin: 0; padding: .3rem .2rem .35rem; font-size: .6rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-shine);
    border-block: 2px solid rgb(255 255 255 / .55);
}
.rs-schedule__list { margin: 0; padding: 0; list-style: none; }
.rs-schedule__row { align-items: start; padding: .62rem .2rem; border-bottom: 1.5px solid rgb(255 255 255 / .28); }
.rs-schedule__no {
    display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-family: var(--rs-hand); font-weight: 700; font-size: 1rem; line-height: 1;
    color: var(--inv-shine); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--inv-shine) 85%, transparent);
}
.rs-schedule__time { padding-top: .15rem; font-family: var(--rs-hand); font-size: 1.05rem; font-weight: 700; color: var(--inv-shine); }
.rs-schedule__body h3 { margin: 0; font-family: var(--rs-hand); font-size: 1.13rem; font-weight: 700; line-height: 1.3; color: var(--rs-chalk-white); }
.rs-schedule__body p { margin: .05rem 0 0; font-family: var(--rs-hand); font-size: .95rem; line-height: 1.35; color: var(--rs-chalk-soft); }
.rs-schedule .rs-tray { position: absolute; left: -10px; right: -10px; bottom: -.95rem; }

/* story: newsprint clippings and binder pages on the mading */
.rs-story__list { display: grid; gap: 2.2rem; margin: 0; padding: 0; list-style: none; }
.rs-story__item { position: relative; width: 88%; padding: 1rem 1rem 1.15rem; text-align: left; box-shadow: 0 1px 0 rgb(0 0 0 / .05), var(--rs-drop); rotate: -1.6deg; }
.rs-story__item--flip { margin-left: auto; rotate: 1.6deg; }
.rs-clipping {
    background: linear-gradient(180deg, rgb(255 255 255 / .35), transparent 30%), var(--rs-newsprint); color: #2b2a26;
    clip-path: polygon(0 1.5%, 4% 0, 9% 1.2%, 15% 0, 22% 1.4%, 30% .2%, 38% 1.3%, 46% 0, 55% 1.2%, 63% .1%, 71% 1.4%, 80% 0, 88% 1.2%, 95% .2%, 100% 1%, 99.4% 50%, 100% 99%, 93% 100%, 85% 98.8%, 76% 100%, 66% 98.9%, 55% 100%, 45% 98.8%, 35% 100%, 25% 98.8%, 15% 100%, 6% 98.9%, 0 100%, .6% 50%);
}
.rs-clipping .rs-pin { top: .35rem; }
.rs-clipping__photo { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: .75rem; filter: saturate(.85) contrast(1.03); }
.rs-binder {
    padding-left: 2.4rem; color: var(--inv-text);
    background:
        radial-gradient(circle at 1.05rem 1.6rem, color-mix(in srgb, #a8784a 92%, #000) .32rem, transparent .36rem) 0 0 / 100% 3.2rem repeat-y,
        linear-gradient(90deg, transparent 2rem, color-mix(in srgb, var(--inv-accent) 50%, transparent) 2rem 2.1rem, transparent 2.1rem),
        repeating-linear-gradient(180deg, transparent 0 25px, color-mix(in srgb, #2f63c6 22%, transparent) 25px 26px) 0 12px,
        #fffef9;
}
.rs-story__when {
    display: inline-block; margin-bottom: .35rem; padding: .1rem .6rem; font-family: var(--rs-hand); font-weight: 700; font-size: 1rem; line-height: 1.4;
    color: #3b2f05; background: #fde77a; rotate: -2deg; box-shadow: 0 2px 4px rgb(0 0 0 / .15);
}
.rs-story__title { margin: 0 0 .25rem; font-family: var(--rs-display); font-size: 1.35rem; font-weight: 700; line-height: 1.12; color: #1d1c19; }
.rs-story__text { margin: 0; font-size: .88rem; line-height: 1.55; color: #3b3a35; }
.rs-binder .rs-story__title { color: var(--rs-title); }
.rs-binder .rs-story__text { font-family: var(--rs-hand); font-size: 1.12rem; line-height: 26px; color: var(--rs-ink-blue); }

/* gallery: photos hung from a string with clothes pegs */
.rs-gallery .inv-gallery { gap: 1.5rem .85rem; padding: .7rem .2rem .3rem; }
.rs-gallery .inv-gallery__item {
    position: relative; overflow: visible; border-radius: 0; padding: 5px; background: #fff; rotate: -1.6deg;
    box-shadow: 0 0 0 1px rgb(0 0 0 / .05), 0 14px 22px -14px rgb(0 0 0 / .6);
}
.rs-gallery .inv-gallery__item img { border-radius: 0; }
.rs-gallery .inv-gallery__item::before {
    content: ''; position: absolute; z-index: 2; top: -.75rem; left: 50%; width: .62rem; height: 1.6rem; margin-left: -.31rem; border-radius: 2px;
    background: linear-gradient(90deg, #c69462, #e2b583 45%, #a87642); box-shadow: 1px 2px 2px rgb(0 0 0 / .3);
}
.rs-gallery .inv-gallery__item:nth-child(even) { rotate: 1.8deg; }
.rs-gallery .inv-gallery__item:nth-child(3n) { rotate: -.6deg; }
.rs-gallery .inv-gallery__item:first-child { grid-row: span 2; aspect-ratio: auto; rotate: -2deg; }

/* live streaming: the classroom TV on its bracket */
.rs-tv { position: relative; max-width: 20rem; margin: 0 auto 1.5rem; }
.rs-tv__set {
    position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 2.4rem; gap: .6rem; padding: .85rem; border-radius: 18px;
    background: linear-gradient(160deg, #f1ebdc, #d7cfbc 70%, #c5bca7);
    box-shadow: inset 0 2px 0 rgb(255 255 255 / .6), inset 0 -4px 0 rgb(0 0 0 / .12), 0 26px 34px -18px rgb(0 0 0 / .8);
}
.rs-tv__screen {
    display: flex; flex-direction: column; align-items: center; padding: 1.25rem .9rem 1.2rem; border-radius: 26px / 30px; color: var(--rs-chalk-white);
    background:
        repeating-linear-gradient(180deg, rgb(255 255 255 / .045) 0 1px, transparent 1px 3px),
        radial-gradient(90% 80% at 30% 20%, rgb(255 255 255 / .18), transparent 62%),
        linear-gradient(160deg, var(--inv-primary), color-mix(in srgb, var(--inv-deep) 80%, #000));
    box-shadow: inset 0 0 0 4px #2b2b2b, inset 0 0 18px rgb(0 0 0 / .6);
}
.rs-tv__icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .5rem; border-radius: 50%; color: #fff; background: var(--inv-accent); box-shadow: 0 0 0 4px rgb(255 255 255 / .18); }
.rs-tv__icon .rs-icon { width: 1.6rem; height: 1.6rem; }
.rs-tv__title { margin: 0 0 .25rem; font-family: var(--rs-display); font-weight: 700; font-size: 1.55rem; line-height: 1.1; color: #fff; }
.rs-tv__screen p { margin: 0; max-width: 26ch; font-size: .84rem; line-height: 1.5; color: var(--rs-chalk-soft); }
.rs-tv__screen .rs-tv__note { margin-top: .4rem; font-weight: 700; color: var(--inv-shine); }
.rs-tv__side { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding-top: .4rem; }
.rs-tv__grille { width: 100%; height: 3.6rem; border-radius: 4px; background: repeating-linear-gradient(180deg, rgb(0 0 0 / .32) 0 2px, transparent 2px 5px); }
.rs-tv__knob { width: 1.55rem; height: 1.55rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #777, #2f2f2f 60%); box-shadow: 0 2px 2px rgb(0 0 0 / .35); }
.rs-tv__bracket {
    position: absolute; left: 50%; top: 100%; width: 3.2rem; height: 1.6rem; margin-left: -1.6rem;
    background: linear-gradient(90deg, #6d737b, #9aa2ab 50%, #5d636b); clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%);
}
.rs-stream__button { min-height: 2.9rem; padding: .7rem 1.7rem; font-weight: 800; color: var(--inv-deep) !important; background: var(--inv-shine) !important; }

/* RSVP: the attendance sheet on the exam clipboard */
.rs-clipboard {
    position: relative; margin: 1.6rem auto 0; max-width: 23rem; padding: 2.1rem .75rem .75rem; border-radius: 14px;
    background: radial-gradient(120% 60% at 30% 10%, rgb(255 255 255 / .12), transparent 60%), repeating-linear-gradient(95deg, rgb(0 0 0 / .04) 0 3px, transparent 3px 9px), linear-gradient(180deg, #a86f3d, #8a5730);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15), 0 26px 34px -18px rgb(0 0 0 / .7);
}
.rs-clipboard__clip {
    position: absolute; z-index: 2; top: -.7rem; left: 50%; width: 8rem; height: 2.4rem; margin-left: -4rem; border-radius: 8px 8px 12px 12px;
    background: linear-gradient(180deg, #e9ecef, #a3aab2 60%, #7c838b); box-shadow: inset 0 1px 0 #fff, 0 6px 8px -2px rgb(0 0 0 / .45);
}
.rs-clipboard__clip::after { content: ''; position: absolute; left: 50%; top: .55rem; width: 2rem; height: .55rem; margin-left: -1rem; border-radius: 999px; background: #5d636b; box-shadow: inset 0 1px 2px rgb(0 0 0 / .5); }
.rs-absen {
    position: relative; padding: 1.35rem 1.05rem 1.3rem; text-align: left; color: var(--inv-text);
    background: repeating-linear-gradient(180deg, transparent 0 27px, color-mix(in srgb, #2f63c6 14%, transparent) 27px 28px) 0 8px, var(--rs-paper);
    box-shadow: 0 2px 4px rgb(0 0 0 / .2);
}
.rs-absen__title { margin: 0; text-align: center; font-family: var(--rs-display); font-size: 1.5rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rs-title); }
.rs-absen__for { margin: 0 0 .8rem; text-align: center; font-family: var(--rs-hand); font-size: 1.1rem; font-weight: 700; color: var(--rs-red); }
.rs-absen__cols {
    display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) 4.4rem; margin: 0 0 1rem; font-size: .6rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
    color: var(--inv-text); border-block: 2px solid var(--inv-text);
}
.rs-absen__cols span { padding: .3rem .4rem; }
.rs-absen__cols span + span { border-left: 1.5px solid var(--inv-text); }
.rs-absen__intro { margin: 0 0 1rem; font-size: .88rem; line-height: 1.5; color: var(--rs-muted); }
.rs-absen__sent { margin: 0 0 1rem; text-align: center; }
.rs-absen__mark {
    display: inline-block; margin: .2rem 0 .5rem; padding: .25rem 1.1rem; font-family: var(--rs-hand); font-weight: 700; font-size: 1.9rem; line-height: 1.2;
    color: var(--inv-accent); border: 3px solid var(--inv-accent); border-radius: 50% / 45%; rotate: -6deg;
}
.rs-absen__line { margin: 0; font-size: .9rem; color: var(--rs-muted); }
html.inv-anim .rs-absen__sent .rs-absen__mark { animation: rs-stamp .55s cubic-bezier(.3, 1.4, .6, 1) both; }
.rs-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .84rem; font-weight: 700; color: var(--rs-red); }

/* wishes: on the board, the form on the white shirt cloth, the signatures in marker colours */
.rs-wishes .inv-wishes { --inv-wishes-height: 21rem; }
.rs-wishes .inv-form {
    position: relative; padding: 1.9rem 1.1rem 1.25rem; border-radius: 6px; color: var(--inv-text);
    background:
        linear-gradient(90deg, transparent calc(50% - .5px), rgb(0 0 0 / .08) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)) 0 1.5rem / 100% 100% no-repeat,
        var(--rs-scribbles) right -.4rem bottom -.2rem / 9rem auto no-repeat,
        var(--rs-scribbles-2) right .4rem top 1.5rem / 5rem auto no-repeat,
        repeating-linear-gradient(0deg, rgb(0 0 0 / .018) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, #fff, #f2f1ec);
    box-shadow: 0 20px 30px -18px rgb(0 0 0 / .8);
}
/* the collar notch at the top of the shirt */
.rs-wishes .inv-form::before {
    content: ''; position: absolute; top: 0; left: 50%; width: 5.5rem; height: 1.1rem; margin-left: -2.75rem;
    background: var(--rs-board); clip-path: polygon(0 0, 100% 0, 62% 100%, 38% 100%);
}
.rs-wishes .inv-form label { color: var(--inv-text); }
.rs-wishes .inv-wishes__list { margin-top: 1.5rem; }
.rs-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list { padding: .55rem; border-radius: 12px; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .22); }
.rs-wishes .inv-wish { padding: .75rem .95rem; border-radius: 4px; text-align: left; color: var(--inv-text); background: linear-gradient(180deg, #fff, #f4f3ee); box-shadow: 0 6px 12px -6px rgb(0 0 0 / .5); }
.rs-wishes .inv-wish:nth-child(odd) { rotate: -.6deg; }
.rs-wishes .inv-wish:nth-child(even) { rotate: .6deg; }
.rs-wishes .inv-wish__name { font-family: var(--rs-hand); font-size: 1.12rem; font-weight: 700; color: #c62828; }
.rs-wishes .inv-wish:nth-child(4n+2) .inv-wish__name { color: #1f4fbf; }
.rs-wishes .inv-wish:nth-child(4n+3) .inv-wish__name { color: #1e7b3c; }
.rs-wishes .inv-wish:nth-child(4n+4) .inv-wish__name { color: #222; }
.rs-wishes .inv-wish__message { font-size: .88rem; line-height: 1.5; color: #2f3236; }
.rs-wishes .inv-wish__time { font-size: .72rem; color: #5d636b; opacity: 1; }
.rs-wishes .inv-wishes__pager button, .rs-wishes .inv-wishes__more { color: var(--rs-chalk-white); }

/* gift: receipts ("kuitansi") */
.rs-gift__intro { color: var(--rs-muted); }
.rs-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: color-mix(in srgb, var(--inv-shine) 55%, #fff);
}
.rs-gift .inv-gift__accounts { display: grid; gap: 1rem; margin-top: 1.4rem; }
.rs-gift .inv-gift__account,
.rs-gift .inv-gift__address {
    position: relative; display: grid; justify-items: start; gap: .1rem; padding: 2.4rem 1rem 1rem 2.2rem; text-align: left; color: var(--inv-text);
    background:
        repeating-linear-gradient(180deg, transparent 0 25px, color-mix(in srgb, var(--inv-primary) 16%, transparent) 25px 26px) 0 2.6rem,
        #fffdf4;
    border-left: 2px dashed color-mix(in srgb, var(--inv-text) 35%, transparent);
    box-shadow: -1.4rem 0 0 0 color-mix(in srgb, var(--inv-shine) 22%, #fff), -1.4rem 0 0 1px rgb(0 0 0 / .04), 0 16px 24px -16px rgb(0 0 0 / .6);
    margin-left: 1.4rem;
}
/* the printed "KUITANSI" strip with a wavy security band */
.rs-gift .inv-gift__account::before,
.rs-gift .inv-gift__address::before {
    content: 'Kuitansi'; position: absolute; top: 0; left: 0; right: 0; height: 1.65rem; padding: .3rem 2.2rem 0;
    font: 800 .66rem/1.2 var(--rs-sans); letter-spacing: .3em; text-transform: uppercase; color: #fff;
    background: repeating-radial-gradient(circle at 0 100%, rgb(255 255 255 / .12) 0 2px, transparent 2px 5px), var(--rs-board);
}
.rs-gift .inv-gift__address::before { content: 'Tanda terima barang'; }
/* the stub left in the receipt book, its text running upwards */
.rs-gift .inv-gift__account::after {
    content: 'Uang kas · Iuran'; position: absolute; top: 0; bottom: 0; left: -1.4rem; width: 1.4rem; display: grid; place-items: center;
    writing-mode: vertical-rl; rotate: 180deg; font: 800 .52rem/1 var(--rs-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--inv-gold);
}
.rs-gift .inv-gift__address::after { content: 'Barang · Donasi'; }
.rs-gift .inv-gift__account p, .rs-gift .inv-gift__address p { margin: 0; }
.rs-gift .inv-gift__bank { font-weight: 800; font-size: .88rem; color: var(--rs-title); }
.rs-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .35rem; background: #fff; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
.rs-gift .inv-gift__logo img { max-width: 5rem; }
.rs-gift .inv-gift__number { font-family: var(--rs-display); font-size: 1.45rem; font-weight: 700; letter-spacing: .04em; line-height: 1.25; overflow-wrap: anywhere; color: var(--inv-text); }
.rs-gift .inv-gift__holder { font-family: var(--rs-hand); font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--rs-ink-blue); overflow-wrap: anywhere; }
.rs-gift .inv-gift__address > p:not(.inv-gift__bank):not(.inv-gift__holder) { font-size: .9rem; line-height: 1.5; }
.rs-gift .inv-button { margin-top: .5rem; min-height: 2.3rem; padding: .35rem 1rem; font-size: .76rem; font-weight: 800; }
.rs-gift .inv-gift__address { margin-top: 1rem; }

/* co-hosts: the organisation chart in chalk */
.rs-chart { position: relative; display: flex; flex-direction: column; align-items: center; }
.rs-chart__box {
    position: relative; display: flex; flex-direction: column; align-items: center; margin: 0; padding: .6rem .7rem .65rem; min-width: 0;
    border: 2px solid rgb(255 255 255 / .75); border-radius: 4px; text-align: center;
}
.rs-chart__box--top { min-width: 12rem; border-color: var(--inv-shine); }
.rs-chart:not(.rs-chart--solo) .rs-chart__box--top::after { content: ''; position: absolute; top: 100%; left: 50%; width: 2px; height: 1.3rem; margin-left: -1px; background: rgb(255 255 255 / .75); }
.rs-chart__role { font-family: var(--rs-hand); font-size: 1rem; font-weight: 700; line-height: 1.2; color: var(--inv-shine); }
.rs-chart__name { font-family: var(--rs-hand); font-size: 1.15rem; font-weight: 700; line-height: 1.25; color: var(--rs-chalk-white); overflow-wrap: anywhere; }
.rs-chart__list {
    position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem .7rem; width: 100%; margin: 1.3rem 0 0; padding: 1.3rem 0 0; list-style: none;
}
.rs-chart__list::before { content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; background: rgb(255 255 255 / .75); }
.rs-chart__list .rs-chart__box::before { content: ''; position: absolute; bottom: 100%; left: 50%; width: 2px; height: 1.3rem; margin-left: -1px; background: rgb(255 255 255 / .75); }
.rs-chart__list .rs-chart__box:nth-child(n+3)::before { height: 1.4rem; background: rgb(255 255 255 / .3); }
.rs-chart__list .rs-chart__box:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .35rem); }

/* contacts: student cards */
.rs-contacts__list { display: grid; gap: 1.1rem; max-width: 23rem; margin: 0 auto; }
.rs-idcard { overflow: hidden; border-radius: 12px; text-align: left; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .06), var(--rs-drop); }
.rs-idcard:nth-child(odd) { rotate: -.8deg; }
.rs-idcard:nth-child(even) { rotate: .8deg; }
.rs-idcard__band {
    display: flex; align-items: center; gap: .5rem; padding: .4rem .8rem; font-size: .62rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
    color: #fff; background: var(--rs-board); box-shadow: 0 3px 0 #e0302b, 0 6px 0 #fff, 0 7px 0 rgb(0 0 0 / .08);
}
.rs-idcard__badge { width: 1.15rem; }
.rs-idcard__body { display: flex; align-items: center; gap: .8rem; padding: 1rem .85rem .85rem; }
.rs-idcard__avatar {
    display: grid; place-items: center; flex: none; width: 2.9rem; height: 3.6rem; border: 3px solid #fff; font-family: var(--rs-display); font-weight: 700; font-size: 1.5rem;
    color: #fff; background: linear-gradient(180deg, #d63a35, #b3221f); box-shadow: 0 0 0 1px rgb(0 0 0 / .12);
}
.rs-idcard__text { flex: 1; min-width: 0; }
.rs-idcard__name { margin: 0; font-family: var(--rs-display); font-weight: 700; font-size: 1.12rem; line-height: 1.2; color: var(--rs-title); overflow-wrap: anywhere; }
.rs-idcard__role { margin: 0; font-size: .78rem; color: var(--rs-muted); }
.rs-idcard__phone { margin: .1rem 0 0; font-weight: 700; font-size: .85rem; }
.rs-idcard__button { display: inline-flex; align-items: center; gap: .35rem; flex: none; min-height: 2.4rem; padding: .4rem .9rem; font-size: .8rem; font-weight: 800; }
.rs-idcard__button .rs-icon { width: 1rem; height: 1rem; }

/* health protocol: chalk rules */
.rs-protocol__list { display: grid; gap: .55rem; max-width: 19rem; margin: 0 auto; padding: 0; list-style: none; text-align: left; }
.rs-protocol__list li { display: flex; align-items: center; gap: .6rem; padding-bottom: .45rem; font-family: var(--rs-hand); font-size: 1.15rem; font-weight: 700; color: var(--rs-chalk-white); border-bottom: 1.5px solid rgb(255 255 255 / .2); }
.rs-protocol__list .rs-icon { color: var(--inv-shine); width: 1.3rem; height: 1.3rem; }
.rs-protocol__note { margin-top: 1.1rem !important; font-family: var(--rs-hand); font-size: 1.1rem; color: var(--inv-shine); }

/* vendors: the canteen sign over the menu board */
.rs-canteen { position: relative; max-width: 22rem; margin: 0 auto; padding-top: 1rem; }
.rs-canteen__sign {
    position: relative; z-index: 2; display: inline-block; margin: 0 0 1.4rem; padding: .35rem 1.6rem .4rem; rotate: -2deg;
    font-family: var(--rs-display); font-size: 1.7rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #fff;
    background: var(--rs-wood-grain), linear-gradient(180deg, #c2312b, #9c1f1c); border: 4px solid #f3efe4; border-radius: 6px;
    box-shadow: 0 0 0 2px #9c1f1c, 0 14px 20px -12px rgb(0 0 0 / .6);
}
.rs-canteen__sign::before, .rs-canteen__sign::after { content: ''; position: absolute; bottom: 100%; width: 1.5px; height: 1.6rem; background: #5d636b; }
.rs-canteen__sign::before { left: 18%; rotate: 14deg; transform-origin: bottom; }
.rs-canteen__sign::after { right: 18%; rotate: -14deg; transform-origin: bottom; }
.rs-menu {
    padding: 1.1rem 1rem 1rem; border: 8px solid #7d4d2a; border-image: linear-gradient(135deg, #b07a46, #7d4d2a 50%, #5f3a1f) 8; text-align: left;
    box-shadow: 0 22px 32px -18px rgb(0 0 0 / .7);
}
.rs-menu__title { margin: 0 0 .5rem; text-align: center; font-family: var(--rs-hand); font-size: 1.3rem; font-weight: 700; color: var(--inv-shine); }
.rs-menu__list { margin: 0; padding: 0; list-style: none; }
.rs-menu__item { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .65rem 0; border-bottom: 1.5px dashed rgb(255 255 255 / .28); }
.rs-menu__item:last-child { border-bottom: 0; }
.rs-menu__text { display: flex; flex-direction: column; min-width: 0; }
.rs-menu__role { font-family: var(--rs-hand); font-size: .92rem; font-weight: 700; line-height: 1.2; color: var(--inv-shine); }
.rs-menu__name { font-family: var(--rs-hand); font-size: 1.15rem; font-weight: 700; line-height: 1.25; color: var(--rs-chalk-white); overflow-wrap: anywhere; }
.rs-menu__tag {
    position: relative; display: inline-flex; align-items: center; gap: .3rem; flex: none; min-height: 2.1rem; padding: .3rem .65rem .3rem .9rem;
    font-size: .72rem; font-weight: 800; text-decoration: none; color: #3b2f05 !important; background: #fde77a; rotate: 3deg;
    clip-path: polygon(.55rem 0, 100% 0, 100% 100%, .55rem 100%, 0 50%);
}
.rs-menu__tag .rs-icon { width: .95rem; height: .95rem; }

/* closing: the full photo fading into the board, the bell, the thanks, the carved desk */
.rs-closing { padding: 2.8rem 1.5rem 2.2rem; }
/* with a photo the board starts flat under it, so the photo's fade meets the same colour */
.rs-closing--photo { padding-top: 0; background: var(--rs-noise), linear-gradient(180deg, var(--rs-board) 40%, var(--inv-deep)); }
.rs-closing__photo { position: relative; z-index: -1; height: min(60svh, 28.75rem); margin: 0 -1.5rem; overflow: hidden; }
.rs-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 30%; --inv-parallax: 30px; }
.rs-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 38%, color-mix(in srgb, var(--rs-board) 55%, transparent) 66%, var(--rs-board) 96%);
}
/* chalk dust over the lower part of the photo too */
.rs-closing__photo::before { content: ''; position: absolute; inset: 40% 0 0; z-index: 1; background: var(--rs-noise); -webkit-mask: linear-gradient(transparent, #000); mask: linear-gradient(transparent, #000); }
.rs-closing__body { position: relative; }
.rs-closing--photo .rs-closing__body { margin-top: -5.2rem; }
.rs-closing__bell { width: 3.7rem; margin: 0 auto .4rem; color: var(--inv-shine); }
.rs-closing__eyebrow { margin: 0 0 .15rem; font-family: var(--rs-hand); font-size: 1.05rem; font-weight: 700; color: var(--inv-shine); }
.rs-closing__title { margin: 0 0 .7rem; font-family: var(--rs-display); font-weight: 700; font-size: clamp(1.9rem, 8.5vw, 2.4rem); line-height: 1.02; color: var(--rs-chalk-white); }
.rs-closing__title em { font-style: normal; color: var(--inv-shine); }
.rs-closing__message { margin: 0 auto; max-width: 32ch; font-size: .92rem; line-height: 1.6; color: var(--rs-chalk-soft); }
.rs-closing__salam { margin: .8rem auto 0; font-family: var(--rs-hand); font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--inv-shine); }
.rs-closing__signature { margin: .4rem auto 0; max-width: 30ch; font-size: .86rem; color: var(--rs-chalk-soft); }
.rs-desk {
    position: relative; display: flex; align-items: center; justify-content: center; gap: .9rem; margin: 1.4rem -.4rem 0; padding: .75rem 1.1rem .8rem; border-radius: 6px;
    background: var(--rs-wood-grain), linear-gradient(180deg, #b47c48, #94602f 60%, #7b4d24);
    box-shadow: inset 0 2px 0 rgb(255 255 255 / .25), inset 0 -5px 0 rgb(0 0 0 / .2), 0 18px 26px -14px rgb(0 0 0 / .8);
}
/* carved letters: darker than the wood, a light edge under them */
.rs-desk__carve { display: flex; flex-direction: column; align-items: center; margin: 0; color: #5a3416; text-shadow: 0 1px 0 rgb(255 225 180 / .45), 0 -1px 0 rgb(0 0 0 / .25); }
.rs-desk__mono { padding: 0 .55rem; border: 2px solid #5a3416; border-radius: 4px; font-family: var(--rs-display); font-weight: 700; font-size: 1.6rem; line-height: 1.1; box-shadow: 0 1px 0 rgb(255 225 180 / .45); }
.rs-desk__name { margin-top: .3rem; font-family: var(--rs-hand); font-weight: 700; font-size: 1.08rem; line-height: 1.2; text-align: center; }
.rs-desk__batch { font-size: .64rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.rs-desk__tally { flex: none; width: 3.2rem; }
.rs-desk__tally svg { display: block; width: 100%; fill: none; stroke: #5a3416; stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 1px 0 rgb(255 225 180 / .45)); }

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

/* the three answers as tick boxes on the sheet (the radio dot is hidden but still focusable) */
.rs-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.rs-rsvp .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.rs-rsvp .inv-form__choices label {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .45rem;
    min-height: 5.2rem; padding: .8rem .3rem .7rem; border-radius: 6px; 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 1.5px color-mix(in srgb, var(--inv-text) 24%, transparent);
    transition: background-color .25s ease, color .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.rs-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* the tick box (::before) with a hand-drawn check, cross or question mark in it (::after, a mask) */
.rs-rsvp .inv-form__choices label::before {
    content: ''; width: 2rem; height: 2rem; border-radius: 3px; flex: none; background: #fff; box-shadow: inset 0 0 0 2px var(--inv-text);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease;
}
.rs-rsvp .inv-form__choices label::after {
    content: ''; position: absolute; left: 50%; top: 1.15rem; width: 1.3rem; height: 1.3rem; margin-left: -.65rem;
    background: currentColor; color: var(--rs-ink-blue); pointer-events: none;
    -webkit-mask: var(--rs-choice-icon) center / contain no-repeat; mask: var(--rs-choice-icon) center / contain no-repeat;
}
.rs-rsvp .inv-form__choices label:nth-of-type(1) {
    --rs-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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 4.8 5.2L20 5.5'/%3E%3C/svg%3E");
}
.rs-rsvp .inv-form__choices label:nth-of-type(2) {
    --rs-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.8' stroke-linecap='round'%3E%3Cpath d='M6 6.5l12 11M17.5 6l-11.5 12'/%3E%3C/svg%3E");
}
.rs-rsvp .inv-form__choices label:nth-of-type(3) {
    --rs-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.8' 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");
}
.rs-rsvp .inv-form__choices label:not(:has(input:checked))::after { opacity: .18; }
.rs-rsvp .inv-form__choices label:has(input:checked) {
    color: #fff; background: var(--rs-board); transform: translateY(-3px);
    box-shadow: 0 0 0 3px var(--inv-shine), 0 12px 24px -12px rgb(0 0 0 / .6);
}
.rs-rsvp .inv-form__choices label:has(input:checked)::before { transform: scale(1.08) rotate(-4deg); }
.rs-rsvp .inv-form__choices label:has(input:checked)::after { color: var(--inv-accent); opacity: 1; }
.rs-rsvp .inv-form__choices label:has(input:focus-visible) { outline: 2px solid var(--inv-accent); outline-offset: 3px; }

/* ---------- 7. shared components ---------- */
.rs-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(--rs-sans);
}

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

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

/* short phones: the photo and type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .rs-cover { --ph-cover: min(80vw, 19.5rem, calc(31svh * 1.3333)); padding-top: 1.3rem; }
    .rs-cover__title { margin-bottom: 1.15rem; font-size: 1.2rem; }
    .rs-cover__name { font-size: clamp(1.75rem, 7.8vw, 2.2rem); }
    .rs-cover__quote { font-size: .86rem; }
    .rs-cover__guest { margin-top: .7rem; }
    .rs-cover__open { margin-top: .85rem; }
}
@media (max-height: 660px) {
    .rs-cover { --ph-cover: min(74vw, calc(28svh * 1.3333)); padding-top: 1.05rem; padding-bottom: 2.4rem; }
    .rs-cover__title { margin-bottom: 1rem; font-size: 1.08rem; }
    .rs-cover__art--then { margin-bottom: 1.9rem; }
    .rs-cover__milestone { width: 4.3rem; height: 3.6rem; top: -1.4rem; }
    .rs-cover__milestone strong { font-size: 1.65rem; }
    .rs-cover__name { font-size: clamp(1.55rem, 7.2vw, 1.95rem); }
    .rs-cover__batch { font-size: 1.18rem; }
    .rs-cover__date { margin-top: .35rem; font-size: .68rem; }
    .rs-cover__quote { margin-top: .45rem; font-size: .8rem; line-height: 1.3; }
    .rs-cover__guest { margin-top: .55rem; padding-block: .45rem .4rem; }
    .rs-cover__guest-name { font-size: 1.25rem; }
    .rs-cover__open { min-height: 2.75rem; margin-top: .7rem; padding: .6rem 1.5rem; }
}
/* very short screens (in-app browsers): a smaller photo and quote, so everything fits */
@media (max-height: 600px) {
    .rs-cover { --ph-cover: min(66vw, calc(25svh * 1.3333)); padding-top: .9rem; }
    .rs-cover__title { margin-bottom: .9rem; }
    .rs-cover__name { font-size: 1.5rem; }
    .rs-cover__quote { font-size: .76rem; line-height: 1.26; }
}

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

/* ---------- 9. motion ---------- */
@keyframes rs-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rs-place { from { opacity: 0; rotate: -6deg; scale: 1.06; translate: 0 -14px; } to { opacity: 1; rotate: var(--ph-tilt); scale: 1; translate: 0 0; } }
@keyframes rs-zoom-out { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes rs-slide-in { from { opacity: 0; translate: -40px 14px; rotate: -18deg; } to { opacity: 1; translate: 0 0; rotate: -5deg; } }
@keyframes rs-click { 0% { opacity: 0; scale: 1.8; } 70% { opacity: 1; scale: .9; } 100% { opacity: 1; scale: 1; } }
@keyframes rs-write { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% -5% -20% 0); } }
@keyframes rs-stamp { 0% { opacity: 0; scale: 1.8; } 70% { opacity: 1; scale: .94; } 100% { opacity: 1; scale: 1; } }
@keyframes rs-swing { 0% { rotate: 0deg; } 20% { rotate: 14deg; } 40% { rotate: -10deg; } 60% { rotate: 6deg; } 80% { rotate: -3deg; } 100% { rotate: 0deg; } }
@keyframes rs-hoist { from { translate: 0 140px; } to { translate: 0 0; } }
@keyframes rs-wave { 0%, 100% { scale: 1 1; } 50% { scale: .94 1; } }

/* cover (≤ 2.5 s, once): the photo is placed on the board (0–.8 s) while it settles from a slight zoom,
   the magnets click on (.7 s), the ID photo slides in (.6–1.25 s), the circle draws itself (.9–1.6 s),
   the title (.35 s) and the name (1 s) are written left to right; the rest rises through inv-enter */
html.inv-anim .rs-photo--cover { animation: rs-place .8s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .rs-photo--cover .rs-photo__img { animation: rs-zoom-out 1.1s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .rs-cover .rs-photo__magnet { animation: rs-click .35s ease-out .7s both; }
html.inv-anim .rs-cover .rs-photo__magnet--right { animation-delay: .8s; }
html.inv-anim .rs-cover__then { animation: rs-slide-in .65s cubic-bezier(.2, .8, .3, 1.1) .6s both; }
html.inv-anim .rs-cover__dulu { animation: rs-fade .5s ease 1.2s both; }
html.inv-anim .rs-cover__dulu path { stroke-dasharray: 1; animation: rs-draw .5s ease-out 1.25s both; }
html.inv-anim .rs-cover__circle path { stroke-dasharray: 1; animation: rs-draw .7s ease-out .9s both; }
html.inv-anim .rs-cover__milestone > :not(svg) { animation: rs-fade .4s ease 1.1s both; }
html.inv-anim .rs-write { animation: rs-write .9s cubic-bezier(.5, .1, .4, 1) var(--write-delay, 0s) both; }

/* hand-drawn underlines draw themselves when their heading is revealed */
html.inv-anim .rs-underline path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.inv-anim .is-revealed .rs-underline path { animation: rs-draw .55s ease-out .45s both; }
html.inv-anim .is-revealed .rs-underline path + path { animation-delay: .7s; }

/* the bells swing once; the flag is hoisted once; the grade circle draws itself */
html.inv-anim .is-revealed .rs-bell__swing, html.inv-anim .is-revealed.rs-bell .rs-bell__swing { animation: rs-swing 1.8s ease-in-out .3s both; }
html.inv-anim .rs-flagpole__flag { translate: 0 140px; }
html.inv-anim .is-revealed .rs-flagpole__flag { animation: rs-hoist 2.2s cubic-bezier(.3, .1, .3, 1) .3s both; }
html.inv-anim .rs-grade__circle path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.inv-anim .is-revealed .rs-grade__circle path { animation: rs-draw .8s ease-out .5s both; }

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

/* ---------- 10. intro scene "Bel Masuk, Bendera Naik" (scene.json + sections/_scene) ----------
   The camera pulls back onto the class board in its wooden frame: the bell drops in and rings, the flag is hoisted,
   the batch is chalked and underlined, the ID photo is clicked on with a magnet, the milestone is circled, the chalk
   tray slides up with the eraser; then the exercise-book name label (the scene card). CSS motion only with inv-anim. */
.rs-scene-board { position: absolute; inset: 0; box-shadow: inset 0 11px 0 #7d4d2a, inset 9px 0 0 #8a5631, inset -9px 0 0 #8a5631, inset 0 14px 10px -6px rgb(0 0 0 / .45); }
.rs-scene-board .rs-doodles { z-index: 0; }
.rs-scene-bell { color: color-mix(in srgb, #fff 80%, var(--inv-shine)); filter: drop-shadow(0 6px 5px rgb(0 0 0 / .35)); }
.rs-scene-bell .rs-bell { width: 100%; height: auto; }
.rs-scene-flag { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 5px rgb(0 0 0 / .3)); }
.rs-scene-flag__flag { transform-box: fill-box; transform-origin: left center; }
.rs-scene-write { position: absolute; inset: 0; container-type: size; display: flex; flex-direction: column; justify-content: center; }
.rs-scene-write__text {
    margin: 0; font-family: var(--rs-hand); font-weight: 700; font-size: min(14cqw, 56cqh); line-height: 1.05; color: var(--inv-shine);
    white-space: nowrap; overflow: visible;
}
.rs-scene-write__line { display: block; width: 92%; height: 14cqh; margin-top: 2cqh; overflow: visible; fill: none; stroke: var(--rs-chalk-white); stroke-width: 3.2; stroke-linecap: round; opacity: .9; }
:is(.rs-scene-write, .rs-scene-mile, .rs-scene-id__dulu) .rs-chalk { -webkit-mask: var(--rs-chalk-mask) 0 0 / 150px 150px repeat; mask: var(--rs-chalk-mask) 0 0 / 150px 150px repeat; }
.rs-scene-id { position: absolute; inset: 0; container-type: size; }
.rs-scene-id__photo { position: absolute; left: 0; bottom: 0; width: calc((100cqh - 8px) * .75 + 8px); rotate: -6deg; }
.rs-scene-id__img { position: absolute; inset: 4px; background: center 25% / cover no-repeat; filter: sepia(.18) saturate(.92); }
.rs-scene-id__magnet { top: -.6rem; left: calc(50% - .675rem); }
.rs-scene-id__dulu {
    position: absolute; left: calc((100cqh - 8px) * .75 + 14px); top: 10%; display: flex; align-items: flex-end; gap: .15rem; margin: 0;
    font-family: var(--rs-hand); font-weight: 700; font-size: 1.3rem; line-height: 1; color: var(--rs-chalk-white);
}
.rs-scene-id__dulu svg { width: 2.1rem; height: 1.4rem; fill: none; stroke: var(--rs-chalk-white); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; translate: 0 .5rem; }
.rs-scene-mile { position: absolute; inset: 0; container-type: size; }
.rs-scene-mile__in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; text-align: center; color: var(--inv-shine); }
.rs-scene-mile__in strong { font-family: var(--rs-display); font-weight: 700; font-size: 46cqh; line-height: .85; }
.rs-scene-mile__in span { font-family: var(--rs-hand); font-weight: 700; font-size: 19cqh; line-height: 1; }
.rs-scene-mile__in--text span { padding: 0 12cqw; font-size: 17cqh; }
.rs-scene-mile__circle { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; fill: color-mix(in srgb, var(--inv-deep) 72%, transparent); stroke: var(--inv-shine); stroke-width: 2.6; stroke-linecap: round; }
/* the tray along the foot of the board, the painted wall below it */
.rs-scene-tray {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 1.05rem, color-mix(in srgb, var(--inv-primary) 55%, var(--inv-background)) 1.05rem 1.35rem, color-mix(in srgb, var(--inv-primary) 18%, var(--inv-background)) 1.35rem);
}
.rs-scene-tray .rs-tray { height: 1.05rem; }

html.inv-anim .inv-intro--scene .rs-scene-flag__flag { translate: 0 150px; }
html.inv-anim .inv-intro--scene .rs-scene-write__text,
html.inv-anim .inv-intro--scene .rs-scene-write__line { clip-path: inset(-20% 100% -20% 0); }
html.inv-anim .inv-intro--scene :is(.rs-scene-id__magnet, .rs-scene-id__dulu, .rs-scene-mile__in > :not(svg)) { opacity: 0; }
html.inv-anim .inv-intro--scene .rs-scene-mile__circle path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.inv-anim .inv-intro--scene .rs-bell__ring { opacity: 0; }
html.inv-anim .inv-intro--scene.is-playing .rs-scene-bell .rs-bell__swing { animation: rs-swing 1.5s ease-in-out 1.35s 2; }
html.inv-anim .inv-intro--scene.is-playing .rs-scene-bell .rs-bell__ring { animation: rs-scene-ring .75s ease-in-out 1.4s 4; }
html.inv-anim .inv-intro--scene.is-playing .rs-scene-flag__flag { animation: rs-scene-hoist 2.3s cubic-bezier(.35, .1, .3, 1) 1.5s forwards, rs-wave 1.6s ease-in-out 3.8s infinite; }
html.inv-anim .inv-intro--scene.is-playing .rs-scene-tray__eraser { animation: rs-scene-erase 1.2s cubic-bezier(.2, .7, .3, 1) .9s both; }
html.inv-anim .inv-intro--scene.is-playing .rs-scene-write__text { animation: rs-write 1.2s cubic-bezier(.5, .1, .4, 1) 1.9s forwards; }
html.inv-anim .inv-intro--scene.is-playing .rs-scene-write__line { animation: rs-write .6s ease-out 3.05s forwards; }
html.inv-anim .inv-intro--scene.is-playing .rs-scene-id__magnet { animation: rs-click .35s ease-out 3.35s forwards; }
html.inv-anim .inv-intro--scene.is-playing .rs-scene-id__dulu { animation: rs-fade .5s ease 3.55s forwards; }
html.inv-anim .inv-intro--scene.is-playing .rs-scene-mile__circle path { animation: rs-draw .7s ease-out 3.1s forwards; }
html.inv-anim .inv-intro--scene.is-playing .rs-scene-mile__in > :not(svg) { animation: rs-fade .4s ease 3.4s forwards; }
@keyframes rs-scene-ring { 0%, 100% { opacity: 0; } 50% { opacity: .9; } }
@keyframes rs-scene-hoist { from { translate: 0 150px; } to { translate: 0 0; } }
@keyframes rs-scene-erase { from { opacity: 0; translate: 8rem 0; } to { opacity: 1; translate: 0 0; } }

/* the name card: the exercise-book name label held on the board by a red magnet */
body.rs-body .inv-intro--scene .inv-scene__card {
    top: 54%; aspect-ratio: auto; rotate: -1.5deg; padding: 1.55rem 1.3rem 1.25rem; border-radius: 18px;
    -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff;
    box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 6px #2f63c6, inset 0 0 0 9px #fff, inset 0 0 0 10.5px color-mix(in srgb, var(--inv-accent) 70%, #fff), 0 26px 40px -16px rgb(0 0 0 / .65);
}
body.rs-body .inv-scene__card::before {
    content: ''; position: absolute; top: -.7rem; left: calc(50% - .8rem); width: 1.6rem; height: 1.6rem; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ff9a91, var(--inv-accent) 55%, color-mix(in srgb, var(--inv-accent) 65%, #000));
    box-shadow: inset 0 -2px 3px rgb(0 0 0 / .3), 0 4px 6px -1px rgb(0 0 0 / .45);
}
body.rs-body .inv-scene__card .inv-intro__label { font-family: var(--rs-sans); font-size: .66rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #2f63c6; }
body.rs-body .inv-scene__card .inv-intro__names {
    justify-self: center; padding: 0 .2rem .2rem; font-family: var(--rs-hand) !important; font-weight: 700; font-size: clamp(1.95rem, 8.6vw, 2.6rem); line-height: 1.12;
    color: var(--rs-ink-blue); overflow-wrap: anywhere; text-wrap: balance;
    background: radial-gradient(circle, color-mix(in srgb, #2f63c6 55%, transparent) .9px, transparent 1.3px) 0 100% / 7px 5px repeat-x;
}
body.rs-body .inv-scene__card .inv-intro__rule { height: 3px; width: 2.2rem; border-radius: 3px; background: var(--inv-accent); }
body.rs-body .inv-scene__card .inv-intro__date { font-family: var(--rs-sans); font-weight: 700; font-size: .8rem; letter-spacing: .04em; color: var(--inv-text); }
/* short phones (≈ 360×640): a slightly smaller label a little higher, so the ID photo and its magnet stay clear */
@media (min-aspect-ratio: 10 / 19) {
    body.rs-body .inv-intro--scene .inv-scene__card { top: 50.5%; padding: 1.3rem 1.15rem 1rem; }
    body.rs-body .inv-scene__card .inv-intro__names { font-size: clamp(1.75rem, 8vw, 2.3rem); }
}