/*
 * Putih Klasik — a luminous, high-end white wedding.
 * Crisp white/ivory satin with one confident accent per variant (deep gold, sage, rose, navy) and real
 * contrast. Real public-domain botanical art (img/, see img/CREDITS.md): a white tree peony, a spray of
 * white Redouté roses, a white camellia; drawn baby's breath and pearl strands; satin, linen and pearl
 * textures in CSS. White sections alternate with deep "photo gradient" bands.
 * Colors from the variant: --inv-primary (accent color, deep), --inv-accent (gold lines), --inv-background
 * (white), --inv-text, --inv-paper (tinted paper, wide backdrop), --inv-deep (the dark bands).
 * Fonts: the client's pair (--inv-font-display for names, --inv-font-heading for titles), Cormorant
 * Garamond for reading, Jost for small labels.
 * Every class of this template starts with "pk-".
 */

:root {
    --inv-primary: #6b4d17;
    --inv-accent: #b98d35;
    --inv-background: #fffdf8;
    --inv-text: #2a2116;
    --inv-paper: #f2eadb;
    --inv-deep: #2f2212;
    --inv-radius: 6px;

    --pk-col: 460px;
    --pk-script: var(--inv-font-display, 'Great Vibes'), 'Pinyon Script', cursive;
    --pk-heading: var(--inv-font-heading, 'Cormorant Garamond'), 'Cormorant Garamond', Georgia, serif;
    --pk-serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    --pk-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --pk-line: color-mix(in srgb, var(--inv-accent) 78%, transparent);
    --pk-line-soft: color-mix(in srgb, var(--inv-accent) 40%, transparent);
    --pk-card: #fff;
    --pk-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    /* the italic accent word on white (deepened so it keeps contrast) */
    --pk-em: color-mix(in srgb, var(--inv-accent) 45%, var(--inv-primary));
    --pk-gold-light: color-mix(in srgb, var(--inv-accent) 62%, #fff);
    --pk-gold-grad: linear-gradient(135deg, color-mix(in srgb, var(--inv-accent) 40%, #fff6dc) 0%, var(--inv-accent) 50%, color-mix(in srgb, var(--inv-accent) 70%, #3a2808) 100%);
    --pk-deep: color-mix(in srgb, var(--inv-deep) 92%, #000);
    --pk-tint: color-mix(in srgb, var(--inv-primary) 7%, var(--inv-background));
    --pk-shadow: 0 24px 44px -30px color-mix(in srgb, var(--inv-deep) 70%, transparent);
    /* fine paper grain (static SVG noise, rendered once as a tile) */
    --pk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .36 0 0 0 0 .26 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    /* satin: broad diagonal sheens */
    --pk-satin:
        linear-gradient(116deg, transparent 0 14%, rgb(255 255 255 / .9) 26%, transparent 40%, color-mix(in srgb, var(--inv-accent) 8%, transparent) 58%, transparent 72%, rgb(255 255 255 / .7) 86%, transparent 96%);
    /* linen: a fine woven crosshatch */
    --pk-linen:
        repeating-linear-gradient(0deg, color-mix(in srgb, var(--inv-text) 1.5%, transparent) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-text) 1.2%, transparent) 0 1px, transparent 1px 4px);
    /* embossed lattice for the wide-screen backdrop */
    --pk-emboss:
        repeating-linear-gradient(45deg, rgb(255 255 255 / .7) 0 1px, rgb(90 70 30 / .045) 1px 2px, transparent 2px 26px),
        repeating-linear-gradient(-45deg, rgb(255 255 255 / .7) 0 1px, rgb(90 70 30 / .045) 1px 2px, transparent 2px 26px);
}

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

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.pk-body {
    margin: 0; min-height: 100vh; overflow-x: hidden;
    font-family: var(--pk-serif); font-size: 1.08rem; line-height: 1.65; font-weight: 500;
    color: var(--inv-text);
    background-color: var(--inv-paper);
    background-image: var(--pk-grain), var(--pk-emboss);
    -webkit-font-smoothing: antialiased;
}
.pk-body img { max-width: 100%; }
.pk-body p { margin: 0; }
.pk-body h1, .pk-body h2, .pk-body h3 { margin: 0; font-weight: 400; }

.pk-page {
    position: relative; max-width: var(--pk-col); min-height: 100vh; margin: 0 auto; overflow: clip;
    background-color: var(--inv-background);
    background-image: var(--pk-grain);
}
@media (min-width: 480px) {
    .pk-page { box-shadow: 0 0 0 1px var(--pk-line-soft), 0 30px 80px -30px rgb(60 45 20 / .35); }
}
.pk-main { position: relative; z-index: 1; }

.pk-preview {
    position: fixed; top: .6rem; left: 50%; z-index: 80; transform: translateX(-50%);
    width: max-content; max-width: calc(100vw - 2rem); padding: .35rem .9rem; border-radius: 999px;
    font: 500 .7rem/1.3 var(--pk-sans); letter-spacing: .03em; text-align: center;
    color: #fff; background: color-mix(in srgb, var(--inv-deep) 88%, transparent);
}

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

.pk-label {
    font: 500 .7rem/1.4 var(--pk-sans); letter-spacing: .32em; text-transform: uppercase; color: var(--inv-primary);
}
.pk-body .pk-title {
    position: relative; isolation: isolate; display: inline-block; margin-top: .35rem;
    font: 500 2.4rem/1.12 var(--pk-heading); letter-spacing: .005em; color: var(--inv-primary);
}
.pk-title em { font-style: italic; color: var(--pk-em); }
/* a soft accent wash behind the title */
.pk-title__wash {
    position: absolute; z-index: -1; left: -8%; right: -8%; bottom: .06em; height: .4em; border-radius: 999px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--inv-accent) 22%, transparent) 22%, color-mix(in srgb, var(--inv-accent) 22%, transparent) 78%, transparent);
}
.pk-lead { max-width: 24rem; margin: 0 auto !important; font-size: 1.1rem; line-height: 1.72; }
.pk-amp { font-family: var(--pk-script); color: var(--inv-accent); }
/* script names: a little air between words */
.pk-cover__names, .pk-person__nick, .pk-event__name, .pk-closing__names { word-spacing: .14em; }

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

/* real botanical art */
.pk-flora {
    position: absolute; z-index: 0; display: block; height: auto; pointer-events: none; user-select: none;
    filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--inv-deep) 22%, transparent));
}
.pk-flora--peony { transform-origin: 50% 90%; }
.pk-flora--rose-spray { transform-origin: 40% 100%; }
.pk-flora--camellia { transform-origin: 55% 100%; }

/* baby's breath */
.pk-breath { display: block; overflow: visible; }
.pk-breath__stems { stroke: color-mix(in srgb, var(--inv-accent) 70%, var(--inv-primary)); }
.pk-breath__florets circle {
    fill: #fff; stroke: color-mix(in srgb, var(--inv-primary) 38%, transparent); stroke-width: .7;
}
.pk-heading--light .pk-breath__stems, .pk-band .pk-breath__stems, .pk-closing .pk-breath__stems { stroke: var(--pk-gold-light); }
.pk-heading--light .pk-breath__florets circle, .pk-band .pk-breath__florets circle, .pk-closing .pk-breath__florets circle { stroke: rgb(255 255 255 / .35); filter: drop-shadow(0 0 2px rgb(255 255 255 / .6)); }

