/*
 * Template "Sholawat Zamrud" (Pengajian & Hari Besar Islam): a royal Maulid at dawn — deep emerald with rich gold foil
 * and a pomegranate-red accent. Signature pieces: the green dome of a great mosque at dawn with gold rays fanning out
 * behind it (sections/_dome), the lobed calligraphy-frame cartouche around the photos (sections/_cartouche),
 * pomegranate-and-tulip friezes along the dark bands (sections/_frieze), pomegranate sprays (sections/_spray), lobed
 * medallion dividers, and cusped (multifoil) arches for the smaller photos. An arabesque ground on every section.
 * Mobile-first, one column (~460px) on a deep backdrop on wide screens.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (emerald / Nabawi green / turquoise blue / maroon: titles, buttons, the soft tone)
 *   --inv-accent (gold: the foil gradient of every ornament, rules, pills)
 *   --inv-background (ivory)   --inv-text   --inv-deep (dark bands, the cover)   --inv-shine (light gold on dark)
 *   --inv-soft (pale tint: the soft tone)   --inv-petal (pomegranate red)   --inv-leaf (the jewel band, leaves)
 *   --inv-dome (the green dome)   --inv-dawn (the dawn glow on the horizon)
 *
 * Section tones (set on each section in its partial): .szm-tone--light (ivory), --soft (the soft tint),
 * --deep (the dawn night with gold). 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 in corners clear of faces; photos melt into sections with masks; the closing
 * is compact and its names end above the bottom menu.
 *
 * Contents: 1 base · 2 tones · 3 shared pieces (heading, divider, frieze, cartouche, dome, spray, tap marker)
 *           · 4 cover · 5 sections in page order · 6 forms · 7 shared components · 8 screen sizes · 9 motion
 *           · 10 intro scene
 */

