/*
 * Template "Adat Minang" (Lamaran & Tunangan) — a Minangkabau "maminang / batimbang tando": deep Minang red,
 * gold thread and black ijuk on a warm ivory. Signature pieces: the gonjong window (photos shaped like a
 * rumah gadang gable, sections/_gonjong), the suntiang headdress as an ornament (sections/_suntiang), the
 * brass carano between the two families (sections/families, _carano), the songket card of the wedding plan,
 * the rundown on a songket band, marawa bands, and carved ukiran (itiak pulang patang, kaluak paku, pucuak
 * rabuang). 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 (Minang red / black / maroon / turmeric brown: the red sections, titles, buttons)
 *   --inv-accent (gold thread)   --inv-shine (light gold on dark)   --inv-background (warm ivory)
 *   --inv-text   --inv-deep (black ijuk: the deep sections)   --inv-soft (a warm tint for chips)
 * Everything else is mixed from those. The marawa colours (black, red, yellow) are the banner's own.
 *
 * Section tones (set on each section in its partial): .am-tone--light (ivory), --paper (deeper ivory),
 * --red (the primary woven with songket), --deep (black ijuk), --gold (a gold band). Light and dark alternate.
 *
 * Motion only runs with html.inv-anim (set by <x-inv.head> unless the guest prefers reduced motion);
 * without it everything is shown finished.
 *
 * Contents: 1 base · 2 section tones & photo backgrounds · 3 shared pieces (heading, dividers, gonjong window,
 *           suntiang, carano, rumah gadang, pill) · 4 cover · 5 sections in page order · 6 forms ·
 *           7 shared components · 8 screen sizes · 9 motion
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Merah Emas" variant (the variant's colours override these) */
    --inv-primary: #a3121f;
    --inv-accent: #d6a338;
    --inv-background: #fbf3e2;
    --inv-text: #2b1611;
    --inv-deep: #2a0b0d;
    --inv-shine: #f5d77c;
    --inv-soft: #f3dcb8;
    --inv-radius: 12px;

    --am-cinzel: 'Cinzel', 'Trajan Pro', Georgia, serif;
    --am-serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
    --am-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --am-col: 460px;

    --am-paper: color-mix(in srgb, #fff 70%, var(--inv-background));
    --am-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    --am-ivory-muted: color-mix(in srgb, var(--inv-background) 86%, transparent);
    --am-gold-ink: color-mix(in srgb, var(--inv-accent) 52%, var(--inv-deep));
    --am-gold-lo: color-mix(in srgb, var(--inv-accent) 58%, var(--inv-deep));
    --am-gold-hi: color-mix(in srgb, var(--inv-shine) 55%, #fff);
    --am-ijuk: color-mix(in srgb, var(--inv-deep) 80%, #000);
    --am-ijuk-hi: color-mix(in srgb, var(--inv-deep) 78%, var(--inv-primary));
    --am-red-hi: color-mix(in srgb, var(--inv-primary) 82%, #fff);
    --am-red-lo: color-mix(in srgb, var(--inv-primary) 62%, var(--inv-deep));
    --am-line: color-mix(in srgb, var(--inv-accent) 60%, transparent);
    --am-drop: 0 24px 44px -24px color-mix(in srgb, var(--inv-deep) 80%, transparent);
    --am-gold: linear-gradient(170deg, var(--am-gold-hi), var(--inv-shine) 25%, var(--inv-accent) 60%, var(--am-gold-lo));
    --am-marawa-black: #161010;
    --am-marawa-red: #b8161f;
    --am-marawa-yellow: #ecba2c;
    --am-marawa: linear-gradient(180deg, var(--am-marawa-black) 0 33.4%, var(--am-marawa-red) 33.4% 66.7%, var(--am-marawa-yellow) 66.7%);

    /* the red woven ground and the black ijuk ground */
    --am-velvet:
        radial-gradient(110% 60% at 15% 0%, color-mix(in srgb, var(--am-red-hi) 70%, transparent), transparent 70%),
        radial-gradient(90% 60% at 100% 100%, color-mix(in srgb, var(--am-red-lo) 90%, transparent), transparent 75%),
        var(--inv-primary);
    --am-ijuk-bg:
        radial-gradient(100% 50% at 85% 0%, color-mix(in srgb, var(--inv-primary) 40%, transparent), transparent 70%),
        radial-gradient(90% 50% at 0% 100%, color-mix(in srgb, var(--inv-primary) 30%, transparent), transparent 75%),
        var(--inv-deep);

    /* songket balapak (masks, so they take any colour): a lozenge lattice with a four-point flower */
    --am-songket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 24 12 12 24 0 12Z' fill='none' stroke='%23000' stroke-width='1'/%3E%3Cpath d='M12 6.6l1.5 3.9 3.9 1.5-3.9 1.5L12 17.4l-1.5-3.9L6.6 12l3.9-1.5Z'/%3E%3Ccircle cx='0' cy='0' r='1.9'/%3E%3Ccircle cx='24' cy='0' r='1.9'/%3E%3Ccircle cx='0' cy='24' r='1.9'/%3E%3Ccircle cx='24' cy='24' r='1.9'/%3E%3C/svg%3E");
    /* pucuak rabuang: bamboo shoots with an inner shoot, standing on a thread */
    --am-rabuang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='22' viewBox='0 0 16 22'%3E%3Cpath fill-rule='evenodd' d='M0 20 8 1.5 16 20ZM4.5 20 8 11.2 11.5 20Z'/%3E%3Cpath d='M7.4 15h1.2v5H7.4zM0 20.6h16V22H0z'/%3E%3C/svg%3E");
    /* the gonjong window: the ridge sags to the middle and sweeps up into a horn at each upper corner */
    --am-gonjong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='none'%3E%3Cpath d='M9 125V33C9 19 6 9 0 0 13 11 28 17.6 50 18.2 72 17.6 87 11 100 0 94 9 91 19 91 33V125Z'/%3E%3C/svg%3E");
    /* a small rangkiang roof (countdown): the same ridge, low and wide */
    --am-roof: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 34' preserveAspectRatio='none'%3E%3Cpath d='M1 0C14 14 30 19 50 19S86 14 99 0C95 11 96 23 100 34H0C4 23 5 11 1 0Z'/%3E%3C/svg%3E");

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

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

body {
    margin: 0;
    background: var(--inv-background);
    color: var(--inv-text);
    font-family: var(--am-sans);
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* under the closing (red), the room for the fixed menu and music button continues its colour */
body.am-body { background: var(--inv-primary); }

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

.am-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

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

.am-arabic { font-family: 'Amiri', 'Traditional Arabic', serif; line-height: 1.9; color: var(--inv-primary); }
.am-amp { font-family: var(--am-serif); font-style: italic; font-weight: 500; color: var(--am-gold-ink); }
.am-label { font-size: .68rem; font-weight: 600; line-height: 1.3; letter-spacing: .3em; text-transform: uppercase; }

/* a thin marawa band (black, red, yellow) along the top edge of a section */
.am-marawa-top::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--am-marawa); pointer-events: none; }

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

/* light: warm ivory with a soft gold glow and the faint songket weave */
.am-tone--light {
    background:
        radial-gradient(70% 28% at 100% 0%, color-mix(in srgb, var(--inv-soft) 60%, transparent), transparent 75%),
        radial-gradient(70% 28% at 0% 100%, color-mix(in srgb, var(--inv-accent) 16%, transparent), transparent 75%),
        var(--inv-background);
}
/* paper: a deeper ivory, used where two light sections could meet */
.am-tone--paper {
    background:
        radial-gradient(80% 40% at 50% 0%, color-mix(in srgb, #fff 45%, transparent), transparent 75%),
        color-mix(in srgb, var(--inv-accent) 15%, var(--inv-background));
}
.am-tone--light::before, .am-tone--paper::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-primary); opacity: .05;
    -webkit-mask: var(--am-songket) center top / 24px 24px repeat; mask: var(--am-songket) center top / 24px 24px repeat;
}

/* red: the primary woven with a faint gold songket */
.am-tone--red { color: var(--inv-background); background: var(--am-velvet); --am-seed: var(--inv-primary); }
/* deep: black ijuk with a red glow */
.am-tone--deep { color: var(--inv-background); background: var(--am-ijuk-bg); --am-seed: var(--inv-deep); }
.am-tone--red::before, .am-tone--deep::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-shine); opacity: .09;
    -webkit-mask: var(--am-songket) center top / 24px 24px repeat; mask: var(--am-songket) center top / 24px 24px repeat;
}
.am-tone--deep::before { opacity: .06; }
:is(.am-tone--red, .am-tone--deep) a:not(.inv-button) { color: var(--inv-shine); }
:is(.am-tone--red, .am-tone--deep) .am-arabic { color: var(--inv-shine); }

/* gold: a gold band */
.am-tone--gold {
    color: var(--inv-deep); --am-seed: var(--inv-accent);
    background:
        radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, #fff 40%, transparent), transparent 75%),
        linear-gradient(160deg, color-mix(in srgb, var(--inv-shine) 80%, #fff), var(--inv-accent));
}
.am-tone--gold::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--inv-deep); opacity: .07;
    -webkit-mask: var(--am-songket) center top / 24px 24px repeat; mask: var(--am-songket) center top / 24px 24px repeat;
}

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

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

/* section heading: a Minang label between gold lozenges, carved capitals, the itiak divider */
.am-heading { margin: 0 0 2.1rem; }
.am-heading--left { text-align: left; }
.am-heading__eyebrow {
    display: inline-flex; align-items: center; gap: .65rem; margin: 0 0 .6rem;
    font-size: .68rem; font-weight: 600; line-height: 1.25; letter-spacing: .3em; text-transform: uppercase; color: var(--am-gold-ink);
}
.am-heading__eyebrow::before, .am-heading__eyebrow::after { content: ''; width: 6px; height: 6px; flex: none; transform: rotate(45deg); background: var(--inv-accent); }
.am-heading--left .am-heading__eyebrow::before { display: none; }
.am-heading__title {
    margin: 0; font-family: var(--am-cinzel); font-size: 1.85rem; font-weight: 600; line-height: 1.18;
    letter-spacing: .03em; color: var(--inv-primary); text-wrap: balance;
}
.am-heading__divider { display: block; margin: .8rem auto 0; }
.am-heading--left .am-heading__divider { margin-left: -.6rem; }

:is(.am-tone--red, .am-tone--deep) .am-heading__eyebrow { color: var(--inv-shine); }
:is(.am-tone--red, .am-tone--deep) .am-heading__title { color: #fff; }
.am-tone--gold .am-heading__eyebrow { color: var(--inv-deep); }
.am-tone--gold .am-heading__eyebrow::before, .am-tone--gold .am-heading__eyebrow::after { background: var(--inv-deep); }
.am-tone--gold .am-heading__title { color: var(--inv-deep); }

/* dividers */
.am-divider { display: block; overflow: visible; max-width: 100%; height: auto; }
.am-divider--itiak { width: 196px; color: var(--inv-primary); }
.am-divider--rabuang { width: 150px; }
.am-divider__seed { stroke: var(--am-seed, var(--inv-primary)); }
.am-divider__seed-fill { fill: var(--am-seed, var(--inv-primary)); }
:is(.am-tone--red, .am-tone--deep) .am-divider--itiak { color: var(--inv-shine); }
.am-tone--gold .am-divider--itiak { color: var(--inv-deep); }
.am-tone--gold .am-divider--rabuang path[fill] { fill: var(--inv-deep); }
.am-tone--gold .am-divider--rabuang path[stroke] { stroke: var(--inv-deep); }
.am-divider--marawa { display: flex; width: 4.2rem; height: 5px; margin: 0 auto; border-radius: 3px; overflow: hidden; }
.am-divider--marawa i { flex: 1; }
.am-divider--marawa i:nth-child(1) { background: var(--am-marawa-black); }
.am-divider--marawa i:nth-child(2) { background: var(--am-marawa-red); }
.am-divider--marawa i:nth-child(3) { background: var(--am-marawa-yellow); }

/* kaluak paku corner sprays */
.am-corner { position: absolute; width: 4.6rem; height: 4.6rem; overflow: visible; pointer-events: none; opacity: .9; --am-leaf: var(--am-red-lo); }
.am-corner--tl { left: -.5rem; top: -.5rem; }
.am-corner--tr { right: -.5rem; top: -.5rem; transform: scaleX(-1); }
.am-corner--br { right: -.5rem; bottom: -.5rem; transform: rotate(180deg); }

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

/* the gonjong window (sections/_gonjong): the photo shaped like a rumah gadang gable, two gold lines,
   gold finials on the horns and a carved sill; --frame-w sets the size, --frame-pos the crop */
.am-gonjong {
    --frame-w: 12rem; --frame-pos: center 20%; --line: var(--am-gold-ink);
    position: relative; width: var(--frame-w); aspect-ratio: 100 / 125; margin: 0; flex: none;
    filter: drop-shadow(0 22px 22px color-mix(in srgb, var(--inv-deep) 40%, transparent));
}
.am-gonjong__window {
    position: absolute; inset: 0; overflow: hidden; background: var(--inv-primary);
    -webkit-mask: var(--am-gonjong) center / 100% 100% no-repeat; mask: var(--am-gonjong) center / 100% 100% no-repeat;
}
.am-gonjong__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--frame-pos); }
.am-gonjong__empty { position: absolute; inset: 0; display: grid; place-items: center; }
.am-gonjong__weave { position: absolute; inset: 0; width: 100%; height: 100%; }
.am-gonjong__empty::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(60% 45% at 50% 58%, color-mix(in srgb, var(--inv-primary) 92%, transparent), color-mix(in srgb, var(--inv-primary) 40%, transparent) 70%, transparent);
}
.am-gonjong__initials {
    position: relative; z-index: 1; margin-top: 18%; font-family: var(--am-serif); font-style: italic; font-weight: 600; line-height: 1; white-space: nowrap;
    font-size: calc(var(--frame-w) * .2); color: var(--inv-shine); text-shadow: 0 2px 10px rgb(0 0 0 / .4);
}
.am-gonjong__initials--one { font-size: calc(var(--frame-w) * .4); }
.am-gonjong__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; pointer-events: none; }
.am-gonjong__outer { stroke: var(--line); stroke-width: 2.2; stroke-linejoin: round; }
.am-gonjong__inner { stroke: color-mix(in srgb, var(--inv-shine) 85%, #fff); stroke-width: 1; stroke-linejoin: round; opacity: .85; }
/* the finials: a slim gold spike on each horn tip, continuing the horn outwards */
.am-gonjong__tip {
    --tw: max(5px, calc(var(--frame-w) * .034));
    position: absolute; top: calc(var(--tw) * -3.1); width: var(--tw); height: calc(var(--tw) * 3.4); transform-origin: 50% 92%;
    background: linear-gradient(90deg, var(--am-gold-lo), var(--am-gold-hi) 45%, var(--inv-accent));
    clip-path: polygon(50% 0, 78% 62%, 100% 74%, 62% 100%, 38% 100%, 0 74%, 22% 62%);
}
.am-gonjong__tip--left { left: calc(var(--tw) * -.5); transform: rotate(-34deg); }
.am-gonjong__tip--right { right: calc(var(--tw) * -.5); transform: rotate(34deg); }
/* the sill: a carved board of kaluak paku under the photo, gold-edged */
.am-gonjong__sill {
    position: absolute; left: calc(var(--frame-w) * -.02); right: calc(var(--frame-w) * -.02); bottom: calc(var(--frame-w) * -.075);
    height: calc(var(--frame-w) * .085); min-height: 10px; border-radius: 2px;
    background: var(--am-red-lo);
    box-shadow: inset 0 1.5px 0 var(--inv-accent), inset 0 -1.5px 0 var(--inv-accent), 0 6px 10px -6px rgb(0 0 0 / .5);
}
.am-gonjong__sill::after {
    content: ''; position: absolute; inset: 2px 0; background: var(--inv-accent);
    -webkit-mask: var(--am-rabuang) left center / auto 100% repeat-x; mask: var(--am-rabuang) left center / auto 100% repeat-x;
}
:is(.am-tone--red, .am-tone--deep, .am-cover) .am-gonjong { --line: var(--inv-shine); }

/* the suntiang (sections/_suntiang) */
.am-suntiang { display: block; overflow: visible; }
.am-suntiang__jewel { fill: var(--inv-primary); }
.am-suntiang__beads { stroke: var(--am-red-lo); }

/* the carano (sections/_carano) */
.am-carano { display: block; overflow: visible; }
.am-carano__shadow { fill: rgb(0 0 0 / .28); }
.am-carano__engrave { stroke: var(--am-gold-lo); }
.am-carano__seam { stroke: var(--inv-shine); }
.am-carano__leaf { fill: #4f7a35; stroke: #2f5420; stroke-width: .6; }
.am-carano__vein { stroke: #9cc06c; }

/* the small rumah gadang (sections/_rumah) */
.am-rumah { display: block; overflow: visible; }
.am-rumah__ridge { stroke: var(--inv-accent); }
.am-rumah__layer { stroke: color-mix(in srgb, var(--inv-accent) 45%, transparent); }
.am-rumah__mullion { stroke: var(--am-red-lo); }
.am-rumah__stilts { stroke: var(--am-gold-ink); }
:is(.am-tone--red, .am-tone--deep) .am-rumah__stilts { stroke: var(--inv-accent); }

/* a small pill link (Instagram) */
.am-pill {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 2.2rem; padding: .3rem .85rem; border-radius: 999px;
    font-size: .8rem; font-weight: 500; text-decoration: none; color: var(--inv-primary); background: #fff;
    box-shadow: inset 0 0 0 1px var(--am-line);
}
.am-pill .am-icon { width: 1rem; height: 1rem; color: var(--am-gold-ink); }

/* ---------- 4. cover ---------- */
.am-cover {
    --frame-cover: min(80vw, 19.5rem, calc(var(--inv-screen, 100svh) * .35));
    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: var(--inv-screen, 100svh); padding: 2rem 1.4rem 1.8rem;
    isolation: isolate; color: var(--inv-background);
    background:
        var(--am-marawa) top / 100% 6px no-repeat,
        linear-gradient(0deg, var(--am-marawa-yellow) 0 2px, var(--am-marawa-red) 2px 4px, var(--am-marawa-black) 4px 6px) bottom / 100% 6px no-repeat,
        radial-gradient(70% 38% at 50% 30%, color-mix(in srgb, var(--am-red-hi) 55%, transparent), transparent 72%),
        radial-gradient(80% 40% at 50% 100%, color-mix(in srgb, var(--inv-deep) 85%, transparent), transparent 75%),
        var(--inv-primary);
    transition: opacity .9s ease;
}
.am-cover::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .1; background: var(--inv-shine);
    -webkit-mask: var(--am-songket) center top / 24px 24px repeat; mask: var(--am-songket) center top / 24px 24px repeat;
}
.am-cover__paku { position: absolute; top: .5rem; width: min(26vw, 7.5rem); height: min(26vw, 7.5rem); overflow: visible; pointer-events: none; opacity: .85; z-index: -1; --am-leaf: var(--am-red-lo); }
.am-cover__paku--left { left: .3rem; }
.am-cover__paku--right { right: .3rem; transform: scaleX(-1); }
.am-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); }

.am-cover__title {
    display: inline-flex; align-items: center; gap: .7rem; margin: 0 0 .6rem;
    font-family: var(--am-cinzel); font-size: .8rem; font-weight: 600; line-height: 1.2; letter-spacing: .34em; text-transform: uppercase; color: var(--inv-shine);
}
.am-cover__title::before, .am-cover__title::after { content: ''; width: 6px; height: 6px; transform: rotate(45deg); background: var(--inv-accent); }

/* the suntiang sits in the hollow of the ridge; the window below it */
.am-cover__art { position: relative; width: var(--frame-cover); padding-top: calc(var(--frame-cover) * .27); margin-bottom: calc(var(--frame-cover) * .075); }
.am-cover__suntiang { position: absolute; left: 50%; top: 0; width: 66%; transform: translateX(-50%); z-index: 2; filter: drop-shadow(0 3px 4px rgb(0 0 0 / .35)); }
.am-gonjong--cover { --frame-w: var(--frame-cover); --frame-pos: center 0%; aspect-ratio: 100 / 112; }

.am-cover__names {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .28em; margin: 1.2rem 0 0;
    font-family: var(--am-serif); font-style: italic; font-weight: 600; font-size: 3rem; line-height: 1.02; letter-spacing: -.005em;
    color: var(--inv-shine); text-shadow: 0 2px 12px rgb(0 0 0 / .3); overflow-wrap: anywhere;
}
.am-cover__amp { font-weight: 500; font-size: .75em; color: #fff; }
.am-cover__date {
    display: inline-flex; align-items: center; gap: .6rem; margin: .7rem 0 0;
    font-family: var(--am-cinzel); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff;
}
.am-cover__date i { width: 1.6rem; height: 1px; background: linear-gradient(90deg, transparent, var(--inv-accent)); position: relative; }
.am-cover__date i:last-child { transform: scaleX(-1); }
.am-cover__quote {
    max-width: 30ch; margin: .7rem 0 0; font-family: var(--am-serif); font-style: italic; font-weight: 500;
    font-size: 1.08rem; line-height: 1.35; color: var(--am-ivory-muted);
}
.am-cover__guest {
    width: min(100%, 19rem); margin: 1rem 0 0; padding: .5rem 1rem .6rem; border-radius: 4px;
    background: color-mix(in srgb, var(--inv-deep) 42%, transparent);
    box-shadow: inset 0 0 0 1px var(--am-line), 0 10px 22px -16px rgb(0 0 0 / .6);
}
.am-cover__guest p { margin: 0; font-size: .62rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-shine); }
.am-cover__guest-name { display: block; font-family: var(--am-serif); font-size: 1.32rem; font-weight: 600; line-height: 1.2; color: #fff; overflow-wrap: anywhere; }
.am-cover__open {
    margin-top: 1rem; min-height: 3rem; padding: .7rem 2rem; font-weight: 600; letter-spacing: .06em;
    background: var(--am-gold); color: var(--inv-deep);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-deep) 55%, transparent), 0 0 0 4px var(--inv-accent), 0 14px 24px -12px rgb(0 0 0 / .6);
}

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

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

