/*
 * Template "Signature Gigi Balang Betawi" — Betawi festive elegance ("meriah tapi anggun"). Mobile-first.
 * Colors from the chosen variant: --inv-primary (deep Betawi marun by default, the strong color),
 * --inv-secondary (Betawi green: roofs, vases, panels, the story band, labels), --inv-accent (gold leaf),
 * --inv-background (warm ivory), --inv-text.
 * Fonts: --inv-font-display (names, script) and --inv-font-heading (short capital labels) from the
 * client's choice (<x-inv.head>), Cormorant Garamond for titles and text.
 * Betawi ornaments: rumah kebaya facade and swaying kembang kelapa (inline SVG with gold gradients),
 * gold gigi balang bands on several sections, pucuk rebung (tumpal) batik bands, a kembang kelapa
 * batik ground on the deep bands, encim flowers in the dividers. Photo-gradient bands: cover,
 * countdown, gift, closing. One reveal style (fade-up); gold rules grow on reveal.
 */

:root {
    --gb-display: var(--inv-font-display, 'Allura', cursive);
    --gb-caps: var(--inv-font-heading, 'Cinzel', Georgia, serif);
    --gb-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

    --gb-p: var(--inv-primary);
    --gb-deep: color-mix(in srgb, var(--inv-primary) 80%, #000);
    --gb-accent2: var(--inv-secondary, color-mix(in srgb, var(--inv-primary) 60%, var(--inv-text)));
    --gb-gold: var(--inv-accent);
    --gb-gold-light: color-mix(in srgb, var(--inv-accent) 64%, #fff6dc);
    --gb-gold-deep: color-mix(in srgb, var(--inv-accent) 70%, var(--inv-text));
    --gb-line: color-mix(in srgb, var(--inv-accent) 72%, transparent);
    --gb-ivory: var(--inv-background);
    --gb-card: color-mix(in srgb, var(--inv-background) 50%, #fff);
    --gb-paper: color-mix(in srgb, var(--inv-background) 88%, var(--inv-accent));
    --gb-on-dark: color-mix(in srgb, var(--inv-background) 88%, #fff);
    --gb-on-dark-soft: color-mix(in srgb, var(--inv-background) 84%, transparent);
    --gb-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));

    --gb-green: var(--inv-secondary, color-mix(in srgb, var(--inv-primary) 60%, #000));
    --gb-green-light: color-mix(in srgb, var(--gb-green) 78%, #fff);
    --gb-green-deep: color-mix(in srgb, var(--gb-green) 74%, #000);
    --gb-p-soft: color-mix(in srgb, var(--inv-primary) 55%, #fff);

    /* gigi balang: a bar with pointed teeth, each pierced by a circle and a diamond */
    --gb-teeth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0h24v3H0ZM1 5h22v6L12 27 1 11ZM12 8.6a2.2 2.2 0 1 0 0 4.4a2.2 2.2 0 1 0 0-4.4ZM12 16l2.2 3-2.2 3-2.2-3Z'/%3E%3C/svg%3E");
    /* batik Betawi, as masks (colored by the element's background): kembang kelapa ground and pucuk rebung tumpal */
    --gb-m-kelapa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M32 22v-9M32 42v9M22 32h-9M42 32h9M25 25l-6-6M39 25l6-6M25 39l-6 6M39 39l6 6'/%3E%3Ccircle cx='32' cy='32' r='5'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='32' cy='11' r='1.8'/%3E%3Ccircle cx='32' cy='53' r='1.8'/%3E%3Ccircle cx='11' cy='32' r='1.8'/%3E%3Ccircle cx='53' cy='32' r='1.8'/%3E%3Ccircle cx='17.5' cy='17.5' r='1.5'/%3E%3Ccircle cx='46.5' cy='17.5' r='1.5'/%3E%3Ccircle cx='17.5' cy='46.5' r='1.5'/%3E%3Ccircle cx='46.5' cy='46.5' r='1.5'/%3E%3Ccircle cx='32' cy='32' r='1.8'/%3E%3Cpath d='M0 0l3 3-3 3-3-3ZM64 0l3 3-3 3-3-3ZM0 64l3-3 3 3-3 3ZM64 64l3-3 3 3-3 3Z'/%3E%3C/g%3E%3C/svg%3E");
    --gb-m-rebung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 24 11 0l11 24ZM4.6 24 11 10l6.4 14Z'/%3E%3Cpath d='M10.3 24v-9h1.4v9ZM11 3.6l1.5 2.4-1.5 2.4-1.5-2.4Z'/%3E%3C/svg%3E");
    /* faint diamond lattice (anyaman) under the event headers */
    --gb-lattice:
        repeating-linear-gradient(45deg, transparent 0 21px, color-mix(in srgb, var(--inv-accent) 7%, transparent) 21px 22px),
        repeating-linear-gradient(-45deg, transparent 0 21px, color-mix(in srgb, var(--inv-accent) 7%, transparent) 21px 22px);

    --gb-column: 480px;
    --inv-radius: 3px;
}

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

body {
    margin: 0;
    background: var(--gb-ivory);
    color: var(--inv-text);
    font-family: var(--gb-serif);
    font-size: 18px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
p { margin: 0 0 .75rem; }
h1, h2, h3 { margin: 0; font-weight: 400; }

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

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

.gb-display { font-family: var(--gb-display); font-weight: 400; line-height: 1.08; }
.gb-display span { font-size: .62em; color: var(--gb-gold); }

/* small letter-spaced capitals */
.gb-label, .gb-eyebrow {
    margin: 0 0 .6rem;
    font-family: var(--gb-caps); font-size: .68rem; font-weight: 500; line-height: 1.4; letter-spacing: .3em; text-transform: uppercase;
    color: var(--gb-accent2);
}
.gb-eyebrow { color: var(--gb-gold-light); }

.gb-head { display: grid; justify-items: center; margin-bottom: 2.4rem; }
.gb-title { font-family: var(--gb-serif); font-weight: 500; font-size: 2.5rem; line-height: 1.08; color: var(--gb-p); }

/* fine gold rule with a small diamond; grows from the center when its block is revealed */
.gb-rule {
    position: relative; display: block; width: 8rem; max-width: 50%; height: 1px; margin: 1.05rem auto 0;
    background: linear-gradient(90deg, transparent, var(--gb-gold) 30%, var(--gb-gold) 70%, transparent);
    transform-origin: center;
}
html.inv-anim .gb-rule { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1) .35s; }
html.inv-anim .is-revealed .gb-rule, html.inv-anim .gb-rule.is-revealed { transform: none; }

.gb-lead { font-size: 1.12rem; line-height: 1.65; }
.gb-muted { color: var(--gb-muted); font-size: 1.02rem; }

/* deep bands: the one strong color with a faint lattice; paper bands a shade warmer than ivory */
.gb-dark { position: relative; isolation: isolate; background-color: var(--gb-p); background-image: var(--gb-lattice); color: var(--gb-on-dark); }
.gb-dark .gb-title { color: var(--gb-on-dark); }
.gb-dark .gb-label { color: var(--gb-gold-light); }
.gb-dark .gb-muted { color: var(--gb-on-dark-soft); }
.gb-paper { background: var(--gb-paper); }

/* the photo under the deep color */
.gb-dark.gb-photo {
    background-image:
        var(--gb-lattice),
        linear-gradient(color-mix(in srgb, var(--gb-p) 72%, transparent), color-mix(in srgb, var(--gb-deep) 90%, transparent)),
        var(--gb-photo, none);
    background-size: auto, cover, cover; background-position: center;
}

/* gold gigi balang band (cover, countdown, gift, closing): gold leaf teeth with pierced holes */
.gb-teeth {
    position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 18px; pointer-events: none;
    background: linear-gradient(180deg, var(--gb-gold-light), var(--gb-gold) 55%, var(--gb-gold-deep));
    -webkit-mask: var(--gb-teeth) center top / 15px 100% repeat-x;
    mask: var(--gb-teeth) center top / 15px 100% repeat-x;
    filter: drop-shadow(0 2px 2px rgb(0 0 0 / .25));
}
.gb-teeth--bottom { top: auto; bottom: 0; transform: scaleY(-1); }

/* pucuk rebung (tumpal) band: gold triangles on Betawi green between two gold hairlines */
.gb-rebung {
    position: absolute; left: 0; right: 0; z-index: 2; height: 24px; pointer-events: none;
    background: var(--gb-green-deep);
    border-block: 1px solid var(--gb-gold);
}
.gb-rebung::before {
    content: ''; position: absolute; inset: 3px 0 0;
    background: linear-gradient(180deg, var(--gb-gold-light), var(--gb-gold));
    -webkit-mask: var(--gb-m-rebung) center bottom / 18px 100% repeat-x;
    mask: var(--gb-m-rebung) center bottom / 18px 100% repeat-x;
}
.gb-rebung--top { top: 0; }
.gb-rebung--bottom { bottom: 0; }
.gb-rebung--bottom::before { inset: 0 0 3px; transform: scaleY(-1); }

/* kembang kelapa batik ground (visible but refined) on the deep bands and on a few ivory sections */
.gb-dark::before, .gb-events::before, .gb-cover::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--gb-gold); opacity: .13;
    -webkit-mask: var(--gb-m-kelapa) center top / 64px 64px repeat;
    mask: var(--gb-m-kelapa) center top / 64px 64px repeat;
}
.gb-events { isolation: isolate; }
.gb-events::before { background: var(--gb-p); opacity: .06; }
.gb-cover::before { z-index: 0; opacity: .1; }

.gb-icon-link {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: .2rem; padding: .3rem .85rem;
    border: 1px solid var(--gb-line); border-radius: 999px;
    color: var(--gb-p); font-size: .86rem; text-decoration: none;
    transition: background-color .3s ease, color .3s ease;
}
.gb-icon-link:hover { background: var(--gb-p); color: var(--gb-on-dark); }

/* buttons of the shared components: the deep color on ivory, gold on the deep bands */
.inv-button {
    padding: .85rem 1.5rem; border-radius: 3px;
    background: var(--gb-p); color: var(--gb-on-dark);
    font-family: var(--gb-caps); font-weight: 500; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
}
.inv-button--outline { background: transparent; color: var(--gb-p); box-shadow: inset 0 0 0 1px var(--gb-p); }
.gb-dark .inv-button { background: linear-gradient(180deg, var(--gb-gold-light), var(--gb-gold)); color: var(--gb-deep); }
.gb-dark .inv-button--outline { background: transparent; color: var(--gb-on-dark); box-shadow: inset 0 0 0 1px var(--gb-gold-light); }

/* ---------- encim flower divider, kembang kelapa, rumah kebaya ---------- */

.gb-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.gb-kk { display: block; overflow: visible; transform-origin: 50% 100%; }
.gb-kk__crown { transform-box: view-box; transform-origin: 80px 132px; }
.gb-kk__frond { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.gb-kk__frond--a { stroke: var(--gb-gold); }
.gb-kk__frond--b { stroke: var(--gb-green-light); }
.gb-kk__frond--c { stroke: var(--gb-gold-light); }
.gb-kk__frond--inner { stroke: var(--gb-gold); stroke-width: 1.5; opacity: .85; }
.gb-kk__bead { fill: var(--gb-p-soft); stroke: var(--gb-gold-light); stroke-width: 1; }
.gb-kk__bud { fill: var(--gb-gold-light); }
.gb-kk__bloom--a { fill: var(--gb-on-dark); }
.gb-kk__bloom--b { fill: var(--gb-p-soft); }
.gb-kk__bloom--c, .gb-kk__bloom--top { fill: url(#gb-g-gold); }
.gb-kk__eye { fill: var(--gb-p); }
.gb-kk__bloom--c .gb-kk__eye, .gb-kk__bloom--top .gb-kk__eye { fill: var(--gb-on-dark); }
.gb-kk__stem { fill: none; stroke: var(--gb-gold); stroke-width: 3; }
.gb-kk__wrap { fill: none; stroke: var(--gb-on-dark); stroke-width: 5; stroke-dasharray: 3 5; }
.gb-kk__ribbon { fill: none; stroke: var(--gb-p-soft); stroke-width: 1.5; stroke-linecap: round; }
.gb-kk__vase { stroke: var(--gb-gold); stroke-width: 1.5; }
.gb-kk__band { fill: none; stroke: var(--gb-gold); stroke-width: 2.4; }

/* a gentle sway (the bouquet from its vase, the crown a little more) */
@keyframes gb-sway { from { transform: rotate(-1.8deg); } to { transform: rotate(1.8deg); } }
@keyframes gb-sway-crown { from { transform: rotate(-2.2deg); } to { transform: rotate(2.6deg); } }
html.inv-anim .gb-kk { animation: gb-sway 6.5s ease-in-out infinite alternate; }
html.inv-anim .gb-kk--right { animation-delay: -3.2s; }
html.inv-anim .gb-kk__crown { animation: gb-sway-crown 4.4s ease-in-out infinite alternate; }
html.inv-anim .gb-kk--right .gb-kk__crown { animation-delay: -2.1s; }

/* rumah kebaya facade */
.gb-house { position: relative; width: 100%; aspect-ratio: 320 / 250; filter: drop-shadow(0 14px 18px rgb(0 0 0 / .3)); }
.gb-house__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gb-house__boards { fill: none; stroke: color-mix(in srgb, var(--gb-gold-deep) 30%, transparent); stroke-width: 1; }
.gb-house__wood { fill: var(--gb-deep); }
.gb-house__glass { fill: var(--gb-green-deep); }
.gb-house__louvre { fill: none; stroke: var(--gb-gold); stroke-width: 1.4; }
.gb-house__transom { fill: none; stroke: var(--gb-deep); stroke-width: 1.3; stroke-linejoin: round; }
.gb-house__tiles { fill: none; stroke: var(--gb-gold-light); stroke-width: 1; opacity: .4; }
.gb-house__crown { fill: none; stroke: var(--gb-gold); stroke-width: 2.4; stroke-linecap: round; }
.gb-house__skirt { fill: var(--gb-green-deep); }
.gb-house__hole { fill: var(--gb-deep); }
.gb-house__baluster { fill: none; stroke: var(--gb-gold); stroke-width: 2; }
.gb-house__floor { fill: var(--gb-deep); }
.gb-house__step { fill: var(--gb-gold-deep); }

.gb-house__doorway { position: absolute; left: 36.25%; top: 50.4%; width: 27.5%; height: 41.6%; perspective: 520px; }
.gb-house__inside {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: radial-gradient(ellipse at 50% 40%, var(--gb-gold-light), var(--gb-gold) 55%, var(--gb-gold-deep));
    box-shadow: inset 0 0 16px rgb(0 0 0 / .3);
}
.gb-house__monogram { font-family: var(--gb-serif); font-weight: 600; font-size: calc(var(--gb-house-w, 200px) * .058); letter-spacing: .02em; color: var(--gb-deep); white-space: nowrap; }
.gb-leaf {
    position: absolute; top: 0; bottom: 0; width: 50%;
    background: linear-gradient(180deg, var(--gb-p), var(--gb-deep)); box-shadow: inset 0 0 0 1px var(--gb-gold);
}
.gb-leaf::before, .gb-leaf::after { content: ''; position: absolute; left: 20%; right: 20%; border: 1px solid var(--gb-gold); }
.gb-leaf::before { top: 9%; bottom: 53%; }
.gb-leaf::after { top: 53%; bottom: 9%; }
.gb-leaf--left { left: 0; transform-origin: left center; transform: rotateY(-108deg); }
.gb-leaf--right { right: 0; transform-origin: right center; transform: rotateY(108deg); }
@keyframes gb-door-open { from { transform: rotateY(0); } }
html.inv-anim .gb-cover .gb-leaf { animation: gb-door-open 1.6s cubic-bezier(.65, 0, .25, 1) .5s both; }

/* encim flower in the rule */
.gb-rule svg { position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; }
.gb-rule__petals { fill: var(--gb-p); }
.gb-rule__eye { fill: var(--gb-gold); }
.gb-dark .gb-rule__petals { fill: var(--gb-gold-light); }
.gb-dark .gb-rule__eye { fill: var(--gb-p); }

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

.gb-cover {
    --gb-house-w: min(60vw, 31svh, 300px);
    position: fixed; inset: 0; z-index: 30; overflow-y: auto; overflow-x: hidden; isolation: isolate;
    display: flex; flex-direction: column; align-items: center; justify-content: safe flex-end;
    padding: 2.6rem 1.25rem 2.6rem; text-align: center; color: var(--gb-on-dark);
    background-color: var(--gb-p);
}
.gb-cover__photo {
    position: absolute; inset: 0 0 46% 0; z-index: -2;
    background: var(--gb-photo) center 62% / cover no-repeat;
}
.gb-cover__shade {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--gb-p) 25%, transparent) 0%,
        transparent 18%,
        color-mix(in srgb, var(--gb-p) 30%, transparent) 32%,
        color-mix(in srgb, var(--gb-p) 88%, transparent) 46%,
        var(--gb-p) 56%, var(--gb-deep) 100%);
}
.gb-cover--plain .gb-cover__shade {
    background:
        radial-gradient(ellipse 80% 40% at 50% 28%, color-mix(in srgb, var(--gb-gold) 26%, transparent), transparent 72%),
        linear-gradient(180deg, transparent 55%, var(--gb-deep));
}
.gb-cover__inner { position: relative; z-index: 1; width: 100%; max-width: 420px; }

.gb-cover__scene { position: relative; width: var(--gb-house-w); margin: 0 auto 1.3rem; }
.gb-kk--cover { position: absolute; bottom: -2px; z-index: 2; height: calc(var(--gb-house-w) * 1.12); width: auto; }
.gb-kk--cover.gb-kk--left { right: calc(100% - var(--gb-house-w) * .3); }
.gb-kk--cover.gb-kk--right { left: calc(100% - var(--gb-house-w) * .3); }

.gb-cover__title { margin-bottom: .45rem; }
.gb-cover__names { margin: 0 0 .5rem; font-size: 3.4rem; color: var(--gb-on-dark); overflow-wrap: anywhere; text-shadow: 0 2px 16px rgb(0 0 0 / .25); }
.gb-cover__names span { color: var(--gb-gold-light); }
.gb-cover__date { margin: 0 0 1.2rem; font-family: var(--gb-caps); font-size: .78rem; font-weight: 500; letter-spacing: .2em; color: var(--gb-gold-light); }
.gb-cover__guest {
    width: min(82%, 300px); margin: 0 auto 1.3rem; padding: .65rem 0 .7rem;
    border-block: 1px solid color-mix(in srgb, var(--gb-gold-light) 50%, transparent);
}
.gb-cover__guest p { margin: 0 0 .3rem; font-family: var(--gb-caps); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gb-gold-light); }
.gb-cover__guest-name { display: block; font-size: 1.3rem; line-height: 1.25; color: var(--gb-on-dark); overflow-wrap: anywhere; }
.gb-open {
    background: linear-gradient(180deg, var(--gb-gold-light), var(--gb-gold)); color: var(--gb-deep);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gb-gold-light) 70%, #fff), 0 10px 24px -10px rgb(0 0 0 / .5);
    font-family: var(--gb-caps); font-weight: 600; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
}

/* the opening moment: the photo fades in slightly closer, the house rises, its doors swing open */
@keyframes gb-photo-in { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes gb-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
html.inv-anim .gb-cover__photo { animation: gb-photo-in 2.2s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .gb-cover__scene { animation: gb-rise 1.1s cubic-bezier(.2, .7, .2, 1) .1s both; }

/* leaving: the text lifts away, the photo drifts a little closer, then the cover fades */
.gb-cover--leave { transition: opacity .7s ease .25s; }
.gb-cover--leave .gb-cover__inner { transition: opacity .4s ease, transform .6s ease; }
.gb-cover--leave .gb-cover__photo { transition: transform 1s ease; }
.gb-cover--gone { opacity: 0; }
.gb-cover--gone .gb-cover__inner { opacity: 0; transform: translateY(-14px); }
.gb-cover--gone .gb-cover__photo { transform: scale(1.05); }

/* ---------- intro: monogram ring, names, photo windows ---------- */

.gb-intro { position: relative; padding: 4.75rem 1.5rem 5.4rem; text-align: center; overflow: hidden; }
.gb-intro .gb-eyebrow { color: var(--gb-accent2); }
.gb-monogram {
    position: relative; display: flex; align-items: center; justify-content: center; gap: .25rem;
    width: 98px; height: 98px; margin: .9rem auto 1.4rem; border-radius: 50%;
    border: 1px solid var(--gb-gold);
    font-family: var(--gb-serif); font-weight: 500; font-size: 2.1rem; line-height: 1; color: var(--gb-p);
}
.gb-monogram::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--gb-line); opacity: .55; }
.gb-monogram__amp { font-family: var(--gb-display); font-size: .72em; color: var(--gb-gold-deep); }
.gb-intro__names { margin: 0 0 .5rem; font-size: 3.1rem; color: var(--gb-p); }
.gb-intro__names span { color: var(--gb-gold-deep); }
.gb-intro__date { margin: 0; font-family: var(--gb-caps); font-size: .76rem; letter-spacing: .38em; color: var(--gb-muted); }

.gb-strip { overflow: hidden; margin: 2.6rem -1.5rem 0; padding: 8px 0; mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.gb-strip__track { display: flex; gap: 1rem; width: max-content; padding: 0 4px; }
html.inv-anim .gb-strip__track { animation: gb-strip 60s linear infinite; }
@keyframes gb-strip { to { transform: translateX(-50%); } }
.gb-strip__window {
    width: 104px; height: 140px; flex: none; border-radius: 52px 52px 3px 3px;
    outline: 1px solid var(--gb-line); outline-offset: 4px;
}
.gb-strip__window img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

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

.gb-section { position: relative; padding: 5rem 1.5rem; text-align: center; }

/* opening: deep band, verse to the left of a fine gold line */
.gb-opening { padding-block: 4.75rem; }
.gb-arabic { margin-bottom: 1.1rem; font-family: 'Amiri', 'Traditional Arabic', serif; font-size: 1.75rem; line-height: 1.6; color: var(--gb-gold-light); }
.gb-opening__greeting { font-style: italic; font-size: 1.3rem; line-height: 1.4; color: var(--gb-gold-light); }
.gb-opening { padding-top: 4.25rem; }
.gb-quote {
    position: relative; margin: 2.6rem 0 0; padding: 2.6rem 1.4rem 1.5rem; overflow: hidden; text-align: left;
    background: linear-gradient(160deg, var(--gb-green), var(--gb-green-deep)); border-radius: 3px;
    box-shadow: inset 0 0 0 1px var(--gb-line), 0 18px 34px -20px rgb(0 0 0 / .6);
}
.gb-quote .gb-rebung { height: 18px; border-top: 0; }
.gb-quote .gb-rebung::before { -webkit-mask-size: 14px 100%; mask-size: 14px 100%; }
.gb-quote__mark { position: absolute; right: .9rem; top: 1.3rem; font-size: 4.2rem; line-height: 1; color: color-mix(in srgb, var(--gb-gold) 50%, transparent); }
.gb-quote blockquote { margin: 0; font-style: italic; font-size: 1.12rem; line-height: 1.7; }
.gb-quote figcaption { margin-top: .85rem; font-family: var(--gb-caps); font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gb-gold-light); }

/* couple: an arched photo beside the text; groom photo left, bride photo right */
.gb-person { display: grid; grid-template-columns: 44% 1fr; align-items: center; gap: 1.35rem; text-align: left; }
.gb-person--bride { grid-template-columns: 1fr 44%; text-align: right; }
.gb-person--bride .gb-arch { order: 2; }
.gb-arch { position: relative; isolation: isolate; }
/* a Betawi green block with the kembang kelapa batik behind the photo, offset to the outside */
.gb-arch::after {
    content: ''; position: absolute; z-index: -1; inset: 18% 22% -9% -12%; border-radius: 3px;
    background:
        radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--gb-gold) 14%, transparent), transparent 60%),
        linear-gradient(160deg, var(--gb-green), var(--gb-green-deep));
}
.gb-person--bride .gb-arch::after { inset: 18% -12% -9% 22%; }
.gb-arch::before {
    content: ''; position: absolute; inset: 0; z-index: 2; border: 1px solid var(--gb-gold); border-radius: 999px 999px 4px 4px;
    transform: translate(9px, 9px);
}
.gb-person--bride .gb-arch::before { transform: translate(-9px, 9px); }
.gb-arch__photo {
    position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
    border-radius: 999px 999px 4px 4px;
}
.gb-arch__photo--empty { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--gb-gold) 26%, transparent), transparent 70%), var(--gb-p); }
.gb-arch__photo--empty span { font-size: 3.6rem; color: var(--gb-gold-light); }
.gb-person__nickname { margin: 0 0 .3rem; font-size: 2.7rem; color: var(--gb-p); overflow-wrap: anywhere; }
.gb-person__name { margin: 0 0 .6rem; font-family: var(--gb-caps); font-weight: 500; font-size: .78rem; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; color: var(--inv-text); }
.gb-person__parents { font-size: .98rem; line-height: 1.45; color: var(--gb-muted); }
.gb-person__parents strong { font-weight: 600; color: var(--inv-text); }
.gb-couple__amp { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 2.4rem 0; }
.gb-couple__line { width: 4.5rem; height: 1px; background: linear-gradient(90deg, transparent, var(--gb-gold)); }
.gb-couple__line:last-child { transform: scaleX(-1); }
.gb-couple__amp .gb-display { font-size: 2.8rem; line-height: 1; color: var(--gb-gold-deep); }

