/*
 * Template "Signature Siger Pasundan" — Sundanese elegance: deep green, rich gold and a warm accent. Mobile-first.
 * Colors from the chosen variant: --inv-primary (deep green/teal/brown/purple), --inv-accent (gold),
 * --inv-secondary (warm accent for small labels), --inv-background (warm ivory), --inv-text.
 * Fonts from the client's choice: --inv-font-display (names) and --inv-font-heading (titles), set by <x-inv.head>;
 * body text in Mulish.
 * Ornaments: the siger crown (inline SVG crest, drawn by stroke), mega mendung clouds (inline SVG symbol,
 * img/mega.svg and the faint img/mega-tile.svg texture on dark sections), bamboo stalks (img/awi.svg).
 * Motion: the cover siger draws once; sections rise in (shared reveal "up"); one touch per section:
 * the gold rule under each title grows, photos are uncovered by a soft wipe, frames slide to their offset,
 * countdown tiles turn in. Everything is off with "reduce motion" (html.inv-anim is not set then).
 */

:root {
    --sp-display: var(--inv-font-display, 'Great Vibes', cursive);
    --sp-heading: var(--inv-font-heading, 'Cormorant Garamond', Georgia, serif);
    --sp-sans: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sp-warm: var(--inv-secondary, #a8512a);
    --sp-ivory: color-mix(in srgb, var(--inv-background) 55%, #fff);
    --sp-sand: color-mix(in srgb, var(--inv-background) 84%, var(--inv-accent));
    --sp-deep: color-mix(in srgb, var(--inv-primary) 74%, #000);
    --sp-on-dark: color-mix(in srgb, var(--inv-background) 85%, #fff);
    --sp-soft-dark: color-mix(in srgb, var(--sp-on-dark) 84%, transparent);
    --sp-gold: color-mix(in srgb, var(--inv-accent) 58%, var(--inv-text));
    --sp-gold-lt: color-mix(in srgb, var(--inv-accent) 78%, #fff3cf);
    --sp-line: color-mix(in srgb, var(--inv-accent) 60%, transparent);
    --sp-line-dark: color-mix(in srgb, var(--inv-accent) 45%, transparent);
    --sp-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    /* layered gold, gems, hanjuang leaves, kujang and mega mendung layers (used by the SVG sprite) */
    --sp-g-hi: color-mix(in srgb, var(--inv-accent) 40%, #fff6da);
    --sp-g-mid: var(--inv-accent);
    --sp-g-lo: color-mix(in srgb, var(--inv-accent) 58%, #3b2408);
    --sp-gem: color-mix(in srgb, var(--sp-warm) 88%, #ff6a4a);
    --sp-gem-lo: color-mix(in srgb, var(--sp-warm) 55%, #000);
    --sp-leaf-lo: color-mix(in srgb, var(--inv-primary) 55%, #5f8f3e);
    --sp-leaf-mid: color-mix(in srgb, var(--sp-warm) 70%, var(--inv-primary));
    --sp-leaf-hi: color-mix(in srgb, var(--sp-warm) 72%, #f0a27c);
    --sp-leaf-rib: color-mix(in srgb, var(--inv-accent) 65%, transparent);
    --sp-kj-hole: color-mix(in srgb, var(--inv-primary) 70%, #000);
    --sp-kj-handle: color-mix(in srgb, var(--sp-warm) 50%, #2a1408);
    --sp-mm-1: var(--inv-primary);
    --sp-mm-2: color-mix(in srgb, var(--inv-primary) 74%, var(--inv-background));
    --sp-mm-3: color-mix(in srgb, var(--inv-primary) 48%, var(--inv-background));
    --sp-mm-4: color-mix(in srgb, var(--inv-accent) 55%, var(--inv-background));
    --sp-mm-5: var(--sp-ivory);
    --sp-mm-line: color-mix(in srgb, var(--inv-accent) 85%, transparent);
    --sp-column: 460px;
    --sp-cloud-fill: transparent;
    --inv-radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }

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

img { max-width: 100%; display: block; }
p { margin: 0 0 .75rem; }

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

.sp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- ornaments ---------- */

/* mega mendung: layered cloud outlines */
.sp-cloud {
    display: block; overflow: visible; pointer-events: none;
    fill: var(--sp-cloud-fill); stroke: var(--inv-accent);
}

/* bamboo stalks (mask, so the color follows the variant) */
.sp-awi {
    display: block; pointer-events: none; background: var(--inv-accent);
    -webkit-mask: url('../img/awi.svg') no-repeat center bottom / contain;
    mask: url('../img/awi.svg') no-repeat center bottom / contain;
}

/* the siger crest */
.sp-siger { display: block; overflow: visible; color: var(--inv-accent); }

@keyframes sp-draw { to { stroke-dashoffset: 0; } }
@keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } }

/* drawn line by line: on the cover right away, elsewhere when its wrapper scrolls into view */
html.inv-anim .sp-siger--cover .sp-siger__lines path,
html.inv-anim .sp-siger--draw .sp-siger__lines path { stroke-dasharray: 1 2; stroke-dashoffset: 1.01; }
html.inv-anim .sp-siger--cover .sp-siger__dots, html.inv-anim .sp-siger--cover .sp-siger__fill, html.inv-anim .sp-siger--cover .sp-siger__pins,
html.inv-anim .sp-siger--draw .sp-siger__dots, html.inv-anim .sp-siger--draw .sp-siger__fill, html.inv-anim .sp-siger--draw .sp-siger__pins { opacity: 0; }

html.inv-anim .sp-siger--cover .sp-siger__lines path,
html.inv-anim .is-revealed > .sp-siger--draw .sp-siger__lines path { animation: sp-draw 1.4s cubic-bezier(.55, 0, .3, 1) forwards; }
html.inv-anim .sp-siger--cover .sp-siger__fill,
html.inv-anim .is-revealed > .sp-siger--draw .sp-siger__fill { animation: sp-fade .7s ease 1.55s forwards; }
html.inv-anim .sp-siger--cover .sp-siger__dots,
html.inv-anim .is-revealed > .sp-siger--draw .sp-siger__dots,
html.inv-anim .sp-siger--cover .sp-siger__pins,
html.inv-anim .is-revealed > .sp-siger--draw .sp-siger__pins { animation: sp-fade .5s ease 1.8s forwards; }

/* the kembang goyang flowers shimmer gently, each on its own beat */
@keyframes sp-shimmer { from { scale: .92; rotate: -6deg; opacity: .82; } to { scale: 1.1; rotate: 6deg; opacity: 1; } }
html.inv-anim .sp-pin { animation: sp-shimmer 3.2s ease-in-out infinite alternate; }
html.inv-anim .sp-pin:nth-child(2) { animation-delay: -1.1s; }
html.inv-anim .sp-pin:nth-child(3) { animation-delay: -2.2s; animation-duration: 3.8s; }
html.inv-anim .sp-pin:nth-child(4) { animation-delay: -.6s; animation-duration: 3.8s; }
html.inv-anim .sp-pin:nth-child(5) { animation-delay: -1.7s; animation-duration: 4.2s; }
.sp-siger { filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--sp-g-lo) 45%, transparent)); }

/* mega mendung batik border along the top edge of a dark section: the clouds rise into the section above */
.sp-mmband { display: block; pointer-events: none; }
.sp-edge { position: absolute; z-index: 1; left: 0; top: -56px; width: 100%; height: 58px; }
html.inv-anim .sp-edge[data-reveal] { transform: none; }

/* filled mega mendung used as an accent */
.sp-mm { display: block; overflow: visible; pointer-events: none; }

/* hanjuang sprigs sway gently from their base */
@keyframes sp-sway { from { rotate: -2.5deg; } to { rotate: 2.5deg; } }
.sp-hanjuang { position: absolute; z-index: 0; display: block; overflow: visible; pointer-events: none; transform-origin: 50% 100%; }
html.inv-anim .sp-hanjuang { animation: sp-sway 6.5s ease-in-out infinite alternate; }
.sp-side-leaf { top: 2.2rem; width: 62px; height: 134px; opacity: .9; }
.sp-side-leaf--left { left: -10px; }
.sp-side-leaf--right { right: -10px; scale: -1 1; }

/* the kujang */
.sp-kujang { display: block; overflow: visible; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .3)); }

/* photo-gradient sections: a client photo under a strong veil of the primary color (gradient without a photo) */
.sp-bgphoto__clip { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
html.inv-anim .sp-bgphoto__clip[data-reveal] { opacity: 1; transform: none; }
.sp-bgphoto__img { position: absolute; inset: -44px 0; --inv-parallax: 34px; }
.sp-bgphoto__clip::after {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, var(--inv-primary) 0%, color-mix(in srgb, var(--inv-primary) 78%, transparent) 32%,
            color-mix(in srgb, var(--sp-deep) 74%, transparent) 70%, var(--sp-deep) 100%);
}

/* the peak first, then the band, then the crests outwards */
.sp-siger__lines path:nth-child(1) { animation-delay: .35s !important; }
.sp-siger__lines path:nth-child(2) { animation-delay: .45s !important; }
.sp-siger__lines path:nth-child(3) { animation-delay: .55s !important; }
.sp-siger__lines path:nth-child(4) { animation-delay: .1s !important; }
.sp-siger__lines path:nth-child(5) { animation-delay: .25s !important; }
.sp-siger__lines path:nth-child(6) { animation-delay: .5s !important; }
.sp-siger__lines path:nth-child(7) { animation-delay: .4s !important; }
.sp-siger__lines path:nth-child(8) { animation-delay: .6s !important; }
.sp-siger__lines path:nth-child(9) { animation-delay: .7s !important; }
.sp-siger__lines path:nth-child(10) { animation-delay: .2s !important; }
.sp-siger__lines path:nth-child(11) { animation-delay: .8s !important; }

/* photos uncovered from the top by a soft-edged wipe when their block scrolls into view */
html.inv-anim .sp-wipe {
    -webkit-mask: linear-gradient(180deg, #000 44%, transparent 56%) 0 100% / 100% 250% no-repeat;
    mask: linear-gradient(180deg, #000 44%, transparent 56%) 0 100% / 100% 250% no-repeat;
    transition: -webkit-mask-position 1.6s cubic-bezier(.3, .6, .2, 1) .15s, mask-position 1.6s cubic-bezier(.3, .6, .2, 1) .15s;
}
html.inv-anim .is-revealed .sp-wipe { -webkit-mask-position: 0 0; mask-position: 0 0; }

/* ---------- shared pieces ---------- */

/* the couple's photo, or a soft gradient of the variant without one */
.sp-photo {
    background-color: var(--inv-primary);
    background-image: var(--sp-photo, linear-gradient(165deg, color-mix(in srgb, var(--inv-accent) 60%, var(--inv-background)), var(--inv-primary)));
    background-size: cover; background-position: center;
}

.sp-display { font-family: var(--sp-display); font-weight: 400; line-height: 1.15; }
.sp-display span { font-size: .6em; color: var(--inv-accent); }

.sp-eyebrow {
    margin: 0 0 .7rem;
    font-family: var(--sp-sans); font-weight: 700; font-size: .68rem; letter-spacing: .34em; text-transform: uppercase;
    color: var(--sp-warm);
}

.sp-title {
    position: relative; margin: 0 0 2.5rem; padding-bottom: 1.25rem;
    font-family: var(--sp-heading); font-weight: 500; font-size: 2.4rem; line-height: 1.1; letter-spacing: .01em;
    color: var(--inv-primary);
}
/* gold rule with a diamond; it grows from the center when the title scrolls into view */
.sp-title::after {
    content: ''; position: absolute; left: 50%; bottom: 0; width: 168px; height: 12px; margin-left: -84px;
    background: var(--inv-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 12'%3E%3Cdefs%3E%3ClinearGradient id='l'%3E%3Cstop offset='0' stop-opacity='0'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='r'%3E%3Cstop offset='0'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 5.4h70v1.2H0z' fill='url(%23l)'/%3E%3Cpath d='M98 5.4h70v1.2H98z' fill='url(%23r)'/%3E%3Cpath d='M84 0l6 6-6 6-6-6z'/%3E%3Ccircle cx='74' cy='6' r='1.6'/%3E%3Ccircle cx='94' cy='6' r='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 12'%3E%3Cdefs%3E%3ClinearGradient id='l'%3E%3Cstop offset='0' stop-opacity='0'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='r'%3E%3Cstop offset='0'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 5.4h70v1.2H0z' fill='url(%23l)'/%3E%3Cpath d='M98 5.4h70v1.2H98z' fill='url(%23r)'/%3E%3Cpath d='M84 0l6 6-6 6-6-6z'/%3E%3Ccircle cx='74' cy='6' r='1.6'/%3E%3Ccircle cx='94' cy='6' r='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
}
html.inv-anim .sp-title::after { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1) .35s; }
html.inv-anim .sp-title.is-revealed::after { transform: none; }
.sp-title--light { color: var(--sp-on-dark); }
.sp-lead { font-size: 1rem; }
.sp-muted { color: var(--sp-muted); font-size: .92rem; }

.sp-icon-link {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: .35rem; padding: .4rem .95rem;
    border: 1px solid var(--sp-line); border-radius: 999px; color: var(--inv-primary);
    font-size: .78rem; font-weight: 600; text-decoration: none;
    transition: background-color .3s ease, color .3s ease;
}
.sp-icon-link:hover { background: var(--inv-primary); color: var(--sp-on-dark); }

/* buttons of the shared components */
.inv-button {
    padding: .8rem 1.5rem; border-radius: 999px;
    background: var(--inv-primary); color: var(--sp-on-dark);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 60%, transparent);
    font-family: var(--sp-sans); font-weight: 700; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
}
.inv-button--outline { background: transparent; color: var(--inv-primary); box-shadow: inset 0 0 0 1px var(--inv-primary); }

/* ---------- wide-screen backdrop & side panels (hidden on phones) ---------- */

.sp-backdrop, .sp-side { display: none; }

/* ---------- cover: a deep green gate with the gold siger crest ---------- */

.sp-cover {
    position: fixed; inset: 0; z-index: 30; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    text-align: center; color: var(--sp-on-dark);
}
.sp-cover__half {
    position: absolute; top: 0; bottom: 0; width: 50.5%; overflow: hidden; isolation: isolate;
    background:
        radial-gradient(120% 50% at 100% 30%, color-mix(in srgb, var(--inv-accent) 24%, transparent), transparent 64%),
        linear-gradient(180deg, var(--inv-primary), var(--sp-deep));
    transition: transform 1.5s cubic-bezier(.7, 0, .25, 1);
}
.sp-cover__half--left { left: 0; box-shadow: inset -1px 0 0 color-mix(in srgb, var(--inv-accent) 20%, transparent); }
.sp-cover__half--right {
    right: 0;
    background:
        radial-gradient(120% 50% at 0% 30%, color-mix(in srgb, var(--inv-accent) 24%, transparent), transparent 64%),
        linear-gradient(180deg, var(--inv-primary), var(--sp-deep));
}
/* faint mega mendung texture */
.sp-cover__half::before {
    content: ''; position: absolute; inset: 0; z-index: -1; background: var(--inv-accent); opacity: .07;
    -webkit-mask: url('../img/mega-tile.svg') 0 0 / 132px 92px repeat;
    mask: url('../img/mega-tile.svg') 0 0 / 132px 92px repeat;
}
.sp-cover__half--right::before { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
/* the border's layers on the deep cover: a gold-leaning core */
.sp-cover { --sp-mm-1: var(--sp-deep); --sp-mm-2: color-mix(in srgb, var(--inv-primary) 80%, var(--inv-accent)); --sp-mm-3: color-mix(in srgb, var(--inv-primary) 45%, var(--inv-accent)); --sp-mm-4: var(--inv-accent); --sp-mm-5: var(--sp-g-hi); }
/* the mega mendung border at the foot: each half shows its own half of one full-width border */
.sp-cover__band { position: absolute; bottom: 0; left: 0; width: 200%; height: 58px; }
.sp-cover__half--right .sp-cover__band { left: auto; right: 0; }
/* a hanjuang sprig beside the crest on each side */
.sp-cover__leaf { top: 13%; left: -12px; width: calc(25svh * .46); height: 25svh; max-width: 92px; max-height: 200px; }
.sp-cover__half--right .sp-cover__leaf { left: auto; right: -12px; scale: -1 1; }

.sp-cover__inner {
    position: relative; z-index: 1; width: 100%; max-height: 100%; overflow-y: auto;
    display: flex; flex-direction: column; align-items: center;
    padding: 2rem 1.75rem 2.25rem;
    transition: opacity .7s ease, transform 1s ease;
}
.sp-cover__eyebrow { margin-bottom: .2rem; color: var(--sp-gold-lt); }

/* the siger rests on the top of the arch photo; sizes follow the arch height */
.sp-cover__crest {
    --sp-arch-h: clamp(140px, 31svh, 270px);
    position: relative; width: calc(var(--sp-arch-h) * .74); padding-top: calc(var(--sp-arch-h) * .43);
    margin: 0 auto 1.5rem;
}
.sp-cover__crest .sp-siger {
    position: absolute; z-index: 2; left: 50%; top: 0; width: 126%; translate: -50% 0;
    color: var(--sp-gold-lt); filter: drop-shadow(0 4px 10px rgb(0 0 0 / .35));
}
.sp-cover__arch { position: relative; height: var(--sp-arch-h); }
.sp-cover__photo, .sp-cover__frame { position: absolute; inset: 0; border-radius: 999px 999px 12px 12px; }
.sp-cover__photo { box-shadow: 0 0 0 4px color-mix(in srgb, var(--inv-accent) 85%, #fff), 0 26px 50px -18px rgb(0 0 0 / .6); }
/* a gold hairline set off down and to the right */
.sp-cover__frame { border: 1px solid color-mix(in srgb, var(--inv-accent) 70%, transparent); transform: translate(11px, 11px); }

.sp-cover__names { margin: 0 0 .35rem; font-size: 3.3rem; color: #fffaf0; }
.sp-cover__names span { color: var(--sp-gold-lt); }
.sp-cover__date {
    display: flex; align-items: center; justify-content: center; gap: .8rem; margin: 0 0 1.25rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--sp-gold-lt);
}
.sp-cover__date::before, .sp-cover__date::after { content: ''; width: 26px; height: 1px; background: var(--sp-line); }
.sp-cover__guest {
    width: min(100%, 300px); margin-bottom: 1.35rem; padding: .7rem 0 .75rem;
    border-top: 1px solid var(--sp-line-dark); border-bottom: 1px solid var(--sp-line-dark);
}
.sp-cover__guest p { margin: 0 0 .15rem; font-size: .64rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sp-gold-lt); }
.sp-cover__guest-name { display: block; font-family: var(--sp-heading); font-weight: 500; font-size: 1.35rem; line-height: 1.3; color: var(--sp-on-dark); }
.sp-open.inv-open-button {
    padding: .9rem 1.8rem; border-radius: 999px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 70%, #fff6dc), var(--inv-accent));
    color: var(--sp-deep); box-shadow: 0 12px 26px -10px rgb(0 0 0 / .55);
    font-family: var(--sp-sans); font-weight: 700; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
}

/* "Buka Undangan": content fades, the halves slide apart */
.sp-cover--leave { transition: visibility 1.5s; }
.sp-cover--gone { visibility: hidden; }
.sp-cover--gone .sp-cover__half--left { transform: translateX(-101%); }
.sp-cover--gone .sp-cover__half--right { transform: translateX(101%); }
.sp-cover--gone .sp-cover__inner { opacity: 0; transform: scale(.96); }

/* ---------- hero: siger over the monogram, then a full-width photo band ---------- */

.sp-hero {
    position: relative; overflow: hidden; padding: 3.4rem 1.6rem 3.6rem; text-align: center;
    background: radial-gradient(85% 38% at 50% 0%, color-mix(in srgb, var(--inv-accent) 20%, transparent), transparent 70%), var(--sp-ivory);
}
.sp-hero--photo { padding-bottom: 0; }
.sp-hero__leaf { top: 2.4rem; width: 78px; height: 170px; }
.sp-hero__leaf--left { left: -16px; }
.sp-hero__leaf--right { right: -16px; scale: -1 1; }
.sp-hero > :not(.sp-hero__leaf) { position: relative; z-index: 1; }
.sp-hero__crown { position: relative; z-index: 1; width: 220px; margin: .4rem auto -16px; color: var(--inv-accent); }
.sp-monogram {
    display: flex; align-items: center; justify-content: center; gap: .65rem;
    width: 132px; height: 132px; margin: 0 auto 1.4rem; border-radius: 50%;
    font-family: var(--sp-heading); font-weight: 500; font-size: 2.4rem; line-height: 1; color: var(--sp-gold-lt);
    background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--inv-primary) 86%, #fff), var(--inv-primary) 70%);
    box-shadow: inset 0 0 0 1px var(--sp-line), inset 0 0 0 5px var(--inv-primary), inset 0 0 0 6px var(--sp-line-dark), 0 18px 36px -18px color-mix(in srgb, var(--inv-primary) 80%, transparent);
}
.sp-monogram__dot { width: 6px; height: 6px; background: var(--inv-accent); rotate: 45deg; }
.sp-hero__names { margin: 0 0 .4rem; font-size: 3.2rem; color: var(--inv-primary); }
.sp-hero__date { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .42em; color: var(--sp-warm); }
.sp-hero__band { position: relative; margin: 2.75rem -1.6rem 0; }
.sp-hero__photo { aspect-ratio: 390 / 450; border-radius: 50% 50% 0 0 / 14% 14% 0 0; }
/* the band melts into the dark opening below; a gold hairline arch rides above it */
.sp-hero__band::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: linear-gradient(180deg, transparent 55%, var(--inv-primary));
}
.sp-hero__band::before {
    content: ''; position: absolute; z-index: 1; left: 14px; right: 14px; top: -11px; height: 40%; pointer-events: none;
    border: 1px solid var(--sp-line); border-bottom: 0; border-radius: 50% 50% 0 0 / 34% 34% 0 0;
}

/* ---------- sections ---------- */

/* side ornaments may hang past the edge: clip them sideways only, so the batik borders can still rise above */
.sp-section { position: relative; overflow-x: clip; padding: 4.75rem 1.6rem; text-align: center; background: var(--sp-ivory); }
.sp-section--sand { background: var(--sp-sand); }

/* dark sections: deep green with a soft gold glow and a faint mega mendung texture */
.sp-band {
    isolation: isolate; color: var(--sp-on-dark);
    background:
        radial-gradient(90% 34% at 50% 0%, color-mix(in srgb, var(--inv-accent) 15%, transparent), transparent 72%),
        linear-gradient(180deg, var(--inv-primary), var(--sp-deep));
}
.sp-band::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--inv-accent); opacity: .065;
    -webkit-mask: url('../img/mega-tile.svg') 0 0 / 132px 92px repeat;
    mask: url('../img/mega-tile.svg') 0 0 / 132px 92px repeat;
}
.sp-band .sp-eyebrow { color: var(--sp-gold-lt); }
.sp-band .sp-muted { color: var(--sp-soft-dark); }
.sp-band .inv-button { background: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 70%, #fff6dc), var(--inv-accent)); color: var(--sp-deep); box-shadow: none; }
.sp-band .inv-button--outline { background: transparent; color: var(--sp-on-dark); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sp-on-dark) 55%, transparent); }

/* opening (dark, right after the hero photo) */
.sp-opening { padding-top: 3.5rem; }
.sp-opening__kujang { width: 44px; height: 147px; margin: 0 auto 1.4rem; }
.sp-arabic { margin-bottom: 1.1rem; font-family: 'Amiri', 'Traditional Arabic', serif; font-size: 1.75rem; line-height: 1.6; color: var(--sp-gold-lt); }
.sp-opening__greeting { font-family: var(--sp-heading); font-style: italic; font-size: 1.25rem; color: var(--sp-on-dark); }
.sp-opening__message { color: var(--sp-soft-dark); }
.sp-quote { position: relative; margin: 2.6rem 0 0; padding-top: 2.4rem; }
.sp-quote::before {
    content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: 1.6rem;
    background: linear-gradient(var(--sp-line-dark), var(--inv-accent));
}
.sp-quote__mark { display: block; height: 2.4rem; font-family: var(--sp-heading); font-size: 4.6rem; line-height: 1; color: var(--inv-accent); }
.sp-quote blockquote { margin: 0; font-family: var(--sp-heading); font-style: italic; font-size: 1.2rem; line-height: 1.75; color: var(--sp-on-dark); }
.sp-quote figcaption { margin-top: 1rem; font-size: .68rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--sp-gold-lt); }

/* couple: asymmetric arches, label up the free side, frame slides to its offset */
.sp-person { position: relative; text-align: left; }
.sp-person__figure { position: relative; width: 64%; margin: .5rem 0 1.6rem; }
.sp-person--bride .sp-person__figure { margin-left: auto; }
.sp-person__photo {
    position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
    border-radius: 999px 999px 12px 12px;
    box-shadow: 0 26px 46px -24px color-mix(in srgb, var(--inv-primary) 75%, transparent);
}
.sp-person__photo--empty { background: linear-gradient(170deg, color-mix(in srgb, var(--inv-accent) 55%, var(--inv-background)), var(--inv-primary)); }
.sp-person__frame {
    position: absolute; inset: 0; border: 1px solid var(--inv-accent); border-radius: 999px 999px 12px 12px;
    transform: translate(14px, 14px); transition: transform 1.3s cubic-bezier(.2, .7, .2, 1) .35s;
}
.sp-person--bride .sp-person__frame { transform: translate(-14px, 14px); }
html.inv-anim .sp-person:not(.is-revealed) .sp-person__frame { transform: none; }
.sp-person__label {
    position: absolute; bottom: 0; left: calc(100% + 30px);
    writing-mode: vertical-rl; rotate: 180deg;
    font-size: .64rem; font-weight: 700; letter-spacing: .38em; text-transform: uppercase; color: var(--sp-warm); white-space: nowrap;
}
.sp-person--bride .sp-person__label { left: auto; right: calc(100% + 30px); }
.sp-person__awi { position: absolute; bottom: 0; left: calc(100% + 62px); width: 40px; height: 78%; opacity: .5; }
.sp-person--bride .sp-person__awi { left: auto; right: calc(100% + 62px); scale: -1 1; }
.sp-person__text { padding-left: 1.1rem; border-left: 2px solid var(--inv-accent); }
.sp-person--bride .sp-person__text { padding: 0 1.1rem 0 0; border-left: 0; border-right: 2px solid var(--inv-accent); text-align: right; }
.sp-person__nickname { margin: 0 0 .15rem; font-size: 3.1rem; color: var(--inv-primary); }
.sp-person__name { margin: 0 0 .6rem; font-family: var(--sp-heading); font-weight: 600; font-size: 1.3rem; line-height: 1.3; color: var(--inv-text); }
.sp-person__parents { margin-bottom: .5rem; font-size: .88rem; color: var(--sp-muted); }
.sp-person__parents strong { font-weight: 700; color: var(--inv-text); }
.sp-couple__amp { display: flex; align-items: center; gap: 1rem; margin: 2.6rem 0 2.4rem; }
.sp-couple__amp::before, .sp-couple__amp::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--inv-accent)); }
.sp-couple__amp::after { background: linear-gradient(90deg, var(--inv-accent), transparent); }
.sp-couple__amp .sp-display { font-size: 3.4rem; line-height: 1; color: var(--inv-accent); }

