/*
 * Template "Seserahan Nusantara" (Lamaran & Tunangan): a light Javanese / Sundanese adat engagement.
 * Warm cream paper, sogan brown + jade green (by default), brass gold and a brick accent. Signature pieces:
 * seserahan trays drawn as layered SVG (sections/_tray) that settle once on the cover, the couple photo in a
 * regol (joglo roof, jade wall, arched window with a kawung batik edge; sections/_regol), the arrival scene of
 * the two families through a roofed gate (sections/_gate), the wedding plan on a round brass tray over a
 * folded batik cloth, kawung bands on section edges and a faint truntum texture. Mobile-first, one column
 * (~460px) on a sogan backdrop on wide screens.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (sogan: titles, roofs, buttons)   --inv-second (jade: the second dark tone, the regol wall)
 *   --inv-accent (brass gold)   --inv-spot (brick: labels, plinth, coping)   --inv-background (cream)
 *   --inv-text   --inv-deep (darkest primary)   --inv-deep2 (darkest second)   --inv-shine (light brass on dark)
 * Everything else is mixed from those.
 *
 * Section tones (set on each section in its partial): .sn-tone--cream, --paper (a deeper cream), --sogan,
 * --jade, --brick. 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 tones & photo backgrounds · 3 shared pieces (heading, band, trays, regol, pill) ·
 *           4 cover · 5 sections in page order · 6 forms · 7 shared components · 8 screen sizes · 9 motion
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Sogan Giok" variant (the variant's colours override these) */
    --inv-primary: #6b4423;
    --inv-second: #2f5a4a;
    --inv-accent: #b8892f;
    --inv-spot: #c74d3b;
    --inv-background: #f6eedf;
    --inv-text: #2b1d12;
    --inv-deep: #3b2413;
    --inv-deep2: #1c3a2f;
    --inv-shine: #ecca7e;
    --inv-radius: 10px;

    --sn-serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
    --sn-script: 'Great Vibes', 'Segoe Script', cursive;
    --sn-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sn-col: 460px;
    --sn-paper: color-mix(in srgb, #fff 70%, var(--inv-background));
    --sn-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    --sn-on-dark: color-mix(in srgb, var(--inv-background) 86%, transparent);
    --sn-ink: color-mix(in srgb, var(--inv-accent) 62%, var(--inv-deep));
    --sn-line: color-mix(in srgb, var(--inv-accent) 55%, transparent);
    --sn-drop: 0 24px 40px -24px color-mix(in srgb, var(--inv-deep) 85%, transparent);
    /* polished brass, seen from above (tray rims, countdown plates) */
    --sn-metal: conic-gradient(from 210deg,
        var(--inv-shine), var(--inv-accent) 14%, color-mix(in srgb, var(--inv-accent) 62%, var(--inv-deep)) 28%,
        var(--inv-accent) 42%, color-mix(in srgb, var(--inv-shine) 70%, #fff) 54%, var(--inv-accent) 66%,
        color-mix(in srgb, var(--inv-accent) 66%, var(--inv-deep)) 82%, var(--inv-accent) 92%, var(--inv-shine));
    --sn-brass: linear-gradient(180deg, var(--inv-shine), var(--inv-accent) 55%, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-deep)));

    /* batik masks (they take any colour): kawung (four oval petals round a point), truntum (small star
       flowers of dots, the batik parents wear at a wedding), tumpal teeth */
    --sn-kawung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg transform='rotate(45 8 8)'%3E%3Cellipse cx='8' cy='3.5' rx='1.9' ry='3.1'/%3E%3Cellipse cx='8' cy='12.5' rx='1.9' ry='3.1'/%3E%3Cellipse cx='3.5' cy='8' rx='3.1' ry='1.9'/%3E%3Cellipse cx='12.5' cy='8' rx='3.1' ry='1.9'/%3E%3C/g%3E%3Ccircle cx='0' cy='0' r='1.2'/%3E%3Ccircle cx='16' cy='0' r='1.2'/%3E%3Ccircle cx='0' cy='16' r='1.2'/%3E%3Ccircle cx='16' cy='16' r='1.2'/%3E%3C/svg%3E");
    --sn-flower: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg transform='rotate(45 8 8)'%3E%3Cellipse cx='8' cy='3.6' rx='2' ry='3.3'/%3E%3Cellipse cx='8' cy='12.4' rx='2' ry='3.3'/%3E%3Cellipse cx='3.6' cy='8' rx='3.3' ry='2'/%3E%3Cellipse cx='12.4' cy='8' rx='3.3' ry='2'/%3E%3C/g%3E%3C/svg%3E");
    --sn-truntum: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg id='f' transform='translate(7 7)'%3E%3Ccircle r='.95'/%3E%3Ccircle cx='3.3' r='.75'/%3E%3Ccircle cx='-3.3' r='.75'/%3E%3Ccircle cy='3.3' r='.75'/%3E%3Ccircle cy='-3.3' r='.75'/%3E%3Ccircle cx='2.35' cy='2.35' r='.55'/%3E%3Ccircle cx='-2.35' cy='2.35' r='.55'/%3E%3Ccircle cx='2.35' cy='-2.35' r='.55'/%3E%3Ccircle cx='-2.35' cy='-2.35' r='.55'/%3E%3C/g%3E%3Cg transform='translate(21 21)'%3E%3Ccircle r='.95'/%3E%3Ccircle cx='3.3' r='.75'/%3E%3Ccircle cx='-3.3' r='.75'/%3E%3Ccircle cy='3.3' r='.75'/%3E%3Ccircle cy='-3.3' r='.75'/%3E%3Ccircle cx='2.35' cy='2.35' r='.55'/%3E%3Ccircle cx='-2.35' cy='2.35' r='.55'/%3E%3Ccircle cx='2.35' cy='-2.35' r='.55'/%3E%3Ccircle cx='-2.35' cy='-2.35' r='.55'/%3E%3C/g%3E%3C/svg%3E");
    --sn-tumpal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M0 0h12L6 7Z'/%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(--sn-sans);
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: var(--inv-primary); }
.sn-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

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

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

.sn-arabic { font-family: 'Amiri', 'Traditional Arabic', serif; line-height: 1.9; color: var(--inv-primary); }
.sn-amp { font-family: var(--sn-serif); font-style: italic; font-weight: 500; color: var(--sn-ink); }

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

/* cream: warm paper with a brass and a jade glow and the faint truntum texture */
.sn-tone--cream {
    background:
        radial-gradient(70% 28% at 100% 0%, color-mix(in srgb, var(--inv-accent) 16%, transparent), transparent 75%),
        radial-gradient(70% 28% at 0% 100%, color-mix(in srgb, var(--inv-second) 12%, transparent), transparent 75%),
        var(--inv-background);
}
/* paper: a deeper cream, where two light sections meet */
.sn-tone--paper {
    background:
        radial-gradient(80% 36% at 50% 0%, color-mix(in srgb, #fff 45%, transparent), transparent 75%),
        color-mix(in srgb, var(--inv-accent) 13%, var(--inv-background));
}
.sn-tone--cream::before, .sn-tone--paper::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-primary); opacity: .075;
    -webkit-mask: var(--sn-truntum) center top / 28px 28px repeat; mask: var(--sn-truntum) center top / 28px 28px repeat;
}

