/*
 * Template "Songket Melayu" (Khitanan): a royal-but-warm Malay walimatul khitan.
 * Deep cloth (emerald by default) woven with gold songket, ivory paper, royal yellow used sparingly.
 * Motifs (original artwork): stepped supplementary-weft diamonds (the songket field), pucuk rebung (bamboo-shoot
 * triangles) borders, the Malay roof gable with selembayung horns, the tanjak headdress, bunga tanjung and
 * bunga cengkih. Mobile-first, one column (~460px) on a dark songket backdrop on wide screens.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (emerald / maroon / teal / forest: the cloth)   --inv-accent (gold)   --inv-shine (light gold)
 *   --inv-background (ivory)   --inv-text   --inv-deep (the darkest cloth)   --inv-royal (kuning diraja)
 * Everything else is mixed from those, so a new variant only needs these seven colours.
 *
 * Section tones (set on each section in its partial): .songket-melayu-tone--light (ivory paper), --deep (songket cloth with
 * a gold pucuk rebung edge on top), --royal (yellow silk). Light and deep alternate down the page.
 *
 * Motion only runs with html.inv-anim (set by <x-inv.head> unless the guest prefers reduced motion);
 * without it everything is shown finished.
 *
 * Contents: 1 base · 2 section tones, bands & photo backgrounds · 3 shared pieces (heading, gable, tanjak,
 *           flowers) · 4 cover · 5 sections in page order · 6 forms (RSVP, wishes) · 7 shared components ·
 *           8 screen sizes · 9 motion
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Zamrud Emas" variant (the variant's colours override these) */
    --inv-primary: #0c6a4e;
    --inv-accent: #c99a32;
    --inv-background: #fbf5e6;
    --inv-text: #13261f;
    --inv-deep: #042c22;
    --inv-shine: #f1d27a;
    --inv-royal: #f3c21f;
    --inv-radius: 6px;

    --songket-melayu-display: 'Yeseva One', Georgia, 'Times New Roman', serif;
    --songket-melayu-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --songket-melayu-sans: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --songket-melayu-col: 460px;

    --songket-melayu-gold-dark: color-mix(in srgb, var(--inv-accent) 58%, #2a1800);
    --songket-melayu-gold: linear-gradient(115deg, var(--songket-melayu-gold-dark), var(--inv-accent) 28%, var(--inv-shine) 50%, var(--inv-accent) 72%, var(--songket-melayu-gold-dark));
    --songket-melayu-gold-soft: linear-gradient(180deg, var(--inv-shine), var(--inv-accent) 60%, var(--songket-melayu-gold-dark));
    /* gold is too light for small text on ivory: text uses this darker mix (≥ 4.5:1) */
    --songket-melayu-gold-ink: color-mix(in srgb, var(--inv-accent) 50%, #2b1a00);
    --songket-melayu-paper: color-mix(in srgb, #fff 50%, var(--inv-background));
    --songket-melayu-title: color-mix(in srgb, var(--inv-primary) 80%, var(--inv-deep));
    --songket-melayu-muted: color-mix(in srgb, var(--inv-text) 82%, var(--inv-background));
    --songket-melayu-ivory-muted: color-mix(in srgb, var(--inv-background) 84%, transparent);
    --songket-melayu-hair: color-mix(in srgb, var(--inv-accent) 45%, transparent);
    --songket-melayu-drop: 0 22px 40px -24px color-mix(in srgb, #000 70%, transparent);

    /* the songket field: stepped gold diamonds (a mask, so it takes any colour) */
    --songket-melayu-weave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='66' viewBox='0 0 66 66'%3E%3Cpath d='M0 0h9v3h-9zM33 0h3v3h-3zM60 0h6v3h-6zM0 3h6v3h-6zM63 3h3v3h-3zM0 6h3v3h-3zM33 12h3v3h-3zM30 15h3v3h-3zM36 15h3v3h-3zM27 18h3v3h-3zM39 18h3v3h-3zM24 21h3v3h-3zM33 21h3v3h-3zM42 21h3v3h-3zM21 24h3v3h-3zM45 24h3v3h-3zM18 27h3v3h-3zM33 27h3v3h-3zM48 27h3v3h-3zM15 30h3v3h-3zM30 30h9v3h-9zM51 30h3v3h-3zM0 33h3v3h-3zM12 33h3v3h-3zM21 33h3v3h-3zM27 33h15v3h-15zM45 33h3v3h-3zM54 33h3v3h-3zM15 36h3v3h-3zM30 36h9v3h-9zM51 36h3v3h-3zM18 39h3v3h-3zM33 39h3v3h-3zM48 39h3v3h-3zM21 42h3v3h-3zM45 42h3v3h-3zM24 45h3v3h-3zM33 45h3v3h-3zM42 45h3v3h-3zM27 48h3v3h-3zM39 48h3v3h-3zM30 51h3v3h-3zM36 51h3v3h-3zM33 54h3v3h-3zM0 60h3v3h-3zM0 63h6v3h-6zM63 63h3v3h-3z'/%3E%3C/svg%3E");
    /* pucuk rebung: one bamboo shoot per tile (32 × 40), apex up, with a base line (a mask) */
    --songket-melayu-rebung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='40' viewBox='0 0 32 40'%3E%3Cpath d='M14 2h4v2h-4zM14 4h4v2h-4zM0 6h2v2h-2zM12 6h2v2h-2zM18 6h2v2h-2zM2 8h2v2h-2zM12 8h2v2h-2zM18 8h2v2h-2zM30 8h2v2h-2zM0 10h2v2h-2zM4 10h2v2h-2zM10 10h2v2h-2zM14 10h4v2h-4zM20 10h2v2h-2zM28 10h2v2h-2zM2 12h2v2h-2zM10 12h2v2h-2zM14 12h4v2h-4zM20 12h2v2h-2zM30 12h2v2h-2zM0 14h2v2h-2zM8 14h2v2h-2zM14 14h4v2h-4zM22 14h2v2h-2zM8 16h2v2h-2zM14 16h4v2h-4zM22 16h2v2h-2zM6 18h2v2h-2zM14 18h4v2h-4zM24 18h2v2h-2zM6 20h2v2h-2zM14 20h4v2h-4zM24 20h2v2h-2zM4 22h2v2h-2zM12 22h8v2h-8zM26 22h2v2h-2zM4 24h2v2h-2zM12 24h8v2h-8zM26 24h2v2h-2zM2 26h2v2h-2zM10 26h12v2h-12zM28 26h2v2h-2zM2 28h2v2h-2zM10 28h12v2h-12zM28 28h2v2h-2zM0 30h2v2h-2zM8 30h16v2h-16zM30 30h2v2h-2zM0 32h32v2h-32zM0 36h32v2h-32zM0 38h32v2h-32z'/%3E%3C/svg%3E");
    /* a small lozenge (belah ketupat) for seals and separators */
    --songket-melayu-lozenge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 20 10 10 20 0 10Z'/%3E%3C/svg%3E");

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

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

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

img { max-width: 100%; }
a { color: var(--songket-melayu-title); }
.songket-melayu-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

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

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

.songket-melayu-arabic { font-family: 'Amiri', 'Traditional Arabic', serif; line-height: 1.95; color: var(--songket-melayu-title); }
.songket-melayu-amp { font-family: var(--songket-melayu-serif); font-style: italic; font-weight: 600; color: var(--songket-melayu-gold-ink); }

/* a small link with an icon (Instagram) */
.songket-melayu-chip {
    display: inline-flex; align-items: center; gap: .35rem; min-height: 2.25rem; padding: .3rem .95rem;
    border-radius: 999px; font-size: .82rem; font-weight: 700; text-decoration: none; color: var(--songket-melayu-title);
    background: #fff; box-shadow: inset 0 0 0 1.5px var(--songket-melayu-hair);
}
.songket-melayu-chip .songket-melayu-icon { width: 1rem; height: 1rem; }

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

/* light: ivory paper with a warm gold glow and a faint weave */
.songket-melayu-tone--light {
    background:
        radial-gradient(70% 32% at 100% 0%, color-mix(in srgb, var(--inv-royal) 16%, transparent), transparent 75%),
        radial-gradient(60% 30% at 0% 100%, color-mix(in srgb, var(--inv-primary) 9%, transparent), transparent 75%),
        var(--inv-background);
}
.songket-melayu-tone--light::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-primary); opacity: .04;
    -webkit-mask: var(--songket-melayu-weave) center top / 54px 54px repeat; mask: var(--songket-melayu-weave) center top / 54px 54px repeat;
}

/* deep: the songket cloth — the darkest colour with a glow of the primary, woven with faint gold diamonds,
   and a gold pucuk rebung edge hanging from the top */
.songket-melayu-tone--deep {
    color: var(--inv-background);
    background:
        radial-gradient(95% 45% at 20% 0%, color-mix(in srgb, var(--inv-primary) 90%, transparent), transparent 78%),
        radial-gradient(70% 40% at 100% 100%, color-mix(in srgb, var(--inv-primary) 55%, transparent), transparent 75%),
        var(--inv-deep);
}
.songket-melayu-tone--deep::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--songket-melayu-gold); opacity: .16;
    -webkit-mask: var(--songket-melayu-weave) center top / 54px 54px repeat; mask: var(--songket-melayu-weave) center top / 54px 54px repeat;
}
.songket-melayu-tone--deep::after {
    content: ''; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 18px; pointer-events: none;
    background: var(--songket-melayu-gold); transform: scaleY(-1);
    -webkit-mask: var(--songket-melayu-rebung) center bottom / 14.4px 18px repeat-x; mask: var(--songket-melayu-rebung) center bottom / 14.4px 18px repeat-x;
}
.songket-melayu-tone--deep a:not(.inv-button) { color: var(--inv-shine); }
.songket-melayu-tone--deep .songket-melayu-arabic { color: var(--inv-shine); }

