/*
 * Template "Dasar" (Reuni & Halal Bihalal) — "Kembali berkumpul": warm nostalgia with a clean modern look.
 * Warm paper with faint notebook rules (blue lines, a red margin line), a deep ink colour (navy), a
 * tomato-red accent and a mustard highlight. Signature pieces: "then & now" instant prints held by washi
 * tape (sections/_print), the class-photo frame with a brass plaque (organizer), the "HALO" name tag
 * (.dasar-tag: the guest box, the committee, the closing), tickets with a perforated stub and notches
 * (party, events, RSVP), the desk calendar torn to the day (countdown), the class timetable (rundown), the
 * stack of photographs (story), airmail envelopes (gift), an old TV set (live streaming) and the line-drawn
 * school with its flag (sections/_school). Mobile-first, one column (~460px) on a deep backdrop on wide
 * screens.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (navy / forest / maroon / teal: titles, buttons, frames)
 *   --inv-accent (tomato / rust / orange / coral: bands, tags, stamps; text on light via --dasar-clay)
 *   --inv-background (warm paper)   --inv-text   --inv-deep (dark bands)   --inv-shine (mustard on dark,
 *   highlighter, stickers, tape)   --inv-gold (darker mustard lines on light grounds)   --inv-soft (paper tint)
 * Everything else is mixed from those, so a new variant only needs these eight colours.
 *
 * Section tones (set on each section in its partial): .dasar-tone--light (paper with notebook rules),
 * --sand (paper tint), --deep (the dark band colour with a faint dot grid), --clay (a deep tomato band).
 * Light and dark alternate down the page.
 *
 * Tilts use the individual `rotate` property (not `transform`), so the reveal-on-scroll transforms of
 * invitation.js never undo them.
 *
 * Motion only runs with html.inv-anim (set by <x-inv.head> unless the guest prefers reduced motion);
 * without it everything is shown finished.
 *
 * Contents: 1 base · 2 section tones & photo backgrounds · 3 shared pieces (heading, school, print,
 *           name tag, sticker, note, ticket) · 4 cover · 5 sections in page order · 6 forms (RSVP, wishes) ·
 *           7 shared components · 8 screen sizes · 9 motion
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Navy Tomat" variant (the variant's colours override these) */
    --inv-primary: #1f3a6b;
    --inv-accent: #d6452a;
    --inv-background: #f8f1e4;
    --inv-text: #1a2233;
    --inv-deep: #14264a;
    --inv-shine: #f0b336;
    --inv-gold: #b47f1c;
    --inv-soft: #eedfc4;
    --inv-radius: 14px;

    --dasar-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --dasar-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --dasar-hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
    --dasar-col: 460px;
    --dasar-paper: color-mix(in srgb, #fff 70%, var(--inv-background));
    --dasar-title: color-mix(in srgb, var(--inv-primary) 78%, var(--inv-deep));
    --dasar-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    --dasar-cream-muted: color-mix(in srgb, var(--inv-background) 86%, transparent);
    --dasar-ring: color-mix(in srgb, var(--inv-primary) 16%, transparent);
    --dasar-clay: color-mix(in srgb, var(--inv-accent) 84%, var(--inv-deep));
    --dasar-drop: 0 22px 40px -22px color-mix(in srgb, var(--inv-deep) 70%, transparent);

    /* notebook paper: faint ruled lines + a red margin line (backgrounds, so they take the variant colours) */
    --dasar-rules: repeating-linear-gradient(180deg, transparent 0 27px, color-mix(in srgb, var(--inv-primary) 9%, transparent) 27px 28px);
    --dasar-margin: linear-gradient(90deg, transparent 0 22px, color-mix(in srgb, var(--inv-accent) 30%, transparent) 22px 23.5px, transparent 23.5px);

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

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

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

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

.dasar-arabic { font-family: 'Amiri', 'Traditional Arabic', serif; line-height: 1.9; color: var(--inv-primary); }

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

/* light: notebook paper (rules + margin line) with a mustard glow in one corner and a tomato glow in the other */
.dasar-tone--light {
    background:
        radial-gradient(60% 26% at 100% 0%, color-mix(in srgb, var(--inv-shine) 22%, transparent), transparent 75%),
        radial-gradient(60% 26% at 0% 100%, color-mix(in srgb, var(--inv-accent) 10%, transparent), transparent 75%),
        var(--dasar-margin), var(--dasar-rules), var(--inv-background);
}
/* sand: a warm wash of the paper tint, no rules */
.dasar-tone--sand {
    background:
        radial-gradient(80% 40% at 50% 0%, color-mix(in srgb, #fff 45%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-soft), color-mix(in srgb, var(--inv-soft) 45%, var(--inv-background)));
}

/* deep: the band colour with a glow of the primary, a low tomato glow and a faint mustard dot grid */
.dasar-tone--deep {
    color: var(--inv-background);
    background:
        radial-gradient(90% 45% at 10% 0%, color-mix(in srgb, var(--inv-primary) 85%, transparent), transparent 75%),
        radial-gradient(70% 30% at 90% 100%, color-mix(in srgb, var(--inv-accent) 26%, transparent), transparent 75%),
        var(--inv-deep);
}
.dasar-tone--deep::before, .dasar-tone--clay::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--inv-shine) 22%, transparent) 1px, transparent 1.6px) 0 0 / 18px 18px;
}
.dasar-tone--deep a:not(.inv-button) { color: var(--inv-shine); }
.dasar-tone--deep .dasar-arabic { color: var(--inv-shine); }

/* clay: a deep tomato band (white text keeps ≥ 4.5:1) */
.dasar-tone--clay {
    color: #fff;
    background:
        radial-gradient(80% 50% at 50% 0%, color-mix(in srgb, var(--inv-shine) 26%, transparent), transparent 75%),
        radial-gradient(70% 40% at 0% 100%, color-mix(in srgb, var(--inv-deep) 40%, transparent), transparent 75%),
        var(--dasar-clay);
}
.dasar-tone--clay::before { background: radial-gradient(circle, rgb(255 255 255 / .16) 1px, transparent 1.6px) 0 0 / 18px 18px; }

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

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

/* section heading: a pencil-dash + letter-spaced eyebrow, a display title, the last word italic over a
   mustard highlighter stroke */