/* ---------- 1. base ---------- */
@property --szm-turn { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
    /* defaults = the "Zamrud Delima" variant (the variant's colours override these) */
    --inv-primary: #0b7550;
    --inv-accent: #d6a83a;
    --inv-background: #fcf6e6;
    --inv-text: #0f2a1f;
    --inv-deep: #03311f;
    --inv-shine: #ffd977;
    --inv-soft: #cdebd6;
    --inv-petal: #c81d3c;
    --inv-leaf: #14958a;
    --inv-dome: #12a05e;
    --inv-dawn: #f08a4b;
    --inv-radius: 16px;

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

    /* gold foil, mixed from the accent: dark bronze → gold → pale light */
    --szm-gold-1: color-mix(in srgb, var(--inv-accent) 55%, #3b1f02);
    --szm-gold-2: var(--inv-accent);
    --szm-gold-3: color-mix(in srgb, var(--inv-accent) 38%, #fff8dc);
    --szm-gold-ink: color-mix(in srgb, var(--inv-accent) 66%, #3b1f02);
    --szm-foil: linear-gradient(100deg, var(--szm-gold-1), var(--szm-gold-2) 28%, var(--szm-gold-3) 47%, var(--szm-gold-2) 62%, var(--szm-gold-1));

    /* pomegranate, leaves, the jewel band, the dome, the stone of the mosque in the dawn light */
    --szm-pom-1: color-mix(in srgb, var(--inv-petal) 62%, #2a0006);
    --szm-pom-3: color-mix(in srgb, var(--inv-petal) 55%, #ffd0b8);
    --szm-leaf-1: color-mix(in srgb, var(--inv-leaf) 55%, var(--inv-deep));
    --szm-leaf-2: color-mix(in srgb, var(--inv-leaf) 80%, #c9f2d8);
    --szm-jewel-1: color-mix(in srgb, var(--inv-leaf) 45%, var(--inv-deep));
    --szm-jewel-2: color-mix(in srgb, var(--inv-leaf) 75%, var(--inv-primary));
    --szm-dome-1: color-mix(in srgb, var(--inv-dome) 55%, #01180c);
    --szm-dome-3: color-mix(in srgb, var(--inv-dome) 55%, #e8ffe9);
    --szm-stone: color-mix(in srgb, var(--inv-dawn) 22%, #fff3dd);
    --szm-stone-shade: color-mix(in srgb, var(--inv-dawn) 40%, #c99a74);

    --szm-paper: color-mix(in srgb, #fff 70%, var(--inv-background));
    --szm-title: color-mix(in srgb, var(--inv-primary) 80%, var(--inv-deep));
    --szm-muted: color-mix(in srgb, var(--inv-text) 78%, var(--inv-background));
    --szm-cream-muted: color-mix(in srgb, var(--inv-background) 86%, transparent);
    --szm-line: color-mix(in srgb, var(--inv-accent) 58%, transparent);
    --szm-drop: 0 24px 40px -24px color-mix(in srgb, var(--inv-deep) 70%, transparent);
    --szm-star: polygon(50% 0, 61% 26%, 85% 15%, 74% 39%, 100% 50%, 74% 61%, 85% 85%, 61% 74%, 50% 100%, 39% 74%, 15% 85%, 26% 61%, 0 50%, 26% 39%, 15% 15%, 39% 26%);

    /* masks: the arabesque ground (48px tile), a cusped arch for portraits (stretched to the box), a wide one for
       landscape photos, the cusped cap of the panels (fixed height, see .szm-panel), and a scalloped rosette */
    --szm-arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -7 180 227' preserveAspectRatio='none'%3E%3Cpath d='M0 220V84Q-9.41 61.69 10.1 47.35Q13.45 22.08 38.53 17.5Q53.43 -5.07 80 0Q106.57 -5.07 121.47 17.5Q146.55 22.08 149.9 47.35Q169.41 61.69 160 84V220Z'/%3E%3C/svg%3E");
    --szm-arch-wide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -14 324 214' preserveAspectRatio='none'%3E%3Cpath d='M0 200V70Q-10.98 50.84 10.73 46.77Q16.24 21.42 41.78 25.99Q60.1 0.84 89.89 9.83Q117.04 -12.85 150 0Q182.96 -12.85 210.11 9.83Q239.9 0.84 258.22 25.99Q283.76 21.42 289.27 46.77Q310.98 50.84 300 70V200Z'/%3E%3C/svg%3E");
    --szm-cap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-13 -14 346 84' preserveAspectRatio='none'%3E%3Cpath d='M0 70V70Q-12.15 54.43 7.35 51.3Q7.42 29.37 28.89 33.86Q39.22 10.78 63.17 18.86Q81.28 -3.37 107.88 7.31Q131.58 -13.18 160 0Q188.42 -13.18 212.12 7.31Q238.72 -3.37 256.83 18.86Q280.78 10.78 291.11 33.86Q312.58 29.37 312.65 51.3Q332.15 54.43 320 70V70Z'/%3E%3C/svg%3E");
    --szm-rosette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10.6 -10.6 21.2 21.2'%3E%3Cpath d='M0 -9Q2.8 -10.43 4.5 -7.79Q7.64 -7.64 7.79 -4.5Q10.43 -2.8 9 0Q10.43 2.8 7.79 4.5Q7.64 7.64 4.5 7.79Q2.8 10.43 0 9Q-2.8 10.43 -4.5 7.79Q-7.64 7.64 -7.79 4.5Q-10.43 2.8 -9 0Q-10.43 -2.8 -7.79 -4.5Q-7.64 -7.64 -4.5 -7.79Q-2.8 -10.43 0 -9Z'/%3E%3C/svg%3E");
    --szm-ground: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M24 7C30 13 30 18 24 24 18 18 18 13 24 7ZM24 41C18 35 18 30 24 24 30 30 30 35 24 41ZM7 24C13 18 18 18 24 24 18 30 13 30 7 24ZM41 24C35 30 30 30 24 24 30 18 35 18 41 24Z'/%3E%3Cpath d='M0 6A6 6 0 0 0 6 0M42 0A6 6 0 0 0 48 6M48 42A6 6 0 0 0 42 48M6 48A6 6 0 0 0 0 42'/%3E%3Cpath d='M0 24H5M43 24H48M24 0V5M24 43V48' opacity='.7'/%3E%3C/g%3E%3Ccircle cx='24' cy='24' r='1.6'/%3E%3C/svg%3E");

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

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

body {
    margin: 0;
    background: var(--inv-background);
    color: var(--inv-text);
    font-family: var(--szm-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 */
.szm-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

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

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

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

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

/* ---------- 2. section tones ---------- */
/* light: ivory with a glow of the soft tint and of gold in two corners, the arabesque ground */
.szm-tone--light {
    background:
        radial-gradient(60% 28% at 100% 0%, color-mix(in srgb, var(--inv-soft) 85%, transparent), transparent 75%),
        radial-gradient(60% 28% at 0% 100%, color-mix(in srgb, var(--inv-accent) 16%, transparent), transparent 75%),
        var(--inv-background);
}
/* soft: a wash of the soft tint */
.szm-tone--soft {
    background:
        radial-gradient(80% 36% at 50% 0%, color-mix(in srgb, #fff 55%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-soft), color-mix(in srgb, var(--inv-soft) 50%, var(--inv-background)));
}
.szm-tone--light::before, .szm-tone--soft::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-primary); opacity: .075;
    -webkit-mask: var(--szm-ground) center top / 48px 48px repeat; mask: var(--szm-ground) center top / 48px 48px repeat;
}
/* deep: the night colour with a glow of the primary, a warm dawn light at the foot and the arabesque in gold */
.szm-tone--deep {
    color: var(--inv-background);
    background:
        radial-gradient(90% 40% at 15% 0%, color-mix(in srgb, var(--inv-primary) 88%, transparent), transparent 75%),
        radial-gradient(80% 32% at 90% 100%, color-mix(in srgb, var(--inv-dawn) 26%, transparent), transparent 75%),
        radial-gradient(60% 30% at 0% 70%, color-mix(in srgb, var(--inv-petal) 16%, transparent), transparent 75%),
        var(--inv-deep);
}
.szm-tone--deep::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-shine); opacity: .1;
    -webkit-mask: var(--szm-ground) center top / 48px 48px repeat; mask: var(--szm-ground) center top / 48px 48px repeat;
}
.szm-tone--deep a:not(.inv-button) { color: var(--inv-shine); }
.szm-tone--deep .szm-arabic { color: var(--inv-shine); }

/* a client photo behind a section, under a strong gradient of the section's own tone */
.szm-bgphoto { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.szm-bgphoto img { display: block; width: 100%; height: calc(100% + 80px); margin-top: -40px; object-fit: cover; object-position: center 30%; --inv-parallax: 40px; }
.szm-bgphoto::after { content: ''; position: absolute; inset: 0; }
.szm-tone--deep .szm-bgphoto::after {
    background:
        radial-gradient(90% 50% at 20% 10%, color-mix(in srgb, var(--inv-primary) 45%, transparent), transparent),
        linear-gradient(180deg,
            color-mix(in srgb, var(--inv-deep) 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 lobed medallions, carved title, the last word in the script font in gold foil */
.szm-heading { margin: 0 0 2rem; }
.szm-heading__eyebrow {
    display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .55rem;
    font-size: .68rem; font-weight: 600; line-height: 1.25; letter-spacing: .26em; text-transform: uppercase; color: var(--szm-gold-ink);
}
.szm-heading__eyebrow::before, .szm-heading__eyebrow::after {
    content: ''; width: 10px; height: 10px; flex: none; background: var(--inv-petal);
    -webkit-mask: var(--szm-rosette) center / contain no-repeat; mask: var(--szm-rosette) center / contain no-repeat;
    box-shadow: inset 0 0 0 2px var(--inv-accent);
}
.szm-heading__title {
    margin: 0; font-family: var(--szm-title-font); font-size: 1.72rem; font-weight: 600; line-height: 1.18;
    letter-spacing: .02em; color: var(--szm-title); text-wrap: balance;
}
.szm-heading__title em {
    display: inline-block; padding: 0 .1em .12em; font-family: var(--szm-script); font-style: normal; font-weight: 400;
    font-size: 1.55em; line-height: .9; letter-spacing: 0; word-spacing: .12em;
}
.szm-heading__divider { margin: .7rem auto 0; }
.szm-tone--deep .szm-heading__eyebrow { color: var(--inv-shine); }
/* on ivory the foil runs darker, so the script word keeps its contrast */
:is(.szm-tone--light, .szm-tone--soft) .szm-heading__title em {
    background-image: linear-gradient(100deg, var(--szm-gold-1), var(--szm-gold-ink) 30%, var(--inv-accent) 48%, var(--szm-gold-ink) 64%, var(--szm-gold-1));
}
.szm-tone--deep .szm-heading__title { color: #fff; }

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

/* the pomegranate frieze */
.szm-frieze { display: block; width: 100%; height: 1.65rem; overflow: hidden; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .25)); }
.szm-frieze--top { position: absolute; left: 0; top: .85rem; }

/* panels with a cusped cap: a gold sheet and an ivory paper inside it, both cut by the same mask (the cap at a
   fixed height, the rest a plain box), so the gold shows as an even edge of 3px */
.szm-panel { --cap: 4.6rem; position: relative; filter: drop-shadow(0 18px 22px color-mix(in srgb, var(--inv-deep) 30%, transparent)); }
.szm-panel__sheet, .szm-panel__paper {
    -webkit-mask: var(--szm-cap) top / 100% var(--cap) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--cap) - 1px) / 100% 100% no-repeat;
    mask: var(--szm-cap) top / 100% var(--cap) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--cap) - 1px) / 100% 100% no-repeat;
}
.szm-panel__sheet { padding: 3px; background: var(--szm-foil); }
.szm-panel__paper {
    position: relative; overflow: hidden; color: var(--inv-text);
    background: radial-gradient(80% 30% at 50% 0%, color-mix(in srgb, var(--inv-soft) 55%, transparent), transparent 75%), var(--szm-paper);
    box-shadow: inset 0 0 0 6px var(--szm-paper), inset 0 0 0 7px var(--szm-line);
}
.szm-panel__finial { position: relative; z-index: 2; display: block; width: 2.6rem; height: auto; margin: 0 auto -1.1rem; overflow: visible; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .25)); }

/* the cartouche (sections/_cartouche): figure 200:300, the photo in an oval inside the frame */
.szm-cart { --cart-w: 15rem; --cart-pos: center 26%; position: relative; width: var(--cart-w); aspect-ratio: 2 / 3; margin: 0 auto; flex: none; }
.szm-cart__window {
    position: absolute; left: 13%; right: 13%; top: 19.33%; bottom: 14%; overflow: hidden; border-radius: 50%;
    background:
        radial-gradient(80% 50% at 50% 30%, color-mix(in srgb, var(--inv-leaf) 45%, transparent), transparent 70%),
        linear-gradient(170deg, color-mix(in srgb, var(--inv-primary) 80%, #fff), var(--inv-deep));
}
.szm-cart__photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--cart-pos); }
.szm-cart__photo--bg { background: var(--cart-pos) / cover no-repeat; }
.szm-cart__empty { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: .4rem; }
.szm-cart__crescent { width: 22%; }
.szm-cart__initials { font-family: var(--szm-title-font); font-weight: 600; font-size: calc(var(--cart-w) * .17); line-height: 1; letter-spacing: .04em; color: #fff; white-space: nowrap; text-shadow: 0 6px 18px rgb(0 0 0 / .25); }
.szm-cart__frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 3px 3px rgb(0 0 0 / .28)); }
.szm-cart__pearls { stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: .1 6.15; }
.szm-cart__moon { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--inv-shine) 80%, transparent)); }
.szm-cart__spray { position: absolute; bottom: 3%; width: 34%; pointer-events: none; filter: drop-shadow(0 3px 3px rgb(0 0 0 / .22)); }
.szm-cart__spray--left { left: -15%; }
.szm-cart__spray--right { right: -15%; transform: scaleX(-1); }

/* the great mosque at dawn (sections/_dome) */
.szm-dome { display: block; width: 100%; height: auto; overflow: visible; }
.szm-dome__stone { fill: var(--szm-stone); }
.szm-dome__shade { fill: var(--szm-stone-shade); opacity: .45; }
.szm-dome__window { fill: color-mix(in srgb, var(--inv-deep) 70%, var(--inv-dawn)); }
.szm-dome--silhouette { color: color-mix(in srgb, var(--inv-primary) 16%, var(--inv-deep)); }
.szm-dome--silhouette :is(path, rect, circle) { fill: currentColor !important; stroke: none !important; opacity: 1; }
.szm-dome--silhouette .szm-dome__window { fill: color-mix(in srgb, var(--inv-shine) 60%, var(--inv-dawn)) !important; opacity: .22; }
.szm-dome--silhouette .szm-dome__glint { display: none; }

/* pomegranate sprays */
.szm-spray { display: block; overflow: visible; pointer-events: none; }

/* the tap marker (the medallion): two pulsing gold rings, a tapping hand and a label */
.szm-tap { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; }
.szm-tap__ring {
    position: absolute; left: 50%; top: 50%; width: 7rem; aspect-ratio: 1; margin: -3.5rem 0 0 -3.5rem; border-radius: 50%;
    border: 2.5px solid var(--inv-shine); opacity: 0;
}
.szm-tap__hand {
    position: absolute; left: 54%; top: 54%; width: 2.7rem; height: 2.7rem;
    fill: #fff; stroke: var(--szm-gold-1); stroke-width: 1.4; stroke-linejoin: round;
    filter: drop-shadow(0 4px 6px rgb(0 0 0 / .4));
}
.szm-tap__label {
    position: absolute; left: 50%; bottom: -1.1rem; transform: translateX(-50%); white-space: nowrap;
    padding: .4rem 1rem; border-radius: 999px; font-size: .76rem; font-weight: 600; letter-spacing: .05em;
    color: var(--inv-deep); background: var(--szm-foil); background-size: 220% 100%;
    box-shadow: 0 0 0 2px var(--inv-deep), 0 0 0 3px var(--szm-line), 0 10px 18px -8px rgb(0 0 0 / .6);
}

/* ---------- 4. cover ---------- */
.szm-cover {
    --cart-cover: 15.4rem;
    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: 3.1rem 1.4rem 1.6rem; isolation: isolate; color: var(--inv-background);
    background:
        radial-gradient(60% 30% at 50% 28%, color-mix(in srgb, var(--inv-primary) 80%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-deep) 0%, color-mix(in srgb, var(--inv-primary) 40%, var(--inv-deep)) 55%, color-mix(in srgb, var(--inv-dawn) 30%, var(--inv-deep)) 100%);
    transition: opacity .9s ease;
}
/* the arabesque ground */
.szm-cover::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .1; background: var(--inv-shine);
    -webkit-mask: var(--szm-ground) center top / 48px 48px repeat; mask: var(--szm-ground) center top / 48px 48px repeat;
}
/* gold rays fanning out from behind the cartouche (turning slowly) */
.szm-cover__rays {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: repeating-conic-gradient(from var(--szm-turn) at 50% 32%, color-mix(in srgb, var(--inv-shine) 24%, transparent) 0 3deg, transparent 3deg 11.25deg);
    -webkit-mask: radial-gradient(62% 40% at 50% 32%, #000 25%, transparent 100%); mask: radial-gradient(62% 40% at 50% 32%, #000 25%, transparent 100%);
}
/* gold motes and a few stars (a living ground) */
.szm-cover::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .8;
    background:
        radial-gradient(1.6px 1.6px at 12% 82%, var(--inv-shine), transparent),
        radial-gradient(1.2px 1.2px at 28% 64%, var(--inv-shine), transparent),
        radial-gradient(2px 2px at 76% 74%, var(--inv-shine), transparent),
        radial-gradient(1.3px 1.3px at 88% 40%, #fff, transparent),
        radial-gradient(1.8px 1.8px at 8% 30%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 62% 18%, var(--inv-shine), transparent),
        radial-gradient(1.5px 1.5px at 42% 92%, var(--inv-shine), transparent);
    background-size: 100% 420px;
}
.szm-cover__dawn {
    position: absolute; left: -20%; right: -20%; bottom: 0; height: 46%; z-index: -1; pointer-events: none;
    background: radial-gradient(50% 60% at 50% 100%, color-mix(in srgb, var(--inv-dawn) 62%, transparent), color-mix(in srgb, var(--inv-petal) 14%, transparent) 55%, transparent 80%);
}
.szm-cover__skyline { position: absolute; left: 50%; bottom: 0; z-index: -1; width: max(100%, 25rem); transform: translateX(-50%); pointer-events: none; opacity: .92; }
.szm-cover__spray { position: absolute; z-index: -1; bottom: -.4rem; width: 8.2rem; filter: drop-shadow(0 4px 5px rgb(0 0 0 / .35)); }
.szm-cover__spray--left { left: -1.3rem; }
.szm-cover__spray--right { right: -1.3rem; transform: scaleX(-1); }
.szm-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); }

.szm-cover__host {
    max-width: 18rem; margin: 0 0 .2rem;
    font-size: .68rem; font-weight: 600; line-height: 1.35; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-shine); text-wrap: balance;
}
.szm-cover__art { position: relative; width: var(--cart-cover); }
/* a warm light breathing behind the cartouche */
.szm-cover__art::before {
    content: ''; position: absolute; z-index: -1; left: -22%; right: -22%; top: 6%; bottom: 2%; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-shine) 36%, transparent), transparent);
}
.szm-cart--cover { --cart-w: var(--cart-cover); }

