/*
 * Grand Hotel: a five-star grand hotel. Bottle green, polished brass and ivory letterhead paper with an
 * embossed laurel crest. Signature forms: the keycard sleeve cover (the keycard slides out on opening),
 * room doors with brass name plates, reservation confirmations with a CONFIRMED stamp, a brass lift
 * floor indicator around the countdown, a reservation form, a leather guestbook and a concierge bell.
 * Sections: ivory (default tokens), the hallway with regency stripes (.gh-section--hall), paper
 * (.gh-section--paper) and deep green (.gh-section--green). Colors from the variant: --inv-primary,
 * --inv-accent, --inv-background, --inv-text, --inv-deep, --inv-paper, --inv-brass, --inv-stamp.
 * All classes start with "gh-".
 */

:root {
    --inv-primary: #1d4a3b;
    --inv-accent: #b38c4f;
    --inv-background: #efe8d9;
    --inv-text: #24342d;
    --inv-deep: #0e2a21;
    --inv-paper: #fbf7ee;
    --inv-brass: #e6cc93;
    --inv-stamp: #9b2f2a;
    --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;

    /* 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) 62%, var(--inv-text));
    --gh-green-bg: linear-gradient(180deg, var(--inv-primary), var(--inv-deep));

    /* context tokens: ivory by default, redefined for the green sections */
    --gh-fg: var(--inv-text);
    --gh-muted: color-mix(in srgb, var(--inv-text) 82%, transparent);
    --gh-title: var(--inv-primary);
    --gh-label-c: var(--gh-brass-text);
    --gh-line: color-mix(in srgb, var(--inv-accent) 65%, transparent);
    --gh-line-soft: color-mix(in srgb, var(--inv-accent) 30%, transparent);
    --gh-faint: color-mix(in srgb, var(--inv-accent) 11%, 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);
}

*, *::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 lattice: fine diagonal lines crossing */
.gh-section, .gh-hero, .gh-cover, .gh-backdrop {
    --gh-lattice:
        repeating-linear-gradient(45deg, transparent 0 25px, var(--gh-faint) 25px 26px),
        repeating-linear-gradient(-45deg, transparent 0 25px, var(--gh-faint) 25px 26px);
}

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

.gh-backdrop {
    --gh-faint: color-mix(in srgb, var(--inv-accent) 16%, transparent);
    position: fixed; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse at center, transparent 30%, rgb(0 0 0 / .45) 100%),
        var(--gh-lattice),
        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 ---------- */

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

.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-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-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) 25%, transparent), 0 26px 40px -26px rgb(0 0 0 / .55);
}
.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) 80%, 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); }

/* ---------- cover: the keycard sleeve ---------- */

.gh-cover {
    --gh-faint: color-mix(in srgb, var(--inv-accent) 12%, transparent);
    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:
        radial-gradient(70% 45% at 50% 40%, color-mix(in srgb, var(--inv-primary) 85%, #fff 8%), transparent 80%),
        var(--gh-lattice),
        linear-gradient(180deg, var(--inv-primary), var(--inv-deep));
}
/* a double brass frame around the screen */
.gh-cover__frame { position: absolute; inset: 12px; z-index: 0; pointer-events: none; border: 1px solid color-mix(in srgb, var(--inv-accent) 70%, transparent); }
.gh-cover__frame::before { content: ''; position: absolute; inset: 4px; border: 1px solid color-mix(in srgb, var(--inv-accent) 30%, transparent); }

.gh-cover__inner {
    position: relative; z-index: 1;
    width: 100%; margin: auto; padding: 2.4rem 1.5rem 2.6rem;
    display: flex; flex-direction: column; align-items: center; gap: .85rem;
    text-align: center;
}
.gh-cover__stars { font-size: .8rem; }

/* 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(86%, 318px); padding-top: 25%;
    filter: drop-shadow(0 22px 26px rgb(0 0 0 / .45));
}
.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) 70%, transparent), inset 0 0 0 5px transparent, 0 -2px 8px rgb(0 0 0 / .2);
    animation: gh-peek 3.2s ease-in-out 1.4s infinite;
}
.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: 9%; left: 50%; width: 34%; margin-left: -17%; color: var(--inv-brass); }
.gh-crest--card .gh-crest__letters { font-size: 1.05rem; }
.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 {
    position: relative; z-index: 1;
    padding: 2.3rem 1.3rem 1.4rem;
    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) 90%, var(--inv-accent)));
    /* the thumb notch where the keycard is pulled out */
    -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);
}
.gh-sleeve::before {
    content: ''; position: absolute; inset: 7px; pointer-events: none;
    border: 1px solid var(--gh-line); border-radius: 2px;
}
.gh-sleeve__title { font: 600 .62rem/1.4 var(--gh-label); letter-spacing: .3em; text-transform: uppercase; color: var(--gh-brass-text); }
.gh-sleeve__names {
    display: flex; flex-direction: column; align-items: center; margin-top: .35rem;
    font: italic 400 clamp(2.15rem, 10.5vw, 2.6rem)/1.08 var(--gh-display); color: var(--inv-primary);
    overflow-wrap: anywhere;
}
.gh-sleeve__amp { font: 500 .45em/1.5 var(--gh-label); font-style: normal; color: var(--inv-accent); }
.gh-sleeve__date {
    display: inline-block; margin-top: .8rem; padding: .35rem .7rem;
    border-top: 1px solid var(--gh-line); border-bottom: 1px solid var(--gh-line);
    font: 600 .64rem/1.4 var(--gh-label); letter-spacing: .16em; text-transform: uppercase; color: var(--inv-text);
}
.gh-sleeve__quote { margin-top: .75rem; font: italic 400 .86rem/1.5 var(--gh-display); color: var(--gh-muted); }
.gh-guest { margin-top: .95rem; padding-top: .8rem; 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: .2rem; font: 600 1.12rem/1.3 var(--gh-display); color: var(--inv-deep); overflow-wrap: anywhere; }

