/*
 * Template "Signature Keraton Jawa" — Javanese royal (keraton) elegance. Mobile-first.
 * Colors from the chosen variant: --inv-primary (deep keraton green / sogan / indigo / maroon),
 * --inv-accent (gold), --inv-secondary (sogan brown, labels on light grounds), --inv-background
 * (warm ivory), --inv-text. Fonts: --inv-font-display (names, script) and --inv-font-heading
 * (short capital labels) from the client's choice (<x-inv.head>), Cormorant Garamond for titles and text.
 * Rhythm: deep and ivory sections alternate; one reveal style (fade-up); gold rules grow on reveal.
 */

:root {
    --kj-display: var(--inv-font-display, 'Allura', cursive);
    --kj-caps: var(--inv-font-heading, 'Cinzel', Georgia, serif);
    --kj-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --kj-p: var(--inv-primary);
    --kj-p-soft: color-mix(in srgb, var(--inv-primary) 86%, #fff);
    --kj-deep: color-mix(in srgb, var(--inv-primary) 78%, #000);
    --kj-gold: var(--inv-accent);
    --kj-gold-light: color-mix(in srgb, var(--inv-accent) 66%, #fff6dc);
    --kj-line: color-mix(in srgb, var(--inv-accent) 70%, transparent);
    --kj-sogan: var(--inv-secondary, color-mix(in srgb, var(--inv-accent) 45%, var(--inv-text)));
    --kj-ivory: var(--inv-background);
    --kj-card: color-mix(in srgb, var(--inv-background) 55%, #fff);
    --kj-paper: color-mix(in srgb, var(--inv-background) 86%, var(--inv-accent));
    --kj-on-dark: color-mix(in srgb, var(--inv-background) 88%, #fff);
    --kj-on-dark-soft: color-mix(in srgb, var(--inv-background) 80%, transparent);
    --kj-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    --kj-column: 480px;
    --inv-radius: 3px;
    --kj-m-parang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg transform='translate(24 24) rotate(-45)' fill='none' stroke='black'%3E%3Cpath d='M-60 -66.98H60M-60 -46.28H60' stroke-width='.9'/%3E%3Cpath d='M-79.20 -47.88C-78.20 -57.88 -68.88 -55.88 -67.88 -65.38M-67.88 -47.88C-66.88 -57.88 -57.57 -55.88 -56.57 -65.38M-56.57 -47.88C-55.57 -57.88 -46.25 -55.88 -45.25 -65.38M-45.25 -47.88C-44.25 -57.88 -34.94 -55.88 -33.94 -65.38M-33.94 -47.88C-32.94 -57.88 -23.63 -55.88 -22.63 -65.38M-22.63 -47.88C-21.63 -57.88 -12.31 -55.88 -11.31 -65.38M-11.31 -47.88C-10.31 -57.88 -1.00 -55.88 0.00 -65.38M0.00 -47.88C1.00 -57.88 10.31 -55.88 11.31 -65.38M11.31 -47.88C12.31 -57.88 21.63 -55.88 22.63 -65.38M22.63 -47.88C23.63 -57.88 32.94 -55.88 33.94 -65.38M33.94 -47.88C34.94 -57.88 44.25 -55.88 45.25 -65.38M45.25 -47.88C46.25 -57.88 55.57 -55.88 56.57 -65.38M56.57 -47.88C57.57 -57.88 66.88 -55.88 67.88 -65.38M67.88 -47.88C68.88 -57.88 78.20 -55.88 79.20 -65.38M79.20 -47.88C80.20 -57.88 89.51 -55.88 90.51 -65.38' stroke-width='3.2' stroke-linecap='round'/%3E%3Cg fill='black' stroke='none'%3E%3Crect x='-75.14' y='-41.68' width='3.2' height='3.2' transform='rotate(45 -73.54 -40.08)'/%3E%3Crect x='-63.83' y='-41.68' width='3.2' height='3.2' transform='rotate(45 -62.23 -40.08)'/%3E%3Crect x='-52.51' y='-41.68' width='3.2' height='3.2' transform='rotate(45 -50.91 -40.08)'/%3E%3Crect x='-41.20' y='-41.68' width='3.2' height='3.2' transform='rotate(45 -39.60 -40.08)'/%3E%3Crect x='-29.88' y='-41.68' width='3.2' height='3.2' transform='rotate(45 -28.28 -40.08)'/%3E%3Crect x='-18.57' y='-41.68' width='3.2' height='3.2' transform='rotate(45 -16.97 -40.08)'/%3E%3Crect x='-7.26' y='-41.68' width='3.2' height='3.2' transform='rotate(45 -5.66 -40.08)'/%3E%3Crect x='4.06' y='-41.68' width='3.2' height='3.2' transform='rotate(45 5.66 -40.08)'/%3E%3Crect x='15.37' y='-41.68' width='3.2' height='3.2' transform='rotate(45 16.97 -40.08)'/%3E%3Crect x='26.68' y='-41.68' width='3.2' height='3.2' transform='rotate(45 28.28 -40.08)'/%3E%3Crect x='38.00' y='-41.68' width='3.2' height='3.2' transform='rotate(45 39.60 -40.08)'/%3E%3Crect x='49.31' y='-41.68' width='3.2' height='3.2' transform='rotate(45 50.91 -40.08)'/%3E%3Crect x='60.63' y='-41.68' width='3.2' height='3.2' transform='rotate(45 62.23 -40.08)'/%3E%3Crect x='71.94' y='-41.68' width='3.2' height='3.2' transform='rotate(45 73.54 -40.08)'/%3E%3Crect x='83.25' y='-41.68' width='3.2' height='3.2' transform='rotate(45 84.85 -40.08)'/%3E%3C/g%3E%3Cpath d='M-60 -33.04H60M-60 -12.34H60' stroke-width='.9'/%3E%3Cpath d='M-79.20 -13.94C-78.20 -23.94 -68.88 -21.94 -67.88 -31.44M-67.88 -13.94C-66.88 -23.94 -57.57 -21.94 -56.57 -31.44M-56.57 -13.94C-55.57 -23.94 -46.25 -21.94 -45.25 -31.44M-45.25 -13.94C-44.25 -23.94 -34.94 -21.94 -33.94 -31.44M-33.94 -13.94C-32.94 -23.94 -23.63 -21.94 -22.63 -31.44M-22.63 -13.94C-21.63 -23.94 -12.31 -21.94 -11.31 -31.44M-11.31 -13.94C-10.31 -23.94 -1.00 -21.94 0.00 -31.44M0.00 -13.94C1.00 -23.94 10.31 -21.94 11.31 -31.44M11.31 -13.94C12.31 -23.94 21.63 -21.94 22.63 -31.44M22.63 -13.94C23.63 -23.94 32.94 -21.94 33.94 -31.44M33.94 -13.94C34.94 -23.94 44.25 -21.94 45.25 -31.44M45.25 -13.94C46.25 -23.94 55.57 -21.94 56.57 -31.44M56.57 -13.94C57.57 -23.94 66.88 -21.94 67.88 -31.44M67.88 -13.94C68.88 -23.94 78.20 -21.94 79.20 -31.44M79.20 -13.94C80.20 -23.94 89.51 -21.94 90.51 -31.44' stroke-width='3.2' stroke-linecap='round'/%3E%3Cg fill='black' stroke='none'%3E%3Crect x='-75.14' y='-7.74' width='3.2' height='3.2' transform='rotate(45 -73.54 -6.14)'/%3E%3Crect x='-63.83' y='-7.74' width='3.2' height='3.2' transform='rotate(45 -62.23 -6.14)'/%3E%3Crect x='-52.51' y='-7.74' width='3.2' height='3.2' transform='rotate(45 -50.91 -6.14)'/%3E%3Crect x='-41.20' y='-7.74' width='3.2' height='3.2' transform='rotate(45 -39.60 -6.14)'/%3E%3Crect x='-29.88' y='-7.74' width='3.2' height='3.2' transform='rotate(45 -28.28 -6.14)'/%3E%3Crect x='-18.57' y='-7.74' width='3.2' height='3.2' transform='rotate(45 -16.97 -6.14)'/%3E%3Crect x='-7.26' y='-7.74' width='3.2' height='3.2' transform='rotate(45 -5.66 -6.14)'/%3E%3Crect x='4.06' y='-7.74' width='3.2' height='3.2' transform='rotate(45 5.66 -6.14)'/%3E%3Crect x='15.37' y='-7.74' width='3.2' height='3.2' transform='rotate(45 16.97 -6.14)'/%3E%3Crect x='26.68' y='-7.74' width='3.2' height='3.2' transform='rotate(45 28.28 -6.14)'/%3E%3Crect x='38.00' y='-7.74' width='3.2' height='3.2' transform='rotate(45 39.60 -6.14)'/%3E%3Crect x='49.31' y='-7.74' width='3.2' height='3.2' transform='rotate(45 50.91 -6.14)'/%3E%3Crect x='60.63' y='-7.74' width='3.2' height='3.2' transform='rotate(45 62.23 -6.14)'/%3E%3Crect x='71.94' y='-7.74' width='3.2' height='3.2' transform='rotate(45 73.54 -6.14)'/%3E%3Crect x='83.25' y='-7.74' width='3.2' height='3.2' transform='rotate(45 84.85 -6.14)'/%3E%3C/g%3E%3Cpath d='M-60 0.90H60M-60 21.60H60' stroke-width='.9'/%3E%3Cpath d='M-79.20 20.00C-78.20 10.00 -68.88 12.00 -67.88 2.50M-67.88 20.00C-66.88 10.00 -57.57 12.00 -56.57 2.50M-56.57 20.00C-55.57 10.00 -46.25 12.00 -45.25 2.50M-45.25 20.00C-44.25 10.00 -34.94 12.00 -33.94 2.50M-33.94 20.00C-32.94 10.00 -23.63 12.00 -22.63 2.50M-22.63 20.00C-21.63 10.00 -12.31 12.00 -11.31 2.50M-11.31 20.00C-10.31 10.00 -1.00 12.00 0.00 2.50M0.00 20.00C1.00 10.00 10.31 12.00 11.31 2.50M11.31 20.00C12.31 10.00 21.63 12.00 22.63 2.50M22.63 20.00C23.63 10.00 32.94 12.00 33.94 2.50M33.94 20.00C34.94 10.00 44.25 12.00 45.25 2.50M45.25 20.00C46.25 10.00 55.57 12.00 56.57 2.50M56.57 20.00C57.57 10.00 66.88 12.00 67.88 2.50M67.88 20.00C68.88 10.00 78.20 12.00 79.20 2.50M79.20 20.00C80.20 10.00 89.51 12.00 90.51 2.50' stroke-width='3.2' stroke-linecap='round'/%3E%3Cg fill='black' stroke='none'%3E%3Crect x='-75.14' y='26.20' width='3.2' height='3.2' transform='rotate(45 -73.54 27.80)'/%3E%3Crect x='-63.83' y='26.20' width='3.2' height='3.2' transform='rotate(45 -62.23 27.80)'/%3E%3Crect x='-52.51' y='26.20' width='3.2' height='3.2' transform='rotate(45 -50.91 27.80)'/%3E%3Crect x='-41.20' y='26.20' width='3.2' height='3.2' transform='rotate(45 -39.60 27.80)'/%3E%3Crect x='-29.88' y='26.20' width='3.2' height='3.2' transform='rotate(45 -28.28 27.80)'/%3E%3Crect x='-18.57' y='26.20' width='3.2' height='3.2' transform='rotate(45 -16.97 27.80)'/%3E%3Crect x='-7.26' y='26.20' width='3.2' height='3.2' transform='rotate(45 -5.66 27.80)'/%3E%3Crect x='4.06' y='26.20' width='3.2' height='3.2' transform='rotate(45 5.66 27.80)'/%3E%3Crect x='15.37' y='26.20' width='3.2' height='3.2' transform='rotate(45 16.97 27.80)'/%3E%3Crect x='26.68' y='26.20' width='3.2' height='3.2' transform='rotate(45 28.28 27.80)'/%3E%3Crect x='38.00' y='26.20' width='3.2' height='3.2' transform='rotate(45 39.60 27.80)'/%3E%3Crect x='49.31' y='26.20' width='3.2' height='3.2' transform='rotate(45 50.91 27.80)'/%3E%3Crect x='60.63' y='26.20' width='3.2' height='3.2' transform='rotate(45 62.23 27.80)'/%3E%3Crect x='71.94' y='26.20' width='3.2' height='3.2' transform='rotate(45 73.54 27.80)'/%3E%3Crect x='83.25' y='26.20' width='3.2' height='3.2' transform='rotate(45 84.85 27.80)'/%3E%3C/g%3E%3Cpath d='M-60 34.84H60M-60 55.54H60' stroke-width='.9'/%3E%3Cpath d='M-79.20 53.94C-78.20 43.94 -68.88 45.94 -67.88 36.44M-67.88 53.94C-66.88 43.94 -57.57 45.94 -56.57 36.44M-56.57 53.94C-55.57 43.94 -46.25 45.94 -45.25 36.44M-45.25 53.94C-44.25 43.94 -34.94 45.94 -33.94 36.44M-33.94 53.94C-32.94 43.94 -23.63 45.94 -22.63 36.44M-22.63 53.94C-21.63 43.94 -12.31 45.94 -11.31 36.44M-11.31 53.94C-10.31 43.94 -1.00 45.94 0.00 36.44M0.00 53.94C1.00 43.94 10.31 45.94 11.31 36.44M11.31 53.94C12.31 43.94 21.63 45.94 22.63 36.44M22.63 53.94C23.63 43.94 32.94 45.94 33.94 36.44M33.94 53.94C34.94 43.94 44.25 45.94 45.25 36.44M45.25 53.94C46.25 43.94 55.57 45.94 56.57 36.44M56.57 53.94C57.57 43.94 66.88 45.94 67.88 36.44M67.88 53.94C68.88 43.94 78.20 45.94 79.20 36.44M79.20 53.94C80.20 43.94 89.51 45.94 90.51 36.44' stroke-width='3.2' stroke-linecap='round'/%3E%3Cg fill='black' stroke='none'%3E%3Crect x='-75.14' y='60.14' width='3.2' height='3.2' transform='rotate(45 -73.54 61.74)'/%3E%3Crect x='-63.83' y='60.14' width='3.2' height='3.2' transform='rotate(45 -62.23 61.74)'/%3E%3Crect x='-52.51' y='60.14' width='3.2' height='3.2' transform='rotate(45 -50.91 61.74)'/%3E%3Crect x='-41.20' y='60.14' width='3.2' height='3.2' transform='rotate(45 -39.60 61.74)'/%3E%3Crect x='-29.88' y='60.14' width='3.2' height='3.2' transform='rotate(45 -28.28 61.74)'/%3E%3Crect x='-18.57' y='60.14' width='3.2' height='3.2' transform='rotate(45 -16.97 61.74)'/%3E%3Crect x='-7.26' y='60.14' width='3.2' height='3.2' transform='rotate(45 -5.66 61.74)'/%3E%3Crect x='4.06' y='60.14' width='3.2' height='3.2' transform='rotate(45 5.66 61.74)'/%3E%3Crect x='15.37' y='60.14' width='3.2' height='3.2' transform='rotate(45 16.97 61.74)'/%3E%3Crect x='26.68' y='60.14' width='3.2' height='3.2' transform='rotate(45 28.28 61.74)'/%3E%3Crect x='38.00' y='60.14' width='3.2' height='3.2' transform='rotate(45 39.60 61.74)'/%3E%3Crect x='49.31' y='60.14' width='3.2' height='3.2' transform='rotate(45 50.91 61.74)'/%3E%3Crect x='60.63' y='60.14' width='3.2' height='3.2' transform='rotate(45 62.23 61.74)'/%3E%3Crect x='71.94' y='60.14' width='3.2' height='3.2' transform='rotate(45 73.54 61.74)'/%3E%3Crect x='83.25' y='60.14' width='3.2' height='3.2' transform='rotate(45 84.85 61.74)'/%3E%3C/g%3E%3Cpath d='M-60 68.78H60M-60 89.48H60' stroke-width='.9'/%3E%3Cpath d='M-79.20 87.88C-78.20 77.88 -68.88 79.88 -67.88 70.38M-67.88 87.88C-66.88 77.88 -57.57 79.88 -56.57 70.38M-56.57 87.88C-55.57 77.88 -46.25 79.88 -45.25 70.38M-45.25 87.88C-44.25 77.88 -34.94 79.88 -33.94 70.38M-33.94 87.88C-32.94 77.88 -23.63 79.88 -22.63 70.38M-22.63 87.88C-21.63 77.88 -12.31 79.88 -11.31 70.38M-11.31 87.88C-10.31 77.88 -1.00 79.88 0.00 70.38M0.00 87.88C1.00 77.88 10.31 79.88 11.31 70.38M11.31 87.88C12.31 77.88 21.63 79.88 22.63 70.38M22.63 87.88C23.63 77.88 32.94 79.88 33.94 70.38M33.94 87.88C34.94 77.88 44.25 79.88 45.25 70.38M45.25 87.88C46.25 77.88 55.57 79.88 56.57 70.38M56.57 87.88C57.57 77.88 66.88 79.88 67.88 70.38M67.88 87.88C68.88 77.88 78.20 79.88 79.20 70.38M79.20 87.88C80.20 77.88 89.51 79.88 90.51 70.38' stroke-width='3.2' stroke-linecap='round'/%3E%3Cg fill='black' stroke='none'%3E%3Crect x='-75.14' y='94.08' width='3.2' height='3.2' transform='rotate(45 -73.54 95.68)'/%3E%3Crect x='-63.83' y='94.08' width='3.2' height='3.2' transform='rotate(45 -62.23 95.68)'/%3E%3Crect x='-52.51' y='94.08' width='3.2' height='3.2' transform='rotate(45 -50.91 95.68)'/%3E%3Crect x='-41.20' y='94.08' width='3.2' height='3.2' transform='rotate(45 -39.60 95.68)'/%3E%3Crect x='-29.88' y='94.08' width='3.2' height='3.2' transform='rotate(45 -28.28 95.68)'/%3E%3Crect x='-18.57' y='94.08' width='3.2' height='3.2' transform='rotate(45 -16.97 95.68)'/%3E%3Crect x='-7.26' y='94.08' width='3.2' height='3.2' transform='rotate(45 -5.66 95.68)'/%3E%3Crect x='4.06' y='94.08' width='3.2' height='3.2' transform='rotate(45 5.66 95.68)'/%3E%3Crect x='15.37' y='94.08' width='3.2' height='3.2' transform='rotate(45 16.97 95.68)'/%3E%3Crect x='26.68' y='94.08' width='3.2' height='3.2' transform='rotate(45 28.28 95.68)'/%3E%3Crect x='38.00' y='94.08' width='3.2' height='3.2' transform='rotate(45 39.60 95.68)'/%3E%3Crect x='49.31' y='94.08' width='3.2' height='3.2' transform='rotate(45 50.91 95.68)'/%3E%3Crect x='60.63' y='94.08' width='3.2' height='3.2' transform='rotate(45 62.23 95.68)'/%3E%3Crect x='71.94' y='94.08' width='3.2' height='3.2' transform='rotate(45 73.54 95.68)'/%3E%3Crect x='83.25' y='94.08' width='3.2' height='3.2' transform='rotate(45 84.85 95.68)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --kj-m-kawung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='black' stroke-width='1.1'%3E%3Cellipse cx='20' cy='10' rx='5' ry='9'/%3E%3Cellipse cx='20' cy='30' rx='5' ry='9'/%3E%3Cellipse cx='10' cy='20' rx='9' ry='5'/%3E%3Cellipse cx='30' cy='20' rx='9' ry='5'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='1.4'/%3E%3C/svg%3E");
}

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

body {
    margin: 0;
    background: var(--kj-ivory);
    color: var(--inv-text);
    font-family: var(--kj-serif);
    font-size: 18px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
p { margin: 0 0 .75rem; }
.kj-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.kj-preview {
    position: sticky; top: 0; z-index: 60; padding: .5rem 1rem; text-align: center;
    background: #fff4d6; color: #6b4e00; font: .8125rem/1.4 system-ui, sans-serif;
}

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

.kj-display { font-family: var(--kj-display); font-weight: 400; line-height: 1.05; }
.kj-display span { font-size: .62em; color: var(--kj-gold); }

/* small letter-spaced capitals */
.kj-label {
    margin: 0 0 .7rem;
    font-family: var(--kj-caps); font-size: .68rem; font-weight: 500; line-height: 1.4; letter-spacing: .3em; text-transform: uppercase;
    color: var(--kj-sogan);
}
.kj-eyebrow { margin: 0; font-family: var(--kj-caps); font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; }

.kj-head { display: grid; justify-items: center; margin-bottom: 2.4rem; }
.kj-head .kj-label { margin-bottom: .55rem; }
.kj-title { margin: 0; font-family: var(--kj-serif); font-weight: 500; font-size: 2.45rem; line-height: 1.08; color: var(--kj-p); }

/* gold rule: grows from the center when its block is revealed */
.kj-rule {
    display: block; width: 7.5rem; max-width: 50%; height: 1px; margin: 1rem auto 0;
    background: linear-gradient(90deg, transparent, var(--kj-gold), transparent);
    transform-origin: center;
}
html.inv-anim .kj-rule { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1) .35s; }
html.inv-anim .is-revealed .kj-rule, html.inv-anim .kj-rule.is-revealed { transform: none; }

.kj-lead { font-size: 1.12rem; line-height: 1.65; }
.kj-muted { color: var(--kj-muted); font-size: 1.02rem; }

/* faint kawung batik ground (≤ 7%) */
.kj-kawung, .kj-dark, .kj-cover, .kj-stage { isolation: isolate; }
.kj-kawung::before, .kj-dark::before, .kj-cover::before, .kj-stage::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--kj-sogan); opacity: .075;
    -webkit-mask: var(--kj-m-kawung) 0 0 / 46px 46px repeat; mask: var(--kj-m-kawung) 0 0 / 46px 46px repeat;
}
.kj-dark::before, .kj-cover::before, .kj-stage::before { background: var(--kj-gold); opacity: .08; }
/* batik panels: clearly visible but quiet (12–16%) */
.kj-batik::before { opacity: .13; }
.kj-events::before { opacity: .12; -webkit-mask: var(--kj-m-parang) 0 0 / 92px 92px repeat; mask: var(--kj-m-parang) 0 0 / 92px 92px repeat; }

/* the seal with the monogram letters */
.kj-seal {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem; margin: 0;
    width: 4.2rem; height: 4.2rem; border-radius: 50%;
    background: var(--kj-p); color: var(--kj-gold-light); font-family: var(--kj-caps); font-size: 1.1rem; line-height: 1;
    box-shadow: 0 0 0 3px var(--kj-ivory), 0 0 0 4px var(--kj-gold), 0 10px 22px -10px rgb(0 0 0 / .5);
}
.kj-seal__dot { width: 4px; height: 4px; background: var(--kj-gold); transform: rotate(45deg); }

.kj-icon-link {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: .4rem; padding: .3rem .9rem;
    border: 1px solid var(--kj-line); border-radius: 999px; color: var(--kj-p); font-size: .92rem; text-decoration: none;
    transition: background-color .3s ease, color .3s ease;
}
.kj-icon-link:hover { background: var(--kj-p); color: var(--kj-on-dark); }


/* buttons of the shared components */
.inv-button {
    padding: .85rem 1.5rem; border-radius: 2px;
    background: var(--kj-p); color: var(--kj-on-dark);
    font-family: var(--kj-caps); font-weight: 500; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kj-gold) 70%, transparent);
    transition: transform .3s ease, box-shadow .3s ease;
}
.inv-button:hover { transform: translateY(-1px); }
.inv-button--outline { background: transparent; color: var(--kj-p); box-shadow: inset 0 0 0 1px var(--kj-p); }

/* ---------- desktop backdrop (hidden on phones) ---------- */

.kj-stage { display: none; }

/* ---------- cover: full-bleed photo fading into the deep color ---------- */

.kj-cover {
    position: fixed; inset: 0; z-index: 30; overflow-y: auto; overflow-x: hidden;
    background: var(--kj-p); color: var(--kj-on-dark); text-align: center;
}
.kj-cover__photo {
    position: absolute; inset: 0 0 auto; height: 64svh; z-index: -1;
    background: var(--kj-photo) center 30% / cover no-repeat;
}
.kj-cover__shade {
    position: absolute; inset: 0 0 auto; height: 64svh; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--kj-p) 20%, transparent) 0%,
        transparent 24%,
        color-mix(in srgb, var(--kj-p) 72%, transparent) 64%,
        var(--kj-p) 97%);
}
/* no photo: a soft gold glow at the top of the kawung ground */
.kj-cover--plain .kj-cover__shade {
    height: 100%;
    background: radial-gradient(90% 55% at 50% 18%, color-mix(in srgb, var(--kj-gold) 22%, var(--kj-p)), transparent 70%),
        linear-gradient(180deg, var(--kj-p-soft), var(--kj-p) 60%, var(--kj-deep));
}