.szm-cover__title {
    margin: .25rem 0 0; max-width: 100%; font-family: var(--szm-script); font-size: 3.4rem; font-weight: 400; line-height: 1.02;
    padding: 0 .2em .08em; word-spacing: .12em; text-wrap: balance; filter: drop-shadow(0 2px 6px rgb(0 0 0 / .35));
}
.szm-cover__date { display: flex; flex-direction: column; align-items: center; gap: .2rem; margin: .3rem 0 0; }
.szm-cover__ribbon {
    display: inline-block; padding: .28rem 1.6rem .32rem; font-family: var(--szm-title-font); font-size: .9rem; font-weight: 700; letter-spacing: .06em;
    color: var(--inv-deep); background: var(--szm-foil); background-size: 220% 100%;
    clip-path: polygon(0 0, 100% 0, calc(100% - .7rem) 50%, 100% 100%, 0 100%, .7rem 50%);
}
.szm-cover__hijri { font-family: var(--szm-read); font-size: 1.02rem; font-style: italic; font-weight: 600; color: var(--inv-shine); }
.szm-cover__quote {
    max-width: 30ch; margin: .45rem 0 0; font-family: var(--szm-read); font-style: italic; font-weight: 500;
    font-size: 1.06rem; line-height: 1.32; color: var(--szm-cream-muted); text-shadow: 0 1px 8px color-mix(in srgb, var(--inv-deep) 80%, transparent);
}
.szm-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) 70%, transparent);
    box-shadow: inset 0 0 0 1px var(--szm-line); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.szm-cover__guest p { margin: 0; font-size: .6rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-shine); }
.szm-cover__guest-name { display: block; font-family: var(--szm-read); font-size: 1.3rem; font-weight: 600; line-height: 1.22; color: #fff; overflow-wrap: anywhere; }
.szm-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(--szm-foil); background-size: 220% 100%;
    box-shadow: 0 0 0 3px var(--inv-deep), 0 0 0 4.2px var(--szm-line), 0 14px 26px -12px rgb(0 0 0 / .6);
}

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

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

/* opening: the levha panel under a cusped arch */
.szm-opening { padding: 3.2rem 1.25rem 4.2rem; }
.szm-letter { max-width: 22.5rem; margin: 0 auto; }
.szm-letter .szm-panel__paper { padding: 3.6rem 1.5rem 5rem; }
.szm-letter__spray { position: absolute; bottom: 1.6rem; width: 4.4rem; opacity: .95; }
.szm-letter__spray--left { left: -.3rem; }
.szm-letter__spray--right { right: -.3rem; transform: scaleX(-1); }
.szm-letter__frieze { position: absolute; left: 0; bottom: .55rem; height: 1.25rem; filter: none; }
.szm-letter__body { position: relative; }
.szm-opening__basmalah { margin: 0 0 .5rem; font-size: 1.8rem; }
.szm-opening__greeting { margin: 0 auto; max-width: 22ch; font-family: var(--szm-read); font-size: 1.45rem; font-weight: 600; font-style: italic; line-height: 1.3; color: var(--szm-title); }
.szm-opening__divider { margin: .9rem auto; }
.szm-opening__message { margin: 0 auto; max-width: 28ch; color: var(--szm-muted); }
.szm-opening__quote {
    position: relative; margin: 1.6rem 0 0; padding: 1.3rem 1.1rem 1.2rem; border-radius: 999px / 3.2rem;
    background: color-mix(in srgb, var(--inv-soft) 55%, transparent);
    box-shadow: inset 0 0 0 1px var(--szm-line), inset 0 0 0 4px color-mix(in srgb, var(--inv-soft) 10%, var(--szm-paper)), inset 0 0 0 5px var(--szm-line);
}
.szm-opening__quote p { margin: 0; font-family: var(--szm-read); font-style: italic; font-size: 1.12rem; font-weight: 500; line-height: 1.48; color: var(--inv-text); }
.szm-opening__quote cite,
.szm-prayer__source cite {
    display: inline-block; margin-top: .8rem; padding: .26rem .95rem; border-radius: 999px; font-style: normal; font-size: .7rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--szm-gold-ink); background: var(--szm-paper); box-shadow: inset 0 0 0 1px var(--szm-line);
}

