/*
 * Grand Hotel: an old-world grand hotel. Deep emerald velvet, polished brass, ivory damask wallpaper (a real
 * silk damask used as a tintable mask, img/damask.webp) and a burgundy accent (--inv-wine).
 * Signature forms: the hotel entrance cover (the couple's photo under a striped canopy, a hanging brass sign,
 * the keycard sleeve whose keycard slides out on opening), the lobby portrait hung from a picture rail, room
 * doors with brass name plates, reservation confirmations with a brass room key and a CONFIRMED stamp, a brass
 * lift floor indicator around the countdown, a reservation form, a leather guestbook and a concierge bell.
 * Section tones: ivory damask (default tokens), emerald velvet (.gh-section--green), burgundy velvet
 * (.gh-section--wine). Colors from the variant: --inv-primary, --inv-accent, --inv-background, --inv-text,
 * --inv-deep, --inv-paper, --inv-brass, --inv-stamp, --inv-wine. All classes start with "gh-".
 */

:root {
    --inv-primary: #164536;
    --inv-accent: #b48a45;
    --inv-background: #f2e9d6;
    --inv-text: #1f2d27;
    --inv-deep: #0a271e;
    --inv-paper: #fcf7ec;
    --inv-brass: #ead198;
    --inv-stamp: #8e2a2f;
    --inv-wine: #6a1d2a;
    --inv-radius: 6px;

    --gh-w: 460px;
    /* distance from the viewport edge to the column (0 on phones) */
    --gh-edge: max(0px, calc((100vw - var(--gh-w)) / 2));
    --gh-display: 'Bodoni Moda', 'Bodoni MT', Didot, Georgia, serif;
    --gh-label: 'Cinzel', 'Trajan Pro', Georgia, serif;
    --gh-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --gh-damask: url('../img/damask.webp');

    /* polished brass, as a background */
    --gh-brass-bg: linear-gradient(125deg, var(--inv-brass) 0%, var(--inv-accent) 38%, color-mix(in srgb, var(--inv-accent) 72%, #3a2400) 62%, var(--inv-brass) 88%, var(--inv-accent) 100%);
    /* brass dark enough to read on ivory */
    --gh-brass-text: color-mix(in srgb, var(--inv-accent) 55%, var(--inv-text));
    /* velvet: a soft sheen from the top left, deep pile at the bottom right, fine vertical pile */
    --gh-velvet:
        radial-gradient(110% 55% at 18% 0%, rgb(255 255 255 / .1), transparent 62%),
        radial-gradient(90% 60% at 95% 100%, rgb(0 0 0 / .32), transparent 70%),
        repeating-linear-gradient(90deg, rgb(255 255 255 / .018) 0 2px, transparent 2px 5px);
    --gh-green-bg: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 92%, #fff 4%), var(--inv-deep));
    --gh-wine-bg: linear-gradient(180deg, color-mix(in srgb, var(--inv-wine) 86%, #000), color-mix(in srgb, var(--inv-wine) 55%, #000));

    /* context tokens: ivory by default, redefined for the velvet sections */
    --gh-bg: var(--inv-background);
    --gh-fg: var(--inv-text);
    --gh-muted: color-mix(in srgb, var(--inv-text) 86%, transparent);
    --gh-title: var(--inv-primary);
    --gh-em: color-mix(in srgb, var(--inv-wine) 80%, var(--inv-text));
    --gh-label-c: var(--gh-brass-text);
    --gh-line: color-mix(in srgb, var(--inv-accent) 70%, transparent);
    --gh-line-soft: color-mix(in srgb, var(--inv-accent) 35%, transparent);
    --gh-damask-c: var(--inv-primary);
    --gh-damask-o: .075;
    --gh-btn-bg: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 88%, #fff 12%), var(--inv-deep));
    --gh-btn-fg: var(--inv-brass);
}

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

html { background: var(--inv-deep); scroll-behavior: smooth; }

body.gh-body {
    margin: 0;
    background: var(--inv-deep);
    color: var(--inv-text);
    font: 400 .97rem/1.7 var(--gh-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }

.gh-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.gh-icon { width: 1.1em; height: 1.1em; flex: none; }

/* the damask wallpaper/brocade: the real damask as a mask, tinted with the section's color */
.gh-section::after, .gh-hero::after, .gh-cover::after, .gh-backdrop::after, .gh-sleeve::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: var(--gh-damask-c); opacity: var(--gh-damask-o);
    -webkit-mask: var(--gh-damask) 50% 0 / 280px 280px repeat;
    mask: var(--gh-damask) 50% 0 / 280px 280px repeat;
}

/* ---------- backdrop (wide screens) and the column ---------- */

.gh-backdrop {
    --gh-damask-c: var(--inv-brass); --gh-damask-o: .09;
    position: fixed; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse at center, transparent 30%, rgb(0 0 0 / .5) 100%),
        var(--gh-velvet),
        radial-gradient(ellipse at 50% 30%, var(--inv-primary), var(--inv-deep) 75%);
}

.gh-page {
    position: relative; z-index: 1;
    width: min(100%, var(--gh-w)); min-height: 100vh; margin: 0 auto;
    background: var(--inv-background);
    overflow-x: clip;
}

@media (min-width: 520px) {
    .gh-page { box-shadow: 0 0 0 1px var(--inv-accent), 0 0 0 7px var(--inv-deep), 0 0 0 8px color-mix(in srgb, var(--inv-accent) 55%, transparent), 0 30px 80px rgb(0 0 0 / .5); }
}
@media (max-width: 519px) {
    .gh-backdrop { display: none; }
}

.gh-preview {
    position: fixed; z-index: 60; top: 0; left: 0; right: 0;
    width: min(100%, var(--gh-w)); margin: 0 auto; padding: .35rem .75rem;
    background: var(--inv-stamp); color: #fff;
    font: 600 .68rem/1.3 var(--gh-sans); text-align: center; letter-spacing: .03em;
}

/* ---------- small pieces: stars, crest, rule, letterhead, brackets ---------- */

.gh-stars { font-size: .7rem; letter-spacing: .35em; color: var(--inv-brass); }

.gh-crest {
    position: relative; display: grid; place-items: center;
    width: 6rem; aspect-ratio: 1; color: var(--inv-accent);
}
.gh-crest__laurel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gh-crest__letters {
    position: relative; display: flex; align-items: baseline; gap: .12em;
    transform: translateY(4%);
    font: 500 1.55rem/1 var(--gh-display); color: currentColor; letter-spacing: .02em;
}
.gh-crest__letters i { font-style: normal; font-size: .6em; opacity: .8; }

.gh-rule { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: .75rem auto 0; color: var(--inv-accent); }
.gh-section--green .gh-rule, .gh-section--wine .gh-rule, .gh-hero .gh-rule { color: var(--inv-brass); }
.gh-rule__line { width: 4.2rem; height: 1px; background: linear-gradient(90deg, transparent, var(--gh-line)); }
.gh-rule__line--end { transform: scaleX(-1); }
.gh-rule__dot { width: 5px; height: 5px; transform: rotate(45deg); background: currentColor; }
.gh-rule__star { width: .95rem; height: .95rem; overflow: visible; }

.gh-bracket { position: absolute; z-index: 2; width: 2.2rem; height: 2.2rem; overflow: visible; pointer-events: none; }
.gh-bracket--tl { top: 0; left: 0; }
.gh-bracket--tr { top: 0; right: 0; transform: scaleX(-1); }
.gh-bracket--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.gh-bracket--br { bottom: 0; right: 0; transform: scale(-1, -1); }

.gh-letterhead {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem;
    padding-bottom: .75rem; margin-bottom: 1rem;
    border-bottom: 3px double var(--gh-line);
    text-align: left;
}
.gh-crest--mini { width: 2.9rem; color: var(--inv-accent); }
.gh-crest--mini .gh-crest__letters { font-size: .72rem; font-weight: 600; color: var(--inv-primary); }
.gh-letterhead__brand { font: 600 .56rem/1.4 var(--gh-label); letter-spacing: .22em; text-transform: uppercase; color: var(--gh-brass-text); overflow-wrap: anywhere; }
.gh-letterhead__title { font: 500 1.08rem/1.25 var(--gh-display); color: var(--inv-primary); }
.gh-letterhead__no { font: 600 .55rem/1.2 var(--gh-label); letter-spacing: .16em; color: var(--gh-brass-text); text-align: right; }
.gh-letterhead__no b { display: block; margin-top: .15rem; font: 700 .82rem/1 var(--gh-sans); letter-spacing: .06em; color: var(--inv-text); font-variant-numeric: tabular-nums; }

/* ivory letterhead paper */
.gh-sheet {
    position: relative;
    padding: 1.35rem 1.25rem 1.4rem;
    border-radius: 3px;
    text-align: left; color: var(--inv-text);
    background:
        radial-gradient(120% 60% at 0 0, rgb(255 255 255 / .6), transparent 60%),
        linear-gradient(180deg, var(--inv-paper), color-mix(in srgb, var(--inv-paper) 92%, var(--inv-accent)));
    box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 0 0 1px color-mix(in srgb, var(--inv-accent) 30%, transparent), 0 26px 40px -24px rgb(0 0 0 / .6);
}
.gh-sheet::before {
    content: ''; position: absolute; inset: 6px; pointer-events: none;
    border: 1px solid var(--gh-line-soft); border-radius: 1px;
}

/* ---------- buttons (shared components) ---------- */

.inv-button {
    gap: .5rem; padding: .85rem 1.45rem; border-radius: 3px;
    background: var(--gh-btn-bg); color: var(--gh-btn-fg);
    font: 700 .66rem/1.2 var(--gh-label); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 70%, transparent), inset 0 0 0 3px color-mix(in srgb, var(--inv-deep) 60%, transparent), inset 0 0 0 4px color-mix(in srgb, var(--inv-accent) 35%, transparent), 0 12px 22px -14px rgb(0 0 0 / .6);
}
.inv-button--outline {
    background: transparent; color: var(--gh-title);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gh-title) 55%, transparent);
}
.inv-button--outline:hover { background: color-mix(in srgb, var(--gh-title) 8%, transparent); }
.inv-button .gh-icon { width: 1.1rem; height: 1.1rem; }

