/*
 * Template "Elegan Klasik" — ivory paper, thin gold ornaments, script names.
 * Mobile-first, one column (a centred 480px column on wide screens). Colors come from the variant (<x-inv.head>):
 *   --inv-primary (headings, buttons, dark bands), --inv-accent (gold ornaments),
 *   --inv-highlight (key info: times, active menu), --inv-background (page), --inv-surface (cards), --inv-text.
 * Ornaments are SVG masks, so they take the accent color of every variant.
 * Section rhythm: light / tinted / photo / dark band, so the page never feels flat.
 */

:root {
    --ek-surface: var(--inv-surface, #fffdf8);
    --ek-hi: var(--inv-highlight, var(--inv-primary));
    --ek-line: color-mix(in srgb, var(--inv-accent) 55%, transparent);
    --ek-soft: color-mix(in srgb, var(--inv-accent) 14%, transparent);
    --ek-tint: color-mix(in srgb, var(--inv-accent) 16%, var(--inv-background));
    --ek-ivory: color-mix(in srgb, var(--inv-background) 88%, #fff);
    /* gold leaf: a light highlight, the accent, a deep edge (ornaments, seal rings) */
    --ek-gold: linear-gradient(135deg, color-mix(in srgb, var(--inv-accent) 55%, #fff) 0%, var(--inv-accent) 38%,
        color-mix(in srgb, var(--inv-accent) 70%, #3a2408) 62%, color-mix(in srgb, var(--inv-accent) 80%, #fff) 100%);
    --ek-deep: color-mix(in srgb, var(--inv-primary) 72%, #000);
    --ek-script: 'Great Vibes', 'Brush Script MT', cursive;
    --ek-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --ek-sans: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --inv-radius: 1.25rem;
}

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

html { background: color-mix(in srgb, var(--inv-primary) 12%, var(--inv-background)); }
body {
    margin: 0;
    color: var(--inv-text);
    font-family: var(--ek-sans);
    font-size: 15px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    background: color-mix(in srgb, var(--inv-primary) 12%, var(--inv-background));
}

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

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

/* ---------- ornaments ---------- */

.ek-ornament {
    display: block; background: var(--ek-gold);
    -webkit-mask: var(--ek-mask) center / contain no-repeat;
    mask: var(--ek-mask) center / contain no-repeat;
}
.ek-divider { --ek-mask: url('../img/divider.svg'); width: 190px; height: 22px; margin: 0 auto 1.25rem; }
.ek-corner { --ek-mask: url('../img/corner.svg'); position: absolute; z-index: 2; width: 84px; height: 84px; pointer-events: none; }
.ek-corner--tl { top: 14px; left: 14px; }
.ek-corner--tr { top: 14px; right: 14px; transform: scaleX(-1); }
.ek-corner--bl { bottom: 14px; left: 14px; transform: scaleY(-1); }
.ek-corner--br { bottom: 14px; right: 14px; transform: scale(-1); }

/* ---------- type ---------- */

.ek-eyebrow {
    margin: 0 0 .35rem; font-size: .68rem; font-weight: 700; letter-spacing: .34em; text-transform: uppercase;
    color: var(--ek-hi);
}
.ek-script { font-family: var(--ek-script); font-weight: 400; line-height: 1.1; color: var(--inv-primary); }
.ek-title {
    margin: 0 0 .6rem; font-family: var(--ek-serif); font-weight: 500; font-size: 2.15rem; line-height: 1.15;
    letter-spacing: .03em; color: var(--inv-primary);
}
.ek-head { margin-bottom: 1.75rem; }
.ek-head .ek-divider { margin-bottom: 0; }
.ek-amp { font-family: var(--ek-serif); font-style: italic; color: var(--inv-accent); }

/* ---------- buttons (shared components too) ---------- */

.inv-button {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .78rem 1.6rem; border-radius: 999px; letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; font-weight: 700;
    background: var(--inv-primary); color: #fff;
    box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--inv-primary) 80%, transparent);
}
.inv-button--outline { background: transparent; color: var(--inv-primary); box-shadow: inset 0 0 0 1px var(--inv-primary); }

/* ---------- cover: full-bleed photo, the text on an ivory gradient at the bottom ---------- */

.ek-cover {
    position: fixed; inset: 0; z-index: 30; overflow: hidden;
    background: color-mix(in srgb, var(--inv-primary) 85%, #000);
}
.ek-cover--leave { transition: transform .9s cubic-bezier(.7, 0, .3, 1), opacity .9s ease; }
.ek-cover--gone { transform: translateY(-100%); opacity: 0; }

.ek-cover__stage {
    position: relative; height: 100%; max-width: 480px; margin: 0 auto; overflow: hidden;
    background: var(--inv-background);
}
.ek-cover__photo {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
}
.ek-cover__veil {
    position: absolute; inset: 0;
    background:
        radial-gradient(130% 55% at 50% 0%, color-mix(in srgb, var(--inv-accent) 22%, transparent), transparent 60%),
        linear-gradient(to bottom,
        color-mix(in srgb, var(--ek-deep) 70%, transparent) 0%, color-mix(in srgb, var(--inv-primary) 24%, transparent) 20%, transparent 36%,
        color-mix(in srgb, var(--inv-background) 72%, transparent) 56%,
        color-mix(in srgb, var(--inv-background) 94%, transparent) 70%, var(--inv-background) 100%);
}
.ek-cover:not(.ek-cover--photo) .ek-cover__veil { background: radial-gradient(120% 60% at 50% 0%, var(--ek-soft), transparent 70%); }
.ek-cover__frame {
    position: absolute; inset: 12px; z-index: 1; pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--inv-accent) 85%, #fff);
    outline: 1px solid color-mix(in srgb, var(--inv-accent) 70%, transparent); outline-offset: -6px;
    box-shadow: inset 0 0 0 7px color-mix(in srgb, var(--inv-accent) 10%, transparent);
}
.ek-cover .ek-corner { z-index: 3; width: 92px; height: 92px; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .25)); }
.ek-cover .ek-corner--bl, .ek-cover .ek-corner--br { width: 62px; height: 62px; filter: none; }

.ek-cover__body {
    position: absolute; inset: auto 0 0; z-index: 2; padding: 0 1.75rem 2.4rem; text-align: center;
}
.ek-cover:not(.ek-cover--photo) .ek-cover__body { inset: 0; display: flex; flex-direction: column; justify-content: center; }
/* short screens: an ivory wash that starts just above the text, so the taller text block stays readable */
@media (max-height: 700px) {
    .ek-cover--photo .ek-cover__body::before {
        content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: -2.5rem; bottom: 0; pointer-events: none;
        background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--inv-background) 78%, transparent) 2.5rem,
            color-mix(in srgb, var(--inv-background) 92%, transparent) 7rem, var(--inv-background));
    }
}
.ek-monogram {
    display: flex; align-items: center; justify-content: center; gap: .1em;
    width: 3.6rem; height: 3.6rem; margin: 0 auto .6rem; border-radius: 999px;
    background: var(--ek-surface); border: 1px solid var(--ek-line); outline: 1px solid var(--ek-line); outline-offset: 3px;
    font-family: var(--ek-serif); font-size: 1.15rem; font-weight: 600; color: var(--inv-primary);
}
.ek-monogram b { font-weight: 600; }
/* the cover and closing seal: deep primary disc, gold letters, a gold-leaf ring */
.ek-monogram--seal, .ek-closing__seal {
    width: 4.1rem; height: 4.1rem; border: 0; outline: 0; color: color-mix(in srgb, var(--inv-accent) 55%, #fff);
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-primary) 80%, #fff), var(--inv-primary) 55%, var(--ek-deep));
    box-shadow: 0 0 0 2px var(--inv-accent), 0 0 0 4px color-mix(in srgb, var(--inv-background) 85%, transparent),
        0 0 0 5px color-mix(in srgb, var(--inv-accent) 80%, transparent), 0 10px 22px -8px rgb(0 0 0 / .55);
}
.ek-monogram--seal span, .ek-closing__seal span { color: var(--inv-accent); }
.ek-monogram span { font-style: italic; font-size: .75rem; color: var(--inv-accent); }
.ek-cover__names { margin: .1rem 0 .1rem; font-size: 3.1rem; text-shadow: 0 0 18px color-mix(in srgb, var(--inv-background) 90%, transparent); }
.ek-cover__rule { width: 150px; height: 18px; margin: 0 auto .45rem; }
.ek-cover__names .ek-amp { font-family: var(--ek-script); font-style: normal; font-size: .75em; }
.ek-cover__date { margin: 0 0 .6rem; font-family: var(--ek-serif); font-size: 1.15rem; font-weight: 600; letter-spacing: .06em; color: var(--ek-hi); }
.ek-cover__quote { max-width: 310px; margin: 0 auto .9rem; font-family: var(--ek-serif); font-style: italic; font-size: 1rem; line-height: 1.45; }
.ek-cover__guest {
    margin: 0 auto 1.1rem; padding: .6rem 1rem; max-width: 290px;
    background: color-mix(in srgb, var(--ek-surface) 80%, transparent);
    border: 1px solid var(--ek-line); outline: 1px solid var(--ek-line); outline-offset: -5px;
}
.ek-cover__guest p { margin: 0; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.ek-cover__guest-name { display: block; font-family: var(--ek-serif); font-size: 1.35rem; font-weight: 600; line-height: 1.3; color: var(--inv-primary); }
.ek-cover__open svg { flex: none; }

/* the photo settles slowly once the cover appears */
@keyframes ek-settle { from { transform: scale(1.12); } to { transform: none; } }
html.inv-anim .ek-cover__photo { animation: ek-settle 5s cubic-bezier(.2, .7, .2, 1) both; }
/* the gold rule under the names draws once from the middle */
@keyframes ek-rule { from { clip-path: inset(0 50%); opacity: 0; } to { clip-path: inset(0 0); opacity: 1; } }
html.inv-anim .ek-cover__rule { animation: ek-rule 1.1s cubic-bezier(.2, .7, .2, 1) 1.1s both; }

/* ---------- layout: every section full width of the column, backgrounds alternate ---------- */

.ek-main {
    max-width: 480px; margin: 0 auto; overflow: hidden; background: var(--inv-background);
    box-shadow: 0 0 60px -20px rgb(0 0 0 / .35);
}
.ek-section { position: relative; padding: 4rem 1.4rem 3.75rem; text-align: center; }

.ek-card {
    position: relative; padding: 1.75rem 1.25rem; background: var(--ek-surface); border-radius: var(--inv-radius);
    border: 1px solid var(--ek-line); outline: 1px solid color-mix(in srgb, var(--inv-accent) 30%, transparent); outline-offset: -7px;
    box-shadow: 0 16px 34px -24px color-mix(in srgb, var(--inv-primary) 70%, transparent);
}
/* two small gold flourishes on the top corners of every card */
.ek-card::before, .ek-card::after {
    content: ''; position: absolute; top: 12px; width: 38px; height: 38px; pointer-events: none; background: var(--ek-gold);
    -webkit-mask: url('../img/corner.svg') center / contain no-repeat; mask: url('../img/corner.svg') center / contain no-repeat;
}
.ek-card::before { left: 12px; }
.ek-card::after { right: 12px; transform: scaleX(-1); }

/* ---------- opening: the quote on a tinted band, round photos on its edge ---------- */

.ek-opening { position: relative; isolation: isolate; overflow: hidden; text-align: center; }
/* the photo behind the opening, soft and slightly blurred: the band is a translucent tint over it, below the band a
   paper veil thickens toward the bottom so the message stays crisp; without a photo only the gradients show */
.ek-opening__bg {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(80% 40% at 100% 20%, color-mix(in srgb, var(--inv-primary) 22%, transparent), transparent 75%),
        radial-gradient(90% 45% at 0% 70%, color-mix(in srgb, var(--inv-accent) 40%, transparent), transparent 75%),
        var(--inv-background);
}
.ek-opening__bg img {
    position: absolute; left: 0; top: -40px; width: 100%; height: calc(100% + 80px); max-width: none;
    object-fit: cover; object-position: 50% 35%; opacity: .6; filter: blur(1.5px) saturate(.8); --inv-parallax: 30px;
}
.ek-opening__bg::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(70% 22% at 50% 76%, color-mix(in srgb, var(--inv-background) 60%, transparent), transparent 85%),
        linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--inv-background) 45%, transparent) 55%, color-mix(in srgb, var(--inv-background) 62%, transparent) 85%, var(--inv-background));
}
.ek-opening__band {
    padding: 3.5rem 1.6rem 3rem;
    background:
        radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, #fff 30%, transparent), transparent 70%),
        color-mix(in srgb, color-mix(in srgb, var(--inv-accent) 30%, var(--inv-background)) 66%, transparent);
}
.ek-opening__band--photos { padding-bottom: 4.6rem; }
.ek-quote { margin: 0; }
.ek-quote p { margin: 0 0 .9rem; font-family: var(--ek-serif); font-style: italic; font-size: 1.18rem; line-height: 1.6; color: color-mix(in srgb, var(--inv-text) 92%, var(--inv-primary)); }
.ek-quote cite { display: block; font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-primary); }

