/*
 * Template "Kunci Emas" (Syukuran & Rumah Baru) — an elegant, luxurious new-home celebration.
 * Midnight (the deep colour) and ivory marble, champagne gold accents; gold TEXT only on dark grounds.
 * Signature pieces: the ornate golden key (sections/_key), the gold wax seal with the monogram
 * (sections/_seal), Ionic columns (sections/_column), entablature lines (cornice + dentils), a Greek-key
 * band, the grand doorway with a double door on the cover, the ribbon cut, the blueprint sheet, the dial lock.
 * Textures: img/marble-light.webp (ivory marble, and inverted as faint veins on dark) and img/gold-leaf.webp
 * (gold foil on names, buttons and medallions), both CC0 (img/CREDITS.md).
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (navy / emerald / charcoal / burgundy: titles, cards, blueprint)
 *   --inv-deep (midnight: dark sections)   --inv-background (ivory)   --inv-text
 *   --inv-shine (champagne: gold on dark)  --inv-gold (gold lines on light)
 *   --inv-accent (dark gold, engraving lines only)   --inv-soft (marble tint)
 *
 * Tones (set in each partial): .ke-tone--light (ivory marble), --deep (midnight), --blueprint (home).
 * 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 · 2 tones & photo backgrounds · 3 shared pieces · 4 cover · 5 sections in page order ·
 *           6 forms · 7 shared components · 8 screen sizes · 9 motion
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Navy Sampanye" variant (the variant's colours override these) */
    --inv-primary: #1c3263;
    --inv-accent: #8f6a2c;
    --inv-background: #f8f4ec;
    --inv-text: #141c2e;
    --inv-deep: #0c1631;
    --inv-shine: #e8cd92;
    --inv-gold: #b8914a;
    --inv-soft: #ebe3d3;
    --inv-radius: 4px;

    --ke-serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
    --ke-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ke-col: 460px;
    --ke-paper: color-mix(in srgb, #fff 62%, var(--inv-background));
    --ke-title: color-mix(in srgb, var(--inv-primary) 82%, var(--inv-deep));
    --ke-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    --ke-cream: color-mix(in srgb, var(--inv-background) 86%, transparent);
    --ke-line: color-mix(in srgb, var(--inv-gold) 65%, transparent);
    --ke-line-soft: color-mix(in srgb, var(--inv-gold) 32%, transparent);
    --ke-line-dark: color-mix(in srgb, var(--inv-shine) 55%, transparent);
    --ke-engrave: color-mix(in srgb, var(--inv-gold) 55%, var(--inv-deep));
    --ke-drop: 0 26px 44px -26px color-mix(in srgb, var(--inv-deep) 85%, transparent);
    --ke-foil-grad: linear-gradient(100deg, var(--inv-gold), var(--inv-shine) 32%, color-mix(in srgb, var(--inv-shine) 50%, #fff) 48%, var(--inv-shine) 64%, color-mix(in srgb, var(--inv-gold) 85%, var(--inv-shine)));

    --ke-marble: url('../img/marble-light.webp');
    --ke-leaf: url('../img/gold-leaf-soft.webp');
    /* the marble veins as transparent white light (= the inverted marble screened over the dark ground; no blend modes:
       iOS Safari draws blended grey textures as plain grey); the gold leaf likewise as light and shade over the foil */
    --ke-veins: url('../img/marble-veins-light.webp');
    /* the Greek key (meander) band: a mask, so it takes any colour */
    --ke-meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16' viewBox='0 0 24 16'%3E%3Cpath d='M0 .75h24M0 15.25h24M19 15.25V3.5H4.5v8h10V7H9.5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");

    /* colours of the shared components */
    --inv-ambient-1: var(--inv-shine);
    --inv-ambient-2: color-mix(in srgb, var(--inv-shine) 60%, #fff);
}

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

body {
    margin: 0;
    background: var(--inv-background);
    color: var(--inv-text);
    font-family: var(--ke-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); }

.ke-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ke-preview { position: sticky; top: 0; z-index: 60; padding: .5rem 1rem; text-align: center; background: #fff4d6; color: #6b4e00; font-size: .8125rem; }

.ke-main { max-width: var(--ke-col); margin: 0 auto; }
.ke-branding { max-width: var(--ke-col); margin: 0 auto; }

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

.ke-arabic { font-family: 'Amiri', 'Traditional Arabic', serif; line-height: 2; color: var(--inv-primary); }
.ke-amp { font-family: var(--ke-serif); font-style: italic; font-weight: 400; color: var(--inv-primary); }

/* gold foil text (on dark grounds only): the gold leaf texture over a champagne sweep */
.ke-foil { color: var(--inv-shine); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .ke-foil {
        color: transparent;
        background: var(--ke-leaf) center / 260px auto, var(--ke-foil-grad);
        -webkit-background-clip: text; background-clip: text;
    }
}

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

/* light: ivory over a white marble, a soft champagne glow in one corner */
.ke-tone--light {
    background:
        radial-gradient(70% 32% at 100% 0%, color-mix(in srgb, var(--inv-shine) 26%, transparent), transparent 75%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-background) 80%, transparent), color-mix(in srgb, var(--inv-background) 72%, transparent)),
        var(--ke-marble) center / 640px auto,
        var(--inv-background);
}
/* deep: midnight with a glow of the primary, and the marble veins (inverted) shimmering faintly */
.ke-tone--deep {
    color: var(--inv-background);
    background:
        radial-gradient(90% 45% at 15% 0%, color-mix(in srgb, var(--inv-primary) 85%, transparent), transparent 75%),
        radial-gradient(70% 30% at 90% 100%, color-mix(in srgb, var(--inv-shine) 12%, transparent), transparent 75%),
        var(--inv-deep);
}
.ke-tone--deep::before, .ke-cover::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .09;
    background: var(--ke-veins) center / 700px auto;
}
.ke-tone--deep a:not(.inv-button) { color: var(--inv-shine); }
.ke-tone--deep .ke-arabic { color: var(--inv-shine); }

/* blueprint: the primary colour with a fine drafting grid (the home section) */
.ke-tone--blueprint {
    color: var(--inv-background);
    --ke-grid-fine: color-mix(in srgb, var(--inv-shine) 9%, transparent);
    --ke-grid-bold: color-mix(in srgb, var(--inv-shine) 17%, transparent);
    --ke-sheet-bg: color-mix(in srgb, var(--inv-primary) 74%, var(--inv-deep));
    background:
        linear-gradient(var(--ke-grid-bold) 1px, transparent 1px) -1px -1px / 90px 90px,
        linear-gradient(90deg, var(--ke-grid-bold) 1px, transparent 1px) -1px -1px / 90px 90px,
        linear-gradient(var(--ke-grid-fine) 1px, transparent 1px) -1px -1px / 18px 18px,
        linear-gradient(90deg, var(--ke-grid-fine) 1px, transparent 1px) -1px -1px / 18px 18px,
        radial-gradient(80% 45% at 50% 25%, color-mix(in srgb, var(--inv-primary) 80%, #fff 8%), transparent 75%),
        var(--ke-sheet-bg);
}

/* a client photo behind a section, under a strong gradient of the section's own tone */
.ke-bgphoto { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.ke-bgphoto img { display: block; width: 100%; height: calc(100% + 80px); margin-top: -40px; object-fit: cover; object-position: center 45%; --inv-parallax: 40px; }
.ke-bgphoto::after { content: ''; position: absolute; inset: 0; }
.ke-tone--light .ke-bgphoto::after {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--inv-background) 93%, transparent),
        color-mix(in srgb, var(--inv-background) 80%, transparent) 45%,
        color-mix(in srgb, var(--inv-background) 95%, transparent));
}
/* on light sections the marble only shows where the photo fades out */
.ke-tone--light:has(.ke-bgphoto) { background: var(--inv-background); }
.ke-tone--deep .ke-bgphoto::after {
    background:
        radial-gradient(90% 50% at 20% 10%, color-mix(in srgb, var(--inv-primary) 45%, transparent), transparent),
        linear-gradient(180deg,
            color-mix(in srgb, var(--inv-deep) 88%, transparent),
            color-mix(in srgb, var(--inv-deep) 72%, transparent) 45%,
            color-mix(in srgb, var(--inv-deep) 95%, transparent));
}

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

/* heading: a letter-spaced eyebrow between fine lines, a Didone title, a rule with a diamond */
.ke-heading { margin: 0 auto 2.2rem; }
.ke-heading__eyebrow {
    display: inline-flex; align-items: center; gap: .7rem; margin: 0 0 .7rem;
    font-size: .68rem; font-weight: 600; line-height: 1.3; letter-spacing: .3em; text-transform: uppercase; color: var(--inv-primary);
}
.ke-heading__eyebrow::before, .ke-heading__eyebrow::after { content: ''; width: 1.6rem; height: 1px; background: var(--inv-gold); }
.ke-heading__title {
    margin: 0; font-family: var(--ke-serif); font-weight: 500; font-size: 2.45rem; line-height: 1.08; letter-spacing: -.01em;
    color: var(--ke-title); text-wrap: balance;
}
.ke-heading__title em { font-style: italic; font-weight: 400; color: var(--inv-primary); }
.ke-heading__rule { position: relative; display: block; width: 8.5rem; height: 9px; margin: 1rem auto 0; }
.ke-heading__rule::before { content: ''; position: absolute; inset: 4px 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--inv-gold) 30%, var(--inv-gold) 70%, transparent); }
.ke-heading__rule::after { content: ''; position: absolute; left: 50%; top: 0; width: 9px; height: 9px; margin-left: -4.5px; transform: rotate(45deg) scale(.8); background: var(--inv-gold); box-shadow: 0 0 0 3px var(--inv-background); }
.ke-heading--left { text-align: left; }
.ke-heading--left .ke-heading__eyebrow::before { display: none; }
.ke-heading--left .ke-heading__rule { margin-left: 0; }
:is(.ke-tone--deep, .ke-tone--blueprint) .ke-heading__eyebrow { color: var(--inv-shine); }
:is(.ke-tone--deep, .ke-tone--blueprint) .ke-heading__eyebrow::before,
:is(.ke-tone--deep, .ke-tone--blueprint) .ke-heading__eyebrow::after { background: var(--ke-line-dark); }
:is(.ke-tone--deep, .ke-tone--blueprint) .ke-heading__title { color: #fff; }
:is(.ke-tone--deep, .ke-tone--blueprint) .ke-heading__title em { color: var(--inv-shine); }
:is(.ke-tone--deep, .ke-tone--blueprint) .ke-heading__rule::before { background: linear-gradient(90deg, transparent, var(--inv-shine) 30%, var(--inv-shine) 70%, transparent); }
:is(.ke-tone--deep, .ke-tone--blueprint) .ke-heading__rule::after { background: var(--inv-shine); box-shadow: 0 0 0 3px var(--inv-deep); }
.ke-tone--blueprint .ke-heading__rule::after { box-shadow: 0 0 0 3px var(--ke-sheet-bg); }

.ke-icon { width: 1.15rem; height: 1.15rem; flex: none; }

/* the golden key (sections/_key) */
.ke-key { display: block; overflow: visible; }
.ke-key__metal { fill: url(#ke-gold); stroke: var(--ke-engrave); stroke-width: .7; }
.ke-key__hole { fill: var(--ke-key-hole, var(--inv-deep)); stroke: var(--ke-engrave); stroke-width: .7; }
.ke-key__line { stroke: var(--ke-engrave); stroke-width: .9; stroke-linecap: round; opacity: .75; }
.ke-key__line circle:first-child { stroke: color-mix(in srgb, var(--inv-shine) 60%, #fff); opacity: .9; }
.ke-key__shine { stroke: rgb(255 255 255 / .75); stroke-width: 2.2; stroke-linecap: round; }
.ke-key__mono { font-family: var(--ke-serif); font-style: italic; font-weight: 500; fill: var(--inv-shine); letter-spacing: .02em; }

/* the gold wax seal (sections/_seal) */
.ke-seal { display: block; overflow: visible; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .32)); }
.ke-seal__wax { fill: url(#ke-seal); }
.ke-seal__ring { fill: none; stroke: var(--ke-engrave); stroke-width: 1.3; opacity: .8; }
.ke-seal__beads { fill: none; stroke: var(--ke-engrave); stroke-width: 2.3; stroke-dasharray: .1 4.2; stroke-linecap: round; opacity: .55; }
.ke-seal__press { fill: color-mix(in srgb, var(--inv-gold) 40%, transparent); opacity: .45; }
.ke-seal__mono { font-family: var(--ke-serif); font-style: italic; font-weight: 600; fill: var(--ke-engrave); paint-order: stroke; stroke: rgb(255 255 255 / .45); stroke-width: .7; }
.ke-seal__key { fill: var(--ke-engrave); }
.ke-seal__key .ke-seal__key-hole { fill: color-mix(in srgb, var(--inv-shine) 70%, #fff); }
.ke-seal__shine { fill: none; stroke: rgb(255 255 255 / .6); stroke-width: 2.4; stroke-linecap: round; }

/* the Ionic column (sections/_column): currentColor sets the line colour */
.ke-column { display: flex; flex-direction: column; align-items: stretch; flex: none; }
.ke-column__cap, .ke-column__base { display: block; width: 100%; height: auto; overflow: visible; }
.ke-column__cap { aspect-ratio: 44 / 20; }
.ke-column__base { aspect-ratio: 44 / 16; }
.ke-column__fill { fill: color-mix(in srgb, currentColor 22%, transparent); }
.ke-column__ink { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ke-column__shaft {
    flex: 1; margin: 0 14%; min-height: 1rem;
    border-left: 1px solid currentColor; border-right: 1px solid currentColor;
    background:
        repeating-linear-gradient(90deg, transparent 0 3px, color-mix(in srgb, currentColor 70%, transparent) 3px 4px),
        linear-gradient(90deg, color-mix(in srgb, currentColor 8%, transparent), color-mix(in srgb, currentColor 22%, transparent) 40%, color-mix(in srgb, currentColor 6%, transparent));
}

/* entablature: a cornice line, a row of dentils, an architrave line (gold on light, champagne on dark) */
.ke-entablature, .ke-portal__cornice, .ke-portico__cornice, .ke-host__divider {
    --ke-ent: var(--inv-gold);
    display: block; height: 17px;
    background:
        linear-gradient(var(--ke-ent), var(--ke-ent)) 0 0 / 100% 3px no-repeat,
        linear-gradient(var(--ke-ent), var(--ke-ent)) 0 5px / 100% 1px no-repeat,
        repeating-linear-gradient(90deg, var(--ke-ent) 0 4px, transparent 4px 8px) 0 8px / 100% 4px no-repeat,
        linear-gradient(var(--ke-ent), var(--ke-ent)) 0 15px / 100% 1px no-repeat;
}
.ke-entablature { width: min(100%, 15rem); margin: 0 auto 2rem; -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }

/* the Greek-key band along the top edge of a deep section */
.ke-meander {
    position: absolute; left: 0; right: 0; top: 1.4rem; height: 16px; pointer-events: none;
    background: color-mix(in srgb, var(--inv-shine) 50%, transparent);
    -webkit-mask: var(--ke-meander) left top / 24px 16px repeat-x; mask: var(--ke-meander) left top / 24px 16px repeat-x;
}

/* four small corner brackets inside a card */
.ke-corners { position: absolute; inset: 9px; pointer-events: none; z-index: 0; }
.ke-corners i { position: absolute; width: 16px; height: 16px; border: 0 solid var(--ke-corner, var(--inv-gold)); }
.ke-corners i:nth-child(1) { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.ke-corners i:nth-child(2) { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.ke-corners i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.ke-corners i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }

/* an engraved card: ivory marble paper with a fine double gold border */
.ke-host__card, .ke-rsvp__card, .ke-event, .ke-cohosts__card, .ke-portico__panel {
    position: relative; color: var(--inv-text);
    background:
        linear-gradient(color-mix(in srgb, var(--ke-paper) 86%, transparent), color-mix(in srgb, var(--ke-paper) 86%, transparent)),
        var(--ke-marble) center / 520px auto, var(--ke-paper);
    box-shadow: inset 0 0 0 1px var(--ke-line), inset 0 0 0 5px transparent, inset 0 0 0 6px var(--ke-line-soft), var(--ke-drop);
}

/* ---------- 4. cover ---------- */
.ke-cover {
    --door: min(52vw, 12.5rem, calc(34svh * .72));
    --col: calc(var(--door) * .14);
    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.7rem 1.3rem 1.9rem;
    isolation: isolate; color: var(--inv-background);
    background:
        radial-gradient(60% 34% at 50% 38%, color-mix(in srgb, var(--inv-shine) 16%, transparent), transparent 72%),
        radial-gradient(85% 55% at 50% 30%, color-mix(in srgb, var(--inv-primary) 90%, transparent), transparent 78%),
        var(--inv-deep);
    transition: opacity .9s ease;
}
/* a fine double gold frame around the screen, like the edge of an engraved card */
.ke-cover::after {
    content: ''; position: fixed; inset: .65rem; z-index: -1; pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--inv-shine) 40%, transparent);
    outline: 1px solid color-mix(in srgb, var(--inv-shine) 16%, transparent); outline-offset: -5px;
}
.ke-cover__inner { 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); }

.ke-cover__title {
    display: inline-flex; align-items: center; gap: .65rem; margin: 0 0 .55rem;
    font-size: .66rem; font-weight: 600; line-height: 1.2; letter-spacing: .32em; text-transform: uppercase; color: var(--inv-shine);
}
.ke-cover__title::before, .ke-cover__title::after { content: ''; width: 1.5rem; height: 1px; background: var(--ke-line-dark); }

.ke-cover__key { width: calc(var(--door) * .66); margin: 0 0 .55rem; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .45)); }

/* the grand doorway: cornice, two columns, the arched opening, two marble steps */
.ke-portal { display: flex; flex-direction: column; align-items: center; color: var(--inv-shine); }
.ke-portal__cornice { --ke-ent: var(--inv-shine); width: calc(var(--door) + var(--col) * 2 + 1.6rem); margin-bottom: .2rem; }
.ke-portal__body { display: flex; align-items: stretch; gap: .35rem; }
.ke-portal__column { width: var(--col); }
.ke-portal__arch { position: relative; width: var(--door); padding-top: .55rem; }
.ke-portal__window {
    position: relative; aspect-ratio: .72; overflow: hidden; border-radius: 999px 999px 0 0; perspective: 900px;
    background: linear-gradient(180deg, var(--inv-primary), var(--inv-deep));
    box-shadow: 0 0 0 3px var(--inv-deep), 0 0 0 4.2px var(--inv-shine), 0 24px 40px -20px rgb(0 0 0 / .8);
}
/* a second, finer arch line a little outside the opening */
.ke-portal__arch::before {
    content: ''; position: absolute; inset: 0 -9px 0; border: 1px solid var(--ke-line-dark); border-bottom: 0; border-radius: 999px 999px 0 0; pointer-events: none;
}
.ke-portal__keystone {
    position: absolute; left: 50%; top: -.2rem; width: 1.05rem; height: 1.35rem; transform: translateX(-50%);
    clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%);
    background: var(--ke-leaf) center / 120px auto, linear-gradient(180deg, color-mix(in srgb, var(--inv-shine) 60%, #fff), var(--inv-gold));
}
.ke-portal__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.ke-portal__empty { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(70% 50% at 50% 40%, color-mix(in srgb, var(--inv-shine) 22%, transparent), transparent 70%); }
.ke-portal__emblem { width: 76%; transform: rotate(-90deg); }
/* the double door: panelled leaves with a gold edge and handles (only drawn when motion is allowed) */
.ke-portal__leaf {
    position: absolute; top: 0; bottom: 0; z-index: 2; display: none; width: 50%;
    background:
        linear-gradient(color-mix(in srgb, var(--inv-shine) 50%, transparent), color-mix(in srgb, var(--inv-shine) 50%, transparent)) 50% 22% / 62% 1px no-repeat,
        linear-gradient(color-mix(in srgb, var(--inv-shine) 50%, transparent), color-mix(in srgb, var(--inv-shine) 50%, transparent)) 50% 70% / 62% 1px no-repeat,
        linear-gradient(160deg, color-mix(in srgb, var(--inv-primary) 85%, #fff 6%), var(--inv-deep));
    box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--inv-deep) 60%, transparent), inset 0 0 0 6px color-mix(in srgb, var(--inv-shine) 45%, transparent);
    backface-visibility: hidden;
}
.ke-portal__leaf--left { left: 0; transform-origin: left center; }
.ke-portal__leaf--right { right: 0; transform-origin: right center; }
.ke-portal__leaf i {
    position: absolute; top: 52%; width: 4px; height: 1.9rem; border-radius: 3px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-shine) 60%, #fff), var(--inv-gold));
    box-shadow: 0 2px 4px rgb(0 0 0 / .5);
}
.ke-portal__leaf--left i { right: 7px; }
.ke-portal__leaf--right i { left: 7px; }
/* two marble steps under the doorway */
.ke-portal__steps { display: flex; flex-direction: column; align-items: center; width: 100%; }
.ke-portal__steps i {
    display: block; height: 7px; width: calc(var(--door) + var(--col) * 2 + .9rem);
    background: linear-gradient(180deg, color-mix(in srgb, #fff 30%, transparent), transparent), var(--ke-marble) center / 300px auto, var(--inv-background);
    box-shadow: inset 0 1px 0 var(--inv-shine), 0 4px 8px -4px rgb(0 0 0 / .6);
}
.ke-portal__steps i + i { width: calc(var(--door) + var(--col) * 2 + 2.2rem); }

.ke-cover__text { display: flex; flex-direction: column; align-items: center; margin-top: 1rem; }
.ke-cover__name { margin: 0; max-width: 16ch; font-family: var(--ke-serif); font-weight: 500; font-size: clamp(1.75rem, 8vw, 2.3rem); line-height: 1.1; letter-spacing: -.005em; text-wrap: balance; }
.ke-cover__date { margin: .5rem 0 0; font-size: .74rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-shine); }
.ke-cover__quote { max-width: 31ch; margin: .45rem 0 0; font-family: var(--ke-serif); font-style: italic; font-size: .98rem; line-height: 1.4; color: var(--ke-cream); }
.ke-cover__guest {
    width: min(100%, 18.5rem); margin: .9rem 0 0; padding: .5rem 1rem .6rem;
    background: color-mix(in srgb, var(--inv-background) 7%, transparent);
    border: 1px solid var(--ke-line-dark); outline: 1px solid color-mix(in srgb, var(--inv-shine) 18%, transparent); outline-offset: 3px;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.ke-cover__guest p { margin: 0; font-size: .6rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-shine); }
.ke-cover__guest-name { display: block; font-family: var(--ke-serif); font-weight: 500; font-size: 1.18rem; line-height: 1.25; color: #fff; overflow-wrap: anywhere; }
.ke-cover__open, .ke-main .ke-gold-button {
    min-height: 3rem; padding: .7rem 2rem; border-radius: 999px; font-family: var(--ke-sans); font-weight: 600; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--inv-deep);
    background: var(--ke-leaf) center / 260px auto, var(--ke-foil-grad);
    box-shadow: 0 0 0 3px var(--inv-deep), 0 0 0 4px var(--ke-line-dark), 0 16px 26px -14px rgb(0 0 0 / .8);
}
.ke-cover__open { margin-top: 1.05rem; --inv-accent: var(--inv-shine); } /* the shared breathing glow in champagne */
.ke-cover--nophoto .ke-portal__window { background: radial-gradient(80% 60% at 50% 35%, color-mix(in srgb, var(--inv-primary) 80%, #fff 10%), var(--inv-deep)); }

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

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

/* opening: the entablature, basmalah, greeting, message; the quote on a midnight panel */
.ke-opening { padding-top: 4.2rem; }
.ke-opening__basmalah { margin: 0 auto .6rem !important; font-size: 1.75rem; }
.ke-opening__greeting { max-width: 22ch !important; margin-bottom: .9rem !important; font-family: var(--ke-serif); font-style: italic; font-size: 1.55rem; line-height: 1.25; color: var(--ke-title); text-wrap: balance; }
.ke-opening__message { color: var(--ke-muted); }
.ke-opening__quote {
    position: relative; max-width: 23rem; margin: 2.4rem auto 0; padding: 2.3rem 1.5rem 1.7rem; color: var(--inv-background);
    background: radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--inv-primary) 85%, #fff 8%), transparent 75%), var(--inv-deep);
    box-shadow: inset 0 0 0 1px var(--ke-line-dark), var(--ke-drop);
    --ke-corner: var(--inv-shine);
}
.ke-opening__mark { position: relative; display: block; width: 2rem; margin: 0 auto .7rem; fill: var(--inv-shine); }
.ke-opening__quote blockquote { position: relative; margin: 0; font-family: var(--ke-serif); font-style: italic; font-size: 1.05rem; line-height: 1.55; }
.ke-opening__quote figcaption { position: relative; margin-top: 1rem; font-size: .68rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-shine); }

/* host: the family photo in a gilded frame, an engraved card with the seal over its lower edge */
.ke-host__frame {
    position: relative; width: min(72%, 16rem); aspect-ratio: 4 / 5; margin: 0 auto 0 calc(50% - min(36%, 8rem) - .9rem); padding: 7px;
    background: var(--ke-leaf) center / 220px auto, linear-gradient(135deg, var(--inv-gold), color-mix(in srgb, var(--inv-shine) 70%, #fff), var(--inv-gold) 55%, var(--inv-shine));
    box-shadow: 16px 16px 0 -1px color-mix(in srgb, var(--inv-shine) 16%, transparent), 0 30px 50px -24px rgb(0 0 0 / .85);
}
.ke-host__frame::after { content: ''; position: absolute; inset: 14px; border: 1px solid rgb(255 255 255 / .6); pointer-events: none; }
.ke-host__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-deep) 50%, transparent); }
.ke-host__empty { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(70% 55% at 50% 40%, color-mix(in srgb, var(--inv-primary) 70%, #fff 12%), var(--inv-deep)); }
.ke-host__emblem { width: 70%; transform: rotate(-90deg); }
.ke-host__card { width: min(90%, 21.5rem); margin: -2.6rem 0 0 auto; padding: 2.6rem 1.4rem 1.7rem; }
.ke-host__card > :not(.ke-corners) { position: relative; z-index: 1; }
.ke-host__seal { position: absolute !important; right: 1.1rem; top: -2.5rem; width: 4.8rem; transform: rotate(-8deg); }
.ke-host__short { margin: 0 0 .2rem; font-family: var(--ke-serif); font-style: italic; font-size: 1.08rem; color: var(--inv-primary); }
.ke-host__family { margin: 0; font-family: var(--ke-serif); font-weight: 500; font-size: 1.95rem; line-height: 1.12; color: var(--ke-title); text-wrap: balance; }
.ke-host__divider { width: 6.5rem; height: 13px; margin: 1rem auto .9rem; transform: scaleY(.8); }
.ke-host__couple { display: flex; flex-direction: column; align-items: center; gap: .1rem; margin: 0; font-size: .98rem; font-weight: 500; color: var(--inv-text); }
.ke-host__couple .ke-amp { font-size: 1.35rem; line-height: 1.2; }
.ke-host__members { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px dashed var(--ke-line); }
.ke-host__members small { display: block; font-size: .6rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--inv-primary); }
.ke-host__members p { margin: .25rem auto 0; max-width: 30ch; font-size: .9rem; color: var(--ke-muted); }

/* occasion: the ribbon cut, "Dalam rangka", the type big, the intent between fine rules */
.ke-ribbon { display: block; width: calc(100% + 2.8rem); height: auto; margin: -1.2rem -1.4rem 1.7rem; overflow: visible; }
.ke-ribbon__band { fill: url(#ke-gold); filter: drop-shadow(0 6px 5px rgb(0 0 0 / .18)); }
.ke-ribbon__satin { fill: none; stroke: rgb(255 255 255 / .6); stroke-width: 1.6; stroke-linecap: round; }
.ke-ribbon__edge { fill: none; stroke: var(--ke-engrave); stroke-width: .8; opacity: .55; }
.ke-ribbon__half { transform-box: view-box; }
.ke-ribbon__half--left { transform-origin: 0 62px; transform: translateX(-4px) rotate(-2.5deg); }
.ke-ribbon__half--right { transform-origin: 400px 62px; transform: translateX(4px) rotate(2.5deg); }
.ke-ribbon__scissors { fill: none; stroke: var(--inv-primary); stroke-width: 2.6; stroke-linecap: round; }
.ke-ribbon__scissors .ke-ribbon__pivot { fill: var(--inv-shine); stroke-width: 1.2; }
.ke-occasion__eyebrow {
    display: inline-flex !important; align-items: center; gap: .7rem; margin-bottom: .6rem !important;
    font-size: .68rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--inv-primary);
}
.ke-occasion__eyebrow::before, .ke-occasion__eyebrow::after { content: ''; width: 1.6rem; height: 1px; background: var(--inv-gold); }
.ke-occasion__type { max-width: 13ch; margin: 0 auto 1.4rem; font-family: var(--ke-serif); font-weight: 500; font-size: 2.5rem; line-height: 1.06; color: var(--ke-title); text-wrap: balance; }
.ke-occasion__intent {
    max-width: 30ch !important; padding: 1.2rem 0; font-family: var(--ke-serif); font-style: italic; font-size: 1.1rem; line-height: 1.55; color: var(--inv-text);
    background: linear-gradient(90deg, transparent, var(--inv-gold), transparent) top / 7rem 1px no-repeat, linear-gradient(90deg, transparent, var(--inv-gold), transparent) bottom / 7rem 1px no-repeat;
}

/* home: the blueprint sheet: photo with dimension lines and a north arrow, the title block, the story */
.ke-sheet {
    position: relative; max-width: 23rem; margin: 0 auto; padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--inv-shine) 60%, transparent);
    outline: 1px solid color-mix(in srgb, var(--inv-shine) 22%, transparent); outline-offset: 4px;
    background: color-mix(in srgb, var(--inv-deep) 22%, transparent);
}
.ke-sheet__drawing { position: relative; padding: 1.7rem 1.7rem 0 0; }
.ke-sheet__dim { position: absolute; pointer-events: none; --ke-dim: color-mix(in srgb, var(--inv-shine) 80%, transparent); }
.ke-sheet__dim--x { top: .5rem; left: 0; right: 1.7rem; height: 11px; background: linear-gradient(var(--ke-dim), var(--ke-dim)) center / 100% 1px no-repeat; }
.ke-sheet__dim--y { top: 1.7rem; right: .5rem; bottom: 0; width: 11px; background: linear-gradient(var(--ke-dim), var(--ke-dim)) center / 1px 100% no-repeat; }
.ke-sheet__dim::before, .ke-sheet__dim::after { content: ''; position: absolute; background: var(--ke-dim); }
.ke-sheet__dim--x::before, .ke-sheet__dim--x::after { top: 0; width: 1px; height: 11px; }
.ke-sheet__dim--x::before { left: 0; } .ke-sheet__dim--x::after { right: 0; }
.ke-sheet__dim--y::before, .ke-sheet__dim--y::after { left: 0; width: 11px; height: 1px; }
.ke-sheet__dim--y::before { top: 0; } .ke-sheet__dim--y::after { bottom: 0; }
/* architectural ticks (short diagonal slashes) at the dimension ends */
.ke-sheet__dim--x { -webkit-mask: none; }
.ke-sheet__north { position: absolute; top: -.15rem; right: -.1rem; width: 1.45rem; overflow: visible; }
.ke-sheet__north circle { fill: none; stroke: var(--inv-shine); stroke-width: 1.2; }
.ke-sheet__north path { fill: var(--inv-shine); }
.ke-sheet__north text { font: 600 7px var(--ke-sans); fill: var(--inv-shine); }
.ke-sheet__photo { position: relative; margin: 0; padding: 5px; border: 1px solid color-mix(in srgb, var(--inv-shine) 70%, transparent); }
.ke-sheet__photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ke-sheet__elevation { display: block; width: 100%; aspect-ratio: 4 / 3; padding: 1rem .8rem .4rem; stroke: var(--inv-shine); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; background: color-mix(in srgb, var(--inv-deep) 30%, transparent); }
.ke-sheet__elevation .ke-sheet__thin { stroke-width: .7; stroke-dasharray: 3 3; opacity: .7; }
.ke-sheet__marks { position: absolute; inset: -7px; pointer-events: none; }
.ke-sheet__marks i { position: absolute; width: 10px; height: 10px; border: 0 solid var(--inv-shine); }
.ke-sheet__marks i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.ke-sheet__marks i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.ke-sheet__marks i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.ke-sheet__marks i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.ke-sheet__block {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 1.1rem 0 0; text-align: left;
    border: 1px solid color-mix(in srgb, var(--inv-shine) 60%, transparent); background: color-mix(in srgb, var(--inv-shine) 35%, transparent);
}
.ke-sheet__cell { min-width: 0; padding: .5rem .7rem .55rem; background: var(--ke-sheet-bg); }
.ke-sheet__cell--wide { grid-column: 1 / -1; }
.ke-sheet__cell dt { font-size: .56rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-shine); }
.ke-sheet__cell dd { margin: .1rem 0 0; font-size: .86rem; line-height: 1.45; color: #fff; overflow-wrap: anywhere; }
.ke-sheet__cell .ke-sheet__project { font-family: var(--ke-serif); font-style: italic; font-size: 1.2rem; line-height: 1.25; color: var(--inv-shine); }
.ke-home__story { max-width: 30ch !important; margin: 2rem auto 0 !important; font-family: var(--ke-serif); font-style: italic; font-size: 1.1rem; line-height: 1.55; color: var(--ke-cream); }

/* events: engraved cards; every second card midnight */
.ke-event { max-width: 24rem; margin: 0 auto; padding: 1rem 1rem 1.35rem; text-align: left; }
.ke-event + .ke-event { margin-top: 2rem; }
.ke-event > * { position: relative; }
.ke-event__media { position: relative; margin: 0 0 1.1rem; }
.ke-event__photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ke-event__media::after { content: ''; position: absolute; inset: 7px; border: 1px solid rgb(255 255 255 / .7); pointer-events: none; }
.ke-event__top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem; padding: 0 .2rem; }
.ke-event__date { display: flex; flex-direction: column; align-items: center; margin: 0; padding: .15rem 1rem .15rem 0; border-right: 1px solid var(--ke-line); }
.ke-event__weekday, .ke-event__month { font-size: .58rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-primary); }
.ke-event__day { font-family: var(--ke-serif); font-weight: 500; font-size: 3.1rem; line-height: 1; color: var(--ke-title); }
.ke-event__count { margin: 0; font-size: .6rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-primary); }
.ke-event__name { margin: .15rem 0 .2rem; font-family: var(--ke-serif); font-weight: 500; font-size: 1.45rem; line-height: 1.15; color: var(--ke-title); }
.ke-event__full { margin: 0; font-size: .84rem; color: var(--ke-muted); }
.ke-event__rows { display: grid; gap: .7rem; margin: 1.1rem .2rem 0; padding: 1rem 0 0; list-style: none; font-size: .9rem; border-top: 1px solid var(--ke-line-soft); }
.ke-event__rows li { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: .65rem; align-items: start; }
.ke-event__rows .ke-icon { margin-top: .2rem; color: var(--inv-primary); }
.ke-event__venue { display: block; font-weight: 600; }
.ke-event__address { display: block; font-size: .85rem; color: var(--ke-muted); }
.ke-event .inv-maps { margin: 1.1rem .2rem 0; }
.ke-event .inv-button { font-weight: 600; letter-spacing: .04em; }
.ke-event--dark {
    color: var(--inv-background); --ke-corner: var(--inv-shine);
    background: radial-gradient(90% 50% at 50% 0%, color-mix(in srgb, var(--inv-primary) 80%, #fff 6%), transparent 75%), var(--inv-deep);
    box-shadow: inset 0 0 0 1px var(--ke-line-dark), inset 0 0 0 5px transparent, inset 0 0 0 6px color-mix(in srgb, var(--inv-shine) 22%, transparent), var(--ke-drop);
}
.ke-event--dark :is(.ke-event__weekday, .ke-event__month, .ke-event__count) { color: var(--inv-shine); }
.ke-event--dark :is(.ke-event__day, .ke-event__name) { color: #fff; }
.ke-event--dark :is(.ke-event__full, .ke-event__address) { color: var(--ke-cream); }
.ke-event--dark .ke-event__date { border-right-color: var(--ke-line-dark); }
.ke-event--dark .ke-event__rows { border-top-color: color-mix(in srgb, var(--inv-shine) 25%, transparent); }
.ke-event--dark .ke-event__rows .ke-icon { color: var(--inv-shine); }
.ke-event--dark .inv-button { color: var(--inv-deep); background: var(--inv-shine); }

/* countdown: the dial lock with the turning key; round dial numbers; the calendar on an ivory card */
.ke-lock { position: relative; width: 8.4rem; aspect-ratio: 1; margin: 3.4rem auto 2.4rem; }
.ke-lock__face {
    position: absolute; inset: 0; border-radius: 50%;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--inv-primary) 55%, var(--inv-deep)) 0 52%, color-mix(in srgb, var(--inv-shine) 70%, transparent) 52.5% 53.5%, transparent 54%),
        repeating-conic-gradient(color-mix(in srgb, var(--inv-shine) 75%, transparent) 0 1deg, transparent 1deg 7.5deg),
        radial-gradient(circle, var(--inv-deep) 0 70%, color-mix(in srgb, var(--inv-deep) 70%, var(--inv-primary)) 100%);
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--inv-shine) 85%, var(--inv-gold)), 0 0 0 6px var(--inv-deep), 0 0 0 7px var(--ke-line-dark),
        inset 0 0 0 6px var(--inv-deep), 0 24px 40px -16px rgb(0 0 0 / .8);
}
/* the escutcheon over the key tip: a small gold disc with a dark keyhole */
.ke-lock__hole {
    position: absolute; left: 50%; top: 50%; z-index: 3; width: 1.45rem; height: 1.45rem; margin: -.725rem 0 0 -.725rem; border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, var(--inv-deep) 0 18%, transparent 19%), linear-gradient(var(--inv-deep), var(--inv-deep)) 50% 70% / 3px 38% no-repeat, radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-shine) 60%, #fff), var(--inv-gold));
    box-shadow: 0 2px 6px rgb(0 0 0 / .5);
}
.ke-lock__turn { position: absolute; left: 50%; top: 50%; z-index: 2; width: 0; height: 0; transform: rotate(90deg); }
.ke-lock__key { position: absolute; width: 6.4rem; left: calc(6.4rem * -246 / 260); top: calc(6.4rem * -46 / 260); filter: drop-shadow(0 6px 6px rgb(0 0 0 / .5)); }
.ke-countdown .inv-countdown { gap: clamp(.45rem, 2.4vw, .8rem); }
.ke-countdown .inv-countdown__item {
    display: grid; place-content: center; width: clamp(4.1rem, 18.5vw, 4.7rem); min-width: 0; aspect-ratio: 1; padding: 0; border-radius: 50%; color: #fff;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--inv-deep) 92%, transparent) 0 64%, transparent 65%),
        repeating-conic-gradient(color-mix(in srgb, var(--inv-shine) 65%, transparent) 0 1.2deg, transparent 1.2deg 10deg),
        var(--inv-deep);
    box-shadow: 0 0 0 1.5px var(--inv-shine), 0 0 0 4px color-mix(in srgb, var(--inv-deep) 70%, transparent), 0 0 0 5px var(--ke-line-dark), 0 16px 26px -14px rgb(0 0 0 / .7);
}
.ke-countdown .inv-countdown__value { font-variant-numeric: lining-nums tabular-nums; font-family: var(--ke-serif); font-weight: 500; font-size: 1.6rem; line-height: 1.05; color: #fff; }
.ke-countdown .inv-countdown__label { margin-top: .05rem; font-size: .5rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-shine); }
.ke-countdown .inv-countdown__done { font-family: var(--ke-serif); font-size: 1.35rem; font-style: italic; color: var(--inv-shine); }
.ke-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 2.1rem; }
.ke-countdown .inv-countdown__actions .inv-button {
    width: min(100%, 17rem); min-height: 2.75rem; padding: .6rem 1rem; border-radius: 999px; font-size: .8rem; font-weight: 600; letter-spacing: .06em;
    color: var(--inv-background); background: color-mix(in srgb, var(--inv-background) 8%, transparent);
    box-shadow: inset 0 0 0 1px var(--ke-line-dark);
}
.ke-countdown .inv-countdown__actions .inv-button:first-child { color: var(--inv-deep); background: var(--ke-leaf) center / 260px auto, var(--ke-foil-grad); box-shadow: none; }
.ke-countdown .inv-cal {
    --inv-cal-bg: var(--ke-paper); --inv-cal-mark: var(--inv-gold); --inv-cal-text: var(--inv-text);
    max-width: 19rem; margin: 2.8rem auto 0; border-radius: 3px;
    box-shadow: inset 0 0 0 1px var(--ke-line), inset 0 0 0 5px transparent, inset 0 0 0 6px var(--ke-line-soft), 0 22px 40px -24px rgb(0 0 0 / .7);
}
.ke-countdown .inv-cal__month { font-family: var(--ke-serif); font-size: 1.5rem; font-style: italic; color: var(--ke-title); }