/* sogan and jade: the two dark bands (text in cream, headings in white + light brass) */
.sn-tone--sogan, .sn-tone--jade, .sn-tone--brick { color: var(--inv-background); }
.sn-tone--sogan {
    background:
        radial-gradient(110% 55% at 15% 0%, color-mix(in srgb, var(--inv-primary) 90%, #fff 6%), transparent 70%),
        radial-gradient(80% 50% at 100% 100%, color-mix(in srgb, var(--inv-spot) 20%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-primary), var(--inv-deep));
}
.sn-tone--jade {
    background:
        radial-gradient(110% 55% at 85% 0%, color-mix(in srgb, var(--inv-second) 88%, #fff 8%), transparent 70%),
        radial-gradient(80% 50% at 0% 100%, color-mix(in srgb, var(--inv-accent) 14%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-second), var(--inv-deep2));
}
.sn-tone--brick {
    background:
        radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, #fff 16%, transparent), transparent 70%),
        linear-gradient(170deg, var(--inv-spot), color-mix(in srgb, var(--inv-spot) 70%, var(--inv-deep)));
}
.sn-tone--sogan::before, .sn-tone--jade::before, .sn-tone--brick::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-shine); opacity: .08;
    -webkit-mask: var(--sn-truntum) center top / 28px 28px repeat; mask: var(--sn-truntum) center top / 28px 28px repeat;
}
.sn-tone--brick::before { background: #fff; opacity: .09; }
:is(.sn-tone--sogan, .sn-tone--jade, .sn-tone--brick) a:not(.inv-button) { color: var(--inv-shine); }
:is(.sn-tone--sogan, .sn-tone--jade) .sn-arabic { color: var(--inv-shine); }

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

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

/* section heading: a regional label between kawung flowers, a serif title, the last part italic */
.sn-heading { margin: 0 0 2.1rem; }
.sn-heading--left { text-align: left; }
.sn-heading__label {
    display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .5rem;
    font-family: var(--sn-serif); font-size: .84rem; font-weight: 700; line-height: 1.2; letter-spacing: .26em; text-transform: uppercase;
    color: var(--inv-spot);
}
.sn-heading__label::before, .sn-heading__label::after {
    content: ''; width: .72rem; height: .72rem; flex: none; background: var(--inv-accent);
    -webkit-mask: var(--sn-flower) center / contain no-repeat; mask: var(--sn-flower) center / contain no-repeat;
}
.sn-heading__title {
    margin: 0; font-family: var(--sn-serif); font-size: 2.6rem; font-weight: 600; line-height: 1.05; letter-spacing: -.005em;
    color: var(--inv-primary); text-wrap: balance;
}
.sn-heading__title em { font-style: italic; font-weight: 500; color: var(--inv-second); }
/* two hairlines with three cecek dots under the title */
.sn-heading__dots { display: flex; align-items: center; justify-content: center; gap: .35rem; margin-top: .8rem; }
.sn-heading__dots::before, .sn-heading__dots::after { content: ''; width: 2.2rem; height: 1px; background: var(--sn-line); }
.sn-heading__dots::before { margin-right: .25rem; }
.sn-heading__dots::after { margin-left: .25rem; }
.sn-heading__dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--inv-accent); }
.sn-heading__dots i:nth-child(2) { width: 6px; height: 6px; border-radius: 1px; transform: rotate(45deg); }
.sn-heading--left .sn-heading__dots { justify-content: flex-start; }
.sn-heading--left .sn-heading__dots::before { display: none; }

:is(.sn-tone--sogan, .sn-tone--jade, .sn-tone--brick) .sn-heading__label { color: var(--inv-shine); }
:is(.sn-tone--sogan, .sn-tone--jade, .sn-tone--brick) .sn-heading__title { color: #fff; }
:is(.sn-tone--sogan, .sn-tone--jade) .sn-heading__title em { color: var(--inv-shine); }
.sn-tone--brick .sn-heading__title em { color: color-mix(in srgb, var(--inv-shine) 70%, #fff); }
.sn-tone--brick .sn-heading__label::before, .sn-tone--brick .sn-heading__label::after,
.sn-tone--brick .sn-heading__dots i { background: var(--inv-shine); }
.sn-tone--brick .sn-heading__dots::before, .sn-tone--brick .sn-heading__dots::after { background: color-mix(in srgb, var(--inv-shine) 60%, transparent); }

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

/* batik band: a kawung strip between two brass lines with tumpal teeth under it */
.sn-band {
    --sn-band-bg: var(--inv-deep);
    position: absolute; left: 0; right: 0; z-index: 1; height: 25px; pointer-events: none;
    background:
        linear-gradient(var(--inv-accent), var(--inv-accent)) 0 2px / 100% 1px no-repeat,
        linear-gradient(var(--inv-accent), var(--inv-accent)) 0 15px / 100% 1px no-repeat,
        linear-gradient(var(--sn-band-bg), var(--sn-band-bg)) 0 0 / 100% 18px no-repeat;
}
.sn-band i { position: absolute; left: 0; right: 0; top: 4px; height: 10px; background: var(--inv-shine); -webkit-mask: var(--sn-kawung) center / 10px 10px repeat-x; mask: var(--sn-kawung) center / 10px 10px repeat-x; }
.sn-band::after {
    content: ''; position: absolute; left: 0; right: 0; top: 18px; height: 7px; background: var(--inv-accent);
    -webkit-mask: var(--sn-tumpal) center top / 12px 7px repeat-x; mask: var(--sn-tumpal) center top / 12px 7px repeat-x;
}
.sn-band--top { top: 0; }
.sn-band--bottom { bottom: 0; transform: scaleY(-1); }
.sn-tone--sogan .sn-band { --sn-band-bg: var(--inv-deep2); }

/* seserahan trays (sections/_tray, _trays): a row, the middle tray in front, the outer ones further back */
.sn-tray { display: block; overflow: visible; }
.sn-trays { display: flex; justify-content: center; align-items: flex-end; }
.sn-trays__tray { position: relative; flex: none; width: 23%; height: auto; margin: 0 -2.4%; }
.sn-trays__tray:nth-child(odd) { z-index: 2; }
.sn-trays__tray:nth-child(even) { z-index: 1; translate: 0 -11%; scale: .92; }
.sn-trays__tray:nth-child(3) { z-index: 3; width: 26%; }
.sn-trays__tray:nth-child(1):not(:last-child), .sn-trays__tray:nth-child(5) { translate: 0 -4%; scale: .95; }

/* the regol (sections/_regol): joglo roof, jade wall, arched window with a kawung edge, brick plinth */
.sn-regol {
    --regol-w: 12rem; --regol-pos: center 30%;
    --sn-arch: 50% 50% 6px 6px / 40% 40% 6px 6px;
    position: relative; display: flex; flex-direction: column; align-items: center; width: var(--regol-w); margin: 0; flex: none;
}
.sn-regol__roof {
    position: relative; z-index: 2; display: block; flex: none; width: calc(var(--regol-w) * 1.36); height: auto;
    margin-bottom: calc(var(--regol-w) * -.03); overflow: visible; filter: drop-shadow(0 6px 5px rgb(0 0 0 / .22));
}
.sn-regol__wall {
    position: relative; width: 100%; padding: calc(var(--regol-w) * .075) calc(var(--regol-w) * .07) calc(var(--regol-w) * .06);
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-second) 86%, #fff), var(--inv-second) 40%, var(--inv-deep2));
    box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--inv-second) 90%, #000), inset 0 0 0 5px var(--sn-line), 0 22px 30px -18px color-mix(in srgb, var(--inv-deep) 90%, transparent);
}
.sn-regol__wall::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--inv-shine); opacity: .14;
    -webkit-mask: var(--sn-truntum) center / 20px 20px repeat; mask: var(--sn-truntum) center / 20px 20px repeat;
}
.sn-regol__edge {
    position: relative; padding: calc(var(--regol-w) * .035); border-radius: var(--sn-arch);
    background: var(--inv-deep); box-shadow: 0 0 0 1px var(--inv-accent), 0 0 0 calc(var(--regol-w) * .012 + 1px) color-mix(in srgb, var(--inv-deep) 50%, transparent);
}
.sn-regol__edge::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: var(--inv-shine);
    -webkit-mask: var(--sn-kawung) center / calc(var(--regol-w) * .052) calc(var(--regol-w) * .052) repeat; mask: var(--sn-kawung) center / calc(var(--regol-w) * .052) calc(var(--regol-w) * .052) repeat;
}
.sn-regol__window {
    position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--sn-arch);
    background: linear-gradient(165deg, var(--inv-primary), var(--inv-deep2));
    box-shadow: 0 0 0 1px var(--inv-accent);
}
.sn-regol__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--regol-pos); }
.sn-regol__initials {
    position: absolute; inset: 0; display: grid; place-items: center; padding-top: 12%;
    font-family: var(--sn-script); font-size: calc(var(--regol-w) * .19); line-height: 1; white-space: nowrap; color: var(--inv-shine);
}
.sn-regol__initials::before {
    content: ''; position: absolute; inset: 0; background: var(--inv-shine); opacity: .1;
    -webkit-mask: var(--sn-kawung) center / 18px 18px repeat; mask: var(--sn-kawung) center / 18px 18px repeat;
}
.sn-regol__initials--one { font-size: calc(var(--regol-w) * .42); }
/* two brick steps (undhak) under the wall, with a brass line on top */
.sn-regol__plinth { position: relative; display: block; width: 112%; height: calc(var(--regol-w) * .045 + 2px); }
.sn-regol__plinth::before, .sn-regol__plinth::after { content: ''; position: absolute; left: 50%; translate: -50% 0; }
.sn-regol__plinth::before {
    top: 0; width: 100%; height: 55%;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-spot) 85%, #fff), var(--inv-spot));
    box-shadow: inset 0 1.5px 0 var(--inv-shine);
}
.sn-regol__plinth::after {
    top: 55%; width: 108%; height: 45%;
    background: linear-gradient(180deg, var(--inv-spot), color-mix(in srgb, var(--inv-spot) 60%, var(--inv-deep)));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--inv-shine) 70%, transparent), 0 8px 12px -6px rgb(0 0 0 / .4);
}