.ek-roundrow {
    display: flex; justify-content: center; gap: .5rem;
    margin: -2.4rem auto 0; padding: 0 1rem; position: relative;
}
.ek-roundrow__item {
    display: block; flex: 0 1 4.6rem; min-width: 0; aspect-ratio: 1; border-radius: 999px; overflow: hidden;
    border: 3px solid var(--ek-surface); box-shadow: 0 0 0 1px var(--ek-line), 0 8px 18px -8px rgb(0 0 0 / .4);
}
.ek-roundrow__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ek-opening__text { padding: 2.4rem 1.6rem 3.25rem; }
.ek-arabic { margin: 0 0 .75rem; font-family: 'Amiri', 'Traditional Arabic', serif; font-size: 1.75rem; line-height: 1.6; color: var(--inv-primary); }
.ek-greeting { font-family: var(--ek-serif); font-style: italic; font-size: 1.3rem; font-weight: 600; color: var(--inv-primary); }
.ek-opening__message { margin: 0; }

/* ---------- couple: portraits in a soft double frame ---------- */

.ek-couple { background: var(--ek-ivory); }
.ek-portrait {
    width: min(14.5rem, 68%); aspect-ratio: 3 / 4; margin: 0 auto 1.1rem; padding: 6px;
    border-radius: 1.4rem; background: var(--ek-surface);
    border: 1px solid var(--ek-line);
    box-shadow: 0 0 0 6px var(--ek-surface), 0 0 0 7px var(--ek-line), 0 22px 40px -24px color-mix(in srgb, var(--inv-primary) 80%, transparent);
}
.ek-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; border-radius: 1rem; display: block; }
.ek-person__name { margin: .9rem 0 .1rem; font-size: 2.7rem; }
.ek-person__full { margin: 0 0 .4rem; font-family: var(--ek-serif); font-size: 1.3rem; font-weight: 600; color: var(--inv-text); }
.ek-person__parents { margin-bottom: .75rem; font-size: .86rem; }
.ek-person__parents strong { display: block; font-weight: 700; }
.ek-insta {
    display: inline-flex; align-items: center; gap: .4rem; padding: .42rem 1rem; border-radius: 999px;
    color: var(--inv-primary); font-size: .8rem; font-weight: 700; text-decoration: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 45%, transparent);
    background: color-mix(in srgb, var(--inv-surface, #fff) 70%, transparent);
}
.ek-couple__amp { margin: 1.75rem 0; font-size: 3.5rem; line-height: 1; }

/* ---------- events: rounded cards with a coloured header band, over the faint cover photo ---------- */

.ek-events {
    background:
        linear-gradient(color-mix(in srgb, var(--inv-background) 84%, transparent), color-mix(in srgb, var(--inv-background) 92%, transparent)),
        var(--ek-photo, none) 50% 30% / cover no-repeat,
        var(--inv-background);
}
.ek-events__intro { max-width: 22rem; margin: -.5rem auto 1.75rem; font-size: .9rem; }

.ek-collage { position: relative; height: 12.5rem; margin: -1rem -.4rem 1.75rem; }
.ek-collage::before {
    content: ''; position: absolute; left: -1rem; right: -1rem; top: 3.2rem; height: 6rem; border-radius: 3rem;
    background: color-mix(in srgb, var(--inv-accent) 28%, transparent);
}
.ek-collage span {
    position: absolute; width: 56%; aspect-ratio: 4 / 3; overflow: hidden;
    border: 4px solid var(--ek-surface); box-shadow: 0 14px 28px -16px rgb(0 0 0 / .5);
}
.ek-collage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ek-collage__a { left: 0; top: 2.5rem; border-radius: 1.4rem 1.4rem 1.4rem 3.5rem; transform: rotate(-3deg); }
.ek-collage__b { right: 0; top: 0; border-radius: 1.4rem 3.5rem 1.4rem 1.4rem; transform: rotate(3deg); }

.ek-event {
    position: relative; overflow: hidden; border-radius: 1.75rem;
    background: color-mix(in srgb, var(--ek-surface) 94%, transparent);
    box-shadow: 0 22px 40px -26px color-mix(in srgb, var(--inv-primary) 85%, transparent), 0 0 0 1px var(--ek-line);
}
.ek-event + .ek-event { margin-top: 1.6rem; }
.ek-event__band {
    padding: 1.15rem 1rem 1.35rem; color: #fff;
    background:
        radial-gradient(80% 140% at 50% 0%, color-mix(in srgb, var(--inv-accent) 35%, transparent), transparent 70%),
        var(--inv-primary);
    border-bottom: 2px solid var(--inv-accent);
}
.ek-event__name { margin: 0; font-family: var(--ek-serif); font-size: 1.85rem; font-weight: 500; letter-spacing: .04em; line-height: 1.2; }
.ek-event__photo {
    width: 5.6rem; height: 5.6rem; margin: -1.6rem auto 0; position: relative; border-radius: 999px; overflow: hidden;
    border: 4px solid var(--ek-surface); box-shadow: 0 0 0 1px var(--ek-line), 0 8px 18px -8px rgb(0 0 0 / .45);
}
.ek-event:has(.ek-event__photo) .ek-event__band { padding-bottom: 2.1rem; }
.ek-event__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ek-event__body { padding: 1rem 1.25rem 1.6rem; }
.ek-event svg { width: 1.05rem; height: 1.05rem; flex: none; fill: none; stroke: var(--inv-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ek-event__line { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: 0 0 .2rem; }
.ek-event__date { font-family: var(--ek-serif); font-size: 1.2rem; font-weight: 600; color: var(--inv-primary); }
.ek-event__time { font-weight: 700; font-size: .95rem; letter-spacing: .03em; color: var(--ek-hi); }
.ek-event__time svg { stroke: var(--ek-hi); }
.ek-event__place { margin: 1rem auto 0; padding-top: .9rem; border-top: 1px dashed var(--ek-line); max-width: 20rem; }
.ek-event__place svg { width: 1.35rem; height: 1.35rem; margin: 0 auto .2rem; display: block; }
.ek-event__venue { margin: 0 0 .15rem; font-family: var(--ek-serif); font-size: 1.3rem; font-weight: 700; line-height: 1.25; color: var(--inv-text); }
.ek-event__address { margin: 0; font-size: .86rem; opacity: .85; }
.ek-event__dress {
    display: inline-flex; align-items: center; gap: .4rem; margin: .9rem 0 0; padding: .35rem .85rem; border-radius: 999px;
    font-size: .8rem; background: var(--ek-soft);
}
.ek-event .inv-maps { margin-top: 1.1rem; }

/* ---------- countdown: a dark band, numbers in gold ---------- */

.ek-countdown {
    color: var(--ek-ivory); overflow: hidden;
    background:
        radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--inv-accent) 22%, transparent), transparent 70%),
        color-mix(in srgb, var(--inv-primary) 92%, #000);
}
.ek-countdown > :not(.ek-photobg) { position: relative; z-index: 1; }
/* photo-gradient ground: the photo drifts a little (data-parallax) under a strong primary gradient */
.ek-photobg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ek-photobg img { position: absolute; left: 0; top: -40px; width: 100%; height: calc(100% + 80px); object-fit: cover; object-position: 50% 35%; display: block; }
.ek-photobg::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--inv-accent) 26%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 80%, transparent), color-mix(in srgb, var(--ek-deep) 92%, transparent));
}
.ek-countdown .ek-eyebrow { color: var(--inv-accent); }
.ek-countdown .ek-title { color: var(--ek-ivory); }
.ek-countdown__date { margin: -.5rem 0 1.25rem; font-family: var(--ek-serif); font-size: 1.15rem; font-style: italic; }
.inv-countdown { gap: .5rem; }
.inv-countdown__item {
    min-width: 4.3rem; padding: .8rem .25rem .7rem; border-radius: .9rem;
    background: color-mix(in srgb, #fff 6%, transparent); border: 1px solid color-mix(in srgb, var(--inv-accent) 55%, transparent);
}
.inv-countdown__value { font-family: var(--ek-serif); font-size: 2.1rem; font-weight: 600; line-height: 1.1; color: var(--inv-accent); }
.inv-countdown__label { font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.ek-countdown .inv-button--outline { color: var(--ek-ivory); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ek-ivory) 60%, transparent); }

