/*
 * Template "Signature Gadang Minang" — Minangkabau royal glam. Mobile-first.
 * Colors from the chosen variant: --inv-primary (Minang red / the variant's main tone),
 * --inv-secondary (near-black for the dark sections), --inv-accent (gold),
 * --inv-background (cream), --inv-text. Fonts from the client's choice:
 * --inv-font-display (names) and --inv-font-heading (titles), set by <x-inv.head>.
 * Ornaments (roof, suntiang, itiak, frames) are inline SVG in the Blade partials;
 * songket bands are gold CSS masks (data URIs, so no extra requests and no CORS).
 */

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

    --gm-dark: var(--inv-secondary, color-mix(in srgb, var(--inv-primary) 30%, #000));
    --gm-gold: var(--inv-accent);
    --gm-gold-hi: color-mix(in srgb, var(--inv-accent) 55%, #fff6dc);
    --gm-gold-lo: color-mix(in srgb, var(--inv-accent) 68%, #000);
    --gm-gold-ink: color-mix(in srgb, var(--inv-accent) 62%, var(--inv-text));
    --gm-paper: color-mix(in srgb, var(--inv-background) 55%, #fff);
    --gm-on-dark: color-mix(in srgb, var(--inv-background) 90%, #fff);
    --gm-line: color-mix(in srgb, var(--inv-accent) 55%, transparent);
    --gm-gold-grad: linear-gradient(105deg, var(--gm-gold-lo), var(--gm-gold-hi) 38%, var(--gm-gold) 55%, var(--gm-gold-hi) 74%, var(--gm-gold-lo));

    /* songket: diamond with an inner diamond, pucuak rebung triangles at the tile edges, hairlines */
    --gm-songket: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='28' viewBox='0 0 40 28'><rect width='40' height='1.4'/><rect y='26.6' width='40' height='1.4'/><rect y='3' width='40' height='.6'/><rect y='24.4' width='40' height='.6'/><path d='M-5 4.5h10L0 10.5zM35 4.5h10l-5 6zM-5 23.5h10L0 17.5zM35 23.5h10l-5-6zM0 11l3 3-3 3-3-3zM40 11l3 3-3 3-3-3zM10 13l1 1-1 1-1-1zM30 13l1 1-1 1-1-1zM20 10.5l3.5 3.5-3.5 3.5-3.5-3.5z'/><path fill-rule='evenodd' d='M20 5.5l8.5 8.5-8.5 8.5-8.5-8.5zM20 8l-6 6 6 6 6-6z'/></svg>");
    --gm-songket-v: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='40' viewBox='0 0 28 40'><g transform='matrix(0 1 -1 0 28 0)'><rect width='40' height='1.4'/><rect y='26.6' width='40' height='1.4'/><rect y='3' width='40' height='.6'/><rect y='24.4' width='40' height='.6'/><path d='M-5 4.5h10L0 10.5zM35 4.5h10l-5 6zM-5 23.5h10L0 17.5zM35 23.5h10l-5-6zM0 11l3 3-3 3-3-3zM40 11l3 3-3 3-3-3zM10 13l1 1-1 1-1-1zM30 13l1 1-1 1-1-1zM20 10.5l3.5 3.5-3.5 3.5-3.5-3.5z'/><path fill-rule='evenodd' d='M20 5.5l8.5 8.5-8.5 8.5-8.5-8.5zM20 8l-6 6 6 6 6-6z'/></g></svg>");
    /* frame whose top rises into two gonjong horns (same path as .gm-frame__line) */
    --gm-frame: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130' preserveAspectRatio='none'><path d='M0 0Q16 20 50 22Q84 20 100 0V130H0Z'/></svg>");
    /* woven texture of the dark sections */
    --gm-weave:
        repeating-linear-gradient(45deg, color-mix(in srgb, var(--inv-accent) 7%, transparent) 0 1px, transparent 1px 11px),
        repeating-linear-gradient(-45deg, color-mix(in srgb, var(--inv-accent) 7%, transparent) 0 1px, transparent 1px 11px);

    --gm-column: 460px;
    --gm-band: 28px;
    --inv-radius: 4px;
}

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

body {
    margin: 0;
    background: var(--gm-dark);
    color: var(--inv-text);
    font-family: var(--gm-body);
    font-size: 15px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

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

.gm-preview {
    position: sticky; top: 0; z-index: 60; padding: .5rem 1rem; text-align: center;
    background: #fff4d6; color: #6b4e00; font: .8125rem/1.4 system-ui, sans-serif;
}

/* ---------- tones: every section sets its ink, the shared pieces read it ---------- */

.gm-cream, .gm-paper {
    --tone-title: var(--inv-primary);
    --tone-ornament: var(--gm-gold-ink);
    --tone-muted: color-mix(in srgb, var(--inv-text) 68%, var(--inv-background));
    background-color: var(--inv-background); color: var(--inv-text);
}
.gm-paper { background-color: var(--gm-paper); }
.gm-dark, .gm-red, .gm-photo {
    --tone-title: transparent;
    --tone-ornament: var(--gm-gold);
    --tone-muted: color-mix(in srgb, var(--gm-on-dark) 72%, transparent);
    color: var(--gm-on-dark);
}
.gm-dark {
    background-color: var(--gm-dark);
    background-image: radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--inv-primary) 45%, transparent), transparent 70%), var(--gm-weave);
}
.gm-red {
    background-color: var(--inv-primary);
    background-image: radial-gradient(80% 50% at 50% 0%, color-mix(in srgb, var(--inv-accent) 18%, transparent), transparent 70%), var(--gm-weave);
}

/* the couple's photo under a deep veil of the dark tone; without a photo the veil alone */
.gm-photo {
    position: relative; isolation: isolate;
    background-color: var(--gm-dark);
    background-image:
        linear-gradient(to bottom,
            color-mix(in srgb, var(--gm-dark) 45%, transparent),
            color-mix(in srgb, var(--gm-dark) 55%, transparent) 45%,
            color-mix(in srgb, var(--gm-dark) 94%, transparent)),
        var(--gm-photo, linear-gradient(160deg, var(--inv-primary), var(--gm-dark)));
    background-size: cover; background-position: center;
}

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

.gm-display { font-family: var(--gm-display); font-weight: 400; line-height: 1.25; }
.gm-display span { font-size: .6em; }
/* names in polished gold (padding keeps the script swashes inside the painted box) */
.gm-gold-text {
    padding: 0 .2em; background: var(--gm-gold-grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.gm-eyebrow {
    margin: 0 0 .5rem;
    font-family: var(--gm-heading); font-size: .72rem; letter-spacing: .32em; text-transform: uppercase;
    color: var(--tone-ornament, var(--gm-gold));
}

.gm-heading { margin-bottom: 2.25rem; }
.gm-roof { display: block; color: var(--tone-ornament, var(--gm-gold)); overflow: visible; }
.gm-roof__ridge, .gm-roof__wing, .gm-roof__tips { fill: currentColor; }
.gm-roof__body { fill: color-mix(in srgb, currentColor 16%, transparent); stroke: currentColor; stroke-width: 1; }
.gm-roof__thatch { stroke: currentColor; stroke-width: .7; opacity: .55; }
.gm-roof__eave { stroke: currentColor; stroke-width: 1.4; }
.gm-roof__teeth { stroke: currentColor; stroke-width: .8; stroke-linejoin: round; opacity: .8; }
.gm-heading__roof { width: 92px; margin: 0 auto .9rem; }

.gm-title {
    margin: 0 0 .9rem;
    font-family: var(--gm-heading); font-weight: 500; font-size: 1.85rem; line-height: 1.2; letter-spacing: .06em;
    color: var(--tone-title);
}
.gm-dark .gm-title, .gm-red .gm-title, .gm-photo .gm-title {
    background: var(--gm-gold-grad); -webkit-background-clip: text; background-clip: text;
}

.gm-itiak { display: block; margin: 0 auto; color: var(--tone-ornament, var(--gm-gold)); transform-origin: center; max-width: 100%; height: auto; }

.gm-lead { font-size: 1rem; }
.gm-muted { color: var(--tone-muted); font-size: .9rem; }

/* horn-topped photo frame with a gold outline */
.gm-frame { position: relative; aspect-ratio: 100 / 126; }
.gm-frame__photo {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    -webkit-mask: var(--gm-frame) 0 0 / 100% 100% no-repeat; mask: var(--gm-frame) 0 0 / 100% 100% no-repeat;
}
.gm-frame__photo--empty { display: block; background: linear-gradient(170deg, color-mix(in srgb, var(--inv-accent) 40%, var(--inv-primary)), var(--gm-dark)); }
.gm-frame__line {
    position: absolute; top: -9px; left: -9px; width: calc(100% + 18px); height: calc(100% + 18px);
    overflow: visible; pointer-events: none;
}
.gm-frame__line path { fill: none; stroke: var(--tone-ornament, var(--gm-gold)); stroke-width: 1.2; }

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

/* buttons of the shared components: polished gold */
.inv-button {
    padding: .8rem 1.5rem; border-radius: 2px;
    background: var(--gm-gold-grad); color: var(--gm-dark);
    font-family: var(--gm-heading); font-weight: 500; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--gm-dark) 30%, transparent);
    transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.inv-button:hover { transform: translateY(-1px); }
.inv-button--outline { background: transparent; color: var(--gm-gold); box-shadow: inset 0 0 0 1px var(--gm-line); }
.gm-cream .inv-button--outline, .gm-paper .inv-button--outline { color: var(--inv-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 60%, transparent); }

/* songket band: red ground + gold woven mask */
.gm-section { position: relative; padding: calc(4.25rem + var(--gm-band)) 1.6rem 4.5rem; text-align: center; }
.gm-section::before, .gm-section::after {
    content: ''; position: absolute; inset: 0 0 auto; height: var(--gm-band); pointer-events: none;
}
.gm-section::before {
    background: linear-gradient(var(--gm-dark), var(--gm-dark)) 0 0 / 100% 1px no-repeat, linear-gradient(var(--gm-dark), var(--gm-dark)) 0 100% / 100% 1px no-repeat, var(--inv-primary);
}
.gm-red::before { background-color: var(--gm-dark); }
.gm-section::after {
    background: var(--gm-gold-grad);
    -webkit-mask: var(--gm-songket) center top / 40px var(--gm-band) repeat-x; mask: var(--gm-songket) center top / 40px var(--gm-band) repeat-x;
}

/* ---------- royal panel (wide screens) ---------- */

.gm-aside { display: none; }

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

.gm-cover { position: fixed; inset: 0; z-index: 30; color: var(--gm-on-dark); }
.gm-cover__door {
    position: absolute; top: 0; bottom: 0; width: 50.5%;
    background:
        linear-gradient(var(--inv-primary), var(--inv-primary)) 0 0 / 100% var(--gm-band) no-repeat,
        linear-gradient(var(--inv-primary), var(--inv-primary)) 0 100% / 100% var(--gm-band) no-repeat,
        radial-gradient(70% 45% at var(--glow-x) 30%, color-mix(in srgb, var(--inv-primary) 55%, transparent), transparent 75%),
        var(--gm-weave),
        var(--gm-dark);
    transition: transform 1.25s cubic-bezier(.75, 0, .25, 1) .25s;
}
.gm-cover__door--left { left: 0; --glow-x: 100%; }
.gm-cover__door--right { right: 0; --glow-x: 0%; }
/* gold frame line inside each door */
.gm-cover__door::before {
    content: ''; position: absolute; top: calc(var(--gm-band) + 12px); bottom: calc(var(--gm-band) + 12px);
    border: 1px solid var(--gm-line);
}
.gm-cover__door--left::before { left: 12px; right: -1px; border-right: 0; }
.gm-cover__door--right::before { right: 12px; left: -1px; border-left: 0; }
/* the songket bands, top and bottom; they meet at the seam and slide apart with the doors */
.gm-cover__door::after {
    content: ''; position: absolute; inset: 0; background: var(--gm-gold-grad);
    -webkit-mask: var(--gm-songket) var(--seam) 0 / 40px var(--gm-band) repeat-x, var(--gm-songket) var(--seam) 100% / 40px var(--gm-band) repeat-x;
    mask: var(--gm-songket) var(--seam) 0 / 40px var(--gm-band) repeat-x, var(--gm-songket) var(--seam) 100% / 40px var(--gm-band) repeat-x;
}
.gm-cover__door--left::after { --seam: 100%; }
.gm-cover__door--right::after { --seam: 0%; }

.gm-cover__scroll {
    position: absolute; inset: calc(var(--gm-band) + 14px) 14px; overflow-y: auto; z-index: 1;
    display: flex; align-items: safe center; justify-content: center;
    transition: opacity .45s ease, transform .6s ease;
}
.gm-cover__inner { width: 100%; max-width: 380px; padding: 1.25rem .75rem; text-align: center; }

/* leaving: the content fades, then the doors slide apart (Alpine waits for the cover's own opacity) */
.gm-cover--leave { transition: opacity .3s ease 1.3s; }
.gm-cover--gone { opacity: 0; }
.gm-cover--gone .gm-cover__scroll { opacity: 0; transform: scale(.97); }
.gm-cover--gone .gm-cover__door--left { transform: translateX(-101%); }
.gm-cover--gone .gm-cover__door--right { transform: translateX(101%); }

/* crown: suntiang fan behind, bagonjong roof, then the horn-topped photo (sizes in em) */
.gm-cover__crown { position: relative; width: 28em; height: 37.6em; margin: .25rem auto 1rem; font-size: 10px; }
.gm-cover__suntiang { position: absolute; top: 0; left: 50%; width: 31em; margin-left: -15.5em; color: var(--gm-gold); }
.gm-cover__roof { position: absolute; top: 8.6em; left: 50%; width: 25em; margin-left: -12.5em; color: var(--gm-gold); z-index: 2; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .35)); }
.gm-cover__frame { position: absolute; top: 19em; left: 50%; width: 15em; height: 18.6em; margin-left: -7.5em; aspect-ratio: auto; z-index: 1; --tone-ornament: var(--gm-gold); }
.gm-cover__names { margin: 0 0 .35rem; font-size: 3.2rem; }
.gm-cover__date { margin: 0 0 1.25rem; font-family: var(--gm-heading); font-size: .85rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gm-gold-hi); }
.gm-cover__guest { margin: 0 auto 1.35rem; padding: .8rem 1rem; max-width: 300px; border-top: 1px solid var(--gm-line); border-bottom: 1px solid var(--gm-line); }
.gm-cover__guest p { margin: 0 0 .2rem; font-size: .76rem; letter-spacing: .05em; opacity: .8; }
.gm-cover__guest-name { display: block; font-family: var(--gm-heading); font-size: 1.25rem; letter-spacing: .04em; }
.gm-cover .gm-eyebrow { color: var(--gm-gold); }

/* entrance: the roof rises, the photo is unveiled upwards, the suntiang unfolds ray by ray */
.gm-suntiang__ray { transform-box: view-box; transform-origin: 160px 166px; transform: rotate(var(--a)); }
@keyframes gm-rise { from { opacity: 0; transform: translateY(46px); } }
@keyframes gm-unveil { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes gm-unfold { from { opacity: 0; transform: rotate(0deg) scale(.35); } }
html.inv-anim .gm-cover__roof { animation: gm-rise 1.3s cubic-bezier(.2, .7, .2, 1) .35s both; }
html.inv-anim .gm-cover__frame { animation: gm-unveil 1.3s cubic-bezier(.65, 0, .35, 1) .55s both; }
html.inv-anim .gm-cover__suntiang .gm-suntiang__ray { animation: gm-unfold 1.1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.95s + var(--i) * 45ms); }

/* ---------- intro: roof, monogram, date, photo row ---------- */

.gm-intro { padding: 3.5rem 0 3rem; text-align: center; }
.gm-intro__roof { width: 120px; margin: 0 auto 1.25rem; }
.gm-monogram {
    display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin: 0;
    font-family: var(--gm-heading); font-size: 3.2rem; line-height: 1; color: var(--gm-gold);
}
.gm-monogram__bar { width: 1px; height: 3.4rem; background: var(--gm-line); transform: rotate(18deg); }
.gm-intro__date { margin: 1.1rem 0 0; font-family: var(--gm-heading); font-size: .78rem; letter-spacing: .42em; color: var(--gm-gold-hi); }
.gm-strip { overflow: hidden; margin-top: 2.25rem; padding: 6px 0; mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); }
.gm-strip__track { display: flex; gap: .75rem; width: max-content; animation: gm-strip 42s linear infinite; }
.gm-strip__track img {
    width: 118px; height: 156px; object-fit: cover; padding: 3px;
    border: 1px solid var(--gm-line); outline: 1px solid color-mix(in srgb, var(--inv-accent) 25%, transparent); outline-offset: 3px;
}
@keyframes gm-strip { to { transform: translateX(-50%); } }

