/*
 * Template "Khitbah Syar'i" (Lamaran & Tunangan): calm, dignified, complete without any couple photo.
 * Warm ivory + a deep teal (by default) + a muted gold. Typography and Islamic geometric ornament lead:
 * the monogram medallion (sections/_medallion), the eight-point star (sections/_star), the big girih
 * rosette (sections/_rosette), pointed-arch crowns (sections/_arch), a faint khatam lattice and a star
 * ribbon. Photos the client fills in stay small (round seals, small arch windows). Mobile-first, one
 * column (~460px) on a deep backdrop on wide screens.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (teal / olive / indigo / date red: names, titles, buttons)
 *   --inv-accent (muted gold: lines, stars, rims)   --inv-background (warm ivory)   --inv-text
 *   --inv-deep (the deep bands)   --inv-shine (light gold on dark)   --inv-soft (a pale tint of the primary)
 * Everything else is mixed from those, so a new variant only needs these seven colours.
 *
 * Section tones (set on each section in its partial): .ks-tone--light (ivory), --paper (a warmer ivory),
 * --deep (the deep band), --gold (a muted gold band). Light and deep alternate.
 *
 * Motion only runs with html.inv-anim (set by <x-inv.head> unless the guest prefers reduced motion);
 * without it everything is shown finished.
 *
 * Contents: 1 base · 2 section tones & photo backgrounds · 3 shared pieces (heading, star, medallion,
 *           rosette, arch, seal, ribbon, pill) · 4 cover · 5 sections in page order · 6 forms ·
 *           7 shared components · 8 screen sizes · 9 motion
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Teal Emas" variant (the variant's colours override these) */
    --inv-primary: #0f5452;
    --inv-accent: #b8955a;
    --inv-background: #f8f3e8;
    --inv-text: #16292a;
    --inv-deep: #0a3837;
    --inv-shine: #e8d3a0;
    --inv-soft: #d7e6df;
    --inv-radius: 14px;

    --ks-title: 'Marcellus', 'Cormorant Garamond', Georgia, serif;
    --ks-serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
    --ks-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ks-col: 460px;
    --ks-paper: color-mix(in srgb, #fff 62%, var(--inv-background));
    --ks-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    --ks-ivory-muted: color-mix(in srgb, var(--inv-background) 86%, transparent);
    --ks-gold-ink: color-mix(in srgb, var(--inv-accent) 58%, var(--inv-deep));
    --ks-line: color-mix(in srgb, var(--inv-accent) 60%, transparent);
    --ks-panel: color-mix(in srgb, var(--inv-primary) 78%, var(--inv-deep));
    --ks-drop: 0 24px 44px -26px color-mix(in srgb, var(--inv-deep) 80%, transparent);
    /* the deep bands: a soft light from the upper left on the deep colour */
    --ks-deep-bg:
        radial-gradient(110% 60% at 15% 0%, color-mix(in srgb, var(--inv-primary) 85%, transparent), transparent 70%),
        radial-gradient(90% 55% at 100% 100%, color-mix(in srgb, var(--inv-primary) 55%, transparent), transparent 75%),
        var(--inv-deep);

    /* the khatam lattice: eight-point stars joined by strapwork (a mask, so it takes any colour) */
    --ks-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1' d='M28 16L31.51 19.51L36.49 19.51L36.49 24.49L40 28L36.49 31.51L36.49 36.49L31.51 36.49L28 40L24.49 36.49L19.51 36.49L19.51 31.51L16 28L19.51 24.49L19.51 19.51L24.49 19.51ZM28 16V0M28 40V56M16 28H0M40 28H56M19.51 19.51L0 0M36.49 19.51L56 0M36.49 36.49L56 56M19.51 36.49L0 56'/%3E%3C/svg%3E");
    /* a ribbon of small stars on a hairline */
    --ks-ribbon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='14' viewBox='0 0 22 14'%3E%3Cpath d='M11 2L12.46 3.46L14.54 3.46L14.54 5.54L16 7L14.54 8.46L14.54 10.54L12.46 10.54L11 12L9.54 10.54L7.46 10.54L7.46 8.46L6 7L7.46 5.54L7.46 3.46L9.54 3.46Z'/%3E%3Cpath d='M0 6.5h4.6v1H0zM17.4 6.5H22v1h-4.6z'/%3E%3C/svg%3E");
    /* a pointed-arch window (photos keep a fixed aspect ratio, so the mask never stretches badly) */
    --ks-arch-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200V62C0 38 96 15 150 0C204 15 300 38 300 62V200Z'/%3E%3C/svg%3E");
    --ks-star-clip: polygon(50% 0%, 64.64% 14.64%, 85.36% 14.64%, 85.36% 35.36%, 100% 50%, 85.36% 64.64%, 85.36% 85.36%, 64.64% 85.36%, 50% 100%, 35.36% 85.36%, 14.64% 85.36%, 14.64% 64.64%, 0% 50%, 14.64% 35.36%, 14.64% 14.64%, 35.36% 14.64%);

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

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

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

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

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

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

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

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

/* light: warm ivory with a pale glow of the primary tint and the faint lattice */
.ks-tone--light {
    background:
        radial-gradient(70% 30% at 100% 0%, color-mix(in srgb, var(--inv-soft) 70%, transparent), transparent 75%),
        radial-gradient(70% 30% at 0% 100%, color-mix(in srgb, var(--inv-accent) 16%, transparent), transparent 75%),
        var(--inv-background);
}
/* paper: a warmer ivory, a touch of gold */
.ks-tone--paper {
    background:
        radial-gradient(80% 40% at 50% 0%, color-mix(in srgb, #fff 50%, transparent), transparent 75%),
        color-mix(in srgb, var(--inv-accent) 13%, var(--inv-background));
}
.ks-tone--light::before, .ks-tone--paper::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-primary); opacity: .065;
    -webkit-mask: var(--ks-lattice) center top / 56px 56px repeat; mask: var(--ks-lattice) center top / 56px 56px repeat;
}

/* deep: the deep band with the lattice in gold */
.ks-tone--deep { color: var(--inv-background); background: var(--ks-deep-bg); }
.ks-tone--deep::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-accent); opacity: .13;
    -webkit-mask: var(--ks-lattice) center top / 56px 56px repeat; mask: var(--ks-lattice) center top / 56px 56px repeat;
}
.ks-tone--deep a:not(.inv-button) { color: var(--inv-shine); }
.ks-tone--deep .ks-arabic { color: var(--inv-shine); }

/* gold: a muted gold band */
.ks-tone--gold {
    color: var(--inv-deep);
    background:
        radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, #fff 40%, transparent), transparent 75%),
        linear-gradient(160deg, color-mix(in srgb, var(--inv-accent) 62%, #fff), color-mix(in srgb, var(--inv-accent) 92%, #fff));
}
.ks-tone--gold::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-deep); opacity: .1;
    -webkit-mask: var(--ks-lattice) center top / 56px 56px repeat; mask: var(--ks-lattice) center top / 56px 56px repeat;
}

/* an event photo behind a section, under a strong gradient of the deep colour */
.ks-bgphoto { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.ks-bgphoto img { display: block; width: 100%; height: calc(100% + 80px); margin-top: -40px; object-fit: cover; object-position: center 40%; filter: saturate(.75); --inv-parallax: 40px; }
.ks-bgphoto::after { content: ''; position: absolute; inset: 0; }
.ks-tone--deep .ks-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) 80%, transparent) 45%,
            color-mix(in srgb, var(--inv-deep) 94%, transparent));
}

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