/* royal: kuning diraja silk — the yellow with a soft diagonal sheen and a faint weave in the deep colour */
.songket-melayu-tone--royal {
    color: var(--inv-deep);
    background:
        linear-gradient(115deg, transparent 20%, color-mix(in srgb, #fff 30%, transparent) 38%, transparent 52%, color-mix(in srgb, #fff 18%, transparent) 70%, transparent 82%),
        radial-gradient(90% 60% at 100% 100%, color-mix(in srgb, var(--inv-accent) 55%, transparent), transparent 75%),
        var(--inv-royal);
}
.songket-melayu-tone--royal::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-deep); opacity: .07;
    -webkit-mask: var(--songket-melayu-weave) center top / 54px 54px repeat; mask: var(--songket-melayu-weave) center top / 54px 54px repeat;
}

/* the pucuk rebung band (gold shoots on transparent; --down hangs from the top edge) */
.songket-melayu-band {
    display: block; height: 22px; background: var(--songket-melayu-gold);
    -webkit-mask: var(--songket-melayu-rebung) center bottom / 17.6px 22px repeat-x; mask: var(--songket-melayu-rebung) center bottom / 17.6px 22px repeat-x;
}
.songket-melayu-band--down { transform: scaleY(-1); }
.songket-melayu-section__band { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; }

/* a client photo behind a section, under a strong gradient of the section's own tone */
.songket-melayu-bgphoto { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.songket-melayu-bgphoto img { display: block; width: 100%; height: calc(100% + 80px); margin-top: -40px; object-fit: cover; object-position: center 35%; --inv-parallax: 40px; }
.songket-melayu-bgphoto::after { content: ''; position: absolute; inset: 0; }
.songket-melayu-tone--light .songket-melayu-bgphoto::after {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--inv-background) 92%, transparent),
        color-mix(in srgb, var(--inv-background) 66%, transparent) 45%,
        color-mix(in srgb, var(--inv-background) 95%, transparent));
}
.songket-melayu-tone--deep .songket-melayu-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) 90%, transparent),
            color-mix(in srgb, var(--inv-deep) 70%, transparent) 45%,
            color-mix(in srgb, var(--inv-deep) 95%, transparent));
}

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

/* heading: a Malay label between two bunga tanjung, a display title with a gold italic word,
   a short strip of gold pucuk rebung under it */
.songket-melayu-heading { margin: 0 0 2.1rem; }
.songket-melayu-heading--left { text-align: left; }
.songket-melayu-heading__eyebrow {
    display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .55rem;
    font-family: var(--songket-melayu-serif); font-size: .86rem; font-weight: 700; line-height: 1.2; letter-spacing: .24em; text-transform: uppercase;
    color: var(--songket-melayu-gold-ink);
}
.songket-melayu-heading__flower { width: .85rem; height: .85rem; flex: none; fill: var(--inv-accent); }
.songket-melayu-heading__title {
    margin: 0; font-family: var(--songket-melayu-display); font-size: 2.3rem; font-weight: 400; line-height: 1.08;
    letter-spacing: -.005em; color: var(--songket-melayu-title);
}
.songket-melayu-heading__title em { font-family: var(--songket-melayu-serif); font-style: italic; font-weight: 600; font-size: 1.12em; color: var(--songket-melayu-gold-ink); }
.songket-melayu-heading__strip {
    display: block; width: 7.6rem; height: 12px; margin: .85rem auto 0; background: var(--songket-melayu-gold);
    -webkit-mask: var(--songket-melayu-rebung) center bottom / 9.6px 12px repeat-x; mask: var(--songket-melayu-rebung) center bottom / 9.6px 12px repeat-x;
}
.songket-melayu-heading--left .songket-melayu-heading__strip { margin-left: 0; }
.songket-melayu-tone--deep .songket-melayu-heading__eyebrow { color: var(--inv-shine); }
.songket-melayu-tone--deep .songket-melayu-heading__title { color: var(--inv-background); }
.songket-melayu-tone--deep .songket-melayu-heading__title em { color: var(--inv-shine); }
.songket-melayu-tone--royal .songket-melayu-heading__eyebrow { color: var(--inv-deep); }
.songket-melayu-tone--royal .songket-melayu-heading__flower { fill: var(--inv-deep); }
.songket-melayu-tone--royal .songket-melayu-heading__title { color: var(--inv-deep); }
.songket-melayu-tone--royal .songket-melayu-heading__title em { color: color-mix(in srgb, var(--inv-primary) 70%, var(--inv-deep)); }
.songket-melayu-tone--royal .songket-melayu-heading__strip { background: var(--inv-deep); }

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

/* flowers (symbols from _defs) */
.songket-melayu-flower { display: block; overflow: visible; fill: currentColor; }

/* the tanjak emblem */
.songket-melayu-tanjak { display: block; overflow: visible; }
.songket-melayu-tanjak__back, .songket-melayu-tanjak__band { fill: var(--inv-deep); }
.songket-melayu-tanjak__shadow { fill: #000; opacity: .18; }

/* the roof gable photo frame (sections/_gable): the window sits where the SVG draws it (viewBox 500 × 790) */
.songket-melayu-gable { --gable-w: 16rem; position: relative; width: var(--gable-w); aspect-ratio: 500 / 790; margin: 0; flex: none; }
.songket-melayu-gable__window {
    position: absolute; left: 10.4%; top: 15.95%; width: 79.2%; height: 78.48%; overflow: hidden;
    background: var(--inv-primary);
    clip-path: polygon(50% 0, 100% 26.77%, 100% 100%, 0 100%, 0 26.77%);
}
.songket-melayu-gable__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.songket-melayu-gable__frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 18px color-mix(in srgb, #000 30%, transparent)); }
.songket-melayu-gable__board { fill: var(--inv-deep); }
.songket-melayu-gable__dot { fill: var(--inv-shine); opacity: .7; }
.songket-melayu-gable__band { fill: none; stroke: var(--inv-deep); stroke-width: 30; stroke-linejoin: miter; }
.songket-melayu-gable__band-fill { fill: var(--inv-deep); }
.songket-melayu-gable__line { fill: none; stroke: url(#songket-melayu-gold); stroke-width: 3; stroke-linejoin: miter; }
.songket-melayu-gable__line--in { stroke-width: 1.6; opacity: .85; }
.songket-melayu-gable__carve { stroke: var(--inv-deep); }
.songket-melayu-gable__empty {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
    background:
        radial-gradient(80% 50% at 50% 30%, color-mix(in srgb, var(--inv-accent) 32%, transparent), transparent 72%),
        linear-gradient(170deg, var(--inv-primary), var(--inv-deep));
}
.songket-melayu-gable__empty::before {
    content: ''; position: absolute; inset: 0; background: var(--songket-melayu-gold); opacity: .22;
    -webkit-mask: var(--songket-melayu-weave) center / 40px 40px repeat; mask: var(--songket-melayu-weave) center / 40px 40px repeat;
}
.songket-melayu-gable__tanjak { position: relative; width: 44%; margin-top: 18%; }
.songket-melayu-gable__initial {
    position: relative; font-family: var(--songket-melayu-display); line-height: 1; font-size: calc(var(--gable-w) * .3);
    color: var(--inv-shine); text-shadow: 0 6px 18px rgb(0 0 0 / .3);
}
.songket-melayu-gable__initial--many { font-size: calc(var(--gable-w) * .17); white-space: nowrap; }

/* ---------- 4. cover ---------- */
.songket-melayu-cover {
    position: fixed; inset: 0; z-index: 30; overflow-x: hidden; overflow-y: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: safe center;
    min-height: 100svh; padding: 2.1rem 1.4rem 2.1rem;
    isolation: isolate; color: var(--inv-background);
    background:
        radial-gradient(85% 48% at 50% 22%, color-mix(in srgb, var(--inv-primary) 95%, transparent), transparent 78%),
        radial-gradient(120% 60% at 50% 110%, color-mix(in srgb, var(--inv-primary) 45%, transparent), transparent 70%),
        var(--inv-deep);
    transition: opacity .9s ease;
    --gable-cover: min(74vw, 17.5rem, calc(50svh * .633));
}
.songket-melayu-cover__weave {
    position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--songket-melayu-gold); opacity: .17;
    -webkit-mask: var(--songket-melayu-weave) center top / 54px 54px repeat; mask: var(--songket-melayu-weave) center top / 54px 54px repeat;
}
.songket-melayu-cover__band { position: absolute; left: 0; right: 0; z-index: 1; height: 20px; }
.songket-melayu-cover__band--top { top: 0; }
.songket-melayu-cover__band--bottom { bottom: 0; }
.songket-melayu-cover__inner { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; transition: transform .9s cubic-bezier(.5, 0, .3, 1); }
.songket-melayu-cover__art { display: flex; justify-content: center; }
.songket-melayu-gable--cover { --gable-w: var(--gable-cover); }

.songket-melayu-cover__text { display: flex; flex-direction: column; align-items: center; margin-top: .9rem; text-align: center; }
.songket-melayu-cover__title {
    display: inline-flex; align-items: center; gap: .6rem; margin: 0;
    font-family: var(--songket-melayu-serif); font-size: .9rem; font-weight: 700; line-height: 1.2; letter-spacing: .28em; text-transform: uppercase;
    color: var(--inv-shine);
}
.songket-melayu-cover__flower { width: .95rem; height: .95rem; fill: var(--inv-accent); }
.songket-melayu-cover__names {
    margin: .3rem 0 0; font-family: var(--songket-melayu-display); font-weight: 400; font-size: 3.35rem; line-height: 1.05;
    letter-spacing: .005em; overflow-wrap: anywhere; color: var(--inv-shine);
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-shine) 70%, #fff), var(--inv-shine) 45%, var(--inv-accent));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 10px rgb(0 0 0 / .35));
}
.songket-melayu-cover--many .songket-melayu-cover__names { font-size: 2.4rem; }
.songket-melayu-cover__date {
    display: flex; align-items: center; gap: .6rem; margin: .35rem 0 0;
    font-size: .88rem; font-weight: 700; letter-spacing: .06em; color: var(--inv-background);
}
.songket-melayu-cover__date::before, .songket-melayu-cover__date::after {
    content: ''; width: .5rem; height: .5rem; background: var(--inv-accent);
    -webkit-mask: var(--songket-melayu-lozenge) center / contain no-repeat; mask: var(--songket-melayu-lozenge) center / contain no-repeat;
}
.songket-melayu-cover__quote {
    max-width: 31ch; margin: .45rem 0 0; font-family: var(--songket-melayu-serif); font-style: italic; font-weight: 500;
    font-size: 1.08rem; line-height: 1.35; color: var(--songket-melayu-ivory-muted);
}
.songket-melayu-cover__guest {
    width: min(100%, 18.5rem); margin: .95rem 0 0; padding: .5rem .95rem .6rem; border-radius: 4px;
    background: color-mix(in srgb, var(--inv-deep) 55%, transparent);
    box-shadow: inset 0 0 0 1px var(--songket-melayu-hair), 0 0 0 4px color-mix(in srgb, var(--inv-deep) 40%, transparent), 0 0 0 5px color-mix(in srgb, var(--inv-accent) 25%, transparent);
}
.songket-melayu-cover__guest p { margin: 0; font-size: .64rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-shine); }
.songket-melayu-cover__guest-name { display: block; font-family: var(--songket-melayu-serif); font-size: 1.3rem; font-weight: 700; line-height: 1.25; color: var(--inv-background); overflow-wrap: anywhere; }
.songket-melayu-cover__open {
    margin-top: 1rem; min-height: 3rem; padding: .7rem 1.9rem; border-radius: 4px;
    font-weight: 800; font-size: .86rem; letter-spacing: .14em; text-transform: uppercase;
    background: var(--songket-melayu-gold); color: var(--inv-deep);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-shine) 60%, transparent), 0 0 0 4px var(--inv-deep), 0 0 0 5px var(--songket-melayu-hair), 0 14px 26px -12px rgb(0 0 0 / .7);
}

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

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