.dasar-heading { margin: 0 0 2.1rem; }
.dasar-heading--left { text-align: left; }
.dasar-heading__eyebrow {
    display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .55rem;
    font-size: .7rem; font-weight: 800; line-height: 1.2; letter-spacing: .2em; text-transform: uppercase; color: var(--dasar-clay);
}
.dasar-heading__eyebrow::before { content: ''; width: 1.5rem; height: 3px; border-radius: 3px; background: var(--inv-accent); box-shadow: .45rem 0 0 -0px transparent; }
.dasar-heading__title {
    margin: 0; font-family: var(--dasar-display); font-size: 2.4rem; font-weight: 600; line-height: 1.08;
    letter-spacing: -.012em; color: var(--dasar-title); text-wrap: balance;
}
.dasar-heading__title em { position: relative; z-index: 0; display: inline-block; font-weight: 500; font-style: italic; color: var(--inv-accent); }
.dasar-heading__title em::after {
    content: ''; position: absolute; z-index: -1; left: -.1em; right: -.12em; bottom: .02em; height: .42em;
    border-radius: 3px 8px 4px 9px; background: var(--inv-shine); opacity: .5; rotate: -1.2deg;
}
.dasar-tone--deep .dasar-heading__eyebrow { color: var(--inv-shine); }
.dasar-tone--deep .dasar-heading__eyebrow::before { background: var(--inv-shine); }
.dasar-tone--deep .dasar-heading__title { color: #fff; }
.dasar-tone--deep .dasar-heading__title em { color: var(--inv-shine); }
.dasar-tone--deep .dasar-heading__title em::after { background: var(--inv-accent); opacity: .5; }
.dasar-tone--clay .dasar-heading__eyebrow { color: #fff; }
.dasar-tone--clay .dasar-heading__eyebrow::before { background: var(--inv-shine); }
.dasar-tone--clay .dasar-heading__title { color: #fff; }
.dasar-tone--clay .dasar-heading__title em { color: var(--inv-shine); }
.dasar-tone--clay .dasar-heading__title em::after { background: var(--inv-deep); opacity: .22; }

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

/* the line-drawn school (sections/_school) */
.dasar-school { display: block; overflow: visible; }
.dasar-school__line { stroke-width: 2.4; }
.dasar-school__roof { stroke-width: 3.2; }
.dasar-school__thin { stroke-width: 1.6; }
.dasar-school__flag { fill: var(--inv-accent); stroke: none; }
.dasar-school__clock { fill: var(--inv-shine); stroke: none; }
.dasar-school__leaf { fill: color-mix(in srgb, currentColor 22%, transparent); stroke: currentColor; stroke-width: 1.6; }

/* the instant print (sections/_print): white border, wider bottom margin with a handwritten caption,
   washi tape on the top corners; --print-w sets the size, --print-ratio the photo shape, --print-tilt the tilt */
.dasar-print {
    --print-w: 10rem; --print-ratio: 1 / 1; --print-pos: center 35%; --print-tilt: -3deg;
    position: relative; width: var(--print-w); margin: 0; padding: calc(var(--print-w) * .045) calc(var(--print-w) * .045) calc(var(--print-w) * .045);
    border-radius: 3px; background: #fffdf8; rotate: var(--print-tilt);
    box-shadow: 0 1px 1px rgb(0 0 0 / .08), 0 18px 28px -16px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.dasar-print__window { position: relative; overflow: hidden; aspect-ratio: var(--print-ratio); border-radius: 2px; background: var(--inv-deep); }
.dasar-print__window::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
.dasar-print__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--print-pos); }
.dasar-print__empty {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; padding: 12%;
    color: var(--inv-background);
    background:
        radial-gradient(70% 40% at 50% 85%, color-mix(in srgb, var(--inv-shine) 35%, transparent), transparent 72%),
        linear-gradient(180deg, var(--inv-deep), var(--inv-primary));
}
.dasar-print__school { width: 88%; }
.dasar-print__monogram { font-family: var(--dasar-display); font-weight: 600; font-style: italic; line-height: 1; white-space: nowrap; font-size: calc(var(--print-w) * .16); color: var(--inv-shine); }
.dasar-print__caption {
    margin: 0; padding: calc(var(--print-w) * .03) .2rem 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: clip;
    font-family: var(--dasar-hand); font-weight: 700; font-size: max(1rem, calc(var(--print-w) * .12)); line-height: 1.15; color: var(--inv-deep);
}
.dasar-print__tape {
    position: absolute; top: calc(var(--print-w) * -.05); width: calc(var(--print-w) * .34); height: calc(var(--print-w) * .1); min-height: 14px;
    background:
        repeating-linear-gradient(90deg, rgb(255 255 255 / .22) 0 4px, transparent 4px 9px),
        color-mix(in srgb, var(--inv-shine) 78%, transparent);
    clip-path: polygon(3% 0, 97% 6%, 100% 30%, 96% 55%, 100% 80%, 97% 100%, 2% 95%, 0 70%, 4% 45%, 0 18%);
    box-shadow: 0 1px 2px rgb(0 0 0 / .1);
}
.dasar-print__tape--left { left: calc(var(--print-w) * -.08); rotate: -38deg; }
.dasar-print__tape--right { right: calc(var(--print-w) * -.08); rotate: 38deg; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .22) 0 4px, transparent 4px 9px), color-mix(in srgb, var(--inv-accent) 62%, transparent); }

/* the "HALO" name tag: a tomato band over a white card, a thin tomato strip at the foot */
.dasar-tag {
    position: relative; overflow: hidden; margin: 0; border-radius: 12px; text-align: center; color: var(--inv-text); background: #fff;
    box-shadow: inset 0 -6px 0 var(--inv-accent), 0 0 0 1px rgb(0 0 0 / .04), 0 12px 22px -14px color-mix(in srgb, var(--inv-deep) 65%, transparent);
}
.dasar-tag__band {
    display: flex; align-items: baseline; justify-content: center; gap: .45rem; margin: 0; padding: .32rem .8rem .3rem;
    color: #fff; background: var(--inv-accent);
}
.dasar-tag__band strong { font-family: var(--dasar-display); font-size: 1.12rem; font-weight: 700; font-style: italic; line-height: 1.15; letter-spacing: .01em; }
.dasar-tag__band span { font-size: .6rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.dasar-tag__name {
    display: block; margin: 0; padding: .2rem .9rem .6rem; font-family: var(--dasar-hand); font-weight: 700; font-size: 1.7rem; line-height: 1.1;
    color: var(--inv-deep); overflow-wrap: anywhere;
}
.dasar-tag__sub { margin: -.35rem 0 0; padding: 0 .8rem .85rem; font-size: .66rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--dasar-clay); }

/* the round mustard sticker with the milestone ("20" big + "tahun") */
.dasar-sticker {
    display: grid; place-content: center; width: 4.6rem; height: 4.6rem; margin: 0; border-radius: 50%; text-align: center; rotate: 10deg;
    color: var(--inv-deep);
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, #fff 35%, var(--inv-shine)), var(--inv-shine) 60%);
    box-shadow: inset 0 0 0 3px var(--inv-shine), inset 0 0 0 4.5px color-mix(in srgb, var(--inv-deep) 55%, transparent), 0 10px 18px -10px rgb(0 0 0 / .55);
}
.dasar-sticker strong { font-family: var(--dasar-display); font-size: 1.85rem; font-weight: 700; line-height: .9; }
.dasar-sticker span { font-size: .56rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; }
.dasar-sticker--text span { padding: 0 .45rem; font-size: .62rem; letter-spacing: .06em; }

/* a torn notebook note held by a strip of tape (opening quote, story without photo) */
.dasar-note {
    position: relative; margin: 0; padding: 1.6rem 1.25rem 1.3rem 2.2rem; text-align: left; color: var(--inv-text);
    background: var(--dasar-margin), repeating-linear-gradient(180deg, transparent 0 25px, color-mix(in srgb, var(--inv-primary) 13%, transparent) 25px 26px) 0 14px, #fffdf7;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), 94% 100%, 86% calc(100% - 6px), 77% 100%, 66% calc(100% - 7px), 55% 100%, 44% calc(100% - 6px), 33% 100%, 22% calc(100% - 7px), 11% 100%, 0 calc(100% - 6px));
}
.dasar-note__tape {
    position: absolute; z-index: 1; top: -.65rem; left: 50%; width: 5.5rem; height: 1.35rem; margin-left: -2.75rem; rotate: -3deg;
    background: repeating-linear-gradient(90deg, rgb(255 255 255 / .25) 0 4px, transparent 4px 9px), color-mix(in srgb, var(--inv-shine) 80%, transparent);
    clip-path: polygon(3% 0, 97% 6%, 100% 30%, 96% 55%, 100% 80%, 97% 100%, 2% 95%, 0 70%, 4% 45%, 0 18%);
}

/* a paper ticket with a stub and two notches at the perforation (masked; its wrapper casts the shadow) */
.dasar-ticket {
    --stub: 4.2rem;
    display: grid; grid-template-columns: var(--stub) minmax(0, 1fr); min-height: 6rem; text-align: left; color: var(--inv-text); background: var(--dasar-paper);
    -webkit-mask: radial-gradient(circle 10px at var(--stub) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 10px at var(--stub) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
    mask: radial-gradient(circle 10px at var(--stub) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 10px at var(--stub) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
    border-radius: 12px;
}
.dasar-ticket__stub {
    display: grid; place-items: center; writing-mode: vertical-rl; rotate: 180deg;
    font-size: .74rem; font-weight: 800; letter-spacing: .32em; text-transform: uppercase; color: var(--inv-shine);
    background: linear-gradient(90deg, var(--inv-deep), var(--inv-primary));
}
.dasar-ticket__body {
    display: flex; flex-direction: column; justify-content: center; padding: 1rem 1.15rem 1rem 1.3rem;
    background: linear-gradient(var(--dasar-ring), var(--dasar-ring)) left / 0 100% no-repeat;
    border-left: 2px dashed color-mix(in srgb, var(--inv-primary) 35%, transparent);
}

/* ---------- 4. cover ---------- */
.dasar-cover {
    --now-w: min(72vw, 18.5rem, calc(36svh * 1.111));
    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; color: var(--inv-text);
    background:
        radial-gradient(80% 36% at 50% 26%, color-mix(in srgb, var(--inv-shine) 30%, transparent), transparent 72%),
        radial-gradient(60% 26% at 100% 0%, color-mix(in srgb, var(--inv-accent) 16%, transparent), transparent 72%),
        radial-gradient(70% 28% at 0% 100%, color-mix(in srgb, var(--inv-primary) 12%, transparent), transparent 75%),
        var(--dasar-margin), var(--dasar-rules), var(--inv-background);
    transition: opacity .9s ease;
}
.dasar-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); }

.dasar-cover__title {
    display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.5rem; max-width: 100%;
    font-size: .7rem; font-weight: 800; line-height: 1.25; letter-spacing: .22em; text-transform: uppercase; color: var(--dasar-clay);
}
.dasar-cover__title::before, .dasar-cover__title::after { content: ''; flex: none; width: 1.3rem; height: 3px; border-radius: 3px; background: var(--inv-accent); }

