/*
 * Template "Kebun Malam" (Lamaran & Tunangan): an intimate evening engagement in the garden at home.
 * Deep night green + leaf green + the warm amber of light bulbs on cream. Signature pieces: a strand of
 * festoon string lights that light up one by one once and then glow calmly (sections/_lights), layered
 * night-garden foliage with gradient fills (sections/_garden + _sprite), photos in a warm arch with an
 * amber rim light (sections/_arch), a small garden lantern (sections/_lantern), the two families hanging
 * from a light wire joined by one bulb (sections/families) and the glowing card of the wedding plan.
 * Mobile-first, one column (~460px) on a night backdrop on wide screens.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (night green: night sections, titles on cream)   --inv-deep (the darkest night)
 *   --inv-accent (bulb amber: lights, names on night, buttons)      --inv-glow (deeper amber of halos)
 *   --inv-background (cream)   --inv-text   --inv-leaf (leaf green: foliage, labels, bands)
 *   --inv-ink (dark amber for warm text on cream, ≥ 4.5:1)
 * Everything else is mixed from those, so a new variant only needs these eight colours.
 *
 * Section tones (set on each section in its partial): .kebun-malam-tone--night (night green with a warm
 * glow), --cream, --paper (a deeper cream) and --leaf (a leaf-green band). Night and cream alternate.
 *
 * Motion only runs with html.inv-anim (set by <x-inv.head> unless the guest prefers reduced motion);
 * without it everything is shown finished: the bulbs simply glow.
 *
 * Contents: 1 base · 2 section tones & photo backgrounds · 3 shared pieces (heading, bulbs & light strands,
 *           foliage, arch, lantern, pill) · 4 cover · 5 sections in page order · 6 forms (RSVP, wishes) ·
 *           7 shared components · 8 screen sizes · 9 motion
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Hijau Malam" variant (the variant's colours override these) */
    --inv-primary: #14261f;
    --inv-accent: #ffd27d;
    --inv-background: #f4ead6;
    --inv-text: #17241e;
    --inv-deep: #0b1813;
    --inv-leaf: #2f5a3d;
    --inv-glow: #ffb547;
    --inv-ink: #8a5a12;
    --inv-radius: 16px;

    --kebun-malam-serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
    --kebun-malam-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --kebun-malam-col: 460px;
    --kebun-malam-paper: color-mix(in srgb, #fff 62%, var(--inv-background));
    --kebun-malam-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    --kebun-malam-cream-soft: color-mix(in srgb, var(--inv-background) 84%, transparent);
    --kebun-malam-line: color-mix(in srgb, var(--inv-ink) 38%, transparent);
    --kebun-malam-wire: color-mix(in srgb, var(--inv-accent) 34%, #4a4636);
    --kebun-malam-drop: 0 26px 46px -26px color-mix(in srgb, var(--inv-deep) 85%, transparent);
    --kebun-malam-amber: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 70%, #fff), var(--inv-accent) 55%, color-mix(in srgb, var(--inv-accent) 80%, var(--inv-glow)));
    /* the night: a warm glow from above, a leaf-green haze below */
    --kebun-malam-night:
        radial-gradient(110% 34% at 50% 0%, color-mix(in srgb, var(--inv-glow) 15%, transparent), transparent 72%),
        radial-gradient(80% 40% at 0% 100%, color-mix(in srgb, var(--inv-leaf) 42%, transparent), transparent 72%),
        radial-gradient(70% 36% at 100% 70%, color-mix(in srgb, var(--inv-leaf) 26%, transparent), transparent 72%),
        linear-gradient(180deg, var(--inv-primary), var(--inv-deep));

    /* the filament of a lit bulb: a small zigzag on two supports */
    --kebun-malam-filament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14' fill='none' stroke='%23fff6d6' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 0v6M8.5 0v6M3.5 6l1.2 2.6L6 6l1.3 2.6L8.5 6'/%3E%3C/svg%3E");

    /* colours of the shared components */
    --inv-ambient-1: var(--inv-accent);
    --inv-ambient-2: var(--inv-glow);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--inv-background);
    color: var(--inv-text);
    font-family: var(--kebun-malam-sans);
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: var(--inv-leaf); }

.kebun-malam-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

/* the one column of the page; every section paints its own full-width background */
.kebun-malam-main { max-width: var(--kebun-malam-col); margin: 0 auto; }
.kebun-malam-branding { max-width: var(--kebun-malam-col); margin: 0 auto; }

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

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

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

/* night: night green with a warm glow from above */
.kebun-malam-tone--night { color: var(--inv-background); background: var(--kebun-malam-night); }
.kebun-malam-tone--night a:not(.inv-button) { color: var(--inv-accent); }
.kebun-malam-tone--night .kebun-malam-arabic { color: var(--inv-accent); }
.kebun-malam-tone--night .kebun-malam-amp { color: var(--inv-accent); }

/* cream: warm cream with a soft lamp glow and a leaf haze */
.kebun-malam-tone--cream {
    background:
        radial-gradient(70% 28% at 100% 0%, color-mix(in srgb, var(--inv-accent) 30%, transparent), transparent 75%),
        radial-gradient(70% 30% at 0% 100%, color-mix(in srgb, var(--inv-leaf) 12%, transparent), transparent 75%),
        var(--inv-background);
}
/* paper: a slightly deeper cream, used where two cream sections could meet */
.kebun-malam-tone--paper {
    background:
        radial-gradient(80% 36% at 50% 0%, color-mix(in srgb, #fff 45%, transparent), transparent 75%),
        color-mix(in srgb, var(--inv-leaf) 9%, var(--inv-background));
}
/* leaf: a leaf-green band */
.kebun-malam-tone--leaf {
    color: var(--inv-background);
    background:
        radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--inv-accent) 16%, transparent), transparent 75%),
        linear-gradient(170deg, var(--inv-leaf), color-mix(in srgb, var(--inv-leaf) 55%, var(--inv-primary)));
}

/* a client photo behind a section, under a strong gradient of the section's own tone */
.kebun-malam-bgphoto { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.kebun-malam-bgphoto img { display: block; width: 100%; height: calc(100% + 80px); margin-top: -40px; object-fit: cover; object-position: center 35%; --inv-parallax: 40px; }
.kebun-malam-bgphoto::after { content: ''; position: absolute; inset: 0; }
.kebun-malam-tone--night .kebun-malam-bgphoto::after {
    background:
        radial-gradient(100% 40% at 50% 0%, color-mix(in srgb, var(--inv-glow) 18%, transparent), transparent 70%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--inv-primary) 90%, transparent),
            color-mix(in srgb, var(--inv-primary) 74%, transparent) 40%,
            color-mix(in srgb, var(--inv-deep) 94%, transparent));
}
.kebun-malam-tone--cream .kebun-malam-bgphoto::after { background: linear-gradient(180deg, color-mix(in srgb, var(--inv-background) 90%, transparent), color-mix(in srgb, var(--inv-background) 80%, transparent) 50%, var(--inv-background)); }

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

