/*
 * Melayu Emas: a Malay (Riau / Deli) royal wedding.
 * Three surfaces alternate: royal silk (.me-silk, --inv-primary with sheen and a bunga cengkih damask),
 * velvet (.me-velvet, --inv-deep with a soft nap glow) and warm ivory (.me-ivory). Ornaments are inline SVG
 * symbols (sections/_defs): the Malay house roof with selembayung horns and lebah bergantung, tepak sirih,
 * tekat medallion, tanjak, awan larat, pucuk rebung / itik pulang petang / lebah bergantung bands.
 * Colors from the variant: --inv-primary (silk), --inv-onprimary (text on silk), --inv-deep (velvet),
 * --inv-accent (gold), --inv-silkgold (gold lines on silk), --inv-label (gold text on ivory),
 * --inv-background, --inv-surface, --inv-text. Fonts: --inv-font-display (names), --inv-font-heading
 * (titles), Lora (text). All classes start with "me-". Motion only under html.inv-anim.
 */

:root {
    --inv-primary: #e9ad12;
    --inv-accent: #dcaa3c;
    --inv-background: #fbf5e6;
    --inv-text: #251e10;
    --inv-surface: #fffbf2;
    --inv-deep: #0d3a34;
    --inv-label: #865700;
    --inv-onprimary: #0f2f29;
    --inv-silkgold: #7c4c00;
    --inv-radius: 14px;

    --me-w: 460px;
    --me-display: var(--inv-font-display, 'Pinyon Script'), 'Brush Script MT', cursive;
    --me-heading: var(--inv-font-heading, 'Playfair Display'), Georgia, serif;
    --me-serif: 'Lora', Georgia, 'Times New Roman', serif;

    --me-gold-bg: linear-gradient(120deg, color-mix(in srgb, var(--inv-accent) 50%, #fff) 0%, var(--inv-accent) 30%, color-mix(in srgb, var(--inv-accent) 70%, #3a2000) 55%, color-mix(in srgb, var(--inv-accent) 60%, #fff) 80%, var(--inv-accent) 100%);
    --me-gold-hi: color-mix(in srgb, var(--inv-accent) 72%, #fff);
    --me-velvet-text: color-mix(in srgb, var(--inv-background) 94%, var(--inv-accent));
    --me-damask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='black'%3E%3Cpath d='M32 20c4 4 4.6 8 0 11-4.6-3-4-7 0-11zM32 44c-4-4-4.6-8 0-11 4.6 3 4 7 0 11zM20 32c4-4 8-4.6 11 0-3 4.6-7 4-11 0zM44 32c-4 4-8 4.6-11 0 3-4.6 7-4 11 0z'/%3E%3Ccircle cx='32' cy='32' r='1.6'/%3E%3Cpath d='M0-3l3 3-3 3-3-3zM64-3l3 3-3 3-3-3zM0 61l3 3-3 3-3-3zM64 61l3 3-3 3-3-3z'/%3E%3C/g%3E%3Cpath d='M32 3L61 32L32 61L3 32Z' fill='none' stroke='black' stroke-width='.8'/%3E%3Cpath d='M9 9c4 0 6 3 4 5s-4 0-3-1M55 55c-4 0-6-3-4-5s4 0 3 1M55 9c0 4-3 6-5 4s0-4 1-3M9 55c0-4 3-6 5-4s0 4-1 3' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");

    /* context tokens: ivory by default, redefined for velvet and silk */
    --me-fg: var(--inv-text);
    --me-muted: color-mix(in srgb, var(--inv-text) 82%, transparent);
    --me-gold: var(--inv-label);
    --me-line: color-mix(in srgb, var(--inv-accent) 65%, transparent);
    --me-line-soft: color-mix(in srgb, var(--inv-accent) 30%, transparent);
    --me-ribbon-bg: linear-gradient(100deg, color-mix(in srgb, var(--inv-primary) 82%, #fff), var(--inv-primary) 45%, color-mix(in srgb, var(--inv-primary) 82%, #3a1400));
    --me-ribbon-fg: var(--inv-onprimary);
    --me-btn-bg: linear-gradient(150deg, color-mix(in srgb, var(--inv-deep) 84%, #fff), var(--inv-deep) 60%, color-mix(in srgb, var(--inv-deep) 80%, #000));
    --me-btn-fg: var(--me-gold-hi);
    --me-card-bg: var(--inv-surface);
    --me-field-bg: #fff;
    --me-damask-color: color-mix(in srgb, var(--inv-accent) 13%, transparent);
}

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

html { background: var(--inv-deep); scroll-behavior: smooth; }

body.me-body {
    margin: 0;
    background: var(--inv-deep);
    color: var(--inv-text);
    font: 400 1rem/1.7 var(--me-serif);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }

.me-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.me-icon { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- the three surfaces ---------- */

.me-velvet {
    --me-fg: var(--me-velvet-text);
    --me-muted: color-mix(in srgb, var(--me-velvet-text) 86%, transparent);
    --me-gold: var(--me-gold-hi);
    --me-line: color-mix(in srgb, var(--inv-accent) 70%, transparent);
    --me-line-soft: color-mix(in srgb, var(--inv-accent) 32%, transparent);
    --me-btn-bg: var(--me-gold-bg);
    --me-btn-fg: var(--inv-deep);
    --me-card-bg: color-mix(in srgb, var(--inv-deep) 86%, #fff);
    --me-field-bg: color-mix(in srgb, var(--inv-deep) 80%, #fff);
    --me-damask-color: color-mix(in srgb, var(--inv-accent) 11%, transparent);
    background-color: var(--inv-deep);
    background-image:
        radial-gradient(90% 50% at 50% 0%, color-mix(in srgb, var(--inv-deep) 78%, #fff), transparent 72%),
        radial-gradient(80% 45% at 50% 100%, color-mix(in srgb, var(--inv-deep) 70%, #000), transparent 75%),
        linear-gradient(180deg, var(--inv-deep), color-mix(in srgb, var(--inv-deep) 86%, #000));
    color: var(--me-fg);
}

.me-silk {
    --me-fg: var(--inv-onprimary);
    --me-muted: color-mix(in srgb, var(--inv-onprimary) 88%, transparent);
    --me-gold: var(--inv-silkgold);
    --me-line: color-mix(in srgb, var(--inv-silkgold) 70%, transparent);
    --me-line-soft: color-mix(in srgb, var(--inv-silkgold) 34%, transparent);
    --me-ribbon-bg: linear-gradient(150deg, color-mix(in srgb, var(--inv-deep) 84%, #fff), var(--inv-deep));
    --me-ribbon-fg: var(--me-gold-hi);
    --me-damask-color: color-mix(in srgb, var(--inv-onprimary) 9%, transparent);
    background-color: var(--inv-primary);
    background-image:
        linear-gradient(104deg, transparent 10%, rgb(255 255 255 / .2) 22%, transparent 34%, transparent 58%, rgb(255 255 255 / .12) 68%, transparent 80%),
        repeating-linear-gradient(0deg, rgb(255 255 255 / .045) 0 1px, transparent 1px 3px),
        radial-gradient(120% 60% at 12% 0%, color-mix(in srgb, var(--inv-primary) 58%, #fff), transparent 62%),
        radial-gradient(110% 70% at 100% 100%, color-mix(in srgb, var(--inv-primary) 62%, #2a0c00), transparent 68%),
        linear-gradient(170deg, color-mix(in srgb, var(--inv-primary) 86%, #fff), var(--inv-primary) 50%, color-mix(in srgb, var(--inv-primary) 80%, #3a1400));
    color: var(--me-fg);
}

.me-ivory {
    background:
        radial-gradient(100% 38% at 50% 0%, color-mix(in srgb, var(--inv-primary) 16%, transparent), transparent 72%),
        radial-gradient(90% 30% at 50% 100%, color-mix(in srgb, var(--inv-accent) 12%, transparent), transparent 75%),
        var(--inv-background);
    color: var(--me-fg);
}

/* the woven bunga cengkih damask over any surface */
.me-damask {
    position: absolute; inset: 0; pointer-events: none;
    background: var(--me-damask-color);
    -webkit-mask: var(--me-damask) 0 0 / 64px 64px repeat; mask: var(--me-damask) 0 0 / 64px 64px repeat;
}
/* a broad highlight across the silk */
.me-sheen {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .2) 46%, rgb(255 255 255 / .06) 52%, transparent 64%) 0 0 / 260% 100% no-repeat;
    background-position: 80% 0;
    mix-blend-mode: soft-light;
}

/* ---------- backdrop (wide screens) and the column ---------- */

.me-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--inv-deep); }
.me-backdrop::before {
    content: ''; position: absolute; inset: -60px;
    background: var(--me-photo, none) center / cover no-repeat;
    filter: blur(26px) saturate(.9) brightness(.5);
}
.me-backdrop::after {
    content: ''; position: absolute; inset: 0;
    background: color-mix(in srgb, var(--inv-accent) 16%, transparent);
    -webkit-mask: var(--me-damask) 0 0 / 80px 80px repeat; mask: var(--me-damask) 0 0 / 80px 80px repeat;
}

.me-page {
    position: relative; z-index: 1;
    width: min(100%, var(--me-w)); min-height: 100vh; margin: 0 auto;
    background: var(--inv-background);
    overflow-x: clip;
}
@media (min-width: 520px) {
    .me-page { box-shadow: 0 0 0 1px var(--me-line-soft), 0 0 0 7px color-mix(in srgb, var(--inv-deep) 70%, transparent), 0 0 0 8px var(--me-line), 0 0 90px rgb(0 0 0 / .55); }
}
@media (max-width: 519px) { .me-backdrop { display: none; } }

.me-preview {
    position: fixed; z-index: 60; top: 0; left: 0; right: 0;
    width: min(100%, var(--me-w)); margin: 0 auto; padding: .35rem .75rem;
    background: var(--me-gold-bg); color: var(--inv-deep);
    font: 500 .68rem/1.3 var(--me-serif); text-align: center; letter-spacing: .03em;
}

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

.me-corners { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.me-corner { position: absolute; width: clamp(64px, 20vw, 86px); aspect-ratio: 1; }
.me-corner svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 10% 10%; }
.me-corner--tl { top: 6px; left: 6px; }
.me-corner--tr { top: 6px; right: 6px; transform: scaleX(-1); }
.me-corner--bl { bottom: 6px; left: 6px; transform: scaleY(-1); }
.me-corner--br { bottom: 6px; right: 6px; transform: scale(-1, -1); }
html.inv-anim .me-corner svg { animation: me-sway 7s ease-in-out infinite alternate; }
html.inv-anim .me-corner--tr svg { animation-delay: -2.4s; animation-duration: 8s; }
html.inv-anim .me-corner--bl svg { animation-delay: -4s; animation-duration: 7.5s; }
html.inv-anim .me-corner--br svg { animation-delay: -1.3s; animation-duration: 8.5s; }
@keyframes me-sway { from { transform: rotate(-1.4deg); } to { transform: rotate(1.4deg) scale(1.03); } }

/* carved bands at section edges */
.me-band { position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; }
.me-band svg { position: absolute; left: 0; width: 100%; display: block; }
.me-band--top { top: 0; }
.me-band--bottom { bottom: 0; }
.me-band--rebung { height: 34px; background: linear-gradient(var(--me-gold-bg)) 0 100% / 100% 0 no-repeat; }
.me-band--rebung::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
    background: linear-gradient(var(--inv-deep), var(--inv-deep)) 0 2px / 100% 4px no-repeat, var(--me-gold-bg);
}
.me-band--rebung svg { bottom: 5px; height: 30px; }
.me-band--top.me-band--rebung svg { transform: scaleY(-1); }
.me-band--lebah { height: 30px; }
.me-band--lebah::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px;
    background: linear-gradient(var(--inv-deep), var(--inv-deep)) 0 0 / 100% 3px no-repeat, var(--me-gold-bg);
}
.me-band--lebah svg { top: 5px; height: 24px; }
.me-band--itik { height: 30px; background: var(--inv-deep); border-block: 2px solid var(--inv-accent); box-shadow: 0 1px 0 color-mix(in srgb, var(--inv-accent) 40%, transparent), 0 -1px 0 color-mix(in srgb, var(--inv-accent) 40%, transparent); }
.me-band--itik svg { top: 2px; height: 22px; }

.me-label {
    position: relative; z-index: 1;
    font: 600 .66rem/1.4 var(--me-serif); letter-spacing: .32em; text-transform: uppercase;
    color: var(--me-gold);
}
/* the label as a small notched silk ribbon */
.me-label > span, .me-heading__label > span {
    display: inline-block; padding: .34rem 1.15rem .3rem 1.4rem;
    background: var(--me-ribbon-bg); color: var(--me-ribbon-fg);
    clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%, 9px 50%);
    box-shadow: inset 0 0 0 1px var(--me-line);
}

.me-heading { margin-bottom: 1.9rem; }
.me-heading__label { font: 600 .64rem/1.4 var(--me-serif); letter-spacing: .3em; text-transform: uppercase; }
.me-heading__title {
    margin-top: .7rem;
    font: 500 clamp(1.85rem, 8.4vw, 2.2rem)/1.2 var(--me-heading); color: var(--me-fg);
    letter-spacing: .01em;
}

.me-divider { display: flex; align-items: center; justify-content: center; gap: .3rem; margin: .65rem auto 0; color: var(--me-gold); }
.me-divider__line { width: 2.8rem; height: 1.5px; background: linear-gradient(90deg, transparent, currentColor); }
.me-divider__line--end { transform: scaleX(-1); }
.me-divider__awan { width: 2.6rem; height: 1.4rem; overflow: visible; stroke-width: 3.6; transform: scaleX(-1); }
.me-divider__awan--end { transform: none; }
.me-divider__flower { width: 1.15rem; height: 1.15rem; overflow: visible; }
html.inv-anim .me-divider__line { transform-origin: 100% 50%; transition: transform 1s cubic-bezier(.2, .7, .2, 1) .3s; transform: scaleX(.1); }
html.inv-anim .me-divider__line--end { transform-origin: 0 50%; transform: scaleX(-.1); }
html.inv-anim .is-revealed .me-divider__line, html.inv-anim .me-closing .me-divider__line { transform: scaleX(1); }
html.inv-anim .is-revealed .me-divider__line--end, html.inv-anim .me-closing .me-divider__line--end { transform: scaleX(-1); }

/* ---------- buttons and pills ---------- */

.inv-button {
    gap: .5rem; padding: .8rem 1.4rem; border-radius: 999px;
    background: var(--me-btn-bg); color: var(--me-btn-fg);
    font: 600 .74rem/1.2 var(--me-serif); letter-spacing: .12em; text-transform: uppercase;
    box-shadow: 0 12px 22px -12px rgb(0 0 0 / .6), inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 70%, transparent), inset 0 0 0 3px color-mix(in srgb, var(--inv-accent) 18%, transparent);
}
.inv-button--outline {
    background: transparent; color: var(--me-gold);
    box-shadow: inset 0 0 0 1px var(--me-line);
}
.inv-button--outline:hover { background: color-mix(in srgb, var(--inv-accent) 12%, transparent); }
.inv-button .me-icon { width: 1.1rem; height: 1.1rem; }

.me-pill {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: .7rem; padding: .45rem .95rem;
    border-radius: 999px; color: var(--me-gold); text-decoration: none;
    box-shadow: inset 0 0 0 1px var(--me-line);
    font: 500 .78rem/1 var(--me-serif);
    transition: background .25s ease;
}
.me-pill:hover { background: color-mix(in srgb, var(--inv-accent) 14%, transparent); }

/* ---------- the house frame (cover) ---------- */

.me-house { --hw: 300px; position: relative; width: var(--hw); margin: 0 auto; }
.me-house__roof {
    position: relative; z-index: 3; display: block; width: 100%; height: auto; aspect-ratio: 400 / 270; overflow: visible;
    margin-bottom: calc(var(--hw) * -.065);
    filter: drop-shadow(0 10px 12px rgb(0 0 0 / .32));
}
.me-house__body {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 9% minmax(0, 1fr) 9%;
    width: 84%; margin: 0 auto;
    filter: drop-shadow(0 18px 24px rgb(0 0 0 / .35));
}
.me-house__post {
    display: block; width: 100%; height: 100%;
    background: linear-gradient(90deg, color-mix(in srgb, var(--inv-deep) 70%, #000), color-mix(in srgb, var(--inv-deep) 84%, #fff) 50%, color-mix(in srgb, var(--inv-deep) 70%, #000));
    box-shadow: inset 1.5px 0 0 var(--inv-accent), inset -1.5px 0 0 var(--inv-accent);
}
.me-house__photo {
    position: relative; display: grid; place-items: center; aspect-ratio: 4 / 4.3; overflow: hidden;
    background: var(--me-photo, none) center 28% / cover no-repeat, radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--inv-deep) 78%, #fff), var(--inv-deep));
    box-shadow: inset 0 0 0 2px var(--inv-accent), inset 0 0 0 5px color-mix(in srgb, var(--inv-deep) 55%, transparent), inset 0 -40px 40px -30px rgb(0 0 0 / .45);
}
.me-house__mono { font: 400 clamp(2.6rem, 14vw, 3.6rem)/1 var(--me-display); color: var(--me-gold-hi); }
.me-house__beam {
    position: relative; z-index: 2; display: block; width: 92%; height: calc(var(--hw) * .068); min-height: 18px; margin: 0 auto;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 84%, #fff), var(--inv-deep));
    border-block: 2px solid var(--inv-accent);
    box-shadow: 0 10px 16px -10px rgb(0 0 0 / .5);
}

/* ---------- cover ---------- */

.me-cover {
    position: fixed; inset: 0; z-index: 30;
    width: min(100%, var(--me-w)); margin: 0 auto;
    overflow: hidden;
}
/* the couple's photo full-bleed over the upper part of the screen, melting into the silk (no blend modes or filters:
   a blended veil here flickered on iPhone) */
.me-cover__photo {
    position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: calc(var(--inv-screen, 100svh) * .6);
    background: var(--me-photo, none) center 22% / cover no-repeat;
    -webkit-mask-image: linear-gradient(#000 0 58%, rgb(0 0 0 / .6) 78%, transparent 100%);
    mask-image: linear-gradient(#000 0 58%, rgb(0 0 0 / .6) 78%, transparent 100%);
}
.me-cover > .me-damask { z-index: 0; }
.me-cover__scroll {
    position: relative; z-index: 2; height: 100%;
    overflow-x: hidden; overflow-y: auto;
    display: flex; flex-direction: column;
}
.me-cover__inner {
    width: min(100% - 2rem, 24rem); margin: auto; padding: 1.4rem 0 3rem;
    display: flex; flex-direction: column; align-items: center; text-align: center;
}
/* with a photo the words sit at the foot of the screen, under the photo */
.me-cover__inner--photo { min-height: var(--inv-screen, 100svh); margin: 0 auto; justify-content: flex-end; padding: 0 0 3.1rem; }
.me-cover__kicker { margin-bottom: .2rem; color: var(--me-fg); }
.me-cover__inner--photo .me-cover__kicker { padding: .25rem .9rem; border-radius: 999px; background: color-mix(in srgb, var(--inv-primary) 82%, transparent); }
/* the Malay roof as a crown over the names */
.me-cover__crown { display: block; width: min(52vw, 13.5rem); height: auto; aspect-ratio: 400 / 270; overflow: visible; margin: .2rem 0 -.3rem; filter: drop-shadow(0 8px 10px rgb(0 0 0 / .3)); }
.me-cover__names {
    margin-top: .8rem;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 .5rem;
    font: 400 clamp(2.5rem, 12vw, 3rem)/1.12 var(--me-display); color: var(--me-fg);
    text-shadow: 0 1px 0 rgb(255 255 255 / .18);
}
.me-cover__names > span { overflow-wrap: anywhere; }
.me-cover__amp { font: italic 500 .5em/1 var(--me-heading); color: var(--me-gold); }
.me-cover__date {
    display: flex; align-items: center; gap: .6rem; margin-top: .25rem;
    font: 600 .7rem/1.4 var(--me-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--me-fg);
}
.me-cover__date::before, .me-cover__date::after { content: ''; width: 7px; height: 7px; background: var(--inv-deep); box-shadow: 0 0 0 1.5px var(--inv-accent); transform: rotate(45deg); }

.me-guest {
    position: relative; width: min(100%, 20rem); margin-top: .8rem; padding: .55rem 1rem .6rem;
    background: color-mix(in srgb, var(--inv-surface) 72%, transparent);
    border: 1px solid var(--me-line);
    outline: 1px dashed var(--me-line-soft); outline-offset: -5px;
    border-radius: 10px;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.me-guest__label { font: 500 .6rem/1.4 var(--me-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--inv-label); }
.me-guest__name { margin-top: .1rem; font: 600 1.18rem/1.25 var(--me-heading); color: var(--inv-text); overflow-wrap: anywhere; }
.me-open { margin-top: .85rem; --me-btn-bg: linear-gradient(150deg, color-mix(in srgb, var(--inv-deep) 84%, #fff), var(--inv-deep) 60%, color-mix(in srgb, var(--inv-deep) 80%, #000)); --me-btn-fg: var(--me-gold-hi); }

/* opening moment: the roof settles, the photo fades in from a slight zoom, posts and beam follow, the silk shimmers once */
html.inv-anim .me-cover__photo { animation: me-photo-in 1.6s ease-out .1s both; }
html.inv-anim .me-cover__crown { animation: me-settle 1.1s cubic-bezier(.2, .7, .2, 1) .55s both; }
@keyframes me-settle { from { opacity: 0; transform: translateY(-16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes me-photo-in { from { opacity: 0; background-size: auto, auto; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes me-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes me-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }

.me-cover > .me-band { z-index: 3; }

/* short screens: the house shrinks with the screen so the names, guest and button stay in view */
@media (max-height: 760px) {
    .me-cover__inner { padding: .9rem 0 2.6rem; }
    .me-cover__inner--photo { padding: 0 0 2.7rem; }
    .me-cover__crown { width: min(46vw, 11.5rem); }
    .me-cover__names { margin-top: .55rem; font-size: clamp(2.2rem, 10.5vw, 2.6rem); }
    .me-guest { margin-top: .6rem; padding: .45rem .9rem .5rem; }
    .me-guest__name { font-size: 1.08rem; }
    .me-open { margin-top: .65rem; padding: .7rem 1.3rem; }
}
@media (max-height: 660px) {
    .me-cover__inner { padding: .6rem 0 2.3rem; }
    .me-cover__inner--photo { padding: 0 0 2.3rem; }
    .me-cover__crown { width: min(40vw, 9.8rem); }
    .me-cover__kicker { font-size: .6rem; }
    .me-cover__names { margin-top: .4rem; font-size: clamp(2rem, 9.5vw, 2.3rem); }
    .me-cover__date { font-size: .64rem; }
    .me-guest { margin-top: .45rem; padding: .35rem .8rem .4rem; }
    .me-guest__label { font-size: .56rem; }
    .me-guest__name { font-size: 1rem; line-height: 1.2; }
    .me-open { margin-top: .5rem; padding: .62rem 1.2rem; font-size: .68rem; }
    .me-cover .me-band--rebung { height: 26px; }
    .me-cover .me-band--rebung svg { height: 22px; }
}

.me-cover--leave { transition: transform 1.1s cubic-bezier(.7, 0, .3, 1), opacity 1.1s ease; }
.me-cover--gone { transform: translateY(-100%); opacity: 0; }

/* ---------- intro (first screen after opening) ---------- */

.me-intro {
    position: relative; overflow: hidden; isolation: isolate;
    padding: 3.4rem 1.5rem 4.6rem; text-align: center;
    display: flex; flex-direction: column; align-items: center;
}
.me-intro > :not(.me-damask):not(.me-band) { position: relative; z-index: 1; }
.me-medallion { position: relative; width: 11rem; aspect-ratio: 1; display: grid; place-items: center; }
.me-medallion__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 50%; filter: drop-shadow(0 14px 22px rgb(0 0 0 / .45)); }
.me-medallion__ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
html.inv-anim .me-medallion__ring { animation: me-turn 120s linear infinite; }
@keyframes me-turn { to { transform: rotate(360deg); } }
.me-medallion__mono {
    position: relative; display: inline-flex; align-items: center; gap: .3rem;
    font: 400 2.5rem/1 var(--me-display);
    background: var(--me-gold-bg); -webkit-background-clip: text; background-clip: text; color: transparent;
    padding: .1em .15em;
}
.me-medallion__mono i { width: 6px; height: 6px; background: var(--inv-accent); transform: rotate(45deg); }
.me-intro__label { margin-top: 1.2rem; }
.me-intro__names { margin-top: .5rem; font: 400 clamp(2.4rem, 11vw, 2.9rem)/1.15 var(--me-display); color: var(--me-gold-hi); }
.me-intro__names span { font: italic 500 .5em/1 var(--me-heading); color: var(--me-fg); }
.me-intro__date { margin-top: .4rem; font: 600 .74rem/1.4 var(--me-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--me-fg); }
.me-intro__quote {
    max-width: 20rem; margin-top: 1.2rem; padding-top: 1rem;
    border-top: 1px solid var(--me-line-soft);
    font: italic 400 .92rem/1.6 var(--me-serif); color: var(--me-muted);
}

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

.me-main { position: relative; background: var(--inv-background); }

.me-section {
    position: relative; overflow: hidden; isolation: isolate;
    padding: 4.4rem 1.4rem;
    text-align: center;
}
.me-section > * { position: relative; z-index: 1; }
.me-section > .me-damask, .me-section > .me-sheen { position: absolute; z-index: 0; }
.me-section > .me-corners { position: absolute; z-index: 0; }
.me-section > .me-band { position: absolute; z-index: 2; }
.me-section:has(> .me-band--top) { padding-top: 5.6rem; }
.me-section:has(> .me-band--bottom) { padding-bottom: 5.8rem; }

/* veiled client photo behind a section; a gradient alone without a photo */
.me-section > .me-bgphoto { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.me-bgphoto__img { position: absolute; inset: -44px 0; background: var(--me-photo, none) center / cover no-repeat; --inv-parallax: 34px; }
.me-bgphoto::after { content: ''; position: absolute; inset: 0; }
.me-ivory > .me-bgphoto .me-bgphoto__img { filter: saturate(.85); }
.me-ivory > .me-bgphoto::after {
    background:
        radial-gradient(90% 40% at 50% 0%, color-mix(in srgb, var(--inv-primary) 20%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-background) 95%, transparent), color-mix(in srgb, var(--inv-background) 80%, transparent) 38%, color-mix(in srgb, var(--inv-background) 88%, transparent) 72%, var(--inv-background));
}
.me-velvet > .me-bgphoto::after {
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 96%, transparent), color-mix(in srgb, var(--inv-deep) 76%, transparent) 40%, color-mix(in srgb, var(--inv-deep) 88%, transparent) 75%, color-mix(in srgb, var(--inv-deep) 92%, #000));
}
.me-silk > .me-bgphoto .me-bgphoto__img { filter: grayscale(.4) contrast(1.05); }
.me-silk > .me-bgphoto::after {
    background:
        linear-gradient(104deg, transparent 10%, rgb(255 255 255 / .16) 22%, transparent 34%),
        linear-gradient(175deg, color-mix(in srgb, color-mix(in srgb, var(--inv-primary) 86%, #fff) 94%, transparent), color-mix(in srgb, var(--inv-primary) 72%, transparent) 42%, color-mix(in srgb, var(--inv-primary) 84%, transparent) 72%, color-mix(in srgb, var(--inv-primary) 82%, #3a1400));
}

.me-lead { max-width: 24rem; margin: -.4rem auto 1.8rem; color: var(--me-muted); font-size: .95rem; }

.me-card {
    position: relative; overflow: hidden;
    background: var(--me-card-bg);
    border: 1px solid var(--me-line-soft); border-radius: 16px;
    box-shadow: 0 24px 44px -30px rgb(0 0 0 / .6);
}
/* ivory cards on silk keep the ivory tokens */
.me-silk .me-card:not(.me-velvet) {
    --me-fg: var(--inv-text);
    --me-muted: color-mix(in srgb, var(--inv-text) 82%, transparent);
    --me-gold: var(--inv-label);
    --me-line: color-mix(in srgb, var(--inv-accent) 65%, transparent);
    --me-line-soft: color-mix(in srgb, var(--inv-accent) 30%, transparent);
    --me-card-bg: var(--inv-surface);
    --me-btn-bg: linear-gradient(150deg, color-mix(in srgb, var(--inv-deep) 84%, #fff), var(--inv-deep) 60%, color-mix(in srgb, var(--inv-deep) 80%, #000));
    --me-btn-fg: var(--me-gold-hi);
    color: var(--me-fg);
}

/* opening */
.me-opening { padding-top: 3.6rem; }
.me-opening__tepak { display: block; width: 9.4rem; height: auto; aspect-ratio: 120 / 100; margin: 0 auto .9rem; overflow: visible; filter: drop-shadow(0 10px 12px rgb(0 0 0 / .2)); }
.me-arabic { margin-top: 1rem; font: 400 1.85rem/1.8 'Amiri', serif; color: var(--me-gold); }
.me-opening__greeting { margin-top: .3rem; font: 500 1.3rem/1.4 var(--me-heading); color: var(--me-fg); }
.me-opening__message { max-width: 24rem; margin: .9rem auto 0; color: var(--me-muted); }
.me-quote {
    max-width: 24rem; margin: 2.2rem auto 0; padding: 2.4rem 1.8rem 2rem;
    border-radius: 18px;
    box-shadow: 0 26px 44px -28px rgb(0 0 0 / .6), inset 0 0 0 1px var(--me-line);
}
.me-quote > :not(.me-corners) { position: relative; z-index: 1; }
.me-quote .me-corner { width: 70px; }
.me-quote blockquote { margin: 0; font: italic 400 .98rem/1.72 var(--me-serif); color: var(--me-fg); }
.me-quote figcaption { margin-top: .9rem; font: 600 .68rem/1.4 var(--me-serif); letter-spacing: .24em; text-transform: uppercase; color: var(--me-gold); }

/* couple */
.me-couple { padding-bottom: 4.8rem; }
.me-person {
    display: grid; grid-template-columns: 46% minmax(0, 1fr); align-items: end; gap: 1rem;
    max-width: 26rem; margin: 0 auto; text-align: left;
}
.me-person--right { grid-template-columns: minmax(0, 1fr) 46%; text-align: right; }
.me-person--right .me-person__frame { order: 2; }
.me-person__frame { position: relative; }
/* each portrait in a small Malay house: roof, carved pucuk rebung posts, the itik pulang petang beam */
.me-house--person { --hw: 100%; }
.me-house--person .me-house__roof { margin-bottom: -7%; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .4)); }
.me-house--person .me-house__body { width: 86%; grid-template-columns: 10% minmax(0, 1fr) 10%; }
.me-house--person .me-house__photo { aspect-ratio: 3 / 4; background-position: center 20%, center; }
.me-house--person .me-house__beam { height: 14px; min-height: 0; }
.me-person__photo {
    position: relative; z-index: 1; display: block; width: 92%; margin: 0 auto; aspect-ratio: 3 / 4; object-fit: cover;
    border: 2px solid var(--inv-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--inv-deep) 80%, #000), 0 0 0 5px var(--me-line-soft), 0 22px 30px -16px rgb(0 0 0 / .7);
}
.me-person__photo--empty {
    display: grid; place-items: center;
    background: radial-gradient(circle at 50% 40%, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 70%, #000));
    font: 400 3.6rem/1 var(--me-display); color: var(--inv-onprimary);
}
.me-person__text { padding-bottom: .3rem; }
.me-person__role { display: flex; align-items: center; gap: .45rem; font: 600 .6rem/1.4 var(--me-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--me-gold); }
.me-person--right .me-person__role { justify-content: flex-end; }
.me-person__emblem { width: 2.8rem; height: 1.85rem; flex: none; overflow: visible; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .4)); }
.me-person__emblem--flower { width: 1.1rem; height: 1.1rem; color: var(--inv-accent); }
.me-person__nick {
    margin-top: .2rem; font: 400 2.5rem/1.15 var(--me-display);
    background: var(--me-gold-bg); -webkit-background-clip: text; background-clip: text; color: transparent;
    padding-inline: .1em;
}
.me-person__name { margin-top: .1rem; font: 600 1.06rem/1.3 var(--me-heading); color: var(--me-fg); overflow-wrap: anywhere; }
.me-person__parents { margin-top: .45rem; font-size: .83rem; line-height: 1.5; color: var(--me-muted); }
.me-person__parents strong { color: var(--me-fg); font-weight: 600; }

.me-amp { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 2rem 0 1.6rem; color: var(--me-gold); }
.me-amp svg { width: 3.4rem; height: 1.8rem; overflow: visible; stroke-width: 3; transform: scaleX(-1); }
.me-amp svg.me-amp__end { transform: none; }
.me-amp span { font: italic 500 2.6rem/1 var(--me-heading); color: var(--me-fg); }

/* countdown: velvet tiles shaped like carved windows */
.me-countdown__date { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; font: 600 .78rem/1.4 var(--me-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--me-fg); }
.me-countdown__date .me-icon { width: 1.2rem; height: 1.2rem; }
.inv-countdown { gap: .55rem; }
.inv-countdown__item {
    position: relative; overflow: hidden;
    flex: 1; max-width: 5rem; min-width: 0; padding: 1.2rem .25rem 1.1rem;
    border-radius: 2.6rem 2.6rem 8px 8px; color: var(--me-velvet-text);
    background:
        radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--inv-deep) 76%, #fff), transparent 70%),
        linear-gradient(180deg, var(--inv-deep), color-mix(in srgb, var(--inv-deep) 82%, #000));
    box-shadow: inset 0 0 0 1.5px var(--inv-accent), inset 0 0 0 4px var(--inv-deep), inset 0 0 0 5px color-mix(in srgb, var(--inv-accent) 45%, transparent), 0 16px 26px -14px rgb(0 0 0 / .6);
}
.inv-countdown__item::before {
    content: ''; position: absolute; left: 50%; top: 6px; width: 7px; height: 7px; margin-left: -3.5px;
    background: var(--inv-accent); transform: rotate(45deg);
}
.inv-countdown__value { font: 600 1.9rem/1.1 var(--me-heading); color: var(--me-gold-hi); }
.inv-countdown__label { margin-top: .25rem; font: 500 .6rem/1.2 var(--me-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--me-velvet-text); }
.inv-countdown__done { font-style: italic; color: var(--me-muted); }
.inv-countdown__actions { margin-top: 1.5rem; }
.inv-countdown__actions .inv-button { padding: .65rem 1rem; font-size: .62rem; letter-spacing: .08em; }
.me-silk .inv-countdown__actions .inv-button--outline { background: color-mix(in srgb, var(--inv-surface) 55%, transparent); color: var(--inv-text); box-shadow: inset 0 0 0 1px var(--me-line); }

/* events: cards with a gable-topped photo and a velvet date medallion */
.me-events__list { display: grid; gap: 2rem; max-width: 24rem; margin: 0 auto; }
.me-event {
    position: relative; overflow: hidden; padding-bottom: 34px;
    background: var(--inv-surface); border-radius: 18px;
    box-shadow: 0 0 0 1px var(--me-line-soft), 0 28px 44px -30px rgb(0 0 0 / .65);
}
.me-event__photo {
    position: relative; aspect-ratio: 16 / 10.5;
    background: var(--me-gold-bg);
    clip-path: polygon(0 24%, 50% 0, 100% 24%, 100% 100%, 0 100%);
}
.me-event__photo::before {
    content: ''; position: absolute; inset: 4px 0 0;
    background: var(--me-photo, none) center 35% / cover no-repeat, var(--inv-deep);
    clip-path: polygon(0 24.5%, 50% 1%, 100% 24.5%, 100% 100%, 0 100%);
}
.me-event__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--inv-deep) 55%, transparent));
}
.me-event:not(.me-event--photo) { padding-top: 1.6rem; }
.me-event__body { position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 0 1.3rem 1.6rem; }
.me-event--photo .me-event__medal { margin-top: -3rem; }
.me-event__medal {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 5.8rem; aspect-ratio: 1; margin-bottom: .5rem; border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--inv-deep) 76%, #fff), var(--inv-deep) 70%);
    color: var(--me-velvet-text);
    box-shadow: 0 0 0 2px var(--inv-accent), 0 0 0 5px var(--inv-surface), 0 0 0 6px var(--me-line), 0 14px 22px -10px rgb(0 0 0 / .6);
}
.me-event__medal span { font: 600 .5rem/1.25 var(--me-serif); letter-spacing: .14em; text-transform: uppercase; }
.me-event__medal strong { font: 600 1.85rem/1 var(--me-heading); color: var(--me-gold-hi); }
.me-event__label { font: 600 .62rem/1.4 var(--me-serif); letter-spacing: .3em; text-transform: uppercase; color: var(--inv-label); }
.me-event__name { font: 400 2.4rem/1.15 var(--me-display); color: var(--inv-deep); overflow-wrap: anywhere; }
.me-event p:not(.me-event__medal) { display: flex; align-items: flex-start; justify-content: center; gap: .4rem; max-width: 100%; overflow-wrap: anywhere; }
.me-event .me-icon { margin-top: .22em; width: 1.05rem; height: 1.05rem; color: var(--inv-label); }
.me-event__date { font: 600 1.05rem/1.35 var(--me-heading); color: var(--inv-text); }
.me-event__time { font: 600 .9rem/1.4 var(--me-serif); color: var(--inv-label); letter-spacing: .03em; }
.me-event__venue { margin-top: .3rem; font: 600 1.02rem/1.35 var(--me-heading); color: var(--inv-text); }
.me-event__address { font-size: .88rem; line-height: 1.55; color: color-mix(in srgb, var(--inv-text) 82%, transparent); }
.me-event__dress { font-size: .86rem; color: var(--inv-text); font-style: italic; }
.me-event__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; width: 100%; margin-top: 1rem; }
.me-event__actions .inv-button { padding: .72rem .5rem; font-size: .64rem; letter-spacing: .06em; }
.me-event > .me-band { position: absolute; }

/* love story: a gold line with cengkih knots, glassy velvet cards */
.me-timeline { position: relative; max-width: 25rem; margin: 0 auto; padding: 0; list-style: none; text-align: left; }
.me-timeline::before {
    content: ''; position: absolute; left: .8rem; top: .4rem; bottom: .4rem; width: 2px;
    background: linear-gradient(180deg, transparent, var(--inv-accent) 5%, var(--inv-accent) 95%, transparent);
}
.me-timeline__item { position: relative; padding-left: 2.5rem; }
.me-timeline__item + .me-timeline__item { margin-top: 1.6rem; }
.me-timeline__dot {
    position: absolute; left: .8rem; top: 1rem; width: 1.7rem; height: 1.7rem; transform: translateX(-50%);
    overflow: visible; color: var(--inv-accent);
    border-radius: 50%; background: var(--inv-deep); box-shadow: 0 0 0 3px var(--inv-deep), 0 0 0 4px var(--me-line);
}
.me-timeline__card {
    overflow: hidden; border-radius: 14px;
    background: color-mix(in srgb, var(--inv-deep) 72%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: inset 0 0 0 1px var(--me-line), 0 20px 34px -22px rgb(0 0 0 / .7);
}
.me-timeline__photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 2px solid var(--inv-accent); }
.me-timeline__body { padding: 1rem 1.15rem 1.2rem; }
.me-timeline__date {
    display: inline-block; padding: .22rem .75rem; border-radius: 4px;
    background: var(--me-ribbon-bg); color: var(--me-ribbon-fg);
    font: 600 .62rem/1.4 var(--me-serif); letter-spacing: .2em; text-transform: uppercase;
}
.me-timeline__title { margin-top: .45rem; font: 600 1.18rem/1.3 var(--me-heading); color: var(--me-fg); overflow-wrap: anywhere; }
.me-timeline__story { margin-top: .35rem; font-size: .88rem; line-height: 1.6; color: var(--me-muted); overflow-wrap: anywhere; }

/* gallery: the first photo wide under a gable line; a lonely last photo is wide too */
.inv-gallery { gap: .55rem; }
.inv-gallery__item { border-radius: 10px; box-shadow: 0 0 0 1.5px var(--inv-accent), 0 0 0 4px var(--inv-background), 0 0 0 5px var(--me-line-soft), 0 16px 26px -20px rgb(0 0 0 / .7); }
.inv-gallery__item:first-child,
.inv-gallery__item:first-child ~ .inv-gallery__item:last-child:nth-child(even) { grid-column: 1 / -1; aspect-ratio: 16 / 11; }
.inv-gallery__item:first-child { clip-path: polygon(0 16%, 50% 0, 100% 16%, 100% 100%, 0 100%); border-radius: 0 0 10px 10px; box-shadow: none; }
.inv-gallery__play { background: color-mix(in srgb, var(--inv-deep) 70%, transparent); color: var(--inv-surface); }

/* live streaming */
.me-live__card { max-width: 24rem; margin: 0 auto; padding: 2rem 1.5rem 1.8rem; border-radius: 18px; }
.me-live__card > :not(.me-corners) { position: relative; z-index: 1; }
.me-live__badge {
    display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem;
    border-radius: 999px; background: #b3261e; color: #fff;
    font: 600 .66rem/1 var(--me-serif); letter-spacing: .2em;
}
.me-live__badge span { width: .45rem; height: .45rem; border-radius: 50%; background: #fff; }
html.inv-anim .me-live__badge span { animation: me-blink 1.4s ease-in-out infinite; }
@keyframes me-blink { 50% { opacity: .25; } }
.me-live__text { margin: 1rem 0 .5rem; color: var(--me-fg); }
.me-live__note { margin-bottom: 1.1rem; font: 600 1rem/1.5 var(--me-heading); color: var(--me-gold); }
.me-live__card .inv-button { margin-top: .4rem; }

/* gift: accounts as royal silk cards, two per row (a lonely last card spans both) */
.inv-gift { display: grid; gap: .9rem; max-width: 22rem; margin: 0 auto; }
.inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.inv-gift__account {
    position: relative; overflow: hidden; isolation: isolate; min-width: 0;
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .45rem;
    grid-template-areas: "chip bank" "number number" "holder holder" "button button";
    margin: 0; padding: .85rem .85rem 1.3rem;
    border-radius: 16px; text-align: left; color: var(--inv-onprimary);
    background:
        linear-gradient(110deg, transparent 18%, rgb(255 255 255 / .28) 32%, transparent 46%),
        repeating-linear-gradient(0deg, rgb(255 255 255 / .05) 0 1px, transparent 1px 3px),
        linear-gradient(160deg, color-mix(in srgb, var(--inv-primary) 82%, #fff), var(--inv-primary) 50%, color-mix(in srgb, var(--inv-primary) 78%, #3a1400));
    box-shadow: 0 18px 30px -18px rgb(0 0 0 / .8), inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 70%, transparent);
}
.inv-gift__account + .inv-gift__account { margin-top: 0; }
.inv-gift__account::before {
    content: ''; grid-area: chip; width: 1.7rem; height: 1.3rem; border-radius: .3rem;
    background:
        linear-gradient(90deg, transparent 31%, rgb(0 0 0 / .25) 31% 33%, transparent 33% 67%, rgb(0 0 0 / .25) 67% 69%, transparent 69%),
        linear-gradient(0deg, transparent 47%, rgb(0 0 0 / .25) 47% 53%, transparent 53%),
        linear-gradient(135deg, #f6e6c4, #c9a160 55%, #ead3a2);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2);
}
/* a pucuk rebung hem along the card's foot */
.inv-gift__account::after {
    content: ''; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: .6rem;
    background: conic-gradient(from 159deg at 50% 0, var(--inv-deep) 42deg, transparent 0) 0 0 / 10px 100% repeat-x;
    transform: scaleY(-1); opacity: .85;
}
.inv-gift__bank {
    grid-area: bank; justify-self: end; min-width: 0; max-width: 100%; margin: 0;
    font: 600 .66rem/1.2 var(--me-serif); letter-spacing: .06em; text-transform: uppercase; text-align: right; overflow-wrap: anywhere;
}
.inv-gift__logo { height: 1.5rem; max-width: 100%; padding: .2rem .45rem; border-radius: .35rem; }
.inv-gift__logo img { max-width: 4.6rem; }
.inv-gift__number { grid-area: number; margin: .75rem 0 .15rem; font: 600 1rem/1.25 ui-monospace, Consolas, monospace; letter-spacing: .03em; color: var(--inv-onprimary); overflow-wrap: anywhere; }
.inv-gift__holder { grid-area: holder; margin: 0; font: 600 .58rem/1.35 var(--me-serif); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-onprimary) 88%, transparent); overflow-wrap: anywhere; }
.inv-gift__account .inv-button {
    grid-area: button; justify-self: start; margin-top: .6rem; padding: .35rem .75rem; border-radius: 999px;
    font-size: .6rem; letter-spacing: .06em; color: var(--me-gold-hi); background: var(--inv-deep);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 65%, transparent);
}
/* the gift address stays an ivory card */
.inv-gift__account.inv-gift__address {
    display: block; min-height: 0; padding: 1.4rem 1.2rem; text-align: center; color: var(--inv-text);
    background: var(--inv-surface);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 45%, transparent), 0 20px 40px -28px rgb(0 0 0 / .7);
}
.inv-gift__address::before, .inv-gift__address::after { content: none; }
.inv-gift__address .inv-gift__bank { justify-self: auto; text-align: center; font: 600 .66rem/1.4 var(--me-serif); letter-spacing: .3em; color: var(--inv-label); }
.inv-gift__address .inv-gift__holder { margin: .6rem 0 .2rem; font: 600 1.1rem/1.3 var(--me-heading); letter-spacing: .02em; text-transform: none; color: var(--inv-text); }
.inv-gift__address p:not([class]) { color: color-mix(in srgb, var(--inv-text) 82%, transparent); }
.inv-gift__address .inv-button { margin-top: 1rem; color: var(--me-gold-hi); background: var(--inv-deep); }

/* rsvp & wishes forms */
.me-form { max-width: 24rem; margin: 0 auto; padding: 1.8rem 1.3rem 1.5rem; text-align: left; }
.me-form > :not(.me-corners) { position: relative; z-index: 1; }
.me-form .me-corner { width: 58px; opacity: .9; }
.inv-form { gap: .9rem; }
.inv-form label, .inv-form__choices legend { font: 500 .78rem/1.4 var(--me-serif); letter-spacing: .03em; color: var(--me-muted); }
.inv-form input:not([type=radio]):not([type=checkbox]), .inv-form select, .inv-form textarea {
    padding: .7rem .85rem; border-radius: 8px;
    border: 1px solid var(--me-line);
    background: var(--me-field-bg); color: var(--me-fg);
    font: 400 1rem/1.4 var(--me-serif);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.inv-form input::placeholder, .inv-form textarea::placeholder { color: color-mix(in srgb, var(--me-fg) 48%, transparent); }
.inv-form input:focus, .inv-form select:focus, .inv-form textarea:focus {
    outline: none; border-color: var(--me-gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-accent) 25%, transparent);
}
.inv-form option { background: #fff; color: var(--inv-text); }
.inv-form input[type=radio], .inv-form input[type=checkbox] { accent-color: var(--inv-deep); }
.inv-form__choices label { color: var(--me-fg); font-size: .92rem; }
.inv-form__notice { color: var(--me-fg); background: color-mix(in srgb, var(--inv-accent) 14%, transparent); border: 1px solid var(--me-line-soft); }
.inv-form .inv-button { justify-self: stretch; margin-top: .3rem; }
.inv-rsvp__deadline { font-style: italic; color: var(--me-gold); }

/* wishes: compact cards in a scroll box of about three */
.inv-wishes { --inv-wishes-height: 20rem; }
.inv-wishes__list { gap: .6rem; margin-top: 1.4rem; }
.inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .5rem .45rem .5rem .5rem; border-radius: 10px;
    background: color-mix(in srgb, var(--inv-primary) 10%, var(--inv-background));
    box-shadow: inset 0 0 0 1px var(--me-line-soft), inset 0 -14px 16px -14px rgb(0 0 0 / .25);
    scrollbar-color: color-mix(in srgb, var(--inv-accent) 55%, transparent) transparent;
}
.inv-wishes__empty { text-align: center; font-style: italic; }
.inv-wish {
    padding: .65rem .8rem; border-radius: 8px;
    background: #fff;
    border: 1px solid var(--me-line-soft); border-left: 3px solid var(--inv-deep);
}
.inv-wish__name { font: 600 .98rem/1.3 var(--me-heading); color: var(--inv-deep); }
.inv-wish__message { font-size: .88rem; line-height: 1.5; color: var(--inv-text); }
.inv-wish__time { margin-top: .25rem; font: 400 .68rem/1.3 var(--me-serif); letter-spacing: .03em; }
.inv-wish__reply { margin-top: .5rem; padding: .45rem .65rem; background: color-mix(in srgb, var(--inv-accent) 12%, transparent); }
.inv-wish__reply-text { font-size: .85rem; }
.inv-wishes__page-button { color: var(--me-gold); }

/* ---------- closing: full-bleed photo melting into the royal silk ---------- */

.me-closing { padding: 3.4rem 1.4rem calc(4.2rem + env(safe-area-inset-bottom)); }
.me-closing--photo { padding-top: 14.5rem; }
.me-closing__photo {
    position: absolute; inset: 0 0 auto; height: min(60svh, 28rem); z-index: 0;
    background: var(--me-photo) center 25% / cover no-repeat;
    filter: saturate(1.08) contrast(1.04);
    -webkit-mask-image: linear-gradient(#000 38%, rgb(0 0 0 / .55) 64%, transparent 98%); mask-image: linear-gradient(#000 38%, rgb(0 0 0 / .55) 64%, transparent 98%);
}
.me-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--inv-primary) 50%, transparent) 75%, var(--inv-primary)),
        color-mix(in srgb, var(--inv-primary) 10%, transparent);
}
.me-closing--photo > .me-damask {
    top: 14rem;
    -webkit-mask: var(--me-damask) 0 0 / 64px 64px repeat, linear-gradient(transparent, #000 10rem);
    -webkit-mask-composite: source-in;
    mask: var(--me-damask) 0 0 / 64px 64px repeat, linear-gradient(transparent, #000 10rem);
    mask-composite: intersect;
}
.me-closing__inner {
    position: relative; z-index: 1; max-width: 23rem; margin: 0 auto; padding: 1rem 1.4rem 1.3rem;
    border-radius: 20px;
}
.me-closing__inner > :not(.me-corners) { position: relative; z-index: 1; }
.me-closing__inner .me-corner { width: 46px; }
.me-closing__inner .me-corner--tl, .me-closing__inner .me-corner--tr { top: 4rem; }
.me-closing__roof { display: block; width: min(56%, 180px); height: auto; aspect-ratio: 400 / 270; margin: 0 auto .55rem; overflow: visible; filter: drop-shadow(0 10px 14px rgb(0 0 0 / .35)); }
.me-closing__title { margin-top: .45rem; font: 500 clamp(1.9rem, 8.5vw, 2.3rem)/1.2 var(--me-heading); color: var(--me-fg); }
.me-closing__message { max-width: 22rem; margin: .55rem auto 0; font-size: .93rem; line-height: 1.6; color: var(--me-muted); }
.me-closing__sign { margin-top: .9rem; font: 600 .7rem/1.4 var(--me-serif); letter-spacing: .28em; text-transform: uppercase; color: var(--me-gold); }
.me-closing__names { margin-top: .2rem; font: 400 clamp(2.1rem, 9.5vw, 2.6rem)/1.2 var(--me-display); color: var(--me-fg); }
.me-closing__names span { font: italic 500 .45em/1 var(--me-heading); color: var(--me-gold); }
.me-closing .me-divider { margin-top: .4rem; }
.me-closing > .me-band { position: absolute; }

/* ---------- shared components: nav, music, to-top, branding, check-in ---------- */

.inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--inv-deep) 95%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--me-velvet-text) 82%, transparent);
    --inv-nav-active: var(--me-gold-bg);
    border-color: color-mix(in srgb, var(--inv-accent) 50%, transparent);
    box-shadow: 0 14px 34px -12px rgb(0 0 0 / .6), inset 0 -2px 0 color-mix(in srgb, var(--inv-accent) 60%, transparent);
    font-family: var(--me-serif);
}
.inv-nav__item.is-active { color: var(--inv-deep); font-weight: 600; }

.inv-music { right: max(1rem, calc((100vw - var(--me-w)) / 2 + 1rem)); }
.inv-music__button { background: var(--me-gold-bg); color: var(--inv-deep); box-shadow: 0 8px 22px -8px rgb(0 0 0 / .6), 0 0 0 3px color-mix(in srgb, var(--inv-deep) 55%, transparent); }

.inv-to-top {
    left: max(1rem, calc((100vw - var(--me-w)) / 2 + 1rem));
    background: var(--inv-deep); color: var(--me-gold-hi);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 60%, transparent), 0 6px 16px -6px rgb(0 0 0 / .5);
}

/* the closing carries the bottom space itself (in its own color), so the shared music spacer is not needed */
.inv-music__space { display: none; }
.me-branding { position: relative; z-index: 1; background: var(--inv-deep); color: var(--me-velvet-text); font-family: var(--me-serif); }

.inv-checkin { color: var(--inv-text); }
.inv-checkin__title { color: var(--inv-deep); }

@media (max-width: 359px) {
    .me-section { padding-inline: 1.1rem; }
    .me-person { gap: .8rem; }
    .me-person__nick { font-size: 2.2rem; }
}

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .me-cover--leave { transition: opacity .3s ease; }
    .me-cover--gone { transform: none; }
}

/* ---------- intro scene "Selaso Diraja" (scene.json, sections/_scene): under the eaves of the Malay house, on royal silk ---------- */
.me-scene-silk { position: absolute; inset: 0; overflow: hidden; }
.me-scene-silk::after { content: ''; position: absolute; inset: 0; background: radial-gradient(80% 55% at 50% 50%, transparent 45%, rgb(40 20 0 / .28)); }
html.inv-anim .me-scene-silk > .me-sheen { animation: me-sheen 3.4s ease-in-out .6s both; }
.me-scene-tekat { overflow: visible; opacity: .92; filter: drop-shadow(0 18px 30px rgb(0 0 0 / .4)); }
html.inv-anim .me-scene-tekat { animation: me-turn 140s linear infinite; }
.me-scene-roof { overflow: visible; filter: drop-shadow(0 12px 16px rgb(0 0 0 / .35)); }
.me-scene-post { border-inline: 2px solid var(--inv-accent); background: var(--inv-deep); }
.me-scene-beam { background: var(--inv-deep); border-top: 2px solid var(--inv-accent); box-shadow: 0 -1px 0 color-mix(in srgb, var(--inv-accent) 40%, transparent); }
.me-scene-corner { overflow: visible; scale: 1 -1; color: var(--inv-silkgold, var(--inv-accent)); }
.me-scene-corner--r { scale: -1 -1; }
.me-scene-tepak { overflow: visible; filter: drop-shadow(0 10px 12px rgb(0 0 0 / .35)); }
/* the name card: a velvet panel with an arched top, gold-thread rims and stitches, like tekat embroidery */
body.me-body .inv-scene__card {
    top: 52%; -webkit-mask: none; mask: none; aspect-ratio: auto; min-height: min(16.5rem, 40svh); width: min(var(--scene-card-w, 70vw), 19rem); padding: 2.6rem 1.3rem 2.1rem;
    border-radius: 50% 50% 1.1rem 1.1rem / 3.6rem 3.6rem 1.1rem 1.1rem; -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--me-btn-bg);
    box-shadow: 0 0 0 1.5px var(--inv-accent), 0 0 0 6px var(--inv-deep), 0 0 0 7.5px var(--inv-accent), 0 26px 46px -8px rgb(0 0 0 / .65);
}
body.me-body .inv-scene__card::before { content: ''; position: absolute; inset: 7px; border-radius: inherit; border: 1.4px dashed color-mix(in srgb, var(--inv-accent) 75%, transparent); pointer-events: none; }
body.me-body .inv-scene__card .inv-intro__label { color: var(--me-gold-hi); font-family: var(--me-serif); letter-spacing: .2em; }
body.me-body .inv-scene__card .inv-intro__names { color: var(--me-gold-hi); font-family: var(--me-display); }
body.me-body .inv-scene__card .inv-intro__date { color: var(--me-velvet-text); font-family: var(--me-serif); font-size: .86rem; letter-spacing: .05em; }
body.me-body .inv-scene__card .inv-intro__rule { background: linear-gradient(90deg, transparent, var(--inv-accent), transparent); }
body.me-body .inv-intro--scene .inv-intro__skip { background: color-mix(in srgb, var(--inv-deep) 70%, transparent); color: var(--me-gold-hi); border-color: color-mix(in srgb, var(--inv-accent) 60%, transparent); }
@media (max-height: 700px) { body.me-body .inv-scene__card { min-height: 0; padding: 2.1rem 1.1rem 1.7rem; } }