/* countdown: deep band over the photo, the counters in fine gold arches */
.gb-countdown { padding-block: 6rem; isolation: isolate; }
.gb-countdown .inv-countdown { gap: .6rem; margin-top: .25rem; }
.gb-countdown .inv-countdown__item {
    flex: 1; min-width: 0; max-width: 5.1rem; padding: 1.3rem .2rem .8rem;
    border: 1px solid var(--gb-line); border-radius: 999px 999px 3px 3px;
    background: color-mix(in srgb, var(--gb-deep) 45%, transparent);
}
.gb-countdown .inv-countdown__value { font-family: var(--gb-serif); font-weight: 500; font-size: 2.05rem; line-height: 1.1; }
.gb-countdown .inv-countdown__label { margin-top: .3rem; font-family: var(--gb-caps); font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gb-gold-light); opacity: 1; }
.gb-countdown .inv-countdown__actions { margin-top: 2rem; }

/* events: paper cards edged by a fine inset gold line; the date beside a gold rule */
.gb-event {
    position: relative; isolation: isolate; padding: 0 1.5rem 2rem; overflow: hidden;
    background: var(--gb-card); border-radius: 3px;
    box-shadow: 0 22px 44px -30px color-mix(in srgb, var(--gb-deep) 70%, transparent);
}
.gb-event::before { content: ''; position: absolute; inset: 7px; z-index: -1; border: 1px solid var(--gb-line); border-radius: 2px; pointer-events: none; }
.gb-event + .gb-event { margin-top: 2rem; }
.gb-event__photo { width: calc(100% + 3rem); max-width: none; aspect-ratio: 16 / 10; object-fit: cover; margin: 0 -1.5rem; }
.gb-event__head {
    position: relative; margin: 0 -1.5rem 1.9rem; padding: 1.05rem 1rem 1rem;
    background-color: var(--gb-green-deep); background-image: var(--gb-lattice);
}
.gb-event__head::after {
    content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px;
    background: linear-gradient(180deg, var(--gb-gold-light), var(--gb-gold-deep));
    -webkit-mask: var(--gb-teeth) center top / 11px 100% repeat-x;
    mask: var(--gb-teeth) center top / 11px 100% repeat-x;
}
.gb-event__name { font-family: var(--gb-serif); font-weight: 500; font-size: 1.75rem; line-height: 1.15; color: var(--gb-on-dark); }
.gb-event__date { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: .7rem; color: var(--gb-p); }
.gb-event__date strong { font-family: var(--gb-serif); font-weight: 500; font-size: 3.6rem; line-height: .9; }
.gb-event__date span {
    padding-left: 1rem; border-left: 1px solid var(--gb-gold); text-align: left;
    font-family: var(--gb-caps); font-size: .68rem; line-height: 1.9; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-text);
}
.gb-event__time { font-size: 1.04rem; }
.gb-event__pin { display: block; margin: 1.1rem auto .35rem; color: var(--gb-gold-deep); }
.gb-event__venue { margin-bottom: .2rem; font-weight: 600; font-size: 1.12rem; color: var(--inv-text); }
.gb-event__address { font-size: .98rem; line-height: 1.5; color: var(--gb-muted); }
.gb-event__dress { display: inline-block; padding: .25rem .9rem; border: 1px solid var(--gb-line); border-radius: 999px; font-size: .95rem; }
.gb-event__dress span { margin-right: .3rem; font-family: var(--gb-caps); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gb-accent2); }
.gb-event .inv-maps { margin-top: 1.1rem; }

