/*
 * Template "Obor Tarhib" (Pengajian & Hari Besar Islam) — welcoming Ramadan with a torch parade, Islam Nusantara: a
 * village night in royal indigo (by default) lit by fire — turmeric gold, brick terracotta and cream.
 * Signature pieces (all inline SVG/CSS): the photo in the door of a Nusantara mosque under a three-tiered tumpang roof
 * with its mustaka (sections/_gate), bamboo torches with a living flame (sections/_obor), the torch parade
 * (sections/_parade), the mosque silhouette (sections/_masjid), the hilal, the Nusantara calligraphy frame with
 * lung-lungan corners (sections/_sulur) and tumpal bands, and a faint kawung batik ground on every section.
 * Mobile-first, one column (~460px) on a night backdrop on wide screens.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (royal indigo / pesantren green / keraton maroon / petrol: titles, the roof, buttons)
 *   --inv-accent (turmeric gold / copper: the foil of every ornament, rules, pills)
 *   --inv-background (cream)   --inv-text   --inv-deep (the night: cover, deep bands)   --inv-shine (light gold on dark)
 *   --inv-soft (warm terracotta tint: the soft tone)   --inv-terra (brick: the ember tone, tumpal, rope)
 *   --inv-flame (the fire of the torches)
 *
 * Section tones (set on each section in its partial): .ot-tone--light (cream + kawung), --soft (terracotta wash),
 * --deep (the indigo night with fire light from below), --ember (brick). Motion only runs with html.inv-anim (set by
 * <x-inv.head> unless the guest prefers reduced motion); without it everything is shown finished.
 *
 * Revision standard (docs/template-guide.md section 10): the cover is sized in px steps per screen height, never
 * svh/vh; ornaments stay clear of faces and of the top corners; photos melt into sections with masks; the closing is
 * compact and its name ends above the bottom menu.
 *
 * Contents: 1 base · 2 tones · 3 shared pieces (heading, divider, gate, torch, frame, tap marker) · 4 cover
 *           · 5 sections in page order · 6 forms · 7 shared components · 8 screen sizes · 9 motion · 10 intro scene
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Indigo Kunyit" variant (the variant's colours override these) */
    --inv-primary: #26369a;
    --inv-accent: #e2a21a;
    --inv-background: #fcf3e1;
    --inv-text: #1d1a35;
    --inv-deep: #0f1550;
    --inv-shine: #ffd66a;
    --inv-soft: #f7dcc2;
    --inv-terra: #b5462a;
    --inv-flame: #ff8f2b;
    --inv-radius: 16px;

    --ot-serif: var(--inv-font-heading, 'Playfair Display'), Georgia, 'Times New Roman', serif;
    --ot-read: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --ot-script: var(--inv-font-display, 'Pinyon Script'), 'Brush Script MT', cursive;
    --ot-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ot-col: 460px;

    /* gold foil, mixed from the accent: dark bronze → turmeric → pale light */
    --ot-gold-1: color-mix(in srgb, var(--inv-accent) 60%, #3a1f02);
    --ot-gold-2: var(--inv-accent);
    --ot-gold-3: color-mix(in srgb, var(--inv-accent) 40%, #fff6d4);
    --ot-gold-ink: color-mix(in srgb, var(--inv-accent) 62%, #3a1f02);
    --ot-foil: linear-gradient(100deg, var(--ot-gold-1), var(--ot-gold-2) 30%, var(--ot-gold-3) 48%, var(--ot-gold-2) 62%, var(--ot-gold-1));
    --ot-fire: linear-gradient(0deg, var(--inv-terra), var(--inv-flame) 45%, var(--inv-shine));

    /* the mosque: a brick-red shingled roof darkening into the night, walls of the primary */
    --ot-roof-1: color-mix(in srgb, var(--inv-terra) 88%, #fff 8%);
    --ot-roof-2: color-mix(in srgb, var(--inv-terra) 30%, var(--inv-deep));
    --ot-wall: color-mix(in srgb, var(--inv-primary) 55%, var(--inv-deep));

    --ot-paper: color-mix(in srgb, #fff 66%, var(--inv-background));
    --ot-title: color-mix(in srgb, var(--inv-primary) 80%, var(--inv-deep));
    --ot-terra-ink: color-mix(in srgb, var(--inv-terra) 82%, #2a0d04);
    --ot-muted: color-mix(in srgb, var(--inv-text) 76%, var(--inv-background));
    --ot-cream-muted: color-mix(in srgb, var(--inv-background) 86%, transparent);
    --ot-line: color-mix(in srgb, var(--inv-accent) 58%, transparent);
    --ot-drop: 0 24px 40px -24px color-mix(in srgb, var(--inv-deep) 70%, transparent);

    /* kawung batik ground on a 40px tile (a mask, so it takes any colour) */
    --ot-ground: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cellipse cx='10.5' cy='10.5' rx='9' ry='5' transform='rotate(45 10.5 10.5)'/%3E%3Cellipse cx='29.5' cy='29.5' rx='9' ry='5' transform='rotate(45 29.5 29.5)'/%3E%3Cellipse cx='29.5' cy='10.5' rx='9' ry='5' transform='rotate(-45 29.5 10.5)'/%3E%3Cellipse cx='10.5' cy='29.5' rx='9' ry='5' transform='rotate(-45 10.5 29.5)'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='20' cy='20' r='1.8'/%3E%3Ccircle cx='0' cy='0' r='1.8'/%3E%3Ccircle cx='40' cy='0' r='1.8'/%3E%3Ccircle cx='0' cy='40' r='1.8'/%3E%3Ccircle cx='40' cy='40' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
    /* tumpal: hollow triangles with a small one inside, pointing up (20 × 14) */
    --ot-tumpal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 14 10 0 20 14ZM4.6 12.3 10 4.7 15.4 12.3Z'/%3E%3Cpath d='M10 7.7 12.3 11 7.7 11Z'/%3E%3C/svg%3E");
    /* the door arch of the mosque (172 × 210) and a wide one for landscape photos (300 × 200) */
    --ot-door: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 172 210' preserveAspectRatio='none'%3E%3Cpath d='M0 210V60C0 26 40 0 86 0C132 0 172 26 172 60V210Z'/%3E%3C/svg%3E");
    --ot-door-wide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200V62C0 26 70 0 150 0C230 0 300 26 300 62V200Z'/%3E%3C/svg%3E");
    /* a small flame (labels, bullets) */
    --ot-flame-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 32'%3E%3Cpath d='M10 0C12.2 6 18.6 10.4 18.4 19.6 18.2 26.8 14.6 32 10 32S1.6 27 1.6 20.4C1.6 14 6.4 11.6 6.6 5.4 8.6 7.6 9 9.6 10 0Z'/%3E%3C/svg%3E");

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

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

body {
    margin: 0;
    background: var(--inv-background);
    color: var(--inv-text);
    font-family: var(--ot-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); }

/* the SVG definitions: present for the gradients and symbols, never seen */
.ot-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

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

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

.ot-arabic { font-family: 'Amiri', 'Traditional Arabic', serif; line-height: 1.9; color: var(--ot-title); }
.ot-icon { width: 1.15rem; height: 1.15rem; flex: none; }

/* gold foil text: the gradient clipped to the letters with a slow moving shine */
.ot-heading__title em, .ot-cover__title, .ot-occasion__type, .ot-occasion__hijri, .ot-closing__names {
    background: var(--ot-foil); background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- 2. section tones ---------- */
/* light: cream with a warm glow in the corners and the kawung ground */
.ot-tone--light {
    background:
        radial-gradient(60% 26% at 100% 0%, color-mix(in srgb, var(--inv-soft) 90%, transparent), transparent 75%),
        radial-gradient(60% 26% at 0% 100%, color-mix(in srgb, var(--inv-accent) 16%, transparent), transparent 75%),
        var(--inv-background);
}
/* soft: a warm terracotta wash */
.ot-tone--soft {
    background:
        radial-gradient(80% 34% at 50% 0%, color-mix(in srgb, #fff 50%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-soft), color-mix(in srgb, var(--inv-soft) 50%, var(--inv-background)));
}
.ot-tone--light::before, .ot-tone--soft::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-primary); opacity: .065;
    -webkit-mask: var(--ot-ground) center top / 40px 40px repeat; mask: var(--ot-ground) center top / 40px 40px repeat;
}
.ot-tone--soft::before { background: var(--inv-terra); opacity: .09; }
/* deep: the indigo night, fire light rising from below, a few stars */
.ot-tone--deep {
    color: var(--inv-background);
    background:
        radial-gradient(90% 40% at 15% 0%, color-mix(in srgb, var(--inv-primary) 85%, transparent), transparent 75%),
        radial-gradient(90% 34% at 50% 108%, color-mix(in srgb, var(--inv-flame) 30%, transparent), transparent 75%),
        var(--inv-deep);
}
/* ember: warm brick */
.ot-tone--ember {
    color: var(--inv-background);
    background:
        radial-gradient(80% 34% at 50% 0%, color-mix(in srgb, var(--inv-flame) 34%, transparent), transparent 75%),
        radial-gradient(70% 30% at 100% 100%, color-mix(in srgb, var(--inv-deep) 50%, transparent), transparent 75%),
        linear-gradient(170deg, color-mix(in srgb, var(--inv-terra) 92%, #fff 3%), color-mix(in srgb, var(--inv-terra) 62%, var(--inv-deep)));
}
.ot-tone--deep::before, .ot-tone--ember::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-shine); opacity: .075;
    -webkit-mask: var(--ot-ground) center top / 40px 40px repeat; mask: var(--ot-ground) center top / 40px 40px repeat;
}
.ot-tone--deep::after {
    content: ''; position: absolute; inset: 0 0 auto; height: 60%; z-index: -1; pointer-events: none; opacity: .7;
    background:
        radial-gradient(1.4px 1.4px at 14% 18%, var(--inv-shine), transparent),
        radial-gradient(1.1px 1.1px at 32% 8%, #fff, transparent),
        radial-gradient(1.6px 1.6px at 78% 14%, var(--inv-shine), transparent),
        radial-gradient(1.1px 1.1px at 90% 34%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 6% 44%, #fff, transparent),
        radial-gradient(1.3px 1.3px at 60% 26%, var(--inv-shine), transparent);
}
.ot-tone--deep a:not(.inv-button), .ot-tone--ember a:not(.inv-button) { color: var(--inv-shine); }
.ot-tone--deep .ot-arabic, .ot-tone--ember .ot-arabic { color: var(--inv-shine); }

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

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

/* heading: eyebrow between two tiny flames, serif title, the last word in the script font in gold foil, divider */
.ot-heading { margin: 0 0 2rem; }
.ot-heading__eyebrow {
    display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .5rem;
    font-size: .68rem; font-weight: 600; line-height: 1.2; letter-spacing: .26em; text-transform: uppercase; color: var(--ot-terra-ink);
}
.ot-heading__eyebrow::before, .ot-heading__eyebrow::after {
    content: ''; width: 8px; height: 12px; flex: none; background: var(--ot-fire);
    -webkit-mask: var(--ot-flame-mask) center / contain no-repeat; mask: var(--ot-flame-mask) center / contain no-repeat;
}
.ot-heading__title {
    margin: 0; font-family: var(--ot-serif); font-size: 1.95rem; font-weight: 600; line-height: 1.12;
    color: var(--ot-title); text-wrap: balance;
}
.ot-heading__title em {
    display: inline-block; padding: 0 .1em .12em; font-family: var(--ot-script); font-style: normal; font-weight: 400;
    font-size: 1.32em; line-height: .95; word-spacing: .12em;
}
.ot-heading__divider { margin: .8rem auto 0; }
.ot-tone--deep .ot-heading__eyebrow, .ot-tone--ember .ot-heading__eyebrow { color: var(--inv-shine); }
.ot-tone--deep .ot-heading__title, .ot-tone--ember .ot-heading__title { color: #fff; }
/* on light and soft sections the foil runs darker, so the script word keeps its contrast */
.ot-tone--light .ot-heading__title em, .ot-tone--soft .ot-heading__title em {
    background-image: linear-gradient(100deg, var(--ot-gold-ink), var(--ot-gold-1) 30%, color-mix(in srgb, var(--inv-accent) 80%, #3a1f02) 50%, var(--ot-gold-1) 70%, var(--ot-gold-ink));
}
.ot-tone--ember .ot-heading__title em { background-image: linear-gradient(100deg, var(--ot-gold-3), #fff8de 40%, var(--inv-shine) 60%, var(--ot-gold-3)); }

/* the ornamental divider */
.ot-divider { display: block; width: min(13rem, 70%); height: auto; overflow: visible; }

/* the gate (sections/_gate): figure 240:346, the photo window inside the arch */
.ot-gate { --gate-w: 15rem; --gate-pos: center 25%; position: relative; width: var(--gate-w); aspect-ratio: 240 / 346; margin: 0 auto; flex: none; }
.ot-gate__window {
    position: absolute; left: 14.1667%; right: 14.1667%; top: 38.15%; bottom: 1.16%; overflow: hidden;
    background:
        radial-gradient(70% 40% at 50% 100%, color-mix(in srgb, var(--inv-flame) 40%, transparent), transparent 70%),
        linear-gradient(175deg, color-mix(in srgb, var(--inv-primary) 80%, #fff 6%), var(--inv-deep));
    -webkit-mask: var(--ot-door) center / 100% 100% no-repeat; mask: var(--ot-door) center / 100% 100% no-repeat;
}
.ot-gate__photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--gate-pos); }
.ot-gate__empty { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: .3rem; padding-top: 10%; }
.ot-gate__empty-moon { width: 24%; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--inv-shine) 60%, transparent)); }
.ot-gate__initials { font-family: var(--ot-serif); font-weight: 600; font-size: calc(var(--gate-w) * .16); line-height: 1; letter-spacing: .04em; color: #fff; white-space: nowrap; }
.ot-gate__frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 3px 3px rgb(0 0 0 / .25)); }
.ot-gate__wall { fill: var(--ot-wall); }
.ot-gate__tier { fill: url(#ot-roof); stroke: var(--inv-accent); stroke-width: 1.1; stroke-linejoin: round; }
.ot-gate__band { fill: var(--ot-roof-2); }
.ot-gate__vents { fill: var(--inv-shine); }
.ot-gate__tumpal { fill: var(--inv-accent); }

/* the bamboo torch (sections/_obor) */
.ot-obor { display: block; overflow: visible; pointer-events: none; }
.ot-obor__fire, .ot-obor__halo, .ot-obor__flame, .ot-obor__core { transform-box: fill-box; transform-origin: 50% 100%; }
.ot-obor__halo { transform-origin: 50% 50%; }

/* the torch parade and the mosque silhouette */
.ot-parade, .ot-masjid, .ot-hilal { display: block; overflow: visible; }
.ot-parade__flame { transform-box: fill-box; transform-origin: 50% 100%; }
.ot-masjid__body { fill: color-mix(in srgb, var(--inv-deep) 72%, #000); }
.ot-hilal { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--inv-shine) 70%, transparent)); }

/* the Nusantara calligraphy frame: cream panel, double gold rule, tumpal bands top and bottom, lung-lungan corners */
.ot-frame {
    position: relative; max-width: 22.5rem; margin: 0 auto; padding: 3.5rem 1.5rem 3.5rem; border-radius: 6px;
    background: var(--ot-paper);
    box-shadow: inset 0 0 0 1px var(--ot-line), inset 0 0 0 5px var(--ot-paper), inset 0 0 0 6.2px var(--ot-line), var(--ot-drop);
}
.ot-frame::before, .ot-frame::after {
    content: ''; position: absolute; left: 4.2rem; right: 4.2rem; height: 11px; pointer-events: none;
    background: linear-gradient(90deg, var(--inv-terra), var(--inv-accent) 30%, var(--ot-gold-3) 50%, var(--inv-accent) 70%, var(--inv-terra));
    -webkit-mask: var(--ot-tumpal) center / 16px 11px repeat-x; mask: var(--ot-tumpal) center / 16px 11px repeat-x;
}
.ot-frame::before { top: .8rem; transform: scaleY(-1); }
.ot-frame::after { bottom: .8rem; }
.ot-frame__corner { position: absolute; width: 3.6rem; height: 3.6rem; }
.ot-frame__corner--tl { top: .4rem; left: .4rem; }
.ot-frame__corner--tr { top: .4rem; right: .4rem; transform: scaleX(-1); }
.ot-frame__corner--bl { bottom: .4rem; left: .4rem; transform: scaleY(-1); }
.ot-frame__corner--br { bottom: .4rem; right: .4rem; transform: scale(-1, -1); }
.ot-frame__body { position: relative; }
/* the night version (occasion) */
.ot-frame--night {
    color: var(--inv-background);
    background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--inv-flame) 18%, transparent), transparent 70%), color-mix(in srgb, var(--inv-deep) 72%, transparent);
    box-shadow: inset 0 0 0 1px var(--ot-line), inset 0 0 0 5px transparent, inset 0 0 0 6.2px color-mix(in srgb, var(--inv-accent) 35%, transparent), 0 24px 40px -24px rgb(0 0 0 / .7);
}

/* the tap marker: two pulsing gold rings, a tapping hand and a label (only once the interaction is armed) */
.ot-tap { display: none; position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.is-armed .ot-tap { display: block; }
.ot-tap__ring {
    position: absolute; left: 50%; top: 1.45rem; width: 3.6rem; aspect-ratio: 1; margin: -1.8rem 0 0 -1.8rem; border-radius: 50%;
    border: 2.5px solid var(--inv-shine); opacity: 0;
}
.ot-tap__hand {
    position: absolute; left: 58%; top: 2.1rem; width: 2.2rem; height: 2.2rem;
    fill: #fff; stroke: var(--ot-gold-1); stroke-width: 1.4; stroke-linejoin: round;
    filter: drop-shadow(0 4px 6px rgb(0 0 0 / .4));
}
.ot-tap__label {
    position: absolute; left: -.2rem; top: -2.1rem; white-space: nowrap;
    padding: .32rem .85rem; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .06em;
    color: var(--inv-deep); background: var(--ot-foil); background-size: 220% 100%;
    box-shadow: 0 8px 16px -8px rgb(0 0 0 / .6);
}

/* ---------- 4. cover ---------- */
.ot-cover {
    --gate-cover: 16.8rem;
    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;
    padding: 1.7rem 1.4rem 1.9rem; isolation: isolate; color: var(--inv-background);
    background:
        radial-gradient(70% 32% at 50% 30%, color-mix(in srgb, var(--inv-primary) 85%, transparent), transparent 75%),
        radial-gradient(60% 26% at 100% 8%, color-mix(in srgb, var(--inv-primary) 45%, transparent), transparent 75%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 80%, #000), var(--inv-deep) 55%, color-mix(in srgb, var(--inv-deep) 82%, var(--inv-terra)));
    transition: opacity .9s ease;
}
/* the kawung ground */
.ot-cover::before {
    content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: .085; background: var(--inv-shine);
    -webkit-mask: var(--ot-ground) center top / 40px 40px repeat; mask: var(--ot-ground) center top / 40px 40px repeat;
}
/* stars */
.ot-cover::after {
    content: ''; position: absolute; inset: 0 0 45%; z-index: -2; pointer-events: none; opacity: .8;
    background:
        radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 26% 10%, var(--inv-shine), transparent),
        radial-gradient(1.8px 1.8px at 82% 20%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 92% 48%, var(--inv-shine), transparent),
        radial-gradient(1.4px 1.4px at 6% 56%, #fff, transparent),
        radial-gradient(1.1px 1.1px at 64% 6%, #fff, transparent),
        radial-gradient(1.3px 1.3px at 44% 16%, var(--inv-shine), transparent);
}
/* the fire light rising from below, with embers drifting up */
.ot-cover__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(85% 34% at 50% 104%, color-mix(in srgb, var(--inv-flame) 42%, transparent), transparent 72%); }
.ot-cover__glow::after {
    content: ''; position: absolute; inset: 30% 0 0; opacity: .85;
    background:
        radial-gradient(1.8px 1.8px at 14% 90%, var(--inv-flame), transparent),
        radial-gradient(1.4px 1.4px at 30% 70%, var(--inv-shine), transparent),
        radial-gradient(2.2px 2.2px at 74% 80%, var(--inv-flame), transparent),
        radial-gradient(1.4px 1.4px at 86% 52%, var(--inv-shine), transparent),
        radial-gradient(1.8px 1.8px at 8% 40%, var(--inv-flame), transparent),
        radial-gradient(1.3px 1.3px at 58% 30%, var(--inv-shine), transparent),
        radial-gradient(1.6px 1.6px at 44% 96%, var(--inv-flame), transparent);
    background-size: 100% 380px;
}
/* tumpal bands along the top and bottom edges */
.ot-cover__tumpal {
    position: absolute; left: 0; right: 0; height: 12px; z-index: -1; pointer-events: none; opacity: .9;
    background: linear-gradient(90deg, var(--ot-gold-1), var(--inv-accent) 25%, var(--ot-gold-3) 50%, var(--inv-accent) 75%, var(--ot-gold-1));
    -webkit-mask: var(--ot-tumpal) center / 18px 12px repeat-x; mask: var(--ot-tumpal) center / 18px 12px repeat-x;
}
.ot-cover__tumpal--top { top: 0; transform: scaleY(-1); }
.ot-cover__tumpal--bottom { bottom: 0; }
.ot-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); }

.ot-cover__host {
    max-width: 17rem; margin: 0 0 .35rem;
    font-size: .68rem; font-weight: 600; line-height: 1.35; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-shine); text-wrap: balance;
}

.ot-cover__art { position: relative; width: var(--gate-cover); }
/* a warm light breathing behind the mosque door */
.ot-cover__art::before {
    content: ''; position: absolute; z-index: -1; left: -24%; right: -24%; top: 14%; bottom: -6%; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-flame) 34%, transparent), color-mix(in srgb, var(--inv-shine) 10%, transparent) 60%, transparent);
}
.ot-gate--cover { --gate-w: var(--gate-cover); --gate-pos: center 24%; }
.ot-cover__hilal { position: absolute; right: -9%; top: 3%; width: 2.7rem; transform: rotate(-12deg); }
/* the torches stand low on both sides of the door, far from the top corners */
.ot-cover__torch { position: absolute; bottom: 7%; width: 2.3rem; }
.ot-cover__torch--left { left: -2.9rem; }
.ot-cover__torch--right { right: -2.9rem; }
.ot-cover__obor { width: 100%; height: auto; }

.ot-cover__title {
    margin: .3rem 0 0; max-width: 100%; font-family: var(--ot-script); font-size: 3rem; font-weight: 400; line-height: 1.1;
    padding: 0 .2em .08em; word-spacing: .14em; text-wrap: balance; filter: drop-shadow(0 2px 8px rgb(0 0 0 / .4));
}
.ot-cover__date { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3rem .55rem; margin: .35rem 0 0; }
.ot-cover__ribbon {
    display: inline-block; padding: .28rem 1.45rem .32rem; font-family: var(--ot-serif); font-size: .98rem; font-weight: 600; letter-spacing: .03em;
    color: var(--inv-deep); background: var(--ot-foil); background-size: 220% 100%;
    clip-path: polygon(0 0, 100% 0, calc(100% - .7rem) 50%, 100% 100%, 0 100%, .7rem 50%);
}
.ot-cover__hijri { font-family: var(--ot-read); font-size: 1.04rem; font-style: italic; font-weight: 600; color: var(--inv-shine); }
.ot-cover__quote {
    max-width: 30ch; margin: .45rem 0 0; font-family: var(--ot-read); font-style: italic; font-weight: 500;
    font-size: 1.08rem; line-height: 1.3; color: var(--ot-cream-muted);
}
.ot-cover__guest {
    width: min(100%, 18.5rem); margin: .65rem 0 0; padding: .45rem 1rem .5rem; border-radius: 14px;
    background: color-mix(in srgb, var(--inv-deep) 60%, transparent);
    box-shadow: inset 0 0 0 1px var(--ot-line);
}
.ot-cover__guest p { margin: 0; font-size: .6rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-shine); }
.ot-cover__guest-name { display: block; font-family: var(--ot-serif); font-size: 1.16rem; font-weight: 600; line-height: 1.25; color: #fff; overflow-wrap: anywhere; }
.ot-cover__open {
    margin-top: .8rem; min-height: 2.9rem; padding: .65rem 1.9rem; font-weight: 600; letter-spacing: .06em;
    color: var(--inv-deep); background: var(--ot-foil); background-size: 220% 100%;
    box-shadow: 0 0 0 3px var(--inv-deep), 0 0 0 4.2px var(--ot-line), 0 0 26px -4px color-mix(in srgb, var(--inv-flame) 70%, transparent);
}

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

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

/* opening: the calligraphy frame, then the verse on a warm panel */
.ot-opening { padding: 4rem 1.3rem 4.2rem; }
.ot-opening__basmalah { margin: 0 0 .5rem; font-size: 1.75rem; }
.ot-opening__greeting { margin: 0 auto; max-width: 22ch; font-family: var(--ot-read); font-size: 1.5rem; font-weight: 600; font-style: italic; line-height: 1.28; color: var(--ot-title); }
.ot-opening__divider { margin: .9rem auto; }
.ot-opening__message { margin: 0 auto; max-width: 28ch; color: var(--ot-muted); }
.ot-opening__quote {
    position: relative; max-width: 21rem; margin: 2.6rem auto 0; padding: 1.9rem 1.3rem 1.4rem; border-radius: 18px;
    background: color-mix(in srgb, var(--inv-soft) 55%, var(--ot-paper)); box-shadow: inset 0 0 0 1px var(--ot-line);
}
.ot-opening__hilal { position: absolute; left: 50%; top: -1.3rem; width: 2.4rem; margin-left: -1.2rem; transform: rotate(-20deg); }
.ot-opening__quote p { margin: 0; font-family: var(--ot-read); font-style: italic; font-size: 1.16rem; font-weight: 500; line-height: 1.5; color: var(--inv-text); }
.ot-opening__quote cite,
.ot-prayer__text cite {
    display: inline-block; margin-top: .9rem; padding: .26rem .9rem; border-radius: 999px; font-style: normal; font-size: .7rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ot-terra-ink); box-shadow: inset 0 0 0 1px var(--ot-line);
}

/* organizer: the gate, a seal with the logo or monogram on its foot, the board, the name and the motto */
.ot-organizer__art { position: relative; width: min(13.5rem, 62vw); margin: 0 auto; }
.ot-gate--organizer { --gate-w: 100%; --gate-pos: center 35%; }
.ot-organizer__art .ot-gate__initials { font-size: 2.3rem; }
.ot-organizer__seal {
    position: relative; z-index: 2; display: grid; place-items: center; width: 4.9rem; height: 4.9rem; margin: -2.5rem auto 0; overflow: hidden;
    border-radius: 50%; color: var(--ot-title); background: radial-gradient(circle at 38% 32%, #fffdf6, var(--ot-gold-3) 70%, var(--inv-accent));
    box-shadow: 0 0 0 3px var(--inv-soft), 0 0 0 4.5px var(--inv-terra), 0 12px 22px -10px color-mix(in srgb, var(--inv-deep) 70%, transparent);
    font-family: var(--ot-serif); font-size: 1.45rem; font-weight: 700; letter-spacing: .04em; line-height: 1;
}
.ot-organizer__seal span { padding: 0 .4rem; text-align: center; overflow-wrap: anywhere; }
.ot-organizer__seal--logo { background: #fff; }
.ot-organizer__seal img { width: 78%; height: 78%; object-fit: contain; }
.ot-organizer__unit { margin: 1.2rem auto 0 !important; font-size: .66rem; font-weight: 600; letter-spacing: .22em; line-height: 1.4; text-transform: uppercase; color: var(--ot-terra-ink); }
.ot-organizer__name { margin: .35rem auto 0; max-width: 18ch; font-family: var(--ot-serif); font-size: 1.9rem; font-weight: 700; line-height: 1.15; color: var(--ot-title); text-wrap: balance; overflow-wrap: anywhere; }
.ot-organizer__tagline { display: flex; align-items: center; justify-content: center; gap: .55rem; margin: .5rem auto 0 !important; font-family: var(--ot-read); font-size: 1.16rem; font-style: italic; color: var(--ot-muted); text-wrap: balance; }
.ot-organizer__tagline::before, .ot-organizer__tagline::after {
    content: ''; width: 8px; height: 12px; flex: none; background: var(--ot-fire);
    -webkit-mask: var(--ot-flame-mask) center / contain no-repeat; mask: var(--ot-flame-mask) center / contain no-repeat;
}

/* occasion: the type in gold foil under a hilal, the night frame with the Hijri date and theme between two torches */
.ot-occasion { padding-bottom: 4.6rem; }
.ot-occasion__hilal { width: 2.5rem; margin: 0 auto .6rem; transform: rotate(-18deg); }
.ot-occasion__eyebrow { margin: 0 0 .45rem !important; font-size: .66rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-shine); }
.ot-occasion__type { margin: 0 auto; max-width: 15ch; font-family: var(--ot-script); font-size: 2.4rem; word-spacing: .12em; font-weight: 400; line-height: 1.15; padding: 0 .12em .1em; text-wrap: balance; }
.ot-occasion__stage { display: grid; grid-template-columns: 2.3rem minmax(0, 1fr) 2.3rem; align-items: end; gap: .45rem; max-width: 24rem; margin: 1.6rem auto 0; }
.ot-occasion__torch { display: block; margin-bottom: -1.2rem; }
.ot-occasion__obor { width: 100%; height: auto; }
.ot-occasion__frame { width: 100%; padding: 3rem 1.1rem 2.9rem; }
.ot-occasion__frame .ot-frame__corner { width: 2.8rem; height: 2.8rem; }
.ot-occasion__frame::before, .ot-occasion__frame::after { left: 3.3rem; right: 3.3rem; }
.ot-occasion__hijri { margin: 0; font-family: var(--ot-serif); font-size: 1.6rem; font-weight: 700; line-height: 1.2; padding-bottom: .05em; text-wrap: balance; }
.ot-occasion__theme-label { margin: .7rem 0 0; font-size: .6rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-shine); }
.ot-occasion__theme { margin: .15rem 0 0; font-family: var(--ot-read); font-size: 1.24rem; font-style: italic; font-weight: 600; line-height: 1.32; color: #fff; text-wrap: balance; }
.ot-occasion__hijri + .ot-occasion__theme-label { padding-top: .7rem; border-top: 1px solid var(--ot-line); }
.ot-occasion__divider { margin: 2.2rem auto 1rem; }
.ot-occasion__intent { margin: 0 auto !important; max-width: 30ch; font-family: var(--ot-read); font-size: 1.16rem; font-style: italic; line-height: 1.5; color: var(--ot-cream-muted); }

/* memorial: quiet — a thin hilal, a small oval portrait, the name in the serif, the years, the words */
.ot-memorial__hilal { width: 2rem; margin: 0 auto .4rem; filter: none; }
.ot-memorial__eyebrow { margin: 0 auto .9rem !important; font-size: .7rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--ot-terra-ink); }
.ot-memorial__portrait {
    position: relative; display: grid; place-items: center; width: 8.6rem; aspect-ratio: 4 / 5; margin: 0 auto; overflow: hidden; border-radius: 50%;
    background: linear-gradient(170deg, color-mix(in srgb, var(--inv-primary) 70%, #fff), var(--inv-deep));
    border: 2px solid var(--inv-accent); outline: 1px solid var(--ot-line); outline-offset: 5px;
}
.ot-memorial__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; filter: saturate(.92); }
.ot-memorial__initial { font-family: var(--ot-serif); font-size: 3rem; font-weight: 600; color: #fff; }
.ot-memorial__name { margin: 1.3rem auto 0; max-width: 20ch; font-family: var(--ot-serif); font-size: 1.75rem; font-weight: 700; line-height: 1.18; color: var(--ot-title); text-wrap: balance; }
.ot-memorial__years { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem .9rem; margin: .45rem auto 0 !important; font-size: .86rem; color: var(--ot-muted); }
.ot-memorial__years span + span::before { content: '·'; margin-right: .9rem; color: var(--inv-accent); }
.ot-memorial__divider { margin: 1.1rem auto; }
.ot-memorial__message { font-family: var(--ot-read); font-size: 1.18rem; font-style: italic; line-height: 1.55; color: var(--inv-text); max-width: 30ch !important; }
.ot-memorial__fatihah {
    display: inline-block; margin: .2rem auto 0 !important; padding: .32rem 1.1rem; border-radius: 999px; font-size: .74rem; font-weight: 600; letter-spacing: .1em;
    color: var(--ot-title); box-shadow: inset 0 0 0 1px var(--ot-line);
}

/* events: cream cards with a tumpal band on top, a wide door-arch photo and a night-blue date medallion */
.ot-event {
    position: relative; overflow: hidden; margin: 0 auto; max-width: 25rem; padding: 1.4rem .7rem 1.7rem; border-radius: 20px; background: var(--ot-paper); text-align: left;
    box-shadow: inset 0 0 0 1px var(--ot-line), inset 0 0 0 5px var(--ot-paper), inset 0 0 0 6px var(--ot-line), var(--ot-drop);
}
.ot-event::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 13px; pointer-events: none; transform: scaleY(-1);
    background: linear-gradient(90deg, var(--inv-terra), var(--inv-accent) 35%, var(--ot-gold-3) 50%, var(--inv-accent) 65%, var(--inv-terra));
    -webkit-mask: var(--ot-tumpal) center / 18px 13px repeat-x; mask: var(--ot-tumpal) center / 18px 13px repeat-x;
}
.ot-event + .ot-event { margin-top: 2.4rem; }
.ot-event__corner { position: absolute; bottom: .35rem; width: 2.8rem; height: 2.8rem; opacity: .9; }
.ot-event__corner--bl { left: .35rem; transform: scaleY(-1); }
.ot-event__corner--br { right: .35rem; transform: scale(-1, -1); }
.ot-event__media { position: relative; margin: 0 .3rem; filter: drop-shadow(0 0 0 transparent); }
.ot-event__photo {
    display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: center 30%;
    -webkit-mask: var(--ot-door-wide) center / 100% 100% no-repeat; mask: var(--ot-door-wide) center / 100% 100% no-repeat;
}
.ot-event__top { display: flex; align-items: center; gap: .9rem; padding: .4rem 1rem 0; }
.ot-event__media + .ot-event__top { margin-top: -2.4rem; align-items: flex-end; }
.ot-event__date {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 4.6rem; height: 4.6rem; margin: 0;
    border-radius: 50%; color: #fff; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-primary) 80%, #fff), var(--inv-deep));
    box-shadow: 0 0 0 3px var(--ot-paper), 0 0 0 4.5px var(--inv-accent), 0 12px 20px -10px color-mix(in srgb, var(--inv-deep) 70%, transparent);
    font-size: .56rem; font-weight: 600; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase;
}
.ot-event__date strong { font-family: var(--ot-serif); font-size: 1.8rem; font-weight: 700; line-height: 1; letter-spacing: 0; }
.ot-event__date span:first-child { color: var(--inv-shine); }
.ot-event__head { min-width: 0; padding-bottom: .1rem; }
.ot-event__media + .ot-event__top .ot-event__head { padding-top: 2.6rem; }
.ot-event__name { margin: 0; font-family: var(--ot-serif); font-size: 1.42rem; font-weight: 700; line-height: 1.16; color: var(--ot-title); text-wrap: balance; }
.ot-event__full { margin: .15rem 0 0; font-size: .8rem; color: var(--ot-muted); }
.ot-event__rows { display: grid; gap: .7rem; margin: 1rem 1rem 0; padding: .95rem 0 0; list-style: none; font-size: .9rem; border-top: 1px solid var(--ot-line); }
.ot-event__rows li { display: flex; align-items: flex-start; gap: .65rem; }
.ot-event__rows .ot-icon { width: 2rem; height: 2rem; padding: .42rem; border-radius: 50%; color: var(--ot-terra-ink); box-shadow: inset 0 0 0 1px var(--ot-line); }
.ot-event__rows li > span { padding-top: .28rem; }
.ot-event__venue { display: block; font-weight: 600; }
.ot-event__address { display: block; font-size: .85rem; color: var(--ot-muted); }
.ot-event .inv-maps { margin: 1.1rem 1rem 0; text-align: center; }
.ot-event .inv-maps .inv-button { width: 100%; font-weight: 600; }
.ot-event .inv-maps__frame { height: 180px; border-radius: 14px; }

/* countdown: a hilal that grows as the day comes near, cream medallions in a brick ring with a flame on top */
.ot-countdown__sky { width: 7.4rem; margin: -.6rem auto .4rem; }
.ot-countdown__moon { display: block; width: 100%; height: auto; overflow: visible; transform: rotate(-32deg); filter: drop-shadow(0 0 14px color-mix(in srgb, var(--inv-shine) 55%, transparent)); }
.ot-countdown__ghost { fill: var(--inv-shine); opacity: .05; }
.ot-countdown__shade { transform: translateX(calc(var(--ot-hilal, 18px) * -1)); transition: transform 2.8s cubic-bezier(.3, 0, .2, 1) .3s; }
html.inv-anim [data-reveal]:not(.is-revealed) .ot-countdown__shade { transform: translateX(-3px); }
.ot-countdown .inv-countdown { gap: clamp(.45rem, 2.4vw, .8rem); padding-top: .8rem; }
.ot-countdown .inv-countdown__item {
    position: relative; display: grid; place-content: center; width: clamp(4rem, 18.5vw, 4.7rem); min-width: 0; aspect-ratio: 1; padding: 0; border-radius: 50%;
    color: var(--inv-text); background: radial-gradient(circle at 38% 32%, #fffdf6, var(--ot-gold-3) 72%, var(--inv-accent));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-deep) 70%, transparent), 0 0 0 4.5px var(--inv-terra), 0 0 24px color-mix(in srgb, var(--inv-flame) 45%, transparent);
}
.ot-countdown .inv-countdown__item::before {
    content: ''; position: absolute; left: 50%; top: -1.15rem; width: .8rem; height: 1.2rem; margin-left: -.4rem; background: var(--ot-fire);
    -webkit-mask: var(--ot-flame-mask) center / contain no-repeat; mask: var(--ot-flame-mask) center / contain no-repeat;
    filter: drop-shadow(0 0 4px var(--inv-flame)); transform-origin: 50% 100%;
}
.ot-countdown .inv-countdown__value { font-variant-numeric: lining-nums tabular-nums; font-family: var(--ot-serif); font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--ot-title); }
.ot-countdown .inv-countdown__label { margin-top: .1rem; font-size: .52rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ot-terra-ink); }
.ot-countdown .inv-countdown__done { font-family: var(--ot-read); font-size: 1.36rem; font-style: italic; color: var(--inv-shine); }
.ot-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 2rem; }
.ot-countdown .inv-countdown__actions .inv-button {
    width: min(100%, 17rem); min-height: 2.75rem; padding: .6rem 1rem; font-size: .84rem; font-weight: 600;
    color: var(--inv-background); background: color-mix(in srgb, var(--inv-background) 10%, transparent);
    box-shadow: inset 0 0 0 1px var(--ot-line);
}
.ot-countdown .inv-countdown__actions .inv-button:first-child { color: var(--inv-deep); background: var(--ot-foil); background-size: 220% 100%; box-shadow: none; }
.ot-countdown .inv-cal {
    --inv-cal-bg: var(--ot-paper); --inv-cal-mark: var(--inv-terra);
    max-width: 19rem; margin: 2.8rem auto 0; border-radius: 22px;
    box-shadow: inset 0 0 0 1px var(--ot-line), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.ot-countdown .inv-cal__month { font-family: var(--ot-serif); font-size: 1.36rem; font-weight: 700; font-style: italic; color: var(--ot-title); }

/* speakers: the main speaker under a small tumpang roof, the others as compact rows */
.ot-speakers__list { display: grid; gap: .85rem; max-width: 25rem; margin: 0 auto; padding: 0; list-style: none; }
.ot-speaker {
    display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); align-items: center; gap: 1rem; padding: .8rem 1rem .8rem .8rem; border-radius: 18px;
    text-align: left; background: var(--ot-paper); box-shadow: inset 0 0 0 1px var(--ot-line);
}
.ot-speaker__art { position: relative; }
.ot-speaker__door {
    width: 100%; padding: 2.5px; background: var(--ot-foil); background-size: 220% 100%;
    -webkit-mask: var(--ot-door) center / 100% 100% no-repeat; mask: var(--ot-door) center / 100% 100% no-repeat;
}
.ot-speaker__window {
    position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 172 / 210; overflow: hidden;
    background: linear-gradient(175deg, color-mix(in srgb, var(--inv-primary) 78%, #fff), var(--inv-deep));
    -webkit-mask: var(--ot-door) center / 100% 100% no-repeat; mask: var(--ot-door) center / 100% 100% no-repeat;
}
.ot-speaker__window img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.ot-speaker__letter { padding-top: 18%; font-family: var(--ot-serif); font-size: 1.8rem; font-weight: 700; color: #fff; }
.ot-speaker__role { margin: 0; font-size: .62rem; font-weight: 600; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; color: var(--ot-terra-ink); }
.ot-speaker__name { margin: .15rem 0 0; font-family: var(--ot-serif); font-size: 1.22rem; font-weight: 700; line-height: 1.18; color: var(--ot-title); overflow-wrap: anywhere; }
.ot-speaker__topic { margin: .3rem 0 0; font-family: var(--ot-read); font-size: 1.04rem; font-style: italic; line-height: 1.35; color: var(--ot-muted); }
.ot-speaker--main {
    grid-template-columns: 1fr; justify-items: center; gap: 0; padding: 1.3rem 1.1rem 1.5rem; text-align: center;
    box-shadow: inset 0 0 0 1px var(--ot-line), inset 0 0 0 5px var(--ot-paper), inset 0 0 0 6px var(--ot-line), var(--ot-drop);
}
.ot-speaker--main .ot-speaker__art { --w: min(15rem, 72vw); position: relative; isolation: isolate; width: var(--w); }
/* the wall of kawung batik behind the door, under the roof */
.ot-speaker--main .ot-speaker__art::before {
    content: ''; position: absolute; z-index: -2; left: 7%; right: 7%; top: calc(var(--w) * .47); bottom: 0; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' stroke='%23e2a21a' stroke-opacity='.45' stroke-width='.8'%3E%3Cellipse cx='6.5' cy='6.5' rx='5.6' ry='3.1' transform='rotate(45 6.5 6.5)'/%3E%3Cellipse cx='17.5' cy='17.5' rx='5.6' ry='3.1' transform='rotate(45 17.5 17.5)'/%3E%3Cellipse cx='17.5' cy='6.5' rx='5.6' ry='3.1' transform='rotate(-45 17.5 6.5)'/%3E%3Cellipse cx='6.5' cy='17.5' rx='5.6' ry='3.1' transform='rotate(-45 6.5 17.5)'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 24px 24px, var(--ot-wall);
    box-shadow: inset 0 0 0 1.4px var(--inv-accent);
}
.ot-speaker__roof { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 3px 3px rgb(0 0 0 / .2)); }
.ot-speaker--main .ot-speaker__door { position: relative; z-index: -1; width: 74%; margin: -5% auto 0; padding: 3.5px; }
.ot-speaker--main .ot-speaker__letter { font-size: 3.4rem; }
.ot-speaker--main .ot-speaker__text { margin-top: 1rem; }
.ot-speaker--main .ot-speaker__name { font-size: 1.5rem; }
.ot-speaker--main .ot-speaker__topic {
    display: inline-block; margin-top: .6rem; padding: .5rem 1rem; border-radius: 14px; font-size: 1.1rem; color: var(--inv-text);
    background: color-mix(in srgb, var(--inv-soft) 62%, transparent); box-shadow: inset 0 0 0 1px var(--ot-line);
}

/* prayer: the calligraphy frame with a hilal */
.ot-prayer__frame { padding-top: 3.3rem; }
.ot-prayer__hilal { width: 2.3rem; margin: -.4rem auto .3rem; transform: rotate(-18deg); }
.ot-prayer__eyebrow { margin: 0 0 .8rem; font-size: .64rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ot-terra-ink); }
.ot-prayer__arabic { margin: 0 0 1rem; font-size: 1.5rem; text-wrap: balance; }
.ot-prayer__text { margin: 0; }
.ot-prayer__text p { margin: 0; font-family: var(--ot-read); font-size: 1.18rem; font-style: italic; font-weight: 500; line-height: 1.5; }

/* rundown "Pawai Obor": the parade road with a torch at every step; dark until the guest lights the first torch */
.ot-rundown__hint { display: none; margin: -.6rem auto 0 !important; font-family: var(--ot-read); font-size: 1.08rem; font-style: italic; color: var(--inv-shine); }
.ot-rundown.is-armed .ot-rundown__hint { display: block; }
.ot-rundown__list { position: relative; max-width: 24rem; margin: 3.2rem auto 0; padding: 0; list-style: none; text-align: left; }
/* the road: a dark rope; the fire running down it once lit */
.ot-rundown__list::before, .ot-rundown__list::after {
    content: ''; position: absolute; left: calc(1.5rem - 1.5px); top: 2.6rem; bottom: 1.2rem; width: 3px; border-radius: 3px;
}
.ot-rundown__list::before { background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--inv-shine) 30%, transparent) 0 6px, transparent 6px 10px); }
.ot-rundown__list::after {
    transform-origin: top; background: linear-gradient(180deg, var(--inv-shine), var(--inv-flame) 40%, var(--inv-shine) 70%, var(--inv-flame));
    box-shadow: 0 0 10px color-mix(in srgb, var(--inv-flame) 80%, transparent);
}
.ot-rundown.is-armed .ot-rundown__list::after { transform: scaleY(0); }
.ot-rundown.is-lit .ot-rundown__list::after { transition: transform calc(var(--ot-steps, 5) * .38s) linear .25s; }
.ot-rundown__item { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: start; column-gap: .75rem; padding: 0 0 1.1rem; }
.ot-rundown__item:last-child { padding-bottom: 0; }
.ot-rundown__torch {
    position: relative; display: block; width: 3rem; height: 4.4rem; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ot-rundown__torch:focus-visible { outline: 2px solid var(--inv-shine); outline-offset: 3px; border-radius: 12px; }
.ot-rundown__obor { position: absolute; left: 50%; top: -.2rem; width: 2rem; height: auto; margin-left: -1rem; clip-path: inset(-30% -80% 36% -80%); }
/* unlit: only the charred wick; the fire catches torch after torch (--i) */
.ot-rundown.is-armed .ot-obor__fire { opacity: 0; transform: scale(.25); }
.ot-rundown.is-armed .ot-obor__halo { opacity: 0; }
.ot-rundown.is-lit .ot-obor__fire { transition: opacity .45s ease calc(var(--i) * .38s + .25s), transform .7s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i) * .38s + .25s); }
.ot-rundown.is-lit .ot-obor__halo { transition: opacity .8s ease calc(var(--i) * .38s + .3s); }
.ot-rundown__body {
    padding: .75rem .95rem .8rem; border-radius: 14px;
    background: color-mix(in srgb, var(--inv-deep) 55%, transparent);
    box-shadow: inset 0 0 0 1px var(--ot-line), 0 0 26px -10px color-mix(in srgb, var(--inv-flame) 60%, transparent);
}
.ot-rundown.is-armed .ot-rundown__body { opacity: .62; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 25%, transparent); }
.ot-rundown.is-lit .ot-rundown__body { transition: opacity .6s ease calc(var(--i) * .38s + .35s), box-shadow .8s ease calc(var(--i) * .38s + .35s); }
.ot-rundown__time {
    display: inline-block; margin-bottom: .3rem; padding: .14rem .62rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
    font-variant-numeric: tabular-nums; color: var(--inv-deep); background: var(--ot-foil); background-size: 220% 100%;
}
.ot-rundown.is-armed .ot-rundown__time { color: var(--inv-shine); background: transparent; box-shadow: inset 0 0 0 1px var(--ot-line); }
.ot-rundown__body h3 { margin: 0; font-family: var(--ot-serif); font-size: 1.1rem; font-weight: 700; line-height: 1.3; color: #fff; }
.ot-rundown__body p { margin: .15rem 0 0; font-size: .85rem; color: var(--ot-cream-muted); }

/* charity: the programme, the beneficiaries in a kawung wreath, the needs as chips, the photo melting in */
.ot-charity--photo { padding-top: 0; }
.ot-charity__photo {
    position: relative; z-index: -1; height: 14rem; margin: 0 -1.4rem -3rem; overflow: hidden;
    -webkit-mask: linear-gradient(180deg, #000 45%, transparent); mask: linear-gradient(180deg, #000 45%, transparent);
}
.ot-charity__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: .9; }
.ot-charity__title { margin: 0 auto; max-width: 20ch; font-family: var(--ot-serif); font-size: 1.5rem; font-weight: 700; line-height: 1.22; color: #fff; text-wrap: balance; }
.ot-charity__badge { position: relative; display: grid; place-items: center; width: 11rem; aspect-ratio: 1; margin: 1.4rem auto 1.2rem !important; }
.ot-charity__wreath { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--inv-shine) 35%, transparent)); }
.ot-charity__badge span {
    position: relative; display: grid; place-items: center; width: 70%; aspect-ratio: 1; padding: .6rem; border-radius: 50%;
    font-family: var(--ot-serif); font-size: 1.12rem; font-weight: 700; line-height: 1.18; text-wrap: balance; color: var(--ot-title);
    background: radial-gradient(circle at 38% 30%, #fffdf6, var(--ot-paper) 60%, var(--ot-gold-3));
    box-shadow: 0 0 0 2px var(--inv-accent), 0 14px 24px -12px rgb(0 0 0 / .5);
}
.ot-charity__text { color: var(--ot-cream-muted); font-size: .92rem; }
.ot-charity__needs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; max-width: 24rem; margin: 1rem auto 0; padding: 0; list-style: none; }
.ot-charity__needs li {
    display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .9rem; border-radius: 999px; font-size: .86rem; font-weight: 500;
    color: #fff; background: color-mix(in srgb, var(--inv-deep) 30%, transparent); box-shadow: inset 0 0 0 1px var(--ot-line);
}
.ot-charity__needs li::before {
    content: ''; width: 8px; height: 12px; flex: none; background: linear-gradient(0deg, var(--inv-flame), var(--inv-shine));
    -webkit-mask: var(--ot-flame-mask) center / contain no-repeat; mask: var(--ot-flame-mask) center / contain no-repeat;
}
.ot-charity__button {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.5rem; min-height: 2.9rem; padding: .6rem 1.6rem; text-decoration: none;
    color: var(--inv-deep) !important; background: var(--ot-foil) !important; background-size: 220% 100% !important; font-weight: 600;
}