/* a small pill link (Instagram) */
.sn-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(--sn-line);
}
.sn-pill .sn-icon { width: 1rem; height: 1rem; color: var(--sn-ink); }

/* batik corners: a brass L with a kawung flower at the bend */
.sn-corner { position: absolute; width: 2.6rem; height: 2.6rem; pointer-events: none; border: 1.5px solid var(--inv-accent); }
.sn-corner::after {
    content: ''; position: absolute; width: .9rem; height: .9rem; background: var(--inv-shine);
    -webkit-mask: var(--sn-flower) center / contain no-repeat; mask: var(--sn-flower) center / contain no-repeat;
}
.sn-corner--tl { left: -6px; top: -6px; border-right: 0; border-bottom: 0; }
.sn-corner--tl::after { left: -.5rem; top: -.5rem; }
.sn-corner--br { right: -6px; bottom: -6px; border-left: 0; border-top: 0; }
.sn-corner--br::after { right: -.5rem; bottom: -.5rem; }

/* ---------- 4. cover ---------- */
.sn-cover {
    --regol-cover: min(74vw, 18.5rem, calc(var(--inv-screen, 100svh) * .33));
    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.2rem 1.4rem;
    isolation: isolate; color: var(--inv-text);
    background:
        radial-gradient(60% 34% at 50% 30%, color-mix(in srgb, var(--inv-shine) 30%, transparent), transparent 72%),
        radial-gradient(70% 30% at 100% 100%, color-mix(in srgb, var(--inv-second) 16%, transparent), transparent 75%),
        radial-gradient(70% 30% at 0% 100%, color-mix(in srgb, var(--inv-spot) 10%, transparent), transparent 75%),
        var(--inv-background);
    transition: opacity .9s ease;
}
.sn-cover::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .08; background: var(--inv-primary);
    -webkit-mask: var(--sn-truntum) center top / 28px 28px repeat; mask: var(--sn-truntum) center top / 28px 28px repeat;
}
.sn-cover > .sn-band { position: absolute; top: 0; }
.sn-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); }

.sn-cover__title {
    display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 .7rem;
    font-family: var(--sn-serif); font-size: .9rem; font-weight: 700; line-height: 1.2; letter-spacing: .38em; text-transform: uppercase; color: var(--inv-spot);
}
.sn-cover__title::before, .sn-cover__title::after {
    content: ''; width: .8rem; height: .8rem; background: var(--inv-accent);
    -webkit-mask: var(--sn-flower) center / contain no-repeat; mask: var(--sn-flower) center / contain no-repeat;
}

.sn-cover__art { position: relative; display: flex; flex-direction: column; align-items: center; }
.sn-regol--cover { --regol-w: var(--regol-cover); --regol-pos: center 30%; }
.sn-cover__trays { position: relative; z-index: 3; width: min(calc(var(--regol-cover) * 1.62), 100vw - 1.6rem); margin-top: calc(var(--regol-cover) * -.09); }

.sn-cover__names {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .28em; margin: .5rem 0 0;
    font-family: var(--sn-script); font-weight: 400; font-size: 2.9rem; line-height: 1.05; color: var(--inv-primary); overflow-wrap: anywhere;
}
.sn-cover__amp { font-family: var(--sn-serif); font-style: italic; font-weight: 500; font-size: .62em; color: var(--sn-ink); }
.sn-cover__date {
    display: inline-flex; align-items: center; gap: .7rem; margin: .15rem 0 0;
    font-family: var(--sn-serif); font-size: .88rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--inv-second);
}
.sn-cover__date::before, .sn-cover__date::after { content: ''; width: 1.5rem; height: 1px; background: var(--inv-accent); }
.sn-cover__quote {
    max-width: 34ch; margin: .35rem 0 0; font-family: var(--sn-serif); font-style: italic; font-weight: 500;
    font-size: .96rem; line-height: 1.28; color: var(--sn-muted);
}
.sn-cover__guest {
    position: relative; width: min(100%, 19rem); margin: .6rem 0 0; padding: .4rem 1rem .45rem; border-radius: 4px; background: color-mix(in srgb, #fff 78%, transparent);
    box-shadow: inset 0 0 0 1px var(--sn-line), inset 0 0 0 4px color-mix(in srgb, #fff 78%, transparent), inset 0 0 0 5px color-mix(in srgb, var(--inv-accent) 25%, transparent), 0 10px 22px -16px color-mix(in srgb, var(--inv-deep) 60%, transparent);
}
.sn-cover__guest p { margin: 0; font-size: .62rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-spot); }
.sn-cover__guest-name { display: block; font-family: var(--sn-serif); font-size: 1.18rem; font-weight: 700; line-height: 1.2; color: var(--inv-text); overflow-wrap: anywhere; }
.sn-cover__open {
    margin-top: .7rem; min-height: 2.8rem; padding: .62rem 2rem; border-radius: 8px; font-weight: 600; letter-spacing: .06em;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 88%, #fff), var(--inv-deep)); color: #fff;
    box-shadow: 0 0 0 3px var(--inv-background), 0 0 0 4px var(--inv-accent), 0 14px 24px -12px color-mix(in srgb, var(--inv-primary) 80%, transparent);
}

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

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

/* opening: label, basmalah, greeting, message; the verse on a jade panel with batik corners */
.sn-opening { padding: 4.4rem 1.6rem 5.6rem; }
.sn-opening__label {
    display: inline-flex !important; align-items: center; gap: .55rem; margin-bottom: 1rem !important;
    font-family: var(--sn-serif); font-size: .84rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--inv-shine);
}
.sn-opening__label::before, .sn-opening__label::after {
    content: ''; width: .72rem; height: .72rem; background: var(--inv-accent);
    -webkit-mask: var(--sn-flower) center / contain no-repeat; mask: var(--sn-flower) center / contain no-repeat;
}
.sn-opening__basmalah { margin: 0 auto .5rem !important; font-size: 1.85rem; }
.sn-opening__greeting { max-width: 22ch !important; font-family: var(--sn-serif); font-size: 1.65rem; font-weight: 500; font-style: italic; line-height: 1.25; color: #fff; }
.sn-opening__message { max-width: 30ch !important; color: var(--sn-on-dark); }
.sn-opening__quote {
    position: relative; max-width: 23rem; margin: 2.2rem auto 0; padding: 1.7rem 1.4rem 1.5rem; border-radius: 3px;
    background: color-mix(in srgb, var(--inv-deep2) 72%, transparent); backdrop-filter: blur(3px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-shine) 22%, transparent), var(--sn-drop);
}
.sn-opening__quote p { margin: 0; font-family: var(--sn-serif); font-style: italic; font-size: 1.16rem; font-weight: 500; line-height: 1.5; color: #fff; }
.sn-opening__quote cite {
    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(--sn-brass);
}

/* couple: two asymmetric rows (arched portrait with a colour block behind it), a script "&" between */
.sn-person { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.3rem; text-align: left; }
.sn-person--flip { grid-template-columns: minmax(0, 1fr) auto; text-align: right; }
.sn-person--flip .sn-person__media { order: 2; }
.sn-person__media { position: relative; padding: 0 0 .4rem; }
.sn-person__media::before {
    content: ''; position: absolute; left: -1.4rem; right: 1.2rem; top: 18%; bottom: -.6rem; z-index: -1; border-radius: 0 6px 6px 0;
    background: linear-gradient(160deg, color-mix(in srgb, var(--inv-second) 30%, var(--inv-background)), color-mix(in srgb, var(--inv-second) 16%, var(--inv-background)));
}
.sn-person--flip .sn-person__media::before { left: 1.2rem; right: -1.4rem; border-radius: 6px 0 0 6px; background: linear-gradient(200deg, color-mix(in srgb, var(--inv-spot) 24%, var(--inv-background)), color-mix(in srgb, var(--inv-accent) 18%, var(--inv-background))); }
.sn-regol--person { --regol-w: min(9.4rem, 40vw); --regol-pos: center 25%; }
.sn-regol--person .sn-regol__wall, .sn-regol--story .sn-regol__wall { border-radius: 50% 50% 4px 4px / 36% 36% 4px 4px; }
.sn-regol--person .sn-regol__wall::before, .sn-regol--story .sn-regol__wall::before { border-radius: inherit; }
.sn-person__label { margin: 0; font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-spot); }
.sn-person__nickname { margin: .15rem 0 0; font-family: var(--sn-script); font-size: 3.1rem; line-height: 1.05; color: var(--inv-primary); overflow-wrap: anywhere; }
.sn-person__name { margin: .2rem 0 0; font-family: var(--sn-serif); font-size: 1.22rem; font-weight: 700; line-height: 1.2; color: var(--inv-text); overflow-wrap: anywhere; }
.sn-person__parents { margin: .5rem 0 .7rem; font-size: .84rem; line-height: 1.45; color: var(--sn-muted); }
.sn-person__parents span:first-child { display: block; }
.sn-person__parents strong { font-weight: 600; color: var(--inv-text); }
.sn-person__parents .sn-amp { padding: 0 .2em; }
.sn-couple__amp { display: flex !important; align-items: center; gap: .8rem; max-width: none !important; margin: 1.4rem 0 1.8rem !important; }
.sn-couple__amp::before, .sn-couple__amp::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--sn-line)); }
.sn-couple__amp::after { background: linear-gradient(90deg, var(--sn-line), transparent); }
.sn-couple__amp span { font-family: var(--sn-script); font-size: 3rem; line-height: 1; color: var(--sn-ink); }