/* section heading: a letter-spaced eyebrow, a serif title with the last word italic, a short wire with a bulb */
.kebun-malam-heading { position: relative; z-index: 1; margin: 0 0 2.1rem; }
.kebun-malam-heading--left { text-align: left; }
.kebun-malam-heading__eyebrow {
    margin: 0 0 .5rem; font-size: .7rem; font-weight: 700; line-height: 1.25; letter-spacing: .28em; text-transform: uppercase; color: var(--inv-leaf);
}
.kebun-malam-heading__title {
    margin: 0; font-family: var(--kebun-malam-serif); font-size: 2.7rem; font-weight: 600; line-height: 1.04;
    letter-spacing: -.01em; color: var(--inv-primary); text-wrap: balance;
}
.kebun-malam-heading__title em { font-style: italic; font-weight: 500; color: var(--inv-ink); }
.kebun-malam-heading__strand { position: relative; display: block; width: 6rem; height: 1.4rem; margin: .6rem auto 0; }
.kebun-malam-heading--left .kebun-malam-heading__strand { margin-left: 0; }
.kebun-malam-heading__strand svg { display: block; width: 100%; height: .9rem; overflow: visible; }
.kebun-malam-heading__strand path { fill: none; stroke: color-mix(in srgb, var(--inv-text) 55%, transparent); stroke-width: 1; }
.kebun-malam-heading__strand i {
    position: absolute; left: 50%; top: .55rem; width: .62rem; height: .72rem; margin-left: -.31rem; border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%;
    background: radial-gradient(circle at 50% 42%, #fffbe8, var(--inv-accent) 45%, var(--inv-glow));
    box-shadow: 0 0 8px 2px color-mix(in srgb, var(--inv-glow) 55%, transparent), 0 0 20px 6px color-mix(in srgb, var(--inv-accent) 24%, transparent);
}
.kebun-malam-tone--night .kebun-malam-heading__eyebrow, .kebun-malam-tone--leaf .kebun-malam-heading__eyebrow { color: var(--inv-accent); }
.kebun-malam-tone--night .kebun-malam-heading__title, .kebun-malam-tone--leaf .kebun-malam-heading__title { color: #fffaf0; }
.kebun-malam-tone--night .kebun-malam-heading__title em, .kebun-malam-tone--leaf .kebun-malam-heading__title em { color: var(--inv-accent); }
.kebun-malam-tone--night .kebun-malam-heading__strand path, .kebun-malam-tone--leaf .kebun-malam-heading__strand path { stroke: color-mix(in srgb, var(--inv-accent) 45%, transparent); }

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

/* a festoon bulb (sections/_lights and single bulbs): a dark socket, a glass globe, the lit layer with the
   filament (i::before) and the warm halo (i::after); --b sets the size */
.kebun-malam-bulb {
    --b: 15px;
    position: absolute; width: var(--b); height: calc(var(--b) * 1.72); margin-left: calc(var(--b) / -2);
    transform: rotate(var(--tilt, 0deg)); transform-origin: 50% 0; pointer-events: none;
}
.kebun-malam-bulb::before {
    content: ''; position: absolute; left: 31%; right: 31%; top: -1px; height: 36%; border-radius: 2px 2px 1px 1px;
    background: linear-gradient(90deg, #15140f, #4a4434 45%, #15140f);
}
.kebun-malam-bulb i {
    position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--b) * 1.2);
    border-radius: 50% 50% 48% 48% / 56% 56% 44% 44%;
    background: radial-gradient(circle at 38% 32%, rgb(255 255 255 / .45), color-mix(in srgb, var(--inv-accent) 22%, #3a372a) 62%);
}
.kebun-malam-bulb i::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background:
        var(--kebun-malam-filament) center 30% / 58% auto no-repeat,
        radial-gradient(circle at 50% 42%, #fffdf0 0 14%, color-mix(in srgb, var(--inv-accent) 65%, #fff) 30%, var(--inv-accent) 55%, color-mix(in srgb, var(--inv-glow) 85%, #7a3d00) 100%);
    box-shadow: 0 0 4px 1px color-mix(in srgb, var(--inv-accent) 85%, transparent), 0 0 14px 4px color-mix(in srgb, var(--inv-glow) 50%, transparent);
}
.kebun-malam-bulb i::after {
    content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; width: calc(var(--b) * 4.6); aspect-ratio: 1; border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, color-mix(in srgb, var(--inv-accent) 44%, transparent), color-mix(in srgb, var(--inv-glow) 15%, transparent) 38%, transparent 68%);
}

/* a strand of lights: the wire stretched over the box, the bulbs placed on it in percent */
.kebun-malam-lights { --lights-h: 84px; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: var(--lights-h); pointer-events: none; }
.kebun-malam-lights__wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kebun-malam-lights__wire path { fill: none; stroke: var(--kebun-malam-wire); stroke-width: 1.5; }
.kebun-malam-lights .kebun-malam-bulb { margin-top: -2px; }

/* night-garden foliage (sections/_garden): leaves from the sprite, fills from the gradients */
.kebun-malam-garden { position: absolute; left: 0; bottom: 0; z-index: -1; width: var(--garden-w, 42%); height: auto; aspect-ratio: 240 / 300; overflow: visible; pointer-events: none; }
.kebun-malam-garden--tall { aspect-ratio: 160 / 420; }
.kebun-malam-garden--right { left: auto; right: 0; transform: scaleX(-1); }
.kebun-malam-leaf--back { fill: url(#kebun-malam-g-back); color: transparent; }
.kebun-malam-leaf--front { fill: url(#kebun-malam-g-front); color: color-mix(in srgb, var(--inv-leaf) 45%, #d6e6cf); }
.kebun-malam-leaf--silver { fill: url(#kebun-malam-g-silver); color: transparent; }
.kebun-malam-garden--light use { fill: color-mix(in srgb, var(--inv-leaf) 17%, transparent); color: transparent; }
.kebun-malam-garden--light .kebun-malam-leaf--back { fill: color-mix(in srgb, var(--inv-leaf) 9%, transparent); }

.kebun-malam-stop--lit { stop-color: color-mix(in srgb, var(--inv-leaf) 66%, var(--inv-accent)); }
.kebun-malam-stop--leaf { stop-color: var(--inv-leaf); }
.kebun-malam-stop--shade { stop-color: color-mix(in srgb, var(--inv-leaf) 32%, var(--inv-deep)); }
.kebun-malam-stop--silver-lit { stop-color: color-mix(in srgb, var(--inv-leaf) 52%, #cfdccb); }
.kebun-malam-stop--silver { stop-color: color-mix(in srgb, var(--inv-leaf) 72%, #8ea89d); }
.kebun-malam-stop--back { stop-color: color-mix(in srgb, var(--inv-leaf) 42%, var(--inv-primary)); }
.kebun-malam-stop--deep { stop-color: var(--inv-deep); }
.kebun-malam-stop--flame-core { stop-color: #fffbe8; }
.kebun-malam-stop--flame { stop-color: var(--inv-accent); }
.kebun-malam-stop--glass { stop-color: color-mix(in srgb, var(--inv-glow) 70%, #5a2f00); }
.kebun-malam-stop--metal { stop-color: #6d6450; }
.kebun-malam-stop--metal-dark { stop-color: #1f1d16; }

/* a photo in a warm arch with an amber rim light (sections/_arch); --arch-w sets the size */
.kebun-malam-arch {
    --arch-w: 12rem; --arch-ratio: 4 / 5.2; --arch-pos: center 30%;
    position: relative; width: var(--arch-w); aspect-ratio: var(--arch-ratio); margin: 0; flex: none;
}
/* a fine amber line following the arch a few pixels outside it */
.kebun-malam-arch::before {
    content: ''; position: absolute; inset: -7px; pointer-events: none;
    border-radius: calc(var(--arch-w) / 2 + 7px) calc(var(--arch-w) / 2 + 7px) 20px 20px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 62%, transparent);
}
.kebun-malam-arch__window {
    position: relative; width: 100%; height: 100%; overflow: hidden;
    border-radius: calc(var(--arch-w) / 2) calc(var(--arch-w) / 2) 14px 14px;
    background: var(--kebun-malam-night);
    box-shadow:
        0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 88%, transparent),
        0 0 38px 2px color-mix(in srgb, var(--inv-glow) 36%, transparent),
        0 30px 50px -26px rgb(0 0 0 / .7);
}
/* the rim light: warm light along the inside of the edge only */
.kebun-malam-arch__window::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow:
        inset 0 0 0 1px rgb(255 240 205 / .5),
        inset 0 16px 22px -16px color-mix(in srgb, var(--inv-accent) 85%, transparent),
        inset 12px 0 20px -16px color-mix(in srgb, var(--inv-accent) 60%, transparent),
        inset -12px 0 20px -16px color-mix(in srgb, var(--inv-accent) 60%, transparent);
}
.kebun-malam-arch__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--arch-pos); }
.kebun-malam-arch__empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; }
.kebun-malam-arch__bulb { position: relative; display: block; width: 1px; height: calc(var(--arch-w) * .2); }
.kebun-malam-arch__bulb .kebun-malam-bulb { --b: calc(var(--arch-w) * .1); left: 0; top: 0; }
.kebun-malam-arch__initials {
    position: relative; font-family: var(--kebun-malam-serif); font-style: italic; font-weight: 500; line-height: 1; white-space: nowrap;
    font-size: calc(var(--arch-w) * .19); color: #fff6df; text-shadow: 0 0 22px color-mix(in srgb, var(--inv-glow) 50%, transparent);
}
.kebun-malam-arch__initials--one { font-size: calc(var(--arch-w) * .36); }

/* a small hanging lantern (sections/_lantern) with a warm halo */
.kebun-malam-lantern { position: relative; display: block; width: 2.6rem; margin: 0 auto; }
.kebun-malam-lantern svg { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.kebun-malam-lantern::before {
    content: ''; position: absolute; left: 50%; top: 58%; width: 9rem; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
    background: radial-gradient(circle, color-mix(in srgb, var(--inv-accent) 40%, transparent), color-mix(in srgb, var(--inv-glow) 12%, transparent) 40%, transparent 68%);
}
.kebun-malam-lantern__cord { fill: none; stroke: color-mix(in srgb, var(--inv-accent) 40%, #2a271d); stroke-width: 1.6; }
.kebun-malam-lantern__bars { fill: none; stroke: #2a271d; stroke-width: 1.6; }
.kebun-malam-lantern__candle { fill: #f6ead0; }
.kebun-malam-lantern__flame { fill: var(--inv-accent); }
.kebun-malam-lantern__core { fill: #fffbe8; }

/* a small pill link (Instagram) */
.kebun-malam-pill {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 2.2rem; padding: .3rem .85rem; border-radius: 999px;
    font-size: .8rem; font-weight: 500; text-decoration: none; color: var(--inv-primary); background: #fff;
    box-shadow: inset 0 0 0 1px var(--kebun-malam-line);
}
.kebun-malam-pill .kebun-malam-icon { width: 1rem; height: 1rem; color: var(--inv-leaf); }

/* ---------- 4. cover ---------- */
.kebun-malam-cover {
    --arch-cover: min(56vw, 14.5rem, 31svh);
    --lights-h: clamp(62px, 12svh, 100px);
    position: fixed; inset: 0; z-index: 30; overflow-x: hidden; overflow-y: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: safe center;
    min-height: 100svh; padding: calc(var(--lights-h) * .74) 1.4rem 1.6rem;
    isolation: isolate; color: var(--inv-background);
    background:
        radial-gradient(130% 30% at 50% 0%, color-mix(in srgb, var(--inv-glow) 22%, transparent), transparent 72%),
        radial-gradient(70% 34% at 50% 40%, color-mix(in srgb, var(--inv-leaf) 36%, transparent), transparent 75%),
        radial-gradient(90% 30% at 50% 100%, color-mix(in srgb, var(--inv-leaf) 34%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-primary), var(--inv-deep));
    transition: opacity .9s ease;
}
.kebun-malam-lights--cover { position: fixed; --lights-h: inherit; }
.kebun-malam-cover .kebun-malam-bulb { --b: clamp(13px, 4.2vw, 17px); }
.kebun-malam-garden--cover { position: fixed; --garden-w: min(34vw, 10rem, 19svh); }
.kebun-malam-cover__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; text-align: center; transition: transform .9s cubic-bezier(.5, 0, .3, 1); }

.kebun-malam-arch--cover { --arch-w: var(--arch-cover); --arch-ratio: 4 / 5.1; --arch-pos: center 22%; }

.kebun-malam-cover__title {
    display: inline-flex; align-items: center; gap: .75rem; margin: 1.4rem 0 0;
    font-size: .72rem; font-weight: 700; line-height: 1.2; letter-spacing: .34em; text-transform: uppercase; color: var(--inv-accent);
}
.kebun-malam-cover__title::before, .kebun-malam-cover__title::after { content: ''; width: 1.6rem; height: 1px; background: color-mix(in srgb, var(--inv-accent) 60%, transparent); }
.kebun-malam-cover__names {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .28em; margin: .3rem 0 0;
    font-family: var(--kebun-malam-serif); font-style: italic; font-weight: 600; font-size: 3.1rem; line-height: 1.02; letter-spacing: -.01em;
    color: #fff7e4; overflow-wrap: anywhere; text-shadow: 0 0 26px color-mix(in srgb, var(--inv-glow) 40%, transparent);
}
.kebun-malam-cover__amp { font-weight: 500; font-size: .78em; color: var(--inv-accent); }
.kebun-malam-cover__date { margin: .55rem 0 0; font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-background) 88%, transparent); }
.kebun-malam-cover__quote {
    max-width: 30ch; margin: .7rem 0 0; font-family: var(--kebun-malam-serif); font-style: italic; font-weight: 500;
    font-size: 1.06rem; line-height: 1.35; color: color-mix(in srgb, var(--inv-background) 80%, transparent);
}
.kebun-malam-cover__guest {
    width: min(100%, 18rem); margin: 1rem 0 0; padding: .5rem 1rem .6rem; border-radius: 14px;
    background: color-mix(in srgb, var(--inv-deep) 62%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 40%, transparent);
}
.kebun-malam-cover__guest p { margin: 0; font-size: .62rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-accent); }
.kebun-malam-cover__guest-name { display: block; font-family: var(--kebun-malam-serif); font-size: 1.32rem; font-weight: 600; line-height: 1.2; color: #fffaf0; overflow-wrap: anywhere; }
.kebun-malam-cover__open {
    margin-top: 1rem; min-height: 3rem; padding: .7rem 2rem; font-weight: 700; letter-spacing: .04em;
    color: var(--inv-primary); background: var(--kebun-malam-amber);
    box-shadow: 0 0 0 1px color-mix(in srgb, #fff 40%, transparent) inset, 0 0 26px -2px color-mix(in srgb, var(--inv-glow) 60%, transparent), 0 14px 24px -14px rgb(0 0 0 / .8);
}

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

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

/* opening: lantern, basmalah, greeting, message; the verse on a cream panel */
.kebun-malam-opening { padding: 0 1.6rem 4.8rem; }
.kebun-malam-opening__lantern { width: 2.5rem; margin-bottom: 1.1rem; }
.kebun-malam-opening__lantern svg { margin-top: -2px; }
.kebun-malam-opening__basmalah { margin: 0 auto .5rem !important; font-size: 1.85rem; }
.kebun-malam-opening__greeting { max-width: 22ch !important; font-family: var(--kebun-malam-serif); font-size: 1.6rem; font-weight: 500; font-style: italic; line-height: 1.25; color: #fffaf0; }
.kebun-malam-opening__message { max-width: 30ch !important; color: var(--kebun-malam-cream-soft); }
.kebun-malam-opening__quote {
    position: relative; max-width: 23rem; margin: 2.4rem auto 0; padding: 2rem 1.4rem 1.5rem; border-radius: 18px;
    color: var(--inv-text); background: var(--kebun-malam-paper);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-accent) 55%, transparent), 0 0 40px -8px color-mix(in srgb, var(--inv-glow) 40%, transparent), var(--kebun-malam-drop);
}
.kebun-malam-opening__quote::before {
    content: '\201C'; position: absolute; left: 50%; top: -1.55rem; width: 3rem; height: 3rem; margin-left: -1.5rem; border-radius: 50%;
    font-family: var(--kebun-malam-serif); font-size: 3rem; font-weight: 600; line-height: 3.6rem; color: var(--inv-primary); background: var(--kebun-malam-amber);
    box-shadow: 0 0 22px -2px color-mix(in srgb, var(--inv-glow) 70%, transparent);
}
.kebun-malam-opening__quote p { margin: 0; font-family: var(--kebun-malam-serif); font-style: italic; font-size: 1.16rem; font-weight: 500; line-height: 1.5; color: var(--inv-primary); }
.kebun-malam-opening__quote cite {
    display: inline-block; margin-top: 1rem; padding: .25rem .85rem; border-radius: 999px; font-style: normal; font-size: .66rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: #fffaf0; background: var(--inv-leaf);
}
.kebun-malam-garden--opening { --garden-w: 46%; bottom: -2rem; opacity: .9; }

/* couple: two asymmetric rows (arch left / right on a night block), the "&" medallion between them */
.kebun-malam-couple { padding-bottom: 5rem; }
.kebun-malam-person { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.3rem; text-align: left; }
.kebun-malam-person--flip { grid-template-columns: minmax(0, 1fr) auto; text-align: right; }
.kebun-malam-person--flip .kebun-malam-person__media { order: 2; }
.kebun-malam-person__media { position: relative; padding: 10px 0 0 10px; }
.kebun-malam-person__media::before {
    content: ''; position: absolute; z-index: -1; left: -1.8rem; right: 2.2rem; top: 2.6rem; bottom: -1rem; border-radius: 0 18px 18px 0;
    background: var(--kebun-malam-night);
}
.kebun-malam-person--flip .kebun-malam-person__media { padding: 10px 10px 0 0; }
.kebun-malam-person--flip .kebun-malam-person__media::before { left: 2.2rem; right: -1.8rem; border-radius: 18px 0 0 18px; }
.kebun-malam-arch--person { --arch-w: min(9.6rem, 40vw); --arch-ratio: 4 / 5.3; --arch-pos: center 28%; }
.kebun-malam-person__label { margin: 0; font-size: .62rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-leaf); }
.kebun-malam-person__nickname {
    margin: .1rem 0 0; font-family: var(--kebun-malam-serif); font-style: italic; font-weight: 600; font-size: 3rem; line-height: 1;
    letter-spacing: -.01em; color: var(--inv-primary); overflow-wrap: anywhere;
}
.kebun-malam-person__name { margin: .3rem 0 0; font-family: var(--kebun-malam-serif); font-size: 1.2rem; font-weight: 700; line-height: 1.2; color: var(--inv-text); overflow-wrap: anywhere; }
.kebun-malam-person__parents { margin: .5rem 0 .7rem; font-size: .84rem; line-height: 1.45; color: var(--kebun-malam-muted); }
.kebun-malam-person__parents span:first-child { display: block; }
.kebun-malam-person__parents strong { font-weight: 600; color: var(--inv-text); }
.kebun-malam-person__parents .kebun-malam-amp { padding: 0 .2em; }
.kebun-malam-couple__join { position: relative; z-index: 1; display: flex; justify-content: center; margin: 2rem 0 1.6rem; }
.kebun-malam-couple__join::before { content: ''; position: absolute; left: 50%; top: -2rem; height: 2rem; width: 1px; background: color-mix(in srgb, var(--inv-text) 45%, transparent); }
.kebun-malam-couple__amp {
    display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%;
    font-family: var(--kebun-malam-serif); font-style: italic; font-size: 2rem; font-weight: 500; line-height: 1; color: var(--inv-accent);
    background: var(--kebun-malam-night);
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 70%, transparent), 0 0 28px 2px color-mix(in srgb, var(--inv-glow) 45%, transparent);
}
.kebun-malam-garden--couple { --garden-w: 58%; bottom: auto; top: 30%; }

/* families: the intent, then two cream cards hanging from a light wire, one big bulb between them */
.kebun-malam-families { padding-bottom: 5.4rem; }
.kebun-malam-families__intent {
    position: relative; z-index: 1; max-width: 30ch !important; margin-bottom: 1.6rem !important; font-family: var(--kebun-malam-serif); font-style: italic; font-weight: 500;
    font-size: 1.3rem; line-height: 1.45; color: #fffaf0;
}
.kebun-malam-families__hang { --hang-h: 88px; position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; align-items: start; }
.kebun-malam-families__wire { position: absolute; left: -1.4rem; right: -1.4rem; top: 0; width: calc(100% + 2.8rem); height: var(--hang-h); overflow: visible; }
.kebun-malam-families__wire path { fill: none; stroke: color-mix(in srgb, var(--inv-accent) 30%, #2a271d); stroke-width: 1.6; }
.kebun-malam-families__bulb { position: absolute; left: 50%; top: calc(var(--hang-h) * .6); z-index: 3; width: 0; height: 0; }
.kebun-malam-families__bulb .kebun-malam-bulb { --b: 28px; left: 0; top: -4px; }
.kebun-malam-family {
    position: relative; margin-top: calc(var(--hang-h) * .44); padding: 1.6rem .85rem 1.1rem; border-radius: 6px 6px 14px 14px; text-align: center;
    color: var(--inv-text); background: var(--kebun-malam-paper); transform: rotate(2.4deg); transform-origin: 50% -12px;
    box-shadow: inset 0 0 0 4px var(--kebun-malam-paper), inset 0 0 0 5px color-mix(in srgb, var(--inv-ink) 30%, transparent), 0 0 34px -10px color-mix(in srgb, var(--inv-glow) 45%, transparent), 0 24px 40px -22px rgb(0 0 0 / .7);
}
.kebun-malam-family--host { transform: rotate(-2.4deg); }
/* the wooden peg holding the card on the wire */
.kebun-malam-family::before {
    content: ''; position: absolute; left: 50%; top: -14px; width: 8px; height: 24px; margin-left: -4px; border-radius: 2px;
    background: linear-gradient(90deg, #8d6338, #d2a670 45%, #9b6f40); box-shadow: 0 2px 3px rgb(0 0 0 / .35);
}
.kebun-malam-family::after { content: ''; position: absolute; left: 50%; top: -3px; width: 12px; height: 2px; margin-left: -6px; background: #6b4a28; }
.kebun-malam-families__hang--one { grid-template-columns: minmax(0, 18rem); justify-content: center; }
.kebun-malam-families__hang--one .kebun-malam-family { margin-top: calc(var(--hang-h) * 1.05); transform: none; }
.kebun-malam-families__hang--one .kebun-malam-family::before, .kebun-malam-families__hang--one .kebun-malam-family::after { display: none; }
.kebun-malam-family__label {
    display: inline-block; margin: 0; padding: .2rem .6rem; border-radius: 999px; font-size: .56rem; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: #fffaf0; background: var(--inv-leaf);
}
.kebun-malam-family--host .kebun-malam-family__label { color: var(--inv-primary); background: var(--inv-accent); }
.kebun-malam-family__who { margin: .6rem 0 0; font-family: var(--kebun-malam-serif); font-style: italic; font-size: 1rem; font-weight: 600; line-height: 1.2; color: var(--inv-ink); }
.kebun-malam-family__name { margin: .15rem 0 0; font-family: var(--kebun-malam-serif); font-size: 1.22rem; font-weight: 700; line-height: 1.15; color: var(--inv-primary); text-wrap: balance; overflow-wrap: anywhere; }
.kebun-malam-family__detail { display: flex; flex-direction: column; align-items: center; gap: .2rem; margin: .6rem 0 0; font-size: .78rem; line-height: 1.45; color: var(--kebun-malam-muted); }
.kebun-malam-family__detail .kebun-malam-icon { width: 1rem; height: 1rem; color: var(--inv-leaf); }
.kebun-malam-garden--families { --garden-w: 40%; bottom: -1.5rem; }

/* events: night cards and white cards in turn, an arch photo with an amber rim, a tall date tag */
.kebun-malam-event + .kebun-malam-event { margin-top: 2.4rem; }
.kebun-malam-event {
    position: relative; padding: .6rem .6rem 1.3rem; border-radius: 24px; text-align: left; color: var(--inv-background);
    background: var(--kebun-malam-night);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 40%, transparent), var(--kebun-malam-drop);
}
.kebun-malam-event--light { color: var(--inv-text); background: #fff; box-shadow: inset 0 5px 0 var(--inv-leaf), inset 0 0 0 1px var(--kebun-malam-line), var(--kebun-malam-drop); }
.kebun-malam-event__media { position: relative; border-radius: 160px 160px 16px 16px; overflow: hidden; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 80%, transparent), 0 0 30px -4px color-mix(in srgb, var(--inv-glow) 40%, transparent); }
.kebun-malam-event__media::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 16px 22px -16px color-mix(in srgb, var(--inv-accent) 80%, transparent); }
.kebun-malam-event__photo { display: block; width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; object-position: center 40%; }
.kebun-malam-event__top { display: flex; align-items: center; gap: .95rem; padding: 1.1rem .7rem 0; }
.kebun-malam-event__date {
    display: flex; flex-direction: column; align-items: center; flex: none; width: 4.4rem; margin: 0; padding: .7rem .2rem .6rem; border-radius: 999px 999px 12px 12px;
    color: var(--inv-primary); background: var(--kebun-malam-amber); box-shadow: 0 0 22px -4px color-mix(in srgb, var(--inv-glow) 65%, transparent);
}
.kebun-malam-event__weekday { font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.kebun-malam-event__day { font-family: var(--kebun-malam-serif); font-style: italic; font-size: 2.5rem; font-weight: 600; line-height: 1; }
.kebun-malam-event__month { font-size: .58rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.kebun-malam-event--light .kebun-malam-event__date { color: #fffaf0; background: linear-gradient(180deg, var(--inv-leaf), var(--inv-primary)); box-shadow: none; }
.kebun-malam-event__head { min-width: 0; }
.kebun-malam-event__name { margin: 0; font-family: var(--kebun-malam-serif); font-size: 1.75rem; font-weight: 700; line-height: 1.06; color: #fffaf0; }
.kebun-malam-event--light .kebun-malam-event__name { color: var(--inv-primary); }
.kebun-malam-event__full { margin: .25rem 0 0; font-size: .82rem; color: var(--kebun-malam-cream-soft); }
.kebun-malam-event--light .kebun-malam-event__full { color: var(--kebun-malam-muted); }
.kebun-malam-event__rows { display: grid; gap: .75rem; margin: 1.1rem .7rem 0; padding: 1rem 0 0; list-style: none; font-size: .9rem; border-top: 1px solid color-mix(in srgb, var(--inv-accent) 28%, transparent); }
.kebun-malam-event--light .kebun-malam-event__rows { border-top-color: var(--kebun-malam-line); }
.kebun-malam-event__rows li { display: flex; align-items: flex-start; gap: .7rem; }
.kebun-malam-event__rows .kebun-malam-icon { width: 2.1rem; height: 2.1rem; padding: .45rem; border-radius: 50%; color: var(--inv-accent); background: color-mix(in srgb, var(--inv-accent) 14%, transparent); }
.kebun-malam-event--light .kebun-malam-event__rows .kebun-malam-icon { color: var(--inv-leaf); background: color-mix(in srgb, var(--inv-leaf) 12%, #fff); }
.kebun-malam-event__rows li > span { padding-top: .3rem; }
.kebun-malam-event__venue { display: block; font-weight: 600; }
.kebun-malam-event__address { display: block; font-size: .85rem; color: var(--kebun-malam-cream-soft); }
.kebun-malam-event--light .kebun-malam-event__address { color: var(--kebun-malam-muted); }
.kebun-malam-event .inv-maps { margin: 1.15rem .7rem 0; text-align: center; }
.kebun-malam-event .inv-maps .inv-button { width: 100%; font-weight: 600; color: var(--inv-primary); background: var(--kebun-malam-amber); }
.kebun-malam-event--light .inv-maps .inv-button { color: #fffaf0; background: linear-gradient(180deg, var(--inv-leaf), var(--inv-primary)); }
.kebun-malam-event .inv-maps__frame { height: 190px; border-radius: 14px; }

/* countdown: frosted glass tags with amber numerals; the calendar card well below the buttons */
.kebun-malam-countdown { padding-top: 6.4rem; }
.kebun-malam-lights--section { --lights-h: 64px; }
.kebun-malam-countdown .inv-countdown { gap: clamp(.45rem, 2.4vw, .75rem); }
.kebun-malam-countdown .inv-countdown__item {
    display: grid; place-content: center; width: clamp(4rem, 18.5vw, 4.7rem); min-width: 0; aspect-ratio: 4 / 4.8; padding: 0;
    border-radius: 999px 999px 14px 14px; color: var(--inv-background);
    background: color-mix(in srgb, var(--inv-deep) 45%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 55%, transparent), 0 0 26px -6px color-mix(in srgb, var(--inv-glow) 50%, transparent);
}
.kebun-malam-countdown .inv-countdown__value { padding-top: .35rem; font-variant-numeric: lining-nums tabular-nums; font-family: var(--kebun-malam-serif); font-style: italic; font-size: 2.1rem; font-weight: 600; line-height: 1; color: var(--inv-accent); text-shadow: 0 0 16px color-mix(in srgb, var(--inv-glow) 60%, transparent); }
.kebun-malam-countdown .inv-countdown__label { margin-top: .15rem; font-size: .54rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--kebun-malam-cream-soft); }
.kebun-malam-countdown .inv-countdown__done { font-family: var(--kebun-malam-serif); font-size: 1.4rem; font-style: italic; color: var(--inv-accent); }
.kebun-malam-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 2.1rem; }
.kebun-malam-countdown .inv-countdown__actions .inv-button {
    width: min(100%, 17rem); min-height: 2.75rem; padding: .6rem 1rem; font-size: .84rem; font-weight: 600;
    color: var(--inv-background); background: color-mix(in srgb, var(--inv-background) 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 70%, transparent);
}
.kebun-malam-countdown .inv-countdown__actions .inv-button:first-child { color: var(--inv-primary); background: var(--kebun-malam-amber); box-shadow: 0 0 22px -4px color-mix(in srgb, var(--inv-glow) 60%, transparent); }
.kebun-malam-countdown .inv-cal {
    --inv-cal-bg: var(--kebun-malam-paper); --inv-cal-mark: var(--inv-ink); --inv-cal-text: var(--inv-text);
    max-width: 19rem; margin: 2.8rem auto 0; border-radius: 14px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-accent) 50%, transparent), 0 0 40px -10px color-mix(in srgb, var(--inv-glow) 40%, transparent), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.kebun-malam-countdown .inv-cal__month { font-family: var(--kebun-malam-serif); font-size: 1.55rem; font-weight: 600; font-style: italic; color: var(--inv-primary); }

/* wedding plan: two bulbs on a wire (lit / waiting), then the glowing night card */
.kebun-malam-plan { padding-top: 3.8rem; padding-bottom: 5rem; }
.kebun-malam-plan__path { position: relative; z-index: 1; display: grid; grid-template-columns: 6rem minmax(0, 1fr) 6rem; align-items: start; max-width: 22rem; margin: 0 auto 2.6rem; padding: 0; list-style: none; }
.kebun-malam-plan__step { display: flex; flex-direction: column; align-items: center; }
.kebun-malam-plan__bulb { position: relative; display: block; width: 1px; height: 2.3rem; }
.kebun-malam-plan__bulb .kebun-malam-bulb { --b: 19px; left: 0; top: 0; }
.kebun-malam-plan__step--next .kebun-malam-bulb i::before { opacity: .42; }
.kebun-malam-plan__step--next .kebun-malam-bulb i::after { opacity: .3; }
.kebun-malam-plan__step-name { margin-top: .55rem; font-family: var(--kebun-malam-serif); font-size: 1.2rem; font-weight: 700; line-height: 1.1; color: var(--inv-primary); }
.kebun-malam-plan__step-when { font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--inv-leaf); }
.kebun-malam-plan__wire { position: relative; height: 1.2rem; margin: 0 -3rem; }
.kebun-malam-plan__wire svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kebun-malam-plan__wire path { fill: none; stroke: color-mix(in srgb, var(--inv-text) 60%, transparent); stroke-width: 1.4; }
.kebun-malam-plan__card {
    position: relative; z-index: 1; max-width: 22rem; margin: 2.2rem auto 0; padding: 3.2rem 1.5rem 2.1rem; border-radius: 170px 170px 18px 18px;
    color: var(--inv-background); background: var(--kebun-malam-night);
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 70%, transparent), 0 0 60px 4px color-mix(in srgb, var(--inv-glow) 38%, transparent), 0 30px 50px -26px rgb(0 0 0 / .7);
}
/* a fine amber line following the arch, inside the card */
.kebun-malam-plan__card::before {
    content: ''; position: absolute; inset: 8px; border-radius: 162px 162px 12px 12px; pointer-events: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 32%, transparent);
}
.kebun-malam-plan__lantern { position: absolute; left: 50%; top: -2.4rem; width: 2.4rem; margin-left: -1.2rem; }
.kebun-malam-plan__label { margin: .6rem 0 .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-accent); }
.kebun-malam-plan__date {
    margin: 0; font-family: var(--kebun-malam-serif); font-style: italic; font-size: 3.1rem; font-weight: 600; line-height: 1.02; letter-spacing: -.01em;
    color: #fff4d8; text-wrap: balance; overflow-wrap: anywhere; text-shadow: 0 0 26px color-mix(in srgb, var(--inv-glow) 55%, transparent);
}
.kebun-malam-plan__city { display: inline-flex; align-items: center; gap: .4rem; margin: .9rem 0 0; padding: .3rem .95rem; border-radius: 999px; font-size: .84rem; font-weight: 600; color: var(--inv-primary); background: var(--kebun-malam-amber); }
.kebun-malam-plan__city .kebun-malam-icon { width: 1rem; height: 1rem; }
.kebun-malam-plan__note { max-width: 28ch; margin: 1.1rem auto 0; font-family: var(--kebun-malam-serif); font-style: italic; font-size: 1.14rem; line-height: 1.45; color: var(--kebun-malam-cream-soft); }
.kebun-malam-garden--plan { --garden-w: 62%; bottom: -1rem; }

/* rundown: a vertical light wire with small glowing bulbs, the times in amber serif numerals on the left */
.kebun-malam-rundown__list { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; text-align: left; }
.kebun-malam-rundown__list::before {
    content: ''; position: absolute; left: 4.55rem; top: .3rem; bottom: .9rem; width: 1.5px; transform-origin: top;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 45%, #2a271d), color-mix(in srgb, var(--inv-accent) 30%, #2a271d) 90%, transparent);
}
.kebun-malam-rundown__item { position: relative; display: grid; grid-template-columns: 3.6rem 1.9rem minmax(0, 1fr); align-items: start; padding: 0 0 1.3rem; }
.kebun-malam-rundown__item:last-child { padding-bottom: 0; }
.kebun-malam-rundown__time { padding-top: .05rem; font-family: var(--kebun-malam-serif); font-style: italic; font-size: 1.5rem; font-weight: 600; line-height: 1.1; text-align: right; font-variant-numeric: lining-nums tabular-nums; color: var(--inv-accent); }
.kebun-malam-rundown__bulb {
    justify-self: center; width: .78rem; height: .9rem; margin-top: .5rem; border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%;
    background: radial-gradient(circle at 50% 42%, #fffbe8, var(--inv-accent) 45%, var(--inv-glow));
    box-shadow: 0 0 8px 2px color-mix(in srgb, var(--inv-glow) 60%, transparent), 0 0 22px 6px color-mix(in srgb, var(--inv-accent) 22%, transparent);
}
.kebun-malam-rundown__body h3 { margin: .2rem 0 0; font-size: .98rem; font-weight: 600; line-height: 1.4; color: #fffaf0; }
.kebun-malam-rundown__body p { margin: .15rem 0 0; font-size: .85rem; color: var(--kebun-malam-cream-soft); }
.kebun-malam-garden--rundown { --garden-w: 34%; bottom: -2.6rem; opacity: .75; }
.kebun-malam-garden--gift { --garden-w: 36%; bottom: -2rem; opacity: .8; }

/* love story: arch photos on a leaf block beside the text, alternating; text-only chapters as night cards */
.kebun-malam-story__list { position: relative; display: grid; gap: 2.6rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.kebun-malam-story__item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.3rem; }
.kebun-malam-story__item--flip { grid-template-columns: minmax(0, 1fr) auto; text-align: right; }
.kebun-malam-story__item--flip .kebun-malam-story__media { order: 2; }
.kebun-malam-story__media { position: relative; padding: 0 10px 10px 0; }
.kebun-malam-story__media::before { content: ''; position: absolute; z-index: -1; left: 1.6rem; right: 0; top: 2.4rem; bottom: 0; border-radius: 16px; background: color-mix(in srgb, var(--inv-leaf) 85%, var(--inv-primary)); }
.kebun-malam-story__item--flip .kebun-malam-story__media { padding: 0 0 10px 10px; }
.kebun-malam-story__item--flip .kebun-malam-story__media::before { left: 0; right: 1.6rem; }
.kebun-malam-arch--story { --arch-w: min(8.4rem, 35vw); --arch-ratio: 4 / 5.2; --arch-pos: center 35%; }
.kebun-malam-story__when {
    display: inline-block; padding: .2rem .75rem; border-radius: 999px; font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--inv-accent); background: var(--inv-primary);
}
.kebun-malam-story__body h3 { margin: .45rem 0 0; font-family: var(--kebun-malam-serif); font-style: italic; font-size: 1.6rem; font-weight: 600; line-height: 1.1; color: var(--inv-primary); }
.kebun-malam-story__body p { margin: .35rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--kebun-malam-muted); }
.kebun-malam-story__item--text {
    grid-template-columns: 2.4rem minmax(0, 1fr); align-items: start; gap: 1rem; padding: 1.25rem 1.2rem; border-radius: 18px; text-align: left;
    color: var(--inv-background); background: var(--kebun-malam-night);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 40%, transparent), 0 0 34px -10px color-mix(in srgb, var(--inv-glow) 45%, transparent);
}
.kebun-malam-story__item--text .kebun-malam-story__when { color: var(--inv-primary); background: var(--inv-accent); }
.kebun-malam-story__item--text h3 { color: #fffaf0; }
.kebun-malam-story__item--text p { color: var(--kebun-malam-cream-soft); }
.kebun-malam-story__number {
    display: grid; place-items: center; width: 2.4rem; height: 2.8rem; border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%;
    font-family: var(--kebun-malam-serif); font-size: 1.3rem; font-weight: 700; color: var(--inv-primary);
    background: radial-gradient(circle at 50% 42%, #fffbe8, var(--inv-accent) 50%, var(--inv-glow));
    box-shadow: 0 0 14px 3px color-mix(in srgb, var(--inv-glow) 50%, transparent);
}

/* gallery: the first photo wide with an arched top and an amber rim, the others rounded with a warm line */
.kebun-malam-gallery .inv-gallery { gap: .6rem; }
.kebun-malam-gallery .inv-gallery__item { border-radius: 12px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-accent) 55%, transparent), 0 16px 28px -18px rgb(0 0 0 / .7); }
.kebun-malam-gallery .inv-gallery__item:first-child {
    grid-column: 1 / -1; aspect-ratio: 4 / 3.4; border-radius: 200px 200px 14px 14px;
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 85%, transparent), 0 0 38px 0 color-mix(in srgb, var(--inv-glow) 36%, transparent);
}

/* live streaming: a night card with an amber rim and a glow */
.kebun-malam-stream__card {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem 1rem; max-width: 24rem; margin: 0 auto; padding: 1.4rem;
    border-radius: 20px; color: var(--inv-background); text-align: left; background: var(--kebun-malam-night);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 45%, transparent), 0 0 40px -10px color-mix(in srgb, var(--inv-glow) 45%, transparent), var(--kebun-malam-drop);
}
.kebun-malam-stream__icon { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; color: var(--inv-primary); background: var(--kebun-malam-amber); box-shadow: 0 0 24px -2px color-mix(in srgb, var(--inv-glow) 65%, transparent); }
.kebun-malam-stream__icon .kebun-malam-icon { width: 1.7rem; height: 1.7rem; }
.kebun-malam-stream__title { margin: 0 0 .15rem; font-family: var(--kebun-malam-serif); font-size: 1.75rem; font-weight: 600; line-height: 1.05; color: #fffaf0; }
.kebun-malam-stream__title em { color: var(--inv-accent); }
.kebun-malam-stream__text p { margin: 0; font-size: .86rem; color: var(--kebun-malam-cream-soft); }
.kebun-malam-stream__text .kebun-malam-stream__note { margin-top: .3rem; font-weight: 600; color: var(--inv-accent); }
.kebun-malam-stream__button { grid-column: 1 / -1; min-height: 2.75rem; color: var(--inv-primary) !important; background: var(--kebun-malam-amber) !important; font-weight: 700; }

/* RSVP card: cream with a warm glow above it */
.kebun-malam-rsvp__card {
    position: relative; z-index: 1; padding: 2rem 1.15rem 1.4rem; border-radius: 20px; color: var(--inv-text); background: var(--kebun-malam-paper);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-accent) 55%, transparent), 0 -10px 50px -16px color-mix(in srgb, var(--inv-glow) 50%, transparent), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.kebun-malam-rsvp__intro { margin: 0 auto 1.1rem; max-width: 30ch; font-size: .9rem; color: var(--kebun-malam-muted); }
.kebun-malam-rsvp__sent { margin-bottom: 1rem; }
.kebun-malam-rsvp__check { display: block; width: 4.4rem; height: 4.4rem; margin: 0 auto .5rem; overflow: visible; }
.kebun-malam-rsvp__check-ring { fill: none; stroke: var(--inv-glow); stroke-width: 3; }
.kebun-malam-rsvp__check-disc { fill: var(--inv-primary); }
.kebun-malam-rsvp__check path { fill: none; stroke: var(--inv-accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
html.inv-anim .kebun-malam-rsvp__sent .kebun-malam-rsvp__check { animation: kebun-malam-pop .8s cubic-bezier(.34, 1.56, .64, 1) both; }
html.inv-anim .kebun-malam-rsvp__sent .kebun-malam-rsvp__check path { animation: kebun-malam-draw .45s ease-out .35s both; }
.kebun-malam-rsvp__thanks { margin: 0; font-family: var(--kebun-malam-serif); font-style: italic; font-size: 1.9rem; font-weight: 600; color: var(--inv-primary); }
.kebun-malam-rsvp__line { margin: .1rem 0 0; font-size: .9rem; color: var(--kebun-malam-muted); }
.kebun-malam-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .84rem; font-weight: 600; color: var(--inv-ink); }

/* gift: cream cards with a leaf-green top band and a small bulb hanging from it, two per row */
.kebun-malam-gift__intro { position: relative; z-index: 1; color: var(--kebun-malam-cream-soft); }
.kebun-malam-gift .inv-gift { position: relative; z-index: 1; }
.kebun-malam-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.3rem; }
.kebun-malam-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.kebun-malam-gift .inv-gift__account,
.kebun-malam-gift .inv-gift__address {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; margin: 0;
    padding: 2.3rem .75rem 1rem; border-radius: 12px; color: var(--inv-text); background: var(--kebun-malam-paper);
    box-shadow: inset 0 .55rem 0 var(--inv-leaf), 0 0 30px -10px color-mix(in srgb, var(--inv-glow) 40%, transparent), 0 18px 30px -20px rgb(0 0 0 / .6);
}
.kebun-malam-gift .inv-gift__account::before {
    content: ''; position: absolute; left: 50%; top: .55rem; width: 1px; height: .45rem; background: #2a271d;
}
.kebun-malam-gift .inv-gift__account::after {
    content: ''; position: absolute; left: 50%; top: 1rem; width: .7rem; height: .8rem; margin-left: -.35rem; border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%;
    background: radial-gradient(circle at 50% 42%, #fffbe8, var(--inv-accent) 45%, var(--inv-glow));
    box-shadow: 0 0 8px 2px color-mix(in srgb, var(--inv-glow) 55%, transparent);
}
.kebun-malam-gift .inv-gift__account p, .kebun-malam-gift .inv-gift__address p { margin: 0; }
.kebun-malam-gift .inv-gift__bank { font-weight: 700; font-size: .85rem; color: var(--inv-primary); }
.kebun-malam-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .4rem; background: #fff; }
.kebun-malam-gift .inv-gift__logo img { max-width: 5rem; }
.kebun-malam-gift .inv-gift__number {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .98rem; font-weight: 700;
    letter-spacing: .03em; line-height: 1.3; overflow-wrap: anywhere; color: var(--inv-text);
}
.kebun-malam-gift .inv-gift__holder { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--kebun-malam-muted); overflow-wrap: anywhere; }
.kebun-malam-gift .inv-button { margin-top: .35rem; min-height: 2.25rem; padding: .35rem .9rem; font-size: .74rem; font-weight: 600; }
.kebun-malam-gift .inv-gift__address { margin-top: .75rem; padding-top: 1.6rem; font-size: .875rem; }
.kebun-malam-gift .inv-gift__address .inv-gift__holder { font-size: .72rem; }

/* co-hosts: the names in the serif, one per line, split by small amber dots, on the leaf band */
.kebun-malam-cohosts__list { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.kebun-malam-cohosts__list li { max-width: 26ch; font-family: var(--kebun-malam-serif); font-size: 1.32rem; font-weight: 600; line-height: 1.25; color: #fffaf0; }
.kebun-malam-cohosts__list li + li::before {
    content: ''; display: block; width: 7px; height: 7px; margin: 0 auto .55rem; border-radius: 50%;
    background: var(--inv-accent); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--inv-glow) 55%, transparent);
}

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

/* health protocol: white chips */
.kebun-malam-protocol__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.kebun-malam-protocol__list li {
    display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border-radius: 999px; font-size: .84rem; font-weight: 500;
    background: #fff; box-shadow: inset 0 0 0 1px var(--kebun-malam-line);
}
.kebun-malam-protocol__list .kebun-malam-icon { width: 1rem; height: 1rem; color: var(--inv-leaf); }
.kebun-malam-protocol__note { font-size: .88rem; color: var(--kebun-malam-muted); }

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

/* closing: the full photo fading into the night under a strand of lights, then the lantern, the thanks and the names */
.kebun-malam-closing {
    padding: 6rem 1.6rem 3rem;
    /* plain night under the photo, so its fade meets the section without a seam */
    background:
        radial-gradient(80% 30% at 0% 100%, color-mix(in srgb, var(--inv-leaf) 40%, transparent), transparent 72%),
        radial-gradient(80% 30% at 100% 100%, color-mix(in srgb, var(--inv-leaf) 30%, transparent), transparent 72%),
        linear-gradient(180deg, var(--inv-primary) 0 50%, var(--inv-deep));
}
.kebun-malam-closing--photo { padding-top: 0; }
.kebun-malam-closing__photo { position: relative; z-index: -1; height: min(125vw, 36rem); margin: 0 -1.6rem; overflow: hidden; }
.kebun-malam-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 60%; --inv-parallax: 30px; }
.kebun-malam-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(120% 30% at 50% 0%, color-mix(in srgb, var(--inv-deep) 55%, transparent), transparent 70%),
        linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--inv-primary) 55%, transparent) 62%, var(--inv-primary) 92%);
}
.kebun-malam-lights--closing { --lights-h: 78px; }
.kebun-malam-garden--closing { --garden-w: 38%; bottom: -1rem; }
.kebun-malam-closing__body { position: relative; z-index: 1; }
.kebun-malam-closing--photo .kebun-malam-closing__body { margin-top: -6.5rem; }
.kebun-malam-closing__lantern { width: 2.3rem; margin-bottom: .9rem; }
.kebun-malam-closing__eyebrow { margin: 0 0 .3rem; font-size: .7rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-accent); }
.kebun-malam-closing__title { margin: 0 0 1rem; font-family: var(--kebun-malam-serif); font-size: 3.2rem; font-weight: 600; line-height: 1; color: #fffaf0; }
.kebun-malam-closing__title em { font-style: italic; font-weight: 500; color: var(--inv-accent); }
.kebun-malam-closing__message { margin: 0 auto; max-width: 30ch; color: var(--kebun-malam-cream-soft); }
.kebun-malam-closing__salam { margin: 1.1rem auto 0; max-width: 24ch; font-family: var(--kebun-malam-serif); font-size: 1.25rem; font-style: italic; font-weight: 500; line-height: 1.3; color: var(--inv-accent); }
.kebun-malam-closing__signature { margin: 1.1rem auto 0; max-width: 30ch; font-size: .86rem; color: var(--kebun-malam-cream-soft); }
.kebun-malam-closing__names { margin: 1.6rem 0 0; font-family: var(--kebun-malam-serif); font-style: italic; font-size: 2.7rem; font-weight: 600; line-height: 1.05; color: #fff7e4; text-shadow: 0 0 26px color-mix(in srgb, var(--inv-glow) 40%, transparent); }
.kebun-malam-closing__names .kebun-malam-amp { font-size: .8em; }
.kebun-malam-closing__monogram {
    display: inline-flex; align-items: center; gap: .45rem; margin: .9rem 0 0; padding: .35rem 1rem; border-radius: 999px;
    font-family: var(--kebun-malam-serif); font-size: 1.05rem; font-weight: 700; letter-spacing: .14em; color: var(--inv-accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 50%, transparent);
}
.kebun-malam-closing__monogram i { font-style: normal; color: color-mix(in srgb, var(--inv-accent) 60%, transparent); }

/* ---------- 6. forms (shared RSVP + wishes, restyled) ---------- */
.kebun-malam-main .inv-form { gap: 1rem; text-align: left; }
.kebun-malam-main .inv-form label, .kebun-malam-main .inv-form__choices legend { font-size: .82rem; font-weight: 600; color: var(--inv-text); }
.kebun-malam-main .inv-form input:not([type=radio]):not([type=checkbox]),
.kebun-malam-main .inv-form select,
.kebun-malam-main .inv-form textarea {
    width: 100%; min-height: 2.9rem; padding: .7rem .9rem; border: 0; border-radius: 10px;
    font: 400 .95rem/1.4 var(--kebun-malam-sans); color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 26%, transparent);
    transition: box-shadow .2s ease;
}
.kebun-malam-main .inv-form select {
    appearance: none; padding-right: 2.4rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .8rem center / 1.1rem no-repeat;
}
.kebun-malam-main .inv-form input:not([type=radio]):focus-visible,
.kebun-malam-main .inv-form select:focus-visible,
.kebun-malam-main .inv-form textarea:focus-visible {
    outline: none; box-shadow: inset 0 0 0 2px var(--inv-leaf), 0 0 0 4px color-mix(in srgb, var(--inv-accent) 45%, transparent);
}
.kebun-malam-main .inv-form button[type=submit] { width: 100%; min-height: 3rem; font-weight: 700; letter-spacing: .04em; color: #fffaf0; background: linear-gradient(180deg, var(--inv-leaf), var(--inv-primary)); box-shadow: 0 12px 22px -12px color-mix(in srgb, var(--inv-primary) 80%, transparent); }
.kebun-malam-main .inv-form .inv-button--outline { width: 100%; min-height: 2.75rem; }
.kebun-malam-main .inv-form__notice { text-align: center; }

/* the three answers as cards with icons (the radio dot is hidden but still focusable) */
.kebun-malam-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.kebun-malam-rsvp .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.kebun-malam-rsvp .inv-form__choices label {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .45rem;
    min-height: 5.4rem; padding: .85rem .3rem .75rem; border-radius: 12px; cursor: pointer; text-align: center;
    font-size: .84rem; font-weight: 600; line-height: 1.2; color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 22%, transparent);
    transition: background-color .25s ease, color .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.kebun-malam-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* icon: a warm disc (::before) with a check, a cross or a question mark in it (::after, a mask in the text colour) */
.kebun-malam-rsvp .inv-form__choices label::before {
    content: ''; width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--inv-accent) 30%, #fff);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-ink) 50%, transparent);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease;
}
.kebun-malam-rsvp .inv-form__choices label::after {
    content: ''; position: absolute; left: 50%; top: 1.3rem; width: 1.2rem; height: 1.2rem; margin-left: -.6rem;
    background: currentColor; color: var(--inv-primary); pointer-events: none;
    -webkit-mask: var(--kebun-malam-choice-icon) center / contain no-repeat; mask: var(--kebun-malam-choice-icon) center / contain no-repeat;
}
.kebun-malam-rsvp .inv-form__choices label:nth-of-type(1) {
    --kebun-malam-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.kebun-malam-rsvp .inv-form__choices label:nth-of-type(2) {
    --kebun-malam-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
}
.kebun-malam-rsvp .inv-form__choices label:nth-of-type(3) {
    --kebun-malam-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M8.5 8.8a3.5 3.5 0 1 1 4.9 3.2c-.9.4-1.4 1.1-1.4 2v.5M12 19h.01'/%3E%3C/svg%3E");
}
.kebun-malam-rsvp .inv-form__choices label:has(input:checked) {
    color: #fffaf0; background: linear-gradient(180deg, var(--inv-leaf), var(--inv-primary)); transform: translateY(-3px);
    box-shadow: 0 0 0 2px var(--inv-accent), 0 0 22px -4px color-mix(in srgb, var(--inv-glow) 60%, transparent);
}
.kebun-malam-rsvp .inv-form__choices label:has(input:checked)::before { background: radial-gradient(circle at 50% 42%, #fffbe8, var(--inv-accent) 50%, var(--inv-glow)); box-shadow: 0 0 12px 2px color-mix(in srgb, var(--inv-glow) 60%, transparent); transform: scale(1.1); }
.kebun-malam-rsvp .inv-form__choices label:has(input:checked)::after { color: var(--inv-primary); }
.kebun-malam-rsvp .inv-form__choices label:has(input:focus-visible) { outline: 2px solid var(--inv-ink); outline-offset: 3px; }

/* wishes: the form on a white card with a night offset block, the wishes in a scroll box of about three */
.kebun-malam-wishes .inv-wishes { position: relative; z-index: 1; --inv-wishes-height: 20rem; }
.kebun-malam-wishes .inv-form {
    margin-right: 8px; padding: 1.3rem 1.1rem; border-radius: 16px; background: #fff;
    box-shadow: inset 0 0 0 1px var(--kebun-malam-line), 8px 8px 0 0 var(--inv-primary);
}
.kebun-malam-wishes .inv-wishes__list { margin-top: 1.4rem; }
.kebun-malam-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .55rem; border-radius: 16px; background: color-mix(in srgb, var(--inv-leaf) 8%, transparent); box-shadow: inset 0 0 0 1px var(--kebun-malam-line);
}
.kebun-malam-wishes .inv-wish { padding: .75rem .9rem; border-radius: 10px; background: #fff; text-align: left; box-shadow: 0 2px 10px rgb(0 0 0 / .05); border-left: 3px solid var(--inv-glow); }
.kebun-malam-wishes .inv-wish__name { font-weight: 700; color: var(--inv-primary); }
.kebun-malam-wishes .inv-wish__message { font-size: .88rem; line-height: 1.5; }
.kebun-malam-wishes .inv-wish__time { font-size: .72rem; color: var(--kebun-malam-muted); }

/* ---------- 7. shared components ---------- */
.kebun-malam-main .inv-button { font-weight: 600; }
body .inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--inv-primary) 92%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-background) 72%, transparent);
    --inv-nav-active: var(--inv-accent);
    font-family: var(--kebun-malam-sans);
}

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

/* short phones: the cover arch and type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .kebun-malam-cover { --arch-cover: min(52vw, 13.5rem, 29svh); padding-bottom: 1.4rem; }
    .kebun-malam-cover__title { margin-top: 1.15rem; }
    .kebun-malam-cover__names { font-size: 2.75rem; }
    .kebun-malam-cover__quote { margin-top: .55rem; font-size: 1rem; }
    .kebun-malam-cover__guest { margin-top: .8rem; }
    .kebun-malam-cover__open { margin-top: .85rem; }
}
@media (max-height: 660px) {
    .kebun-malam-cover { --arch-cover: min(46vw, 26svh); padding-bottom: 1.2rem; }
    .kebun-malam-cover__title { margin-top: 1rem; font-size: .66rem; }
    .kebun-malam-cover__names { font-size: 2.4rem; }
    .kebun-malam-cover__date { margin-top: .4rem; font-size: .68rem; }
    .kebun-malam-cover__quote { font-size: .94rem; line-height: 1.3; }
    .kebun-malam-cover__guest { padding: .4rem .85rem .5rem; }
    .kebun-malam-cover__guest-name { font-size: 1.18rem; }
    .kebun-malam-cover__open { min-height: 2.75rem; padding: .6rem 1.7rem; }
}
/* very short screens (in-app browsers): a smaller arch and quote, so everything fits */
@media (max-height: 600px) {
    .kebun-malam-cover { --arch-cover: min(40vw, 23svh); }
    .kebun-malam-cover__title { margin-top: .85rem; }
    .kebun-malam-cover__names { font-size: 2.15rem; }
    .kebun-malam-cover__quote { margin-top: .4rem; font-size: .88rem; }
    .kebun-malam-cover__guest { margin-top: .65rem; }
    .kebun-malam-cover__open { margin-top: .7rem; }
}

/* wide screens: the phone-width column on the night backdrop */
@media (min-width: 560px) {
    body.kebun-malam-body { background: var(--kebun-malam-night); background-attachment: fixed; }
    .kebun-malam-main { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
    .kebun-malam-garden--cover { --garden-w: min(28vw, 15rem, 30svh); }
}

/* ---------- 9. motion ---------- */
@keyframes kebun-malam-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes kebun-malam-pop { 0% { transform: scale(0); } 55% { transform: scale(1.12); } 75% { transform: scale(.95); } 100% { transform: scale(1); } }
@keyframes kebun-malam-arch-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes kebun-malam-zoom-out { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes kebun-malam-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kebun-malam-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
/* a bulb switching on: a quick warm flash, a dip, then steady (runs once) */
@keyframes kebun-malam-light-on { 0% { opacity: 0; } 35% { opacity: 1; filter: brightness(1.35); } 55% { opacity: .6; filter: none; } 100% { opacity: 1; } }
@keyframes kebun-malam-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* cover (≤ 2.5 s, once): the bulbs light up one by one from the left (0.25–2.3 s); the arch fades up and its
   photo settles from a slight zoom (0.2–1.4 s); the foliage rises a little; the text follows (inv-enter) */
html.inv-anim .kebun-malam-lights--cover .kebun-malam-bulb i::before,
html.inv-anim .kebun-malam-lights--cover .kebun-malam-bulb i::after { animation: kebun-malam-light-on .7s ease-out calc(.25s + var(--i) * .17s) both; }
html.inv-anim .kebun-malam-arch--cover { animation: kebun-malam-arch-in 1s cubic-bezier(.2, .7, .2, 1) .2s both; }
html.inv-anim .kebun-malam-arch--cover .kebun-malam-arch__photo { animation: kebun-malam-zoom-out 1.2s cubic-bezier(.2, .7, .2, 1) .2s both; }
html.inv-anim .kebun-malam-garden--cover { animation: kebun-malam-rise 1.2s cubic-bezier(.2, .7, .2, 1) .3s both; }
html.inv-anim .kebun-malam-garden--cover.kebun-malam-garden--right { animation-name: kebun-malam-rise-flip; }
@keyframes kebun-malam-rise-flip { from { opacity: 0; transform: scaleX(-1) translateY(24px); } to { opacity: 1; transform: scaleX(-1); } }

/* section strands light up once, bulb after bulb, when they are revealed */
html.inv-anim .kebun-malam-main .kebun-malam-lights .kebun-malam-bulb i::before,
html.inv-anim .kebun-malam-main .kebun-malam-lights .kebun-malam-bulb i::after { opacity: 0; }
html.inv-anim .kebun-malam-main :is(.is-revealed .kebun-malam-lights, .kebun-malam-lights.is-revealed) .kebun-malam-bulb i::before,
html.inv-anim .kebun-malam-main :is(.is-revealed .kebun-malam-lights, .kebun-malam-lights.is-revealed) .kebun-malam-bulb i::after { animation: kebun-malam-light-on .6s ease-out calc(.2s + var(--i) * .13s) both; }
/* a revealed strand keeps its place (no slide) */
html.inv-anim .kebun-malam-main .kebun-malam-lights[data-reveal] { transform: none; opacity: 1; }
html.inv-anim .kebun-malam-main .kebun-malam-garden[data-reveal]:not(.kebun-malam-garden--right) { transform: translateY(26px); }
html.inv-anim .kebun-malam-main .kebun-malam-garden--right[data-reveal] { transform: scaleX(-1) translateY(26px); }
html.inv-anim .kebun-malam-main .kebun-malam-garden--right[data-reveal].is-revealed { transform: scaleX(-1); }

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

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