/* love story: the deep Betawi green band, a fine gold line with diamond knots */
.gb-dark.gb-green { background-color: var(--gb-green-deep); }
.gb-green .gb-moment__knot { background: var(--gb-green-deep); }
.gb-green .gb-rule__eye { fill: var(--gb-green-deep); }
.gb-timeline { position: relative; list-style: none; margin: 0; padding: 0 0 0 2.2rem; text-align: left; }
.gb-timeline::before { content: ''; position: absolute; left: .7rem; top: .6rem; bottom: 1rem; width: 1px; background: var(--gb-line); }
.gb-moment { position: relative; padding-bottom: 2.5rem; }
.gb-moment:last-child { padding-bottom: 0; }
.gb-moment__knot {
    position: absolute; left: calc(-2.2rem + .7rem - 5px); top: .45rem; width: 11px; height: 11px;
    background: var(--gb-p); border: 1px solid var(--gb-gold-light); transform: rotate(45deg);
}
.gb-moment__date { display: block; font-family: var(--gb-caps); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gb-gold-light); }
.gb-moment__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: .8rem 0 0; border-radius: 3px; }
.gb-moment h3 { margin: .6rem 0 .3rem; font-family: var(--gb-serif); font-weight: 500; font-size: 1.45rem; line-height: 1.2; color: var(--gb-on-dark); }
.gb-moment p { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--gb-on-dark-soft); }