.gh-pill {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: .9rem; padding: .5rem 1.05rem;
    border-radius: 999px; color: var(--inv-primary); text-decoration: none;
    background: color-mix(in srgb, var(--inv-paper) 85%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 70%, transparent);
    font: 600 .8rem/1 var(--gh-sans); letter-spacing: .02em;
    transition: background .25s ease;
}
.gh-pill:hover { background: var(--inv-paper); }

/* ---------- the striped canopy (cover) ---------- */

.gh-awning { position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 52px; filter: drop-shadow(0 3px 0 var(--inv-accent)) drop-shadow(0 10px 10px rgb(0 0 0 / .45)); }
.gh-awning::before {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgb(255 255 255 / .16), rgb(0 0 0 / .18)),
        repeating-linear-gradient(90deg, var(--inv-paper) 0 26px, var(--inv-wine) 26px 52px);
    -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% 38px no-repeat, radial-gradient(circle at 50% 0, #000 12.5px, transparent 13px) 0 38px / 26px 14px repeat-x;
    mask: linear-gradient(#000 0 0) 0 0 / 100% 38px no-repeat, radial-gradient(circle at 50% 0, #000 12.5px, transparent 13px) 0 38px / 26px 14px repeat-x;
}
/* the brass rail along the canopy's edge */
.gh-awning::after {
    content: ''; position: absolute; left: 0; right: 0; top: 34px; height: 4px;
    background: var(--gh-brass-bg); box-shadow: 0 1px 0 rgb(0 0 0 / .3);
}

/* ---------- cover: the hotel entrance and the keycard sleeve ---------- */

.gh-cover {
    --gh-damask-c: var(--inv-brass); --gh-damask-o: .07;
    position: fixed; inset: 0; z-index: 30;
    width: min(100%, var(--gh-w)); margin: 0 auto;
    display: flex; overflow-x: hidden; overflow-y: auto;
    color: var(--inv-paper);
    background: var(--gh-velvet), linear-gradient(180deg, var(--inv-primary), var(--inv-deep) 75%);
}

/* the couple's photo: the upper screen, fading into velvet */
.gh-cover__photo { position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: 76%; overflow: hidden; }
.gh-cover__photo img {
    display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
    -webkit-mask: linear-gradient(180deg, #000 60%, transparent 98%);
    mask: linear-gradient(180deg, #000 60%, transparent 98%);
    animation: gh-photo-in 2s cubic-bezier(.2, .6, .2, 1) both;
}
.gh-cover__photo::after {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 70%, transparent) 0, color-mix(in srgb, var(--inv-deep) 15%, transparent) 24%, transparent 40%, color-mix(in srgb, var(--inv-deep) 35%, transparent) 70%, transparent 100%);
}
@keyframes gh-photo-in { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
/* without a photo: the crest glowing on the velvet */
.gh-cover__photo--empty { display: grid; place-items: start center; padding-top: calc(66px + 5svh); background: radial-gradient(60% 45% at 50% 42%, color-mix(in srgb, var(--inv-primary) 70%, #fff 12%), transparent 75%); }
.gh-cover__photo--empty::after { display: none; }
.gh-crest--cover { width: min(40vw, 23svh, 170px); color: var(--inv-brass); animation: gh-photo-in 2s ease both; }
.gh-crest--cover .gh-crest__letters { font-size: 2.6rem; }

/* a thin brass frame under the canopy */
.gh-cover__frame { position: absolute; inset: 60px 10px 10px; z-index: 2; pointer-events: none; border: 1px solid color-mix(in srgb, var(--inv-accent) 60%, transparent); }

.gh-cover__inner {
    position: relative; z-index: 4;
    width: 100%; min-height: 100%; margin: 0 auto; padding: 50px 1.4rem 2.2rem;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .75rem;
    text-align: center;
}

/* the brass sign hanging from the canopy on two chains */
.gh-sign { display: flex; flex-direction: column; align-items: center; margin-bottom: auto; }
.gh-sign__chains {
    display: block; width: 7.5rem; height: 1.15rem;
    background:
        repeating-linear-gradient(180deg, var(--inv-brass) 0 3px, transparent 3px 5px) 0 0 / 2px 100% no-repeat,
        repeating-linear-gradient(180deg, var(--inv-brass) 0 3px, transparent 3px 5px) 100% 0 / 2px 100% no-repeat;
}
.gh-sign__plate {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem;
    padding: .45rem 1.3rem .5rem; border-radius: 3px;
    background:
        radial-gradient(circle at .55rem 50%, color-mix(in srgb, var(--inv-accent) 55%, #3a2400) 0 2px, transparent 2.6px),
        radial-gradient(circle at calc(100% - .55rem) 50%, color-mix(in srgb, var(--inv-accent) 55%, #3a2400) 0 2px, transparent 2.6px),
        var(--gh-brass-bg);
    color: var(--inv-deep);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), inset 0 0 0 1px rgb(0 0 0 / .18), inset 0 0 0 4px transparent, 0 12px 20px -8px rgb(0 0 0 / .6);
}
.gh-sign__plate::before { content: ''; position: absolute; inset: 3px; border: 1px solid rgb(0 0 0 / .18); border-radius: 2px; pointer-events: none; }
.gh-sign__stars { font-size: .5rem; letter-spacing: .4em; color: var(--inv-wine); }
.gh-sign__title { font: 700 .62rem/1.3 var(--gh-label); letter-spacing: .26em; text-transform: uppercase; }

/* the card holder: the keycard (behind) and the sleeve (in front); the padding is the part of the card that shows */
.gh-holder {
    position: relative; width: min(84%, 318px); padding-top: 13%;
    filter: drop-shadow(0 24px 28px rgb(0 0 0 / .55));
}
.gh-keycard {
    position: absolute; z-index: 0; top: 0; left: 11%; width: 78%; aspect-ratio: 1.586;
    border-radius: 11px; overflow: hidden;
    color: var(--inv-brass);
    background:
        repeating-linear-gradient(90deg, rgb(255 255 255 / .025) 0 1px, transparent 1px 3px),
        radial-gradient(90% 70% at 30% 10%, color-mix(in srgb, var(--inv-primary) 70%, #fff 18%), transparent 70%),
        linear-gradient(140deg, var(--inv-primary), var(--inv-deep) 85%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 75%, transparent), inset 0 0 0 4px transparent, inset 0 0 0 5px color-mix(in srgb, var(--inv-accent) 30%, transparent), 0 -2px 8px rgb(0 0 0 / .25);
    animation: gh-peek 3.2s ease-in-out 2.2s 2;
}
.gh-keycard::after {
    /* the brass band near the foot of the card */
    content: ''; position: absolute; left: 0; right: 0; bottom: 16%; height: 6%;
    background: var(--gh-brass-bg); opacity: .85;
}
.gh-keycard__label { position: absolute; top: 9%; left: 7%; font: 700 .48rem/1 var(--gh-label); letter-spacing: .24em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-brass) 85%, transparent); }
.gh-keycard__wave { position: absolute; top: 6%; right: 6%; width: 1.05rem; height: 1.05rem; transform: rotate(-90deg); opacity: .85; }
.gh-crest--card { position: absolute; top: 6%; left: 50%; width: 30%; margin-left: -15%; color: var(--inv-brass); }
.gh-crest--card .gh-crest__letters { font-size: .95rem; }
.gh-keycard__room { position: absolute; left: 7%; bottom: 4%; font: 600 .5rem/1 var(--gh-label); letter-spacing: .2em; color: var(--inv-brass); }
.gh-keycard__arrow { position: absolute; right: 7%; bottom: 4%; font-size: .5rem; line-height: 1; color: var(--inv-brass); }

@keyframes gh-peek { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-7px); } 88% { transform: translateY(0); } 94% { transform: translateY(-3px); } }

.gh-sleeve {
    --gh-damask-c: var(--inv-accent); --gh-damask-o: .13;
    position: relative; z-index: 1; overflow: hidden;
    padding: 1.45rem 1.1rem 1rem;
    border-radius: 4px;
    color: var(--inv-text);
    background:
        radial-gradient(120% 50% at 50% 0, rgb(255 255 255 / .55), transparent 70%),
        linear-gradient(180deg, var(--inv-paper), color-mix(in srgb, var(--inv-paper) 88%, var(--inv-accent)));
    /* the thumb notch where the keycard is pulled out */
    -webkit-mask: radial-gradient(circle at 50% 0, transparent 0 20px, #000 20.5px);
    mask: radial-gradient(circle at 50% 0, transparent 0 20px, #000 20.5px);
}
.gh-sleeve::after { -webkit-mask-size: 220px 220px; mask-size: 220px 220px; }
.gh-sleeve::before {
    content: ''; position: absolute; z-index: 1; inset: 7px; pointer-events: none;
    border: 1px solid var(--gh-line); border-radius: 2px;
    box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 4px var(--gh-line-soft);
}
.gh-sleeve > * { position: relative; z-index: 2; }
.gh-sleeve__names {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .3rem;
    font: italic 400 clamp(1.85rem, 8.4vw, 2.2rem)/1.1 var(--gh-display); color: var(--inv-primary);
    overflow-wrap: anywhere;
}
.gh-sleeve__amp { font: 500 .5em/1 var(--gh-label); font-style: normal; color: var(--inv-wine); }
.gh-sleeve__date {
    display: inline-block; margin-top: .55rem; padding: .25rem .7rem;
    background: var(--inv-wine); color: var(--inv-paper);
    font: 600 .58rem/1.4 var(--gh-label); letter-spacing: .14em; text-transform: uppercase;
    box-shadow: 0 0 0 2px var(--inv-paper), 0 0 0 3px var(--gh-line);
}
.gh-sleeve__quote { margin-top: .5rem; font: italic 400 .8rem/1.42 var(--gh-display); color: var(--gh-muted); }
.gh-guest { margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed var(--gh-line); }
.gh-guest__label { font: 600 .56rem/1.4 var(--gh-label); letter-spacing: .28em; text-transform: uppercase; color: var(--gh-brass-text); }
.gh-guest__name { margin-top: .1rem; font: 600 1.02rem/1.3 var(--gh-display); color: var(--inv-deep); overflow-wrap: anywhere; }

.gh-open.inv-button {
    margin-top: .2rem;
    background: var(--gh-brass-bg); color: var(--inv-deep);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), inset 0 0 0 1px rgb(0 0 0 / .15), 0 14px 26px -12px rgb(0 0 0 / .6);
}

/* opening: the keycard slides out and up, then the cover fades away (≈1.15s in all) */
.gh-cover--leave { transition: opacity .5s ease .62s, transform .5s ease .62s; }
.gh-cover--gone { opacity: 0; transform: scale(1.04); }
.gh-cover--leave .gh-keycard { animation: gh-key-out .78s cubic-bezier(.55, 0, .25, 1) forwards; }
.gh-cover--leave .gh-open { opacity: 0; transition: opacity .25s ease; }
@keyframes gh-key-out {
    0% { transform: translateY(0); }
    30% { transform: translateY(-16%); }
    100% { transform: translateY(-150%) rotate(-7deg) scale(1.1); }
}

/* ---------- client photos under gradients ---------- */

.gh-bgphoto { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.gh-bgphoto img { position: absolute; inset: -40px 0; width: 100%; height: calc(100% + 80px); object-fit: cover; opacity: .6; }
.gh-bgphoto::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--gh-bg) 55%, transparent), color-mix(in srgb, var(--gh-bg) 78%, transparent) 40%, color-mix(in srgb, var(--gh-bg) 92%, transparent) 75%, var(--gh-bg));
}
.gh-bgphoto--light img { opacity: .62; filter: saturate(.85) sepia(.12); }
.gh-bgphoto--light::after { background: linear-gradient(180deg, color-mix(in srgb, var(--gh-bg) 18%, transparent), color-mix(in srgb, var(--gh-bg) 50%, transparent) 30%, color-mix(in srgb, var(--gh-bg) 80%, transparent) 58%, var(--gh-bg) 88%); }

/* ---------- hero: the lobby portrait ---------- */

.gh-hero {
    --gh-bg: var(--inv-deep);
    --gh-damask-c: var(--inv-brass); --gh-damask-o: .07;
    --gh-line: color-mix(in srgb, var(--inv-accent) 75%, transparent);
    position: relative; overflow: hidden;
    min-height: min(100vh, 880px); min-height: min(100svh, 880px); padding: 3.2rem 1.5rem 3.6rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; color: var(--inv-paper);
    background: var(--gh-velvet), var(--gh-green-bg);
}
.gh-hero > .gh-bgphoto { z-index: 0; }
.gh-hero .gh-bgphoto img { opacity: .5; }
.gh-hero .gh-bgphoto::after { background: linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 60%, transparent), color-mix(in srgb, var(--inv-primary) 82%, transparent) 45%, var(--inv-deep) 95%); }
.gh-hero__inner { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.gh-hero__kicker { font: 600 .68rem/1.4 var(--gh-label); letter-spacing: .34em; text-transform: uppercase; color: var(--inv-brass); }

/* the brass picture rail, the hook, two cords and the gilt frame */
.gh-portrait { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; margin: .2rem 0 .5rem; }
.gh-portrait__rail {
    position: relative; display: block; width: calc(100% + 3rem); height: 5px; margin: 0 -1.5rem;
    background: var(--gh-brass-bg); box-shadow: 0 2px 0 rgb(0 0 0 / .35), 0 -1px 0 rgb(255 255 255 / .15);
}
/* the hook on the rail */
.gh-portrait__rail::after {
    content: ''; position: absolute; left: 50%; top: 2px; width: 9px; height: 12px; margin-left: -4.5px;
    border: 2px solid var(--inv-brass); border-top: 0; border-radius: 0 0 6px 6px;
}
.gh-portrait__cords {
    display: block; width: min(64%, 256px); height: 2.4rem; margin-top: 8px;
    background:
        linear-gradient(to bottom right, transparent calc(50% - 1.1px), var(--inv-brass) calc(50% - 1.1px) calc(50% + 1.1px), transparent calc(50% + 1.1px)) 0 0 / 50% 100% no-repeat,
        linear-gradient(to bottom left, transparent calc(50% - 1.1px), var(--inv-brass) calc(50% - 1.1px) calc(50% + 1.1px), transparent calc(50% + 1.1px)) 100% 0 / 50% 100% no-repeat;
    opacity: .9;
}
.gh-portrait__frame {
    position: relative; width: min(74%, 296px); margin-top: -2px; padding: 12px;
    background:
        linear-gradient(var(--inv-deep), var(--inv-deep)) 50% 50% / calc(100% - 14px) calc(100% - 14px) no-repeat,
        var(--gh-brass-bg);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35), 0 0 0 1px color-mix(in srgb, var(--inv-accent) 60%, #3a2400), 0 34px 46px -24px rgb(0 0 0 / .8);
}
/* the carved inner bead and the burgundy slip */
.gh-portrait__frame::before {
    content: ''; position: absolute; inset: 7px; pointer-events: none;
    border: 3px solid var(--inv-wine); box-shadow: inset 0 0 0 1px var(--inv-brass), 0 0 0 1px color-mix(in srgb, var(--inv-brass) 60%, transparent);
}
.gh-portrait__photo {
    position: relative; display: grid; place-items: center;
    aspect-ratio: 4 / 5;
    background: var(--gh-photo, none) center 30% / cover no-repeat, var(--gh-velvet), linear-gradient(160deg, var(--inv-primary), var(--inv-deep));
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .3), inset 0 0 18px rgb(0 0 0 / .35);
}
.gh-portrait__frame .gh-bracket { width: 1.7rem; height: 1.7rem; margin: -9px; }
.gh-crest--arch { width: 72%; color: var(--inv-brass); }
.gh-crest--arch .gh-crest__letters { font-size: 2.2rem; }

.gh-hero__names {
    display: flex; flex-direction: column; align-items: center;
    font: italic 400 clamp(2.6rem, 12vw, 3.3rem)/1.04 var(--gh-display); color: var(--inv-paper);
    overflow-wrap: anywhere; text-shadow: 0 2px 18px rgb(0 0 0 / .35);
}
.gh-hero__amp { font: 500 .4em/1.6 var(--gh-label); font-style: normal; color: var(--inv-brass); }
/* the check-in date on an engraved brass plate */
.gh-hero__date {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; margin-top: .3rem;
    padding: .5rem 1.5rem .55rem; border-radius: 3px;
    background:
        radial-gradient(circle at .6rem 50%, color-mix(in srgb, var(--inv-accent) 55%, #3a2400) 0 2px, transparent 2.6px),
        radial-gradient(circle at calc(100% - .6rem) 50%, color-mix(in srgb, var(--inv-accent) 55%, #3a2400) 0 2px, transparent 2.6px),
        var(--gh-brass-bg);
    color: var(--inv-deep);
    font: 700 .68rem/1.4 var(--gh-label); letter-spacing: .14em; text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), inset 0 0 0 1px rgb(0 0 0 / .15), 0 12px 20px -10px rgb(0 0 0 / .6);
}
.gh-hero__date span { font-size: .5rem; letter-spacing: .32em; color: var(--inv-wine); }

.gh-scroll { position: absolute; z-index: 1; left: 50%; bottom: 1.2rem; width: 1px; height: 2.4rem; overflow: hidden; background: color-mix(in srgb, var(--inv-accent) 30%, transparent); }
.gh-scroll span { position: absolute; left: 0; top: -1rem; width: 1px; height: 1rem; background: var(--inv-brass); animation: gh-drip 2.2s ease-in-out infinite; }
@keyframes gh-drip { to { transform: translateY(3.6rem); } }

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

.gh-main { position: relative; background: var(--inv-background); }

/* ivory damask wallpaper (default) */
.gh-section {
    position: relative; overflow: hidden;
    padding: 4.4rem 1.35rem;
    text-align: center; color: var(--gh-fg);
    background:
        radial-gradient(90% 50% at 50% 0, rgb(255 255 255 / .45), transparent 70%),
        linear-gradient(180deg, var(--inv-background), color-mix(in srgb, var(--inv-background) 90%, var(--inv-accent)));
}
/* a brass double rule where sections meet */
.gh-section::before {
    content: ''; position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 6px;
    border-top: 2px solid var(--gh-line); border-bottom: 1px solid var(--gh-line-soft);
}
.gh-section > * { position: relative; z-index: 1; }
.gh-section > .gh-bgphoto { position: absolute; z-index: 0; }

/* emerald velvet: ivory text, brass titles, brass buttons */
.gh-section--green, .gh-section--wine {
    --gh-bg: var(--inv-deep);
    --gh-fg: var(--inv-paper);
    --gh-muted: color-mix(in srgb, var(--inv-paper) 88%, transparent);
    --gh-title: var(--inv-paper);
    --gh-em: var(--inv-brass);
    --gh-label-c: var(--inv-brass);
    --gh-line: color-mix(in srgb, var(--inv-accent) 80%, transparent);
    --gh-line-soft: color-mix(in srgb, var(--inv-accent) 38%, transparent);
    --gh-damask-c: var(--inv-brass);
    --gh-damask-o: .065;
    --gh-btn-bg: var(--gh-brass-bg);
    --gh-btn-fg: var(--inv-deep);
    background: var(--gh-velvet), var(--gh-green-bg);
}
/* burgundy velvet */
.gh-section--wine {
    --gh-bg: color-mix(in srgb, var(--inv-wine) 62%, #000);
    background: var(--gh-velvet), var(--gh-wine-bg);
}
.gh-section--green .inv-button, .gh-section--wine .inv-button { box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), inset 0 0 0 1px rgb(0 0 0 / .15), 0 12px 22px -12px rgb(0 0 0 / .6); }
.gh-section--green .inv-button--outline, .gh-section--wine .inv-button--outline { background: transparent; color: var(--inv-brass); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-brass) 60%, transparent); }
/* paper inside a velvet section keeps the ivory tokens */
.gh-section--green .gh-sheet {
    --gh-fg: var(--inv-text);
    --gh-muted: color-mix(in srgb, var(--inv-text) 86%, transparent);
    --gh-title: var(--inv-primary);
    --gh-line: color-mix(in srgb, var(--inv-accent) 70%, transparent);
    --gh-line-soft: color-mix(in srgb, var(--inv-accent) 35%, transparent);
    --gh-btn-bg: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 88%, #fff 12%), var(--inv-deep));
    --gh-btn-fg: var(--inv-brass);
}
.gh-section--green .gh-sheet .inv-button { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 70%, transparent), inset 0 0 0 3px color-mix(in srgb, var(--inv-deep) 60%, transparent), inset 0 0 0 4px color-mix(in srgb, var(--inv-accent) 35%, transparent), 0 12px 22px -14px rgb(0 0 0 / .6); }
.gh-section--green .gh-sheet .inv-button--outline { color: var(--inv-primary); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-primary) 55%, transparent); }

