/*
 * Jawa Wayang: a Javanese wayang kulit wedding, dramatic and elegant. Near-black / sogan grounds,
 * gold and cream; a satria and a putri puppet (perforated gold leather on gapit sticks) facing each
 * other, mega mendung clouds, a floral lace ring around round photos, the blencong lamp whose glow
 * flickers and makes the puppets cast moving shadows, a small gunungan as the divider, and a cream
 * kelir screen that slides aside after opening. Art: inline SVG in sections/_defs.
 * Federo (names) + Cinzel (titles) + Lora (reading).
 * Sections: dark (default tokens), sogan (.jw-section--sogan), cream kelir (.jw-section--kelir),
 * parang (.jw-section--parang). Colors from the variant: --inv-primary (gold), --inv-accent (bright
 * gold for key info), --inv-background, --inv-text, --inv-surface, --inv-sogan, --inv-cream,
 * --inv-maroon, --inv-ink. All classes start with "jw-".
 */

:root {
    --inv-primary: #c8962f;
    --inv-accent: #efc76c;
    --inv-background: #0d0a07;
    --inv-text: #f2e6cc;
    --inv-surface: #1b1510;
    --inv-sogan: #2a1b10;
    --inv-cream: #f4e8cc;
    --inv-maroon: #4b1519;
    --inv-ink: #060403;
    --inv-radius: 14px;

    --jw-w: 460px;
    --jw-names: 'Federo', 'Cinzel', Georgia, serif;
    --jw-title: 'Cinzel', 'Times New Roman', Georgia, serif;
    --jw-serif: 'Lora', Georgia, 'Times New Roman', serif;
    --jw-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

    --jw-deep: color-mix(in srgb, var(--inv-background) 70%, var(--inv-ink));
    --jw-gold-ink: color-mix(in srgb, var(--inv-primary) 52%, var(--inv-ink));
    --jw-rod: color-mix(in srgb, var(--inv-primary) 50%, #3a2410);
    /* a faint parang pattern (diagonal S-bands and dots), used as a mask */
    --jw-parang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M-6 24c6 0 8-6 12-8s10-2 12-8 4-10 10-12'/%3E%3Cpath d='M12 42c6 0 8-6 12-8s10-2 12-8 4-10 10-12'/%3E%3Cpath d='M2 30c3-1 4-4 7-5M20 12c3-1 4-4 7-5' stroke-width='1.2'/%3E%3C/g%3E%3Ccircle cx='27' cy='27' r='1.8'/%3E%3Ccircle cx='9' cy='9' r='1.8'/%3E%3C/svg%3E");

    /* context tokens: dark by default, redefined for sogan / kelir sections */
    --jw-fg: var(--inv-text);
    --jw-muted: color-mix(in srgb, var(--inv-text) 80%, transparent);
    --jw-gold: var(--inv-primary);
    --jw-key: var(--inv-accent);
    --jw-line: color-mix(in srgb, var(--inv-primary) 55%, transparent);
    --jw-line-soft: color-mix(in srgb, var(--inv-primary) 22%, transparent);
    --jw-btn-bg: var(--inv-primary);
    --jw-btn-fg: var(--inv-ink);
    --jw-card-bg: linear-gradient(170deg, color-mix(in srgb, var(--inv-surface) 92%, var(--inv-primary) 8%), var(--inv-surface));
    --jw-field-bg: color-mix(in srgb, var(--inv-ink) 55%, transparent);
}

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

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

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

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

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

/* parts of the SVG art, colored through inherited variables (they live inside <use> clones) */
.jw-rod { fill: var(--jw-rod); }
.jw-rod--thin { fill: none; stroke: var(--jw-rod); }
.jw-cloud__fill { fill: var(--jw-cloud-fill, var(--inv-maroon)); }
.jw-cloud__band { fill: none; stroke: var(--jw-cloud-band, color-mix(in srgb, var(--inv-maroon) 55%, var(--inv-ink))); stroke-width: 5; }
.jw-cloud__line { fill: none; stroke: var(--jw-cloud-line, var(--inv-primary)); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.jw-lace__eye { fill: var(--jw-lace-eye, var(--inv-background)); }
.jw-gun__fill { fill: var(--jw-gun-fill, var(--inv-maroon)); }

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

.jw-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--jw-deep); }
.jw-backdrop::before {
    content: ''; position: absolute; inset: -60px;
    background: var(--jw-photo, none) center / cover no-repeat;
    filter: blur(30px) saturate(.6) brightness(.32);
}
.jw-backdrop::after {
    content: ''; position: absolute; inset: 0;
    background: color-mix(in srgb, var(--inv-primary) 16%, transparent);
    -webkit-mask: var(--jw-parang) 0 0 / 54px 54px; mask: var(--jw-parang) 0 0 / 54px 54px;
}

.jw-page {
    position: relative; z-index: 1;
    width: min(100%, var(--jw-w)); min-height: 100vh; margin: 0 auto;
    background: var(--inv-background);
    overflow-x: clip;
}

@media (min-width: 520px) {
    .jw-page { box-shadow: 0 0 0 1px var(--jw-line-soft), 0 0 0 7px color-mix(in srgb, var(--inv-ink) 80%, transparent), 0 0 0 8px var(--jw-line-soft), 0 0 90px rgb(0 0 0 / .65); }
}
@media (max-width: 519px) {
    .jw-backdrop { display: none; }
}

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

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

/* the warm glow of the blencong lamp, flickering */
.jw-lamp-glow {
    position: absolute; z-index: 0; left: 50%; top: 4%;
    width: 150%; aspect-ratio: 1; translate: -50% -28%;
    background: radial-gradient(circle, color-mix(in srgb, var(--inv-accent) 30%, transparent) 0%, color-mix(in srgb, var(--inv-primary) 12%, transparent) 30%, transparent 58%);
    pointer-events: none;
    animation: jw-flicker 3.4s linear infinite;
    will-change: opacity, transform;
}
.jw-lamp-glow--soft { top: 0; opacity: .7; }
@keyframes jw-flicker {
    0%, 100% { opacity: .82; transform: scale(1); }
    9% { opacity: 1; transform: scale(1.02); }
    17% { opacity: .74; transform: scale(.99); }
    31% { opacity: .95; transform: scale(1.015); }
    44% { opacity: .8; transform: scale(1); }
    58% { opacity: 1; transform: scale(1.025); }
    71% { opacity: .86; transform: scale(1.005); }
    84% { opacity: .97; transform: scale(1.02); }
}