/* prayer: a portico of two Ionic columns around a marble panel, a cornice above, steps below */
.ke-portico { max-width: 24rem; margin: 0 auto; color: var(--inv-gold); }
.ke-portico__cornice { --ke-ent: var(--inv-gold); width: calc(100% + 1rem); margin: 0 -.5rem .25rem; }
.ke-portico__body { display: flex; align-items: stretch; gap: .3rem; }
.ke-portico__column { width: 1.85rem; color: var(--inv-gold); }
.ke-portico__panel { flex: 1; min-width: 0; padding: 1.7rem .95rem 1.7rem; box-shadow: inset 0 0 0 1px var(--ke-line), 0 18px 34px -24px color-mix(in srgb, var(--inv-deep) 70%, transparent); }
.ke-portico__key { width: 4.6rem; margin: 0 auto .7rem; }
.ke-portico__eyebrow { margin: 0 0 .5rem; font-size: .64rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--inv-primary); }
.ke-portico__arabic { margin: 0 0 .8rem; font-size: 1.5rem; line-height: 2; }
.ke-portico__text { margin: 0; }
.ke-portico__text p { margin: 0; font-family: var(--ke-serif); font-style: italic; font-size: 1.02rem; line-height: 1.55; color: var(--inv-text); }
.ke-portico__text cite {
    display: inline-block; margin-top: 1rem; padding: .32rem .95rem; border-radius: 999px; font-style: normal;
    font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--inv-shine); background: var(--inv-deep);
}
.ke-portico__steps i { width: calc(100% + .6rem); }
.ke-portico__steps i + i { width: calc(100% + 1.8rem); }
.ke-portico__steps { width: 100%; }
.ke-portico__steps i { box-shadow: inset 0 1px 0 var(--inv-gold), 0 4px 8px -5px rgb(0 0 0 / .4); }

