/*
 * Template "Signature Katedral Kasih" — sakral, anggun, bercahaya. Mobile-first.
 * Elegant direction: a deep primary (cathedral night) + gold + a warm ivory ground, with luminous
 * jewel glass (ruby, sapphire, amber) used sparingly: the rose window, the jewel rule, small accents.
 * Dark and light sections alternate; layouts vary from section to section.
 * Colors from the chosen variant: --inv-primary, --inv-accent (gold), --inv-secondary (jewel accent),
 * --inv-background (ivory), --inv-text. Fonts: --inv-font-display (names, the client's choice),
 * --inv-font-heading (small letter-spaced labels), EB Garamond (big titles and body text).
 * Gothic arches are SVG masks stretched to each box (--kk-arch / --kk-arch-line).
 */

:root {
    --kk-display: var(--inv-font-display, 'Allura', cursive);
    --kk-heading: var(--inv-font-heading, 'Cinzel', Georgia, serif);
    --kk-body: 'EB Garamond', Garamond, Georgia, serif;

    --kk-gold: var(--inv-accent);
    --kk-gold-light: color-mix(in srgb, var(--inv-accent) 68%, #fff);
    --kk-gold-ink: color-mix(in srgb, var(--inv-accent) 50%, var(--inv-text));
    --kk-jewel: var(--inv-secondary, #a3213d);
    --kk-paper: color-mix(in srgb, var(--inv-background) 45%, #fff);
    --kk-night: color-mix(in srgb, var(--inv-primary) 72%, #000);
    --kk-on-dark: color-mix(in srgb, var(--inv-background) 85%, #fff);
    --kk-line: color-mix(in srgb, var(--inv-accent) 60%, transparent);
    --kk-line-soft: color-mix(in srgb, var(--inv-accent) 30%, transparent);
    --kk-muted: color-mix(in srgb, var(--inv-text) 76%, var(--inv-background));

    /* stained glass: true jewel tones, steeped a little in the variant's primary so every variant fits */
    --kk-ruby: color-mix(in srgb, #c4213f 78%, var(--inv-primary));
    --kk-sapphire: color-mix(in srgb, #2b6be0 72%, var(--inv-primary));
    --kk-amber: color-mix(in srgb, var(--inv-accent) 85%, #fff);

    /* pointed (gothic) arch, filled and as a fine outline; stretched with mask-size 100% 100% */
    --kk-arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150' preserveAspectRatio='none'%3E%3Cpath d='M0 150V58C0 30 22 9 50 0c28 9 50 30 50 58v92Z'/%3E%3C/svg%3E");
    --kk-arch-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150' preserveAspectRatio='none'%3E%3Cpath d='M1 149V58C1 30.6 22.6 9.8 50 1c27.4 8.8 49 29.6 49 57v91Z' fill='none' stroke='%23000' stroke-width='1.3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    /* faint quatrefoil tracery for the light paper sections (drawn at ~5% opacity) */
    --kk-tracery: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M28 14a7 7 0 0 1 7 7 7 7 0 0 1 0 14 7 7 0 0 1-14 0 7 7 0 0 1 0-14 7 7 0 0 1 7-7Z'/%3E%3Cpath d='M0 0l8 8M56 0l-8 8M0 56l8-8M56 56l-8-8'/%3E%3C/g%3E%3C/svg%3E");

    --inv-radius: 4px;
}

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

body {
    margin: 0;
    background: var(--inv-background);
    color: var(--inv-text);
    font-family: var(--kk-body);
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
p { margin: 0 0 .75rem; }

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

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

.kk-display { font-family: var(--kk-display); font-weight: 400; line-height: 1.05; }
.kk-amp { display: inline-block; margin: 0 .12em; font-size: .62em; color: var(--kk-gold); }

.kk-kicker {
    margin: 0 0 .7rem;
    font-family: var(--kk-heading); font-size: .68rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase;
    color: var(--kk-gold-ink);
}

.kk-heading { margin-bottom: 2.4rem; }
.kk-title {
    margin: 0;
    font-family: var(--kk-body); font-weight: 500; font-size: 2.35rem; line-height: 1.1; letter-spacing: -.005em;
    color: var(--inv-primary);
}
.kk-title--small { font-size: 1.7rem; }
.kk-title--light, .kk-band .kk-title { color: var(--kk-on-dark); }
.kk-band .kk-kicker { color: var(--kk-gold-light); }

/* the jewel rule: gold line + ruby, gold and sapphire panes; it grows from the centre */
.kk-divider { display: block; margin: 1.05rem auto 0; color: var(--kk-gold); transform-origin: center; overflow: visible; }
.kk-divider--light { color: var(--kk-gold-light); }
.kk-divider__ruby { fill: var(--kk-ruby); }
.kk-divider__sapphire { fill: var(--kk-sapphire); }
.kk-divider__gold { fill: currentColor; }
.kk-divider path:not([class]) { opacity: .9; }
html.inv-anim .kk-divider[data-reveal="draw"] { transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) .15s; }

.kk-lily { display: block; margin: 0 auto 1.25rem; color: var(--kk-gold); }

.kk-lead { font-size: 1.06rem; }
.kk-muted { color: var(--kk-muted); font-size: 1rem; }

/* light rays falling from above (static) */
.kk-rays {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: repeating-conic-gradient(from 150deg at 50% -8%,
        color-mix(in srgb, var(--inv-accent) 20%, transparent) 0deg 1.4deg,
        transparent 1.4deg 6.5deg);
    -webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 0%, #000 0%, transparent 70%);
    mask-image: radial-gradient(ellipse 75% 80% at 50% 0%, #000 0%, transparent 70%);
}

/* glow behind the rose window */
.kk-halo {
    position: absolute; inset: -22%; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--inv-accent) 55%, #fff) 0%,
        color-mix(in srgb, var(--inv-accent) 30%, transparent) 30%,
        color-mix(in srgb, var(--kk-sapphire) 18%, transparent) 48%,
        transparent 68%);
}

/* ---------- rose window ---------- */

.kk-rose { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.kk-rose__stone { fill: var(--kk-night); stroke: var(--kk-gold); stroke-width: 1; }
.kk-rose__pane { stroke: var(--kk-night); stroke-width: 2.2; stroke-linejoin: round; fill-opacity: .94; }
.kk-rose__pane--a { fill: var(--kk-ruby); }
.kk-rose__pane--b { fill: var(--kk-sapphire); }
.kk-rose__pane--c { fill: color-mix(in srgb, var(--inv-accent) 88%, #7a3d00); }
.kk-rose__lancet { fill: #fff; fill-opacity: .26; stroke: var(--kk-night); stroke-width: 1.6; }
.kk-rose__bead { fill: var(--kk-gold-light); }
.kk-rose__lead { fill: none; stroke: var(--kk-gold); stroke-width: 2.6; }
.kk-rose__heart { fill: var(--kk-ruby); stroke: var(--kk-gold-light); stroke-width: 1.6; }
.kk-rose__core { fill: var(--kk-gold-light); }
/* light shining through the glass: brighter in the middle, darker at the rim */
.kk-cover__rose::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle at 50% 45%, rgb(255 255 255 / .42), rgb(255 255 255 / .1) 42%, rgb(0 0 0 / .18) 92%);
    mix-blend-mode: soft-light;
}
.kk-rose__turn { transform-box: fill-box; transform-origin: center; }
html.inv-anim .kk-rose--spin .kk-rose__turn { animation: kk-spin 220s linear infinite; }
@keyframes kk-spin { to { transform: rotate(360deg); } }

/* ---------- gothic arch photo frames: the photo in a pointed arch, a fine gold arch line shifted beside it ---------- */

.kk-frame { position: relative; isolation: isolate; }
.kk-frame::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    transform: translate(10px, 10px);
    background: var(--kk-gold);
    -webkit-mask: var(--kk-arch-line) center / 100% 100% no-repeat;
    mask: var(--kk-arch-line) center / 100% 100% no-repeat;
}
.kk-frame__img {
    display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
    -webkit-mask: var(--kk-arch) center / 100% 100% no-repeat;
    mask: var(--kk-arch) center / 100% 100% no-repeat;
}
.kk-frame__img--empty {
    display: grid; place-items: center;
    background: linear-gradient(170deg, color-mix(in srgb, var(--inv-accent) 45%, var(--inv-primary)), var(--kk-night));
    color: var(--kk-gold-light);
}
.kk-frame__img--empty .kk-lily { margin: 0; color: var(--kk-gold-light); }
.kk-band .kk-frame::before, .kk-hero .kk-frame::before { background: var(--kk-gold-light); }

/* jewel light behind a framed photo on a dark section */
.kk-hero__glow {
    position: absolute; inset: -14% -22%; z-index: 0; pointer-events: none; border-radius: 50%;
    background:
        radial-gradient(circle at 30% 35%, color-mix(in srgb, var(--kk-sapphire) 55%, transparent), transparent 55%),
        radial-gradient(circle at 72% 62%, color-mix(in srgb, var(--kk-ruby) 45%, transparent), transparent 55%),
        radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--inv-accent) 40%, transparent), transparent 50%);
    filter: blur(22px);
    opacity: .75;
}

/* ---------- wide screens: cathedral backdrop (hidden on phones) ---------- */

.kk-backdrop { display: none; }

/* ---------- cover: the rose window lights up ---------- */

.kk-cover {
    position: fixed; inset: 0; z-index: 30; overflow-x: hidden; overflow-y: auto;
    background:
        radial-gradient(ellipse 80% 45% at 50% 22%, color-mix(in srgb, var(--kk-sapphire) 26%, transparent), transparent 70%),
        linear-gradient(to bottom, var(--kk-night), var(--inv-primary) 50%, var(--kk-night));
    color: var(--kk-on-dark);
    text-align: center;
}
/* the light that floods the screen when the invitation opens */
.kk-cover::after {
    content: ''; position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
    background: radial-gradient(circle at 50% 30%, #fff 0%, color-mix(in srgb, var(--inv-background) 85%, #fff) 45%, color-mix(in srgb, var(--inv-accent) 30%, var(--inv-background)) 100%);
}
/* one fine gold gothic arch around the whole cover */
.kk-cover__arch {
    position: fixed; inset: 12px 12px 12px; z-index: 0; pointer-events: none; opacity: .7;
    background: var(--kk-gold);
    -webkit-mask: var(--kk-arch-line) center / 100% 100% no-repeat;
    mask: var(--kk-arch-line) center / 100% 100% no-repeat;
}
.kk-cover > .kk-rays { position: fixed; }

.kk-cover__content {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: min(100%, 440px); min-height: 100svh; margin: 0 auto;
    padding: 6svh 30px 7svh;
}
.kk-cover__rose { position: relative; width: min(72vw, 300px, 40svh); margin-bottom: 4.5svh; }
.kk-cover__rose .kk-halo {
    inset: -24%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--inv-accent) 60%, transparent) 0 54%,
        color-mix(in srgb, var(--inv-accent) 24%, transparent) 62%,
        color-mix(in srgb, var(--kk-sapphire) 22%, transparent) 76%,
        transparent 92%);
    filter: blur(6px);
}
.kk-cover__monogram {
    position: absolute; inset: 50% 0 auto; z-index: 1; transform: translateY(-50%);
    font-family: var(--kk-heading); font-size: .62rem; letter-spacing: .1em; color: var(--kk-night);
}
.kk-cover__title { margin-bottom: .55rem; color: var(--kk-gold-light); }
.kk-cover__names { margin: 0 0 .7rem; font-size: 3.9rem; color: #fff; overflow-wrap: anywhere; }
.kk-cover__names span:not(.kk-amp) { display: inline-block; }
.kk-cover__names .kk-amp { color: var(--kk-gold-light); }
.kk-cover__date {
    margin: 0 0 1.5rem; font-family: var(--kk-heading); font-size: .76rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
    color: var(--kk-on-dark);
}
.kk-cover__guest {
    width: 88%; margin-bottom: 1.6rem; padding: .8rem .5rem .85rem;
    border-top: 1px solid var(--kk-line); border-bottom: 1px solid var(--kk-line);
}
.kk-cover__guest p { margin: 0 0 .3rem; font-family: var(--kk-heading); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--kk-gold-light); }
.kk-cover__guest-name { display: block; font-family: var(--kk-body); font-size: 1.32rem; line-height: 1.25; color: #fff; overflow-wrap: anywhere; }
.kk-cover .kk-open {
    gap: .55rem; padding: .95rem 1.8rem; border-radius: 3px;
    background: linear-gradient(180deg, var(--kk-gold-light), var(--kk-gold)); color: var(--kk-night);
    font-family: var(--kk-heading); font-weight: 600; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
    box-shadow: 0 10px 24px rgb(0 0 0 / .3);
}

/* the opening moment: the glass lights up from dark while its glow blooms (done by ~1.6s) */
html.inv-anim .kk-cover__rose .kk-rose { animation: kk-light 1.6s cubic-bezier(.3, .6, .2, 1) .1s both; }
html.inv-anim .kk-cover__rose .kk-halo { animation: kk-bloom 1.8s ease-out .3s both; }
html.inv-anim .kk-cover__arch { animation: kk-fade 1.4s ease .2s both; }
html.inv-anim .kk-cover__rose::after { animation: kk-fade 1.6s ease .3s both; }
@keyframes kk-light {
    from { opacity: .35; filter: brightness(.25) saturate(.2); transform: scale(.94); }
    to { opacity: 1; filter: none; transform: none; }
}
@keyframes kk-bloom { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes kk-fade { from { opacity: 0; } }

/* opening: the text fades, the light floods the screen, then the cover fades away */
.kk-cover--leave { transition: opacity .6s ease 1s; }
.kk-cover--leave .kk-cover__content > :not(.kk-cover__rose) { transition: opacity .4s ease, transform .5s ease; }
.kk-cover--leave .kk-cover__rose { transition: transform 1.2s ease, filter 1.2s ease; }
.kk-cover--leave::after { animation: kk-flood 1.5s ease forwards; }
.kk-cover--gone { opacity: 0; }
.kk-cover--gone .kk-cover__content > :not(.kk-cover__rose) { opacity: 0; transform: translateY(-12px); }
.kk-cover--gone .kk-cover__rose { transform: scale(1.12); filter: brightness(1.4); }
@keyframes kk-flood { 0%, 25% { opacity: 0; } 70%, 100% { opacity: 1; } }

/* ---------- page ---------- */

.kk-page { position: relative; z-index: 1; background: var(--inv-background); }

/* hero: the couple's photo in a tall gothic arch on the dark nave */
.kk-hero {
    position: relative; overflow: hidden; padding: 3.5rem 1.5rem 4rem; text-align: center;
    color: var(--kk-on-dark);
    background: linear-gradient(to bottom, var(--kk-night), var(--inv-primary));
}
.kk-hero > * { position: relative; z-index: 1; }
.kk-hero > .kk-rays { position: absolute; z-index: 0; }
.kk-hero__window { position: relative; width: min(66%, 260px); margin: 0 auto 2.6rem; }
.kk-hero__frame { aspect-ratio: 3 / 4.3; }
.kk-hero__names { margin: 0 0 .7rem; font-size: 3.6rem; color: #fff; }
.kk-hero__names span:not(.kk-amp) { display: inline-block; }
.kk-hero__names .kk-amp, .kk-closing__names .kk-amp { color: var(--kk-gold-light); }
.kk-hero__date { margin: 0 0 1.1rem; font-family: var(--kk-heading); font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--kk-gold-light); }
.kk-hero__quote { max-width: 30ch; margin: 0 auto; font-style: italic; font-size: 1.02rem; color: var(--kk-on-dark); opacity: .9; }
.kk-hero .kk-kicker { color: var(--kk-gold-light); }

/* sections: light grounds alternate with dark bands */
.kk-section {
    position: relative; overflow: hidden; isolation: isolate;
    padding: 5rem max(1.5rem, calc(50% - 250px));
    text-align: center;
    background: var(--inv-background);
}
.kk-couple, .kk-story, .kk-gift, .kk-wishes:not(.kk-band) { background: var(--kk-paper); }
.kk-couple::before, .kk-story::before, .kk-gift::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-primary); opacity: .05;
    -webkit-mask: var(--kk-tracery) 0 0 / 56px 56px repeat;
    mask: var(--kk-tracery) 0 0 / 56px 56px repeat;
}
.kk-band {
    color: var(--kk-on-dark);
    background: linear-gradient(to bottom, var(--kk-night), var(--inv-primary));
}
.kk-band > * { position: relative; z-index: 1; }
.kk-band > .kk-rays { position: absolute; z-index: 0; }
.kk-band .kk-muted { color: var(--kk-on-dark); opacity: .88; }

/* opening: warm ground, the verse in a deep lancet window with gold letters */
.kk-opening__greeting { margin-bottom: 1rem; font-style: italic; font-size: 1.35rem; line-height: 1.45; color: var(--inv-primary); }
.kk-scripture {
    position: relative; isolation: isolate;
    max-width: 330px; margin: 3rem auto 0; padding: 5.4rem 2rem 2.8rem;
    color: var(--kk-on-dark);
}
.kk-scripture::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(ellipse 80% 40% at 50% 0%, color-mix(in srgb, var(--kk-sapphire) 45%, transparent), transparent 70%),
        linear-gradient(to bottom, var(--inv-primary), var(--kk-night));
    -webkit-mask: var(--kk-arch) center / 100% 100% no-repeat;
    mask: var(--kk-arch) center / 100% 100% no-repeat;
}
.kk-scripture::after {
    content: ''; position: absolute; inset: 9px; z-index: -1; pointer-events: none;
    background: var(--kk-gold-light); opacity: .8;
    -webkit-mask: var(--kk-arch-line) center / 100% 100% no-repeat;
    mask: var(--kk-arch-line) center / 100% 100% no-repeat;
}
.kk-scripture__finial { position: absolute; top: 1.9rem; left: 0; right: 0; color: var(--kk-gold-light); }
.kk-scripture__finial svg { display: block; margin: 0 auto; }
.kk-scripture blockquote { margin: 0; font-style: italic; font-size: 1.14rem; line-height: 1.7; color: #fff; }
.kk-scripture figcaption {
    margin-top: 1.2rem; font-family: var(--kk-heading); font-size: .66rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
    color: var(--kk-gold-light);
}

/* couple: asymmetric rows, groom's arch on the left, bride's on the right */
.kk-person {
    display: grid; grid-template-columns: 44% minmax(0, 1fr); align-items: center; gap: 1.4rem;
    text-align: left;
}
.kk-person__frame { aspect-ratio: 3 / 4.4; margin-right: 10px; }
.kk-person--bride { grid-template-columns: minmax(0, 1fr) 44%; text-align: right; }
.kk-person--bride .kk-person__frame { order: 2; margin: 0 0 0 0; }
.kk-person--bride .kk-person__frame::before { transform: translate(-10px, 10px); }
.kk-person__nickname { margin: 0 0 .35rem; font-size: 3rem; color: var(--inv-primary); overflow-wrap: anywhere; }
.kk-person__name {
    margin: 0 0 .7rem; font-family: var(--kk-heading); font-weight: 500; font-size: .82rem; line-height: 1.45;
    letter-spacing: .1em; text-transform: uppercase; color: var(--inv-text); overflow-wrap: anywhere;
}
.kk-person__parents { font-size: .96rem; line-height: 1.5; color: var(--kk-muted); }
.kk-person__parents strong { font-weight: 600; color: var(--inv-text); }
.kk-icon-link {
    display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem;
    border: 1px solid var(--kk-line); border-radius: 999px;
    color: var(--inv-primary); font-size: .82rem; text-decoration: none; max-width: 100%;
    transition: background-color .3s ease, color .3s ease;
}
.kk-icon-link span { overflow: hidden; text-overflow: clip; }
.kk-icon-link:hover { background: var(--inv-primary); color: var(--kk-on-dark); }
.kk-couple__amp { display: flex; align-items: center; gap: 1rem; margin: 2.2rem 0; color: var(--kk-jewel); }
.kk-couple__amp::before, .kk-couple__amp::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--kk-line)); }
.kk-couple__amp::after { background: linear-gradient(90deg, var(--kk-line), transparent); }
.kk-couple__amp span { font-size: 2.8rem; line-height: 1; }