.kj-cover__content {
    position: relative; min-height: 100svh; margin: 0 auto; max-width: 420px;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    padding: 36svh 1.6rem max(2.6rem, calc(1.6rem + env(safe-area-inset-bottom)));
}
.kj-cover--plain .kj-cover__content { justify-content: center; padding-top: 3rem; }
.kj-cover__title { margin: 0 0 .55rem; font-family: var(--kj-caps); font-size: .74rem; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: var(--kj-gold-light); }
.kj-cover__names { margin: 0 0 .7rem; font-size: 3.7rem; color: #fffaf0; overflow-wrap: anywhere; }
.kj-cover__names span { color: var(--kj-gold-light); font-size: .66em; }
.kj-cover__date { margin: 0 0 1.4rem; font-family: var(--kj-caps); font-size: .82rem; font-weight: 500; letter-spacing: .2em; }
.kj-cover__guest {
    width: min(100%, 300px); margin-bottom: 1.6rem; padding: .8rem 0 .85rem;
    border-block: 1px solid color-mix(in srgb, var(--kj-gold-light) 45%, transparent);
}
.kj-cover__guest p { margin: 0 0 .3rem; font-family: var(--kj-caps); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--kj-gold-light); }
.kj-cover__guest-name { display: block; font-size: 1.3rem; line-height: 1.25; color: #fffaf0; overflow-wrap: anywhere; }
.kj-open.inv-button {
    padding: 1rem 2rem; border-radius: 3px; font-weight: 600; font-size: .74rem; letter-spacing: .16em;
    background: linear-gradient(180deg, var(--kj-gold-light), var(--kj-gold)); color: var(--kj-deep);
    box-shadow: 0 .6rem 1.6rem rgb(0 0 0 / .28);
}

/* opening moment: the photo fades in while drifting closer, the gunungan wayang rises with one light sweep (≤ 2.5s) */
@keyframes kj-photo-in { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes kj-draw { to { stroke-dashoffset: 0; } }
html.inv-anim .kj-cover__photo { animation: kj-photo-in 2.4s cubic-bezier(.2, .7, .2, 1) both; }

/* leaving: the text fades, the photo drifts a little closer, then the cover fades */
.kj-cover--leave { transition: opacity .7s ease .25s; }
.kj-cover--leave .kj-cover__content { transition: opacity .4s ease, transform .6s ease; }
.kj-cover--leave .kj-cover__photo { transition: transform 1s ease; }
.kj-cover--gone { opacity: 0; }
.kj-cover--gone .kj-cover__content { opacity: 0; transform: translateY(-14px); }
.kj-cover--gone .kj-cover__photo { transform: scale(1.06); }

/* ---------- gapura arch frame (hero, couple, closing) ---------- */

.kj-gapura { position: relative; width: min(62%, 236px); margin: 2.2rem auto 1.6rem; }
/* the thin gold outline, shifted down and to one side */
.kj-gapura::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    border: 1px solid var(--kj-gold); border-radius: 999px 999px 4px 4px;
    transform: translate(.9rem, .9rem);
}
.kj-gapura__photo {
    position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
    border-radius: 999px 999px 4px 4px; background: var(--kj-photo, none) center / cover, var(--kj-p);
    box-shadow: 0 24px 40px -26px color-mix(in srgb, var(--kj-deep) 80%, transparent);
}
.kj-gapura__photo--empty, .kj-gapura--hero .kj-gapura__photo:not([style]) {
    display: grid; place-items: center; isolation: isolate; overflow: hidden;
    background: radial-gradient(80% 60% at 50% 30%, var(--kj-p-soft), var(--kj-p) 70%, var(--kj-deep));
}
.kj-gapura__photo--empty::before, .kj-gapura--hero .kj-gapura__photo:not([style])::before {
    content: ''; position: absolute; inset: 0; z-index: -1; background: var(--kj-gold); opacity: .1;
    -webkit-mask: var(--kj-m-kawung) center / 34px 34px repeat; mask: var(--kj-m-kawung) center / 34px 34px repeat;
}
.kj-gapura__photo--empty .kj-display { font-size: 5.5rem; color: var(--kj-gold-light); }
.kj-gapura__ornament { width: 44%; }
.kj-crest { position: absolute; left: 50%; top: -1.9rem; z-index: 2; width: 2.4rem; height: auto; transform: translateX(-50%); overflow: visible; }
.kj-crest__body { fill: var(--kj-ivory); stroke: var(--kj-gold); stroke-width: 1.6; }
.kj-crest__line { fill: none; stroke: var(--kj-gold); stroke-width: 1.2; stroke-linecap: round; }
.kj-dark .kj-crest__body { fill: var(--kj-p); }

/* ---------- hero: first view after the cover ---------- */

.kj-hero { position: relative; padding: 4.6rem 1.5rem 4.2rem; text-align: center; }
.kj-hero__names { margin: .2rem 0 .4rem; font-size: 3.6rem; color: var(--kj-p); overflow-wrap: anywhere; }
.kj-hero__date { margin: .4rem 0 0; font-family: var(--kj-caps); font-size: .76rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--kj-p); }
.kj-gapura--hero { width: min(74%, 290px); margin-top: 3.4rem; margin-bottom: 3rem; }
.kj-gapura--hero .kj-seal { position: absolute; left: 50%; bottom: -2.1rem; z-index: 3; transform: translateX(-50%); }
.kj-hero__quote { max-width: 330px; margin: 3.4rem auto 0; font-style: italic; font-size: 1.12rem; color: var(--kj-muted); }

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