/* heading: the label engraved on a brass plaque, a big Bodoni title with an italic accent word */
.gh-heading { margin-bottom: 2rem; }
.gh-heading__label { display: flex; justify-content: center; }
.gh-heading__label span {
    position: relative; display: inline-block; padding: .38rem 1.35rem .4rem; border-radius: 2px;
    background:
        radial-gradient(circle at .5rem 50%, color-mix(in srgb, var(--inv-accent) 55%, #3a2400) 0 1.7px, transparent 2.2px),
        radial-gradient(circle at calc(100% - .5rem) 50%, color-mix(in srgb, var(--inv-accent) 55%, #3a2400) 0 1.7px, transparent 2.2px),
        var(--gh-brass-bg);
    color: var(--inv-deep);
    font: 700 .6rem/1.3 var(--gh-label); letter-spacing: .28em; text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), inset 0 0 0 1px rgb(0 0 0 / .14), 0 8px 14px -8px rgb(0 0 0 / .55);
}
.gh-heading__title { margin-top: .7rem; font: 400 clamp(2.1rem, 9.5vw, 2.6rem)/1.12 var(--gh-display); color: var(--gh-title); }
.gh-heading__title em { font-style: italic; color: var(--gh-em); }

.gh-lead { max-width: 24rem; margin: -.7rem auto 1.8rem; color: var(--gh-muted); font-size: .93rem; }

/* ---------- opening: the welcome letter ---------- */

.gh-opening { padding-top: 4rem; }
.gh-letter { max-width: 25rem; margin: 0 auto; }
.gh-arabic { margin: .2rem 0 .5rem; font: 400 1.6rem/1.8 'Amiri', serif; text-align: center; color: var(--inv-primary); }
.gh-letter__greeting { margin-top: .3rem; font: 500 1.15rem/1.45 var(--gh-display); color: var(--inv-primary); }
.gh-letter__message { margin-top: .7rem; color: var(--gh-muted); font-size: .93rem; }
.gh-letter__sign { margin-top: 1.1rem; text-align: right; font: 400 .8rem/1.5 var(--gh-sans); color: var(--gh-muted); }
.gh-letter__sign span { font: italic 500 1.3rem/1.4 var(--gh-display); color: var(--inv-primary); }

/* the verse on a burgundy velvet panel in a brass frame, off center over a brass block */
.gh-quote {
    position: relative; isolation: isolate; max-width: 23rem; margin: 3rem auto 0 .4rem; padding: 2rem 1.4rem 1.5rem;
    color: var(--inv-paper);
}
/* the panel itself sits on a layer below the text, the brass block below the panel */
.gh-quote::before {
    content: ''; position: absolute; z-index: -1; inset: 0;
    background: var(--gh-velvet), var(--gh-wine-bg);
    box-shadow: inset 0 0 0 1px var(--inv-accent), inset 0 0 0 5px transparent, inset 0 0 0 6px color-mix(in srgb, var(--inv-brass) 45%, transparent), 0 26px 40px -22px rgb(0 0 0 / .65);
}
.gh-quote__block {
    position: absolute; z-index: -2; inset: 1.1rem -.8rem -.8rem 1.4rem;
    background: var(--gh-brass-bg);
}
.gh-quote__star { position: absolute !important; top: 1rem; left: 50%; width: 1rem; height: 1rem; margin-left: -.5rem; overflow: visible; color: var(--inv-brass); }
.gh-quote blockquote { margin: 0; font: italic 400 1.02rem/1.7 var(--gh-display); color: var(--inv-paper); }
.gh-quote figcaption { margin-top: .8rem; font: 600 .62rem/1.4 var(--gh-label); letter-spacing: .24em; text-transform: uppercase; color: var(--inv-brass); }

/* ---------- couple: room doors along the damask hallway ---------- */

.gh-couple {
    --gh-damask-o: .1;
    background:
        repeating-linear-gradient(90deg, transparent 0 69px, color-mix(in srgb, var(--inv-accent) 22%, transparent) 69px 70px),
        radial-gradient(90% 50% at 50% 0, rgb(255 255 255 / .45), transparent 70%),
        linear-gradient(180deg, var(--inv-background), color-mix(in srgb, var(--inv-background) 90%, var(--inv-accent)));
}
.gh-guestroom { display: flex; flex-direction: column; align-items: center; }
.gh-door { position: relative; width: min(64%, 236px); margin: 0 auto 1.3rem; }
.gh-door__transom {
    display: inline-flex; align-items: baseline; gap: .4rem; margin-bottom: .6rem; padding: .3rem .85rem;
    border-radius: 2px; background: var(--gh-brass-bg); color: var(--inv-deep);
    font: 700 .56rem/1 var(--gh-label); letter-spacing: .3em; text-transform: uppercase;
    box-shadow: 0 4px 10px -4px rgb(0 0 0 / .4), inset 0 1px 0 rgb(255 255 255 / .45);
}
.gh-door__transom b { font: 600 .9rem/1 var(--gh-display); letter-spacing: .05em; }
/* the door frame (architrave) painted green with brass mouldings */
.gh-door__frame {
    position: relative; padding: 11px 11px 0;
    border-radius: 3px 3px 0 0;
    background: var(--gh-velvet), linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 90%, #fff 6%), var(--inv-deep));
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 85%, transparent), inset 0 0 0 6px transparent, 0 26px 30px -20px rgb(0 0 0 / .6);
}
.gh-door__frame::before {
    content: ''; position: absolute; inset: 5px 5px 0; pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--inv-accent) 45%, transparent); border-bottom: 0;
}
.gh-door__photo {
    display: block; width: 100%; aspect-ratio: 3 / 4.15; object-fit: cover; object-position: center 25%;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2);
}
.gh-door__photo--empty {
    display: grid; place-items: center;
    background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--inv-paper) 92%, var(--inv-accent)), color-mix(in srgb, var(--inv-paper) 70%, var(--inv-accent)));
    font: italic 400 4.5rem/1 var(--gh-display); color: var(--inv-primary);
}
/* the brass name plate with two screws */
.gh-door__plate {
    position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
    max-width: 82%; padding: .3rem 1.4rem .35rem;
    border-radius: 3px;
    background:
        radial-gradient(circle at .55rem 50%, color-mix(in srgb, var(--inv-accent) 60%, #3a2400) 0 2px, transparent 2.5px),
        radial-gradient(circle at calc(100% - .55rem) 50%, color-mix(in srgb, var(--inv-accent) 60%, #3a2400) 0 2px, transparent 2.5px),
        var(--gh-brass-bg);
    color: var(--inv-deep);
    font: italic 500 1.4rem/1.15 var(--gh-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    box-shadow: 0 8px 16px -6px rgb(0 0 0 / .55), inset 0 1px 0 rgb(255 255 255 / .55), inset 0 0 0 1px rgb(0 0 0 / .15);
}
/* the door hanger on the frame */
.gh-hanger {
    position: absolute; z-index: 2; right: -1.6rem; top: 34%;
    width: 2.9rem; padding: 1.55rem .2rem .7rem;
    border-radius: 6px 6px 4px 4px;
    background: var(--inv-wine); color: var(--inv-paper);
    box-shadow: inset 0 0 0 1px var(--inv-accent), inset 0 0 0 3px transparent, inset 0 0 0 4px color-mix(in srgb, var(--inv-brass) 40%, transparent), 0 10px 16px -8px rgb(0 0 0 / .5);
    transform-origin: 50% .5rem; transform: rotate(7deg);
    animation: gh-swing 5s ease-in-out infinite;
    will-change: transform;
}
.gh-hanger::before {
    content: ''; position: absolute; top: .35rem; left: 50%; width: 1rem; height: 1rem; margin-left: -.5rem;
    border-radius: 50%; background: var(--inv-deep); box-shadow: 0 0 0 2px var(--inv-accent);
}
.gh-hanger span {
    display: block; writing-mode: vertical-rl; margin: 0 auto;
    font: 700 .5rem/1.2 var(--gh-label); letter-spacing: .2em; text-transform: uppercase;
}
@keyframes gh-swing { 50% { transform: rotate(3deg); } }
.gh-guestroom:nth-of-type(2) .gh-hanger, .gh-amp + .gh-guestroom .gh-hanger { right: auto; left: -1.6rem; transform: rotate(-7deg); animation-name: gh-swing-left; }
@keyframes gh-swing-left { 50% { transform: rotate(-3deg); } }
/* the threshold and a strip of burgundy carpet */
.gh-door__carpet {
    display: block; height: 12px; margin: 0 -10%;
    background: linear-gradient(180deg, var(--gh-brass-bg)) 0 0 / 100% 3px no-repeat, linear-gradient(180deg, var(--inv-wine), color-mix(in srgb, var(--inv-wine) 60%, #000));
    border-radius: 0 0 3px 3px;
    box-shadow: 0 10px 14px -8px rgb(0 0 0 / .4);
}
.gh-guestroom__name { font: 500 1.35rem/1.35 var(--gh-display); color: var(--inv-deep); overflow-wrap: anywhere; }
.gh-guestroom__parents { margin-top: .45rem; font-size: .92rem; color: var(--gh-muted); }
.gh-guestroom__parents strong { color: var(--gh-fg); font-weight: 600; }

.gh-amp { display: flex; align-items: center; justify-content: center; gap: .9rem; margin: 2.2rem 0 2rem; }
.gh-amp::before, .gh-amp::after { content: ''; width: 3.5rem; height: 1px; background: linear-gradient(90deg, transparent, var(--gh-line)); }
.gh-amp::after { transform: scaleX(-1); }
.gh-amp span {
    display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%;
    background: var(--gh-wine-bg); color: var(--inv-brass);
    font: italic 500 1.7rem/1 var(--gh-display);
    box-shadow: 0 0 0 3px var(--inv-background), 0 0 0 4px var(--gh-line), 0 10px 18px -8px rgb(0 0 0 / .45);
}

/* ---------- countdown: the lift floor indicator ---------- */

.gh-section--green .gh-bgphoto img { opacity: .75; }
.gh-section--green .gh-bgphoto::after { background: linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 40%, transparent), color-mix(in srgb, var(--inv-primary) 62%, transparent) 38%, color-mix(in srgb, var(--inv-deep) 82%, transparent) 75%, var(--inv-deep)); }
.gh-lift { display: flex; flex-direction: column-reverse; align-items: center; width: min(80%, 300px); margin: -.4rem auto 1.1rem; view-timeline-name: --gh-lift; }
.gh-lift__dial { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 14px 18px rgb(0 0 0 / .45)); }
.gh-lift__face { fill: color-mix(in srgb, var(--inv-deep) 92%, #000); }
.gh-lift__tick { stroke: var(--inv-brass); stroke-width: 1.4; stroke-linecap: round; opacity: .75; }
.gh-lift__floor { font: 700 11px var(--gh-label); fill: color-mix(in srgb, var(--inv-brass) 60%, transparent); text-anchor: middle; dominant-baseline: central; }
.gh-lift__floor.is-lit { font-size: 14px; fill: var(--inv-brass); filter: drop-shadow(0 0 3px var(--inv-brass)); }
.gh-lift__pin { fill: var(--inv-deep); }
.gh-lift__needle { transform-box: view-box; transform-origin: 100px 100px; transform: rotate(75deg); }
.gh-lift__arrow { margin-bottom: .4rem; font-size: .7rem; line-height: 1; color: var(--inv-brass); text-shadow: 0 0 8px var(--inv-brass); animation: gh-blink 1.8s ease-in-out infinite; }
@keyframes gh-blink { 50% { opacity: .35; } }

.gh-countdown__date { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.3rem; font: 600 .7rem/1.4 var(--gh-label); letter-spacing: .14em; text-transform: uppercase; color: var(--gh-fg); }
.gh-countdown__date .gh-icon { width: 1.1rem; height: 1.1rem; color: var(--inv-brass); }

/* the brass panel with four round lift buttons */
.gh-lift__panel .inv-countdown {
    position: relative; width: fit-content; max-width: 100%; margin: 0 auto; gap: .65rem; padding: 1.05rem 1rem .8rem;
    border-radius: 10px;
    background:
        radial-gradient(circle at 9px 9px, color-mix(in srgb, var(--inv-accent) 55%, #3a2400) 0 2px, transparent 2.6px),
        radial-gradient(circle at calc(100% - 9px) 9px, color-mix(in srgb, var(--inv-accent) 55%, #3a2400) 0 2px, transparent 2.6px),
        radial-gradient(circle at 9px calc(100% - 9px), color-mix(in srgb, var(--inv-accent) 55%, #3a2400) 0 2px, transparent 2.6px),
        radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), color-mix(in srgb, var(--inv-accent) 55%, #3a2400) 0 2px, transparent 2.6px),
        repeating-linear-gradient(90deg, rgb(255 255 255 / .06) 0 1px, transparent 1px 3px),
        var(--gh-brass-bg);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), inset 0 0 0 1px rgb(0 0 0 / .18), 0 20px 30px -18px rgb(0 0 0 / .7);
}
.inv-countdown__item { min-width: 0; padding: 0; border-radius: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.inv-countdown__item:hover { transform: none; }
.inv-countdown__value {
    display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--inv-primary) 85%, #fff 10%), var(--inv-deep) 75%);
    color: var(--inv-brass);
    font: 600 1.3rem/1 var(--gh-display); font-variant-numeric: lining-nums tabular-nums;
    text-shadow: 0 0 8px color-mix(in srgb, var(--inv-brass) 70%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-accent) 70%, #3a2400), 0 0 0 4px rgb(255 255 255 / .35), inset 0 3px 7px rgb(0 0 0 / .55), 0 4px 8px rgb(0 0 0 / .3);
}
.inv-countdown__label { font: 700 .54rem/1 var(--gh-label); letter-spacing: .14em; text-transform: uppercase; color: var(--inv-deep); opacity: 1; }
.inv-countdown__done { font: italic 400 1rem/1.6 var(--gh-display); color: var(--gh-fg); }
.inv-countdown__actions { margin-top: 1.5rem; }
.inv-countdown__actions .inv-button { padding: .7rem .9rem; font-size: .56rem; letter-spacing: .1em; }

/* ---------- events: reservation confirmations with a room key ---------- */

.gh-reservation { max-width: 25rem; margin: 0 auto; padding-bottom: 1.6rem; }
.gh-reservation + .gh-reservation { margin-top: 2.6rem; }
/* a perforated tear-off edge at the foot of the sheet */
.gh-reservation::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 7px;
    background: radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--inv-background) 92%, var(--inv-accent)) 0 3.5px, transparent 4px) 0 0 / 12px 7px repeat-x;
}
.gh-reservation .gh-letterhead { padding-right: 3.6rem; }
.gh-reservation__photo {
    aspect-ratio: 16 / 9; margin-bottom: 1rem;
    background: var(--gh-photo) center 35% / cover no-repeat;
    border-radius: 1px;
    box-shadow: 0 0 0 3px var(--inv-paper), 0 0 0 4px var(--gh-line-soft);
}
.gh-reservation__kicker { font: 600 .58rem/1.4 var(--gh-label); letter-spacing: .3em; text-transform: uppercase; color: var(--gh-brass-text); }
.gh-reservation__name { font: 500 1.75rem/1.2 var(--gh-display); color: var(--inv-primary); overflow-wrap: anywhere; }

/* the old room key and its leather fob, hanging over the sheet's top right corner */
.gh-roomkey {
    position: absolute; z-index: 3; top: -1.1rem; right: .9rem;
    display: flex; align-items: flex-start;
    transform-origin: 70% 0; transform: rotate(4deg);
    filter: drop-shadow(0 8px 8px rgb(0 0 0 / .35));
}
.gh-roomkey__key { width: 1.15rem; height: 3.45rem; margin-right: -.55rem; transform: rotate(14deg); transform-origin: 50% 8%; overflow: visible; }
.gh-roomkey__hole { fill: var(--inv-paper); }
.gh-roomkey__fob {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 2.6rem; height: 4rem; margin-top: .25rem;
    border-radius: 45% 45% 50% 50% / 30% 30% 70% 70%;
    background:
        radial-gradient(70% 40% at 35% 25%, rgb(255 255 255 / .18), transparent 70%),
        linear-gradient(170deg, var(--inv-wine), color-mix(in srgb, var(--inv-wine) 60%, #000));
    color: var(--inv-brass);
    box-shadow: inset 0 0 0 2px var(--inv-accent), inset 0 0 0 4px transparent, inset 0 0 0 5px color-mix(in srgb, var(--inv-brass) 35%, transparent);
}
.gh-roomkey__fob small { font: 700 .36rem/1 var(--gh-label); letter-spacing: .18em; text-transform: uppercase; }
.gh-roomkey__fob b { margin-top: .15rem; font: 600 1.05rem/1 var(--gh-display); }

.gh-rows { margin: .8rem 0 0; }
.gh-rows__row {
    display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); gap: .6rem; align-items: baseline;
    padding: .55rem 0; border-bottom: 1px dotted var(--gh-line);
}
.gh-rows dt { display: flex; align-items: center; gap: .4rem; font: 700 .58rem/1.3 var(--gh-label); letter-spacing: .1em; text-transform: uppercase; color: var(--gh-brass-text); }
.gh-rows dt .gh-icon { width: .95rem; height: .95rem; color: var(--inv-primary); }
.gh-rows dd { margin: 0; font: 500 .9rem/1.5 var(--gh-sans); color: var(--inv-text); overflow-wrap: anywhere; }
.gh-rows .gh-rows__strong { font: 600 1rem/1.4 var(--gh-display); color: var(--inv-deep); }

/* the rubber stamp */
.gh-stamp {
    display: flex; flex-direction: column; align-items: center; width: fit-content;
    margin: -.6rem .2rem 0 auto; padding: .3rem .75rem .3rem;
    border: 3px double var(--inv-stamp); border-radius: 6px;
    color: var(--inv-stamp); transform: rotate(-9deg);
    mix-blend-mode: multiply; opacity: .88;
}
.gh-stamp span { font: 700 1.02rem/1.1 var(--gh-label); letter-spacing: .2em; text-transform: uppercase; }
.gh-stamp small { font: 700 .5rem/1.2 var(--gh-sans); letter-spacing: .16em; }

.gh-reservation__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-top: 1rem; }
.gh-reservation__actions .inv-button { padding: .78rem .4rem; font-size: .56rem; letter-spacing: .1em; }
.gh-reservation__foot { margin-top: 1rem; padding-top: .7rem; border-top: 1px dashed var(--gh-line-soft); text-align: center; font: 600 .52rem/1.4 var(--gh-label); letter-spacing: .2em; text-transform: uppercase; color: var(--gh-muted); }

/* ---------- love story: the guest history on burgundy velvet (R1) ---------- */

.gh-story { padding-left: 1rem; padding-right: 1rem; }
.gh-zig { position: relative; margin: 0; padding: 0; list-style: none; }
/* the lift shaft: two brass rails */
.gh-zig::before {
    content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 7px; transform: translateX(-50%);
    border-left: 1px solid var(--gh-line); border-right: 1px solid var(--gh-line);
    -webkit-mask: linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent);
    mask: linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent);
}
.gh-zig__item {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1fr) 2.2rem minmax(0, 1fr); column-gap: .55rem; align-items: start;
    grid-template-areas: "text dot meta";
}
.gh-zig__item + .gh-zig__item { margin-top: 2.5rem; }
.gh-zig__item.is-flip { grid-template-areas: "meta dot text"; }
/* the dot: a brass room plaque with the floor number */
.gh-zig__dot {
    grid-area: dot; justify-self: center; display: grid; place-items: center;
    width: 2.2rem; height: 1.6rem; border-radius: 2px;
    background: var(--gh-brass-bg); color: var(--inv-deep);
    font: 700 .68rem/1 var(--gh-label); letter-spacing: .06em;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-wine) 80%, #000), 0 0 0 4px var(--gh-line), 0 6px 12px -6px rgb(0 0 0 / .5);
}
.gh-zig__text { grid-area: text; min-width: 0; text-align: right; }
.is-flip .gh-zig__text { text-align: left; }
.gh-zig__title { font: 500 1.12rem/1.3 var(--gh-display); color: var(--gh-title); overflow-wrap: anywhere; }
.gh-zig__rule { display: block; width: 70%; margin: .45rem 0 .55rem auto; border-top: 2px dotted var(--gh-line); }
.is-flip .gh-zig__rule { margin-left: 0; margin-right: auto; }
.gh-zig__story { font-size: .85rem; line-height: 1.6; color: var(--gh-muted); overflow-wrap: anywhere; }
.gh-zig__meta { grid-area: meta; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; text-align: left; }
.is-flip .gh-zig__meta { align-items: flex-end; text-align: right; }
.gh-zig__floor { font: 700 .55rem/1.3 var(--gh-label); letter-spacing: .24em; text-transform: uppercase; color: var(--gh-label-c); }
.gh-zig__date { font: italic 500 1.35rem/1.15 var(--gh-display); color: var(--gh-em); overflow-wrap: anywhere; }
.gh-zig__photo {
    display: block; width: min(6.6rem, 100%); aspect-ratio: 4 / 5; object-fit: cover; margin-top: .45rem;
    border: 4px solid var(--inv-paper); border-radius: 1px;
    box-shadow: 0 0 0 1px var(--gh-line), 0 14px 22px -12px rgb(0 0 0 / .55);
}

/* ---------- gallery: art on the damask wallpaper ---------- */

.gh-gallery { --gh-damask-o: .1; }
.gh-gallery .inv-gallery { gap: 1.6rem; padding: .5rem; }
.inv-gallery__item {
    border-radius: 1px;
    box-shadow: 0 0 0 5px var(--inv-paper), 0 0 0 6px color-mix(in srgb, var(--inv-accent) 60%, #3a2400), 0 0 0 9px var(--inv-accent), 0 0 0 10px color-mix(in srgb, var(--inv-accent) 55%, #3a2400), 0 20px 28px -14px rgb(0 0 0 / .6);
}
.inv-gallery__item:first-child,
.inv-gallery__item:first-child ~ .inv-gallery__item:last-child:nth-child(even) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.inv-gallery__play { background: color-mix(in srgb, var(--inv-deep) 70%, transparent); color: var(--inv-brass); }

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

.gh-live__card { max-width: 24rem; margin: 0 auto; padding: 1.6rem 1.3rem 1.6rem; text-align: center; }
.gh-live__badge {
    display: inline-flex; align-items: center; gap: .45rem; padding: .32rem .8rem;
    border-radius: 2px; background: var(--inv-deep); color: var(--inv-brass);
    font: 700 .62rem/1 var(--gh-label); letter-spacing: .24em; text-transform: uppercase;
}
.gh-live__badge span { width: .45rem; height: .45rem; border-radius: 50%; background: #ff6b5b; box-shadow: 0 0 6px #ff6b5b; animation: gh-blink 1.4s ease-in-out infinite; }
.gh-live__text { margin: 1rem 0 .5rem; color: var(--gh-muted); }
.gh-live__note { margin-bottom: 1rem; font: 500 1.02rem/1.5 var(--gh-display); color: var(--inv-primary); }
.gh-live__card .inv-button { margin-top: .5rem; }

/* ---------- gift: the concierge desk and premium hotel cards ---------- */

.gh-concierge { width: 6.2rem; margin: -.6rem auto .8rem; }
.gh-concierge__bell { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 90%; animation: gh-ding 6s ease-in-out infinite; }
.gh-concierge__desk { display: block; height: 4px; margin: 0 -2.4rem; border-radius: 2px; background: var(--gh-brass-bg); box-shadow: 0 6px 10px -4px rgb(0 0 0 / .35); }
@keyframes gh-ding { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(-6deg); } 92% { transform: rotate(5deg); } 95% { transform: rotate(-2deg); } }

.inv-gift { display: grid; gap: .9rem; max-width: 24rem; margin: 0 auto; }
.inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.inv-gift__account {
    position: relative; overflow: hidden; isolation: isolate; min-width: 0;
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .45rem;
    grid-template-areas: "chip bank" "number number" "holder holder" "button button";
    margin: 0; padding: .85rem .8rem .9rem;
    border-radius: 14px; text-align: left; color: var(--inv-paper);
    background:
        linear-gradient(115deg, transparent 25%, rgb(255 255 255 / .1) 38%, transparent 52%),
        repeating-radial-gradient(circle at 110% -10%, transparent 0 7px, color-mix(in srgb, var(--inv-brass) 10%, transparent) 7px 8px),
        linear-gradient(150deg, color-mix(in srgb, var(--inv-primary) 90%, #fff 8%), var(--inv-deep) 85%);
    box-shadow: 0 18px 30px -18px rgb(0 0 0 / .65), inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 65%, transparent), inset 0 0 0 4px transparent;
}
.inv-gift__account + .inv-gift__account { margin-top: 0; }
/* the brass chip */
.inv-gift__account::before {
    content: ''; grid-area: chip; width: 1.65rem; height: 1.25rem; border-radius: .28rem;
    background:
        linear-gradient(90deg, transparent 31%, rgb(0 0 0 / .25) 31% 33%, transparent 33% 67%, rgb(0 0 0 / .25) 67% 69%, transparent 69%),
        linear-gradient(0deg, transparent 47%, rgb(0 0 0 / .25) 47% 53%, transparent 53%),
        var(--gh-brass-bg);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2);
}
/* five stars embossed in the corner */
.inv-gift__account::after {
    content: '★★★★★'; position: absolute; z-index: -1; right: .75rem; bottom: .6rem;
    font-size: .48rem; letter-spacing: .12em; color: var(--inv-brass); opacity: .75;
}
.inv-gift__bank {
    grid-area: bank; justify-self: end; min-width: 0; max-width: 100%; margin: 0;
    font: 700 .6rem/1.2 var(--gh-label); letter-spacing: .08em; text-transform: uppercase; text-align: right; overflow-wrap: anywhere; color: var(--inv-brass);
}
.inv-gift__logo { height: 1.5rem; max-width: 100%; padding: .2rem .45rem; border-radius: .3rem; }
.inv-gift__logo img { max-width: 4.6rem; }
.inv-gift__number {
    grid-area: number; margin: .8rem 0 .15rem;
    font: 600 .95rem/1.25 var(--gh-sans); letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--inv-paper);
    overflow-wrap: anywhere;
}
.inv-gift__holder { grid-area: holder; margin: 0; font: 600 .58rem/1.35 var(--gh-sans); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-paper) 88%, transparent); overflow-wrap: anywhere; }
.inv-gift__account .inv-button {
    grid-area: button; justify-self: start; margin-top: .65rem; padding: .38rem .7rem; border-radius: 999px;
    font: 700 .52rem/1.2 var(--gh-label); letter-spacing: .1em; color: var(--inv-brass); background: rgb(255 255 255 / .06);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-brass) 65%, transparent);
}