/* clouds */
.jw-cloud { position: absolute; z-index: 0; display: block; aspect-ratio: 220 / 120; overflow: visible; pointer-events: none; }
.jw-cloud--gold {
    --jw-cloud-fill: color-mix(in srgb, var(--inv-ink) 62%, transparent);
    --jw-cloud-band: color-mix(in srgb, var(--inv-primary) 30%, transparent);
    --jw-cloud-line: var(--inv-accent);
}

/* the gunungan divider */
.jw-divider { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: 1rem auto 0; color: var(--jw-gold); }
.jw-divider__rule { width: 3.6rem; height: 1px; background: linear-gradient(90deg, transparent, var(--jw-gold)); position: relative; }
.jw-divider__rule::after { content: ''; position: absolute; right: -2px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--jw-gold); }
.jw-divider__rule--end { transform: scaleX(-1); }
.jw-divider__gun { width: 1.5rem; aspect-ratio: 60 / 84; overflow: visible; }

/* the lace ring around a round photo: the lace (cream) is drawn over the photo's edge */
.jw-ring { position: relative; aspect-ratio: 1; color: var(--inv-cream); }
.jw-ring__lace { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .45)); }
.jw-ring__photo, .jw-ring__img {
    position: absolute; inset: 19.3%; z-index: 1; display: grid; place-items: center;
    width: auto; height: auto; border-radius: 50%; object-fit: cover;
    background: var(--jw-photo, none) center 30% / cover no-repeat, radial-gradient(circle, var(--inv-maroon), var(--inv-ink));
}
.jw-ring__img { width: 61.4%; height: 61.4%; inset: 19.3% auto auto 19.3%; }
.jw-ring__gun { width: 38%; aspect-ratio: 60 / 84; color: var(--inv-primary); overflow: visible; }

/* buttons (shared components) */
.inv-button {
    gap: .55rem; padding: .85rem 1.5rem; border-radius: 999px;
    background: var(--jw-btn-bg); color: var(--jw-btn-fg);
    font: 600 .78rem/1.2 var(--jw-title); letter-spacing: .1em;
    box-shadow: 0 10px 22px -12px rgb(0 0 0 / .65), inset 0 -2px 0 rgb(0 0 0 / .18);
}
.inv-button--outline { background: transparent; color: var(--jw-gold); box-shadow: inset 0 0 0 1px var(--jw-line); }
.inv-button--outline:hover { background: color-mix(in srgb, var(--inv-primary) 12%, transparent); }
.inv-button .jw-icon { width: 1.15rem; height: 1.15rem; }

.jw-pill {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: .9rem; padding: .5rem 1.05rem;
    border-radius: 999px; color: var(--jw-gold); text-decoration: none;
    box-shadow: inset 0 0 0 1px var(--jw-line);
    font: 500 .82rem/1 var(--jw-serif); letter-spacing: .02em;
    transition: background .25s ease;
}
.jw-pill:hover { background: color-mix(in srgb, var(--inv-primary) 12%, transparent); }

/* ---------- puppets (cover) ---------- */

.jw-puppet {
    position: absolute; z-index: 1; bottom: 3%;
    width: min(39%, 185px); aspect-ratio: 160 / 320;
    pointer-events: none;
}
.jw-puppet--left { left: -9%; }
.jw-puppet--right { right: -9%; transform: scaleX(-1); }
.jw-puppet svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.jw-puppet__figure { color: var(--inv-primary); filter: drop-shadow(0 6px 10px rgb(0 0 0 / .5)); }
/* the warm patch of lamp light the shadow falls on */
.jw-puppet__glow {
    position: absolute; left: 18%; top: -4%; width: 125%; aspect-ratio: 1;
    background: radial-gradient(circle, color-mix(in srgb, var(--inv-accent) 46%, transparent), color-mix(in srgb, var(--inv-primary) 14%, transparent) 42%, transparent 66%);
    animation: jw-flicker 3s linear infinite; animation-delay: -1.2s;
    will-change: opacity, transform;
}
/* the shadow: the same puppet, dark and soft, swaying as the flame moves */
.jw-puppet__shadow {
    --jw-rod: currentColor;
    color: #000; opacity: .75; filter: blur(2px);
    transform-origin: 50% 100%;
    animation: jw-shadow 4.8s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes jw-shadow {
    0% { transform: translate(14%, -3%) skewX(-3deg) scale(1.05); }
    40% { transform: translate(18%, -2%) skewX(1deg) scale(1.08); }
    100% { transform: translate(11%, -4%) skewX(-5deg) scale(1.04); }
}

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

.jw-cover {
    position: fixed; inset: 0; z-index: 30;
    width: min(100%, var(--jw-w)); margin: 0 auto;
    display: flex; overflow-x: hidden; overflow-y: auto;
    background:
        radial-gradient(120% 60% at 50% 100%, color-mix(in srgb, var(--inv-maroon) 30%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-background), var(--jw-deep));
    color: var(--inv-text);
}
.jw-cover > .jw-lamp-glow { position: fixed; top: 2%; left: 50%; width: min(150vw, 690px); }
.jw-cloud--ring-l { top: clamp(5.5rem, 15vh, 8rem); left: -24%; width: 66%; transform: rotate(-4deg); }
.jw-cloud--ring-r { top: clamp(7.5rem, 20vh, 10.5rem); right: -26%; width: 64%; transform: scaleX(-1) rotate(-6deg); }
.jw-cloud--foot-l { z-index: 2; bottom: -1.5%; left: -18%; width: 64%; }
.jw-cloud--foot-r { z-index: 2; bottom: -2.5%; right: -20%; width: 62%; transform: scaleX(-1); }
.jw-cover .jw-cloud--ring-l, .jw-cover .jw-cloud--ring-r { position: absolute; }

.jw-cover__inner {
    position: relative; z-index: 3;
    width: 100%; min-height: 100%; min-height: 100svh; margin: auto; padding: clamp(.75rem, 3svh, 1.5rem) 1.6rem clamp(2rem, 11svh, 6.5rem);
    display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: .55rem;
    text-align: center;
}

/* the blencong: a brass lamp on a chain with a living flame */
.jw-blencong { position: relative; width: 3.6rem; aspect-ratio: 80 / 70; color: var(--inv-primary); }
.jw-blencong svg { display: block; width: 100%; height: 100%; overflow: visible; }
.jw-flame {
    position: absolute; left: 88%; top: 18%; width: .55rem; height: .9rem;
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    background: radial-gradient(circle at 50% 70%, #fff6d5 0 18%, #ffd36b 40%, #f08a24 78%, transparent 80%);
    box-shadow: 0 0 14px 4px color-mix(in srgb, var(--inv-accent) 55%, transparent);
    transform-origin: 50% 100%;
    animation: jw-flame 1.3s ease-in-out infinite alternate;
}
@keyframes jw-flame {
    0% { transform: scale(1, 1) rotate(-3deg); opacity: .95; }
    35% { transform: scale(.92, 1.12) rotate(2deg); opacity: 1; }
    70% { transform: scale(1.05, .94) rotate(-1deg); opacity: .88; }
    100% { transform: scale(.96, 1.08) rotate(3deg); opacity: 1; }
}

.jw-cover__title { font: 400 1rem/1.4 var(--jw-title); letter-spacing: .1em; color: var(--inv-cream); }

.jw-ring--cover { width: min(70vw, 272px, 36svh); margin: .1rem 0 .4rem; }
.jw-ring--cover .jw-ring__photo { box-shadow: 0 0 0 4px var(--inv-ink), 0 0 40px color-mix(in srgb, var(--inv-accent) 25%, transparent); }

/* the monogram on a maroon medallion under the photo */
.jw-medal {
    position: absolute; z-index: 3; left: 50%; bottom: 2%; translate: -50% 0;
    display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
    min-width: 3.4rem; height: 3.4rem; padding: 0 .7rem; border-radius: 999px;
    background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--inv-maroon) 80%, #fff 8%), var(--inv-maroon) 70%);
    box-shadow: 0 0 0 1.5px var(--inv-primary), 0 0 0 4px var(--inv-ink), 0 0 0 5px var(--jw-line), 0 10px 18px -6px rgb(0 0 0 / .6);
    font: 600 1.05rem/1 var(--jw-title); color: var(--inv-cream);
}
.jw-medal__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--inv-primary); }

