/*
 * Template "Nusantara Kontemporer" (Pernikahan): Indonesian textile heritage, modern layout.
 * Colors from the variant (x-inv.head): --inv-primary (deep bands, buttons, card headers), --inv-accent (gold
 * ornaments & threads), --inv-background (warm ground), --inv-text, --inv-soga (kickers, small labels),
 * --inv-clay (the italic word of a heading), --inv-paper (solid card surface), --inv-songket (second band
 * color), --inv-heading (heading color on the ground).
 *
 * Rhythm: deep primary bands (countdown, gallery, RSVP, closing) alternate with the warm ground.
 *
 * Patterns are original geometric drawings (inspired by batik kawung & parang and the tenun/songket
 * lattice), stored as SVG masks so they always take the variant's colors:
 *   .nk-pat.nk-pat--kawung / --parang / --lattice  (the element's background-color shows through)
 *   .nk-tenun  a slim woven band: threads + a row of diamonds
 */

:root {
    --inv-primary: #1c2a66;
    --inv-accent: #d9a640;
    --inv-background: #f6e9d3;
    --inv-text: #1d1a33;
    --inv-soga: #8e3b1c;
    --inv-clay: #c0391f;
    --inv-paper: #fffaf0;
    --inv-songket: #a3301c;
    --inv-heading: #1c2a66;
    --inv-radius: 8px;

    --nk-col: min(100vw, 480px);
    --nk-serif: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    --nk-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --nk-on: #fff8ec;
    --nk-on-soft: color-mix(in srgb, #fff8ec 88%, var(--inv-primary));
    --nk-gold-on: color-mix(in srgb, var(--inv-accent) 62%, #fff);
    --nk-line: color-mix(in srgb, var(--inv-text) 16%, transparent);
    --nk-deep: color-mix(in srgb, var(--inv-primary) 74%, #000);
    --nk-shadow: 0 22px 40px -26px color-mix(in srgb, var(--inv-primary) 70%, #000);

    /* kawung: four petals meeting around a seed, tiled so the corners form the next flower */
    --nk-kawung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='black' stroke-width='1.3'%3E%3Cellipse cx='10' cy='10' rx='4.4' ry='10.6' transform='rotate(-45 10 10)'/%3E%3Cellipse cx='30' cy='30' rx='4.4' ry='10.6' transform='rotate(-45 30 30)'/%3E%3Cellipse cx='30' cy='10' rx='4.4' ry='10.6' transform='rotate(45 30 10)'/%3E%3Cellipse cx='10' cy='30' rx='4.4' ry='10.6' transform='rotate(45 10 30)'/%3E%3C/g%3E%3Cellipse cx='10' cy='10' rx='1.1' ry='4.6' transform='rotate(-45 10 10)'/%3E%3Cellipse cx='30' cy='30' rx='1.1' ry='4.6' transform='rotate(-45 30 30)'/%3E%3Cellipse cx='30' cy='10' rx='1.1' ry='4.6' transform='rotate(45 30 10)'/%3E%3Cellipse cx='10' cy='30' rx='1.1' ry='4.6' transform='rotate(45 10 30)'/%3E%3Cpath d='M20 17.6 22.4 20 20 22.4 17.6 20Z'/%3E%3Ccircle cx='0' cy='0' r='1.6'/%3E%3Ccircle cx='40' cy='0' r='1.6'/%3E%3Ccircle cx='0' cy='40' r='1.6'/%3E%3Ccircle cx='40' cy='40' r='1.6'/%3E%3C/svg%3E");
    /* parang-inspired: diagonal double bands with lens shapes and dots in between */
    --nk-parang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='M0 29.5 29.5 0M2.5 32 32 2.5M0 2.5 2.5 0M29.5 32 32 29.5'/%3E%3Cpath d='M4.5 12.5c1-4.6 3.4-7 8-8M19.5 27.5c1-4.6 3.4-7 8-8'/%3E%3C/g%3E%3Cellipse cx='9' cy='9' rx='1.6' ry='3.6' transform='rotate(45 9 9)'/%3E%3Cellipse cx='24' cy='24' rx='1.6' ry='3.6' transform='rotate(45 24 24)'/%3E%3Ccircle cx='14.5' cy='14.5' r='1'/%3E%3Ccircle cx='17.5' cy='17.5' r='1'/%3E%3C/svg%3E");
    /* tenun / songket lattice: diamonds inside diamonds, small corner triangles */
    --nk-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5 18.5 10 10 18.5 1.5 10Z' fill='none' stroke='black' stroke-width='1.2'/%3E%3Cpath d='M10 6.5 13.5 10 10 13.5 6.5 10Z'/%3E%3Cpath d='M0 0h3.2L0 3.2ZM20 0v3.2L16.8 0ZM0 20v-3.2L3.2 20ZM20 20h-3.2l3.2-3.2Z'/%3E%3C/svg%3E");
    /* a row of woven diamonds for the tenun band */
    --nk-diamonds: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M12 1 18 6 12 11 6 6Z' fill='none' stroke='black' stroke-width='1.1'/%3E%3Cpath d='M12 4 14.2 6 12 8 9.8 6Z'/%3E%3Cpath d='M0 1.5 4.5 6 0 10.5M24 1.5 19.5 6 24 10.5' fill='none' stroke='black' stroke-width='1.1'/%3E%3C/svg%3E");
    /* songket band tile: gold threads, pucuk rebung triangles pointing inward, bunga tabur diamonds */
    --nk-songket-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'%3E%3Cpath d='M0 0h40v1.6H0zM0 3h40v1H0zM0 32h40v1H0zM0 34.4h40V36H0z'/%3E%3Cg fill='none' stroke='black' stroke-width='1.1'%3E%3Cpath d='M5 6h30L20 16.2Z'/%3E%3Cpath d='M5 30h30L20 19.8Z'/%3E%3Cpath d='M0 10.5 7.5 18 0 25.5M40 10.5 32.5 18 40 25.5'/%3E%3C/g%3E%3Cpath d='M12 7.3h16L20 12.6ZM12 28.7h16L20 23.4ZM20 15.6 22.4 18 20 20.4 17.6 18ZM0 14.4 3.6 18 0 21.6ZM40 14.4 36.4 18 40 21.6Z'/%3E%3Ccircle cx='0' cy='7' r='1'/%3E%3Ccircle cx='40' cy='7' r='1'/%3E%3Ccircle cx='0' cy='29' r='1'/%3E%3Ccircle cx='40' cy='29' r='1'/%3E%3C/svg%3E");
    /* ikat: soft diamonds in white, laid over a color block (works on any variant color) */
    --nk-ikat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5 14.5 8 8 14.5 1.5 8Z' fill='none' stroke='white' stroke-opacity='.22' stroke-width='1.2'/%3E%3Cpath d='M8 6 10 8 8 10 6 8Z' fill='white' fill-opacity='.28'/%3E%3C/svg%3E");
    /* metallic gold for woven thread */
    --nk-gold: linear-gradient(100deg, color-mix(in srgb, var(--inv-accent) 70%, #3a2408) 0%, var(--inv-accent) 22%, color-mix(in srgb, var(--inv-accent) 40%, #fff6dc) 34%, var(--inv-accent) 46%, color-mix(in srgb, var(--inv-accent) 80%, #3a2408) 60%, var(--inv-accent) 80%, color-mix(in srgb, var(--inv-accent) 55%, #fff6dc) 100%);
    /* gold – songket red – gold threads: the slim edge of every deep band */
    --nk-threads: linear-gradient(to bottom,
        var(--inv-accent) 0 2px, transparent 2px 3.5px, var(--inv-songket) 3.5px 6px, transparent 6px 7.5px, var(--inv-accent) 7.5px 9.5px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
p, h1, h2, h3, figure, blockquote, dl, dd, ol { margin: 0; }
img { max-width: 100%; }
a { color: inherit; }

body.nk-body {
    min-height: 100vh;
    background: var(--nk-deep);
    color: var(--inv-text);
    font-family: var(--nk-sans);
    font-size: 15.5px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* wide screens: a quiet kawung field behind the phone-sized column */
body.nk-body::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-color: var(--inv-accent); opacity: .08;
    -webkit-mask: var(--nk-kawung) 0 0 / 64px 64px repeat; mask: var(--nk-kawung) 0 0 / 64px 64px repeat;
}

.nk-preview {
    position: fixed; top: 0; left: 50%; z-index: 60; transform: translateX(-50%);
    padding: .3rem .9rem; border-radius: 0 0 8px 8px; white-space: nowrap;
    background: var(--inv-accent); color: #1b1610; font-size: .7rem; font-weight: 700;
}

/* ---------- patterns ---------- */
.nk-pat {
    display: block;
    background-color: var(--inv-accent);
    -webkit-mask-repeat: repeat; mask-repeat: repeat;
}
.nk-pat--kawung { -webkit-mask-image: var(--nk-kawung); mask-image: var(--nk-kawung); -webkit-mask-size: 36px 36px; mask-size: 36px 36px; }
.nk-pat--parang { -webkit-mask-image: var(--nk-parang); mask-image: var(--nk-parang); -webkit-mask-size: 26px 26px; mask-size: 26px 26px; }
.nk-pat--lattice { -webkit-mask-image: var(--nk-lattice); mask-image: var(--nk-lattice); -webkit-mask-size: 18px 18px; mask-size: 18px 18px; }

/* the woven band (top of the page, card headers, footer): songket red with gold-thread motifs */
.nk-tenun, .nk-songket {
    position: relative; display: block; height: 24px; overflow: hidden;
    background: var(--inv-songket);
}
.nk-tenun::before, .nk-songket::before {
    content: ''; position: absolute; inset: 0;
    background: var(--nk-gold) 0 0 / 300% 100%;
    -webkit-mask: var(--nk-songket-motif) center / auto 100% repeat-x; mask: var(--nk-songket-motif) center / auto 100% repeat-x;
}
/* section edges of the deep bands: a bolder songket band */
.nk-songket { position: absolute; left: 0; right: 0; z-index: 2; height: 30px; transform-origin: center; box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-accent) 40%, transparent); }
.nk-songket--top { top: 0; }
.nk-songket--bottom { bottom: 0; }
/* the gold catches the light once when the band has woven in */
html.inv-anim .nk-songket.is-revealed::before { animation: nk-shimmer 2.4s .5s ease-out both; }
@keyframes nk-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
html.inv-anim .nk-songket[data-reveal="draw"] { transition-duration: 1.1s; transition-timing-function: cubic-bezier(.6, 0, .2, 1); }

.nk-ornament { display: block; width: 150px; height: auto; margin: 1rem auto 0; color: var(--inv-accent); }
/* the gold lines draw outward from the kawung when the heading comes into view */
html.inv-anim .nk-ornament__line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s .35s cubic-bezier(.3, .6, .2, 1); }
html.inv-anim .is-revealed .nk-ornament__line, html.inv-anim .nk-ornament.is-revealed .nk-ornament__line { stroke-dashoffset: 0; }

/* ---------- songket medallion (cover, closing) ---------- */
.nk-medallion { position: relative; width: 124px; height: 124px; filter: drop-shadow(0 6px 14px rgb(0 0 0 / .45)); }
.nk-medallion__art { display: block; width: 100%; height: 100%; overflow: visible; }
.nk-medallion__letters {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .28rem;
    font: 500 1.05rem/1 var(--nk-serif); color: var(--nk-on); letter-spacing: .02em;
}
.nk-medallion__letters i { width: 5px; height: 5px; background: var(--inv-accent); transform: rotate(45deg); }
.nk-medallion--small { width: 88px; height: 88px; margin: 1.6rem auto 0; }
.nk-medallion--small .nk-medallion__letters { font-size: .86rem; }
/* it turns in once (cover on load, closing when revealed); the inner gold ring draws itself */
html.inv-anim .nk-cover .nk-medallion, html.inv-anim .is-revealed .nk-medallion--small { animation: nk-medal-in 1.3s cubic-bezier(.2, .7, .2, 1) .1s both; }
@keyframes nk-medal-in { from { opacity: 0; transform: scale(.72) rotate(-35deg); } to { opacity: 1; transform: none; } }
html.inv-anim .nk-medallion__draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.inv-anim .nk-cover .nk-medallion__draw, html.inv-anim .is-revealed .nk-medallion__draw { animation: nk-ring 1.2s .7s ease-out forwards; }
@keyframes nk-ring { to { stroke-dashoffset: 0; } }

/* ---------- cover ---------- */
.nk-cover {
    position: fixed; top: 0; bottom: 0; left: 50%; z-index: 30; width: var(--nk-col); transform: translateX(-50%);
    overflow: hidden; background: var(--inv-primary); color: var(--nk-on);
}
/* the songket lattice shows only as the slim edge around the arch window */
.nk-cover__frame { position: absolute; inset: 0; opacity: .5; }
.nk-cover__window {
    position: absolute; inset: 12px; overflow: hidden;
    border-radius: 50% 50% 8px 8px / 150px 150px 8px 8px;
    background: var(--nk-deep);
    box-shadow: 0 0 0 1px var(--inv-accent), 0 0 0 4px var(--inv-primary), 0 0 0 5px color-mix(in srgb, var(--inv-accent) 70%, transparent);
}
.nk-cover__photo {
    position: absolute; inset: 0;
    background: var(--nk-photo, linear-gradient(160deg, var(--inv-songket), var(--inv-primary))) center 30% / cover no-repeat;
}
.nk-cover__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgb(0 0 0 / .12) 0%, rgb(0 0 0 / 0) 20%,
        color-mix(in srgb, var(--nk-deep) 62%, transparent) 40%,
        color-mix(in srgb, var(--nk-deep) 94%, transparent) 62%, var(--nk-deep) 100%);
}
/* the opening moment: the photo fades in with a slight zoom, then the woven band draws across */
html.inv-anim .nk-cover__photo { animation: nk-photo-in 2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes nk-photo-in { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
html.inv-anim .nk-cover .inv-enter { animation-duration: .95s; }
html.inv-anim .nk-cover__stripe { animation: nk-draw 1.1s cubic-bezier(.6, 0, .2, 1) 1s both; }
@keyframes nk-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.nk-cover__content {
    position: relative; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .55rem;
    padding: 2rem 1.4rem calc(1.9rem + env(safe-area-inset-bottom)); text-align: center;
}
.nk-cover__crest { margin-bottom: .25rem; }
.nk-cover__title { font-size: .7rem; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--nk-gold-on); }
.nk-cover__names {
    display: flex; flex-direction: column; align-items: center;
    font: 400 clamp(2.6rem, 12vw, 3.5rem)/1 var(--nk-serif); letter-spacing: -.015em;
    overflow-wrap: anywhere; text-shadow: 0 2px 24px rgb(0 0 0 / .35);
}
.nk-cover__amp { font-style: italic; font-weight: 500; font-size: .58em; color: var(--inv-accent); line-height: 1.25; }
.nk-cover__date { font-size: .84rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.nk-cover__quote { max-width: 30ch; font: italic 400 .98rem/1.45 var(--nk-serif); color: var(--nk-on-soft); }
.nk-cover__stripe { width: min(66%, 240px); height: 20px; margin: .5rem 0 .25rem; transform-origin: center; }
.nk-cover__guest p { font-size: .72rem; letter-spacing: .08em; color: var(--nk-on-soft); }
.nk-cover__guest-name { display: block; margin-top: .15rem; font: 500 1.3rem/1.25 var(--nk-serif); }
/* .nk-cover raises the specificity over the generic .inv-button below */
.nk-cover .nk-open {
    margin-top: .7rem; padding: .85rem 1.9rem;
    background: var(--inv-accent); color: #1c1710; font-weight: 700; font-size: .9rem; letter-spacing: .03em;
}
.nk-cover--leave { transition: opacity .8s ease, transform .9s cubic-bezier(.6, 0, .4, 1); }
.nk-cover--gone { opacity: 0; transform: translateX(-50%) translateY(-6%) scale(1.03); }

@media (max-height: 760px) {
    .nk-cover .nk-medallion { width: 100px; height: 100px; }
}
@media (max-height: 660px) {
    .nk-cover .nk-medallion { width: 76px; height: 76px; }
    .nk-cover .nk-medallion__letters { font-size: .85rem; }
    .nk-cover__names { font-size: 2.3rem; }
    .nk-cover__stripe { height: 15px; margin: .2rem 0 0; }
    /* the quote stays, shortened */
    .nk-cover__quote { font-size: .9rem; line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
    .nk-cover__content { gap: .4rem; }
}

/* ---------- page ---------- */
.nk-page {
    position: relative; width: var(--nk-col); min-height: 100vh; margin: 0 auto;
    background: var(--inv-background);
    box-shadow: 0 0 80px rgb(0 0 0 / .35);
    overflow-x: hidden;
}

.nk-section { position: relative; padding: 4.5rem 1.5rem; text-align: center; }
.nk-section:not(.nk-band) + .nk-section:not(.nk-band)::before {
    /* a short songket strip between two light sections */
    content: ''; position: absolute; top: 0; left: 50%; width: 132px; height: 20px; margin-left: -66px;
    background: var(--nk-gold);
    -webkit-mask: var(--nk-songket-motif) center / auto 100% repeat-x, linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
    -webkit-mask-composite: source-in;
    mask: var(--nk-songket-motif) center / auto 100% repeat-x intersect, linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}

.nk-head { position: relative; z-index: 1; margin: 0 -.5rem 2.2rem; padding: 1.4rem .5rem 1.2rem; }
/* a tenun lattice panel behind the heading, fading out at the edges */
.nk-head::before {
    content: ''; position: absolute; inset: 0 -1rem; z-index: -1;
    background-color: color-mix(in srgb, var(--inv-primary) 15%, transparent);
    -webkit-mask: var(--nk-lattice) center / 18px 18px repeat, radial-gradient(ellipse 50% 50% at 50% 50%, #000 35%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask: var(--nk-lattice) center / 18px 18px repeat intersect, radial-gradient(ellipse 50% 50% at 50% 50%, #000 35%, transparent 100%);
}
.nk-band .nk-head::before { background-color: color-mix(in srgb, var(--inv-accent) 20%, transparent); }
.nk-kicker {
    display: inline-flex; align-items: center; gap: .7rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--inv-soga);
}
.nk-kicker::before, .nk-kicker::after { content: ''; width: 18px; height: 1px; background: currentColor; opacity: .7; }
.nk-title { margin-top: .55rem; font: 400 2.3rem/1.1 var(--nk-serif); letter-spacing: -.015em; color: var(--inv-heading); }
/* the two-tone heading: a confident italic word */
.nk-title em {
    /* the italic word sits on an ikat-patterned songket block */
    display: inline-block; max-width: 100%; white-space: nowrap; padding: 0 .26em .06em .2em; border-radius: 3px;
    font-style: italic; font-weight: 500; color: var(--nk-on);
    background: var(--nk-ikat) 0 0 / 12px 12px, var(--inv-songket);
    box-shadow: inset 0 -3px 0 var(--inv-accent);
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.nk-lead { max-width: 34ch; margin: 1.6rem auto 0; line-height: 1.85; }
.nk-lead--small { margin: -1rem auto 1.8rem; font-size: .93rem; }

.nk-card {
    position: relative; overflow: hidden;
    background: var(--inv-paper); color: var(--inv-text); border-radius: var(--inv-radius);
    box-shadow: var(--nk-shadow);
}
.nk-card__stripe { height: 24px; }

.nk-chip {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem;
    padding: .45rem .95rem; border-radius: 999px; text-decoration: none;
    font-size: .8rem; font-weight: 600; color: var(--inv-soga);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-soga) 45%, transparent);
    transition: background-color .2s ease;
}
.nk-chip:hover { background: color-mix(in srgb, var(--inv-soga) 10%, transparent); }

/* ---------- deep bands (countdown, gallery, RSVP, closing) ---------- */
.nk-band { overflow: hidden; background: var(--inv-primary); color: var(--nk-on); }
.nk-band__pattern { position: absolute; inset: 0; background-color: color-mix(in srgb, var(--inv-accent) 8%, transparent); }
.nk-band .nk-pat--parang { -webkit-mask-size: 46px 46px; mask-size: 46px 46px; }
.nk-band .nk-pat--kawung { -webkit-mask-size: 52px 52px; mask-size: 52px 52px; }
.nk-band__inner { position: relative; }
.nk-band::before, .nk-band::after {
    /* slim tenun threads at the top and bottom of the band */
    content: ''; position: absolute; left: 0; right: 0; height: 9.5px; z-index: 1;
    background: var(--nk-threads);
}
.nk-band::before { top: 0; }
.nk-band--edged { padding-top: 5.6rem; padding-bottom: 5.6rem; }
.nk-band--edged::before, .nk-band--edged::after { display: none; }
.nk-band > .nk-head, .nk-band > .nk-card, .nk-band > .nk-gallery__intro { position: relative; margin: -5.6rem -1.5rem 1.4rem; padding: 5.4rem 1.5rem 2.6rem; }
.nk-gallery__intro .nk-head { margin-bottom: 0; }
/* the intro photo fades fully into the band below */
.nk-gallery__intro .nk-photobg::after {
    background:
        radial-gradient(ellipse 70% 45% at 50% 55%, color-mix(in srgb, var(--inv-accent) 14%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 82%, transparent) 0%, color-mix(in srgb, var(--inv-primary) 80%, transparent) 55%, var(--inv-primary) 100%);
}
.nk-gallery__frame { position: relative; z-index: 1; }

/* photo-gradient background: a client photo under the primary color */
.nk-photobg {
    position: absolute; inset: 0; z-index: 0; overflow: hidden;
    background: linear-gradient(160deg, color-mix(in srgb, var(--inv-primary) 80%, var(--inv-songket)), var(--inv-primary) 65%);
}
.nk-photobg__img { position: absolute; inset: -48px 0; background: var(--nk-photo, none) center / cover no-repeat; filter: saturate(.8); }
.nk-photobg::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 70% 45% at 50% 42%, color-mix(in srgb, var(--inv-accent) 14%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 90%, transparent) 0%, color-mix(in srgb, var(--inv-primary) 80%, transparent) 40%, color-mix(in srgb, var(--inv-primary) 84%, transparent) 70%, color-mix(in srgb, var(--inv-primary) 96%, transparent) 100%);
}
.nk-band::after { bottom: 0; }
.nk-band .nk-kicker { color: var(--nk-gold-on); }
.nk-band .nk-title { color: var(--nk-on); }
.nk-band .nk-title em { color: var(--nk-on); }
.nk-band .inv-button { background: var(--inv-accent); color: #1c1710; }

/* ---------- opening ---------- */
.nk-opening { padding-top: 4.2rem; }
.nk-arabic { margin-bottom: 1.1rem; font-family: 'Amiri', 'Traditional Arabic', serif; font-size: 1.8rem; line-height: 1.7; color: var(--inv-heading); }
.nk-opening__greeting { font: italic 500 1.32rem/1.4 var(--nk-serif); color: var(--inv-heading); }
.nk-opening .nk-ornament { margin-top: .8rem; }

/* the quote: a deep card with a parang edge */
.nk-quote {
    display: grid; grid-template-columns: 24px 1fr; margin-top: 2.6rem; overflow: hidden;
    background: var(--inv-primary); color: var(--nk-on); border-radius: var(--inv-radius); text-align: left;
    box-shadow: var(--nk-shadow);
}
.nk-quote__band { background-color: color-mix(in srgb, var(--inv-accent) 55%, transparent); }
.nk-quote__body { position: relative; padding: 1.6rem 1.4rem 1.4rem 1.25rem; }
.nk-quote__mark { position: absolute; top: -.1rem; right: .9rem; font: 400 4.4rem/1 var(--nk-serif); color: var(--inv-accent); }
.nk-quote blockquote { font: italic 400 1.06rem/1.6 var(--nk-serif); }
.nk-quote figcaption { margin-top: .8rem; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--nk-gold-on); }

/* ---------- couple: portraits set left and right on solid arch panels ---------- */
.nk-couple { padding-bottom: 5rem; }
.nk-person { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.nk-person--bride { align-items: flex-end; text-align: right; }
.nk-arch { position: relative; width: min(60vw, 224px); margin: 0 18px 1.8rem 0; }
.nk-person--bride .nk-arch { margin: 0 0 1.8rem 18px; }
.nk-arch::before, .nk-arch__pattern {
    content: ''; position: absolute; inset: 20px -18px -18px 20px; border-radius: 999px 999px 4px 4px;
}
.nk-arch::before { background: var(--inv-primary); }
.nk-arch__pattern { background-color: color-mix(in srgb, var(--inv-accent) 30%, transparent); }
.nk-person--bride .nk-arch::before, .nk-person--bride .nk-arch__pattern { inset: 20px 20px -18px -18px; }
.nk-person--bride .nk-arch::before { background: var(--inv-songket); }
.nk-arch__frame {
    position: relative; display: block; aspect-ratio: 3 / 4; padding: 6px;
    border-radius: 999px 999px 4px 4px; background: var(--inv-paper);
    box-shadow: inset 0 0 0 1px var(--inv-accent);
}
.nk-arch__frame img, .nk-arch__empty {
    display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 999px 999px 2px 2px;
}
.nk-arch__empty {
    display: grid; place-items: center;
    background: linear-gradient(170deg, color-mix(in srgb, var(--inv-primary) 80%, #fff), var(--inv-primary));
    color: var(--inv-accent); font: italic 400 4.5rem/1 var(--nk-serif);
}
.nk-person__label { font-size: .66rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--inv-soga); }
.nk-person__nick { margin-top: .3rem; font: 400 2.8rem/1.02 var(--nk-serif); letter-spacing: -.015em; color: var(--inv-heading); }
.nk-person__name { margin-top: .4rem; font-weight: 600; font-size: 1.02rem; }
.nk-person__parents { max-width: 30ch; margin-top: .6rem; font-size: .92rem; }
.nk-person__parents span { display: block; font-size: .8rem; font-style: italic; color: var(--inv-soga); }

.nk-couple__amp {
    display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 2.4rem 0;
    font: italic 500 3.2rem/1 var(--nk-serif); color: var(--inv-clay);
}
.nk-couple__amp::before, .nk-couple__amp::after { content: ''; width: 64px; height: 1px; background: var(--inv-accent); }

/* ---------- countdown ---------- */
.nk-countdown__date { display: flex; flex-direction: column; align-items: center; margin: 1rem 0 1.8rem; }
.nk-countdown__day { font-size: .78rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--nk-gold-on); }
.nk-countdown__num { font: 400 5.4rem/1 var(--nk-serif); color: var(--inv-accent); }
.nk-countdown__month { font: italic 400 1.25rem/1.2 var(--nk-serif); }

.nk-countdown .inv-countdown { gap: .5rem; }
.nk-countdown .inv-countdown__item {
    flex: 1; min-width: 0; max-width: 5.2rem; padding: .85rem .2rem; border-radius: 6px;
    background: var(--nk-deep); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 65%, transparent);
}
.nk-countdown .inv-countdown__value { font: 400 1.9rem/1.1 var(--nk-serif); }
.nk-countdown .inv-countdown__label { margin-top: .2rem; font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--nk-gold-on); }
.nk-countdown .inv-countdown__done { font: italic 1.05rem/1.5 var(--nk-serif); }
.nk-countdown .inv-countdown__actions { margin-top: 1.4rem; }
.nk-countdown .inv-countdown__actions .inv-button { padding: .6rem 1rem; font-size: .78rem; color: var(--nk-on); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nk-on) 60%, transparent); }