/* rundown: a programme card: a fine gold line with diamonds, big gold times, dotted rules */
.ke-rundown { text-align: left; }
.ke-rundown .ke-heading { position: relative; z-index: 1; }
/* (the reveal script sets opacity and transform on direct children, so the look sits on the inner key) */
.ke-rundown__deco { position: absolute; z-index: -1; right: -4.5rem; top: 52%; width: 15rem; pointer-events: none; }
.ke-rundown__key { opacity: .13; transform: rotate(-62deg); }
.ke-rundown__list { position: relative; max-width: 24rem; margin: 0 auto; padding: 0 0 0 1.3rem; list-style: none; }
.ke-rundown__list::before { content: ''; position: absolute; left: .3rem; top: .6rem; bottom: .6rem; width: 1px; transform-origin: top; background: linear-gradient(180deg, var(--inv-shine), color-mix(in srgb, var(--inv-shine) 25%, transparent)); }
.ke-rundown__item { position: relative; display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); gap: .9rem; padding: 1rem 0; border-bottom: 1px dotted color-mix(in srgb, var(--inv-shine) 35%, transparent); }
.ke-rundown__item:last-child { border-bottom: 0; }
.ke-rundown__item::before { content: ''; position: absolute; left: calc(-1.3rem + .3rem - 4px); top: 1.5rem; width: 9px; height: 9px; transform: rotate(45deg); background: var(--inv-shine); box-shadow: 0 0 0 3px var(--inv-deep); }
.ke-rundown__time { font-family: var(--ke-serif); font-weight: 500; font-size: 1.5rem; line-height: 1.2; color: var(--inv-shine); font-variant-numeric: lining-nums tabular-nums; }
.ke-rundown__body h3 { margin: .2rem 0 0; font-size: 1rem; font-weight: 500; line-height: 1.35; color: #fff; }
.ke-rundown__body p { margin: .2rem 0 0; font-size: .86rem; color: var(--ke-cream); }

/* story: Roman numerals, arched photos alternating, text-only chapters as midnight cards */
.ke-story__list { position: relative; display: grid; gap: 2.6rem; max-width: 24rem; margin: 0 auto; padding: 0; list-style: none; }
.ke-story__item { display: grid; grid-template-columns: 44% minmax(0, 1fr); gap: 1.15rem; align-items: center; text-align: left; }
.ke-story__item--flip { grid-template-columns: minmax(0, 1fr) 44%; }
.ke-story__item--flip .ke-story__media { order: 2; }
.ke-story__media { position: relative; aspect-ratio: .74; overflow: hidden; border-radius: 999px 999px 3px 3px; box-shadow: 0 0 0 4px var(--inv-background), 0 0 0 5px var(--inv-gold), var(--ke-drop); }
.ke-story__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.ke-story__numeral { display: block; font-family: var(--ke-serif); font-weight: 500; font-size: 2.6rem; line-height: 1; color: color-mix(in srgb, var(--inv-primary) 30%, var(--inv-background)); }
.ke-story__when {
    display: inline-block; margin: .45rem 0 .5rem; padding: .25rem .65rem; font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
    color: var(--inv-shine); background: var(--inv-deep);
}
.ke-story__body h3 { margin: 0 0 .35rem; font-family: var(--ke-serif); font-weight: 500; font-size: 1.38rem; line-height: 1.2; color: var(--ke-title); }
.ke-story__body p { margin: 0; font-size: .88rem; color: var(--ke-muted); }
.ke-story__item--text {
    grid-template-columns: 1fr; gap: .2rem; padding: 1.7rem 1.4rem 1.6rem; text-align: center; color: var(--inv-background);
    background: radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--inv-primary) 85%, #fff 6%), transparent 75%), var(--inv-deep);
    box-shadow: inset 0 0 0 1px var(--ke-line-dark), inset 0 0 0 5px transparent, inset 0 0 0 6px color-mix(in srgb, var(--inv-shine) 22%, transparent), var(--ke-drop);
}
.ke-story__key { width: 6.5rem; margin: 0 auto .3rem; }
.ke-story__item--text .ke-story__numeral { color: var(--inv-shine); }
.ke-story__item--text .ke-story__when { color: var(--inv-deep); background: var(--inv-shine); }
.ke-story__item--text h3 { color: #fff; }
.ke-story__item--text p { color: var(--ke-cream); }

/* gallery: the first photo an arched doorway over two rows; thin gold lines */
.ke-gallery .inv-gallery { gap: .6rem; }
.ke-gallery .inv-gallery__item { border-radius: 3px; box-shadow: 0 0 0 1px var(--ke-line-dark), 0 16px 28px -18px rgb(0 0 0 / .8); }
.ke-gallery .inv-gallery__item:first-child { grid-row: span 2; aspect-ratio: auto; border-radius: 999px 999px 3px 3px; box-shadow: 0 0 0 3px var(--inv-deep), 0 0 0 4px var(--inv-shine), 0 16px 28px -18px rgb(0 0 0 / .8); }

/* live streaming: a midnight card with a gold medallion */
.ke-stream__card {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem 1rem; max-width: 24rem; margin: 0 auto;
    padding: 1.6rem 1.4rem 1.5rem; color: var(--inv-background); text-align: left;
    background: radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--inv-primary) 90%, #fff 8%), transparent 70%), var(--inv-deep);
    box-shadow: inset 0 0 0 1px var(--ke-line-dark), inset 0 0 0 5px transparent, inset 0 0 0 6px color-mix(in srgb, var(--inv-shine) 22%, transparent), var(--ke-drop);
}
.ke-stream__icon { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; color: var(--inv-deep); background: var(--ke-leaf) center / 160px auto, var(--ke-foil-grad); box-shadow: 0 0 0 3px var(--inv-deep), 0 0 0 4px var(--ke-line-dark); }
.ke-stream__icon .ke-icon { width: 1.7rem; height: 1.7rem; }
.ke-stream__eyebrow { margin: 0 0 .1rem !important; font-size: .58rem !important; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-shine) !important; }
.ke-stream__title { margin: 0 0 .2rem; font-family: var(--ke-serif); font-weight: 500; font-size: 1.6rem; line-height: 1.1; color: #fff; }
.ke-stream__text p { margin: 0; font-size: .86rem; color: var(--ke-cream); }
.ke-stream__text .ke-stream__note { margin-top: .3rem; font-weight: 600; color: var(--inv-shine); }
.ke-stream__button { grid-column: 1 / -1; min-height: 2.75rem; border-radius: 999px; color: var(--inv-deep) !important; background: var(--inv-shine) !important; font-weight: 600; letter-spacing: .06em; }

/* RSVP: an engraved ivory card sealed with a gold key seal */
.ke-rsvp__card { max-width: 24rem; margin: 3.2rem auto 0; padding: 3.3rem 1.2rem 1.5rem; --ke-corner: var(--inv-gold); }
.ke-rsvp__card > :not(.ke-corners) { position: relative; z-index: 1; }
.ke-rsvp__seal { position: absolute !important; left: 50%; top: -2.5rem; width: 5rem; margin-left: -2.5rem; }
.ke-rsvp__intro { margin: 0 auto 1.1rem; max-width: 30ch; font-size: .9rem; color: var(--ke-muted); }
.ke-rsvp__sent { margin-bottom: 1rem; }
.ke-rsvp__check { display: block; width: 4rem; height: 4rem; margin: 0 auto .5rem; }
.ke-rsvp__check circle { fill: var(--inv-primary); }
.ke-rsvp__check path { fill: none; stroke: var(--inv-shine); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.ke-rsvp__thanks { margin: 0; font-family: var(--ke-serif); font-weight: 500; font-size: 1.75rem; color: var(--ke-title); }
.ke-rsvp__line { margin: .1rem 0 0; font-size: .9rem; color: var(--ke-muted); }
.ke-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .84rem; font-weight: 600; color: var(--inv-primary); }

/* wishes: the form on an engraved card with a midnight block behind, the wishes in a scroll box */
.ke-wishes .inv-wishes { --inv-wishes-height: 20rem; max-width: 24rem; margin: 0 auto; }
.ke-wishes .inv-form {
    margin-right: 8px; padding: 1.4rem 1.15rem; background: var(--ke-paper);
    box-shadow: inset 0 0 0 1px var(--ke-line), inset 0 0 0 5px transparent, inset 0 0 0 6px var(--ke-line-soft), 8px 8px 0 0 var(--inv-deep);
}
.ke-wishes .inv-wishes__list { margin-top: 1.5rem; }
.ke-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list { padding: .55rem; background: color-mix(in srgb, #fff 45%, transparent); box-shadow: inset 0 0 0 1px var(--ke-line-soft); }
.ke-wishes .inv-wish { padding: .75rem .9rem; background: #fff; text-align: left; box-shadow: 0 2px 10px rgb(0 0 0 / .05); border-left: 3px solid var(--inv-gold); }
.ke-wishes .inv-wish__name { font-family: var(--ke-serif); font-weight: 600; color: var(--ke-title); }
.ke-wishes .inv-wish__message { font-size: .88rem; line-height: 1.5; }
.ke-wishes .inv-wish__time { font-size: .72rem; color: var(--ke-muted); }

/* gift: ivory cards with a gold top rule and a small key mark, two per row; the address below */
.ke-gift__intro { color: var(--ke-cream); }
.ke-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; max-width: 24rem; margin: 1.4rem auto 0; }
.ke-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ke-gift .inv-gift__account,
.ke-gift .inv-gift__address {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; margin: 0; overflow: hidden;
    padding: 1.75rem .75rem 1rem; color: var(--inv-text);
    background: linear-gradient(color-mix(in srgb, var(--ke-paper) 88%, transparent), color-mix(in srgb, var(--ke-paper) 88%, transparent)), var(--ke-marble) center / 420px auto, var(--ke-paper);
    box-shadow: inset 0 3px 0 var(--inv-gold), inset 0 0 0 1px var(--ke-line-soft), 0 18px 30px -20px rgb(0 0 0 / .7);
}
.ke-gift .inv-gift__account::before, .ke-gift .inv-gift__address::before {
    content: ''; position: absolute; top: .55rem; left: 50%; width: 2.2rem; height: .8rem; margin-left: -1.1rem; background: var(--inv-gold);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M14 8h28M34 8v6M39 8v4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%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 44 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M14 8h28M34 8v6M39 8v4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ke-gift .inv-gift__account p, .ke-gift .inv-gift__address p { margin: 0; }
.ke-gift .inv-gift__bank { font-weight: 600; font-size: .85rem; letter-spacing: .06em; color: var(--ke-title); }
.ke-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .3rem; background: #fff; }
.ke-gift .inv-gift__logo img { max-width: 5rem; }
.ke-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); }
.ke-gift .inv-gift__holder { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ke-muted); overflow-wrap: anywhere; }
.ke-gift .inv-button { margin-top: .35rem; min-height: 2.25rem; padding: .35rem .95rem; border-radius: 999px; font-size: .74rem; font-weight: 600; }
.ke-gift .inv-gift__address { max-width: 24rem; margin: .75rem auto 0; font-size: .875rem; box-shadow: inset 0 3px 0 var(--inv-gold), inset 0 0 0 1px var(--ke-line-soft), 8px 8px 0 0 color-mix(in srgb, var(--inv-shine) 30%, transparent); }
.ke-gift .inv-gift__address .inv-gift__holder { font-size: .72rem; }

/* co-hosts: the names in the Didone on an engraved card, split by small gold diamonds */
.ke-cohosts__card { max-width: 22rem; margin: 0 auto; padding: 1.9rem 1.2rem; }
.ke-cohosts__list { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.ke-cohosts__list li { max-width: 24ch; font-family: var(--ke-serif); font-weight: 500; font-size: 1.28rem; line-height: 1.3; color: var(--ke-title); }
.ke-cohosts__list li + li::before { content: ''; display: block; width: 7px; height: 7px; margin: 0 auto .65rem; transform: rotate(45deg); background: var(--inv-gold); }

/* contacts (deep): ivory rows with a gold initial medallion and a WhatsApp button */
.ke-contacts__list { display: grid; gap: .75rem; max-width: 24rem; margin: 0 auto; }
.ke-contact {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .75rem .8rem; text-align: left; color: var(--inv-text);
    background: var(--ke-paper); box-shadow: inset 0 0 0 1px var(--ke-line), 0 16px 26px -18px rgb(0 0 0 / .8);
}
.ke-contact__avatar {
    display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 50%; font-family: var(--ke-serif); font-weight: 600; font-size: 1.15rem; color: var(--inv-deep);
    background: var(--ke-leaf) center / 140px auto, var(--ke-foil-grad); box-shadow: 0 0 0 2px var(--ke-paper), 0 0 0 3px var(--inv-gold);
}
.ke-contact__name { margin: 0; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ke-contact__role, .ke-contact__phone { margin: 0; font-size: .8rem; color: var(--ke-muted); }
.ke-contact__button { gap: .35rem; min-height: 2.4rem; padding: .4rem .85rem; border-radius: 999px; font-size: .78rem; font-weight: 600; color: var(--inv-shine); background: var(--inv-deep); }
.ke-contact__button .ke-icon { width: 1rem; height: 1rem; }

/* health protocol: white chips with a check */
.ke-protocol__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; max-width: 24rem; margin: 0 auto; padding: 0; list-style: none; }
.ke-protocol__list li { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 999px; font-size: .85rem; background: #fff; box-shadow: inset 0 0 0 1px var(--ke-line); }
.ke-protocol__list .ke-icon { width: 1rem; height: 1rem; color: var(--inv-primary); }
.ke-protocol__note { margin-top: 1.2rem !important; font-size: .9rem; color: var(--ke-muted); }

/* vendors: a white card of rows split by fine lines */
.ke-vendors__list { max-width: 24rem; margin: 0 auto; padding: .4rem 1.1rem; list-style: none; background: var(--ke-paper); box-shadow: inset 0 0 0 1px var(--ke-line), var(--ke-drop); }
.ke-vendor { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem 0; text-align: left; }
.ke-vendor + .ke-vendor { border-top: 1px solid var(--ke-line-soft); }
.ke-vendor__text { display: flex; flex-direction: column; min-width: 0; }
.ke-vendor__role { font-size: .6rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-primary); }
.ke-vendor__name { font-family: var(--ke-serif); font-weight: 500; font-size: 1.12rem; line-height: 1.3; color: var(--ke-title); overflow-wrap: anywhere; }
.ke-vendor__link { display: inline-flex; flex: none; align-items: center; gap: .3rem; padding: .35rem .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(--ke-line); }
.ke-vendor__link .ke-icon { width: .95rem; height: .95rem; }

/* closing: the full photo fading into the deep colour, the key, the thanks in gold foil, the seal crest */
.ke-closing { padding: 3.2rem 1.6rem 1.9rem; }
.ke-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) 18%, transparent), transparent 60%); pointer-events: none;
}
.ke-closing--photo { padding-top: 0; }
.ke-closing__photo {
    position: relative; z-index: -1; height: min(92vw, 52svh, 23rem); margin: 0 -1.6rem; overflow: hidden;
    /* the foot of the photo melts into the deep colour, without an edge */
    -webkit-mask: linear-gradient(180deg, #000 0, #000 52%, rgb(0 0 0 / .55) 74%, rgb(0 0 0 / .18) 90%, transparent 100%);
    mask: linear-gradient(180deg, #000 0, #000 52%, rgb(0 0 0 / .55) 74%, rgb(0 0 0 / .18) 90%, transparent 100%);
}
.ke-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 22%; --inv-parallax: 30px; }
.ke-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 22%, transparent), transparent 22%, color-mix(in srgb, var(--inv-deep) 40%, transparent) 50%, color-mix(in srgb, var(--inv-deep) 88%, transparent) 70%, var(--inv-deep) 94%);
}
/* a light studio backdrop would turn grey where it fades: a soft tint of the primary keeps it in the palette */
.ke-closing__photo img { filter: saturate(1.05); }
.ke-closing__photo::before { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--inv-primary); mix-blend-mode: multiply; opacity: .18; }
.ke-closing__body { position: relative; }
.ke-closing--photo .ke-closing__body { margin-top: -4.4rem; }
.ke-closing__key { width: 6rem; margin: 0 auto .75rem; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .5)); }
.ke-closing__eyebrow { margin: 0 0 .45rem; font-size: .66rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--inv-shine); }
.ke-closing__title { margin: 0 0 .75rem; font-family: var(--ke-serif); font-weight: 500; font-size: clamp(1.9rem, 8.5vw, 2.4rem); line-height: 1.05; }
.ke-closing__title em { font-style: italic; font-weight: 400; }
.ke-closing__message { margin: 0 auto; max-width: 32ch; font-size: .92rem; line-height: 1.6; color: var(--ke-cream); }
.ke-closing__salam { margin: .8rem auto 0; max-width: 24ch; font-family: var(--ke-serif); font-size: 1.04rem; font-style: italic; line-height: 1.4; color: var(--inv-shine); }
.ke-closing__signature { margin: .75rem auto 0; max-width: 30ch; font-size: .86rem; color: var(--ke-cream); }
.ke-closing__crest { position: relative; margin-top: 1.3rem; }
.ke-closing__crest::before {
    content: ''; position: absolute; z-index: -1; top: 1.75rem; left: -50vw; right: -50vw; height: 1px;
    background: linear-gradient(90deg, transparent, var(--ke-line-dark) 30%, var(--ke-line-dark) 70%, transparent);
}
.ke-closing__seal { width: 3.5rem; margin: 0 auto .5rem; }
.ke-closing__family { margin: 0; font-family: var(--ke-serif); font-weight: 500; font-size: 1.25rem; line-height: 1.3; color: #fff; }

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

/* the three answers as tall arched cards with icons (the radio dot is hidden but still focusable) */
.ke-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.ke-rsvp .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.ke-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: 60px 60px 4px 4px / 34px 34px 4px 4px; cursor: pointer; text-align: center;
    font-size: .82rem; 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-gold) 60%, transparent);
    transition: background-color .25s ease, color .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.ke-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ke-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;
}
.ke-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(--ke-choice-icon) center / contain no-repeat; mask: var(--ke-choice-icon) center / contain no-repeat;
}
.ke-rsvp .inv-form__choices label:nth-of-type(1) {
    --ke-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");
}
.ke-rsvp .inv-form__choices label:nth-of-type(2) {
    --ke-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");
}
.ke-rsvp .inv-form__choices label:nth-of-type(3) {
    --ke-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");
}
.ke-rsvp .inv-form__choices label:has(input:checked) {
    color: var(--inv-shine); background: var(--inv-deep); transform: translateY(-3px);
    box-shadow: 0 0 0 2px var(--inv-shine), 0 12px 24px -12px color-mix(in srgb, var(--inv-deep) 80%, transparent);
}
.ke-rsvp .inv-form__choices label:has(input:checked)::before { background-color: rgb(255 255 255 / .12); transform: scale(1.1); }
.ke-rsvp .inv-form__choices label:has(input:checked)::after { color: var(--inv-shine); }
.ke-rsvp .inv-form__choices label:has(input:focus-visible) { outline: 2px solid var(--inv-gold); outline-offset: 3px; }

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

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

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