.kj-section { position: relative; padding: 4.8rem 1.5rem; text-align: center; }
.kj-paper { background: var(--kj-paper); }
.kj-dark { color: var(--kj-on-dark); background: var(--kj-p); }
.kj-dark .kj-title { color: #fffaf0; }
.kj-dark .kj-label { color: var(--kj-gold-light); }
.kj-dark .kj-muted { color: var(--kj-on-dark-soft); }
.kj-dark .inv-button { background: linear-gradient(180deg, var(--kj-gold-light), var(--kj-gold)); color: var(--kj-deep); box-shadow: none; }
.kj-dark .inv-button--outline { background: transparent; color: var(--kj-gold-light); box-shadow: inset 0 0 0 1px var(--kj-line); }

/* opening: deep band, verse set large */
.kj-opening { padding-top: 5rem; padding-bottom: 5rem; }
.kj-opening__kawung { display: block; width: 30px; height: 30px; margin: 0 auto 1.4rem; color: var(--kj-gold); }
.kj-arabic { margin-bottom: 1.1rem; font-family: 'Amiri', 'Traditional Arabic', serif; font-size: 1.7rem; line-height: 1.7; color: var(--kj-gold-light); }
.kj-opening__greeting { margin-bottom: 1rem; font-family: var(--kj-caps); font-size: .84rem; letter-spacing: .1em; color: #fffaf0; }
.kj-opening .kj-lead { color: var(--kj-on-dark); }
.kj-quote { margin: 2rem 0 0; }
.kj-quote .kj-rule { margin: 0 auto 1.6rem; }
.kj-quote blockquote { margin: 0; font-style: italic; font-size: 1.32rem; line-height: 1.55; color: #fffaf0; }
.kj-quote figcaption { margin-top: 1rem; font-family: var(--kj-caps); font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--kj-gold-light); }

/* couple: gapura arches, outlines shifted to opposite sides */
.kj-person__nickname { margin: 0 0 .35rem; font-size: 3.4rem; color: var(--kj-p); }
.kj-person__name { margin: 0 0 .7rem; font-family: var(--kj-caps); font-weight: 500; font-size: 1rem; line-height: 1.45; letter-spacing: .1em; color: var(--inv-text); }
.kj-person__parents { font-size: 1.08rem; line-height: 1.45; color: var(--kj-muted); }
.kj-person__parents strong { font-weight: 600; color: var(--inv-text); }
.kj-person--bride .kj-gapura::before { transform: translate(-.9rem, .9rem); }
.kj-couple__amp { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 2.6rem 0 2.2rem; }
.kj-couple__amp .kj-display { font-size: 3.4rem; line-height: .8; color: var(--kj-gold); }
.kj-couple__line { width: 64px; height: 1px; background: linear-gradient(90deg, transparent, var(--kj-gold)); }
.kj-couple__line:last-child { transform: scaleX(-1); }

/* countdown: big serif numbers divided by thin gold lines */
.kj-countdown__date { margin: -1rem 0 2rem; font-family: var(--kj-caps); font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--kj-gold-light); }
.kj-countdown .inv-countdown { gap: 0; justify-content: center; }
.kj-countdown .inv-countdown__item { flex: 1; min-width: 0; max-width: 84px; padding: .2rem 0; background: none; border-radius: 0; box-shadow: none; }
.kj-countdown .inv-countdown__item + .inv-countdown__item { border-left: 1px solid var(--kj-line); }
.kj-countdown .inv-countdown__value { font-family: var(--kj-serif); font-weight: 500; font-size: 2.9rem; line-height: 1; color: #fffaf0; }
.kj-countdown .inv-countdown__label { margin-top: .45rem; font-family: var(--kj-caps); font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--kj-gold-light); }
.kj-countdown .inv-countdown__actions { margin-top: 2.2rem; }

/* events: ivory cards with a thin inset gold line on the deep band */
.kj-card {
    position: relative; padding: 2.4rem 1.7rem 2.3rem; background: var(--kj-card); color: var(--inv-text);
    box-shadow: 0 26px 50px -30px rgb(0 0 0 / .6);
}
.kj-card::before { content: ''; position: absolute; inset: .55rem; border: 1px solid var(--kj-line); pointer-events: none; }
.kj-event + .kj-event { margin-top: 1.6rem; }
.kj-event__photo { position: relative; aspect-ratio: 3 / 2; margin: -1.25rem -1.05rem 1.6rem; overflow: hidden; }
.kj-event__photo img { width: 100%; height: 100%; object-fit: cover; }
.kj-event__name { margin: 0 0 1.1rem; font-family: var(--kj-caps); font-weight: 500; font-size: 1rem; letter-spacing: .24em; text-transform: uppercase; color: var(--kj-sogan); }
.kj-event__date { display: inline-flex; align-items: center; gap: 1.1rem; margin: 0 0 1.1rem; color: var(--kj-p); }
.kj-event__date strong { font-family: var(--kj-serif); font-weight: 500; font-size: 4.6rem; line-height: .9; }
.kj-event__date span {
    padding-left: 1.1rem; border-left: 1px solid var(--kj-line); text-align: left;
    font-family: var(--kj-caps); font-size: .72rem; font-weight: 500; line-height: 1.8; letter-spacing: .14em; text-transform: uppercase;
}
.kj-event__time { margin-bottom: 1rem; font-size: 1.1rem; }
.kj-event__place { margin: 0 auto; max-width: 300px; }
.kj-event__venue { margin-bottom: .2rem; font-weight: 600; font-size: 1.22rem; line-height: 1.3; color: var(--inv-text); }
.kj-event__address { font-size: 1.04rem; line-height: 1.45; color: var(--kj-muted); }
.kj-event__dress { display: inline-block; margin-top: .3rem; padding: .15rem .9rem; border: 1px solid var(--kj-line); border-radius: 999px; font-size: .95rem; color: var(--kj-muted); }
.kj-event .inv-maps { margin-top: 1.2rem; }
.kj-event .inv-button { background: transparent; color: var(--kj-p); box-shadow: inset 0 0 0 1px var(--kj-p); }

/* love story: a zig-zag timeline, a gold thread in the center with kawung seeds, chapters alternate sides */
.kj-chapters { position: relative; list-style: none; margin: 0; padding: .4rem 0; }
.kj-chapters::before {
    content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%);
    background: linear-gradient(transparent, var(--kj-gold) 6%, var(--kj-gold) 88%, transparent);
}
.kj-chapter {
    position: relative; display: grid; align-items: start;
    grid-template-columns: minmax(0, 1fr) 1.75rem minmax(0, 1fr); grid-template-areas: "text node meta";
    column-gap: .55rem;
}
.kj-chapter--flip { grid-template-areas: "meta node text"; }
.kj-chapter + .kj-chapter { margin-top: 2.4rem; }
.kj-chapter__node {
    grid-area: node; position: relative; z-index: 1; width: 1.75rem; height: 1.75rem; padding: 4px; margin-top: .05rem;
    border-radius: 50%; background: var(--kj-ivory); color: var(--kj-gold);
    box-shadow: 0 0 0 1px var(--kj-line), 0 0 0 4px var(--kj-ivory);
}
.kj-chapter__text { grid-area: text; min-width: 0; text-align: right; }
.kj-chapter--flip .kj-chapter__text { text-align: left; }
.kj-chapter__title { margin: 0; font-family: var(--kj-serif); font-weight: 600; font-size: 1.22rem; line-height: 1.2; color: var(--kj-p); overflow-wrap: anywhere; }
.kj-chapter__rule { display: block; width: 46%; height: 1px; margin: .5rem 0 .55rem auto; background: var(--kj-gold); }
.kj-chapter--flip .kj-chapter__rule { margin-inline: 0 auto; }
.kj-chapter__story { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--kj-muted); overflow-wrap: anywhere; }
.kj-chapter__meta { grid-area: meta; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; text-align: left; }
.kj-chapter--flip .kj-chapter__meta { align-items: flex-end; text-align: right; }
.kj-chapter__date { margin: 0; font-family: var(--kj-caps); font-weight: 500; font-size: .74rem; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; color: var(--kj-sogan); overflow-wrap: anywhere; }
.kj-chapter__photo {
    width: min(5.6rem, 100%); aspect-ratio: 3 / 4; object-fit: cover; border-radius: 999px 999px 3px 3px;
    box-shadow: .35rem .35rem 0 -1px var(--kj-ivory), .35rem .35rem 0 0 var(--kj-gold);
}
.kj-chapter--flip .kj-chapter__photo { box-shadow: -.35rem .35rem 0 -1px var(--kj-ivory), -.35rem .35rem 0 0 var(--kj-gold); }
.kj-chapter__ornament {
    display: block; width: 18px; height: 18px; margin: .3rem .2rem 0; background: var(--kj-gold);
    -webkit-mask: var(--kj-m-kawung) center / contain no-repeat; mask: var(--kj-m-kawung) center / contain no-repeat;
}