/* pearl strand divider */
.pk-pearls { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: .9rem auto 0; }
.pk-pearls i {
    display: block; width: 4.4rem; height: 9px;
    background: radial-gradient(circle at 38% 34%, #fff 0 16%, #f6f1e8 30%, #ddd3c3 62%, #b8ab96 74%, transparent 77%) 0 50% / 9px 9px repeat-x;
    filter: drop-shadow(0 1px 1px rgb(60 45 20 / .25));
}
.pk-pearls b {
    display: block; width: 11px; height: 11px; transform: rotate(45deg);
    background: var(--pk-gold-grad); box-shadow: 0 0 0 2px var(--inv-background), 0 0 0 3px var(--pk-line-soft);
}
.pk-band .pk-pearls b, .pk-closing .pk-pearls b { box-shadow: 0 0 0 2px transparent, 0 0 0 3px color-mix(in srgb, var(--pk-gold-light) 60%, transparent); }

/* gold filigree corner */
.pk-corner { position: absolute; z-index: 2; width: 64px; height: 64px; pointer-events: none; }
.pk-corner svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pk-corner--tl { top: -4px; left: -4px; }
.pk-corner--tr { top: -4px; right: -4px; transform: scaleX(-1); }
.pk-corner--bl { bottom: -4px; left: -4px; transform: scaleY(-1); }
.pk-corner--br { bottom: -4px; right: -4px; transform: scale(-1, -1); }
.pk-corner__gold { stroke: var(--inv-accent); filter: drop-shadow(.6px .6px 0 color-mix(in srgb, var(--inv-accent) 40%, #3a2808)); }
.pk-corner__leaf path { fill: color-mix(in srgb, var(--inv-accent) 55%, #fff); stroke: var(--inv-accent); stroke-width: .8; }
.pk-corner__pearl { fill: #fbf8f2; stroke: color-mix(in srgb, var(--inv-accent) 60%, transparent); stroke-width: .8; filter: drop-shadow(0 1px 1.5px rgb(60 45 20 / .35)); }
.pk-corner__gem { fill: var(--inv-accent); }

/* pearl medallion (monogram, "&") */
.pk-medal {
    display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
    min-width: 3.3rem; height: 3.3rem; padding: 0 .7rem; border-radius: 999px;
    border: 1px solid var(--pk-line); background: var(--pk-card);
    box-shadow: 0 0 0 4px var(--inv-background), 0 0 0 5px var(--pk-line-soft), 0 10px 20px -12px rgb(60 45 20 / .5);
    font: 600 1rem/1 var(--pk-heading); letter-spacing: .08em; color: var(--inv-primary);
}
.pk-medal i { display: inline-block; width: 1px; height: 1rem; background: var(--inv-accent); transform: rotate(20deg); }

/* arch photo with a thin double line */
.pk-arch {
    position: relative; margin: 0; padding: 5px;
    border: 1px solid var(--pk-line); border-radius: 999px 999px 6px 6px;
    background: var(--pk-card);
    box-shadow: 0 0 0 5px var(--inv-background), 0 0 0 6px var(--pk-line-soft), 0 26px 40px -24px rgb(40 30 15 / .55);
}
.pk-arch img, .pk-arch__empty {
    display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 999px 999px 3px 3px;
}
.pk-arch__empty {
    display: grid; place-items: center; font-family: var(--pk-script); font-size: 3.6rem; color: #fff; white-space: nowrap;
    background:
        radial-gradient(circle at 30% 22%, rgb(255 255 255 / .45), transparent 45%),
        linear-gradient(165deg, color-mix(in srgb, var(--inv-primary) 60%, #fff), var(--inv-primary) 60%, var(--inv-deep));
}

/* section heading */
.pk-heading { position: relative; z-index: 1; margin-bottom: 1.8rem; text-align: center; }
.pk-heading__breath { width: 96px; height: auto; margin: 0 auto .6rem; }
.pk-heading--light .pk-label { color: var(--pk-gold-light); }
.pk-heading--light .pk-title { color: #fff; }
.pk-heading--light .pk-title em { color: var(--pk-gold-light); }
.pk-heading--light .pk-title__wash { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--inv-accent) 30%, transparent) 22%, color-mix(in srgb, var(--inv-accent) 30%, transparent) 78%, transparent); }

/* ---------- cover ---------- */

.pk-cover {
    position: fixed; inset: 0; z-index: 60; width: 100%; max-width: var(--pk-col); margin: 0 auto;
    overflow-x: hidden; overflow-y: auto; text-align: center;
    background: var(--inv-background);
}
.pk-cover--leave { transition: opacity .9s ease, transform .9s cubic-bezier(.6, 0, .3, 1); }
.pk-cover--gone { opacity: 0; transform: translateY(-4%); }

/* luminous white satin with soft accent glows */
.pk-cover__satin {
    position: absolute; inset: 0;
    background:
        radial-gradient(70% 34% at 50% 36%, color-mix(in srgb, var(--inv-accent) 20%, transparent), transparent 72%),
        radial-gradient(80% 26% at 50% 104%, color-mix(in srgb, var(--inv-primary) 14%, transparent), transparent 72%),
        var(--pk-satin), var(--pk-linen), var(--pk-grain),
        var(--inv-background);
}
.pk-cover__frame {
    position: absolute; inset: 12px; z-index: 1; pointer-events: none; border: 1px solid var(--pk-line);
}
.pk-cover__frame::before { content: ''; position: absolute; inset: 4px; border: 1px solid var(--pk-line-soft); }
.pk-cover__frame .pk-corner { width: 70px; height: 70px; }

.pk-cover__inner {
    position: relative; z-index: 2; min-height: 100svh;
    display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
    gap: clamp(.3rem, 1.1svh, .75rem);
    padding: calc(clamp(2rem, 6svh, 3.4rem) + env(safe-area-inset-top)) 1.9rem calc(clamp(1.6rem, 4.2svh, 2.8rem) + env(safe-area-inset-bottom));
}
.pk-cover__mono { min-width: 3rem; height: 3rem; font-size: .95rem; }
.pk-cover__title { font-size: .68rem; letter-spacing: .36em; }

/* the photo stage: arch over an offset deep block, flowers around */
.pk-cover__stage {
    position: relative; height: clamp(150px, 31svh, 300px); aspect-ratio: 3 / 4;
    margin: clamp(.4rem, 1.4svh, 1rem) 0 clamp(.6rem, 1.8svh, 1.2rem);
}
.pk-cover__block {
    position: absolute; inset: 0; border-radius: 999px 999px 8px 8px;
    background:
        radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--inv-accent) 35%, transparent), transparent 50%),
        linear-gradient(160deg, var(--inv-primary), var(--inv-deep));
    transform: translate(14px, 12px);
}
.pk-cover__arch { position: absolute; inset: 0; }
.pk-cover__arch .pk-arch__empty { font-size: clamp(2rem, 6svh, 3rem); }
.pk-cover__roses { z-index: 3; width: 68%; right: -46%; top: -14%; transform: rotate(8deg); }
.pk-cover__peony { z-index: 3; width: 84%; left: -48%; bottom: -6%; transform: rotate(-6deg); }

.pk-body .pk-cover__names {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: .5rem;
    font-family: var(--pk-script); font-size: clamp(2.5rem, 7.2svh, 3.4rem); line-height: 1.12; color: var(--inv-primary);
}
.pk-cover__names .pk-amp { font-size: .72em; }
.pk-cover__date {
    display: flex; align-items: center; gap: .7rem;
    font: 500 .74rem/1.4 var(--pk-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--inv-text);
}
.pk-cover__date::before, .pk-cover__date::after { content: ''; width: 1.8rem; height: 1px; background: var(--pk-gold-grad); }
.pk-cover__quote { max-width: 19.5rem; font-style: italic; font-size: .98rem; line-height: 1.5; color: var(--pk-muted); }

.pk-cover__guest {
    position: relative; width: 100%; max-width: 17.5rem; margin-top: .2rem; padding: .8rem 1rem .75rem;
    border: 1px solid var(--pk-line); background: rgb(255 255 255 / .9);
    box-shadow: 0 16px 30px -24px rgb(40 30 15 / .5);
}
.pk-cover__guest::before { content: ''; position: absolute; inset: 3px; border: 1px solid var(--pk-line-soft); pointer-events: none; }
.pk-cover__to { font: 500 .64rem/1.4 var(--pk-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--inv-primary); }
.pk-cover__name { margin-top: .15rem !important; font-size: 1.3rem; font-weight: 700; line-height: 1.28; overflow-wrap: anywhere; color: var(--inv-text); }
.pk-cover__note { margin-top: .2rem !important; font-size: .8rem; font-style: italic; line-height: 1.38; color: var(--pk-muted); }

.pk-body .pk-open {
    margin-top: .3rem; padding: .85rem 1.7rem; border-radius: 999px;
    font: 500 .76rem/1 var(--pk-sans); letter-spacing: .18em; text-transform: uppercase;
    background: linear-gradient(160deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 70%, var(--inv-deep)));
    color: #fff;
    box-shadow: 0 0 0 3px var(--inv-background), 0 0 0 4px var(--pk-line), 0 14px 26px -12px color-mix(in srgb, var(--inv-deep) 80%, transparent);
}

@media (max-height: 760px) {
    .pk-cover__inner { padding-left: 1.6rem; padding-right: 1.6rem; }
    .pk-cover__frame .pk-corner { width: 58px; height: 58px; }
    .pk-cover__quote { font-size: .92rem; }
    .pk-cover__guest { padding: .6rem .9rem .55rem; }
    .pk-cover__name { font-size: 1.18rem; }
    .pk-cover__note { font-size: .74rem; }
}
@media (max-height: 660px) {
    .pk-cover__inner { gap: .28rem; padding-top: 1.8rem; padding-bottom: 1.5rem; }
    .pk-cover__mono { min-width: 2.6rem; height: 2.6rem; font-size: .85rem; box-shadow: 0 0 0 3px var(--inv-background), 0 0 0 4px var(--pk-line-soft); }
    .pk-cover__stage { height: 23svh; margin: .35rem 0 .7rem; }
    .pk-body .pk-cover__names { font-size: 2.45rem; }
    .pk-cover__quote { font-size: .86rem; line-height: 1.42; }
    .pk-body .pk-open { padding: .75rem 1.5rem; }
}
/* short in-app browser screens: everything a step smaller (the quote stays whole) */
@media (max-height: 600px) {
    .pk-cover__inner { gap: .22rem; padding-top: 1.5rem; padding-bottom: 1.2rem; }
    .pk-cover__frame { inset: 8px; }
    .pk-cover__frame .pk-corner { width: 46px; height: 46px; }
    .pk-cover__title { font-size: .62rem; }
    .pk-cover__stage { height: 21svh; margin: .2rem 0 .45rem; }
    .pk-body .pk-cover__names { font-size: 2.15rem; }
    .pk-cover__quote { font-size: .8rem; line-height: 1.36; }
    .pk-cover__note { display: none; }
}

/* ---------- sections ---------- */

.pk-section { position: relative; overflow: clip; padding: 4.4rem 1.6rem 3.8rem; text-align: center; background-image: var(--pk-satin); }
.pk-section > * { position: relative; z-index: 1; }
.pk-section > .pk-flora, .pk-section > .pk-bgphoto { position: absolute; }
.pk-section > .pk-flora { z-index: 0; }
.pk-linen { background-color: var(--inv-background); background-image: var(--pk-satin), var(--pk-linen); }
.pk-tint {
    background-color: var(--pk-tint);
    background-image: var(--pk-satin), var(--pk-linen);
    box-shadow: inset 0 1px 0 var(--pk-line-soft), inset 0 -1px 0 var(--pk-line-soft);
}

.pk-card {
    position: relative; padding: 1.4rem 1.25rem; border: 1px solid var(--pk-line-soft); border-radius: var(--inv-radius);
    background: var(--pk-card); box-shadow: 0 0 0 4px rgb(255 255 255 / .6), 0 0 0 5px var(--pk-line-soft), var(--pk-shadow);
}

/* deep bands: a client photo under a strong gradient of the deep color (color gradient without a photo) */
.pk-band {
    color: #fff;
    background:
        radial-gradient(70% 40% at 50% 0%, color-mix(in srgb, var(--inv-accent) 22%, transparent), transparent 70%),
        linear-gradient(170deg, color-mix(in srgb, var(--inv-primary) 70%, var(--inv-deep)), var(--pk-deep));
}
.pk-bgphoto { inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.pk-bgphoto img { position: absolute; inset: -40px 0; width: 100%; height: calc(100% + 80px); object-fit: cover; opacity: .55; filter: grayscale(.25) contrast(1.05); }
.pk-bgphoto::after {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--pk-deep) 88%, transparent) 0%, color-mix(in srgb, var(--inv-deep) 72%, transparent) 45%, color-mix(in srgb, var(--pk-deep) 92%, transparent) 100%),
        radial-gradient(80% 50% at 50% 50%, color-mix(in srgb, var(--inv-primary) 30%, transparent), transparent);
}
/* satin band without a photo: deep color with soft sheens */
.pk-band--satin {
    background:
        linear-gradient(116deg, transparent 10%, rgb(255 255 255 / .07) 24%, transparent 38%, rgb(255 255 255 / .05) 66%, transparent 80%),
        radial-gradient(60% 30% at 50% 0%, color-mix(in srgb, var(--inv-accent) 24%, transparent), transparent 70%),
        linear-gradient(175deg, color-mix(in srgb, var(--inv-primary) 62%, var(--inv-deep)), var(--pk-deep));
}
.pk-band .pk-lead { color: rgb(255 255 255 / .92); }

/* opening */
.pk-opening { padding: 0; background-image: none; }
.pk-opening__text { position: relative; overflow: clip; padding: 7.6rem 1.6rem 3.4rem; background-image: var(--pk-satin); }
.pk-opening__text > * { position: relative; z-index: 1; }
.pk-opening > .pk-opening__camellia { z-index: 2; }
/* the soft photo: about a quarter visible under the white ground, lighter behind the text column */
.pk-opening__text > .pk-softphoto {
    position: absolute; inset: 0; z-index: 0; overflow: hidden;
    background:
        radial-gradient(70% 50% at 20% 85%, color-mix(in srgb, var(--inv-accent) 22%, transparent), transparent 70%),
        radial-gradient(60% 45% at 90% 10%, color-mix(in srgb, var(--inv-primary) 12%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-background), var(--pk-tint));
}
.pk-softphoto img { position: absolute; inset: -30px 0; width: 100%; height: calc(100% + 60px); object-fit: cover; opacity: .34; filter: blur(1.5px) saturate(.85); }
.pk-softphoto::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(85% 55% at 50% 52%, color-mix(in srgb, var(--inv-background) 78%, transparent), color-mix(in srgb, var(--inv-background) 30%, transparent) 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-background) 55%, transparent), transparent 30%, transparent 75%, color-mix(in srgb, var(--inv-background) 40%, transparent));
}
.pk-opening__camellia { top: -2.6rem; right: -4.1rem; width: 9rem; transform: rotate(-18deg); }
.pk-arabic { margin-bottom: 1.1rem !important; font-family: 'Amiri', serif; font-size: 1.7rem; line-height: 1.8; color: var(--inv-primary); }
.pk-opening__greeting { font-style: italic; font-size: 1.28rem; font-weight: 600; color: var(--inv-primary); }
.pk-opening__pearls { margin: .9rem auto 1.2rem; }