/* countdown (dark): tall tiles that turn in from above, one after another */
.sp-countdown { padding-top: 5rem; padding-bottom: 5.25rem; }
.sp-countdown__date { margin: -1rem 0 2rem; font-family: var(--sp-heading); font-size: 1.15rem; letter-spacing: .04em; color: var(--sp-on-dark); }
.sp-countdown .inv-countdown { gap: .6rem; }
.sp-countdown .inv-countdown__item {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    width: 4.6rem; height: 5.7rem; min-width: 0; padding: 0; border-radius: 12px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--sp-on-dark) 11%, transparent), color-mix(in srgb, var(--sp-on-dark) 3%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 60%, transparent), 0 16px 30px -18px rgb(0 0 0 / .6);
}
.sp-countdown .inv-countdown__value { font-family: var(--sp-heading); font-weight: 500; font-size: 2.15rem; line-height: 1; color: var(--sp-gold-lt); }
.sp-countdown .inv-countdown__label { margin-top: .35rem; font-size: .56rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sp-soft-dark); }
html.inv-anim .sp-countdown .inv-countdown__item {
    opacity: 0; transform: perspective(520px) rotateX(-80deg); transform-origin: 50% 0;
    transition: transform .9s cubic-bezier(.2, .8, .25, 1), opacity .5s ease;
}
html.inv-anim .sp-countdown .is-revealed .inv-countdown__item { opacity: 1; transform: none; }
.sp-countdown .inv-countdown__item:nth-child(1) { transition-delay: .25s; }
.sp-countdown .inv-countdown__item:nth-child(2) { transition-delay: .37s; }
.sp-countdown .inv-countdown__item:nth-child(3) { transition-delay: .49s; }
.sp-countdown .inv-countdown__item:nth-child(4) { transition-delay: .61s; }
.sp-countdown .inv-countdown__actions { margin-top: 2.1rem; }