/* ---------- events: solid cards with a colored title band ---------- */
.nk-events { display: grid; gap: 2.2rem; }
.nk-events .nk-head { margin-bottom: .2rem; }
.nk-event {
    position: relative; overflow: hidden; text-align: left;
    background: var(--inv-paper); border-radius: var(--inv-radius);
    box-shadow: var(--nk-shadow);
}
.nk-event__photo { aspect-ratio: 16 / 9; background: var(--nk-photo) center / cover no-repeat, var(--inv-primary); }
.nk-event__head {
    position: relative; display: flex; align-items: center; gap: .9rem;
    padding: 1.05rem 1.25rem 1.2rem; color: var(--nk-on);
    background: linear-gradient(90deg, var(--inv-primary) 40%, transparent 80%), var(--nk-ikat) 0 0 / 14px 14px, var(--inv-primary);
}
.nk-event:nth-of-type(even) .nk-event__head { background: linear-gradient(90deg, var(--inv-songket) 40%, transparent 80%), var(--nk-ikat) 0 0 / 14px 14px, var(--inv-songket); }
/* a single gold thread under the title band */
.nk-event__head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 3px; height: 2px; background: var(--inv-accent); }
.nk-event__no {
    flex: none; display: grid; place-items: center; width: 42px; height: 42px;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    background: var(--inv-accent); color: #1c1710; font: 600 .9rem/1 var(--nk-serif);
}
.nk-event__name { font: 400 1.6rem/1.15 var(--nk-serif); overflow-wrap: anywhere; }
.nk-event__body { padding: .6rem 1.25rem 1.4rem; }
.nk-event__list > div { display: grid; grid-template-columns: 4.6rem 1fr; gap: .8rem; padding: .75rem 0; }
.nk-event__list > div + div { border-top: 1px solid var(--nk-line); }
.nk-event__list dt { padding-top: .2rem; font-size: .64rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--inv-soga); }
.nk-event__list dd { font-size: .94rem; overflow-wrap: anywhere; }
.nk-event__list strong { display: block; font-weight: 700; color: var(--inv-heading); }
.nk-event__address { display: block; margin-top: .15rem; font-size: .88rem; }
.inv-maps .inv-button { width: 100%; margin-top: .8rem; padding: .75rem 1rem; font-size: .88rem; }

