/*
 * Template "Signature Gatsby Deco" — a 1920s Art Deco ballroom in jewel tones. Mobile-first.
 * Colors from the chosen variant: --inv-primary (the jewel: emerald, onyx, sapphire, ruby…), --inv-deep (its
 * darkest shade), --inv-accent (champagne gold), --inv-background (ivory marble), --inv-text (ink on ivory),
 * --inv-cream (text on jewel). Fonts from the client's choice: --inv-font-display (names) and --inv-font-heading
 * (titles), set by <x-inv.head>; Josefin Sans (geometric 1920s sans) for text and labels.
 * Materials (no blend modes: iOS Safari draws blended grey textures as plain grey): img/gold-leaf-soft.webp (the
 * crumpled-leaf creases as transparent light and shade over a gold gradient), img/marble-dark-soft.webp (black marble
 * as transparent shade over the jewel, = overlay), img/marble-light-mul.webp (white marble shade on the ivory, = multiply),
 * img/fan-band.svg (a band of little fans, used as a mask). Ornaments: the SVG sprite in index.blade.php.
 */

:root {
    --gd-display: var(--inv-font-display, 'Imperial Script', cursive);
    --gd-heading: var(--inv-font-heading, 'Bodoni Moda', Georgia, serif);
    --gd-sans: 'Josefin Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --gd-jewel: var(--inv-primary);
    --gd-deep: var(--inv-deep, color-mix(in srgb, var(--inv-primary) 55%, #000));
    --gd-cream: var(--inv-cream, color-mix(in srgb, var(--inv-accent) 14%, #fbf4e4));
    --gd-gold: var(--inv-accent);
    --gd-gold-hi: color-mix(in srgb, var(--inv-accent) 42%, #fff6dc);
    --gd-gold-lo: color-mix(in srgb, var(--inv-accent) 58%, #2a1c06);
    /* gold that reads on ivory (labels, small caps): darkened with the ink */
    --gd-gold-ink: color-mix(in srgb, var(--inv-accent) 46%, var(--inv-text));
    --gd-line: color-mix(in srgb, var(--inv-accent) 70%, transparent);
    --gd-line-soft: color-mix(in srgb, var(--inv-accent) 38%, transparent);
    --gd-foil: linear-gradient(105deg,
        var(--gd-gold-lo) 0%, var(--gd-gold) 16%, var(--gd-gold-hi) 32%, var(--gd-gold) 46%,
        var(--gd-gold-lo) 60%, var(--gd-gold) 74%, var(--gd-gold-hi) 88%, var(--gd-gold) 100%);
    /* names and big numbers: bright at the top, warm at the bottom */
    --gd-foil-v: linear-gradient(180deg, var(--gd-gold-hi) 0%, var(--gd-gold) 48%, color-mix(in srgb, var(--inv-accent) 78%, #4a3208) 100%);
    --gd-leaf-img: url('../img/gold-leaf-soft.webp');
    --gd-octagon: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
    --gd-column: 480px;
    --inv-radius: 0px;
}

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

html { -webkit-text-size-adjust: 100%; }

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

img { max-width: 100%; display: block; }
p { margin: 0 0 .75rem; }

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

/* ---------- materials ---------- */

.gd-page { position: relative; isolation: isolate; overflow-x: clip; background: var(--inv-background); }

/* jewel marble: the jewel colour with a soft gold glow, black marble veins as transparent shade over it */
.gd-jewel {
    position: relative; isolation: isolate;
    background:
        radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--inv-accent) 14%, transparent), transparent 70%),
        linear-gradient(180deg, var(--gd-jewel), color-mix(in srgb, var(--gd-jewel) 72%, var(--gd-deep)));
    color: var(--gd-cream);
    --gd-text: var(--gd-cream);
    --gd-muted: color-mix(in srgb, var(--gd-cream) 84%, var(--gd-jewel));
    --gd-label: color-mix(in srgb, var(--gd-gold-hi) 80%, var(--inv-accent));
    --gd-title: var(--gd-gold-hi);
}
.gd-jewel::before {
    content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background: url('../img/marble-dark-soft.webp') center / 560px auto;
    opacity: .55;
}

/* ivory marble: the light ground with white marble veins */
.gd-ivory {
    position: relative; isolation: isolate; background: var(--inv-background); color: var(--inv-text);
    --gd-text: var(--inv-text);
    --gd-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    --gd-label: var(--gd-gold-ink);
    --gd-title: var(--gd-jewel);
}
.gd-ivory::before {
    content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background: url('../img/marble-light-mul.webp') center / 640px auto;
    opacity: .36;
}

/* a valance of little gilded fans hanging from the top edge of an ivory section */
.gd-edge {
    position: absolute; left: 0; right: 0; height: 15px; z-index: 0; pointer-events: none;
    background: var(--gd-leaf-img) center / 200px auto, var(--gd-foil);
    -webkit-mask: url('../img/fan-band.svg') center top / 28px 15px repeat-x; mask: url('../img/fan-band.svg') center top / 28px 15px repeat-x;
}
.gd-edge--top { top: 0; transform: scaleY(-1); }
html.inv-anim .gd-edge[data-reveal] { transform: scaleY(-1); }

/* gold leaf on text: the crumpled-leaf photo over a gold gradient, clipped to the letters */
.gd-leaf {
    background: var(--gd-leaf-img) center / 240px auto, var(--gd-foil-v);
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}

/* sunburst: thin gold rays fading out from the middle */
.gd-rays {
    position: absolute; left: 50%; top: 50%; z-index: -1; width: 260%; aspect-ratio: 1;
    translate: -50% -50%; border-radius: 50%; pointer-events: none;
    background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--inv-accent) 55%, transparent) 0deg .6deg, transparent .6deg 6deg);
    -webkit-mask: radial-gradient(closest-side, #000 18%, transparent 100%); mask: radial-gradient(closest-side, #000 18%, transparent 100%);
}

.gd-display { font-family: var(--gd-display); font-weight: 400; line-height: 1.15; padding-inline: .15em; }
.gd-name { display: inline-block; padding-inline: .08em; }
.gd-amp { display: inline-block; font-size: .55em; padding-inline: .15em; }

.gd-eyebrow {
    margin: 0 0 .6rem; padding-left: .34em;
    font-family: var(--gd-sans); font-size: .7rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase;
    color: var(--gd-label, var(--gd-gold-ink));
}

.gd-lead { font-size: 1rem; }
.gd-muted { color: var(--gd-muted); font-size: .92rem; }

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

.gd-corner { position: absolute; width: 56px; height: 56px; pointer-events: none; overflow: visible; }
.gd-corner--tl { top: 12px; left: 12px; }
.gd-corner--tr { top: 12px; right: 12px; transform: scaleX(-1); }
.gd-corner--bl { bottom: 12px; left: 12px; transform: scaleY(-1); }
.gd-corner--br { bottom: 12px; right: 12px; transform: scale(-1); }

/* stepped deco frame (sections/_frame): double gold edges between the gilded corners */
.gd-frame { position: absolute; inset: 12px; z-index: 0; pointer-events: none; color: var(--gd-line); }
.gd-frame::before, .gd-frame::after { content: ''; position: absolute; }
.gd-frame::before { inset: 0 52px; border-block: 3px double currentColor; }
.gd-frame::after { inset: 52px 0; border-inline: 3px double currentColor; }
.gd-frame .gd-corner { width: 64px; height: 64px; }
.gd-frame .gd-corner--tl { top: 0; left: 0; }
.gd-frame .gd-corner--tr { top: 0; right: 0; }
.gd-frame .gd-corner--bl { bottom: 0; left: 0; }
.gd-frame .gd-corner--br { bottom: 0; right: 0; }
.gd-frame--inset { inset: 8px; }

/* drawn in when it scrolls into view (data-reveal="frame") */
html.inv-anim .gd-frame[data-reveal] { opacity: 1; transform: none; }
html.inv-anim .gd-frame[data-reveal]::before { transform: scaleX(0); transition: transform 1.3s cubic-bezier(.65, 0, .35, 1) .25s; }
html.inv-anim .gd-frame[data-reveal]::after { transform: scaleY(0); transition: transform 1.3s cubic-bezier(.65, 0, .35, 1) .25s; }
html.inv-anim .gd-frame[data-reveal] .gd-corner { opacity: 0; scale: .7; transition: opacity .8s ease, scale .9s cubic-bezier(.2, .7, .2, 1); }
html.inv-anim .gd-frame[data-reveal].is-revealed::before,
html.inv-anim .gd-frame[data-reveal].is-revealed::after { transform: none; }
html.inv-anim .gd-frame[data-reveal].is-revealed .gd-corner { opacity: 1; scale: 1; }

/* stepped "skyscraper" arch window: gold-leaf rim around the photo, the SVG outline around it */
.gd-window { position: relative; isolation: isolate; width: var(--gd-window, 200px); margin: 0 auto; }
.gd-window__rim {
    position: relative; padding: 4px; border-radius: 999px 999px 0 0;
    background: var(--gd-leaf-img) center / 200px auto, var(--gd-foil);
    box-shadow: 0 22px 44px -12px rgb(0 0 0 / .55);
}
.gd-window__photo {
    display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 999px 999px 0 0;
    background: var(--gd-photo, linear-gradient(170deg, color-mix(in srgb, var(--inv-accent) 40%, var(--gd-jewel)), var(--gd-deep))) center / cover;
}
.gd-window__photo--empty {
    background:
        repeating-conic-gradient(from -90deg at 50% 100%, color-mix(in srgb, var(--inv-accent) 40%, transparent) 0 .8deg, transparent .8deg 9deg),
        linear-gradient(170deg, color-mix(in srgb, var(--inv-accent) 30%, var(--gd-jewel)), var(--gd-deep));
}
.gd-window__outline { position: absolute; inset: -6.25% -12.5% -12.5%; width: 125%; height: 118.75%; overflow: visible; pointer-events: none; }

/* octagon medallion: gold-leaf rim, jewel face with a fine inner gold line */
.gd-medallion {
    position: relative; z-index: 1; display: grid; place-items: center;
    width: 92px; height: 92px; margin: 0 auto;
    filter: drop-shadow(0 10px 18px rgb(0 0 0 / .4));
}
.gd-medallion__rim, .gd-medallion__face { position: absolute; clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%); }
.gd-medallion__rim { inset: 0; background: var(--gd-leaf-img) center / 160px auto, var(--gd-foil); }
.gd-medallion__face {
    inset: 3px;
    background:
        radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--inv-accent) 22%, var(--gd-jewel)), var(--gd-deep) 80%);
    box-shadow: inset 0 0 0 4px var(--gd-deep);
}
.gd-medallion__face::after {
    content: ''; position: absolute; inset: 6px; border: 1px solid var(--gd-line);
    clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);
}
.gd-medallion__letters {
    position: relative; display: flex; align-items: center; gap: .45rem; margin: 0;
    font-family: var(--gd-heading); font-size: 1.6rem; line-height: 1; letter-spacing: .02em;
}
.gd-medallion__gem { width: 6px; height: 6px; rotate: 45deg; background: var(--inv-accent); }
.gd-medallion--sm { width: 78px; height: 78px; margin: 1rem auto 1.4rem; }
.gd-medallion--sm .gd-medallion__letters { font-size: 1.3rem; }

