/*
 * 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-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);

    --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; }

/* poleng: the checkered temple cloth, as a thin band between gold lines */
.pd-poleng {
    height: 10px;
    background: repeating-conic-gradient(var(--pd-p-deep) 0 25%, var(--pd-paper) 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);
}

/* 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: .07;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M18 1 35 18 18 35 1 18Z'/%3E%3Cpath d='M18 11 25 18 18 25 11 18Z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 36px 36px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M18 1 35 18 18 35 1 18Z'/%3E%3Cpath d='M18 11 25 18 18 25 11 18Z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 36px 36px;
}
.pd-dark .pd-label { color: var(--pd-gold-light); }
.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 {
    --pd-pass: 17vw;
    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: 72%;
    background-image:
        linear-gradient(to bottom, color-mix(in srgb, var(--pd-p) 28%, transparent), transparent 30%, color-mix(in srgb, var(--pd-p) 25%, transparent) 62%, 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-gate {
    position: absolute; top: 4%; bottom: 0; width: 50%;
    transition: transform 1.5s cubic-bezier(.65, 0, .25, 1);
}
.pd-gate svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 12px 22px rgb(0 0 0 / .35)); }
.pd-gate--l { left: 0; padding-right: var(--pd-pass); }
.pd-gate--r { right: 0; padding-left: var(--pd-pass); }
.pd-gate--r svg { scale: -1 1; }

.pd-cover__content {
    position: relative; z-index: 3; flex: none;
    padding: 0 1.5rem calc(1.75rem + env(safe-area-inset-bottom));
    transition: opacity .55s ease, transform .8s ease;
}
.pd-cover__steps { display: block; width: 100%; height: 20px; margin: 0 0 1.3rem; 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: .45rem; color: var(--pd-gold-light); letter-spacing: .34em; }
.pd-cover__names { margin: 0 0 .5rem; font-size: 3.4rem; color: #fffaf0; }
.pd-cover__names span { color: var(--pd-gold-light); }
.pd-cover__date {
    display: inline-block; margin: 0 0 1.15rem; padding: .25rem .2rem;
    font-family: var(--pd-heading); font-size: .82rem; 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: 1.15rem; font-family: var(--pd-heading); font-size: 1.25rem; line-height: 1.3; color: #fffaf0; overflow-wrap: anywhere; }
.pd-open.inv-button {
    padding: .95rem 1.8rem; 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) */
@keyframes pd-part-l { from { translate: var(--pd-pass) 0; } to { translate: 0 0; } }
@keyframes pd-part-r { from { translate: calc(-1 * var(--pd-pass)) 0; } to { translate: 0 0; } }
@keyframes pd-photo-in { from { opacity: 0; scale: 1.08; } to { opacity: 1; scale: 1; } }
html.inv-anim .pd-gate--l { animation: pd-part-l 1.6s cubic-bezier(.65, 0, .25, 1) .15s both; }
html.inv-anim .pd-gate--r { animation: pd-part-r 1.6s cubic-bezier(.65, 0, .25, 1) .15s 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--gone .pd-gate--l { transform: translateX(-104%); }
.pd-cover--gone .pd-gate--r { transform: translateX(104%); }
.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; }

.pd-intro { position: relative; padding: 3.5rem var(--pd-gutter) 3.75rem; text-align: center; background: var(--inv-background); }
.pd-intro__eyebrow { margin-bottom: 1.9rem; }
.pd-intro__window { width: 232px; }
.pd-monogram {
    display: flex; align-items: center; justify-content: center; gap: .85rem; margin: 2.4rem 0 0;
    font-family: var(--pd-heading); font-size: 2.8rem; 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) 16%, transparent); }
.pd-intro__date { margin: 1.1rem 0 0; font-size: .74rem; font-weight: 600; letter-spacing: .42em; color: var(--pd-label-ink); }
.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); }
.pd-intro__poleng { width: 120px; margin: 2rem auto 0; }

/* ---------- 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; }

/* opening (dark): greeting, message, the verse below a line frangipani */
.pd-opening { padding-top: 4.5rem; }
.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.2rem 0 0; border-top: 1px solid var(--pd-line-soft); }
.pd-quote__flower {
    position: absolute; top: -21px; left: 50%; width: 42px; height: 42px; margin-left: -21px; padding: 0 4px;
    background: var(--pd-p); color: var(--pd-coral-light);
}
.pd-quote blockquote { margin: 0; font-family: var(--pd-sans); font-style: italic; font-size: 1.05rem; line-height: 1.7; 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): asymmetric, groom left, bride right */
.pd-couple { --pd-sbg: var(--inv-background); }
.pd-person { display: grid; text-align: left; }
.pd-person__window { width: 62%; margin: 0 auto 0 0; }
.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: 1px solid var(--pd-line); }
.pd-person--bride .pd-person__text { padding: 0 1.1rem 0 0; border: 0; border-right: 1px solid var(--pd-line); }
.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.4rem 0; }
.pd-couple__amp span { width: 64px; height: 1px; background: var(--pd-line); }
.pd-couple__amp b { font-weight: 400; font-size: 3.6rem; line-height: 1; color: var(--pd-gold); }