.pk-opening__band { position: relative; overflow: clip; padding: 3.6rem 1.5rem 3.8rem; }
.pk-opening__band > * { position: relative; z-index: 1; }
.pk-opening__band > .pk-bgphoto { position: absolute; z-index: 0; }
.pk-quote {
    position: relative; margin: 0; padding: 2.6rem 1.4rem 2rem;
    border: 1px solid color-mix(in srgb, var(--pk-gold-light) 60%, transparent);
    background: rgb(255 255 255 / .04);
}
.pk-quote::before { content: ''; position: absolute; inset: 4px; border: 1px solid color-mix(in srgb, var(--pk-gold-light) 25%, transparent); pointer-events: none; }
.pk-quote .pk-corner { width: 52px; height: 52px; }
.pk-quote .pk-corner__gold, .pk-closing .pk-corner__gold { stroke: var(--pk-gold-light); }
.pk-quote__breath { width: 84px; margin: -.6rem auto .9rem; }
.pk-quote blockquote { margin: 0; font-style: italic; font-size: 1.13rem; line-height: 1.72; color: #fff; }
.pk-quote figcaption {
    margin-top: 1rem; font: 500 .7rem/1.4 var(--pk-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--pk-gold-light);
}

/* couple */
.pk-person { display: flex; flex-direction: column; align-items: center; }
.pk-person__stage { position: relative; width: 196px; aspect-ratio: 3 / 4; margin: 0 auto 1.7rem; }
.pk-person__block {
    position: absolute; inset: 0; border-radius: 999px 999px 8px 8px;
    background:
        radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--inv-accent) 35%, transparent), transparent 55%),
        linear-gradient(160deg, var(--inv-primary), var(--inv-deep));
    transform: translate(-14px, 14px);
}
.pk-person--bride .pk-person__block { transform: translate(14px, 14px); }
.pk-person__arch { position: absolute; inset: 0; }
.pk-person__flora { z-index: 2 !important; }
.pk-person--groom .pk-person__flora { width: 128px; right: -84px; bottom: -34px; transform: rotate(12deg); }
.pk-person--bride .pk-person__flora { width: 104px; left: -72px; bottom: -40px; scale: -1 1; transform: rotate(10deg); }
.pk-person__role { font-size: .64rem; letter-spacing: .28em; }
.pk-person__nick { margin-top: .1rem !important; font-family: var(--pk-script); font-size: 3.1rem; line-height: 1.25; color: var(--inv-primary); }
.pk-body .pk-person__name { font-family: var(--pk-heading); font-size: 1.36rem; font-weight: 600; letter-spacing: .02em; line-height: 1.3; color: var(--inv-text); }
.pk-person__parents { margin-top: .6rem !important; font-size: 1.04rem; line-height: 1.55; color: var(--pk-muted); }
.pk-person__parents strong { font-weight: 700; color: var(--inv-text); }
.pk-body .pk-ig { margin-top: 1rem; padding: .5rem 1.05rem; font: 500 .74rem/1 var(--pk-sans); letter-spacing: .06em; }