.gh-cover__eyebrow { margin-top: .5rem; font: 600 .6rem/1 var(--gh-label); letter-spacing: .4em; text-transform: uppercase; color: var(--inv-brass); }
.gh-cover__eyebrow::before, .gh-cover__eyebrow::after { content: '—'; margin: 0 .6em; opacity: .6; letter-spacing: 0; }
.gh-open.inv-button {
    margin-top: -.25rem;
    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); }
}

/* ---------- hero: the hotel entrance ---------- */

.gh-hero {
    --gh-faint: color-mix(in srgb, var(--inv-accent) 12%, transparent);
    position: relative; overflow: hidden;
    min-height: min(100vh, 880px); min-height: min(100svh, 880px); padding: 5rem 1.5rem 3.4rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; color: var(--inv-paper);
    background:
        radial-gradient(70% 45% at 50% 45%, color-mix(in srgb, var(--inv-primary) 80%, #fff 10%), transparent 80%),
        var(--gh-lattice),
        linear-gradient(180deg, var(--inv-primary), var(--inv-deep));
}
/* the striped awning with a scalloped valance and a brass edge */
.gh-awning { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 50px; filter: drop-shadow(0 2px 0 var(--inv-accent)) drop-shadow(0 8px 8px rgb(0 0 0 / .35)); }
.gh-awning::before {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgb(255 255 255 / .12), rgb(0 0 0 / .12)),
        repeating-linear-gradient(90deg, var(--inv-paper) 0 30px, color-mix(in srgb, var(--inv-primary) 85%, #fff 5%) 30px 60px);
    -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% 35px no-repeat, radial-gradient(circle at 50% 0, #000 14.5px, transparent 15px) 0 35px / 30px 15px repeat-x;
    mask: linear-gradient(#000 0 0) 0 0 / 100% 35px no-repeat, radial-gradient(circle at 50% 0, #000 14.5px, transparent 15px) 0 35px / 30px 15px repeat-x;
}
.gh-hero__inner { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.gh-hero__kicker { font: 600 .68rem/1.4 var(--gh-label); letter-spacing: .34em; text-transform: uppercase; color: var(--inv-brass); }

/* the brass arch around a photo */
.gh-arch {
    position: relative; width: min(62%, 245px); margin: .5rem auto .6rem; padding: 7px;
    border-radius: 50% 50% 4px 4px / 38% 38% 4px 4px;
    background: var(--gh-brass-bg);
    box-shadow: 0 0 0 4px var(--inv-deep), 0 0 0 5px color-mix(in srgb, var(--inv-accent) 70%, transparent), 0 30px 44px -24px rgb(0 0 0 / .7);
}
.gh-arch__photo {
    display: grid; place-items: center;
    aspect-ratio: 3 / 4; border-radius: 50% 50% 2px 2px / 37% 37% 2px 2px;
    background: var(--gh-photo, none) center 30% / cover no-repeat, linear-gradient(160deg, var(--inv-primary), var(--inv-deep));
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25);
}
.gh-crest--arch { width: 70%; 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.05 var(--gh-display); color: var(--inv-paper);
    overflow-wrap: anywhere;
}
.gh-hero__amp { font: 500 .42em/1.6 var(--gh-label); font-style: normal; color: var(--inv-brass); }
.gh-hero__date { display: flex; flex-direction: column; align-items: center; gap: .35rem; font: 600 .74rem/1.4 var(--gh-label); letter-spacing: .16em; text-transform: uppercase; color: var(--inv-paper); }
.gh-hero__date span { padding: .2rem .6rem; border: 1px solid color-mix(in srgb, var(--inv-accent) 70%, transparent); font-size: .56rem; letter-spacing: .3em; color: var(--inv-brass); }

.gh-scroll { position: absolute; left: 50%; bottom: 1.4rem; width: 1px; height: 2.6rem; 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); }

.gh-section {
    position: relative; overflow: hidden;
    padding: 4.4rem 1.35rem;
    text-align: center; color: var(--gh-fg);
    background: var(--gh-lattice), var(--inv-background);
}
/* a thin brass double rule where sections meet */
.gh-section::before {
    content: ''; position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 5px;
    border-top: 1px solid var(--gh-line); border-bottom: 1px solid var(--gh-line-soft);
}
.gh-section > * { position: relative; z-index: 1; }

/* the hallway: regency stripes and a dado rail */
.gh-section--hall {
    background:
        linear-gradient(180deg, transparent calc(100% - 7rem), color-mix(in srgb, var(--inv-primary) 9%, var(--inv-background)) calc(100% - 7rem)),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-primary) 5%, var(--inv-background)) 0 16px, var(--inv-background) 16px 34px, color-mix(in srgb, var(--inv-accent) 22%, var(--inv-background)) 34px 35px, var(--inv-background) 35px 36px);
}
.gh-section--paper { --gh-faint: transparent; background: linear-gradient(180deg, var(--inv-paper), color-mix(in srgb, var(--inv-paper) 85%, var(--inv-background))); }

/* deep green: ivory text, brass titles, brass buttons */
.gh-section--green {
    --gh-fg: var(--inv-paper);
    --gh-muted: color-mix(in srgb, var(--inv-paper) 86%, transparent);
    --gh-title: var(--inv-brass);
    --gh-label-c: color-mix(in srgb, var(--inv-brass) 85%, transparent);
    --gh-line: color-mix(in srgb, var(--inv-accent) 75%, transparent);
    --gh-line-soft: color-mix(in srgb, var(--inv-accent) 35%, transparent);
    --gh-faint: color-mix(in srgb, var(--inv-accent) 12%, transparent);
    --gh-btn-bg: var(--gh-brass-bg);
    --gh-btn-fg: var(--inv-deep);
    background:
        radial-gradient(80% 45% at 50% 30%, color-mix(in srgb, var(--inv-primary) 82%, #fff 8%), transparent 80%),
        var(--gh-lattice),
        var(--gh-green-bg);
}
.gh-section--green .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 { 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 green section keeps the ivory tokens */
.gh-section--green .gh-sheet {
    --gh-fg: var(--inv-text);
    --gh-muted: color-mix(in srgb, var(--inv-text) 82%, transparent);
    --gh-title: var(--inv-primary);
    --gh-line: color-mix(in srgb, var(--inv-accent) 65%, transparent);
    --gh-line-soft: color-mix(in srgb, var(--inv-accent) 30%, 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); }

.gh-heading { margin-bottom: 2rem; }
.gh-heading__label { font: 600 .66rem/1.4 var(--gh-label); letter-spacing: .32em; text-transform: uppercase; color: var(--gh-label-c); }
.gh-heading__title { margin-top: .3rem; font: 400 clamp(2rem, 9vw, 2.45rem)/1.15 var(--gh-display); color: var(--gh-title); }

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

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

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

.gh-quote {
    position: relative; max-width: 24rem; margin: 2.6rem auto 0; padding: 1.7rem 1.4rem 1.3rem;
    border: 1px solid var(--gh-line); outline: 1px solid var(--gh-line-soft); outline-offset: 4px;
}
.gh-quote__star { position: absolute !important; top: -.6rem; left: 50%; width: 1.2rem; height: 1.2rem; margin-left: -.6rem; padding: 0 .15rem; overflow: visible; color: var(--inv-accent); background: var(--inv-background); box-sizing: content-box; transform: translateX(-.15rem); }
.gh-quote blockquote { margin: 0; font: italic 400 1.02rem/1.7 var(--gh-display); color: var(--inv-text); }
.gh-quote figcaption { margin-top: .7rem; font: 600 .62rem/1.4 var(--gh-label); letter-spacing: .24em; text-transform: uppercase; color: var(--gh-brass-text); }

/* ---------- couple: room doors ---------- */

.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: 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-paper); color: var(--inv-primary);
    box-shadow: inset 0 0 0 1px var(--gh-line), 0 10px 16px -8px rgb(0 0 0 / .5);
    transform-origin: 50% .5rem; transform: rotate(7deg);
    animation: gh-swing 4.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(2deg); } }
.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(-2deg); } }
/* the threshold and a strip of 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, color-mix(in srgb, var(--inv-stamp) 75%, var(--inv-deep)), color-mix(in srgb, var(--inv-stamp) 50%, var(--inv-deep)));
    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-brass-bg); color: var(--inv-deep);
    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-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) 55%, 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 ---------- */