/* the gift address stays a plain paper card */
.inv-gift__account.inv-gift__address {
    display: block; padding: 1.5rem 1.3rem; border-radius: 3px; text-align: center; color: var(--inv-text);
    background: linear-gradient(180deg, var(--inv-paper), color-mix(in srgb, var(--inv-paper) 92%, var(--inv-accent)));
    box-shadow: inset 0 0 0 1px var(--gh-line-soft), inset 0 0 0 6px var(--inv-paper), inset 0 0 0 7px var(--gh-line-soft), 0 20px 40px -28px rgb(0 0 0 / .5);
}
.inv-gift__address::before, .inv-gift__address::after { content: none; }
.inv-gift__address .inv-gift__bank { justify-self: auto; text-align: center; font: 700 .64rem/1.4 var(--gh-label); letter-spacing: .28em; color: var(--gh-brass-text); }
.inv-gift__address .inv-gift__holder { margin: .6rem 0 .2rem; font: 500 1.1rem/1.3 var(--gh-display); letter-spacing: .02em; text-transform: none; color: var(--inv-deep); }
.inv-gift__address p:not([class]) { color: var(--gh-muted); }
.inv-gift__address .inv-button {
    margin-top: 1rem; border-radius: 3px; color: var(--inv-primary); background: transparent;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 50%, transparent);
}