.pk-couple__amp { display: flex !important; width: max-content; margin: 2.6rem auto !important; padding: 0; }
.pk-couple__amp span { padding-top: .35rem; font-family: var(--pk-script); font-size: 2.1rem; line-height: 1; color: var(--inv-accent); }

/* countdown (deep band) */
.pk-countdown { padding-bottom: 4rem; }
.pk-countdown__roses { width: 112px; top: -26px; right: -46px; transform: rotate(196deg); }
.pk-cal.inv-cal {
    --inv-cal-bg: #fff;
    --inv-cal-text: var(--inv-text);
    --inv-cal-mark: var(--pk-em);
    position: relative; max-width: 320px; margin: 0 auto 1.8rem; padding: 1.3rem 1.15rem 1rem; border-radius: 4px;
    border: 1px solid var(--pk-line);
    box-shadow: 0 0 0 4px rgb(255 255 255 / .14), 0 0 0 5px color-mix(in srgb, var(--pk-gold-light) 55%, transparent), 0 28px 46px -24px rgb(0 0 0 / .7);
    text-align: center; color: var(--inv-text);
}
.pk-cal .inv-cal__month { font-family: var(--pk-script); font-size: 2.3rem; color: var(--inv-primary); }
.pk-cal .inv-cal__year { font-family: var(--pk-sans); font-weight: 500; letter-spacing: .24em; color: var(--inv-primary); }
.pk-cal .inv-cal__dow { font-family: var(--pk-sans); font-weight: 500; }
.pk-cal .inv-cal__day { font-family: var(--pk-serif); font-size: 1.05rem; font-weight: 600; }
.pk-cal .inv-cal__note { font-style: italic; font-size: 1rem; }
.pk-countdown .inv-countdown { gap: .5rem; }
.pk-countdown .inv-countdown__item {
    position: relative; min-width: 0; width: 4.3rem; padding: .75rem .2rem .6rem; border-radius: 999px 999px 6px 6px;
    border: 1px solid color-mix(in srgb, var(--pk-gold-light) 60%, transparent);
    background: linear-gradient(180deg, rgb(255 255 255 / .14), rgb(255 255 255 / .04));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .2);
}
.pk-countdown .inv-countdown__value { font-family: var(--pk-heading); font-size: 1.8rem; font-weight: 600; line-height: 1.1; color: var(--pk-gold-light); }
.pk-countdown .inv-countdown__label { margin-top: .2rem; font: 500 .58rem/1.2 var(--pk-sans); letter-spacing: .16em; text-transform: uppercase; color: #fff; opacity: .9; }
.pk-countdown .inv-countdown__done { font-style: italic; }
.pk-countdown .inv-countdown__actions { margin-top: 1.5rem; }
.pk-countdown .inv-countdown__actions .inv-button {
    padding: .6rem 1rem; font: 500 .7rem/1.2 var(--pk-sans); letter-spacing: .05em;
    background: rgb(255 255 255 / .08); color: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pk-gold-light) 70%, transparent);
}