/* countdown band: lancet cells, a big rose window glowing in the corner */
.kk-countdown { padding-top: 5.5rem; padding-bottom: 5.5rem; }
.kk-countdown__rose { position: absolute !important; z-index: 0 !important; width: 440px; right: -210px; bottom: -230px; pointer-events: none; }
.kk-countdown__rose > * { opacity: .2; }
.kk-countdown__date { margin: -1rem 0 2rem; font-style: italic; font-size: 1.08rem; color: var(--kk-on-dark); }
.kk-countdown .inv-countdown { gap: .6rem; isolation: isolate; }
.kk-countdown .inv-countdown__item {
    position: relative; flex: 1; max-width: 4.9rem; padding: 1.8rem .2rem .9rem; border-radius: 0;
    background: none;
}
.kk-countdown .inv-countdown__item::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--kk-sapphire) 40%, transparent), color-mix(in srgb, var(--inv-accent) 10%, transparent));
    -webkit-mask: var(--kk-arch) center / 100% 100% no-repeat;
    mask: var(--kk-arch) center / 100% 100% no-repeat;
}
.kk-countdown .inv-countdown__item::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--kk-gold-light);
    -webkit-mask: var(--kk-arch-line) center / 100% 100% no-repeat;
    mask: var(--kk-arch-line) center / 100% 100% no-repeat;
}
.kk-countdown .inv-countdown__value { font-family: var(--kk-body); font-weight: 500; font-size: 2.1rem; color: #fff; }
.kk-countdown .inv-countdown__label { margin-top: .2rem; font-family: var(--kk-heading); font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; color: var(--kk-gold-light); opacity: 1; }
.kk-countdown .inv-countdown__actions { margin-top: 2rem; }

/* events: plain warm ground, asymmetric cards with a dark lancet pillar */
.kk-events__lead { max-width: 30ch; margin: -.9rem auto 2.4rem; font-style: italic; font-size: 1.05rem; color: var(--inv-text); }
/* two arched photos above the title, staggered like chapel windows */
.kk-collage { display: flex; justify-content: center; gap: 1rem; margin: -1rem auto 2.4rem; }
.kk-collage__photo {
    width: min(36%, 8.5rem); aspect-ratio: 3 / 4; border-radius: 999px 999px 4px 4px;
    background: var(--kk-photo) center 30% / cover no-repeat, var(--kk-paper);
    box-shadow: 0 0 0 4px var(--inv-background), 0 0 0 5px var(--kk-line), 0 18px 30px -18px color-mix(in srgb, var(--inv-primary) 70%, transparent);
}
.kk-collage__photo--1 { margin-top: 1.6rem; }

.kk-events__list { display: grid; gap: 1.6rem; max-width: 400px; margin: 0 auto; }
.kk-ecard {
    display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); align-items: stretch;
    background: var(--kk-paper); border-radius: 4px; overflow: hidden; text-align: left;
    box-shadow: inset 0 0 0 1px var(--kk-line-soft), 0 22px 40px -26px color-mix(in srgb, var(--inv-primary) 65%, transparent);
}
.kk-ecard--flip { grid-template-columns: minmax(0, 1fr) 6.6rem; }
.kk-ecard--flip .kk-ecard__pillar { order: 2; }
.kk-ecard__pillar {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .9rem;
    padding: .75rem .65rem 1.2rem; color: var(--kk-on-dark); text-align: center;
    background:
        radial-gradient(ellipse 90% 35% at 50% 0%, color-mix(in srgb, var(--kk-sapphire) 45%, transparent), transparent 80%),
        linear-gradient(to bottom, var(--inv-primary), var(--kk-night));
}
.kk-ecard__window {
    width: 100%; aspect-ratio: 3 / 4; padding: 3px; border-radius: 999px 999px 3px 3px;
    box-shadow: inset 0 0 0 1px var(--kk-gold-light);
}
.kk-ecard__window img, .kk-ecard__window > span {
    display: grid; place-items: center; width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
    border-radius: 999px 999px 2px 2px; color: var(--kk-gold-light);
}
.kk-ecard__window > span { background: color-mix(in srgb, var(--inv-accent) 18%, transparent); }
.kk-ecard__window > span svg { width: 60%; height: auto; margin: 0; }
.kk-event__date { display: grid; justify-items: center; gap: .15rem; }
.kk-event__day, .kk-event__month {
    font-family: var(--kk-heading); font-size: .56rem; font-weight: 500; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase;
    color: var(--kk-gold-light); overflow-wrap: anywhere;
}
.kk-event__num { font-family: var(--kk-body); font-weight: 500; font-size: 2.7rem; line-height: 1; color: #fff; }
.kk-ecard__body { padding: 1.4rem 1.2rem 1.5rem; }
.kk-ecard__name {
    margin: 0 0 .55rem; font-family: var(--kk-body); font-weight: 500; font-size: 1.55rem; line-height: 1.15;
    color: var(--inv-primary); overflow-wrap: anywhere;
}
.kk-event__time {
    display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .9rem;
    font-family: var(--kk-heading); font-size: .72rem; font-weight: 500; letter-spacing: .1em;
    color: var(--kk-jewel);
}
.kk-event__place { padding-top: .85rem; border-top: 1px solid var(--kk-line-soft); }
.kk-event__venue { margin-bottom: .2rem; font-weight: 600; font-size: 1.05rem; line-height: 1.35; color: var(--inv-text); }
.kk-event__address { font-size: .94rem; line-height: 1.5; color: var(--kk-muted); }
.kk-event__dress { font-size: .92rem; font-style: italic; color: var(--kk-gold-ink); }
.kk-ecard .inv-maps { margin-top: .6rem; text-align: left; }
.kk-ecard .inv-button { padding: .7rem 1.1rem; }

/* love story: zig-zag programme, a gold line down the middle with a jewel node per chapter */
.kk-chapters { position: relative; max-width: 26rem; margin: 0 auto; padding: .3rem 0; list-style: none; }
.kk-chapters::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%);
    background: linear-gradient(transparent, var(--kk-line) 6%, var(--kk-line) 92%, transparent);
}
.kk-chapter {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 1.6rem minmax(0, 1fr);
    align-items: start; column-gap: .55rem; padding-bottom: 2.6rem;
}
.kk-chapter:last-child { padding-bottom: 0; }
.kk-chapter__text { grid-column: 1; grid-row: 1; text-align: right; }
.kk-chapter__node { grid-column: 2; grid-row: 1; justify-self: center; }
.kk-chapter__meta { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; text-align: left; }
.kk-chapter--flip .kk-chapter__text { grid-column: 3; text-align: left; }
.kk-chapter--flip .kk-chapter__meta { grid-column: 1; align-items: flex-end; text-align: right; }
.kk-chapter__node { display: block; color: var(--kk-jewel); background: var(--kk-paper); border-radius: 50%; box-shadow: 0 0 0 4px var(--kk-paper); }
.kk-chapter__node svg { display: block; }
.kk-chapter__title {
    margin: 0; font-family: var(--kk-body); font-weight: 600; font-size: 1.2rem; line-height: 1.2;
    color: var(--inv-primary); overflow-wrap: anywhere;
}
.kk-chapter__rule { display: block; width: 2.2rem; height: 1px; margin: .55rem 0 .6rem auto; background: var(--kk-gold); }
.kk-chapter--flip .kk-chapter__rule { margin-left: 0; margin-right: auto; }
.kk-chapter__story { margin: 0; font-size: .96rem; line-height: 1.55; color: var(--kk-muted); overflow-wrap: anywhere; }
.kk-chapter__date {
    margin: 0; font-family: var(--kk-heading); font-size: .66rem; font-weight: 500; line-height: 1.5; letter-spacing: .18em; text-transform: uppercase;
    color: var(--kk-gold-ink); overflow-wrap: anywhere;
}
.kk-chapter__photo {
    width: min(6.5rem, 100%); margin: .15rem 0 0;
    border-radius: 999px 999px 3px 3px; overflow: hidden;
    box-shadow: 0 0 0 3px var(--kk-paper), 0 0 0 4px var(--kk-line);
}
.kk-chapter__photo img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* gallery: a dark nave, small windows on a strip, one tall arched photo framed in gold */
.kk-gallery .inv-gallery-slider { max-width: 360px; margin: 0 auto; gap: 1rem; }
.kk-gallery .inv-gallery-slider__thumb { width: 3.6rem; aspect-ratio: 3 / 4; border: 2px solid transparent; border-radius: 999px 999px 4px 4px; opacity: .55; }
.kk-gallery .inv-gallery-slider__thumb.is-active { opacity: 1; border-color: var(--kk-gold-light); }
.kk-gallery .inv-gallery-slider__arrow { background: transparent; color: var(--kk-gold-light); box-shadow: inset 0 0 0 1px var(--kk-line); }
.kk-gallery .inv-gallery-slider__stage {
    aspect-ratio: 4 / 5; border-radius: 999px 999px 6px 6px; padding: 6px; background: transparent;
    box-shadow: inset 0 0 0 1px var(--kk-gold-light), 0 0 60px -10px color-mix(in srgb, var(--kk-sapphire) 55%, transparent);
}
.kk-gallery .inv-gallery-slider__slide { overflow: hidden; border-radius: 999px 999px 3px 3px; }
.kk-gallery .inv-gallery-slider__count { background: color-mix(in srgb, var(--kk-night) 82%, transparent); color: var(--kk-gold-light); }