/* ---------- rsvp: the reservation form ---------- */

.gh-form { max-width: 24.5rem; margin: 0 auto; }
.inv-form { gap: 1rem; }
.inv-form label, .inv-form__choices legend { font: 700 .6rem/1.4 var(--gh-label); letter-spacing: .14em; text-transform: uppercase; color: var(--gh-brass-text); }
.inv-form input:not([type=radio]):not([type=checkbox]), .inv-form select, .inv-form textarea {
    padding: .55rem .2rem; border: 0; border-bottom: 1.5px solid var(--gh-line); border-radius: 0;
    background: transparent; color: var(--inv-text);
    font: 500 1rem/1.4 var(--gh-sans); letter-spacing: normal; text-transform: none;
    transition: border-color .2s ease, background .2s ease;
}
.inv-form textarea { background: repeating-linear-gradient(180deg, transparent 0 1.65rem, var(--gh-line-soft) 1.65rem calc(1.65rem + 1px)); line-height: 1.65rem; padding-top: .1rem; }
.inv-form input:focus, .inv-form select:focus, .inv-form textarea:focus { outline: none; border-color: var(--inv-primary); background-color: color-mix(in srgb, var(--inv-accent) 8%, transparent); }
.inv-form option { background: #fff; color: var(--inv-text); }
.inv-form input[type=radio], .inv-form input[type=checkbox] { accent-color: var(--inv-primary); }
.inv-form__choices { gap: .45rem; }
.inv-form__choices legend { margin-bottom: .5rem; }
.inv-form__choices label {
    padding: .45rem .75rem; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--gh-line-soft);
    font: 600 .86rem/1.2 var(--gh-sans); letter-spacing: normal; text-transform: none; color: var(--inv-text);
}
.inv-form__choices label:has(input:checked) { background: color-mix(in srgb, var(--inv-primary) 10%, transparent); box-shadow: inset 0 0 0 1px var(--inv-primary); }
.inv-form__notice { color: var(--inv-text); background: color-mix(in srgb, var(--inv-accent) 14%, transparent); border: 1px solid var(--gh-line-soft); border-radius: 2px; }
.inv-form .inv-button { justify-self: stretch; margin-top: .3rem; }
.inv-rsvp__deadline { margin-bottom: .8rem; font: italic 400 .95rem/1.5 var(--gh-display); color: var(--inv-primary); }