/* events (sand): ivory cards with an offset gold frame, alternating sides */
.sp-events { padding-top: 0; }
.sp-events__head { position: relative; isolation: isolate; margin: 0 -1.6rem 2.4rem; padding: 4.75rem 1.6rem 5.5rem; }
.sp-events__img { position: absolute; inset: 0; z-index: -1; }
.sp-events__head::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, var(--sp-deep) 0%, color-mix(in srgb, var(--inv-primary) 80%, transparent) 45%,
        color-mix(in srgb, var(--inv-primary) 72%, transparent) 68%, var(--sp-sand) 100%);
}
.sp-events__head .sp-eyebrow { color: var(--sp-gold-lt); }
.sp-events__list { display: grid; }
.sp-event { position: relative; z-index: 0; isolation: isolate; margin: 0 14px 14px 0; }
.sp-event--right { margin: 0 0 14px 14px; }
.sp-event::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--sp-ivory); box-shadow: 0 24px 46px -30px color-mix(in srgb, var(--inv-primary) 70%, transparent); }
.sp-event::before {
    content: ''; position: absolute; inset: 0; z-index: -2; border: 1px solid var(--inv-accent);
    transform: translate(14px, 14px); transition: transform 1.3s cubic-bezier(.2, .7, .2, 1) .3s;
}
.sp-event--right::before { transform: translate(-14px, 14px); }
html.inv-anim .sp-event:not(.is-revealed)::before { transform: none; }
.sp-event__photo { aspect-ratio: 16 / 10; }
.sp-event__body { padding: 1.9rem 1.4rem 2.1rem; }
.sp-event__name {
    margin: 0 0 1rem; font-family: var(--sp-sans); font-weight: 700; font-size: .78rem;
    letter-spacing: .32em; text-transform: uppercase; color: var(--sp-warm);
}
.sp-event__date { display: flex; align-items: center; justify-content: center; gap: .95rem; margin: 0 0 .6rem; }
.sp-event__num { font-family: var(--sp-heading); font-weight: 500; font-size: 4.2rem; line-height: .9; color: var(--inv-primary); }
.sp-event__meta {
    display: grid; gap: .15rem; padding-left: .95rem; border-left: 1px solid var(--inv-accent); text-align: left;
    font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sp-gold);
}
.sp-event__time { font-size: .92rem; }
.sp-event__rule { display: block; width: 48px; height: 1px; margin: 1.1rem auto 1rem; background: var(--inv-accent); }
.sp-event__venue { margin-bottom: .2rem; font-family: var(--sp-heading); font-weight: 600; font-size: 1.25rem; line-height: 1.35; color: var(--inv-text); }
.sp-event__address { font-size: .87rem; color: var(--sp-muted); }
.sp-event__dress {
    display: inline-block; padding: .25rem .9rem; border-radius: 999px;
    background: color-mix(in srgb, var(--inv-accent) 16%, transparent); font-size: .78rem;
}
.sp-event .inv-maps { margin-top: .9rem; }
.sp-events__joint { display: flex; justify-content: center; padding: 1.4rem 0 1.6rem; }
.sp-events__kujang { width: 22px; height: 74px; }

