/*
 * Monokrom Minimalis — a clean black-and-white gallery: ink sections with a fine film grain alternate with warm
 * white paper; client photos are black-and-white prints in a white mat (passe-partout) or full-bleed backgrounds
 * under ink gradients; one red accent used sparingly (thin rules, "&", the time). DM Serif Display headings,
 * Allura for the names only, Poppins for text. Phone-first; on wide screens a centered 460px column.
 * Colors come from the variant: --inv-primary (ink), --inv-accent, --inv-background (paper), --inv-text,
 * --inv-muted, --inv-soft (soft paper), --inv-line. All classes start with "mm-".
 */

:root {
    --inv-primary: #121212;
    --inv-accent: #b3262d;
    --inv-background: #f7f4ee;
    --inv-text: #171717;
    --inv-muted: #555350;
    --inv-soft: #e9e5dc;
    --inv-line: #cdc8bd;
    --inv-radius: 4px;

    --mm-script: 'Allura', 'Segoe Script', cursive;
    --mm-serif: 'DM Serif Display', 'Bodoni Moda', Georgia, serif;
    --mm-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mm-col: 460px;
    /* left/right edge of the column on wide screens (0 on phones) */
    --mm-edge: max(0px, calc((100vw - var(--mm-col)) / 2));

    /* paper grain: the CC0 paper tile turned into transparent light/dark specks (no blend modes: iPhone Safari ignores them) */
    --mm-grain: url('../img/grain-soft.webp');
    /* a stronger grain for the mid-tone photo walls (cover, photo backgrounds) */
    --mm-grain-strong: url('../img/grain-soft-strong.webp');
    --mm-mat: #fbfaf6;
    --mm-on-ink: #f5f2eb;
    --mm-on-ink-soft: rgb(245 242 235 / .78);
    /* the accent lifted so it reads on ink */
    --mm-accent-on-ink: color-mix(in srgb, var(--inv-accent) 62%, #fff);
    --mm-ink-deep: color-mix(in srgb, var(--inv-primary) 82%, #000);
    /* the accent darkened for small text on paper (gold variants stay readable) */
    --mm-accent-text: color-mix(in srgb, var(--inv-accent) 72%, var(--inv-text));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.mm-body {
    margin: 0; min-height: 100vh; background: var(--mm-ink-deep); color: var(--inv-text);
    font: 400 15px/1.7 var(--mm-sans); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
p, h1, h2, h3, figure, blockquote, dl, dd { margin: 0; }
a { color: inherit; }

/* black and white photos */
.mm-bw { filter: grayscale(1) contrast(1.08); }

.mm-script { font-family: var(--mm-script); font-weight: 400; line-height: 1.05; letter-spacing: 0; }
.mm-muted { color: var(--inv-muted); font-size: .9rem; }
.mm-lead { font-size: .93rem; color: var(--inv-text); }
.mm-icon { flex: none; display: inline-block; vertical-align: -.2em; }

/* small caps label after a short red rule */
.mm-kicker {
    display: flex; align-items: center; gap: .75rem;
    font: 500 .66rem/1.35 var(--mm-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--inv-muted);
}
.mm-kicker::before { content: ''; flex: none; width: 1.9rem; height: 2px; background: var(--inv-accent); }
.mm-kicker--center, .mm-heading--center .mm-kicker { justify-content: center; }
.mm-kicker--center::after, .mm-heading--center .mm-kicker::after { content: ''; flex: none; width: 1.9rem; height: 2px; background: var(--inv-accent); }

/* surfaces: warm paper and ink, both with the grain */
.mm-paper {
    background-color: var(--inv-background); color: var(--inv-text);
    background-image: var(--mm-grain); background-size: 300px 300px;
}
.mm-paper--soft { background-color: var(--inv-soft); }
.mm-ink {
    color: var(--mm-on-ink);
    background-color: var(--inv-primary);
    background-image:
        var(--mm-grain),
        radial-gradient(120% 60% at 15% 0%, color-mix(in srgb, #fff 7%, transparent), transparent 60%),
        linear-gradient(180deg, var(--inv-primary), var(--mm-ink-deep));
    background-size: 300px 300px, auto, auto;
}
.mm-ink .mm-kicker { color: var(--mm-on-ink-soft); }
.mm-ink .mm-kicker::before, .mm-ink .mm-kicker::after { background: var(--mm-accent-on-ink); }
.mm-ink .mm-muted { color: var(--mm-on-ink-soft); }

/* a print: white mat around a photo, a soft shadow */
.mm-print {
    position: relative; margin: 0; padding: 7px; background: var(--mm-mat);
    box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 24px 40px -24px rgb(0 0 0 / .6);
}
.mm-print img { display: block; width: 100%; }

/* backdrop on wide screens: the cover photo, black and white, blurred and dark */
.mm-backdrop { position: fixed; inset: 0; z-index: 0; background: var(--mm-ink-deep); }
.mm-backdrop::before {
    content: ''; position: absolute; inset: -40px; background: var(--mm-photo, none) center / cover no-repeat;
    filter: grayscale(1) blur(22px); opacity: .32;
}
.mm-backdrop::after { content: ''; position: absolute; inset: 0; background: var(--mm-grain) 0 0 / 300px 300px; opacity: .6; }

.mm-preview {
    position: fixed; z-index: 60; top: 0; left: var(--mm-edge); right: var(--mm-edge); padding: .35rem .75rem;
    background: var(--inv-accent); color: #fff; font-size: .7rem; text-align: center; letter-spacing: .03em;
}

/* the page column (ink, so the end of the page continues the closing) */
.mm-page {
    position: relative; z-index: 1; width: 100%; max-width: var(--mm-col); min-height: 100vh; margin: 0 auto;
    background: var(--inv-primary); overflow-x: clip;
}
@media (min-width: 520px) { .mm-page { box-shadow: 0 0 70px -20px rgb(0 0 0 / .7); } }

/* ---------- buttons: ink, light, or a hairline ---------- */
.mm-btn, .mm-page .inv-button, .mm-cover .inv-button {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    min-height: 2.75rem; padding: .65rem 1.25rem; border: 0; border-radius: 2px; cursor: pointer;
    background: var(--inv-primary); color: var(--mm-on-ink); text-decoration: none;
    font: 500 .72rem/1.2 var(--mm-sans); letter-spacing: .16em; text-transform: uppercase;
    box-shadow: 0 10px 22px -14px rgb(0 0 0 / .7);
    transition: transform .2s ease, filter .2s ease, background-color .2s ease;
}
.mm-btn:hover, .mm-page .inv-button:hover { filter: brightness(1.3); }
.mm-btn:active, .mm-page .inv-button:active { transform: scale(.97); }
.mm-btn:focus-visible, .mm-page .inv-button:focus-visible, .mm-cover .inv-button:focus-visible { outline: 2px solid var(--inv-accent); outline-offset: 3px; }
.mm-btn--small { min-height: 2.2rem; padding: .45rem .9rem; font-size: .64rem; letter-spacing: .1em; text-transform: none; }
.mm-btn--light, .mm-cover .mm-btn--light { background: var(--mm-on-ink); color: var(--inv-primary); }
.mm-btn--light:hover { filter: none; background: #fff; }
.mm-btn--line, .mm-page .inv-button--outline {
    background: transparent; color: var(--inv-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 60%, transparent);
}
.mm-ink .mm-btn--line, .mm-ink .inv-button--outline { color: var(--mm-on-ink); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55); }
.mm-ink .inv-button:not(.inv-button--outline) { background: var(--mm-on-ink); color: var(--inv-primary); }

/* the print's placard (intro scene) and the initials with a red slash */
.mm-placard {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .15rem .55rem;
    font: 500 .62rem/1 var(--mm-sans); letter-spacing: .22em; color: #3a3a3a;
}
.mm-monogram { display: inline-flex; align-items: center; gap: .35rem; font: 400 .95rem/1 var(--mm-serif); letter-spacing: .04em; color: #111; }
.mm-monogram i { width: 1px; height: .9rem; background: var(--inv-accent); transform: rotate(22deg); }

/* ---------- cover: like the first screen, the photo full-bleed in black and white, the words at the foot ---------- */
.mm-cover {
    position: fixed; z-index: 50; top: 0; bottom: 0; left: var(--mm-edge); right: var(--mm-edge);
    display: flex; overflow-x: hidden; overflow-y: auto; color: var(--mm-on-ink);
    background: var(--inv-primary);
}
.mm-cover__wall { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, var(--inv-primary), var(--mm-ink-deep)); }
.mm-cover__photo { position: absolute; inset: 0; background: var(--mm-photo, none) center 22% / cover no-repeat, #222; transform-origin: 50% 30%; }
/* light at the top for the masthead, the ink rising at the foot under the words */
.mm-cover__wall::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgb(0 0 0 / .42) 0%, transparent 16%, transparent 38%, color-mix(in srgb, var(--inv-primary) 45%, transparent) 52%, color-mix(in srgb, var(--inv-primary) 88%, transparent) 72%, var(--inv-primary) 92%);
}
.mm-cover:not(.mm-cover--photo) .mm-cover__wall { background: radial-gradient(80% 50% at 30% 25%, rgb(255 255 255 / .12), transparent 70%), linear-gradient(180deg, var(--inv-primary), var(--mm-ink-deep)); }
.mm-cover__initials { position: absolute; left: 1.5rem; top: 18%; font: 400 6rem/1 var(--mm-serif); letter-spacing: .08em; color: rgb(255 255 255 / .08); }
/* the grain over the whole cover */
.mm-cover::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--mm-grain) 0 0 / 300px 300px; opacity: .7; }
.mm-cover__inner {
    position: relative; z-index: 1; width: 100%; min-height: 100%;
    padding: 1.3rem 1.5rem 2.2rem;
    display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
}
body:has(.mm-preview) .mm-cover__inner { padding-top: 2.6rem; }
/* the masthead: initials left, the date right, a hairline under them */
.mm-cover__mast {
    display: flex; align-items: center; justify-content: space-between; padding-bottom: .55rem; margin-right: 6.5rem;
    border-bottom: 1px solid rgb(255 255 255 / .3); color: #fff;
}
.mm-cover__mast .mm-monogram { color: #fff; }
.mm-cover__mast .mm-monogram i { background: var(--mm-accent-on-ink); }
.mm-cover__mast-date { font: 500 .62rem/1 var(--mm-sans); letter-spacing: .26em; color: rgb(255 255 255 / .85); }
.mm-cover__text { display: grid; justify-items: start; gap: .45rem; text-align: left; }
.mm-cover .mm-kicker { color: var(--mm-on-ink-soft); }
.mm-cover .mm-kicker::before { background: var(--mm-accent-on-ink); }
.mm-cover__names { margin-top: .1rem; font-size: clamp(2.8rem, 13.5vw, 3.6rem); color: #fff; text-shadow: 0 4px 30px rgb(0 0 0 / .5); }
.mm-cover__names span { font-size: .65em; color: var(--mm-accent-on-ink); }
.mm-cover__date { font: 400 1.05rem/1.3 var(--mm-serif); letter-spacing: .03em; color: var(--mm-on-ink); }
.mm-cover__quote { max-width: 21rem; font-size: .76rem; line-height: 1.55; font-style: italic; color: var(--mm-on-ink-soft); }
.mm-cover__guest { width: 100%; margin-top: .45rem; padding: .6rem 0 .65rem; border-block: 1px solid rgb(255 255 255 / .22); }
.mm-cover__guest p { font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--mm-on-ink-soft); }
.mm-cover__guest-name { display: block; margin-top: .2rem; font: 400 1.12rem/1.3 var(--mm-serif); color: #fff; overflow-wrap: anywhere; }
.mm-open { margin-top: .45rem; padding: .8rem 1.6rem; font-size: .72rem; }
.mm-cover--leave { transition: opacity .8s ease, transform .9s cubic-bezier(.65, 0, .35, 1); }
.mm-cover--gone { opacity: 0; transform: translateY(-4%); }
/* opening moment: the photo settles from a slight zoom, then drifts slowly */
@keyframes mm-settle { from { transform: scale(1.12); filter: grayscale(1) contrast(1.08) brightness(.55); } to { transform: scale(1.02); } }
@keyframes mm-drift { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1%, 1%); } }
html.inv-anim .mm-cover__photo { animation: mm-settle 2.2s cubic-bezier(.2, .7, .2, 1) both, mm-drift 26s ease-in-out 2.2s infinite alternate; }

/* short screens (px steps, never svh): the guest and "Buka Undangan" stay above the fold */
@media (max-height: 760px) {
    .mm-cover__text { gap: .38rem; }
    .mm-cover__names { font-size: clamp(2.5rem, 12vw, 3.1rem); }
    .mm-cover__date { font-size: .95rem; }
    .mm-cover__quote { font-size: .72rem; line-height: 1.5; }
    .mm-cover__guest { margin-top: .3rem; padding: .5rem 0 .55rem; }
}
@media (max-height: 660px) {
    .mm-cover__inner { padding-bottom: 1.7rem; }
    .mm-cover__names { font-size: clamp(2.25rem, 10.5vw, 2.6rem); }
    .mm-cover__quote { font-size: .68rem; line-height: 1.45; }
    .mm-cover__guest-name { font-size: 1rem; }
    .mm-open { min-height: 2.5rem; padding: .65rem 1.4rem; }
}
@media (max-height: 580px) {
    .mm-cover__text { gap: .3rem; }
    .mm-cover__names { font-size: 2.1rem; }
    .mm-cover__date { font-size: .85rem; }
    .mm-cover__quote { font-size: .64rem; }
    .mm-cover__guest { padding: .35rem 0 .4rem; }
    .mm-cover__guest-name { font-size: .95rem; }
}

/* ---------- hero (first screen after opening): full-bleed photo fading into ink ---------- */
.mm-hero {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
    min-height: 88vh; min-height: 88svh; padding: 0 0 2.6rem; color: var(--mm-on-ink); background: var(--inv-primary);
}
.mm-hero:not(.mm-hero--photo) {
    min-height: 0; padding-top: 3.5rem;
    background-image: var(--mm-grain), radial-gradient(90% 60% at 20% 0%, rgb(255 255 255 / .1), transparent 70%);
    background-size: 300px 300px, auto;
}
.mm-hero--photo { min-height: 100vh; min-height: 100svh; max-height: 940px; }
.mm-hero__photo { position: absolute; inset: -44px 0; background: var(--mm-photo, none) center 30% / cover no-repeat, #222; --inv-parallax: 40px; }
.mm-hero__veil {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgb(0 0 0 / .15) 0%, transparent 25%, color-mix(in srgb, var(--inv-primary) 45%, transparent) 55%, color-mix(in srgb, var(--inv-primary) 92%, transparent) 82%, var(--inv-primary) 100%);
}
.mm-hero__text { position: relative; display: grid; justify-items: start; gap: .45rem; padding: 0 1.5rem; text-align: left; }
.mm-hero .mm-kicker { color: var(--mm-on-ink-soft); }
.mm-hero .mm-kicker::before { background: var(--mm-accent-on-ink); }
.mm-hero__names { font-size: clamp(3.3rem, 16vw, 4.3rem); color: #fff; text-shadow: 0 4px 30px rgb(0 0 0 / .5); }
.mm-hero__names span { font-size: .65em; color: var(--mm-accent-on-ink); }
.mm-hero__date { font: 400 1.1rem/1.3 var(--mm-serif); letter-spacing: .03em; }
/* the quiet countdown: serif numbers between hairlines */
.mm-hero__countdown { width: 100%; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / .22); }
.mm-hero__countdown .inv-countdown { justify-content: flex-start; gap: 0; }
.mm-hero__countdown .inv-countdown__item {
    flex: 1; min-width: 0; padding: 0 .4rem; border-radius: 0; background: none; text-align: left;
    display: grid; gap: .15rem;
}
.mm-hero__countdown .inv-countdown__item + .inv-countdown__item { padding-left: .9rem; border-left: 1px solid rgb(255 255 255 / .22); }
.mm-hero__countdown .inv-countdown__value { font: 400 2rem/1 var(--mm-serif); color: #fff; }
.mm-hero__countdown .inv-countdown__label { font-size: .58rem; letter-spacing: .24em; text-transform: uppercase; color: var(--mm-on-ink-soft); }
.mm-hero__countdown .inv-countdown__done { text-align: left; font-size: .85rem; color: var(--mm-on-ink-soft); }

/* reel: ink band, running photos as a contact strip, then the big initials */
.mm-reel {
    position: relative; padding: .6rem 0 3rem; text-align: center; color: var(--mm-on-ink);
    background: var(--inv-primary) var(--mm-grain) 0 0 / 300px 300px;
}
.mm-reel__marquee { --inv-marquee-height: 8.5rem; padding: .55rem 0; border-top: 1px solid rgb(255 255 255 / .14); border-bottom: 1px solid rgb(255 255 255 / .14); }
.mm-reel__marquee img { border-radius: 0; outline: 4px solid var(--mm-mat); outline-offset: -4px; filter: grayscale(1) contrast(1.08); }
.mm-reel__mono { display: flex; justify-content: center; align-items: center; margin-top: 2.2rem; font: 400 4.6rem/1 var(--mm-serif); color: #fff; }
.mm-reel__mono span { display: inline-block; }
.mm-reel__mono span + span { margin-left: 1.1rem; padding-left: 1.1rem; border-left: 1.5px solid var(--mm-accent-on-ink); }
.mm-reel__date { margin-top: 1rem; font-size: .74rem; font-weight: 500; letter-spacing: .5em; color: var(--mm-on-ink-soft); }

/* ---------- sections ---------- */
.mm-main { padding-bottom: 0; }
.mm-section { position: relative; padding: 4rem 1.5rem; text-align: left; }
.mm-section > :where(:not(.mm-bgphoto, .mm-closing__photo, .mm-closing__veil, .mm-closing__ghost)) { position: relative; z-index: 1; }
.mm-heading { display: grid; justify-items: start; gap: .55rem; margin-bottom: 1.8rem; }
.mm-heading--center { justify-items: center; text-align: center; }
.mm-heading__title { font: 400 clamp(2.35rem, 11vw, 2.8rem)/1.02 var(--mm-serif); letter-spacing: -.01em; color: var(--inv-primary); }
.mm-heading__title em { font-style: italic; }
.mm-ink .mm-heading__title { color: #fff; }
.mm-section > .mm-muted { max-width: 22rem; margin: -.7rem 0 1.6rem; }
.mm-ink > .mm-muted, .mm-heading--center + .mm-muted { margin-inline: auto; text-align: center; }

/* photo backgrounds */
.mm-bgphoto { position: absolute !important; inset: 0; z-index: 0 !important; overflow: hidden; background: radial-gradient(110% 60% at 20% 0%, color-mix(in srgb, #fff 12%, var(--inv-primary)), var(--inv-primary) 70%); }
.mm-bgphoto--paper { background: radial-gradient(120% 70% at 85% 0%, var(--inv-soft), var(--inv-background) 75%); }
.mm-bgphoto img {
    position: absolute; left: 0; top: -40px; width: 100%; height: calc(100% + 80px); max-width: none; object-fit: cover;
    opacity: .62; filter: grayscale(1) contrast(1.1);
}
.mm-bgphoto::after {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 52%, transparent), color-mix(in srgb, var(--inv-primary) 74%, transparent) 50%, color-mix(in srgb, var(--inv-primary) 92%, transparent));
}
/* the grain over photo and gradient */
.mm-bgphoto::before { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--mm-grain-strong) 0 0 / 300px 300px, rgb(255 255 255 / .06); opacity: .6; }
.mm-bgphoto--paper::before { background: var(--mm-grain) 0 0 / 300px 300px; opacity: 1; }
.mm-bgphoto--paper img { opacity: .55; filter: grayscale(1) contrast(1.05) blur(.5px); }
.mm-bgphoto--paper::after {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--inv-background) 30%, transparent), color-mix(in srgb, var(--inv-background) 68%, transparent) 34%, color-mix(in srgb, var(--inv-background) 92%, transparent) 62%, var(--inv-background) 86%);
}

/* opening: left-aligned, the verse in an ink block running off the left edge */
.mm-opening { display: grid; gap: 1.1rem; padding-top: 4.5rem; }
.mm-arabic { font-family: 'Amiri', serif; font-size: 1.75rem; line-height: 1.7; text-align: left; color: var(--inv-primary); }
.mm-opening__greeting { font: 400 1.35rem/1.3 var(--mm-serif); color: var(--inv-primary); }
.mm-opening__message { max-width: 22rem; padding-left: 1rem; border-left: 2px solid var(--inv-accent); }
.mm-quote {
    margin: 1.4rem 0 0 -1.5rem; padding: 2.6rem 1.6rem 1.7rem 1.5rem; max-width: calc(100% + .5rem);
    color: var(--mm-on-ink); background: var(--inv-primary) var(--mm-grain) 0 0 / 300px 300px;
    box-shadow: 0 26px 44px -26px rgb(0 0 0 / .75);
}
.mm-quote__mark { position: absolute; top: .35rem; left: 1.3rem; font: 400 4.6rem/1 var(--mm-serif); color: var(--mm-accent-on-ink); }
.mm-quote blockquote { font: italic 400 1.04rem/1.65 var(--mm-serif); }
.mm-quote figcaption { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; font-size: .66rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--mm-on-ink-soft); }
.mm-quote figcaption::before { content: ''; width: 1.6rem; height: 1.5px; background: var(--mm-accent-on-ink); }

/* couple: two prints hung off-center with an ink block behind, placards overlapping */
.mm-couple__intro { max-width: 22rem; margin: -.6rem 0 2rem; font-size: .88rem; color: var(--inv-muted); }
.mm-person { display: grid; }
.mm-person__print { width: 72%; box-shadow: 16px 16px 0 0 var(--inv-primary), 0 30px 46px -26px rgb(0 0 0 / .6); }
.mm-person--right .mm-person__print { justify-self: end; box-shadow: -16px 16px 0 0 var(--inv-primary), 0 30px 46px -26px rgb(0 0 0 / .6); }
.mm-person__photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.mm-person__photo--empty {
    display: grid; place-items: center; background: radial-gradient(90% 70% at 30% 20%, #e7e4de, #b9b4ab);
    font: 400 5rem/1 var(--mm-serif); color: var(--inv-primary);
}
.mm-person__text { display: grid; justify-items: start; gap: .3rem; position: relative; z-index: 1; width: 78%; margin: 1.9rem 0 0 auto; padding-left: 1rem; border-left: 2px solid var(--inv-accent); }
.mm-person--right .mm-person__text { justify-items: end; margin: 1.9rem auto 0 0; padding: 0 1rem 0 0; border-left: 0; border-right: 2px solid var(--inv-accent); text-align: right; }
.mm-person__nickname { font-size: 3.4rem; color: var(--inv-primary); }
.mm-person__role { margin-top: .2rem; }
.mm-person--right .mm-person__role { flex-direction: row-reverse; }
.mm-person__name { font: 400 1.3rem/1.2 var(--mm-serif); color: var(--inv-primary); overflow-wrap: anywhere; }
.mm-person__parents { font-size: .8rem; line-height: 1.6; color: var(--inv-muted); }
.mm-person__parents strong { color: var(--inv-text); font-weight: 500; }
.mm-person .mm-btn { margin-top: .5rem; }
.mm-couple__amp { margin: 1.4rem 0 .6rem; font-size: 4.6rem; line-height: .8; text-align: center; color: var(--inv-accent); }

/* countdown (ink over a photo): big date, serif numbers between hairlines */
.mm-countdown { text-align: center; padding-block: 4.5rem; }
.mm-countdown__date { display: inline-flex; align-items: center; gap: 1rem; margin: 0 auto 2rem; text-align: left; }
.mm-countdown__day { font: 400 5.2rem/.85 var(--mm-serif); color: #fff; }
.mm-countdown__rest { display: grid; gap: .25rem; padding-left: 1rem; border-left: 1.5px solid var(--mm-accent-on-ink); }
.mm-countdown__rest span:first-child { font: 400 1.35rem/1.15 var(--mm-serif); color: #fff; }
.mm-countdown__rest span:last-child { font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--mm-on-ink-soft); }
.mm-countdown .inv-countdown { gap: 0; max-width: 22rem; margin: 0 auto; padding: 1.1rem 0; border-top: 1px solid rgb(255 255 255 / .25); border-bottom: 1px solid rgb(255 255 255 / .25); }
.mm-countdown .inv-countdown__item { flex: 1; min-width: 0; padding: .2rem .2rem; border-radius: 0; background: none; display: grid; gap: .3rem; }
.mm-countdown .inv-countdown__item + .inv-countdown__item { border-left: 1px solid rgb(255 255 255 / .2); }
.mm-countdown .inv-countdown__value { font: 400 2.5rem/1 var(--mm-serif); color: #fff; }
.mm-countdown .inv-countdown__label { font-size: .58rem; letter-spacing: .26em; text-transform: uppercase; color: var(--mm-on-ink-soft); }
.mm-countdown .inv-countdown__actions { margin-top: 1.8rem; gap: .6rem; }
.mm-countdown .inv-countdown__actions .inv-button { font-size: .64rem; }
.mm-countdown .inv-countdown__done { font-size: .9rem; color: var(--mm-on-ink-soft); }

/* events: exhibition plates — a wide print offset left/right, a placard of rows */
.mm-events__intro { max-width: 22rem; margin: -.6rem 0 1.8rem; font-size: .88rem; color: var(--inv-muted); }
.mm-event { display: grid; gap: 1.3rem; }
.mm-event + .mm-event { margin-top: 3.4rem; }
.mm-event__print { width: 90%; }
.mm-event--flip .mm-event__print { justify-self: end; }
.mm-event__photo { aspect-ratio: 3 / 2; object-fit: cover; }
.mm-event__body { display: grid; gap: .9rem; }
.mm-event--flip .mm-event__body { padding-left: 10%; }
.mm-event__name { font: 400 2rem/1.05 var(--mm-serif); color: var(--inv-primary); }
.mm-event__rows { border-top: 1.5px solid var(--inv-primary); }
.mm-event__rows > div { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--inv-line); }
.mm-event__rows dt { padding-top: .2rem; font-size: .6rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-muted); }
.mm-event__rows dd { font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.mm-event__time { font-weight: 600; color: var(--mm-accent-text); }
.mm-event__venue { display: block; font-weight: 600; }
.mm-event__address { display: block; margin-top: .15rem; font-size: .82rem; color: var(--inv-muted); }
.mm-event__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.mm-event__actions .mm-btn { padding-inline: .5rem; font-size: .62rem; letter-spacing: .1em; }
.mm-event__actions .mm-btn:only-child { grid-column: 1 / -1; }

/* love story (ink): a hairline on the left with red marks, prints beside the text */
.mm-timeline { position: relative; margin: 0; padding: 0 0 0 1.4rem; list-style: none; }
.mm-timeline::before { content: ''; position: absolute; left: .3rem; top: .4rem; bottom: .4rem; width: 1px; background: linear-gradient(180deg, rgb(255 255 255 / .35), rgb(255 255 255 / .12)); }
.mm-moment { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; align-items: start; }
.mm-moment--photo { grid-template-columns: minmax(0, 1fr) 6.6rem; }
.mm-moment--photo.mm-moment--flip { grid-template-columns: 6.6rem minmax(0, 1fr); }
.mm-moment--flip .mm-moment__print { grid-row: 1; grid-column: 1; }
.mm-moment + .mm-moment { margin-top: 2.6rem; }
.mm-moment__dot { position: absolute; left: -1.43rem; top: .55rem; width: .65rem; height: .65rem; border-radius: 50%; background: var(--mm-accent-on-ink); box-shadow: 0 0 0 4px var(--inv-primary); }
.mm-moment__date { font: italic 400 1.5rem/1.1 var(--mm-serif); color: #fff; overflow-wrap: anywhere; }
.mm-moment__title { margin-top: .3rem; font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--mm-accent-on-ink); overflow-wrap: anywhere; }
.mm-moment__story { margin-top: .5rem; font-size: .84rem; line-height: 1.65; color: var(--mm-on-ink-soft); overflow-wrap: anywhere; }
.mm-moment__print { padding: 5px; transform: rotate(2deg); }
.mm-moment--flip .mm-moment__print { transform: rotate(-2deg); }
.mm-moment__photo { aspect-ratio: 4 / 5; object-fit: cover; }

/* gallery (paper): 3 columns, the first photo large; black and white until touched */
.mm-gallery .inv-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px; background: var(--mm-mat); box-shadow: 0 26px 44px -28px rgb(0 0 0 / .55); }
.mm-gallery .inv-gallery__item { border-radius: 0; }
.mm-gallery .inv-gallery__item:first-child { grid-column: span 2; grid-row: span 2; }
.mm-gallery .inv-gallery__item img, .mm-gallery .inv-gallery__item video { filter: grayscale(1) contrast(1.08); transition: filter .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.mm-gallery .inv-gallery__item:hover img, .mm-gallery .inv-gallery__item:focus-visible img { filter: none; }
.mm-gallery .inv-gallery-slider__slide img, .mm-gallery .inv-gallery-slider__thumb img { filter: grayscale(1) contrast(1.08); }

/* live streaming (ink over a photo) */
.mm-stream { text-align: center; }
.mm-stream__note { margin: -.6rem 0 1.4rem; font-size: .82rem; font-weight: 500; color: var(--mm-accent-on-ink); }

/* gift: ink bank cards with grain, two per row */
.mm-gift .inv-gift { display: grid; gap: .8rem; }
.mm-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.mm-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.mm-gift .inv-gift__account p { margin: 0; }
.mm-gift .inv-gift__accounts .inv-gift__account {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
    min-width: 0; margin: 0; padding: .9rem; overflow: hidden; text-align: left;
    border-radius: 6px; color: #fff;
    background:
        var(--mm-grain) 0 0 / 300px 300px,
        radial-gradient(120% 80% at 100% 0%, rgb(255 255 255 / .16), transparent 55%),
        linear-gradient(140deg, color-mix(in srgb, var(--inv-primary) 85%, #fff), var(--inv-primary) 55%, var(--mm-ink-deep));
    box-shadow: 0 14px 26px -14px rgb(0 0 0 / .7);
}
/* the red hairline on the card's top edge */
.mm-gift .inv-gift__accounts .inv-gift__account::after { content: ''; position: absolute; left: .9rem; top: 0; width: 1.8rem; height: 2px; background: var(--mm-accent-on-ink); }
/* the chip */
.mm-gift .inv-gift__accounts .inv-gift__account::before {
    content: ''; width: 1.75rem; height: 1.3rem; border-radius: 4px;
    background:
        linear-gradient(90deg, transparent 45%, rgb(0 0 0 / .18) 45% 55%, transparent 55%),
        linear-gradient(0deg, transparent 45%, rgb(0 0 0 / .18) 45% 55%, transparent 55%),
        linear-gradient(135deg, #f1f1f1, #a9a9a9 55%, #e4e4e4);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2);
}
.mm-gift .inv-gift__accounts .inv-gift__bank {
    position: absolute; top: .8rem; right: .8rem; max-width: calc(100% - 3.4rem);
    font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-align: right; overflow-wrap: anywhere;
}
.mm-gift .inv-gift__accounts .inv-gift__logo { height: 1.5rem; padding: .2rem .4rem; border-radius: .25rem; }
.mm-gift .inv-gift__accounts .inv-gift__logo img { max-width: 4rem; }
.mm-gift .inv-gift__accounts .inv-gift__number {
    margin-top: .85rem; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-weight: 500; font-size: .98rem; line-height: 1.3; letter-spacing: .05em; overflow-wrap: anywhere;
}
.mm-gift .inv-gift__accounts .inv-gift__holder { font-size: .6rem; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; opacity: .85; overflow-wrap: anywhere; }
.mm-gift .inv-gift__accounts .inv-button--outline {
    min-height: 0; margin-top: .6rem; padding: .4rem .75rem; border-radius: 2px; font-size: .58rem; letter-spacing: .12em;
    background: rgb(255 255 255 / .1); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5);
}
.mm-gift .inv-gift__address {
    margin: 0; padding: 1.4rem 1.2rem; background: var(--mm-mat); box-shadow: 0 0 0 1px var(--inv-line), 0 20px 36px -26px rgb(0 0 0 / .5);
    display: grid; justify-items: center; gap: .3rem; font-size: .85rem; text-align: center;
}
.mm-gift .inv-gift__address .inv-gift__bank { font-size: .64rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--mm-accent-text); }
.mm-gift .inv-gift__address .inv-gift__holder { font: 400 1.15rem/1.3 var(--mm-serif); }
.mm-gift .inv-gift__address .inv-button { margin-top: .5rem; }

/* rsvp (ink over a photo) & wishes (paper): white cards */
.mm-rsvp { text-align: center; }
.mm-card {
    padding: 1.4rem 1.2rem; border-radius: 2px; background: var(--mm-mat); color: var(--inv-text); text-align: left;
    box-shadow: 0 26px 44px -26px rgb(0 0 0 / .65), 0 0 0 1px color-mix(in srgb, var(--inv-line) 60%, transparent);
}
.mm-ink .mm-card { border-top: 2px solid var(--inv-accent); }
.mm-card .inv-form { gap: .85rem; }
.mm-card .inv-form label, .mm-card .inv-form__choices legend { font-size: .8rem; font-weight: 500; }
.mm-card .inv-form input:not([type=radio]):not([type=checkbox]), .mm-card .inv-form select, .mm-card .inv-form textarea {
    padding: .7rem .85rem; border: 1px solid var(--inv-line); border-radius: 2px; background: #fff;
    color: var(--inv-text); font: 400 .88rem/1.5 var(--mm-sans);
}
.mm-card .inv-form input:focus, .mm-card .inv-form select:focus, .mm-card .inv-form textarea:focus {
    outline: none; border-color: var(--inv-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-primary) 12%, transparent);
}
.mm-card .inv-form__choices label { padding: .4rem .75rem; border: 1px solid var(--inv-line); border-radius: 2px; font-size: .78rem; }
.mm-card .inv-form__choices label:has(input:checked) { border-color: var(--inv-primary); background: var(--inv-soft); }
.mm-card .inv-form button[type=submit] { width: 100%; background: var(--inv-primary); color: var(--mm-on-ink); }
.mm-card .inv-rsvp__deadline { margin-bottom: .8rem; font-size: .78rem; color: var(--inv-muted); }
.mm-card .inv-form__notice { background: var(--inv-soft); }
.mm-wishes .mm-card { --inv-wishes-height: 20rem; }
.mm-wishes .inv-wishes__list { gap: .55rem; }
.mm-wishes .inv-wish { padding: .75rem .9rem; border-radius: 0; background: var(--inv-background); border-left: 2px solid var(--inv-primary); font-size: .82rem; }
.mm-wishes .inv-wish__name { font-size: .85rem; color: var(--inv-primary); }
.mm-wishes .inv-wish__reply { border-left-color: var(--inv-accent); background: #fff; }

/* closing: a full-bleed photo fading into ink, the text at the bottom */
.mm-closing { display: flex; align-items: flex-end; overflow: hidden; min-height: min(92svh, 720px); padding: 9rem 1.5rem 3.4rem; text-align: center; }
.mm-closing--photo { min-height: min(100svh, 800px); padding-top: 14rem; }
.mm-closing__photo { position: absolute; inset: -44px 0 auto; height: calc(100% + 44px); background: var(--mm-photo) center 25% / cover no-repeat; --inv-parallax: 36px; }
.mm-closing__veil {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--inv-primary) 0%, transparent 16%, transparent 34%, color-mix(in srgb, var(--inv-primary) 70%, transparent) 56%, color-mix(in srgb, var(--inv-primary) 96%, transparent) 76%, var(--inv-primary) 100%);
}
.mm-closing__ghost {
    position: absolute; top: 2.5rem; left: 50%; transform: translateX(-50%);
    font: 400 11rem/1 var(--mm-serif); letter-spacing: .05em; white-space: nowrap; color: rgb(255 255 255 / .07);
}
.mm-closing__text { width: 100%; display: grid; justify-items: center; gap: .5rem; }
.mm-closing__thanks { font: 400 clamp(2.9rem, 14vw, 3.5rem)/1 var(--mm-serif); color: #fff; }
.mm-closing__thanks em { font-style: italic; }
.mm-closing__names { margin-top: .5rem; font-size: 3.1rem; color: #fff; text-shadow: 0 2px 16px rgb(0 0 0 / .5); }
.mm-closing__names span { font-size: .7em; color: var(--mm-accent-on-ink); }
.mm-closing__message { max-width: 23rem; margin-top: .4rem; color: var(--mm-on-ink-soft); }
.mm-closing__signature { margin-top: 1rem; font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--mm-on-ink-soft); }

/* branding (must stay visible), on ink */
.mm-branding { color: var(--mm-on-ink-soft); opacity: 1; font-size: .72rem; }
.mm-branding a { color: var(--mm-on-ink); }

/* ---------- floating UI kept inside the column ---------- */
.mm-nav.inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--inv-primary) 92%, transparent);
    --inv-nav-text: rgb(245 242 235 / .72);
    --inv-nav-active: var(--mm-accent-on-ink);
    border-color: rgb(255 255 255 / .14);
}
.inv-music { right: calc(var(--mm-edge) + 1rem); }
.inv-music__button { background: var(--inv-primary); box-shadow: 0 0 0 1px rgb(255 255 255 / .25), 0 10px 20px -10px rgb(0 0 0 / .7); }
.inv-autoscroll { color: var(--inv-primary); font-family: var(--mm-sans); }
.inv-autoscroll--running { background: var(--inv-primary); }
.inv-to-top { left: calc(var(--mm-edge) + 1rem); background: var(--mm-mat); color: var(--inv-primary); border: 1px solid var(--inv-line); }
.inv-qr-tab { right: var(--mm-edge); font-family: var(--mm-sans); color: var(--inv-primary); border-color: var(--inv-line); }
.inv-qr-sheet .inv-checkin { font-family: var(--mm-sans); color: var(--inv-text); }
.inv-checkin__title { color: var(--inv-primary); }

/* reduced motion: no zoom, nothing moves */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .mm-cover__photo { animation: none !important; }
    .mm-cover--leave { transition: opacity .3s ease; }
    .mm-cover--gone { transform: none; }
}

/* ---------- intro scene "Dinding Pameran" (scene.json + sections/_scene; the intro lives in <body>, outside the page) ---------- */
/* the paper wall of the gallery: grain, two spotlight pools from above, a soft floor shadow */
.mm-scene-wall {
    position: absolute; inset: 0; background-color: var(--inv-background);
    background-image:
        radial-gradient(42% 34% at 30% 14%, rgb(255 255 255 / .75), transparent 72%),
        radial-gradient(34% 30% at 76% 16%, rgb(255 255 255 / .6), transparent 72%),
        linear-gradient(180deg, transparent 70%, color-mix(in srgb, var(--inv-soft) 85%, var(--inv-line))),
        var(--mm-grain);
    background-size: auto, auto, auto, 300px 300px;
}
.mm-scene-rail { height: 100%; border-top: 1px solid color-mix(in srgb, var(--inv-primary) 55%, transparent); box-shadow: 0 3px 4px -3px rgb(0 0 0 / .35); }
/* a print in its white mat with the placard; the photo falls back to the initials on ink */
.mm-scene-print {
    display: flex; flex-direction: column; height: 100%; margin: 0; padding: 7px 7px 0; background: var(--mm-mat);
    box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 26px 34px -22px rgb(0 0 0 / .6);
}
.mm-scene-print__photo {
    position: relative; flex: 1; display: grid; place-items: center; overflow: hidden;
    background: radial-gradient(90% 70% at 30% 20%, color-mix(in srgb, var(--inv-primary) 70%, #777), var(--inv-primary));
    font: 400 min(11vw, 6svh, 3rem)/1 var(--mm-serif); letter-spacing: .1em; color: rgb(255 255 255 / .85);
}
.mm-scene-print__photo::before { content: ''; position: absolute; inset: 0; background: var(--mm-scene-photo, none) center 28% / cover no-repeat; filter: grayscale(1) contrast(1.08); }
.mm-scene-print__photo b { font: 400 min(17vw, 9svh, 4.4rem)/1 var(--mm-script); letter-spacing: 0; color: var(--mm-accent-on-ink); }
.mm-scene-print .mm-placard { padding: .45rem .1rem .5rem; font-size: .55rem; }
.mm-scene-print .mm-monogram { font-size: .82rem; }
/* hung on a thin wire from a nail on the rail */
.mm-scene-print--wire { position: relative; height: calc(100% - 3.4rem); margin-top: 3.4rem; }
.mm-scene-print--wire::before {
    content: ''; position: absolute; left: 18%; right: 18%; bottom: 100%; height: 3.4rem;
    background:
        linear-gradient(to top right, transparent calc(50% - .6px), color-mix(in srgb, var(--inv-primary) 70%, transparent) 50%, transparent calc(50% + .6px)) left / 50% 100% no-repeat,
        linear-gradient(to top left, transparent calc(50% - .6px), color-mix(in srgb, var(--inv-primary) 70%, transparent) 50%, transparent calc(50% + .6px)) right / 50% 100% no-repeat;
}
.mm-scene-print--wire::after { content: ''; position: absolute; left: 50%; bottom: calc(100% + 3.4rem - 4px); width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--inv-accent); }
/* the ink contact strip of the reel band: sprocket holes above and below, prints in a row */
.mm-scene-strip {
    display: flex; gap: 6px; height: 100%; padding: 14px 6px; background-color: var(--inv-primary);
    background-image:
        repeating-linear-gradient(90deg, transparent 0 7px, rgb(255 255 255 / .55) 7px 14px, transparent 14px 22px),
        repeating-linear-gradient(90deg, transparent 0 7px, rgb(255 255 255 / .55) 7px 14px, transparent 14px 22px);
    background-size: 100% 5px, 100% 5px; background-position: 0 4px, 0 calc(100% - 4px); background-repeat: repeat-x;
    box-shadow: 0 18px 30px -18px rgb(0 0 0 / .7);
}
.mm-scene-strip i {
    flex: 1; outline: 3px solid var(--mm-mat); outline-offset: -3px;
    background: var(--mm-scene-photo, none) center 28% / cover no-repeat, linear-gradient(160deg, #5a5a5a, #1d1d1d);
    filter: grayscale(1) contrast(1.08);
}
/* the card: the exhibition label on the wall, a white mat, left-aligned after a red rule */
body.mm-body .inv-intro--scene .inv-scene__card {
    top: 60%; aspect-ratio: auto; padding: 1.3rem 1.4rem 1.2rem; text-align: left; place-content: center stretch;
    -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--mm-mat);
    box-shadow: 0 0 0 1px rgb(0 0 0 / .05), 0 24px 34px -24px rgb(0 0 0 / .55);
}
body.mm-body .inv-scene__card .inv-intro__label {
    display: flex; align-items: center; gap: .7rem; font: 500 .62rem/1.35 var(--mm-sans); letter-spacing: .3em; color: var(--inv-muted);
}
body.mm-body .inv-scene__card .inv-intro__label::before { content: ''; flex: none; width: 1.7rem; height: 2px; background: var(--inv-accent); }
body.mm-body .inv-scene__card .inv-intro__names { margin-top: .25rem; font-size: clamp(2.3rem, 10.5vw, 3.1rem); font-family: var(--mm-script); font-weight: 400; line-height: 1.1; color: var(--inv-text); }
body.mm-body .inv-scene__card .inv-intro__rule { width: 100%; margin: .7rem 0 .65rem; background: var(--inv-line); transform-origin: left; }
body.mm-body .inv-scene__card .inv-intro__date { font: 400 1rem/1.3 var(--mm-serif); letter-spacing: .04em; color: var(--mm-accent-text); }
body.mm-body .inv-intro--scene .inv-intro__skip { background: color-mix(in srgb, var(--mm-mat) 85%, transparent); border-color: var(--inv-line); color: var(--inv-text); }