/* ---------- wishes: the burgundy leather guestbook ---------- */

.gh-book {
    position: relative; max-width: 25rem; margin: 0 auto; padding: 13px 13px 13px 20px;
    border-radius: 5px 12px 12px 5px;
    background:
        linear-gradient(135deg, var(--inv-brass) 0 9px, var(--inv-accent) 9px 13px, transparent 13px) 0 0 / 30px 30px no-repeat,
        linear-gradient(225deg, var(--inv-brass) 0 9px, var(--inv-accent) 9px 13px, transparent 13px) 100% 0 / 30px 30px no-repeat,
        linear-gradient(315deg, var(--inv-brass) 0 9px, var(--inv-accent) 9px 13px, transparent 13px) 100% 100% / 30px 30px no-repeat,
        linear-gradient(45deg, var(--inv-brass) 0 9px, var(--inv-accent) 9px 13px, transparent 13px) 0 100% / 30px 30px no-repeat,
        linear-gradient(90deg, rgb(0 0 0 / .35) 0 6px, rgb(255 255 255 / .08) 6px 8px, transparent 8px),
        radial-gradient(120% 80% at 30% 20%, color-mix(in srgb, var(--inv-wine) 88%, #fff 8%), color-mix(in srgb, var(--inv-wine) 55%, #000));
    box-shadow: 0 30px 46px -26px rgb(0 0 0 / .65), inset 0 0 0 1px rgb(0 0 0 / .3);
}
.gh-book__page {
    position: relative; padding: 1.3rem 1.05rem 1.2rem;
    border-radius: 2px 6px 6px 2px; text-align: left; color: var(--inv-text);
    background:
        linear-gradient(90deg, rgb(0 0 0 / .1), transparent 1.1rem),
        linear-gradient(180deg, var(--inv-paper), color-mix(in srgb, var(--inv-paper) 92%, var(--inv-accent)));
    box-shadow: 3px 3px 0 -1px color-mix(in srgb, var(--inv-paper) 85%, var(--inv-accent)), 5px 5px 0 -2px color-mix(in srgb, var(--inv-paper) 75%, var(--inv-accent));
}
.gh-book__title {
    display: flex; align-items: center; justify-content: center; gap: .45rem; margin-bottom: 1rem; padding-bottom: .7rem;
    border-bottom: 3px double var(--gh-line);
    font: italic 500 1.02rem/1.3 var(--gh-display); color: var(--inv-primary); text-align: center;
}
.inv-wishes { --inv-wishes-height: 19rem; }
.inv-wishes__list { gap: 0; margin-top: 1.3rem; }
.inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .2rem .7rem .2rem .2rem;
    border-top: 1px solid var(--gh-line-soft);
    scrollbar-color: color-mix(in srgb, var(--inv-primary) 45%, transparent) transparent;
}
.inv-wishes__empty { text-align: center; font-style: italic; padding: .8rem 0; }
.inv-wish {
    padding: .7rem .2rem .65rem; border-radius: 0;
    background: transparent; color: var(--inv-text);
    border-bottom: 1px dashed var(--gh-line-soft);
}
.inv-wish__name { font: italic 500 1.08rem/1.3 var(--gh-display); color: var(--inv-primary); }
.inv-wish__message { font-size: .9rem; line-height: 1.55; }
.inv-wish__time { margin-top: .2rem; font: 600 .56rem/1.3 var(--gh-label); letter-spacing: .1em; color: var(--gh-muted); opacity: 1; }
.inv-wish__reply { margin-top: .5rem; padding: .45rem .65rem; border-left-color: var(--inv-accent); background: color-mix(in srgb, var(--inv-accent) 10%, transparent); }
.inv-wish__reply-text { font-size: .9rem; }
.inv-wishes__page-button { color: var(--inv-primary); }
.inv-wishes__more { margin-top: .8rem; }

/* ---------- closing: the photo fading into emerald velvet ---------- */

.gh-closing { padding: 0 0 1rem; background: var(--gh-velvet), linear-gradient(180deg, var(--inv-deep) 31rem, color-mix(in srgb, var(--inv-primary) 70%, var(--inv-deep)) 82%, var(--inv-deep)); }
/* the room under the page (fixed menu, music buttons) continues the closing's velvet instead of the ivory page */
.inv-music__space { background: var(--gh-velvet), var(--inv-deep); }
.gh-closing::after { display: none; }
.gh-closing > .gh-closing__photo { position: relative; z-index: 0; height: 31rem; margin-bottom: -10.5rem; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 97%); mask-image: linear-gradient(180deg, #000 58%, transparent 97%); }
.gh-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 22%; }
.gh-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 35%, transparent) 0, transparent 22%, transparent 38%, color-mix(in srgb, var(--inv-primary) 70%, transparent) 64%, var(--inv-deep) 96%);
}
.gh-closing > .gh-closing__photo--empty { height: 14rem; margin-bottom: -9rem; background: radial-gradient(60% 60% at 50% 70%, color-mix(in srgb, var(--inv-primary) 70%, #fff 12%), transparent 75%); }
.gh-closing__photo--empty::after { display: none; }

.gh-closing__body { margin: 0 1.25rem; padding: 1.7rem 1.2rem 1.6rem; }
.gh-closing__body::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    border: 1px solid var(--gh-line-soft); outline: 1px solid color-mix(in srgb, var(--inv-accent) 25%, transparent); outline-offset: -6px;
}
.gh-crest--closing { width: 3.6rem; margin: 0 auto .5rem; color: var(--inv-brass); }
.gh-crest--closing .gh-crest__letters { font-size: 1.1rem; }
.gh-closing__label { font: 600 .62rem/1.4 var(--gh-label); letter-spacing: .3em; text-transform: uppercase; color: var(--gh-label-c); }
.gh-closing__thanks { margin-top: .1rem; font: 400 clamp(2.05rem, 9.4vw, 2.45rem)/1.12 var(--gh-display); color: var(--gh-fg); }
.gh-closing__thanks em { font-style: italic; color: var(--inv-brass); }
.gh-closing__message { max-width: 21rem; margin: .55rem auto 0; color: var(--gh-muted); font-size: .84rem; line-height: 1.55; }
.gh-closing .gh-rule { margin-top: .9rem; }
.gh-closing__sign { margin-top: .75rem; font: 600 .62rem/1.4 var(--gh-label); letter-spacing: .26em; text-transform: uppercase; color: var(--gh-label-c); }
.gh-closing__names { margin-top: .15rem; font: italic 400 clamp(1.8rem, 8.4vw, 2.15rem)/1.2 var(--gh-display); color: var(--inv-brass); }
.gh-closing__names span { font: 500 .45em/1 var(--gh-label); font-style: normal; color: var(--gh-fg); }

/* ---------- shared components: nav, music, to-top, QR tab, branding ---------- */

body .gh-nav.inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--inv-deep) 94%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-brass) 88%, transparent);
    --inv-nav-active: var(--gh-brass-bg);
    border-color: color-mix(in srgb, var(--inv-accent) 60%, transparent);
    box-shadow: 0 14px 34px -12px rgb(0 0 0 / .55);
    font-family: var(--gh-sans); font-weight: 600;
}
.gh-nav .inv-nav__item.is-active { color: var(--inv-deep); }