/* opening: the ivory window panel with a pucuk rebung crown over the faint photo */
.songket-melayu-opening { padding: 5rem 1.6rem 4.6rem; }
.songket-melayu-opening__panel {
    position: relative; max-width: 23rem; margin: 0 auto; padding: 2.3rem 1.4rem 2rem;
    background: color-mix(in srgb, var(--songket-melayu-paper) 88%, transparent);
    box-shadow: inset 0 0 0 1px var(--songket-melayu-hair), inset 0 0 0 5px color-mix(in srgb, var(--songket-melayu-paper) 88%, transparent), inset 0 0 0 6px var(--songket-melayu-hair), var(--songket-melayu-drop);
}
.songket-melayu-opening__crown {
    position: absolute; left: 8%; right: 8%; top: -22px; height: 22px; background: var(--songket-melayu-gold);
    -webkit-mask: var(--songket-melayu-rebung) center bottom / 17.6px 22px repeat-x; mask: var(--songket-melayu-rebung) center bottom / 17.6px 22px repeat-x;
}
.songket-melayu-opening__flower { width: 1.6rem; height: 1.6rem; margin: 0 auto .5rem; fill: var(--inv-accent); }
.songket-melayu-opening__eyebrow { margin: 0 0 .4rem; font-family: var(--songket-melayu-serif); font-size: .82rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--songket-melayu-gold-ink); }
.songket-melayu-opening__basmalah { margin: 0 0 .6rem; font-size: 1.85rem; }
.songket-melayu-opening__greeting { margin: 0 auto .8rem; max-width: 24ch; font-family: var(--songket-melayu-serif); font-size: 1.4rem; font-weight: 600; font-style: italic; line-height: 1.25; color: var(--songket-melayu-title); }
.songket-melayu-opening__message { margin: 0 auto; max-width: 30ch; color: var(--songket-melayu-muted); }

/* child: the warkah (royal letter) */
.songket-melayu-warkah {
    position: relative; max-width: 23rem; margin: 0 auto; padding: 2.6rem 1.35rem 3rem; color: var(--inv-text);
    background:
        radial-gradient(120% 80% at 50% 40%, var(--songket-melayu-paper) 55%, color-mix(in srgb, var(--inv-background) 80%, var(--inv-accent)) 130%);
    border-radius: 3px;
    box-shadow:
        inset 0 0 0 7px var(--songket-melayu-paper), inset 0 0 0 8.5px var(--inv-accent),
        inset 0 0 0 11px var(--songket-melayu-paper), inset 0 0 0 12px var(--songket-melayu-hair),
        0 26px 50px -24px rgb(0 0 0 / .75);
}
.songket-melayu-warkah__corner { position: absolute; width: 1.5rem; height: 1.5rem; fill: var(--inv-accent); }
.songket-melayu-warkah__corner .songket-melayu-flower { width: 100%; height: 100%; }
.songket-melayu-warkah__corner--tl { left: 15px; top: 15px; }
.songket-melayu-warkah__corner--tr { right: 15px; top: 15px; }
.songket-melayu-warkah__corner--bl { left: 15px; bottom: 15px; }
.songket-melayu-warkah__corner--br { right: 15px; bottom: 15px; }
.songket-melayu-warkah__head { margin: 0 1.3rem 1.3rem; }
.songket-melayu-warkah__band { height: 16px; margin: -1.15rem 0 .55rem; -webkit-mask-size: 12.8px 16px; mask-size: 12.8px 16px; }
.songket-melayu-warkah__label { margin: 0; font-family: var(--songket-melayu-serif); font-size: .84rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--songket-melayu-gold-ink); }
.songket-melayu-warkah__list { display: grid; gap: 1.8rem .9rem; }
.songket-melayu-warkah__list--2, .songket-melayu-warkah__list--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.songket-melayu-warkah__list--3 > :last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - .45rem); }
.songket-melayu-warkah__child { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.songket-melayu-gable--child { --gable-w: min(12.5rem, 52vw); }
.songket-melayu-warkah__list--2 .songket-melayu-gable--child, .songket-melayu-warkah__list--3 .songket-melayu-gable--child { --gable-w: min(8.4rem, 34vw); }
.songket-melayu-warkah__nickname { margin: .9rem 0 0; font-family: var(--songket-melayu-display); font-size: 2.5rem; line-height: 1; color: var(--songket-melayu-title); }
.songket-melayu-warkah__name { margin: .35rem 0 .55rem; font-family: var(--songket-melayu-serif); font-size: 1.32rem; font-weight: 700; line-height: 1.2; color: var(--inv-text); overflow-wrap: anywhere; }
.songket-melayu-warkah__list--2 .songket-melayu-warkah__nickname, .songket-melayu-warkah__list--3 .songket-melayu-warkah__nickname { font-size: 1.7rem; }
.songket-melayu-warkah__list--2 .songket-melayu-warkah__name, .songket-melayu-warkah__list--3 .songket-melayu-warkah__name { font-size: 1.08rem; }
.songket-melayu-warkah__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem .9rem; margin: 0 0 .75rem; font-size: .8rem; font-weight: 700; color: var(--songket-melayu-muted); }
.songket-melayu-warkah__meta span { display: inline-flex; align-items: center; gap: .45rem; }
.songket-melayu-warkah__meta span + span::before {
    content: ''; width: .42rem; height: .42rem; margin-left: -.45rem; background: var(--inv-accent);
    -webkit-mask: var(--songket-melayu-lozenge) center / contain no-repeat; mask: var(--songket-melayu-lozenge) center / contain no-repeat;
}
.songket-melayu-warkah__parents { margin: 1.5rem .4rem 0; padding-top: 1.3rem; border-top: 1px solid var(--songket-melayu-hair); }
.songket-melayu-warkah__parents-label { margin: 0 0 .3rem; font-size: .68rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--songket-melayu-gold-ink); }
.songket-melayu-warkah__parents-names { display: flex; flex-direction: column; margin: 0; font-family: var(--songket-melayu-serif); font-size: 1.32rem; font-weight: 700; line-height: 1.25; color: var(--songket-melayu-title); }
.songket-melayu-warkah__parents-names .songket-melayu-amp { font-size: 1.1rem; }
.songket-melayu-warkah__address { display: flex; justify-content: center; align-items: flex-start; gap: .45rem; margin: .8rem auto 0; max-width: 16rem; font-size: .85rem; color: var(--songket-melayu-muted); }
.songket-melayu-warkah__address .songket-melayu-icon { margin-top: .2rem; color: var(--songket-melayu-gold-ink); }
/* the royal seal, pressed on the lower right corner */
.songket-melayu-seal { position: absolute; right: -.9rem; bottom: -1.4rem; width: 5.2rem; height: 5.2rem; transform: rotate(-12deg); filter: drop-shadow(0 8px 10px rgb(0 0 0 / .35)); overflow: visible; }
.songket-melayu-seal__edge { fill: var(--inv-royal); stroke: var(--songket-melayu-gold-dark); stroke-width: 1.2; stroke-linejoin: round; }
.songket-melayu-seal__ring { stroke: var(--inv-deep); opacity: .6; }
.songket-melayu-seal__initial { font-family: var(--songket-melayu-display); font-size: 30px; fill: var(--inv-deep); }