/* events (white linen) */
.pk-events { padding-bottom: 3.8rem; }
.pk-events__peony { width: 118px; top: 13.6rem; right: -40px; transform: rotate(-12deg); }
.pk-collage { position: relative; height: 10.5rem; margin: 0 -.25rem 1.6rem; }
.pk-collage::before {
    content: ''; position: absolute; left: -1.6rem; right: -1.6rem; top: 2.2rem; height: 5.4rem;
    background: linear-gradient(90deg, color-mix(in srgb, var(--inv-primary) 85%, var(--inv-deep)), var(--inv-primary));
}
.pk-collage__photo {
    position: absolute; width: 54%; height: 7.4rem; object-fit: cover;
    border: 4px solid #fff; box-shadow: 0 16px 28px -16px rgb(30 20 10 / .6);
}
.pk-collage__photo:first-child { left: 0; top: 2.8rem; border-radius: 0 0 3.2rem 0; }
.pk-collage__photo:last-child { right: 0; top: 0; border-radius: 0 3.2rem 0 0; }
html.inv-anim .pk-collage__photo { transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
html.inv-anim .pk-collage:not(.is-revealed) .pk-collage__photo:first-child { transform: translateX(-18px) rotate(-3deg); }
html.inv-anim .pk-collage:not(.is-revealed) .pk-collage__photo:last-child { transform: translateX(18px) rotate(3deg); }

.pk-event {
    position: relative; overflow: hidden; margin-top: 1.5rem; border-radius: 2.4rem 2.4rem 8px 8px;
    background: #fff;
    box-shadow: 0 0 0 1px var(--pk-line-soft), 0 0 0 5px rgb(255 255 255 / .8), 0 0 0 6px var(--pk-line-soft), var(--pk-shadow);
}
.pk-event__band {
    padding: 1rem 1rem .95rem; border-radius: 2.4rem 2.4rem 0 0;
    background:
        radial-gradient(60% 120% at 50% 0%, color-mix(in srgb, var(--inv-accent) 30%, transparent), transparent 70%),
        linear-gradient(160deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 55%, var(--inv-deep)));
}
.pk-event__pearls { margin: 0 auto .1rem; }
.pk-event__pearls i { width: 3rem; }
.pk-event__band .pk-pearls b { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pk-gold-light) 50%, transparent); }
.pk-body .pk-event__name { font-family: var(--pk-script); font-size: 2.45rem; line-height: 1.2; color: #fff; text-shadow: 0 1px 8px rgb(0 0 0 / .2); }
.pk-event__body { display: grid; justify-items: center; gap: .3rem; padding: 1.3rem 1.25rem 1.7rem; }
.pk-event__photo { width: 74%; margin: 0 0 .8rem; padding: 4px; border: 1px solid var(--pk-line); border-radius: 999px 999px 6px 6px; background: #fff; }
.pk-event__photo img { display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 999px 999px 3px 3px; }
.pk-event svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--inv-primary); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pk-event__time { display: inline-flex; align-items: center; gap: .4rem; font: 700 1.18rem/1.3 var(--pk-serif); color: var(--inv-primary); }
.pk-event__date { font-weight: 700; font-size: 1.1rem; }
.pk-event__place { display: grid; justify-items: center; gap: .1rem; max-width: 20rem; margin-top: .6rem; padding-top: .8rem; border-top: 1px solid var(--pk-line-soft); }
.pk-event__place svg { margin-bottom: .15rem; }
.pk-event__venue { display: block; font-weight: 700; font-size: 1.12rem; line-height: 1.35; }
.pk-event__address { display: block; color: var(--pk-muted); font-size: 1rem; line-height: 1.45; }
.pk-event__dress {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem !important; padding: .4rem .9rem; border-radius: 999px;
    background: var(--pk-tint); border: 1px solid var(--pk-line-soft); font-size: .96rem;
}
.pk-event__maps { margin-top: .7rem; }
.pk-body .inv-maps .inv-button { padding: .72rem 1.4rem; border-radius: 999px; font: 500 .72rem/1 var(--pk-sans); letter-spacing: .14em; text-transform: uppercase; }

/* love story (tinted paper): a zig-zag programme with the line in the middle */
.pk-story { padding-left: 1rem; padding-right: 1rem; }
.pk-timeline { position: relative; margin: 0; padding: .4rem 0 0; list-style: none; }
.pk-timeline::before {
    content: ''; position: absolute; top: 0; bottom: .5rem; left: 50%; width: 1px; transform: translateX(-50%);
    background: linear-gradient(transparent, var(--pk-line) 2.5rem, var(--pk-line-soft) 88%, transparent);
}
.pk-moment {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr);
    grid-template-areas: "body dot meta"; column-gap: .55rem; align-items: start;
}
.pk-moment--flip { grid-template-areas: "meta dot body"; }
.pk-moment + .pk-moment { margin-top: 2.1rem; }
.pk-moment__dot {
    grid-area: dot; position: relative; z-index: 1; display: grid; place-items: center; width: 2rem; height: 2rem; margin-top: .1rem;
    border-radius: 50%; background: var(--inv-primary); box-shadow: 0 0 0 3px var(--pk-tint), 0 0 0 4px var(--pk-line);
    font: 500 .7rem/1 var(--pk-sans); letter-spacing: .02em; color: #fff;
}
.pk-moment__body { grid-area: body; min-width: 0; text-align: right; }
.pk-moment--flip .pk-moment__body { text-align: left; }
.pk-body .pk-moment__title { font-family: var(--pk-heading); font-size: 1.16rem; font-weight: 700; line-height: 1.25; color: var(--inv-primary); overflow-wrap: anywhere; }
.pk-moment__rule { display: block; width: 3.2rem; max-width: 70%; margin: .45rem 0 .45rem auto; border-top: 1px solid var(--inv-accent); }
.pk-moment--flip .pk-moment__rule { margin-left: 0; margin-right: auto; }
.pk-moment__text { font-size: .95rem; line-height: 1.5; color: var(--pk-muted); overflow-wrap: anywhere; }
.pk-moment__meta { grid-area: meta; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; text-align: left; }
.pk-moment--flip .pk-moment__meta { align-items: flex-end; text-align: right; }
.pk-moment__date { font-style: italic; font-size: 1.24rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; color: var(--pk-em); }
.pk-moment__photo {
    width: min(5.4rem, 100%); aspect-ratio: 1; margin: 0; padding: 3px; border-radius: 50%;
    border: 1px solid var(--pk-line); background: #fff; box-shadow: 0 0 0 3px var(--pk-tint), 0 0 0 4px var(--pk-line-soft);
}
.pk-moment__photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pk-moment__breath { width: 3.8rem; height: auto; margin-top: .3rem; }