/* gallery (deep band): mosaic with thin inset gold lines, the large tile arched */
.kj-gallery .inv-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; grid-auto-flow: dense; gap: 8px; }
.kj-gallery .inv-gallery__item { aspect-ratio: auto; height: 100%; border-radius: 2px; outline: 1px solid color-mix(in srgb, var(--kj-gold-light) 70%, transparent); outline-offset: -7px; }
.kj-gallery .inv-gallery__item:nth-child(5n + 1) { grid-column: span 2; grid-row: span 2; border-radius: 999px 999px 2px 2px / 180px 180px 2px 2px; }
.kj-gallery .inv-gallery__item:nth-child(5n + 4), .kj-gallery .inv-gallery__item:nth-child(5n) { grid-row: span 2; }

/* gift (deep band): every account on an ivory card with a thin inset gold line, two per row (the odd last one full width) */
.kj-gift .inv-gift { margin-top: 1.8rem; }
.kj-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.kj-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.kj-gift .inv-gift__account {
    position: relative; min-width: 0; margin: 0; padding: 1.2rem .8rem 1.1rem; border-radius: 2px;
    background: var(--kj-card); color: var(--inv-text);
    box-shadow: inset 0 0 0 5px var(--kj-card), inset 0 0 0 6px var(--kj-line), 0 16px 30px -18px rgb(0 0 0 / .55);
}
.kj-gift .inv-gift__account + .inv-gift__account { margin-top: 0; }
.kj-gift .inv-gift__address { margin-top: .6rem; padding: 1.4rem 1.1rem 1.3rem; }
.kj-gift .inv-gift__account p { margin: 0; }
.kj-gift .inv-gift__bank { font-family: var(--kj-caps); font-size: .66rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--kj-sogan); }
.kj-gift .inv-gift__logo { height: 1.5rem; padding: .2rem .45rem; border-radius: .35rem; }
.kj-gift .inv-gift__logo img { max-width: 5rem; }
.kj-gift .inv-gift__number {
    margin: .45rem 0 .1rem !important; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-weight: 600; font-size: .98rem; line-height: 1.3; letter-spacing: .03em; color: var(--kj-p); overflow-wrap: anywhere;
}
.kj-gift .inv-gift__holder { font-family: var(--kj-caps); font-size: .58rem; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--kj-muted); overflow-wrap: anywhere; }
.kj-gift .inv-gift__address .inv-gift__holder { font-size: .7rem; }
.kj-gift .inv-gift__account .inv-button { margin-top: .7rem; padding: .4rem .75rem; font-size: .6rem; letter-spacing: .12em; }
.kj-gift .inv-gift__account .inv-button, .kj-gift .inv-gift__account .inv-button--outline { background: transparent; color: var(--kj-p); box-shadow: inset 0 0 0 1px var(--kj-p); }