/* then & now: the big taped print (now), the small instant print at its lower-left (then), the sticker */
.dasar-cover__art { position: relative; display: flex; justify-content: center; width: 100%; margin-bottom: calc(var(--now-w) * .25); }
.dasar-print--now .dasar-print__tape { top: calc(var(--print-w) * -.03); width: calc(var(--print-w) * .24); height: calc(var(--print-w) * .075); }
.dasar-print--now .dasar-print__tape--left { left: calc(var(--print-w) * -.06); }
.dasar-print--now .dasar-print__tape--right { right: calc(var(--print-w) * -.06); }
.dasar-print--now { --print-w: var(--now-w); --print-ratio: 10 / 9; --print-pos: center 40%; --print-tilt: -1.8deg; }
.dasar-print--then {
    --print-w: calc(var(--now-w) * .4); --print-ratio: 1 / 1; --print-pos: center 30%; --print-tilt: -8deg;
    position: absolute; z-index: 2; bottom: calc(var(--now-w) * -.2); left: calc(50% - var(--now-w) * .64);
}
.dasar-cover__sticker { position: absolute; z-index: 3; top: -.9rem; right: calc(50% - var(--now-w) * .5 - 1.5rem); }

.dasar-cover__text { display: flex; flex-direction: column; align-items: center; width: 100%; }
.dasar-cover__name {
    margin: 0; max-width: 15ch; font-family: var(--dasar-display); font-size: clamp(1.8rem, 8.4vw, 2.35rem); font-weight: 650; line-height: 1.04;
    letter-spacing: -.015em; color: var(--dasar-title); text-wrap: balance; overflow-wrap: anywhere;
}
.dasar-cover__batch {
    margin: .5rem 0 0; padding: .24rem .8rem; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
    color: #fff; background: var(--dasar-clay);
}
.dasar-cover__date { margin: .5rem 0 0; font-size: .9rem; font-weight: 800; color: var(--inv-deep); }
.dasar-cover__quote {
    max-width: 31ch; margin: .25rem 0 0; font-family: var(--dasar-display); font-style: italic; font-weight: 500;
    font-size: .98rem; line-height: 1.36; color: var(--dasar-muted); text-wrap: balance;
}
.dasar-cover__guest { width: min(100%, 18.5rem); margin-top: .85rem; rotate: -1deg; }
.dasar-cover__guest-name { font-size: 1.6rem; }
.dasar-cover__open {
    margin-top: 1rem; min-height: 3rem; padding: .7rem 1.9rem; font-weight: 800; letter-spacing: .02em;
    background: var(--inv-deep); color: #fff;
    box-shadow: 0 0 0 3px var(--inv-background), 0 0 0 4.5px var(--inv-shine), 0 14px 24px -12px color-mix(in srgb, var(--inv-deep) 80%, transparent);
}

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

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

/* opening: the school drawing on a mustard horizon, the greeting big, the quote on a taped notebook note */
.dasar-opening { padding: 4rem 1.5rem 4.4rem; }
.dasar-opening__school-wrap { position: relative; width: min(15rem, 76%); margin: 0 auto 1.2rem; }
.dasar-opening__school-wrap::after {
    content: ''; position: absolute; left: -30%; right: -30%; bottom: 2px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--inv-shine) 25%, var(--inv-shine) 75%, transparent);
}
.dasar-opening__school { width: 100%; color: var(--inv-background); }
.dasar-opening__basmalah { margin: 0 0 .6rem; font-size: 1.85rem; }
.dasar-opening__greeting {
    margin: 0 auto .9rem; max-width: 16ch; font-family: var(--dasar-display); font-size: 2.3rem; font-style: italic; font-weight: 600;
    line-height: 1.1; color: #fff; text-wrap: balance;
}
.dasar-opening__message { margin: 0 auto; max-width: 31ch; color: var(--dasar-cream-muted); }
.dasar-opening__quote { max-width: 21.5rem; margin: 2.6rem auto 0; rotate: -1.2deg; filter: drop-shadow(0 18px 22px rgb(0 0 0 / .35)); }
.dasar-opening__quote blockquote { margin: 0; font-family: var(--dasar-display); font-style: italic; font-weight: 500; font-size: 1.12rem; line-height: 1.45; color: var(--dasar-title); }
.dasar-opening__quote figcaption {
    display: inline-block; margin-top: .8rem; padding: .22rem .7rem; border-radius: 6px; font-size: .68rem; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--dasar-clay);
}

/* organizer: the class-photo frame with a plaque and the sticker, a white card with a tomato edge */
.dasar-organizer__art { position: relative; display: flex; justify-content: center; padding: .4rem 0 0; }
/* a ruled notebook page tilted behind the frame */
.dasar-organizer__art::before {
    content: ''; position: absolute; z-index: -1; left: 50%; top: 4%; width: min(18rem, 84%); height: 90%; translate: -46% 0; rotate: 5deg;
    border-radius: 4px; background: var(--dasar-margin), repeating-linear-gradient(180deg, transparent 0 17px, color-mix(in srgb, var(--inv-primary) 14%, transparent) 17px 18px), #fffdf7;
    box-shadow: 0 14px 26px -18px color-mix(in srgb, var(--inv-deep) 60%, transparent);
}
.dasar-frame { position: relative; width: min(17rem, 80%); margin: 0; padding: 11px; border-radius: 5px; rotate: -1.5deg;
    background: linear-gradient(145deg, color-mix(in srgb, var(--inv-primary) 85%, #fff), var(--inv-deep) 55%, color-mix(in srgb, var(--inv-deep) 80%, #000));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 24px 34px -20px color-mix(in srgb, var(--inv-deep) 80%, transparent);
}
/* the fine mustard mat line inside the frame */
.dasar-frame::before { content: ''; position: absolute; inset: 6px; border-radius: 2px; pointer-events: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-shine) 75%, transparent); }
.dasar-frame__window { position: relative; overflow: hidden; aspect-ratio: 4 / 3.3; border: 5px solid #fffdf7; background: var(--inv-deep); }
.dasar-frame__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 34%; filter: sepia(.12) saturate(.95); }
.dasar-frame__empty {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; padding: 10% 16%;
    color: var(--inv-background); background: radial-gradient(70% 45% at 50% 85%, color-mix(in srgb, var(--inv-shine) 35%, transparent), transparent 72%), linear-gradient(180deg, var(--inv-primary), var(--inv-deep));
}
.dasar-frame__school { width: 100%; }
.dasar-frame__monogram { font-family: var(--dasar-display); font-style: italic; font-weight: 600; font-size: 1.9rem; line-height: 1; color: var(--inv-shine); }
/* the brass plaque on the frame's lower rail */
.dasar-frame__plaque {
    position: relative; display: block; width: max-content; max-width: 88%; margin: 7px auto -3px; padding: .2rem .8rem; border-radius: 3px;
    font-size: .64rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; line-height: 1.35; color: var(--inv-deep);
    background: linear-gradient(180deg, color-mix(in srgb, #fff 45%, var(--inv-shine)), var(--inv-shine) 55%, color-mix(in srgb, var(--inv-shine) 75%, var(--inv-deep)));
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12), 0 2px 3px rgb(0 0 0 / .35);
}
.dasar-organizer__sticker { position: absolute; z-index: 2; top: -.6rem; right: max(.2rem, calc(50% - 9.5rem)); }
.dasar-organizer__card {
    position: relative; z-index: 2; margin: 1.8rem .3rem 0 0; padding: 1.5rem 1.25rem 1.45rem; border-radius: 20px; background: #fff;
    box-shadow: 0 0 0 1.5px var(--dasar-ring), 10px 10px 0 0 color-mix(in srgb, var(--inv-accent) 32%, transparent);
}
.dasar-organizer__name {
    margin: 0; font-family: var(--dasar-display); font-weight: 650; font-size: 2.05rem; line-height: 1.06; letter-spacing: -.012em;
    color: var(--dasar-title); overflow-wrap: anywhere; text-wrap: balance;
}
.dasar-organizer__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: .85rem 0 0; }
.dasar-organizer__tag {
    padding: .26rem .75rem; border-radius: 999px; font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: #fff; background: var(--inv-primary);
}
.dasar-organizer__tag--soft { color: var(--inv-deep); background: var(--inv-shine); }
.dasar-organizer__tagline { margin: 1.05rem auto 0; max-width: 26ch; font-family: var(--dasar-display); font-style: italic; font-weight: 500; font-size: 1.2rem; line-height: 1.5; color: var(--dasar-title); }
.dasar-organizer__tagline span {
    -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .12em;
    background: linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--inv-shine) 50%, transparent) 58%, color-mix(in srgb, var(--inv-shine) 50%, transparent) 92%, transparent 92%);
}