/* gallery (deep satin band) */
.pk-gallery { padding-left: 1.25rem; padding-right: 1.25rem; }
.pk-gallery .inv-gallery-slider { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
.pk-gallery .inv-gallery-slider__thumb { border-radius: 999px 999px 3px 3px; border: 1px solid color-mix(in srgb, var(--pk-gold-light) 45%, transparent); padding: 2px; opacity: .7; }
.pk-gallery .inv-gallery-slider__thumb img { border-radius: 999px 999px 2px 2px; }
.pk-gallery .inv-gallery-slider__thumb.is-active { opacity: 1; border-color: var(--pk-gold-light); box-shadow: 0 0 0 1px var(--pk-gold-light); }
.pk-gallery .inv-gallery-slider__arrow { background: rgb(255 255 255 / .1); color: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pk-gold-light) 70%, transparent); font-family: var(--pk-serif); }
.pk-gallery .inv-gallery-slider__stage {
    aspect-ratio: 4 / 4.7; margin: 7px; border-radius: 50% 50% 4px 4px / 26% 26% 4px 4px;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--inv-deep) 80%, transparent), 0 0 0 7px var(--pk-gold-light), 0 30px 50px -26px rgb(0 0 0 / .8);
}
.pk-gallery .inv-gallery-slider__count { background: color-mix(in srgb, var(--inv-deep) 80%, transparent); font-family: var(--pk-sans); }

/* live streaming (deep band) */
.pk-live__card {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .85rem; padding: 1.9rem 1.4rem;
    border: 1px solid color-mix(in srgb, var(--pk-gold-light) 60%, transparent); background: rgb(255 255 255 / .05);
}
.pk-live__card::before { content: ''; position: absolute; inset: 4px; border: 1px solid color-mix(in srgb, var(--pk-gold-light) 25%, transparent); pointer-events: none; }
.pk-live__icon {
    display: grid; place-items: center; width: 3.3rem; height: 3.3rem; border-radius: 50%;
    border: 1px solid var(--pk-gold-light); box-shadow: 0 0 0 4px rgb(255 255 255 / .06), 0 0 0 5px color-mix(in srgb, var(--pk-gold-light) 40%, transparent);
}
.pk-live__icon svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--pk-gold-light); stroke-width: 1.4; stroke-linejoin: round; }
.pk-live__text { font-size: 1.07rem; line-height: 1.6; color: #fff; }
.pk-live__note { font-style: italic; color: rgb(255 255 255 / .85); }
.pk-body .pk-gold-button {
    position: relative; padding: .8rem 1.5rem; font: 500 .72rem/1 var(--pk-sans); letter-spacing: .14em; text-transform: uppercase;
    background: var(--pk-gold-grad); color: color-mix(in srgb, var(--inv-deep) 92%, #000);
}

/* gift (white linen) */
.pk-gift { padding-left: 1.25rem; padding-right: 1.25rem; }
.pk-gift__camellia { width: 120px; top: 2.6rem; left: -58px; scale: -1 1; transform: rotate(-14deg); }
.pk-gift__intro { margin-bottom: 1.6rem !important; }
.pk-gift__list { display: grid; gap: .8rem; text-align: left; }
.pk-body .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.pk-body .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pk-body .inv-gift__account { min-width: 0; margin: 0; }
.pk-body .inv-gift__account p { margin: 0; }
.pk-body .inv-gift__account:not(.inv-gift__address) {
    position: relative; overflow: hidden; padding: .8rem .8rem .85rem; border-radius: 12px; color: #fff;
    background:
        radial-gradient(circle at 100% 0, transparent 0 52px, rgb(255 255 255 / .12) 52px 53px, transparent 53px 68px, rgb(255 255 255 / .09) 68px 69px, transparent 69px),
        linear-gradient(116deg, transparent 20%, rgb(255 255 255 / .08) 34%, transparent 48%),
        linear-gradient(135deg, var(--inv-primary), var(--inv-deep));
    box-shadow: 0 18px 30px -20px color-mix(in srgb, var(--inv-deep) 85%, transparent), inset 0 0 0 1px rgb(255 255 255 / .14);
}
.pk-body .inv-gift__account:not(.inv-gift__address)::before {
    content: ''; position: absolute; top: 2.75rem; left: .8rem; width: 2.25rem; height: 1.7rem; border-radius: 5px;
    background:
        linear-gradient(90deg, transparent 32%, rgb(90 60 10 / .4) 32% 34%, transparent 34% 66%, rgb(90 60 10 / .4) 66% 68%, transparent 68%),
        linear-gradient(transparent 46%, rgb(90 60 10 / .4) 46% 54%, transparent 54%),
        linear-gradient(135deg, #f3dfa6, #c9a24f 55%, #e8cf8b);
    box-shadow: inset 0 0 0 1px rgb(90 60 10 / .35);
}
.pk-body .inv-gift__account:not(.inv-gift__address)::after {
    content: ')))'; position: absolute; top: 3.2rem; left: 3.4rem;
    font: 600 .7rem/1 var(--pk-sans); letter-spacing: -.08em; color: rgb(255 255 255 / .6);
}
.pk-body .inv-gift__bank {
    display: flex; align-items: center; min-width: 0; min-height: 1.5rem; margin-bottom: 2.6rem !important;
    font: 600 .78rem/1.2 var(--pk-sans); letter-spacing: .06em; text-transform: uppercase; overflow-wrap: anywhere;
}
.pk-body .inv-gift__logo { height: 1.5rem; max-width: 100%; padding: .2rem .45rem; border-radius: .35rem; background: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .15); }
.pk-body .inv-gift__logo img { max-width: 100%; }
.pk-body .inv-gift__number {
    font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
    font-size: 1rem; font-weight: 500; line-height: 1.3; letter-spacing: .04em; overflow-wrap: anywhere;
    text-shadow: 0 1px 0 rgb(0 0 0 / .25);
}
.pk-body .inv-gift__holder { margin-top: .2rem !important; font: 500 .6rem/1.35 var(--pk-sans); letter-spacing: .1em; text-transform: uppercase; opacity: .92; overflow-wrap: anywhere; }
.pk-body .inv-gift__account .inv-button { margin-top: .65rem; padding: .35rem .7rem; font: 500 .65rem/1.2 var(--pk-sans); letter-spacing: .04em; }
.pk-body .inv-gift__account:not(.inv-gift__address) .inv-button--outline {
    color: #fff; background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6);
}
.pk-body .inv-gift__address {
    position: relative; padding: 1.2rem 1.3rem; border: 1px solid var(--pk-line); border-radius: var(--inv-radius);
    background: #fff; color: var(--inv-text); line-height: 1.55;
    box-shadow: 0 0 0 4px rgb(255 255 255 / .7), 0 0 0 5px var(--pk-line-soft), var(--pk-shadow);
}
.pk-body .inv-gift__address .inv-gift__bank {
    min-height: 0; margin-bottom: .4rem !important; font-size: .7rem; letter-spacing: .24em; color: var(--inv-primary);
}
.pk-body .inv-gift__address .inv-button { padding: .5rem 1rem; font-size: .72rem; }
.pk-body .inv-gift__address .inv-gift__holder { margin: 0 0 .15rem !important; font: 700 1.1rem/1.4 var(--pk-serif); letter-spacing: 0; text-transform: none; }

/* forms (rsvp, wishes) */
.pk-rsvp .pk-lead { margin-bottom: 1.6rem !important; }
.pk-formcard { text-align: left; }
.pk-body .inv-form label, .pk-body .inv-form__choices legend {
    font: 500 .7rem/1.4 var(--pk-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--inv-primary);
}
.pk-body .inv-form__choices label { font-size: .8rem; letter-spacing: .04em; text-transform: none; color: var(--inv-text); }
.pk-body .inv-form input:not([type=radio]):not([type=checkbox]), .pk-body .inv-form select, .pk-body .inv-form textarea {
    padding: .7rem .8rem; border: 1px solid color-mix(in srgb, var(--inv-accent) 60%, transparent); border-radius: 4px;
    background: #fff; color: var(--inv-text); font: 500 1.05rem/1.4 var(--pk-serif); letter-spacing: 0; text-transform: none;
}
.pk-body .inv-form input:focus, .pk-body .inv-form select:focus, .pk-body .inv-form textarea:focus {
    outline: none; border-color: var(--inv-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-accent) 28%, transparent);
}
.pk-body .inv-form .inv-button[type=submit] {
    width: 100%; padding: .9rem 1rem; border-radius: 999px; font: 500 .76rem/1 var(--pk-sans); letter-spacing: .18em; text-transform: uppercase;
    background: linear-gradient(160deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 70%, var(--inv-deep)));
}
.pk-body .inv-form__notice { font-size: .98rem; background: color-mix(in srgb, var(--inv-accent) 16%, transparent); }
.pk-body .inv-rsvp__deadline { margin-bottom: .9rem; font-style: italic; color: var(--pk-muted); text-align: center; }
.pk-body .inv-rsvp__done .inv-button { justify-self: center; font: 500 .74rem/1 var(--pk-sans); letter-spacing: .06em; }