/* ---------- opening ---------- */

.gm-arabic { margin-bottom: 1.1rem; font-family: 'Amiri', 'Traditional Arabic', serif; font-size: 1.75rem; line-height: 1.7; color: var(--inv-primary); }
.gm-opening__greeting { font-family: var(--gm-heading); font-size: 1rem; letter-spacing: .06em; color: var(--inv-primary); }
.gm-quote {
    position: relative; margin: 2.75rem 0 0; padding: 2.5rem 1.35rem 1.6rem;
    background: var(--gm-paper); border: 1px solid var(--gm-line);
    outline: 1px solid var(--gm-line); outline-offset: -7px;
}
.gm-quote__roof { position: absolute; top: -1.6rem; left: 50%; width: 96px; margin-left: -48px; padding: 0 8px; background: var(--inv-background); box-sizing: content-box; }
.gm-quote blockquote { margin: 0; font-style: italic; font-size: .98rem; line-height: 1.85; }
.gm-quote figcaption { margin-top: .9rem; font-family: var(--gm-heading); font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gm-gold-ink); }

/* ---------- couple ---------- */

.gm-person__frame { width: 220px; margin: 0 auto 1.4rem; }
.gm-person__frame .gm-frame__photo { filter: drop-shadow(0 0 0 transparent); }
.gm-person__nickname { margin: 0 0 .1rem; font-size: 3.1rem; }
.gm-person__name { margin: 0 0 .6rem; font-family: var(--gm-heading); font-weight: 500; font-size: 1.15rem; line-height: 1.35; letter-spacing: .05em; color: var(--gm-on-dark); }
.gm-person__parents { font-size: .88rem; color: var(--tone-muted); }
.gm-person__parents strong { font-weight: 500; color: var(--gm-on-dark); }
.gm-couple__amp { margin: 1.75rem 0 1.5rem; font-size: 4.4rem; line-height: 1; }