/* party (tomato band): the theme ticket, the dress-code card with the shirt, the sticky note, the hashtag */
.dasar-party__ticket { max-width: 21rem; margin: 0 auto; rotate: -1.5deg; filter: drop-shadow(0 16px 18px rgb(0 0 0 / .3)); }
.dasar-party__label { display: block; font-size: .64rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--dasar-clay); }
.dasar-party__theme { margin: .15rem 0 0; font-family: var(--dasar-display); font-weight: 650; font-size: 1.85rem; line-height: 1.08; color: var(--dasar-title); overflow-wrap: anywhere; }
.dasar-party__dress {
    display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); align-items: center; gap: 1rem; max-width: 21rem; margin: 1.5rem auto 0; padding: 1.1rem 1.15rem;
    border-radius: 18px; text-align: left; color: var(--inv-text); background: #fff; box-shadow: 0 18px 26px -18px rgb(0 0 0 / .45);
}
.dasar-party__shirt { display: block; width: 100%; overflow: visible; }
.dasar-party__shirt-body { fill: var(--dasar-pick, #fff); stroke: var(--inv-deep); stroke-width: 2; stroke-linejoin: round; transition: fill .35s ease; }
.dasar-party__shirt-line { fill: none; stroke: var(--inv-deep); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.dasar-party__dress-name { margin: .1rem 0 0; font-family: var(--dasar-display); font-weight: 600; font-size: 1.22rem; line-height: 1.2; color: var(--dasar-title); }
.dasar-swatches { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.dasar-swatch {
    width: 1.9rem; height: 1.9rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--dasar-swatch);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18), 0 0 0 2px #fff, 0 0 0 3px var(--dasar-ring);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease;
}
.dasar-swatch[aria-pressed="true"] { transform: scale(1.15); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18), 0 0 0 2px #fff, 0 0 0 4px var(--inv-accent); }
.dasar-swatch:focus-visible { outline: 2px solid var(--inv-primary); outline-offset: 4px; }
.dasar-party__hint { margin: .5rem 0 0; font-size: .74rem; color: var(--dasar-muted); }
.dasar-party__hint--light { margin: .55rem auto 0 !important; color: rgb(255 255 255 / .85); }
.dasar-party__note {
    position: relative; max-width: 19rem !important; margin: 2.2rem auto 0 !important; padding: 1.35rem 1.2rem 1.1rem; rotate: 1.6deg; text-align: left;
    font-family: var(--dasar-hand); font-weight: 600; font-size: 1.42rem; line-height: 1.2; color: var(--inv-deep);
    background: linear-gradient(180deg, color-mix(in srgb, #fff 18%, var(--inv-shine)), var(--inv-shine));
    box-shadow: 0 16px 20px -14px rgb(0 0 0 / .5);
}
.dasar-party__hashtag {
    display: inline-flex; align-items: center; gap: .6rem; max-width: 100%; margin-top: 1.9rem; padding: .35rem .4rem .35rem 1rem; border-radius: 999px;
    background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .45);
}
.dasar-party__hashtag-text { min-width: 0; font-family: var(--dasar-display); font-style: italic; font-weight: 600; font-size: 1.15rem; color: #fff; overflow-wrap: anywhere; }
.dasar-party__copy {
    flex: none; min-height: 2.2rem; padding: .3rem .9rem; border: 0; border-radius: 999px; cursor: pointer;
    font: 800 .76rem/1 var(--dasar-sans); color: var(--inv-deep); background: var(--inv-shine);
}

/* events: a print on top, then the ticket — a deep date stub, a perforated line with notches, icon rows */
.dasar-event + .dasar-event { margin-top: 2.8rem; }
.dasar-event__media { position: relative; z-index: 2; width: 92%; margin: 0 auto -1.1rem; padding: 6px; background: #fffdf8; rotate: -1.6deg; box-shadow: 0 16px 24px -16px color-mix(in srgb, var(--inv-deep) 70%, transparent); }
.dasar-event--flip .dasar-event__media { rotate: 1.6deg; }
.dasar-event__photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 55%; }
.dasar-event__ticket {
    position: relative; margin: 0 10px 0 0; padding: 0 0 1.3rem; border-radius: 18px; background: #fff; text-align: left;
    box-shadow: 0 0 0 1.5px var(--dasar-ring), 10px 10px 0 0 var(--inv-soft);
}
.dasar-event--flip .dasar-event__ticket { margin: 0 0 0 10px; box-shadow: 0 0 0 1.5px var(--dasar-ring), -10px 10px 0 0 color-mix(in srgb, var(--inv-accent) 30%, transparent); }
.dasar-event__media + .dasar-event__ticket { padding-top: 1.1rem; }
.dasar-event__top { display: flex; align-items: stretch; gap: 1rem; padding: 1.15rem 1.15rem 0; }
.dasar-event--flip .dasar-event__top { flex-direction: row-reverse; text-align: right; }
.dasar-event__date {
    display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 4.6rem; margin: 0; padding: .75rem .2rem .7rem;
    border-radius: 12px; color: #fff; background: linear-gradient(180deg, var(--inv-primary), var(--inv-deep));
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-shine) 45%, transparent);
}
.dasar-event__weekday { font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-shine); }
.dasar-event__day { font-family: var(--dasar-display); font-weight: 650; font-size: 2.45rem; line-height: 1; }
.dasar-event__month { margin-top: .15rem; font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dasar-event--flip .dasar-event__date { background: linear-gradient(180deg, color-mix(in srgb, var(--dasar-clay) 78%, #fff), var(--dasar-clay)); }
.dasar-event--flip .dasar-event__weekday { color: #fff; }
.dasar-event__head { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.dasar-event__no { font-size: .62rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--dasar-clay); }
.dasar-event__name { margin: .1rem 0 0; font-family: var(--dasar-display); font-weight: 650; font-size: 1.5rem; line-height: 1.12; color: var(--dasar-title); }
.dasar-event__full { margin: .2rem 0 0; font-size: .8rem; font-weight: 700; color: var(--dasar-muted); }
/* the perforation: a dashed line with two notches cut in the paper colour */
.dasar-event__rows { position: relative; display: grid; gap: .75rem; margin: 1.15rem 0 0; padding: 1.15rem 1.15rem 0; list-style: none; font-size: .9rem; border-top: 2px dashed color-mix(in srgb, var(--inv-primary) 22%, transparent); }
.dasar-event__rows::before, .dasar-event__rows::after {
    content: ''; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--inv-background);
    box-shadow: inset 0 0 0 1.5px var(--dasar-ring);
}
.dasar-event__rows::before { left: -10px; clip-path: inset(0 0 0 50%); }
.dasar-event__rows::after { right: -10px; clip-path: inset(0 50% 0 0); }
.dasar-event__rows li { display: flex; align-items: flex-start; gap: .7rem; }
.dasar-event__rows .dasar-icon { width: 2.1rem; height: 2.1rem; padding: .45rem; border-radius: 50%; color: var(--inv-deep); background: color-mix(in srgb, var(--inv-shine) 30%, #fff); }
.dasar-event__rows li > span { padding-top: .3rem; }
.dasar-event__venue { display: block; font-weight: 800; }
.dasar-event__address { display: block; font-size: .85rem; color: var(--dasar-muted); }
.dasar-event .inv-maps { margin: 1.15rem 1.15rem 0; text-align: center; }
.dasar-event .inv-maps .inv-button { width: 100%; font-weight: 700; }
.dasar-event .inv-maps__frame { height: 190px; border-radius: 14px; }

/* countdown: the desk calendar torn to the day, the countdown as paper cards with a tomato top edge */
.dasar-calendar { position: relative; width: 12.5rem; margin: 0 auto 2.6rem; }
.dasar-calendar__page {
    position: relative; margin: 0; padding: 0 0 1rem; border-radius: 6px 6px 10px 10px; rotate: -2deg; text-align: center; color: var(--inv-text);
    background: linear-gradient(180deg, #fffdf8, var(--dasar-paper));
    box-shadow: 0 2px 0 color-mix(in srgb, var(--inv-soft) 80%, #fff), 0 4px 0 color-mix(in srgb, var(--inv-soft) 90%, var(--inv-deep)), 0 26px 34px -20px rgb(0 0 0 / .65);
}
/* the two binder rings over the band */
.dasar-calendar__rings { position: absolute; z-index: 2; top: -.7rem; left: 0; right: 0; height: 1.5rem; pointer-events: none; }
.dasar-calendar__rings::before, .dasar-calendar__rings::after {
    content: ''; position: absolute; top: 0; width: .6rem; height: 1.5rem; border-radius: 999px;
    background: linear-gradient(90deg, #6b7280, #e5e7eb 45%, #6b7280); box-shadow: 0 2px 2px rgb(0 0 0 / .35);
}
.dasar-calendar__rings::before { left: 26%; }
.dasar-calendar__rings::after { right: 26%; }
/* the stubs of the pages already torn off, above the page */
.dasar-calendar__torn {
    position: absolute; left: 4%; right: 4%; top: -.5rem; height: .9rem; rotate: -2deg; background: color-mix(in srgb, #fff 80%, var(--inv-soft));
    clip-path: polygon(0 0, 100% 0, 100% 55%, 95% 100%, 90% 50%, 84% 90%, 78% 45%, 71% 100%, 65% 55%, 58% 85%, 52% 40%, 45% 95%, 39% 50%, 32% 90%, 26% 45%, 19% 100%, 13% 55%, 7% 90%, 0 50%);
    opacity: .85;
}
.dasar-calendar__month {
    margin: 0 0 .5rem; padding: .95rem .5rem .45rem; border-radius: 6px 6px 0 0; font-size: .74rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
    color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 90%, #fff), var(--dasar-clay));
}
.dasar-calendar__weekday { margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--dasar-clay); }
.dasar-calendar__day { margin: -.1rem 0 0; font-family: var(--dasar-display); font-weight: 700; font-size: 5.4rem; line-height: .95; letter-spacing: -.03em; color: var(--dasar-title); }
.dasar-calendar__time { margin: .2rem 0 0; font-size: .82rem; font-weight: 700; color: var(--dasar-muted); }
.dasar-calendar__note {
    position: absolute; z-index: 3; right: -3.4rem; bottom: 1.4rem; rotate: -10deg; white-space: nowrap;
    font-family: var(--dasar-hand); font-weight: 700; font-size: 1.55rem; line-height: 1; color: var(--inv-shine);
}
.dasar-calendar__arrow { position: absolute; left: -1.9rem; top: -1.7rem; width: 2.2rem; height: 1.9rem; fill: none; stroke: var(--inv-shine); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; rotate: 10deg; }
.dasar-countdown .inv-countdown { gap: clamp(.45rem, 2.4vw, .75rem); }
.dasar-countdown .inv-countdown__item {
    display: grid; place-content: center; width: clamp(4rem, 18.5vw, 4.6rem); min-width: 0; aspect-ratio: 4 / 4.4; padding: .4rem 0 .2rem;
    border-radius: 6px 6px 12px 12px; color: var(--inv-text); background: var(--dasar-paper);
    box-shadow: inset 0 5px 0 var(--inv-accent), 0 16px 24px -12px rgb(0 0 0 / .55);
}
.dasar-countdown .inv-countdown__item:nth-child(even) { rotate: 1.5deg; }
.dasar-countdown .inv-countdown__item:nth-child(odd) { rotate: -1.5deg; }
.dasar-countdown .inv-countdown__value { font-variant-numeric: lining-nums tabular-nums; font-family: var(--dasar-display); font-weight: 650; font-size: 1.85rem; line-height: 1.05; color: var(--dasar-title); }
.dasar-countdown .inv-countdown__label { margin-top: .1rem; font-size: .55rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dasar-clay); opacity: 1; }
.dasar-countdown .inv-countdown__done { font-family: var(--dasar-display); font-size: 1.3rem; font-style: italic; color: var(--inv-shine); }
.dasar-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 2rem; }
.dasar-countdown .inv-countdown__actions .inv-button {
    width: min(100%, 17rem); min-height: 2.75rem; padding: .6rem 1rem; font-size: .84rem; font-weight: 700;
    color: var(--inv-background); background: color-mix(in srgb, var(--inv-background) 10%, transparent);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-background) 55%, transparent);
}
.dasar-countdown .inv-countdown__actions .inv-button:first-child { color: var(--inv-deep); background: var(--inv-shine); box-shadow: none; }

/* rundown: a class timetable on a white sheet held by a mustard paper clip */
.dasar-timetable {
    position: relative; max-width: 25rem; margin: 0 auto; border-radius: 6px; overflow: visible; text-align: left; background: #fffdf8;
    box-shadow: 0 0 0 1px var(--dasar-ring), 8px 8px 0 0 color-mix(in srgb, var(--inv-primary) 85%, transparent), var(--dasar-drop);
}
.dasar-timetable__clip {
    position: absolute; z-index: 2; top: -1.15rem; right: 1.8rem; width: 1.05rem; height: 2.8rem; rotate: 6deg;
    border: 3px solid var(--inv-gold); border-radius: 999px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--inv-shine) 60%, transparent);
}
.dasar-timetable__clip::after { content: ''; position: absolute; left: 2px; right: 2px; top: .5rem; bottom: .55rem; border: 2.5px solid var(--inv-gold); border-top: 0; border-radius: 0 0 999px 999px; }
.dasar-timetable__head {
    display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); margin: 0; border-radius: 6px 6px 0 0;
    font-size: .64rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #fff; background: var(--inv-deep);
}
.dasar-timetable__head span { padding: .7rem .9rem .6rem; }
.dasar-timetable__head span:first-child { text-align: center; color: var(--inv-shine); }
.dasar-timetable__list { margin: 0; padding: 0; list-style: none; }
.dasar-timetable__row { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); border-bottom: 1px solid color-mix(in srgb, var(--inv-primary) 13%, transparent); }
.dasar-timetable__row:nth-child(even) { background: color-mix(in srgb, var(--inv-soft) 42%, transparent); }
.dasar-timetable__row:last-child { border-bottom: 0; }
.dasar-timetable__time {
    padding: .8rem .4rem; text-align: center; font-size: .9rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--dasar-title);
    border-right: 2px solid color-mix(in srgb, var(--inv-accent) 55%, transparent);
}
.dasar-timetable__body { padding: .72rem .95rem .75rem; }
.dasar-timetable__body h3 { margin: 0; font-size: .98rem; font-weight: 700; line-height: 1.35; color: var(--inv-text); }
.dasar-timetable__body p { margin: .1rem 0 0; font-size: .84rem; line-height: 1.45; color: var(--dasar-muted); }

/* story: a stack of photographs on the deep band, prints beside the text, alternating sides and tilts */
.dasar-story__list { display: grid; gap: 2.6rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.dasar-story__item { display: grid; grid-template-columns: 44% minmax(0, 1fr); align-items: center; gap: 1.2rem; }
.dasar-story__item--flip { grid-template-columns: minmax(0, 1fr) 44%; }
.dasar-story__item--flip .dasar-story__print { order: 2; --print-tilt: 4deg; }
.dasar-story__print { --print-w: 100%; --print-ratio: 4 / 5; --print-tilt: -4deg; width: 100%; padding: 7px 7px 4px; }
.dasar-story__print .dasar-print__caption { font-size: 1.35rem; padding-top: .15rem; }
.dasar-story__print .dasar-print__tape { top: -9px; width: 46%; height: 17px; left: 27%; right: auto; rotate: -4deg; }
.dasar-story__print .dasar-print__tape--right { display: none; }
.dasar-story__body h3 { margin: 0; font-family: var(--dasar-display); font-weight: 600; font-size: 1.4rem; line-height: 1.15; color: #fff; }
.dasar-story__body p { margin: .45rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--dasar-cream-muted); }
/* a moment without a photo: a torn notebook note across the full width, the time on a mustard tab */
.dasar-story__item--text {
    position: relative; display: block; padding: 1.55rem 1.2rem 1.4rem 2.2rem; rotate: -1deg; color: var(--inv-text);
    background: var(--dasar-margin), repeating-linear-gradient(180deg, transparent 0 25px, color-mix(in srgb, var(--inv-primary) 13%, transparent) 25px 26px) 0 14px, #fffdf7;
    border-radius: 3px; box-shadow: 0 20px 26px -18px rgb(0 0 0 / .6);
}
.dasar-story__item--text .dasar-story__body h3 { color: var(--dasar-title); }
.dasar-story__item--text .dasar-story__body p { color: var(--dasar-muted); }
.dasar-story__when {
    position: absolute; top: -.85rem; left: 1.2rem; padding: .1rem .75rem .15rem; rotate: -3deg; border-radius: 4px;
    font-family: var(--dasar-hand); font-weight: 700; font-size: 1.3rem; line-height: 1.2; color: var(--inv-deep); background: var(--inv-shine);
    box-shadow: 0 6px 10px -6px rgb(0 0 0 / .5);
}

/* gallery: every photo a print with a white border and a slight tilt; the first one tall over two rows */
.dasar-gallery .inv-gallery { gap: .9rem .8rem; padding: .3rem .2rem; }
.dasar-gallery .inv-gallery__item {
    border: 6px solid #fffdf8; border-bottom-width: 14px; border-radius: 3px; rotate: -1.6deg;
    box-shadow: 0 0 0 1px rgb(0 0 0 / .05), 0 14px 22px -14px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.dasar-gallery .inv-gallery__item:nth-child(even) { rotate: 1.8deg; }
.dasar-gallery .inv-gallery__item:nth-child(3n) { rotate: -.6deg; }
.dasar-gallery .inv-gallery__item:first-child { grid-row: span 2; aspect-ratio: auto; rotate: -2.2deg; }

/* live streaming: an old television set */
.dasar-stream { padding-top: 5rem; }
.dasar-stream__tv {
    position: relative; max-width: 22rem; margin: 0 auto; padding: 12px 12px 10px; border-radius: 28px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--inv-primary) 80%, #fff), var(--inv-deep) 60%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 10px 10px 0 0 color-mix(in srgb, var(--inv-accent) 45%, transparent), var(--dasar-drop);
}
.dasar-stream__antenna { position: absolute; left: 50%; bottom: calc(100% - 4px); width: 5.5rem; height: 2.4rem; translate: -50% 0; fill: none; stroke: var(--inv-deep); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dasar-stream__screen {
    display: flex; flex-direction: column; align-items: center; padding: 1.5rem 1.2rem 1.4rem; border-radius: 22px / 26px; color: var(--inv-background);
    background: radial-gradient(90% 80% at 30% 20%, color-mix(in srgb, #fff 16%, transparent), transparent 65%), linear-gradient(160deg, var(--inv-primary), color-mix(in srgb, var(--inv-deep) 85%, #000));
    box-shadow: inset 0 0 0 2px rgb(0 0 0 / .25), inset 0 0 24px rgb(0 0 0 / .35);
}
.dasar-stream__icon { display: grid; place-items: center; width: 3.3rem; height: 3.3rem; margin-bottom: .6rem; border-radius: 50%; color: #fff; background: var(--inv-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--inv-shine) 55%, transparent); }
.dasar-stream__icon .dasar-icon { width: 1.7rem; height: 1.7rem; }
.dasar-stream__title { margin: 0 0 .25rem; font-family: var(--dasar-display); font-weight: 600; font-size: 1.7rem; line-height: 1.1; color: #fff; }
.dasar-stream__screen p { margin: 0; max-width: 28ch; font-size: .86rem; color: var(--dasar-cream-muted); }
.dasar-stream__screen .dasar-stream__note { margin-top: .35rem; font-weight: 700; color: var(--inv-shine); }
.dasar-stream__panel { display: flex; align-items: center; gap: .7rem; padding: .7rem .5rem .25rem; }
.dasar-stream__knob { width: .95rem; height: .95rem; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff8e0, var(--inv-shine) 50%, color-mix(in srgb, var(--inv-shine) 55%, var(--inv-deep))); }
.dasar-stream__button { flex: 1; min-height: 2.75rem; color: var(--inv-deep) !important; background: var(--inv-shine) !important; font-weight: 800; }

/* RSVP: a paper ticket — a tomato head, notches at the perforation, the form on warm paper */
.dasar-rsvp__wrap { max-width: 25rem; margin: 0 auto; filter: drop-shadow(0 22px 26px rgb(0 0 0 / .45)); }
.dasar-rsvp__ticket {
    --rsvp-cut: 4.9rem;
    border-radius: 18px; overflow: hidden; background: var(--dasar-paper);
    -webkit-mask: radial-gradient(circle 12px at 0 var(--rsvp-cut), #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% var(--rsvp-cut), #0000 97%, #000) right / 51% 100% no-repeat;
    mask: radial-gradient(circle 12px at 0 var(--rsvp-cut), #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% var(--rsvp-cut), #0000 97%, #000) right / 51% 100% no-repeat;
}
.dasar-rsvp__head {
    display: flex; flex-direction: column; justify-content: center; height: var(--rsvp-cut); padding: 0 1.2rem; color: #fff;
    background: radial-gradient(80% 140% at 100% 0%, color-mix(in srgb, var(--inv-shine) 35%, transparent), transparent 60%), linear-gradient(120deg, var(--dasar-clay), color-mix(in srgb, var(--inv-accent) 85%, #fff));
}
.dasar-rsvp__label { margin: 0; font-size: .64rem; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; color: color-mix(in srgb, #fff 85%, var(--inv-shine)); }
.dasar-rsvp__for { margin: .1rem 0 0; font-family: var(--dasar-display); font-weight: 650; font-size: 1.4rem; line-height: 1.15; overflow-wrap: anywhere; }
.dasar-rsvp__card { position: relative; padding: 1.5rem 1.15rem 1.4rem; color: var(--inv-text); border-top: 2px dashed color-mix(in srgb, var(--inv-primary) 28%, transparent); }
.dasar-rsvp__intro { margin: 0 auto 1.1rem; max-width: 30ch; font-size: .9rem; color: var(--dasar-muted); }
.dasar-rsvp__sent { margin-bottom: 1rem; }
.dasar-rsvp__stamp {
    display: inline-block; margin: .3rem 0 .7rem; padding: .3rem 1rem .35rem; rotate: -7deg; border-radius: 8px;
    font-size: 1.25rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dasar-clay);
    box-shadow: inset 0 0 0 3px var(--dasar-clay), inset 0 0 0 5px var(--dasar-paper), inset 0 0 0 6.5px var(--dasar-clay);
}
html.inv-anim .dasar-rsvp__sent .dasar-rsvp__stamp { animation: dasar-stamp .55s cubic-bezier(.3, 1.4, .6, 1) both; }
.dasar-rsvp__line { margin: 0; font-size: .9rem; color: var(--dasar-muted); }
.dasar-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .84rem; font-weight: 700; color: var(--dasar-clay); }

/* gift ("Iuran & donasi"): airmail envelopes, two per row; the address card below */
.dasar-gift__intro { color: var(--dasar-cream-muted); }
.dasar-gift__treasurer { display: inline-flex !important; align-items: center; gap: .5rem; padding: .35rem .9rem; border-radius: 999px; font-size: .84rem; font-weight: 700; color: var(--inv-deep); background: var(--inv-shine); }
.dasar-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1.4rem; }
.dasar-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dasar-gift .inv-gift__account,
.dasar-gift .inv-gift__address {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; margin: 0;
    padding: 1.15rem .75rem 1rem; color: var(--inv-text); background: var(--dasar-paper);
    border: 6px solid transparent; border-radius: 4px;
    border-image: repeating-linear-gradient(-45deg, var(--inv-accent) 0 8px, #fffdf8 8px 13px, var(--inv-primary) 13px 21px, #fffdf8 21px 26px) 6;
    box-shadow: 0 18px 28px -20px rgb(0 0 0 / .65);
}
.dasar-gift .inv-gift__account p, .dasar-gift .inv-gift__address p { margin: 0; }
.dasar-gift .inv-gift__bank { font-weight: 800; font-size: .85rem; color: var(--dasar-title); }
.dasar-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .4rem; background: #fff; }
.dasar-gift .inv-gift__logo img { max-width: 5rem; }
.dasar-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);
}
.dasar-gift .inv-gift__holder { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dasar-muted); overflow-wrap: anywhere; }
.dasar-gift .inv-button { margin-top: .35rem; min-height: 2.25rem; padding: .35rem .9rem; font-size: .74rem; font-weight: 700; }
.dasar-gift .inv-gift__address { margin-top: .8rem; padding-top: 1.1rem; font-size: .875rem; }
.dasar-gift .inv-gift__address .inv-gift__holder { font-size: .72rem; }

/* co-hosts ("Panitia"): "HALO" name tags, two per row, tilted in turn */
.dasar-cohosts__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .8rem; max-width: 24rem; margin: 0 auto; padding: 0; list-style: none; }
.dasar-cohosts__tag { rotate: -1.6deg; }
.dasar-cohosts__tag:nth-child(even) { rotate: 1.8deg; }
.dasar-cohosts__tag:nth-child(4n + 3) { rotate: .8deg; }
.dasar-cohosts__tag:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .4rem); }
.dasar-cohosts__tag .dasar-tag__band strong { font-family: var(--dasar-sans); font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.dasar-cohosts__tag .dasar-tag__name { padding: .35rem .6rem .7rem; font-size: 1.45rem; }

/* contacts: pill rows with the initial on a deep badge and a WhatsApp button */
.dasar-contacts__list { display: grid; gap: .75rem; max-width: 24rem; margin: 0 auto; }
.dasar-contact {
    display: grid; grid-template-columns: 2.9rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .6rem .6rem .6rem .65rem; border-radius: 18px;
    color: var(--inv-text); background: var(--dasar-paper); text-align: left; box-shadow: 6px 6px 0 0 var(--inv-shine), 0 18px 26px -18px rgb(0 0 0 / .6);
}
.dasar-contact__avatar {
    display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%;
    font-family: var(--dasar-display); font-weight: 650; font-size: 1.35rem; color: #fff; background: var(--inv-deep);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--inv-shine);
}
.dasar-contact p { margin: 0; }
.dasar-contact__name { font-weight: 800; font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; }
.dasar-contact__role { font-size: .78rem; color: var(--dasar-muted); }
.dasar-contact__phone { font-size: .85rem; }
.dasar-contact__button { min-height: 2.5rem; padding: .45rem .95rem; font-size: .8rem; font-weight: 700; }
.dasar-contact__button .dasar-icon { width: 1.05rem; height: 1.05rem; }

/* health protocol: white chips with a tomato check */
.dasar-protocol__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.dasar-protocol__list li {
    display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border-radius: 999px; font-size: .84rem; font-weight: 600;
    background: #fff; box-shadow: inset 0 0 0 1px var(--dasar-ring);
}
.dasar-protocol__list .dasar-icon { width: 1rem; height: 1rem; color: var(--inv-accent); }
.dasar-protocol__note { font-size: .88rem; color: var(--dasar-muted); }

/* vendors: a white card of rows split by dashed lines */
.dasar-vendors { padding-bottom: 4.6rem; }
.dasar-vendors__list { max-width: 24rem; margin: 0 auto; padding: .3rem 1.15rem; list-style: none; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1.5px var(--dasar-ring), var(--dasar-drop); }
.dasar-vendor { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem 0; text-align: left; border-bottom: 1.5px dashed var(--dasar-ring); }
.dasar-vendor:last-child { border-bottom: 0; }
.dasar-vendor__text { display: flex; flex-direction: column; min-width: 0; }
.dasar-vendor__role { font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--dasar-clay); }
.dasar-vendor__name { font-family: var(--dasar-display); font-weight: 600; font-size: 1.15rem; line-height: 1.25; color: var(--inv-text); overflow-wrap: anywhere; }
.dasar-vendor__link {
    display: inline-flex; align-items: center; gap: .3rem; flex: none; min-height: 2.2rem; padding: .3rem .7rem; border-radius: 999px;
    font-size: .74rem; font-weight: 700; text-decoration: none; color: var(--inv-deep); background: color-mix(in srgb, var(--inv-shine) 35%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-gold) 40%, transparent);
}
.dasar-vendor__link .dasar-icon { width: .95rem; height: .95rem; }

/* closing: the full photo fading into the deep colour, the school, the thanks and a name tag on a horizon */
.dasar-closing { padding: 3.2rem 1.6rem 2.4rem; }
.dasar-closing--photo { padding-top: 0; }
.dasar-closing__photo { position: relative; z-index: -1; height: min(100vw, 27rem); margin: 0 -1.6rem; 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%); }
.dasar-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 30%; --inv-parallax: 30px; }
.dasar-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 36%, color-mix(in srgb, var(--inv-deep) 55%, transparent) 64%, var(--inv-deep) 97%);
}
.dasar-closing__body { position: relative; }
.dasar-closing--photo .dasar-closing__body { margin-top: -5rem; }
.dasar-closing__school { width: 5.8rem; margin: 0 auto .6rem; color: var(--inv-shine); }
.dasar-closing__eyebrow { margin: 0 0 .3rem; font-size: .7rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-shine); }
.dasar-closing__title { margin: 0 0 .7rem; font-family: var(--dasar-display); font-weight: 650; font-size: clamp(1.9rem, 8.5vw, 2.4rem); line-height: 1.05; color: #fff; }
.dasar-closing__title em { font-style: italic; font-weight: 500; color: var(--inv-shine); }
.dasar-closing__message { margin: 0 auto; max-width: 32ch; font-size: .93rem; line-height: 1.6; color: var(--dasar-cream-muted); }
.dasar-closing__salam { margin: .8rem auto 0; max-width: 24ch; font-family: var(--dasar-display); font-size: 1.12rem; font-style: italic; line-height: 1.35; color: var(--inv-shine); }
.dasar-closing__signature { margin: .4rem auto 0; max-width: 30ch; font-size: .86rem; color: var(--dasar-cream-muted); }
/* the name tag on a mustard horizon line across the section */
.dasar-closing__line { position: relative; margin-top: 1.4rem; }
.dasar-closing__line::before {
    content: ''; position: absolute; z-index: -1; top: 50%; left: -2rem; right: -2rem; height: 2px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--inv-shine) 75%, transparent) 20%, color-mix(in srgb, var(--inv-shine) 75%, transparent) 80%, transparent);
}
.dasar-closing__tag { width: min(100%, 15rem); margin: 0 auto; rotate: -2deg; }
.dasar-closing__tag .dasar-tag__name { font-size: 1.35rem; }

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