/* opening: label, ducks, basmalah, greeting, message; the verse on a red songket panel */
.am-opening { padding: 4.8rem 1.5rem 4.8rem; }
.am-opening__label { margin: 0 auto .6rem !important; color: var(--inv-shine); }
.am-opening__divider { margin: 0 auto 1.4rem; }
.am-opening__basmalah { margin: 0 auto .6rem !important; font-size: 1.85rem; }
.am-opening__greeting { max-width: 22ch !important; font-family: var(--am-serif); font-size: 1.6rem; font-weight: 500; font-style: italic; line-height: 1.25; color: #fff; }
.am-opening__message { max-width: 30ch !important; color: var(--am-ivory-muted); }
.am-opening__quote {
    position: relative; max-width: 23rem; margin: 2.4rem auto 0; padding: 2.3rem 1.5rem 2.2rem; border-radius: 3px;
    background: var(--am-velvet); box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--inv-primary) 50%, transparent), inset 0 0 0 7px var(--am-line), var(--am-drop);
}
/* a woven band of pucuak rabuang along the top and the bottom of the panel */
.am-opening__quote::before, .am-opening__quote::after {
    content: ''; position: absolute; left: 0; right: 0; height: 13px; background: var(--inv-accent);
    -webkit-mask: var(--am-rabuang) center / auto 100% repeat-x; mask: var(--am-rabuang) center / auto 100% repeat-x;
}
.am-opening__quote::before { top: 9px; }
.am-opening__quote::after { bottom: 9px; transform: scaleY(-1); }
.am-opening__quote .am-corner { width: 3.6rem; height: 3.6rem; }
.am-opening__quote p { position: relative; margin: 0; font-family: var(--am-serif); font-style: italic; font-size: 1.16rem; font-weight: 500; line-height: 1.5; color: #fff; }
.am-opening__quote cite {
    position: relative; display: inline-block; margin-top: 1rem; padding: .25rem .85rem; border-radius: 999px; font-style: normal; font-size: .68rem; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase; color: var(--inv-deep); background: var(--am-gold);
}

/* couple: two asymmetric rows, a red songket block offset behind each portrait */
.am-person { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.4rem; text-align: left; }
.am-person--flip { grid-template-columns: minmax(0, 1fr) auto; text-align: right; }
.am-person--flip .am-person__media { order: 2; }
.am-person__media { position: relative; padding: 1.1rem 0 .9rem; }
.am-person__media::before, .am-person__media::after { content: ''; position: absolute; left: 22%; right: -12px; top: 32%; bottom: 0; border-radius: 2px; z-index: -1; }
.am-person__media::before { background: var(--am-velvet); }
.am-person__media::after { background: var(--inv-shine); opacity: .22; -webkit-mask: var(--am-songket) center / 16px 16px repeat; mask: var(--am-songket) center / 16px 16px repeat; }
.am-person--flip .am-person__media::before, .am-person--flip .am-person__media::after { left: -12px; right: 22%; }
.am-gonjong--person { --frame-w: min(8.8rem, 38vw); --frame-pos: center 22%; }
.am-person__label { margin: 0; font-size: .62rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--am-gold-ink); }
.am-person__nickname {
    margin: .1rem 0 0; font-family: var(--am-serif); font-style: italic; font-weight: 600; font-size: 2.9rem; line-height: 1;
    color: var(--inv-primary); overflow-wrap: anywhere;
}
.am-person__name { margin: .35rem 0 0; font-family: var(--am-cinzel); font-size: .98rem; font-weight: 600; line-height: 1.3; letter-spacing: .02em; color: var(--inv-text); overflow-wrap: anywhere; }
.am-person__parents { margin: .5rem 0 .7rem; font-size: .84rem; line-height: 1.45; color: var(--am-muted); }
.am-person__parents span:first-child { display: block; }
.am-person__parents strong { font-weight: 500; color: var(--inv-text); }
.am-person__parents .am-amp { padding: 0 .2em; }
.am-couple__join { display: flex; align-items: center; gap: .9rem; margin: 1.4rem 0 !important; max-width: none !important; }
.am-couple__join::before, .am-couple__join::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--am-line)); }
.am-couple__join::after { transform: scaleX(-1); }
.am-couple__join span {
    display: grid; place-items: center; width: 3rem; height: 3rem; transform: rotate(45deg); border-radius: 4px;
    background: var(--am-velvet); box-shadow: 0 0 0 3px var(--inv-background), 0 0 0 4px var(--inv-accent);
}
.am-couple__join b { transform: rotate(-45deg); font-family: var(--am-serif); font-style: italic; font-weight: 600; font-size: 1.8rem; line-height: 1; color: var(--inv-shine); }