/* message: royal yellow silk, a tanjak at the top right, large italic words beside a woven selvage */
.songket-melayu-message { text-align: left; padding-top: 4.2rem; }
.songket-melayu-message__tanjak { position: absolute; right: .7rem; top: 2.2rem; width: 7.4rem; transform: rotate(6deg); }
.songket-melayu-message .songket-melayu-heading { padding-right: 5.6rem; }
.songket-melayu-message__quote { position: relative; margin: 0; padding: .2rem 0 .2rem 1.6rem; }
.songket-melayu-message__selvage {
    position: absolute; left: 0; top: 0; bottom: 0; width: 10px;
    background: repeating-linear-gradient(180deg, var(--inv-shine) 0 5px, transparent 5px 10px) center / 4px 100% no-repeat, var(--inv-deep);
    box-shadow: 0 0 0 1.5px var(--inv-accent);
}
.songket-melayu-message__quote p { margin: 0; font-family: var(--songket-melayu-serif); font-style: italic; font-size: 1.45rem; font-weight: 600; line-height: 1.38; color: var(--inv-deep); }
.songket-melayu-message__quote cite {
    display: inline-block; margin-top: 1.1rem; padding: .35rem .9rem; border-radius: 3px; font-style: normal; font-size: .72rem; font-weight: 800;
    letter-spacing: .2em; text-transform: uppercase; color: var(--inv-royal); background: var(--inv-deep);
}

/* events: a big day numeral in a gold lozenge, then a paper card with a pucuk rebung crown */
.songket-melayu-event + .songket-melayu-event { margin-top: 3.2rem; }
.songket-melayu-event__date { display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin: 0 0 2rem; text-align: left; }
.songket-melayu-event--dark .songket-melayu-event__date { flex-direction: row-reverse; text-align: right; }
.songket-melayu-event__day { position: relative; isolation: isolate; display: grid; place-items: center; width: 4.6rem; height: 4.6rem; flex: none; }
.songket-melayu-event__day::before {
    content: ''; position: absolute; inset: 14%; z-index: -1; transform: rotate(45deg);
    background: var(--songket-melayu-paper); border: 2px solid var(--inv-accent);
    box-shadow: 0 0 0 4px var(--inv-background), 0 0 0 5px var(--songket-melayu-hair), 0 10px 18px -8px color-mix(in srgb, var(--inv-deep) 50%, transparent);
}
.songket-melayu-event__day span { font-family: var(--songket-melayu-display); font-size: 1.9rem; line-height: 1; color: var(--songket-melayu-title); }
.songket-melayu-event--dark .songket-melayu-event__day::before { background: var(--inv-primary); }
.songket-melayu-event--dark .songket-melayu-event__day span { color: var(--inv-shine); }
.songket-melayu-event__when { display: flex; flex-direction: column; }
.songket-melayu-event__weekday { font-family: var(--songket-melayu-display); font-size: 1.6rem; line-height: 1.1; color: var(--songket-melayu-title); }
.songket-melayu-event__month { font-size: .74rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--songket-melayu-gold-ink); }
.songket-melayu-event__card {
    position: relative; padding: 1.1rem 1.1rem 1.35rem; text-align: left; background: var(--songket-melayu-paper);
    box-shadow: inset 0 0 0 1px var(--songket-melayu-hair), inset 0 0 0 5px var(--songket-melayu-paper), inset 0 0 0 6px color-mix(in srgb, var(--inv-accent) 28%, transparent), var(--songket-melayu-drop);
}
.songket-melayu-event__card::before {
    content: ''; position: absolute; left: 10%; right: 10%; top: -18px; height: 18px; background: var(--songket-melayu-gold);
    -webkit-mask: var(--songket-melayu-rebung) center bottom / 14.4px 18px repeat-x; mask: var(--songket-melayu-rebung) center bottom / 14.4px 18px repeat-x;
}
.songket-melayu-event--dark .songket-melayu-event__card {
    color: var(--inv-background);
    background:
        radial-gradient(90% 50% at 20% 0%, color-mix(in srgb, var(--inv-primary) 85%, transparent), transparent 80%),
        var(--inv-deep);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 60%, transparent), inset 0 0 0 5px var(--inv-deep), inset 0 0 0 6px color-mix(in srgb, var(--inv-accent) 30%, transparent), var(--songket-melayu-drop);
}
.songket-melayu-event__media { margin: 0 0 1.05rem; padding: 3px; background: var(--songket-melayu-gold); clip-path: polygon(50% 0, 100% 24%, 100% 100%, 0 100%, 0 24%); }
.songket-melayu-event__photo { display: block; width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; object-position: center 40%; clip-path: polygon(50% 0, 100% 24%, 100% 100%, 0 100%, 0 24%); }
.songket-melayu-event__name { margin: 0; font-family: var(--songket-melayu-display); font-size: 1.65rem; font-weight: 400; line-height: 1.12; color: var(--songket-melayu-title); }
.songket-melayu-event--dark .songket-melayu-event__name { color: var(--inv-shine); }
.songket-melayu-event__rows { display: grid; gap: .75rem; margin: 1rem 0 0; padding: 1rem 0 0; list-style: none; font-size: .9rem; border-top: 1px solid var(--songket-melayu-hair); }
.songket-melayu-event__rows li { display: flex; align-items: flex-start; gap: .75rem; }
.songket-melayu-event__rows .songket-melayu-icon { width: 2.1rem; height: 2.1rem; padding: .45rem; border-radius: 50%; color: var(--songket-melayu-gold-ink); background: color-mix(in srgb, var(--inv-accent) 16%, var(--songket-melayu-paper)); box-shadow: inset 0 0 0 1px var(--songket-melayu-hair); }
.songket-melayu-event--dark .songket-melayu-event__rows .songket-melayu-icon { color: var(--inv-deep); background: var(--inv-shine); }
.songket-melayu-event__rows li > span { padding-top: .3rem; }
.songket-melayu-event__venue { display: block; font-weight: 800; }
.songket-melayu-event__address { display: block; font-size: .85rem; color: var(--songket-melayu-muted); }
.songket-melayu-event--dark .songket-melayu-event__address { color: var(--songket-melayu-ivory-muted); }
.songket-melayu-event .inv-maps { margin-top: 1.15rem; text-align: center; }
.songket-melayu-event .inv-maps .inv-button { width: 100%; font-weight: 800; }
.songket-melayu-event--dark .inv-maps .inv-button { background: var(--songket-melayu-gold); color: var(--inv-deep); }
.songket-melayu-event .inv-maps__frame { height: 190px; border-radius: 4px; }

/* countdown: gold lozenges with upright numerals, the labels under them; the calendar card below */
.songket-melayu-countdown .inv-countdown { gap: clamp(.25rem, 1.6vw, .6rem); }
.songket-melayu-countdown .inv-countdown__item {
    position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    width: 4.4rem; min-width: 0; padding: 1.05rem 0 0; background: none; box-shadow: none; border: 0;
}
.songket-melayu-countdown .inv-countdown__item::before {
    content: ''; position: absolute; left: 50%; top: .55rem; z-index: -1; width: 3.1rem; height: 3.1rem; margin-left: -1.55rem; transform: rotate(45deg);
    background: linear-gradient(135deg, var(--songket-melayu-paper), color-mix(in srgb, var(--inv-background) 80%, var(--inv-accent)));
    border: 2px solid var(--inv-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--inv-deep) 70%, transparent), 0 0 0 5px var(--songket-melayu-hair), 0 14px 22px -10px rgb(0 0 0 / .6);
}
.songket-melayu-countdown .inv-countdown__value { font-variant-numeric: lining-nums tabular-nums; font-family: var(--songket-melayu-display); font-size: 1.45rem; line-height: 1.6; color: var(--songket-melayu-title); }
.songket-melayu-countdown .inv-countdown__label { margin-top: 1.05rem; font-size: .6rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-shine); }
.songket-melayu-countdown .inv-countdown__done { font-family: var(--songket-melayu-serif); font-size: 1.4rem; font-style: italic; color: var(--inv-shine); }
.songket-melayu-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 1.9rem; }
.songket-melayu-countdown .inv-countdown__actions .inv-button {
    width: min(100%, 17rem); min-height: 2.75rem; padding: .6rem 1rem; border-radius: 4px; font-size: .84rem; font-weight: 700;
    color: var(--inv-background); background: color-mix(in srgb, var(--inv-background) 8%, transparent);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-shine) 55%, transparent);
}
.songket-melayu-countdown .inv-countdown__actions .inv-button:first-child { color: var(--inv-deep); background: var(--songket-melayu-gold); box-shadow: none; }
.songket-melayu-countdown .inv-cal {
    --inv-cal-bg: var(--songket-melayu-paper); --inv-cal-mark: var(--inv-primary);
    position: relative; max-width: 19rem; margin: 3rem auto 0; border-radius: 3px;
    box-shadow: inset 0 0 0 1px var(--songket-melayu-hair), inset 0 0 0 5px var(--songket-melayu-paper), inset 0 0 0 6px color-mix(in srgb, var(--inv-accent) 35%, transparent), 0 22px 40px -24px rgb(0 0 0 / .7);
}
.songket-melayu-countdown .inv-cal::before {
    content: ''; position: absolute; left: 12%; right: 12%; top: -18px; height: 18px; background: var(--songket-melayu-gold);
    -webkit-mask: var(--songket-melayu-rebung) center bottom / 14.4px 18px repeat-x; mask: var(--songket-melayu-rebung) center bottom / 14.4px 18px repeat-x;
}
.songket-melayu-countdown .inv-cal__month { font-family: var(--songket-melayu-display); font-size: 1.4rem; font-weight: 400; color: var(--songket-melayu-title); }