/* the three answers as big cards with icons (the radio dot is hidden but still focusable) */
.dasar-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.dasar-rsvp .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.dasar-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: 14px; 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-primary) 22%, transparent);
    transition: background-color .25s ease, color .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.dasar-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* icon: a tinted circle (::before) with a check, a cross or a question mark on it (::after, a mask in the text colour) */
.dasar-rsvp .inv-form__choices label::before {
    content: ''; width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--inv-shine) 35%, #fff);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease;
}
.dasar-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-primary); pointer-events: none;
    -webkit-mask: var(--dasar-choice-icon) center / contain no-repeat; mask: var(--dasar-choice-icon) center / contain no-repeat;
}
.dasar-rsvp .inv-form__choices label:nth-of-type(1) {
    --dasar-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");
}
.dasar-rsvp .inv-form__choices label:nth-of-type(2) {
    --dasar-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");
}
.dasar-rsvp .inv-form__choices label:nth-of-type(3) {
    --dasar-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");
}
.dasar-rsvp .inv-form__choices label:has(input:checked) {
    color: #fff; background: var(--inv-primary); transform: translateY(-3px);
    box-shadow: 0 0 0 3px var(--inv-shine), 0 12px 24px -12px color-mix(in srgb, var(--inv-primary) 80%, transparent);
}
.dasar-rsvp .inv-form__choices label:has(input:checked)::before { background-color: rgb(255 255 255 / .2); transform: scale(1.1); }
.dasar-rsvp .inv-form__choices label:has(input:checked)::after { color: #fff; }
.dasar-rsvp .inv-form__choices label:has(input:focus-visible) { outline: 2px solid var(--inv-accent); outline-offset: 3px; }

/* wishes: "buku kenangan" — the form on a ruled notebook page, the wishes as notes in a scroll box */
.dasar-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.dasar-wishes .inv-form {
    margin-right: 8px; padding: 1.4rem 1.1rem 1.3rem 2.1rem; border-radius: 6px;
    background: var(--dasar-margin), repeating-linear-gradient(180deg, transparent 0 27px, color-mix(in srgb, var(--inv-primary) 10%, transparent) 27px 28px), #fffdf7;
    box-shadow: 8px 8px 0 0 var(--inv-primary), 0 0 0 1px var(--dasar-ring);
}
.dasar-wishes .inv-wishes__list { margin-top: 1.5rem; }
.dasar-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .55rem; border-radius: 16px; background: color-mix(in srgb, #fff 45%, transparent); box-shadow: inset 0 0 0 1px var(--dasar-ring);
}
.dasar-wishes .inv-wish { padding: .75rem .9rem; border-radius: 4px 12px 12px 4px; background: #fff; text-align: left; box-shadow: 0 2px 10px rgb(0 0 0 / .05); border-left: 4px solid var(--inv-accent); }
.dasar-wishes .inv-wish__name { font-weight: 800; color: var(--dasar-title); }
.dasar-wishes .inv-wish__message { font-size: .88rem; line-height: 1.5; }
.dasar-wishes .inv-wish__time { font-size: .72rem; color: var(--dasar-muted); opacity: 1; }

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

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

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

/* short phones: the prints and type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .dasar-cover { --now-w: min(68vw, 17rem, calc(33svh * 1.111)); padding-top: 1.3rem; padding-bottom: 1.4rem; }
    .dasar-cover__title { margin-bottom: .85rem; }
    .dasar-cover__name { font-size: clamp(1.65rem, 7.6vw, 2.1rem); }
    .dasar-cover__quote { font-size: .92rem; }
    .dasar-cover__guest { margin-top: .7rem; }
    .dasar-cover__open { margin-top: .85rem; }
}
@media (max-height: 660px) {
    .dasar-cover { --now-w: min(62vw, calc(30svh * 1.111)); padding-top: 1.1rem; padding-bottom: 1.2rem; }
    .dasar-cover__title { margin-bottom: .75rem; font-size: .64rem; }
    .dasar-cover .dasar-sticker { width: 3.9rem; height: 3.9rem; }
    .dasar-cover .dasar-sticker strong { font-size: 1.5rem; }
    .dasar-cover__name { font-size: clamp(1.5rem, 7vw, 1.9rem); }
    .dasar-cover__batch { margin-top: .4rem; }
    .dasar-cover__date { margin-top: .35rem; font-size: .84rem; }
    .dasar-cover__quote { font-size: .84rem; line-height: 1.3; }
    .dasar-cover__guest { margin-top: .6rem; }
    .dasar-cover__guest .dasar-tag__band { padding: .22rem .7rem; }
    .dasar-cover__guest-name { padding-bottom: .5rem; font-size: 1.42rem; }
    .dasar-cover__open { min-height: 2.75rem; margin-top: .75rem; padding: .6rem 1.6rem; }
}
/* very short screens (in-app browsers): smaller prints and quote, so everything fits */
@media (max-height: 600px) {
    .dasar-cover { --now-w: min(56vw, calc(27svh * 1.111)); padding-top: .9rem; }
    .dasar-cover__title { margin-bottom: 1.1rem; }
    .dasar-cover__name { font-size: 1.45rem; }
    .dasar-cover__quote { font-size: .8rem; line-height: 1.26; }
}

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

/* ---------- 9. motion ---------- */
@keyframes dasar-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes dasar-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dasar-drop-in { from { opacity: 0; translate: 0 -18px; scale: 1.04; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes dasar-zoom-out { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes dasar-slide-in { from { opacity: 0; translate: -46px 10px; rotate: -20deg; } to { opacity: 1; translate: 0 0; rotate: var(--print-tilt); } }
@keyframes dasar-tape { from { opacity: 0; scale: 1.4; } to { opacity: 1; scale: 1; } }
@keyframes dasar-pop { 0% { opacity: 0; scale: .4; } 70% { opacity: 1; scale: 1.12; } 100% { opacity: 1; scale: 1; } }
@keyframes dasar-stamp { 0% { opacity: 0; scale: 1.8; } 70% { opacity: 1; scale: .94; } 100% { opacity: 1; scale: 1; } }

/* cover (≤ 2.5 s, once): the big print drops in (0–.8 s) while its photo settles from a slight zoom (0–1.1 s),
   the "then" print slides in from the left (.45–1.15 s), the tape lands (.8 s), the sticker pops (1.1 s); the
   text follows through its inv-enter delays (.95–1.4 s + .6 s) */
html.inv-anim .dasar-print--now { animation: dasar-drop-in .8s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .dasar-print--now .dasar-print__photo { animation: dasar-zoom-out 1.1s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .dasar-print--then { animation: dasar-slide-in .7s cubic-bezier(.2, .8, .3, 1.1) .45s both; }
html.inv-anim .dasar-cover .dasar-print__tape { animation: dasar-tape .35s ease-out .8s both; }
html.inv-anim .dasar-cover__sticker { animation: dasar-pop .5s cubic-bezier(.34, 1.56, .64, 1) 1.1s both; }

/* section schools draw themselves once when their section part is revealed */
html.inv-anim .dasar-draw .dasar-school__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.inv-anim .dasar-draw :is(.dasar-school__flag, .dasar-school__clock, .dasar-school__leaf) { opacity: 0; }
html.inv-anim :is(.is-revealed .dasar-draw, .dasar-draw.is-revealed) .dasar-school__line { animation: dasar-draw 1.3s ease-out .2s both; }
html.inv-anim :is(.is-revealed .dasar-draw, .dasar-draw.is-revealed) :is(.dasar-school__flag, .dasar-school__clock, .dasar-school__leaf) { animation: dasar-fade .6s ease 1.2s both; }

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

/* ---------- 10. intro scene "Pesawat Kertas Angkatan" (scene.json + sections/_scene) ----------
   The intro is teleported to <body>: everything here stands on its own classes. */
.dasar-scene-school { position: absolute; inset: 0; display: flex; align-items: flex-end; color: color-mix(in srgb, var(--inv-primary) 55%, var(--inv-background)); }
.inv-scene__art > .dasar-scene-school > svg { width: 100%; height: auto; max-height: 100%; }
/* the school draws itself once while it rises (pathLength="1" on its lines) */
html.inv-anim .dasar-scene-school .dasar-school__line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: dasar-draw 1.8s ease-out .35s forwards; }
html.inv-anim .dasar-scene-school :is(.dasar-school__flag, .dasar-school__clock, .dasar-school__leaf) { opacity: 0; animation: dasar-fade .6s ease 1.8s forwards; }
/* the prints fill the width of their box (container units) */
.inv-scene__art:has(> .dasar-scene-print) { container-type: inline-size; }
.dasar-scene-print { --print-w: 100cqw; --print-tilt: 0deg; rotate: none; }
.dasar-scene-print--then { --print-ratio: 1 / 1; }
.dasar-scene-print--now { --print-ratio: 10 / 9; }
.dasar-scene-print--now .dasar-print__tape { width: calc(var(--print-w) * .26); }
.dasar-scene-print__photo { position: absolute; inset: 0; background: center 35% / cover no-repeat; }
.dasar-scene-print--then .dasar-scene-print__photo { filter: sepia(.25) saturate(.9); }
.dasar-scene-print .dasar-print__monogram { font-size: calc(var(--print-w) * .34); }
.dasar-scene-sticker { position: absolute; inset: 0; container-type: size; display: grid; place-items: center; }
.dasar-scene-sticker .dasar-sticker { width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); rotate: 0deg; }
.dasar-scene-sticker .dasar-sticker strong { font-size: calc(min(100cqw, 100cqh) * .4); }
.dasar-scene-sticker .dasar-sticker span { font-size: calc(min(100cqw, 100cqh) * .12); }
.dasar-scene-plane { overflow: visible; filter: drop-shadow(0 8px 6px color-mix(in srgb, var(--inv-deep) 30%, transparent)); }
.dasar-scene-plane__trail { stroke: color-mix(in srgb, var(--inv-primary) 45%, transparent); stroke-width: 1.6; stroke-dasharray: 3 5; }
.dasar-scene-plane__wing { fill: #fffdf8; stroke: var(--inv-deep); stroke-width: 1.8; }
.dasar-scene-plane__fold { fill: color-mix(in srgb, var(--inv-soft) 80%, #fff); stroke: var(--inv-deep); stroke-width: 1.4; }
.dasar-scene-plane__keel { stroke: var(--inv-accent); stroke-width: 2; }

/* the name card: the "HALO" name tag — a tomato band with "Halo!", the school's name handwritten, a tomato strip at the foot */
body.dasar-body .inv-intro--scene .inv-scene__card {
    top: 54%; aspect-ratio: auto; overflow: hidden; rotate: -1.5deg;
    -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 0 1.2rem 1.5rem; border-radius: 16px; background: #fff;
    box-shadow: inset 0 -8px 0 var(--inv-accent), 0 0 0 1px rgb(0 0 0 / .04), 0 26px 40px -16px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
body.dasar-body .inv-scene__card::before {
    content: 'Halo!'; display: block; margin: 0 -1.2rem 1rem; padding: .45rem 1rem .4rem;
    font-family: var(--dasar-display); font-style: italic; font-weight: 700; font-size: 1.5rem; line-height: 1.15; color: #fff; background: var(--inv-accent);
}
body.dasar-body .inv-scene__card .inv-intro__label {
    justify-self: center; font-family: var(--dasar-sans); font-size: .64rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--dasar-clay);
}
body.dasar-body .inv-scene__card .inv-intro__names {
    font-family: var(--dasar-hand) !important; font-weight: 700; font-size: clamp(2.2rem, 10vw, 2.9rem); line-height: 1.02; color: var(--inv-deep); overflow-wrap: anywhere;
}
body.dasar-body .inv-scene__card .inv-intro__rule { height: 4px; width: 2.4rem; border-radius: 3px; background: var(--inv-shine); }
body.dasar-body .inv-scene__card .inv-intro__date { font-family: var(--dasar-sans); font-weight: 700; font-size: .84rem; color: var(--dasar-title); }
@media (prefers-reduced-motion: reduce) {
    .dasar-scene-school .dasar-school__line { animation: none; stroke-dashoffset: 0; }
    .dasar-scene-school :is(.dasar-school__flag, .dasar-school__clock, .dasar-school__leaf) { animation: none; opacity: 1; }
}
/* short phones (≈ 360×640): the tag sits lower and a little tighter, so the plane and the prints stay in view */
@media (min-aspect-ratio: 10 / 19) {
    body.dasar-body .inv-intro--scene .inv-scene__card { top: 59%; padding-bottom: 1.2rem; }
    body.dasar-body .inv-scene__card::before { margin-bottom: .7rem; padding: .3rem 1rem .25rem; font-size: 1.3rem; }
}