/*
 * Template "Hangat Keluarga" (Syukuran & Rumah Baru) — the warmth of a family home in late-afternoon light.
 * A linen wall with slanted sunbeams, teak / walnut wood with a real grain, house plants drawn in layered
 * gradients (sections/_defs: monstera, banana leaf, pothos), photos in wooden frames hanging on a cord
 * (sections/_frame), kraft name tags, handwritten notes, a pendant lamp over the dining table, a cork board
 * with a polaroid, a family album, a timeline of wooden planks and a golden-hour closing.
 * Mobile-first, one column (~460px) on a walnut backdrop on wide screens.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (leaf green / burnt amber / olive / sage: buttons, labels)
 *   --inv-accent (amber sunset: the handwritten accent words, tags, seals)
 *   --inv-background (warm linen)  --inv-text  --inv-deep (walnut: dark sections, titles on light)
 *   --inv-wood (teak: frames, planks, blocks)  --inv-shine (golden light)  --inv-soft (kraft / sand)
 *   --inv-leaf (the plants and the leaf-green sections)
 * Everything else is mixed from those, so a new variant only needs these nine colours.
 *
 * Section tones (set on each section in its partial): .hk-tone--wall (linen wall in sunbeams), --paper
 * (warm paper), --wood (walnut with grain), --leaf (deep leaf green), --amber (sunset). Light and dark
 * alternate down the page.
 *
 * Motion only runs with html.inv-anim (set by <x-inv.head> unless the guest prefers reduced motion);
 * without it everything is shown finished.
 *
 * Contents: 1 base & textures · 2 section tones & photo backgrounds · 3 shared pieces (heading, leaves,
 *           frame, pins & tape, notes, tags) · 4 cover · 5 sections in page order · 6 forms (RSVP, wishes) ·
 *           7 shared components · 8 screen sizes · 9 motion
 */