/* ---------- love story: compact zig-zag, numbered circles on a gold hairline ---------- */

.ek-love-story { background: var(--ek-ivory); }
.ek-story { list-style: none; margin: 0; padding: .25rem 0; position: relative; }
.ek-story::before { content: ''; position: absolute; top: 1rem; bottom: 1rem; left: 50%; width: 1px; margin-left: -.5px; background: var(--ek-line); }
.ek-story__item {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 2.1rem minmax(0, 1fr);
    grid-template-areas: "text dot aside"; align-items: start; column-gap: .55rem; padding: 0 0 1.75rem;
}
.ek-story__item:last-child { padding-bottom: 0; }
.ek-story__item--flip { grid-template-areas: "aside dot text"; }
.ek-story__text { grid-area: text; text-align: right; }
.ek-story__aside { grid-area: aside; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; text-align: left; }
.ek-story__item--flip .ek-story__text { text-align: left; }
.ek-story__item--flip .ek-story__aside { align-items: flex-end; text-align: right; }
.ek-story__num {
    grid-area: dot; justify-self: center; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 999px;
    background: var(--ek-ivory); border: 1px solid var(--inv-accent); box-shadow: 0 0 0 4px var(--ek-ivory);
    font-family: var(--ek-serif); font-size: .85rem; font-weight: 700; color: var(--ek-hi);
}
.ek-story__title { margin: .2rem 0 0; font-family: var(--ek-serif); font-size: 1.2rem; font-weight: 700; line-height: 1.2; color: var(--inv-primary); overflow-wrap: anywhere; }
.ek-story__rule { display: block; width: 75%; margin: .4rem 0 .45rem auto; border-top: 1px dotted var(--inv-accent); }
.ek-story__item--flip .ek-story__rule { margin-left: 0; margin-right: auto; }
.ek-story__body { margin: 0; font-size: .82rem; line-height: 1.55; overflow-wrap: anywhere; }
.ek-story__date { display: block; padding-top: .15rem; font-family: var(--ek-serif); font-size: 1.15rem; font-style: italic; font-weight: 600; line-height: 1.2; color: var(--ek-hi); }
.ek-story__photo {
    display: block; width: min(6rem, 100%); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 999px;
    border: 3px solid var(--ek-surface); outline: 1px solid var(--ek-line); box-shadow: 0 6px 16px -6px rgb(0 0 0 / .35);
}