.jw-cover__names {
    display: grid; justify-items: center; margin-top: .4rem;
    font: 400 clamp(2.5rem, 12vw, 3.25rem)/1 var(--jw-names); color: var(--inv-cream);
    text-shadow: 0 2px 16px rgb(0 0 0 / .7);
}
.jw-cover__name { max-width: 15rem; overflow-wrap: anywhere; translate: -10% 0; }
.jw-cover__name--end { translate: 8% 0; }
.jw-cover__amp { margin: -.18em 0 -.1em; justify-self: center; translate: 70% 0; font-size: .82em; color: var(--inv-primary); }

.jw-cover__date { margin-top: .5rem; font: 600 .95rem/1.4 var(--jw-serif); letter-spacing: .03em; color: var(--inv-cream); }
.jw-cover__quote { max-width: 15.5rem; font: italic 400 .88rem/1.5 var(--jw-serif); color: var(--jw-muted); }
/* short screens: everything up to the guest box stays above the fold */
@media (max-height: 760px) {
    .jw-cover__inner { gap: .35rem; padding-bottom: 3.6rem; }
    .jw-blencong { width: 3rem; }
    .jw-cover__title { font-size: .92rem; }
    .jw-ring--cover { width: min(70vw, 272px, 30svh); margin: 0 0 .2rem; }
    .jw-cover__names { margin-top: .1rem; font-size: clamp(2.2rem, 10.5vw, 2.6rem); }
    .jw-cover__date { margin-top: .2rem; }
    .jw-cover__quote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; font-size: .84rem; line-height: 1.45; }
    .jw-open { margin-top: .3rem; padding: .75rem 1.7rem; }
    .jw-guest { margin-top: .3rem; }
    .jw-cover .jw-puppet { width: min(33%, 160px); }
    .jw-cloud--foot-l { width: 44%; }
    .jw-cloud--foot-r { width: 42%; }
}
@media (max-height: 660px) {
    .jw-cover__inner { gap: .25rem; padding-bottom: 3rem; }
    .jw-cloud--foot-l { width: 40%; }
    .jw-cloud--foot-r { width: 38%; }
    .jw-blencong { width: 2.6rem; }
    .jw-cover__title { font-size: .86rem; }
    .jw-ring--cover { width: min(70vw, 28svh); }
    .jw-medal { min-width: 2.8rem; height: 2.8rem; font-size: .92rem; }
    .jw-cover__names { font-size: clamp(2rem, 9.5vw, 2.3rem); }
    .jw-cover__date { font-size: .88rem; }
    .jw-cover__quote { font-size: .8rem; }
    .jw-guest__label { font-size: .84rem; }
    .jw-guest__name { font-size: 1rem; }
}

.jw-open { margin-top: .55rem; padding: .85rem 1.9rem; background: var(--inv-primary); color: var(--inv-ink); font-size: .82rem; letter-spacing: .06em; }
.jw-open .jw-icon { width: 1.3rem; height: 1.3rem; }

.jw-guest { margin-top: .6rem; max-width: 15rem; text-shadow: 0 2px 10px rgb(0 0 0 / .9); }
.jw-guest__label { font: 400 .9rem/1.4 var(--jw-serif); color: var(--inv-cream); }
.jw-guest__name { margin-top: .15rem; font: 600 1.08rem/1.35 var(--jw-title); color: var(--inv-cream); overflow-wrap: anywhere; }

.jw-cover--leave { transition: opacity .8s ease, transform .9s cubic-bezier(.7, 0, .3, 1); }
.jw-cover--gone { opacity: 0; transform: scale(1.04); }

/* ---------- hero (first screen after opening) with the kelir ---------- */

.jw-hero {
    position: relative; overflow: hidden; isolation: isolate;
    min-height: min(100vh, 900px); min-height: min(100svh, 900px); padding: 4rem 1.5rem 5rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    background:
        radial-gradient(120% 50% at 50% 100%, color-mix(in srgb, var(--inv-maroon) 32%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-background), var(--jw-deep));
}
.jw-hero > .jw-cloud--foot-l { bottom: -2%; left: -22%; width: 66%; }
.jw-hero > .jw-cloud--foot-r { bottom: -3%; right: -22%; width: 62%; }

.jw-kicker { position: relative; z-index: 1; font: 400 .95rem/1.4 var(--jw-title); letter-spacing: .12em; color: var(--inv-cream); }