/* live streaming: a deep card on the warm ground */
.kk-stream__card {
    position: relative; max-width: 360px; margin: 0 auto; padding: 2.4rem 1.6rem 2.2rem;
    border-radius: 2.4rem 2.4rem 4px 4px; color: var(--kk-on-dark);
    background:
        radial-gradient(ellipse 80% 45% at 50% 0%, color-mix(in srgb, var(--kk-sapphire) 45%, transparent), transparent 75%),
        linear-gradient(to bottom, var(--inv-primary), var(--kk-night));
    box-shadow: inset 0 0 0 1px var(--kk-line), inset 0 0 0 6px transparent;
}
.kk-stream__icon { display: block; margin: 0 auto .6rem; color: var(--kk-gold-light); }
.kk-stream .kk-title { margin-bottom: .9rem; color: #fff; }
.kk-stream .kk-muted { color: var(--kk-on-dark); opacity: .88; }
.kk-stream .inv-button { background: linear-gradient(180deg, var(--kk-gold-light), var(--kk-gold)); color: var(--kk-night); }

/* gift: deep cards with a small rose window in the corner, two per row (the last one full width when the count is odd) */
.kk-gift .inv-gift { display: grid; gap: .75rem; margin-top: 1.75rem; }
.kk-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.kk-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.kk-gift .inv-gift__account + .inv-gift__account { margin-top: 0; }
.kk-gift .inv-gift__account:not(.inv-gift__address) {
    position: relative; overflow: hidden; isolation: isolate; min-width: 0;
    display: flex; flex-direction: column; align-items: flex-start;
    padding: .9rem .85rem; text-align: left;
    border-radius: 6px; color: var(--kk-on-dark);
    background: linear-gradient(140deg, color-mix(in srgb, var(--inv-primary) 85%, var(--kk-sapphire)), var(--inv-primary) 45%, var(--kk-night));
    box-shadow: inset 0 0 0 1px var(--kk-line), 0 14px 28px -14px color-mix(in srgb, var(--inv-primary) 60%, transparent);
}
.kk-gift .inv-gift__account:not(.inv-gift__address)::after {
    content: ''; position: absolute; z-index: -1; top: -46px; right: -46px; width: 124px; height: 124px; border-radius: 50%; pointer-events: none;
    background:
        radial-gradient(circle, var(--kk-amber) 0 8%, transparent 8.5% 30%, var(--kk-line) 30.5% 31.5%, transparent 32% 67%, var(--kk-line) 67.5% 69%, transparent 69.5%),
        repeating-conic-gradient(color-mix(in srgb, var(--kk-ruby) 55%, transparent) 0deg 14deg, transparent 14deg 30deg, color-mix(in srgb, var(--kk-sapphire) 55%, transparent) 30deg 44deg, transparent 44deg 60deg);
    -webkit-mask: radial-gradient(circle, #000 69%, transparent 69.5%);
    mask: radial-gradient(circle, #000 69%, transparent 69.5%);
    opacity: .55;
}
.kk-gift .inv-gift__account p { margin: 0; }
.kk-gift .inv-gift__account:not(.inv-gift__address) .inv-gift__bank {
    display: flex; align-items: center; min-height: 1.5rem; max-width: 100%;
    font-family: var(--kk-heading); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--kk-gold-light); overflow-wrap: anywhere;
}
.kk-gift .inv-gift__account .inv-gift__logo { height: 1.5rem; padding: .2rem .45rem; border-radius: .3rem; }
.kk-gift .inv-gift__account .inv-gift__logo img { max-width: 4rem; }
.kk-gift .inv-gift__number {
    max-width: 100%; margin: .8rem 0 .15rem !important; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-weight: 600; font-size: 1rem; line-height: 1.3; letter-spacing: .03em; overflow-wrap: anywhere; color: #fff;
}
.kk-gift .inv-gift__holder { font-size: .94rem; font-style: italic; }
.kk-gift .inv-gift__account:not(.inv-gift__address) .inv-gift__holder {
    max-width: 100%; font-family: var(--kk-heading); font-size: .6rem; font-style: normal; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; overflow-wrap: anywhere;
}
.kk-gift .inv-gift__account:not(.inv-gift__address) .inv-button--outline {
    margin-top: .7rem; padding: .4rem .75rem; font-size: .6rem; letter-spacing: .14em;
    color: var(--kk-on-dark); box-shadow: inset 0 0 0 1px var(--kk-line);
}
.kk-gift .inv-gift__address {
    padding: 1.75rem 1.25rem; border-radius: 6px; background: var(--inv-background);
    box-shadow: inset 0 0 0 1px var(--kk-line), inset 0 3px 0 var(--kk-jewel);
}
.kk-gift .inv-gift__address .inv-gift__bank { margin-bottom: .4rem !important; font-family: var(--kk-heading); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--kk-gold-ink); }
.kk-gift .inv-gift__address .inv-button { margin-top: .9rem; }

/* buttons of the shared components */
.inv-button {
    padding: .8rem 1.5rem; border-radius: 3px;
    background: var(--inv-primary); color: var(--kk-on-dark);
    font-family: var(--kk-heading); font-weight: 500; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
    transition: transform .3s ease, box-shadow .3s ease;
}
.inv-button:hover { transform: translateY(-1px); box-shadow: 0 8px 18px color-mix(in srgb, var(--inv-primary) 25%, transparent); }
.inv-button--outline { background: transparent; color: var(--inv-primary); box-shadow: inset 0 0 0 1px var(--kk-line); }
.kk-band .inv-button { background: linear-gradient(180deg, var(--kk-gold-light), var(--kk-gold)); color: var(--kk-night); }
.kk-band .inv-button--outline { background: transparent; color: var(--kk-on-dark); box-shadow: inset 0 0 0 1px var(--kk-line); }

/* rsvp (dark band) + wishes (light): the forms on a panel */
.kk-panel {
    position: relative; margin: 1.75rem 0 0; padding: 1.75rem 1.3rem 1.5rem; text-align: left;
    background: var(--kk-paper); color: var(--inv-text); border-radius: 4px;
    box-shadow: inset 0 0 0 1px var(--kk-line-soft), 0 24px 44px -28px color-mix(in srgb, var(--inv-primary) 55%, transparent);
}
.kk-band .kk-panel { background: var(--inv-background); box-shadow: inset 0 0 0 1px var(--kk-line), 0 0 0 6px color-mix(in srgb, var(--inv-accent) 12%, transparent); }
.kk-band .kk-panel .inv-button { background: var(--inv-primary); color: var(--kk-on-dark); }
.kk-band .kk-panel .inv-button--outline { background: transparent; color: var(--inv-primary); }
.kk-panel .inv-form label, .kk-panel .inv-form__choices legend { font-family: var(--kk-heading); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--kk-gold-ink); }
.kk-panel .inv-form__choices label { font-family: var(--kk-body); font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--inv-text); }
.kk-panel .inv-form input:not([type=radio]):not([type=checkbox]),
.kk-panel .inv-form select,
.kk-panel .inv-form textarea {
    border: 0; border-bottom: 1px solid color-mix(in srgb, var(--inv-text) 28%, transparent); border-radius: 0;
    background: transparent; padding-inline: 0; color: var(--inv-text); font-family: var(--kk-body); font-size: 1rem;
    letter-spacing: 0; text-transform: none;
}
.kk-panel .inv-form input:focus, .kk-panel .inv-form select:focus, .kk-panel .inv-form textarea:focus { outline: none; border-bottom-color: var(--kk-gold); }
.kk-panel .inv-form .inv-button { justify-self: stretch; margin-top: .5rem; }
/* wishes: quiet notes on a jewel edge, in a scroll box of about three */
.kk-panel .inv-wishes { --inv-wishes-height: 19rem; }
.kk-panel .inv-wishes__list { padding: .5rem .4rem .5rem 0; border-top: 1px solid var(--kk-line-soft); border-bottom: 1px solid var(--kk-line-soft); }
.kk-panel .inv-wish { background: transparent; border-radius: 0; border-left: 2px solid var(--kk-jewel); padding: .4rem 0 .4rem .9rem; }
.kk-panel .inv-wish__name { font-family: var(--kk-body); font-weight: 600; font-size: 1rem; color: var(--inv-primary); }
.kk-panel .inv-wish__message { font-size: .96rem; line-height: 1.45; }
.kk-panel .inv-wish__time { font-size: .72rem; color: var(--kk-muted); }