/* organizer: the cartouche, the seal at its foot, the board, the name and the motto */
.szm-organizer__art { position: relative; width: min(13rem, 60vw); margin: 0 auto; }
.szm-cart--organizer { --cart-w: 100%; --cart-pos: center 35%; }
.szm-cart--organizer .szm-cart__initials { font-size: 2.6rem; }
.szm-seal {
    position: relative; z-index: 2; display: grid; place-items: center; width: 5.2rem; height: 5.2rem; margin: -2.3rem auto 0;
    color: #fff; font-family: var(--szm-title-font); font-size: 1.35rem; font-weight: 700; letter-spacing: .04em; line-height: 1;
    filter: drop-shadow(0 10px 12px color-mix(in srgb, var(--inv-deep) 45%, transparent));
}
.szm-seal__rim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.szm-seal::before {
    content: ''; position: absolute; z-index: 1; inset: 15%; border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--inv-primary) 75%, #fff), var(--inv-deep));
    box-shadow: inset 0 0 0 1.5px var(--szm-gold-1);
}
.szm-seal__text { position: relative; z-index: 2; padding: 0 .4rem; text-align: center; overflow-wrap: anywhere; }
.szm-seal--logo::before { background: #fff; }
.szm-seal img { position: relative; z-index: 2; width: 56%; height: 56%; object-fit: contain; }
.szm-organizer__unit { margin: 1.1rem auto 0 !important; font-size: .66rem; font-weight: 600; letter-spacing: .22em; line-height: 1.4; text-transform: uppercase; color: var(--szm-gold-ink); }
.szm-organizer__name { margin: .35rem auto 0; max-width: 18ch; font-family: var(--szm-title-font); font-size: 1.8rem; font-weight: 700; line-height: 1.16; color: var(--szm-title); text-wrap: balance; overflow-wrap: anywhere; }
.szm-organizer__tagline { display: flex; align-items: center; justify-content: center; gap: .55rem; margin: .5rem auto 0 !important; font-family: var(--szm-read); font-size: 1.12rem; font-style: italic; color: var(--szm-muted); text-wrap: balance; }
.szm-organizer__tagline svg { width: .85rem; height: 1rem; flex: none; overflow: visible; }

/* occasion: "Fajar di Kubah Hijau" — the mosque at dawn in a wide cusped arch, the type, the Hijri date, the theme */
.szm-occasion { padding-top: 3.6rem; }
.szm-dawn {
    position: relative; max-width: 24rem; margin: 0 auto; padding: 3px; background: var(--szm-foil);
    -webkit-mask: var(--szm-arch-wide) center / 100% 100% no-repeat; mask: var(--szm-arch-wide) center / 100% 100% no-repeat;
}
.szm-dawn__window {
    position: relative; overflow: hidden; aspect-ratio: 5 / 4;
    -webkit-mask: var(--szm-arch-wide) center / 100% 100% no-repeat; mask: var(--szm-arch-wide) center / 100% 100% no-repeat;
}
.szm-dawn__sky {
    position: absolute; inset: 0;
    background:
        radial-gradient(1.4px 1.4px at 22% 22%, #fff, transparent), radial-gradient(1.2px 1.2px at 70% 16%, #fff, transparent),
        radial-gradient(1.6px 1.6px at 84% 34%, var(--inv-shine), transparent), radial-gradient(1.2px 1.2px at 36% 38%, #fff, transparent),
        radial-gradient(70% 42% at 50% 92%, color-mix(in srgb, var(--inv-shine) 85%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-deep) 0%, color-mix(in srgb, var(--inv-primary) 60%, var(--inv-deep)) 36%, color-mix(in srgb, var(--inv-dawn) 55%, var(--inv-petal)) 74%, color-mix(in srgb, var(--inv-dawn) 70%, var(--inv-shine)) 100%);
}
.szm-dawn__rays {
    position: absolute; inset: 0;
    background: repeating-conic-gradient(from var(--szm-turn) at 50% 66%, color-mix(in srgb, var(--inv-shine) 55%, transparent) 0 3.6deg, transparent 3.6deg 12deg);
    -webkit-mask: radial-gradient(75% 75% at 50% 66%, #000 18%, transparent 80%); mask: radial-gradient(75% 75% at 50% 66%, #000 18%, transparent 80%);
}
.szm-dawn__mosque { position: absolute; left: -4%; bottom: 0; width: 108%; filter: drop-shadow(0 -2px 10px color-mix(in srgb, var(--inv-shine) 50%, transparent)); }
.szm-occasion__eyebrow { margin: 1.6rem 0 .5rem !important; font-size: .66rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-shine); }
.szm-occasion__type { margin: 0 auto; max-width: 15ch; font-family: var(--szm-script); font-size: 2.65rem; word-spacing: .12em; font-weight: 400; line-height: 1.08; padding: 0 .12em .12em; text-wrap: balance; }
.szm-occasion__hijri { margin: .7rem auto 0 !important; }
.szm-occasion__hijri span {
    display: inline-block; padding: .3rem 1.6rem .34rem; font-family: var(--szm-title-font); font-size: .95rem; font-weight: 700; letter-spacing: .05em;
    color: var(--inv-deep); background: var(--szm-foil); background-size: 220% 100%;
    clip-path: polygon(0 0, 100% 0, calc(100% - .7rem) 50%, 100% 100%, 0 100%, .7rem 50%);
}
.szm-occasion__theme {
    max-width: 20rem; margin: 1.2rem auto 0; padding: 1rem 1.4rem 1.1rem; border-radius: 999px / 2.6rem;
    background: radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--inv-shine) 18%, transparent), transparent 70%), color-mix(in srgb, var(--inv-deep) 55%, transparent);
    box-shadow: inset 0 0 0 1px var(--szm-line), inset 0 0 0 4px color-mix(in srgb, var(--inv-deep) 60%, transparent), inset 0 0 0 5px var(--szm-line);
}
.szm-occasion__theme-label { margin: 0; font-size: .6rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-shine); }
.szm-occasion__theme-text { margin: .15rem 0 0; font-family: var(--szm-read); font-size: 1.24rem; font-style: italic; font-weight: 600; line-height: 1.32; color: #fff; text-wrap: balance; }
.szm-occasion__divider { margin: 1.5rem auto 1rem; }
.szm-occasion__intent { margin: 0 auto !important; max-width: 30ch; font-family: var(--szm-read); font-size: 1.12rem; font-style: italic; line-height: 1.5; color: var(--szm-cream-muted); }

/* memorial: quiet — a small oval portrait in a scalloped gold rim under a crescent, the name, the years, the words */
.szm-memorial__crescent { display: block; width: 1.9rem; margin: 0 auto .4rem; }
.szm-memorial__eyebrow { margin: 0 auto .9rem !important; font-size: .7rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--szm-gold-ink); }
.szm-memorial__portrait { width: 9.4rem; aspect-ratio: 4 / 5; margin: 0 auto; padding: 5px; border-radius: 50%; background: var(--szm-foil); filter: drop-shadow(0 12px 16px color-mix(in srgb, var(--inv-deep) 25%, transparent)); }
.szm-memorial__oval {
    position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: 50%;
    background: linear-gradient(170deg, color-mix(in srgb, var(--inv-primary) 70%, #fff), var(--inv-deep));
    box-shadow: inset 0 0 0 3px var(--szm-paper);
}
.szm-memorial__oval img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; filter: saturate(.92); }
.szm-memorial__oval::before {
    content: ''; position: absolute; inset: 0; opacity: .14; background: var(--inv-shine);
    -webkit-mask: var(--szm-ground) center / 30px 30px repeat; mask: var(--szm-ground) center / 30px 30px repeat;
}
.szm-memorial__mark { position: absolute; left: 50%; top: 50%; width: 92%; aspect-ratio: 1; transform: translate(-50%, -50%); overflow: visible; }
.szm-memorial__oval img ~ .szm-memorial__mark { display: none; }
.szm-memorial__initial { position: relative; font-family: var(--szm-title-font); font-size: 2.8rem; font-weight: 600; color: #fff; }
.szm-memorial__oval img ~ .szm-memorial__initial { display: none; }
.szm-memorial__name { margin: 1.3rem auto 0; max-width: 20ch; font-family: var(--szm-title-font); font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: var(--szm-title); text-wrap: balance; }
.szm-memorial__years { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem .9rem; margin: .45rem auto 0 !important; font-size: .86rem; color: var(--szm-muted); }
.szm-memorial__years span + span::before { content: '·'; margin-right: .9rem; color: var(--inv-accent); }
.szm-memorial__divider { margin: 1.1rem auto; }
.szm-memorial__message { font-family: var(--szm-read); font-size: 1.16rem; font-style: italic; line-height: 1.55; color: var(--inv-text); max-width: 30ch !important; }
.szm-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(--szm-title); box-shadow: inset 0 0 0 1px var(--szm-line);
}

/* events: ivory cards with a wide cusped-arch photo edged in gold and a date rosette */
.szm-event {
    position: relative; margin: 0 auto; max-width: 25rem; padding: .7rem .7rem 1.7rem; border-radius: 22px; background: var(--szm-paper); text-align: left;
    box-shadow: inset 0 0 0 1px var(--szm-line), inset 0 0 0 5px var(--szm-paper), inset 0 0 0 6px var(--szm-line), var(--szm-drop);
}
.szm-event + .szm-event { margin-top: 2.4rem; }
.szm-event__spray { position: absolute; bottom: .3rem; width: 3.6rem; opacity: .95; }
.szm-event__spray--left { left: .2rem; }
.szm-event__spray--right { right: .2rem; transform: scaleX(-1); }
.szm-event__media {
    position: relative; margin: .2rem .2rem 0; padding: 3px; background: var(--szm-foil);
    -webkit-mask: var(--szm-arch-wide) center / 100% 100% no-repeat; mask: var(--szm-arch-wide) center / 100% 100% no-repeat;
}
.szm-event__photo {
    display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: center 30%;
    -webkit-mask: var(--szm-arch-wide) center / 100% 100% no-repeat; mask: var(--szm-arch-wide) center / 100% 100% no-repeat;
}
.szm-event__top { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1rem 0; }
.szm-event__media + .szm-event__top { margin-top: -2.6rem; align-items: flex-end; }
.szm-event__date {
    position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 5rem; height: 5rem; margin: 0;
    color: #fff; background: var(--szm-foil);
    -webkit-mask: var(--szm-rosette) center / contain no-repeat; mask: var(--szm-rosette) center / contain no-repeat;
    font-size: .54rem; font-weight: 600; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase;
}
.szm-event__date::before {
    content: ''; position: absolute; inset: 4px; z-index: -1; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-primary) 80%, #fff), var(--inv-deep));
    -webkit-mask: var(--szm-rosette) center / contain no-repeat; mask: var(--szm-rosette) center / contain no-repeat;
}
.szm-event__date strong { font-family: var(--szm-title-font); font-size: 1.6rem; font-weight: 700; line-height: 1.05; letter-spacing: 0; }
.szm-event__date span:first-child { color: var(--inv-shine); }
.szm-event__head { min-width: 0; padding-bottom: .1rem; }
.szm-event__media + .szm-event__top .szm-event__head { padding-top: 2.8rem; }
.szm-event__name { margin: 0; font-family: var(--szm-title-font); font-size: 1.28rem; font-weight: 700; line-height: 1.2; color: var(--szm-title); }
.szm-event__full { margin: .15rem 0 0; font-size: .8rem; color: var(--szm-muted); }
.szm-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(--szm-line); }
.szm-event__rows li { display: flex; align-items: flex-start; gap: .65rem; }
.szm-event__rows .szm-icon { width: 2rem; height: 2rem; padding: .42rem; border-radius: 50%; color: var(--szm-gold-ink); box-shadow: inset 0 0 0 1px var(--szm-line); }
.szm-event__rows li > span { padding-top: .28rem; }
.szm-event__venue { display: block; font-weight: 600; }
.szm-event__address { display: block; font-size: .85rem; color: var(--szm-muted); }
.szm-event .inv-maps { margin: 1.1rem 1rem 0; text-align: center; }
.szm-event .inv-maps .inv-button { width: 100%; font-weight: 600; }
.szm-event .inv-maps__frame { height: 180px; border-radius: 14px; }