/* story: small door arches beside the text, alternating; text-only chapters as warm cards */
.ot-story__list { display: grid; gap: 2.2rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.ot-story__item { display: grid; grid-template-columns: 42% minmax(0, 1fr); align-items: center; gap: 1.2rem; }
.ot-story__item--flip { grid-template-columns: minmax(0, 1fr) 42%; }
.ot-story__item--flip .ot-story__media { order: 2; }
.ot-story__media { filter: drop-shadow(0 0 0 transparent) drop-shadow(0 14px 18px color-mix(in srgb, var(--inv-deep) 30%, transparent)); }
.ot-story__photo {
    display: block; width: 100%; aspect-ratio: 172 / 210; object-fit: cover; object-position: center 28%;
    -webkit-mask: var(--ot-door) center / 100% 100% no-repeat; mask: var(--ot-door) center / 100% 100% no-repeat;
}
.ot-story__when {
    display: inline-block; padding: .2rem .75rem; border-radius: 999px; font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ot-terra-ink); box-shadow: inset 0 0 0 1px var(--ot-line);
}
.ot-story__body h3 { margin: .5rem 0 0; font-family: var(--ot-serif); font-size: 1.3rem; font-weight: 700; line-height: 1.18; color: var(--ot-title); }
.ot-story__body p { margin: .35rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--ot-muted); }
.ot-story__item--text { grid-template-columns: 2.6rem minmax(0, 1fr); align-items: start; gap: .9rem; padding: 1.15rem 1.2rem; border-radius: 18px; background: color-mix(in srgb, var(--inv-soft) 60%, var(--ot-paper)); box-shadow: inset 0 0 0 1px var(--ot-line); }
.ot-story__dot {
    display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; font-family: var(--ot-serif); font-size: 1.15rem; font-weight: 700;
    color: #fff; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-terra) 70%, #fff), var(--inv-terra));
    box-shadow: 0 0 0 2px var(--ot-paper), 0 0 0 3.2px var(--inv-accent);
}