/* ---------- gallery: slider on a tinted band ---------- */

.ek-gallery { background: var(--ek-tint); }
.ek-gallery .inv-gallery-slider { grid-template-columns: minmax(0, 1fr); }
.inv-gallery-slider__thumb { border-radius: .6rem; border-color: transparent; }
.inv-gallery-slider__thumb.is-active { border-color: var(--inv-primary); }
.inv-gallery-slider__arrow { background: var(--inv-primary); color: #fff; }
.inv-gallery-slider__stage { border-radius: 1.4rem; border: 5px solid var(--ek-surface); box-shadow: 0 0 0 1px var(--ek-line), 0 22px 40px -22px rgb(0 0 0 / .5); }
.inv-gallery-slider__count { background: color-mix(in srgb, var(--inv-primary) 80%, transparent); color: #fff; }

/* ---------- live streaming, rsvp, wishes ---------- */

.ek-stream { background: var(--ek-ivory); }
.ek-rsvp { background: var(--ek-ivory); }
.ek-wishes { background: var(--ek-tint); }

.inv-form input, .inv-form select, .inv-form textarea { border-radius: .7rem; border-color: var(--ek-line); background: var(--ek-surface); }
.inv-form input:focus, .inv-form select:focus, .inv-form textarea:focus { outline: 2px solid color-mix(in srgb, var(--inv-accent) 60%, transparent); outline-offset: 1px; }
.inv-wish { border-radius: .8rem; background: var(--ek-surface); border: 1px solid color-mix(in srgb, var(--inv-accent) 35%, transparent); }
.inv-wish__name { font-family: var(--ek-serif); font-size: 1.0625rem; font-weight: 700; color: var(--inv-primary); }
.ek-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.ek-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .5rem; border-radius: .9rem; background: color-mix(in srgb, var(--inv-accent) 7%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 22%, transparent);
}
.ek-wishes .inv-wish { padding: .65rem .8rem; }
.ek-wishes .inv-wish__message { font-size: .88rem; line-height: 1.45; }

/* ---------- gift: bank cards, two per row, a gold chip ---------- */

.ek-gift { background: var(--ek-ivory); }
.ek-gift__intro { max-width: 22rem; margin: -.5rem auto 1.25rem; font-size: .9rem; }
.ek-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.ek-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ek-gift .inv-gift__accounts .inv-gift__account {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; min-width: 0; margin: 0;
    padding: .85rem .8rem .8rem; text-align: left; border-radius: 16px; border: 0; color: var(--ek-ivory);
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--inv-accent) 45%, transparent), transparent 60%),
        linear-gradient(135deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 70%, #000));
    box-shadow: 0 14px 26px -16px color-mix(in srgb, var(--inv-primary) 90%, transparent);
}
/* the chip, drawn in CSS */
.ek-gift .inv-gift__accounts .inv-gift__account::before {
    content: ''; width: 1.9rem; height: 1.4rem; border-radius: .3rem; order: -1; margin-bottom: .2rem;
    background:
        linear-gradient(90deg, transparent 45%, rgb(0 0 0 / .18) 45% 55%, transparent 55%),
        linear-gradient(transparent 30%, rgb(0 0 0 / .15) 30% 38%, transparent 38% 62%, rgb(0 0 0 / .15) 62% 70%, transparent 70%),
        linear-gradient(135deg, color-mix(in srgb, var(--inv-accent) 60%, #fff), var(--inv-accent));
}
.ek-gift .inv-gift__account p { margin: 0; }
.ek-gift .inv-gift__accounts .inv-gift__bank { position: absolute; top: .8rem; right: .8rem; font-family: var(--ek-serif); font-size: .95rem; font-weight: 700; }
.ek-gift .inv-gift__logo { height: 1.45rem; padding: .2rem .45rem; border-radius: .35rem; background: #fff; }
.ek-gift .inv-gift__logo img { max-width: 4rem; }
.ek-gift .inv-gift__number {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: clamp(.82rem, 3.6vw, .95rem); font-weight: 600;
    letter-spacing: .03em; line-height: 1.3; overflow-wrap: anywhere; color: #fff;
}
.ek-gift .inv-gift__holder { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; opacity: .85; overflow-wrap: anywhere; }
.ek-gift .inv-gift__accounts .inv-button {
    margin-top: .3rem; padding: .35rem .75rem; font-size: .6rem; letter-spacing: .12em;
    background: transparent; color: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 55%, transparent);
}
.ek-gift .inv-gift__address {
    margin-top: .8rem; padding: 1.1rem; border-radius: 16px; background: var(--ek-surface); font-size: .875rem;
    border: 1px solid var(--ek-line);
}
.ek-gift .inv-gift__address .inv-gift__bank { font-family: var(--ek-serif); font-size: 1.05rem; font-weight: 700; color: var(--inv-primary); }
.ek-gift .inv-gift__address .inv-gift__holder { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- closing: full-bleed photo, dark gradient, thank-you on top ---------- */

.ek-closing {
    position: relative; display: flex; align-items: flex-end; min-height: min(100svh, 46rem); overflow: hidden;
    padding: 6rem 1.9rem 4rem; text-align: center; color: #fff;
    background:
        radial-gradient(90% 45% at 50% 0%, color-mix(in srgb, var(--inv-accent) 30%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-primary), var(--ek-deep));
}
.ek-closing:not(.ek-closing--photo) { min-height: 0; padding-top: 4.5rem; }
.ek-closing__media { position: absolute; inset: 0; overflow: hidden; }
.ek-closing__photo { position: absolute; left: 0; top: -40px; width: 100%; height: calc(100% + 80px); object-fit: cover; object-position: 50% 30%; }
.ek-closing__shade {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--ek-deep) 50%, transparent) 0%, color-mix(in srgb, var(--inv-primary) 16%, transparent) 24%,
        color-mix(in srgb, var(--inv-primary) 70%, transparent) 50%, color-mix(in srgb, var(--ek-deep) 94%, transparent) 72%, var(--ek-deep) 100%);
}
.ek-closing:not(.ek-closing--photo) .ek-closing__shade { display: none; }
.ek-closing__frame {
    position: absolute; inset: 12px; pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--inv-accent) 75%, transparent);
    outline: 1px solid color-mix(in srgb, var(--inv-accent) 45%, transparent); outline-offset: -6px;
}
.ek-closing .ek-corner { width: 84px; height: 84px; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .3)); }
.ek-closing__seal { margin: 0 auto 1rem; }
.ek-closing__inner { position: relative; width: 100%; }
.ek-closing__thanks { margin: 0 0 .4rem; font-family: var(--ek-serif); font-size: 2.1rem; font-weight: 500; letter-spacing: .14em; text-shadow: 0 2px 14px rgb(0 0 0 / .35); }
.ek-closing .ek-divider { margin-bottom: .9rem; }
.ek-closing__names { margin: 0 0 1rem; font-size: 3.3rem; color: #fff; text-shadow: 0 2px 18px rgb(0 0 0 / .3); }
.ek-closing__names .ek-amp { font-family: var(--ek-script); font-style: normal; font-size: .7em; color: color-mix(in srgb, var(--inv-accent) 70%, #fff); }
.ek-closing__message { font-size: .92rem; line-height: 1.7; color: rgb(255 255 255 / .92); }
.ek-closing__signature { margin: 1rem 0 0; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-accent) 55%, #fff); }

/* ---------- floating UI ---------- */

.inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--ek-surface) 90%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-primary) 80%, transparent);
    --inv-nav-active: var(--ek-hi);
    border-color: var(--ek-line);
}
.inv-to-top { background: var(--ek-surface); color: var(--inv-primary); box-shadow: inset 0 0 0 1px var(--ek-line), 0 6px 14px -6px rgb(0 0 0 / .35); }
.inv-music__button { background: var(--inv-primary); box-shadow: 0 0 0 3px var(--ek-surface), 0 0 0 4px var(--inv-accent), 0 6px 16px rgb(0 0 0 / .2); }
.inv-branding { background: var(--inv-background); }