/* gallery: ivory under a pucuk rebung band, a mosaic with fine gaps */
.gb-gallery { padding-top: 5.6rem; }
.gb-gallery .inv-gallery { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 104px; grid-auto-flow: dense; gap: 6px; }
.gb-gallery .inv-gallery__item { aspect-ratio: auto; height: 100%; border-radius: 2px; }
.gb-gallery .inv-gallery__item:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
.gb-gallery .inv-gallery__item:nth-child(6n + 4) { grid-row: span 2; }
.gb-gallery .inv-gallery__item:nth-child(6n + 5), .gb-gallery .inv-gallery__item:nth-child(6n) { grid-column: span 2; }

/* live streaming: paper band, no card */
.gb-stream__icon {
    display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 1.2rem; padding-left: 3px;
    border-radius: 50%; border: 1px solid var(--gb-gold); color: var(--gb-p);
    box-shadow: 0 0 0 5px var(--gb-paper), 0 0 0 6px var(--gb-line);
}
.gb-stream .gb-head { margin-bottom: 1.4rem; }
.gb-stream .inv-button { margin-top: .5rem; }

/* gift: deep band, ivory cards with a fine inset gold line, two per row (odd last one full width) */
.gb-gift { padding-top: 5.5rem; }
.gb-gift .inv-gift { display: grid; gap: .75rem; margin-top: 1.75rem; }
.gb-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.gb-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.gb-gift .inv-gift__account + .inv-gift__account { margin-top: 0; }
.gb-gift .inv-gift__account {
    position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; min-width: 0;
    padding: 1.4rem .8rem 1.1rem; border-radius: 3px; background: var(--gb-card); color: var(--inv-text);
    box-shadow: 0 16px 30px -18px rgb(0 0 0 / .55);
}
.gb-gift .inv-gift__account::before { content: ''; position: absolute; inset: 5px; z-index: -1; border: 1px solid var(--gb-line); border-radius: 2px; pointer-events: none; }
.gb-gift .inv-gift__account p { margin: 0; }
.gb-gift .inv-gift__bank {
    display: flex; justify-content: center; align-items: center; min-height: 1.5rem; max-width: 100%;
    font-family: var(--gb-caps); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gb-accent2); overflow-wrap: anywhere;
}
.gb-gift .inv-gift__account .inv-gift__logo { height: 1.5rem; padding: .2rem .45rem; border-radius: .3rem; }
.gb-gift .inv-gift__account .inv-gift__logo img { max-width: 4rem; }
.gb-gift .inv-gift__number {
    max-width: 100%; margin: .45rem 0 .1rem !important; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-weight: 600; font-size: .98rem; line-height: 1.3; letter-spacing: .03em; color: var(--gb-p); overflow-wrap: anywhere;
}
.gb-gift .inv-gift__holder { max-width: 100%; font-size: .9rem; line-height: 1.35; color: var(--gb-muted); overflow-wrap: anywhere; }
.gb-gift .inv-gift__account .inv-button--outline { margin-top: .7rem; padding: .4rem .75rem; font-size: .62rem; color: var(--gb-p); box-shadow: inset 0 0 0 1px var(--gb-p); }
.gb-gift .inv-gift__address { padding: 1.6rem 1.25rem 1.4rem; }
.gb-gift .inv-gift__address .inv-button--outline { margin-top: .8rem; }