/* prayer: a dark songket panel between gold pucuk rebung borders */
.songket-melayu-prayer { padding-top: 4.4rem; padding-bottom: 4.4rem; }
.songket-melayu-prayer__panel {
    position: relative; isolation: isolate; max-width: 23rem; margin: 0 auto; padding: 3.2rem 1.4rem 3.3rem; color: var(--inv-background);
    background:
        radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--inv-primary) 90%, transparent), transparent 80%),
        var(--inv-deep);
    outline: 1px solid var(--songket-melayu-hair); outline-offset: 6px;
    box-shadow: var(--songket-melayu-drop);
}
.songket-melayu-prayer__panel::before {
    content: ''; position: absolute; inset: 0; z-index: -1; background: var(--songket-melayu-gold); opacity: .15;
    -webkit-mask: var(--songket-melayu-weave) center / 54px 54px repeat; mask: var(--songket-melayu-weave) center / 54px 54px repeat;
}
.songket-melayu-prayer__band { position: absolute; left: 0; right: 0; height: 24px; -webkit-mask-size: 19.2px 24px; mask-size: 19.2px 24px; }
.songket-melayu-prayer__band--top { top: 0; }
.songket-melayu-prayer__band--bottom { bottom: 0; }
.songket-melayu-prayer__flower { width: 1.7rem; height: 1.7rem; margin: 0 auto .5rem; fill: var(--inv-accent); }
.songket-melayu-prayer__eyebrow { margin: 0 0 .7rem; font-family: var(--songket-melayu-serif); font-size: .84rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-shine); }
.songket-melayu-prayer__arabic { margin: 0 0 .9rem; font-size: 1.62rem; color: var(--inv-shine); }
.songket-melayu-prayer__text { margin: 0; }
.songket-melayu-prayer__text p { margin: 0; font-family: var(--songket-melayu-serif); font-size: 1.22rem; font-style: italic; font-weight: 500; line-height: 1.45; }
.songket-melayu-prayer__text cite { display: inline-block; margin-top: .9rem; font-style: normal; font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--inv-shine); }

/* rundown: a songket ribbon down the left, gold time tags pinned on it, translucent step cards */
.songket-melayu-rundown__list { position: relative; margin: 0; padding: .4rem 0; list-style: none; text-align: left; }
.songket-melayu-rundown__list::before, .songket-melayu-rundown__list::after {
    content: ''; position: absolute; left: 1.25rem; top: 0; bottom: 0; width: 2.3rem; transform-origin: top;
}
.songket-melayu-rundown__list::before {
    background:
        linear-gradient(90deg, var(--songket-melayu-gold-dark), var(--inv-royal) 18%, color-mix(in srgb, var(--inv-royal) 70%, #fff) 50%, var(--inv-royal) 82%, var(--songket-melayu-gold-dark));
    box-shadow: 0 0 0 2px var(--inv-deep), 0 0 0 3px var(--inv-accent), 0 18px 30px -16px rgb(0 0 0 / .7);
}
.songket-melayu-rundown__list::after {
    background: var(--inv-deep); opacity: .45;
    -webkit-mask: var(--songket-melayu-weave) center top / 36.8px 36.8px repeat-y; mask: var(--songket-melayu-weave) center top / 36.8px 36.8px repeat-y;
}
.songket-melayu-rundown__item { position: relative; z-index: 1; display: grid; grid-template-columns: 4.8rem minmax(0, 1fr); align-items: start; column-gap: .75rem; padding: 0 0 .85rem; }
.songket-melayu-rundown__item:last-child { padding-bottom: 0; }
.songket-melayu-rundown__time {
    justify-self: center; margin-top: .6rem; padding: .28rem .55rem; border-radius: 3px; font-size: .82rem; font-weight: 800;
    font-variant-numeric: tabular-nums; color: var(--inv-shine); background: var(--inv-deep);
    box-shadow: inset 0 0 0 1.5px var(--inv-accent), 0 6px 12px -4px rgb(0 0 0 / .5);
}
.songket-melayu-rundown__body {
    padding: .75rem 1rem .8rem; border-radius: 3px; background: color-mix(in srgb, var(--inv-background) 9%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 30%, transparent); border-left: 3px solid var(--inv-accent);
}
.songket-melayu-rundown__body h3 { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.35; color: var(--inv-background); }
.songket-melayu-rundown__body p { margin: .15rem 0 0; font-size: .86rem; color: var(--songket-melayu-ivory-muted); }

/* story: woven panels (cloth strips with songket selvages), alternating ivory and dark, offset like a loom */
.songket-melayu-story__list { display: grid; gap: 1.6rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.songket-melayu-story__panel {
    position: relative; display: grid; grid-template-columns: 42% minmax(0, 1fr); align-items: center; gap: 1.05rem;
    margin: 0 1.1rem 0 -.2rem; padding: 1.5rem 1rem; background: var(--songket-melayu-paper);
    box-shadow: inset 0 0 0 1px var(--songket-melayu-hair), var(--songket-melayu-drop);
}
.songket-melayu-story__panel::before, .songket-melayu-story__panel::after {
    content: ''; position: absolute; left: 0; right: 0; height: 9px;
    background: repeating-linear-gradient(90deg, var(--inv-accent) 0 4px, transparent 4px 8px) center / 100% 3px no-repeat, var(--inv-primary);
    box-shadow: inset 0 1px 0 var(--inv-accent), inset 0 -1px 0 var(--inv-accent);
}
.songket-melayu-story__panel::before { top: 0; }
.songket-melayu-story__panel::after { bottom: 0; }
.songket-melayu-story__panel--dark {
    grid-template-columns: minmax(0, 1fr) 42%; margin: 0 -.2rem 0 1.1rem; color: var(--inv-background);
    background: radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--inv-primary) 85%, transparent), transparent 80%), var(--inv-deep);
}
.songket-melayu-story__panel--dark::before, .songket-melayu-story__panel--dark::after { background: repeating-linear-gradient(90deg, var(--inv-deep) 0 4px, transparent 4px 8px) center / 100% 3px no-repeat, var(--inv-accent); box-shadow: none; }
.songket-melayu-story__panel--dark .songket-melayu-story__media { order: 2; }
.songket-melayu-story__panel--text { grid-template-columns: 1fr; }
.songket-melayu-story__photo {
    display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
    box-shadow: 0 0 0 2px var(--songket-melayu-paper), 0 0 0 3.5px var(--inv-accent), 0 14px 22px -12px rgb(0 0 0 / .6);
}
.songket-melayu-story__panel--dark .songket-melayu-story__photo { box-shadow: 0 0 0 2px var(--inv-deep), 0 0 0 3.5px var(--inv-accent), 0 14px 22px -12px rgb(0 0 0 / .6); }
.songket-melayu-story__year {
    display: inline-block; padding: .18rem 1rem .14rem; font-family: var(--songket-melayu-display); font-size: 1.2rem; line-height: 1.2; color: var(--inv-deep);
    background: var(--songket-melayu-gold); clip-path: polygon(.6rem 0, calc(100% - .6rem) 0, 100% 50%, calc(100% - .6rem) 100%, .6rem 100%, 0 50%);
}
.songket-melayu-story__body h3 { margin: .45rem 0 0; font-family: var(--songket-melayu-display); font-size: 1.28rem; font-weight: 400; line-height: 1.2; color: var(--songket-melayu-title); }
.songket-melayu-story__panel--dark .songket-melayu-story__body h3 { color: var(--inv-shine); }
.songket-melayu-story__body p { margin: .4rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--songket-melayu-muted); }
.songket-melayu-story__panel--dark .songket-melayu-story__body p { color: var(--songket-melayu-ivory-muted); }

/* gallery: the first photo under a house-gable top, the others with fine gold frames */
.songket-melayu-gallery .inv-gallery { gap: .55rem; }
.songket-melayu-gallery .inv-gallery__item { border-radius: 2px; box-shadow: inset 0 0 0 1px var(--songket-melayu-hair), 0 16px 28px -18px rgb(0 0 0 / .8); }
.songket-melayu-gallery .inv-gallery__item::after { content: ''; position: absolute; inset: 5px; pointer-events: none; border: 1px solid color-mix(in srgb, var(--inv-shine) 55%, transparent); }
.songket-melayu-gallery .inv-gallery__item:first-child {
    grid-column: 1 / -1; aspect-ratio: 4 / 3.3; border-radius: 0;
    clip-path: polygon(50% 0, 100% 22%, 100% 100%, 0 100%, 0 22%);
}
.songket-melayu-gallery .inv-gallery__item:first-child::after { display: none; }

/* live streaming: a dark songket card with a gable top (gold edge) and a gold pucuk rebung foot */
.songket-melayu-stream { padding-top: 4.6rem; }
.songket-melayu-stream__card {
    --gable-top: 3.6rem;
    position: relative; isolation: isolate; max-width: 23rem; margin: 0 auto; padding: 3.2rem 1.3rem 2.6rem; color: var(--inv-background);
    clip-path: polygon(50% 0, 100% var(--gable-top), 100% 100%, 0 100%, 0 var(--gable-top));
    background:
        linear-gradient(to top left, transparent calc(50% - 5px), var(--inv-accent) calc(50% - 5px) calc(50% - 3px), transparent calc(50% - 3px)) left top / 50% var(--gable-top) no-repeat,
        linear-gradient(to top right, transparent calc(50% - 5px), var(--inv-accent) calc(50% - 5px) calc(50% - 3px), transparent calc(50% - 3px)) right top / 50% var(--gable-top) no-repeat,
        radial-gradient(70% 60% at 50% 0%, color-mix(in srgb, var(--inv-primary) 95%, transparent), transparent 80%),
        var(--inv-deep);
    box-shadow: inset 3px 0 0 -1px var(--inv-accent), inset -3px 0 0 -1px var(--inv-accent);
}
.songket-melayu-stream__icon { display: inline-grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; color: var(--inv-deep); background: var(--songket-melayu-gold); }
.songket-melayu-stream__icon .songket-melayu-icon { width: 1.6rem; height: 1.6rem; }
.songket-melayu-stream__eyebrow { margin: .7rem 0 0; font-family: var(--songket-melayu-serif); font-size: .82rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-shine); }
.songket-melayu-stream__title { margin: .2rem 0 .4rem; font-family: var(--songket-melayu-display); font-size: 2rem; font-weight: 400; line-height: 1.1; color: var(--inv-background); }
.songket-melayu-stream__card p { margin: 0 auto .4rem; max-width: 30ch; font-size: .9rem; }
.songket-melayu-stream__note { color: var(--inv-shine); font-size: .85rem !important; }
.songket-melayu-stream__card .inv-button { margin-top: .7rem; min-height: 2.75rem; border-radius: 4px; background: var(--songket-melayu-gold); color: var(--inv-deep); font-weight: 800; }
.songket-melayu-stream__band { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; -webkit-mask-size: 14.4px 18px; mask-size: 14.4px 18px; }