/* ---------- countdown: horn-topped red tiles with gold numbers ---------- */

.gm-countdown .inv-countdown { gap: .55rem; }
.gm-countdown .inv-countdown__item {
    flex: 1; max-width: 4.9rem; min-width: 0; padding: 1.35rem .2rem .8rem; border-radius: 0;
    background: linear-gradient(170deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 60%, var(--gm-dark)));
    color: var(--gm-on-dark);
    -webkit-mask: var(--gm-frame) 0 0 / 100% 100% no-repeat; mask: var(--gm-frame) 0 0 / 100% 100% no-repeat;
}
.gm-countdown .inv-countdown__value {
    font-family: var(--gm-heading); font-weight: 500; font-size: 1.9rem;
    background: var(--gm-gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gm-countdown .inv-countdown__label { margin-top: .2rem; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.gm-countdown .inv-countdown__actions { margin-top: 1.75rem; }

/* ---------- events ---------- */

.gm-event + .gm-event { margin-top: 3.25rem; }
.gm-event__frame { width: 74%; margin: 9px auto 1.9rem; }
.gm-event__card {
    position: relative; padding: 2rem 1.25rem 1.75rem;
    background: color-mix(in srgb, var(--gm-dark) 70%, var(--inv-primary));
    border: 1px solid var(--gm-line); outline: 1px solid var(--gm-line); outline-offset: -7px;
    box-shadow: 0 20px 40px rgb(0 0 0 / .35);
}
.gm-event__name {
    margin: 0 0 .5rem; font-family: var(--gm-heading); font-weight: 500; font-size: 1.35rem; letter-spacing: .14em; text-transform: uppercase;
    background: var(--gm-gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gm-event__date { margin-bottom: .15rem; font-size: 1rem; }
.gm-event__time { font-size: .88rem; color: var(--tone-muted); }
.gm-event__rule { display: block; width: 10px; height: 10px; margin: 1.1rem auto 1rem; background: var(--gm-gold); transform: rotate(45deg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gm-dark) 70%, var(--inv-primary)), 0 0 0 5px var(--gm-line); }
.gm-event__venue { margin-bottom: .2rem; font-family: var(--gm-heading); font-size: 1rem; letter-spacing: .04em; color: var(--gm-gold-hi); }
.gm-event__address, .gm-event__dress { font-size: .85rem; color: var(--tone-muted); }
.gm-event .inv-maps { margin-top: 1.1rem; }

/* ---------- love story: gold thread with songket diamonds ---------- */

.gm-chapters { position: relative; list-style: none; margin: 0; padding: 0; }
.gm-chapters::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px;
    background: linear-gradient(transparent, var(--gm-line) 6%, var(--gm-line) 94%, transparent);
}
.gm-chapter { position: relative; padding-top: 2.1rem; }
.gm-chapter + .gm-chapter { margin-top: 2.25rem; }
.gm-chapter__node {
    position: absolute; top: 0; left: 50%; width: 16px; height: 16px; margin-left: -8px;
    background: var(--inv-background); border: 1px solid var(--gm-gold-ink); transform: rotate(45deg);
}
.gm-chapter__node::after { content: ''; position: absolute; inset: 4px; background: var(--inv-primary); }
.gm-chapter__frame { width: 58%; margin: 0 auto 1.6rem; }
.gm-chapter__text { position: relative; padding: 1.4rem 1.2rem 1.3rem; background: var(--gm-paper); border: 1px solid var(--gm-line); }
.gm-chapter__date { font-family: var(--gm-heading); font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gm-gold-ink); }
.gm-chapter h3 { margin: .2rem 0 .55rem; font-family: var(--gm-heading); font-weight: 500; font-size: 1.15rem; letter-spacing: .04em; color: var(--inv-primary); }
.gm-chapter p { margin: 0; font-size: .92rem; }

/* ---------- gallery: mosaic of gold-edged tiles ---------- */

.gm-gallery .inv-gallery { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 108px; grid-auto-flow: dense; gap: 6px; }
.gm-gallery .inv-gallery__item { aspect-ratio: auto; height: 100%; border-radius: 0; }
.gm-gallery .inv-gallery__item::after { content: ''; position: absolute; inset: 5px; border: 1px solid color-mix(in srgb, var(--inv-accent) 70%, transparent); pointer-events: none; }
.gm-gallery .inv-gallery__item:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
.gm-gallery .inv-gallery__item:nth-child(6n + 4) { grid-row: span 2; }
.gm-gallery .inv-gallery__item:nth-child(6n + 5), .gm-gallery .inv-gallery__item:nth-child(6n) { grid-column: span 2; }

/* ---------- gift: small dark red cards with a songket band, two per row (odd last one full width) ---------- */

.gm-gift .inv-gift { margin-top: 1.75rem; }
.gm-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.gm-gift .inv-gift__accounts .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.gm-gift .inv-gift__account { border-radius: 6px; }
.gm-gift .inv-gift__account p { margin: 0; }
.gm-gift .inv-gift__accounts .inv-gift__account {
    position: relative; display: flex; flex-direction: column; align-items: flex-start;
    min-width: 0; margin: 0; padding: 3.3rem .8rem .8rem; text-align: left; overflow: hidden;
    background:
        linear-gradient(var(--gm-dark), var(--gm-dark)) 0 0 / 100% 14px no-repeat,
        radial-gradient(110% 80% at 100% 100%, color-mix(in srgb, var(--inv-accent) 28%, transparent), transparent 60%),
        linear-gradient(135deg, color-mix(in srgb, var(--inv-primary) 85%, #fff), var(--inv-primary) 50%, color-mix(in srgb, var(--inv-primary) 65%, #000));
    box-shadow: 0 12px 26px rgb(0 0 0 / .4), inset 0 0 0 1px var(--gm-line);
}
.gm-gift .inv-gift__accounts .inv-gift__account::before {
    content: ''; position: absolute; inset: 0 0 auto; height: 14px; background: var(--gm-gold-grad);
    -webkit-mask: var(--gm-songket) 0 0 / 20px 14px repeat-x; mask: var(--gm-songket) 0 0 / 20px 14px repeat-x;
}
/* the chip */
.gm-gift .inv-gift__accounts .inv-gift__account::after {
    content: ''; position: absolute; top: 1.55rem; left: .8rem; width: 1.7rem; height: 1.25rem; border-radius: 4px;
    background: var(--gm-gold-grad); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2);
}
.gm-gift .inv-gift__accounts .inv-gift__bank {
    position: absolute; top: 1.45rem; right: .8rem; max-width: calc(100% - 3.4rem); text-align: right; overflow-wrap: anywhere;
    font-family: var(--gm-heading); font-size: .72rem; line-height: 1.5rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gm-gold-hi);
}
.gm-gift .inv-gift__accounts .inv-gift__logo { height: 1.5rem; padding: .2rem .4rem; border-radius: .35rem; }
.gm-gift .inv-gift__accounts .inv-gift__logo img { max-width: 4rem; }
.gm-gift .inv-gift__number {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-weight: 500;
    font-size: 1rem; line-height: 1.3; letter-spacing: .04em; overflow-wrap: anywhere;
}
.gm-gift .inv-gift__holder { margin-top: .15rem !important; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; opacity: .85; overflow-wrap: anywhere; }
.gm-gift .inv-gift__accounts .inv-button--outline { margin-top: .6rem; padding: .35rem .7rem; font-size: .62rem; letter-spacing: .1em; }
.gm-gift .inv-gift__address { margin-top: 1rem; padding: 1.5rem 1.25rem; background: transparent; border: 1px solid var(--gm-line); outline: 1px solid var(--gm-line); outline-offset: -7px; border-radius: 0; }
.gm-gift .inv-gift__address .inv-gift__bank { font-family: var(--gm-heading); font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gm-gold); }
.gm-gift .inv-gift__address .inv-gift__holder { font-size: .85rem; letter-spacing: .04em; text-transform: none; }
.gm-gift .inv-gift__address .inv-button { margin-top: .75rem; }

/* ---------- rsvp + wishes: carved double-line panels ---------- */

.gm-panel {
    padding: 1.6rem 1.3rem; text-align: left;
    background: var(--gm-paper); border: 1px solid var(--gm-line); outline: 1px solid var(--gm-line); outline-offset: -7px;
}
.gm-paper .gm-panel { background: var(--inv-background); }
.gm-panel .inv-form input:not([type=radio]):not([type=checkbox]),
.gm-panel .inv-form select,
.gm-panel .inv-form textarea {
    border: 0; border-bottom: 1px solid color-mix(in srgb, var(--inv-text) 25%, transparent); border-radius: 0;
    background: transparent; padding-inline: 0; color: var(--inv-text);
}
.gm-panel .inv-form input:focus, .gm-panel .inv-form select:focus, .gm-panel .inv-form textarea:focus { outline: none; border-bottom-color: var(--inv-primary); }
.gm-panel .inv-form .inv-button { justify-self: stretch; margin-top: .5rem; }
.gm-panel .inv-wishes { --inv-wishes-height: 20rem; }
.gm-panel .inv-wishes__list { scrollbar-color: var(--gm-line) transparent; }
.gm-panel .inv-wish { padding: .65rem .8rem; background: color-mix(in srgb, var(--inv-accent) 10%, var(--gm-paper)); border-left: 2px solid var(--gm-gold); border-radius: 0; }
.gm-panel .inv-wish__name { font-family: var(--gm-heading); font-weight: 500; font-size: .88rem; letter-spacing: .03em; color: var(--inv-primary); }
.gm-panel .inv-wish__message { font-size: .88rem; line-height: 1.45; }
.gm-panel .inv-wish__time { font-size: .7rem; }

/* ---------- live streaming ---------- */

.gm-stream .inv-button { margin-top: .5rem; }

/* ---------- closing ---------- */

.gm-closing { min-height: 640px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4.5rem; }
.gm-closing__inner { max-width: 360px; }
.gm-closing__roof { width: 150px; margin: 0 auto 1rem; }
.gm-closing__title { margin: 0 0 .6rem; font-family: var(--gm-heading); font-weight: 500; font-size: 1.5rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gm-gold-hi); }
.gm-closing__names { margin: .9rem 0 1.25rem; font-size: 3.4rem; }
.gm-closing__message { font-size: .9rem; opacity: .9; }
.gm-closing__signature { margin: 0; font-family: var(--gm-heading); font-size: .76rem; letter-spacing: .16em; color: var(--gm-gold); }