/* headings */
.gd-head { margin: 0 0 2.4rem; }
.gd-head__fan { display: block; width: 66px; height: 35px; margin: 0 auto .8rem; overflow: visible; }
.gd-head .gd-eyebrow { margin-bottom: .4rem; }
.gd-title {
    margin: 0; padding-left: .14em;
    font-family: var(--gd-heading); font-weight: 400; font-size: 1.62rem; line-height: 1.3;
    letter-spacing: .14em; text-transform: uppercase; text-wrap: balance; color: var(--gd-title, var(--gd-jewel));
}
.gd-jewel .gd-title {
    background: var(--gd-leaf-img) center / 260px auto, var(--gd-foil-v);
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.gd-rule { display: block; width: 176px; height: 14px; margin: .9rem auto 0; overflow: visible; }
html.inv-anim .gd-head .gd-rule { clip-path: inset(0 50%); transition: clip-path 1.1s cubic-bezier(.65, 0, .35, 1) .35s; }
html.inv-anim .is-revealed .gd-rule, html.inv-anim .gd-head.is-revealed .gd-rule { clip-path: inset(0 -2%); }

.gd-icon-link {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: .35rem; padding: .42rem .95rem .36rem;
    border: 1px solid var(--gd-line); color: var(--gd-gold-hi); text-decoration: none;
    font-size: .74rem; letter-spacing: .08em;
    transition: background-color .3s ease, color .3s ease;
}
.gd-icon-link:hover { background: var(--inv-accent); color: var(--gd-deep); }

/* buttons of the shared components: gold-leaf plates and double-line outlines */
.inv-button {
    padding: .9rem 1.6rem .82rem; border-radius: 0;
    background: var(--gd-leaf-img) center / 220px auto, linear-gradient(105deg, var(--gd-gold-lo), var(--gd-gold) 28%, var(--gd-gold-hi) 50%, var(--gd-gold) 72%, var(--gd-gold-lo));
    color: var(--gd-deep); text-decoration: none;
    font-family: var(--gd-sans); font-weight: 600; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
    box-shadow: inset 0 0 0 1px var(--gd-gold-lo), 0 10px 22px -10px rgb(0 0 0 / .6);
    clip-path: var(--gd-octagon);
}
.inv-button:hover { filter: brightness(1.06); }
.inv-button--outline {
    background: transparent; color: var(--gd-label, var(--gd-gold-ink)); clip-path: none;
    box-shadow: inset 0 0 0 1px var(--gd-line);
    outline: 1px solid var(--gd-line-soft); outline-offset: -5px;
}
.inv-button--outline:hover { background: color-mix(in srgb, var(--inv-accent) 14%, transparent); filter: none; }
.gd-jewel .inv-button--outline { color: var(--gd-gold-hi); }

/* ---------- wide-screen ballroom (hidden on phones) ---------- */

.gd-aside { display: none; }

/* ---------- cover: lift doors ---------- */

.gd-cover {
    position: fixed; inset: 0; z-index: 30; isolation: isolate; overflow: hidden auto;
    display: flex; flex-direction: column; align-items: center; justify-content: safe center;
    padding: 2rem 1.9rem 2rem; text-align: center; color: var(--gd-cream);
    --gd-label: var(--gd-gold-hi);
}
.gd-door { position: absolute; top: 0; bottom: 0; z-index: -1; width: 50%; overflow: hidden; background: var(--gd-deep); }
.gd-door--left { left: 0; box-shadow: inset -1px 0 0 var(--gd-line-soft); }
.gd-door--right { right: 0; box-shadow: inset 1px 0 0 var(--gd-line-soft); }
/* each door carries one half of the same composition */
.gd-door__span { position: absolute; top: 0; bottom: 0; width: 200%; isolation: isolate; }
.gd-door--left .gd-door__span { left: 0; }
.gd-door--right .gd-door__span { left: -100%; }
/* the photo glows faintly through a deep jewel gradient; black marble veins over it */
.gd-door__photo {
    position: absolute; inset: 0; z-index: -2;
    background:
        radial-gradient(90% 55% at 50% 38%, color-mix(in srgb, var(--gd-jewel) 50%, transparent), color-mix(in srgb, var(--gd-jewel) 88%, var(--gd-deep)) 75%),
        linear-gradient(180deg, color-mix(in srgb, var(--gd-deep) 55%, transparent), color-mix(in srgb, var(--gd-jewel) 80%, transparent) 40%, var(--gd-deep) 96%),
        var(--gd-photo, linear-gradient(var(--gd-jewel), var(--gd-deep))) center 30% / cover;
}
.gd-door__span::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: url('../img/marble-dark-soft.webp') center / 560px auto; opacity: .6;
}
/* a wide sunburst centred on the arch window */
.gd-door__rays {
    position: absolute; left: 50%; top: 40%; width: 210vmax; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--inv-accent) 42%, transparent) 0 .5deg, transparent .5deg 5deg);
    -webkit-mask: radial-gradient(closest-side, #000 6%, rgb(0 0 0 / .35) 22%, transparent 48%); mask: radial-gradient(closest-side, #000 6%, rgb(0 0 0 / .35) 22%, transparent 48%);
}
/* fans standing along the bottom inside the frame */
.gd-door__band {
    position: absolute; left: 14px; right: 14px; bottom: 17px; height: 15px; opacity: .55;
    background: var(--gd-foil);
    -webkit-mask: url('../img/fan-band.svg') center bottom / 28px 15px repeat-x; mask: url('../img/fan-band.svg') center bottom / 28px 15px repeat-x;
}
.gd-frame--cover { inset: 14px; }
/* the seam: two vertical gold lines, only near the top and bottom so they never cross the names */
.gd-door__span::after {
    content: ''; position: absolute; top: 14px; bottom: 14px; left: calc(50% - 4px); width: 8px;
    border-inline: 1px solid var(--gd-line-soft);
    -webkit-mask: linear-gradient(#000, transparent 14%, transparent 86%, #000); mask: linear-gradient(#000, transparent 14%, transparent 86%, #000);
}

.gd-cover__inner { position: relative; width: 100%; max-width: 340px; transition: opacity .5s ease, transform .7s ease; }
.gd-cover__top { display: flex; flex-direction: column; align-items: center; }
.gd-cover__fan { display: block; width: 104px; height: 57px; margin: 0 auto .35rem; overflow: visible; }
.gd-cover__kicker { margin: 0; }
.gd-cover__window { --gd-window: min(62vw, 250px); margin: 1.7rem auto 1.7rem; }
/* the fan on the window's rim rises above it: the gap to the kicker grows with the window */
.gd-cover .gd-cover__window { margin-top: calc(var(--gd-window) * .17 + .9rem); }
.gd-cover__names { margin: 0 0 .4rem; font-size: clamp(2.5rem, 11.5vw, 2.9rem); line-height: 1.08; filter: drop-shadow(0 2px 10px rgb(0 0 0 / .35)); }
.gd-cover__date {
    display: flex; align-items: center; justify-content: center; gap: .75rem; margin: 0 0 1rem;
    font-family: var(--gd-heading); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gd-gold-hi);
}
.gd-cover__date i { width: 6px; height: 6px; rotate: 45deg; background: var(--inv-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-accent) 22%, transparent); }
.gd-cover__guest { position: relative; margin: 0 auto 1rem; padding: .5rem .5rem .45rem; max-width: 300px; border-block: 1px solid var(--gd-line-soft); }
.gd-cover__guest p { margin: 0 0 .1rem; font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: color-mix(in srgb, var(--gd-cream) 88%, transparent); }
.gd-cover__guest-name { display: block; font-family: var(--gd-heading); font-size: 1.08rem; line-height: 1.35; letter-spacing: .04em; color: var(--gd-cream); }