/* section heading: an eyebrow, a Marcellus title (last word italic serif), a star between two lines */
.ks-heading { margin: 0 0 2.1rem; }
.ks-heading--left { text-align: left; }
.ks-heading__eyebrow {
    margin: 0 0 .6rem; font-size: .7rem; font-weight: 600; line-height: 1.25; letter-spacing: .26em; text-transform: uppercase; color: var(--ks-gold-ink);
}
.ks-heading__title {
    margin: 0; font-family: var(--ks-title); font-size: 2.3rem; font-weight: 400; line-height: 1.1; letter-spacing: .005em; color: var(--inv-primary);
}
.ks-heading__title em { font-family: var(--ks-serif); font-style: italic; font-weight: 500; font-size: 1.12em; color: var(--ks-gold-ink); }
.ks-heading__rule { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: .85rem; }
.ks-heading__rule::before, .ks-heading__rule::after { content: ''; width: 3rem; height: 1px; background: var(--ks-line); }
.ks-heading__star { width: .95rem; height: .95rem; color: var(--inv-accent); }
.ks-heading--left .ks-heading__rule { justify-content: flex-start; }
.ks-heading--left .ks-heading__rule::before { display: none; }

.ks-tone--deep .ks-heading__eyebrow { color: var(--inv-shine); }
.ks-tone--deep .ks-heading__title { color: #fff; }
.ks-tone--deep .ks-heading__title em { color: var(--inv-shine); }
.ks-tone--gold .ks-heading__eyebrow, .ks-tone--gold .ks-heading__title, .ks-tone--gold .ks-heading__title em { color: var(--inv-deep); }
.ks-tone--gold .ks-heading__rule::before, .ks-tone--gold .ks-heading__rule::after { background: color-mix(in srgb, var(--inv-deep) 40%, transparent); }
.ks-tone--gold .ks-heading__star { color: var(--inv-deep); }

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

/* the eight-point star */
.ks-star { display: block; flex: none; overflow: visible; }
.ks-star__inner { stroke: var(--ks-star-line, color-mix(in srgb, #fff 45%, transparent)); }

/* the monogram medallion */
.ks-medallion { --medal-w: 12rem; position: relative; width: var(--medal-w); aspect-ratio: 1; flex: none; }
.ks-medallion__art { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 18px 22px color-mix(in srgb, var(--inv-deep) 40%, transparent)); }
.ks-medallion__disc { fill: var(--ks-paper); }
.ks-medallion__rim { fill: none; stroke: var(--inv-accent); stroke-width: 2.4; }
.ks-medallion__rim-fine { fill: none; stroke: var(--ks-line); stroke-width: .7; }
.ks-medallion__rosette { fill: none; stroke: var(--inv-accent); stroke-width: 1.1; stroke-linejoin: round; }
.ks-medallion__star-fill { fill: var(--ks-panel); stroke: var(--inv-accent); stroke-width: 2.4; stroke-linejoin: round; }
.ks-medallion__square { fill: none; stroke: var(--inv-shine); stroke-width: .8; stroke-linejoin: round; opacity: .5; }
.ks-medallion__core { fill: var(--inv-deep); stroke: var(--inv-accent); stroke-width: 1.3; }
.ks-medallion__beads circle { fill: var(--inv-accent); }
.ks-medallion__letters {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--medal-w) * .015); margin: 0;
    font-family: var(--ks-serif); font-style: italic; font-weight: 600; font-size: calc(var(--medal-w) * .2); line-height: 1; color: var(--inv-shine);
    padding-bottom: calc(var(--medal-w) * .02);
}
.ks-medallion__letters--many { font-size: calc(var(--medal-w) * .14); }
.ks-medallion__dot { width: calc(var(--medal-w) * .055); height: calc(var(--medal-w) * .055); margin-top: calc(var(--medal-w) * .04); color: var(--inv-accent); --ks-star-line: transparent; }

/* the big girih rosette (a faint line) */
.ks-rosette { position: absolute; z-index: -1; display: block; pointer-events: none; overflow: visible; }

/* pointed-arch crown (sections/_arch) */
.ks-arch { display: block; width: 100%; aspect-ratio: 300 / 64; overflow: visible; }
.ks-arch__fill { fill: var(--arch-fill, var(--ks-paper)); }
.ks-arch__line { stroke: var(--arch-line, var(--ks-line)); stroke-width: 1; }

/* the round seal: a small photo in a gold ring, or the initial in a star */
.ks-seal { --seal-w: 4.4rem; position: relative; display: grid; place-items: center; width: var(--seal-w); height: var(--seal-w); margin: 0; flex: none; }
.ks-seal--photo { border-radius: 50%; box-shadow: 0 0 0 3px var(--ks-paper), 0 0 0 4.5px var(--inv-accent), 0 12px 20px -10px color-mix(in srgb, var(--inv-deep) 70%, transparent); }
.ks-seal__photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 30%; }
.ks-seal__star { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--inv-accent); filter: drop-shadow(0 8px 10px color-mix(in srgb, var(--inv-deep) 35%, transparent)); --ks-star-line: color-mix(in srgb, #fff 55%, transparent); }
.ks-seal__initial { position: relative; font-family: var(--ks-serif); font-style: italic; font-weight: 600; font-size: calc(var(--seal-w) * .42); line-height: 1; color: var(--inv-deep); }

/* a ribbon of small stars on a hairline */
.ks-ribbon {
    display: block; height: 14px; background: var(--inv-accent);
    -webkit-mask: var(--ks-ribbon) center / 22px 14px repeat-x; mask: var(--ks-ribbon) center / 22px 14px repeat-x;
}

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

/* ---------- 4. cover ---------- */
.ks-cover {
    --medal: min(60vw, 15rem, 33svh);
    position: fixed; inset: 0; z-index: 30; overflow-x: hidden; overflow-y: auto;
    isolation: isolate; color: var(--inv-text);
    background:
        radial-gradient(60% 26% at 100% 100%, color-mix(in srgb, var(--inv-accent) 18%, transparent), transparent 75%),
        radial-gradient(60% 26% at 0% 70%, color-mix(in srgb, var(--inv-soft) 70%, transparent), transparent 75%),
        var(--inv-background);
    transition: opacity .9s ease;
}
.ks-cover::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07; background: var(--inv-primary);
    -webkit-mask: var(--ks-lattice) center top / 56px 56px repeat; mask: var(--ks-lattice) center top / 56px 56px repeat;
}

/* the one wrapper: a column as tall as the screen, the band takes the free height */
.ks-cover__inner { display: flex; flex-direction: column; align-items: stretch; min-height: 100svh; padding: 0 0 1.8rem; }

/* the deep band at the top: the rosette, the title, and the medallion sitting on its lower edge (the deep
   colour stops half a medallion above the bottom of this block, so the medallion is half on it) */
.ks-cover__sky {
    --sky-cut: calc(var(--medal) * .5);
    position: relative; isolation: isolate; flex: 1 0 auto; display: flex; flex-direction: column; align-items: center;
    padding: 2.1rem 1.4rem 0; color: var(--inv-background);
    background:
        radial-gradient(110% 60% at 15% 0%, color-mix(in srgb, var(--inv-primary) 85%, transparent), transparent 70%),
        radial-gradient(90% 55% at 100% 100%, color-mix(in srgb, var(--inv-primary) 55%, transparent), transparent 75%),
        linear-gradient(var(--inv-deep), var(--inv-deep));
    background-size: 100% calc(100% - var(--sky-cut)); background-repeat: no-repeat;
    transition: transform .9s cubic-bezier(.5, 0, .3, 1);
}
.ks-cover__sky::before {
    content: ''; position: absolute; inset: 0 0 var(--sky-cut); z-index: -1; pointer-events: none; opacity: .14; background: var(--inv-accent);
    -webkit-mask: var(--ks-lattice) center bottom / 56px 56px repeat; mask: var(--ks-lattice) center bottom / 56px 56px repeat;
}
.ks-cover__rosette { left: 50%; bottom: var(--sky-cut); width: calc(var(--medal) * 2.7); transform: translate(-50%, 50%); clip-path: inset(0 0 50% 0); color: color-mix(in srgb, var(--inv-shine) 30%, transparent); }
.ks-cover__title {
    display: inline-flex; align-items: center; gap: .7rem; margin: 0;
    font-family: var(--ks-title); font-size: .86rem; line-height: 1.2; letter-spacing: .38em; text-transform: uppercase; color: var(--inv-shine);
}
.ks-cover__title span { margin-right: -.38em; }
.ks-cover__title .ks-star { width: .85rem; height: .85rem; color: var(--inv-accent); }
.ks-cover__ribbon { position: absolute; left: 0; right: 0; bottom: calc(var(--sky-cut) - 7px); z-index: 1; }
.ks-cover__medal { position: relative; z-index: 2; margin-top: auto; padding-top: 1.4rem; }
.ks-medallion--cover { --medal-w: var(--medal); }
/* the cover photo, when there is one: a small seal at the medallion's lower right */
.ks-seal--cover { --seal-w: calc(var(--medal) * .27); position: absolute; right: -4%; bottom: 2%; z-index: 3; }