/* families: the intent, then two ivory cards with a songket head around the carano */
.am-families { padding-bottom: 4.6rem; }
.am-families__intent {
    max-width: 30ch !important; margin-bottom: 2.4rem !important; font-family: var(--am-serif); font-style: italic; font-weight: 500;
    font-size: 1.28rem; line-height: 1.45; color: #fff;
}
.am-families__pair { position: relative; display: flex; flex-direction: column; align-items: center; }
.am-family {
    position: relative; width: 88%; align-self: flex-start; padding: 1.9rem 1.25rem 1.25rem; border-radius: 3px; text-align: left; overflow: hidden;
    color: var(--inv-text); background: var(--am-paper);
    box-shadow: inset 0 0 0 5px var(--am-paper), inset 0 0 0 6px var(--am-line), 0 24px 40px -22px rgb(0 0 0 / .65);
}
/* the songket head: a red band with gold pucuak rabuang */
.am-family::before, .am-family::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: .85rem; }
.am-family::before { background: var(--am-red-lo); box-shadow: 0 1.5px 0 var(--inv-accent); }
.am-family::after { top: .1rem; height: .65rem; background: var(--inv-accent); -webkit-mask: var(--am-rabuang) center / auto 100% repeat-x; mask: var(--am-rabuang) center / auto 100% repeat-x; }
.am-family--host { align-self: flex-end; text-align: right; }
.am-families__pair--one .am-family { align-self: center; width: 100%; text-align: center; }
.am-family__label {
    display: inline-block; margin: 0; padding: .2rem .7rem; border-radius: 999px; font-size: .62rem; font-weight: 600; letter-spacing: .2em;
    text-transform: uppercase; color: #fff; background: var(--inv-primary);
}
.am-family--host .am-family__label { color: var(--inv-deep); background: var(--am-gold); }
.am-family__tag { margin: .45rem 0 0; font-family: var(--am-cinzel); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--am-gold-ink); }
.am-family__who { margin: .2rem 0 0; font-family: var(--am-serif); font-style: italic; font-size: 1.05rem; font-weight: 600; color: var(--am-muted); }
.am-family__name { margin: .05rem 0 0; font-family: var(--am-serif); font-size: 1.5rem; font-weight: 700; line-height: 1.15; color: var(--inv-primary); text-wrap: balance; }
.am-family__detail { display: flex; align-items: flex-start; gap: .5rem; margin: .7rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--am-muted); }
.am-family--host .am-family__detail { flex-direction: row-reverse; }
.am-family__detail .am-icon { margin-top: .12rem; color: var(--am-gold-ink); }
/* the exchange: the carano between two dotted gold arcs */
.am-families__exchange { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: .2rem; margin: -.6rem 0 -.4rem; }
.am-families__exchange::before { content: ''; position: absolute; left: 50%; top: 50%; width: 11rem; height: 11rem; margin: -5.5rem 0 0 -5.5rem; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-shine) 34%, transparent), transparent); }
.am-families__carano { width: 8.8rem; filter: drop-shadow(0 10px 14px rgb(0 0 0 / .45)); }
.am-families__arc { width: 3.4rem; height: auto; overflow: visible; fill: none; stroke: var(--inv-shine); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .001 .07; }
.am-families__arc--in { align-self: flex-start; margin-top: .4rem; }
.am-families__arc--out { align-self: flex-end; margin-bottom: .4rem; transform: rotate(180deg) scaleX(-1); }
.am-families__caption { margin: 1.6rem auto 0 !important; font-family: var(--am-serif); font-style: italic; font-size: 1.05rem; color: var(--inv-shine); }

/* events: an ivory card, the photo under a songket band, the date on a songket tile */
.am-event + .am-event { margin-top: 2.4rem; }
.am-event {
    padding: .55rem .55rem 1.3rem; border-radius: 6px; background: #fffdf8; text-align: left;
    box-shadow: inset 0 0 0 1px var(--am-line), 0 22px 40px -26px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.am-event__media { position: relative; padding-bottom: 12px; }
.am-event__photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 40%; border-radius: 3px 3px 0 0; }
.am-event__media::before, .am-event__media::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; }
.am-event__media::before { background: var(--am-red-lo); }
.am-event__media::after { bottom: 1px; height: 10px; background: var(--inv-accent); -webkit-mask: var(--am-rabuang) center / auto 100% repeat-x; mask: var(--am-rabuang) center / auto 100% repeat-x; }
.am-event__top { display: flex; align-items: center; gap: .95rem; padding: 1.1rem .7rem 0; }
.am-event--flip .am-event__top { flex-direction: row-reverse; text-align: right; }
.am-event__date {
    position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; flex: none; width: 4.6rem; margin: 0; padding: .7rem .2rem .6rem;
    border-radius: 3px; color: var(--inv-shine); background: var(--am-velvet);
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--inv-primary) 60%, transparent), inset 0 0 0 4px var(--inv-accent), 0 12px 20px -10px color-mix(in srgb, var(--inv-deep) 80%, transparent);
}
.am-event__date::before {
    content: ''; position: absolute; inset: 0; z-index: -1; background: var(--inv-shine); opacity: .16;
    -webkit-mask: var(--am-songket) center / 14px 14px repeat; mask: var(--am-songket) center / 14px 14px repeat;
}
.am-event--flip .am-event__date { background: var(--am-ijuk-bg); }
.am-event__weekday { font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.am-event__day { font-family: var(--am-serif); font-size: 2.5rem; font-weight: 600; line-height: 1; color: #fff; }
.am-event__month { font-size: .6rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.am-event__head { min-width: 0; }
.am-event__name { margin: 0; font-family: var(--am-cinzel); font-size: 1.32rem; font-weight: 600; line-height: 1.2; color: var(--inv-primary); }
.am-event__full { margin: .25rem 0 0; font-size: .82rem; color: var(--am-muted); }
.am-event__rows { display: grid; gap: .75rem; margin: 1.1rem .7rem 0; padding: 1rem 0 0; list-style: none; font-size: .9rem; border-top: 1px solid var(--am-line); }
.am-event__rows li { display: flex; align-items: flex-start; gap: .7rem; }
.am-event__rows .am-icon { width: 2.1rem; height: 2.1rem; padding: .45rem; border-radius: 50%; color: var(--inv-primary); background: color-mix(in srgb, var(--inv-soft) 60%, #fff); }
.am-event__rows li > span { padding-top: .3rem; }
.am-event__venue { display: block; font-weight: 600; }
.am-event__address { display: block; font-size: .85rem; color: var(--am-muted); }
.am-event .inv-maps { margin: 1.15rem .7rem 0; text-align: center; }
.am-event .inv-maps .inv-button { width: 100%; font-weight: 500; }
.am-event .inv-maps__frame { height: 190px; border-radius: 6px; }

/* countdown: each number a rangkiang (rice barn): an ivory tile capped by a black ijuk roof with gold eaves */
.am-countdown .inv-countdown { gap: clamp(.55rem, 3vw, 1rem); margin-top: 3rem; }
.am-countdown .inv-countdown__item {
    position: relative; display: grid; place-content: center; width: clamp(3.9rem, 18vw, 4.5rem); min-width: 0; height: 4.4rem; padding: .3rem 0 0;
    border-radius: 0 0 4px 4px; color: var(--inv-text); background: linear-gradient(180deg, var(--am-paper), color-mix(in srgb, var(--inv-soft) 60%, var(--am-paper)));
    box-shadow: inset 0 0 0 1px var(--am-line), 0 18px 26px -12px rgb(0 0 0 / .6);
}
.am-countdown .inv-countdown__item::before {
    content: ''; position: absolute; left: -9%; right: -9%; bottom: 100%; height: 1.55rem; margin-bottom: -2px;
    background: linear-gradient(180deg, var(--am-ijuk-hi), var(--am-ijuk) 76%, var(--inv-accent) 76%, var(--am-gold-lo));
    -webkit-mask: var(--am-roof) center / 100% 100% no-repeat; mask: var(--am-roof) center / 100% 100% no-repeat;
}
.am-countdown .inv-countdown__item::after {
    content: ''; position: absolute; left: -9%; right: -9%; bottom: calc(100% + 1.4rem); height: 6px;
    background: radial-gradient(circle at 3px 3px, var(--inv-shine) 2.4px, transparent 3px) left top / 6px 6px no-repeat, radial-gradient(circle at calc(100% - 3px) 3px, var(--inv-shine) 2.4px, transparent 3px);
}
.am-countdown .inv-countdown__value { font-variant-numeric: lining-nums tabular-nums; font-family: var(--am-serif); font-size: 1.95rem; font-weight: 700; line-height: 1; color: var(--inv-primary); }
.am-countdown .inv-countdown__label { margin-top: .15rem; font-size: .54rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--am-muted); }
.am-countdown .inv-countdown__done { font-family: var(--am-serif); font-size: 1.4rem; font-style: italic; color: var(--inv-shine); }
.am-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 2.1rem; }
.am-countdown .inv-countdown__actions .inv-button {
    width: min(100%, 17rem); min-height: 2.75rem; padding: .6rem 1rem; font-size: .84rem; font-weight: 500;
    color: var(--inv-background); background: color-mix(in srgb, var(--inv-background) 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 70%, transparent);
}
.am-countdown .inv-countdown__actions .inv-button:first-child { color: var(--inv-deep); background: var(--am-gold); box-shadow: none; font-weight: 600; }
.am-countdown .inv-cal {
    --inv-cal-bg: var(--am-paper); --inv-cal-mark: var(--inv-primary);
    max-width: 19rem; margin: 2.8rem auto 0; border-radius: 4px;
    box-shadow: inset 0 0 0 5px var(--am-paper), inset 0 0 0 6px var(--am-line), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.am-countdown .inv-cal__month { font-family: var(--am-cinzel); font-size: 1.3rem; font-weight: 600; color: var(--inv-primary); }

/* wedding plan: the path lamaran → akad with a small rumah gadang, then the songket card */
.am-plan__path { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .3rem; max-width: 23rem; margin: 0 auto 2rem; padding: 0; list-style: none; }
.am-plan__step { display: flex; flex-direction: column; align-items: center; width: 6.6rem; }
.am-plan__dot { width: 1.05rem; height: 1.05rem; margin: .2rem 0 .1rem; transform: rotate(45deg); border-radius: 2px; background: var(--am-paper); box-shadow: inset 0 0 0 2.5px var(--inv-accent); }
.am-plan__step--done .am-plan__dot { background: var(--am-gold); box-shadow: 0 0 0 3px color-mix(in srgb, #fff 60%, transparent); }
.am-plan__step-name { margin-top: .45rem; font-family: var(--am-cinzel); font-size: .95rem; font-weight: 600; line-height: 1.15; color: var(--inv-primary); }
.am-plan__step-when { font-size: .66rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--am-muted); }
.am-plan__line { position: relative; display: grid; place-items: center; }
.am-plan__line::before {
    content: ''; position: absolute; left: -1.4rem; right: -1.4rem; top: .65rem; height: 2px;
    background: radial-gradient(circle, var(--am-gold-ink) 1.1px, transparent 1.4px) left center / 7px 2px repeat-x;
}
.am-plan__house { position: relative; width: min(7rem, 100%); margin-top: -2.2rem; filter: drop-shadow(0 8px 8px rgb(0 0 0 / .2)); }
/* the songket card: woven ends with tumpal shoots and a fringe, a plain red body */
.am-plan__card { position: relative; max-width: 22rem; margin: 0 auto; color: var(--inv-background); filter: drop-shadow(0 26px 30px color-mix(in srgb, var(--inv-deep) 45%, transparent)); }
.am-plan__end { position: relative; display: block; height: 2.6rem; background: var(--am-red-lo); }
.am-plan__end::before {
    content: ''; position: absolute; left: 0; right: 0; top: .55rem; bottom: .35rem; background: var(--am-gold);
    -webkit-mask: var(--am-rabuang) center / auto 100% repeat-x; mask: var(--am-rabuang) center / auto 100% repeat-x;
}
/* the gold thread fringe beyond the woven end */
.am-plan__end::after {
    content: ''; position: absolute; left: 4px; right: 4px; top: -9px; height: 9px;
    background: repeating-linear-gradient(90deg, var(--inv-accent) 0 1.5px, transparent 1.5px 4px);
}
.am-plan__end--bottom { transform: scaleY(-1); }
.am-plan__body {
    position: relative; isolation: isolate; padding: 2rem 1.5rem 2.1rem; background: var(--am-velvet);
    box-shadow: inset 0 3px 0 var(--inv-accent), inset 0 -3px 0 var(--inv-accent), inset 10px 0 0 var(--am-red-lo), inset -10px 0 0 var(--am-red-lo), inset 11px 0 0 var(--inv-accent), inset -11px 0 0 var(--inv-accent);
}
.am-plan__body::before {
    content: ''; position: absolute; inset: 0 11px; z-index: -1; background: var(--inv-shine); opacity: .1;
    -webkit-mask: var(--am-songket) center / 20px 20px repeat; mask: var(--am-songket) center / 20px 20px repeat;
}
.am-plan__label { margin: 0 0 .3rem; font-size: .7rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-shine); }
.am-plan__date {
    margin: 0; font-family: var(--am-serif); font-style: italic; font-size: 3.1rem; font-weight: 600; line-height: 1.02;
    color: var(--inv-shine); text-shadow: 0 2px 10px rgb(0 0 0 / .3); text-wrap: balance; overflow-wrap: anywhere;
}
.am-plan__city { display: inline-flex; align-items: center; gap: .4rem; margin: .9rem 0 0; padding: .3rem .9rem; border-radius: 999px; font-size: .84rem; font-weight: 500; color: var(--inv-deep); background: var(--am-gold); }
.am-plan__city .am-icon { width: 1rem; height: 1rem; }
.am-plan__note { max-width: 28ch; margin: 1.1rem auto 0; font-family: var(--am-serif); font-style: italic; font-size: 1.14rem; line-height: 1.45; color: var(--am-ivory-muted); }

/* rundown: a vertical songket band on the left, a gold lozenge per step, the time on a black tab */
.am-rundown__list { position: relative; margin: 0; padding: 0 0 0 3rem; list-style: none; text-align: left; }
.am-rundown__list::before, .am-rundown__list::after { content: ''; position: absolute; left: .55rem; top: .3rem; bottom: .3rem; width: 1.15rem; transform-origin: top; }
.am-rundown__list::before { background: var(--inv-deep); box-shadow: inset 2px 0 0 var(--inv-accent), inset -2px 0 0 var(--inv-accent), 0 10px 20px -10px rgb(0 0 0 / .5); }
.am-rundown__list::after { left: .7rem; width: .85rem; background: var(--inv-accent); opacity: .85; -webkit-mask: var(--am-songket) center top / 14px 14px repeat-y; mask: var(--am-songket) center top / 14px 14px repeat-y; }
.am-rundown__item { position: relative; padding: 0 0 1.3rem; }
.am-rundown__item:last-child { padding-bottom: 0; }
.am-rundown__knot { position: absolute; z-index: 1; left: -2.45rem; top: .45rem; width: 1.15rem; height: 1.15rem; transform: rotate(45deg); background: var(--am-gold); box-shadow: 0 0 0 3px var(--inv-deep), 0 0 0 4px var(--inv-accent); }
.am-rundown__time {
    display: inline-block; padding: .1rem .6rem; border-radius: 3px; font-family: var(--am-serif); font-size: 1.3rem; font-weight: 700; line-height: 1.2;
    font-variant-numeric: lining-nums tabular-nums; color: var(--inv-shine); background: color-mix(in srgb, var(--inv-deep) 70%, transparent);
    box-shadow: inset 0 0 0 1px var(--am-line);
}
.am-rundown__body h3 { margin: .35rem 0 0; font-size: 1rem; font-weight: 500; line-height: 1.4; color: #fff; }
.am-rundown__body p { margin: .15rem 0 0; font-size: .85rem; color: var(--am-ivory-muted); }

/* a large faint kaluak paku spray in the lower corner of the rundown */
.am-rundown__paku { width: 11rem; height: 11rem; right: -1.2rem; bottom: -1.2rem; opacity: .35; }

/* love story: small gonjong windows beside the text, alternating; text-only chapters as cards */
.am-story__list { position: relative; display: grid; gap: 2.4rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.am-story__item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.3rem; }
.am-story__item--flip { grid-template-columns: minmax(0, 1fr) auto; text-align: right; }
.am-story__item--flip .am-gonjong { order: 2; }
.am-gonjong--story { --frame-w: min(7.8rem, 34vw); --frame-pos: center 30%; }
.am-story__when {
    display: inline-block; padding: .2rem .75rem; border-radius: 999px; font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    color: #fff; background: var(--inv-primary);
}
.am-story__body h3 { margin: .45rem 0 0; font-family: var(--am-serif); font-style: italic; font-size: 1.6rem; font-weight: 600; line-height: 1.1; color: var(--inv-primary); }
.am-story__body p { margin: .35rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--am-muted); }
.am-story__item--text {
    grid-template-columns: 2.8rem minmax(0, 1fr); align-items: start; gap: 1rem; padding: 1.2rem 1.2rem 1.2rem 1.1rem; border-radius: 4px; text-align: left;
    background: #fffdf8; box-shadow: inset 4px 0 0 var(--inv-primary), inset 0 0 0 1px var(--am-line), var(--am-drop);
}
.am-story__number { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; margin: .3rem; transform: rotate(45deg); border-radius: 3px; background: var(--am-gold); box-shadow: 0 0 0 3px #fffdf8, 0 0 0 4px var(--inv-accent); }
.am-story__number span { transform: rotate(-45deg); font-family: var(--am-serif); font-size: 1.3rem; font-weight: 700; color: var(--inv-deep); }

/* gallery: the first photo wide in a gonjong outline, the others with a thin gold line */
.am-gallery .inv-gallery { gap: .6rem; }
.am-gallery .inv-gallery__item { border-radius: 3px; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 70%, transparent), 0 16px 28px -18px rgb(0 0 0 / .7); }
.am-gallery .inv-gallery__item:first-child {
    grid-column: 1 / -1; aspect-ratio: 4 / 3.6; border-radius: 0; box-shadow: none;
    -webkit-mask: var(--am-gonjong) center / 100% 100% no-repeat; mask: var(--am-gonjong) center / 100% 100% no-repeat;
}

/* live streaming: a red songket card with a gold inner line */
.am-stream__card {
    position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem 1rem;
    max-width: 24rem; margin: 0 auto; padding: 1.5rem 1.4rem; border-radius: 4px; color: var(--inv-background); text-align: left; background: var(--am-velvet);
    box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--inv-primary) 60%, transparent), inset 0 0 0 7px var(--am-line), var(--am-drop);
}
.am-stream__card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--inv-shine); opacity: .08; -webkit-mask: var(--am-songket) center / 20px 20px repeat; mask: var(--am-songket) center / 20px 20px repeat; }
.am-stream__icon { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin: .3rem; transform: rotate(45deg); border-radius: 4px; color: var(--inv-deep); background: var(--am-gold); }
.am-stream__icon .am-icon { width: 1.6rem; height: 1.6rem; transform: rotate(-45deg); }
.am-stream__label { margin: 0 !important; font-size: .62rem !important; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-shine) !important; }
.am-stream__title { margin: .1rem 0 .2rem; font-family: var(--am-cinzel); font-size: 1.4rem; font-weight: 600; line-height: 1.1; color: #fff; }
.am-stream__text p { margin: 0; font-size: .86rem; color: var(--am-ivory-muted); }
.am-stream__text .am-stream__note { margin-top: .3rem; font-weight: 500; color: var(--inv-shine); }
.am-stream__button { grid-column: 1 / -1; min-height: 2.75rem; color: var(--inv-deep) !important; background: var(--am-gold) !important; font-weight: 600; }

/* RSVP card: ivory with a woven songket head band and a gold inner line */
.am-rsvp__card {
    position: relative; overflow: hidden; padding: 2.4rem 1.15rem 1.4rem; border-radius: 4px; color: var(--inv-text); background: var(--am-paper);
    box-shadow: inset 0 0 0 6px var(--am-paper), inset 0 0 0 7px var(--am-line), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.am-rsvp__card::before, .am-rsvp__card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1rem; }
.am-rsvp__card::before { background: var(--am-red-lo); box-shadow: 0 1.5px 0 var(--inv-accent); }
.am-rsvp__card::after { top: .12rem; height: .76rem; background: var(--inv-accent); -webkit-mask: var(--am-rabuang) center / auto 100% repeat-x; mask: var(--am-rabuang) center / auto 100% repeat-x; }
.am-rsvp__intro { margin: 0 auto 1.1rem; max-width: 30ch; font-size: .9rem; color: var(--am-muted); }
.am-rsvp__sent { margin-bottom: 1rem; }
.am-rsvp__check { display: block; width: 4.4rem; height: 4.4rem; margin: 0 auto .5rem; overflow: visible; }
.am-rsvp__check-ring { fill: none; stroke: var(--inv-accent); stroke-width: 3; stroke-linejoin: round; }
.am-rsvp__check-disc { fill: var(--inv-primary); }
.am-rsvp__check path:last-child { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
html.inv-anim .am-rsvp__sent .am-rsvp__check { animation: am-pop .8s cubic-bezier(.34, 1.56, .64, 1) both; }
html.inv-anim .am-rsvp__sent .am-rsvp__check path:last-child { animation: am-draw .45s ease-out .35s both; }
.am-rsvp__thanks { margin: 0; font-family: var(--am-serif); font-style: italic; font-size: 1.9rem; font-weight: 600; color: var(--inv-primary); }
.am-rsvp__line { margin: .1rem 0 0; font-size: .9rem; color: var(--am-muted); }
.am-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .84rem; font-weight: 500; color: var(--inv-primary); }

/* gift: ivory cards with a woven songket head and a gold lozenge clasp, two per row */
.am-gift__intro { color: var(--am-ivory-muted); }
.am-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.3rem; }
.am-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.am-gift .inv-gift__account,
.am-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: 3px; color: var(--inv-text); background: var(--am-paper);
    box-shadow: 0 18px 30px -20px rgb(0 0 0 / .6);
}
.am-gift .inv-gift__account::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: .85rem;
    background: var(--am-red-lo); box-shadow: 0 1.5px 0 var(--inv-accent);
}
.am-gift .inv-gift__account::after {
    content: ''; position: absolute; left: 50%; top: .5rem; width: .8rem; height: .8rem; margin-left: -.4rem; transform: rotate(45deg);
    background: var(--am-gold); box-shadow: 0 0 0 2px var(--am-red-lo);
}
.am-gift .inv-gift__account p, .am-gift .inv-gift__address p { margin: 0; }
.am-gift .inv-gift__bank { font-weight: 600; font-size: .85rem; color: var(--inv-primary); }
.am-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .4rem; background: #fff; }
.am-gift .inv-gift__logo img { max-width: 5rem; }
.am-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);
}
.am-gift .inv-gift__holder { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--am-muted); overflow-wrap: anywhere; }
.am-gift .inv-button { margin-top: .35rem; min-height: 2.25rem; padding: .35rem .9rem; font-size: .74rem; font-weight: 500; }
.am-gift .inv-gift__address { margin-top: .75rem; font-size: .875rem; }
.am-gift .inv-gift__address .inv-gift__holder { font-size: .72rem; }

/* co-hosts: the names in the serif, one per line, split by small lozenges, on the gold band */
.am-cohosts__list { display: flex; flex-direction: column; align-items: center; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.am-cohosts__list li { max-width: 26ch; font-family: var(--am-serif); font-size: 1.3rem; font-weight: 700; line-height: 1.25; color: var(--inv-deep); }
.am-cohosts__list li + li::before { content: ''; display: block; width: 7px; height: 7px; margin: 0 auto .55rem; transform: rotate(45deg); background: var(--inv-primary); }

/* contacts: rows with the initial on a red disc ringed in gold, and a WhatsApp button */
.am-contacts__list { display: grid; gap: .75rem; max-width: 24rem; margin: 0 auto; }
.am-contact {
    display: grid; grid-template-columns: 2.9rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .65rem .7rem; border-radius: 4px;
    background: #fffdf8; text-align: left; box-shadow: inset 3px 0 0 var(--inv-primary), inset 0 0 0 1px var(--am-line), 0 14px 26px -22px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.am-contact__avatar {
    display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%;
    font-family: var(--am-serif); font-style: italic; font-size: 1.5rem; font-weight: 600; color: var(--inv-shine); background: var(--am-velvet);
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--inv-accent);
}
.am-contact p { margin: 0; }
.am-contact__name { font-weight: 600; font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; }
.am-contact__role { font-size: .78rem; color: var(--am-muted); }
.am-contact__phone { font-size: .85rem; }
.am-contact__button { min-height: 2.5rem; padding: .45rem .95rem; font-size: .8rem; font-weight: 500; }
.am-contact__button .am-icon { width: 1.05rem; height: 1.05rem; }

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