/* closing: the photo in a gothic arch with jewel light behind it */
.kk-closing { padding-top: 4.5rem; }
.kk-closing__window { position: relative; width: min(60%, 230px); margin: 1rem auto 3rem; }
.kk-closing__frame { position: relative; z-index: 1; aspect-ratio: 3 / 4.3; }
.kk-closing__names { margin: 1.3rem 0 1.3rem; font-size: 3.5rem; color: #fff; }
.kk-closing__names span:not(.kk-amp) { display: inline-block; }
.kk-closing__message { max-width: 32ch; margin: 0 auto 1rem; font-size: 1.02rem; color: var(--kk-on-dark); }
.kk-closing__signature { margin: 0; font-family: var(--kk-heading); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--kk-gold-light); }

/* shared components outside the sections */
.inv-music__button { background: var(--inv-primary); color: var(--kk-gold-light); box-shadow: 0 0 0 1px var(--kk-gold), 0 0 0 4px var(--inv-primary), 0 6px 16px rgb(0 0 0 / .3); }
.inv-checkin { margin: 2rem 1.5rem; padding: 1.5rem; text-align: center; border: 1px solid var(--kk-line); background: var(--kk-paper); }
.inv-branding { font-family: var(--kk-body); }

/* ---------- richness: stained-glass light, photo gradients, tracery, lilies ---------- */