/* love story (dark): a gold bamboo stalk as the timeline, moments without cards */
.sp-story__list { position: relative; list-style: none; margin: 0; padding: 0 0 0 2.3rem; text-align: left; }
.sp-story__list::before {
    content: ''; position: absolute; top: .5rem; bottom: .5rem; left: 6px; width: 10px;
    background:
        linear-gradient(var(--inv-accent), var(--inv-accent)) center / 2px 100% no-repeat,
        repeating-linear-gradient(to bottom, transparent 0 92px, var(--inv-accent) 92px 95px);
    opacity: .8;
}
.sp-moment { position: relative; }
.sp-moment + .sp-moment { margin-top: 2.6rem; }
.sp-moment__node {
    position: absolute; top: .35rem; left: calc(-2.3rem + 3px); width: 16px; height: 16px; border-radius: 50%;
    background: var(--inv-primary); box-shadow: inset 0 0 0 1px var(--inv-accent), inset 0 0 0 4px var(--inv-primary), inset 0 0 0 8px var(--inv-accent);
}
.sp-moment__photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 1rem; border-radius: 14px; }
.sp-moment__date { font-size: .66rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--sp-gold-lt); }
.sp-moment h3 { margin: .2rem 0 .45rem; font-family: var(--sp-heading); font-weight: 500; font-size: 1.5rem; line-height: 1.25; color: var(--sp-on-dark); }
.sp-moment p { margin: 0; font-size: .92rem; color: var(--sp-soft-dark); }