/* ---------- 1. base & textures ---------- */
:root {
    /* defaults = the "Jati Daun" variant (the variant's colours override these) */
    --inv-primary: #2f5e3c;
    --inv-accent: #d27a26;
    --inv-background: #f6eedf;
    --inv-text: #2b1e15;
    --inv-deep: #3a2416;
    --inv-wood: #9a5b2e;
    --inv-shine: #f4bf63;
    --inv-soft: #ead8ba;
    --inv-leaf: #3b6b40;
    --inv-radius: 14px;

    --hk-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --hk-hand: 'Caveat', 'Segoe Print', cursive;
    --hk-sans: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --hk-col: 460px;

    --hk-paper: color-mix(in srgb, #fff 62%, var(--inv-background));
    --hk-linen: color-mix(in srgb, #fff 35%, var(--inv-background));
    --hk-kraft: color-mix(in srgb, var(--inv-soft) 75%, var(--inv-wood));
    --hk-title: var(--inv-deep);
    --hk-amber: color-mix(in srgb, var(--inv-accent) 78%, var(--inv-deep));
    --hk-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    --hk-cream: color-mix(in srgb, var(--inv-background) 88%, transparent);
    --hk-ring: color-mix(in srgb, var(--inv-deep) 16%, transparent);
    --hk-leafdeep: color-mix(in srgb, var(--inv-leaf) 62%, #08140b);
    --hk-wood-light: color-mix(in srgb, var(--inv-wood) 72%, var(--inv-shine));
    --hk-wood-dark: color-mix(in srgb, var(--inv-wood) 55%, var(--inv-deep));
    --hk-brass: linear-gradient(160deg, #fff4cf, var(--inv-shine) 35%, color-mix(in srgb, var(--inv-shine) 60%, var(--inv-wood)) 75%, #fff0c4);
    --hk-drop: 0 22px 36px -20px color-mix(in srgb, var(--inv-deep) 70%, transparent);
    /* the late-afternoon sun comes from the upper left: shadows fall to the lower right */
    --hk-cast: 10px 16px 24px -10px color-mix(in srgb, var(--inv-deep) 55%, transparent);

    /* wood grain: stretched fractal noise as dark streaks with alpha (tileable), laid over a wood colour */
    --hk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.11' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.04 0 0 0 0 0.01 0 0 0 -1.9 1.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    /* paper / linen speckle */
    --hk-speckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 -2.2 1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
    /* cork: coarse warm speckle */
    --hk-corkdots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.35' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0 0.03 0 0 0 -3 1.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
    /* teak surface (grain over a lit gradient) */
    --hk-teak: var(--hk-grain) 0 0 / 500px 300px, linear-gradient(135deg, var(--hk-wood-light), var(--inv-wood) 45%, var(--hk-wood-dark));

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

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

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

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

.hk-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.hk-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.hk-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 */
.hk-main { max-width: var(--hk-col); margin: 0 auto; }
.hk-branding { max-width: var(--hk-col); margin: 0 auto; }

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

.hk-arabic { font-family: 'Amiri', 'Traditional Arabic', serif; line-height: 1.9; color: var(--inv-deep); }

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

/* wall: linen with a fine speckle and two slanted sunbeams from a window in the upper left */
.hk-tone--wall {
    background:
        var(--hk-speckle) 0 0 / 220px 220px,
        radial-gradient(90% 40% at 0% 0%, color-mix(in srgb, var(--inv-shine) 30%, transparent), transparent 75%),
        linear-gradient(180deg, var(--hk-linen), var(--inv-background) 60%, color-mix(in srgb, var(--inv-soft) 55%, var(--inv-background)));
}
.hk-tone--wall::before, .hk-cover__light {
    content: ''; position: absolute; inset: -10% -30%; z-index: -1; pointer-events: none;
    background:
        linear-gradient(118deg,
            transparent 18%,
            color-mix(in srgb, #fff 55%, var(--inv-shine)) 18.5%, color-mix(in srgb, #fff 55%, var(--inv-shine)) 29%,
            transparent 29.5%, transparent 33%,
            color-mix(in srgb, #fff 55%, var(--inv-shine)) 33.5%, color-mix(in srgb, #fff 55%, var(--inv-shine)) 41%,
            transparent 41.5%);
    opacity: .42; filter: blur(16px); mix-blend-mode: soft-light;
}

/* paper: warm kraft-tinted paper */
.hk-tone--paper {
    background:
        var(--hk-speckle) 0 0 / 220px 220px,
        radial-gradient(80% 36% at 100% 0%, color-mix(in srgb, var(--inv-shine) 22%, transparent), transparent 75%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-soft) 70%, var(--inv-background)), color-mix(in srgb, var(--inv-soft) 40%, var(--inv-background)));
}

/* wood: walnut with its grain and a warm lamp glow from above */
.hk-tone--wood {
    color: var(--inv-background);
    background:
        radial-gradient(70% 34% at 50% 0%, color-mix(in srgb, var(--inv-shine) 22%, transparent), transparent 75%),
        var(--hk-grain) 0 0 / 500px 300px,
        linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 88%, var(--inv-wood)), var(--inv-deep) 55%, color-mix(in srgb, var(--inv-deep) 85%, #000));
}
/* leaf: deep leaf green, a warm glow in one corner */
.hk-tone--leaf {
    color: var(--inv-background);
    background:
        radial-gradient(80% 36% at 100% 0%, color-mix(in srgb, var(--inv-shine) 18%, transparent), transparent 75%),
        radial-gradient(90% 44% at 0% 100%, color-mix(in srgb, var(--inv-leaf) 55%, transparent), transparent 75%),
        var(--hk-speckle) 0 0 / 220px 220px,
        var(--hk-leafdeep);
}
/* amber: a sunset band (white text keeps ≥ 4.5:1) */
.hk-tone--amber {
    color: #fff;
    background:
        radial-gradient(70% 40% at 80% 0%, color-mix(in srgb, var(--inv-shine) 45%, transparent), transparent 72%),
        linear-gradient(175deg, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-deep)), color-mix(in srgb, var(--inv-accent) 42%, var(--inv-deep)));
}
:is(.hk-tone--wood, .hk-tone--leaf, .hk-tone--amber) a:not(.inv-button) { color: var(--inv-shine); }
:is(.hk-tone--wood, .hk-tone--leaf, .hk-tone--amber) .hk-arabic { color: var(--inv-shine); }

/* a client photo behind a section, under a strong gradient of the section's own tone */
.hk-bgphoto { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.hk-bgphoto img { display: block; width: 100%; height: calc(100% + 80px); margin-top: -40px; object-fit: cover; object-position: center 45%; --inv-parallax: 40px; }
.hk-bgphoto::after { content: ''; position: absolute; inset: 0; }
.hk-tone--wood .hk-bgphoto::after {
    background:
        radial-gradient(70% 34% at 50% 0%, color-mix(in srgb, var(--inv-shine) 22%, transparent), transparent 75%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 84%, transparent), color-mix(in srgb, var(--inv-deep) 72%, transparent) 45%, color-mix(in srgb, var(--inv-deep) 95%, transparent));
}
.hk-tone--amber .hk-bgphoto img { filter: sepia(.35) saturate(.9); }
.hk-tone--amber .hk-bgphoto::after {
    background: linear-gradient(175deg, color-mix(in srgb, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-deep)) 86%, transparent), color-mix(in srgb, color-mix(in srgb, var(--inv-accent) 42%, var(--inv-deep)) 92%, transparent));
}

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

/* section heading: an eyebrow between two short leaf lines, a Fraunces title, a handwritten amber word */
.hk-heading { margin: 0 0 2rem; }
.hk-heading--left { text-align: left; }
.hk-heading__eyebrow {
    display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .5rem;
    font-size: .7rem; font-weight: 800; line-height: 1.2; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-primary);
}
.hk-heading__eyebrow::before, .hk-heading__eyebrow::after { content: ''; width: 1.1rem; height: 2px; border-radius: 2px; background: currentColor; opacity: .55; }
.hk-heading--left .hk-heading__eyebrow::before { display: none; }
.hk-heading__title {
    margin: 0; font-family: var(--hk-display); font-variation-settings: 'SOFT' 100; font-size: 2.35rem; font-weight: 500; line-height: 1.08;
    letter-spacing: -.01em; color: var(--hk-title); text-wrap: balance;
}
.hk-heading__title em {
    position: relative; display: inline-block; font-family: var(--hk-hand); font-style: normal; font-weight: 700;
    font-size: 1.32em; line-height: .9; color: var(--hk-amber); rotate: -3deg;
}
.hk-heading__swash { position: absolute; left: 4%; right: -2%; bottom: -.18em; width: 98%; height: .26em; fill: none; stroke: var(--inv-accent); stroke-width: 3; stroke-linecap: round; opacity: .7; overflow: visible; }
:is(.hk-tone--wood, .hk-tone--leaf, .hk-tone--amber) .hk-heading__eyebrow { color: var(--inv-shine); }
:is(.hk-tone--wood, .hk-tone--leaf, .hk-tone--amber) .hk-heading__title { color: #fff; }
:is(.hk-tone--wood, .hk-tone--leaf) .hk-heading__title em { color: var(--inv-shine); }
.hk-tone--amber .hk-heading__title em { color: #fff3d6; }
.hk-tone--amber .hk-heading__swash { stroke: var(--inv-shine); }

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

/* the plants (sections/_leaf); a silhouette version for soft leaf shadows */
.hk-leaf { display: block; overflow: visible; pointer-events: none; }
/* on the dark tones: a dimmed, slightly blurred plant in the background */
.hk-shadow-leaf { position: absolute; z-index: -1; filter: blur(1.5px) saturate(.85); opacity: .32; }

/* brass pin, paper tape */
.hk-pin {
    position: absolute; z-index: 3; left: 50%; top: -.45rem; width: .95rem; height: .95rem; margin-left: -.475rem; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff8e3 0 12%, var(--inv-shine) 30%, color-mix(in srgb, var(--inv-shine) 45%, var(--inv-wood)) 80%);
    box-shadow: 2px 4px 5px -1px rgb(0 0 0 / .45);
}
.hk-tape {
    position: absolute; z-index: 3; left: 50%; top: -.7rem; width: 5.2rem; height: 1.45rem; margin-left: -2.6rem; rotate: -3deg;
    background: color-mix(in srgb, var(--inv-soft) 70%, transparent);
    background-image: linear-gradient(90deg, rgb(255 255 255 / .35), transparent 30%, transparent 70%, rgb(255 255 255 / .25));
    clip-path: polygon(3% 0, 97% 4%, 100% 30%, 97% 60%, 99% 100%, 2% 96%, 0 66%, 3% 34%);
    box-shadow: 0 1px 2px rgb(0 0 0 / .12);
}

/* a linen note (quote, closing) */
.hk-note {
    position: relative; margin: 0 auto; padding: 1.5rem 1.3rem 1.2rem; border-radius: 3px; color: var(--inv-text);
    background: var(--hk-speckle) 0 0 / 220px 220px, var(--hk-paper);
    box-shadow: var(--hk-cast);
}

/* the wooden picture frame (sections/_frame): --frame-w size, --frame-ratio photo shape, --frame-pos crop */
.hk-frame { --frame-w: 14rem; --frame-ratio: 3 / 4; --frame-pos: center 35%; --rail: calc(var(--frame-w) * .06); position: relative; width: var(--frame-w); margin: 0; flex: none; }
.hk-frame:has(.hk-frame__nail) { margin-top: calc(var(--frame-w) * .2 + .6rem); }
.hk-frame__cord {
    position: absolute; left: 16%; bottom: calc(100% - var(--rail) * .6); width: 68%; height: calc(var(--frame-w) * .2); overflow: visible;
    fill: none; stroke: color-mix(in srgb, var(--inv-deep) 70%, transparent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.hk-frame__nail {
    position: absolute; z-index: 2; left: 50%; top: calc(var(--frame-w) * -.2 - .3rem); width: .7rem; height: .7rem; margin-left: -.35rem; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff6d6, var(--inv-shine) 40%, var(--hk-wood-dark));
    box-shadow: 2px 3px 4px rgb(0 0 0 / .4);
}
.hk-frame__wood {
    position: relative; padding: var(--rail); border-radius: 3px;
    background: var(--hk-teak);
    box-shadow:
        inset 1.5px 1.5px 0 color-mix(in srgb, #fff 40%, transparent),
        inset -2px -2px 0 color-mix(in srgb, #000 30%, transparent),
        inset 0 0 0 calc(var(--rail) * .42) color-mix(in srgb, #000 6%, transparent),
        var(--hk-cast);
}
.hk-frame__mat {
    position: relative; padding: calc(var(--frame-w) * .045);
    background: var(--hk-speckle) 0 0 / 220px 220px, var(--hk-linen);
    box-shadow: inset 2px 2px 4px rgb(0 0 0 / .35), inset -1px -1px 0 rgb(255 255 255 / .5);
}
.hk-frame__photo, .hk-frame__empty { display: block; width: 100%; aspect-ratio: var(--frame-ratio); object-fit: cover; object-position: var(--frame-pos); box-shadow: 0 0 0 1px rgb(0 0 0 / .12); }
.hk-frame__empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; color: var(--inv-wood);
    background:
        radial-gradient(70% 45% at 30% 20%, color-mix(in srgb, var(--inv-shine) 40%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-soft) 60%, var(--hk-linen)), var(--inv-soft));
}
.hk-frame__sketch { width: 64%; }
.hk-frame__sketch-leaf { fill: color-mix(in srgb, var(--inv-leaf) 45%, transparent); stroke: var(--inv-leaf); }
.hk-frame__monogram { font-family: var(--hk-hand); font-size: calc(var(--frame-w) * .14); font-weight: 700; line-height: 1; color: var(--hk-amber); white-space: nowrap; }
.hk-frame__plate {
    position: absolute; left: 50%; bottom: calc(var(--rail) / 2); transform: translate(-50%, 50%);
    padding: .05rem .6rem .1rem; border-radius: 2px; white-space: nowrap;
    font-family: var(--hk-display); font-size: .7rem; font-weight: 600; font-style: normal; letter-spacing: .08em; line-height: 1.35;
    color: color-mix(in srgb, var(--inv-deep) 85%, #000); text-shadow: 0 1px 0 rgb(255 255 255 / .55);
    background: var(--hk-brass); box-shadow: 0 1px 2px rgb(0 0 0 / .45), inset 0 0 0 1px rgb(255 255 255 / .35);
}

/* kraft name tag on a string */
.hk-tag {
    position: relative; display: inline-flex; align-items: center; min-height: 2.3rem; padding: .3rem .85rem .3rem 1.5rem;
    font-family: var(--hk-hand); font-size: 1.32rem; font-weight: 700; line-height: 1.05; color: var(--inv-deep);
    background: var(--hk-speckle) 0 0 / 220px 220px, var(--hk-kraft);
    clip-path: polygon(.75rem 0, 100% 0, 100% 100%, .75rem 100%, 0 50%);
    filter: drop-shadow(2px 4px 3px rgb(0 0 0 / .18));
}
.hk-tag::before { content: ''; position: absolute; left: .75rem; top: 50%; width: .42rem; height: .42rem; margin-top: -.21rem; border-radius: 50%; background: var(--inv-background); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-wood) 70%, transparent); }

/* ---------- 4. cover ---------- */
.hk-cover {
    --frame-cover: min(62vw, 15rem, calc(37svh * .72));
    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: 1.6rem 1.4rem 1.8rem;
    isolation: isolate; color: var(--inv-text);
    background:
        var(--hk-speckle) 0 0 / 220px 220px,
        radial-gradient(70% 38% at 18% 8%, color-mix(in srgb, var(--inv-shine) 42%, transparent), transparent 72%),
        radial-gradient(90% 40% at 100% 100%, color-mix(in srgb, var(--inv-soft) 90%, transparent), transparent 75%),
        linear-gradient(180deg, var(--hk-linen), var(--inv-background) 55%, color-mix(in srgb, var(--inv-soft) 60%, var(--inv-background)));
    transition: opacity .9s ease;
}
.hk-cover__light { position: absolute; opacity: .75; }
.hk-cover__inner { position: relative; 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); }

/* the plants around the edges of the screen (never over the photo or the text) */
.hk-cover .hk-leaf { position: absolute; z-index: -1; }
.hk-cover__pothos { left: -1.4rem; top: -1.2rem; width: clamp(4.2rem, 21vw, 6.5rem); rotate: -8deg; transform-origin: 50% 0; }
.hk-cover__banana { right: -2.6rem; top: 12%; width: clamp(4.4rem, 22vw, 6.8rem); rotate: -28deg; transform-origin: 50% 100%; }
.hk-cover__monstera { left: -3.4rem; bottom: -2.6rem; width: clamp(9rem, 44vw, 13rem); rotate: 28deg; transform-origin: 50% 100%; }
.hk-cover__monstera--back { left: auto; right: -4rem; bottom: -3.8rem; width: clamp(7.5rem, 36vw, 10.5rem); rotate: -36deg; scale: -1 1; filter: brightness(.85); }

.hk-cover__title {
    display: inline-flex; align-items: center; gap: .55rem; margin: 0;
    font-size: .72rem; font-weight: 800; line-height: 1.2; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-primary);
}
.hk-cover__title::before, .hk-cover__title::after { content: ''; width: 1.3rem; height: 2px; border-radius: 2px; background: var(--inv-accent); }

.hk-frame--cover { --frame-w: var(--frame-cover); --frame-pos: 50% 30%; margin-top: calc(var(--frame-cover) * .2 + .7rem); transform-origin: 50% calc(var(--frame-cover) * -.2); }
.hk-frame--cover .hk-frame__plate { font-size: .74rem; }