/* live streaming */
.kj-stream .inv-button { margin-top: .6rem; }

/* rsvp + wishes: the forms straight on the ground, underlined fields */
.kj-form { max-width: 380px; margin: 1.8rem auto 0; text-align: left; }
.kj-form .inv-form label, .kj-form .inv-form__choices legend { font-family: var(--kj-caps); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--kj-sogan); }
.kj-form .inv-form input:not([type=radio]):not([type=checkbox]),
.kj-form .inv-form select,
.kj-form .inv-form textarea {
    border: 0; border-bottom: 1px solid color-mix(in srgb, var(--kj-p) 35%, transparent); border-radius: 0;
    background: transparent; padding-inline: 0; color: var(--inv-text); font-family: var(--kj-serif); font-size: 1.08rem;
}
.kj-form .inv-form input:focus, .kj-form .inv-form select:focus, .kj-form .inv-form textarea:focus { outline: none; border-bottom-color: var(--kj-gold); }
.kj-form .inv-form .inv-button { justify-self: stretch; margin-top: .6rem; }
.kj-form .inv-wishes { --inv-wishes-height: 23rem; }
.kj-form .inv-wishes__list { padding-top: .4rem; border-top: 1px solid var(--kj-line); }
.kj-form .inv-wish { padding: .7rem .9rem; background: var(--kj-card); border-left: 2px solid var(--kj-gold); border-radius: 0 3px 3px 0; }
.kj-form .inv-wish__name { font-family: var(--kj-serif); font-weight: 600; font-size: 1.05rem; color: var(--kj-p); }
.kj-form .inv-wish__message { font-size: 1rem; line-height: 1.45; }
.kj-form .inv-wish__time { font-size: .76rem; color: var(--kj-muted); }