.sp-gallery__cloud { width: 124px; height: 62px; margin: -1.2rem auto .9rem; }
.sp-gift { overflow: hidden; }
.sp-corner-cloud { position: absolute; top: 1.6rem; width: 132px; height: 66px; opacity: .9; }
.sp-corner-cloud--left { left: -46px; }
.sp-corner-cloud--right { right: -46px; scale: -1 1; }
html.inv-anim .sp-corner-cloud[data-reveal] { transform: none; }

/* gallery: an arch first, then soft rounded tiles */
.sp-gallery .inv-gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.sp-gallery .inv-gallery__item { border-radius: 12px; }
.sp-gallery .inv-gallery__item:first-child { grid-column: span 2; aspect-ratio: 4 / 3.8; border-radius: 999px 999px 12px 12px; }
.sp-gallery .inv-gallery__item:nth-child(5n + 6) { grid-column: span 2; aspect-ratio: 16 / 10; }

/* live streaming (dark) */
.sp-stream__icon { margin: -.5rem auto .8rem; color: var(--sp-gold-lt); }
.sp-stream__text { color: var(--sp-on-dark); }
.sp-stream .inv-button { margin-top: .6rem; }

/* gift (sand): deep green cards with a gold cloud watermark */
.sp-gift .inv-gift { display: grid; gap: .9rem; margin-top: 1.75rem; }
/* bank / e-wallet cards two per row, an odd last one across the row; the gift address stays full width below */
.sp-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.sp-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sp-gift .inv-gift__account + .inv-gift__account { margin-top: 0; }
.sp-gift .inv-gift__account p { margin: 0; }
.sp-gift .inv-gift__account:not(.inv-gift__address) {
    position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start;
    min-width: 0; min-height: 132px; padding: .85rem .8rem .8rem; border-radius: 14px; text-align: left; color: var(--sp-on-dark);
    background:
        radial-gradient(110% 90% at 100% 0%, color-mix(in srgb, var(--inv-accent) 30%, transparent), transparent 60%),
        linear-gradient(140deg, color-mix(in srgb, var(--inv-primary) 90%, #fff), var(--sp-deep));
    box-shadow: 0 16px 30px -20px color-mix(in srgb, var(--inv-primary) 80%, transparent);
}
.sp-gift .inv-gift__account:not(.inv-gift__address)::before {
    content: ''; position: absolute; inset: 5px; z-index: -1; border-radius: 10px; pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--inv-accent) 50%, transparent);
}
.sp-gift .inv-gift__account:not(.inv-gift__address)::after {
    content: ''; position: absolute; right: -22px; bottom: -8px; z-index: -1; width: 120px; height: 60px; opacity: .3;
    background: var(--inv-accent);
    -webkit-mask: url('../img/mega.svg') no-repeat center / contain;
    mask: url('../img/mega.svg') no-repeat center / contain;
}
.sp-gift .inv-gift__account:not(.inv-gift__address) .inv-gift__bank { max-width: 100%; font-family: var(--sp-heading); font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-gold-lt); overflow-wrap: anywhere; }
.sp-gift .inv-gift__logo { height: 1.5rem; padding: .2rem .45rem; border-radius: .4rem; }
.sp-gift .inv-gift__logo img { max-width: 5rem; }
.sp-gift .inv-gift__number {
    max-width: 100%; margin-top: auto !important; padding-top: .9rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; font-size: 1rem; letter-spacing: .04em; overflow-wrap: anywhere;
}
.sp-gift .inv-gift__holder { max-width: 100%; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; opacity: .88; overflow-wrap: anywhere; }
.sp-gift .inv-gift__account:not(.inv-gift__address) .inv-button--outline {
    margin-top: .6rem; padding: .35rem .7rem; font-size: .62rem; letter-spacing: .12em; color: var(--sp-on-dark);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sp-on-dark) 50%, transparent);
}
.sp-gift .inv-gift__address {
    padding: 1.6rem 1.3rem; border-radius: 14px; background: var(--sp-ivory);
    box-shadow: 0 0 0 1px var(--sp-line); outline: 1px solid var(--sp-line); outline-offset: -7px;
}
.sp-gift .inv-gift__address .inv-gift__bank { margin-bottom: .4rem; font-size: .68rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--sp-warm); }
.sp-gift .inv-gift__address .inv-gift__holder { font-weight: 700; opacity: 1; }
.sp-gift .inv-gift__address .inv-button { margin-top: .9rem; }