/* countdown (dark photo band) */
.pd-countdown { padding-block: 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: color-mix(in srgb, var(--pd-p-deep) 55%, transparent); border: 1px solid var(--pd-line);
}
.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): photo under a stepped gate top with the name on it, a big date column beside the details */
.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__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__head::before {
    content: ''; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pd-gold);
}
.pd-event__body { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: 1.2rem; padding-top: 1.6rem; text-align: left; }
.pd-event__body:not(:has(.pd-event__date)) { grid-template-columns: minmax(0, 1fr); }
.pd-event__date { display: grid; align-content: start; justify-items: center; gap: .3rem; padding-right: 1rem; border-right: 1px solid var(--pd-line); color: var(--pd-p); text-align: center; }
.pd-event__date span { font-size: .6rem; font-weight: 600; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; color: var(--pd-label-ink); }
.pd-event__date strong { font-family: var(--pd-heading); font-weight: 400; font-size: 3rem; 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 gold path, a carved diamond at each moment */
.pd-moments { position: relative; list-style: none; margin: 0; padding: 0 0 0 2.2rem; text-align: left; }
.pd-moments::before {
    content: ''; position: absolute; left: .55rem; top: .6rem; bottom: 1rem; width: 1px;
    background: linear-gradient(var(--pd-line), var(--pd-line) 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.2rem + .55rem - 6px); top: .45rem; width: 12px; height: 12px; 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 6px var(--pd-gold);
}
.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): full-bleed mosaic */
.pd-gallery { --pd-sbg: var(--inv-background); padding-bottom: 0; }
.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; }

/* 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::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): 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-on-dark) 7%, transparent); border: 1px solid var(--pd-line);
}
.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); }
.pd-wishes { --pd-sbg: var(--pd-tint); }
.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): the photo full-bleed fading into the ground, names, the gate in gold line */
.pd-closing { padding-bottom: 0; }
.pd-closing__photo {
    margin: -4.75rem calc(-1 * var(--pd-gutter)) -1rem; height: 380px;
    -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 58%, transparent);
    mask-image: linear-gradient(transparent, #000 16%, #000 58%, transparent);
}
.pd-closing__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.pd-closing--plain { padding-top: 5rem; }
.pd-closing__flower { display: block; width: 40px; height: 40px; margin: 0 auto 1.1rem; color: var(--pd-coral-light); }
.pd-closing__message { max-width: 360px; margin-inline: auto; font-size: .94rem; color: var(--pd-muted-dark); }
.pd-closing__names { margin: 1.5rem 0 .5rem; font-size: 3.1rem; color: #fffaf0; }
.pd-closing__signature { margin: 0 0 3.25rem; 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: 12px; z-index: 0; height: 150px; margin: 0;
    display: flex; justify-content: space-between; padding-inline: 4px; pointer-events: none;
    --pd-tw-fill: transparent; --pd-tw-shade: color-mix(in srgb, var(--inv-accent) 14%, transparent);
    --pd-tw-line: color-mix(in srgb, var(--inv-accent) 55%, transparent); --pd-tw-orn: color-mix(in srgb, var(--inv-accent) 70%, transparent);
}
.pd-closing__gate svg { width: 44px; height: 100%; }
.pd-closing__gate svg + svg { scale: -1 1; }
.pd-section > .pd-closing__poleng { margin-inline: calc(-1 * var(--pd-gutter)); box-shadow: 0 -2px 0 var(--pd-paper), 0 -3px 0 var(--pd-gold); }

/* 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; }
.inv-branding { background: var(--inv-background); }

/* ---------- 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: big towers, names inside the passage */
    .pd-cover { --pd-pass: 250px; display: block; }
    .pd-cover__bg.pd-photo { height: 100%; }
    .pd-cover__scene { position: absolute; inset: 0; }
    .pd-gate { top: 4vh; }
    .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: 3rem; }
    .pd-cover__steps { margin-bottom: 1rem; }
}
@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.6rem; 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-gate, .pd-cover__bg, .pd-cover__content { transition: none; animation: none; }
    .pd-icon-link { transition: none; }
}