/* ---------- shared components outside the sections ---------- */

.gm-page { background: var(--inv-background); }
.inv-music__button { background: var(--gm-dark); color: var(--gm-gold); box-shadow: 0 0 0 1px var(--gm-gold), 0 0 0 4px var(--gm-dark), 0 0 0 5px var(--gm-line), 0 8px 20px rgb(0 0 0 / .35); }
.inv-checkin { margin: 2rem 1.6rem; border-radius: 0; outline: 1px solid var(--gm-line); outline-offset: -7px; }
.inv-branding { background: var(--gm-dark); color: var(--gm-on-dark); }

/* ---------- wide screens: royal panel left, invitation right ---------- */

@media (min-width: 1024px) {
    .gm-aside {
        position: fixed; inset: 0 var(--gm-column) 0 0; z-index: 0;
        display: flex; align-items: center; justify-content: center; padding: 3rem 5rem;
        background-position: center 30%; text-align: center;
        background-image:
            radial-gradient(60% 50% at 50% 35%, color-mix(in srgb, var(--inv-primary) 40%, transparent), transparent 75%),
            linear-gradient(color-mix(in srgb, var(--gm-dark) 78%, transparent), color-mix(in srgb, var(--gm-dark) 86%, transparent)),
            var(--gm-photo, linear-gradient(160deg, var(--inv-primary), var(--gm-dark)));
    }
    /* gold frame line and a vertical songket band against the invitation column */
    .gm-aside::before { content: ''; position: absolute; inset: 26px 54px 26px 26px; border: 1px solid var(--gm-line); outline: 1px solid var(--gm-line); outline-offset: -8px; pointer-events: none; }
    .gm-aside::after {
        content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: var(--gm-band);
        background: var(--gm-gold-grad);
        -webkit-mask: var(--gm-songket-v) 0 center / var(--gm-band) 40px repeat-y; mask: var(--gm-songket-v) 0 center / var(--gm-band) 40px repeat-y;
        box-shadow: inset 0 0 0 100px transparent;
    }
    .gm-aside__inner { position: relative; max-width: 640px; }
    .gm-aside__crown { position: relative; width: 340px; height: 232px; margin: 0 auto 1rem; }
    .gm-aside__suntiang { position: absolute; top: 0; left: 0; width: 340px; color: var(--gm-gold); }
    .gm-aside__roof { position: absolute; top: 104px; left: 50%; width: 250px; margin-left: -125px; color: var(--gm-gold); filter: drop-shadow(0 6px 12px rgb(0 0 0 / .4)); }
    .gm-aside__names { margin: .5rem 0 1.25rem; font-size: 5.4rem; line-height: 1.2; }
    .gm-aside__quote { max-width: 520px; margin: 0 auto 2rem; font-style: italic; font-size: .95rem; line-height: 1.75; opacity: .88; }
    .gm-aside__guest { display: inline-block; padding: .9rem 2.5rem; border-top: 1px solid var(--gm-line); border-bottom: 1px solid var(--gm-line); }
    .gm-aside__guest p { margin: 0 0 .3rem; font-size: .85rem; opacity: .85; }
    .gm-aside__guest-name { display: block; font-family: var(--gm-heading); font-size: 1.6rem; letter-spacing: .04em; }

    .gm-page {
        position: relative; z-index: 1; width: var(--gm-column); margin-left: auto;
        min-height: 100vh; box-shadow: -24px 0 50px rgb(0 0 0 / .45);
    }
    /* the cover only covers the invitation column; the panel shows names and guest */
    .gm-cover { left: auto; width: var(--gm-column); }
    .gm-cover__guest { display: none; }
}

/* short phones: a smaller crown so the button stays in view */
@media (max-height: 760px) {
    .gm-cover__crown { font-size: 8.4px; }
    .gm-cover__names { font-size: 2.8rem; }
    .gm-cover__date { margin-bottom: .9rem; }
}
@media (max-height: 640px) {
    .gm-cover__crown { font-size: 7px; }
    .gm-cover__names { font-size: 2.4rem; }
    .gm-cover__guest { margin-bottom: 1rem; padding: .5rem 1rem; }
}
@media (max-width: 359px) {
    .gm-section { padding-inline: 1.15rem; }
    .gm-cover__names, .gm-closing__names { font-size: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .gm-cover__door, .gm-cover__scroll, .gm-cover--leave { transition: none; }
    .gm-strip__track { animation: none; }
    .inv-button, .gm-icon-link { 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; }
.gm-closing { padding-bottom: calc(8rem + env(safe-area-inset-bottom)); }