/* the couple photo as a lit screen: cream edge, maroon band, gold rule */
.jw-screen {
    position: relative; z-index: 1; width: min(74%, 290px); margin-top: 1.1rem; padding: 6px;
    border-radius: 10px; background: var(--inv-cream);
    box-shadow: 0 0 0 5px var(--inv-maroon), 0 0 0 6px var(--inv-primary), 0 30px 50px -20px rgb(0 0 0 / .8), 0 0 60px color-mix(in srgb, var(--inv-accent) 18%, transparent);
}
.jw-screen__photo {
    display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 6px;
    background: var(--jw-photo, none) center 30% / cover no-repeat, radial-gradient(circle, var(--inv-maroon), var(--inv-ink));
}
.jw-screen__mono { display: flex; gap: .3rem; font: 400 4rem/1 var(--jw-names); color: var(--inv-cream); }

.jw-hero__names {
    position: relative; z-index: 1; margin-top: 2rem;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 .55rem;
    font: 400 clamp(2.2rem, 10vw, 2.9rem)/1.15 var(--jw-names); color: var(--inv-cream);
}
.jw-hero__amp { color: var(--inv-primary); font-size: .8em; }
.jw-hero__date { position: relative; z-index: 1; margin-top: .4rem; font: 600 .78rem/1.4 var(--jw-title); letter-spacing: .2em; color: var(--inv-accent); }

.jw-scroll { position: relative; z-index: 1; width: 1px; height: 2.8rem; margin-top: 1.5rem; background: var(--jw-line-soft); overflow: hidden; }
.jw-scroll span { position: absolute; left: 0; top: -1rem; width: 1px; height: 1rem; background: var(--inv-primary); animation: jw-drip 2.2s ease-in-out infinite; }
@keyframes jw-drip { to { transform: translateY(4rem); } }

/* the kelir: a cream screen lit from behind, the puppets' shadows on it; slides aside after opening */
.jw-kelir {
    position: absolute; inset: 0; z-index: 5; overflow: hidden;
    color: var(--inv-ink);
    background: radial-gradient(85% 60% at 50% 40%, #fffaf0, var(--inv-cream) 55%, color-mix(in srgb, var(--inv-cream) 78%, var(--inv-sogan)) 100%);
    box-shadow: inset 0 14px 0 var(--inv-maroon), inset 0 17px 0 var(--inv-primary);
    transition: transform 1.05s cubic-bezier(.75, 0, .25, 1) .4s, visibility 0s linear 1.5s;
}
.jw-hero.is-open .jw-kelir { transform: translateX(-102%); visibility: hidden; }
.jw-kelir__light {
    position: absolute; left: 50%; top: 34%; width: 120%; aspect-ratio: 1; translate: -50% -50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--inv-accent) 30%, transparent), transparent 60%);
    animation: jw-flicker 3.2s linear infinite;
}
.jw-kelir__fig, .jw-kelir__gun { position: absolute; overflow: visible; --jw-rod: currentColor; --jw-gun-fill: currentColor; opacity: .82; filter: blur(.8px); }
.jw-kelir__fig { bottom: 9%; width: 44%; aspect-ratio: 160 / 320; }
.jw-kelir__fig--l { left: 2%; animation: jw-sway 5s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.jw-kelir__fig--r { right: 2%; scale: -1 1; animation: jw-sway 5.6s ease-in-out infinite alternate-reverse; transform-origin: 50% 100%; }
.jw-kelir__gun { left: 50%; bottom: 14%; width: 22%; aspect-ratio: 60 / 84; translate: -50% 0; opacity: .7; }
@keyframes jw-sway { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg) translateY(-4px); } }
/* the banana-trunk (debog) the puppets stand in */
.jw-kelir__debog {
    position: absolute; left: 0; right: 0; bottom: 0; height: 11%;
    background:
        repeating-linear-gradient(90deg, rgb(0 0 0 / .08) 0 2px, transparent 2px 14px),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-maroon) 70%, var(--inv-ink)), var(--inv-ink));
    box-shadow: 0 -3px 0 var(--inv-primary);
}

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

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