/* etiquette: cream rows with a small kawung flower */
.ot-etiquette__list { display: grid; gap: .55rem; max-width: 24rem; margin: 0 auto; padding: 1rem; list-style: none; text-align: left; border-radius: 20px; background: var(--ot-paper); box-shadow: inset 0 0 0 1px var(--ot-line), var(--ot-drop); }
.ot-etiquette__list li { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); align-items: start; gap: .7rem; padding: .45rem .3rem; font-size: .92rem; line-height: 1.5; }
.ot-etiquette__list li + li { border-top: 1px solid color-mix(in srgb, var(--inv-accent) 28%, transparent); padding-top: .65rem; }
.ot-etiquette__list svg { width: .8rem; height: 1.25rem; margin: .1rem auto 0; overflow: visible; }

/* gallery: the first photo a tall door arch over two rows, the others with a fine gold rule */
.ot-gallery .inv-gallery { gap: .6rem; }
.ot-gallery .inv-gallery__item { border-radius: 14px; box-shadow: 0 0 0 1px var(--ot-line), 0 16px 28px -18px rgb(0 0 0 / .7); }
.ot-gallery .inv-gallery__item:first-child {
    grid-row: span 2; aspect-ratio: auto; border-radius: 0; box-shadow: none;
    -webkit-mask: var(--ot-door) center / 100% 100% no-repeat; mask: var(--ot-door) center / 100% 100% no-repeat;
}