/* families: the intent, then the arrival scene (proposer card, the gate with trays walking in, host card) */
.sn-families { padding-bottom: 4.2rem; }
.sn-families__intent {
    position: relative; max-width: 30ch !important; margin-bottom: 2rem !important; padding-top: 1.6rem; font-family: var(--sn-serif); font-style: italic; font-weight: 500;
    font-size: 1.3rem; line-height: 1.45; color: #fff;
}
.sn-families__intent::before { content: '\201C'; position: absolute; left: 50%; top: -.9rem; translate: -50% 0; font-size: 3.6rem; line-height: 1; color: var(--inv-shine); }
.sn-families__scene { position: relative; display: flex; flex-direction: column; }
.sn-family {
    position: relative; z-index: 2; width: 84%; align-self: flex-start; padding: 1.2rem 1.25rem 1.2rem; border-radius: 4px; text-align: left;
    color: var(--inv-text); background: var(--sn-paper);
    box-shadow: inset 0 0 0 5px var(--sn-paper), inset 0 0 0 6px var(--sn-line), 0 24px 40px -22px rgb(0 0 0 / .7);
}
.sn-family--host { align-self: flex-end; text-align: right; }
.sn-family__label {
    display: inline-block; margin: 0; padding: .22rem .75rem; border-radius: 999px; font-size: .62rem; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; color: #fff; background: var(--inv-spot);
}
.sn-family--host .sn-family__label { color: var(--inv-deep); background: var(--sn-brass); }
.sn-family__who { margin: .65rem 0 0; font-family: var(--sn-script); font-size: 1.75rem; line-height: 1.05; color: var(--inv-second); }
.sn-family__name { margin: .15rem 0 0; font-family: var(--sn-serif); font-size: 1.45rem; font-weight: 700; line-height: 1.15; color: var(--inv-primary); text-wrap: balance; }
.sn-family__detail { display: flex; align-items: flex-start; gap: .5rem; margin: .65rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--sn-muted); }
.sn-family--host .sn-family__detail { flex-direction: row-reverse; }
.sn-family__detail .sn-icon { margin-top: .12rem; color: var(--inv-spot); }
/* the arrival: the gate drawing, trays as HTML over it */
.sn-gate { position: relative; z-index: 1; aspect-ratio: 320 / 160; margin: .3rem -1.4rem -.2rem; }
.sn-gate__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sn-gate__trays { position: absolute; inset: 0; }
.sn-gate__tray { position: absolute; height: auto; filter: drop-shadow(0 4px 4px rgb(0 0 0 / .25)); }
.sn-gate__tray--1 { left: 9%; top: 60%; width: 15%; }
.sn-gate__tray--2 { left: 23%; top: 61%; width: 15%; }
.sn-gate__tray--3 { left: 43.6%; top: 62%; width: 13%; }