/* countdown: scalloped gold rosettes with carved numerals */
.szm-countdown .inv-countdown { gap: clamp(.4rem, 2.2vw, .75rem); }
.szm-countdown .inv-countdown__item {
    position: relative; isolation: isolate; display: grid; place-content: center; width: clamp(4.2rem, 19vw, 4.9rem); min-width: 0; aspect-ratio: 1; padding: 0;
    color: var(--inv-text); background: var(--szm-foil); border-radius: 0;
    -webkit-mask: var(--szm-rosette) center / contain no-repeat; mask: var(--szm-rosette) center / contain no-repeat;
}
.szm-countdown .inv-countdown__item::before {
    content: ''; position: absolute; inset: 4px; z-index: -1; background: radial-gradient(circle at 38% 32%, #fffdf6, var(--szm-gold-3) 72%, var(--inv-accent));
    -webkit-mask: var(--szm-rosette) center / contain no-repeat; mask: var(--szm-rosette) center / contain no-repeat;
}
.szm-countdown .inv-countdown__value { font-variant-numeric: lining-nums tabular-nums; font-family: var(--szm-title-font); font-size: 1.55rem; font-weight: 700; line-height: 1; color: var(--inv-deep); }
.szm-countdown .inv-countdown__label { margin-top: .1rem; font-size: .5rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-deep) 80%, transparent); }
.szm-countdown .inv-countdown__done { font-family: var(--szm-read); font-size: 1.3rem; font-style: italic; color: var(--inv-shine); }
.szm-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 2rem; }
.szm-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(--szm-line);
}
.szm-countdown .inv-countdown__actions .inv-button:first-child { color: var(--inv-deep); background: var(--szm-foil); background-size: 220% 100%; box-shadow: none; }
.szm-countdown .inv-cal {
    --inv-cal-bg: var(--szm-paper); --inv-cal-mark: var(--inv-petal);
    max-width: 19rem; margin: 2.8rem auto 0; border-radius: 22px;
    box-shadow: inset 0 0 0 1px var(--szm-line), inset 0 0 0 5px var(--szm-paper), inset 0 0 0 6px var(--szm-line), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.szm-countdown .inv-cal__month { font-family: var(--szm-title-font); font-size: 1.2rem; font-weight: 700; color: var(--szm-title); }

/* speakers: the main speaker as a wide card with a tall cusped-arch portrait, the others as compact rows */
.szm-speakers__list { display: grid; gap: .85rem; max-width: 25rem; margin: 0 auto; padding: 0; list-style: none; }
.szm-speaker {
    display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); align-items: center; gap: 1rem; padding: .8rem 1rem .8rem .8rem; border-radius: 18px;
    text-align: left; background: var(--szm-paper); box-shadow: inset 0 0 0 1px var(--szm-line);
}
.szm-speaker__frame {
    width: 100%; padding: 2px; background: var(--szm-foil);
    -webkit-mask: var(--szm-arch) center / 100% 100% no-repeat; mask: var(--szm-arch) center / 100% 100% no-repeat;
}
.szm-speaker__window {
    position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 160 / 210; overflow: hidden;
    background: radial-gradient(80% 50% at 50% 30%, color-mix(in srgb, var(--inv-leaf) 40%, transparent), transparent 70%), linear-gradient(170deg, color-mix(in srgb, var(--inv-primary) 78%, #fff), var(--inv-deep));
    -webkit-mask: var(--szm-arch) center / 100% 100% no-repeat; mask: var(--szm-arch) center / 100% 100% no-repeat;
}
.szm-speaker__window img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.szm-speaker__window::before {
    content: ''; position: absolute; inset: 0; opacity: .16; background: var(--inv-shine);
    -webkit-mask: var(--szm-ground) center / 30px 30px repeat; mask: var(--szm-ground) center / 30px 30px repeat;
}
.szm-speaker__mark { position: absolute; left: 50%; top: 58%; width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%); overflow: visible; }
.szm-speaker__letter { position: relative; padding-top: 22%; font-family: var(--szm-title-font); font-size: 1.7rem; font-weight: 700; color: #fff; }
.szm-speaker__role { margin: 0; font-size: .62rem; font-weight: 600; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; color: var(--szm-gold-ink); }
.szm-speaker__name { margin: .15rem 0 0; font-family: var(--szm-title-font); font-size: 1.12rem; font-weight: 700; line-height: 1.22; color: var(--szm-title); overflow-wrap: anywhere; }
.szm-speaker__topic { margin: .3rem 0 0; font-family: var(--szm-read); font-size: 1.02rem; font-style: italic; line-height: 1.35; color: var(--szm-muted); }
.szm-speaker--main {
    grid-template-columns: 1fr; justify-items: center; gap: 0; padding: 1.2rem 1.1rem 1.4rem; text-align: center;
    box-shadow: inset 0 0 0 1px var(--szm-line), inset 0 0 0 5px var(--szm-paper), inset 0 0 0 6px var(--szm-line), var(--szm-drop);
}
.szm-speaker--main .szm-speaker__frame { width: min(12.5rem, 60vw); padding: 3px; }
.szm-speaker--main .szm-speaker__letter { font-size: 3.2rem; }
.szm-speaker--main .szm-speaker__text { margin-top: 1rem; }
.szm-speaker--main .szm-speaker__name { font-size: 1.36rem; }
.szm-speaker--main .szm-speaker__topic {
    display: inline-block; margin-top: .6rem; padding: .5rem 1.1rem; border-radius: 999px / 1.6rem; font-size: 1.08rem; color: var(--inv-text);
    background: color-mix(in srgb, var(--inv-soft) 60%, transparent); box-shadow: inset 0 0 0 1px var(--szm-line);
}

/* prayer: "Medali Shalawat" — the closed gold medallion, its two halves swinging open, the rays and the lines */
.szm-prayer { padding-top: 4.4rem; }
.szm-medal {
    position: relative; display: block; width: 13rem; aspect-ratio: 1; margin: .4rem auto 0; padding: 0; border: 0; cursor: pointer;
    background: none; perspective: 900px; -webkit-tap-highlight-color: transparent;
}
.szm-medal:focus-visible { outline: 2px solid var(--inv-shine); outline-offset: 6px; border-radius: 50%; }
.szm-medal__rays {
    position: absolute; left: 50%; top: 50%; width: 25rem; aspect-ratio: 1; margin: -12.5rem 0 0 -12.5rem; border-radius: 50%; pointer-events: none;
    background: repeating-conic-gradient(from var(--szm-turn), color-mix(in srgb, var(--inv-shine) 72%, transparent) 0 4deg, transparent 4deg 15deg);
    -webkit-mask: radial-gradient(closest-side, #000 26%, transparent); mask: radial-gradient(closest-side, #000 26%, transparent);
    opacity: .7; transition: opacity 1s ease .15s, transform 1.3s cubic-bezier(.2, .8, .3, 1) .1s;
}
.szm-medal__flash { position: absolute; inset: 8%; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, #fff 0, color-mix(in srgb, var(--inv-shine) 70%, transparent) 40%, transparent 70%); }
.szm-medal__inner { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 20px color-mix(in srgb, var(--inv-shine) 65%, transparent)); }
.szm-medal__half { position: absolute; inset: 0; z-index: 2; transition: transform 1.15s cubic-bezier(.55, 0, .25, 1), opacity .8s ease .35s; }
.szm-medal__half svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 14px rgb(0 0 0 / .45)); }
.szm-medal__half--l { clip-path: inset(-8% 50% -8% -8%); transform-origin: 0 50%; transform: rotateY(-118deg); opacity: 0; }
.szm-medal__half--r { clip-path: inset(-8% -8% -8% 50%); transform-origin: 100% 50%; transform: rotateY(118deg); opacity: 0; }
/* closed until it is touched (only once Alpine armed it: without JavaScript it stays open) */
.szm-prayer.is-armed .szm-medal__half { transform: none; opacity: 1; }
.szm-prayer.is-armed .szm-medal__rays { opacity: 0; transform: scale(.3); }
.szm-prayer__panel { --cap: 4rem; max-width: 22.5rem; margin: 2.4rem auto 0; }
.szm-prayer__sheet { padding: 3px; background: var(--szm-foil); }
.szm-prayer__paper {
    padding: 3.1rem 1.3rem 1.5rem; color: var(--inv-text);
    background: radial-gradient(80% 30% at 50% 0%, color-mix(in srgb, var(--inv-shine) 30%, transparent), transparent 75%), var(--szm-paper);
    box-shadow: inset 0 0 0 6px var(--szm-paper), inset 0 0 0 7px var(--szm-line);
}
.szm-prayer__sheet, .szm-prayer__paper {
    -webkit-mask: var(--szm-cap) top / 100% var(--cap) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--cap) - 1px) / 100% 100% no-repeat;
    mask: var(--szm-cap) top / 100% var(--cap) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--cap) - 1px) / 100% 100% no-repeat;
}
.szm-prayer__lines { margin: 0; padding: 0; list-style: none; }
.szm-prayer__source { margin: 1rem 0 0; }
.szm-prayer__source cite { margin-top: 0; }
.szm-prayer__line { transition: opacity .9s ease calc(.75s + var(--i, 0) * .65s), transform .9s cubic-bezier(.2, .8, .3, 1) calc(.75s + var(--i, 0) * .65s), filter .9s ease calc(.75s + var(--i, 0) * .65s); }
.szm-prayer__line + .szm-prayer__line { margin-top: .7rem; }
.szm-prayer.is-armed .szm-prayer__line { opacity: .22; transform: translateY(10px); filter: blur(3.5px); }
.szm-prayer__arabic { margin: 0; font-size: 1.62rem; line-height: 2; color: var(--szm-title) !important; text-wrap: balance; }
.szm-prayer__line--arabic + .szm-prayer__line { padding-top: .8rem; border-top: 1px solid var(--szm-line); }
.szm-prayer__text { margin: 0; font-family: var(--szm-read); font-size: 1.18rem; font-style: italic; font-weight: 500; line-height: 1.5; }