/* ---------- love story: a gold thread with diamond nodes, moments on paper ---------- */
.nk-timeline { position: relative; padding: 0 0 0 2.2rem; list-style: none; text-align: left; }
.nk-timeline::before {
    content: ''; position: absolute; top: .6rem; bottom: .6rem; left: .62rem; width: 2px;
    background: linear-gradient(var(--inv-accent), color-mix(in srgb, var(--inv-accent) 30%, transparent));
}
.nk-moment {
    position: relative; margin-bottom: 1.3rem; padding: 1.1rem 1.15rem 1.2rem;
    background: var(--inv-paper); border-radius: var(--inv-radius); box-shadow: var(--nk-shadow);
}
.nk-moment:last-child { margin-bottom: 0; }
.nk-moment__node {
    position: absolute; top: 1.25rem; left: calc(-2.2rem + .62rem + 1px - 8px); width: 16px; height: 16px;
    background: var(--inv-background); border: 1.5px solid var(--inv-accent); transform: rotate(45deg);
}
.nk-moment__node::after { content: ''; position: absolute; inset: 3px; background: var(--inv-clay); }
.nk-moment__date { font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-soga); }
.nk-moment__title { margin-top: .25rem; font: 400 1.45rem/1.25 var(--nk-serif); color: var(--inv-heading); }
.nk-moment__photo { display: block; width: 100%; aspect-ratio: 4 / 3; margin-top: .8rem; object-fit: cover; border-radius: 4px; }
.nk-moment__story { margin-top: .6rem; font-size: .93rem; }