/* the column stays phone-sized: keep the fixed buttons inside it on wide screens */
@media (min-width: 560px) {
    .inv-to-top { left: calc(50% - 240px + 1rem); }
    .inv-music { right: calc(50% - 240px + 1rem); }
}

@media (min-width: 768px) {
    body { font-size: 16px; }
}

/* short phones: keep the cover text above the fold */
@media (max-height: 700px) {
    .ek-cover__quote { display: none; }
    .ek-cover__names { font-size: 2.6rem; }
    .ek-monogram { display: none; }
    .ek-cover__body { padding-bottom: 1.6rem; }
}

/* ---------- motion (only with html.inv-anim; see _shared/inv.css) ---------- */

@keyframes ek-corner-in { from { opacity: 0; scale: .55; } to { opacity: 1; scale: 1; } }
@keyframes ek-sway { 0%, 100% { rotate: 0deg; } 50% { rotate: 2.5deg; } }
html.inv-anim .ek-cover .ek-corner {
    will-change: transform;
    animation: ek-corner-in 1.2s cubic-bezier(.2, .7, .2, 1) both, ek-sway 7s ease-in-out 1.4s infinite;
}
html.inv-anim .ek-cover .ek-corner--tr { animation-delay: .15s, 1.6s; }

/* the monogram seal turns in like a wax stamp */
@keyframes ek-seal { from { opacity: 0; transform: rotate(-90deg) scale(.6); } to { opacity: 1; transform: none; } }
html.inv-anim .ek-cover .ek-monogram { animation: ek-seal 1.1s cubic-bezier(.2, .7, .2, 1) var(--enter-delay, 0s) both; }