/* rsvp + wishes: one plain card each, edged by a hairline */
.gb-panel {
    margin-top: 1.25rem; padding: 2rem 1.3rem 1.8rem; text-align: left;
    background: var(--gb-card); border: 1px solid var(--gb-line); border-top: 4px solid var(--gb-green); border-radius: 3px;
}
.gb-panel .inv-form input:not([type=radio]):not([type=checkbox]),
.gb-panel .inv-form select,
.gb-panel .inv-form textarea {
    border: 1px solid color-mix(in srgb, var(--gb-gold-deep) 50%, transparent); border-radius: 3px; background: #fff;
}
.gb-panel .inv-form input:focus, .gb-panel .inv-form select:focus, .gb-panel .inv-form textarea:focus { outline: none; border-color: var(--gb-p); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gb-p) 14%, transparent); }
.gb-panel .inv-form .inv-button { justify-self: stretch; margin-top: .5rem; }
.gb-panel .inv-wishes { --inv-wishes-height: 20rem; }
.gb-panel .inv-wishes__list { padding: .55rem .4rem .55rem .1rem; border-block: 1px solid var(--gb-line); }
.gb-panel .inv-wish { padding: .65rem .8rem; background: var(--gb-ivory); border-left: 2px solid var(--gb-p); border-radius: 0 4px 4px 0; }
.gb-panel .inv-wish__name { font-family: var(--gb-serif); font-weight: 600; font-size: 1.02rem; color: var(--gb-p); }
.gb-panel .inv-wish__message { font-size: .98rem; line-height: 1.45; }
.gb-panel .inv-wish__time { font-size: .74rem; }