/* rundown: a gold thread strung with small pomegranates; times on gold pills */
.szm-rundown__list { position: relative; max-width: 24rem; margin: 0 auto; padding: 0; list-style: none; text-align: left; }
.szm-rundown__list::before {
    content: ''; position: absolute; left: 2.35rem; top: .6rem; bottom: .6rem; width: 1.5px; transform-origin: top;
    background: linear-gradient(180deg, var(--inv-accent), color-mix(in srgb, var(--inv-accent) 40%, transparent));
}
.szm-rundown__item { position: relative; display: grid; grid-template-columns: 4.7rem minmax(0, 1fr); align-items: start; column-gap: .8rem; padding: 0 0 1rem; }
.szm-rundown__item:last-child { padding-bottom: 0; }
.szm-rundown__time {
    position: relative; justify-self: center; margin-top: .45rem; padding: .22rem .62rem; border-radius: 999px; font-size: .84rem; font-weight: 600;
    font-variant-numeric: tabular-nums; color: var(--inv-deep); background: var(--szm-foil); background-size: 220% 100%;
    box-shadow: 0 0 0 3px var(--inv-background);
}
.szm-rundown__body { position: relative; padding: .7rem .95rem .75rem; border-radius: 14px; background: var(--szm-paper); box-shadow: inset 0 0 0 1px var(--szm-line); }
.szm-rundown__body::before { content: ''; position: absolute; left: -.42rem; top: .95rem; width: .8rem; height: .8rem; background: var(--inv-petal); -webkit-mask: var(--szm-rosette) center / contain no-repeat; mask: var(--szm-rosette) center / contain no-repeat; }
.szm-rundown__body h3 { margin: 0; font-family: var(--szm-read); font-size: 1.2rem; font-weight: 700; line-height: 1.28; color: var(--szm-title); }
.szm-rundown__body p { margin: .1rem 0 0; font-size: .85rem; color: var(--szm-muted); }

/* charity: the programme, the beneficiaries in a lobed medallion, the needs as chips, the photo melting in */
.szm-charity { padding-top: 4.6rem; }
.szm-charity--photo { padding-top: 0; }
.szm-charity__photo {
    position: relative; z-index: -1; height: 12rem; margin: 0 -1.4rem; overflow: hidden;
    -webkit-mask: linear-gradient(180deg, #000 45%, transparent); mask: linear-gradient(180deg, #000 45%, transparent);
}
.szm-charity__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: .85; }
.szm-charity--photo .szm-frieze--top { top: 12.3rem; }
.szm-charity--photo .szm-heading { margin-top: 2.9rem; }
.szm-charity__title { margin: 0 auto; max-width: 20ch; font-family: var(--szm-title-font); font-size: 1.36rem; font-weight: 700; line-height: 1.28; color: #fff; text-wrap: balance; }
.szm-charity__badge { position: relative; display: grid; place-items: center; width: 10.8rem; aspect-ratio: 1; margin: 1.4rem auto 1.2rem !important; }
.szm-charity__badge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--inv-shine) 35%, transparent)); }
.szm-charity__rim { fill: color-mix(in srgb, var(--inv-petal) 30%, var(--inv-deep)); stroke: var(--inv-shine); stroke-width: .35; }
.szm-charity__pearls { fill: none; stroke: var(--inv-shine); stroke-width: .5; stroke-dasharray: .05 1.2; stroke-linecap: round; }
.szm-charity__badge span { position: relative; max-width: 7.2rem; font-family: var(--szm-title-font); font-size: 1.12rem; font-weight: 700; line-height: 1.22; text-wrap: balance; }
.szm-charity__text { color: var(--szm-cream-muted); font-size: .92rem; }
.szm-charity__needs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; max-width: 24rem; margin: 1rem auto 0; padding: 0; list-style: none; }
.szm-charity__needs li {
    display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .9rem; border-radius: 999px; font-size: .86rem; font-weight: 500;
    color: #fff; background: color-mix(in srgb, var(--inv-background) 10%, transparent); box-shadow: inset 0 0 0 1px var(--szm-line);
}
.szm-charity__needs svg { width: .8rem; height: .95rem; flex: none; overflow: visible; }
.szm-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(--szm-foil) !important; background-size: 220% 100% !important; font-weight: 600;
}

/* story: small cusped arches beside the text, alternating; text-only chapters as tinted cards */
.szm-story__list { display: grid; gap: 2.2rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.szm-story__item { display: grid; grid-template-columns: 42% minmax(0, 1fr); align-items: center; gap: 1.2rem; }
.szm-story__item--flip { grid-template-columns: minmax(0, 1fr) 42%; }
.szm-story__item--flip .szm-story__media { order: 2; }
.szm-story__media {
    padding: 3px; background: var(--szm-foil);
    -webkit-mask: var(--szm-arch) center / 100% 100% no-repeat; mask: var(--szm-arch) center / 100% 100% no-repeat;
}
.szm-story__photo {
    display: block; width: 100%; aspect-ratio: 5 / 6.6; object-fit: cover; object-position: center 28%;
    -webkit-mask: var(--szm-arch) center / 100% 100% no-repeat; mask: var(--szm-arch) center / 100% 100% no-repeat;
}
.szm-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(--szm-gold-ink); box-shadow: inset 0 0 0 1px var(--szm-line);
}
.szm-story__body h3 { margin: .5rem 0 0; font-family: var(--szm-title-font); font-size: 1.14rem; font-weight: 700; line-height: 1.24; color: var(--szm-title); }
.szm-story__body p { margin: .35rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--szm-muted); }
.szm-story__item--text { grid-template-columns: 2.7rem minmax(0, 1fr); align-items: start; gap: .9rem; padding: 1.15rem 1.2rem; border-radius: 18px; background: color-mix(in srgb, var(--inv-soft) 55%, var(--szm-paper)); box-shadow: inset 0 0 0 1px var(--szm-line); }
.szm-story__dot {
    display: grid; place-items: center; width: 2.7rem; height: 2.7rem; font-family: var(--szm-title-font); font-size: 1.1rem; font-weight: 700;
    color: var(--inv-deep); background: radial-gradient(circle at 35% 30%, #fffdf6, var(--szm-gold-3) 60%, var(--inv-accent));
    -webkit-mask: var(--szm-rosette) center / contain no-repeat; mask: var(--szm-rosette) center / contain no-repeat;
}

/* etiquette: ivory rows with a small pomegranate */
.szm-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(--szm-paper); box-shadow: inset 0 0 0 1px var(--szm-line), inset 0 0 0 5px var(--szm-paper), inset 0 0 0 6px var(--szm-line), var(--szm-drop); }
.szm-etiquette__list li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); align-items: start; gap: .7rem; padding: .45rem .4rem; font-size: .92rem; line-height: 1.5; }
.szm-etiquette__list li + li { border-top: 1px solid color-mix(in srgb, var(--inv-accent) 28%, transparent); padding-top: .65rem; }
.szm-etiquette__list svg { width: 1rem; height: 1.15rem; margin-top: .15rem; overflow: visible; }

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

/* live streaming */
.szm-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 0% 0%, color-mix(in srgb, #fff 14%, transparent), transparent 70%), radial-gradient(60% 80% at 100% 100%, color-mix(in srgb, var(--inv-dawn) 30%, transparent), transparent 70%), linear-gradient(140deg, var(--inv-primary), var(--inv-deep));
    box-shadow: inset 0 0 0 1px var(--szm-line), inset 0 0 0 5px color-mix(in srgb, var(--inv-deep) 30%, transparent), inset 0 0 0 6px var(--szm-line), var(--szm-drop);
}
.szm-stream__icon { display: grid; place-items: center; width: 3.3rem; height: 3.3rem; color: var(--inv-deep); background: var(--szm-foil); background-size: 220% 100%; -webkit-mask: var(--szm-rosette) center / contain no-repeat; mask: var(--szm-rosette) center / contain no-repeat; }
.szm-stream__icon .szm-icon { width: 1.55rem; height: 1.55rem; }
.szm-stream__title { margin: 0 0 .1rem; font-family: var(--szm-title-font); font-size: 1.3rem; font-weight: 700; line-height: 1.15; color: #fff; }
.szm-stream__text p { margin: 0; font-size: .86rem; color: var(--szm-cream-muted); }
.szm-stream__text .szm-stream__note { margin-top: .3rem; font-weight: 600; color: var(--inv-shine); }
.szm-stream__button { grid-column: 1 / -1; min-height: 2.75rem; color: var(--inv-deep) !important; background: var(--szm-foil) !important; background-size: 220% 100% !important; font-weight: 600; }

/* RSVP card: ivory, a lobed medallion crest on the top edge */
.szm-rsvp { padding-top: 4.6rem; }
.szm-rsvp__card {
    position: relative; max-width: 25rem; margin: 1.4rem auto 0; padding: 2.4rem 1.15rem 1.4rem; border-radius: 22px; color: var(--inv-text); background: var(--szm-paper);
    box-shadow: inset 0 0 0 1px var(--szm-line), inset 0 0 0 5px var(--szm-paper), inset 0 0 0 6px var(--szm-line), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.szm-rsvp__crest { position: absolute; left: 50%; top: 0; width: 3.4rem; height: 3.4rem; transform: translate(-50%, -50%); overflow: visible; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .35)); }
