/*
 * Template "Signature Pura Dewata" — Balinese temple elegance. Mobile-first.
 * Colors from the chosen variant: --inv-primary (deep volcanic teal / tropical green), --inv-accent (temple gold),
 * --inv-secondary (frangipani coral, labels on light grounds), --inv-background (warm cream), --inv-text.
 * Fonts from the client's choice: --inv-font-display (names only) and --inv-font-heading (titles), set by <x-inv.head>.
 * Dark (.pd-dark) and light sections alternate; ornaments are SVG symbols (sections/_sprite.blade.php).
 */

:root {
    --pd-display: var(--inv-font-display, 'Allura', cursive);
    --pd-heading: var(--inv-font-heading, 'Cinzel', Georgia, serif);
    --pd-sans: 'Lora', Georgia, 'Times New Roman', serif;

    --pd-p: var(--inv-primary);
    --pd-p-deep: color-mix(in srgb, var(--inv-primary) 78%, #000);
    --pd-gold: var(--inv-accent);
    --pd-gold-light: color-mix(in srgb, var(--inv-accent) 72%, #fff);
    --pd-gold-hi: color-mix(in srgb, var(--inv-accent) 55%, #fff6dc);
    --pd-gold-lo: color-mix(in srgb, var(--inv-accent) 70%, #3a2306);
    --pd-carve-shadow: color-mix(in srgb, var(--inv-primary) 45%, rgb(0 0 0 / .55));
    --pd-carve-hi: color-mix(in srgb, #fff8e0 70%, transparent);
    --pd-coral-deep: color-mix(in srgb, var(--inv-secondary, #d9704e) 62%, #3b0c08);
    --pd-poleng-dark: color-mix(in srgb, var(--inv-primary) 22%, #121212);
    --pd-coral: var(--inv-secondary, #d9704e);
    --pd-coral-light: color-mix(in srgb, var(--pd-coral) 65%, #fff);
    /* small labels on light grounds: coral deepened toward the text color for contrast */
    --pd-label-ink: color-mix(in srgb, var(--pd-coral) 62%, var(--inv-text));

    --pd-paper: color-mix(in srgb, var(--inv-background) 45%, #fff);
    --pd-tint: color-mix(in srgb, var(--inv-primary) 6%, var(--inv-background));
    --pd-on-dark: color-mix(in srgb, var(--inv-background) 92%, #fff);
    --pd-muted: color-mix(in srgb, var(--inv-text) 82%, var(--inv-background));
    --pd-muted-dark: color-mix(in srgb, var(--pd-on-dark) 80%, var(--inv-primary));
    --pd-line: color-mix(in srgb, var(--inv-accent) 60%, transparent);
    --pd-line-soft: color-mix(in srgb, var(--inv-accent) 32%, transparent);

    /* the candi bentar in deep stone with gold carving (cover) */
    --pd-tw-fill: var(--pd-p-deep);
    --pd-tw-shade: color-mix(in srgb, var(--inv-primary) 55%, #000);
    --pd-tw-line: color-mix(in srgb, var(--inv-accent) 80%, transparent);
    --pd-tw-orn: var(--inv-accent);
    /* the slim carved gate halves on the cover (#pd-bentar): lit outer stone, dark split face, gold edges */
    --pd-tw-hi: color-mix(in srgb, var(--inv-primary) 60%, #e8dcc2);
    --pd-tw-gold: var(--pd-gold-light);

    /* songket / endek motif tile (mask): ikat-stepped diamond, tumpal teeth, gold rules */
    --pd-songket-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='18' viewBox='0 0 40 18'%3E%3Cg fill='%23000'%3E%3Cpath d='M0 0h40v1.2H0ZM0 16.8h40V18H0Z'/%3E%3Cpath fill-rule='evenodd' d='M20 2h2v2h2v2h2v2h2v2h-2v2h-2v2h-2v2h-2v-2h-2v-2h-2v-2h-2v-2h2v-2h2v-2h2ZM20 6h2v2h2v2h-2v2h-2v-2h-2v-2h2Z'/%3E%3Cpath d='M0 1l5 3.5L10 1ZM30 1l5 3.5L40 1ZM0 17l5-3.5L10 17ZM30 17l5-3.5L40 17Z'/%3E%3Ccircle cx='5' cy='9' r='1.3'/%3E%3Ccircle cx='35' cy='9' r='1.3'/%3E%3C/g%3E%3C/svg%3E");

    --pd-column: 480px;
    --pd-gutter: max(1.5rem, calc(50% - 280px));
    --inv-radius: 2px;
}

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

body {
    margin: 0;
    background: var(--inv-background);
    color: var(--inv-text);
    font-family: var(--pd-sans);
    font-weight: 400;
    font-size: 14.5px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
p { margin: 0 0 .75rem; }
.pd-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

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

.pd-display { font-family: var(--pd-display); font-weight: 400; line-height: 1.1; overflow-wrap: anywhere; }
.pd-display span { font-size: .62em; color: var(--pd-gold); padding-inline: .08em; }
.pd-lead { font-size: 1rem; }
.pd-muted { color: var(--pd-muted); font-size: .9rem; }

/* small letter-spaced capitals */
.pd-label {
    margin: 0; font-family: var(--pd-sans); font-weight: 600; font-size: .66rem; line-height: 1.5;
    letter-spacing: .3em; text-transform: uppercase; color: var(--pd-label-ink);
}

/* section titles: label, big serif title, a gold rule that grows when it appears */
.pd-heading { display: grid; justify-items: center; margin: 0 auto 2.4rem; }
.pd-heading__eyebrow { margin-bottom: .6rem; }
.pd-heading__title {
    margin: 0; font-family: var(--pd-heading); font-weight: 400; font-size: 2.1rem; line-height: 1.15;
    letter-spacing: .04em; color: var(--pd-p);
}
.pd-rule { display: block; width: 72px; height: 1px; margin-top: 1rem; background: linear-gradient(90deg, transparent, var(--pd-gold), transparent); }
html.inv-anim .pd-rule { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1) .35s; }
html.inv-anim .is-revealed .pd-rule, html.inv-anim .is-revealed.pd-rule { transform: none; }

/* kain poleng: the black-and-white checked temple cloth, as a thin band between gold (prada) lines;
   the wide band adds soft folds of draped cloth and a coral hem */
.pd-poleng {
    display: block; height: 10px;
    background: repeating-conic-gradient(var(--pd-poleng-dark) 0 25%, #f7f2e8 0 50%) 0 0 / 10px 10px;
    box-shadow: 0 -2px 0 var(--pd-paper), 0 -3px 0 var(--pd-gold), 0 2px 0 var(--pd-paper), 0 3px 0 var(--pd-gold);
}
.pd-poleng--wide {
    height: 18px;
    background:
        repeating-linear-gradient(90deg, rgb(0 0 0 / .2) 0, transparent 26px, rgb(255 255 255 / .14) 52px, transparent 78px, rgb(0 0 0 / .2) 104px),
        repeating-conic-gradient(var(--pd-poleng-dark) 0 25%, #f7f2e8 0 50%) 0 0 / 18px 18px;
    box-shadow: 0 -2px 0 var(--pd-gold), 0 -5px 0 var(--pd-coral-deep), 0 -6px 0 var(--pd-gold-light),
        0 2px 0 var(--pd-gold), 0 5px 0 var(--pd-coral-deep), 0 6px 0 var(--pd-gold-light);
}

/* songket / endek Bali: gold ikat-stepped diamonds and tumpal teeth on a deep coral ground */
.pd-songket {
    position: relative; display: block; height: 18px; background: var(--pd-coral-deep);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), inset 0 -1px 0 rgb(0 0 0 / .25);
}
.pd-songket::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--pd-gold-hi), var(--pd-gold) 55%, var(--pd-gold-lo));
    -webkit-mask: var(--pd-songket-tile) 0 0 / 40px 18px repeat-x; mask: var(--pd-songket-tile) 0 0 / 40px 18px repeat-x;
}
/* a band laid on a section's top or bottom edge */
.pd-section > .pd-edge-top, .pd-section > .pd-edge-bottom { position: absolute; z-index: 2; left: 0; right: 0; margin: 0; }
.pd-section > .pd-edge-top { top: 0; }
.pd-section > .pd-edge-bottom { bottom: 0; }

/* patra punggel carved in gold relief, set in corners */
.pd-carve { position: absolute; z-index: 1; width: 96px; height: 96px; pointer-events: none; overflow: visible; }
.pd-section > .pd-carve { position: absolute; z-index: 1; }
.pd-carve--tl { top: 14px; left: 10px; }
.pd-carve--tr { top: 14px; right: 10px; scale: -1 1; }
.pd-carve--bl { bottom: 10px; left: 10px; scale: 1 -1; }
.pd-carve--br { bottom: 10px; right: 10px; scale: -1 -1; }

/* canang sari: janur tray, flowers of the four directions */
.pd-canang { display: block; width: 46px; height: 46px; overflow: visible; rotate: 45deg; filter: drop-shadow(0 3px 4px rgb(0 0 0 / .22)); }
.pd-canang__tray { stroke: var(--pd-gold-lo); stroke-width: .8; }
.pd-canang__inner { fill: color-mix(in srgb, #cdbf6a 65%, var(--pd-gold)); stroke: var(--pd-gold-lo); stroke-width: .6; }
.pd-canang__weave { stroke: color-mix(in srgb, var(--pd-gold-lo) 45%, transparent); }
.pd-canang__heart { stroke: var(--pd-gold-lo); stroke-width: .5; }
.pd-canang__e { fill: #fbf6ea; }
.pd-canang__s { fill: color-mix(in srgb, var(--pd-coral) 80%, #b3121b); }
.pd-canang__w { fill: #f2c230; }
.pd-canang__n { fill: #4f6fc4; }
.pd-canang__e, .pd-canang__s, .pd-canang__w, .pd-canang__n { stroke: rgb(0 0 0 / .18); stroke-width: .4; }
.pd-canang__pandan { stroke: #5c8a3a; }

/* real frangipani art (public domain botanical plates, img/CREDITS.md) */
.pd-tree, .pd-bloom { position: absolute; z-index: 0; display: block; pointer-events: none; background: no-repeat center / contain; }
.pd-tree { width: 200px; aspect-ratio: 520 / 741; background-image: var(--pd-tree); }
.pd-bloom { width: 96px; aspect-ratio: 340 / 389; background-image: var(--pd-bloom); filter: drop-shadow(0 8px 12px rgb(0 0 0 / .25)); }
.pd-section > .pd-tree, .pd-section > .pd-bloom { position: absolute; z-index: 0; }

/* penjor: the arching bamboo pole of Galungan, in gold with janur tassels */
.pd-penjor { display: block; overflow: visible; transform-origin: 50% 100%; filter: drop-shadow(2px 6px 6px rgb(0 0 0 / .2)); }
.pd-penjor__janur { stroke: color-mix(in srgb, var(--pd-gold) 85%, #b8c46a); stroke-width: 1.1; }
.pd-dark .pd-penjor__janur { stroke: color-mix(in srgb, var(--pd-gold-hi) 80%, #d8e3a0); }
.pd-penjor__line { stroke: var(--pd-gold-lo); }
.pd-penjor__lamak { fill: color-mix(in srgb, var(--pd-gold-hi) 70%, #e9e2a8); stroke: var(--pd-gold-lo); stroke-width: .7; }
.pd-penjor__node { stroke: var(--pd-gold-lo); }
.pd-penjor__leaf { fill: url(#pd-gold); stroke: var(--pd-gold-lo); stroke-width: .6; }
.pd-penjor__dot { fill: var(--pd-coral); }
.pd-penjor__shrine { fill: var(--pd-gold-lo); stroke: var(--pd-gold); stroke-width: .8; }
/* the pole sways once, gently, when its block comes into view */
@keyframes pd-sway { 0% { rotate: -2.5deg; } 55% { rotate: 1.2deg; } 100% { rotate: 0deg; } }
html.inv-anim .is-revealed .pd-penjor, html.inv-anim .is-revealed.pd-penjor { animation: pd-sway 2.4s ease-out both; }

/* meru skyline rising into the section above, in the section's own color */
.pd-section > .pd-sky {
    position: absolute; z-index: 1; left: 0; right: 0; bottom: calc(100% - 1px); width: 100%; height: auto; aspect-ratio: 400 / 80;
    color: var(--pd-sbg); --pd-sky-back: color-mix(in srgb, var(--pd-sbg) 55%, var(--inv-background)); pointer-events: none;
}

/* a client photo behind a light section under a cream veil (parallax inside a clip) */
.pd-bgphoto { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.pd-section > .pd-bgphoto, .pd-intro > .pd-bgphoto { position: absolute; z-index: -1; }
.pd-bgphoto__img { position: absolute; inset: -44px 0; --inv-parallax: 34px; background: var(--pd-photo, none) center / cover no-repeat; }
.pd-bgphoto::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(70% 38% at 50% 0%, color-mix(in srgb, var(--inv-accent) 20%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-background) 93%, transparent),
            color-mix(in srgb, var(--inv-background) 74%, transparent) 38%,
            color-mix(in srgb, var(--inv-background) 84%, transparent) 72%, var(--inv-background));
}

/* stepped (meru) gate frame; the same outline in thin gold, shifted behind the photo */
.pd-window { position: relative; width: 236px; margin: 0 auto; }
.pd-window__line {
    position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible;
    translate: 11px 11px; fill: none; stroke: var(--pd-gold); stroke-width: 1; vector-effect: non-scaling-stroke;
}
.pd-window__line polygon { vector-effect: non-scaling-stroke; }
.pd-window__img {
    position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
    clip-path: polygon(0 12%, 12% 12%, 12% 8%, 24% 8%, 24% 4%, 37% 4%, 37% 0, 63% 0, 63% 4%, 76% 4%, 76% 8%, 88% 8%, 88% 12%, 100% 12%, 100% 100%, 0 100%);
}
.pd-window__img--empty {
    display: grid; place-items: center; color: var(--pd-gold);
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--inv-accent) 24%, var(--pd-p)), var(--pd-p-deep));
}
.pd-window__img--empty svg { width: 34%; height: auto; overflow: visible; }

.pd-icon-link {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: .35rem; padding: .35rem .9rem;
    border: 1px solid var(--pd-line); border-radius: 999px; color: var(--pd-p);
    font-size: .78rem; letter-spacing: .04em; text-decoration: none;
    transition: background-color .3s ease, color .3s ease;
}
.pd-icon-link:hover { background: var(--pd-p); color: var(--pd-on-dark); }

/* buttons of the shared components */
.inv-button {
    padding: .8rem 1.5rem; border-radius: 2px;
    background: var(--pd-p); color: var(--pd-on-dark);
    font-family: var(--pd-sans); font-weight: 600; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
}
.inv-button:hover { box-shadow: 0 8px 18px color-mix(in srgb, var(--pd-p) 28%, transparent); }
.inv-button--outline { background: transparent; color: var(--pd-p); box-shadow: inset 0 0 0 1px var(--pd-p); }

/* ---------- dark sections: deep primary, faint carved lattice, stepped temple top ---------- */

.pd-section.pd-dark { --pd-sbg: var(--pd-p); color: var(--pd-on-dark); }
.pd-dark::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--pd-gold); opacity: .08;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='%23000'%3E%3Cpath d='M28 21c3-4 3-8 0-10-3 2-3 6 0 10ZM35 28c4-3 8-3 10 0-2 3-6 3-10 0ZM28 35c-3 4-3 8 0 10 3-2 3-6 0-10ZM21 28c-4 3-8 3-10 0 2-3 6-3 10 0Z'/%3E%3Ccircle cx='28' cy='28' r='2.6'/%3E%3Cpath d='M3 3c4 1 6 3 6 7-4-1-6-3-6-7ZM53 53c-4-1-6-3-6-7 4 1 6 3 6 7ZM53 3c-1 4-3 6-7 6 1-4 3-6 7-6ZM3 53c1-4 3-6 7-6-1 4-3 6-7 6Z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23000' stroke-width='.9' stroke-linecap='round'%3E%3Cpath d='M32 24c4-5 8-8 14-10M24 32c-4 5-8 8-14 10M32 32c5 4 8 8 10 14M24 24c-5-4-8-8-10-14'/%3E%3Cpath d='M40 17c2 3 1 6-2 7M16 39c-2-3-1-6 2-7M39 40c-3 2-6 1-7-2M17 16c3-2 6-1 7 2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 56px 56px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='%23000'%3E%3Cpath d='M28 21c3-4 3-8 0-10-3 2-3 6 0 10ZM35 28c4-3 8-3 10 0-2 3-6 3-10 0ZM28 35c-3 4-3 8 0 10 3-2 3-6 0-10ZM21 28c-4 3-8 3-10 0 2-3 6-3 10 0Z'/%3E%3Ccircle cx='28' cy='28' r='2.6'/%3E%3Cpath d='M3 3c4 1 6 3 6 7-4-1-6-3-6-7ZM53 53c-4-1-6-3-6-7 4 1 6 3 6 7ZM53 3c-1 4-3 6-7 6 1-4 3-6 7-6ZM3 53c1-4 3-6 7-6-1 4-3 6-7 6Z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23000' stroke-width='.9' stroke-linecap='round'%3E%3Cpath d='M32 24c4-5 8-8 14-10M24 32c-4 5-8 8-14 10M32 32c5 4 8 8 10 14M24 24c-5-4-8-8-10-14'/%3E%3Cpath d='M40 17c2 3 1 6-2 7M16 39c-2-3-1-6 2-7M39 40c-3 2-6 1-7-2M17 16c3-2 6-1 7 2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 56px 56px;
}
.pd-dark .pd-label { color: var(--pd-gold-light); }
/* light sections with the faint patra cina ground */
.pd-cina::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--pd-p); opacity: .05;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='%23000'%3E%3Cpath d='M28 21c3-4 3-8 0-10-3 2-3 6 0 10ZM35 28c4-3 8-3 10 0-2 3-6 3-10 0ZM28 35c-3 4-3 8 0 10 3-2 3-6 0-10ZM21 28c-4 3-8 3-10 0 2-3 6-3 10 0Z'/%3E%3Ccircle cx='28' cy='28' r='2.6'/%3E%3Cpath d='M3 3c4 1 6 3 6 7-4-1-6-3-6-7ZM53 53c-4-1-6-3-6-7 4 1 6 3 6 7ZM53 3c-1 4-3 6-7 6 1-4 3-6 7-6ZM3 53c1-4 3-6 7-6-1 4-3 6-7 6Z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23000' stroke-width='.9' stroke-linecap='round'%3E%3Cpath d='M32 24c4-5 8-8 14-10M24 32c-4 5-8 8-14 10M32 32c5 4 8 8 10 14M24 24c-5-4-8-8-10-14'/%3E%3Cpath d='M40 17c2 3 1 6-2 7M16 39c-2-3-1-6 2-7M39 40c-3 2-6 1-7-2M17 16c3-2 6-1 7 2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 56px 56px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='%23000'%3E%3Cpath d='M28 21c3-4 3-8 0-10-3 2-3 6 0 10ZM35 28c4-3 8-3 10 0-2 3-6 3-10 0ZM28 35c-3 4-3 8 0 10 3-2 3-6 0-10ZM21 28c-4 3-8 3-10 0 2-3 6-3 10 0Z'/%3E%3Ccircle cx='28' cy='28' r='2.6'/%3E%3Cpath d='M3 3c4 1 6 3 6 7-4-1-6-3-6-7ZM53 53c-4-1-6-3-6-7 4 1 6 3 6 7ZM53 3c-1 4-3 6-7 6 1-4 3-6 7-6ZM3 53c1-4 3-6 7-6-1 4-3 6-7 6Z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23000' stroke-width='.9' stroke-linecap='round'%3E%3Cpath d='M32 24c4-5 8-8 14-10M24 32c-4 5-8 8-14 10M32 32c5 4 8 8 10 14M24 24c-5-4-8-8-10-14'/%3E%3Cpath d='M40 17c2 3 1 6-2 7M16 39c-2-3-1-6 2-7M39 40c-3 2-6 1-7-2M17 16c3-2 6-1 7 2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 56px 56px;
}
.pd-dark .pd-heading__title { color: var(--pd-on-dark); }
.pd-dark .pd-muted { color: var(--pd-muted-dark); }
.pd-dark .inv-button { background: linear-gradient(180deg, var(--pd-gold-light), var(--pd-gold)); color: var(--pd-p-deep); }
.pd-dark .inv-button--outline { background: transparent; color: var(--pd-on-dark); box-shadow: inset 0 0 0 1px var(--pd-line); }

/* the stepped top rises into the light section above, in the section's own color */
.pd-terrace::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 26px; pointer-events: none;
    background: var(--pd-p);
    clip-path: polygon(0 100%, 26% 100%, 26% 70%, 33% 70%, 33% 40%, 40% 40%, 40% 10%, 45% 10%, 45% 0, 55% 0, 55% 10%, 60% 10%, 60% 40%, 67% 40%, 67% 70%, 74% 70%, 74% 100%, 100% 100%);
}

/* the couple's photo under a deep veil (countdown band) */
.pd-section.pd-photo {
    background-color: var(--pd-p);
    background-image:
        linear-gradient(to bottom, var(--pd-p), color-mix(in srgb, var(--pd-p) 62%, transparent) 30%,
            color-mix(in srgb, var(--pd-p) 58%, transparent) 65%, color-mix(in srgb, var(--pd-p) 96%, transparent)),
        var(--pd-photo, linear-gradient(var(--pd-p), var(--pd-p)));
    background-size: cover; background-position: center;
}

/* ---------- cover: the candi bentar ---------- */

.pd-cover {
    /* gate half width and its distance from the screen edge */
    position: fixed; inset: 0; z-index: 30; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; text-align: center;
    background: var(--pd-p); color: var(--pd-on-dark);
}
.pd-cover--leave { transition: opacity .7s ease 1.1s; }
.pd-cover--gone { opacity: 0; }

/* the photo fills the top and melts into the deep ground */
.pd-cover__bg.pd-photo {
    position: absolute; inset: 0 0 auto 0; z-index: 0; height: 80%;
    background-image:
        linear-gradient(to bottom, color-mix(in srgb, var(--pd-p) 24%, transparent), transparent 22%, transparent 56%, color-mix(in srgb, var(--pd-p) 40%, transparent) 74%, var(--pd-p)),
        var(--pd-photo, none);
    background-size: cover; background-position: center 28%;
    transition: opacity 1.1s ease .3s, transform 2s cubic-bezier(.3, 0, .2, 1);
}
.pd-cover--plain .pd-cover__bg.pd-photo {
    background-image: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--inv-accent) 30%, transparent), transparent 62%);
}

.pd-cover__scene { position: relative; z-index: 1; flex: 1 1 auto; min-height: 190px; }
.pd-cover__flower {
    position: absolute; left: 50%; top: 50%; width: min(24vw, 96px); aspect-ratio: 1; translate: -50% -50%;
    color: color-mix(in srgb, var(--inv-accent) 75%, transparent);
    filter: drop-shadow(0 0 18px color-mix(in srgb, var(--inv-accent) 45%, transparent));
}
/* two gold penjor rise from the lower corners and bow over the photo's edges; frangipani at their feet */
.pd-cover__penjor { position: absolute; z-index: 1; bottom: -10px; height: min(112vw, 430px); width: calc(min(112vw, 430px) * .2333); }
.pd-cover__penjor--l { left: -18px; }
.pd-cover__penjor--r { right: -18px; scale: -1 1; }
.pd-cover .pd-penjor__janur { stroke: color-mix(in srgb, var(--pd-gold-hi) 85%, #e6eab0); }
.pd-cover .pd-penjor { filter: drop-shadow(0 6px 10px rgb(0 0 0 / .45)); }
.pd-cover__bloom { z-index: 2; bottom: -30px; width: 84px; }
.pd-cover__bloom--l { left: -24px; rotate: 12deg; }
.pd-cover__bloom--r { right: -24px; scale: -1 1; rotate: -12deg; }
/* carved paras stone, a touch translucent; gold ledge edges, carving and simbar flames */
.pd-bentar__body { opacity: .9; }
.pd-bentar__shade { fill: color-mix(in srgb, var(--pd-tw-shade) 85%, transparent); }
.pd-bentar__gold { stroke: var(--pd-tw-gold); stroke-width: 1.3; }
.pd-bentar__carve { stroke: color-mix(in srgb, var(--inv-accent) 62%, transparent); stroke-width: 1; }
.pd-bentar__niche { stroke: var(--pd-tw-line); stroke-width: 1.5; stroke-linecap: round; }
.pd-bentar__niche .pd-bentar__fill { fill: var(--pd-tw-orn); stroke: none; }
.pd-bentar__orn { fill: var(--pd-tw-orn); }

.pd-cover__content {
    position: relative; z-index: 3; flex: none;
    padding: 0 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
    transition: opacity .55s ease, transform .8s ease;
}
.pd-cover__steps { display: block; width: 100%; height: 18px; margin: 0 0 1rem; overflow: visible; }
.pd-cover__steps path { fill: none; stroke: var(--pd-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pd-cover__text { max-width: 400px; margin: 0 auto; }
.pd-cover__eyebrow { margin-bottom: .3rem; color: var(--pd-gold-light); letter-spacing: .34em; text-shadow: 0 1px 10px rgb(0 0 0 / .45); }
.pd-cover__names { margin: 0 0 .4rem; font-size: clamp(2.5rem, 11.5vw, 2.9rem); color: #fffaf0; text-shadow: 0 2px 16px rgb(0 0 0 / .35); }
.pd-cover__names span { color: var(--pd-gold-light); }
.pd-cover__date {
    display: inline-block; margin: 0 0 .9rem; padding: .22rem .2rem;
    font-family: var(--pd-heading); font-size: .76rem; letter-spacing: .14em;
    border-block: 1px solid var(--pd-line);
}
.pd-cover__guest p { margin: 0 0 .2rem; font-size: .6rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--pd-gold-light); }
.pd-cover__guest-name { display: block; margin-bottom: .9rem; font-family: var(--pd-heading); font-size: 1.1rem; line-height: 1.3; color: #fffaf0; overflow-wrap: anywhere; }
.pd-open.inv-button {
    padding: .8rem 1.7rem; border-radius: 2px;
    background: linear-gradient(180deg, var(--pd-gold-light), var(--pd-gold)); color: var(--pd-p-deep);
    box-shadow: 0 10px 24px rgb(0 0 0 / .28);
}
.pd-open svg { color: var(--pd-p-deep); }

/* opening moment: the closed gate parts once while the photo settles; text follows (inv-enter) */
/* the halves start closed in the middle of the screen and part to the edges */
@keyframes pd-rise { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
@keyframes pd-photo-in { from { opacity: 0; scale: 1.08; } to { opacity: 1; scale: 1; } }
html.inv-anim .pd-cover__penjor { transform-origin: 30% 100%; animation: pd-rise 1.2s cubic-bezier(.2, .7, .2, 1) .15s both, pd-sway 2.4s ease-out 1.2s both; }
html.inv-anim .pd-cover__penjor--r { animation-delay: .3s, 1.35s; }
html.inv-anim .pd-cover__bloom { animation: pd-rise 1s cubic-bezier(.2, .7, .2, 1) .6s both; }
html.inv-anim .pd-cover__bg { animation: pd-photo-in 2.2s cubic-bezier(.2, .7, .2, 1) both; }

/* "Buka Undangan": the towers slide away, the photo comes closer, the cover fades */
.pd-cover__penjor, .pd-cover__bloom { transition: transform 1.2s cubic-bezier(.65, 0, .25, 1), opacity .9s ease; }
.pd-cover--gone .pd-cover__penjor--l, .pd-cover--gone .pd-cover__bloom--l { transform: translateX(-120%); opacity: 0; }
.pd-cover--gone .pd-cover__penjor--r, .pd-cover--gone .pd-cover__bloom--r { transform: translateX(120%); opacity: 0; }
.pd-cover--gone .pd-cover__bg { opacity: 0; transform: scale(1.12); }
.pd-cover--gone .pd-cover__content { opacity: 0; transform: translateY(24px); }

/* ---------- desktop scene (hidden on phones) ---------- */

.pd-scene { display: none; }

/* ---------- intro (first view after the gate) ---------- */

.pd-page { position: relative; overflow-x: clip; }

/* a faint client photo under a cream veil; the frangipani tree grows at the side behind the meru skyline of
   the next section, which rises over the intro's foot */
.pd-intro {
    position: relative; isolation: isolate; overflow: hidden;
    padding: 3.25rem var(--pd-gutter) calc(2.75rem + min(20vw, 96px)); text-align: center; background: var(--inv-background);
}
.pd-intro > .pd-bgphoto .pd-bgphoto__img { opacity: .45; }
.pd-intro > * { position: relative; z-index: 1; }
.pd-intro > .pd-tree { position: absolute; z-index: 0; }
.pd-intro__tree {
    left: -64px; top: 92px; width: 176px; opacity: .95;
    -webkit-mask-image: linear-gradient(#000 62%, transparent 86%); mask-image: linear-gradient(#000 62%, transparent 86%);
}
.pd-intro__eyebrow { margin-bottom: 1.4rem; }
.pd-intro__frame { position: relative; width: min(74vw, 300px); margin: 0 auto; }
.pd-intro__window { width: 100%; }
.pd-intro__frame .pd-carve { width: 66px; height: 66px; bottom: -24px; --pd-carve-shadow: color-mix(in srgb, var(--inv-primary) 40%, rgb(0 0 0 / .3)); }
.pd-intro__frame .pd-carve--bl { left: -26px; }
.pd-intro__frame .pd-carve--br { right: -16px; }
.pd-monogram {
    display: flex; align-items: center; justify-content: center; gap: .85rem; margin: 2.1rem 0 0;
    font-family: var(--pd-heading); font-size: 2.6rem; line-height: 1; color: var(--pd-p);
}
.pd-monogram__flower { width: 30px; height: 30px; color: var(--pd-coral); --pd-fr-fill: color-mix(in srgb, var(--pd-coral) 18%, transparent); }
.pd-intro__date {
    display: inline-block; margin: 1.1rem 0 0; padding: .3rem .9rem .3rem 1.3rem;
    font-size: .74rem; font-weight: 600; letter-spacing: .42em; color: var(--pd-on-dark); background: var(--pd-p);
}
.pd-intro__quote { max-width: 320px; margin: 1.2rem auto 0; font-style: italic; font-size: .95rem; line-height: 1.7; color: var(--pd-muted); }

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

.pd-section {
    --pd-sbg: var(--pd-paper);
    position: relative; isolation: isolate; padding: 4.75rem var(--pd-gutter) 4.5rem; text-align: center; background: var(--pd-sbg);
}
.pd-section > * { position: relative; z-index: 1; }
/* light section titles sit on a soft coral-and-gold wash */
.pd-section:not(.pd-dark) .pd-heading { position: relative; }
.pd-section:not(.pd-dark) .pd-heading::before {
    content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 260px; height: 110px; translate: -50% -50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--pd-coral) 16%, transparent), color-mix(in srgb, var(--inv-accent) 8%, transparent) 60%, transparent);
}

/* opening (dark): meru skyline above, carved corners, canang sari, the verse on a deep songket-edged block */
.pd-opening {
    padding-top: 4.25rem;
    background-image: radial-gradient(120% 60% at 50% 105%, color-mix(in srgb, var(--inv-accent) 16%, transparent), transparent 70%);
}
.pd-opening__canang { width: 54px; height: 54px; margin: 0 auto 1.3rem; }
.pd-arabic { margin-bottom: 1.1rem; font-family: 'Amiri', 'Traditional Arabic', serif; font-size: 1.65rem; line-height: 1.7; color: var(--pd-gold-light); }
.pd-opening__greeting { font-family: var(--pd-heading); font-size: 1.05rem; line-height: 1.6; letter-spacing: .03em; color: #fffaf0; }
.pd-opening__message { color: var(--pd-muted-dark); }
.pd-quote {
    position: relative; margin: 2.6rem 0 0; padding: 2.6rem 1.4rem 2rem;
    background: linear-gradient(170deg, color-mix(in srgb, var(--pd-coral-deep) 34%, var(--pd-p-deep)), var(--pd-p-deep) 70%);
    box-shadow: 0 24px 40px -22px rgb(0 0 0 / .55), inset 0 0 0 1px var(--pd-line-soft);
}
/* songket strip along the block's top edge (coral ground + gold motif) */
.pd-quote::before, .pd-quote::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; }
.pd-quote::before { background: var(--pd-coral-deep); }
.pd-quote::after {
    background: linear-gradient(180deg, var(--pd-gold-hi), var(--pd-gold) 55%, var(--pd-gold-lo));
    -webkit-mask: var(--pd-songket-tile) 0 0 / 31px 14px repeat-x; mask: var(--pd-songket-tile) 0 0 / 31px 14px repeat-x;
}
.pd-quote__bloom { position: absolute; top: -50px; right: -18px; width: 88px; rotate: 14deg; }
.pd-quote blockquote { margin: 0; font-family: var(--pd-sans); font-style: italic; font-size: 1.02rem; line-height: 1.75; color: #fffaf0; }
.pd-quote figcaption { margin-top: 1rem; font-size: .66rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--pd-gold-light); }

/* couple (light, patra cina ground, songket edge): asymmetric portraits with a penjor arching beside each */
.pd-couple { --pd-sbg: var(--inv-background); padding-top: 5.5rem; }
.pd-person { display: grid; text-align: left; }
.pd-person__stage { position: relative; }
.pd-person__window { width: 62%; margin: 0 auto 0 0; }
.pd-person__window .pd-window__img { box-shadow: 0 20px 34px -20px color-mix(in srgb, var(--pd-p) 70%, transparent); }
.pd-person__penjor { position: absolute; bottom: -8px; width: 92px; height: 394px; }
/* groom: the pole stands at the right and arches left over his frame; bride: mirrored */
.pd-person--groom .pd-person__penjor { right: 3%; scale: -1 1; }
.pd-person--bride .pd-person__penjor { left: 3%; }
.pd-person--bride { text-align: right; }
.pd-person--bride .pd-person__window { margin: 0 0 0 auto; }
.pd-person--bride .pd-person__window .pd-window__line { translate: -11px 11px; }
.pd-person__text { margin-top: 1.6rem; padding-left: 1.1rem; border-left: 2px solid var(--pd-gold); }
.pd-person--bride .pd-person__text { padding: 0 1.1rem 0 0; border: 0; border-right: 2px solid var(--pd-gold); }
.pd-person__nickname { margin: .2rem 0 .15rem; font-size: 3.1rem; color: var(--pd-p); }
.pd-person__name { margin: 0 0 .55rem; font-family: var(--pd-heading); font-weight: 400; font-size: 1.12rem; line-height: 1.4; letter-spacing: .03em; color: var(--inv-text); }
.pd-person__parents { margin-bottom: .4rem; font-size: .88rem; color: var(--pd-muted); }
.pd-person__parents strong { font-weight: 600; color: var(--inv-text); }
.pd-couple__amp { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 2.6rem 0; }
.pd-couple__amp span { width: 72px; height: 1px; background: linear-gradient(90deg, transparent, var(--pd-gold)); }
.pd-couple__amp span:last-child { background: linear-gradient(90deg, var(--pd-gold), transparent); }
.pd-couple__amp .pd-canang { width: 56px; height: 56px; }

/* countdown (dark photo band wrapped in kain poleng) */
.pd-countdown { padding-block: 5.75rem 5.5rem; }
.pd-countdown__date { margin: -1.2rem 0 2.1rem; font-family: var(--pd-heading); font-size: .88rem; letter-spacing: .14em; color: var(--pd-on-dark); }
.pd-countdown .inv-countdown { gap: .55rem; }
.pd-countdown .inv-countdown__item {
    position: relative; flex: 1; max-width: 4.9rem; min-width: 0; padding: .9rem 0 .7rem; border-radius: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--pd-p-deep) 70%, transparent), color-mix(in srgb, var(--pd-p-deep) 88%, transparent));
    border: 1px solid var(--pd-line); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--pd-gold-light) 30%, transparent);
}
.pd-countdown .inv-countdown__item::before {
    content: ''; position: absolute; left: 50%; bottom: 100%; width: 26px; height: 7px; margin-left: -13px; background: var(--pd-gold);
    clip-path: polygon(0 100%, 0 70%, 22% 70%, 22% 35%, 40% 35%, 40% 0, 60% 0, 60% 35%, 78% 35%, 78% 70%, 100% 70%, 100% 100%);
}
.pd-countdown .inv-countdown__value { font-family: var(--pd-heading); font-weight: 400; font-size: 1.95rem; color: #fffaf0; }
.pd-countdown .inv-countdown__label { margin-top: .3rem; font-size: .58rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--pd-gold-light); }
.pd-countdown .inv-countdown__actions { margin-top: 2rem; }
.pd-countdown .inv-countdown__done { font-family: var(--pd-heading); }

/* events (light, patra cina ground): photo under a stepped gate top, a songket strip, the date on a deep block */
.pd-events { --pd-sbg: var(--pd-paper); }
.pd-event + .pd-event { margin-top: 3.25rem; }
.pd-event__head {
    position: relative; margin-inline: calc(-1 * var(--pd-gutter)); min-height: 120px;
    display: flex; align-items: flex-end; background: var(--pd-p);
    clip-path: polygon(0 18px, 30% 18px, 30% 9px, 40% 9px, 40% 0, 60% 0, 60% 9px, 70% 9px, 70% 18px, 100% 18px, 100% 100%, 0 100%);
}
.pd-event__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pd-event__head:has(.pd-event__photo) { aspect-ratio: 16 / 10; }
.pd-event__head::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, color-mix(in srgb, var(--pd-p) 92%, transparent), color-mix(in srgb, var(--pd-p) 25%, transparent) 48%, transparent 70%);
}
.pd-event__head--plain { background: radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--inv-accent) 30%, var(--pd-p)), var(--pd-p-deep)); }
.pd-event__name {
    position: relative; z-index: 1; width: 100%; margin: 0; padding: 2.5rem var(--pd-gutter) 1.1rem; text-align: left;
    font-family: var(--pd-heading); font-weight: 400; font-size: 1.55rem; line-height: 1.2; letter-spacing: .03em; color: #fffaf0;
}
.pd-event--flip .pd-event__name { text-align: right; }
.pd-event__band { margin-inline: calc(-1 * var(--pd-gutter)); height: 14px; }
.pd-event__band::after { -webkit-mask-size: 31px 14px; mask-size: 31px 14px; }
.pd-event__body { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 1.2rem; padding-top: 1.5rem; text-align: left; }
.pd-event__body:not(:has(.pd-event__date)) { grid-template-columns: minmax(0, 1fr); }
.pd-event__date {
    position: relative; display: grid; align-content: start; justify-items: center; gap: .3rem; margin-top: -2.6rem; padding: 1.1rem .4rem 1rem;
    color: #fffaf0; text-align: center; background: linear-gradient(180deg, var(--pd-p), var(--pd-p-deep));
    box-shadow: 0 16px 28px -16px color-mix(in srgb, var(--pd-p) 80%, transparent), inset 0 0 0 1px var(--pd-line-soft);
}
.pd-event__date::before {
    content: ''; position: absolute; left: 50%; bottom: 100%; width: 40px; height: 9px; margin-left: -20px; background: var(--pd-gold);
    clip-path: polygon(0 100%, 0 70%, 22% 70%, 22% 35%, 40% 35%, 40% 0, 60% 0, 60% 35%, 78% 35%, 78% 70%, 100% 70%, 100% 100%);
}
.pd-event--flip .pd-event__body { grid-template-columns: minmax(0, 1fr) 5.6rem; }
.pd-event--flip .pd-event__date { order: 2; }
.pd-event--flip .pd-event__body:not(:has(.pd-event__date)) { grid-template-columns: minmax(0, 1fr); }
.pd-event__date span { font-size: .58rem; font-weight: 600; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; color: var(--pd-gold-light); }
.pd-event__date strong { font-family: var(--pd-heading); font-weight: 400; font-size: 2.9rem; line-height: 1; }
.pd-event__time { margin-bottom: .55rem; font-size: .9rem; font-weight: 500; color: var(--pd-p); }
.pd-event__venue { margin-bottom: .2rem; font-family: var(--pd-heading); font-size: 1.08rem; line-height: 1.4; color: var(--inv-text); }
.pd-event__address, .pd-event__dress { margin-bottom: .45rem; font-size: .86rem; line-height: 1.65; color: var(--pd-muted); }
.pd-event__dress { font-style: italic; }
.pd-event .inv-maps { margin-top: .9rem; text-align: left; }

/* love story (dark): a bamboo-gold path, a canang sari at each moment, a penjor arching in from the right */
.pd-story__penjor { position: absolute; top: 2rem; right: -6px; width: 92px; height: 394px; scale: -1 1; }
.pd-section > .pd-story__penjor { position: absolute; z-index: 0; }
.pd-love_story .pd-heading { padding-inline: 2.5rem; }
.pd-moments { position: relative; list-style: none; margin: 0; padding: 0 3.25rem 0 2.4rem; text-align: left; }
.pd-moments::before {
    content: ''; position: absolute; left: .65rem; top: .8rem; bottom: 1rem; width: 3px; border-radius: 2px;
    background: linear-gradient(90deg, var(--pd-gold-lo), var(--pd-gold-hi) 50%, var(--pd-gold)) 0 0 / 100% 100%;
    -webkit-mask: linear-gradient(#000 85%, transparent); mask: linear-gradient(#000 85%, transparent);
}
.pd-moment { position: relative; padding-bottom: 2.5rem; }
.pd-moment:last-child { padding-bottom: 0; }
.pd-moment__node {
    position: absolute; left: calc(-2.4rem + .65rem + 1.5px - 7px); top: .4rem; width: 14px; height: 14px; rotate: 45deg;
    background: var(--pd-p); border: 1px solid var(--pd-gold); box-shadow: inset 0 0 0 2px var(--pd-p), inset 0 0 0 7px var(--pd-gold), 0 0 0 4px var(--pd-p);
}
.pd-moment__date { font-size: .64rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--pd-gold-light); }
.pd-moment h3 { margin: .2rem 0 .75rem; font-family: var(--pd-heading); font-weight: 400; font-size: 1.3rem; line-height: 1.3; color: #fffaf0; }
.pd-moment__photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 1rem; outline: 1px solid var(--pd-line); outline-offset: 5px; }
.pd-moment p { margin: 0; font-size: .92rem; color: var(--pd-muted-dark); }

/* gallery (light): a frangipani bloom beside the title, a full-bleed mosaic, a poleng strip below */
.pd-gallery { --pd-sbg: var(--inv-background); padding-bottom: 0; }
.pd-gallery__bloom { top: 1.1rem; right: 2%; width: 70px; rotate: 16deg; }
.pd-gallery .inv-gallery {
    margin-inline: calc(-1 * var(--pd-gutter));
    grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; grid-auto-flow: dense; gap: 3px;
}
.pd-gallery .inv-gallery__item { aspect-ratio: auto; height: 100%; border-radius: 0; overflow: hidden; }
.pd-gallery .inv-gallery__item:nth-child(6n + 1) { grid-row: span 2; }
.pd-gallery .inv-gallery__item:nth-child(6n + 4) { grid-column: span 2; }
.pd-gallery__poleng { margin: 0 calc(-1 * var(--pd-gutter)); box-shadow: 0 -3px 0 var(--pd-gold); }

/* live streaming (light tint) */
.pd-stream { --pd-sbg: var(--pd-tint); }
.pd-card, .pd-panel {
    position: relative; margin-top: 1.25rem; padding: 2rem 1.35rem 1.6rem;
    background: var(--pd-paper); border: 1px solid var(--pd-line-soft);
    box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--pd-p) 40%, transparent);
}
/* small gold meru cap on the top edge */
.pd-card::before, .pd-panel:not(.pd-panel--carved)::before, .pd-gift .inv-gift__account::before {
    content: ''; position: absolute; left: 50%; top: -1px; width: 64px; height: 12px; margin-left: -32px; background: var(--pd-gold);
    clip-path: polygon(0 0, 100% 0, 100% 2px, 80% 2px, 80% 5px, 64% 5px, 64% 8px, 56% 8px, 56% 12px, 44% 12px, 44% 8px, 36% 8px, 36% 5px, 20% 5px, 20% 2px, 0 2px);
}
.pd-stream__icon { display: block; margin: 0 auto .6rem; color: var(--pd-gold); }

/* gift (dark, veiled photo): translucent cards with a gold hairline */
.pd-gift .inv-gift { display: grid; gap: .9rem; margin-top: 1.75rem; }
/* bank / e-wallet cards two per row, an odd last one across the row; the gift address stays full width below */
.pd-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.pd-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pd-gift .inv-gift__account {
    position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0;
    margin: 0; padding: 1.2rem .8rem .9rem; border-radius: 0; text-align: center; color: var(--pd-on-dark);
    background: color-mix(in srgb, var(--pd-p-deep) 62%, transparent); border: 1px solid var(--pd-line);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.pd-gift .inv-gift__account::before { width: 44px; height: 9px; margin-left: -22px; }
.pd-gift .inv-gift__account + .inv-gift__account { margin-top: 0; }
.pd-gift .inv-gift__account p { margin: 0; }
.pd-gift .inv-gift__bank { font-size: .64rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--pd-gold-light); overflow-wrap: anywhere; }
.pd-gift .inv-gift__logo { height: 1.5rem; padding: .2rem .45rem; border-radius: .35rem; }
.pd-gift .inv-gift__logo img { max-width: 5rem; }
.pd-gift .inv-gift__number {
    margin: .45rem 0 .15rem !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 500;
    font-size: 1rem; letter-spacing: .04em; color: #fffaf0; overflow-wrap: anywhere;
}
.pd-gift .inv-gift__holder { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pd-muted-dark); overflow-wrap: anywhere; }
/* the copy button sits on the bottom edge so cards side by side line up */
.pd-gift .inv-gift__account .inv-button { margin-top: auto; padding: .4rem .75rem; font-size: .6rem; letter-spacing: .14em; }
.pd-gift .inv-gift__account p:nth-last-of-type(1) { margin-bottom: .65rem; }
.pd-gift .inv-gift__address { padding: 1.4rem 1.1rem 1.1rem; }
.pd-gift .inv-gift__address .inv-gift__bank { font-size: .74rem; }
.pd-gift .inv-gift__address .inv-gift__holder { margin-top: .35rem; font-size: .7rem; }
.pd-gift .inv-gift__address p:not(.inv-gift__bank):not(.inv-gift__holder) { margin-top: .3rem; font-size: .88rem; }

/* rsvp + wishes (light) */
.pd-rsvp { --pd-sbg: var(--pd-paper); }
.pd-rsvp .pd-panel { background: var(--inv-background); }
/* the rsvp panel: a songket band on top, carved gold corners under it */
.pd-panel--carved { padding-top: 4rem; }
.pd-panel__band { position: absolute; top: 0; left: 0; right: 0; height: 14px; }
.pd-panel__band::after { -webkit-mask-size: 31px 14px; mask-size: 31px 14px; }
.pd-panel .pd-carve { width: 44px; height: 44px; top: 18px; }
.pd-panel .pd-carve--tl { left: 8px; }
.pd-panel .pd-carve--tr { right: 8px; }
.pd-wishes { --pd-sbg: var(--pd-tint); }
.pd-section > .pd-wishes__bloom { top: 1.1rem; left: 2%; width: 70px; rotate: -16deg; }
.pd-panel { text-align: left; }
.pd-panel .inv-form input:not([type=radio]):not([type=checkbox]),
.pd-panel .inv-form select,
.pd-panel .inv-form textarea {
    border: 0; border-bottom: 1px solid color-mix(in srgb, var(--inv-text) 28%, transparent); border-radius: 0;
    background: transparent; padding-inline: 0; color: var(--inv-text);
}
.pd-panel .inv-form input:focus, .pd-panel .inv-form select:focus, .pd-panel .inv-form textarea:focus { outline: none; border-bottom-color: var(--pd-gold); }
.pd-panel .inv-form .inv-button { justify-self: stretch; margin-top: .5rem; }
.pd-panel .inv-wish { padding: .65rem .8rem; background: color-mix(in srgb, var(--pd-p) 5%, #fff); border-left: 2px solid var(--pd-gold); border-radius: 0; }
.pd-panel .inv-wish__name { font-family: var(--pd-heading); font-weight: 400; font-size: .95rem; color: var(--pd-p); }
.pd-panel .inv-wish__message { font-size: .88rem; line-height: 1.45; }
.pd-panel .inv-wish__time { font-size: .7rem; }
/* about three wishes in the scroll box, framed by a hairline */
.pd-panel .inv-wishes { --inv-wishes-height: 20rem; }
.pd-panel .inv-wishes__list { padding-top: .75rem; border-top: 1px solid var(--pd-line-soft); }
.pd-panel .inv-wish__reply { margin-top: .6rem; padding: .5rem 0 0 .75rem; border-top: 1px solid var(--pd-line-soft); font-size: .86rem; }
.pd-panel .inv-wish__reply-label { font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pd-label-ink); }

/* closing (dark): meru skyline, the photo full-bleed fading into the ground, a frangipani bloom, names, the gate
   drawn in gold line, a poleng band at the foot */
.pd-closing { padding-bottom: 12px; }
.pd-closing__photo {
    margin: -4.75rem calc(-1 * var(--pd-gutter)) -1rem; height: 330px;
    -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 58%, transparent);
    mask-image: linear-gradient(transparent, #000 14%, #000 58%, transparent);
}
.pd-closing__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.pd-closing .pd-heading { margin-bottom: 1.5rem; }
.pd-closing--plain { padding-top: 5rem; }
.pd-section > .pd-closing__bloom { position: relative; width: 50px; margin: 0 auto .6rem; rotate: -8deg; }
.pd-closing__message { max-width: 300px; margin-inline: auto; font-size: .92rem; line-height: 1.6; color: var(--pd-muted-dark); }
.pd-closing__names { margin: 1rem 0 .4rem; font-size: clamp(2.1rem, 9.5vw, 2.6rem); color: #fffaf0; }
.pd-closing__signature { margin: 0 0 1.4rem; font-size: .68rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--pd-gold-light); }
/* the towers stand at the edges, behind the text, so the page ends a short breath under the signature */
.pd-section > .pd-closing__gate {
    position: absolute; left: 0; right: 0; bottom: 18px; z-index: 0; height: 175px; margin: 0;
    display: flex; justify-content: space-between; padding-inline: 6px; pointer-events: none; opacity: .8;
    /* the cover's carved gate again, now only its gold edges, niche and simbar on a faint stone glaze */
    --pd-tw-hi: color-mix(in srgb, var(--inv-accent) 12%, transparent); --pd-tw-fill: color-mix(in srgb, var(--inv-accent) 5%, transparent);
    --pd-tw-shade: transparent; --pd-tw-gold: color-mix(in srgb, var(--inv-accent) 80%, transparent);
    --pd-tw-line: color-mix(in srgb, var(--inv-accent) 70%, transparent); --pd-tw-orn: color-mix(in srgb, var(--inv-accent) 80%, transparent);
}
.pd-closing__gate svg { width: 44px; height: 100%; }
.pd-closing__gate .pd-bentar__body { opacity: 1; }
.pd-closing__gate svg + svg { scale: -1 1; }
/* a short teal hem stays under the band, so the page (and the platform credit, which takes the colour just
   above it) ends on the deep ground, not on the cloth */
.pd-section > .pd-closing__poleng {
    margin-inline: calc(-1 * var(--pd-gutter));
    box-shadow: 0 -2px 0 var(--pd-gold), 0 -5px 0 var(--pd-coral-deep), 0 -6px 0 var(--pd-gold-light);
}

/* shared components outside the sections */
.inv-music__button { background: var(--pd-p); color: var(--pd-on-dark); box-shadow: 0 0 0 2px var(--inv-background), 0 0 0 3px var(--pd-gold), 0 6px 16px rgb(0 0 0 / .25); }
.inv-checkin { margin: 2.5rem 1.5rem; border: 1px solid var(--pd-line); border-radius: 0; }
/* the room under the page for the music button continues the closing's deep ground (no cream strip) */
body:has(.pd-closing) .inv-music__space { background: var(--pd-p); }

/* ---------- wide screens ---------- */

@media (min-width: 1024px) {
    /* the column stands between two towers drawn in thin gold line on the deep ground */
    .pd-scene {
        display: block; position: fixed; inset: 0; z-index: 0; overflow: hidden;
        background:
            radial-gradient(ellipse at 50% 110%, color-mix(in srgb, var(--inv-accent) 18%, transparent), transparent 60%),
            var(--pd-p-deep);
        --pd-tw-fill: transparent;
        --pd-tw-shade: color-mix(in srgb, var(--inv-accent) 10%, transparent);
        --pd-tw-line: color-mix(in srgb, var(--inv-accent) 45%, transparent);
        --pd-tw-orn: color-mix(in srgb, var(--inv-accent) 55%, transparent);
    }
    .pd-scene__tower { position: absolute; bottom: 0; height: 84vh; width: calc(84vh * 200 / 680); }
    .pd-scene__tower--l { right: calc(50% + var(--pd-column) / 2 + 3vw); }
    .pd-scene__tower--r { left: calc(50% + var(--pd-column) / 2 + 3vw); scale: -1 1; }

    .pd-page {
        z-index: 1; width: var(--pd-column); margin: 0 auto; min-height: 100vh; background: var(--inv-background);
        box-shadow: 0 0 0 1px var(--pd-line-soft), 0 0 60px rgb(0 0 0 / .35);
    }

    /* the cover keeps the whole screen: the gate halves flank a wide passage, names inside it */
    .pd-cover { display: block; }
    .pd-cover__penjor { height: 80vh; width: calc(80vh * .2333); }
    .pd-cover__penjor--l { left: max(2vw, calc(50% - 420px)); }
    .pd-cover__penjor--r { right: max(2vw, calc(50% - 420px)); }
    .pd-cover__bg.pd-photo { height: 100%; }
    .pd-cover__scene { position: absolute; inset: 0; }
    .pd-cover__content { position: absolute; left: 50%; bottom: 6vh; width: 440px; padding: 0; translate: -50% 0; }
    .pd-cover__steps { display: none; }
    .pd-cover__text {
        padding: 2.5rem 2.25rem 2.25rem;
        background: color-mix(in srgb, var(--pd-p) 82%, transparent);
        -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
        outline: 1px solid var(--pd-line); outline-offset: -8px;
        box-shadow: 0 30px 60px rgb(0 0 0 / .3);
    }
    .pd-cover__names { font-size: 3.8rem; }
}

/* cover fit on shorter phones */
@media (max-height: 760px) and (max-width: 1023px) {
    .pd-cover__names { font-size: clamp(2.3rem, 10.5vw, 2.6rem); }
    .pd-cover__steps { margin-bottom: .8rem; }
}
@media (max-height: 660px) and (max-width: 1023px) {
    .pd-cover__content { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
    .pd-cover__names { font-size: 2.2rem; margin-bottom: .3rem; }
    .pd-cover__eyebrow { margin-bottom: .3rem; }
    .pd-cover__date { margin-bottom: .75rem; }
    .pd-cover__guest-name { margin-bottom: .75rem; }
    .pd-cover__steps { margin-bottom: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pd-cover, .pd-cover--leave, .pd-cover__penjor, .pd-cover__bloom, .pd-cover__bg, .pd-cover__content { transition: none; animation: none; }
    .pd-icon-link { transition: none; }
}

/* platform credit: the page ends in teal after the poleng band, so the credit keeps that colour itself
   (the shared script would read the cloth pattern instead) */
body:has(.pd-closing) .inv-branding {
    --inv-branding-keep: 1;
    background: var(--pd-p); color: color-mix(in srgb, #fff 82%, transparent);
}

/* ---------- intro scene "Senja di Pura" (scene.json + sections/_scene; the intro lives in <body>, outside the page) ---------- */
/* the camera passes the candi bentar, close by, into a temple court at dusk: the sun low behind the meru skyline, a
   frangipani tree and a penjor coming in from the sides, blooms drifting, a canang sari on the steps, then the card */
.pd-scene-sky {
    position: absolute; inset: 0; overflow: hidden;
    background:
        radial-gradient(85% 26% at 50% 70%, color-mix(in srgb, var(--pd-gold-hi) 55%, transparent), transparent 72%),
        linear-gradient(180deg, var(--pd-p-deep) 0%, var(--pd-p) 34%,
            color-mix(in srgb, var(--pd-p) 55%, var(--pd-coral)) 56%, color-mix(in srgb, var(--pd-coral) 45%, var(--pd-gold-hi)) 70%, var(--pd-p-deep) 76%);
}
/* a few stars still in the upper sky, twinkling */
.pd-scene-sky i {
    position: absolute; inset: 0 0 50% 0; opacity: .8;
    background:
        radial-gradient(1.4px 1.4px at 12% 18%, #fff8e0, transparent), radial-gradient(1.2px 1.2px at 28% 8%, #fff8e0, transparent),
        radial-gradient(1.6px 1.6px at 44% 24%, #fff8e0, transparent), radial-gradient(1.2px 1.2px at 63% 12%, #fff8e0, transparent),
        radial-gradient(1.5px 1.5px at 81% 22%, #fff8e0, transparent), radial-gradient(1.2px 1.2px at 92% 6%, #fff8e0, transparent),
        radial-gradient(1.1px 1.1px at 7% 40%, #fff8e0, transparent), radial-gradient(1.3px 1.3px at 72% 36%, #fff8e0, transparent);
    -webkit-mask: linear-gradient(#000, transparent); mask: linear-gradient(#000, transparent);
}
@keyframes pd-scene-twinkle { 50% { opacity: .35; } }
.inv-intro.is-playing .pd-scene-sky i { animation: pd-scene-twinkle 2.6s ease-in-out infinite; }

/* the sun: a gold disc in a wide warm halo */
.pd-scene-sun { position: absolute; left: 50%; top: 50%; width: min(100%, 26rem); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
    background:
        radial-gradient(circle closest-side at 50% 42%, #fffbe8, transparent 26%),
        radial-gradient(circle closest-side, var(--pd-gold-hi) 0 36%, var(--pd-gold) 44%, color-mix(in srgb, var(--pd-gold-hi) 42%, transparent) 45.5%,
            color-mix(in srgb, var(--pd-coral) 22%, transparent) 62%, transparent 100%);
}

/* the meru skyline in silhouette, the far row paler in the haze */
.pd-scene-skyline { display: block; width: 100%; height: 100%; overflow: visible; color: var(--pd-p-deep);
    --pd-sky-back: color-mix(in srgb, var(--pd-p) 62%, var(--pd-coral)); }

/* the stone court: a gold edge, steps up to the card drawn in gold line, the poleng hem at the foot */
.pd-scene-ground { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
    background: linear-gradient(180deg, color-mix(in srgb, var(--pd-p) 80%, var(--pd-gold-lo)), var(--pd-p-deep) 70%);
    box-shadow: 0 -1px 0 var(--pd-gold), 0 -14px 30px color-mix(in srgb, var(--pd-gold-hi) 30%, transparent); }
.pd-scene-ground__steps { display: block; width: 76%; height: 28%; margin: 0 auto; overflow: visible; }
.pd-scene-ground__steps path { fill: color-mix(in srgb, var(--pd-gold) 10%, transparent); stroke: var(--pd-line); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.pd-scene-ground .pd-poleng { margin-bottom: 6px; }

/* a candi bentar half, close to the camera: the carved stone, its flat split face toward the passage */
.pd-scene-gate { position: absolute; inset: 0; }
.pd-scene-gate svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(6px 0 16px rgb(0 0 0 / .5)); }
.pd-scene-gate--right svg { scale: -1 1; }

/* the penjor, mirrored: the pole stands at the right edge and its arch bows over the court */
.pd-scene-penjor { display: block; width: 100%; height: 100%; overflow: visible; scale: -1 1; filter: drop-shadow(-3px 8px 8px rgb(0 0 0 / .35)); }
.pd-scene-penjor .pd-penjor__janur { stroke: color-mix(in srgb, var(--pd-gold-hi) 80%, #d8e3a0); }
.pd-scene-canang { display: block; width: 100%; height: 100%; overflow: visible; rotate: 45deg; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .4)); }
.inv-scene__layer:has(> img[src*="kamboja-tree"]) img { filter: drop-shadow(6px 10px 14px rgb(0 0 0 / .45)) saturate(.95); }
.inv-scene__layer:has(> img[src*="kamboja-bloom"]) img { filter: drop-shadow(0 6px 8px rgb(0 0 0 / .35)); }

/* the card: cream paper under a stepped meru top, a gold line along its edge, a poleng strip near its foot */
.inv-intro--scene:has(.pd-scene-sky) .inv-scene__card {
    top: 43%; width: min(64vw, 19rem); aspect-ratio: 10 / 11; padding: 3.2rem 1.3rem 2.4rem;
    background: linear-gradient(180deg, var(--pd-gold-hi), var(--pd-gold) 60%, var(--pd-gold-lo)); -webkit-backdrop-filter: none; backdrop-filter: none;
    -webkit-mask: none; mask: none; border-radius: 0;
    clip-path: polygon(0 12%, 12% 12%, 12% 8%, 24% 8%, 24% 4%, 37% 4%, 37% 0, 63% 0, 63% 4%, 76% 4%, 76% 8%, 88% 8%, 88% 12%, 100% 12%, 100% 100%, 0 100%);
}
.inv-intro--scene:has(.pd-scene-sky) .inv-scene__card::before {
    content: ''; position: absolute; inset: 2px; z-index: -1;
    background: radial-gradient(80% 50% at 50% 30%, var(--pd-paper), var(--inv-background));
    clip-path: polygon(0 12%, 12% 12%, 12% 8%, 24% 8%, 24% 4%, 37% 4%, 37% 0, 63% 0, 63% 4%, 76% 4%, 76% 8%, 88% 8%, 88% 12%, 100% 12%, 100% 100%, 0 100%);
}
.inv-intro--scene:has(.pd-scene-sky) .inv-scene__card::after {
    content: ''; position: absolute; left: 2px; right: 2px; bottom: 14px; height: 9px;
    background: repeating-conic-gradient(var(--pd-poleng-dark) 0 25%, #f7f2e8 0 50%) 0 0 / 9px 9px;
    box-shadow: 0 -2px 0 var(--pd-paper), 0 -3px 0 var(--pd-gold), 0 2px 0 var(--pd-paper), 0 3px 0 var(--pd-gold);
}
.inv-intro--scene:has(.pd-scene-sky) .inv-intro__label { font-family: var(--pd-sans); font-weight: 600; font-size: .64rem; letter-spacing: .3em; color: var(--pd-label-ink); }
.inv-intro--scene:has(.pd-scene-sky) .inv-intro__names { font-family: var(--pd-display); font-weight: 400; line-height: 1.1; color: var(--pd-p); }
.inv-intro--scene:has(.pd-scene-sky) .inv-intro__rule { background: linear-gradient(90deg, transparent, var(--pd-gold), transparent); }
.inv-intro--scene:has(.pd-scene-sky) .inv-intro__date { font-family: var(--pd-heading); font-size: .76rem; letter-spacing: .12em; color: var(--pd-gold-lo); }
@media (max-height: 720px) {
    .inv-intro--scene:has(.pd-scene-sky) .inv-scene__card { top: 41%; width: min(60vw, 19rem); padding-block: 2.8rem 2.1rem; }
    .inv-intro--scene:has(.pd-scene-sky) .inv-intro__date { font-size: .7rem; letter-spacing: .08em; }
}
.inv-intro--scene:has(.pd-scene-sky) .inv-intro__skip { background: color-mix(in srgb, var(--pd-p-deep) 70%, transparent); border-color: var(--pd-line); color: var(--pd-gold-light); }
@media (prefers-reduced-motion: reduce) {
    .inv-intro.is-playing .pd-scene-sky i { animation: none; }
}