/* closing: deep band over the photo under a gold gigi balang band; the rumah kebaya between kembang kelapa crowns the thanks */
.gb-closing { padding-top: 4.4rem; overflow: hidden; }
.gb-closing__scene { position: relative; display: flex; align-items: flex-end; justify-content: center; margin: 0 -1.5rem 1.9rem; }
.gb-house--closing { width: 200px; flex: none; }
.gb-kk--closing { position: relative; z-index: 1; height: 190px; width: auto; flex: none; margin: 0 -34px -2px; }
.gb-closing__inner { position: relative; z-index: 1; max-width: 340px; margin: 0 auto; }
.gb-closing__names { margin: 1.1rem 0 1.2rem; font-size: 3.3rem; color: var(--gb-on-dark); }
.gb-closing__names span { color: var(--gb-gold-light); }
.gb-closing__message { font-size: 1.04rem; line-height: 1.6; color: var(--gb-on-dark-soft); }
.gb-closing__signature { margin: 0; font-family: var(--gb-caps); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gb-gold-light); }

/* shared components outside the sections */
.inv-music__button { background: var(--gb-p); color: var(--gb-gold-light); box-shadow: 0 0 0 1px var(--gb-gold), 0 6px 16px rgb(0 0 0 / .3); }
.inv-checkin { margin: 2rem 1.5rem; border: 1px solid var(--gb-line); border-radius: 3px; }
.inv-branding { background: var(--gb-ivory); }