/* wishes: a quiet scroll box of about three wishes (newest on top) */
.pk-wishes__roses { width: 100px; top: -18px; left: -44px; transform: rotate(160deg); }
.pk-body .inv-wishes { --inv-wishes-height: 20rem; }
.pk-body .inv-wishes__list {
    margin-top: 1.3rem; padding: .5rem .45rem .5rem .5rem; gap: .5rem;
    border: 1px solid var(--pk-line-soft); border-radius: 4px;
    background: var(--pk-tint);
    box-shadow: inset 0 6px 10px -10px rgb(60 45 20 / .5), inset 0 -6px 10px -10px rgb(60 45 20 / .5);
}
.pk-body .inv-wish {
    padding: .65rem .8rem; border: 1px solid var(--pk-line-soft); border-left: 2px solid var(--inv-primary); border-radius: 4px;
    background: #fff;
}
.pk-body .inv-wish__name { font-size: .94rem; font-weight: 700; line-height: 1.3; color: var(--inv-primary); }
.pk-body .inv-wish__message { font-size: .9rem; line-height: 1.45; }
.pk-body .inv-wish__time { font: 400 .7rem/1.3 var(--pk-sans); letter-spacing: .04em; }
.pk-body .inv-wish__reply-text { font-size: .86rem; }
.pk-body .inv-wishes__empty { padding: .6rem 0; font-style: italic; text-align: center; }
.pk-body .inv-wishes__more { font: 500 .72rem/1 var(--pk-sans); letter-spacing: .06em; }