/* the blur reveal stays light on big blocks (cards, slider): a small blur only */
html.inv-anim .ek-event[data-reveal="blur"], html.inv-anim .ek-card[data-reveal="blur"],
html.inv-anim .inv-gallery-wrap[data-reveal="blur"], html.inv-anim .inv-gift[data-reveal="blur"],
html.inv-anim .ek-collage[data-reveal="blur"], html.inv-anim .ek-story[data-reveal="blur"] { filter: blur(3px); }
html.inv-anim [data-reveal="blur"].is-revealed { filter: none; }

/* dividers are drawn from the middle (data-reveal="draw") */
html.inv-anim .ek-divider[data-reveal] { transition-duration: 1.2s; transition-delay: .25s; }

/* the round photos pop in one after the other */
html.inv-anim .ek-roundrow__item[data-reveal] { transition-duration: .6s, .7s; }

/* the collage photos slide apart a little when revealed */
html.inv-anim .ek-collage .ek-collage__a { transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) .2s; }
html.inv-anim .ek-collage .ek-collage__b { transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) .35s; }
html.inv-anim .ek-collage:not(.is-revealed) .ek-collage__a { transform: translateX(16%) rotate(0deg); }
html.inv-anim .ek-collage:not(.is-revealed) .ek-collage__b { transform: translateX(-16%) rotate(0deg); }