/* ---------- wide screens: the column on the deep color, a line kembang kelapa on each side ---------- */

.gb-stage { display: none; }

@media (min-width: 1024px) {
    body { background: var(--gb-deep); }
    .gb-stage {
        display: block; position: fixed; inset: 0; z-index: 0; overflow: hidden; color: var(--gb-on-dark);
        background-color: var(--gb-p);
        background-image:
            radial-gradient(ellipse 40% 55% at 18% 62%, color-mix(in srgb, var(--gb-gold) 12%, transparent), transparent 70%),
            radial-gradient(ellipse 40% 55% at 82% 62%, color-mix(in srgb, var(--gb-gold) 12%, transparent), transparent 70%),
            var(--gb-lattice);
    }
    .gb-stage::after {
        content: ''; position: absolute; inset: 0; background: var(--gb-gold); opacity: .1;
        -webkit-mask: var(--gb-m-kelapa) center / 72px 72px repeat; mask: var(--gb-m-kelapa) center / 72px 72px repeat;
    }
    .gb-kk--stage { position: absolute; z-index: 1; bottom: 6vh; height: min(58vh, 560px); width: auto; }
    .gb-kk--stage.gb-kk--left { left: calc((100vw - var(--gb-column)) / 4 - min(16.2vh, 157px)); }
    .gb-kk--stage.gb-kk--right { right: calc((100vw - var(--gb-column)) / 4 - min(16.2vh, 157px)); }
    .gb-stage__side { z-index: 1; }
    .gb-stage__side { position: absolute; top: 14vh; width: calc((100vw - var(--gb-column)) / 2); padding: 0 2.5rem; text-align: center; }
    .gb-stage__side--left { left: 0; }
    .gb-stage__side--right { right: 0; padding-top: 1.4rem; }
    .gb-stage__names { margin: 0; font-size: clamp(3rem, 4.4vw, 4.6rem); }
    .gb-stage__names span { margin: 0 .2em; color: var(--gb-gold-light); }
    .gb-stage__date { margin: 0 0 .9rem; font-family: var(--gb-caps); font-size: .9rem; letter-spacing: .2em; color: var(--gb-gold-light); }
    .gb-stage__quote { max-width: 340px; margin: 0 auto; font-style: italic; font-size: 1.08rem; line-height: 1.65; color: var(--gb-on-dark-soft); }

    .gb-page {
        position: relative; z-index: 1; width: var(--gb-column); margin: 0 auto; min-height: 100vh;
        background: var(--gb-ivory);
        box-shadow: 0 0 0 1px var(--gb-line), 0 0 0 9px var(--gb-p), 0 0 0 10px var(--gb-line), 0 0 80px rgb(0 0 0 / .45);
    }

    .gb-cover { --gb-house-w: min(40vh, 340px); }
    .gb-cover__inner { max-width: 640px; }
    .gb-cover__names { font-size: 3.9rem; }
}