/* closing (deep band) */
.kj-closing { padding-top: 5.4rem; overflow: hidden; }
.kj-closing__message { max-width: 360px; margin: 0 auto 1.4rem; font-size: 1.1rem; color: var(--kj-on-dark); }
.kj-closing__names { margin: .4rem 0 .9rem; font-size: 3.3rem; color: var(--kj-gold-light); }
.kj-closing__signature { margin: 0; font-family: var(--kj-caps); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--kj-on-dark-soft); }

/* shared components outside the sections */
.inv-music__button { background: var(--kj-p); color: var(--kj-gold-light); box-shadow: 0 0 0 1px var(--kj-gold), 0 6px 16px rgb(0 0 0 / .3); }
.inv-checkin { margin: 2rem 1.5rem; }
.inv-branding { color: var(--kj-muted); }

/* ---------- wide screens: center column on the dark kawung backdrop ---------- */

@media (min-width: 1024px) {
    body { background: var(--kj-deep); }
    .kj-stage {
        display: block; position: fixed; inset: 0; z-index: 0;
        background: radial-gradient(80% 90% at 50% 40%, var(--kj-p-soft), var(--kj-p) 45%, var(--kj-deep));
        color: var(--kj-on-dark);
    }
    .kj-side {
        position: absolute; top: 0; bottom: 0; width: calc(50% - var(--kj-column) / 2 - 1rem);
        display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 2rem; text-align: center;
    }
    .kj-side--left { left: 0; }
    .kj-side--right { right: 0; }
    .kj-side__gunungan { width: 120px; height: 160px; margin-bottom: 1.6rem; color: var(--kj-gold); opacity: .85; }
    .kj-side .kj-eyebrow { color: var(--kj-gold-light); }
    .kj-side__names { margin: .6rem 0 0; font-size: 4.2rem; color: #fffaf0; }
    .kj-side__names span { display: block; margin: .1em 0; color: var(--kj-gold-light); }
    .kj-side .kj-seal { width: 5.4rem; height: 5.4rem; font-size: 1.45rem; margin-bottom: 1.8rem; box-shadow: 0 0 0 3px var(--kj-p), 0 0 0 4px var(--kj-gold); }
    .kj-side__date { margin-bottom: 2.2rem; font-family: var(--kj-caps); font-size: .86rem; letter-spacing: .2em; text-transform: uppercase; color: var(--kj-gold-light); }
    .kj-side__to { margin: 0 0 .3rem; font-style: italic; opacity: .85; }
    .kj-side__guest { display: block; font-size: 1.6rem; color: #fffaf0; }

    .kj-page {
        position: relative; z-index: 1; width: var(--kj-column); margin: 0 auto; min-height: 100vh;
        box-shadow: 0 0 0 1px var(--kj-line), 0 30px 90px rgb(0 0 0 / .55);
    }
    .kj-cover__photo, .kj-cover__shade { height: 66vh; }
    .kj-cover__content { padding-top: 40vh; }
}

/* short screens: tighter cover so everything (and the button) stays on screen */
@media (max-height: 760px) {
    .kj-cover__content { padding-top: 30svh; padding-bottom: 2.2rem; }
    .kj-cover__names { font-size: 3.3rem; margin-bottom: .55rem; }
    .kj-cover__date { margin-bottom: 1.1rem; }
    .kj-cover__guest { margin-bottom: 1.25rem; padding: .65rem 0 .7rem; }
}
@media (max-height: 660px) {
    .kj-cover__content { padding-top: 22svh; padding-bottom: 2rem; }
    .kj-cover__names { font-size: 3rem; }
    .kj-cover__date { margin-bottom: .9rem; }
    .kj-cover__guest { margin-bottom: 1.1rem; }
    .kj-cover__guest-name { font-size: 1.18rem; }
    .kj-open.inv-button { padding: .9rem 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .kj-cover--leave, .kj-cover--leave .kj-cover__content, .kj-cover--leave .kj-cover__photo { transition: none; }
    .kj-cover__photo, .kj-wayang__gold, .kj-wayang, .kj-ronce__strand { animation: none !important; }
    .kj-rule { transition: none; transform: none; }
    .inv-button, .kj-icon-link { transition: none; }
}

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

.kj-page { position: relative; background: var(--kj-ivory); overflow-x: clip; }

/* ======================= round 2: Javanese character ======================= */

/* carved gunungan wayang in graded gold (img/gunungan.webp as a mask) */
.kj-wayang { position: relative; display: block; aspect-ratio: 400 / 651; height: auto; }
.kj-wayang__gold, .kj-wayang__glow { position: absolute; inset: 0; }
.kj-wayang__glow {
    inset: -18% -45%; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--kj-gold) 30%, transparent), transparent 75%);
}
.kj-wayang__gold {
    background: linear-gradient(115deg, transparent 38%, rgb(255 250 228 / .9) 50%, transparent 62%) -160% 0 / 250% 100% no-repeat,
        linear-gradient(180deg, #f4e2a6 0%, var(--kj-gold-light) 22%, var(--kj-gold) 55%, color-mix(in srgb, var(--kj-gold) 70%, #5a3a10) 100%);
    -webkit-mask: url(../img/gunungan.webp) center / contain no-repeat; mask: url(../img/gunungan.webp) center / contain no-repeat;
    filter: drop-shadow(0 6px 10px rgb(0 0 0 / .35));
}
@keyframes kj-wayang-in { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes kj-shine { to { background-position: 260% 0, 0 0; } }
html.inv-anim .kj-cover__wayang { animation: kj-wayang-in 1.6s cubic-bezier(.2, .7, .2, 1) .15s both; }
html.inv-anim .kj-cover__wayang .kj-wayang__gold { animation: kj-shine 1.4s ease-in-out 1s both; }
html.inv-anim .is-revealed .kj-wayang__gold, html.inv-anim .kj-wayang.is-revealed .kj-wayang__gold { animation: kj-shine 1.6s ease-in-out .5s both; }

.kj-cover__wayang { height: clamp(84px, 19svh, 168px); margin-bottom: 1rem; }
.kj-cover--plain .kj-cover__wayang { height: clamp(110px, 30svh, 260px); }
.kj-gapura__ornament { width: auto; height: 46%; }
.kj-closing__wayang { height: 7.5rem; margin: -2.4rem auto 1.4rem; position: relative; z-index: 1; }

/* melati ronce: thin strings that sway gently */
.kj-ronce { display: flex; align-items: flex-start; gap: 10px; pointer-events: none; color: var(--kj-gold-light); }
.kj-ronce__strand { flex: none; overflow: visible; transform-origin: 50% 0; filter: drop-shadow(0 1.5px 1.5px rgb(0 0 0 / .3)); }
@keyframes kj-sway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
html.inv-anim .kj-ronce__strand { animation: kj-sway 5.2s ease-in-out calc(var(--i) * -1.4s) infinite alternate; }
.kj-cover .kj-ronce { position: absolute; top: 0; z-index: 0; gap: 6px; }
.kj-ronce--left { left: 12px; }
.kj-ronce--right { right: 12px; flex-direction: row-reverse; }
.kj-cover .kj-ronce__strand { max-height: 30svh; }
.kj-gapura .kj-ronce { position: absolute; top: 24%; z-index: 2; gap: 3px; }
.kj-ronce--arch-left { left: -24px; }
.kj-ronce--arch-right { right: -24px; flex-direction: row-reverse; }
.kj-gapura .kj-ronce__strand { transform-origin: 50% 0; }

/* parang batik band (section edge) */
.kj-parang {
    position: absolute; left: 0; right: 0; height: 30px; z-index: 1; transform-origin: center;
    background:
        linear-gradient(var(--kj-gold), var(--kj-gold)) 0 2px / 100% 1px no-repeat,
        linear-gradient(var(--kj-gold), var(--kj-gold)) 0 calc(100% - 2px) / 100% 1px no-repeat,
        var(--kj-deep);
}
.kj-parang::after {
    content: ''; position: absolute; inset: 5px 0; background: linear-gradient(90deg, var(--kj-gold), var(--kj-gold-light), var(--kj-gold)); opacity: .75;
    -webkit-mask: var(--kj-m-parang) 0 0 / 60px 60px repeat; mask: var(--kj-m-parang) 0 0 / 60px 60px repeat;
}
.kj-parang--top { top: 0; }
.kj-parang--bottom { bottom: 0; }
.kj-opening, .kj-events { padding-top: 6.2rem; }

/* cover photo: shorter, so the gunungan stands where the photo fades out (not over the faces) */
.kj-cover__photo, .kj-cover__shade { height: 54svh; }
.kj-cover__photo { background-position: center 22%; }
.kj-cover__shade { background: linear-gradient(180deg, color-mix(in srgb, var(--kj-p) 25%, transparent) 0%, transparent 22%, color-mix(in srgb, var(--kj-p) 60%, transparent) 62%, var(--kj-p) 96%); }
.kj-cover--plain .kj-cover__shade { height: 100%; }

/* photo-gradient backgrounds */
.kj-photo { overflow: hidden; }
.kj-photobg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--kj-p); }
.kj-photobg__img { position: absolute; inset: -48px 0; background: var(--kj-photo) center / cover no-repeat; --inv-parallax: 36px; }
.kj-photobg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--kj-p) 80%, transparent) 0%,
        color-mix(in srgb, var(--kj-p) 72%, transparent) 40%,
        color-mix(in srgb, var(--kj-p) 90%, transparent) 75%,
        var(--kj-p) 100%);
}
.kj-photobg--plain::after { background: radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--kj-gold) 24%, var(--kj-p)), transparent 70%), linear-gradient(180deg, var(--kj-p-soft), var(--kj-p)); }
.kj-photo::before { z-index: 0; opacity: .06; }
.kj-photo > :not(.kj-photobg) { position: relative; z-index: 1; }
.kj-countdown { padding-top: 5.6rem; padding-bottom: 5.6rem; }