/* RSVP card: ivory paper with a pucuk rebung head and a gold double rule; the gold seal after sending */
.songket-melayu-rsvp__card {
    position: relative; padding: 2.2rem 1.15rem 1.5rem; border-radius: 3px; color: var(--inv-text); background: var(--songket-melayu-paper);
    box-shadow: inset 0 0 0 1px var(--songket-melayu-hair), inset 0 0 0 5px var(--songket-melayu-paper), inset 0 0 0 6px color-mix(in srgb, var(--inv-accent) 35%, transparent), 0 22px 40px -24px rgb(0 0 0 / .7);
}
.songket-melayu-rsvp__band { position: absolute; left: 10%; right: 10%; top: 6px; height: 16px; -webkit-mask-size: 12.8px 16px; mask-size: 12.8px 16px; }
.songket-melayu-rsvp__intro { margin: 0 auto 1.1rem; max-width: 30ch; font-size: .9rem; color: var(--songket-melayu-muted); }
.songket-melayu-rsvp__sent { margin-bottom: 1rem; }
.songket-melayu-rsvp__check { display: block; width: 4.4rem; height: 4.4rem; margin: 0 auto .5rem; overflow: visible; }
.songket-melayu-rsvp__check > circle:first-child { fill: var(--inv-primary); }
.songket-melayu-rsvp__check path { fill: none; stroke: var(--inv-shine); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
html.inv-anim .songket-melayu-rsvp__sent .songket-melayu-rsvp__check { animation: songket-melayu-settle .8s cubic-bezier(.34, 1.56, .64, 1) both; }
html.inv-anim .songket-melayu-rsvp__sent .songket-melayu-rsvp__check path { animation: songket-melayu-draw .45s ease-out .35s both; }
.songket-melayu-rsvp__thanks { margin: 0; font-family: var(--songket-melayu-display); font-size: 1.6rem; color: var(--songket-melayu-title); }
.songket-melayu-rsvp__line { margin: .1rem 0 0; font-size: .9rem; color: var(--songket-melayu-muted); }
.songket-melayu-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .84rem; font-weight: 700; color: var(--songket-melayu-title); }

/* gift: ivory envelopes (sampul) with a songket flap and a royal lozenge seal; the address with a rebung head */
.songket-melayu-gift__intro { color: var(--songket-melayu-ivory-muted); }
.songket-melayu-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.3rem; }
.songket-melayu-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.songket-melayu-gift .inv-gift__account,
.songket-melayu-gift .inv-gift__address {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; margin: 0; overflow: hidden;
    padding: 2.3rem .75rem 1rem; border-radius: 3px; color: var(--inv-text); background: var(--songket-melayu-paper);
    box-shadow: inset 0 0 0 1px var(--songket-melayu-hair), 0 18px 30px -20px rgb(0 0 0 / .7);
}
.songket-melayu-gift .inv-gift__account::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1.6rem;
    background:
        repeating-linear-gradient(90deg, var(--inv-accent) 0 3px, transparent 3px 7px) center 35% / 100% 2px no-repeat,
        linear-gradient(180deg, var(--inv-primary), var(--inv-deep));
    clip-path: polygon(0 0, 100% 0, 100% 40%, 50% 100%, 0 40%);
}
.songket-melayu-gift .inv-gift__account::after {
    content: ''; position: absolute; left: 50%; top: .95rem; width: 1.15rem; height: 1.15rem; margin-left: -.575rem;
    background: var(--inv-royal); box-shadow: 0 0 0 1.5px var(--songket-melayu-gold-dark);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.songket-melayu-gift .inv-gift__account p, .songket-melayu-gift .inv-gift__address p { margin: 0; }
.songket-melayu-gift .inv-gift__bank { font-weight: 800; font-size: .85rem; color: var(--songket-melayu-title); }
.songket-melayu-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .3rem; background: #fff; }
.songket-melayu-gift .inv-gift__logo img { max-width: 5rem; }
.songket-melayu-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);
}
.songket-melayu-gift .inv-gift__holder { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--songket-melayu-muted); overflow-wrap: anywhere; }
.songket-melayu-gift .inv-button { margin-top: .35rem; min-height: 2.25rem; padding: .35rem .9rem; border-radius: 3px; font-size: .74rem; font-weight: 800; }
.songket-melayu-gift .inv-gift__address { margin-top: 1.6rem; padding-top: 1.5rem; font-size: .875rem; overflow: visible; }
.songket-melayu-gift .inv-gift__address::before {
    content: ''; position: absolute; left: 10%; right: 10%; top: -16px; height: 16px; background: var(--songket-melayu-gold);
    -webkit-mask: var(--songket-melayu-rebung) center bottom / 12.8px 16px repeat-x; mask: var(--songket-melayu-rebung) center bottom / 12.8px 16px repeat-x;
}
.songket-melayu-gift .inv-gift__address .inv-gift__holder { font-size: .72rem; }

/* co-hosts: names stacked between gold lozenges, framed by pucuk rebung */
.songket-melayu-cohosts__list {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .1rem; max-width: 21rem; margin: 0 auto; padding: 2.2rem 1rem;
    list-style: none; background: color-mix(in srgb, var(--songket-melayu-paper) 80%, transparent); box-shadow: inset 0 0 0 1px var(--songket-melayu-hair);
}
.songket-melayu-cohosts__list::before, .songket-melayu-cohosts__list::after {
    content: ''; position: absolute; left: 0; right: 0; height: 16px; background: var(--songket-melayu-gold);
    -webkit-mask: var(--songket-melayu-rebung) center bottom / 12.8px 16px repeat-x; mask: var(--songket-melayu-rebung) center bottom / 12.8px 16px repeat-x;
}
.songket-melayu-cohosts__list::before { top: 0; transform: scaleY(-1); }
.songket-melayu-cohosts__list::after { bottom: 0; }
.songket-melayu-cohosts__list li { display: flex; flex-direction: column; align-items: center; font-family: var(--songket-melayu-serif); font-size: 1.2rem; font-weight: 700; line-height: 1.3; color: var(--songket-melayu-title); }
.songket-melayu-cohosts__list li + li::before {
    content: ''; width: .5rem; height: .5rem; margin: .45rem 0 .5rem; background: var(--inv-accent);
    -webkit-mask: var(--songket-melayu-lozenge) center / contain no-repeat; mask: var(--songket-melayu-lozenge) center / contain no-repeat;
}

/* contacts: ivory cards with the initial in a gold lozenge and a WhatsApp button */
.songket-melayu-contacts__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.songket-melayu-contacts__list > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .45rem); }
.songket-melayu-contact {
    display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 1.4rem .7rem 1.05rem; border-radius: 3px;
    color: var(--inv-text); background: var(--songket-melayu-paper); box-shadow: inset 0 0 0 1px var(--songket-melayu-hair), var(--songket-melayu-drop);
}
.songket-melayu-contact__avatar { position: relative; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin-bottom: .7rem; }
.songket-melayu-contact__avatar::before {
    content: ''; position: absolute; inset: 12%; transform: rotate(45deg); background: var(--inv-primary);
    box-shadow: 0 0 0 2px var(--songket-melayu-paper), 0 0 0 3.5px var(--inv-accent);
}
.songket-melayu-contact__avatar span { position: relative; font-family: var(--songket-melayu-display); font-size: 1.3rem; color: var(--inv-shine); }
.songket-melayu-contact p { margin: 0; }
.songket-melayu-contact__name { font-weight: 800; font-size: .95rem; overflow-wrap: anywhere; }
.songket-melayu-contact__role { font-size: .78rem; color: var(--songket-melayu-muted); }
.songket-melayu-contact__button { margin-top: .7rem; min-height: 2.5rem; padding: .45rem .9rem; border-radius: 3px; font-size: .8rem; font-weight: 800; }
.songket-melayu-contact__button .songket-melayu-icon { width: 1.05rem; height: 1.05rem; }
.songket-melayu-contact__phone { margin-top: .5rem !important; font-size: .85rem; }

/* health protocol: ivory chips with a gold check */
.songket-melayu-protocol__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.songket-melayu-protocol__list li {
    display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border-radius: 3px; font-size: .84rem; font-weight: 700;
    background: var(--songket-melayu-paper); box-shadow: inset 0 0 0 1px var(--songket-melayu-hair);
}
.songket-melayu-protocol__list .songket-melayu-icon { width: 1rem; height: 1rem; color: var(--songket-melayu-gold-ink); }
.songket-melayu-protocol__note { font-size: .88rem; color: var(--songket-melayu-muted); }