/* vendors: a white card of rows split by fine gold lines */
.am-vendors__list { max-width: 24rem; margin: 0 auto; padding: .3rem 1.15rem; list-style: none; border-radius: 4px; background: #fffdf8; box-shadow: inset 0 0 0 1px var(--am-line), var(--am-drop); }
.am-vendor { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem 0; text-align: left; border-bottom: 1px solid var(--am-line); }
.am-vendor:last-child { border-bottom: 0; }
.am-vendor__text { display: flex; flex-direction: column; min-width: 0; }
.am-vendor__role { font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--am-gold-ink); }
.am-vendor__name { font-family: var(--am-serif); font-size: 1.2rem; font-weight: 700; line-height: 1.2; color: var(--inv-primary); overflow-wrap: anywhere; }
.am-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: 500; text-decoration: none; color: var(--inv-primary); box-shadow: inset 0 0 0 1px var(--am-line);
}
.am-vendor__link .am-icon { width: .95rem; height: .95rem; }

/* closing: the full photo fading into the red, then the suntiang, the thanks, the house and the names */
.am-closing { padding: 3.1rem 1.6rem 2rem; }
.am-closing--photo { padding-top: 0; padding-bottom: 1.6rem; min-height: var(--inv-screen, 100svh); }
.am-closing__photo { position: relative; z-index: -1; height: min(90vw, calc(var(--inv-screen, 100svh) * .3), 22rem); margin: 0 -1.6rem; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 0 58%, rgb(0 0 0 / .7) 74%, rgb(0 0 0 / .3) 88%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0 58%, rgb(0 0 0 / .7) 74%, rgb(0 0 0 / .3) 88%, transparent 100%);
}
.am-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 18%; --inv-parallax: 30px; }
.am-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    /* a soft tint low on the photo; the photo itself melts away (mask), so it meets the patterned red without a seam */
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 12%, transparent), transparent 22%, transparent 55%, color-mix(in srgb, var(--inv-primary) 35%, transparent) 85%);
}
.am-closing__body { position: relative; }
.am-closing--photo .am-closing__body { margin-top: -3.4rem; }
.am-closing__paku { width: 3rem; height: 3rem; opacity: .75; }
.am-closing--photo .am-closing__paku { top: 4rem; }
.am-closing__suntiang { width: 5.4rem; margin: 0 auto .2rem; filter: drop-shadow(0 3px 5px rgb(0 0 0 / .35)); }
.am-closing__eyebrow { margin: 0 0 .3rem; font-size: .7rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--inv-shine); }
.am-closing__title { margin: 0 0 .5rem; font-family: var(--am-cinzel); font-size: clamp(1.7rem, 7.6vw, 2.05rem); font-weight: 600; line-height: 1.1; letter-spacing: .03em; color: #fff; }
.am-closing__message { margin: 0 auto; max-width: 32ch; font-size: .92rem; line-height: 1.6; color: var(--am-ivory-muted); }
.am-closing__salam { margin: .55rem auto 0; max-width: 32ch; font-family: var(--am-serif); font-size: 1.08rem; font-style: italic; font-weight: 500; line-height: 1.3; color: var(--inv-shine); }
.am-closing__signature { margin: .5rem auto 0; max-width: 30ch; font-size: .86rem; color: var(--am-ivory-muted); }
.am-closing__house { position: relative; width: min(5.6rem, 32%); margin: .6rem auto 0; padding-bottom: 8px; }
.am-closing__house::after { content: ''; position: absolute; left: -16%; right: -16%; bottom: 0; height: 5px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--am-marawa-black) 12% 36%, var(--am-marawa-red) 36% 64%, var(--am-marawa-yellow) 64% 88%, transparent); }
.am-closing__names { margin: .5rem 0 0; font-family: var(--am-serif); font-style: italic; font-size: clamp(2.1rem, 9.5vw, 2.5rem); font-weight: 600; line-height: 1.05; color: var(--inv-shine); }
.am-closing__names .am-amp { font-size: .75em; color: #fff; }
.am-closing__monogram {
    display: inline-flex; align-items: center; gap: .45rem; margin: .6rem 0 0; padding: .26rem .85rem; border-radius: 999px;
    font-family: var(--am-cinzel); font-size: .86rem; font-weight: 700; letter-spacing: .14em; color: var(--inv-shine);
    box-shadow: inset 0 0 0 1px var(--am-line);
}
.am-closing__monogram i { width: 5px; height: 5px; transform: rotate(45deg); background: var(--inv-accent); }

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

/* the three answers as cards with icons (the radio dot is hidden but still focusable) */
.am-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.am-rsvp .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.am-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: 4px; cursor: pointer; text-align: center;
    font-size: .84rem; font-weight: 500; line-height: 1.2; color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 22%, transparent);
    transition: background-color .25s ease, color .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.am-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* icon: a gold lozenge (::before) with a check, a cross or a question mark in it (::after, a mask in the text colour) */