.jw-section {
    position: relative; overflow: hidden; isolation: isolate;
    padding: 4.5rem 1.4rem;
    text-align: center; color: var(--jw-fg);
    background:
        radial-gradient(110% 50% at 50% 0%, color-mix(in srgb, var(--inv-primary) 10%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-background), var(--jw-deep));
}
/* sogan: warm brown with a faint kawung dot lattice */
.jw-section--sogan {
    background:
        radial-gradient(circle, color-mix(in srgb, var(--inv-primary) 10%, transparent) 0 1.4px, transparent 2px) 0 0 / 18px 18px,
        radial-gradient(110% 55% at 50% 0%, color-mix(in srgb, var(--inv-accent) 12%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-sogan), color-mix(in srgb, var(--inv-sogan) 60%, var(--inv-background)));
}
/* cream kelir: light ground lit from the centre, dark text */
.jw-section--kelir {
    --jw-fg: var(--inv-ink);
    --jw-muted: color-mix(in srgb, var(--inv-ink) 78%, transparent);
    --jw-gold: var(--jw-gold-ink);
    --jw-key: var(--inv-maroon);
    --jw-line: color-mix(in srgb, var(--jw-gold-ink) 55%, transparent);
    --jw-line-soft: color-mix(in srgb, var(--jw-gold-ink) 22%, transparent);
    --jw-btn-bg: var(--inv-maroon);
    --jw-btn-fg: var(--inv-cream);
    --jw-card-bg: linear-gradient(170deg, #fffdf7, color-mix(in srgb, #fff 60%, var(--inv-cream)));
    --jw-field-bg: #fff;
    --jw-lace-eye: var(--inv-cream);
    background:
        radial-gradient(90% 50% at 50% 30%, #fffaf0, transparent 70%),
        linear-gradient(180deg, var(--inv-cream), color-mix(in srgb, var(--inv-cream) 88%, var(--inv-sogan)));
    box-shadow: inset 0 6px 0 var(--inv-maroon), inset 0 8px 0 var(--inv-primary), inset 0 -6px 0 var(--inv-maroon), inset 0 -8px 0 var(--inv-primary);
}
/* parang: a faint batik parang over the dark ground */
.jw-section--parang::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: color-mix(in srgb, var(--inv-primary) 13%, transparent);
    -webkit-mask: var(--jw-parang) 0 0 / 44px 44px; mask: var(--jw-parang) 0 0 / 44px 44px;
}

.jw-section > * { position: relative; z-index: 1; }
.jw-section > .jw-cloud, .jw-section > .jw-lamp-glow { position: absolute; z-index: 0; }

.jw-heading { margin-bottom: 2rem; }
.jw-heading__label { font: 600 .68rem/1.4 var(--jw-title); letter-spacing: .34em; text-transform: uppercase; color: var(--jw-gold); }
.jw-heading__title { margin-top: .45rem; font: 600 clamp(1.45rem, 6.6vw, 1.8rem)/1.2 var(--jw-title); letter-spacing: .04em; color: var(--jw-fg); }

.jw-lead { max-width: 24rem; margin: -.5rem auto 1.8rem; color: var(--jw-muted); font-size: .96rem; }

.jw-card {
    position: relative; overflow: hidden;
    background: var(--jw-card-bg);
    border: 1px solid var(--jw-line-soft); border-radius: 18px;
    box-shadow: 0 24px 44px -30px rgb(0 0 0 / .7);
}

/* opening */
.jw-opening { padding-top: 5rem; }
.jw-cloud--edge-l { top: -1.5rem; left: -30%; width: 62%; opacity: .9; }
.jw-cloud--edge-r { top: 1rem; right: -32%; width: 60%; opacity: .9; transform: scaleX(-1); }
.jw-arabic { font: 400 1.75rem/1.8 'Amiri', serif; color: var(--jw-gold); margin-bottom: .4rem; }
.jw-opening__greeting { font: 600 1.02rem/1.5 var(--jw-title); color: var(--jw-fg); }
.jw-opening__message { max-width: 24rem; margin: 1.1rem auto 0; color: var(--jw-muted); }
.jw-quote {
    position: relative; max-width: 24rem; margin: 2.4rem auto 0; padding: 1rem 1.5rem 1.5rem;
    background: var(--inv-cream); color: var(--inv-ink); border-radius: 18px;
    box-shadow: 0 0 0 1px var(--inv-primary), 0 0 0 5px var(--inv-maroon), 0 0 0 6px var(--jw-line), 0 22px 40px -22px rgb(0 0 0 / .7);
}
.jw-quote__mark { display: block; font: 400 2.8rem/1 var(--jw-names); color: var(--inv-maroon); }
.jw-quote blockquote { margin: 0; font: italic 400 .98rem/1.7 var(--jw-serif); }
.jw-quote figcaption { margin-top: .7rem; font: 600 .68rem/1.4 var(--jw-title); letter-spacing: .24em; text-transform: uppercase; color: var(--inv-maroon); }

/* couple */
.jw-person { display: flex; flex-direction: column; align-items: center; }
.jw-person__frame { position: relative; width: min(66%, 238px); }
.jw-ring--person { width: 100%; }
.jw-ring--person .jw-ring__img { box-shadow: 0 0 0 3px var(--inv-ink); }
.jw-ring__img--empty { display: grid; place-items: center; font: 400 3.4rem/1 var(--jw-names); color: var(--inv-cream); }
/* a small puppet beside the portrait: the satria left of the groom, the putri right of the bride */
.jw-person__fig {
    position: absolute; z-index: 3; bottom: -3%; left: -15%; width: 31%; aspect-ratio: 160 / 320; overflow: visible;
    color: var(--inv-primary); filter: drop-shadow(0 8px 10px rgb(0 0 0 / .55));
    transform-origin: 50% 100%; animation: jw-sway 6s ease-in-out infinite alternate;
}
.jw-person--end .jw-person__fig { left: auto; right: -15%; scale: -1 1; }
.jw-person__role { margin-top: 1.3rem; font: 600 .66rem/1.4 var(--jw-title); letter-spacing: .3em; text-transform: uppercase; color: var(--jw-gold); }
.jw-person__nick { margin-top: .2rem; font: 400 2.5rem/1.15 var(--jw-names); color: var(--inv-cream); }
.jw-person__name { margin-top: .3rem; font: 600 1rem/1.4 var(--jw-title); letter-spacing: .03em; }
.jw-person__parents { margin-top: .55rem; font-size: .95rem; color: var(--jw-muted); }
.jw-person__parents strong { color: var(--jw-fg); font-weight: 600; }

.jw-amp { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: 2.2rem 0 2.4rem; }
.jw-amp__rule { width: 4.5rem; height: 1px; background: linear-gradient(90deg, transparent, var(--jw-gold)); }
.jw-amp__rule:last-child { transform: scaleX(-1); }
.jw-amp__sign { font: 400 2.6rem/1 var(--jw-names); color: var(--inv-primary); }

/* countdown: the calendar on cream paper, then compact boxes */
.jw-cal {
    --inv-cal-bg: var(--inv-cream);
    --inv-cal-text: var(--inv-ink);
    --inv-cal-mark: var(--inv-maroon);
    max-width: 20rem; margin: 0 auto 1.6rem; border-radius: 16px;
    border-top: 6px solid var(--inv-maroon);
    box-shadow: 0 0 0 1px var(--inv-primary), 0 22px 40px -22px rgb(0 0 0 / .8);
    font-family: var(--jw-serif);
}
.jw-cal .inv-cal__month { font: 400 1.7rem/1.1 var(--jw-names); color: var(--inv-maroon); }
.jw-cal .inv-cal__year { font-family: var(--jw-title); }
.jw-cal .inv-cal__dow { font-family: var(--jw-title); }
.jw-cal .inv-cal__note { font-weight: 600; }

.inv-countdown { gap: .45rem; }
.inv-countdown__item {
    flex: 1; max-width: 4.6rem; min-width: 0; padding: .7rem .2rem .6rem;
    border-radius: 12px; color: var(--inv-cream);
    background: linear-gradient(170deg, color-mix(in srgb, var(--inv-surface) 85%, var(--inv-primary) 15%), var(--inv-surface));
    box-shadow: inset 0 0 0 1px var(--jw-line), 0 12px 22px -14px rgb(0 0 0 / .7);
}
.inv-countdown__value { font: 600 1.45rem/1.15 var(--jw-title); color: var(--inv-accent); }
.inv-countdown__label { margin-top: .2rem; font: 600 .56rem/1.2 var(--jw-title); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.inv-countdown__done { font-style: italic; color: var(--jw-muted); }
.inv-countdown__actions { margin-top: 1.4rem; }
.inv-countdown__actions .inv-button { padding: .65rem 1rem; font-size: .64rem; letter-spacing: .06em; }

/* ---------- events (W): cream cards with a maroon header band ---------- */

.jw-events__list { display: grid; gap: 1.8rem; max-width: 23rem; margin: 0 auto; }
.jw-event {
    --jw-gold: var(--jw-gold-ink);
    --jw-line: color-mix(in srgb, var(--jw-gold-ink) 55%, transparent);
    --jw-btn-bg: var(--inv-maroon);
    --jw-btn-fg: var(--inv-cream);
    overflow: hidden; border-radius: 30px;
    background: linear-gradient(180deg, #fffaf0, var(--inv-cream));
    color: var(--inv-ink);
    box-shadow: 0 0 0 1px var(--inv-primary), 0 28px 50px -28px rgb(0 0 0 / .85);
}
.jw-event__band {
    position: relative; padding: 1.1rem 1rem 1.15rem;
    border-radius: 30px 30px 0 0;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--inv-primary) 22%, transparent) 0 1.2px, transparent 1.8px) 0 0 / 12px 12px,
        linear-gradient(170deg, color-mix(in srgb, var(--inv-maroon) 86%, #fff 8%), var(--inv-maroon));
    box-shadow: inset 0 -3px 0 var(--inv-primary);
    color: var(--inv-cream);
}
.jw-event__gun { display: block; width: 1.3rem; aspect-ratio: 60 / 84; margin: 0 auto .25rem; color: var(--inv-primary); overflow: visible; --jw-gun-fill: color-mix(in srgb, var(--inv-ink) 40%, transparent); }
.jw-event__name { font: 400 clamp(1.6rem, 7.6vw, 1.95rem)/1.15 var(--jw-names); overflow-wrap: anywhere; }
.jw-event__photo {
    display: block; aspect-ratio: 16 / 9; margin: 1rem 1rem 0; border-radius: 18px;
    background: var(--jw-photo) center 30% / cover no-repeat, var(--inv-sogan);
    box-shadow: 0 0 0 1px var(--jw-line);
}
.jw-event__body { display: grid; justify-items: center; gap: .55rem; padding: 1.15rem 1.25rem 1.5rem; }
.jw-event__time, .jw-event__date { display: inline-flex; align-items: center; gap: .45rem; }
.jw-event__time { font: 700 1.05rem/1.3 var(--jw-title); color: var(--inv-maroon); }
.jw-event__date { font: 600 .95rem/1.4 var(--jw-serif); }
.jw-event .jw-icon { color: var(--jw-gold-ink); }
.jw-event__place { display: grid; justify-items: center; gap: .1rem; margin-top: .3rem; }
.jw-event__place .jw-icon { width: 1.3rem; height: 1.3rem; margin-bottom: .15rem; }
.jw-event__venue { font: 600 1rem/1.35 var(--jw-title); overflow-wrap: anywhere; }
.jw-event__address { font-size: .9rem; line-height: 1.5; color: color-mix(in srgb, var(--inv-ink) 78%, transparent); overflow-wrap: anywhere; }
.jw-event__dress {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: .35rem; padding: .55rem .9rem;
    border: 1.5px dashed color-mix(in srgb, var(--inv-ink) 35%, transparent); border-radius: 14px;
    font-size: .88rem; line-height: 1.4;
}
.jw-event__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .6rem; }
.jw-event__actions .inv-button { padding: .62rem 1rem; font-size: .66rem; letter-spacing: .05em; }
.jw-event__actions .inv-maps { margin: 0; }
.jw-event__save { color: var(--inv-maroon); box-shadow: inset 0 0 0 1px var(--inv-maroon); }

/* ---------- love story (L): compact zig-zag ---------- */

.jw-story { padding-left: .9rem; padding-right: .9rem; }
.jw-zig { position: relative; max-width: 25rem; margin: 0 auto; padding: 0; list-style: none; }
.jw-zig::before {
    content: ''; position: absolute; left: 50%; top: .5rem; bottom: 0; width: 1px; translate: -50% 0;
    background: linear-gradient(180deg, var(--jw-line), var(--jw-line) 85%, transparent);
}
.jw-zig__item {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr); column-gap: .6rem; align-items: start;
    grid-template-areas: "text num meta";
}
.jw-zig__item + .jw-zig__item { margin-top: 2.2rem; }
.jw-zig__item.is-flip { grid-template-areas: "meta num text"; }
.jw-zig__num {
    grid-area: num; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
    background: var(--inv-cream); box-shadow: inset 0 0 0 1px var(--jw-gold), 0 0 0 4px var(--inv-cream);
    font: 600 .68rem/1 var(--jw-title); color: var(--jw-gold);
}
.jw-zig__text { grid-area: text; min-width: 0; text-align: right; }
.is-flip .jw-zig__text { text-align: left; }
.jw-zig__title { margin-top: .2rem; font: 700 .98rem/1.3 var(--jw-title); color: var(--jw-fg); overflow-wrap: anywhere; }
.jw-zig__rule { display: block; width: 72%; margin: .45rem 0 .5rem auto; border-top: 1.5px dotted var(--jw-line); }
.is-flip .jw-zig__rule { margin-left: 0; margin-right: auto; }
.jw-zig__story { font-size: .86rem; line-height: 1.55; color: var(--jw-muted); overflow-wrap: anywhere; }
.jw-zig__meta { grid-area: meta; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; text-align: left; }
.is-flip .jw-zig__meta { align-items: flex-end; text-align: right; }
.jw-zig__date { margin-top: .15rem; font: italic 500 1.12rem/1.25 var(--jw-serif); color: var(--inv-maroon); overflow-wrap: anywhere; }
.jw-zig__photo {
    display: block; width: min(6.4rem, 100%); aspect-ratio: 1; object-fit: cover; border-radius: 50%;
    border: 3px solid #fffaf0;
    box-shadow: 0 0 0 1px var(--jw-gold), 0 12px 20px -10px rgb(0 0 0 / .45);
}