/* live streaming */
.ot-stream__card {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem 1rem; max-width: 24rem; margin: 0 auto; padding: 1.35rem;
    border-radius: 22px; color: var(--inv-background); text-align: left;
    background: radial-gradient(70% 90% at 100% 100%, color-mix(in srgb, var(--inv-flame) 26%, transparent), transparent 70%), linear-gradient(140deg, var(--inv-primary), var(--inv-deep));
    box-shadow: inset 0 0 0 1px var(--ot-line), var(--ot-drop);
}
.ot-stream__icon { display: grid; place-items: center; width: 3.3rem; height: 3.3rem; border-radius: 50%; color: var(--inv-deep); background: var(--ot-foil); background-size: 220% 100%; }
.ot-stream__icon .ot-icon { width: 1.65rem; height: 1.65rem; }
.ot-stream__title { margin: 0 0 .1rem; font-family: var(--ot-serif); font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: #fff; }
.ot-stream__text p { margin: 0; font-size: .86rem; color: var(--ot-cream-muted); }
.ot-stream__text .ot-stream__note { margin-top: .3rem; font-weight: 600; color: var(--inv-shine); }
.ot-stream__button { grid-column: 1 / -1; min-height: 2.75rem; color: var(--inv-deep) !important; background: var(--ot-foil) !important; background-size: 220% 100% !important; font-weight: 600; }

/* RSVP card: cream with a band of tumpal triangles along the top */
.ot-rsvp__card {
    position: relative; overflow: hidden; max-width: 25rem; margin: 0 auto; padding: 2.2rem 1.15rem 1.4rem; border-radius: 20px; color: var(--inv-text); background: var(--ot-paper);
    box-shadow: inset 0 0 0 1px var(--ot-line), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.ot-rsvp__card::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 13px; transform: scaleY(-1);
    background: linear-gradient(90deg, var(--inv-terra), var(--inv-accent) 35%, var(--ot-gold-3) 50%, var(--inv-accent) 65%, var(--inv-terra));
    -webkit-mask: var(--ot-tumpal) center / 18px 13px repeat-x; mask: var(--ot-tumpal) center / 18px 13px repeat-x;
}
.ot-rsvp__intro { margin: 0 auto 1.1rem; max-width: 30ch; font-size: .9rem; color: var(--ot-muted); }
.ot-rsvp__sent { margin-bottom: 1rem; }
.ot-rsvp__check { display: block; width: 4.25rem; height: 4.25rem; margin: 0 auto .5rem; }
.ot-rsvp__check circle { fill: var(--inv-primary); }
.ot-rsvp__check path { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
html.inv-anim .ot-rsvp__sent .ot-rsvp__check { animation: ot-bounce .8s cubic-bezier(.34, 1.56, .64, 1) both; }
html.inv-anim .ot-rsvp__sent .ot-rsvp__check path { animation: ot-draw .45s ease-out .35s both; }
.ot-rsvp__thanks { margin: 0; font-family: var(--ot-script); font-size: 2.3rem; line-height: 1.15; color: var(--ot-title); }
.ot-rsvp__line { margin: .1rem 0 0; font-size: .9rem; color: var(--ot-muted); }
.ot-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .84rem; font-weight: 600; color: var(--ot-title); }

/* gift (ember band): cream cards with a gold tumpal band, two per row (odd last across) */
.ot-gift__intro { color: var(--ot-cream-muted) !important; }
.ot-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.3rem; }
.ot-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ot-gift .inv-gift__account,
.ot-gift .inv-gift__address {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; margin: 0; overflow: hidden;
    padding: 1.9rem .75rem 1rem; border-radius: 16px; color: var(--inv-text); background: var(--ot-paper);
    box-shadow: inset 0 0 0 1px var(--ot-line), 0 18px 30px -20px rgb(0 0 0 / .6);
}
.ot-gift .inv-gift__account::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12px; transform: scaleY(-1);
    background: linear-gradient(90deg, var(--ot-gold-1), var(--inv-accent) 30%, var(--ot-gold-3) 50%, var(--inv-accent) 70%, var(--ot-gold-1));
    -webkit-mask: var(--ot-tumpal) center / 16px 12px repeat-x; mask: var(--ot-tumpal) center / 16px 12px repeat-x;
}
.ot-gift .inv-gift__account p, .ot-gift .inv-gift__address p { margin: 0; }
.ot-gift .inv-gift__bank { font-weight: 600; font-size: .85rem; color: var(--ot-title); }
.ot-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .4rem; background: #fff; }
.ot-gift .inv-gift__logo img { max-width: 5rem; }
.ot-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); }
.ot-gift .inv-gift__holder { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ot-muted); overflow-wrap: anywhere; }
.ot-gift .inv-button { margin-top: .35rem; min-height: 2.25rem; padding: .35rem .9rem; font-size: .74rem; font-weight: 600; }
.ot-gift .inv-gift__address { margin-top: .75rem; padding-top: 1.1rem; font-size: .875rem; }
.ot-gift .inv-gift__address .inv-gift__holder { font-size: .72rem; }