/* short phones: the doorway and type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .ke-cover { --door: min(50vw, 12rem, calc(31svh * .72)); padding-top: 1.4rem; padding-bottom: 1.5rem; }
    .ke-cover__key { margin-bottom: .4rem; }
    .ke-cover__text { margin-top: .75rem; }
    .ke-cover__name { font-size: clamp(1.6rem, 7.2vw, 2rem); }
    .ke-cover__quote { font-size: .92rem; }
    .ke-cover__guest { margin-top: .75rem; }
    .ke-cover__open { margin-top: .9rem; }
}
@media (max-height: 660px) {
    .ke-cover { --door: min(46vw, calc(28svh * .72)); padding-top: 1.15rem; padding-bottom: 1.25rem; }
    .ke-cover__title { margin-bottom: .4rem; font-size: .6rem; }
    .ke-cover__key { margin-bottom: .3rem; }
    .ke-cover__text { margin-top: .6rem; }
    .ke-cover__name { font-size: 1.5rem; }
    .ke-cover__date { margin-top: .3rem; font-size: .66rem; }
    .ke-cover__quote { margin-top: .3rem; font-size: .84rem; line-height: 1.32; }
    .ke-cover__guest { margin-top: .6rem; padding: .35rem .85rem .45rem; }
    .ke-cover__guest-name { font-size: 1.05rem; }
    .ke-cover__open { margin-top: .75rem; min-height: 2.75rem; padding: .55rem 1.6rem; }
}
/* very short screens (in-app browsers): a smaller doorway and quote, so everything fits */
@media (max-height: 600px) {
    .ke-cover { --door: min(42vw, calc(25svh * .72)); padding-top: .95rem; }
    .ke-cover__name { font-size: 1.38rem; }
    .ke-cover__quote { font-size: .8rem; line-height: 1.28; -webkit-line-clamp: 3; }
}