/* events: a white card, the photo under an arch with a kawung strip, a jade / sogan date block */
.sn-event + .sn-event { margin-top: 2.4rem; }
.sn-event {
    padding: .55rem .55rem 1.3rem; border-radius: 6px; background: #fff; text-align: left;
    box-shadow: inset 0 0 0 1px var(--sn-line), 0 22px 40px -26px color-mix(in srgb, var(--inv-deep) 75%, transparent);
}
.sn-event__media { position: relative; padding-bottom: 12px; }
.sn-event__photo { display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: center 45%; border-radius: 50% 50% 0 0 / 26% 26% 0 0; }
.sn-event__media::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 12px;
    background:
        linear-gradient(var(--inv-accent), var(--inv-accent)) 0 0 / 100% 1px no-repeat,
        linear-gradient(var(--inv-accent), var(--inv-accent)) 0 100% / 100% 1px no-repeat,
        var(--inv-deep);
}
.sn-event__media::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 8px; z-index: 1; background: var(--inv-shine);
    -webkit-mask: var(--sn-kawung) center / 8px 8px repeat-x; mask: var(--sn-kawung) center / 8px 8px repeat-x;
}
.sn-event__top { display: flex; align-items: center; gap: .95rem; padding: 1.1rem .7rem 0; }
.sn-event--flip .sn-event__top { flex-direction: row-reverse; text-align: right; }
.sn-event__date {
    position: relative; display: flex; flex-direction: column; align-items: center; flex: none; width: 4.7rem; margin: 0; padding: .7rem .2rem .6rem;
    border-radius: 4px; color: var(--inv-shine); background: linear-gradient(170deg, color-mix(in srgb, var(--inv-second) 85%, #fff), var(--inv-deep2));
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--inv-deep2) 60%, transparent), inset 0 0 0 4px var(--sn-line), 0 12px 20px -10px color-mix(in srgb, var(--inv-deep) 80%, transparent);
}
.sn-event--flip .sn-event__date { background: linear-gradient(170deg, color-mix(in srgb, var(--inv-primary) 85%, #fff), var(--inv-deep)); }
.sn-event__weekday { font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sn-event__day { font-family: var(--sn-serif); font-size: 2.5rem; font-weight: 700; line-height: 1; color: #fff; }
.sn-event__month { font-size: .6rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.sn-event__head { min-width: 0; }
.sn-event__name { margin: 0; font-family: var(--sn-serif); font-size: 1.7rem; font-weight: 700; line-height: 1.08; color: var(--inv-primary); }
.sn-event__full { margin: .25rem 0 0; font-size: .82rem; color: var(--sn-muted); }
.sn-event__rows { display: grid; gap: .75rem; margin: 1.1rem .7rem 0; padding: 1rem 0 0; list-style: none; font-size: .9rem; border-top: 1px dashed var(--sn-line); }
.sn-event__rows li { display: flex; align-items: flex-start; gap: .7rem; }
.sn-event__rows .sn-icon { width: 2.1rem; height: 2.1rem; padding: .45rem; border-radius: 50%; color: var(--inv-second); background: color-mix(in srgb, var(--inv-second) 12%, #fff); }
.sn-event__rows li > span { padding-top: .3rem; }
.sn-event__venue { display: block; font-weight: 600; }
.sn-event__address { display: block; font-size: .85rem; color: var(--sn-muted); }
.sn-event .inv-maps { margin: 1.15rem .7rem 0; text-align: center; }
.sn-event .inv-maps .inv-button { width: 100%; font-weight: 600; }
.sn-event .inv-maps__frame { height: 190px; border-radius: 6px; }

/* countdown: small round brass trays seen from above with cream centres; the calendar below the buttons */
.sn-countdown .inv-countdown { gap: clamp(.45rem, 2.4vw, .8rem); }
.sn-countdown .inv-countdown__item {
    position: relative; display: grid; place-content: center; width: clamp(4.1rem, 19vw, 4.8rem); min-width: 0; aspect-ratio: 1; padding: 0;
    border-radius: 50%; color: var(--inv-text);
    background: radial-gradient(circle, var(--sn-paper) 0 60%, color-mix(in srgb, var(--inv-accent) 50%, var(--inv-deep)) 61% 63%, transparent 64%), var(--sn-metal);
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 55%, var(--inv-deep)), 0 18px 26px -12px rgb(0 0 0 / .6);
}
.sn-countdown .inv-countdown__item::before { content: ''; position: absolute; inset: 7%; border-radius: 50%; border: 1.6px dotted color-mix(in srgb, var(--inv-shine) 70%, #fff); pointer-events: none; }
.sn-countdown .inv-countdown__value { font-variant-numeric: lining-nums tabular-nums; font-family: var(--sn-serif); font-size: 1.85rem; font-weight: 700; line-height: 1; color: var(--inv-primary); }
.sn-countdown .inv-countdown__label { margin-top: .05rem; font-size: .52rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sn-muted); }
.sn-countdown .inv-countdown__done { font-family: var(--sn-serif); font-size: 1.4rem; font-style: italic; color: var(--inv-shine); }
.sn-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 2.1rem; }
.sn-countdown .inv-countdown__actions .inv-button {
    width: min(100%, 17rem); min-height: 2.75rem; padding: .6rem 1rem; font-size: .84rem; font-weight: 600;
    color: var(--inv-background); background: color-mix(in srgb, var(--inv-background) 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 70%, transparent);
}
.sn-countdown .inv-countdown__actions .inv-button:first-child { color: var(--inv-deep); background: var(--sn-brass); box-shadow: none; }
.sn-countdown .inv-cal {
    --inv-cal-bg: var(--sn-paper); --inv-cal-mark: var(--inv-spot);
    max-width: 19rem; margin: 2.8rem auto 0; border-radius: 6px;
    box-shadow: inset 0 0 0 5px var(--sn-paper), inset 0 0 0 6px var(--sn-line), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.sn-countdown .inv-cal__month { font-family: var(--sn-serif); font-size: 1.55rem; font-weight: 600; font-style: italic; color: var(--inv-primary); }

/* wedding plan: a round brass tray over a folded batik cloth, the planned date set big on it */
.sn-plan { padding-bottom: 4rem; }
.sn-plan__stage { position: relative; width: min(20rem, 86vw); aspect-ratio: 1; margin: 2.2rem auto 0; }
.sn-plan__cloth {
    position: absolute; left: 13%; top: 13%; width: 74%; aspect-ratio: 1; rotate: 45deg; border-radius: 3px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--inv-primary) 85%, #fff), var(--inv-deep));
    box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--inv-deep) 50%, transparent), inset 0 0 0 6px var(--inv-accent), 0 18px 30px -16px rgb(0 0 0 / .5);
}
.sn-plan__cloth::before {
    content: ''; position: absolute; inset: 9px; background: var(--inv-shine); opacity: .55;
    -webkit-mask: var(--sn-kawung) center / 14px 14px repeat; mask: var(--sn-kawung) center / 14px 14px repeat;
}
.sn-plan__tray {
    position: absolute; inset: 9%; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15%;
    border-radius: 50%;
    background:
        radial-gradient(circle, transparent 0 65%, color-mix(in srgb, var(--inv-accent) 45%, var(--inv-deep)) 65.5% 67%, transparent 67.5%),
        radial-gradient(circle, var(--sn-paper) 0 67%, transparent 67.5%),
        var(--sn-metal);
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 50%, var(--inv-deep)), 0 26px 36px -20px rgb(0 0 0 / .7);
}
.sn-plan__tray::before { content: ''; position: absolute; inset: 5%; border-radius: 50%; border: 2px dotted color-mix(in srgb, var(--inv-shine) 75%, #fff); pointer-events: none; }
.sn-plan__tray::after {
    content: ''; position: absolute; inset: 16%; z-index: -1; border-radius: 50%; background: var(--inv-primary); opacity: .07;
    -webkit-mask: var(--sn-truntum) center / 24px 24px repeat; mask: var(--sn-truntum) center / 24px 24px repeat;
}
.sn-plan__tray { isolation: isolate; }
.sn-plan__steps { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: 0 0 .5rem; }
.sn-plan__steps span { display: flex; white-space: nowrap; flex-direction: column; font-family: var(--sn-serif); font-size: .95rem; font-weight: 700; line-height: 1.1; color: var(--inv-primary); }
.sn-plan__steps small { font-family: var(--sn-sans); font-size: .54rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sn-muted); }
.sn-plan__steps i { width: 1.6rem; height: 2px; background: radial-gradient(circle, var(--sn-ink) 1px, transparent 1.3px) left center / 5px 2px repeat-x; }
.sn-plan__date {
    margin: 0; font-family: var(--sn-serif); font-style: italic; font-size: 2.55rem; font-weight: 600; line-height: 1; letter-spacing: -.01em;
    color: var(--inv-primary); text-wrap: balance; overflow-wrap: anywhere;
}
.sn-plan__city { display: inline-flex; align-items: center; gap: .35rem; margin: .65rem 0 0; padding: .25rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: #fff; background: var(--inv-second); }
.sn-plan__city .sn-icon { width: .95rem; height: .95rem; }
.sn-plan__note { max-width: 28ch !important; margin: 1.6rem auto 0 !important; font-family: var(--sn-serif); font-style: italic; font-size: 1.18rem; line-height: 1.45; color: var(--sn-muted); }

/* rundown: the trays settle, then a fine brass line with kawung flowers, times in serif numerals */
.sn-rundown__trays { width: min(22rem, 100%); margin: -1rem auto 1.2rem; }
.sn-rundown__list { position: relative; margin: 0; padding: 0; list-style: none; text-align: left; }
.sn-rundown__list::before {
    content: ''; position: absolute; left: 4.55rem; top: .9rem; bottom: .9rem; width: 1px; transform-origin: top;
    background: linear-gradient(180deg, transparent, var(--inv-accent) 6%, var(--inv-accent) 94%, transparent);
}
.sn-rundown__item { position: relative; display: grid; grid-template-columns: 3.6rem 1.9rem minmax(0, 1fr); align-items: start; padding: 0 0 1.25rem; }
.sn-rundown__item:last-child { padding-bottom: 0; }
.sn-rundown__time { padding-top: .05rem; font-family: var(--sn-serif); font-size: 1.45rem; font-weight: 700; line-height: 1.1; text-align: right; font-variant-numeric: lining-nums tabular-nums; color: var(--inv-shine); }
.sn-rundown__mark {
    justify-self: center; width: 1.05rem; height: 1.05rem; margin-top: .4rem; background: var(--inv-shine);
    -webkit-mask: var(--sn-flower) center / contain no-repeat; mask: var(--sn-flower) center / contain no-repeat;
}
.sn-rundown__body h3 { margin: .2rem 0 0; font-size: .98rem; font-weight: 500; line-height: 1.4; color: #fff; }
.sn-rundown__body p { margin: .15rem 0 0; font-size: .85rem; color: var(--sn-on-dark); }

/* love story: arched photos with a colour block, alternating; text-only chapters as jade cards */
.sn-story__list { position: relative; display: grid; gap: 2.4rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.sn-story__item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.2rem; }
.sn-story__item--flip { grid-template-columns: minmax(0, 1fr) auto; text-align: right; }
.sn-story__item--flip .sn-story__media { order: 2; }
.sn-story__media { position: relative; }
.sn-story__media::before { content: ''; position: absolute; inset: 22% -.7rem -.6rem .9rem; z-index: -1; border-radius: 4px; background: color-mix(in srgb, var(--inv-accent) 24%, var(--inv-background)); }
.sn-story__item--flip .sn-story__media::before { inset: 22% .9rem -.6rem -.7rem; background: color-mix(in srgb, var(--inv-second) 22%, var(--inv-background)); }
.sn-regol--story { --regol-w: min(8.2rem, 35vw); --regol-pos: center 35%; }
.sn-story__when {
    display: inline-block; padding: .2rem .75rem; border-radius: 999px; font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: #fff; background: var(--inv-spot);
}
.sn-story__body h3 { margin: .45rem 0 0; font-family: var(--sn-serif); font-style: italic; font-size: 1.6rem; font-weight: 600; line-height: 1.1; color: var(--inv-primary); }
.sn-story__body p { margin: .35rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--sn-muted); }
.sn-story__item--text {
    grid-template-columns: 2.6rem minmax(0, 1fr); align-items: start; gap: .9rem; padding: 1.15rem 1.2rem; border-radius: 6px; text-align: left;
    color: var(--inv-background); background: linear-gradient(160deg, var(--inv-second), var(--inv-deep2)); box-shadow: var(--sn-drop);
}
.sn-story__item--text .sn-story__body h3 { color: #fff; }
.sn-story__item--text .sn-story__body p { color: var(--sn-on-dark); }
.sn-story__number {
    display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; font-family: var(--sn-serif); font-size: 1.35rem; font-weight: 700;
    color: var(--inv-deep); background: var(--sn-brass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-shine) 35%, transparent);
}

/* gallery: the first photo wide with an arched top, the others with a thin brass line */
.sn-gallery { padding-top: 5rem; }
.sn-gallery .inv-gallery { gap: .6rem; }
.sn-gallery .inv-gallery__item { border-radius: 4px; 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); }
.sn-gallery .inv-gallery__item:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3.4; border-radius: 50% 50% 4px 4px / 30% 30% 4px 4px; }

/* live streaming: a sogan card with a kawung strip on its left edge */
.sn-stream__card {
    position: relative; 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.4rem 1.4rem 1.4rem 2.1rem; border-radius: 6px; color: var(--inv-background); text-align: left;
    background: linear-gradient(160deg, color-mix(in srgb, var(--inv-primary) 90%, #fff), var(--inv-deep)); box-shadow: var(--sn-drop);
}
.sn-stream__card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: var(--inv-deep2); box-shadow: 1px 0 0 var(--inv-accent); }
.sn-stream__card::after {
    content: ''; position: absolute; left: 2px; top: 0; bottom: 0; width: 8px; background: var(--inv-shine);
    -webkit-mask: var(--sn-kawung) center top / 8px 8px repeat-y; mask: var(--sn-kawung) center top / 8px 8px repeat-y;
}
.sn-stream__icon { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; color: var(--inv-deep); background: var(--sn-brass); }
.sn-stream__icon .sn-icon { width: 1.7rem; height: 1.7rem; }
.sn-stream__title { margin: 0 0 .15rem; font-family: var(--sn-serif); font-size: 1.75rem; font-weight: 600; line-height: 1.05; color: #fff; }
.sn-stream__title em { color: var(--inv-shine); }
.sn-stream__text p { margin: 0; font-size: .86rem; color: var(--sn-on-dark); }
.sn-stream__text .sn-stream__note { margin-top: .3rem; font-weight: 600; color: var(--inv-shine); }
.sn-stream__button { grid-column: 1 / -1; min-height: 2.75rem; color: var(--inv-deep) !important; background: var(--sn-brass) !important; font-weight: 600; }

/* RSVP card: cream with a kawung strip on top */
.sn-rsvp__card {
    position: relative; overflow: hidden; padding: 2.2rem 1.15rem 1.4rem; border-radius: 6px; color: var(--inv-text); background: var(--sn-paper);
    box-shadow: inset 0 0 0 6px var(--sn-paper), inset 0 0 0 7px var(--sn-line), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.sn-rsvp__card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 13px; background: var(--inv-deep); box-shadow: 0 1px 0 var(--inv-accent); }
.sn-rsvp__card::after {
    content: ''; position: absolute; left: 0; right: 0; top: 2px; height: 9px; background: var(--inv-shine);
    -webkit-mask: var(--sn-kawung) center / 9px 9px repeat-x; mask: var(--sn-kawung) center / 9px 9px repeat-x;
}
.sn-rsvp__intro { margin: 0 auto 1.1rem; max-width: 30ch; font-size: .9rem; color: var(--sn-muted); }
.sn-rsvp__sent { margin-bottom: 1rem; }
.sn-rsvp__check { display: block; width: 4.4rem; height: 4.4rem; margin: 0 auto .5rem; overflow: visible; }
.sn-rsvp__check-ring { fill: none; stroke: var(--inv-accent); stroke-width: 3; stroke-dasharray: 1 4; stroke-linecap: round; }
.sn-rsvp__check-disc { fill: var(--inv-second); }
.sn-rsvp__check path { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
html.inv-anim .sn-rsvp__sent .sn-rsvp__check { animation: sn-pop .8s cubic-bezier(.34, 1.56, .64, 1) both; }
html.inv-anim .sn-rsvp__sent .sn-rsvp__check path { animation: sn-draw .45s ease-out .35s both; }
.sn-rsvp__thanks { margin: 0; font-family: var(--sn-serif); font-style: italic; font-size: 1.9rem; font-weight: 600; color: var(--inv-primary); }
.sn-rsvp__line { margin: .1rem 0 0; font-size: .9rem; color: var(--sn-muted); }
.sn-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .84rem; font-weight: 600; color: var(--inv-spot); }

/* gift: cream cards with a kawung batik header strip, two per row */
.sn-gift__intro { color: var(--sn-on-dark); }
.sn-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.3rem; }
.sn-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sn-gift .inv-gift__account,
.sn-gift .inv-gift__address {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; margin: 0; overflow: hidden;
    padding: 1.7rem .75rem 1rem; border-radius: 6px; color: var(--inv-text); background: var(--sn-paper);
    box-shadow: 0 18px 30px -20px rgb(0 0 0 / .6);
}
.sn-gift .inv-gift__account::before, .sn-gift .inv-gift__address::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--inv-deep2); box-shadow: 0 1px 0 var(--inv-accent); }
.sn-gift .inv-gift__account::after, .sn-gift .inv-gift__address::after {
    content: ''; position: absolute; left: 0; right: 0; top: 2px; height: 8px; background: var(--inv-shine);
    -webkit-mask: var(--sn-kawung) center / 8px 8px repeat-x; mask: var(--sn-kawung) center / 8px 8px repeat-x;
}
.sn-gift .inv-gift__account p, .sn-gift .inv-gift__address p { margin: 0; }
.sn-gift .inv-gift__bank { font-weight: 700; font-size: .85rem; color: var(--inv-primary); }
.sn-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .4rem; background: #fff; }
.sn-gift .inv-gift__logo img { max-width: 5rem; }
.sn-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);
}
.sn-gift .inv-gift__holder { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sn-muted); overflow-wrap: anywhere; }
.sn-gift .inv-button { margin-top: .35rem; min-height: 2.25rem; padding: .35rem .9rem; font-size: .74rem; font-weight: 600; }
.sn-gift .inv-gift__address { margin-top: .75rem; font-size: .875rem; }
.sn-gift .inv-gift__address .inv-gift__holder { font-size: .72rem; }