/* ---------- gallery (G): the shared slider ---------- */

.jw-gallery .inv-gallery-wrap { min-width: 0; }
.jw-gallery .inv-gallery-slider { grid-template-columns: minmax(0, 1fr); max-width: 24rem; margin: 0 auto; }
.inv-gallery-slider__stage { border-radius: 18px; box-shadow: 0 0 0 1px var(--inv-primary), 0 0 0 5px var(--inv-ink), 0 0 0 6px var(--jw-line), 0 26px 44px -24px rgb(0 0 0 / .9); }
.inv-gallery-slider__thumb { border-radius: 10px; }
.inv-gallery-slider__thumb.is-active { border-color: var(--inv-primary); }
.inv-gallery-slider__arrow { background: var(--inv-primary); color: var(--inv-ink); font-weight: 700; }
.inv-gallery-slider__count { background: color-mix(in srgb, var(--inv-ink) 70%, transparent); color: var(--inv-cream); font-family: var(--jw-title); }
.inv-gallery__play { background: color-mix(in srgb, var(--inv-ink) 70%, transparent); color: var(--inv-cream); }

/* live streaming */
.jw-live__card { max-width: 24rem; margin: 0 auto; padding: 1.7rem 1.4rem; }
.jw-live__badge {
    display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem;
    border-radius: 999px; background: var(--inv-maroon); color: var(--inv-cream);
    font: 600 .66rem/1 var(--jw-title); letter-spacing: .2em;
    box-shadow: 0 0 0 1px var(--jw-line);
}
.jw-live__badge span { width: .45rem; height: .45rem; border-radius: 50%; background: #ffb9a8; animation: jw-blink 1.4s ease-in-out infinite; }
@keyframes jw-blink { 50% { opacity: .25; } }
.jw-live__text { margin: 1rem 0 .5rem; }
.jw-live__note { margin-bottom: 1.1rem; font: 600 .98rem/1.5 var(--jw-serif); color: var(--jw-key); }
.jw-live__card .inv-button { margin-top: .5rem; }

/* ---------- gift: sogan bank cards with a gold chip, two per row ---------- */

.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 .8rem .9rem;
    border-radius: 16px; text-align: left; color: var(--inv-cream);
    background:
        linear-gradient(118deg, transparent 24%, rgb(255 255 255 / .07) 38%, transparent 52%),
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--inv-maroon) 85%, transparent), transparent 70%),
        linear-gradient(150deg, var(--inv-sogan), var(--inv-ink) 80%);
    box-shadow: 0 18px 30px -18px rgb(0 0 0 / .85), inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 50%, transparent);
}
.inv-gift__account + .inv-gift__account { margin-top: 0; }
/* a faint parang across the card */
.inv-gift__account::after {
    content: ''; position: absolute; z-index: -1; inset: 0;
    background: color-mix(in srgb, var(--inv-primary) 10%, transparent);
    -webkit-mask: var(--jw-parang) 0 0 / 30px 30px; mask: var(--jw-parang) 0 0 / 30px 30px;
}
.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, #f8e7b8, #d4a03c 55%, #f2d58c);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2);
}
.inv-gift__bank {
    grid-area: bank; justify-self: end; min-width: 0; max-width: 100%; margin: 0;
    font: 600 .66rem/1.2 var(--jw-title); 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: .8rem 0 .15rem;
    font: 500 .98rem/1.25 var(--jw-mono); letter-spacing: .03em; color: var(--inv-cream);
    overflow-wrap: anywhere;
}
.inv-gift__holder { grid-area: holder; margin: 0; font: 600 .6rem/1.35 var(--jw-title); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-cream) 85%, transparent); overflow-wrap: anywhere; }
.inv-gift__account .inv-button {
    grid-area: button; justify-self: start; margin-top: .6rem; padding: .35rem .7rem; border-radius: 999px;
    font-size: .6rem; letter-spacing: .04em; color: var(--inv-accent); background: rgb(255 255 255 / .06);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 65%, transparent);
}
/* the gift address stays a plain card */
.inv-gift__account.inv-gift__address {
    display: block; padding: 1.5rem 1.3rem; text-align: center; color: var(--jw-fg);
    background: var(--jw-card-bg);
    box-shadow: inset 0 0 0 1px var(--jw-line-soft), 0 20px 40px -28px rgb(0 0 0 / .8);
}
.inv-gift__address::before, .inv-gift__address::after { content: none; }
.inv-gift__address .inv-gift__bank { justify-self: auto; text-align: center; font: 600 .68rem/1.4 var(--jw-title); letter-spacing: .3em; color: var(--jw-gold); }
.inv-gift__address .inv-gift__holder { margin: .6rem 0 .2rem; font: 600 1rem/1.35 var(--jw-title); letter-spacing: 0; text-transform: none; color: var(--jw-fg); }
.inv-gift__address p:not([class]) { color: var(--jw-muted); }
.inv-gift__address .inv-button { margin-top: 1rem; color: var(--jw-gold); background: transparent; box-shadow: inset 0 0 0 1px var(--jw-line); }