.hk-cover__text { display: flex; flex-direction: column; align-items: center; margin-top: 1.05rem; }
.hk-cover__name {
    margin: 0; max-width: 16ch; font-family: var(--hk-display); font-variation-settings: 'SOFT' 100; font-weight: 600; font-size: 2.1rem; line-height: 1.05;
    letter-spacing: -.015em; color: var(--hk-title); text-wrap: balance; overflow-wrap: anywhere;
}
.hk-cover__date {
    display: inline-flex; align-items: center; gap: .5rem; margin: .45rem 0 0; font-size: .86rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--inv-primary);
}
.hk-cover__quote { max-width: 28ch; margin: .35rem 0 0; font-family: var(--hk-hand); font-size: 1.3rem; font-weight: 500; line-height: 1.12; color: color-mix(in srgb, var(--inv-text) 86%, var(--inv-background)); }
.hk-cover__guest {
    position: relative; width: min(100%, 18.5rem); margin: .9rem 0 0; padding: .7rem 1rem .6rem; border-radius: 3px;
    background: var(--hk-speckle) 0 0 / 220px 220px, var(--hk-paper); rotate: -1deg;
    box-shadow: 4px 8px 16px -8px color-mix(in srgb, var(--inv-deep) 60%, transparent), inset 0 0 0 1px var(--hk-ring);
}
.hk-cover__guest::before {
    content: ''; position: absolute; left: 50%; top: -.42rem; width: 4rem; height: .85rem; margin-left: -2rem; rotate: 2deg;
    background: color-mix(in srgb, var(--inv-accent) 45%, transparent);
    clip-path: polygon(3% 0, 97% 4%, 100% 30%, 97% 60%, 99% 100%, 2% 96%, 0 66%, 3% 34%);
}
.hk-cover__guest p { margin: 0; font-size: .62rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-primary); }
.hk-cover__guest-name { display: block; font-family: var(--hk-display); font-weight: 500; font-size: 1.2rem; line-height: 1.25; color: var(--inv-text); overflow-wrap: anywhere; }
.hk-cover__open {
    margin-top: 1rem; min-height: 3rem; padding: .7rem 2rem; border-radius: 999px; font-weight: 800; letter-spacing: .03em;
    color: #fff8e6; background: var(--hk-grain) 0 0 / 500px 300px, linear-gradient(160deg, var(--inv-wood), var(--hk-wood-dark));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 0 0 3px var(--inv-background), 0 0 0 4.5px color-mix(in srgb, var(--inv-wood) 60%, transparent), 0 14px 22px -10px color-mix(in srgb, var(--inv-deep) 75%, transparent);
    text-shadow: 0 1px 1px rgb(0 0 0 / .35);
}

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

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