/* closing: under a joglo roof, the photo full-bleed fading into the deep color */
.kj-joglo { position: absolute; left: 0; right: 0; top: -63px; width: 100%; height: 64px; z-index: 2; overflow: visible; }
.kj-joglo__fill { fill: var(--kj-p); }
.kj-joglo__line { fill: none; stroke: var(--kj-gold); stroke-width: 1.2; stroke-linejoin: round; }
.kj-joglo__line--thin { stroke-width: .7; opacity: .7; }
.kj-joglo__crown { fill: var(--kj-gold); }
.kj-closing { padding-top: 0; overflow: visible; }
.kj-closing__photo { position: relative; height: 340px; margin: 0 -1.5rem; overflow: hidden; }
.kj-closing__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.kj-closing__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--kj-p) 35%, transparent), transparent 30%, color-mix(in srgb, var(--kj-p) 65%, transparent) 70%, var(--kj-p)); }
.kj-closing > .kj-head { margin-top: 0; }
.kj-closing:not(:has(.kj-closing__photo)) .kj-closing__wayang { margin-top: 3.4rem; }

/* short screens: tighter cover so everything (and the button) stays on screen */
@media (max-height: 760px) {
    .kj-cover__content { padding-top: 24svh; }
    .kj-cover__wayang { height: clamp(84px, 21svh, 170px); margin-bottom: .7rem; }
}
@media (max-height: 660px) {
    .kj-cover__content { padding-top: 12svh; }
    .kj-cover__wayang { height: clamp(78px, 19svh, 124px); margin-bottom: .55rem; }
    .kj-cover .kj-ronce__strand { max-height: 22svh; }
}