/* ---------- rsvp & wishes forms ---------- */

.jw-form { max-width: 24rem; margin: 0 auto; padding: 1.5rem 1.25rem; text-align: left; border-top: 5px solid var(--inv-maroon); }
.inv-form { gap: .9rem; }
.inv-form label, .inv-form__choices legend { font: 600 .8rem/1.4 var(--jw-serif); color: var(--jw-muted); }
.inv-form input:not([type=radio]):not([type=checkbox]), .inv-form select, .inv-form textarea {
    padding: .7rem .85rem; border-radius: 10px;
    border: 1px solid var(--jw-line);
    background: var(--jw-field-bg); color: var(--jw-fg);
    font: 400 1rem/1.4 var(--jw-serif);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.inv-form input::placeholder, .inv-form textarea::placeholder { color: color-mix(in srgb, var(--jw-fg) 45%, transparent); }
.inv-form input:focus, .inv-form select:focus, .inv-form textarea:focus {
    outline: none; border-color: var(--jw-gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-primary) 25%, transparent);
}
.inv-form option { background: #fff; color: var(--inv-ink); }
.inv-form input[type=radio], .inv-form input[type=checkbox] { accent-color: var(--inv-maroon); }
.inv-form__choices label { color: var(--jw-fg); font-size: .92rem; }
.inv-form__notice { color: var(--jw-fg); background: color-mix(in srgb, var(--inv-primary) 16%, transparent); border: 1px solid var(--jw-line-soft); }
.inv-form .inv-button { justify-self: stretch; margin-top: .3rem; }
.inv-rsvp__deadline { font-style: italic; color: var(--jw-gold); }

.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: 12px;
    background: color-mix(in srgb, var(--inv-ink) 35%, transparent);
    box-shadow: inset 0 0 0 1px var(--jw-line-soft), inset 0 -14px 16px -14px rgb(0 0 0 / .5);
    scrollbar-color: color-mix(in srgb, var(--inv-primary) 50%, transparent) transparent;
}
.inv-wishes__empty { text-align: center; font-style: italic; }
.inv-wish {
    padding: .65rem .8rem; border-radius: 10px;
    background: color-mix(in srgb, var(--inv-background) 60%, transparent);
    border: 1px solid var(--jw-line-soft); border-left: 3px solid var(--inv-primary);
}
.inv-wish__name { font: 600 .82rem/1.35 var(--jw-title); color: var(--inv-accent); }
.inv-wish__message { font-size: .88rem; line-height: 1.5; }
.inv-wish__time { margin-top: .25rem; font: 400 .68rem/1.3 var(--jw-serif); letter-spacing: .03em; }
.inv-wish__reply { margin-top: .5rem; padding: .45rem .65rem; background: color-mix(in srgb, var(--inv-primary) 12%, transparent); }
.inv-wish__reply-text { font-size: .85rem; }
.inv-wishes__page-button { color: var(--jw-gold); }