/* closing: the photo full-bleed fading into the deep color, flowers framing a thin gold arch */
.pk-closing { padding: 0; color: #fff; background: var(--pk-deep); }
.pk-closing__photo { position: relative; z-index: 0; height: 440px; overflow: hidden; }
.pk-closing__photo img { position: absolute; inset: -30px 0; width: 100%; height: calc(100% + 60px); object-fit: cover; object-position: center 30%; }
.pk-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--pk-deep) 25%, transparent) 0%, transparent 22%, color-mix(in srgb, var(--inv-deep) 55%, transparent) 62%, var(--pk-deep) 100%),
        radial-gradient(90% 60% at 50% 100%, color-mix(in srgb, var(--inv-primary) 45%, transparent), transparent);
}
.pk-closing__photo--empty {
    height: 300px;
    background:
        radial-gradient(60% 50% at 50% 30%, color-mix(in srgb, var(--inv-accent) 35%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 70%, var(--inv-deep)), var(--pk-deep));
}
.pk-closing > .pk-flora { z-index: 3; }
.pk-closing__roses { width: 118px; top: 236px; right: -50px; transform: rotate(14deg); }
.pk-closing__peony { width: 176px; top: 262px; left: -78px; transform: rotate(-10deg); }
.pk-closing__photo--empty ~ .pk-closing__roses { top: 110px; }
.pk-closing__photo--empty ~ .pk-closing__peony { top: 140px; }
.pk-closing__body {
    position: relative; z-index: 2; margin: -150px 1.3rem 0; padding: 3.2rem 1.4rem 1.6rem;
    border: 1px solid color-mix(in srgb, var(--pk-gold-light) 60%, transparent); border-bottom: 0;
    border-radius: 999px 999px 0 0 / 170px 170px 0 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--pk-deep) 50%, transparent), var(--pk-deep) 34%);
}
.pk-closing__body::before {
    content: ''; position: absolute; inset: 5px 5px 0; border: 1px solid color-mix(in srgb, var(--pk-gold-light) 22%, transparent); border-bottom: 0;
    border-radius: inherit; pointer-events: none;
}
.pk-closing__breath { width: 96px; margin: 0 auto .7rem; }
.pk-closing .pk-label { color: var(--pk-gold-light); }
.pk-body .pk-closing__title { color: #fff; font-size: 2.7rem; }
.pk-closing__title em { color: var(--pk-gold-light); }
.pk-closing__pearls { margin: 1rem auto 1.4rem; }
.pk-closing .pk-lead { color: rgb(255 255 255 / .92); }
.pk-closing__sign { margin-top: 1.6rem !important; font-style: italic; color: rgb(255 255 255 / .85); }
.pk-closing__names { margin-top: .2rem !important; font-family: var(--pk-script); font-size: 3rem; line-height: 1.3; color: var(--pk-gold-light); }
.pk-closing__names .pk-amp { font-size: .75em; color: #fff; }
.pk-closing__mono { margin-top: 1.4rem; background: transparent; color: var(--pk-gold-light); border-color: color-mix(in srgb, var(--pk-gold-light) 70%, transparent); box-shadow: 0 0 0 4px var(--pk-deep), 0 0 0 5px color-mix(in srgb, var(--pk-gold-light) 35%, transparent); }

/* footer on the deep color (continues the closing) */
.pk-foot { position: relative; z-index: 1; padding: 0 1rem 1.2rem; text-align: center; background: var(--pk-deep); }
.pk-foot__mono { display: none; }
.pk-body .pk-branding { font: 400 .72rem/1.4 var(--pk-sans); letter-spacing: .04em; color: rgb(255 255 255 / .78); opacity: 1; }
.pk-body .pk-branding a { color: var(--pk-gold-light); }

/* ---------- shared components ---------- */

.pk-body .inv-button { font-family: var(--pk-sans); }
.pk-body .inv-button--outline { color: var(--inv-primary); box-shadow: inset 0 0 0 1px var(--pk-line); background: transparent; }
.pk-body .inv-checkin { margin: 3rem 1.6rem 1rem; border: 1px solid var(--pk-line-soft); border-radius: var(--inv-radius); background: #fff; }
.pk-body .inv-checkin__title { font-family: var(--pk-sans); }

/* bottom menu, inside the column */
.pk-body .inv-nav {
    --inv-nav-bg: color-mix(in srgb, #fff 92%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-text) 80%, transparent);
    --inv-nav-active: var(--inv-primary);
    max-width: min(calc(100vw - 1.5rem), calc(var(--pk-col) - 1.5rem));
    border: 1px solid var(--pk-line); font-family: var(--pk-sans);
    box-shadow: 0 0 0 3px color-mix(in srgb, #fff 60%, transparent), 0 14px 30px -14px rgb(30 20 10 / .5);
}
.pk-body .inv-nav__item { letter-spacing: .02em; }

.pk-body .inv-to-top.pk-to-top {
    left: max(1rem, calc(50vw - var(--pk-col) / 2 + 1rem)); border-radius: 999px 999px 4px 4px;
    background: #fff; color: var(--inv-primary); box-shadow: inset 0 0 0 1px var(--pk-line), 0 6px 14px -6px rgb(30 20 10 / .5);
}

.pk-body .inv-music { right: max(1rem, calc(50vw - var(--pk-col) / 2 + 1rem)); }
.pk-body .inv-music__button {
    background: var(--inv-primary); color: #fff; font-size: 1.05rem;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--pk-line), 0 8px 18px -8px rgb(0 0 0 / .45);
}
html:not(.inv-opened) .pk-body .inv-music { opacity: 0; pointer-events: none; }

/* ---------- motion (only when the visitor allows it) ---------- */

@keyframes pk-sway { from { rotate: -1.6deg; } to { rotate: 1.8deg; } }
@keyframes pk-photo-in { from { opacity: 0; transform: scale(1.07); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes pk-block-in { from { opacity: 0; transform: translate(0, 0); } to { opacity: 1; transform: translate(14px, 12px); } }
@keyframes pk-bloom-in { from { opacity: 0; translate: 0 18px; scale: .9; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes pk-frame-in { from { opacity: 0; inset: 22px; } to { opacity: 1; inset: 12px; } }

/* cover: one opening moment — the photo fades in with a slight zoom, the block slides out, the flowers settle */
html.inv-anim .pk-cover__arch { animation: pk-photo-in 1.5s cubic-bezier(.2, .7, .2, 1) .1s both; }
html.inv-anim .pk-cover__block { animation: pk-block-in 1.1s cubic-bezier(.2, .7, .2, 1) .45s both; }
html.inv-anim .pk-cover__frame { animation: pk-frame-in 1.3s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .pk-cover__peony { animation: pk-bloom-in 1.4s cubic-bezier(.2, .7, .2, 1) .35s both, pk-sway 7.5s ease-in-out 1.8s infinite alternate; }
html.inv-anim .pk-cover__roses { animation: pk-bloom-in 1.4s cubic-bezier(.2, .7, .2, 1) .55s both, pk-sway 6.4s ease-in-out 2s infinite alternate; }
/* a calm cover: no pulsing button */
html.inv-anim .pk-body .pk-open.inv-enter { animation: inv-enter 1.1s cubic-bezier(.2, .7, .2, 1) var(--enter-delay, 0s) both; }

/* flowers in the page sway slowly */
html.inv-anim .pk-section .pk-flora { animation: pk-sway 7.5s ease-in-out infinite alternate; }
html.inv-anim .pk-section .pk-flora--rose-spray { animation-duration: 6.4s; animation-delay: -2.2s; }
html.inv-anim .pk-section .pk-flora--camellia { animation-duration: 8.2s; animation-delay: -3.6s; }

/* the pearl strand of each heading strings out from its bead once the heading turns into view */
html.inv-anim .pk-heading .pk-pearls i { transform: scaleX(0); transform-origin: 100% 50%; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) .4s; }
html.inv-anim .pk-heading .pk-pearls i:last-child { transform-origin: 0 50%; }
html.inv-anim .is-revealed .pk-heading .pk-pearls i, html.inv-anim .pk-heading.is-revealed .pk-pearls i { transform: scaleX(1); }
/* the header band of each event card unrolls */
html.inv-anim .pk-event__band { clip-path: inset(0 50% 0 50% round 2.4rem 2.4rem 0 0); transition: clip-path .9s .25s cubic-bezier(.2, .8, .2, 1); }
html.inv-anim .pk-event.is-revealed .pk-event__band, html.inv-anim .is-revealed .pk-event__band { clip-path: inset(0 0 0 0 round 2.4rem 2.4rem 0 0); }

/* six white petals drift down once after "Buka Undangan", then stop */
.pk-drift { display: none; position: fixed; top: 0; left: 50%; z-index: 35; width: min(100%, var(--pk-col)); height: 100vh; transform: translateX(-50%); overflow: hidden; pointer-events: none; }
html.inv-anim .pk-drift { display: block; }
.pk-drift i {
    position: absolute; top: -30px; left: var(--x); width: 11px; height: 14px; opacity: 0;
    border-radius: 70% 10% 70% 30%;
    background: radial-gradient(circle at 35% 30%, #fff, #f4eee6 60%, color-mix(in srgb, var(--inv-accent) 30%, #efe6da));
    box-shadow: 0 2px 4px rgb(40 30 15 / .18);
}
.pk-drift.is-go i { animation: pk-petal var(--d) cubic-bezier(.3, .2, .5, 1) var(--delay) forwards; }
.pk-drift i:nth-child(1) { --x: 10%; --d: 4.8s; --delay: .1s; }
.pk-drift i:nth-child(2) { --x: 28%; --d: 5.6s; --delay: .55s; }
.pk-drift i:nth-child(3) { --x: 47%; --d: 4.4s; --delay: .3s; }
.pk-drift i:nth-child(4) { --x: 63%; --d: 5.2s; --delay: .75s; }
.pk-drift i:nth-child(5) { --x: 79%; --d: 5s; --delay: .4s; }
.pk-drift i:nth-child(6) { --x: 91%; --d: 5.8s; --delay: .95s; }
@keyframes pk-petal {
    0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    10% { opacity: .95; }
    85% { opacity: .85; }
    100% { opacity: 0; transform: translate(40px, 105vh) rotate(320deg); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .pk-flora, .pk-cover__arch, .pk-cover__block, .pk-cover__frame { animation: none !important; }
    .pk-drift { display: none !important; }
    .pk-cover--leave { transition: opacity .3s ease; }
    .pk-cover--gone { transform: none; }
}