/* opening: a client photo glows through the deep veil, the kawung batik stays clearly visible on top of it */
.kj-opening { overflow: hidden; }
.kj-opening::before { z-index: 0; opacity: .15; }
.kj-opening > :not(.kj-photobg):not(.kj-parang) { position: relative; z-index: 1; }
.kj-opening .kj-parang { z-index: 2; }
.kj-opening .kj-photobg__img { filter: saturate(.85); }
.kj-opening .kj-photobg::after {
    background:
        radial-gradient(120% 70% at 50% 50%, color-mix(in srgb, var(--kj-p) 86%, transparent) 30%, color-mix(in srgb, var(--kj-p) 68%, transparent) 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--kj-p) 55%, transparent) 0%, transparent 35%, transparent 70%, color-mix(in srgb, var(--kj-p) 75%, transparent) 100%);
}
.kj-opening .kj-quote {
    margin-top: 2.2rem; padding: 1.8rem 1.3rem 1.6rem; border-radius: 4px;
    background: color-mix(in srgb, var(--kj-p) 62%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: inset 0 0 0 1px var(--kj-line); outline: 1px solid color-mix(in srgb, var(--inv-accent) 45%, transparent); outline-offset: 5px;
}
.kj-opening .kj-quote .kj-rule { margin-bottom: 1.3rem; }