.gh-reservation { max-width: 25rem; margin: 0 auto; padding-bottom: 1.6rem; }
.gh-reservation + .gh-reservation { margin-top: 2.2rem; }
/* 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%, var(--inv-background) 0 3.5px, transparent 4px) 0 0 / 12px 7px repeat-x;
}
.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; }

.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 (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 var(--inv-paper), 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(--inv-deep); 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-brass-text); }
.gh-zig__date { font: italic 500 1.35rem/1.15 var(--gh-display); color: var(--inv-primary); 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 #fff; border-radius: 1px;
    box-shadow: 0 0 0 1px var(--gh-line), 0 14px 22px -12px rgb(0 0 0 / .55);
}

/* ---------- gallery: corridor art ---------- */

.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 6.5px var(--inv-accent), 0 18px 26px -16px 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 5s 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) 85%, 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 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-primary) 85%, #fff 8%), var(--inv-deep));
    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 ---------- */

.gh-closing { padding-bottom: 4.5rem; }
.gh-arch--closing { width: min(54%, 210px); margin: .3rem auto 2rem; }
.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: .2rem; font: italic 400 clamp(2.4rem, 11vw, 2.9rem)/1.2 var(--gh-display); color: var(--gh-fg); }
.gh-closing__message { max-width: 24rem; margin: .8rem auto 0; color: var(--gh-muted); font-size: .93rem; }
.gh-closing .gh-rule { margin-top: 1.4rem; }
.gh-closing__sign { margin-top: 1.2rem; font: 600 .62rem/1.4 var(--gh-label); letter-spacing: .26em; text-transform: uppercase; color: var(--gh-label-c); }
.gh-closing__names { margin-top: .3rem; font: italic 400 clamp(2rem, 9.5vw, 2.5rem)/1.25 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); }
.gh-crest--closing { width: 5.6rem; margin: 1.3rem auto 0; color: var(--inv-brass); }
.gh-crest--closing .gh-crest__letters { font-size: 1.4rem; }

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