/* opening: the doors slide apart, the text steps back */
.gd-cover--leave { transition: opacity 1.5s linear; pointer-events: none; }
.gd-cover--gone { opacity: .99; }
.gd-cover--leave .gd-door { transition: transform 1.25s cubic-bezier(.76, 0, .2, 1) .2s; }
.gd-cover--gone .gd-door--left { transform: translateX(-101%); }
.gd-cover--gone .gd-door--right { transform: translateX(101%); }
.gd-cover--gone .gd-cover__inner { opacity: 0; transform: scale(.94); }

/* the one opening moment: the photo settles from a slight zoom while the arch lines and the fan draw and the
   rays rise; the text follows line by line (all done by about 2.4 s, nothing loops) */
@keyframes gd-settle { from { opacity: 0; transform: scale(1.1); } to { opacity: 1; transform: none; } }
@keyframes gd-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes gd-fade { from { opacity: 0; } }
@keyframes gd-rise { from { opacity: 0; scale: .55; } }

.gd-cover__window .gd-window__rim { overflow: hidden; }
html.inv-anim .gd-cover__window .gd-window__photo { animation: gd-settle 1.7s cubic-bezier(.2, .7, .2, 1) .15s both; }
html.inv-anim .gd-cover__window .gd-window__rim { animation: gd-fade .7s ease .1s both; }
html.inv-anim .gd-cover__window .gd-window__outline,
html.inv-anim .gd-cover__fan { stroke-dasharray: 1; animation: gd-draw 1.5s cubic-bezier(.65, 0, .35, 1) .25s both; }
html.inv-anim .gd-cover__fan { animation: gd-draw 1.3s cubic-bezier(.65, 0, .35, 1) .1s both, gd-fade .9s ease .1s both; }
html.inv-anim .gd-door__rays { animation: gd-rise 2s cubic-bezier(.2, .7, .2, 1) .3s both; }
html.inv-anim .gd-cover--leave .gd-door__rays { animation: none; }

/* ---------- intro (first view after opening): the cover photo melting into jewel marble ---------- */

.gd-intro {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 560px; padding: 5rem 1.6rem 4rem; text-align: center;
}
.gd-intro--photo { min-height: min(100svh, 820px); padding-top: 54svh; }
.gd-intro__photo { position: absolute; inset: 0 0 auto; height: 66%; z-index: -1; overflow: hidden; }
.gd-intro__photo img { width: 100%; height: calc(100% + 80px); margin-top: -40px; object-fit: cover; object-position: center 40%; }
.gd-intro__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--gd-deep) 30%, transparent) 0%, transparent 18%, transparent 55%,
        color-mix(in srgb, var(--gd-jewel) 70%, transparent) 100%);
}
.gd-intro__rays { top: auto; bottom: -30%; translate: -50% 0; width: 170%; opacity: .55; }
.gd-intro__body { position: relative; }
.gd-intro .gd-medallion { margin-bottom: 1.3rem; }
.gd-intro__kicker { margin-bottom: .2rem; }
.gd-intro__names { margin: 0 0 .7rem; font-size: 3.6rem; line-height: 1.08; }
.gd-intro__date {
    display: flex; align-items: center; justify-content: center; gap: .9rem; margin: 0 0 1.2rem;
    font-family: var(--gd-heading); font-size: 1.02rem; letter-spacing: .3em; color: var(--gd-gold-hi);
}
.gd-intro__date span { padding-left: .3em; }
.gd-intro__date i { width: 5px; height: 5px; rotate: 45deg; background: var(--inv-accent); }
.gd-intro__quote { max-width: 320px; margin: 0 auto; font-style: italic; font-weight: 300; font-size: .95rem; line-height: 1.7; color: var(--gd-muted); }

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

.gd-section { position: relative; padding: 4.5rem 1.5rem; text-align: center; }
.gd-section > :not(.gd-frame):not(.gd-edge):not(.gd-photo-section__bg):not(.gd-closing__bg):not(.gd-opening__bg) { position: relative; z-index: 1; }

/* opening (ivory): a framed ivory plate and a jewel quote panel */
/* a faint client photo under the marble veins (z -3, the marble at -2 multiplies over it), washed with ivory:
   strongest behind the plate, lighter at the edges; without a photo only the ivory/champagne gradient shows */