.szm-rsvp__intro { margin: 0 auto 1.1rem; max-width: 30ch; font-size: .9rem; color: var(--szm-muted); }
.szm-rsvp__sent { margin-bottom: 1rem; }
.szm-rsvp__check { display: block; width: 4.25rem; height: 4.25rem; margin: 0 auto .5rem; }
.szm-rsvp__check circle { fill: var(--inv-primary); }
.szm-rsvp__check path { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
html.inv-anim .szm-rsvp__sent .szm-rsvp__check { animation: szm-bounce .8s cubic-bezier(.34, 1.56, .64, 1) both; }
html.inv-anim .szm-rsvp__sent .szm-rsvp__check path { animation: szm-draw .45s ease-out .35s both; }
.szm-rsvp__thanks { margin: 0; font-family: var(--szm-script); font-size: 2.5rem; line-height: 1.1; color: var(--szm-title); }
.szm-rsvp__line { margin: .1rem 0 0; font-size: .9rem; color: var(--szm-muted); }
.szm-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .84rem; font-weight: 600; color: var(--szm-title); }

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

/* co-hosts: names in the carved capitals split by small lobed medallions */
.szm-cohosts__list { display: flex; flex-direction: column; align-items: center; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.szm-cohosts__list li { max-width: 26ch; font-family: var(--szm-title-font); font-size: 1.04rem; font-weight: 600; line-height: 1.35; color: var(--szm-title); text-wrap: balance; }
.szm-cohosts__list li + li::before {
    content: ''; display: block; width: 12px; height: 12px; margin: 0 auto .55rem; background: var(--inv-accent);
    -webkit-mask: var(--szm-rosette) center / contain no-repeat; mask: var(--szm-rosette) center / contain no-repeat;
}

/* contacts */
.szm-contacts__list { display: grid; gap: .7rem; max-width: 24rem; margin: 0 auto; }
.szm-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(--szm-paper); text-align: left; box-shadow: inset 0 0 0 1px var(--szm-line);
}
.szm-contact__avatar {
    position: relative; isolation: isolate; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; font-family: var(--szm-title-font); font-size: 1.15rem; font-weight: 700;
    color: #fff; background: var(--szm-foil); -webkit-mask: var(--szm-rosette) center / contain no-repeat; mask: var(--szm-rosette) center / contain no-repeat;
}
.szm-contact__avatar::before {
    content: ''; position: absolute; inset: 3px; z-index: -1; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-primary) 80%, #fff), var(--inv-deep));
    -webkit-mask: var(--szm-rosette) center / contain no-repeat; mask: var(--szm-rosette) center / contain no-repeat;
}
.szm-contact p { margin: 0; }
.szm-contact__name { font-weight: 600; font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; }
.szm-contact__role { font-size: .78rem; color: var(--szm-muted); }
.szm-contact__phone { font-size: .85rem; }
.szm-contact__button { min-height: 2.5rem; padding: .45rem .95rem; font-size: .8rem; font-weight: 600; }
.szm-contact__button .szm-icon { width: 1.05rem; height: 1.05rem; }

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

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

/* closing: compact — the photo melting into the deep colour, the crest, thanks and the name (above the menu) */
.szm-closing { padding: 2.6rem 1.6rem 6rem; }
.szm-closing--photo { padding-top: 0; }
.szm-closing__skyline { position: absolute; left: 50%; bottom: 0; z-index: -1; width: max(100%, 24rem); transform: translateX(-50%); opacity: .75; pointer-events: none; }
.szm-closing__skyline .szm-dome__window { opacity: .12; }
.szm-closing__skyline::before { content: ''; position: absolute; left: -10%; right: -10%; bottom: 0; height: 70%; z-index: -1; background: radial-gradient(50% 70% at 50% 100%, color-mix(in srgb, var(--inv-dawn) 45%, transparent), transparent 80%); }
.szm-closing__photo {
    position: relative; z-index: -1; height: min(22rem, calc(var(--inv-screen, 100svh) * .48)); margin: 0 -1.6rem; overflow: hidden;
    -webkit-mask: linear-gradient(180deg, #000 55%, transparent); mask: linear-gradient(180deg, #000 55%, transparent);
}
.szm-closing__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.szm-closing__body { position: relative; }
.szm-closing--photo .szm-closing__body { margin-top: -4.2rem; }
.szm-closing__crest { display: block; width: 6.6rem; height: auto; margin: 0 auto .5rem; overflow: visible; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--inv-shine) 40%, transparent)); }
.szm-closing__title { margin: 0 0 .6rem; font-family: var(--szm-title-font); font-size: 1.85rem; font-weight: 600; line-height: 1.05; letter-spacing: .03em; color: #fff; }
.szm-closing__title em { font-family: var(--szm-script); font-style: normal; font-weight: 400; font-size: 1.5em; letter-spacing: 0; color: var(--inv-shine); }
.szm-closing__message { margin: 0 auto; max-width: 32ch; font-size: .9rem; line-height: 1.55; color: var(--szm-cream-muted); }
.szm-closing__salam { margin: .7rem auto 0; max-width: 28ch; font-family: var(--szm-read); font-size: 1.06rem; font-style: italic; font-weight: 500; line-height: 1.35; color: var(--inv-shine); }
.szm-closing__signature { margin: .45rem auto 0; max-width: 30ch; font-size: .84rem; color: var(--szm-cream-muted); }
.szm-closing__names { margin: .55rem auto 0; max-width: 16ch; font-family: var(--szm-script); font-size: 2.6rem; word-spacing: .12em; line-height: 1.1; padding: 0 .15em .1em; text-wrap: balance; filter: drop-shadow(0 2px 6px rgb(0 0 0 / .4)); }

/* ---------- 6. forms (shared RSVP + wishes, restyled) ---------- */
.szm-main .inv-form { gap: 1rem; text-align: left; }
.szm-main .inv-form label, .szm-main .inv-form__choices legend { font-size: .82rem; font-weight: 600; color: var(--inv-text); }
.szm-main .inv-form input:not([type=radio]):not([type=checkbox]),
.szm-main .inv-form select,
.szm-main .inv-form textarea {
    width: 100%; min-height: 2.9rem; padding: .7rem .9rem; border: 0; border-radius: 12px;
    font: 400 .95rem/1.4 var(--szm-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;
}
.szm-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;
}
.szm-main .inv-form input:not([type=radio]):focus-visible,
.szm-main .inv-form select:focus-visible,
.szm-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); }
.szm-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); }
.szm-main .inv-form .inv-button--outline { width: 100%; min-height: 2.75rem; }
.szm-main .inv-form__notice { text-align: center; }

/* the three answers as cards with icons (the radio dot is hidden but still focusable) */
.szm-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.szm-rsvp .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.szm-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;
}
.szm-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.szm-rsvp .inv-form__choices label::before { content: ''; width: 2.2rem; height: 2.2rem; flex: none; background: var(--inv-soft); -webkit-mask: var(--szm-rosette) center / contain no-repeat; mask: var(--szm-rosette) center / contain no-repeat; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease; }
.szm-rsvp .inv-form__choices label::after {
    content: ''; position: absolute; left: 50%; top: 1.35rem; width: 1.2rem; height: 1.2rem; margin-left: -.6rem;
    background: currentColor; color: var(--inv-primary); pointer-events: none;
    -webkit-mask: var(--szm-choice-icon) center / contain no-repeat; mask: var(--szm-choice-icon) center / contain no-repeat;
}
.szm-rsvp .inv-form__choices label:nth-of-type(1) { --szm-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"); }
.szm-rsvp .inv-form__choices label:nth-of-type(2) { --szm-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"); }
.szm-rsvp .inv-form__choices label:nth-of-type(3) { --szm-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"); }
.szm-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); }
.szm-rsvp .inv-form__choices label:has(input:checked)::before { background-color: rgb(255 255 255 / .2); transform: scale(1.1); }
.szm-rsvp .inv-form__choices label:has(input:checked)::after { color: #fff; }
.szm-rsvp .inv-form__choices label:has(input:focus-visible) { outline: 2px solid var(--inv-accent); outline-offset: 3px; }

/* wishes */
.szm-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.szm-wishes .inv-form { padding: 1.3rem 1.1rem; border-radius: 20px; background: var(--szm-paper); box-shadow: inset 0 0 0 1px var(--szm-line), inset 0 0 0 5px var(--szm-paper), inset 0 0 0 6px var(--szm-line), var(--szm-drop); }
.szm-wishes .inv-wishes__list { margin-top: 1.4rem; }
.szm-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(--szm-line); }
.szm-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-petal); }
.szm-wishes .inv-wish__name { font-weight: 600; color: var(--szm-title); }
.szm-wishes .inv-wish__message { font-size: .88rem; line-height: 1.5; }
.szm-wishes .inv-wish__time { font-size: .72rem; color: var(--szm-muted); }

/* ---------- 7. shared components ---------- */
.szm-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(--szm-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) {
    .szm-cover { --cart-cover: 14.2rem; }
    .szm-cover__title { font-size: 3.15rem; }
}
@media (max-height: 740px) {
    .szm-cover { --cart-cover: 12.4rem; padding-top: 3rem; padding-bottom: 1.2rem; }
    .szm-cover__title { font-size: 2.9rem; }
    .szm-cover__quote { font-size: 1rem; margin-top: .35rem; }
    .szm-cover__guest { margin-top: .5rem; }
    .szm-cover__open { margin-top: .65rem; }
    .szm-cover__spray { width: 6.4rem; }
}
@media (max-height: 680px) {
    .szm-cover { --cart-cover: 10.4rem; padding-top: 2.9rem; padding-bottom: 1rem; }
    .szm-cover__host { font-size: .62rem; }
    .szm-cover__title { font-size: 2.5rem; margin-top: .15rem; }
    .szm-cover__ribbon { font-size: .84rem; }
    .szm-cover__hijri { font-size: .94rem; }
    .szm-cover__quote { font-size: .94rem; line-height: 1.28; }
    .szm-cover__guest { padding: .35rem .85rem .4rem; }
    .szm-cover__guest-name { font-size: 1.16rem; }
    .szm-cover__open { min-height: 2.7rem; padding: .55rem 1.6rem; }
    .szm-cover__spray { width: 5.6rem; }
}
@media (max-height: 620px) {
    .szm-cover { --cart-cover: 9.4rem; }
    .szm-cover__title { font-size: 2.3rem; }
    .szm-cover__date { gap: 0; }
    .szm-cover__guest { margin-top: .4rem; }
    .szm-cover__open { margin-top: .55rem; }
    .szm-cover__quote { font-size: .88rem; }
}
@media (max-width: 360px) {
    .szm-cover__title { font-size: 2.6rem; }
}