/* ---------- gallery on a deep band ---------- */
.nk-gallery__intro { position: relative; margin: -5.6rem -1.5rem 1.4rem; padding: 5.4rem 1.5rem 2.6rem; }
.nk-gallery__intro .nk-head { margin-bottom: 0; }
/* the intro photo fades fully into the band below */
.nk-gallery__intro .nk-photobg::after {
    background:
        radial-gradient(ellipse 70% 45% at 50% 55%, color-mix(in srgb, var(--inv-accent) 14%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 82%, transparent) 0%, color-mix(in srgb, var(--inv-primary) 80%, transparent) 55%, var(--inv-primary) 100%);
}
.nk-gallery__frame { padding: 7px; border: 1px solid color-mix(in srgb, var(--inv-accent) 70%, transparent); border-radius: var(--inv-radius); background: var(--nk-deep); }
.nk-gallery .inv-gallery { gap: 6px; }
.nk-gallery .inv-gallery__item { border-radius: 4px; }
/* with an odd number of photos the first one spans the row, so the grid ends even */
.nk-gallery .inv-gallery__item:first-child:nth-last-child(odd) { grid-column: span 2; aspect-ratio: 16 / 10; }

/* ---------- live streaming: a deep card ---------- */
.nk-live { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.nk-live__card { padding: 0 1.4rem 1.8rem; background: var(--inv-primary); color: var(--nk-on); }
.nk-live__card .nk-card__stripe { margin: 0 -1.4rem 1.6rem; }
.nk-live__badge {
    display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .8rem; border-radius: 999px;
    font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--nk-gold-on); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 60%, transparent);
}
.nk-live__badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: nk-blink 1.6s ease-in-out infinite; }
@keyframes nk-blink { 50% { opacity: .25; } }
.nk-live__title { font-size: 1.8rem; color: var(--nk-on); }
.nk-live__title em { color: var(--nk-on); }
.nk-live__text { max-width: 32ch; margin: .8rem auto 0; font-size: .93rem; }
.nk-live__note { margin-top: .6rem; font-size: .86rem; font-style: italic; color: var(--nk-on-soft); }
.nk-live .inv-button { margin-top: 1.3rem; background: var(--inv-accent); color: #1c1710; }

/* ---------- shared components ---------- */
.inv-button { background: var(--inv-primary); color: #fff; font-weight: 600; font-size: .9rem; letter-spacing: .01em; }
.inv-button--outline { background: transparent; color: var(--inv-heading); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-heading) 45%, transparent); }