/* colored light falling through stained glass: soft diagonal beams of ruby, amber and sapphire (static) */
.kk-beams {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        linear-gradient(115deg, transparent 12%, color-mix(in srgb, var(--kk-sapphire) 11%, transparent) 13%, color-mix(in srgb, var(--kk-sapphire) 11%, transparent) 18%, transparent 19%),
        linear-gradient(115deg, transparent 22%, color-mix(in srgb, var(--kk-amber) 18%, transparent) 23%, color-mix(in srgb, var(--kk-amber) 18%, transparent) 26%, transparent 27%),
        linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--kk-ruby) 9%, transparent) 31%, color-mix(in srgb, var(--kk-ruby) 9%, transparent) 37%, transparent 38%);
    filter: blur(5px);
    -webkit-mask-image: radial-gradient(ellipse 90% 60% at 0% 0%, #000, transparent 75%);
    mask-image: radial-gradient(ellipse 90% 60% at 0% 0%, #000, transparent 75%);
}
.kk-beams--right { transform: scaleX(-1); }
.kk-beams--dark { z-index: 0; opacity: 1.6; mix-blend-mode: screen; }
.kk-band > .kk-beams { position: absolute; z-index: 0; }

/* photo-gradient background: client photo under a deep primary scrim (text stays well above 4.5:1) */
.kk-bgphoto { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.kk-band > .kk-bgphoto, .kk-events__intro > .kk-bgphoto { position: absolute; z-index: 0; }
.kk-bgphoto__img { --inv-parallax: 50px; position: absolute; inset: -60px 0; background: var(--kk-photo) center 35% / cover no-repeat; filter: saturate(.85); }
.kk-bgphoto::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 90% 50% at 50% 0%, color-mix(in srgb, var(--kk-sapphire) 30%, transparent), transparent 70%),
        linear-gradient(to bottom, color-mix(in srgb, var(--kk-night) 90%, transparent), color-mix(in srgb, var(--inv-primary) 76%, transparent) 45%, color-mix(in srgb, var(--kk-night) 94%, transparent));
}
.kk-bgphoto--closing::after {
    background:
        radial-gradient(ellipse 80% 40% at 50% 18%, color-mix(in srgb, var(--inv-accent) 18%, transparent), transparent 70%),
        linear-gradient(to bottom, color-mix(in srgb, var(--kk-night) 92%, transparent), color-mix(in srgb, var(--inv-primary) 80%, transparent) 40%, var(--kk-night) 92%);
}