/* vendors: ivory tiles with a thin gold edge and a little pucuk rebung on top */
.songket-melayu-vendors__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem .7rem; margin: 0; padding: .6rem 0 0; list-style: none; }
.songket-melayu-vendors__list > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.songket-melayu-vendor {
    position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 1rem .6rem .8rem;
    background: var(--songket-melayu-paper); box-shadow: inset 0 0 0 1px var(--songket-melayu-hair);
}
.songket-melayu-vendor::before {
    content: ''; position: absolute; left: 50%; top: -12px; width: 2.9rem; height: 12px; margin-left: -1.45rem; background: var(--songket-melayu-gold);
    -webkit-mask: var(--songket-melayu-rebung) center bottom / 9.6px 12px repeat-x; mask: var(--songket-melayu-rebung) center bottom / 9.6px 12px repeat-x;
}
.songket-melayu-vendor__role { font-size: .64rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--songket-melayu-gold-ink); }
.songket-melayu-vendor__name { margin-top: .15rem; font-family: var(--songket-melayu-display); font-size: 1.08rem; line-height: 1.2; color: var(--songket-melayu-title); overflow-wrap: anywhere; }
.songket-melayu-vendor__link { display: inline-flex; align-items: center; gap: .3rem; min-height: 2rem; font-size: .76rem; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.songket-melayu-vendor__link .songket-melayu-icon { width: .95rem; height: .95rem; }

/* closing: the full photo fading into the deep colour, a fine gold gable outline framing the thanks */
.songket-melayu-closing { padding: 3.8rem 1.5rem 1.6rem; }
.songket-melayu-closing--photo { padding-top: 0; }
.songket-melayu-closing__photo { position: relative; z-index: -1; height: min(96vw, 24rem); margin: 0 -1.5rem; overflow: hidden; -webkit-mask: linear-gradient(180deg, #000 0, #000 52%, rgb(0 0 0 / .55) 74%, rgb(0 0 0 / .18) 90%, transparent 100%); mask: linear-gradient(180deg, #000 0, #000 52%, rgb(0 0 0 / .55) 74%, rgb(0 0 0 / .18) 90%, transparent 100%); }
.songket-melayu-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 22%; --inv-parallax: 30px; }
.songket-melayu-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 25%, transparent), transparent 18%, transparent 34%, color-mix(in srgb, var(--inv-deep) 60%, transparent) 62%, var(--inv-deep) 96%);
}
.songket-melayu-closing__frame { position: relative; max-width: 21.5rem; margin: 0 auto; padding: 3rem 1.3rem 1.8rem; }
.songket-melayu-closing__frame::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: color-mix(in srgb, var(--inv-deep) 62%, transparent);
    clip-path: polygon(50% 1%, 99% 17%, 99% 99%, 1% 99%, 1% 17%);
}
.songket-melayu-closing--photo .songket-melayu-closing__frame { margin-top: -8rem; }
.songket-melayu-closing__outline { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; }
.songket-melayu-closing__outline path { fill: none; stroke: var(--inv-accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: miter; }
.songket-melayu-closing__outline .songket-melayu-closing__outline-in { stroke: color-mix(in srgb, var(--inv-shine) 45%, transparent); stroke-width: 1; }
.songket-melayu-closing__horns { position: absolute; left: 50%; top: -2rem; width: 5.4rem; height: 2.7rem; margin-left: -2.7rem; overflow: visible; }
.songket-melayu-closing__tanjak { width: 3.6rem; margin: 0 auto .5rem; }
.songket-melayu-closing__eyebrow { margin: 0 0 .3rem; font-family: var(--songket-melayu-serif); font-size: .78rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-shine); }
.songket-melayu-closing__title { margin: 0 0 .7rem; font-family: var(--songket-melayu-display); font-size: clamp(1.9rem, 8.5vw, 2.3rem); font-weight: 400; line-height: 1.05; color: var(--inv-background); }
.songket-melayu-closing__title em { font-family: var(--songket-melayu-serif); font-style: italic; font-weight: 600; font-size: 1.1em; color: var(--inv-shine); }
.songket-melayu-closing__message { margin: 0 auto; max-width: 30ch; font-size: .92rem; line-height: 1.6; color: var(--songket-melayu-ivory-muted); }
.songket-melayu-closing__salam { margin: .8rem 0 0; font-family: var(--songket-melayu-serif); font-size: 1.08rem; font-style: italic; font-weight: 600; line-height: 1.3; color: var(--inv-shine); }
.songket-melayu-closing__signature { margin: .85rem 0 .15rem; font-size: .84rem; color: var(--songket-melayu-ivory-muted); }
.songket-melayu-closing__names {
    margin: 0; font-family: var(--songket-melayu-display); font-size: clamp(2.1rem, 9.5vw, 2.4rem); line-height: 1.1; overflow-wrap: anywhere; color: var(--inv-shine);
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-shine) 70%, #fff), var(--inv-shine) 45%, var(--inv-accent));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

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

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

/* wishes: the form on an ivory card with a dark songket edge, the wishes in a scroll box of about three */
.songket-melayu-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.songket-melayu-wishes .inv-form {
    position: relative; padding: 1.6rem 1.1rem 1.3rem; border-radius: 3px; background: var(--songket-melayu-paper);
    box-shadow: inset 0 6px 0 var(--inv-primary), inset 0 7.5px 0 var(--inv-accent), inset 0 0 0 1px var(--songket-melayu-hair), var(--songket-melayu-drop);
}
.songket-melayu-wishes .inv-wishes__list { margin-top: 1.4rem; }
.songket-melayu-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .55rem; border-radius: 3px; background: color-mix(in srgb, var(--inv-primary) 6%, transparent); box-shadow: inset 0 0 0 1px var(--songket-melayu-hair);
}
.songket-melayu-wishes .inv-wish { position: relative; padding: .75rem .9rem .75rem 1.5rem; border-radius: 3px; background: #fff; text-align: left; box-shadow: 0 2px 10px rgb(0 0 0 / .05); }
.songket-melayu-wishes .inv-wish::before {
    content: ''; position: absolute; left: .55rem; top: 1.05rem; width: .5rem; height: .5rem; background: var(--inv-accent);
    -webkit-mask: var(--songket-melayu-lozenge) center / contain no-repeat; mask: var(--songket-melayu-lozenge) center / contain no-repeat;
}
.songket-melayu-wishes .inv-wish__name { font-weight: 800; color: var(--songket-melayu-title); }
.songket-melayu-wishes .inv-wish__message { font-size: .88rem; line-height: 1.5; }
.songket-melayu-wishes .inv-wish__time { font-size: .72rem; color: var(--songket-melayu-muted); }

/* ---------- 7. shared components ---------- */
.songket-melayu-main .inv-button { font-weight: 700; background: var(--inv-primary); color: var(--inv-background); }
.songket-melayu-tone--deep .inv-button { background: var(--songket-melayu-gold); color: var(--inv-deep); }
body .inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--inv-background) 95%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-text) 74%, transparent);
    --inv-nav-active: var(--inv-primary);
    font-family: var(--songket-melayu-sans);
    border-color: var(--songket-melayu-hair);
}

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

/* short phones: the cover art and type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .songket-melayu-cover { --gable-cover: min(66vw, 15.5rem, calc(45svh * .633)); padding-top: 1.7rem; padding-bottom: 1.7rem; }
    .songket-melayu-cover__text { margin-top: .7rem; }
    .songket-melayu-cover__names { font-size: 2.9rem; }
    .songket-melayu-cover--many .songket-melayu-cover__names { font-size: 2.15rem; }
    .songket-melayu-cover__quote { font-size: 1rem; }
    .songket-melayu-cover__guest { margin-top: .75rem; }
    .songket-melayu-cover__open { margin-top: .8rem; }
}
@media (max-height: 660px) {
    .songket-melayu-cover { --gable-cover: min(58vw, calc(41svh * .633)); padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .songket-melayu-cover__text { margin-top: .55rem; }
    .songket-melayu-cover__title { font-size: .8rem; }
    .songket-melayu-cover__names { font-size: 2.5rem; }
    .songket-melayu-cover--many .songket-melayu-cover__names { font-size: 1.9rem; }
    .songket-melayu-cover__date { margin-top: .25rem; font-size: .82rem; }
    .songket-melayu-cover__quote { font-size: .94rem; line-height: 1.3; }
    .songket-melayu-cover__guest { padding: .4rem .85rem .5rem; }
    .songket-melayu-cover__guest-name { font-size: 1.15rem; }
    .songket-melayu-cover__open { min-height: 2.75rem; padding: .6rem 1.6rem; }
}
/* very short screens (in-app browsers): a smaller gable and quote, so everything fits */
@media (max-height: 600px) {
    .songket-melayu-cover { --gable-cover: min(50vw, calc(36svh * .633)); padding-top: 1.4rem; }
    .songket-melayu-cover__names { font-size: 2.2rem; }
    .songket-melayu-cover__quote { font-size: .88rem; }
}

/* wide screens: the phone-width column on the dark songket cloth */
@media (min-width: 560px) {
    body.songket-melayu-body {
        background:
            radial-gradient(70vw 60vh at 50% 0%, color-mix(in srgb, var(--inv-primary) 70%, transparent), transparent 70%),
            var(--inv-deep);
        background-attachment: fixed;
    }
    body.songket-melayu-body::before {
        content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .14; background: var(--inv-accent);
        -webkit-mask: var(--songket-melayu-weave) center / 54px 54px repeat; mask: var(--songket-melayu-weave) center / 54px 54px repeat;
    }
    .songket-melayu-main { box-shadow: 0 0 0 1px var(--songket-melayu-hair), 0 30px 60px -30px rgb(0 0 0 / .6); }
}

/* ---------- 9. motion ---------- */
@keyframes songket-melayu-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes songket-melayu-settle { 0% { transform: scale(0) rotate(-30deg); } 60% { transform: scale(1.12) rotate(4deg); } 100% { transform: none; } }
@keyframes songket-melayu-photo-in { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes songket-melayu-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes songket-melayu-roof { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } }
@keyframes songket-melayu-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes songket-melayu-weave-in { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }

/* cover (≤ 2.5 s, once): the photo fades in from a slight zoom (0–1.1 s), the songket edge fades in, its gold
   lines draw themselves (.3–1.6 s), the roof and the horns settle from above (.6–1.5 s); the text follows
   through its inv-enter delays (≤ 1.4 s + .6 s) */
html.inv-anim .songket-melayu-gable--cover .songket-melayu-gable__photo,
html.inv-anim .songket-melayu-gable--cover .songket-melayu-gable__empty { animation: songket-melayu-photo-in 1.1s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .songket-melayu-gable--cover .songket-melayu-gable__edge,
html.inv-anim .songket-melayu-gable--cover .songket-melayu-gable__foot { animation: songket-melayu-fade .7s ease .3s both; }
html.inv-anim .songket-melayu-gable--cover .songket-melayu-gable__line { stroke-dasharray: 1; animation: songket-melayu-draw 1.3s cubic-bezier(.4, 0, .2, 1) .3s both; }
html.inv-anim .songket-melayu-gable--cover .songket-melayu-gable__roof,
html.inv-anim .songket-melayu-gable--cover .songket-melayu-gable__horns { animation: songket-melayu-roof .9s cubic-bezier(.2, .8, .2, 1) .6s both; }
html.inv-anim .songket-melayu-cover__band { animation: songket-melayu-weave-in 1.2s cubic-bezier(.4, 0, .2, 1) .1s both; }

/* scroll-drawn details (the default, without support, is the finished drawing) */
@supports (animation-timeline: view()) {
    html.inv-anim .songket-melayu-heading__strip { animation: songket-melayu-weave-in linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
    html.inv-anim .songket-melayu-rundown__list::before,
    html.inv-anim .songket-melayu-rundown__list::after { animation: songket-melayu-grow linear both; animation-timeline: view(); animation-range: entry 15% cover 50%; }
}

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

/* ---------- intro scene "Tenun Songket Ananda" (scene.json + sections/_scene; the intro lives in <body>) ---------- */
/* the camera steps up to the loom: gold warp threads stretch in the dark, the woven songket cloth unrolls down over
   them on its roller with the kepala kain at the foot, the tepi kain borders close in from both sides, the torak
   shoots across and leaves one more gold weft thread, bunga tanjung and cengkih spin in to the corners, the boy's
   tanjak floats down and settles, then the name arrives on a songket panel. */
.songket-melayu-scene-warp { display: block; width: 100%; height: 100%;
    background: repeating-linear-gradient(90deg, transparent 0 8px, color-mix(in srgb, var(--inv-accent) 45%, transparent) 8px 9px); }
.songket-melayu-scene-cloth { position: relative; width: 100%; height: 100%;
    background:
        radial-gradient(85% 42% at 50% 34%, color-mix(in srgb, var(--inv-primary) 95%, transparent), transparent 78%),
        radial-gradient(120% 50% at 50% 105%, color-mix(in srgb, var(--inv-primary) 45%, transparent), transparent 70%),
        var(--inv-deep);
    box-shadow: 0 14px 22px rgb(0 0 0 / .5); }
.songket-melayu-scene-cloth::before { content: ''; position: absolute; inset: 0; background: var(--songket-melayu-gold); opacity: .17;
    -webkit-mask: var(--songket-melayu-weave) center top / 54px 54px repeat; mask: var(--songket-melayu-weave) center top / 54px 54px repeat; }
.songket-melayu-scene-cloth__top { position: absolute; left: 0; right: 0; top: 0; height: 20px; }
.songket-melayu-scene-cloth__kepala { position: absolute; left: 0; right: 0; bottom: 2.6svh; height: 8.6svh; display: flex; flex-direction: column; }
.songket-melayu-scene-cloth__kepala .songket-melayu-band { flex: none; height: 2.8svh; -webkit-mask-size: calc(2.8svh * .8) 2.8svh; mask-size: calc(2.8svh * .8) 2.8svh; }
.songket-melayu-scene-cloth__lozenges { position: relative; flex: 1; background: var(--inv-deep); border-block: 2px solid var(--inv-accent); }
.songket-melayu-scene-cloth__lozenges::before { content: ''; position: absolute; inset: 22% 0; background: var(--songket-melayu-gold);
    -webkit-mask: var(--songket-melayu-lozenge) center / 4svh 100% repeat-x; mask: var(--songket-melayu-lozenge) center / 4svh 100% repeat-x; }
.songket-melayu-scene-cloth__roller { position: absolute; left: -2vw; right: -2vw; bottom: 0; height: 3svh; border-radius: 99px;
    background:
        linear-gradient(90deg, var(--songket-melayu-gold-dark) 0 3.5%, transparent 3.5% 96.5%, var(--songket-melayu-gold-dark) 96.5%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 55%, #3a1e05), color-mix(in srgb, var(--inv-shine) 55%, #6b3d10) 35%, #3a1e05);
    box-shadow: 0 6px 12px rgb(0 0 0 / .55); }
.songket-melayu-scene-tepi { position: relative; width: 100%; height: 100%; }
.songket-melayu-scene-tepi--right { transform: scaleX(-1); }
.songket-melayu-scene-tepi .songket-melayu-band { position: absolute; left: 0; top: 0; width: 100svh; height: 18px; transform-origin: 0 0; transform: rotate(90deg) translateY(-18px);
    -webkit-mask-size: 14.4px 18px; mask-size: 14.4px 18px; }
.songket-melayu-scene-torak { position: relative; }
/* the weft thread trails from the shuttle's tail across the whole width, so it stays laid once the shuttle has gone */
.songket-melayu-scene-torak::before { content: ''; position: absolute; left: -400%; right: 98%; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px;
    background: linear-gradient(90deg, var(--inv-accent), var(--inv-shine) 85%, var(--inv-accent)); box-shadow: 0 0 8px color-mix(in srgb, var(--inv-shine) 60%, transparent); }
.songket-melayu-scene-torak__art { position: relative; display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .5)); }
.songket-melayu-scene-torak__slot { fill: var(--inv-deep); }
.songket-melayu-scene-torak__edge { stroke: var(--songket-melayu-gold-dark); stroke-width: 2; }
.inv-scene__layer .songket-melayu-scene-flower { width: 100%; height: auto; fill: var(--inv-accent); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--inv-shine) 45%, transparent)); }
.songket-melayu-scene-tanjak { position: relative; }
.songket-melayu-scene-tanjak__art { position: relative; width: 100%; height: auto; filter: drop-shadow(0 12px 12px rgb(0 0 0 / .5)); }
.songket-melayu-scene-tanjak__glow { position: absolute; left: -30%; top: -25%; width: 160%; height: 150%; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-shine) 34%, transparent), transparent); }
/* the card: a songket panel — the deep cloth with gold edges and pucuk rebung at its head and foot */
body.songket-melayu-body .inv-intro--scene .inv-scene__card {
    top: max(57%, calc(16% + 40vw + 7rem)); width: min(72vw, 18rem); aspect-ratio: auto; padding: 2.8rem 1.2rem 2.9rem; overflow: visible;
    -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--inv-background);
    background:
        radial-gradient(90% 60% at 50% 30%, color-mix(in srgb, var(--inv-primary) 90%, transparent), transparent 80%),
        var(--inv-deep);
    box-shadow: inset 0 0 0 1.5px var(--inv-accent), inset 0 0 0 6px var(--inv-deep), inset 0 0 0 7px var(--songket-melayu-hair),
        0 0 0 4px color-mix(in srgb, var(--inv-deep) 70%, transparent), 0 26px 40px -14px rgb(0 0 0 / .75);
}
body.songket-melayu-body .inv-intro--scene .inv-scene__card::before,
body.songket-melayu-body .inv-intro--scene .inv-scene__card::after {
    content: ''; position: absolute; left: 10px; right: 10px; height: 14px; pointer-events: none; background: var(--songket-melayu-gold);
    -webkit-mask: var(--songket-melayu-rebung) center bottom / 11.2px 14px repeat-x; mask: var(--songket-melayu-rebung) center bottom / 11.2px 14px repeat-x;
}
body.songket-melayu-body .inv-intro--scene .inv-scene__card::before { top: 10px; transform: scaleY(-1); }
body.songket-melayu-body .inv-intro--scene .inv-scene__card::after { bottom: 10px; }
body.songket-melayu-body .inv-scene__card .inv-intro__label { margin-bottom: .4rem; font: 700 clamp(.66rem, 3vw, .76rem)/1.3 var(--songket-melayu-serif); letter-spacing: .26em; text-transform: uppercase; color: var(--inv-shine); }
body.songket-melayu-body .inv-scene__card .inv-intro__names {
    font-family: var(--songket-melayu-display) !important; font-size: clamp(2.2rem, 11vw, 2.9rem); font-weight: 400; line-height: 1.05; overflow-wrap: anywhere;
    color: var(--inv-shine); background: linear-gradient(180deg, color-mix(in srgb, var(--inv-shine) 70%, #fff), var(--inv-shine) 45%, var(--inv-accent));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
body.songket-melayu-body .inv-scene__card .inv-intro__rule { width: 5rem; height: 1.5px; margin: .7rem auto .6rem; background: var(--songket-melayu-gold); }
body.songket-melayu-body .inv-scene__card .inv-intro__date { font: 700 clamp(.74rem, 3.4vw, .84rem)/1.45 var(--songket-melayu-sans); letter-spacing: .06em; color: var(--inv-background); }
body.songket-melayu-body .inv-intro--scene .inv-intro__skip { background: color-mix(in srgb, var(--inv-deep) 70%, transparent); border-color: var(--songket-melayu-hair); color: var(--inv-shine); }