.inv-gift { display: grid; gap: .7rem; text-align: left; }
/* bank & e-wallet cards: solid, two per row, with a deep header; an odd last one spans the row */
.inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.inv-gift__account {
    position: relative; overflow: hidden; min-width: 0; padding: 0 .85rem .9rem;
    background: var(--inv-paper); border-radius: var(--inv-radius); box-shadow: var(--nk-shadow);
}
.inv-gift__accounts .inv-gift__account { display: flex; flex-direction: column; margin: 0; }
.inv-gift__account + .inv-gift__account { margin-top: 0; }
.inv-gift__bank {
    display: flex; align-items: center; min-height: 2.75rem; margin: 0 -.85rem .8rem; padding: .55rem .85rem .7rem;
    background: var(--inv-primary); color: var(--nk-on);
    font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; overflow-wrap: anywhere;
    box-shadow: inset 0 -3px 0 var(--inv-accent);
}
.inv-gift__logo { height: 1.55rem; padding: .2rem .45rem; border-radius: .35rem; }
.inv-gift__logo img { max-width: 5rem; }
.inv-gift__number { margin: 0; font: 700 1rem/1.25 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: .02em; overflow-wrap: anywhere; color: var(--inv-heading); }
.inv-gift__holder { margin: .3rem 0 .75rem; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--inv-soga); overflow-wrap: anywhere; }
.inv-gift__accounts .inv-button { align-self: flex-start; margin-top: auto; padding: .38rem .75rem; font-size: .66rem; }
.inv-gift__address { padding-bottom: 1.1rem; }
.inv-gift__address .inv-gift__bank { background: var(--inv-songket); margin-bottom: .9rem; }
.inv-gift__address .inv-gift__holder { font-size: .82rem; letter-spacing: .04em; text-transform: none; }
.inv-gift__address p:not([class]) { margin: 0 0 .9rem; font-size: .92rem; }
.inv-gift__address .inv-button { padding: .55rem 1.1rem; font-size: .8rem; }