/* co-hosts: names in the serif split by small flames, on the night band */
.ot-cohosts__list { display: flex; flex-direction: column; align-items: center; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.ot-cohosts__list li { max-width: 26ch; font-family: var(--ot-serif); font-size: 1.14rem; font-weight: 600; line-height: 1.32; color: #fff; }
.ot-cohosts__list li + li::before {
    content: ''; display: block; width: 9px; height: 13px; margin: 0 auto .55rem; background: var(--ot-fire);
    -webkit-mask: var(--ot-flame-mask) center / contain no-repeat; mask: var(--ot-flame-mask) center / contain no-repeat;
}

/* contacts */
.ot-contacts__list { display: grid; gap: .7rem; max-width: 24rem; margin: 0 auto; }
.ot-contact {
    display: grid; grid-template-columns: 2.9rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .55rem .55rem .55rem .6rem; border-radius: 999px;
    background: var(--ot-paper); text-align: left; box-shadow: inset 0 0 0 1px var(--ot-line);
}
.ot-contact__avatar {
    display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; font-family: var(--ot-serif); font-size: 1.3rem; font-weight: 700;
    color: #fff; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-primary) 80%, #fff), var(--inv-deep)); box-shadow: 0 0 0 2px var(--ot-paper), 0 0 0 3.2px var(--inv-accent);
}
.ot-contact p { margin: 0; }
.ot-contact__name { font-weight: 600; font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; }
.ot-contact__role { font-size: .78rem; color: var(--ot-muted); }
.ot-contact__phone { font-size: .85rem; }
.ot-contact__button { min-height: 2.5rem; padding: .45rem .95rem; font-size: .8rem; font-weight: 600; }
.ot-contact__button .ot-icon { width: 1.05rem; height: 1.05rem; }

/* health protocol */
.ot-protocol__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.ot-protocol__list li { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border-radius: 999px; font-size: .84rem; font-weight: 500; background: var(--ot-paper); box-shadow: inset 0 0 0 1px var(--ot-line); }
.ot-protocol__list .ot-icon { width: 1rem; height: 1rem; color: var(--ot-terra-ink); }
.ot-protocol__note { font-size: .88rem; color: var(--ot-muted); }

/* vendors (donatur & sponsor) */
.ot-vendors__list { max-width: 24rem; margin: 0 auto; padding: .3rem 1.15rem; list-style: none; border-radius: 18px; background: var(--ot-paper); box-shadow: inset 0 0 0 1px var(--ot-line), var(--ot-drop); }
.ot-vendor { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem 0; text-align: left; border-bottom: 1px solid var(--ot-line); }
.ot-vendor:last-child { border-bottom: 0; }
.ot-vendor__text { display: flex; flex-direction: column; min-width: 0; }
.ot-vendor__role { font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ot-terra-ink); }
.ot-vendor__name { font-family: var(--ot-serif); font-size: 1.1rem; font-weight: 700; line-height: 1.28; color: var(--inv-text); overflow-wrap: anywhere; }
.ot-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: 600; text-decoration: none; color: var(--ot-title); box-shadow: inset 0 0 0 1px var(--ot-line);
}
.ot-vendor__link .ot-icon { width: .95rem; height: .95rem; }

/* closing: compact — the photo melting into the night, the mosque with the parade, thanks and the name */
.ot-closing { padding: 2.6rem 1.5rem 5.8rem; }
.ot-closing--photo { padding-top: 0; }
.ot-closing__photo {
    position: relative; z-index: -1; height: min(22rem, calc(var(--inv-screen, 100svh) * .48)); margin: 0 -1.5rem; overflow: hidden;
    -webkit-mask: linear-gradient(180deg, #000 52%, transparent); mask: linear-gradient(180deg, #000 52%, transparent);
}
.ot-closing__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.ot-closing__body { position: relative; }
.ot-closing--photo .ot-closing__body { margin-top: -5.4rem; }
.ot-closing__scene { position: relative; width: 15rem; margin: 0 auto .5rem; }
.ot-closing__masjid { width: 10.5rem; margin: 0 auto; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--inv-flame) 35%, transparent)); }
.ot-closing__parade { width: 100%; margin-top: -1.1rem; }
.ot-closing__title { margin: 0 0 .6rem; font-family: var(--ot-serif); font-size: 2rem; font-weight: 600; line-height: 1.08; color: #fff; }
.ot-closing__title em { font-family: var(--ot-script); font-style: normal; font-weight: 400; font-size: 1.32em; color: var(--inv-shine); }
.ot-closing__message { margin: 0 auto; max-width: 32ch; font-size: .9rem; line-height: 1.55; color: var(--ot-cream-muted); }
.ot-closing__salam { margin: .7rem auto 0; max-width: 28ch; font-family: var(--ot-read); font-size: 1.1rem; font-style: italic; font-weight: 600; line-height: 1.35; color: var(--inv-shine); }
.ot-closing__signature { margin: .45rem auto 0; max-width: 30ch; font-size: .84rem; color: var(--ot-cream-muted); }
.ot-closing__names { margin: .55rem auto 0; max-width: 16ch; font-family: var(--ot-script); font-size: 2.4rem; word-spacing: .14em; line-height: 1.15; padding: 0 .15em .1em; text-wrap: balance; }

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

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

/* wishes */
.ot-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.ot-wishes .inv-form { padding: 1.3rem 1.1rem; border-radius: 20px; background: var(--ot-paper); box-shadow: inset 0 0 0 1px var(--ot-line), var(--ot-drop); }
.ot-wishes .inv-wishes__list { margin-top: 1.4rem; }
.ot-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list { padding: .55rem; border-radius: 18px; background: color-mix(in srgb, #fff 45%, transparent); box-shadow: inset 0 0 0 1px var(--ot-line); }
.ot-wishes .inv-wish { padding: .75rem .9rem; border-radius: 14px; background: #fff; text-align: left; box-shadow: 0 2px 10px rgb(0 0 0 / .05); border-left: 3px solid var(--inv-terra); }
.ot-wishes .inv-wish__name { font-weight: 600; color: var(--ot-title); }
.ot-wishes .inv-wish__message { font-size: .88rem; line-height: 1.5; }
.ot-wishes .inv-wish__time { font-size: .72rem; color: var(--ot-muted); }

/* ---------- 7. shared components ---------- */
.ot-main .inv-button { font-weight: 600; }
body .inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--inv-deep) 94%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-background) 72%, transparent);
    --inv-nav-active: var(--inv-shine);
    font-family: var(--ot-sans);
}

/* ---------- 8. screen sizes ---------- */
/* the cover in px steps per screen height (never svh: Chrome on iPhone sizes it to the whole screen) */
@media (max-height: 800px) {
    .ot-cover { --gate-cover: 15rem; }
    .ot-cover__title { font-size: 2.8rem; }
}
@media (max-height: 760px) {
    .ot-cover { --gate-cover: 13.2rem; padding-top: 1.4rem; padding-bottom: 1.4rem; }
    .ot-cover__title { font-size: 2.6rem; }
    .ot-cover__quote { font-size: 1rem; margin-top: .35rem; }
    .ot-cover__guest { margin-top: .55rem; }
    .ot-cover__open { margin-top: .65rem; }
    .ot-cover__torch { width: 2.1rem; }
    .ot-cover__torch--left { left: -2.6rem; }
    .ot-cover__torch--right { right: -2.6rem; }
}
@media (max-height: 700px) {
    .ot-cover { --gate-cover: 12rem; padding-top: 1.1rem; padding-bottom: 1.15rem; }
    .ot-cover__host { font-size: .62rem; margin-bottom: .25rem; }
    .ot-cover__title { font-size: 2.4rem; margin-top: .2rem; }
    .ot-cover__ribbon { font-size: .92rem; }
    .ot-cover__hijri { font-size: .96rem; }
    .ot-cover__quote { font-size: .95rem; line-height: 1.26; }
    .ot-cover__guest { padding: .35rem .85rem .4rem; }
    .ot-cover__guest-name { font-size: 1.06rem; }
    .ot-cover__open { min-height: 2.7rem; padding: .55rem 1.6rem; }
    .ot-cover__hilal { width: 2.3rem; }
}
@media (max-height: 660px) {
    .ot-cover { --gate-cover: 11rem; }
    .ot-cover__title { font-size: 2.25rem; }
    .ot-cover__quote { font-size: .92rem; }
    .ot-cover__torch { width: 1.9rem; }
    .ot-cover__torch--left { left: -2.3rem; }
    .ot-cover__torch--right { right: -2.3rem; }
}
@media (max-height: 600px) {
    .ot-cover { --gate-cover: 9.6rem; }
    .ot-cover__title { font-size: 2.05rem; }
    .ot-cover__quote { font-size: .86rem; }
}
@media (max-width: 360px) {
    .ot-cover__title { font-size: 2.35rem; }
    .ot-heading__title { font-size: 1.8rem; }
    .ot-occasion__stage { grid-template-columns: 2rem minmax(0, 1fr) 2rem; gap: .3rem; }
}