/* rsvp (dark) + wishes (light): the forms on an ivory panel with a gold hairline */
.sp-panel {
    padding: 1.7rem 1.35rem; border-radius: 18px; text-align: left; background: var(--sp-ivory); color: var(--inv-text);
    box-shadow: 0 0 0 1px var(--sp-line), 0 20px 44px -30px color-mix(in srgb, var(--inv-primary) 70%, transparent);
    outline: 1px solid var(--sp-line); outline-offset: -7px;
}
.sp-band .sp-panel { box-shadow: 0 24px 50px -24px rgb(0 0 0 / .55); }
.sp-band .sp-panel .inv-button { background: var(--inv-primary); color: var(--sp-on-dark); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 60%, transparent); }
.sp-band .sp-panel .inv-button--outline { background: transparent; color: var(--inv-primary); box-shadow: inset 0 0 0 1px var(--inv-primary); }
.sp-panel .inv-form label, .sp-panel .inv-form__choices legend { font-size: .82rem; font-weight: 600; color: var(--sp-muted); }
.sp-panel .inv-form input:not([type=radio]):not([type=checkbox]),
.sp-panel .inv-form select,
.sp-panel .inv-form textarea {
    border: 1px solid color-mix(in srgb, var(--inv-accent) 50%, transparent); border-radius: 10px;
    background: color-mix(in srgb, var(--inv-background) 35%, #fff); color: var(--inv-text);
}
.sp-panel .inv-form input:focus, .sp-panel .inv-form select:focus, .sp-panel .inv-form textarea:focus {
    outline: none; border-color: var(--inv-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-accent) 24%, transparent);
}
.sp-panel .inv-form__choices label { color: var(--inv-text); }
.sp-panel .inv-form .inv-button { justify-self: stretch; margin-top: .4rem; }
.sp-panel .inv-wish { padding: .65rem .8rem; border-radius: 10px; background: color-mix(in srgb, var(--inv-accent) 12%, var(--sp-ivory)); }
.sp-panel .inv-wish__name { font-family: var(--sp-heading); font-weight: 700; font-size: .95rem; color: var(--inv-primary); }
.sp-panel .inv-wish__message { font-size: .88rem; line-height: 1.45; }
.sp-panel .inv-wish__time { font-size: .7rem; }
/* about three wishes in the scroll box, under a soft gold hairline */
.sp-panel .inv-wishes { --inv-wishes-height: 20rem; }
.sp-panel .inv-wishes__list { padding-top: .75rem; border-top: 1px solid var(--sp-line); }