.gd-opening { overflow: hidden; }
.gd-opening__bg {
    position: absolute; inset: 0; z-index: -3; overflow: hidden;
    background:
        radial-gradient(80% 40% at 100% 0%, color-mix(in srgb, var(--inv-accent) 22%, transparent), transparent 70%),
        radial-gradient(80% 40% at 0% 100%, color-mix(in srgb, var(--gd-jewel) 10%, transparent), transparent 70%),
        var(--inv-background);
}
.gd-opening__bg img { position: absolute; left: 0; top: -40px; width: 100%; height: calc(100% + 80px); object-fit: cover; opacity: .58; filter: saturate(.8) blur(.5px); }
.gd-opening__bg::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(60% 26% at 50% 28%, color-mix(in srgb, var(--inv-background) 55%, transparent), transparent 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-background) 35%, transparent), transparent 50%, color-mix(in srgb, var(--inv-background) 30%, transparent));
}
.gd-opening .gd-plate { background: color-mix(in srgb, var(--inv-background) 50%, rgb(255 255 255 / .82)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.gd-plate {
    position: relative; padding: 3rem 1.7rem 2.5rem;
    background: color-mix(in srgb, var(--inv-background) 55%, #fff);
    box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--gd-deep) 60%, transparent);
}
.gd-plate > :not(.gd-frame) { position: relative; z-index: 1; }
.gd-plate .gd-frame { inset: 9px; }
.gd-plate__fan { display: block; width: 110px; height: 60px; margin: 0 auto 1rem; overflow: visible; }
.gd-arabic { margin-bottom: 1rem; font-family: 'Amiri', 'Traditional Arabic', serif; font-size: 1.7rem; line-height: 1.6; color: var(--gd-jewel); }
.gd-opening__greeting { font-family: var(--gd-heading); font-size: 1rem; letter-spacing: .06em; color: var(--gd-jewel); }
.gd-quote { position: relative; margin: 2.4rem 0 0; padding: 2.6rem 1.8rem 2.2rem; clip-path: var(--gd-octagon); }
.gd-quote__corner { width: 44px; height: 44px; }
.gd-quote__mark { display: block; height: 2.4rem; font-family: var(--gd-heading); font-size: 4.4rem; line-height: 1; }
.gd-quote blockquote { margin: 0; font-style: italic; font-weight: 300; font-size: 1rem; line-height: 1.85; color: var(--gd-cream); }
.gd-quote figcaption {
    display: inline-flex; align-items: center; gap: .7rem; margin-top: 1rem;
    font-size: .68rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--gd-gold-hi);
}
.gd-quote figcaption::before, .gd-quote figcaption::after { content: ''; width: 20px; height: 1px; background: currentColor; }

/* couple (jewel): arched portraits in front of tinted stepped towers with rays, on a stepped plinth */
.gd-person__stage { position: relative; isolation: isolate; width: 214px; margin: 0 auto 1.4rem; padding-top: 20px; }
.gd-person__tower {
    position: absolute; left: -34px; right: -34px; top: -14px; bottom: 8px; z-index: -2;
    background:
        repeating-linear-gradient(90deg, transparent 0 13px, color-mix(in srgb, var(--inv-accent) 22%, transparent) 13px 14px),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 26%, var(--gd-jewel)), color-mix(in srgb, var(--gd-jewel) 82%, var(--gd-deep)) 88%);
    clip-path: polygon(30% 0, 70% 0, 70% 7%, 80% 7%, 80% 14%, 90% 14%, 90% 22%, 100% 22%, 100% 100%, 0 100%, 0 22%, 10% 22%, 10% 14%, 20% 14%, 20% 7%, 30% 7%);
    opacity: .9;
}
.gd-person__rays { top: 44%; width: 230%; opacity: .5; }
.gd-person__window { --gd-window: 178px; }
.gd-plinth { position: relative; display: block; height: 8px; margin: 22px -26px 0; border-block: 1px solid var(--gd-line); }
.gd-plinth::after { content: ''; display: block; height: 6px; margin: 7px 24px 0; border-bottom: 1px solid var(--gd-line-soft); }
.gd-person__nickname { margin: .9rem 0 .2rem; font-size: 3.3rem; }
.gd-person__name {
    margin: 0 0 .7rem; font-family: var(--gd-heading); font-weight: 400; font-size: 1.08rem; line-height: 1.45;
    letter-spacing: .12em; text-transform: uppercase; color: var(--gd-cream);
}
.gd-person__parents { font-size: .9rem; color: var(--gd-muted); }
.gd-person__parents strong { font-weight: 600; color: var(--gd-cream); }
.gd-couple__amp {
    display: grid; place-items: center; width: 60px; height: 60px; margin: 3rem auto;
    rotate: 45deg; border: 1px solid var(--gd-line); outline: 1px solid var(--gd-line-soft); outline-offset: 5px;
    background: color-mix(in srgb, var(--gd-deep) 50%, transparent);
}
.gd-couple__amp span { rotate: -45deg; font-size: 2.6rem; line-height: 1; padding: .1em .15em 0; }

/* photo-gradient sections (countdown, live streaming): the photo under a strong jewel gradient */
.gd-photo-section { overflow: hidden; }
.gd-photo-section__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.gd-photo-section__bg img { width: 100%; height: calc(100% + 80px); margin-top: -40px; object-fit: cover; }
.gd-photo-section__bg::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(70% 45% at 50% 50%, color-mix(in srgb, var(--gd-deep) 30%, transparent), transparent),
        linear-gradient(180deg, color-mix(in srgb, var(--gd-jewel) 90%, transparent), color-mix(in srgb, var(--gd-jewel) 74%, transparent) 45%, color-mix(in srgb, var(--gd-deep) 94%, transparent));
}

/* countdown: chamfered jewel tiles with a gold-leaf edge and gold-leaf numbers */
.gd-countdown { padding-block: 5rem; }
.gd-countdown__date { margin: -1rem 0 1.8rem; font-family: var(--gd-heading); font-size: .84rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gd-gold-hi); }
.gd-countdown .inv-countdown { gap: .55rem; }
.gd-countdown .inv-countdown__item {
    position: relative; isolation: isolate; flex: 1; max-width: 4.9rem; min-width: 0; padding: 1rem 0 .8rem;
    border-radius: 0; background: var(--gd-leaf-img) center / 160px auto, var(--gd-foil);
    clip-path: var(--gd-octagon); box-shadow: none;
}
.gd-countdown .inv-countdown__item::before {
    content: ''; position: absolute; inset: 2px; z-index: -1;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--gd-jewel) 80%, var(--inv-accent)), var(--gd-deep));
    clip-path: polygon(9.2px 0, calc(100% - 9.2px) 0, 100% 9.2px, 100% calc(100% - 9.2px), calc(100% - 9.2px) 100%, 9.2px 100%, 0 calc(100% - 9.2px), 0 9.2px);
}
.gd-countdown .inv-countdown__value {
    font-family: var(--gd-heading); font-weight: 400; font-size: 1.9rem; line-height: 1.1; color: var(--gd-gold-hi);
    background: var(--gd-leaf-img) center / 120px auto, var(--gd-foil-v);
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.gd-countdown .inv-countdown__label { margin-top: .3rem; font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gd-cream); opacity: 1; }
.gd-countdown .inv-countdown__actions { margin-top: 2rem; gap: .65rem; }
.gd-countdown .inv-countdown__done { font-family: var(--gd-heading); letter-spacing: .06em; }

/* events (ivory): jewel ballroom tickets */
.gd-events .gd-head { margin-bottom: 2.2rem; }
.gd-ticket { position: relative; overflow: hidden; padding: 1.5rem 1.5rem 2.4rem; text-align: center; box-shadow: 0 26px 50px -26px color-mix(in srgb, var(--gd-deep) 75%, transparent); }
.gd-ticket + .gd-ticket { margin-top: 2.25rem; }
.gd-ticket > :not(.gd-frame) { position: relative; z-index: 1; }
.gd-ticket .gd-corner { width: 48px; height: 48px; }
.gd-ticket__photo {
    margin: .35rem .35rem 0;
    clip-path: polygon(0 20px, 10px 20px, 10px 10px, 20px 10px, 20px 0, calc(100% - 20px) 0, calc(100% - 20px) 10px, calc(100% - 10px) 10px, calc(100% - 10px) 20px, 100% 20px, 100% 100%, 0 100%);
}
.gd-ticket__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gd-ticket__no { margin: 1.4rem 0 .3rem; font-size: .66rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--gd-label); }
.gd-ticket__name { margin: 0 0 1.3rem; font-family: var(--gd-heading); font-weight: 400; font-size: 1.5rem; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; }
.gd-ticket__date { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: 0 auto .9rem; max-width: 300px; }
.gd-ticket__date span {
    padding: .45rem 0 .35rem; border-block: 1px solid var(--gd-line);
    font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.gd-ticket__date strong { padding: 0 .9rem; font-family: var(--gd-heading); font-weight: 400; font-size: 3.2rem; line-height: 1; }
.gd-ticket__time { margin: 0; font-size: .9rem; letter-spacing: .08em; }
/* perforation with two punched notches */
.gd-ticket__perf { height: 0; margin: 1.6rem -1.5rem 1.4rem; border-top: 1px dashed var(--gd-line); z-index: 2 !important; }
.gd-ticket__perf::before, .gd-ticket__perf::after {
    content: ''; position: absolute; top: -13px; width: 26px; height: 26px; border-radius: 50%;
    background: var(--inv-background); box-shadow: inset 0 0 0 1px var(--gd-line);
}
.gd-ticket__perf::before { left: -13px; }
.gd-ticket__perf::after { right: -13px; }
.gd-ticket__pin { display: block; margin: 0 auto .4rem; color: var(--inv-accent); }
.gd-ticket__venue { margin-bottom: .25rem; font-family: var(--gd-heading); font-size: 1.05rem; letter-spacing: .04em; color: var(--gd-gold-hi); }
.gd-ticket__address { font-size: .88rem; color: var(--gd-muted); }
.gd-ticket__dress { font-size: .86rem; }
.gd-ticket__dress span { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--gd-label); }
.gd-ticket .inv-maps { margin-top: 1.2rem; }

/* love story (jewel): a zig-zag programme, a gold line down the centre with a diamond per chapter */
.gd-timeline { position: relative; max-width: 26rem; margin: 0 auto; padding: .3rem 0; list-style: none; }
.gd-timeline::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%);
    background: linear-gradient(transparent, var(--gd-line) 6%, var(--gd-line) 92%, transparent);
}
.gd-chapter {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 1.4rem minmax(0, 1fr);
    align-items: start; column-gap: .5rem; padding-bottom: 2.4rem;
}
.gd-chapter:last-child { padding-bottom: 0; }
.gd-chapter__text { grid-column: 1; grid-row: 1; text-align: right; }
.gd-chapter__node { grid-column: 2; grid-row: 1; justify-self: center; }
.gd-chapter__meta { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; text-align: left; }
.gd-chapter--flip .gd-chapter__text { grid-column: 3; text-align: left; }
.gd-chapter--flip .gd-chapter__meta { grid-column: 1; align-items: flex-end; text-align: right; }
.gd-chapter__node {
    position: relative; width: 13px; height: 13px; margin-top: .3rem; rotate: 45deg;
    border: 1px solid var(--inv-accent); background: var(--gd-jewel);
    box-shadow: inset 0 0 0 3px var(--gd-jewel), inset 0 0 0 8px var(--inv-accent), 0 0 0 4px var(--gd-jewel);
}
.gd-chapter__title {
    margin: 0; font-family: var(--gd-heading); font-weight: 500; font-size: 1rem; line-height: 1.3;
    letter-spacing: .06em; text-transform: uppercase; overflow-wrap: anywhere; color: var(--gd-gold-hi);
}
.gd-chapter__rule { display: block; width: 70%; height: 0; margin: .5rem 0 .55rem auto; border-top: 1px dotted var(--gd-line); }
.gd-chapter--flip .gd-chapter__rule { margin-left: 0; margin-right: auto; }
.gd-chapter__story { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--gd-muted); overflow-wrap: anywhere; }
.gd-chapter__number {
    display: block; font-family: var(--gd-heading); font-size: 2rem; line-height: 1;
    color: transparent; -webkit-text-stroke: 1px var(--inv-accent);
}
.gd-chapter__date {
    margin: 0; font-size: .9rem; font-weight: 600; line-height: 1.3; letter-spacing: .1em;
    text-transform: uppercase; color: var(--gd-cream); overflow-wrap: anywhere;
}
.gd-chapter__photo {
    width: min(5.5rem, 100%); margin: .2rem 0 0; padding: 3px;
    background: var(--gd-leaf-img) center / 120px auto, var(--gd-foil);
    clip-path: polygon(22% 0, 78% 0, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 0 22%);
}
.gd-chapter__photo img {
    display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
    clip-path: polygon(22% 0, 78% 0, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 0 22%);
}

/* gallery (ivory): mosaic tiles with an inner gold line */
.gd-gallery { padding-inline: 1rem; }
.gd-gallery .inv-gallery { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 108px; grid-auto-flow: dense; gap: 6px; }
.gd-gallery .inv-gallery__item { aspect-ratio: auto; height: 100%; border-radius: 0; box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--gd-deep) 80%, transparent); }
.gd-gallery .inv-gallery__item::after {
    content: ''; position: absolute; inset: 5px; border: 1px solid color-mix(in srgb, var(--gd-gold-hi) 70%, transparent);
    pointer-events: none; transition: inset .4s ease;
}
.gd-gallery .inv-gallery__item:hover::after { inset: 9px; }
.gd-gallery .inv-gallery__item:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
.gd-gallery .inv-gallery__item:nth-child(6n + 4) { grid-row: span 2; }
.gd-gallery .inv-gallery__item:nth-child(6n + 5), .gd-gallery .inv-gallery__item:nth-child(6n) { grid-column: span 2; }

/* live streaming (photo gradient) */
.gd-stream { padding-block: 5rem; }
.gd-stream .gd-head { margin-bottom: 1.5rem; }
.gd-stream .inv-button { margin-top: .75rem; }

/* gift (ivory): jewel cards, two per row (the last one full width when the count is odd) */
.gd-gift .inv-gift { display: grid; gap: .75rem; margin-top: 1.75rem; }
.gd-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.gd-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.gd-gift .inv-gift__account + .inv-gift__account { margin-top: 0; }
.gd-gift .inv-gift__account:not(.inv-gift__address) {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
    padding: .8rem .8rem .85rem; text-align: left; overflow: hidden;
    border-radius: 5px; color: var(--gd-cream);
    background:
        radial-gradient(circle at 100% 0, transparent 0, color-mix(in srgb, var(--gd-jewel) 70%, transparent) 30%, var(--gd-jewel) 58%),
        repeating-conic-gradient(from 180deg at 100% 0, color-mix(in srgb, var(--inv-accent) 50%, transparent) 0 .7deg, transparent .7deg 6deg),
        linear-gradient(135deg, color-mix(in srgb, var(--gd-jewel) 80%, var(--inv-accent)), var(--gd-deep));
    box-shadow: inset 0 0 0 1px var(--gd-line), 0 14px 26px -12px color-mix(in srgb, var(--gd-deep) 80%, transparent);
}
.gd-gift .inv-gift__account:not(.inv-gift__address)::after {
    content: ''; position: absolute; inset: 4px; border: 1px solid var(--gd-line-soft); border-radius: 3px; pointer-events: none;
}
/* the gold-leaf chip (top left), the bank logo sits opposite it */
.gd-gift .inv-gift__account:not(.inv-gift__address)::before {
    content: ''; flex: none; width: 2.2rem; height: 1.7rem; border-radius: 4px;
    background:
        linear-gradient(90deg, transparent 32%, rgb(0 0 0 / .22) 33% 34%, transparent 35% 65%, rgb(0 0 0 / .22) 66% 67%, transparent 68%),
        linear-gradient(transparent 46%, rgb(0 0 0 / .22) 47% 53%, transparent 54%),
        var(--gd-leaf-img) center / 80px auto,
        var(--gd-foil);
}
.gd-gift .inv-gift__account p { margin: 0; }
.gd-gift .inv-gift__account:not(.inv-gift__address) .inv-gift__bank {
    position: absolute; top: .9rem; right: .8rem; max-width: calc(100% - 4.4rem); text-align: right;
    font-size: .72rem; font-weight: 600; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase;
    color: var(--gd-gold-hi); overflow-wrap: anywhere;
}
.gd-gift .inv-gift__account .inv-gift__logo { height: 1.5rem; padding: .2rem .45rem; border-radius: .3rem; }
.gd-gift .inv-gift__account .inv-gift__logo img { max-width: 4rem; }
.gd-gift .inv-gift__number {
    max-width: 100%; margin-top: .75rem !important; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-weight: 600; font-size: 1rem; line-height: 1.3; letter-spacing: .04em; overflow-wrap: anywhere; color: var(--gd-gold-hi);
}
.gd-gift .inv-gift__holder { font-size: .8rem; letter-spacing: .08em; }
.gd-gift .inv-gift__account:not(.inv-gift__address) .inv-gift__holder {
    max-width: 100%; margin-top: .2rem; font-size: .62rem; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase;
    overflow-wrap: anywhere; color: var(--gd-cream); opacity: .92;
}
.gd-gift .inv-gift__account:not(.inv-gift__address) .inv-button--outline {
    position: relative; z-index: 1; margin-top: .65rem; padding: .35rem .7rem .3rem; font-size: .62rem; letter-spacing: .14em;
    color: var(--gd-gold-hi); outline: 0;
}
.gd-gift .inv-gift__address {
    position: relative; padding: 1.6rem 1.3rem; border-radius: 0; background: color-mix(in srgb, var(--inv-background) 55%, #fff);
    box-shadow: inset 0 0 0 1px var(--gd-line), 0 16px 34px -24px color-mix(in srgb, var(--gd-deep) 70%, transparent);
    outline: 1px solid var(--gd-line-soft); outline-offset: -6px;
}
.gd-gift .inv-gift__address .inv-gift__bank { font-size: .7rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--gd-gold-ink); }
.gd-gift .inv-gift__address .inv-button { margin-top: .75rem; }

/* rsvp (jewel) + wishes (ivory): framed panels */
.gd-panel { position: relative; padding: 2.4rem 1.6rem 2rem; text-align: left; }
.gd-panel .gd-frame { inset: 7px; color: var(--gd-line-soft); }
.gd-panel .gd-frame .gd-corner { width: 44px; height: 44px; }
.gd-panel .gd-frame::before { inset: 0 36px; }
.gd-panel .gd-frame::after { inset: 36px 0; }
.gd-panel > :not(.gd-frame) { position: relative; z-index: 1; }
.gd-rsvp .gd-panel { background: linear-gradient(180deg, color-mix(in srgb, var(--gd-jewel) 86%, #fff), color-mix(in srgb, var(--gd-jewel) 92%, var(--gd-deep))); box-shadow: 0 26px 50px -26px rgb(0 0 0 / .6); }
.gd-wishes .gd-panel { background: color-mix(in srgb, var(--inv-background) 55%, #fff); box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--gd-deep) 60%, transparent); }
.gd-panel .inv-form label, .gd-panel .inv-form__choices legend { font-size: .8rem; font-weight: 600; letter-spacing: .06em; color: var(--gd-muted); }
.gd-panel .inv-form input:not([type=radio]):not([type=checkbox]),
.gd-panel .inv-form select,
.gd-panel .inv-form textarea {
    border: 0; border-bottom: 1px solid var(--gd-line); border-radius: 0;
    background: transparent; color: var(--gd-text); padding-inline: 0; font-size: .95rem;
}
.gd-panel .inv-form input::placeholder, .gd-panel .inv-form textarea::placeholder { color: color-mix(in srgb, var(--gd-text) 60%, transparent); }
.gd-panel .inv-form select option { background: var(--inv-background); color: var(--inv-text); }
.gd-panel .inv-form input:focus, .gd-panel .inv-form select:focus, .gd-panel .inv-form textarea:focus { outline: none; border-bottom-color: var(--inv-accent); }
.gd-panel .inv-form input[type=radio], .gd-panel .inv-form input[type=checkbox] { accent-color: var(--inv-accent); }
.gd-panel .inv-form__choices label { color: var(--gd-text); }
.gd-panel .inv-form .inv-button { justify-self: stretch; margin-top: .5rem; }
.gd-panel .inv-form__notice { background: color-mix(in srgb, var(--inv-accent) 18%, transparent); color: var(--gd-text); }
.gd-panel .inv-rsvp__deadline { color: var(--gd-muted); }
/* wishes: compact gold-edged notes in a scroll box of about three */
.gd-panel .inv-wishes { --inv-wishes-height: 20rem; }
.gd-wishes .gd-panel { padding-bottom: 2.6rem; }
.gd-panel .inv-wishes__list { padding: .5rem .4rem .5rem 0; border-top: 1px solid var(--gd-line-soft); border-bottom: 1px solid var(--gd-line-soft); }
.gd-panel .inv-wish { padding: .65rem .8rem; border-radius: 0; background: color-mix(in srgb, var(--gd-jewel) 6%, transparent); border-left: 2px solid var(--inv-accent); }
.gd-panel .inv-wish__name { font-family: var(--gd-heading); font-weight: 500; font-size: .9rem; letter-spacing: .04em; color: var(--gd-jewel); }
.gd-panel .inv-wish__message { font-size: .9rem; line-height: 1.5; }
.gd-panel .inv-wish__time { font-size: .7rem; color: var(--gd-muted); opacity: 1; }

/* closing: a full-bleed photo melting into jewel marble; the gilded fan with a sunburst, the names framed by corners */
.gd-closing { min-height: 620px; display: flex; flex-direction: column; justify-content: flex-end; padding: 6rem 1.5rem 0; overflow: hidden; }
.gd-closing__bg { position: absolute; inset: 0 0 auto; height: min(60svh, 460px); z-index: -1; overflow: hidden; }
.gd-closing__bg img { width: 100%; height: calc(100% + 80px); margin-top: -40px; object-fit: cover; object-position: center 25%; }
.gd-closing__bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--gd-jewel) 30%, transparent) 0%, transparent 18%,
        color-mix(in srgb, var(--gd-jewel) 62%, transparent) 50%, color-mix(in srgb, var(--gd-jewel) 92%, transparent) 78%);
}
.gd-closing__bg { -webkit-mask: linear-gradient(#000 62%, transparent 98%); mask: linear-gradient(#000 62%, transparent 98%); }
.gd-intro__photo { -webkit-mask: linear-gradient(#000 70%, transparent 100%); mask: linear-gradient(#000 70%, transparent 100%); }
.gd-closing--photo { padding-top: min(36svh, 290px); }
.gd-closing__body { position: relative; isolation: isolate; max-width: 350px; margin: 0 auto; }
.gd-closing__rays { top: 36px; width: 420px; opacity: .6; }
.gd-closing__fan { display: block; width: 120px; height: 66px; margin: 0 auto .65rem; overflow: visible; filter: drop-shadow(0 6px 14px rgb(0 0 0 / .35)); }
.gd-closing__kicker { margin-bottom: .2rem; color: var(--gd-gold-hi); }
.gd-closing__title {
    margin: 0; padding-left: .12em; font-family: var(--gd-heading); font-weight: 400; font-size: 2rem; line-height: 1.25;
    letter-spacing: .12em; text-transform: uppercase; color: var(--gd-cream);
}
.gd-closing__rule { margin-bottom: 1.1rem; }
.gd-closing__plaque {
    position: relative; padding: 1.7rem 1.3rem 1.6rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--gd-deep) 45%, transparent), color-mix(in srgb, var(--gd-deep) 70%, transparent));
    box-shadow: inset 0 0 0 1px var(--gd-line-soft);
}
.gd-closing__plaque > :not(.gd-corner) { position: relative; }
.gd-closing__corner { width: 34px; height: 34px; }
.gd-closing__plaque .gd-corner--tl { top: 6px; left: 6px; }
.gd-closing__plaque .gd-corner--tr { top: 6px; right: 6px; }
.gd-closing__plaque .gd-corner--bl { bottom: 6px; left: 6px; }
.gd-closing__plaque .gd-corner--br { bottom: 6px; right: 6px; }
.gd-closing__names { margin: 0 0 .7rem; font-size: clamp(2.1rem, 9.5vw, 2.6rem); line-height: 1.1; }
.gd-closing__message { font-size: .92rem; line-height: 1.6; color: var(--gd-cream); }
.gd-closing__signature { margin: 0; font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gd-gold-hi); }

/* shared components outside the sections */
.inv-music__button { background: var(--gd-jewel); color: var(--inv-accent); box-shadow: 0 0 0 1px var(--gd-line), 0 0 0 4px var(--gd-jewel), 0 0 0 5px var(--gd-line-soft), 0 8px 18px rgb(0 0 0 / .35); }
.inv-checkin { margin: 0 1.5rem 2rem; border-radius: 0; background: color-mix(in srgb, var(--inv-background) 55%, #fff); color: var(--inv-text); box-shadow: inset 0 0 0 1px var(--gd-line); }
.inv-checkin__title { color: var(--gd-jewel); font-family: var(--gd-heading); font-weight: 400; }
.inv-branding { color: color-mix(in srgb, var(--inv-text) 75%, var(--inv-background)); }

/* ---------- wider screens: the invitation as a column in a ballroom ---------- */

@media (min-width: 640px) {
    .gd-aside {
        display: block; position: fixed; inset: 0; z-index: 0; overflow: hidden;
        background-image:
            repeating-linear-gradient(90deg, transparent 0 55px, color-mix(in srgb, var(--inv-accent) 10%, transparent) 55px 56px),
            linear-gradient(180deg, var(--gd-jewel), var(--gd-deep));
    }
    .gd-aside__rays {
        position: absolute; left: 50%; bottom: -60vh; width: 150vh; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
        background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--inv-accent) 40%, transparent) 0 .4deg, transparent .4deg 5deg);
        -webkit-mask: radial-gradient(closest-side, #000 30%, transparent); mask: radial-gradient(closest-side, #000 30%, transparent);
    }
    .gd-aside__side { display: none; }

    .gd-page {
        z-index: 1; width: var(--gd-column); margin: 0 auto; min-height: 100vh;
        box-shadow: 0 0 0 1px var(--gd-line), 0 0 0 7px var(--gd-deep), 0 0 0 8px var(--gd-line-soft), 0 0 70px rgb(0 0 0 / .55);
    }
    .gd-cover { left: calc(50% - var(--gd-column) / 2); right: auto; width: var(--gd-column); }
    .gd-door__rays { width: 1200px; }
}

@media (min-width: 1024px) {
    .gd-aside__side {
        position: absolute; top: 0; bottom: 0; width: calc(50% - var(--gd-column) / 2 - 8px);
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        padding: 3rem clamp(1.5rem, 4vw, 4rem); text-align: center; color: var(--gd-cream);
    }
    .gd-aside__side--left { left: 0; }
    .gd-aside__side--right { right: 0; }
    .gd-aside__names { margin: 0 0 1rem; font-size: clamp(3.4rem, 5.2vw, 5.6rem); line-height: 1.1; }
    .gd-aside__names span { display: block; font-size: .5em; line-height: 1; }
    .gd-aside__date { margin: 0; font-family: var(--gd-heading); font-size: .95rem; letter-spacing: .4em; color: var(--gd-gold-hi); }
    .gd-aside__fan { width: 150px; height: 83px; margin-bottom: 1.6rem; overflow: visible; }
    .gd-aside__quote { max-width: 320px; margin: 0 auto 1.6rem; font-style: italic; font-weight: 300; font-size: 1.02rem; line-height: 1.85; }
    .gd-aside .gd-eyebrow { color: var(--gd-gold-hi); }
}

/* ---------- short screens: the cover keeps every line, the ornaments shrink ---------- */

@media (max-height: 760px) {
    .gd-cover { padding-block: 1.6rem 1.7rem; }
    .gd-cover__fan { width: 80px; height: 44px; }
    .gd-cover__window { --gd-window: min(56vw, 218px); margin: 1.3rem auto 1.4rem; }
    .gd-cover__names { font-size: clamp(2.3rem, 10.5vw, 2.6rem); }
    .gd-cover__date { margin-bottom: .8rem; }
    .gd-cover__guest { margin-bottom: .8rem; }
}
@media (max-height: 700px) {
    .gd-cover__window { --gd-window: min(50vw, 192px); margin-block: 1.1rem 1.2rem; }
}
@media (max-height: 660px) {
    .gd-cover { padding-block: 1.3rem 1.4rem; }
    .gd-cover__fan { width: 70px; height: 38px; margin-bottom: .2rem; }
    .gd-cover__window { --gd-window: min(44vw, 160px); margin: 1rem auto 1.1rem; }
    .gd-cover__names { font-size: 2.2rem; margin-bottom: .3rem; }
    .gd-cover__date { margin-bottom: .8rem; }
    .gd-cover__guest { padding-block: .5rem .45rem; margin-bottom: .85rem; }
    .gd-cover__guest-name { font-size: 1.1rem; }
    .gd-door__band { display: none; }
}
@media (max-height: 580px) {
    .gd-cover__window { --gd-window: min(38vw, 128px); margin: .9rem auto .9rem; }
    .gd-cover__fan { width: 56px; height: 31px; }
    .gd-cover__names { font-size: 2rem; }
}
@media (max-width: 360px) {
    .gd-cover__names, .gd-intro__names { font-size: 2.9rem; }
    .gd-countdown .inv-countdown__value { font-size: 1.6rem; }
    .gd-title { font-size: 1.4rem; letter-spacing: .12em; }
}

@media (prefers-reduced-motion: reduce) {
    .gd-cover--leave, .gd-cover--leave .gd-door, .gd-cover__inner { transition: none; }
    .inv-button, .gd-icon-link, .gd-gallery .inv-gallery__item::after { transition: none; }
}

/* ---------- page end: the closing ends a steady distance above the bottom edge ---------- */
/* the closing carries the bottom space itself (in its own colour, clear of the music button and the "Gulir" pill),
   so the shared music spacer (a bare strip in the page colour) is not needed */
.inv-music__space { display: none; }
.gd-closing { padding-bottom: calc(6.2rem + env(safe-area-inset-bottom)); }

/* a warm gold glow behind the cover window */
.gd-window__glow {
    position: absolute; inset: -18% -45%; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-accent) 30%, transparent), transparent);
}

/* ---------- intro scene "Gerbang Pencakar Langit" (scene.json + sections/_scene; the intro lives in <body>, outside .gd-page):
   the camera flies through stepped gilded arches over jewel marble and stops at the arch window; a deco plaque card ---------- */
.gd-scene-marble { position: absolute; inset: 0; isolation: isolate;
    background:
        radial-gradient(70% 45% at 50% 42%, color-mix(in srgb, var(--inv-accent) 22%, transparent), transparent 72%),
        linear-gradient(180deg, color-mix(in srgb, var(--gd-jewel) 88%, var(--gd-deep)), var(--gd-deep)); }
.gd-scene-marble::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('../img/marble-dark-soft.webp') center / 520px auto; opacity: .6; }
.gd-scene-rays { position: absolute; left: 50%; top: 50%; width: 230vmax; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--inv-accent) 46%, transparent) 0 .5deg, transparent .5deg 5deg);
    -webkit-mask: radial-gradient(closest-side, #000 4%, rgb(0 0 0 / .4) 20%, transparent 46%); mask: radial-gradient(closest-side, #000 4%, rgb(0 0 0 / .4) 20%, transparent 46%); }
/* a stepped "skyscraper" arch: a double gilded outline with three widening steps at its foot */
.gd-scene-gate, .gd-scene-arch { position: relative; width: 100%; height: 100%; }
.gd-scene-gate { border: 3px solid var(--gd-gold-hi); border-bottom: 0; border-radius: 999px 999px 0 0;
    box-shadow: 0 0 18px color-mix(in srgb, var(--inv-accent) 35%, transparent), inset 0 0 18px color-mix(in srgb, var(--inv-accent) 22%, transparent); }
.gd-scene-gate::before { content: ''; position: absolute; inset: 12px 12px 0; border: 1.5px solid var(--gd-gold); border-bottom: 0; border-radius: inherit; }
.gd-scene-gate::after { content: ''; position: absolute; inset: -10px -10px 0; border: 1px solid var(--gd-line-soft); border-bottom: 0; border-radius: 999px 999px 0 0; }
.gd-scene-steps, .gd-scene-steps::before, .gd-scene-steps::after { position: absolute; height: 2px; background: var(--gd-foil); }
.gd-scene-steps { left: -3%; right: -3%; bottom: 0; }
.gd-scene-steps::before, .gd-scene-steps::after { content: ''; }
.gd-scene-steps::before { left: -4%; right: -4%; top: 7px; }
.gd-scene-steps::after { left: -9%; right: -9%; top: 14px; }
/* the arch window: gold-leaf rim, the cover photo under a jewel veil (the veil deepens as the card comes) */
.gd-scene-arch__rim { position: absolute; inset: 0; padding: 4px; border-radius: 999px 999px 0 0;
    background: var(--gd-leaf-img) center / 200px auto, var(--gd-foil);
    box-shadow: 0 0 0 1px var(--gd-gold-lo), 0 0 40px color-mix(in srgb, var(--inv-accent) 30%, transparent), 0 26px 50px -14px rgb(0 0 0 / .6); }
.gd-scene-arch__glass { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 999px 999px 0 0; isolation: isolate;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--gd-deep) 22%, transparent), transparent 26%, transparent 55%, color-mix(in srgb, var(--gd-jewel) 45%, transparent) 78%, var(--gd-deep)),
        var(--gd-photo, linear-gradient(transparent, transparent)) center 30% / cover,
        repeating-conic-gradient(from -90deg at 50% 100%, color-mix(in srgb, var(--inv-accent) 38%, transparent) 0 .7deg, transparent .7deg 8deg),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 10%, var(--gd-jewel)), var(--gd-deep)); }