/* events intro: a full-width dark photo band with the collage and the title; the cards follow on the warm ground */
.kk-section.kk-events { padding-top: 0; }
.kk-events__intro {
    position: relative; isolation: isolate; overflow: hidden;
    margin: 0 calc(-1 * max(1.5rem, calc(50% - 250px))) 2.6rem;
    padding: 4.2rem max(1.5rem, calc(50% - 250px)) 3.2rem;
    color: var(--kk-on-dark);
    background: linear-gradient(to bottom, var(--kk-night), var(--inv-primary));
}
.kk-events__intro > * { position: relative; z-index: 1; }
.kk-events__intro > .kk-rays { position: absolute; z-index: 0; }
.kk-events__intro .kk-kicker { color: var(--kk-gold-light); }
.kk-events__intro .kk-title { color: #fff; }
.kk-events__intro .kk-events__lead { margin: -.9rem auto 0; color: var(--kk-on-dark); }
.kk-events__intro .kk-collage__photo { box-shadow: 0 0 0 4px color-mix(in srgb, var(--kk-night) 70%, transparent), 0 0 0 5px var(--kk-gold-light), 0 20px 34px -16px rgb(0 0 0 / .6); }

/* gothic tracery panel behind a heading: visible but refined */
.kk-heading--tracery { position: relative; isolation: isolate; padding-top: 1.6rem; }
.kk-heading__tracery {
    position: absolute; left: 50%; top: -1.6rem; z-index: -1; width: 200px; height: auto;
    transform: translateX(-50%); color: var(--kk-gold); opacity: .3;
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 92%);
    mask-image: linear-gradient(to bottom, #000 45%, transparent 92%);
}
/* the scripture window: tracery engraved in the glass */
.kk-scripture__tracery { position: absolute; inset: 9px; z-index: -1; width: calc(100% - 18px); height: calc(100% - 18px); color: var(--kk-gold-light); opacity: .2; }
.kk-scripture__finial { display: none; }

/* white lilies (Redouté, public domain) */
.kk-lilies { position: absolute; pointer-events: none; }
.kk-lilies img { position: absolute; bottom: 0; height: auto; filter: drop-shadow(0 10px 18px rgb(0 0 0 / .35)); }
.kk-lilies__left { left: 0; transform: rotate(-8deg); transform-origin: bottom center; }
.kk-lilies__right { right: 0; transform: scaleX(-1) rotate(-8deg); transform-origin: bottom center; }
/* framing an arch photo: one spray at each lower corner, in front of the frame */
.kk-lilies--frame { left: -30%; right: -30%; bottom: -5%; height: 0; z-index: 2; }
.kk-lilies--frame img { width: 46%; }
.kk-lilies--frame .kk-lilies__left { transform: rotate(-16deg); }
.kk-lilies--frame .kk-lilies__right { transform: scaleX(-1) rotate(-16deg); }
/* on the cover: rising from the two lower corners, behind the text */
.kk-lilies--cover { position: fixed; left: -18px; right: -18px; bottom: -14px; z-index: 0; height: 0; }
.kk-lilies--cover img { width: min(50vw, 230px, 30svh); opacity: .95; }
html.inv-anim .kk-lilies--cover img { animation: kk-lily-in 1.6s cubic-bezier(.2, .7, .2, 1) .35s both; }
html.inv-anim .kk-lilies--cover .kk-lilies__right { animation-name: kk-lily-in-r; }
@keyframes kk-lily-in { from { opacity: 0; transform: translateY(24px) rotate(-14deg); } }
@keyframes kk-lily-in-r { from { opacity: 0; transform: scaleX(-1) translateY(24px) rotate(-14deg); } }
/* opening: a small spray above the greeting */
.kk-opening__lily { display: block; width: 150px; height: auto; margin: -1.5rem auto .9rem; filter: drop-shadow(0 8px 12px color-mix(in srgb, var(--inv-primary) 22%, transparent)); }
.kk-opening { overflow: hidden; }
/* without photos: warm light falling from the top onto the paper */
.kk-opening {
    background:
        radial-gradient(ellipse 90% 40% at 50% 0%, color-mix(in srgb, var(--kk-amber) 14%, transparent), transparent 70%),
        linear-gradient(to bottom, var(--inv-background), var(--kk-paper) 55%, color-mix(in srgb, var(--kk-sapphire) 8%, var(--inv-background)));
}
.kk-opening--photo { background: var(--inv-background); }
/* with a photo: it shows ~30% through the warm ground, denser behind the greeting, under the stained-glass beams */
.kk-section > .kk-bgphoto--soft { z-index: -2; }
.kk-bgphoto--soft .kk-bgphoto__img { filter: saturate(.75) blur(1px); }
.kk-bgphoto--soft::after {
    background:
        radial-gradient(ellipse 80% 42% at 50% 30%, color-mix(in srgb, var(--inv-background) 88%, transparent), color-mix(in srgb, var(--inv-background) 64%, transparent)),
        linear-gradient(to bottom, color-mix(in srgb, var(--inv-background) 55%, transparent), transparent 25%, transparent 70%, color-mix(in srgb, var(--inv-background) 85%, transparent));
}

/* ---------- wide screens: a narrow nave in a dark cathedral ---------- */

@media (min-width: 1024px) {
    body { background: var(--kk-night); }
    .kk-backdrop {
        display: block; position: fixed; inset: 0; z-index: 0; overflow: hidden;
        background:
            radial-gradient(ellipse 50% 60% at 50% 30%, color-mix(in srgb, var(--kk-sapphire) 20%, transparent), transparent 70%),
            linear-gradient(to bottom, var(--kk-night), var(--inv-primary) 60%, var(--kk-night));
    }
    .kk-backdrop__rose { position: absolute; top: 50%; width: min(56vh, 30vw); margin-top: calc(min(56vh, 30vw) / -2); opacity: .32; }
    .kk-backdrop__rose--left { left: calc((100vw - 480px) / 4 - min(56vh, 30vw) / 2); }
    .kk-backdrop__rose--right { right: calc((100vw - 480px) / 4 - min(56vh, 30vw) / 2); }
    .kk-backdrop__rose .kk-rose__stone { fill: none; }

    .kk-page {
        width: 480px; margin: 0 auto; min-height: 100vh;
        box-shadow: 0 0 0 1px var(--kk-line), 0 0 70px rgb(0 0 0 / .55);
    }
    .kk-section { padding-inline: 2rem; }
    .kk-cover__arch { inset: 18px calc(50% - 250px); }
    .kk-lilies--cover { left: calc(50% - 280px); right: calc(50% - 280px); }
}

/* short screens: a smaller rose window so the names, the guest and the button stay on screen */
@media (max-height: 760px) {
    .kk-cover__content { padding-top: 5svh; padding-bottom: 6svh; }
    .kk-cover__rose { width: min(66vw, 280px, 34svh); margin-bottom: 3.5svh; }
    .kk-cover__names { font-size: 3.5rem; margin-bottom: .55rem; }
    .kk-cover__date { margin-bottom: 1.15rem; }
    .kk-cover__guest { margin-bottom: 1.3rem; padding: .65rem .5rem .7rem; }
}
@media (max-height: 660px) {
    .kk-cover__content { padding-top: 4svh; padding-bottom: 5svh; }
    .kk-cover__rose { width: min(60vw, 240px, 30svh); margin-bottom: 3svh; }
    .kk-cover__names { font-size: 3.1rem; }
    .kk-cover__date { margin-bottom: .9rem; }
    .kk-cover__guest { margin-bottom: 1.1rem; }
    .kk-cover__guest-name { font-size: 1.18rem; }
    .kk-lilies--cover img { width: min(40vw, 25svh); }
}
@media (max-height: 580px) {
    .kk-cover__rose { width: min(52vw, 200px, 26svh); margin-bottom: 2.4svh; }
    .kk-cover__names { font-size: 2.8rem; }
    .kk-cover .kk-open { padding: .8rem 1.6rem; }
}

@media (max-width: 360px) {
    .kk-cover__names, .kk-hero__names, .kk-closing__names { font-size: 3rem; }
    .kk-title { font-size: 2.05rem; }
    .kk-person { gap: 1.1rem; }
    .kk-person__nickname { font-size: 2.6rem; }
    .kk-ecard { grid-template-columns: 6rem minmax(0, 1fr); }
    .kk-ecard--flip { grid-template-columns: minmax(0, 1fr) 6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .kk-cover--leave, .kk-cover--leave .kk-cover__content > *, .kk-cover--leave .kk-cover__rose { transition: none !important; }
    .kk-cover--leave::after, .kk-cover__rose .kk-rose, .kk-cover__rose .kk-halo, .kk-cover__rose::after, .kk-cover__arch, .kk-rose__turn, .kk-lilies img { animation: none !important; }

    .inv-button, .kk-icon-link { transition: none; }
}

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