/*
 * 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: img/gold-leaf.webp (grey crumpled leaf, tinted gold by a gradient under it), img/marble-dark.webp
 * (black marble, blended into the jewel), img/marble-light.webp (white marble on the ivory sections),
 * 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.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 blended in */
.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.webp') center / 560px auto;
    mix-blend-mode: overlay; 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.webp') center / 640px auto;
    mix-blend-mode: multiply; 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); background-blend-mode: soft-light, normal;
    -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);
    background-blend-mode: soft-light, normal;
    -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); background-blend-mode: soft-light, normal;
    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); background-blend-mode: soft-light, normal; }
.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); background-blend-mode: soft-light, normal;
    -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));
    background-blend-mode: soft-light, normal;
    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: max(1.6rem, 4.5svh) 1.9rem max(1.8rem, 4.5svh); 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.webp') center / 560px auto; mix-blend-mode: overlay; 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(176px, 23svh + 30px); margin: 2.1rem auto 2.1rem; }
.gd-cover__names { margin: 0 0 .55rem; font-size: 3.35rem; 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 1.5rem;
    font-family: var(--gd-heading); font-size: .82rem; 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 1.25rem; padding: .7rem .5rem .6rem; max-width: 300px; border-block: 1px solid var(--gd-line-soft); }
.gd-cover__guest p { margin: 0 0 .15rem; font-size: .74rem; letter-spacing: .06em; color: color-mix(in srgb, var(--gd-cream) 88%, transparent); }
.gd-cover__guest-name { display: block; font-family: var(--gd-heading); font-size: 1.22rem; 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); background-blend-mode: soft-light, normal;
    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); background-blend-mode: soft-light, normal;
    -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); background-blend-mode: soft-light, normal;
    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);
    background-blend-mode: normal, normal, soft-light, normal;
}
.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: 760px; 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: 76%; z-index: -1; overflow: hidden; }
.gd-closing__bg img { width: 100%; height: calc(100% + 80px); margin-top: -40px; object-fit: cover; object-position: center 30%; }
.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: 46svh; }
.gd-closing__body { position: relative; isolation: isolate; max-width: 350px; margin: 0 auto; }
.gd-closing__rays { top: 50px; width: 520px; opacity: .6; }
.gd-closing__fan { display: block; width: 170px; height: 94px; margin: 0 auto .9rem; 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.6rem; }
.gd-closing__plaque {
    position: relative; padding: 2.4rem 1.6rem 2.2rem;
    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: 46px; height: 46px; }
.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 1rem; font-size: 3.3rem; line-height: 1.1; }
.gd-closing__message { font-size: .92rem; 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__fan { width: 88px; height: 48px; }
    .gd-cover__window { --gd-window: min(150px, 21svh + 20px); margin: 1.7rem auto 1.7rem; }
    .gd-cover__names { font-size: 3rem; }
    .gd-cover__date { margin-bottom: 1.1rem; }
    .gd-cover__guest { margin-bottom: 1rem; }
}
@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(118px, 19svh); margin: 1.35rem auto 1.4rem; }
    .gd-cover__names { font-size: 2.7rem; margin-bottom: .35rem; }
    .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(96px, 17svh); margin: 1.1rem auto 1.1rem; }
    .gd-cover__fan { width: 56px; height: 31px; }
    .gd-cover__names { font-size: 2.5rem; }
}
@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);
}