/* short screens: a smaller house so the button stays on screen */
@media (max-height: 760px) and (max-width: 1023px) {
    .gb-cover { --gb-house-w: min(58vw, 29svh, 280px); padding-block: 2rem 2.2rem; }
    .gb-cover__scene { margin-bottom: 1.2rem; }
    .gb-cover__names { font-size: 3.1rem; }
    .gb-cover__date { margin-bottom: 1.1rem; }
    .gb-cover__guest { margin-bottom: 1.2rem; padding-block: .6rem .65rem; }
}
@media (max-height: 660px) and (max-width: 1023px) {
    .gb-cover { --gb-house-w: min(56vw, 26svh, 250px); padding-block: 1.7rem 2rem; }
    .gb-cover__scene { margin-bottom: 1rem; }
    .gb-cover__names { font-size: 2.8rem; margin-bottom: .45rem; }
    .gb-cover__date { margin-bottom: .9rem; }
    .gb-cover__guest { margin-bottom: 1.05rem; }
    .gb-cover__guest-name { font-size: 1.18rem; }
}

@media (prefers-reduced-motion: reduce) {
    .gb-cover--leave, .gb-cover--leave .gb-cover__inner, .gb-cover--leave .gb-cover__photo { transition: none; }
    .gb-kk, .gb-kk__crown, .gb-leaf, .gb-cover__photo, .gb-cover__scene, .gb-strip__track { animation: none !important; }
    .gb-rule, .inv-button, .gb-icon-link { transition: none !important; }
}

/* ---------- 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; }
.gb-dark.gb-closing { padding-bottom: calc(8rem + env(safe-area-inset-bottom)); }

/* opening: the photo shows through a lighter marun veil (deepest behind the text column); without a photo a soft marun glow */
.gb-dark.gb-opening {
    background-image:
        var(--gb-lattice),
        radial-gradient(110% 60% at 50% 42%, color-mix(in srgb, var(--gb-p) 86%, transparent) 25%, color-mix(in srgb, var(--gb-p) 66%, transparent) 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--gb-deep) 45%, transparent), transparent 35%, transparent 65%, color-mix(in srgb, var(--gb-deep) 80%, transparent)),
        var(--gb-photo, radial-gradient(90% 55% at 50% 30%, color-mix(in srgb, var(--gb-gold) 30%, var(--gb-p)), var(--gb-deep)));
    background-size: auto, cover, cover, cover; background-position: center;
}
.gb-opening .gb-quote { background: linear-gradient(160deg, color-mix(in srgb, var(--gb-green) 88%, transparent), color-mix(in srgb, var(--gb-green-deep) 94%, transparent)); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }