/*
 * Template "Kentongan Sahur" (Pengajian & Hari Besar Islam) — sahur on the road as an energetic kampung street-art
 * poster: a deep night (blue by default) lit by sodium-yellow street lamps, tosca and orange spray paint, stencil type,
 * halftone dots, tape strips, stickers and torn poster edges. Signature pieces (own SVG): the bamboo kentongan with
 * its mallet, the old street lamp with its cone of light, the big crescent, the kampung roofline with a small mosque,
 * the rombong cart, nasi bungkus and the volunteer's motorbike. Mobile-first, one column (~460px) on the night wall on
 * wide screens.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (night blue / purple / green / magenta: titles on paper, buttons)   --inv-accent (lamp light: yellow /
 *   lime / magenta)   --inv-background (poster paper)   --inv-text   --inv-deep (the night)   --inv-shine (light of the
 *   lamp on dark)   --inv-soft (the soft tone)   --inv-cool (tosca spray)   --inv-pop (orange spray)
 *
 * Section tones (set in each partial): .sahur-tone--light (poster paper with a torn dark edge on top), --soft (the soft
 * tint), --map (paper printed with streets: the route map) and --deep (the night with halftone and spray clouds).
 * Motion only runs with html.inv-anim (set by <x-inv.head> unless the guest prefers reduced motion).
 *
 * 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, tag, divider, poster, sticker, ornaments, 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 "Biru Malam Natrium" variant (the variant's colours override these) */
    --inv-primary: #1f3c96;
    --inv-accent: #ffc21a;
    --inv-background: #fff5dc;
    --inv-text: #121a35;
    --inv-deep: #0a1638;
    --inv-shine: #ffe266;
    --inv-soft: #ffe7a3;
    --inv-cool: #13b8a8;
    --inv-pop: #ff6a2b;
    --inv-radius: 10px;

    --sahur-stencil: 'Big Shoulders Stencil', 'Big Shoulders', Impact, 'Arial Narrow', sans-serif;
    --sahur-digits: 'Big Shoulders', Impact, 'Arial Narrow', sans-serif;
    --sahur-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sahur-marker: 'Permanent Marker', 'Comic Sans MS', cursive;
    --sahur-script: var(--inv-font-display, 'Great Vibes'), 'Brush Script MT', cursive;
    --sahur-serif: var(--inv-font-heading, 'Cormorant Garamond'), Georgia, 'Times New Roman', serif;
    --sahur-col: 460px;

    --sahur-paper: color-mix(in srgb, #fff 55%, var(--inv-background));
    --sahur-title: color-mix(in srgb, var(--inv-primary) 78%, var(--inv-deep));
    --sahur-muted: color-mix(in srgb, var(--inv-text) 76%, var(--inv-background));
    --sahur-cream: color-mix(in srgb, var(--inv-background) 84%, transparent);
    /* spray colours dark enough to read on paper */
    --sahur-pop-ink: color-mix(in srgb, var(--inv-pop) 72%, #3a0d00);
    --sahur-cool-ink: color-mix(in srgb, var(--inv-cool) 62%, #00261f);
    --sahur-iron: color-mix(in srgb, var(--inv-deep) 55%, #05060a);
    --sahur-iron-light: color-mix(in srgb, var(--inv-deep) 55%, #8a93a8);
    --sahur-night: color-mix(in srgb, var(--inv-deep) 80%, #000);
    /* the iron of the street lamps: lighter than the night so it reads on it */
    --sahur-lamp-iron: color-mix(in srgb, var(--inv-deep) 50%, #5d6884);
    --sahur-bamboo-1: #8c5a1a;
    --sahur-bamboo-2: #e5b85f;
    --sahur-bamboo-3: #f7dc94;
    --sahur-tape: color-mix(in srgb, var(--inv-shine) 45%, rgb(255 255 255 / .55));
    --sahur-line: color-mix(in srgb, var(--inv-text) 16%, transparent);
    --sahur-drop: 0 22px 34px -22px color-mix(in srgb, var(--inv-deep) 80%, transparent);
    /* the torn edge of a poster: a jagged strip */
    --sahur-tear: polygon(0 0, 100% 0, 100% 45%, 96% 85%, 92% 30%, 87% 75%, 83% 22%, 78% 88%, 73% 38%, 67% 70%, 62% 26%, 56% 92%, 50% 40%, 45% 78%, 39% 22%, 34% 72%, 28% 32%, 22% 86%, 17% 28%, 11% 76%, 6% 34%, 0 82%);

    /* colours of the shared components */
    --inv-ambient-1: var(--inv-shine);
    --inv-ambient-2: color-mix(in srgb, var(--inv-cool) 60%, #fff);
}

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

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

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

.sahur-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

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

.sahur-main { max-width: var(--sahur-col); margin: 0 auto; overflow-x: clip; background: var(--inv-background); }
.sahur-branding { max-width: var(--sahur-col); margin: 0 auto; }

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

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

/* ---------- 2. section tones ---------- */
/* light: poster paper, halftone dots in two corners, a torn dark edge on top */
.sahur-tone--light { background: var(--inv-background); }
.sahur-tone--soft {
    background:
        radial-gradient(80% 36% at 50% 0%, color-mix(in srgb, #fff 50%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-soft), color-mix(in srgb, var(--inv-soft) 55%, var(--inv-background)));
}
/* map: paper printed with a street grid and a broad avenue */
.sahur-tone--map {
    background:
        linear-gradient(118deg, transparent 44%, color-mix(in srgb, var(--inv-soft) 75%, transparent) 44% 50%, transparent 50%),
        linear-gradient(28deg, transparent 70%, color-mix(in srgb, var(--inv-cool) 16%, transparent) 70% 74%, transparent 74%),
        repeating-linear-gradient(25deg, transparent 0 46px, color-mix(in srgb, var(--inv-primary) 10%, transparent) 46px 48px),
        repeating-linear-gradient(-65deg, transparent 0 62px, color-mix(in srgb, var(--inv-primary) 10%, transparent) 62px 64px),
        var(--inv-background);
}
.sahur-tone--light::before, .sahur-tone--soft::before, .sahur-tone--map::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .2;
    background: radial-gradient(circle, var(--inv-pop) 1.3px, transparent 1.8px) 0 0 / 9px 9px;
    -webkit-mask: radial-gradient(42% 26% at 100% 0%, #000, transparent), radial-gradient(42% 26% at 0% 100%, #000, transparent);
    mask: radial-gradient(42% 26% at 100% 0%, #000, transparent), radial-gradient(42% 26% at 0% 100%, #000, transparent);
}
.sahur-tone--soft::before { background-image: radial-gradient(circle, var(--inv-primary) 1.3px, transparent 1.8px); opacity: .14; }
.sahur-tone--light::after, .sahur-tone--soft::after, .sahur-tone--map::after {
    content: ''; position: absolute; left: 0; right: 0; top: -1px; z-index: 1; height: 13px; pointer-events: none;
    background: var(--inv-deep); clip-path: var(--sahur-tear);
}
/* deep: the night with a glow of the primary, clouds of spray paint and halftone dots */
.sahur-tone--deep {
    color: var(--inv-background);
    background:
        radial-gradient(90% 40% at 85% 0%, color-mix(in srgb, var(--inv-primary) 80%, transparent), transparent 75%),
        radial-gradient(60% 26% at 0% 60%, color-mix(in srgb, var(--inv-cool) 20%, transparent), transparent 75%),
        radial-gradient(60% 26% at 100% 100%, color-mix(in srgb, var(--inv-pop) 20%, transparent), transparent 75%),
        var(--inv-deep);
}
.sahur-tone--deep::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .22;
    background: radial-gradient(circle, var(--inv-shine) 1.2px, transparent 1.7px) 0 0 / 10px 10px;
    -webkit-mask: radial-gradient(50% 30% at 0% 0%, #000, transparent), radial-gradient(50% 30% at 100% 100%, #000, transparent);
    mask: radial-gradient(50% 30% at 0% 0%, #000, transparent), radial-gradient(50% 30% at 100% 100%, #000, transparent);
}
.sahur-tone--deep a:not(.inv-button) { color: var(--inv-shine); }
.sahur-tone--deep .sahur-arabic { color: var(--inv-shine); }

/* a client photo behind a section, under a strong gradient of the night */
.sahur-bgphoto { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.sahur-bgphoto img { display: block; width: 100%; height: calc(100% + 80px); margin-top: -40px; object-fit: cover; object-position: center 30%; --inv-parallax: 40px; filter: saturate(1.1); }
.sahur-bgphoto::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(90% 50% at 85% 5%, color-mix(in srgb, var(--inv-primary) 45%, 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: a spray tag, stencil capitals, a sign-painted script word, the route divider */
.sahur-heading { margin: 0 0 2rem; }
.sahur-heading__eyebrow { margin: 0 0 .7rem; }
.sahur-heading__eyebrow span, .sahur-tag span {
    display: inline-block; padding: .16rem .75rem .2rem; transform: rotate(-2deg);
    font-family: var(--sahur-marker); font-size: .86rem; line-height: 1.3; letter-spacing: .02em; color: var(--inv-deep);
    background: var(--inv-cool); border-radius: 3px 8px 4px 9px; box-shadow: 3px 3px 0 color-mix(in srgb, var(--inv-deep) 22%, transparent);
}
.sahur-tag { margin: 0 auto .7rem; }
.sahur-heading__title {
    margin: 0; font-family: var(--sahur-stencil); font-size: 2.55rem; font-weight: 900; line-height: .98;
    letter-spacing: .01em; text-transform: uppercase; color: var(--sahur-title); text-wrap: balance;
}
.sahur-heading__title em {
    display: inline-block; padding: 0 .12em .12em; font-family: var(--sahur-script); font-style: normal; font-weight: 400;
    font-size: 1.12em; line-height: .9; letter-spacing: 0; text-transform: none; word-spacing: .1em; color: var(--sahur-pop-ink);
}
.sahur-heading__divider { margin: .8rem auto 0; }
.sahur-tone--deep .sahur-heading__title { color: #fff; }
.sahur-tone--deep .sahur-heading__title em { color: var(--inv-accent); text-shadow: 2px 2px 0 var(--inv-pop); }

/* divider: the dashed route between two pins and the crescent */
.sahur-divider { display: block; width: min(13.5rem, 72%); height: auto; overflow: visible; }
.sahur-divider__route { stroke: var(--sahur-cool-ink); }
.sahur-divider__pin { fill: var(--sahur-pop-ink); }
.sahur-divider__moon { fill: var(--sahur-title); }
.sahur-tone--deep .sahur-divider__route { stroke: var(--inv-cool); }
.sahur-tone--deep .sahur-divider__pin { fill: var(--inv-pop); }
.sahur-tone--deep .sahur-divider__moon { fill: var(--inv-accent); }

/* a poster pasted on the wall: paper edge with a torn lower corner, two strips of tape */
.sahur-poster { --poster-h: 18rem; position: relative; width: calc(var(--poster-h) * .8 + .9rem); margin: 0 auto; filter: drop-shadow(0 16px 18px rgb(0 0 0 / .45)); }
.sahur-poster__photo {
    position: relative; padding: .45rem; background: var(--sahur-paper);
    clip-path: polygon(0 0, 100% 0, 100% 87%, 97% 90%, 98.5% 93%, 94% 95%, 95% 98%, 90% 100%, 0 100%);
}
.sahur-poster__photo img { display: block; width: 100%; height: var(--poster-h); object-fit: cover; object-position: 50% 25%; }
/* the warm light of the street lamp on the paper */
.sahur-poster__photo::after {
    content: ''; position: absolute; inset: .45rem; pointer-events: none; mix-blend-mode: soft-light;
    background: radial-gradient(70% 55% at 0% 0%, color-mix(in srgb, var(--inv-shine) 70%, transparent), transparent 70%);
}
.sahur-poster__empty {
    display: grid; place-items: center; align-content: center; gap: .3rem; height: var(--poster-h);
    background: radial-gradient(70% 50% at 50% 30%, color-mix(in srgb, var(--inv-primary) 80%, transparent), transparent), var(--inv-deep);
}
.sahur-poster__empty-moon { width: 42%; }
.sahur-poster__empty span { font-family: var(--sahur-stencil); font-weight: 900; font-size: 3.4rem; line-height: 1; letter-spacing: .04em; color: var(--inv-accent); }
.sahur-poster::before, .sahur-poster::after {
    content: ''; position: absolute; z-index: 2; top: -.5rem; width: 4.6rem; height: 1.35rem; background: var(--sahur-tape);
    clip-path: polygon(3% 0, 97% 6%, 100% 30%, 96% 55%, 100% 80%, 96% 100%, 4% 94%, 0 70%, 4% 45%, 0 20%);
}
.sahur-poster::before { left: -1.4rem; transform: rotate(-32deg); }
.sahur-poster::after { right: -1.4rem; transform: rotate(30deg); }

/* a round sticker (monogram or logo) */
.sahur-sticker {
    position: absolute; z-index: 3; display: grid; place-items: center; width: 3.9rem; height: 3.9rem; border-radius: 50%; overflow: hidden;
    font-family: var(--sahur-stencil); font-weight: 900; font-size: 1.35rem; line-height: 1; letter-spacing: .04em; color: #fff;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-pop) 70%, #fff), var(--inv-pop) 60%);
    box-shadow: 0 0 0 3px var(--sahur-paper), 0 8px 14px -6px rgb(0 0 0 / .55);
}
.sahur-sticker span { padding: 0 .3rem; text-align: center; overflow-wrap: anywhere; }
.sahur-sticker::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px dashed rgb(255 255 255 / .7); }
.sahur-poster__sticker { left: -1rem; bottom: -.9rem; transform: rotate(-12deg); }

/* ornaments */
.sahur-kentongan, .sahur-lamp, .sahur-moon, .sahur-skyline, .sahur-gerobak, .sahur-nasi, .sahur-motor { display: block; overflow: visible; pointer-events: none; }
.sahur-kentongan { filter: drop-shadow(0 8px 8px rgb(0 0 0 / .35)); }
.sahur-kentongan__band { fill: var(--inv-pop); }
.sahur-kentongan__band2 { fill: var(--inv-cool); }
.sahur-kentongan__mallet { transform-box: view-box; transform-origin: 80px 26px; }
.sahur-lamp__iron { fill: var(--sahur-lamp-iron); stroke: var(--sahur-lamp-iron); }
.sahur-lamp__edge { stroke: color-mix(in srgb, var(--inv-shine) 40%, transparent); }
.sahur-lamp__bulb { fill: #fffbe6; }
.sahur-lamp--flip { transform: scaleX(-1); }
.sahur-moon { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--inv-shine) 55%, transparent)); }
.sahur-moon__halo { fill: color-mix(in srgb, var(--inv-shine) 10%, transparent); }
.sahur-moon__star { fill: var(--inv-shine); }
.sahur-skyline__far { fill: color-mix(in srgb, var(--inv-primary) 40%, var(--inv-deep)); }
.sahur-skyline__near { fill: var(--sahur-night); stroke: var(--sahur-night); }
.sahur-skyline__wire { stroke: color-mix(in srgb, var(--sahur-night) 80%, transparent); }
.sahur-skyline__lit { fill: var(--inv-accent); }
.sahur-skyline__finial { fill: var(--inv-accent); }
.sahur-gerobak__iron { fill: var(--sahur-iron); }
.sahur-gerobak__iron-line { stroke: var(--sahur-iron); fill: none; }
.sahur-gerobak__stripe-a { fill: var(--inv-pop); }
.sahur-gerobak__stripe-b { fill: var(--sahur-paper); }
.sahur-gerobak__glass { fill: color-mix(in srgb, var(--inv-cool) 30%, #fff); stroke: var(--sahur-iron); stroke-width: 2; }
.sahur-gerobak__band { stroke: var(--inv-pop); fill: none; }
.sahur-gerobak__body { fill: var(--inv-cool); }
.sahur-gerobak__panel { fill: var(--sahur-paper); }
.sahur-gerobak__paint { fill: var(--inv-primary); }
.sahur-gerobak__flourish { stroke: var(--inv-pop); }
.sahur-gerobak__wheel { fill: var(--sahur-iron); }
.sahur-gerobak__spokes { stroke: var(--inv-shine); }
.sahur-gerobak__hub { fill: var(--inv-shine); }
.sahur-nasi { filter: drop-shadow(0 4px 4px rgb(0 0 0 / .2)); }
.sahur-nasi__band { stroke: var(--inv-pop); }
.sahur-motor__body { fill: var(--inv-cool); }
.sahur-motor__seat, .sahur-motor__iron { fill: var(--sahur-iron); }
.sahur-motor__line { stroke: var(--sahur-iron); }
.sahur-motor__box { fill: var(--inv-pop); }
.sahur-motor__box-line { stroke: color-mix(in srgb, #000 25%, var(--inv-pop)); }
.sahur-motor__tyre { fill: var(--sahur-iron); }
.sahur-motor__rim { stroke: var(--inv-shine); }
.sahur-motor__lamp { fill: #fffbe6; }

/* the tap marker: two pulsing rings, a tapping hand and a label */
.sahur-tap { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; }
.sahur-tap__ring {
    position: absolute; left: 50%; top: 56%; width: 6rem; aspect-ratio: 1; margin: -3rem 0 0 -3rem; border-radius: 50%;
    border: 3px solid var(--inv-accent); opacity: 0;
}
.sahur-tap__hand {
    position: absolute; left: 56%; top: 60%; width: 2.7rem; height: 2.7rem;
    fill: #fff; stroke: var(--inv-deep); stroke-width: 1.5; stroke-linejoin: round;
    filter: drop-shadow(0 4px 6px rgb(0 0 0 / .4));
}
.sahur-tap__label {
    position: absolute; left: 50%; bottom: -.2rem; transform: translateX(-50%) rotate(-2deg); white-space: nowrap;
    padding: .3rem .9rem .34rem; border-radius: 4px; font-family: var(--sahur-marker); font-size: .86rem; letter-spacing: .02em;
    color: var(--inv-deep); background: var(--inv-accent); box-shadow: 3px 3px 0 var(--inv-pop);
}

/* ---------- 4. cover ---------- */
.sahur-cover {
    --cover-poster: 19rem;
    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.5rem 1.3rem 1.6rem; isolation: isolate; color: var(--inv-background);
    background:
        radial-gradient(70% 34% at 75% 10%, color-mix(in srgb, var(--inv-primary) 85%, transparent), transparent 75%),
        radial-gradient(60% 30% at 0% 55%, color-mix(in srgb, var(--inv-cool) 22%, transparent), transparent 75%),
        radial-gradient(60% 26% at 100% 78%, color-mix(in srgb, var(--inv-pop) 22%, transparent), transparent 75%),
        var(--inv-deep);
    transition: opacity .9s ease;
}
/* halftone dots in two corners */
.sahur-cover::before {
    content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: .26;
    background: radial-gradient(circle, var(--inv-shine) 1.2px, transparent 1.7px) 0 0 / 10px 10px;
    -webkit-mask: radial-gradient(55% 30% at 100% 0%, #000, transparent), radial-gradient(55% 30% at 0% 100%, #000, transparent);
    mask: radial-gradient(55% 30% at 100% 0%, #000, transparent), radial-gradient(55% 30% at 0% 100%, #000, transparent);
}
/* stars that twinkle (a living ground) */
.sahur-cover::after {
    content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: .85;
    background:
        radial-gradient(1.6px 1.6px at 14% 12%, #fff, transparent), radial-gradient(1.2px 1.2px at 38% 6%, #fff, transparent),
        radial-gradient(1.8px 1.8px at 58% 15%, #fff, transparent), radial-gradient(1.2px 1.2px at 86% 34%, #fff, transparent),
        radial-gradient(1.4px 1.4px at 8% 40%, #fff, transparent), radial-gradient(1.2px 1.2px at 92% 56%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 26% 24%, var(--inv-shine), transparent);
}
/* soft clouds of spray paint */
.sahur-cover__spray {
    position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: .55;
    background:
        radial-gradient(30% 14% at 8% 70%, color-mix(in srgb, var(--inv-cool) 50%, transparent), transparent 70%),
        radial-gradient(26% 12% at 94% 62%, color-mix(in srgb, var(--inv-pop) 45%, transparent), transparent 70%);
    filter: blur(6px);
}
.sahur-cover__moon { position: absolute; z-index: -1; top: 3.4rem; right: .8rem; width: 5.4rem; }
/* the lamp stands along the left edge, its arm low enough to stay clear of the demo buttons */
.sahur-cover__lamp { position: absolute; z-index: -1; top: 3.1rem; left: -.6rem; width: 8.6rem; height: auto; }
.sahur-cover__lamp .sahur-lamp__cone { opacity: .9; }
.sahur-cover__skyline { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; width: 100%; height: 5.6rem; opacity: .95; }
/* the kentongan hangs on a long rope on the right shoulder */
.sahur-cover__hang { position: absolute; z-index: -1; top: 8.6rem; right: .7rem; width: 2.8rem; transform-origin: 44% -6rem; }
.sahur-cover__hang::before {
    content: ''; position: absolute; left: 44%; bottom: 100%; width: 2px; height: 6rem; margin-left: -1px; background: #d9b98a; opacity: .8;
}
.sahur-cover__kentongan { width: 100%; height: auto; }
.sahur-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); }

.sahur-cover__host { position: relative; z-index: 3; margin: 0 0 1.25rem; max-width: 19rem; }
.sahur-cover__host span {
    display: inline-block; padding: .14rem .8rem .2rem; transform: rotate(-2deg); border-radius: 3px 8px 4px 9px;
    font-family: var(--sahur-marker); font-size: .86rem; line-height: 1.3; color: var(--inv-deep); background: var(--inv-cool);
    box-shadow: 3px 3px 0 rgb(0 0 0 / .35); text-wrap: balance;
}
.sahur-poster--cover { --poster-h: var(--cover-poster); transform: rotate(-1.6deg); }

.sahur-cover__title {
    margin: 1rem 0 0; max-width: 100%; font-family: var(--sahur-stencil); font-size: 2.9rem; font-weight: 900; line-height: .95;
    letter-spacing: .015em; text-transform: uppercase; color: var(--inv-accent); text-wrap: balance;
    text-shadow: 3px 3px 0 var(--inv-pop), 0 0 24px color-mix(in srgb, var(--inv-accent) 40%, transparent);
}
.sahur-cover__date { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3rem .6rem; margin: .55rem 0 0; }
.sahur-cover__board {
    display: inline-block; padding: .14rem .75rem .18rem; border-radius: 4px; font-family: var(--sahur-digits); font-size: 1.12rem; font-weight: 700;
    letter-spacing: .05em; line-height: 1.25; color: var(--inv-deep); background: var(--inv-accent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--inv-accent) 55%, transparent);
}
.sahur-cover__hijri { font-family: var(--sahur-marker); font-size: .95rem; color: var(--inv-shine); }
.sahur-cover__quote {
    max-width: 30ch; margin: .55rem 0 0; font-family: var(--sahur-serif); font-style: italic; font-weight: 500;
    font-size: 1.04rem; line-height: 1.3; color: var(--sahur-cream);
}
.sahur-cover__guest {
    position: relative; width: min(100%, 18.5rem); margin: .75rem 0 0; padding: .42rem 1rem .48rem; border-radius: 8px;
    background: color-mix(in srgb, var(--inv-deep) 62%, transparent); border: 1.5px dashed color-mix(in srgb, var(--inv-shine) 65%, transparent);
}
.sahur-cover__guest p { margin: 0; font-size: .6rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-cool) 60%, #fff); }
.sahur-cover__guest-name { display: block; font-family: var(--sahur-stencil); font-size: 1.45rem; font-weight: 800; line-height: 1.1; letter-spacing: .02em; color: #fff; overflow-wrap: anywhere; }
.sahur-cover__open {
    margin-top: .9rem; min-height: 2.95rem; padding: .55rem 1.9rem; border-radius: 6px;
    font-family: var(--sahur-stencil); font-size: 1.15rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--inv-deep); background: var(--inv-accent);
    box-shadow: 4px 4px 0 var(--inv-pop), 0 14px 26px -12px rgb(0 0 0 / .6);
}

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

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

/* opening: a flyer pasted on the wall */
.sahur-opening { padding: 4.4rem 1.3rem 4.6rem; }
.sahur-flyer {
    position: relative; max-width: 22.5rem; margin: 0 auto; padding: 2.6rem 1.35rem 3.2rem; background: var(--sahur-paper);
    transform: rotate(-.8deg); box-shadow: var(--sahur-drop), 0 0 0 1px var(--sahur-line);
}
.sahur-flyer::before, .sahur-flyer::after {
    content: ''; position: absolute; top: -.55rem; width: 4.8rem; height: 1.35rem; background: var(--sahur-tape);
    clip-path: polygon(3% 0, 97% 6%, 100% 30%, 96% 55%, 100% 80%, 96% 100%, 4% 94%, 0 70%, 4% 45%, 0 20%);
}
.sahur-flyer::before { left: -1rem; transform: rotate(-24deg); }
.sahur-flyer::after { right: -1rem; transform: rotate(22deg); }
.sahur-flyer__nasi { position: absolute; right: .8rem; bottom: -1.7rem; width: 4.6rem; transform: rotate(8deg); }
.sahur-opening__basmalah { margin: 0 0 .5rem; font-size: 1.7rem; }
.sahur-opening__greeting {
    margin: 0 auto; max-width: 20ch; font-family: var(--sahur-stencil); font-size: 1.65rem; font-weight: 800; line-height: 1.02;
    letter-spacing: .01em; text-transform: uppercase; color: var(--sahur-title); text-wrap: balance;
}
.sahur-opening__divider { margin: .9rem auto; }
.sahur-opening__message { margin: 0 auto; max-width: 30ch; font-size: .95rem; color: var(--sahur-muted); }
.sahur-opening__quote { margin: 1.4rem 0 0; padding-top: 1.2rem; border-top: 2px dashed color-mix(in srgb, var(--inv-cool) 55%, transparent); }
.sahur-opening__mark { display: block; height: 2.4rem; font-family: var(--sahur-stencil); font-weight: 900; font-size: 4.6rem; line-height: 1; color: var(--inv-pop); }
.sahur-opening__quote p { margin: 0; font-family: var(--sahur-serif); font-style: italic; font-size: 1.16rem; font-weight: 500; line-height: 1.45; color: var(--inv-text); }
.sahur-opening__quote cite, .sahur-prayer__text cite {
    display: inline-block; margin-top: .9rem; padding: .2rem .8rem; border-radius: 3px; font-style: normal; font-family: var(--sahur-marker);
    font-size: .82rem; letter-spacing: .02em; color: var(--inv-deep); background: color-mix(in srgb, var(--inv-cool) 55%, #fff); transform: rotate(-1.5deg);
}

/* organizer: a poster tilted the other way, a community sticker, the name in stencil */
.sahur-poster--organizer { --poster-h: min(16rem, 64vw); transform: rotate(1.8deg); margin-bottom: 2.6rem; }
.sahur-organizer__seal { left: 50%; bottom: -2.4rem; width: 5.2rem; height: 5.2rem; margin-left: -2.6rem; font-size: 1.7rem; transform: rotate(-8deg); }
.sahur-organizer__seal--logo { background: #fff; }
.sahur-organizer__seal--logo::after { border-color: color-mix(in srgb, var(--inv-pop) 60%, transparent); }
.sahur-organizer__seal img { width: 74%; height: 74%; object-fit: contain; }
.sahur-organizer__unit { margin-top: .6rem; }
.sahur-organizer__name {
    margin: .3rem auto 0; max-width: 16ch; font-family: var(--sahur-stencil); font-size: 2.2rem; font-weight: 900; line-height: .98;
    text-transform: uppercase; color: var(--sahur-title); text-wrap: balance; overflow-wrap: anywhere;
}
.sahur-organizer__tagline {
    display: flex; align-items: center; justify-content: center; gap: .55rem; margin: .7rem auto 0 !important;
    font-family: var(--sahur-marker); font-size: 1.1rem; line-height: 1.3; color: var(--sahur-pop-ink);
}
.sahur-organizer__tagline::before, .sahur-organizer__tagline::after {
    content: ''; width: 11px; height: 11px; flex: none; background: var(--inv-cool);
    clip-path: polygon(50% 0, 63% 35%, 100% 38%, 71% 61%, 81% 100%, 50% 78%, 19% 100%, 29% 61%, 0 38%, 37% 35%);
}

/* occasion: the kentongan at the pos ronda, the signboard */
.sahur-occasion { padding-bottom: 4.4rem; }
.sahur-occasion__spray {
    position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; filter: blur(6px);
    background: radial-gradient(30% 12% at 10% 40%, color-mix(in srgb, var(--inv-cool) 55%, transparent), transparent 70%),
        radial-gradient(28% 12% at 92% 30%, color-mix(in srgb, var(--inv-pop) 50%, transparent), transparent 70%);
}
.sahur-occasion__eyebrow { margin-bottom: .6rem !important; }
.sahur-occasion__type {
    margin: 0 auto; max-width: 15ch; font-family: var(--sahur-stencil); font-size: 2.45rem; font-weight: 900; line-height: .98;
    text-transform: uppercase; color: var(--inv-accent); text-wrap: balance; text-shadow: 3px 3px 0 var(--inv-pop);
}
.sahur-post { position: relative; max-width: 21rem; height: 19rem; margin: 1.2rem auto 0; }
.sahur-post__lamp { position: absolute; left: -.8rem; top: -.4rem; width: 8.6rem; height: auto; }
.sahur-post__lamp .sahur-lamp__cone { opacity: .8; }
/* the bamboo gantry of the pos ronda: two posts and a beam */
.sahur-post::before, .sahur-post::after {
    content: ''; position: absolute; top: 1.7rem; bottom: .6rem; width: .8rem; border-radius: .4rem;
    background: linear-gradient(90deg, var(--sahur-bamboo-1), var(--sahur-bamboo-3) 35%, var(--sahur-bamboo-2) 60%, var(--sahur-bamboo-1));
    box-shadow: 0 6px 10px -4px rgb(0 0 0 / .5);
}
.sahur-post::before { left: calc(30% + .4rem); }
.sahur-post::after { right: calc(4% + .4rem); }
.sahur-post__beam {
    position: absolute; left: 30%; right: 4%; top: 2.1rem; height: .95rem; border-radius: .5rem;
    background: linear-gradient(180deg, var(--sahur-bamboo-3), var(--sahur-bamboo-2) 45%, var(--sahur-bamboo-1));
    box-shadow: 0 6px 10px -4px rgb(0 0 0 / .5);
}
.sahur-post__beam::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(90deg, transparent 22%, rgb(0 0 0 / .3) 22% 23.5%, transparent 23.5% 70%, rgb(0 0 0 / .3) 70% 71.5%, transparent 71.5%);
}
.sahur-drum {
    position: absolute; left: 50%; top: 2.5rem; width: 6.6rem; margin-left: -2.4rem; padding: 0; border: 0; cursor: pointer;
    background: none; -webkit-tap-highlight-color: transparent;
}
.sahur-drum:focus-visible { outline: 2px solid var(--inv-accent); outline-offset: 4px; border-radius: 1rem; }
.sahur-drum__art { width: 100%; height: auto; transform-origin: 44% 0; }
.sahur-drum .sahur-tap__ring { top: 50%; }
.sahur-drum .sahur-tap__hand { top: 52%; }
.sahur-drum .sahur-tap__label { bottom: -1.6rem; }
/* "Sahur! Sahur!" bubbles, popping out once struck */
.sahur-bubble {
    position: absolute; z-index: 5; padding: .32rem .8rem .38rem; border-radius: 1rem; font-family: var(--sahur-marker); font-size: 1.25rem; line-height: 1.1;
    color: var(--inv-deep); background: #fff; box-shadow: 3px 3px 0 var(--inv-pop); opacity: 0; pointer-events: none;
}
.sahur-bubble::after { content: ''; position: absolute; bottom: -.55rem; width: .9rem; height: .7rem; background: #fff; }
.sahur-bubble--left { left: 1.2rem; top: 7.6rem; transform: rotate(-8deg) scale(.3); }
.sahur-bubble--left::after { right: .8rem; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.sahur-bubble--right { right: -.2rem; top: 4.4rem; transform: rotate(7deg) scale(.3); background: var(--inv-accent); }
.sahur-bubble--right::after { left: .8rem; clip-path: polygon(0 0, 100% 0, 0 100%); background: var(--inv-accent); }
.sahur-occasion.is-struck .sahur-bubble { opacity: 1; transform: rotate(-8deg); transition: opacity .2s ease, transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.sahur-occasion.is-struck .sahur-bubble--right { transform: rotate(7deg); transition-delay: .18s; }
/* the signboard: lamp digits for the Hijri date, the theme */
.sahur-signboard {
    position: relative; max-width: 20rem; margin: 1.4rem auto 0; padding: 1rem 1.2rem 1.1rem; border-radius: 8px;
    background: var(--sahur-night); border: 3px solid var(--sahur-iron-light);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 40%, transparent), 0 18px 30px -18px #000;
    transition: box-shadow .9s ease;
}
.sahur-signboard__bolt { position: absolute; top: .45rem; width: 6px; height: 6px; border-radius: 50%; background: var(--sahur-iron-light); }
.sahur-signboard__bolt--l { left: .45rem; }
.sahur-signboard__bolt--r { right: .45rem; }
.sahur-signboard__hijri {
    margin: 0; font-family: var(--sahur-digits); font-size: 2.1rem; font-weight: 900; line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; text-wrap: balance;
    background: radial-gradient(circle, var(--inv-accent) 58%, transparent 66%) 0 0 / 4px 4px; -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--inv-accent) 70%, transparent));
    transition: filter .9s ease, opacity .9s ease;
}
.sahur-signboard__label { margin: .7rem 0 0; font-size: .6rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-cool); }
.sahur-signboard__hijri + .sahur-signboard__label { padding-top: .65rem; border-top: 1px dashed color-mix(in srgb, var(--inv-accent) 40%, transparent); }
.sahur-signboard__theme { margin: .15rem 0 0; font-family: var(--sahur-serif); font-size: 1.22rem; font-style: italic; font-weight: 600; line-height: 1.32; color: #fff; text-wrap: balance; transition: opacity .9s ease .2s, filter .9s ease .2s; }
/* off until the kentongan is struck (only once Alpine armed it) */
.sahur-occasion.is-armed .sahur-signboard { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 12%, transparent), 0 18px 30px -18px #000; }
.sahur-occasion.is-armed .sahur-signboard__hijri { opacity: .18; filter: none; }
.sahur-occasion.is-armed .sahur-signboard__theme { opacity: .14; filter: blur(1.5px); }
.sahur-occasion__divider { margin: 1.5rem auto 1rem; }
.sahur-occasion__intent { margin: 0 auto !important; max-width: 31ch; font-family: var(--sahur-serif); font-size: 1.12rem; font-style: italic; line-height: 1.5; color: var(--sahur-cream); }
.sahur-occasion__next {
    display: inline-flex; flex-direction: column; align-items: center; gap: .1rem; margin: 1.3rem auto 0 !important;
    font-family: var(--sahur-marker); font-size: .95rem; color: var(--inv-cool);
}
.sahur-occasion__next::after { content: ''; width: 2px; height: 1.6rem; background: repeating-linear-gradient(180deg, var(--inv-cool) 0 5px, transparent 5px 9px); }
.sahur-occasion.is-armed .sahur-occasion__next { visibility: hidden; }

/* rundown: the route map */
.sahur-map { position: relative; max-width: 24rem; margin: 0 auto; }
.sahur-map__rolled {
    position: relative; display: none; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; width: 100%; min-height: 10rem;
    margin: 0; padding: 2.2rem 1rem 2.6rem; border: 0; border-radius: 10px; cursor: pointer; font: inherit; color: var(--inv-text);
    background:
        repeating-linear-gradient(25deg, transparent 0 22px, color-mix(in srgb, var(--inv-primary) 12%, transparent) 22px 24px),
        repeating-linear-gradient(-65deg, transparent 0 30px, color-mix(in srgb, var(--inv-primary) 12%, transparent) 30px 32px),
        var(--sahur-paper);
    box-shadow: var(--sahur-drop), 0 0 0 1px var(--sahur-line); -webkit-tap-highlight-color: transparent;
}
.sahur-map__rolled:focus-visible { outline: 2px solid var(--inv-primary); outline-offset: 3px; }
.sahur-map__roll {
    position: absolute; left: -.4rem; right: -.4rem; top: -.6rem; height: 1.5rem; border-radius: .75rem;
    background: linear-gradient(180deg, var(--sahur-paper), color-mix(in srgb, var(--inv-soft) 80%, #a07a3a) 70%, color-mix(in srgb, var(--inv-soft) 50%, #6b4a1c));
    box-shadow: 0 6px 10px -5px rgb(0 0 0 / .45);
}
.sahur-map__rolled-title { font-family: var(--sahur-stencil); font-size: 2rem; font-weight: 900; line-height: 1; text-transform: uppercase; color: var(--sahur-title); }
.sahur-map__rolled-hint { max-width: 22ch; font-size: .82rem; color: var(--sahur-muted); }
.sahur-tap--map .sahur-tap__ring { left: auto; right: 1.4rem; top: auto; bottom: 1.2rem; width: 3.4rem; margin: 0; }
.sahur-tap--map .sahur-tap__hand { left: auto; right: 1rem; top: auto; bottom: .4rem; width: 2.3rem; height: 2.3rem; }
.sahur-tap--map .sahur-tap__ring { border-color: var(--inv-pop); }
.sahur-route.is-armed .sahur-map__rolled { display: flex; }
.sahur-route.is-armed .sahur-route__list { display: none; }

.sahur-route__list { position: relative; margin: 0; padding: 0; list-style: none; text-align: left; }
/* the road: dark asphalt with a dashed lamp-yellow centre line */
.sahur-route__list::before {
    content: ''; position: absolute; left: 1rem; top: .6rem; bottom: .6rem; width: 2.3rem; border-radius: 1.2rem; transform-origin: top;
    background: var(--sahur-iron); box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-background) 80%, transparent);
}
.sahur-route__list::after {
    content: ''; position: absolute; left: 2.08rem; top: 1.6rem; bottom: 1.6rem; width: 3px; transform-origin: top;
    background: repeating-linear-gradient(180deg, var(--inv-accent) 0 10px, transparent 10px 18px);
}
.sahur-route__flag { position: relative; z-index: 1; display: flex; padding: 0 0 .7rem .55rem; }
.sahur-route__flag svg {
    width: 3.2rem; height: 3.2rem; padding: .7rem; border-radius: 50%; color: #fff; background: var(--inv-primary);
    box-shadow: 0 0 0 3px var(--inv-background);
}
.sahur-route__flag--end { padding: .5rem 0 0 .55rem; }
.sahur-route__flag--end svg { color: var(--inv-deep); background: var(--inv-accent); }
.sahur-route__stop { position: relative; z-index: 1; display: grid; grid-template-columns: 4.3rem minmax(0, 1fr); align-items: start; gap: .5rem; padding: 0 0 .9rem; }
.sahur-route__pin {
    display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: .3rem 0 0 .78rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
    background: var(--inv-pop); box-shadow: 0 0 0 3px var(--inv-background), 0 6px 10px -4px rgb(0 0 0 / .5);
}
.sahur-route__stop:nth-child(odd) .sahur-route__pin { background: var(--inv-cool); }
.sahur-route__pin span { transform: rotate(45deg); font-family: var(--sahur-stencil); font-size: 1.25rem; font-weight: 900; line-height: 1; color: #fff; }
.sahur-route__card {
    position: relative; padding: .6rem .85rem .7rem; border-radius: 8px; background: var(--sahur-paper);
    box-shadow: 0 12px 18px -14px rgb(0 0 0 / .55), 0 0 0 1px var(--sahur-line);
}
.sahur-route__card::before {
    content: ''; position: absolute; left: -.45rem; top: 1.05rem; width: .5rem; height: .9rem; background: var(--sahur-paper);
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.sahur-route__time {
    display: inline-block; margin-bottom: .25rem; padding: .06rem .5rem .1rem; border-radius: 4px; font-family: var(--sahur-digits); font-size: 1rem; font-weight: 900;
    letter-spacing: .08em; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--inv-accent); background: var(--sahur-night);
    text-shadow: 0 0 6px color-mix(in srgb, var(--inv-accent) 70%, transparent);
}
.sahur-route__card h3 { margin: 0; font-family: var(--sahur-stencil); font-size: 1.28rem; font-weight: 800; line-height: 1.08; color: var(--sahur-title); }
.sahur-route__card p { margin: .2rem 0 0; font-size: .84rem; line-height: 1.45; color: var(--sahur-muted); }

/* events: pasted flyers */
.sahur-event {
    position: relative; max-width: 25rem; margin: 0 auto; padding: .6rem .6rem 1.5rem; background: var(--sahur-paper); text-align: left;
    transform: rotate(-.6deg); box-shadow: var(--sahur-drop), 0 0 0 1px var(--sahur-line);
}
.sahur-event--flip { transform: rotate(.6deg); }
.sahur-event + .sahur-event { margin-top: 2.6rem; }
.sahur-event::before {
    content: ''; position: absolute; z-index: 2; left: 50%; top: -.6rem; width: 5rem; height: 1.35rem; margin-left: -2.5rem; background: var(--sahur-tape);
    transform: rotate(-3deg); clip-path: polygon(3% 0, 97% 6%, 100% 30%, 96% 55%, 100% 80%, 96% 100%, 4% 94%, 0 70%, 4% 45%, 0 20%);
}
.sahur-event__media { position: relative; }
.sahur-event__photo { display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: center 30%; }
.sahur-event__media::after {
    content: ''; position: absolute; right: 0; top: 0; width: 45%; height: 45%; pointer-events: none; opacity: .5;
    background: radial-gradient(circle, var(--inv-accent) 1.4px, transparent 2px) 0 0 / 8px 8px;
    -webkit-mask: radial-gradient(100% 100% at 100% 0%, #000, transparent 70%); mask: radial-gradient(100% 100% at 100% 0%, #000, transparent 70%);
}
.sahur-event__top { display: flex; align-items: center; gap: .9rem; padding: 1rem .8rem 0; }
.sahur-event__media + .sahur-event__top { margin-top: -2.3rem; align-items: flex-end; }
.sahur-event__date {
    position: relative; display: flex; flex-direction: column; align-items: center; flex: none; width: 4.5rem; margin: 0; padding: .55rem 0 .45rem; border-radius: 8px;
    color: #fff; background: var(--inv-pop); box-shadow: 0 0 0 4px var(--sahur-paper), 0 10px 16px -8px rgb(0 0 0 / .5);
    font-size: .58rem; font-weight: 700; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase;
}
.sahur-event--flip .sahur-event__date { background: var(--inv-cool); color: var(--inv-deep); }
.sahur-event__date::before {
    content: ''; position: absolute; top: -.3rem; left: .9rem; right: .9rem; height: .6rem;
    background: radial-gradient(circle, var(--sahur-iron) 2.5px, transparent 3px) 0 0 / 50% 100% repeat-x;
}
.sahur-event__date strong { font-family: var(--sahur-stencil); font-size: 2.3rem; font-weight: 900; line-height: .95; letter-spacing: 0; }
.sahur-event__head { min-width: 0; padding-bottom: .1rem; }
.sahur-event__media + .sahur-event__top .sahur-event__head { padding-top: 2.6rem; }
.sahur-event__no { display: inline-block; font-family: var(--sahur-marker); font-size: .82rem; color: var(--sahur-cool-ink); }
.sahur-event__name { margin: 0; font-family: var(--sahur-stencil); font-size: 1.6rem; font-weight: 800; line-height: 1.02; color: var(--sahur-title); }
.sahur-event__full { margin: .2rem 0 0; font-size: .8rem; color: var(--sahur-muted); }
.sahur-event__rows { display: grid; gap: .7rem; margin: 1rem .8rem 0; padding: .95rem 0 0; list-style: none; font-size: .9rem; border-top: 2px dashed color-mix(in srgb, var(--inv-cool) 50%, transparent); }
.sahur-event__rows li { display: flex; align-items: flex-start; gap: .65rem; }
.sahur-event__rows .sahur-icon { width: 2rem; height: 2rem; padding: .42rem; border-radius: 50%; color: var(--inv-deep); background: color-mix(in srgb, var(--inv-accent) 70%, #fff); }
.sahur-event__rows li > span { padding-top: .28rem; }
.sahur-event__venue { display: block; font-weight: 700; }
.sahur-event__address { display: block; font-size: .85rem; color: var(--sahur-muted); }
.sahur-event .inv-maps { margin: 1.1rem .8rem 0; text-align: center; }
.sahur-event .inv-maps .inv-button { width: 100%; }
.sahur-event .inv-maps__frame { height: 180px; border-radius: 8px; }

/* countdown: the lamp-post signboard with dot-matrix digits */
.sahur-ledboard {
    position: relative; max-width: 22rem; margin: 3.4rem auto 0; padding: 1rem .7rem 1.1rem; border-radius: 10px;
    background: var(--sahur-night); border: 3px solid var(--sahur-iron-light);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 40%, transparent), 0 24px 40px -20px #000;
}
/* the iron bracket and two short chains it hangs from */
.sahur-ledboard__bracket { position: absolute; left: 8%; right: 8%; top: -2.9rem; height: 6px; border-radius: 3px; background: var(--sahur-iron-light); }
.sahur-ledboard::before {
    content: ''; position: absolute; left: 20%; right: 20%; top: -2.5rem; height: 2.4rem;
    background: linear-gradient(90deg, var(--sahur-iron-light) 0 3px, transparent 3px calc(100% - 3px), var(--sahur-iron-light) calc(100% - 3px));
    -webkit-mask: repeating-linear-gradient(180deg, #000 0 5px, transparent 5px 8px); mask: repeating-linear-gradient(180deg, #000 0 5px, transparent 5px 8px);
}
.sahur-ledboard__label { margin: 0 0 .6rem; font-family: var(--sahur-digits); font-size: .82rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-cool); }
.sahur-countdown .inv-countdown { gap: .3rem; }
.sahur-countdown .inv-countdown__item { flex: 1 1 0; min-width: 0; padding: .25rem 0; border-radius: 0; background: none; }
.sahur-countdown .inv-countdown__item + .inv-countdown__item { border-left: 1px dashed color-mix(in srgb, var(--inv-accent) 30%, transparent); }
.sahur-countdown .inv-countdown__value {
    font-family: var(--sahur-digits); font-size: 2.9rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums;
    background: radial-gradient(circle, var(--inv-accent) 58%, transparent 66%) 0 0 / 4px 4px; -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--inv-accent) 75%, transparent));
}
.sahur-countdown .inv-countdown__label { margin-top: .2rem; font-size: .58rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sahur-cream); opacity: 1; }
.sahur-countdown .inv-countdown__done { font-family: var(--sahur-digits); font-size: 1.5rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--inv-accent); }
.sahur-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 1.3rem; }
.sahur-countdown .inv-countdown__actions .inv-button {
    width: min(100%, 17rem); min-height: 2.75rem; padding: .6rem 1rem; font-size: .84rem; font-weight: 600; border-radius: 6px;
    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) 40%, transparent);
}
.sahur-countdown .inv-countdown__actions .inv-button:first-child { color: var(--inv-deep); background: var(--inv-accent); box-shadow: 3px 3px 0 var(--inv-pop); }
.sahur-countdown .inv-cal {
    --inv-cal-bg: var(--sahur-paper); --inv-cal-mark: var(--inv-pop);
    max-width: 19rem; margin: 2.4rem auto 0; border-radius: 6px; transform: rotate(-1deg);
    box-shadow: 0 22px 40px -24px rgb(0 0 0 / .7);
}
.sahur-countdown .inv-cal__month { font-family: var(--sahur-stencil); font-size: 1.6rem; font-weight: 900; text-transform: uppercase; color: var(--sahur-title); }

/* speakers: the main one as a poster with a speech bubble, the others as sticker rows */
.sahur-speakers__list { display: grid; gap: .85rem; max-width: 25rem; margin: 0 auto; padding: 0; list-style: none; }
.sahur-speaker {
    display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); align-items: center; gap: 1rem; padding: .75rem 1rem .75rem .75rem; border-radius: 10px;
    text-align: left; background: var(--sahur-paper); box-shadow: 0 0 0 1px var(--sahur-line), 0 12px 18px -14px rgb(0 0 0 / .45);
}
.sahur-speaker__window {
    position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 50%;
    background: radial-gradient(70% 60% at 50% 30%, color-mix(in srgb, var(--inv-primary) 80%, transparent), transparent), var(--inv-deep);
    box-shadow: 0 0 0 3px var(--inv-cool);
}
.sahur-speaker__window img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.sahur-speaker__letter { font-family: var(--sahur-stencil); font-size: 2rem; font-weight: 900; color: var(--inv-accent); }
.sahur-speaker__role { margin: 0; }
.sahur-speaker__role span { display: inline-block; padding: .06rem .5rem .1rem; border-radius: 3px; font-family: var(--sahur-marker); font-size: .76rem; line-height: 1.3; color: var(--inv-deep); background: color-mix(in srgb, var(--inv-cool) 55%, #fff); }
.sahur-speaker__name { margin: .3rem 0 0; font-family: var(--sahur-stencil); font-size: 1.35rem; font-weight: 800; line-height: 1.05; color: var(--sahur-title); overflow-wrap: anywhere; }
.sahur-speaker__topic { margin: .3rem 0 0; font-size: .86rem; line-height: 1.4; color: var(--sahur-muted); }
.sahur-speaker--main {
    grid-template-columns: 1fr; justify-items: center; gap: 0; padding: 1.2rem 1.1rem 1.4rem; text-align: center; transform: rotate(-.6deg);
    box-shadow: var(--sahur-drop), 0 0 0 1px var(--sahur-line);
}
.sahur-speaker--main .sahur-speaker__window {
    width: min(12rem, 58vw); aspect-ratio: 4 / 5; border-radius: 0; padding: .4rem; background-clip: content-box;
    box-shadow: 0 0 0 .4rem var(--sahur-paper), 0 0 0 calc(.4rem + 1px) var(--sahur-line), 0 16px 22px -14px rgb(0 0 0 / .55); transform: rotate(1.6deg);
}
.sahur-speaker--main .sahur-speaker__letter { font-size: 3.6rem; }
.sahur-speaker--main .sahur-speaker__text { margin-top: 1.1rem; }
.sahur-speaker--main .sahur-speaker__name { font-size: 1.85rem; text-transform: uppercase; }
.sahur-speaker--main .sahur-speaker__topic {
    position: relative; display: inline-block; margin-top: .9rem; padding: .6rem 1rem; border-radius: 14px;
    font-family: var(--sahur-serif); font-size: 1.08rem; font-style: italic; font-weight: 600; line-height: 1.35; color: var(--inv-text);
    background: #fff; border: 2px solid var(--inv-text); box-shadow: 3px 3px 0 var(--inv-accent);
}
.sahur-speaker--main .sahur-speaker__topic::before {
    content: ''; position: absolute; left: 50%; top: -.6rem; width: .95rem; height: .95rem; margin-left: -.475rem; background: #fff;
    border-left: 2px solid var(--inv-text); border-top: 2px solid var(--inv-text); transform: rotate(45deg);
}

/* prayer: the big crescent behind a dark board, the roofline at the foot */
.sahur-prayer { padding-bottom: 6.6rem; }
.sahur-prayer__moon { position: absolute; z-index: -1; top: 1.6rem; right: -1.6rem; width: 9.5rem; opacity: .95; }
.sahur-prayer__skyline { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; width: 100%; height: 5rem; }
.sahur-prayer__panel {
    position: relative; max-width: 22rem; margin: 2.4rem auto 0; padding: 1.4rem 1.2rem 1.5rem; border-radius: 6px;
    background: color-mix(in srgb, var(--sahur-night) 88%, transparent); border: 2px solid var(--inv-accent); box-shadow: 6px 6px 0 var(--inv-cool);
}
.sahur-prayer__eyebrow { margin-bottom: .8rem !important; }
.sahur-prayer__arabic { margin: 0 0 1rem; font-size: 1.6rem; text-wrap: balance; }
.sahur-prayer__text { margin: 0; }
.sahur-prayer__text p { margin: 0; font-family: var(--sahur-serif); font-size: 1.14rem; font-style: italic; font-weight: 500; line-height: 1.5; color: #fff; }

/* charity: the cart, the pile of nasi bungkus, the kraft label, the needs as paper tags */
.sahur-charity--photo { padding-top: 0; }
.sahur-charity__photo {
    position: relative; z-index: -1; height: 14rem; margin: 0 -1.35rem -3rem; overflow: hidden;
    -webkit-mask: linear-gradient(180deg, #000 45%, transparent); mask: linear-gradient(180deg, #000 45%, transparent);
}
.sahur-charity__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: .85; }
.sahur-charity__title {
    margin: 0 auto; max-width: 16ch; font-family: var(--sahur-stencil); font-size: 2rem; font-weight: 900; line-height: 1; text-transform: uppercase;
    color: var(--inv-accent); text-wrap: balance; text-shadow: 3px 3px 0 var(--inv-pop);
}
.sahur-charity__stall { display: flex; align-items: flex-end; justify-content: center; gap: .3rem; margin: 1.4rem auto .4rem; }
.sahur-charity__cart { width: 10.5rem; height: auto; }
.sahur-charity__pile { position: relative; width: 5.4rem; height: 4.6rem; }
.sahur-charity__nasi { position: absolute; bottom: 0; width: 3rem; height: auto; }
.sahur-charity__nasi:first-child { left: 0; }
.sahur-charity__nasi:nth-child(2) { left: 2.3rem; }
.sahur-charity__nasi--top { left: 1.15rem; bottom: 1.7rem; }
.sahur-charity__label {
    position: relative; display: inline-block; margin: .6rem auto 1.2rem !important; padding: .7rem 2.6rem .75rem 1.3rem; border-radius: 4px;
    font-family: var(--sahur-stencil); font-size: 1.55rem; font-weight: 900; line-height: 1.05; text-transform: uppercase; text-wrap: balance; color: #3b2408;
    background: linear-gradient(135deg, #e7be82, #c79453); transform: rotate(-2deg); box-shadow: 0 14px 22px -14px #000;
}
.sahur-charity__label::after { content: ''; position: absolute; right: 1rem; top: -.4rem; bottom: -.4rem; width: 5px; border-radius: 3px; background: var(--inv-pop); }
.sahur-charity__text { color: var(--sahur-cream); font-size: .92rem; }
.sahur-charity__needs { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; max-width: 24rem; margin: 1rem auto 0; padding: 0; list-style: none; }
.sahur-charity__needs li {
    position: relative; padding: .4rem .85rem .42rem 1.5rem; border-radius: 3px 12px 12px 3px; font-size: .86rem; font-weight: 600;
    color: var(--inv-text); background: var(--sahur-paper);
}
.sahur-charity__needs li:nth-child(even) { transform: rotate(1.5deg); }
.sahur-charity__needs li:nth-child(odd) { transform: rotate(-1.2deg); }
.sahur-charity__needs li::before { content: ''; position: absolute; left: .55rem; top: 50%; width: .45rem; height: .45rem; margin-top: -.225rem; border-radius: 50%; background: var(--inv-deep); }
.sahur-charity__button {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.6rem; min-height: 2.9rem; padding: .6rem 1.6rem; text-decoration: none; border-radius: 6px;
    font-family: var(--sahur-stencil); font-size: 1.1rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--inv-deep) !important; background: var(--inv-accent) !important; box-shadow: 4px 4px 0 var(--inv-pop);
}

/* story: snapshots in paper frames beside the text; text-only chapters as sticky notes */
.sahur-story__list { display: grid; gap: 2.2rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.sahur-story__item { display: grid; grid-template-columns: 43% minmax(0, 1fr); align-items: center; gap: 1.1rem; }
.sahur-story__item--flip { grid-template-columns: minmax(0, 1fr) 43%; }
.sahur-story__item--flip .sahur-story__media { order: 2; transform: rotate(2.4deg); }
.sahur-story__media { position: relative; padding: .35rem .35rem 1.3rem; background: #fff; transform: rotate(-2.4deg); box-shadow: 0 14px 18px -12px rgb(0 0 0 / .5), 0 0 0 1px var(--sahur-line); }
.sahur-story__media::before {
    content: ''; position: absolute; z-index: 1; left: 50%; top: -.5rem; width: 3.6rem; height: 1.1rem; margin-left: -1.8rem; background: var(--sahur-tape);
    transform: rotate(4deg); clip-path: polygon(3% 0, 97% 6%, 100% 30%, 96% 55%, 100% 80%, 96% 100%, 4% 94%, 0 70%, 4% 45%, 0 20%);
}
.sahur-story__photo { display: block; width: 100%; aspect-ratio: 5 / 6; object-fit: cover; object-position: center 28%; }
.sahur-story__when { display: inline-block; font-family: var(--sahur-stencil); font-size: 1.4rem; font-weight: 900; line-height: 1; text-transform: uppercase; color: var(--sahur-pop-ink); }
.sahur-story__body h3 { margin: .3rem 0 0; font-family: var(--sahur-stencil); font-size: 1.35rem; font-weight: 800; line-height: 1.05; color: var(--sahur-title); }
.sahur-story__body p { margin: .35rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--sahur-muted); }
.sahur-story__item--text {
    grid-template-columns: 2.6rem minmax(0, 1fr); align-items: start; gap: .9rem; padding: 1.15rem 1.15rem 1.25rem; transform: rotate(.6deg);
    background: color-mix(in srgb, var(--inv-shine) 55%, var(--sahur-paper)); box-shadow: 0 14px 18px -14px rgb(0 0 0 / .45);
}
.sahur-story__dot {
    display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; font-family: var(--sahur-stencil); font-size: 1.3rem; font-weight: 900;
    color: #fff; background: var(--inv-cool); box-shadow: 0 0 0 3px #fff;
}
.sahur-story__ride { position: relative; width: 10rem; margin: 2.2rem auto 0; padding-bottom: .5rem; }
.sahur-story__ride::after { content: ''; position: absolute; left: -4rem; right: -4rem; bottom: 0; height: 3px; background: repeating-linear-gradient(90deg, var(--sahur-iron) 0 12px, transparent 12px 20px); }
.sahur-story__motor { width: 100%; height: auto; }

/* etiquette: yellow diamond road signs */
.sahur-etiquette__list { display: grid; gap: .6rem; max-width: 24rem; margin: 0 auto; padding: 0; list-style: none; text-align: left; }
.sahur-etiquette__list li {
    display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: center; gap: .85rem; padding: .7rem .9rem .7rem .8rem; border-radius: 8px;
    font-size: .92rem; line-height: 1.45; background: var(--sahur-paper); box-shadow: 0 0 0 1px var(--sahur-line), 0 10px 16px -14px rgb(0 0 0 / .5);
}
.sahur-etiquette__sign {
    display: grid; place-items: center; width: 1.85rem; height: 1.85rem; margin: .3rem; border-radius: 4px; transform: rotate(45deg);
    background: var(--inv-accent); border: 2.5px solid #1b1b1b;
}
.sahur-etiquette__sign span { transform: rotate(-45deg); font-family: var(--sahur-stencil); font-size: 1.1rem; font-weight: 900; line-height: 1; color: #1b1b1b; }

/* gallery: snapshots on the night wall */
.sahur-gallery .inv-gallery { gap: .7rem; }
.sahur-gallery .inv-gallery__item { border-radius: 2px; border: 5px solid var(--sahur-paper); box-shadow: 0 16px 24px -14px rgb(0 0 0 / .8); }
.sahur-gallery .inv-gallery__item:nth-child(4n + 1) { transform: rotate(-1.6deg); }
.sahur-gallery .inv-gallery__item:nth-child(4n + 2) { transform: rotate(1.4deg); }
.sahur-gallery .inv-gallery__item:nth-child(4n + 3) { transform: rotate(1.2deg); }
.sahur-gallery .inv-gallery__item:nth-child(4n) { transform: rotate(-1.3deg); }

/* live streaming: a lit sign */
.sahur-stream__card {
    max-width: 24rem; margin: 0 auto; padding: 1.4rem 1.3rem 1.5rem; border-radius: 10px; color: var(--inv-background);
    background: radial-gradient(70% 80% at 100% 0%, color-mix(in srgb, var(--inv-primary) 70%, transparent), transparent 70%), var(--inv-deep);
    border: 2px solid var(--inv-accent); box-shadow: 5px 5px 0 var(--inv-pop), var(--sahur-drop);
}
.sahur-stream__live {
    display: inline-flex; align-items: center; gap: .4rem; padding: .18rem .7rem; border-radius: 4px; font-family: var(--sahur-digits); font-size: .9rem; font-weight: 900;
    letter-spacing: .18em; text-transform: uppercase; color: #fff; background: #e0262f;
}
.sahur-stream__live span { width: .5rem; height: .5rem; border-radius: 50%; background: #fff; }
.sahur-stream__title { margin: .6rem 0 .2rem; font-family: var(--sahur-stencil); font-size: 1.95rem; font-weight: 900; line-height: 1; text-transform: uppercase; color: #fff; }
.sahur-stream__card p { margin: 0 auto; max-width: 30ch; font-size: .88rem; color: var(--sahur-cream); }
.sahur-stream__card .sahur-stream__note { margin-top: .35rem; font-weight: 600; color: var(--inv-shine); }
.sahur-stream__button {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.1rem; min-height: 2.75rem; border-radius: 6px; font-weight: 700;
    color: var(--inv-deep) !important; background: var(--inv-accent) !important;
}

/* RSVP: a poster-paper card with tape */
.sahur-rsvp__card {
    position: relative; max-width: 25rem; margin: 0 auto; padding: 2rem 1.15rem 1.4rem; border-radius: 4px; color: var(--inv-text); background: var(--sahur-paper);
    box-shadow: 0 22px 40px -24px rgb(0 0 0 / .7);
}
.sahur-rsvp__card::before {
    content: ''; position: absolute; z-index: 2; left: 50%; top: -.6rem; width: 5.4rem; height: 1.4rem; margin-left: -2.7rem; background: var(--sahur-tape);
    transform: rotate(-2deg); clip-path: polygon(3% 0, 97% 6%, 100% 30%, 96% 55%, 100% 80%, 96% 100%, 4% 94%, 0 70%, 4% 45%, 0 20%);
}
.sahur-rsvp__intro { margin: 0 auto 1.1rem; max-width: 30ch; font-size: .9rem; color: var(--sahur-muted); }
.sahur-rsvp__sent { margin-bottom: 1rem; }
.sahur-rsvp__stamp {
    display: grid; place-items: center; width: 4.6rem; height: 4.6rem; margin: 0 auto .5rem; border-radius: 50%; transform: rotate(-12deg);
    border: 3px solid var(--inv-pop); box-shadow: inset 0 0 0 3px var(--sahur-paper), inset 0 0 0 4.5px var(--inv-pop);
}
.sahur-rsvp__stamp svg { width: 70%; height: 70%; }
.sahur-rsvp__stamp path { fill: none; stroke: var(--inv-pop); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
html.inv-anim .sahur-rsvp__sent .sahur-rsvp__stamp { animation: sahur-thump .7s cubic-bezier(.34, 1.56, .64, 1) both; }
html.inv-anim .sahur-rsvp__sent .sahur-rsvp__stamp path { animation: sahur-draw .45s ease-out .3s both; }
.sahur-rsvp__thanks { margin: 0; font-family: var(--sahur-stencil); font-size: 1.9rem; font-weight: 900; line-height: 1.05; text-transform: uppercase; color: var(--sahur-title); }
.sahur-rsvp__line { margin: .1rem 0 0; font-size: .9rem; color: var(--sahur-muted); }
.sahur-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .84rem; font-weight: 600; color: var(--sahur-title); }

/* gift: tickets with a lamp-yellow band and a punched hole, two per row (odd last across) */
.sahur-gift__intro { color: var(--sahur-cream) !important; }
.sahur-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.3rem; }
.sahur-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sahur-gift .inv-gift__account,
.sahur-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: 6px; color: var(--inv-text); background: var(--sahur-paper);
    box-shadow: 0 18px 30px -20px rgb(0 0 0 / .7);
}
.sahur-gift .inv-gift__account::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: .9rem; background: repeating-linear-gradient(135deg, var(--inv-accent) 0 10px, var(--sahur-iron) 10px 20px); }
.sahur-gift .inv-gift__account::after { content: ''; position: absolute; right: .6rem; top: 1.35rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--inv-deep); }
.sahur-gift .inv-gift__account p, .sahur-gift .inv-gift__address p { margin: 0; }
.sahur-gift .inv-gift__bank { font-weight: 700; font-size: .85rem; color: var(--sahur-title); }
.sahur-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .4rem; background: #fff; }
.sahur-gift .inv-gift__logo img { max-width: 5rem; }
.sahur-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); }
.sahur-gift .inv-gift__holder { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sahur-muted); overflow-wrap: anywhere; }
.sahur-gift .inv-button { margin-top: .35rem; min-height: 2.25rem; padding: .35rem .9rem; font-size: .74rem; font-weight: 600; }
.sahur-gift .inv-gift__address { margin-top: .75rem; padding-top: 1.1rem; font-size: .875rem; }
.sahur-gift .inv-gift__address .inv-gift__holder { font-size: .72rem; }

/* co-hosts: stickers on the night wall */
.sahur-cohosts__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.sahur-cohosts__list li {
    max-width: 100%; padding: .5rem .95rem .55rem; border-radius: 6px; font-family: var(--sahur-stencil); font-size: 1.2rem; font-weight: 800; line-height: 1.1;
    color: var(--inv-text); background: var(--sahur-paper); box-shadow: 3px 3px 0 var(--inv-pop); transform: rotate(-1.5deg); text-wrap: balance;
}
.sahur-cohosts__list li:nth-child(even) { transform: rotate(1.4deg); box-shadow: 3px 3px 0 var(--inv-cool); }

/* contacts */
.sahur-contacts__list { display: grid; gap: .7rem; max-width: 24rem; margin: 0 auto; }
.sahur-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(--sahur-paper); text-align: left; box-shadow: 0 0 0 1px var(--sahur-line), 0 10px 16px -14px rgb(0 0 0 / .5);
}
.sahur-contact__avatar {
    display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; font-family: var(--sahur-stencil); font-size: 1.4rem; font-weight: 900;
    color: #fff; background: var(--inv-cool); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--inv-pop);
}
.sahur-contact p { margin: 0; }
.sahur-contact__name { font-weight: 700; font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; }
.sahur-contact__role { font-size: .78rem; color: var(--sahur-muted); }
.sahur-contact__phone { font-size: .85rem; }
.sahur-contact__button { min-height: 2.5rem; padding: .45rem .95rem; font-size: .8rem; font-weight: 700; }
.sahur-contact__button .sahur-icon { width: 1.05rem; height: 1.05rem; }

/* health protocol */
.sahur-protocol__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.sahur-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(--sahur-paper); box-shadow: 0 0 0 1px var(--sahur-line); }
.sahur-protocol__list .sahur-icon { width: 1rem; height: 1rem; color: var(--sahur-cool-ink); }
.sahur-protocol__note { font-size: .88rem; color: var(--sahur-muted); }

/* vendors (donatur & sponsor) */
.sahur-vendors__list { max-width: 24rem; margin: 0 auto; padding: .3rem 1.15rem; list-style: none; border-radius: 8px; background: var(--sahur-paper); box-shadow: 0 0 0 1px var(--sahur-line), var(--sahur-drop); }
.sahur-vendor { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem 0; text-align: left; border-bottom: 2px dashed color-mix(in srgb, var(--inv-cool) 40%, transparent); }
.sahur-vendor:last-child { border-bottom: 0; }
.sahur-vendor__text { display: flex; flex-direction: column; min-width: 0; }
.sahur-vendor__role { font-family: var(--sahur-marker); font-size: .78rem; color: var(--sahur-cool-ink); }
.sahur-vendor__name { font-family: var(--sahur-stencil); font-size: 1.3rem; font-weight: 800; line-height: 1.1; color: var(--inv-text); overflow-wrap: anywhere; }
.sahur-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(--sahur-title); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-primary) 40%, transparent);
}
.sahur-vendor__link .sahur-icon { width: .95rem; height: .95rem; }

/* closing: compact — the photo melting into the night, the kentongan between the moon and a star, thanks and the name */
.sahur-closing { padding: 2.6rem 1.5rem 5.8rem; }
.sahur-closing--photo { padding-top: 0; }
.sahur-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 55%, transparent); mask: linear-gradient(180deg, #000 55%, transparent);
}
.sahur-closing__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.sahur-closing__body { position: relative; }
.sahur-closing--photo .sahur-closing__body { margin-top: -4.2rem; }
.sahur-closing__icons { display: flex; justify-content: center; align-items: flex-start; gap: 1rem; margin: 0 auto .5rem; }
.sahur-closing__moon { width: 2.6rem; margin-top: .6rem; }
.sahur-closing__kentongan { width: 1.8rem; height: auto; transform-origin: 44% 0; }
.sahur-closing__star { width: 1.3rem; margin-top: 1.2rem; fill: var(--inv-accent); overflow: visible; }
.sahur-closing__title { margin: 0 0 .6rem; font-family: var(--sahur-stencil); font-size: 2.4rem; font-weight: 900; line-height: 1; text-transform: uppercase; color: #fff; }
.sahur-closing__title em { font-family: var(--sahur-script); font-style: normal; font-weight: 400; font-size: 1.2em; text-transform: none; color: var(--inv-accent); text-shadow: 2px 2px 0 var(--inv-pop); }
.sahur-closing__message { margin: 0 auto; max-width: 32ch; font-size: .9rem; line-height: 1.55; color: var(--sahur-cream); }
.sahur-closing__salam { margin: .7rem auto 0; max-width: 28ch; font-family: var(--sahur-serif); font-size: 1.06rem; font-style: italic; font-weight: 500; line-height: 1.35; color: var(--inv-shine); }
.sahur-closing__signature { margin: .45rem auto 0; max-width: 30ch; font-size: .84rem; color: var(--sahur-cream); }
.sahur-closing__names {
    margin: .7rem auto 0; max-width: 15ch; font-family: var(--sahur-stencil); font-size: 2rem; font-weight: 900; line-height: 1; text-transform: uppercase;
    color: var(--inv-accent); text-shadow: 3px 3px 0 var(--inv-pop); text-wrap: balance;
}

/* memorial: quiet — calm colours, no spray, no tilt */
.sahur-memorial__crescent { display: block; width: 1.9rem; margin: 0 auto .4rem; fill: var(--sahur-title); }
.sahur-memorial__eyebrow { margin: 0 auto .9rem !important; font-size: .7rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--sahur-muted); }
.sahur-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) 60%, #fff), var(--inv-deep));
    border: 2px solid var(--sahur-title); outline: 1px solid var(--sahur-line); outline-offset: 5px;
}
.sahur-memorial__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; filter: saturate(.9); }
.sahur-memorial__initial { font-family: var(--sahur-serif); font-size: 3rem; font-weight: 600; color: #fff; }
.sahur-memorial__name { margin: 1.3rem auto 0; max-width: 20ch; font-family: var(--sahur-stencil); font-size: 1.9rem; font-weight: 800; line-height: 1.08; color: var(--sahur-title); text-wrap: balance; }
.sahur-memorial__years { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem .9rem; margin: .45rem auto 0 !important; font-size: .86rem; color: var(--sahur-muted); }
.sahur-memorial__years span + span::before { content: '·'; margin-right: .9rem; }
.sahur-memorial__rule { display: block; width: 3rem; height: 1px; margin: 1.1rem auto; background: var(--sahur-muted); }
.sahur-memorial__message { font-family: var(--sahur-serif); font-size: 1.14rem; font-style: italic; line-height: 1.55; color: var(--inv-text); max-width: 30ch !important; }
.sahur-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(--sahur-title); box-shadow: inset 0 0 0 1px var(--sahur-line); }
.sahur-memorial.sahur-tone--light::before { display: none; }

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

/* the three answers as cards with icons (the radio dot is hidden but still focusable) */
.sahur-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.sahur-rsvp .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.sahur-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: 8px; 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 1.5px color-mix(in srgb, var(--inv-text) 20%, transparent);
    transition: background-color .25s ease, color .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.sahur-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sahur-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; }
.sahur-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(--sahur-choice-icon) center / contain no-repeat; mask: var(--sahur-choice-icon) center / contain no-repeat;
}
.sahur-rsvp .inv-form__choices label:nth-of-type(1) { --sahur-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"); }
.sahur-rsvp .inv-form__choices label:nth-of-type(2) { --sahur-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"); }
.sahur-rsvp .inv-form__choices label:nth-of-type(3) { --sahur-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"); }
.sahur-rsvp .inv-form__choices label:has(input:checked) { color: #fff; background: var(--inv-primary); transform: translateY(-3px); box-shadow: 3px 3px 0 var(--inv-pop); }
.sahur-rsvp .inv-form__choices label:has(input:checked)::before { background-color: rgb(255 255 255 / .2); transform: scale(1.1); }
.sahur-rsvp .inv-form__choices label:has(input:checked)::after { color: #fff; }
.sahur-rsvp .inv-form__choices label:has(input:focus-visible) { outline: 2px solid var(--inv-cool); outline-offset: 3px; }

/* wishes: the form on paper, each wish a speech bubble */
.sahur-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.sahur-wishes .inv-form { padding: 1.3rem 1.1rem; border-radius: 6px; background: var(--sahur-paper); box-shadow: 0 0 0 1px var(--sahur-line), var(--sahur-drop); }
.sahur-wishes .inv-wishes__list { margin-top: 1.4rem; }
.sahur-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list { padding: .6rem; border-radius: 10px; background: color-mix(in srgb, #fff 40%, transparent); box-shadow: inset 0 0 0 1px var(--sahur-line); }
.sahur-wishes .inv-wish { padding: .75rem .9rem; border-radius: 14px 14px 14px 4px; background: #fff; text-align: left; border: 2px solid color-mix(in srgb, var(--inv-text) 80%, transparent); box-shadow: 3px 3px 0 var(--inv-cool); }
.sahur-wishes .inv-wish:nth-child(even) { box-shadow: 3px 3px 0 var(--inv-accent); }
.sahur-wishes .inv-wish__name { font-weight: 700; color: var(--sahur-title); }
.sahur-wishes .inv-wish__message { font-size: .88rem; line-height: 1.5; }
.sahur-wishes .inv-wish__time { font-size: .72rem; color: var(--sahur-muted); }

/* ---------- 7. shared components ---------- */
.sahur-main .inv-button { font-weight: 700; }
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-accent);
    font-family: var(--sahur-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) {
    .sahur-cover { --cover-poster: 17.4rem; }
}
@media (max-height: 740px) {
    .sahur-cover { --cover-poster: 16.8rem; padding-top: 1.2rem; padding-bottom: 1.3rem; }
    .sahur-cover__host { margin-bottom: 1.1rem; }
    .sahur-cover__title { font-size: 2.65rem; margin-top: .85rem; }
    .sahur-cover__quote { font-size: .98rem; margin-top: .45rem; }
    .sahur-cover__guest { margin-top: .6rem; }
    .sahur-cover__open { margin-top: .75rem; }
    .sahur-cover__moon { width: 4.6rem; top: 3.2rem; }
    .sahur-cover__lamp { width: 7.6rem; }
    .sahur-cover__hang { top: 8rem; width: 2.5rem; }
}
@media (max-height: 680px) {
    .sahur-cover { --cover-poster: 13.8rem; padding-top: 1rem; padding-bottom: 1.1rem; }
    .sahur-cover__host span { font-size: .78rem; }
    .sahur-cover__title { font-size: 2.35rem; margin-top: .75rem; }
    .sahur-cover__board { font-size: 1rem; }
    .sahur-cover__hijri { font-size: .88rem; }
    .sahur-cover__quote { font-size: .92rem; line-height: 1.26; }
    .sahur-cover__guest { padding: .32rem .85rem .38rem; }
    .sahur-cover__guest-name { font-size: 1.28rem; }
    .sahur-cover__open { min-height: 2.75rem; padding: .5rem 1.6rem; }
    .sahur-cover__skyline { height: 4.4rem; }
    .sahur-cover__hang { top: 7rem; width: 2.2rem; }
}
@media (max-height: 620px) {
    .sahur-cover { --cover-poster: 11.2rem; }
    .sahur-cover__title { font-size: 2.1rem; }
    .sahur-cover__quote { font-size: .86rem; }
}
@media (max-width: 360px) {
    .sahur-cover__title { font-size: 2.45rem; }
    .sahur-cover__hang { right: .4rem; width: 2.2rem; }
    .sahur-cover__moon { right: .4rem; width: 4.4rem; }
}

/* wide screens: the phone-width column on the night wall with halftone */
@media (min-width: 560px) {
    body.sahur-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.sahur-body::before {
        content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .14;
        background: radial-gradient(circle, var(--inv-shine) 1.2px, transparent 1.7px) 0 0 / 12px 12px;
    }
    .sahur-main { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
}

/* ---------- 9. motion ---------- */
@keyframes sahur-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sahur-thump { 0% { transform: rotate(-12deg) scale(2.2); opacity: 0; } 60% { transform: rotate(-12deg) scale(.92); opacity: 1; } 100% { transform: rotate(-12deg) scale(1); } }
@keyframes sahur-slap { from { opacity: 0; transform: rotate(-8deg) scale(1.15); } 70% { opacity: 1; transform: rotate(-1deg) scale(.98); } to { opacity: 1; transform: rotate(-1.6deg) scale(1); } }
@keyframes sahur-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes sahur-drop { from { opacity: 0; transform: translateY(-5rem); } to { opacity: 1; transform: none; } }
@keyframes sahur-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes sahur-flicker { 0%, 100% { opacity: 1; } 8% { opacity: .35; } 12% { opacity: 1; } 16% { opacity: .55; } 22% { opacity: 1; } }
@keyframes sahur-lamp-on { 0% { opacity: 0; } 20% { opacity: .9; } 30% { opacity: .1; } 45% { opacity: 1; } 55% { opacity: .4; } 100% { opacity: 1; } }
@keyframes sahur-twinkle { 0%, 100% { opacity: .85; } 50% { opacity: .4; } }
@keyframes sahur-rock { 0% { transform: rotate(0); } 15% { transform: rotate(-9deg); } 35% { transform: rotate(7deg); } 55% { transform: rotate(-4deg); } 75% { transform: rotate(2deg); } 100% { transform: rotate(0); } }
@keyframes sahur-strike { 0% { transform: rotate(0); } 30% { transform: rotate(38deg); } 55% { transform: rotate(-6deg); } 100% { transform: rotate(0); } }
@keyframes sahur-ping { 0% { opacity: .95; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes sahur-tap { 0%, 100% { transform: translate(0, 0) scale(1); } 45% { transform: translate(-3px, -5px) scale(.92); } }
@keyframes sahur-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes sahur-pin { from { opacity: 0; transform: translateY(-1.6rem); } 70% { opacity: 1; transform: translateY(.2rem); } to { opacity: 1; transform: none; } }
@keyframes sahur-ride { from { transform: translateX(-120%); } to { transform: none; } }
@keyframes sahur-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes sahur-dash { to { background-position: 0 -36px; } }

/* cover (≤ 2.5 s, once): the lamp flickers on, the poster is slapped on, the moon rises, the kentongan drops in */
html.inv-anim .sahur-poster--cover { animation: sahur-slap .8s cubic-bezier(.2, .8, .3, 1) .2s both; }
html.inv-anim .sahur-cover__lamp .sahur-lamp__cone,
html.inv-anim .sahur-cover__lamp .sahur-lamp__glow { animation: sahur-lamp-on 1.2s linear .3s both, sahur-flicker 9s linear 3s infinite; }
html.inv-anim .sahur-cover__moon { animation: sahur-rise 1.2s cubic-bezier(.2, .7, .2, 1) .35s both; }
html.inv-anim .sahur-cover__hang { animation: sahur-drop 1s cubic-bezier(.3, 1.3, .5, 1) .55s both, sahur-sway 5s ease-in-out 1.6s infinite; }
html.inv-anim .sahur-cover::after { animation: sahur-twinkle 4s ease-in-out infinite; }
html.inv-anim .sahur-cover__skyline .sahur-skyline__lit { animation: sahur-flicker 12s linear infinite; }

/* the kentongan of "Jenis acara": it waits swaying; struck, it rocks and the mallet swings */
html.inv-anim .sahur-drum__art { animation: sahur-sway 4.5s ease-in-out infinite; }
html.inv-anim .sahur-drum.is-ringing .sahur-drum__art { animation: sahur-rock .9s ease-out; }
html.inv-anim .sahur-drum.is-ringing .sahur-kentongan__mallet { animation: sahur-strike .5s ease-out; }
html.inv-anim .sahur-post__lamp .sahur-lamp__cone { animation: sahur-flicker 10s linear infinite; }
html.inv-anim .sahur-closing__kentongan { animation: sahur-sway 5s ease-in-out infinite; }

/* the route map unrolls: the road grows, the stops drop in one by one */
html.inv-anim .sahur-route.is-open .sahur-route__list::before,
html.inv-anim .sahur-route.is-open .sahur-route__list::after { animation: sahur-grow 1s cubic-bezier(.3, .7, .3, 1) both; }
html.inv-anim .sahur-route.is-open .sahur-route__stop,
html.inv-anim .sahur-route.is-open .sahur-route__flag { animation: sahur-pin .55s cubic-bezier(.3, 1.3, .5, 1) calc(var(--i, 0) * .12s + .25s) both; }
html.inv-anim .sahur-route.is-open .sahur-route__flag--end { animation-delay: 1.4s; }
html.inv-anim .sahur-route__list::after { animation: sahur-dash 1.6s linear infinite; }
html.inv-anim .sahur-route.is-open .sahur-route__list::after { animation: sahur-grow 1s cubic-bezier(.3, .7, .3, 1) both, sahur-dash 1.6s linear 1s infinite; }

/* the live lamp blinks */
html.inv-anim .sahur-stream__live span { animation: sahur-blink 1.2s ease-in-out infinite; }

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

/* scroll-driven details (without support: finished) */
@supports (animation-timeline: view()) {
    html.inv-anim .sahur-story__motor { animation: sahur-ride linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
}

@media (prefers-reduced-motion: reduce) {
    .sahur-cover, .sahur-cover--leave, .sahur-cover__inner, .sahur-signboard, .sahur-signboard__hijri, .sahur-signboard__theme, .sahur-bubble, .sahur-occasion__next { transition: none; }
}

/* ---------- 10. intro scene "Jalan Sahur" (scene.json + sections/_scene) ----------
   The intro is teleported to <body>: everything here stands on its own classes. */
.sahur-scene-sky {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--inv-shine) 60%, transparent) 1.2px, transparent 1.7px) 0 0 / 10px 10px;
    -webkit-mask: radial-gradient(60% 30% at 0% 0%, #000, transparent), radial-gradient(50% 25% at 100% 40%, #000, transparent);
    mask: radial-gradient(60% 30% at 0% 0%, #000, transparent), radial-gradient(50% 25% at 100% 40%, #000, transparent);
    opacity: .35;
}
.sahur-scene-sky::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(1.6px 1.6px at 18% 10%, #fff, transparent), radial-gradient(1.2px 1.2px at 42% 6%, #fff, transparent),
        radial-gradient(1.4px 1.4px at 30% 22%, #fff, transparent), radial-gradient(1.2px 1.2px at 62% 28%, #fff, transparent),
        radial-gradient(1.6px 1.6px at 8% 30%, #fff, transparent), radial-gradient(1.2px 1.2px at 52% 14%, var(--inv-shine), transparent);
}
.sahur-scene-road { position: absolute; inset: 0; background: linear-gradient(180deg, var(--sahur-iron), color-mix(in srgb, var(--sahur-iron) 70%, #000)); }
.sahur-scene-road span {
    position: absolute; left: 0; right: 0; top: 46%; height: 4px;
    background: repeating-linear-gradient(90deg, var(--inv-accent) 0 26px, transparent 26px 46px);
}
html.inv-anim .sahur-scene-road span { animation: sahur-road 1.2s linear infinite; }
@keyframes sahur-road { to { background-position: -46px 0; } }
.sahur-scene-fit { position: absolute; inset: 0; }
.sahur-scene-fit > svg { width: 100%; height: 100%; }
.sahur-scene-kentongan, .sahur-scene-moon { height: auto !important; }
.sahur-scene-kentongan { filter: drop-shadow(0 8px 10px rgb(0 0 0 / .4)); }
/* the name card: a poster slapped on, with tape */
body.sahur-body .inv-intro--scene .inv-scene__card {
    top: 62%; rotate: -1.5deg;
    -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none; aspect-ratio: auto;
    padding: 1.6rem 1.2rem 1.3rem; border-radius: 4px; background: var(--sahur-paper);
    box-shadow: 5px 5px 0 var(--inv-pop), 0 24px 40px -14px rgb(0 0 0 / .7);
}
body.sahur-body .inv-intro--scene .inv-scene__card::before {
    content: ''; position: absolute; left: 50%; top: -.6rem; width: 5.4rem; height: 1.4rem; margin-left: -2.7rem; background: var(--sahur-tape);
    clip-path: polygon(3% 0, 97% 6%, 100% 30%, 96% 55%, 100% 80%, 96% 100%, 4% 94%, 0 70%, 4% 45%, 0 20%);
}
body.sahur-body .inv-scene__card .inv-intro__label { font-family: var(--sahur-marker); font-size: .86rem; font-weight: 400; letter-spacing: .03em; text-transform: none; color: var(--sahur-cool-ink); }
/* the names come in the client's script font (set inline by invitation.js): sign-painted on the poster */
body.sahur-body .inv-scene__card .inv-intro__names { line-height: 1.12; word-spacing: .1em; color: var(--sahur-title); overflow-wrap: break-word; text-wrap: balance; font-size: clamp(2rem, 9vw, 2.7rem); padding: 0 .1em .1em; }
body.sahur-body .inv-scene__card .inv-intro__rule { height: 3px; width: 4rem; background: repeating-linear-gradient(90deg, var(--inv-pop) 0 8px, transparent 8px 13px); }
body.sahur-body .inv-scene__card .inv-intro__date { font-family: var(--sahur-digits); font-weight: 700; font-size: 1rem; letter-spacing: .06em; color: var(--sahur-muted); white-space: nowrap; }