/* closing (dark): the photo edge to edge melting into the green, the siger draws over the names */
.sp-closing { padding-top: 4.75rem; }
.sp-closing--photo { padding-top: 0; }
.sp-closing__band { position: relative; margin: 0 -1.6rem 2.4rem; }
.sp-closing__photo { aspect-ratio: 390 / 380; }
.sp-closing__band::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 25%, transparent), transparent 30%, transparent 50%, var(--inv-primary));
}
.sp-closing__message { max-width: 340px; margin: 0 auto 1.8rem; font-size: .94rem; color: var(--sp-soft-dark); }
.sp-closing__crown { width: 150px; margin: 0 auto -.2rem; color: var(--sp-gold-lt); }
.sp-closing__leaf { bottom: calc(8rem + env(safe-area-inset-bottom)); width: 64px; height: 140px; }
.sp-closing__leaf--left { left: -18px; }
.sp-closing__leaf--right { right: -18px; scale: -1 1; }
.sp-closing__band-foot { position: absolute; left: 0; bottom: 0; width: 100%; height: 46px; opacity: .95; --sp-mm-1: var(--sp-deep); }
html.inv-anim .sp-closing__band-foot[data-reveal] { transform: none; }
.sp-closing__names { margin: 0 0 .5rem; font-size: 3rem; color: #fffaf0; }
.sp-closing__names span { color: var(--sp-gold-lt); }
.sp-closing__signature { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--sp-gold-lt); }