.inv-music { right: calc(var(--gh-edge) + 1rem); }
.inv-music__button { background: var(--gh-brass-bg); color: var(--inv-deep); box-shadow: 0 8px 22px -8px rgb(0 0 0 / .55), 0 0 0 2px var(--inv-deep), 0 0 0 3px var(--inv-accent); }
.inv-autoscroll { color: var(--inv-brass); background: color-mix(in srgb, var(--inv-deep) 92%, transparent); border-color: color-mix(in srgb, var(--inv-accent) 60%, transparent); font-family: var(--gh-sans); }
.inv-autoscroll--running { background: var(--gh-brass-bg); color: var(--inv-deep); }

.inv-to-top {
    left: calc(var(--gh-edge) + 1rem); border-radius: 50%;
    background: var(--inv-deep); color: var(--inv-brass);
    box-shadow: inset 0 0 0 1.5px var(--inv-accent), 0 6px 16px -6px rgb(0 0 0 / .5);
}
.inv-qr-tab {
    right: var(--gh-edge); font-family: var(--gh-sans); color: var(--inv-brass);
    background: var(--inv-deep);
    border-color: color-mix(in srgb, var(--inv-accent) 65%, transparent);
}
.inv-qr-sheet .inv-checkin { font-family: var(--gh-sans); color: var(--inv-text); }
.inv-checkin__title { color: var(--inv-primary); font-family: var(--gh-label); }