/* co-hosts: the names in the serif, one per line, split by kawung flowers, on the brick band */
.sn-cohosts__list { display: flex; flex-direction: column; align-items: center; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.sn-cohosts__list li { max-width: 26ch; font-family: var(--sn-serif); font-size: 1.35rem; font-weight: 700; line-height: 1.25; color: #fff; }
.sn-cohosts__list li + li::before {
    content: ''; display: block; width: .8rem; height: .8rem; margin: 0 auto .55rem; background: var(--inv-shine);
    -webkit-mask: var(--sn-flower) center / contain no-repeat; mask: var(--sn-flower) center / contain no-repeat;
}

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

/* health protocol: white chips */
.sn-protocol__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.sn-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(--sn-line);
}
.sn-protocol__list .sn-icon { width: 1rem; height: 1rem; color: var(--inv-second); }
.sn-protocol__note { font-size: .88rem; color: var(--sn-muted); }

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

/* closing: the full photo fading into sogan, trays on the fade, the thanks and the names */
.sn-closing { padding: 3.1rem 1.6rem 2rem; }
.sn-closing--photo { padding-top: 0; padding-bottom: 1.6rem; min-height: var(--inv-screen, 100svh); }
.sn-closing__photo {
    position: relative; z-index: -1; height: min(96vw, calc(var(--inv-screen, 100svh) * .38), 24rem); margin: 0 -1.6rem; overflow: hidden;
    /* the foot of the photo melts into the sogan, without an edge */
    -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%);
}
.sn-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 18%; --inv-parallax: 30px; }
.sn-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 15%, transparent), transparent 22%, transparent 42%, color-mix(in srgb, var(--inv-deep) 62%, transparent) 70%, var(--inv-deep) 97%);
}
.sn-tone--sogan.sn-closing { background: linear-gradient(180deg, var(--inv-deep), color-mix(in srgb, var(--inv-primary) 70%, var(--inv-deep)) 60%, var(--inv-deep)); }
.sn-closing__body { position: relative; }
.sn-closing--photo .sn-closing__body { margin-top: -3.6rem; }
.sn-closing__trays { width: min(8rem, 42%); margin: 0 auto .4rem; }
.sn-closing__trays .sn-trays__tray { width: 34%; margin: 0 -2.2%; }
.sn-closing__trays .sn-trays__tray:nth-child(2) { width: 38%; z-index: 3; translate: none; scale: none; }
.sn-closing__trays .sn-trays__tray:nth-child(odd) { z-index: 1; translate: 0 -7%; scale: .92; }
.sn-closing__label { margin: 0 0 .3rem !important; font-family: var(--sn-serif); font-size: .84rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-shine); }
.sn-closing__title { margin: 0 0 .5rem; font-family: var(--sn-serif); font-size: clamp(1.9rem, 8.5vw, 2.4rem); font-weight: 600; line-height: 1; color: #fff; }
.sn-closing__title em { font-style: italic; font-weight: 500; color: var(--inv-shine); }
.sn-closing__message { margin: 0 auto; max-width: 32ch; font-size: .92rem; line-height: 1.6; color: var(--sn-on-dark); }
.sn-closing__salam { margin: .55rem auto 0; max-width: 32ch; font-family: var(--sn-serif); font-size: 1.08rem; font-style: italic; font-weight: 500; line-height: 1.3; color: var(--inv-shine); }
.sn-closing__signature { margin: .5rem auto 0; max-width: 30ch; font-size: .86rem; color: var(--sn-on-dark); }
.sn-closing__names { margin: .6rem 0 0; font-family: var(--sn-script); font-size: clamp(2.1rem, 9.5vw, 2.6rem); line-height: 1.1; color: #fff; }
.sn-closing__names .sn-amp { font-size: .6em; color: var(--inv-shine); }
.sn-closing__monogram {
    display: inline-flex; align-items: center; gap: .45rem; margin: .6rem 0 0; padding: .28rem .9rem; border-radius: 999px;
    font-family: var(--sn-serif); font-size: .92rem; font-weight: 700; letter-spacing: .14em; color: var(--inv-shine);
    box-shadow: inset 0 0 0 1px var(--sn-line);
}
.sn-closing__monogram i {
    width: .7rem; height: .7rem; background: var(--inv-accent);
    -webkit-mask: var(--sn-flower) center / contain no-repeat; mask: var(--sn-flower) center / contain no-repeat;
}

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

/* the three answers as cards with icons (the radio dot is hidden but still focusable) */
.sn-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.sn-rsvp .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.sn-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: 6px; cursor: pointer; text-align: center;
    font-size: .84rem; font-weight: 600; line-height: 1.2; color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 22%, transparent);
    transition: background-color .25s ease, color .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.sn-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sn-rsvp .inv-form__choices label::before {
    content: ''; width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--inv-accent) 14%, #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;
}
.sn-rsvp .inv-form__choices label::after {
    content: ''; position: absolute; left: 50%; top: 1.3rem; width: 1.2rem; height: 1.2rem; margin-left: -.6rem;
    background: currentColor; color: var(--inv-primary); pointer-events: none;
    -webkit-mask: var(--sn-choice-icon) center / contain no-repeat; mask: var(--sn-choice-icon) center / contain no-repeat;
}
.sn-rsvp .inv-form__choices label:nth-of-type(1) {
    --sn-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");
}
.sn-rsvp .inv-form__choices label:nth-of-type(2) {
    --sn-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");
}
.sn-rsvp .inv-form__choices label:nth-of-type(3) {
    --sn-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");
}
.sn-rsvp .inv-form__choices label:has(input:checked) {
    color: #fff; background: linear-gradient(180deg, var(--inv-second), var(--inv-deep2)); transform: translateY(-3px);
    box-shadow: 0 0 0 2px var(--inv-accent), 0 12px 24px -12px color-mix(in srgb, var(--inv-second) 80%, transparent);
}
.sn-rsvp .inv-form__choices label:has(input:checked)::before { background-color: rgb(255 255 255 / .14); transform: scale(1.1); }
.sn-rsvp .inv-form__choices label:has(input:checked)::after { color: #fff; }
.sn-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 jade offset block, the wishes in a scroll box of about three */
.sn-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.sn-wishes .inv-form {
    margin-right: 8px; padding: 1.3rem 1.1rem; border-radius: 6px; background: #fff;
    box-shadow: inset 0 0 0 1px var(--sn-line), 8px 8px 0 0 var(--inv-second);
}
.sn-wishes .inv-wishes__list { margin-top: 1.4rem; }
.sn-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .55rem; border-radius: 6px; background: color-mix(in srgb, #fff 45%, transparent); box-shadow: inset 0 0 0 1px var(--sn-line);
}
.sn-wishes .inv-wish { padding: .75rem .9rem; border-radius: 4px; background: #fff; text-align: left; box-shadow: 0 2px 10px rgb(0 0 0 / .05); border-left: 3px solid var(--inv-accent); }
.sn-wishes .inv-wish__name { font-weight: 700; color: var(--inv-primary); }
.sn-wishes .inv-wish__message { font-size: .88rem; line-height: 1.5; }
.sn-wishes .inv-wish__time { font-size: .72rem; color: var(--sn-muted); }

/* ---------- 7. shared components ---------- */
.sn-main .inv-button { font-weight: 600; }
.sn-main .sn-tone--cream .inv-button:not(.inv-button--outline), .sn-main .sn-tone--paper .inv-button:not(.inv-button--outline) { background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 88%, #fff), var(--inv-deep)); color: #fff; }
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(--sn-sans);
}

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

/* short phones: the cover art and type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .sn-cover { --regol-cover: min(68vw, 16.5rem, calc(var(--inv-screen, 100svh) * .275)); padding-top: 1.8rem; padding-bottom: 1.2rem; }
    .sn-cover__title { margin-bottom: .55rem; }
    .sn-cover__names { font-size: 2.65rem; }
    .sn-cover__quote { font-size: .92rem; }
    .sn-cover__guest { margin-top: .55rem; }
    .sn-cover__open { margin-top: .6rem; }
}
@media (max-height: 660px) {
    .sn-cover { --regol-cover: min(60vw, calc(var(--inv-screen, 100svh) * .25)); padding-top: 1.6rem; padding-bottom: 1rem; }
    .sn-cover__title { margin-bottom: .45rem; font-size: .8rem; }
    .sn-cover__names { margin-top: .3rem; font-size: 2.6rem; }
    .sn-cover__date { margin-top: .15rem; font-size: .9rem; }
    .sn-cover__quote { margin-top: .4rem; font-size: .92rem; line-height: 1.28; }
    .sn-cover__guest { margin-top: .6rem; padding: .4rem .85rem .45rem; }
    .sn-cover__guest-name { font-size: 1.16rem; }
    .sn-cover__open { min-height: 2.75rem; padding: .6rem 1.8rem; }
}
/* very short screens (in-app browsers): a smaller regol and quote, so everything fits */
@media (max-height: 600px) {
    .sn-cover { --regol-cover: min(50vw, calc(var(--inv-screen, 100svh) * .23)); padding-top: 1.5rem; }
    .sn-cover__names { font-size: 2.35rem; }
    .sn-cover__quote { font-size: .86rem; }
}

/* wide screens: the phone-width column on a sogan backdrop with the truntum texture */
@media (min-width: 560px) {
    body.sn-body { background: linear-gradient(180deg, var(--inv-primary), var(--inv-deep)); background-attachment: fixed; }
    body.sn-body::before {
        content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .1; background: var(--inv-shine);
        -webkit-mask: var(--sn-truntum) center / 28px 28px repeat; mask: var(--sn-truntum) center / 28px 28px repeat;
    }
    .sn-main { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
}

/* ---------- 9. motion ---------- */
@keyframes sn-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sn-pop { 0% { transform: scale(0); } 55% { transform: scale(1.12); } 75% { transform: scale(.95); } 100% { transform: scale(1); } }
@keyframes sn-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes sn-zoom-out { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes sn-settle { 0% { opacity: 0; transform: translateY(-22px); } 65% { opacity: 1; transform: translateY(2px); } 100% { opacity: 1; transform: none; } }
@keyframes sn-walk { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
@keyframes sn-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* cover (≤ 2.5 s, once): the regol rises in and its photo settles from a slight zoom (0–1.1 s); the trays
   settle onto the floor one by one (0.65–2.3 s); the text follows through its inv-enter delays */
html.inv-anim .sn-regol--cover { animation: sn-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .sn-regol--cover .sn-regol__photo { animation: sn-zoom-out 1.1s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .sn-cover__trays .sn-trays__tray { animation: sn-settle .6s cubic-bezier(.3, .7, .3, 1) calc(.65s + var(--i, 0) * .26s) both; }

/* in the page: trays settle (rundown, closing) or walk in through the gate (families) once, when revealed */
html.inv-anim .sn-trays--settle .sn-trays__tray { opacity: 0; }
html.inv-anim .sn-trays--settle.is-revealed .sn-trays__tray,
html.inv-anim .is-revealed .sn-trays--settle .sn-trays__tray { animation: sn-settle .6s cubic-bezier(.3, .7, .3, 1) calc(.2s + var(--i, 0) * .2s) both; }
html.inv-anim .sn-gate__tray { opacity: 0; }
html.inv-anim .is-revealed .sn-gate__tray { animation: sn-walk .9s cubic-bezier(.25, .7, .3, 1) calc(.35s + var(--i, 0) * .25s) both; }

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

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

/* ---------- intro scene "Rombongan Seserahan Tiba" (scene.json, sections/_scene): from under the pendapa eave,
   between two saka pillars hung with ronce melati, the seserahan trays are carried one by one out of the gate
   of the bride's house onto the batik mat; then the card. The intro is moved to <body>, so only body-level
   selectors reach it. ---------- */
.sn-scene-ground { position: absolute; inset: 0; background:
    radial-gradient(60% 34% at 50% 66%, color-mix(in srgb, var(--inv-shine) 34%, transparent), transparent 75%),
    radial-gradient(90% 40% at 50% 0%, color-mix(in srgb, var(--inv-spot) 22%, transparent), transparent 70%),
    linear-gradient(180deg, var(--inv-deep2), var(--inv-deep) 45%, var(--inv-primary)); }
.sn-scene-ground::before { content: ''; position: absolute; inset: 0; opacity: .1; background: var(--inv-shine);
    -webkit-mask: var(--sn-truntum) center / 28px 28px repeat; mask: var(--sn-truntum) center / 28px 28px repeat; }
.sn-scene-gate { display: flex; justify-content: center; align-items: flex-end; width: 100%; height: 100%; }
.sn-scene-gate .sn-gate { height: 100%; width: auto; margin: 0; flex: none; }
.sn-scene-gate .sn-gate__trays { display: none; }
.sn-scene-floor { position: relative; height: 100%; box-shadow: 0 -10px 24px -8px rgb(0 0 0 / .45); background:
    radial-gradient(70% 60% at 50% 0%, color-mix(in srgb, #fff 30%, transparent), transparent 70%),
    color-mix(in srgb, var(--inv-accent) 20%, var(--inv-background)); }
.sn-scene-floor::before { content: ''; position: absolute; inset: 0; opacity: .12; background: var(--inv-primary);
    -webkit-mask: var(--sn-truntum) center top / 24px 24px repeat; mask: var(--sn-truntum) center top / 24px 24px repeat; }
.sn-scene-floor::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background:
    linear-gradient(var(--inv-accent), var(--inv-accent)) 0 1px / 100% 1px no-repeat,
    linear-gradient(var(--inv-accent), var(--inv-accent)) 0 12px / 100% 1px no-repeat, var(--inv-second); }
.sn-scene-floor i { position: absolute; left: 0; right: 0; top: 3px; z-index: 1; height: 8px; background: var(--inv-shine);
    -webkit-mask: var(--sn-kawung) center / 8px 8px repeat-x; mask: var(--sn-kawung) center / 8px 8px repeat-x; }
.sn-scene-eave { position: relative; height: 100%; filter: drop-shadow(0 8px 10px rgb(0 0 0 / .45)); background:
    linear-gradient(var(--inv-accent), var(--inv-accent)) 0 calc(100% - 21px) / 100% 1px no-repeat,
    linear-gradient(var(--inv-accent), var(--inv-accent)) 0 calc(100% - 8px) / 100% 1px no-repeat,
    linear-gradient(var(--inv-deep), var(--inv-deep)) 0 100% / 100% 22px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 13px, color-mix(in srgb, var(--inv-shine) 22%, transparent) 13px 14px),
    linear-gradient(180deg, var(--inv-deep), var(--inv-primary)) 0 0 / 100% calc(100% - 26px) no-repeat,
    var(--sn-brass) 0 calc(100% - 22px) / 100% 4px no-repeat; }
.sn-scene-eave i { position: absolute; left: 0; right: 0; bottom: 9px; height: 10px; background: var(--inv-shine);
    -webkit-mask: var(--sn-kawung) center / 10px 10px repeat-x; mask: var(--sn-kawung) center / 10px 10px repeat-x; }
.sn-scene-eave::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 9px; background: var(--sn-brass);
    -webkit-mask: var(--sn-tumpal) center top / 12px 9px repeat-x; mask: var(--sn-tumpal) center top / 12px 9px repeat-x; }
.sn-scene-saka { position: relative; height: 100%; box-shadow: 0 0 18px rgb(0 0 0 / .5); background:
    linear-gradient(90deg, var(--inv-deep), color-mix(in srgb, var(--inv-primary) 80%, #fff 8%) 40%, var(--inv-primary) 60%, var(--inv-deep)); }
.sn-scene-saka::before { content: ''; position: absolute; left: -2px; right: -2px; top: 16%; height: 10px; background: var(--sn-brass); }
.sn-scene-saka::after { content: ''; position: absolute; left: -16%; right: -16%; bottom: 0; height: 4.5%; border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, var(--inv-spot), color-mix(in srgb, var(--inv-spot) 60%, var(--inv-deep))); box-shadow: inset 0 3px 0 var(--inv-accent); }
.sn-scene-melati { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 3px rgb(0 0 0 / .35)); }
.sn-scene-tray { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 6px rgb(0 0 0 / .3)); }

/* the card: cream paper between two kawung bands, rimmed in brass */
body.sn-body .inv-intro--scene .inv-scene__card {
    top: 40%; aspect-ratio: auto; min-height: 15rem; padding: 2.6rem 1.3rem 2.4rem; border-radius: 4px; isolation: isolate; overflow: hidden;
    -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    background: radial-gradient(90% 50% at 50% 40%, #fff, transparent 80%), color-mix(in srgb, var(--inv-accent) 8%, var(--inv-background));
    box-shadow: inset 0 0 0 3px var(--inv-accent), inset 0 0 0 5px var(--inv-background), inset 0 0 0 6px var(--sn-line), 0 24px 40px -16px rgb(0 0 0 / .6);
}
body.sn-body .inv-intro--scene .inv-scene__card::before,
body.sn-body .inv-intro--scene .inv-scene__card::after {
    content: ''; position: absolute; left: 3px; right: 3px; z-index: -1; height: 18px; background:
        linear-gradient(var(--inv-accent), var(--inv-accent)) 0 2px / 100% 1px no-repeat,
        linear-gradient(var(--inv-accent), var(--inv-accent)) 0 15px / 100% 1px no-repeat, var(--inv-primary);
}
body.sn-body .inv-intro--scene .inv-scene__card::before { top: 3px; }
body.sn-body .inv-intro--scene .inv-scene__card::after { bottom: 3px; }
body.sn-body .inv-intro--scene .inv-scene__card .inv-intro__label {
    padding-top: .3rem; color: var(--inv-spot); font-family: var(--sn-serif); font-size: .74rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }
body.sn-body .inv-intro--scene .inv-scene__card .inv-intro__names { color: var(--inv-primary); font-size: clamp(2.2rem, 10vw, 3.1rem); line-height: 1.18; }
body.sn-body .inv-intro--scene .inv-scene__card .inv-intro__date { color: var(--inv-text); font-family: var(--sn-serif); font-size: .9rem; font-weight: 600; letter-spacing: .14em; }
body.sn-body .inv-intro--scene .inv-scene__card .inv-intro__rule { width: 4.6rem; height: 10px; background: var(--inv-accent);
    -webkit-mask: var(--sn-kawung) center / 10px 10px repeat-x; mask: var(--sn-kawung) center / 10px 10px repeat-x; }
body.sn-body .inv-intro--scene .inv-intro__skip { background: color-mix(in srgb, var(--inv-deep) 65%, transparent); color: var(--inv-shine); border-color: var(--sn-line); }
/* short screens: a smaller card, so the gate roof stays in view under it */
@media (min-aspect-ratio: 1 / 2) {
    body.sn-body .inv-intro--scene .inv-scene__card { top: 37%; min-height: 12.5rem; padding: 2.2rem 1.1rem 2rem; }
    body.sn-body .inv-intro--scene .inv-scene__card .inv-intro__names { font-size: clamp(2rem, 9vw, 2.6rem); }
}