/* shared components outside the sections */
.inv-music__button { background: var(--inv-primary); color: var(--sp-on-dark); box-shadow: 0 0 0 1px var(--inv-accent), 0 0 0 4px color-mix(in srgb, var(--inv-primary) 25%, transparent), 0 6px 16px rgb(0 0 0 / .25); }
.inv-checkin { margin: 2.5rem 1.6rem 1rem; border-radius: 18px; }
.inv-branding { color: var(--sp-muted); }

/* ---------- tablets and up: the invitation as a framed column on a deep backdrop ---------- */

@media (min-width: 640px) {
    body { background: var(--sp-deep); }

    .sp-backdrop {
        display: block; position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
        background:
            radial-gradient(60% 50% at 15% 20%, color-mix(in srgb, var(--inv-primary) 80%, var(--inv-accent)) 0%, transparent 70%),
            radial-gradient(60% 50% at 85% 85%, color-mix(in srgb, var(--inv-primary) 85%, var(--inv-accent)) 0%, transparent 70%),
            var(--sp-deep);
    }
    .sp-backdrop .sp-cloud { --sp-cloud-fill: transparent; stroke: color-mix(in srgb, var(--inv-accent) 30%, transparent); }
    .sp-backdrop__cloud { position: absolute; width: 360px; }
    .sp-backdrop__cloud--1 { top: 6%; left: 2%; }
    .sp-backdrop__cloud--2 { bottom: 6%; left: -5%; width: 440px; }
    .sp-backdrop__cloud--3 { top: 2%; right: -3%; scale: -1 1; }
    .sp-backdrop__cloud--4 { bottom: 4%; right: 5%; scale: -1 1; }
    .sp-backdrop__awi { position: absolute; bottom: 0; width: 110px; height: 78vh; opacity: .26; }
    .sp-backdrop__awi--left { left: 1.5vw; }
    .sp-backdrop__awi--right { right: 1.5vw; scale: -1 1; }

    .sp-page {
        position: relative; z-index: 1; width: var(--sp-column); margin: 0 auto; min-height: 100vh;
        background: var(--inv-background);
        box-shadow:
            0 0 0 1px var(--inv-accent),
            0 0 0 10px var(--sp-deep),
            0 0 0 11px color-mix(in srgb, var(--inv-accent) 55%, transparent),
            0 30px 90px rgb(0 0 0 / .45);
    }
    .sp-cover { left: 50%; right: auto; width: var(--sp-column); margin-left: calc(var(--sp-column) / -2); }
}

@media (min-width: 1024px) {
    .sp-side {
        position: fixed; top: 0; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
        width: calc(50% - var(--sp-column) / 2 - 12px); padding: 3rem 2.5rem; text-align: center; color: var(--sp-on-dark);
    }
    .sp-side--left { left: 0; }
    .sp-side--right { right: 0; }
    .sp-side__inner { max-width: 380px; }
    .sp-side .sp-siger { width: 170px; margin: 0 auto 1rem; color: var(--sp-gold-lt); }
    .sp-side .sp-eyebrow { color: var(--sp-gold-lt); }
    .sp-side__names { margin: 0 0 1rem; font-size: clamp(2.8rem, 4.2vw, 4.4rem); }
    .sp-side__names span { color: var(--sp-gold-lt); }
    .sp-side__date { margin: 0; font-family: var(--sp-heading); font-size: 1.1rem; letter-spacing: .08em; }
    .sp-side__label { margin: 0 0 .3rem; font-size: .8rem; letter-spacing: .06em; opacity: .85; }
    .sp-side__guest { display: block; font-family: var(--sp-heading); font-size: 1.8rem; line-height: 1.3; }
    .sp-side__rule { display: block; width: 9px; height: 9px; margin: 1.6rem auto; background: var(--inv-accent); rotate: 45deg; }
    .sp-side__quote { margin: 0; font-family: var(--sp-heading); font-style: italic; font-size: 1.05rem; line-height: 1.75; opacity: .88; }
    /* the right panel already greets the guest */
    .sp-cover__guest { display: none; }
}

/* shorter screens: the arch shrinks first so the cover fits without scrolling */
@media (max-height: 760px) {
    .sp-cover__inner { padding-top: 1.5rem; padding-bottom: 1.6rem; }
    .sp-cover__crest { --sp-arch-h: clamp(130px, 30svh, 236px); margin-bottom: 1.2rem; }
    .sp-cover__names { font-size: 2.85rem; }
    .sp-cover__date { margin-bottom: 1rem; }
    .sp-cover__guest { margin-bottom: 1.1rem; }
}
@media (max-height: 660px) {
    .sp-cover__inner { padding-top: 1.1rem; padding-bottom: 1.2rem; }
    .sp-cover__crest { --sp-arch-h: clamp(110px, 27svh, 190px); margin-bottom: 1rem; }
    .sp-cover__names { font-size: 2.55rem; }
    .sp-cover__date { margin-bottom: .8rem; }
    .sp-cover__guest { margin-bottom: .95rem; padding: .5rem 0 .55rem; }
    .sp-cover__guest-name { font-size: 1.2rem; }
    .sp-open.inv-open-button { padding: .8rem 1.6rem; }
    .sp-cover__band { height: 44px; }
}
@media (max-height: 580px) {
    .sp-cover__crest { --sp-arch-h: clamp(96px, 23svh, 160px); margin-bottom: .8rem; }
    .sp-cover__names { font-size: 2.3rem; }
    .sp-cover__guest { margin-bottom: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .sp-cover__half, .sp-cover__inner, .sp-cover--leave { transition: none; }
    .sp-icon-link, .sp-person__frame, .sp-event::before { transition: none; }
    .sp-pin, .sp-hanjuang { animation: none !important; }
}

/* ---------- page end: the closing ends a steady distance above the bottom edge ---------- */
/* the closing carries the bottom space itself (in its own colour, clear of the music button and the "Gulir" pill),
   so the shared music spacer (a bare strip in the page colour) is not needed */
.inv-music__space { display: none; }
.sp-closing { padding-bottom: calc(7.25rem + env(safe-area-inset-bottom)); }