.gh-branding { position: relative; z-index: 1; padding-top: 1.2rem; color: color-mix(in srgb, var(--inv-paper) 88%, transparent); font-family: var(--gh-sans); background: var(--inv-deep); }

/* ---------- scroll-drawn details (the finished state is the default) ---------- */

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .gh-lift__needle { animation: gh-needle linear both; animation-timeline: --gh-lift; animation-range: entry 20% cover 55%; }
        .gh-stamp { animation: gh-stamp linear both; animation-timeline: view(); animation-range: entry 30% cover 40%; }
        .gh-roomkey { animation: gh-key-swing linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
    }
}
@keyframes gh-needle { from { transform: rotate(-75deg); } to { transform: rotate(75deg); } }
@keyframes gh-stamp { from { opacity: 0; transform: rotate(-18deg) scale(1.4); } 70% { opacity: .9; transform: rotate(-9deg) scale(.96); } to { opacity: .88; transform: rotate(-9deg) scale(1); } }
@keyframes gh-key-swing { from { transform: rotate(-14deg); } 60% { transform: rotate(9deg); } to { transform: rotate(4deg); } }

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .gh-keycard, .gh-hanger, .gh-scroll span, .gh-live__badge span, .gh-lift__arrow, .gh-concierge__bell, .gh-cover__photo img, .gh-crest--cover { animation: none; }
    .gh-cover--leave { transition: opacity .3s ease; }
    .gh-cover--leave .gh-keycard { animation: none; }
    .gh-cover--gone { transform: none; }
}

/* ---------- fit: the whole cover (sign → "Buka Undangan") on one phone screen ---------- */

@media (max-height: 760px) {
    .gh-cover__inner { gap: .6rem; padding-bottom: 1.9rem; }
    .gh-sleeve { padding: 1.3rem 1rem .9rem; }
    .gh-sleeve__names { font-size: clamp(1.7rem, 7.8vw, 2rem); }
    .gh-sleeve__quote { margin-top: .4rem; font-size: .76rem; line-height: 1.4; }
    .gh-guest { margin-top: .5rem; padding-top: .45rem; }
}
@media (max-height: 660px) {
    .gh-cover__inner { gap: .5rem; padding: 46px 1.3rem 1.6rem; }
    .gh-sign__chains { height: .7rem; }
    .gh-holder { width: min(82%, 300px); padding-top: 10%; }
    .gh-sleeve { padding: 1.2rem .95rem .8rem; }
    .gh-sleeve__names { font-size: 1.65rem; }
    .gh-sleeve__quote { font-size: .72rem; line-height: 1.36; }
    .gh-guest__name { font-size: .96rem; }
}
@media (max-height: 600px) {
    .gh-holder { padding-top: 8%; }
    .gh-sign__chains { height: .35rem; }
}
/* without a photo on a short screen there is no room for the big crest above the keycard (which carries it) */
@media (max-height: 740px) {
    .gh-crest--cover { display: none; }
}

/* ---------- intro scene "Lift ke Lobi" (scene.json, sections/_scene): the lift doors part on the lobby ---------- */
.gh-scene-lobby { --gh-damask-c: var(--inv-brass); --gh-damask-o: .1; position: absolute; inset: 0; background: radial-gradient(70% 45% at 50% 46%, color-mix(in srgb, var(--inv-brass) 26%, transparent), transparent 70%), var(--gh-velvet), radial-gradient(ellipse at 50% 40%, var(--inv-primary), var(--inv-deep) 78%); }
.gh-scene-lobby::after { content: ''; position: absolute; inset: 0; background: var(--gh-damask-c); opacity: var(--gh-damask-o); -webkit-mask: var(--gh-damask) 50% 0 / 240px 240px repeat; mask: var(--gh-damask) 50% 0 / 240px 240px repeat; }
.gh-scene-door { position: absolute; inset: 0; overflow: hidden; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .025) 0 1px, transparent 1px 4px), linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 90%, #fff 6%), var(--inv-deep)); box-shadow: inset 0 0 60px rgb(0 0 0 / .45); }
.gh-scene-door::before { content: ''; position: absolute; inset: 22% 16% 6%; border: 1px solid color-mix(in srgb, var(--inv-accent) 70%, transparent); box-shadow: inset 0 0 0 4px transparent, inset 0 0 0 5px color-mix(in srgb, var(--inv-accent) 30%, transparent); }
.gh-scene-door::after { content: ''; position: absolute; top: 0; bottom: 0; width: 6px; background: var(--gh-brass-bg); box-shadow: 0 0 14px rgb(0 0 0 / .6); }
.gh-scene-door--left::before { right: 10%; } .gh-scene-door--right::before { left: 10%; }
.gh-scene-door--left::after { right: 0; } .gh-scene-door--right::after { left: 0; }
.gh-scene-door__crest { position: absolute; top: 50%; width: 76vw; max-width: 340px; aspect-ratio: 1; transform: translate(-50%, -50%); color: var(--inv-brass); opacity: .9; overflow: visible; }
.gh-scene-door--left .gh-scene-door__crest { left: 100%; } .gh-scene-door--right .gh-scene-door__crest { left: 0; }
.gh-scene-dial { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 10px 14px rgb(0 0 0 / .5)); }
.gh-scene-bracket { display: block; width: 100%; height: auto; overflow: visible; }
.gh-scene-bracket--tr { transform: scaleX(-1); }
.gh-scene-bracket--bl { transform: scaleY(-1); }
.gh-scene-bracket--br { transform: scale(-1); }
.gh-scene-desk { position: absolute; inset: 0; top: 40%; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), color-mix(in srgb, var(--inv-accent) 45%, transparent) calc(25% - 1px) 25%), var(--gh-velvet), var(--gh-wine-bg); border-top: 5px solid var(--inv-accent); box-shadow: 0 -10px 24px rgb(0 0 0 / .45); }
.gh-scene-desk__bell { position: absolute; left: 50%; bottom: 100%; width: min(22vw, 6rem); height: auto; margin: 0 0 -3px calc(min(22vw, 6rem) / -2); overflow: visible; }
/* the key box shares the dial's box: the key hangs from the right end of the dial's brass bar */
.gh-scene-key { position: relative; width: 100%; aspect-ratio: 200 / 112; }
.gh-scene-key > div { position: absolute; top: 97%; left: 87%; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); }
.gh-scene-key > div::before { content: ''; display: block; width: 2px; height: 1.1rem; background: var(--gh-brass-bg); }
.gh-scene-key .gh-roomkey { position: relative; top: auto; right: auto; margin-top: -2px; transform: scale(1.3); transform-origin: 50% 0; }

body.gh-body .inv-scene__card {
    top: 55%; -webkit-mask: radial-gradient(circle at 50% 0, transparent 0 22px, #000 22.5px); mask: radial-gradient(circle at 50% 0, transparent 0 22px, #000 22.5px);
    aspect-ratio: auto; padding: 2.4rem 1.3rem 1.8rem; border-radius: 4px;
    background: radial-gradient(120% 50% at 50% 0, rgb(255 255 255 / .55), transparent 70%), linear-gradient(180deg, var(--inv-paper), color-mix(in srgb, var(--inv-paper) 86%, var(--inv-accent)));
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: 0 30px 60px -12px rgb(0 0 0 / .7);
}
body.gh-body .inv-scene__card::before { content: ''; position: absolute; inset: 7px; border: 1px solid var(--gh-line); border-radius: 2px; box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 4px var(--gh-line-soft); pointer-events: none; }
body.gh-body .inv-scene__card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--inv-accent); opacity: .13; -webkit-mask: var(--gh-damask) 50% 0 / 220px 220px repeat; mask: var(--gh-damask) 50% 0 / 220px 220px repeat; pointer-events: none; }
body.gh-body .inv-scene__card .inv-intro__label { color: var(--gh-brass-text); font: 700 .62rem/1.4 var(--gh-label); letter-spacing: .28em; }
body.gh-body .inv-scene__card .inv-intro__names { font-family: var(--gh-display); font-style: italic; color: var(--inv-primary); }
body.gh-body .inv-scene__card .inv-intro__rule { background: linear-gradient(90deg, transparent, var(--inv-accent), transparent); }
body.gh-body .inv-scene__card .inv-intro__date { display: inline-block; justify-self: center; padding: .3rem .8rem; background: var(--inv-wine); color: var(--inv-paper); font: 600 .62rem/1.4 var(--gh-label); letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 0 0 2px var(--inv-paper), 0 0 0 3px var(--gh-line); }
body.gh-body .inv-intro--scene .inv-intro__skip { background: color-mix(in srgb, var(--inv-deep) 55%, transparent); color: var(--inv-brass); border-color: color-mix(in srgb, var(--inv-accent) 60%, transparent); }
.gh-scene-key .gh-roomkey__fob b { font-size: .78rem; letter-spacing: -.02em; }