/* ---------- closing (C): full-bleed photo, gold clouds ---------- */

.jw-closing {
    position: relative; overflow: hidden; isolation: isolate;
    min-height: min(100vh, 860px); min-height: min(100svh, 860px);
    display: flex; flex-direction: column; justify-content: flex-end;
    text-align: center; color: var(--inv-cream);
    background: var(--jw-deep);
}
.jw-closing__photo { position: absolute; inset: -40px 0; z-index: -2; background: var(--jw-photo) center 30% / cover no-repeat; }
.jw-closing::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--inv-ink) 25%, transparent) 0%,
        transparent 22%,
        color-mix(in srgb, var(--inv-ink) 55%, transparent) 46%,
        color-mix(in srgb, var(--inv-ink) 92%, transparent) 72%,
        var(--inv-ink) 100%);
}
.jw-cloud--close-l { z-index: 0; bottom: -1.6rem; left: -20%; width: 44%; }
.jw-cloud--close-r { z-index: 0; bottom: -2rem; right: -22%; width: 41%; transform: scaleX(-1); }
.jw-closing__inner { position: relative; z-index: 1; padding: 9rem 1.6rem 1.75rem; }
.jw-closing__label { font: 600 .7rem/1.4 var(--jw-title); letter-spacing: .38em; text-transform: uppercase; color: var(--inv-accent); }
.jw-closing__thanks { margin-top: .3rem; font: 400 clamp(2.4rem, 11vw, 3rem)/1.1 var(--jw-names); text-shadow: 0 3px 18px rgb(0 0 0 / .6); }
.jw-closing .jw-divider { --jw-gold: var(--inv-primary); color: var(--inv-primary); }
.jw-closing__names { margin-top: 1.2rem; font: 400 clamp(1.8rem, 8vw, 2.2rem)/1.2 var(--jw-names); }
.jw-closing__names span { color: var(--inv-primary); }
.jw-closing__message { max-width: 23rem; margin: .9rem auto 0; color: color-mix(in srgb, var(--inv-cream) 90%, transparent); }
.jw-closing__sign { margin-top: 1.3rem; font: 600 .72rem/1.5 var(--jw-title); letter-spacing: .26em; text-transform: uppercase; color: var(--inv-accent); }

/* ---------- foot ---------- */

.jw-foot { padding: .6rem 1.5rem 0; background: var(--inv-ink); text-align: center; }
.jw-foot .jw-divider { margin-top: 0; --jw-gold: var(--inv-primary); }
.jw-branding { position: relative; z-index: 1; color: var(--inv-text); font-family: var(--jw-serif); }

/* ---------- floating UI (R4): icon menu, QR tab, back-to-top, music — kept inside the column ---------- */

.inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--inv-ink) 92%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-cream) 75%, transparent);
    --inv-nav-active: var(--inv-primary);
    border-color: color-mix(in srgb, var(--inv-primary) 40%, transparent);
    box-shadow: 0 14px 34px -12px rgb(0 0 0 / .8), inset 0 -2px 0 color-mix(in srgb, var(--inv-primary) 55%, transparent);
    font-family: var(--jw-serif);
}
.inv-nav--icons .inv-nav__item.is-active {
    color: var(--inv-ink);
    box-shadow: 0 0 0 2px var(--inv-maroon), 0 0 0 3px var(--inv-primary), 0 10px 18px -6px rgb(0 0 0 / .6);
}

.jw-body .inv-music { right: max(1rem, calc(50vw - var(--jw-w) / 2 + 1rem)); }
.jw-body .inv-to-top { left: max(1rem, calc(50vw - var(--jw-w) / 2 + 1rem)); }
.jw-body .inv-qr-tab { right: max(0px, calc(50vw - var(--jw-w) / 2)); }

.inv-music__button { background: var(--inv-primary); color: var(--inv-ink); box-shadow: 0 8px 22px -8px rgb(0 0 0 / .7), 0 0 0 3px color-mix(in srgb, var(--inv-ink) 60%, transparent); }
.inv-autoscroll { font-family: var(--jw-serif); background: color-mix(in srgb, var(--inv-ink) 90%, transparent); color: var(--inv-accent); border-color: color-mix(in srgb, var(--inv-primary) 45%, transparent); }
.inv-autoscroll--running { background: var(--inv-maroon); color: var(--inv-cream); }

.inv-qr-tab {
    background: color-mix(in srgb, var(--inv-ink) 94%, transparent); color: var(--inv-accent);
    border-color: color-mix(in srgb, var(--inv-primary) 45%, transparent); font-family: var(--jw-title);
    box-shadow: -6px 8px 20px -10px rgb(0 0 0 / .7), inset 3px 0 0 var(--inv-maroon);
}
.inv-qr-sheet__card { font-family: var(--jw-serif); border-radius: 18px; }

.inv-to-top {
    border-radius: 50%;
    background: var(--inv-ink); color: var(--inv-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 50%, transparent), 0 6px 16px -6px rgb(0 0 0 / .6);
}

.inv-checkin { color: var(--inv-ink); }
.inv-checkin__title { color: var(--inv-maroon); }

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .jw-lamp-glow, .jw-puppet__glow, .jw-puppet__shadow, .jw-flame, .jw-kelir__light, .jw-kelir__fig,
    .jw-person__fig, .jw-scroll span, .jw-live__badge span { animation: none; will-change: auto; }
    .jw-puppet__shadow { transform: translate(14%, -3%) scale(1.05); }
    .jw-kelir { transition: none; }
    .jw-hero.is-open .jw-kelir { display: none; }
    .jw-cover--leave { transition: opacity .3s ease; }
    .jw-cover--gone { transform: none; }
}

/* the curtain reveal starts as a narrow slit (not zero width): IntersectionObserver in Chromium measures the clipped
   area, so a fully (or almost fully) clipped element would never reach the threshold and stay hidden */
html.inv-anim .jw-main [data-reveal="curtain"]:not(.is-revealed) { clip-path: inset(0 41% 0 41%); }
/* fully open the curtain beyond the box, so outer frames and shadows (box-shadow rings) are not cut off */
html.inv-anim .jw-main [data-reveal="curtain"].is-revealed { clip-path: inset(-80px); }