.ks-cover__body {
    display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; margin: 0 auto; text-align: center;
    padding: 1rem 1.4rem 0;
    transition: transform .9s cubic-bezier(.5, 0, .3, 1);
}
.ks-cover__names {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .28em; margin: 0;
    font-family: var(--ks-serif); font-style: italic; font-weight: 600; font-size: 3.1rem; line-height: 1.02; letter-spacing: -.01em;
    color: var(--inv-primary); overflow-wrap: anywhere;
}
.ks-cover__amp { font-weight: 500; font-size: .78em; color: var(--ks-gold-ink); }
.ks-cover__date {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem; margin: .7rem 0 0;
    font-family: var(--ks-title); font-size: .84rem; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--inv-text);
}
.ks-cover__date .ks-star { width: .7rem; height: .7rem; color: var(--inv-accent); --ks-star-line: transparent; }
.ks-cover__date i { width: 1px; height: .9rem; background: var(--ks-line); }
.ks-cover__quote {
    max-width: 30ch; margin: .75rem 0 0; font-family: var(--ks-serif); font-style: italic; font-weight: 500;
    font-size: 1.08rem; line-height: 1.35; color: var(--ks-muted);
}
.ks-cover__guest {
    position: relative; width: min(100%, 19rem); margin: 1.25rem 0 0; padding: .65rem 1rem .6rem; border-radius: 4px;
    background: color-mix(in srgb, #fff 78%, transparent);
    box-shadow: inset 0 0 0 4px color-mix(in srgb, #fff 78%, transparent), inset 0 0 0 5px var(--ks-line), 0 10px 22px -16px color-mix(in srgb, var(--inv-deep) 60%, transparent);
}
/* a small gold star sitting on the box's top edge */
.ks-cover__guest::before {
    content: ''; position: absolute; left: 50%; top: -.5rem; width: 1rem; height: 1rem; margin-left: -.5rem;
    background: var(--inv-accent); clip-path: var(--ks-star-clip);
}
.ks-cover__guest p { margin: 0; font-size: .62rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--ks-gold-ink); }
.ks-cover__guest-name { display: block; font-family: var(--ks-title); font-size: 1.2rem; line-height: 1.25; color: var(--inv-text); overflow-wrap: anywhere; }
.ks-cover__open {
    margin-top: 1.1rem; min-height: 3rem; padding: .7rem 2rem; font-weight: 500; letter-spacing: .06em;
    background: linear-gradient(180deg, var(--inv-primary), var(--inv-deep)); color: #fff;
    box-shadow: 0 0 0 3px var(--inv-background), 0 0 0 4px var(--inv-accent), 0 14px 24px -12px color-mix(in srgb, var(--inv-primary) 80%, transparent);
}

/* opening: the cover fades; the band lifts and the body sinks a little */
.ks-cover--leave { transition: opacity .9s ease .1s; }
.ks-cover--gone { opacity: 0; }
.ks-cover--gone .ks-cover__sky { transform: translateY(-2rem); }
.ks-cover--gone .ks-cover__body { transform: translateY(1.5rem); }

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

/* opening: the rosette rising from the bottom, basmalah, greeting, message, the verse in an arch window */
.ks-opening { padding: 4.6rem 1.6rem 4.8rem; }
/* (section children are revealed with transform + opacity, so the rosettes are centred with margins and made faint by their colour) */
.ks-opening__rosette { left: 50%; bottom: -13rem; width: 30rem; margin-left: -15rem; color: color-mix(in srgb, var(--inv-shine) 14%, transparent); }
.ks-opening__star { width: 2rem; height: 2rem; margin: 0 auto 1rem; color: var(--inv-accent); }
.ks-opening__basmalah { margin: 0 auto .7rem !important; font-size: 2rem; }
.ks-opening__greeting { max-width: 22ch !important; font-family: var(--ks-title); font-size: 1.45rem; line-height: 1.3; color: #fff; }
.ks-opening__message { max-width: 30ch !important; color: var(--ks-ivory-muted); }
.ks-opening__quote { --arch-fill: color-mix(in srgb, var(--inv-deep) 62%, transparent); --arch-line: var(--inv-accent); position: relative; max-width: 22rem; margin: 2.4rem auto 0; }
.ks-opening__quote-body { position: relative; margin-top: -1px; padding: .6rem 1.6rem 1.7rem; background: var(--arch-fill); border-radius: 0 0 6px 6px; }
.ks-opening__quote-body::before {
    content: ''; position: absolute; left: 3%; right: 3%; top: 0; bottom: 9px; border: 1px solid var(--inv-accent); border-top: 0; border-radius: 0 0 3px 3px; pointer-events: none;
}
.ks-opening__quote p { margin: 0; font-family: var(--ks-serif); font-style: italic; font-size: 1.16rem; font-weight: 500; line-height: 1.5; color: #fff; }
.ks-opening__quote cite {
    display: inline-block; margin-top: 1rem; padding: .25rem .85rem; border-radius: 999px; font-style: normal; font-size: .68rem; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase; color: var(--inv-deep); background: var(--inv-shine);
}

/* couple: two pointed-arch name panels (deep, then ivory) joined by a star "&" */
.ks-panel { position: relative; max-width: 21rem; margin: 0 auto; }
.ks-panel__crown { margin-bottom: -1px; }
.ks-panel__body { position: relative; padding: 0 1.4rem 1.9rem; border-radius: 0 0 10px 10px; background: var(--arch-fill); }
.ks-panel__body::before {
    content: ''; position: absolute; left: 3%; right: 3%; top: 0; bottom: 9px; border: 1px solid var(--arch-line); border-top: 0; border-radius: 0 0 5px 5px; pointer-events: none;
}
.ks-panel--deep { --arch-fill: var(--ks-panel); --arch-line: color-mix(in srgb, var(--inv-accent) 75%, transparent); color: var(--inv-background); filter: drop-shadow(0 22px 22px color-mix(in srgb, var(--inv-deep) 30%, transparent)); }
.ks-panel--ivory { --arch-fill: color-mix(in srgb, #fff 80%, var(--inv-background)); --arch-line: var(--ks-line); filter: drop-shadow(0 18px 20px color-mix(in srgb, var(--inv-deep) 16%, transparent)); }
.ks-seal--person { --seal-w: 4.2rem; margin: -2.6rem auto .9rem; }
.ks-panel--deep .ks-seal--photo { box-shadow: 0 0 0 3px var(--ks-panel), 0 0 0 4.5px var(--inv-accent); }
.ks-panel__label { margin: 0; font-size: .64rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--ks-gold-ink); }
.ks-panel__nickname {
    margin: .2rem 0 0; font-family: var(--ks-serif); font-style: italic; font-weight: 600; font-size: 3.1rem; line-height: 1;
    letter-spacing: -.01em; color: var(--inv-primary); overflow-wrap: anywhere;
}
.ks-panel__name { margin: .45rem 0 0; font-family: var(--ks-title); font-size: 1.12rem; font-weight: 400; line-height: 1.3; color: var(--inv-text); overflow-wrap: anywhere; }
.ks-panel__parents { margin: .7rem auto .9rem; max-width: 28ch; font-size: .85rem; line-height: 1.5; color: var(--ks-muted); }
.ks-panel__order { display: block; font-style: italic; }
.ks-panel__parents strong { font-weight: 500; color: var(--inv-text); }
.ks-panel__parents .ks-amp { padding: 0 .25em; }
.ks-panel--deep .ks-panel__label { color: var(--inv-shine); }
.ks-panel--deep .ks-panel__nickname, .ks-panel--deep .ks-panel__name, .ks-panel--deep .ks-panel__parents strong { color: #fff; }
.ks-panel--deep .ks-panel__parents { color: var(--ks-ivory-muted); }
.ks-panel--deep .ks-amp { color: var(--inv-shine); }
.ks-panel--deep .ks-seal__star { --ks-star-line: color-mix(in srgb, var(--inv-deep) 30%, transparent); }
.ks-panel--deep .ks-pill { color: #fff; background: color-mix(in srgb, #fff 8%, transparent); box-shadow: inset 0 0 0 1px var(--ks-line); }
.ks-panel--deep .ks-pill .ks-icon { color: var(--inv-shine); }
.ks-panel--ivory .ks-seal__star { color: var(--ks-panel); }
.ks-panel--ivory .ks-seal__initial { color: var(--inv-shine); }
.ks-couple__join { position: relative; z-index: 2; display: flex; align-items: center; gap: .9rem; margin: 1.3rem auto 1.5rem; max-width: 21rem; }
.ks-couple__join::before, .ks-couple__join::after { content: ''; flex: 1; height: 1px; background: var(--ks-line); }
.ks-couple__amp { position: relative; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; }
.ks-couple__amp .ks-star { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--inv-accent); --ks-star-line: transparent; }
.ks-couple__amp i { position: relative; font-family: var(--ks-serif); font-style: italic; font-weight: 600; font-size: 1.6rem; line-height: 1; color: var(--inv-deep); }

/* families: the niat baik statement over a big rosette, then the two families as one ledger */
.ks-families { padding-bottom: 4.8rem; }
.ks-families__rosette { left: 50%; top: 1rem; width: 34rem; margin-left: -17rem; color: color-mix(in srgb, var(--inv-shine) 11%, transparent); }
.ks-families__intent {
    position: relative; max-width: 30ch !important; margin-bottom: 2.4rem !important; padding: 0 .4rem; font-family: var(--ks-serif); font-style: italic; font-weight: 500;
    font-size: 1.38rem; line-height: 1.45; color: #fff;
}
.ks-families__ledger {
    position: relative; max-width: 22rem; margin: 0 auto; padding: 1.8rem 1.3rem; border-radius: 6px;
    background: color-mix(in srgb, var(--inv-deep) 55%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 45%, transparent), inset 0 0 0 6px color-mix(in srgb, var(--inv-deep) 55%, transparent), inset 0 0 0 7px color-mix(in srgb, var(--inv-accent) 25%, transparent);
}
.ks-family__label {
    display: inline-block; margin: 0; padding: .2rem .75rem; border-radius: 999px; font-size: .62rem; font-weight: 600; letter-spacing: .2em;
    text-transform: uppercase; color: var(--inv-deep); background: var(--inv-shine);
}
.ks-family--host .ks-family__label { color: var(--inv-shine); background: transparent; box-shadow: inset 0 0 0 1px var(--inv-accent); }
.ks-family__name { margin: .6rem auto 0; max-width: 22ch; font-family: var(--ks-title); font-size: 1.38rem; font-weight: 400; line-height: 1.25; color: #fff; text-wrap: balance; }
.ks-family__who { margin: .2rem 0 0; font-family: var(--ks-serif); font-style: italic; font-size: 1.05rem; font-weight: 600; color: var(--inv-shine); }
.ks-family__detail { display: flex; align-items: flex-start; justify-content: center; gap: .45rem; margin: .5rem auto 0; max-width: 26ch; font-size: .86rem; line-height: 1.5; color: var(--ks-ivory-muted); }
.ks-family__detail .ks-icon { width: 1rem; height: 1rem; margin-top: .15rem; color: var(--inv-shine); }
/* the link between them: a gold line through a star, and the words in italic */
.ks-families__link { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin: 1rem 0; }
.ks-families__link::before, .ks-families__link::after { content: ''; width: 1px; height: 1.5rem; background: linear-gradient(180deg, transparent, var(--inv-accent)); }
.ks-families__link::after { background: linear-gradient(180deg, var(--inv-accent), transparent); }
.ks-families__star { width: 1.5rem; height: 1.5rem; color: var(--inv-accent); }
.ks-families__link span { font-family: var(--ks-serif); font-style: italic; font-size: 1rem; color: var(--inv-shine); }

/* events: an ivory card with a fine gold inner line; the date on a deep arch tablet */
.ks-event + .ks-event { margin-top: 2.2rem; }
.ks-event {
    padding: 1.3rem 1.1rem 1.3rem; border-radius: 10px; background: color-mix(in srgb, #fff 82%, var(--inv-background)); text-align: left;
    box-shadow: inset 0 0 0 5px color-mix(in srgb, #fff 82%, var(--inv-background)), inset 0 0 0 6px var(--ks-line), 0 22px 40px -26px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.ks-event__top { display: flex; align-items: flex-end; gap: 1rem; padding: .3rem .3rem 0; }
.ks-event--flip .ks-event__top { flex-direction: row-reverse; text-align: right; }
.ks-event__date {
    --arch-fill: var(--ks-panel); --arch-line: color-mix(in srgb, var(--inv-accent) 80%, transparent);
    display: flex; flex-direction: column; align-items: center; flex: none; width: 5rem; margin: 0; padding: 0 .2rem .75rem; border-radius: 0 0 6px 6px;
    color: var(--inv-shine); background: linear-gradient(180deg, transparent 2.4rem, var(--arch-fill) 2.4rem);
    filter: drop-shadow(0 12px 12px color-mix(in srgb, var(--inv-deep) 28%, transparent));
}
.ks-event__crown { width: calc(100% + .4rem); aspect-ratio: 2 / 1; margin: 0 -.2rem -1.15rem; }
.ks-event__weekday { position: relative; font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.ks-event__day { font-family: var(--ks-title); font-size: 2.4rem; line-height: 1.05; color: #fff; }
.ks-event__month { font-size: .6rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.ks-event--flip .ks-event__date { --arch-fill: var(--inv-accent); --arch-line: color-mix(in srgb, #fff 60%, transparent); color: var(--inv-deep); }
.ks-event--flip .ks-event__day { color: var(--inv-deep); }
.ks-event__head { min-width: 0; padding-bottom: .3rem; }
.ks-event__count { margin: 0; font-size: .62rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ks-gold-ink); }
.ks-event__name { margin: .15rem 0 0; font-family: var(--ks-title); font-size: 1.55rem; font-weight: 400; line-height: 1.15; color: var(--inv-primary); }
.ks-event__full { margin: .25rem 0 0; font-size: .84rem; color: var(--ks-muted); }
.ks-event__rows { display: grid; gap: .75rem; margin: 1.1rem .3rem 0; padding: 1rem 0 0; list-style: none; font-size: .9rem; border-top: 1px solid var(--ks-line); }
.ks-event__rows li { display: flex; align-items: flex-start; gap: .7rem; }
.ks-event__rows .ks-icon { width: 2.1rem; height: 2.1rem; padding: .45rem; border-radius: 50%; color: var(--inv-primary); background: color-mix(in srgb, var(--inv-soft) 70%, #fff); }
.ks-event__rows li > span { padding-top: .3rem; }
.ks-event__venue { display: block; font-weight: 600; }
.ks-event__address { display: block; font-size: .85rem; color: var(--ks-muted); }
.ks-event__media { margin: 1.2rem .3rem 0; }
.ks-event__photo {
    display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 45%;
    -webkit-mask: var(--ks-arch-mask) center / 100% 100% no-repeat; mask: var(--ks-arch-mask) center / 100% 100% no-repeat;
}
.ks-event .inv-maps { margin: 1.15rem .3rem 0; text-align: center; }
.ks-event .inv-maps .inv-button { width: 100%; font-weight: 500; }
.ks-event .inv-maps__frame { height: 190px; border-radius: 10px; }

/* countdown: each number in an eight-point star (a gold star with an ivory star inside) */
.ks-countdown .inv-countdown { gap: clamp(.35rem, 2vw, .7rem); }
.ks-countdown .inv-countdown__item {
    position: relative; isolation: isolate; display: grid; place-content: center; width: clamp(4.2rem, 19.5vw, 4.9rem); min-width: 0; aspect-ratio: 1; padding: 0;
    border: 0; border-radius: 0; color: var(--inv-text); background: var(--inv-accent); box-shadow: none; clip-path: var(--ks-star-clip);
}
.ks-countdown .inv-countdown__item::before {
    content: ''; position: absolute; inset: 3px; z-index: -1; background: var(--ks-paper); clip-path: var(--ks-star-clip);
}
.ks-countdown .inv-countdown__value { font-variant-numeric: lining-nums tabular-nums; font-family: var(--ks-title); font-size: 1.6rem; line-height: 1; color: var(--inv-primary); }
.ks-countdown .inv-countdown__label { margin-top: .1rem; font-size: .5rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ks-muted); }
.ks-countdown .inv-countdown__done { font-family: var(--ks-serif); font-size: 1.4rem; font-style: italic; color: var(--inv-shine); }
.ks-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 2.1rem; }
.ks-countdown .inv-countdown__actions .inv-button {
    width: min(100%, 17rem); min-height: 2.75rem; padding: .6rem 1rem; font-size: .84rem; font-weight: 500;
    color: var(--inv-background); background: color-mix(in srgb, var(--inv-background) 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 70%, transparent);
}
.ks-countdown .inv-countdown__actions .inv-button:first-child { color: var(--inv-deep); background: linear-gradient(180deg, var(--inv-shine), var(--inv-accent)); box-shadow: none; }
.ks-countdown .inv-cal {
    --inv-cal-bg: var(--ks-paper); --inv-cal-mark: var(--inv-primary);
    max-width: 19rem; margin: 2.8rem auto 0; border-radius: 8px;
    box-shadow: inset 0 0 0 5px var(--ks-paper), inset 0 0 0 6px var(--ks-line), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.ks-countdown .inv-cal__month { font-family: var(--ks-title); font-size: 1.4rem; color: var(--inv-primary); }

/* wedding plan: an ivory card inside a frame of deep geometric tiles */
.ks-plan__frame {
    position: relative; isolation: isolate; max-width: 23rem; margin: 0 auto; padding: 18px; border-radius: 6px;
    background: var(--ks-deep-bg); box-shadow: var(--ks-drop);
}
.ks-plan__frame::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--inv-accent); opacity: .95;
    -webkit-mask: var(--ks-lattice) -9px -9px / 36px 36px repeat; mask: var(--ks-lattice) -9px -9px / 36px 36px repeat;
}
.ks-plan__card {
    padding: 2rem 1.3rem 1.5rem; border-radius: 3px; background: var(--ks-paper);
    box-shadow: inset 0 0 0 5px var(--ks-paper), inset 0 0 0 6px var(--ks-line);
}
.ks-plan__star { width: 2.4rem; height: 2.4rem; margin: 0 auto .8rem; color: var(--ks-panel); --ks-star-line: color-mix(in srgb, var(--inv-shine) 70%, transparent); }
.ks-plan__label { margin: 0; font-size: .7rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--ks-gold-ink); }
.ks-plan__what { margin: .5rem 0 0; font-family: var(--ks-title); font-size: 1.35rem; line-height: 1.2; color: var(--inv-text); }
.ks-plan__date {
    margin: .1rem 0 0; font-family: var(--ks-serif); font-style: italic; font-size: 3.2rem; font-weight: 600; line-height: 1.02; letter-spacing: -.01em;
    color: var(--inv-primary); text-wrap: balance; overflow-wrap: anywhere;
}
.ks-plan__city { display: inline-flex; align-items: center; gap: .4rem; margin: .8rem 0 0; padding: .3rem .9rem; border-radius: 999px; font-size: .84rem; color: var(--inv-shine); background: var(--ks-panel); }
.ks-plan__city .ks-icon { width: 1rem; height: 1rem; }
.ks-plan__note { max-width: 28ch; margin: 1rem auto 0; font-family: var(--ks-serif); font-style: italic; font-size: 1.14rem; line-height: 1.45; color: var(--ks-muted); }
.ks-plan__steps {
    display: grid; grid-template-columns: auto minmax(1.5rem, 1fr) auto; align-items: start; gap: .3rem; margin: 1.4rem 0 0; padding: 1.2rem 0 0; list-style: none;
    border-top: 1px solid var(--ks-line);
}
.ks-plan__step { display: flex; flex-direction: column; align-items: center; width: 6rem; }
.ks-plan__dot { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; color: var(--inv-accent); background: #fff; box-shadow: inset 0 0 0 1.5px var(--inv-accent); }
.ks-plan__dot .ks-icon { width: 1.05rem; height: 1.05rem; }
.ks-plan__dot .ks-star { width: 1.2rem; height: 1.2rem; }
.ks-plan__step--done .ks-plan__dot { color: #fff; background: var(--ks-panel); box-shadow: none; }
.ks-plan__step-name { margin-top: .35rem; font-family: var(--ks-title); font-size: 1rem; line-height: 1.15; color: var(--inv-primary); }
.ks-plan__step-when { font-size: .64rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ks-muted); }
.ks-plan__line { height: 1.9rem; background: radial-gradient(circle, var(--ks-gold-ink) 1.1px, transparent 1.4px) left center / 7px 2px repeat-x; }

/* rundown: a fine gold line with small stars, the times in Marcellus on the left */
.ks-rundown__list { position: relative; margin: 0; padding: 0; list-style: none; text-align: left; }
.ks-rundown__list::before {
    content: ''; position: absolute; left: 4.6rem; top: .9rem; bottom: .9rem; width: 1px; transform-origin: top;
    background: linear-gradient(180deg, transparent, var(--inv-accent) 6%, var(--inv-accent) 94%, transparent);
}
.ks-rundown__item { position: relative; display: grid; grid-template-columns: 3.6rem 2rem minmax(0, 1fr); align-items: start; padding: 0 0 1.25rem; }
.ks-rundown__item:last-child { padding-bottom: 0; }
.ks-rundown__time { padding-top: .05rem; font-family: var(--ks-title); font-size: 1.3rem; line-height: 1.2; text-align: right; font-variant-numeric: lining-nums tabular-nums; color: var(--inv-shine); }
.ks-rundown__star { justify-self: center; width: 1.05rem; height: 1.05rem; margin-top: .4rem; color: var(--inv-accent); --ks-star-line: color-mix(in srgb, var(--inv-deep) 50%, transparent); }
.ks-rundown__body h3 { margin: .2rem 0 0; font-size: .98rem; font-weight: 500; line-height: 1.4; color: #fff; }
.ks-rundown__body p { margin: .15rem 0 0; font-size: .85rem; color: var(--ks-ivory-muted); }

/* love story: quiet chapters on a fine gold line, numbered stars, small round photos */
.ks-story__list { position: relative; display: grid; gap: 1.6rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.ks-story__list::before { content: ''; position: absolute; left: 1.3rem; top: 1rem; bottom: 1rem; width: 1px; background: var(--ks-line); }
.ks-story__item { position: relative; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: start; gap: .95rem; }
.ks-story__badge { position: relative; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; }
.ks-story__badge .ks-star { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--ks-panel); --ks-star-line: color-mix(in srgb, var(--inv-shine) 55%, transparent); }
.ks-story__badge i { position: relative; font-family: var(--ks-title); font-style: normal; font-size: 1rem; color: #fff; }
.ks-story__body { padding: 1rem 1.1rem 1.1rem; border-radius: 8px; background: color-mix(in srgb, #fff 75%, transparent); box-shadow: inset 0 0 0 1px var(--ks-line); }
.ks-story__body--photo { display: flow-root; }
.ks-seal--story { --seal-w: 4rem; float: right; margin: 0 0 .5rem .8rem; }
.ks-story__when { display: block; font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ks-gold-ink); }
.ks-story__body h3 { margin: .25rem 0 0; font-family: var(--ks-serif); font-style: italic; font-size: 1.55rem; font-weight: 600; line-height: 1.1; color: var(--inv-primary); }
.ks-story__body p { margin: .4rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--ks-muted); }

/* gallery: the first photo wide with a pointed-arch top, the others with a thin gold ring */
.ks-gallery .inv-gallery { gap: .6rem; }
.ks-gallery .inv-gallery__item { border-radius: 8px; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 70%, transparent), 0 16px 28px -18px rgb(0 0 0 / .7); }
.ks-gallery .inv-gallery__item:first-child {
    grid-column: 1 / -1; aspect-ratio: 3 / 2; border-radius: 0; box-shadow: none;
    -webkit-mask: var(--ks-arch-mask) center / 100% 100% no-repeat; mask: var(--ks-arch-mask) center / 100% 100% no-repeat;
}

/* live streaming: a deep card with a gold inner line */
.ks-stream__card {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem 1rem; max-width: 24rem; margin: 0 auto; padding: 1.4rem;
    border-radius: 10px; color: var(--inv-background); text-align: left; background: var(--ks-deep-bg);
    box-shadow: inset 0 0 0 6px var(--inv-deep), inset 0 0 0 7px var(--ks-line), var(--ks-drop);
}
.ks-stream__icon { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; color: var(--inv-deep); background: linear-gradient(180deg, var(--inv-shine), var(--inv-accent)); clip-path: var(--ks-star-clip); }
.ks-stream__icon .ks-icon { width: 1.6rem; height: 1.6rem; }
.ks-stream__title { margin: 0 0 .15rem; font-family: var(--ks-title); font-size: 1.6rem; font-weight: 400; line-height: 1.1; color: #fff; }
.ks-stream__title em { font-family: var(--ks-serif); color: var(--inv-shine); }
.ks-stream__text p { margin: 0; font-size: .86rem; color: var(--ks-ivory-muted); }
.ks-stream__text .ks-stream__note { margin-top: .3rem; font-weight: 500; color: var(--inv-shine); }
.ks-stream__button { grid-column: 1 / -1; min-height: 2.75rem; color: var(--inv-deep) !important; background: linear-gradient(180deg, var(--inv-shine), var(--inv-accent)) !important; font-weight: 500; }

/* RSVP card: ivory with a gold inner line and a star on its top edge */
.ks-rsvp__rosette { right: -12rem; top: -6rem; width: 28rem; color: color-mix(in srgb, var(--inv-shine) 12%, transparent); }
.ks-rsvp__card {
    position: relative; padding: 2.2rem 1.15rem 1.4rem; border-radius: 8px; color: var(--inv-text); background: var(--ks-paper);
    box-shadow: inset 0 0 0 6px var(--ks-paper), inset 0 0 0 7px var(--ks-line), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.ks-rsvp__star { position: absolute; left: 50%; top: -1.2rem; width: 2.4rem; height: 2.4rem; margin-left: -1.2rem; color: var(--inv-accent); }
.ks-rsvp__intro { margin: 0 auto 1.1rem; max-width: 30ch; font-size: .9rem; color: var(--ks-muted); }
.ks-rsvp__sent { margin-bottom: 1rem; }
.ks-rsvp__check { display: block; width: 4.4rem; height: 4.4rem; margin: 0 auto .5rem; overflow: visible; }
.ks-rsvp__check-ring { fill: none; stroke: var(--inv-accent); stroke-width: 3; }
.ks-rsvp__check-disc { fill: var(--inv-primary); }
.ks-rsvp__check path { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
html.inv-anim .ks-rsvp__sent .ks-rsvp__check { animation: ks-pop .8s cubic-bezier(.34, 1.56, .64, 1) both; }
html.inv-anim .ks-rsvp__sent .ks-rsvp__check path { animation: ks-draw .45s ease-out .35s both; }
.ks-rsvp__thanks { margin: 0; font-family: var(--ks-serif); font-style: italic; font-size: 1.9rem; font-weight: 600; color: var(--inv-primary); }
.ks-rsvp__line { margin: .1rem 0 0; font-size: .9rem; color: var(--ks-muted); }
.ks-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .84rem; font-weight: 500; color: var(--inv-primary); }

/* gift: ivory cards with a deep crown band and a small gold star, two per row */
.ks-gift__intro { color: var(--ks-ivory-muted); }
.ks-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.3rem; }
.ks-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ks-gift .inv-gift__account,
.ks-gift .inv-gift__address {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; margin: 0; overflow: hidden;
    padding: 2rem .75rem 1rem; border-radius: 8px; color: var(--inv-text); background: var(--ks-paper);
    box-shadow: 0 18px 30px -20px rgb(0 0 0 / .6);
}
.ks-gift .inv-gift__account::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: .75rem;
    background: var(--ks-panel); box-shadow: 0 1.5px 0 var(--inv-accent);
}
.ks-gift .inv-gift__account::after {
    content: ''; position: absolute; left: 50%; top: .3rem; width: 1rem; height: 1rem; margin-left: -.5rem;
    background: var(--inv-accent); clip-path: var(--ks-star-clip);
}
.ks-gift .inv-gift__account p, .ks-gift .inv-gift__address p { margin: 0; }
.ks-gift .inv-gift__bank { font-weight: 600; font-size: .85rem; color: var(--inv-primary); }
.ks-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .4rem; background: #fff; }
.ks-gift .inv-gift__logo img { max-width: 5rem; }
.ks-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);
}
.ks-gift .inv-gift__holder { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ks-muted); overflow-wrap: anywhere; }
.ks-gift .inv-button { margin-top: .35rem; min-height: 2.25rem; padding: .35rem .9rem; font-size: .74rem; font-weight: 500; }
.ks-gift .inv-gift__address { margin-top: .75rem; padding-top: 1.1rem; font-size: .875rem; box-shadow: inset 0 0 0 5px var(--ks-paper), inset 0 0 0 6px var(--ks-line); }
.ks-gift .inv-gift__address .inv-gift__holder { font-size: .72rem; }

/* co-hosts: the names in Marcellus, one per line, split by small stars, on the gold band */
.ks-cohosts__list { display: flex; flex-direction: column; align-items: center; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.ks-cohosts__list li { max-width: 26ch; font-family: var(--ks-title); font-size: 1.22rem; line-height: 1.3; color: var(--inv-deep); }
.ks-cohosts__list li + li::before { content: ''; display: block; width: 9px; height: 9px; margin: 0 auto .55rem; background: var(--inv-deep); opacity: .65; clip-path: var(--ks-star-clip); }

/* contacts: rows with the initial in a deep star, and a WhatsApp button */
.ks-contacts__list { display: grid; gap: .75rem; max-width: 24rem; margin: 0 auto; }
.ks-contact {
    display: grid; grid-template-columns: 2.9rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .65rem .7rem; border-radius: 10px;
    background: #fff; text-align: left; box-shadow: inset 0 0 0 1px var(--ks-line), 0 14px 26px -22px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.ks-contact__avatar { position: relative; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; }
.ks-contact__avatar .ks-star { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--ks-panel); --ks-star-line: color-mix(in srgb, var(--inv-shine) 55%, transparent); }
.ks-contact__avatar i { position: relative; font-family: var(--ks-serif); font-style: italic; font-size: 1.35rem; font-weight: 600; color: var(--inv-shine); }
.ks-contact p { margin: 0; }
.ks-contact__name { font-weight: 600; font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; }
.ks-contact__role { font-size: .78rem; color: var(--ks-muted); }
.ks-contact__phone { font-size: .85rem; }
.ks-contact__button { min-height: 2.5rem; padding: .45rem .95rem; font-size: .8rem; font-weight: 500; }
.ks-contact__button .ks-icon { width: 1.05rem; height: 1.05rem; }

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

/* vendors: a white card of rows split by fine gold lines */
.ks-vendors__list { max-width: 24rem; margin: 0 auto; padding: .3rem 1.15rem; list-style: none; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--ks-line), var(--ks-drop); }
.ks-vendor { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem 0; text-align: left; border-bottom: 1px solid var(--ks-line); }
.ks-vendor:last-child { border-bottom: 0; }
.ks-vendor__text { display: flex; flex-direction: column; min-width: 0; }
.ks-vendor__role { font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ks-gold-ink); }
.ks-vendor__name { font-family: var(--ks-title); font-size: 1.12rem; line-height: 1.25; color: var(--inv-primary); overflow-wrap: anywhere; }
.ks-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: 500; text-decoration: none; color: var(--inv-primary); box-shadow: inset 0 0 0 1px var(--ks-line);
}
.ks-vendor__link .ks-icon { width: .95rem; height: .95rem; }

/* closing: the rosette and the medallion, the thanks, a small arch photo (if any) beside the names */
.ks-closing { padding: 4.6rem 1.6rem 1.1rem; }
.ks-closing__rosette { left: 50%; top: -6.5rem; width: 34rem; margin-left: -17rem; color: color-mix(in srgb, var(--inv-shine) 13%, transparent); }
.ks-medallion--closing { --medal-w: 9.5rem; margin: 0 auto 1.4rem; }
.ks-closing__eyebrow { margin: 0 auto .3rem !important; font-size: .7rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-shine); }
.ks-closing__title { margin: 0 0 1rem; font-family: var(--ks-title); font-size: 2.6rem; font-weight: 400; line-height: 1.05; color: #fff; }
.ks-closing__title em { font-family: var(--ks-serif); font-style: italic; font-weight: 500; font-size: 1.1em; color: var(--inv-shine); }
.ks-closing__message { color: var(--ks-ivory-muted); max-width: 30ch !important; }
.ks-closing__salam { max-width: 24ch !important; margin-top: 1.1rem !important; font-family: var(--ks-serif); font-size: 1.25rem; font-style: italic; font-weight: 500; line-height: 1.3; color: var(--inv-shine); }
.ks-closing__sign { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 1.6rem; }
.ks-closing__sign--photo { flex-direction: row; justify-content: center; text-align: left; }
.ks-closing__window { flex: none; width: 5.6rem; margin: 0; filter: drop-shadow(0 0 1.5px var(--inv-accent)) drop-shadow(0 12px 14px rgb(0 0 0 / .35)); }
.ks-closing__window img {
    display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 35%;
    -webkit-mask: var(--ks-arch-mask) center / 100% 100% no-repeat; mask: var(--ks-arch-mask) center / 100% 100% no-repeat;
}
.ks-closing__who { min-width: 0; }
.ks-closing__signature { margin: 0; font-size: .86rem; color: var(--ks-ivory-muted); }
.ks-closing__names { margin: .3rem 0 0; font-family: var(--ks-serif); font-style: italic; font-size: 2.5rem; font-weight: 600; line-height: 1.05; color: #fff; overflow-wrap: anywhere; }
.ks-closing__names .ks-amp { font-size: .8em; color: var(--inv-shine); }
.ks-closing__sign--photo .ks-closing__names { font-size: 2.1rem; }
.ks-closing__ribbon { width: min(70%, 16rem); margin: 1.5rem auto 0; opacity: .85; }

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

/* the three answers as cards with icons (the radio dot is hidden but still focusable) */
.ks-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.ks-rsvp .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.ks-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: 10px; cursor: pointer; text-align: center;
    font-size: .84rem; font-weight: 500; line-height: 1.2; color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 22%, transparent);
    transition: background-color .25s ease, color .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.ks-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* icon: a pale star (::before) with a check, a cross or a question mark in it (::after, a mask in the text colour) */
.ks-rsvp .inv-form__choices label::before {
    content: ''; width: 2.2rem; height: 2.2rem; flex: none; background: color-mix(in srgb, var(--inv-soft) 70%, #fff); clip-path: var(--ks-star-clip);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease;
}
.ks-rsvp .inv-form__choices label::after {
    content: ''; position: absolute; left: 50%; top: 1.35rem; width: 1.15rem; height: 1.15rem; margin-left: -.575rem;
    background: currentColor; color: var(--inv-primary); pointer-events: none;
    -webkit-mask: var(--ks-choice-icon) center / contain no-repeat; mask: var(--ks-choice-icon) center / contain no-repeat;
}
.ks-rsvp .inv-form__choices label:nth-of-type(1) {
    --ks-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");
}
.ks-rsvp .inv-form__choices label:nth-of-type(2) {
    --ks-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");
}
.ks-rsvp .inv-form__choices label:nth-of-type(3) {
    --ks-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");
}
.ks-rsvp .inv-form__choices label:has(input:checked) {
    color: #fff; background: linear-gradient(180deg, var(--inv-primary), var(--inv-deep)); transform: translateY(-3px);
    box-shadow: 0 0 0 2px var(--inv-accent), 0 12px 24px -12px color-mix(in srgb, var(--inv-primary) 80%, transparent);
}
.ks-rsvp .inv-form__choices label:has(input:checked)::before { background-color: var(--inv-accent); transform: scale(1.1); }
.ks-rsvp .inv-form__choices label:has(input:checked)::after { color: var(--inv-deep); }
.ks-rsvp .inv-form__choices label:has(input:focus-visible) { outline: 2px solid var(--inv-accent); outline-offset: 3px; }

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

/* ---------- 7. shared components ---------- */
.ks-main .inv-button { font-weight: 500; }
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(--ks-sans);
}

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

/* short phones: the medallion and type step down so the cover fits without scrolling */
@media (max-height: 760px) {
    .ks-cover { --medal: min(56vw, 14rem, 31svh); }
    .ks-cover__inner { padding-bottom: 1.5rem; }
    .ks-cover__sky { padding-top: 1.7rem; }
    .ks-cover__body { padding-top: .8rem; }
    .ks-cover__names { font-size: 2.8rem; }
    .ks-cover__quote { margin-top: .6rem; font-size: 1rem; }
    .ks-cover__guest { margin-top: 1.05rem; }
    .ks-cover__open { margin-top: .95rem; }
}
@media (max-height: 660px) {
    .ks-cover { --medal: min(50vw, 28svh); }
    .ks-cover__inner { padding-bottom: 1.25rem; }
    .ks-cover__sky { padding-top: 1.3rem; }
    .ks-cover__medal { padding-top: 1rem; }
    .ks-cover__title { font-size: .78rem; }
    .ks-cover__body { padding-top: .6rem; }
    .ks-cover__names { font-size: 2.45rem; }
    .ks-cover__date { margin-top: .5rem; font-size: .76rem; }
    .ks-cover__quote { font-size: .94rem; line-height: 1.3; }
    .ks-cover__guest { margin-top: .95rem; padding: .5rem .85rem .45rem; }
    .ks-cover__guest-name { font-size: 1.1rem; }
    .ks-cover__open { min-height: 2.75rem; padding: .6rem 1.7rem; margin-top: .85rem; }
}
/* very short screens (in-app browsers): a smaller medallion and quote, so everything fits */
@media (max-height: 600px) {
    .ks-cover { --medal: min(42vw, 23svh); }
    .ks-cover__sky { padding-top: 1rem; }
    .ks-cover__medal { padding-top: .6rem; }
    .ks-cover__names { font-size: 2.15rem; }
    .ks-cover__date { margin-top: .35rem; }
    .ks-cover__quote { margin-top: .45rem; font-size: .88rem; }
    .ks-cover__guest { margin-top: .85rem; }
    .ks-cover__open { margin-top: .75rem; }
}

/* wide screens: the phone-width column on the deep backdrop with the lattice */
@media (min-width: 560px) {
    body.ks-body { background: var(--ks-deep-bg); background-attachment: fixed; }
    body.ks-body::before {
        content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .12; background: var(--inv-accent);
        -webkit-mask: var(--ks-lattice) center / 56px 56px repeat; mask: var(--ks-lattice) center / 56px 56px repeat;
    }
    .ks-main { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
}

/* ---------- 9. motion ---------- */
@keyframes ks-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ks-pop { 0% { transform: scale(0); } 55% { transform: scale(1.12); } 75% { transform: scale(.95); } 100% { transform: scale(1); } }
@keyframes ks-rise { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ks-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ks-turn { from { opacity: 0; transform: rotate(-22.5deg) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes ks-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* cover (≤ 2.5 s, once): the medallion rises (0–0.9 s), its rim and rosette draw themselves (0.3–1.9 s),
   the star turns into place (0.5–1.3 s) and the letters fade in (1.1–1.7 s); the rosette behind fades in;
   the text follows through its inv-enter delays */
html.inv-anim .ks-cover__rosette { animation: ks-fade 1.6s ease .2s both; }
html.inv-anim .ks-medallion--cover { animation: ks-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .ks-medallion--cover .ks-medallion__line { stroke-dasharray: 1; animation: ks-draw 1.6s cubic-bezier(.45, .1, .3, 1) .3s both; }
html.inv-anim .ks-medallion--cover .ks-medallion__star { transform-box: view-box; transform-origin: center; animation: ks-turn .8s cubic-bezier(.2, .7, .2, 1) .5s both; }
html.inv-anim .ks-medallion--cover :is(.ks-medallion__letters, .ks-medallion__beads) { animation: ks-fade .6s ease 1.1s both; }
html.inv-anim .ks-seal--cover { animation: ks-rise .6s cubic-bezier(.2, .7, .2, 1) 1.3s both; }

/* the closing medallion draws itself once when revealed */
html.inv-anim .ks-draw .ks-medallion__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.inv-anim .ks-draw .ks-medallion__star { opacity: 0; }
html.inv-anim :is(.is-revealed .ks-draw, .ks-draw.is-revealed) .ks-medallion__line { animation: ks-draw 1.5s ease-out .2s both; }
html.inv-anim :is(.is-revealed .ks-draw, .ks-draw.is-revealed) .ks-medallion__star { opacity: 1; transform-box: view-box; transform-origin: center; animation: ks-turn .8s cubic-bezier(.2, .7, .2, 1) .5s both; }

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

@media (prefers-reduced-motion: reduce) {
    .ks-cover, .ks-cover__sky, .ks-cover__body { transition: none; }
}

/* ---------- 10. intro scene "Khatam Bertaut" (scene.json + sections/_scene) ----------
   On the deep band: the khatam lattice, the big girih rosette, the diamond and the square sliding in from
   both sides to interlace into the eight-point star, the medallion settling in its heart, star ribbons and
   an ivory arch rising below; the card is an ivory pointed-arch panel with a gold rim. */
.ks-scene-lattice { position: absolute; inset: -8%; background: var(--inv-accent); opacity: .16;
    -webkit-mask: var(--ks-lattice) center / 56px 56px repeat; mask: var(--ks-lattice) center / 56px 56px repeat; }
.ks-scene-c { position: absolute; inset: 0; container-type: size; --ks-scene-m: min(44cqw, 100cqh); }
.ks-scene-c > * { position: absolute !important; left: 50%; top: 50%; translate: -50% -50%; margin: 0; }
.ks-scene-rosette { position: static; z-index: auto; width: calc(var(--ks-scene-m) * 2.7); height: auto; aspect-ratio: 1; flex: none;
    color: color-mix(in srgb, var(--inv-shine) 34%, transparent); }
.ks-scene-square { width: calc(var(--ks-scene-m) * 1.42); height: auto; aspect-ratio: 1; overflow: visible;
    fill: color-mix(in srgb, var(--inv-primary) 40%, transparent); stroke: var(--inv-accent); stroke-width: 1.6; stroke-linejoin: round;
    filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--inv-deep) 70%, transparent)); }
.ks-scene-square .ks-scene-square__fine { fill: none; stroke: var(--inv-shine); stroke-width: .7; opacity: .55; }
.ks-scene-medal { --medal-w: var(--ks-scene-m); }
.ks-scene-ribbon { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; opacity: .85; }
.ks-scene-floor { position: absolute; inset: 0; display: flex; flex-direction: column; }
.ks-scene-floor__crown { flex: none; --arch-fill: var(--ks-paper); --arch-line: var(--inv-accent); }
.ks-scene-floor::after { content: ''; flex: 1; margin-top: -1px; background: var(--ks-paper); }
.ks-scene-floor::before { content: ''; position: absolute; inset: 2.2rem 0 0; z-index: 1; background: var(--inv-primary); opacity: .08;
    -webkit-mask: var(--ks-lattice) center top / 56px 56px repeat; mask: var(--ks-lattice) center top / 56px 56px repeat; }
.ks-scene-floor__ribbon { position: absolute; left: 0; right: 0; bottom: 30%; z-index: 2; opacity: .75; }
body.ks-body .inv-intro--scene .inv-scene__card {
    --ks-card-arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 240' preserveAspectRatio='none'%3E%3Cpath d='M0 240V70C0 46 64 18 100 0C136 18 200 46 200 70V240Z'/%3E%3C/svg%3E");
    top: 62%; width: min(var(--scene-card-w, 68vw), 17rem); aspect-ratio: auto; padding: 4.6rem 1.2rem 2.1rem; isolation: isolate;
    -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--inv-text); background: var(--inv-accent);
    -webkit-mask: var(--ks-card-arch) center / 100% 100% no-repeat; mask: var(--ks-card-arch) center / 100% 100% no-repeat;
}
body.ks-body .inv-intro--scene .inv-scene__card::before { content: ''; position: absolute; inset: 3px; z-index: -1;
    -webkit-mask: var(--ks-card-arch) center / 100% 100% no-repeat; mask: var(--ks-card-arch) center / 100% 100% no-repeat;
    background: radial-gradient(90% 50% at 50% 0%, #fff, transparent 70%), var(--ks-paper); }
body.ks-body .inv-scene__card .inv-intro__label { margin-bottom: .55rem; font: 400 .66rem/1.4 var(--ks-title); letter-spacing: .32em; text-transform: uppercase; color: var(--ks-gold-ink); }
body.ks-body .inv-scene__card .inv-intro__names { font-family: var(--ks-serif) !important; font-style: italic; font-weight: 600; font-size: clamp(1.9rem, 8.6vw, 2.5rem); line-height: 1.15; color: var(--inv-primary); }
body.ks-body .inv-scene__card .inv-intro__rule { position: relative; width: 6.5rem; margin-block: .8rem .7rem; overflow: visible; background: linear-gradient(90deg, transparent, var(--inv-accent) 30%, var(--inv-accent) 70%, transparent); }
body.ks-body .inv-scene__card .inv-intro__rule::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; translate: -50% -50%;
    background: var(--inv-accent); clip-path: var(--ks-star-clip); }
body.ks-body .inv-scene__card .inv-intro__date { font: 400 .74rem/1.4 var(--ks-title); letter-spacing: .16em; text-transform: uppercase; color: var(--inv-primary); }
body.ks-body .inv-intro--scene .inv-intro__skip { background: color-mix(in srgb, var(--inv-deep) 60%, transparent); border-color: color-mix(in srgb, var(--inv-accent) 50%, transparent); color: var(--inv-shine); }