/* opening: the monstera crest, basmalah, greeting and message on walnut; the quote on a pinned linen note */
.hk-opening { padding: 3.6rem 1.6rem 4.4rem; }
.hk-opening__crest { display: flex; justify-content: center; align-items: flex-end; height: 4.4rem; margin: 0 auto 1rem; }
.hk-opening__leaf { width: 3.6rem; }
.hk-opening__leaf--l { rotate: -32deg; margin-right: -.6rem; }
.hk-opening__leaf--r { rotate: 32deg; scale: -1 1; margin-left: -.6rem; }
.hk-opening__basmalah { margin: 0 0 .5rem !important; font-size: 1.9rem; }
.hk-opening__greeting { margin: 0 auto .9rem !important; max-width: 20ch !important; font-family: var(--hk-display); font-variation-settings: 'SOFT' 100; font-style: italic; font-size: 1.5rem; line-height: 1.25; color: #fff; }
.hk-opening__message { max-width: 30ch !important; color: var(--hk-cream); }
.hk-opening__quote { max-width: 21rem; margin-top: 2.2rem; rotate: -1.2deg; text-align: left; }
.hk-opening__quote blockquote { margin: 0; font-family: var(--hk-display); font-variation-settings: 'SOFT' 100; font-style: italic; font-size: 1.1rem; line-height: 1.45; color: var(--inv-deep); }
.hk-opening__quote figcaption { margin-top: .5rem; text-align: right; font-family: var(--hk-hand); font-size: 1.45rem; font-weight: 700; line-height: 1; color: var(--hk-amber); }

/* host: the photo wall */
.hk-host { padding-bottom: 4.6rem; }
.hk-host__wall { position: relative; display: flex; justify-content: center; }
.hk-frame--host { --frame-w: min(15.5rem, 68vw); --frame-ratio: 4 / 5; --frame-pos: center 40%; rotate: -1.2deg; }
.hk-host__pothos { position: absolute; z-index: 1; right: calc(50% - min(7.75rem, 34vw) - 3.8rem); top: -.6rem; width: 4.6rem; rotate: 10deg; transform-origin: 50% 0; }
.hk-host__short {
    position: absolute !important; z-index: 2; left: calc(50% - min(7.75rem, 34vw) - 1.9rem); bottom: -1.1rem; margin: 0 !important; padding: .9rem .9rem .55rem;
    font-family: var(--hk-hand); font-size: 1.45rem; font-weight: 700; line-height: 1; color: var(--inv-deep); white-space: nowrap;
    background: color-mix(in srgb, var(--inv-shine) 55%, #fff); rotate: -6deg;
    box-shadow: 3px 6px 10px -4px rgb(0 0 0 / .35);
}
.hk-host__short .hk-tape { width: 3rem; margin-left: -1.5rem; height: 1.1rem; top: -.5rem; }
.hk-host__family {
    margin: 1.6rem auto 0; max-width: 15ch; font-family: var(--hk-display); font-variation-settings: 'SOFT' 100; font-weight: 600; font-size: 2.05rem; line-height: 1.06;
    color: var(--hk-title); overflow-wrap: anywhere; text-wrap: balance;
}
.hk-host__parents { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .45rem; margin: 1.5rem 0 0; }
.hk-host__parents:not(:has(.hk-host__amp)) { grid-template-columns: minmax(0, 18rem); justify-content: center; }
.hk-namecard {
    display: flex; flex-direction: column; justify-content: center; min-height: 100%; margin: 0; padding: .75rem .6rem .8rem;
    border: calc(.38rem) solid transparent; border-radius: 3px;
    background: var(--hk-speckle) 0 0 / 220px 220px padding-box, var(--hk-paper) padding-box, var(--hk-teak) border-box;
    box-shadow: inset 1px 1px 3px rgb(0 0 0 / .25), var(--hk-cast);
}
.hk-host__parents .hk-namecard:first-child { rotate: -1.5deg; }
.hk-host__parents .hk-namecard:last-child { rotate: 1.5deg; }
.hk-namecard small { display: block; font-size: .58rem; font-weight: 800; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; color: var(--inv-primary); }
.hk-namecard span { display: block; margin-top: .2rem; font-family: var(--hk-display); font-weight: 500; font-size: 1.05rem; line-height: 1.2; color: var(--inv-text); overflow-wrap: anywhere; }
.hk-host__amp { font-family: var(--hk-hand); font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--hk-amber); }
.hk-host__members { position: relative; margin-top: 2.3rem; }
.hk-host__members-label { margin: 0 0 .4rem; font-family: var(--hk-hand); font-size: 1.35rem; font-weight: 700; line-height: 1; color: var(--hk-amber); }
.hk-host__tags { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem .55rem; margin: 0; padding: .9rem 0 0; list-style: none; }
/* the twine across the top of the tags */
.hk-host__tags::before {
    content: ''; position: absolute; left: -1.4rem; right: -1.4rem; top: .3rem; height: 1.4rem; pointer-events: none;
    border-top: 1.5px solid color-mix(in srgb, var(--inv-wood) 70%, transparent); border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.hk-host__tags .hk-tag:nth-child(odd) { rotate: -3deg; }
.hk-host__tags .hk-tag:nth-child(even) { rotate: 2.5deg; translate: 0 .3rem; }

/* occasion: the pendant lamp, its light, the dining table */
.hk-occasion { padding: 0 1.6rem 0; }
.hk-lamp { position: relative; width: 7.2rem; margin: 0 auto .4rem; }
.hk-lamp__art { position: relative; z-index: 1; display: block; width: 100%; overflow: visible; }
.hk-lamp__cord { fill: none; stroke: color-mix(in srgb, var(--inv-background) 35%, transparent); stroke-width: 1.6; }
.hk-lamp__cap { fill: var(--hk-wood-dark); }
.hk-lamp__shade { fill: color-mix(in srgb, var(--inv-wood) 70%, var(--inv-shine)); }
.hk-lamp__weave { fill: none; stroke: color-mix(in srgb, var(--inv-deep) 55%, transparent); stroke-width: 1.3; }
.hk-lamp__rim { fill: none; stroke: var(--hk-wood-dark); stroke-width: 3; stroke-linecap: round; }
.hk-lamp__bulb { fill: #fff6dc; filter: drop-shadow(0 0 8px var(--inv-shine)); }
/* the cone of light falling from the lamp over the text */
.hk-lamp__glow {
    position: absolute; z-index: 0; left: 50%; top: 88%; width: 26rem; height: 30rem; margin-left: -13rem; pointer-events: none;
    background: radial-gradient(50% 60% at 50% 0%, color-mix(in srgb, var(--inv-shine) 42%, transparent), color-mix(in srgb, var(--inv-shine) 10%, transparent) 60%, transparent 80%);
    clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
    filter: blur(10px);
}
.hk-occasion__eyebrow { position: relative; margin: 1.2rem auto .4rem !important; font-size: .72rem; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-shine); }
.hk-occasion__type { position: relative; margin: 0 auto 1.2rem; max-width: 13ch; font-family: var(--hk-display); font-variation-settings: 'SOFT' 100; font-weight: 600; font-size: 2.6rem; line-height: 1.04; color: #fff; text-wrap: balance; text-shadow: 0 2px 18px color-mix(in srgb, var(--inv-shine) 30%, transparent); }
.hk-occasion__intent {
    position: relative; max-width: 30ch !important; margin: 0 auto !important; padding: 1.1rem 0;
    font-family: var(--hk-display); font-variation-settings: 'SOFT' 100; font-style: italic; font-size: 1.12rem; line-height: 1.55; color: #fff8ea;
    border-top: 1px solid color-mix(in srgb, var(--inv-accent) 70%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--inv-accent) 70%, transparent);
}
.hk-table { position: relative; margin: 2.2rem -1.6rem 0; }
.hk-table__food { position: relative; z-index: 1; display: block; width: min(21rem, 92%); margin: 0 auto -6px; overflow: visible; }
.hk-table__glass { fill: color-mix(in srgb, #fff 30%, transparent); stroke: color-mix(in srgb, #fff 55%, transparent); stroke-width: 1; }
.hk-table__tea { fill: color-mix(in srgb, var(--inv-accent) 80%, var(--inv-deep)); }
.hk-table__bowl { fill: #f7f1e4; }
.hk-table__rice { fill: #fff; }
.hk-table__veg { fill: var(--inv-leaf); }
.hk-table__tray { fill: var(--inv-leaf); }
.hk-table__tumpeng { fill: #f2c94c; }
.hk-table__tumpeng-shade { fill: #d9a92f; }
.hk-table__garnish { fill: none; stroke: #c0392b; stroke-width: 2.4; stroke-linecap: round; }
.hk-table__plate { fill: #f7f1e4; }
.hk-table__top {
    position: relative; height: 3.6rem;
    background: var(--hk-grain) 0 0 / 500px 300px, linear-gradient(180deg, var(--hk-wood-light), var(--inv-wood) 22%, var(--hk-wood-dark));
    box-shadow: inset 0 3px 0 color-mix(in srgb, #fff 25%, transparent), inset 0 -10px 18px -8px rgb(0 0 0 / .45);
}
.hk-table__runner {
    position: absolute; left: 50%; top: 0; bottom: 0; width: 8.5rem; margin-left: -4.25rem;
    background:
        repeating-linear-gradient(90deg, transparent 0 6px, color-mix(in srgb, var(--inv-deep) 22%, transparent) 6px 7px),
        linear-gradient(90deg, var(--inv-accent) 0 .45rem, color-mix(in srgb, var(--inv-soft) 85%, #fff) .45rem calc(100% - .45rem), var(--inv-accent) 0);
    opacity: .92;
}

/* home: the cork board, the polaroid, the index card, the story and the address tag */
.hk-home { padding-bottom: 4.4rem; }
.hk-board { position: relative; max-width: 22rem; margin: 0 auto; }
.hk-board__leaf { position: absolute; z-index: 2; right: -2.6rem; top: -2.6rem; width: 6.6rem; rotate: -150deg; }
.hk-board__cork {
    position: relative; padding: 1.6rem 1.2rem 1.4rem; border: .7rem solid transparent; border-radius: 4px;
    background:
        var(--hk-corkdots) 0 0 / 160px 160px padding-box,
        linear-gradient(160deg, #c99560, #b07a46) padding-box,
        var(--hk-teak) border-box;
    box-shadow: inset 2px 2px 6px rgb(0 0 0 / .35), var(--hk-cast);
}
.hk-polaroid {
    position: relative; margin: 0; padding: .6rem .6rem 0; background: #fffdf8; rotate: -2.2deg;
    box-shadow: 3px 8px 14px -4px rgb(0 0 0 / .45);
}
.hk-polaroid .hk-pin { top: -.3rem; }
.hk-polaroid__photo, .hk-polaroid__empty { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: center 60%; }
.hk-polaroid__empty { display: grid; place-items: center; color: var(--inv-wood); background: linear-gradient(180deg, color-mix(in srgb, var(--inv-shine) 30%, var(--hk-linen)), var(--inv-soft)); }
.hk-polaroid__empty svg { width: 55%; }
.hk-polaroid__caption { padding: .55rem .3rem .7rem; text-align: left; font-family: var(--hk-hand); font-size: 1.55rem; font-weight: 700; line-height: 1; color: var(--inv-deep); }
.hk-polaroid__caption:empty { padding: .9rem 0 0; }
.hk-home .hk-home__card {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; width: max-content; max-width: 56%; margin: -.9rem -.4rem 0 auto; padding: 1rem .95rem .7rem;
    text-align: left; rotate: 3deg;
    background: repeating-linear-gradient(180deg, transparent 0 1.35rem, color-mix(in srgb, var(--inv-primary) 22%, transparent) 1.35rem calc(1.35rem + 1px)) 0 .6rem, #fffdf6;
    box-shadow: 3px 8px 14px -6px rgb(0 0 0 / .45);
}
.hk-home__key { width: 2.6rem; height: 1.1rem; margin-bottom: .25rem; fill: none; stroke: var(--hk-amber); stroke-width: 2; stroke-linecap: round; }
.hk-home__card small { font-size: .58rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-primary); }
.hk-home__card span:not(.hk-tape) { font-family: var(--hk-hand); font-size: 1.55rem; font-weight: 700; line-height: 1.05; color: var(--inv-deep); }
.hk-home__story {
    max-width: 30ch !important; margin: 2rem auto 1.6rem !important; font-family: var(--hk-display); font-variation-settings: 'SOFT' 100; font-style: italic;
    font-size: 1.12rem; line-height: 1.55; color: var(--hk-title);
}
.hk-home__address {
    display: flex; align-items: flex-start; gap: .8rem; max-width: 21rem; margin: 0 auto; padding: .95rem 1.1rem .95rem 1.8rem; text-align: left;
    background: var(--hk-speckle) 0 0 / 220px 220px, var(--hk-kraft);
    clip-path: polygon(1rem 0, 100% 0, 100% 100%, 1rem 100%, 0 50%);
    filter: drop-shadow(3px 6px 6px rgb(0 0 0 / .2));
}
.hk-home__address-icon { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; flex: none; border-radius: 50%; color: #fff; background: var(--inv-primary); }
.hk-home__address p { margin: 0; font-size: .9rem; font-weight: 600; line-height: 1.5; color: var(--inv-text); }
.hk-home__address small { display: block; font-size: .62rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--inv-deep); }

/* events: linen cards on deep leaf green, a teak date block */
.hk-events__shadow { right: -5rem; top: -3.5rem; width: 15rem; rotate: -140deg; }
.hk-event {
    position: relative; margin: 0 .3rem; padding: 0 0 1.3rem; border-radius: 4px; text-align: left; color: var(--inv-text);
    background: var(--hk-speckle) 0 0 / 220px 220px, var(--hk-paper);
    box-shadow: 0 24px 34px -20px rgb(0 0 0 / .65); rotate: -.8deg;
}
.hk-event--flip { rotate: .8deg; }
.hk-event + .hk-event { margin-top: 2.8rem; }
.hk-event__media { padding: .65rem .65rem 0; }
.hk-event__photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 50%; box-shadow: 0 0 0 1px rgb(0 0 0 / .1); }
.hk-event__top { display: flex; align-items: center; gap: .9rem; padding: 1.15rem 1.15rem 0; }
.hk-event--flip .hk-event__top { flex-direction: row-reverse; text-align: right; }
.hk-event__date {
    position: relative; display: flex; flex-direction: column; align-items: center; flex: none; width: 4.4rem; margin: 0; padding: .65rem .2rem .55rem; border-radius: 6px;
    color: #fff8e6; background: var(--hk-teak);
    box-shadow: inset 1.5px 1.5px 0 rgb(255 255 255 / .3), inset -2px -2px 0 rgb(0 0 0 / .3), 3px 6px 10px -4px rgb(0 0 0 / .5);
    text-shadow: 0 1px 1px rgb(0 0 0 / .4);
}
.hk-event--flip .hk-event__date { background: var(--hk-grain) 0 0 / 500px 300px, linear-gradient(160deg, color-mix(in srgb, var(--inv-accent) 85%, #fff), var(--hk-amber)); }
.hk-event__weekday { font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.hk-event__day { font-family: var(--hk-display); font-weight: 600; font-size: 2.3rem; line-height: 1.02; }
.hk-event__month { font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hk-event__head { min-width: 0; }
.hk-event__name { margin: 0; font-family: var(--hk-display); font-variation-settings: 'SOFT' 100; font-weight: 600; font-size: 1.5rem; line-height: 1.12; color: var(--hk-title); }
.hk-event__full { margin: .2rem 0 0; font-size: .8rem; font-weight: 700; color: var(--hk-muted); }
.hk-event__rows { display: grid; gap: .75rem; margin: 1.1rem 1.15rem 0; padding: 1rem 0 0; list-style: none; font-size: .9rem; border-top: 1.5px dashed var(--hk-ring); }
.hk-event__rows li { display: flex; align-items: flex-start; gap: .7rem; }
.hk-event__rows .hk-icon { width: 2.1rem; height: 2.1rem; padding: .45rem; border-radius: 50%; color: #fff; background: var(--inv-primary); }
.hk-event__rows li > span { padding-top: .3rem; }
.hk-event__venue { display: block; font-weight: 800; }
.hk-event__address { display: block; font-size: .85rem; color: var(--hk-muted); }
.hk-event .inv-maps { margin: 1.15rem 1.15rem 0; text-align: center; }
.hk-event .inv-maps .inv-button { width: 100%; font-weight: 700; }
.hk-event .inv-maps__frame { height: 190px; border-radius: 6px; }

/* countdown: wooden number blocks on a sunset band, a paper wall calendar on a nail */
.hk-countdown .inv-countdown { gap: clamp(.45rem, 2.4vw, .8rem); }
.hk-countdown .inv-countdown__item {
    display: grid; place-content: center; width: clamp(4rem, 18.5vw, 4.6rem); min-width: 0; aspect-ratio: 1; padding: .3rem 0 .2rem; border-radius: 8px;
    color: #fff8e6; background: var(--hk-teak);
    box-shadow: inset 2px 2px 0 rgb(255 255 255 / .3), inset -3px -3px 0 rgb(0 0 0 / .32), 4px 10px 14px -6px rgb(0 0 0 / .55);
    text-shadow: 0 1px 1px rgb(0 0 0 / .45);
}
.hk-countdown .inv-countdown__item:nth-child(even) { rotate: 2deg; }
.hk-countdown .inv-countdown__item:nth-child(odd) { rotate: -1.5deg; }
.hk-countdown .inv-countdown__value { font-variant-numeric: lining-nums tabular-nums; font-family: var(--hk-display); font-weight: 600; font-size: 1.9rem; line-height: 1.02; }
.hk-countdown .inv-countdown__label { margin-top: .05rem; font-size: .55rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-shine) 70%, #fff); }
.hk-countdown .inv-countdown__done { font-family: var(--hk-hand); font-size: 1.8rem; font-weight: 700; color: #fff3d6; }
.hk-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 2rem; }
.hk-countdown .inv-countdown__actions .inv-button {
    width: min(100%, 17rem); min-height: 2.75rem; padding: .6rem 1rem; font-size: .84rem; font-weight: 800;
    color: #fff; background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .6);
}
.hk-countdown .inv-countdown__actions .inv-button:first-child { color: var(--inv-deep); background: #fff6e2; box-shadow: 0 10px 18px -10px rgb(0 0 0 / .5); }
.hk-countdown__calendar { position: relative; max-width: 19rem; margin: 3.4rem auto 0; }
.hk-countdown__calendar .hk-frame__nail { top: -1.6rem; }
.hk-countdown__calendar::before {
    content: ''; position: absolute; z-index: 1; left: 50%; top: -1.25rem; width: 5rem; height: 1.6rem; margin-left: -2.5rem; pointer-events: none;
    border: 1.4px solid color-mix(in srgb, var(--inv-deep) 70%, transparent); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.hk-countdown .inv-cal {
    --inv-cal-bg: #fffdf6; --inv-cal-mark: var(--inv-accent); --inv-cal-text: var(--inv-text);
    position: relative; margin: 0; border-radius: 3px; padding-top: 1.7rem; rotate: -1deg;
    border-top: 1.05rem solid var(--inv-wood);
    box-shadow: 6px 14px 24px -10px rgb(0 0 0 / .55);
}
.hk-countdown .inv-cal__month { font-family: var(--hk-hand); font-size: 1.9rem; font-weight: 700; color: var(--inv-deep); }

/* prayer: a framed wall piece with a banana leaf and a pothos */
.hk-prayer { padding-top: 3.4rem; padding-bottom: 4.6rem; }
.hk-frame--prayer { --frame-w: min(21rem, 100%); margin-left: auto; margin-right: auto; margin-top: 4.2rem !important; }
.hk-frame--prayer .hk-frame__cord { height: 4.2rem; }
.hk-frame--prayer .hk-frame__nail { top: -4.5rem; }
.hk-prayer__mat { padding: 1.7rem 1.25rem 2.1rem; box-shadow: inset 2px 2px 4px rgb(0 0 0 / .35), inset 0 0 0 .5rem var(--hk-linen), inset 0 0 0 calc(.5rem + 1.5px) color-mix(in srgb, var(--inv-leaf) 60%, transparent); }
.hk-prayer__eyebrow { margin: 0 0 .7rem; font-size: .66rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-primary); }
.hk-prayer__arabic { margin: 0 0 .9rem; font-size: 1.6rem; color: var(--inv-deep); }
.hk-prayer__text { margin: 0; font-family: var(--hk-display); font-variation-settings: 'SOFT' 100; font-style: italic; font-size: 1.08rem; line-height: 1.5; color: var(--inv-text); }
.hk-frame--prayer .hk-prayer__source { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; }
.hk-prayer__banana { position: absolute; z-index: -1; left: -1.6rem; bottom: -1rem; width: 5.6rem; rotate: 22deg; transform-origin: 50% 100%; }
.hk-prayer__pothos { position: absolute; z-index: 2; right: -.4rem; top: -1rem; width: 4.2rem; rotate: -6deg; transform-origin: 50% 0; }

/* rundown: a timeline of wooden planks nailed to a post */
.hk-rundown { padding-bottom: 4.6rem; }
.hk-rundown__banana { position: absolute; z-index: -1; right: -2.4rem; top: 1.2rem; width: 5.6rem; rotate: -24deg; opacity: .85; }
.hk-rundown__list { position: relative; display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; text-align: left; }
/* the post */
.hk-rundown__list::before {
    content: ''; position: absolute; left: 1.55rem; top: -.6rem; bottom: -.6rem; width: 1.1rem; transform-origin: top; border-radius: 3px;
    background: var(--hk-grain) 0 0 / 500px 300px, linear-gradient(90deg, var(--hk-wood-dark), var(--inv-wood) 45%, var(--hk-wood-dark));
    box-shadow: 3px 0 8px rgb(0 0 0 / .4);
}
.hk-plank { --plank-mix: 0%; position: relative; display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); align-items: center; }
.hk-plank:nth-child(3n + 2) { --plank-mix: 14%; }
.hk-plank:nth-child(3n) { --plank-mix: -10%; }
.hk-plank__time {
    position: relative; z-index: 1; display: grid; place-items: center; width: 4.2rem; height: 4.2rem; border-radius: 50%;
    font-family: var(--hk-display); font-weight: 700; font-size: .98rem; font-variant-numeric: tabular-nums; color: var(--inv-deep);
    background:
        repeating-radial-gradient(circle at 46% 54%, transparent 0 3px, color-mix(in srgb, var(--inv-wood) 28%, transparent) 3px 4px),
        radial-gradient(circle at 46% 54%, color-mix(in srgb, var(--inv-shine) 55%, #fff), color-mix(in srgb, var(--inv-soft) 80%, var(--inv-wood)) 75%);
    box-shadow: inset 0 0 0 .3rem var(--hk-wood-dark), inset 0 0 0 .36rem color-mix(in srgb, #fff 20%, transparent), 3px 6px 10px -3px rgb(0 0 0 / .55);
}
.hk-plank__board {
    position: relative; margin-left: -.9rem; padding: .8rem 1.1rem .85rem 1.6rem; border-radius: 3px 8px 8px 3px;
    background:
        var(--hk-grain) 30% 0 / 500px 300px,
        linear-gradient(180deg, color-mix(in srgb, var(--hk-wood-light) calc(100% - var(--plank-mix)), #fff), color-mix(in srgb, var(--inv-wood) 85%, var(--inv-deep)));
    box-shadow: inset 0 1.5px 0 rgb(255 255 255 / .3), inset 0 -2px 0 rgb(0 0 0 / .3), 4px 8px 12px -6px rgb(0 0 0 / .6);
    text-shadow: 0 1px 1px rgb(0 0 0 / .45);
}
.hk-plank:nth-child(3n) .hk-plank__board { background: var(--hk-grain) 70% 40% / 500px 300px, linear-gradient(180deg, var(--inv-wood), var(--hk-wood-dark)); }
/* the two brass nail heads */
.hk-plank__board::before, .hk-plank__board::after {
    content: ''; position: absolute; right: .55rem; width: .42rem; height: .42rem; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff6d6, var(--inv-shine) 45%, var(--hk-wood-dark)); box-shadow: 1px 1px 1px rgb(0 0 0 / .4);
}
.hk-plank__board::before { top: .45rem; }
.hk-plank__board::after { bottom: .45rem; }
.hk-plank__board h3 { margin: 0; padding-right: .6rem; font-size: 1rem; font-weight: 800; line-height: 1.35; color: #fff; }
.hk-plank__board p { margin: .15rem 0 0; padding-right: .6rem; font-size: .86rem; color: #fff1d8; }

/* story: a family album — photos in corners, handwritten dates, notes on lined paper */
.hk-album { display: grid; gap: 2.6rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.hk-album__item { position: relative; display: grid; grid-template-columns: 46% minmax(0, 1fr); align-items: center; gap: 1.1rem; }
.hk-album__item--flip { grid-template-columns: minmax(0, 1fr) 46%; }
.hk-album__item--flip .hk-album__media { order: 2; rotate: 2.4deg; }
.hk-album__media { position: relative; padding: .45rem; background: #fffdf8; rotate: -2.4deg; box-shadow: 3px 8px 14px -6px rgb(0 0 0 / .4); }
.hk-album__photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hk-album__corner { position: absolute; z-index: 1; width: 1.5rem; height: 1.5rem; background: var(--inv-deep); }
.hk-album__corner--tl { left: -.2rem; top: -.2rem; clip-path: polygon(0 0, 100% 0, 0 100%); }
.hk-album__corner--br { right: -.2rem; bottom: -.2rem; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.hk-album__when {
    display: inline-block; padding: .05rem .55rem .1rem; font-family: var(--hk-hand); font-size: 1.45rem; font-weight: 700; line-height: 1.1; color: var(--inv-deep);
    background: color-mix(in srgb, var(--inv-shine) 55%, #fff); rotate: -3deg;
    box-shadow: 1px 2px 3px rgb(0 0 0 / .15);
}
.hk-album__body h3 { margin: .55rem 0 0; font-family: var(--hk-display); font-variation-settings: 'SOFT' 100; font-weight: 600; font-size: 1.36rem; line-height: 1.15; color: var(--hk-title); }
.hk-album__body p { margin: .35rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--hk-muted); }
.hk-album__item--note {
    display: block; padding: 1.5rem 1.3rem 1.2rem 2.4rem; rotate: -.8deg;
    background:
        linear-gradient(90deg, transparent 1.6rem, color-mix(in srgb, var(--inv-accent) 55%, transparent) 1.6rem 1.7rem, transparent 1.7rem),
        repeating-linear-gradient(180deg, transparent 0 1.6rem, color-mix(in srgb, var(--inv-primary) 20%, transparent) 1.6rem calc(1.6rem + 1px)) 0 1.1rem,
        #fffdf6;
    box-shadow: 3px 10px 16px -8px rgb(0 0 0 / .35);
}
.hk-album__item--note .hk-album__body p { font-family: var(--hk-hand); font-size: 1.32rem; line-height: 1.2; color: var(--inv-text); }

/* gallery: snapshots with white borders, slightly tilted; the first in a teak frame */
.hk-gallery__shadow { left: -5rem; bottom: -4rem; width: 15rem; rotate: 30deg; }
.hk-gallery .inv-gallery { gap: .85rem; }
.hk-gallery .inv-gallery__item { border-radius: 2px; border: 5px solid #fffdf8; box-shadow: 4px 10px 16px -8px rgb(0 0 0 / .7); }
.hk-gallery .inv-gallery__item:nth-child(odd) { rotate: -1.4deg; }
.hk-gallery .inv-gallery__item:nth-child(even) { rotate: 1.4deg; }
.hk-gallery .inv-gallery__item:first-child {
    grid-row: span 2; aspect-ratio: auto; border: 7px solid transparent;
    background: var(--hk-teak) border-box; box-shadow: inset 0 0 0 3px #fffdf8, 4px 10px 18px -8px rgb(0 0 0 / .75);
}
.hk-gallery .inv-gallery__item:first-child img { padding: 3px; }

/* live streaming: a teak card */
.hk-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.5rem 1.35rem 1.4rem;
    border-radius: 10px; color: #fff8e6; text-align: left; background: var(--hk-teak);
    box-shadow: inset 1.5px 1.5px 0 rgb(255 255 255 / .3), inset -2px -2px 0 rgb(0 0 0 / .3), var(--hk-cast);
    text-shadow: 0 1px 1px rgb(0 0 0 / .4);
}
.hk-stream__icon { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; color: #fff; background: var(--hk-amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-shine) 70%, transparent); }
.hk-stream__icon .hk-icon { width: 1.7rem; height: 1.7rem; }
.hk-stream__title { margin: 0 0 .15rem; font-family: var(--hk-display); font-weight: 600; font-size: 1.6rem; line-height: 1.1; color: #fff; }
.hk-stream__text p { margin: 0; font-size: .86rem; color: #fff1d8; }
.hk-stream__text .hk-stream__note { margin-top: .3rem; font-weight: 800; color: var(--inv-shine); }
.hk-stream__button { grid-column: 1 / -1; min-height: 2.75rem; color: var(--inv-deep) !important; background: #fff6e2 !important; font-weight: 800; text-shadow: none; }

/* RSVP: a linen card taped onto walnut, an amber block behind */
.hk-rsvp__card {
    position: relative; margin-right: 10px; padding: 2rem 1.15rem 1.4rem; border-radius: 3px; color: var(--inv-text);
    background: var(--hk-speckle) 0 0 / 220px 220px, var(--hk-paper);
    box-shadow: 10px 10px 0 0 color-mix(in srgb, var(--inv-accent) 70%, transparent), 0 22px 40px -24px rgb(0 0 0 / .7);
}
.hk-tape--left { left: 18%; rotate: -8deg; }
.hk-tape--right { left: auto; right: 12%; margin-left: 0; rotate: 7deg; }
.hk-rsvp__intro { margin: 0 auto 1.1rem; max-width: 30ch; font-size: .9rem; color: var(--hk-muted); }
.hk-rsvp__sent { margin-bottom: 1rem; }
.hk-rsvp__check { display: block; width: 4.25rem; height: 4.25rem; margin: 0 auto .5rem; }
.hk-rsvp__check circle { fill: var(--inv-primary); }
.hk-rsvp__check path { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
html.inv-anim .hk-rsvp__sent .hk-rsvp__check { animation: hk-bounce .8s cubic-bezier(.34, 1.56, .64, 1) both; }
html.inv-anim .hk-rsvp__sent .hk-rsvp__check path { animation: hk-draw .45s ease-out .35s both; }
.hk-rsvp__thanks { margin: 0; font-family: var(--hk-hand); font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--hk-amber); }
.hk-rsvp__line { margin: .2rem 0 0; font-size: .9rem; color: var(--hk-muted); }
.hk-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .84rem; font-weight: 800; color: var(--hk-amber); }

/* gift: linen envelopes with a folded flap and an amber seal, two per row; the address on kraft */
.hk-gift__shadow { right: -1.6rem; top: -1.4rem; width: 6rem; rotate: -150deg; }
.hk-gift__intro { color: var(--hk-cream); }
.hk-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1.3rem; }
.hk-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.hk-gift .inv-gift__account,
.hk-gift .inv-gift__address {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; margin: 0; overflow: hidden;
    padding: 2.6rem .75rem 1rem; border-radius: 4px; color: var(--inv-text);
    background:
        linear-gradient(to bottom right, transparent 49.4%, color-mix(in srgb, var(--inv-deep) 14%, transparent) 50%, transparent 51%) 0 0 / 50% 1.9rem no-repeat,
        linear-gradient(to bottom left, transparent 49.4%, color-mix(in srgb, var(--inv-deep) 14%, transparent) 50%, transparent 51%) 100% 0 / 50% 1.9rem no-repeat,
        var(--hk-speckle) 0 0 / 220px 220px, var(--hk-paper);
    box-shadow: 0 18px 30px -18px rgb(0 0 0 / .7);
}
/* the folded flap with an amber seal */
.hk-gift .inv-gift__account:not(.inv-gift__address)::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1.9rem;
    background: color-mix(in srgb, var(--inv-soft) 75%, var(--hk-paper)); clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.hk-gift .inv-gift__account:not(.inv-gift__address)::after {
    content: ''; position: absolute; left: 50%; top: 1.15rem; width: 1.5rem; height: 1.5rem; margin-left: -.75rem; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-accent) 55%, #fff), var(--inv-accent) 45%, var(--hk-amber));
    box-shadow: 0 2px 3px rgb(0 0 0 / .3), inset 0 0 0 3px color-mix(in srgb, var(--hk-amber) 80%, transparent);
}
.hk-gift .inv-gift__account > * { position: relative; }
.hk-gift .inv-gift__account p, .hk-gift .inv-gift__address p { margin: 0; }
.hk-gift .inv-gift__bank { font-weight: 800; font-size: .85rem; color: var(--hk-title); }
.hk-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .4rem; background: #fff; }
.hk-gift .inv-gift__logo img { max-width: 5rem; }
.hk-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);
}
.hk-gift .inv-gift__holder { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--hk-muted); overflow-wrap: anywhere; }
.hk-gift .inv-button { margin-top: .35rem; min-height: 2.25rem; padding: .35rem .9rem; font-size: .74rem; font-weight: 800; }
.hk-gift .inv-gift__address { margin-top: .8rem; padding-top: 1.2rem; font-size: .875rem; background: var(--hk-speckle) 0 0 / 220px 220px, var(--hk-kraft); }
.hk-gift .inv-gift__address .inv-gift__holder { font-size: .72rem; color: var(--inv-deep); }

/* co-hosts: the names in Fraunces, one per line, split by a tiny leaf */
.hk-cohosts__list { display: flex; flex-direction: column; align-items: center; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.hk-cohosts__list li { max-width: 26ch; font-family: var(--hk-display); font-variation-settings: 'SOFT' 100; font-weight: 500; font-size: 1.32rem; line-height: 1.3; color: #fff; }
.hk-cohosts__list li + li::before {
    content: ''; display: block; width: 18px; height: 10px; margin: 0 auto .55rem; background: var(--inv-shine);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M1 5c4-4 12-4 16 0-4 4-12 4-16 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M1 5c4-4 12-4 16 0-4 4-12 4-16 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* contacts: linen rows with the initial on a teak block */
.hk-contacts__list { display: grid; gap: .75rem; max-width: 24rem; margin: 0 auto; }
.hk-contact {
    display: grid; grid-template-columns: 2.9rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .6rem .6rem .6rem .65rem; border-radius: 6px;
    background: var(--hk-paper); text-align: left; box-shadow: 0 0 0 1px var(--hk-ring), 4px 8px 14px -8px rgb(0 0 0 / .35);
}
.hk-contact__avatar {
    display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 6px;
    font-family: var(--hk-display); font-weight: 600; font-size: 1.4rem; color: #fff8e6; background: var(--hk-teak);
    box-shadow: inset 1.5px 1.5px 0 rgb(255 255 255 / .3), inset -2px -2px 0 rgb(0 0 0 / .3); text-shadow: 0 1px 1px rgb(0 0 0 / .4);
}
.hk-contact p { margin: 0; }
.hk-contact__name { font-weight: 800; font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; }
.hk-contact__role { font-size: .78rem; color: var(--hk-muted); }
.hk-contact__phone { font-size: .85rem; }
.hk-contact__button { min-height: 2.5rem; padding: .45rem .95rem; font-size: .8rem; font-weight: 800; }
.hk-contact__button .hk-icon { width: 1.05rem; height: 1.05rem; }

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

/* vendors: a linen card of rows split by dashed lines */
.hk-vendors__list { max-width: 24rem; margin: 0 auto; padding: .3rem 1.15rem; list-style: none; border-radius: 4px; background: var(--hk-speckle) 0 0 / 220px 220px, var(--hk-paper); box-shadow: 0 0 0 1px var(--hk-ring), var(--hk-cast); }
.hk-vendor { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem 0; text-align: left; border-bottom: 1.5px dashed var(--hk-ring); }
.hk-vendor:last-child { border-bottom: 0; }
.hk-vendor__text { display: flex; flex-direction: column; min-width: 0; }
.hk-vendor__role { font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-primary); }
.hk-vendor__name { font-family: var(--hk-display); font-weight: 500; font-size: 1.18rem; line-height: 1.25; color: var(--inv-text); overflow-wrap: anywhere; }
.hk-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: 800; text-decoration: none; background: var(--hk-kraft); color: var(--inv-deep);
}
.hk-vendor__link .hk-icon { width: .95rem; height: .95rem; }

/* closing: the full photo in golden light fading into walnut, leaf silhouettes, the thanks and the family note */
.hk-closing { padding: 3.1rem 1.6rem 2.1rem; }
.hk-closing::after {
    content: ''; position: absolute; z-index: -1; left: 50%; bottom: -45%; width: 170%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%);
    background: radial-gradient(circle, color-mix(in srgb, var(--inv-shine) 30%, transparent), color-mix(in srgb, var(--inv-accent) 12%, transparent) 40%, transparent 62%); pointer-events: none;
}
.hk-closing--photo { padding-top: 0; }
.hk-closing__photo { position: relative; z-index: -1; height: min(92vw, 52svh, 23rem); margin: 0 -1.6rem; overflow: hidden; }
.hk-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 22%; --inv-parallax: 30px; filter: saturate(1.05) sepia(.12); }
.hk-closing__photo::before {
    content: ''; position: absolute; z-index: 1; inset: 0; mix-blend-mode: soft-light; pointer-events: none;
    background: radial-gradient(80% 60% at 10% 0%, color-mix(in srgb, var(--inv-shine) 90%, #fff), transparent 70%);
}
.hk-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(70% 45% at 0% 0%, color-mix(in srgb, var(--inv-shine) 40%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 22%, transparent), transparent 45%),
        linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--inv-deep) 55%, transparent) 66%, var(--inv-deep) 97%);
}
.hk-closing__leaf { position: absolute; z-index: -1; bottom: -1.8rem; width: 6.6rem; filter: brightness(.45) saturate(.8); }
.hk-closing__leaf--l { left: -2.5rem; rotate: 30deg; }
.hk-closing__leaf--r { right: -2.6rem; rotate: -34deg; scale: -1 1; }
.hk-closing__body { position: relative; }
.hk-closing--photo .hk-closing__body { margin-top: -4.6rem; }
.hk-closing__eyebrow { margin: 0 0 .3rem; font-size: .7rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-shine); }
.hk-closing__title { margin: 0 0 .75rem; font-family: var(--hk-display); font-variation-settings: 'SOFT' 100; font-weight: 600; font-size: clamp(1.9rem, 8.5vw, 2.3rem); line-height: 1.05; color: #fff; }
.hk-closing__title em { display: inline-block; font-family: var(--hk-hand); font-style: normal; font-weight: 700; font-size: 1.18em; line-height: .8; color: var(--inv-shine); rotate: -4deg; }
.hk-closing__message { margin: 0 auto; max-width: 32ch; font-size: .92rem; line-height: 1.6; color: var(--hk-cream); }
.hk-closing__salam { margin: .75rem auto 0; max-width: 24ch; font-family: var(--hk-display); font-variation-settings: 'SOFT' 100; font-size: 1.06rem; font-style: italic; line-height: 1.35; color: var(--inv-shine); }
.hk-closing__signature { margin: .75rem auto 0; max-width: 30ch; font-size: .86rem; color: var(--hk-cream); }
.hk-closing .hk-closing__family {
    display: inline-flex; flex-direction: column; max-width: min(100%, 18rem); margin: 1.35rem auto 0; padding: 1rem 1.25rem .8rem; rotate: -1.5deg;
}
.hk-closing__family small { font-family: var(--hk-hand); font-size: 1.1rem; font-weight: 500; line-height: 1; color: var(--hk-muted); }
.hk-closing__family span:not(.hk-pin) { margin-top: .15rem; font-family: var(--hk-hand); font-size: 1.65rem; font-weight: 700; line-height: 1.02; color: var(--inv-deep); overflow-wrap: anywhere; }

/* ---------- 6. forms (shared RSVP + wishes, restyled) ---------- */
.hk-main .inv-form { gap: 1rem; text-align: left; }
.hk-main .inv-form label, .hk-main .inv-form__choices legend { font-size: .82rem; font-weight: 800; color: var(--inv-text); }
.hk-main .inv-form input:not([type=radio]):not([type=checkbox]),
.hk-main .inv-form select,
.hk-main .inv-form textarea {
    width: 100%; min-height: 2.9rem; padding: .7rem .9rem; border: 0; border-radius: 6px;
    font: 400 .95rem/1.4 var(--hk-sans); color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-deep) 22%, transparent);
    transition: box-shadow .2s ease;
}
.hk-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;
}
.hk-main .inv-form input:not([type=radio]):focus-visible,
.hk-main .inv-form select:focus-visible,
.hk-main .inv-form textarea:focus-visible {
    outline: none; box-shadow: inset 0 0 0 2px var(--inv-primary), 0 0 0 4px color-mix(in srgb, var(--inv-shine) 50%, transparent);
}
.hk-main .inv-form button[type=submit] { width: 100%; min-height: 3rem; font-weight: 800; box-shadow: 0 12px 22px -12px color-mix(in srgb, var(--inv-primary) 80%, transparent); }
.hk-main .inv-form .inv-button--outline { width: 100%; min-height: 2.75rem; }
.hk-main .inv-form__notice { text-align: center; }

/* the three answers as big cards with icons (the radio dot is hidden but still focusable) */
.hk-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.hk-rsvp .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.hk-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: 8px; cursor: pointer; text-align: center;
    font-size: .84rem; font-weight: 800; line-height: 1.2; color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-deep) 18%, transparent);
    transition: background-color .25s ease, color .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.hk-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.hk-rsvp .inv-form__choices label::before {
    content: ''; width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none; background: var(--inv-soft);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease;
}
.hk-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(--hk-choice-icon) center / contain no-repeat; mask: var(--hk-choice-icon) center / contain no-repeat;
}
.hk-rsvp .inv-form__choices label:nth-of-type(1) {
    --hk-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");
}
.hk-rsvp .inv-form__choices label:nth-of-type(2) {
    --hk-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");
}
.hk-rsvp .inv-form__choices label:nth-of-type(3) {
    --hk-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");
}
.hk-rsvp .inv-form__choices label:has(input:checked) {
    color: #fff; background: var(--inv-primary); translate: 0 -3px;
    box-shadow: 0 0 0 3px var(--inv-shine), 0 12px 24px -12px color-mix(in srgb, var(--inv-primary) 80%, transparent);
}
.hk-rsvp .inv-form__choices label:has(input:checked)::before { background-color: rgb(255 255 255 / .2); scale: 1.1; }
.hk-rsvp .inv-form__choices label:has(input:checked)::after { color: #fff; }
.hk-rsvp .inv-form__choices label:has(input:focus-visible) { outline: 2px solid var(--inv-accent); outline-offset: 3px; }

/* wishes: a notepad under a teak clip; each wish a small note */
.hk-wishes__pad { position: relative; }
.hk-wishes__clip {
    position: absolute; z-index: 2; left: 50%; top: -.9rem; width: 7rem; height: 1.9rem; margin-left: -3.5rem; border-radius: 6px 6px 3px 3px;
    background: var(--hk-teak); box-shadow: inset 1px 1px 0 rgb(255 255 255 / .3), inset -2px -2px 0 rgb(0 0 0 / .3), 0 4px 6px -2px rgb(0 0 0 / .4);
}
.hk-wishes__clip::after { content: ''; position: absolute; left: 50%; top: .55rem; width: 2.2rem; height: .55rem; margin-left: -1.1rem; border-radius: 999px; background: var(--hk-brass); }
.hk-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.hk-wishes .inv-form {
    padding: 1.9rem 1.1rem 1.3rem; border-radius: 4px;
    background: repeating-linear-gradient(180deg, transparent 0 1.7rem, color-mix(in srgb, var(--inv-primary) 10%, transparent) 1.7rem calc(1.7rem + 1px)), var(--hk-paper);
    box-shadow: 0 0 0 1px var(--hk-ring), var(--hk-cast);
}
.hk-wishes .inv-wishes__list { margin-top: 1.5rem; }
.hk-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .6rem; border-radius: 6px; background: color-mix(in srgb, var(--inv-soft) 55%, transparent); box-shadow: inset 0 0 0 1px var(--hk-ring);
}
.hk-wishes .inv-wish { padding: .75rem .9rem; border-radius: 3px; background: #fffdf6; text-align: left; box-shadow: 2px 4px 8px -4px rgb(0 0 0 / .25); }
.hk-wishes .inv-wish:nth-child(3n + 2) { background: color-mix(in srgb, var(--inv-shine) 22%, #fffdf6); }
.hk-wishes .inv-wish:nth-child(3n) { background: color-mix(in srgb, var(--inv-leaf) 10%, #fffdf6); }
.hk-wishes .inv-wish__name { font-family: var(--hk-hand); font-size: 1.35rem; font-weight: 700; line-height: 1.05; color: var(--inv-deep); }
.hk-wishes .inv-wish__message { font-size: .88rem; line-height: 1.5; }
.hk-wishes .inv-wish__time { font-size: .72rem; color: var(--hk-muted); }

/* ---------- 7. shared components ---------- */
.hk-main .inv-button { font-weight: 800; }
body .inv-nav {
    --inv-nav-bg: color-mix(in srgb, #fffdf6 94%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-text) 74%, transparent);
    --inv-nav-active: var(--inv-primary);
    font-family: var(--hk-sans);
}

/* the room under the page (for the fixed menu and music button) continues the closing's walnut; with the
   platform credit present, the credit's own measured colour wins */
.hk-main ~ .inv-music__space { background: var(--inv-deep); }
.hk-main ~ .hk-branding ~ .inv-music__space { background: var(--inv-end-bg, var(--inv-deep)); }

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

/* short phones: the cover frame and type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .hk-cover { --frame-cover: min(56vw, 13.5rem, calc(33svh * .72)); padding-top: 1.3rem; padding-bottom: 1.4rem; }
    .hk-cover__name { font-size: 1.9rem; }
    .hk-cover__text { margin-top: .85rem; }
    .hk-cover__quote { font-size: 1.18rem; }
    .hk-cover__guest { margin-top: .75rem; }
    .hk-cover__open { margin-top: .85rem; }
}
@media (max-height: 660px) {
    .hk-cover { --frame-cover: min(50vw, calc(30svh * .72)); padding-top: 1rem; padding-bottom: 1.2rem; }
    .hk-cover__title { font-size: .64rem; }
    .hk-cover__name { font-size: 1.7rem; }
    .hk-cover__text { margin-top: .7rem; }
    .hk-cover__date { margin-top: .3rem; font-size: .78rem; }
    .hk-cover__quote { font-size: 1.08rem; line-height: 1.08; }
    .hk-cover__guest { margin-top: .75rem; padding: .55rem .85rem .45rem; }
    .hk-cover__guest-name { font-size: 1.08rem; }
    .hk-cover__open { min-height: 2.75rem; margin-top: .75rem; padding: .6rem 1.7rem; }
}
/* very short screens (in-app browsers): a smaller frame and quote, so everything fits */
@media (max-height: 600px) {
    .hk-cover { --frame-cover: min(44vw, calc(27svh * .72)); padding-top: .8rem; }
    .hk-cover__name { font-size: 1.55rem; }
    .hk-cover__quote { font-size: 1rem; }
}

/* wide screens: the phone-width column on a walnut backdrop with the grain */
@media (min-width: 560px) {
    body.hk-body {
        background:
            radial-gradient(70vw 60vh at 30% 0%, color-mix(in srgb, var(--inv-shine) 18%, transparent), transparent 70%),
            var(--hk-grain) 0 0 / 500px 300px,
            var(--inv-deep);
        background-attachment: fixed;
    }
    .hk-main { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
}

/* ---------- 9. motion ---------- */
@keyframes hk-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hk-bounce { 0% { transform: scale(0); } 55% { transform: scale(1.15); } 75% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes hk-fade { from { opacity: 0; } to { opacity: 1; } }
/* the frame swings in on its cord and settles */
@keyframes hk-swing { 0% { opacity: 0; transform: translateY(-14px) rotate(-5deg); } 45% { opacity: 1; transform: rotate(2.4deg); } 70% { transform: rotate(-1deg); } 88% { transform: rotate(.35deg); } 100% { opacity: 1; transform: none; } }
/* the photo warms up from a soft sepia */
@keyframes hk-warm { from { filter: sepia(.7) brightness(1.08) contrast(.9); } to { filter: none; } }
@keyframes hk-light { from { opacity: 0; } to { opacity: .75; } }
@keyframes hk-unfold-l { from { opacity: 0; transform: translate(-30%, 20%) rotate(50deg); } to { opacity: 1; } }
@keyframes hk-unfold-r { from { opacity: 0; transform: translate(30%, 10%) rotate(-50deg); } to { opacity: 1; } }
@keyframes hk-unfold-banana { from { opacity: 0; transform: translateX(40%) rotate(-8deg); } to { opacity: 1; } }
@keyframes hk-unfold-pothos { from { opacity: 0; transform: translateY(-30%) rotate(-8deg); clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 -10% 0); } }
/* a slow sway, as if a breeze came through the window */
@keyframes hk-sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(1.8deg); } }
@keyframes hk-lamp-on { 0% { opacity: 0; } 30% { opacity: .9; } 42% { opacity: .35; } 60%, 100% { opacity: 1; } }
@keyframes hk-plank-in { from { opacity: 0; transform: translateX(-1.4rem); } to { opacity: 1; transform: none; } }

/* cover (≤ 2.5 s, once): the sunbeams brighten (0–1.6 s), the frame swings in and settles (.15–1.65 s), the
   photo warms up (.3–1.7 s), the plants unfold from the edges (.4–1.4 s); the text follows through its
   inv-enter delays; afterwards the plants sway very slowly */
html.inv-anim .hk-cover__light { animation: hk-light 1.6s ease both; }
html.inv-anim .hk-frame--cover { animation: hk-swing 1.5s cubic-bezier(.3, .7, .3, 1) .15s both; }
html.inv-anim .hk-frame--cover .hk-frame__photo { animation: hk-warm 1.4s ease .3s both; }
html.inv-anim .hk-cover__monstera { animation: hk-unfold-l 1s cubic-bezier(.2, .7, .2, 1) .4s backwards, hk-sway 7s ease-in-out 1.6s infinite; }
html.inv-anim .hk-cover__monstera--back { animation: hk-unfold-r 1s cubic-bezier(.2, .7, .2, 1) .5s backwards, hk-sway 8s ease-in-out 2s infinite reverse; }
html.inv-anim .hk-cover__banana { animation: hk-unfold-banana .9s cubic-bezier(.2, .7, .2, 1) .55s backwards, hk-sway 6.5s ease-in-out 1.6s infinite; }
html.inv-anim .hk-cover__pothos { animation: hk-unfold-pothos 1s ease .35s backwards, hk-sway 7.5s ease-in-out 1.5s infinite; }

/* section details: the lamp switches on when the occasion appears; plants sway slowly; planks slide in */
html.inv-anim .hk-occasion .hk-lamp__glow, html.inv-anim .hk-occasion .hk-lamp__bulb { opacity: 0; }
html.inv-anim .hk-occasion.is-revealed .hk-lamp__glow,
html.inv-anim .hk-occasion .is-revealed .hk-lamp__glow,
html.inv-anim .hk-occasion.is-revealed .hk-lamp__bulb,
html.inv-anim .hk-occasion .is-revealed .hk-lamp__bulb { animation: hk-lamp-on 1.2s ease .3s both; }
html.inv-anim :is(.hk-host__pothos, .hk-prayer__pothos, .hk-prayer__banana, .hk-board__leaf) { animation: hk-sway 7s ease-in-out infinite; }

@supports (animation-timeline: view()) {
    html.inv-anim .hk-plank { animation: hk-plank-in linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
}

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

/* ---------- 10. intro scene "Senja di Meja Keluarga" (scene.json + sections/_scene) ----------
   The linen wall in late-afternoon light: the sunbeams slide across it, the pothos trails down, the banana
   leaf and two monsteras unfold from the edges, the dining table with the tumpeng rises from below, and the
   cover photo in its teak frame swings in on its cord and settles; the card is a linen note held by tape. */
.hk-scene-light { position: absolute; inset: 0; overflow: hidden; }
.hk-scene-light .hk-cover__light { mix-blend-mode: normal; opacity: .8; }
.inv-scene__layer:has(.hk-scene-light) { mix-blend-mode: soft-light; }
.inv-scene__layer .inv-scene__art > svg.hk-leaf { height: auto; }
.hk-scene-leaf--back { scale: -1 1; filter: brightness(.85); }
.hk-scene-frame { position: absolute; inset: 0; display: flex; justify-content: center; container-type: size; }
.hk-frame--scene { --frame-w: min(100cqw, calc((100cqh - 1rem) / 1.48)); --frame-pos: 50% 30%; }
.hk-frame--scene .hk-frame__plate { font-size: .74rem; }
html.inv-anim .hk-frame--scene .hk-frame__photo { animation: hk-warm 2.2s ease 1.6s both; }
.hk-scene-table { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.hk-scene-table .hk-table { margin: 0; }
.hk-scene-table .hk-table__food { width: min(19rem, 84%); }
.hk-scene-table .hk-table__top { height: max(3.6rem, 9svh); }
body.hk-body .inv-intro--scene .inv-scene__card {
    top: 61%; width: min(var(--scene-card-w, 74vw), 19rem); aspect-ratio: auto; padding: 1.5rem 1.2rem 1.2rem; rotate: -1.2deg; border-radius: 3px;
    -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    color: var(--inv-text); background: var(--hk-speckle) 0 0 / 220px 220px, var(--hk-paper);
    box-shadow: var(--hk-cast), inset 0 0 0 1px var(--hk-ring);
}
body.hk-body .inv-intro--scene .inv-scene__card::before {
    content: ''; position: absolute; left: 50%; top: -.5rem; width: 5rem; height: 1.1rem; margin-left: -2.5rem; rotate: 2deg;
    background: color-mix(in srgb, var(--inv-accent) 45%, transparent);
    clip-path: polygon(3% 0, 97% 4%, 100% 30%, 97% 60%, 99% 100%, 2% 96%, 0 66%, 3% 34%);
}
body.hk-body .inv-scene__card .inv-intro__label { margin-bottom: .5rem; font: 800 .66rem/1.3 var(--hk-sans); letter-spacing: .24em; color: var(--inv-primary); }
body.hk-body .inv-scene__card .inv-intro__names {
    font-family: var(--hk-display) !important; font-variation-settings: 'SOFT' 100; font-weight: 600; font-size: clamp(1.8rem, 8.4vw, 2.3rem); line-height: 1.06;
    letter-spacing: -.015em; color: var(--inv-deep); text-wrap: balance;
}
body.hk-body .inv-scene__card .inv-intro__rule { width: 5.5rem; height: 2px; margin-block: .7rem .55rem; border-radius: 2px; background: var(--inv-accent); opacity: .8; }
body.hk-body .inv-scene__card .inv-intro__date { font: 800 .8rem/1.4 var(--hk-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--inv-primary); }
body.hk-body .inv-intro--scene .inv-intro__skip { background: color-mix(in srgb, var(--hk-paper) 80%, transparent); border-color: color-mix(in srgb, var(--inv-wood) 45%, transparent); color: var(--inv-deep); }