/* wide screens: the phone-width column on a night backdrop with the kawung print */
@media (min-width: 560px) {
    body.ot-body {
        background: radial-gradient(70vw 60vh at 50% 0%, color-mix(in srgb, var(--inv-primary) 60%, transparent), transparent 70%), radial-gradient(70vw 40vh at 50% 100%, color-mix(in srgb, var(--inv-flame) 22%, transparent), transparent 70%), var(--inv-deep);
        background-attachment: fixed;
    }
    body.ot-body::before {
        content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .09; background: var(--inv-shine);
        -webkit-mask: var(--ot-ground) center / 40px 40px repeat; mask: var(--ot-ground) center / 40px 40px repeat;
    }
    .ot-main { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
}

/* ---------- 9. motion ---------- */
@keyframes ot-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ot-bounce { 0% { transform: scale(0); } 55% { transform: scale(1.15); } 75% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes ot-rise { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ot-zoom-out { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes ot-shine { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
@keyframes ot-breathe { 0%, 100% { opacity: .7; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes ot-embers { from { background-position: 0 0; } to { background-position: 0 -380px; } }
@keyframes ot-up { from { opacity: 0; transform: translateY(2.5rem); } to { opacity: 1; transform: none; } }
@keyframes ot-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ot-flicker { 0%, 100% { transform: scale(1, 1) skewX(0); } 25% { transform: scale(.93, 1.07) skewX(2deg); } 50% { transform: scale(1.05, .95) skewX(-1.5deg); } 75% { transform: scale(.97, 1.04) skewX(1deg); } }
@keyframes ot-halo { 0%, 100% { opacity: .75; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes ot-twinkle { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes ot-ping { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes ot-tap { 0%, 100% { transform: translate(0, 0) scale(1); } 45% { transform: translate(-3px, -5px) scale(.92); } }
@keyframes ot-sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }

/* gold foil: a slow moving shine */
html.inv-anim :is(.ot-heading__title em, .ot-cover__title, .ot-occasion__type, .ot-occasion__hijri, .ot-closing__names, .ot-cover__open, .ot-tap__label) { animation: ot-shine 7s ease-in-out infinite; }

/* every flame flickers, every halo breathes (each torch on its own beat) */
html.inv-anim .ot-obor__flame, html.inv-anim .ot-obor__core { animation: ot-flicker 1.5s ease-in-out infinite; }
html.inv-anim .ot-obor__halo { animation: ot-halo 2.8s ease-in-out infinite; }
html.inv-anim .ot-parade__flame { animation: ot-flicker 1.3s ease-in-out calc(var(--i, 0) * -.23s) infinite; }
html.inv-anim :is(.ot-rundown__item:nth-child(odd), .ot-cover__torch--right, .ot-occasion__torch--right) :is(.ot-obor__flame, .ot-obor__core) { animation-delay: -.6s; }
html.inv-anim .ot-obor__core { animation-duration: 1.1s; }
html.inv-anim .ot-countdown .inv-countdown__item::before { animation: ot-flicker 1.4s ease-in-out infinite; }
html.inv-anim .ot-countdown .inv-countdown__item:nth-child(even)::before { animation-delay: -.7s; }
html.inv-anim .ot-gate__vents, html.inv-anim .ot-masjid__glow { animation: ot-twinkle 3.2s ease-in-out infinite; }

/* cover (≤ 2.5 s, once): the gate rises and its photo settles, the torches rise from below, the hilal fades in;
   then a living ground: the fire light breathes and embers drift up */
html.inv-anim .ot-gate--cover { animation: ot-rise .9s cubic-bezier(.2, .7, .2, 1) .1s both; }
html.inv-anim .ot-gate--cover .ot-gate__photo { animation: ot-zoom-out 1.3s cubic-bezier(.2, .7, .2, 1) .1s both; }
html.inv-anim .ot-cover__torch { animation: ot-up 1s cubic-bezier(.3, 1.2, .5, 1) .45s both; }
html.inv-anim .ot-cover__torch--right { animation-delay: .6s; }
html.inv-anim .ot-cover__torch .ot-obor { transform-origin: 50% 100%; animation: ot-sway 5s ease-in-out 1.6s infinite; }
html.inv-anim .ot-cover__hilal { animation: ot-fade 1.4s ease .8s both; }
html.inv-anim .ot-cover__art::before { animation: ot-breathe 4.5s ease-in-out infinite; }
html.inv-anim .ot-cover__glow::after { animation: ot-embers 16s linear infinite; }
html.inv-anim .ot-occasion__torch .ot-obor, html.inv-anim .ot-scene-obor { transform-origin: 50% 100%; animation: ot-sway 5.5s ease-in-out infinite; }
html.inv-anim .ot-occasion__torch--right .ot-obor { animation-delay: -2.4s; }

/* the tap marker: rings ping outward, the hand taps */
html.inv-anim .ot-tap__ring { animation: ot-ping 1.8s ease-out infinite; }
html.inv-anim .ot-tap__ring--late { animation-delay: .9s; }
html.inv-anim .ot-tap__hand { animation: ot-tap 1.2s ease-in-out infinite; }
html:not(.inv-anim) .ot-tap__ring { opacity: .6; }
html.inv-anim .ot-rundown.is-armed .ot-rundown__hint { animation: ot-twinkle 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .ot-cover, .ot-cover--leave, .ot-cover__inner, .ot-countdown__shade,
    .ot-rundown.is-lit .ot-obor__fire, .ot-rundown.is-lit .ot-obor__halo, .ot-rundown.is-lit .ot-rundown__body, .ot-rundown.is-lit .ot-rundown__list::after { transition: none; }
}

/* ---------- 10. intro scene "Pawai Menuju Masjid" (scene.json + sections/_scene) ----------
   The intro is teleported to <body>: everything here stands on its own classes. */
.ot-scene-ground { position: absolute; inset: 0; background: var(--inv-shine); opacity: .1; -webkit-mask: var(--ot-ground) center / 40px 40px repeat; mask: var(--ot-ground) center / 40px 40px repeat; }
.ot-scene-sky {
    position: absolute; inset: 0;
    background:
        radial-gradient(1.6px 1.6px at 12% 20%, #fff, transparent), radial-gradient(1.2px 1.2px at 28% 8%, var(--inv-shine), transparent),
        radial-gradient(1.8px 1.8px at 46% 14%, #fff, transparent), radial-gradient(1.2px 1.2px at 64% 6%, var(--inv-shine), transparent),
        radial-gradient(1.5px 1.5px at 86% 30%, #fff, transparent), radial-gradient(1.2px 1.2px at 8% 52%, var(--inv-shine), transparent),
        radial-gradient(1.4px 1.4px at 92% 62%, #fff, transparent), radial-gradient(1.1px 1.1px at 36% 40%, #fff, transparent),
        radial-gradient(1.3px 1.3px at 72% 46%, var(--inv-shine), transparent);
}
html.inv-anim .ot-scene-sky { animation: ot-twinkle 3s ease-in-out infinite; }
.ot-scene-glow { position: absolute; inset: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-flame) 40%, transparent), color-mix(in srgb, var(--inv-shine) 12%, transparent) 55%, transparent); }
html.inv-anim .ot-scene-glow { animation: ot-breathe 4s ease-in-out infinite; }
.ot-scene-fit { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ot-scene-fit > svg { width: 100%; height: 100%; }
.ot-scene-fit--flip > svg { transform: scaleX(-1); }
.ot-scene-fit--bottom { align-items: flex-end; }
.ot-scene-fit--bottom > svg { height: auto; max-height: 100%; }
.ot-scene-masjid { filter: drop-shadow(0 0 24px color-mix(in srgb, var(--inv-flame) 40%, transparent)); }
/* the name card: a cream door-shaped card in a double gold rule */
body.ot-body .inv-intro--scene .inv-scene__card {
    top: 75%;
    -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none; aspect-ratio: auto;
    padding: 1.7rem 1.2rem 1.2rem; border-radius: 999px 999px 16px 16px / 5.5rem 5.5rem 16px 16px;
    background: var(--ot-paper);
    box-shadow: inset 0 0 0 1px var(--ot-line), inset 0 0 0 5px var(--ot-paper), inset 0 0 0 6px var(--ot-line), 0 0 40px -6px color-mix(in srgb, var(--inv-flame) 55%, transparent), 0 24px 40px -14px rgb(0 0 0 / .6);
}
body.ot-body .inv-scene__card .inv-intro__label { font-family: var(--ot-sans); font-size: .62rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--ot-terra-ink); }
body.ot-body .inv-scene__card .inv-intro__names { color: var(--ot-title); line-height: 1.12; overflow-wrap: anywhere; word-spacing: .12em; }
body.ot-body .inv-scene__card .inv-intro__rule { height: 1px; width: 3rem; background: var(--inv-accent); }
body.ot-body .inv-scene__card .inv-intro__date { font-family: var(--ot-serif); font-weight: 600; font-size: .92rem; color: var(--ot-muted); white-space: nowrap; }