/* wide screens: the phone-width column on a deep backdrop with the arabesque print */
@media (min-width: 560px) {
    body.szm-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.szm-body::before {
        content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .1; background: var(--inv-shine);
        -webkit-mask: var(--szm-ground) center / 48px 48px repeat; mask: var(--szm-ground) center / 48px 48px repeat;
    }
    .szm-main { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
}

/* ---------- 9. motion ---------- */
@keyframes szm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes szm-bounce { 0% { transform: scale(0); } 55% { transform: scale(1.15); } 75% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes szm-rise { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes szm-zoom-out { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes szm-shine { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
@keyframes szm-breathe { 0%, 100% { opacity: .65; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes szm-motes { from { background-position: 0 0; } to { background-position: 0 -420px; } }
@keyframes szm-up { from { opacity: 0; transform: translateY(3rem); } to { opacity: 1; transform: none; } }
@keyframes szm-grow-l { from { opacity: 0; transform: rotate(-20deg) scale(.5); } to { opacity: 1; transform: none; } }
@keyframes szm-grow-r { from { opacity: 0; transform: scaleX(-1) rotate(-20deg) scale(.5); } to { opacity: 1; transform: scaleX(-1); } }
@keyframes szm-turn { to { --szm-turn: 360deg; } }
@keyframes szm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes szm-flash { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes szm-ping { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.75); } }
@keyframes szm-tap { 0%, 100% { transform: translate(0, 0) scale(1); } 45% { transform: translate(-3px, -5px) scale(.92); } }
@keyframes szm-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes szm-glint { 0%, 100% { filter: drop-shadow(0 10px 14px rgb(0 0 0 / .45)) brightness(1); } 50% { filter: drop-shadow(0 10px 14px rgb(0 0 0 / .45)) brightness(1.12); } }

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

/* rays turn slowly (cover, the dawn window, the open medallion) */
html.inv-anim :is(.szm-dawn__rays, .szm-medal__rays, .szm-scene-rays) { animation: szm-turn 60s linear infinite; }
html.inv-anim .szm-cover__rays { animation: szm-turn 60s linear infinite, szm-fade 1.4s ease .3s both; }

/* cover (≤ 2.5 s, once): the cartouche rises and its photo settles, the skyline comes up, the sprays grow in;
   then a living ground: the light behind the cartouche breathes, the rays turn, gold motes drift up */
html.inv-anim .szm-cart--cover { animation: szm-rise .9s cubic-bezier(.2, .7, .2, 1) .1s both; }
html.inv-anim .szm-cart--cover .szm-cart__photo { animation: szm-zoom-out 1.3s cubic-bezier(.2, .7, .2, 1) .1s both; }
html.inv-anim .szm-cover__skyline .szm-dome { animation: szm-up 1.2s cubic-bezier(.2, .7, .2, 1) .2s both; }
html.inv-anim .szm-cover__spray--left { transform-origin: 0 100%; animation: szm-grow-l 1.1s cubic-bezier(.25, .8, .3, 1) .45s both; }
html.inv-anim .szm-cover__spray--right { transform-origin: 50% 100%; animation: szm-grow-r 1.1s cubic-bezier(.25, .8, .3, 1) .6s both; }
html.inv-anim .szm-cover__art::before { animation: szm-breathe 5s ease-in-out infinite; }
html.inv-anim .szm-cover::after { animation: szm-motes 22s linear infinite; }

/* Medali Shalawat: the closed medallion glints while it waits; opened: the flash, the rays burst */
html.inv-anim .szm-prayer.is-armed .szm-medal__half svg { animation: szm-glint 2.6s ease-in-out infinite; }
html.inv-anim .szm-prayer.is-open .szm-medal__flash { animation: szm-flash 1.3s ease-out .15s both; }
html.inv-anim .szm-closing__crest { animation: szm-breathe 6s ease-in-out infinite; }

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

/* scroll-drawn details (the default, without support, is the finished drawing) */
@supports (animation-timeline: view()) {
    html.inv-anim .szm-rundown__list::before { animation: szm-grow linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; }
}

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

/* ---------- 10. intro scene "Fajar Kubah Hijau" (scene.json + sections/_scene) ----------
   The intro is teleported to <body>: everything here stands on its own classes. */
.szm-scene-stars {
    position: absolute; inset: 0;
    background:
        radial-gradient(1.6px 1.6px at 14% 18%, #fff, transparent), radial-gradient(1.2px 1.2px at 30% 40%, #fff, transparent),
        radial-gradient(1.8px 1.8px at 72% 12%, var(--inv-shine), transparent), radial-gradient(1.3px 1.3px at 86% 44%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 52% 8%, #fff, transparent), radial-gradient(1.5px 1.5px at 8% 56%, var(--inv-shine), transparent),
        radial-gradient(1.2px 1.2px at 92% 70%, #fff, transparent), radial-gradient(1.4px 1.4px at 62% 52%, #fff, transparent);
}
.szm-scene-stars::after { content: ''; position: absolute; inset: 0; opacity: .1; background: var(--inv-shine); -webkit-mask: var(--szm-ground) center / 48px 48px repeat; mask: var(--szm-ground) center / 48px 48px repeat; }
.szm-scene-glow { position: absolute; inset: 0; background: radial-gradient(50% 60% at 50% 100%, color-mix(in srgb, var(--inv-shine) 80%, transparent), color-mix(in srgb, var(--inv-dawn) 50%, transparent) 45%, transparent 75%); }
.szm-scene-rays {
    position: absolute; inset: 0;
    background: repeating-conic-gradient(from var(--szm-turn), color-mix(in srgb, var(--inv-shine) 42%, transparent) 0 3.2deg, transparent 3.2deg 11.25deg);
    -webkit-mask: radial-gradient(closest-side, #000 20%, transparent); mask: radial-gradient(closest-side, #000 20%, transparent);
}
.szm-scene-mosque { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
.szm-scene-mosque__art { width: 100%; height: 100%; filter: drop-shadow(0 -4px 14px color-mix(in srgb, var(--inv-shine) 55%, transparent)); }
.szm-scene-box { position: absolute; inset: 0; container-type: size; display: grid; place-items: start center; }
.szm-scene-cart { --cart-w: min(100cqw, 100cqh * 2 / 3); width: var(--cart-w); }
.szm-scene-cart .szm-cart__window { filter: none; }
.szm-scene-spray { position: absolute; inset: 0; }
.szm-scene-spray__art { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .35)); }
.szm-scene-spray--r .szm-scene-spray__art { transform: scaleX(-1); }
/* the name card: ivory stationery under a cusped arch, edged in gold */
body.szm-body .inv-intro--scene .inv-scene__card {
    --cap: 3.4rem; top: 60%; isolation: isolate;
    -webkit-backdrop-filter: none; backdrop-filter: none; aspect-ratio: auto;
    padding: 2.4rem 1.2rem 1.3rem; background: var(--szm-foil);
    -webkit-mask: var(--szm-cap) top / 100% var(--cap) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--cap) - 1px) / 100% 100% no-repeat;
    mask: var(--szm-cap) top / 100% var(--cap) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--cap) - 1px) / 100% 100% no-repeat;
}
body.szm-body .inv-intro--scene .inv-scene__card::before {
    content: ''; position: absolute; inset: 3px; z-index: -1; background: radial-gradient(80% 30% at 50% 0%, color-mix(in srgb, var(--inv-shine) 30%, transparent), transparent 75%), var(--szm-paper);
    -webkit-mask: var(--szm-cap) top / 100% var(--cap) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--cap) - 1px) / 100% 100% no-repeat;
    mask: var(--szm-cap) top / 100% var(--cap) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--cap) - 1px) / 100% 100% no-repeat;
}
body.szm-body .inv-scene__card .inv-intro__label { font-family: var(--szm-sans); font-size: .62rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--szm-gold-ink); }
body.szm-body .inv-scene__card .inv-intro__names { font-family: var(--szm-script); font-weight: 400; word-spacing: .12em; color: var(--szm-title); line-height: 1.1; overflow-wrap: anywhere; text-wrap: balance; }
body.szm-body .inv-scene__card .inv-intro__rule { height: 1px; width: 3rem; background: var(--inv-accent); }
body.szm-body .inv-scene__card .inv-intro__date { font-family: var(--szm-title-font); font-weight: 600; font-size: .86rem; color: var(--szm-muted); white-space: nowrap; }
/* short screens: a slimmer card between the cartouche and the dome */
@media (max-height: 700px) {
    body.szm-body .inv-intro--scene .inv-scene__card { top: 58.5%; padding: 2rem 1rem 1rem; }
    body.szm-body .inv-scene__card .inv-intro__names { font-size: 2rem; }
    body.szm-body .inv-scene__card .inv-intro__rule { margin: .6rem auto .5rem; }
}