.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) 85%, 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: var(--inv-text); font-family: var(--gh-sans); background: var(--inv-background); }

/* ---------- 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%; }
    }
}
@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); } }

/* ---------- 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 { 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 (stars → "Buka Undangan") on one phone screen ---------- */

.gh-cover__inner { min-height: 100vh; min-height: 100svh; margin: 0 auto; justify-content: center; }
.gh-sleeve__quote { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-height: 760px) {
    .gh-cover__inner { gap: .65rem; padding: 2.1rem 1.5rem 2.2rem; }
    .gh-sleeve { padding: 2.1rem 1.2rem 1.2rem; }
    .gh-sleeve__date { margin-top: .6rem; }
    .gh-sleeve__quote { -webkit-line-clamp: 6; margin-top: .55rem; }
    .gh-guest { margin-top: .75rem; padding-top: .65rem; }
}
@media (max-height: 660px) {
    .gh-cover__inner { gap: .5rem; padding: 1.9rem 1.4rem 1.9rem; }
    .gh-holder { width: min(82%, 300px); }
    .gh-sleeve { padding: 1.9rem 1.1rem 1rem; }
    .gh-sleeve__names { font-size: 2.15rem; }
    .gh-sleeve__quote { -webkit-line-clamp: 6; font-size: .84rem; line-height: 1.45; }
    .gh-guest { margin-top: .6rem; padding-top: .55rem; }
}

/* ---------- fit: the page ends close to the closing crest ---------- */

.gh-closing { padding-bottom: 1rem; }
.gh-crest--closing { width: 4rem; margin-top: .9rem; }
.gh-crest--closing .gh-crest__letters { font-size: 1.05rem; }