.am-rsvp .inv-form__choices label::before {
    content: ''; width: 1.75rem; height: 1.75rem; margin: .2rem 0; flex: none; transform: rotate(45deg); border-radius: 3px; background: color-mix(in srgb, var(--inv-soft) 55%, #fff);
    box-shadow: inset 0 0 0 2px var(--inv-accent);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease;
}
.am-rsvp .inv-form__choices label::after {
    content: ''; position: absolute; left: 50%; top: 1.3rem; width: 1.1rem; height: 1.1rem; margin-left: -.55rem;
    background: currentColor; color: var(--inv-primary); pointer-events: none;
    -webkit-mask: var(--am-choice-icon) center / contain no-repeat; mask: var(--am-choice-icon) center / contain no-repeat;
}
.am-rsvp .inv-form__choices label:nth-of-type(1) {
    --am-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");
}
.am-rsvp .inv-form__choices label:nth-of-type(2) {
    --am-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");
}
.am-rsvp .inv-form__choices label:nth-of-type(3) {
    --am-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");
}
.am-rsvp .inv-form__choices label:has(input:checked) {
    color: #fff; background: linear-gradient(180deg, var(--inv-primary), var(--am-red-lo)); 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);
}
.am-rsvp .inv-form__choices label:has(input:checked)::before { background-color: rgb(255 255 255 / .14); transform: rotate(45deg) scale(1.1); }
.am-rsvp .inv-form__choices label:has(input:checked)::after { color: #fff; }
.am-rsvp .inv-form__choices label:has(input:focus-visible) { outline: 2px solid var(--inv-accent); outline-offset: 3px; }

/* wishes: the form on a white card with a red songket block offset, the wishes in a scroll box of about three */
.am-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.am-wishes .inv-form {
    margin-right: 8px; padding: 1.3rem 1.1rem; border-radius: 4px; background: #fff;
    box-shadow: inset 0 0 0 1px var(--am-line), 8px 8px 0 0 var(--inv-primary), 8px 8px 0 1px var(--inv-accent);
}
.am-wishes .inv-wishes__list { margin-top: 1.4rem; }
.am-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .55rem; border-radius: 4px; background: color-mix(in srgb, #fff 45%, transparent); box-shadow: inset 0 0 0 1px var(--am-line);
}
.am-wishes .inv-wish { padding: .75rem .9rem; border-radius: 3px; background: #fff; text-align: left; box-shadow: 0 2px 10px rgb(0 0 0 / .05); border-left: 3px solid var(--inv-accent); }
.am-wishes .inv-wish__name { font-weight: 600; color: var(--inv-primary); }
.am-wishes .inv-wish__message { font-size: .88rem; line-height: 1.5; }
.am-wishes .inv-wish__time { font-size: .72rem; color: var(--am-muted); }

/* ---------- 7. shared components ---------- */
.am-main .inv-button { font-weight: 500; }
body .inv-nav {
    --inv-nav-bg: color-mix(in srgb, #fff 94%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-text) 74%, transparent);
    --inv-nav-active: var(--inv-primary);
    font-family: var(--am-sans);
}

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

/* the two families side by side when there is room, the carano between them */
@media (min-width: 440px) {
    .am-families__pair:not(.am-families__pair--one) { flex-direction: row; align-items: stretch; }
    .am-families__pair:not(.am-families__pair--one) .am-family { width: auto; flex: 1; align-self: stretch; padding-top: 2rem; text-align: center; }
    .am-families__pair .am-family--host .am-family__detail, .am-families__pair .am-family__detail { justify-content: center; flex-direction: row; }
    .am-families__exchange { align-self: center; flex: none; flex-direction: column; margin: 0 -1.2rem; }
    .am-families__arc { display: none; }
    .am-families__carano { width: 5.8rem; }
}

/* short phones: the cover art and type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .am-cover { --frame-cover: min(76vw, 18rem, calc(var(--inv-screen, 100svh) * .33)); padding-top: 1.5rem; padding-bottom: 1.4rem; }
    .am-cover__names { margin-top: 1rem; font-size: 2.7rem; }
    .am-cover__quote { margin-top: .55rem; font-size: 1rem; }
    .am-cover__guest { margin-top: .8rem; }
    .am-cover__open { margin-top: .85rem; }
}
@media (max-height: 660px) {
    .am-cover { --frame-cover: min(70vw, calc(var(--inv-screen, 100svh) * .31)); padding-top: 1.2rem; padding-bottom: 1.1rem; }
    .am-cover__title { font-size: .72rem; }
    .am-cover__names { margin-top: .8rem; font-size: 2.35rem; }
    .am-cover__date { margin-top: .5rem; font-size: .72rem; }
    .am-cover__quote { font-size: .94rem; line-height: 1.3; }
    .am-cover__guest { padding: .4rem .85rem .5rem; }
    .am-cover__guest-name { font-size: 1.18rem; }
    .am-cover__open { min-height: 2.75rem; padding: .6rem 1.7rem; }
}
/* very short screens (in-app browsers): a smaller window and quote, so everything fits */
@media (max-height: 600px) {
    .am-cover { --frame-cover: min(44vw, 23svh); padding-top: 1rem; }
    .am-cover__names { font-size: 2.1rem; }
    .am-cover__quote { font-size: .88rem; }
}

/* wide screens: the phone-width column on a black ijuk backdrop with the songket */
@media (min-width: 560px) {
    body.am-body { background: var(--am-ijuk-bg); background-attachment: fixed; }
    body.am-body::before {
        content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .08; background: var(--inv-accent);
        -webkit-mask: var(--am-songket) center / 24px 24px repeat; mask: var(--am-songket) center / 24px 24px repeat;
    }
    .am-main { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
}

/* ---------- 9. motion ---------- */
@keyframes am-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes am-pop { 0% { transform: scale(0); } 55% { transform: scale(1.12); } 75% { transform: scale(.95); } 100% { transform: scale(1); } }
@keyframes am-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes am-zoom-out { from { transform: scale(1.09); } to { transform: scale(1); } }
@keyframes am-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes am-fan { from { opacity: 0; transform: scale(.35); } to { opacity: 1; transform: none; } }
@keyframes am-tip { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes am-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* cover (≤ 2.5 s, once): the window rises in and its photo settles (0–1.1 s), the gold lines draw along
   the horns and the ridge (0.3–1.7 s), the finials appear (1.4–1.9 s), the suntiang sprays fan open from
   the middle outwards (0.6–2.1 s); the text follows through its inv-enter delays */
html.inv-anim .am-gonjong--cover { animation: am-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .am-gonjong--cover .am-gonjong__photo { animation: am-zoom-out 1.1s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .am-gonjong--cover :is(.am-gonjong__outer, .am-gonjong__inner) { stroke-dasharray: 1; animation: am-draw 1.4s cubic-bezier(.45, .1, .3, 1) .3s both; }
html.inv-anim .am-gonjong--cover .am-gonjong__tip { animation: am-tip .5s ease 1.4s both; }
html.inv-anim .am-cover__suntiang .am-suntiang__ray { transform-box: view-box; transform-origin: 100px 110px; animation: am-fan .7s cubic-bezier(.3, 1.3, .5, 1) both; animation-delay: calc(.6s + var(--i) * .1s); }
html.inv-anim .am-cover__suntiang > path, html.inv-anim .am-cover__suntiang > g:not(.am-suntiang__ray) { animation: am-fade .5s ease .5s both; }
html.inv-anim .am-cover__paku { animation: am-fade 1.2s ease .4s both; }

/* the dotted arcs of the exchange draw themselves once when their part is revealed */
html.inv-anim .am-families__exchange .am-carano { opacity: 0; }
html.inv-anim :is(.is-revealed .am-families__exchange, .am-families__exchange.is-revealed) .am-carano { animation: am-rise .8s cubic-bezier(.2, .7, .2, 1) .1s both; }

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

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

/* ---------- intro scene "Carano Datang Maminang" (scene.json, sections/_scene): the songket curtains part on the
   red hall, marawa banners drop from the valance and the brass carano is carried in ---------- */
.am-scene-ground { position: absolute; inset: 0; background: var(--am-velvet); box-shadow: inset 0 0 16vmax color-mix(in srgb, var(--inv-deep) 75%, transparent); }
.am-scene-ground::before {
    content: ''; position: absolute; inset: 0; opacity: .1; background: var(--inv-shine);
    -webkit-mask: var(--am-songket) center / 30px 30px repeat; mask: var(--am-songket) center / 30px 30px repeat;
}
.am-scene-valance { display: flex; flex-direction: column; width: 100%; height: 100%; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .45)); }
.am-scene-valance__band { display: block; flex: 1; width: 100%; box-shadow: inset 0 -6px 10px rgb(0 0 0 / .3); }
.am-scene-valance__hem { height: 4px; background: var(--am-gold); }
.am-scene-valance__fringe {
    height: 12px;
    background:
        radial-gradient(circle at 50% calc(100% - 2.5px), var(--inv-shine) 2.2px, transparent 2.6px) 0 0 / 10px 100% repeat-x,
        linear-gradient(90deg, transparent 4.2px, var(--inv-accent) 4.2px 5.8px, transparent 5.8px) 0 0 / 10px calc(100% - 4px) repeat-x;
}
.am-scene-marawa { overflow: visible; filter: drop-shadow(0 8px 10px rgb(0 0 0 / .4)); }
.am-scene-marawa--r { scale: -1 1; }
.am-scene-rabuang {
    display: block; height: 100%; background: var(--am-gold); filter: drop-shadow(0 -3px 6px rgb(0 0 0 / .35));
    -webkit-mask: var(--am-rabuang) left bottom / auto 100% repeat-x; mask: var(--am-rabuang) left bottom / auto 100% repeat-x;
}
.am-scene-glow { display: block; height: 100%; background: radial-gradient(50% 60% at 50% 78%, color-mix(in srgb, var(--inv-shine) 42%, transparent), transparent 72%); }
.am-scene-carano { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%; }
.am-scene-carano > svg { width: auto; height: 100%; max-width: 100%; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--inv-shine) 40%, transparent)); }
.am-scene-leaf { overflow: visible; filter: drop-shadow(0 3px 3px rgb(0 0 0 / .35)); }
.am-scene-curtain { position: relative; height: 100%; overflow: hidden; box-shadow: 0 0 30px rgb(0 0 0 / .55); }
.am-scene-curtain > svg { display: block; width: 100%; height: 100%; }
/* pleats over the weave, and the gold hem down the meeting edge */
.am-scene-curtain::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(90deg, rgb(0 0 0 / .32), rgb(255 255 255 / .06) 9%, rgb(0 0 0 / .32) 18%);
}
.am-scene-curtain::after { content: ''; position: absolute; top: 0; bottom: 0; width: 12px; background: var(--am-gold); box-shadow: 0 0 0 2px var(--am-red-lo), 0 0 0 3px var(--inv-accent); }
.am-scene-curtain--l::after { right: 4px; }
.am-scene-curtain--r::after { left: 4px; }

/* the card: an ivory gonjong window (the ridge with its two horns) rimmed in gold */
body.am-body .inv-intro--scene .inv-scene__card {
    top: 44%; height: auto; aspect-ratio: 100 / 125; padding: 3.4rem 1.3rem 1.6rem; border-radius: 0; isolation: isolate;
    -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--am-gold);
    -webkit-mask: var(--am-gonjong) center / 100% 100% no-repeat; mask: var(--am-gonjong) center / 100% 100% no-repeat;
}
body.am-body .inv-intro--scene .inv-scene__card::before,
body.am-body .inv-intro--scene .inv-scene__card::after {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    -webkit-mask: var(--am-gonjong) center / 100% 100% no-repeat; mask: var(--am-gonjong) center / 100% 100% no-repeat;
}
body.am-body .inv-intro--scene .inv-scene__card::before {
    inset: 4px;
    background:
        radial-gradient(80% 40% at 50% 30%, #fff, transparent 75%),
        linear-gradient(180deg, var(--am-paper), color-mix(in srgb, var(--inv-soft) 70%, var(--inv-background)));
}
body.am-body .inv-intro--scene .inv-scene__card::after {
    inset: 10px; background: var(--am-line);
    -webkit-mask: var(--am-gonjong) center / 100% 100% no-repeat, var(--am-gonjong) center / calc(100% - 2px) calc(100% - 2px) no-repeat;
    -webkit-mask-composite: xor;
    mask: var(--am-gonjong) center / 100% 100% no-repeat exclude, var(--am-gonjong) center / calc(100% - 2px) calc(100% - 2px) no-repeat;
}
body.am-body .inv-intro--scene .inv-scene__card .inv-intro__label { color: var(--am-gold-ink); font-family: var(--am-cinzel); font-size: .64rem; font-weight: 600; letter-spacing: .26em; }
body.am-body .inv-intro--scene .inv-scene__card .inv-intro__names {
    padding: 0 .1em; font-family: var(--am-serif) !important; font-style: italic; font-weight: 600; font-size: clamp(2.1rem, 9.6vw, 3rem); line-height: 1.12;
    color: var(--inv-primary);
}
body.am-body .inv-intro--scene .inv-scene__card .inv-intro__date { color: var(--inv-text); font-family: var(--am-cinzel); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; }
body.am-body .inv-intro--scene .inv-scene__card .inv-intro__rule { width: 4.2rem; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--am-marawa-black) 0 33.4%, var(--am-marawa-red) 33.4% 66.7%, var(--am-marawa-yellow) 66.7%); }
body.am-body .inv-intro--scene .inv-intro__skip { background: color-mix(in srgb, var(--inv-deep) 65%, transparent); color: var(--inv-shine); border-color: var(--am-line); }