.gd-scene-arch__glass--empty, .gd-scene-arch__glass::before { background:
        repeating-conic-gradient(from -90deg at 50% 100%, color-mix(in srgb, var(--inv-accent) 38%, transparent) 0 .7deg, transparent .7deg 8deg),
        radial-gradient(80% 50% at 50% 100%, color-mix(in srgb, var(--inv-accent) 30%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 10%, var(--gd-jewel)), var(--gd-deep)); }
.gd-scene-arch__glass::before { content: ''; position: absolute; inset: 0; z-index: 1; opacity: 0; }
.gd-scene-arch__glass--empty::before { display: none; }
.gd-scene-arch__glass::after { content: ''; position: absolute; inset: 0; z-index: 2; background: url('../img/marble-dark-soft.webp') center / 420px auto; opacity: .12; }
.inv-intro.is-playing .gd-scene-arch__glass::before { animation: gd-scene-veil 1.4s ease 3.1s forwards; }
@keyframes gd-scene-veil { to { opacity: .35; } }
.gd-scene-arch__line { position: absolute; inset: -11px -11px 0; border: 1px solid var(--gd-line); border-bottom: 0; border-radius: 999px 999px 0 0; }
.gd-scene-arch__key { position: absolute; left: 50%; top: -27px; width: 62px; height: 33px; translate: -50% 0; overflow: visible; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .5)); }
.gd-scene-arch .gd-scene-steps { bottom: -4px; }
/* bands of little gilded fans: hanging from the top, standing along the floor */
.gd-scene-band { width: 100%; height: 100%; background: var(--gd-leaf-img) center / 200px auto, var(--gd-foil);
    -webkit-mask: url('../img/fan-band.svg') center / auto 100% repeat-x; mask: url('../img/fan-band.svg') center / auto 100% repeat-x; }
.gd-scene-band--top { transform: scaleY(-1); }
.inv-scene__art > svg.gd-scene-corner { height: auto; aspect-ratio: 1; overflow: visible; filter: drop-shadow(0 2px 5px rgb(0 0 0 / .5)); }
.gd-scene-corner--tr { transform: scaleX(-1); }
.inv-scene__art > .gd-scene-medallion { width: 100%; height: auto; aspect-ratio: 1; margin: 0; filter: drop-shadow(0 10px 20px rgb(0 0 0 / .55)) drop-shadow(0 0 16px color-mix(in srgb, var(--inv-accent) 30%, transparent)); }
.gd-scene-medallion .gd-medallion__letters { font-size: min(6.4vw, 1.7rem); }
/* a few flakes of gold leaf drifting down through the light */
.gd-scene-leaf { position: absolute; inset: 0; overflow: hidden; }
.gd-scene-leaf i { position: absolute; top: -4%; width: 9px; height: 7px; opacity: 0;
    background: var(--gd-leaf-img) center / 60px auto, var(--gd-foil);
    clip-path: polygon(10% 20%, 70% 0, 100% 55%, 45% 100%, 0 70%); }
.gd-scene-leaf i:nth-child(1) { left: 12%; --d: 7.5s; --w: 1.2s; }
.gd-scene-leaf i:nth-child(2) { left: 30%; --d: 9s; --w: 2.6s; width: 6px; height: 5px; }
.gd-scene-leaf i:nth-child(3) { left: 47%; --d: 8s; --w: .6s; }
.gd-scene-leaf i:nth-child(4) { left: 63%; --d: 10s; --w: 3.4s; width: 7px; height: 9px; }
.gd-scene-leaf i:nth-child(5) { left: 79%; --d: 8.5s; --w: 1.8s; }
.gd-scene-leaf i:nth-child(6) { left: 90%; --d: 9.5s; --w: 4.4s; width: 6px; height: 6px; }
.gd-scene-leaf i:nth-child(7) { left: 21%; --d: 11s; --w: 5s; width: 11px; height: 8px; }
.inv-intro.is-playing .gd-scene-leaf i { animation: gd-scene-fall var(--d) linear var(--w) infinite; }
@keyframes gd-scene-fall {
    0% { opacity: 0; transform: translate(0, 0) rotate(0); }
    10% { opacity: .9; }
    50% { transform: translate(18px, 55vh) rotate(260deg); }
    90% { opacity: .8; }
    100% { opacity: 0; transform: translate(-10px, 108vh) rotate(520deg); }
}
/* the card: an octagonal jewel plaque on a gold-leaf rim, a double rule above and below, the names in gold leaf */
.inv-intro--scene .inv-scene__card {
    top: 50%; -webkit-mask: none; mask: none; aspect-ratio: auto; -webkit-backdrop-filter: none; backdrop-filter: none;
    width: min(var(--scene-card-w, 72vw), 19rem); padding: 2.1rem 1.3rem 1.9rem; isolation: isolate; color: var(--gd-cream);
    background: var(--gd-leaf-img) center / 200px auto, var(--gd-foil);
    clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
}
.inv-intro--scene .inv-scene__card::before { content: ''; position: absolute; inset: 3px; z-index: -1;
    clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
    background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--inv-accent) 20%, var(--gd-jewel)), var(--gd-deep) 85%); }
.inv-intro--scene .inv-scene__card::after { content: ''; position: absolute; inset: 10px 24px; z-index: -1; border-block: 3px double var(--gd-line); pointer-events: none; }
.inv-scene__card .inv-intro__label { margin-bottom: .55rem; font: 600 .66rem/1.4 var(--gd-sans); letter-spacing: .32em; text-transform: uppercase; color: var(--gd-gold-hi); }
.inv-scene__card .inv-intro__names { padding: .08em .2em; line-height: 1.12;
    background: var(--gd-leaf-img) center / 240px auto, var(--gd-foil-v);
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.inv-scene__card .inv-intro__rule { position: relative; width: 7.5rem; margin-block: .9rem .8rem; background: linear-gradient(90deg, transparent, var(--inv-accent) 30%, var(--inv-accent) 70%, transparent); overflow: visible; }
.inv-scene__card .inv-intro__rule::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; translate: -50% -50%; rotate: 45deg; background: var(--inv-accent); box-shadow: 0 0 0 3px var(--gd-deep), 0 0 0 4px var(--gd-line); }
.inv-scene__card .inv-intro__date { font: 400 .8rem/1.4 var(--gd-heading); letter-spacing: .16em; text-transform: uppercase; color: var(--gd-gold-hi); }
.inv-intro--scene .inv-intro__skip { background: color-mix(in srgb, var(--gd-deep) 65%, transparent); border-color: var(--gd-line-soft); color: var(--gd-gold-hi); font-family: var(--gd-sans); }
@media (prefers-reduced-motion: reduce) {
    .inv-intro.is-playing .gd-scene-leaf i { animation: none; }
    .inv-intro.is-playing .gd-scene-arch__glass::before { animation: none; opacity: .8; }
}