/* wide screens: the phone-width column on a midnight backdrop with marble veins */
@media (min-width: 560px) {
    body.ke-body {
        background:
            radial-gradient(70vw 60vh at 50% 0%, color-mix(in srgb, var(--inv-primary) 60%, transparent), transparent 70%),
            var(--inv-deep);
        background-attachment: fixed;
    }
    body.ke-body::before {
        content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .08;
        background: var(--ke-veins) center / 700px auto;
    }
    .ke-main { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
}

/* ---------- 9. motion ---------- */
@keyframes ke-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ke-bounce { 0% { transform: scale(0); } 55% { transform: scale(1.15); } 75% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes ke-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ke-zoom-out { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes ke-key-in { 0% { opacity: 0; transform: translateX(-18px); } 70% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes ke-glint { 0%, 100% { filter: drop-shadow(0 6px 10px rgb(0 0 0 / .45)) brightness(1); } 50% { filter: drop-shadow(0 6px 10px rgb(0 0 0 / .45)) brightness(1.35); } }
@keyframes ke-rise { from { opacity: 0; transform: scaleY(.86); } to { opacity: 1; transform: none; } }
@keyframes ke-door-left { 0% { transform: rotateY(0); opacity: 1; } 85% { opacity: 1; } 100% { transform: rotateY(-102deg); opacity: 0; visibility: hidden; } }
@keyframes ke-door-right { 0% { transform: rotateY(0); opacity: 1; } 85% { opacity: 1; } 100% { transform: rotateY(102deg); opacity: 0; visibility: hidden; } }
@keyframes ke-part-left { from { transform: translateX(5px) rotate(0); } to { transform: translateX(-4px) rotate(-2.5deg); } }
@keyframes ke-part-right { from { transform: translateX(-5px) rotate(0); } to { transform: translateX(4px) rotate(2.5deg); } }
@keyframes ke-snip { 0% { transform: translateY(-6px); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes ke-turn { from { transform: rotate(0); } to { transform: rotate(90deg); } }
@keyframes ke-press { 0% { transform: scale(1); } 40% { transform: scale(.86); } 70% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* cover (≤ 2.5 s, once): the columns rise and the doorway fades up (0–.8 s), the double door swings open
   (.35–1.65 s) while the photo settles from a slight zoom, the key slides in (.2–1.1 s) and glints once
   (1.5 s); the text follows through its inv-enter delays (1.0–1.45 s) */
html.inv-anim .ke-portal { animation: ke-fade-up .8s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .ke-portal__column { transform-origin: bottom; animation: ke-rise .8s cubic-bezier(.2, .7, .2, 1) .1s both; }
html.inv-anim .ke-portal__leaf { display: block; }
html.inv-anim .ke-portal__leaf--left { animation: ke-door-left 1.3s cubic-bezier(.55, .05, .3, 1) .35s both; }
html.inv-anim .ke-portal__leaf--right { animation: ke-door-right 1.3s cubic-bezier(.55, .05, .3, 1) .35s both; }
html.inv-anim .ke-portal__photo { animation: ke-zoom-out 1.8s cubic-bezier(.2, .7, .2, 1) .2s both; }
html.inv-anim .ke-cover__key { animation: ke-key-in .9s cubic-bezier(.2, .7, .2, 1) .2s both, ke-glint .8s ease-in-out 1.4s both; }

/* the ribbon: joined until the section part is revealed, then the halves part and droop (once) */
html.inv-anim .ke-ribbon__half--left { transform: translateX(5px) rotate(0); }
html.inv-anim .ke-ribbon__half--right { transform: translateX(-5px) rotate(0); }
html.inv-anim .ke-ribbon__scissors { opacity: 0; }
html.inv-anim :is(.is-revealed .ke-ribbon, .ke-ribbon.is-revealed) .ke-ribbon__scissors { animation: ke-snip .6s ease-out .2s both; }
html.inv-anim :is(.is-revealed .ke-ribbon, .ke-ribbon.is-revealed) .ke-ribbon__half--left { animation: ke-part-left .9s cubic-bezier(.3, .8, .3, 1) .75s both; }
html.inv-anim :is(.is-revealed .ke-ribbon, .ke-ribbon.is-revealed) .ke-ribbon__half--right { animation: ke-part-right .9s cubic-bezier(.3, .8, .3, 1) .75s both; }

/* the dial lock: the key turns a quarter once when it is revealed */
html.inv-anim .ke-lock__turn { transform: rotate(0); }
html.inv-anim :is(.is-revealed .ke-lock__turn, .ke-lock.is-revealed .ke-lock__turn) { animation: ke-turn 1.1s cubic-bezier(.5, 0, .25, 1) .45s both; }

/* the closing key glints once; the RSVP seal presses once after sending */
html.inv-anim :is(.is-revealed.ke-closing__key, .is-revealed .ke-closing__key) { animation: ke-glint 1s ease-in-out .4s both; }
html.inv-anim .ke-rsvp__card--sent .ke-rsvp__seal { animation: ke-press .7s cubic-bezier(.34, 1.56, .64, 1) both; }
html.inv-anim .ke-rsvp__sent .ke-rsvp__check { animation: ke-bounce .8s cubic-bezier(.34, 1.56, .64, 1) both; }
html.inv-anim .ke-rsvp__sent .ke-rsvp__check path { animation: ke-draw .45s ease-out .35s both; }

/* scroll-drawn details (the default, without support, is the finished drawing) */
@supports (animation-timeline: view()) {
    @keyframes ke-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    html.inv-anim .ke-rundown__list::before { animation: ke-grow linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; }
}

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

/* ---------- 10. intro scene "Pintu Agung Kunci Emas" (scene.json + sections/_scene; the intro lives in <body>) ---------- */
.ke-scene-marble { position: absolute; inset: 0; isolation: isolate; background:
    radial-gradient(60% 36% at 50% 46%, color-mix(in srgb, var(--inv-shine) 14%, transparent), transparent 72%),
    radial-gradient(90% 55% at 50% 30%, color-mix(in srgb, var(--inv-primary) 90%, transparent), transparent 78%),
    linear-gradient(180deg, transparent 72%, color-mix(in srgb, var(--inv-shine) 10%, transparent) 80%, transparent 96%),
    var(--inv-deep); }
.ke-scene-marble::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .1; background: var(--ke-veins) center / 700px auto; }
.ke-scene-marble::after { content: ''; position: absolute; inset: .65rem; border: 1px solid color-mix(in srgb, var(--inv-shine) 40%, transparent); outline: 1px solid color-mix(in srgb, var(--inv-shine) 16%, transparent); outline-offset: -5px; }

/* the marble floor before the steps (fading into the night) with a Greek-key band, and the doorway's light on it */
.ke-scene-floor { position: absolute; inset: 0; isolation: isolate; background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 60%, var(--inv-deep)), var(--inv-deep) 88%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--inv-shine) 35%, transparent); }
.ke-scene-floor::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .16; background: var(--ke-veins) center top / 520px auto; }
.ke-scene-floor span { position: absolute; left: 0; right: 0; top: 52%; height: 12px; background: color-mix(in srgb, var(--inv-shine) 55%, transparent); -webkit-mask: var(--ke-meander) left center / 18px 12px repeat-x; mask: var(--ke-meander) left center / 18px 12px repeat-x; }
.ke-scene-spill { position: absolute; inset: 0; background: radial-gradient(50% 70% at 50% 0%, color-mix(in srgb, var(--inv-shine) 42%, transparent), transparent 100%); }
.ke-scene-glow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-shine) 55%, transparent), color-mix(in srgb, var(--inv-shine) 18%, transparent) 60%, transparent); }
.ke-scene-glow__photo { position: absolute; inset: 8% 14%; border-radius: 50%; background: center 30% / cover no-repeat; opacity: .55; -webkit-mask: radial-gradient(closest-side, #000 40%, transparent); mask: radial-gradient(closest-side, #000 40%, transparent); }

.ke-scene-cornice { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.ke-scene-cornice .ke-portal__cornice { width: 100%; }
.ke-scene-cornice__meander { display: block; height: 10px; background: color-mix(in srgb, var(--inv-shine) 50%, transparent); -webkit-mask: var(--ke-meander) left center / 15px 10px repeat-x; mask: var(--ke-meander) left center / 15px 10px repeat-x; }

.ke-scene-column { height: 100%; color: var(--inv-shine); filter: drop-shadow(0 14px 18px rgb(0 0 0 / .45)); }
.ke-scene-column .ke-column { height: 100%; }

/* the closed double door: panelled leaves (the left one rounded on the upper left, the right one on the upper right) */
.ke-scene-door { position: absolute; inset: 0; border-radius: 100% 0 0 0 / 34% 0 0 0;
    background:
        linear-gradient(color-mix(in srgb, var(--inv-shine) 50%, transparent), color-mix(in srgb, var(--inv-shine) 50%, transparent)) 50% 30% / 62% 1px no-repeat,
        linear-gradient(color-mix(in srgb, var(--inv-shine) 50%, transparent), color-mix(in srgb, var(--inv-shine) 50%, transparent)) 50% 74% / 62% 1px no-repeat,
        linear-gradient(160deg, color-mix(in srgb, var(--inv-primary) 85%, #fff 6%), var(--inv-deep));
    box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--inv-deep) 60%, transparent), inset 0 0 0 7px color-mix(in srgb, var(--inv-shine) 50%, transparent), 0 0 0 1.5px var(--inv-shine); }
.ke-scene-door--right { border-radius: 0 100% 0 0 / 0 34% 0 0; }
.ke-scene-door i { position: absolute; top: 52%; right: 10px; width: 5px; height: 2.6rem; border-radius: 3px; background: linear-gradient(180deg, color-mix(in srgb, var(--inv-shine) 60%, #fff), var(--inv-gold)); box-shadow: 0 2px 4px rgb(0 0 0 / .5); }
.ke-scene-door--right i { right: auto; left: 10px; }

.ke-scene-key { height: 100%; display: flex; align-items: center; --ke-key-hole: var(--inv-deep); filter: drop-shadow(0 8px 12px rgb(0 0 0 / .5)); }
.ke-scene-key .ke-key { width: 100%; height: auto; }

.ke-scene-steps { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.ke-scene-steps i { display: block; height: 45%; width: 86%; background: linear-gradient(180deg, color-mix(in srgb, #fff 30%, transparent), transparent), var(--ke-marble) center / 300px auto, var(--inv-background); box-shadow: inset 0 1px 0 var(--inv-shine), 0 4px 8px -4px rgb(0 0 0 / .6); }
.ke-scene-steps i + i { width: 100%; }

/* the name card is the lit arched doorway: deep glass with a gold double arch line and a keystone */
body.ke-body .inv-intro--scene .inv-scene__card {
    top: 47.5%; width: min(64vw, 20rem); height: min(55svh, 32rem); aspect-ratio: auto; padding: 3.2rem 1.3rem 2rem; overflow: visible;
    -webkit-mask: none; mask: none; border-radius: 999px 999px 0 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 34%, transparent), color-mix(in srgb, var(--inv-deep) 50%, transparent) 45%, color-mix(in srgb, var(--inv-deep) 66%, transparent));
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    box-shadow: 0 0 0 3px var(--inv-deep), 0 0 0 4.5px var(--inv-shine), 0 0 60px color-mix(in srgb, var(--inv-shine) 30%, transparent);
    outline: 1px solid var(--ke-line-dark); outline-offset: 9px;
}
body.ke-body .inv-intro--scene .inv-scene__card::before {
    content: ''; position: absolute; left: 50%; top: -.9rem; width: 1.3rem; height: 1.7rem; transform: translateX(-50%);
    clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%);
    background: var(--ke-leaf) center / 120px auto, linear-gradient(180deg, color-mix(in srgb, var(--inv-shine) 60%, #fff), var(--inv-gold));
}
body.ke-body .inv-scene__card .inv-intro__label { margin-bottom: .9rem; font: 600 .62rem/1.4 var(--ke-sans); letter-spacing: .3em; color: var(--inv-shine); }
body.ke-body .inv-scene__card .inv-intro__names { font-family: var(--ke-serif) !important; font-weight: 500; font-size: clamp(1.6rem, 7.4vw, 2.2rem); line-height: 1.12; color: var(--inv-shine); text-wrap: balance; text-shadow: 0 2px 16px rgb(0 0 0 / .55); }
body.ke-body .inv-scene__card .inv-intro__rule { width: 5rem; background: linear-gradient(90deg, transparent, var(--inv-shine), transparent); }
body.ke-body .inv-scene__card .inv-intro__date { font: 500 .7rem/1.4 var(--ke-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ke-cream); }
body.ke-body .inv-intro--scene .inv-intro__skip { background: color-mix(in srgb, var(--inv-deep) 70%, transparent); border-color: var(--ke-line-dark); color: var(--inv-shine); }