/* six petals drift down once after "Buka undangan", then stop */
.ek-drift { display: none; position: fixed; top: 0; left: 50%; z-index: 35; width: min(100%, 480px); height: 100vh; transform: translateX(-50%); overflow: hidden; pointer-events: none; }
html.inv-anim .ek-drift { display: block; }
.ek-drift i {
    position: absolute; top: -4%; left: var(--x); width: 13px; height: 10px; opacity: 0; border-radius: 85% 0 85% 0;
    background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--ek-petal, var(--inv-accent)) 45%, #fff), var(--ek-petal, var(--inv-accent)));
}
.ek-drift.is-go i { animation: ek-petal var(--d) cubic-bezier(.3, .2, .5, 1) var(--delay) forwards; }
.ek-drift i:nth-child(1) { --x: 12%; --d: 4.6s; --delay: .1s; }
.ek-drift i:nth-child(2) { --x: 30%; --d: 5.4s; --delay: .5s; --ek-petal: var(--ek-hi); }
.ek-drift i:nth-child(3) { --x: 48%; --d: 4.2s; --delay: .25s; }
.ek-drift i:nth-child(4) { --x: 64%; --d: 5s; --delay: .7s; --ek-petal: var(--ek-hi); }
.ek-drift i:nth-child(5) { --x: 80%; --d: 4.8s; --delay: .35s; }
.ek-drift i:nth-child(6) { --x: 92%; --d: 5.6s; --delay: .9s; --ek-petal: var(--ek-hi); }
@keyframes ek-petal {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
    10% { opacity: .85; }
    50% { transform: translate3d(-26px, 52vh, 0) rotate(220deg); }
    80% { opacity: .7; }
    100% { transform: translate3d(14px, 104vh, 0) rotate(400deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ek-cover--leave { transition: none; }
    .ek-cover .ek-corner, .ek-cover__photo, .ek-cover .ek-monogram, .ek-cover__rule { animation: none !important; }
    .ek-drift { display: none !important; }
}

/* ---------- fit: short phones keep the quote (two lines) instead of dropping it ---------- */

@media (max-height: 700px) {
    .ek-cover__quote {
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden;
        margin-bottom: .7rem; font-size: .92rem; line-height: 1.4;
    }
    .ek-cover__date { margin-bottom: .4rem; }
    .ek-cover__guest { margin-bottom: .9rem; }
    .ek-cover__rule { height: 14px; margin-bottom: .3rem; }
    .ek-cover .ek-corner--bl, .ek-cover .ek-corner--br { width: 48px; height: 48px; }
}