.nk-form { padding: 0 1.3rem 1.5rem; text-align: left; }
.nk-form .nk-card__stripe { margin: 0 -1.3rem 1.4rem; }
.nk-form .inv-form label, .nk-form .inv-form__choices legend { font-size: .84rem; font-weight: 600; }
.nk-form .inv-form input:not([type=radio]):not([type=checkbox]), .nk-form .inv-form select, .nk-form .inv-form textarea {
    padding: .7rem .8rem; border: 1px solid color-mix(in srgb, var(--inv-text) 24%, transparent); border-radius: 4px;
    background: color-mix(in srgb, var(--inv-background) 45%, var(--inv-paper)); color: var(--inv-text);
}
.nk-form .inv-form input:focus, .nk-form .inv-form select:focus, .nk-form .inv-form textarea:focus {
    outline: 2px solid var(--inv-accent); outline-offset: 0; border-color: transparent;
}
.nk-form .inv-form .inv-button { justify-self: stretch; margin-top: .2rem; background: var(--inv-primary); color: #fff; }
.nk-form .inv-button--outline { background: transparent; color: var(--inv-heading); }

/* wishes: compact, in a softly framed scroll box of about three */
.inv-wishes { --inv-wishes-height: 22rem; }
.inv-wishes__list { gap: .55rem; padding: .5rem .4rem .5rem .5rem; border: 1px solid var(--nk-line); border-radius: 4px; scrollbar-color: var(--inv-accent) transparent; }
.inv-wish { padding: .7rem .85rem; border-radius: 0 4px 4px 0; border-left: 3px solid var(--inv-clay); background: color-mix(in srgb, var(--inv-background) 70%, var(--inv-paper)); }
.inv-wish__name { font: 600 .95rem/1.3 var(--nk-serif); color: var(--inv-heading); }
.inv-wish__message { font-size: .9rem; line-height: 1.5; }
.inv-wish__time { font-size: .7rem; }

.inv-checkin { color: #1a1a1a; }

/* ---------- closing ---------- */
.nk-closing { padding: 5.8rem 1.6rem 1.4rem; }
.nk-arch--closing { width: min(56vw, 200px); margin: 0 auto 2rem; }
.nk-arch--closing::before { display: none; }
.nk-arch--closing .nk-arch__frame { background: transparent; box-shadow: inset 0 0 0 1px var(--inv-accent), 0 0 0 6px color-mix(in srgb, var(--inv-accent) 22%, transparent); }
.nk-closing__message { max-width: 34ch; margin: 0 auto; line-height: 1.85; }
.nk-closing__sign { margin-top: 1.4rem; font-size: .76rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--nk-gold-on); }
.nk-closing__names { margin-top: .5rem; font: 400 2.6rem/1.1 var(--nk-serif); overflow-wrap: anywhere; }
.nk-closing__names span { font-style: italic; font-weight: 500; color: var(--inv-accent); }

/* ---------- footer, music ---------- */
.nk-foot { padding-bottom: .75rem; }
/* below the woven band: room for the music button and the auto-scroll pill stacked at the bottom right */
.nk-body .inv-music__space { height: calc(3rem + env(safe-area-inset-bottom)); }
.nk-branding { padding-bottom: 1.5rem; color: var(--inv-text); }
.nk-foot .nk-tenun, .nk-tenun--top { height: 26px; }

.nk-body .inv-music { right: max(1rem, calc(50vw - 240px + 1rem)); }
.nk-body .inv-music__button {
    background: var(--inv-primary); color: var(--inv-accent); font-size: 1.05rem;
    box-shadow: 0 0 0 2px var(--inv-accent), 0 6px 16px rgb(0 0 0 / .3);
}

@media (min-width: 481px) {
    .nk-cover__window { inset: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .nk-cover__photo, .nk-cover__stripe, .nk-live__badge i, .nk-medallion, .nk-songket::before { animation: none !important; }
    .nk-medallion__draw { animation: none !important; stroke-dashoffset: 0 !important; }
    .nk-ornament__line { transition: none !important; stroke-dashoffset: 0 !important; }
    .nk-cover--leave { transition: opacity .3s ease; }
}

/* opening: the photo shows softly through the warm ground (strongest veil behind the text column), kawung batik on top */
.nk-opening { overflow: hidden; }
.nk-opening > * { position: relative; z-index: 1; }
.nk-opening > .nk-photobg { position: absolute; z-index: 0; background: linear-gradient(170deg, color-mix(in srgb, var(--inv-songket) 14%, var(--inv-background)), var(--inv-background) 45%, color-mix(in srgb, var(--inv-primary) 10%, var(--inv-background))); }
.nk-opening .nk-photobg__img { opacity: .9; filter: saturate(.85) blur(1px); }
.nk-opening .nk-photobg::after {
    background:
        radial-gradient(ellipse 62% 48% at 50% 38%, color-mix(in srgb, var(--inv-background) 66%, transparent) 30%, transparent 100%),
        linear-gradient(180deg, var(--inv-background) 0%, color-mix(in srgb, var(--inv-background) 12%, transparent) 22%, color-mix(in srgb, var(--inv-background) 22%, transparent) 72%, var(--inv-background) 100%);
}
.nk-opening > .nk-opening__batik { position: absolute; inset: 0; z-index: 0; background-color: color-mix(in srgb, var(--inv-soga) 13%, transparent); -webkit-mask-size: 52px 52px; mask-size: 52px 52px; }