/*
 * Malam Gala: the wedding as a night at the opera. Velvet curtains (CSS folds), a gold proscenium,
 * stage spotlights and cream playbill paper. Ornaments: inline SVG symbols in sections/_defs (valance,
 * tassels, fleuron, stage star); folds, beams, bulbs, perforations and frames are CSS.
 * Sections alternate between velvet (.mg-section) and the dark stage (.mg-section--stage); cards are
 * playbill paper (.mg-paper). Colors from the variant: --inv-primary (velvet), --inv-accent (gold),
 * --inv-background (the dark house), --inv-text (cream), --inv-shade (deepest velvet), --inv-paper,
 * --inv-ink (text on paper). All classes start with "mg-".
 */

:root {
    --inv-primary: #7a1426;
    --inv-accent: #d0a650;
    --inv-background: #1a070b;
    --inv-text: #f4e6c8;
    --inv-shade: #2e050d;
    --inv-paper: #f6ecd6;
    --inv-ink: #3a1a14;
    --inv-radius: 10px;

    --mg-w: 460px;
    /* distance from the viewport edge to the column (0 on phones) */
    --mg-edge: max(0px, calc((100vw - var(--mg-w)) / 2));
    --mg-label-font: 'Cinzel', 'Trajan Pro', Georgia, serif;
    --mg-script: 'Pinyon Script', 'Great Vibes', 'Brush Script MT', cursive;
    --mg-serif: 'Cormorant Garamond', 'Garamond', Georgia, serif;
    --mg-didone: 'Bodoni Moda', 'Didot', 'Bodoni MT', Georgia, serif;
    --mg-mono: 'DM Mono', ui-monospace, Consolas, monospace;

    /* gold leaf as a background, gold you can read on dark and on paper */
    --mg-gold-bg: linear-gradient(115deg, color-mix(in srgb, var(--inv-accent) 55%, #fff) 0%, var(--inv-accent) 28%, color-mix(in srgb, var(--inv-accent) 68%, #3a2200) 52%, color-mix(in srgb, var(--inv-accent) 70%, #fff) 76%, var(--inv-accent) 100%);
    --mg-gold-light: color-mix(in srgb, var(--inv-accent) 78%, #fff);
    --mg-gold-ink: color-mix(in srgb, var(--inv-accent) 45%, var(--inv-ink));
    --mg-light: rgb(255 236 196);

    /* velvet: soft vertical folds over a deep gradient */
    --mg-folds: repeating-linear-gradient(90deg, rgb(0 0 0 / .18) 0, rgb(255 255 255 / .035) 26px, rgb(0 0 0 / .12) 48px, rgb(0 0 0 / .24) 62px);
    --mg-curtain-folds: repeating-linear-gradient(90deg,
        var(--inv-shade) 0,
        color-mix(in srgb, var(--inv-primary) 85%, var(--inv-shade)) 9px,
        color-mix(in srgb, var(--inv-primary) 80%, #fff) 18px,
        var(--inv-primary) 25px,
        color-mix(in srgb, var(--inv-primary) 55%, var(--inv-shade)) 33px,
        var(--inv-shade) 40px);

    /* context tokens: dark by default, redefined on paper */
    --mg-fg: var(--inv-text);
    --mg-muted: color-mix(in srgb, var(--inv-text) 82%, transparent);
    --mg-line: color-mix(in srgb, var(--inv-accent) 70%, transparent);
    --mg-line-soft: color-mix(in srgb, var(--inv-accent) 30%, transparent);
    --mg-btn-bg: var(--mg-gold-bg);
    --mg-btn-fg: var(--inv-ink);
    --mg-out-fg: var(--mg-gold-light);
    --mg-out-line: color-mix(in srgb, var(--inv-accent) 70%, transparent);
}

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

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

body.mg-body {
    margin: 0;
    background: var(--inv-background);
    color: var(--inv-text);
    font: 500 1.1rem/1.65 var(--mg-serif);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

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

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

.mg-backdrop {
    position: fixed; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse at center, rgb(0 0 0 / .25) 20%, rgb(0 0 0 / .72) 100%),
        linear-gradient(180deg, rgb(0 0 0 / .45), transparent 30%, rgb(0 0 0 / .5)),
        var(--mg-curtain-folds);
    background-size: auto, auto, 56px 100%;
}

.mg-page {
    position: relative; z-index: 1;
    width: min(100%, var(--mg-w)); min-height: 100vh; margin: 0 auto;
    background: var(--inv-background);
    overflow-x: clip;
    /* room for the floating menu under the last section */
    padding-bottom: 5.5rem;
}
/* the music player already leaves room for the menu */
.mg-page:has(> .inv-music__space) { padding-bottom: 0; }

@media (min-width: 520px) {
    .mg-page { box-shadow: 0 0 0 1px var(--mg-line), 0 0 0 6px var(--inv-shade), 0 0 0 7px var(--mg-line-soft), 0 30px 90px rgb(0 0 0 / .7); }
}
@media (max-width: 519px) {
    .mg-backdrop { display: none; }
}

.mg-preview {
    position: fixed; z-index: 60; top: 0; left: 0; right: 0;
    width: min(100%, var(--mg-w)); margin: 0 auto; padding: .35rem .75rem;
    background: var(--inv-accent); color: var(--inv-ink);
    font: 600 .66rem/1.3 var(--mg-label-font); text-align: center; letter-spacing: .06em;
}

/* ---------- small pieces: kicker, heading, fleuron, buttons, pills ---------- */

.mg-kicker {
    position: relative; z-index: 2;
    font: 600 .74rem/1.4 var(--mg-label-font); letter-spacing: .34em; text-transform: uppercase;
    color: var(--mg-gold-light);
}

.mg-fleuron { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: .7rem auto 0; color: var(--inv-accent); }
.mg-fleuron__scroll { width: 6.5rem; height: 1.3rem; overflow: visible; }
.mg-fleuron__star { width: .6rem; height: .6rem; overflow: visible; opacity: .8; }

.mg-heading { margin-bottom: 2rem; }
.mg-heading__label {
    font: 600 .7rem/1.4 var(--mg-label-font); letter-spacing: .34em; text-transform: uppercase;
    color: var(--mg-gold-light);
}
.mg-heading__title {
    margin-top: .1rem;
    font: 400 clamp(2.6rem, 12vw, 3.1rem)/1.25 var(--mg-script); color: var(--mg-fg);
    text-shadow: 0 2px 14px rgb(0 0 0 / .35);
}

.mg-lead { max-width: 24rem; margin: -.5rem auto 1.7rem; color: var(--mg-muted); }

.inv-button {
    gap: .5rem; padding: .85rem 1.5rem; border-radius: 3px;
    background: var(--mg-btn-bg); color: var(--mg-btn-fg);
    font: 700 .7rem/1.2 var(--mg-label-font); letter-spacing: .16em; text-transform: uppercase;
    box-shadow: 0 12px 22px -14px rgb(0 0 0 / .8), inset 0 1px 0 rgb(255 255 255 / .35), inset 0 0 0 1px rgb(60 30 0 / .35);
}
.inv-button--outline {
    background: transparent; color: var(--mg-out-fg);
    box-shadow: inset 0 0 0 1.5px var(--mg-out-line);
}
.inv-button--outline:hover { background: color-mix(in srgb, var(--mg-out-fg) 10%, transparent); }
.inv-button .mg-icon { width: 1.15rem; height: 1.15rem; }

.mg-pill {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: .9rem; padding: .48rem 1.05rem;
    border-radius: 999px; color: var(--mg-gold-light); text-decoration: none;
    box-shadow: inset 0 0 0 1px var(--mg-out-line);
    font: 600 .72rem/1 var(--mg-label-font); letter-spacing: .08em;
    transition: background .25s ease;
}
.mg-pill:hover { background: color-mix(in srgb, var(--inv-accent) 14%, transparent); }

/* ---------- playbill paper ---------- */

.mg-paper {
    --mg-fg: var(--inv-ink);
    --mg-muted: color-mix(in srgb, var(--inv-ink) 82%, transparent);
    --mg-btn-bg: linear-gradient(160deg, color-mix(in srgb, var(--inv-primary) 88%, #fff), var(--inv-primary) 55%, var(--inv-shade));
    --mg-btn-fg: var(--inv-paper);
    --mg-out-fg: var(--inv-primary);
    --mg-out-line: color-mix(in srgb, var(--inv-primary) 55%, transparent);
    position: relative;
    color: var(--inv-ink);
    border-radius: 3px;
    background:
        radial-gradient(ellipse at center, transparent 55%, color-mix(in srgb, var(--inv-paper) 80%, #8a6430) 120%),
        var(--inv-paper);
    box-shadow:
        inset 0 0 0 7px var(--inv-paper),
        inset 0 0 0 8px color-mix(in srgb, var(--inv-primary) 55%, transparent),
        inset 0 0 0 10px var(--inv-paper),
        inset 0 0 0 11px color-mix(in srgb, var(--inv-accent) 70%, transparent),
        0 30px 50px -28px rgb(0 0 0 / .9);
}

/* ---------- cover: the closed curtain ---------- */

.mg-cover {
    position: fixed; inset: 0; z-index: 30;
    width: min(100%, var(--mg-w)); margin: 0 auto;
    overflow-x: hidden; overflow-y: auto;
    color: var(--inv-text);
}
.mg-cover__frame { position: relative; min-height: 100%; display: flex; flex-direction: column; }
.mg-cover__house { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; }

.mg-curtain {
    position: absolute; z-index: 0; top: 0; bottom: 0; width: 51%;
    background:
        linear-gradient(180deg, rgb(0 0 0 / .55), transparent 24%, transparent 72%, rgb(0 0 0 / .5)),
        var(--mg-curtain-folds);
    transition: transform 1.05s cubic-bezier(.7, 0, .3, 1);
    will-change: transform;
}
.mg-curtain--left { left: 0; transform-origin: 0 50%; box-shadow: inset -16px 0 20px -8px rgb(0 0 0 / .7); }
.mg-curtain--right { right: 0; transform-origin: 100% 50%; box-shadow: inset 16px 0 20px -8px rgb(0 0 0 / .7); }
/* the gold fringe along the hem */
.mg-curtain::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 12px;
    background:
        linear-gradient(180deg, var(--inv-accent) 0 3px, transparent 3px),
        repeating-linear-gradient(90deg, var(--inv-accent) 0 1.5px, transparent 1.5px 3.5px);
    opacity: .9;
}

/* the spotlight on the curtain: a soft cone from above and a pool of light */
.mg-cover__spot { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity .4s ease; }
.mg-cover__spot::before {
    content: ''; position: absolute; left: 6%; right: 6%; top: 0; bottom: 6%;
    clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%);
    background: linear-gradient(180deg, rgb(255 236 196 / .2), rgb(255 236 196 / .05) 80%, transparent);
}
.mg-cover__spot::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(62% 36% at 50% 52%, rgb(255 228 170 / .2), transparent 72%);
}

.mg-valance { display: block; width: 100%; height: auto; aspect-ratio: 400 / 96; overflow: visible; }
.mg-cover__valance { position: absolute; z-index: 4; top: 0; left: 0; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .55)); }

.mg-cover__content {
    position: relative; z-index: 3;
    margin: auto 0; padding: calc(min(24vw, 112px) + 1.6rem) 1.6rem 2rem;
    display: flex; flex-direction: column; align-items: center; gap: .6rem;
    text-align: center;
    text-shadow: 0 2px 10px rgb(0 0 0 / .65);
    transition: opacity .35s ease;
}

/* the monogram in a gilded oval cartouche */
.mg-cartouche {
    display: flex; align-items: center; justify-content: center; gap: .35rem;
    width: 7.6rem; height: 5.4rem; margin: .3rem 0 .1rem; border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--inv-primary) 85%, #000), var(--inv-shade));
    box-shadow:
        inset 0 0 0 2px var(--inv-accent), inset 0 0 0 5px var(--inv-shade), inset 0 0 0 6px color-mix(in srgb, var(--inv-accent) 55%, transparent),
        0 0 0 3px var(--inv-shade), 0 0 0 4px var(--inv-accent), 0 14px 26px -10px rgb(0 0 0 / .8);
}
.mg-cartouche__letter { font: 600 1.85rem/1 var(--mg-label-font); color: var(--mg-gold-light); }
.mg-cartouche__star { width: .55rem; height: .55rem; color: var(--inv-accent); overflow: visible; }

.mg-cover__names {
    display: flex; flex-direction: column; align-items: center;
    font: 400 clamp(3.1rem, 15vw, 4rem)/1.08 var(--mg-script); color: var(--mg-gold-light);
}
.mg-cover__amp { font: italic 500 .42em/1.3 var(--mg-serif); color: var(--inv-text); }

.mg-cover__date {
    display: flex; align-items: center; gap: .7rem;
    font: 600 .72rem/1.4 var(--mg-label-font); letter-spacing: .2em; text-transform: uppercase; color: var(--inv-text);
}
.mg-cover__date::before, .mg-cover__date::after { content: ''; width: 1.6rem; height: 1px; background: var(--inv-accent); }

.mg-cover__quote { max-width: 20rem; font: italic 500 1.02rem/1.5 var(--mg-serif); color: var(--inv-text); }

/* the stage floor with the apron edge and footlights */
.mg-cover__stage {
    position: relative; z-index: 3;
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
    padding: 2rem 1.4rem 1.7rem;
    text-align: center;
    background:
        radial-gradient(30% 60% at 18% 0, rgb(255 214 140 / .2), transparent 75%),
        radial-gradient(34% 70% at 50% 0, rgb(255 214 140 / .26), transparent 75%),
        radial-gradient(30% 60% at 82% 0, rgb(255 214 140 / .2), transparent 75%),
        linear-gradient(180deg, transparent, rgb(0 0 0 / .6)),
        repeating-linear-gradient(90deg, rgb(0 0 0 / .3) 0 1px, transparent 1px 42px),
        linear-gradient(180deg, color-mix(in srgb, #6a4428 60%, var(--inv-shade)), color-mix(in srgb, #3a2414 50%, var(--inv-background)));
    box-shadow: 0 -10px 24px rgb(0 0 0 / .55);
    transition: transform .8s cubic-bezier(.6, 0, .4, 1) .1s, opacity .5s ease .25s;
}
.mg-cover__stage::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px;
    background: var(--mg-gold-bg); box-shadow: 0 2px 4px rgb(0 0 0 / .5);
}
.mg-cover__stage::after {
    content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 12px;
    background: radial-gradient(circle, #fff3d0 0 2px, rgb(255 222 150 / .55) 3px, transparent 6px) 21px 0 / 42px 12px repeat-x;
}

/* the guest card: a cream ticket with notched sides */
.mg-guest {
    position: relative; width: min(100%, 19rem); padding: .95rem 1.4rem 1rem;
    color: var(--inv-ink);
    background:
        repeating-linear-gradient(45deg, color-mix(in srgb, var(--inv-primary) 5%, transparent) 0 1px, transparent 1px 7px),
        var(--inv-paper);
    border-radius: 4px;
    box-shadow: inset 0 0 0 5px var(--inv-paper), inset 0 0 0 6px color-mix(in srgb, var(--inv-primary) 50%, transparent);
    -webkit-mask: radial-gradient(circle 9px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
    mask: radial-gradient(circle 9px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
}
.mg-guest__label { font: 700 .64rem/1.4 var(--mg-label-font); letter-spacing: .3em; text-transform: uppercase; color: var(--inv-primary); }
.mg-guest__name { margin-top: .25rem; font: 700 1.3rem/1.25 var(--mg-serif); color: var(--inv-ink); overflow-wrap: anywhere; }
.mg-guest__note { margin-top: .35rem; font: italic 500 .95rem/1.45 var(--mg-serif); color: color-mix(in srgb, var(--inv-ink) 82%, transparent); }

.mg-open { padding-inline: 1.8rem; }

/* short screens: the curtain writing tightens so the guest card and "Buka Tirai" stay above the fold */
@media (max-height: 760px) {
    .mg-cover__content { padding: calc(min(24vw, 112px) + .4rem) 1.6rem .8rem; gap: .35rem; }
    .mg-cartouche { width: 6.4rem; height: 4.5rem; margin: 0; }
    .mg-cartouche__letter { font-size: 1.55rem; }
    .mg-cover__names { font-size: clamp(2.6rem, 12.5vw, 3.2rem); line-height: 1.02; }
    .mg-cover__quote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; font-size: .94rem; line-height: 1.45; }
    .mg-cover__stage { gap: .65rem; padding: 1.3rem 1.4rem 1.75rem; }
    .mg-guest { padding: .75rem 1.3rem .8rem; }
    .mg-guest__name { margin-top: .15rem; font-size: 1.18rem; }
    .mg-guest__note { margin-top: .2rem; font-size: .86rem; line-height: 1.4; }
}
@media (max-height: 660px) {
    .mg-cover__content { padding-top: calc(min(24vw, 112px) + .1rem); padding-bottom: .6rem; gap: .25rem; }
    .mg-cartouche { width: 5.6rem; height: 3.9rem; }
    .mg-cartouche__letter { font-size: 1.35rem; }
    .mg-cover__names { font-size: clamp(2.2rem, 10.5vw, 2.6rem); line-height: 1; }
    .mg-cover__quote { font-size: .86rem; }
    .mg-cover__stage { gap: .55rem; padding: 1.1rem 1.2rem 1.75rem; }
    .mg-guest { padding: .6rem 1.2rem .65rem; }
    .mg-guest__name { font-size: 1.08rem; }
    .mg-guest__note { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; font-size: .8rem; }
}

/* opening: the writing fades, the curtains gather to the sides, the floor sinks, then the cover fades */
html.inv-opened .mg-cover__content,
html.inv-opened .mg-cover__spot { opacity: 0; }
html.inv-opened .mg-curtain { transform: scaleX(.14); }
html.inv-opened .mg-cover__stage { transform: translateY(105%); opacity: 0; }
.mg-cover--leave { transition: opacity .45s ease .75s; }
.mg-cover--gone { opacity: 0; }

/* ---------- hero: the stage behind the curtain ---------- */

.mg-hero {
    position: relative; overflow: hidden;
    min-height: min(100vh, 900px); min-height: min(100svh, 900px); padding: 3.2rem 1.4rem 3rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    background:
        radial-gradient(70% 45% at 50% 40%, color-mix(in srgb, var(--inv-primary) 40%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-background), color-mix(in srgb, var(--inv-background) 80%, var(--inv-primary)));
}

/* two spotlight beams from the upper corners, sweeping slowly */
.mg-beam {
    position: absolute; z-index: 1; top: -12%; width: 64%; height: 100%;
    background: linear-gradient(180deg, rgb(255 236 196 / .2), rgb(255 236 196 / .03) 85%, transparent);
    clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
    transform-origin: 50% 0;
    pointer-events: none;
    animation: mg-sweep 9s ease-in-out infinite alternate;
    will-change: transform;
}
.mg-beam--left { left: -20%; --mg-from: -28deg; --mg-to: -16deg; transform: rotate(-22deg); }
.mg-beam--right { right: -20%; --mg-from: 28deg; --mg-to: 16deg; transform: rotate(22deg); animation-delay: -4.5s; }
@keyframes mg-sweep {
    from { transform: rotate(var(--mg-from)); }
    to { transform: rotate(var(--mg-to)); }
}

/* the proscenium: gold arch, the photo as the lit stage, valance, drapes tied back, apron */
.mg-proscenium { position: relative; z-index: 2; width: min(84%, 330px); margin: 1rem auto 1.3rem; }
.mg-proscenium__arch {
    position: relative; padding: 9px;
    border-radius: 50% 50% 6px 6px / 24% 24% 6px 6px;
    background: var(--mg-gold-bg);
    box-shadow: 0 0 0 1px rgb(60 30 0 / .6), 0 0 0 5px var(--inv-shade), 0 0 0 6px var(--mg-line), 0 34px 50px -22px rgb(0 0 0 / .9);
}
.mg-proscenium__arch::before {
    content: ''; position: absolute; inset: 3px; z-index: 2; pointer-events: none;
    border-radius: inherit; border: 1.5px dotted color-mix(in srgb, var(--inv-accent) 50%, #3a2200);
}
.mg-proscenium__stage {
    position: relative; overflow: hidden; display: grid; place-items: center;
    aspect-ratio: 4 / 5;
    border-radius: 50% 50% 2px 2px / 22% 22% 2px 2px;
    background:
        var(--mg-photo, none) center 30% / cover no-repeat,
        radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--inv-primary) 70%, #000), var(--inv-shade));
    box-shadow: inset 0 0 0 2px var(--inv-shade), inset 0 -60px 60px -30px rgb(0 0 0 / .55);
}
.mg-proscenium__mono { display: flex; gap: .4rem; font: 400 4.2rem/1 var(--mg-script); color: var(--mg-gold-light); }
.mg-proscenium__glow {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(48% 34% at 50% 58%, rgb(255 236 196 / .16), transparent 70%);
}
.mg-proscenium .mg-valance { position: absolute; top: 0; left: 0; filter: drop-shadow(0 5px 6px rgb(0 0 0 / .5)); }

.mg-drape {
    position: absolute; top: 9%; bottom: 0; width: 25%;
    background:
        linear-gradient(180deg, rgb(0 0 0 / .4), transparent 30%, transparent 80%, rgb(0 0 0 / .35)),
        var(--mg-curtain-folds);
    background-size: auto, 28px 100%;
    filter: drop-shadow(3px 0 5px rgb(0 0 0 / .55));
}
.mg-drape--left { left: 0; clip-path: polygon(0 0, 100% 0, 88% 14%, 58% 38%, 30% 55%, 46% 70%, 72% 100%, 0 100%); }
.mg-drape--right { right: 0; clip-path: polygon(100% 0, 0 0, 12% 14%, 42% 38%, 70% 55%, 54% 70%, 28% 100%, 100% 100%); }
.mg-tieback { position: absolute; z-index: 1; top: 52%; width: 7%; aspect-ratio: 16 / 40; overflow: visible; filter: drop-shadow(0 3px 3px rgb(0 0 0 / .5)); }
.mg-tieback--left { left: 3.5%; }
.mg-tieback--right { right: 3.5%; }

.mg-proscenium__apron {
    position: relative; display: block; height: 14px; margin: -3px -7% 0;
    border-radius: 2px; background: var(--mg-gold-bg);
    box-shadow: 0 10px 18px -8px rgb(0 0 0 / .8);
}
.mg-proscenium__apron::after {
    content: ''; position: absolute; left: 4%; right: 4%; top: 100%; height: 22px;
    background: radial-gradient(circle at 50% 0, rgb(255 236 196 / .5) 0 2px, rgb(255 222 150 / .18) 4px, transparent 11px) 0 0 / 30px 22px repeat-x;
}

.mg-hero__names {
    position: relative; z-index: 2; margin-top: 1rem;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 .5rem;
    font: 400 clamp(2.8rem, 13vw, 3.6rem)/1.2 var(--mg-script); color: var(--mg-gold-light);
    text-shadow: 0 3px 16px rgb(0 0 0 / .6);
}
.mg-hero__amp { font: italic 500 .42em/1 var(--mg-serif); color: var(--inv-text); }
.mg-hero__date {
    position: relative; z-index: 2; margin-top: .3rem;
    font: 600 .72rem/1.4 var(--mg-label-font); letter-spacing: .22em; text-transform: uppercase; color: var(--mg-muted);
}

.mg-scroll { position: relative; z-index: 2; width: 1px; height: 3rem; margin-top: 1.6rem; background: var(--mg-line-soft); overflow: hidden; }
.mg-scroll span { position: absolute; left: 0; top: -1rem; width: 1px; height: 1rem; background: var(--inv-accent); animation: mg-drip 2.2s ease-in-out infinite; }
@keyframes mg-drip { to { transform: translateY(4rem); } }

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

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

/* velvet */
.mg-section {
    position: relative; overflow: hidden;
    padding: 4.4rem 1.4rem;
    text-align: center; color: var(--mg-fg);
    background:
        radial-gradient(90% 40% at 50% 0, rgb(255 236 196 / .07), transparent 75%),
        var(--mg-folds),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 82%, var(--inv-shade)), color-mix(in srgb, var(--inv-primary) 35%, var(--inv-shade)));
    border-top: 1px solid color-mix(in srgb, var(--inv-accent) 25%, transparent);
}
/* the dark stage under a spotlight */
.mg-section--stage {
    background:
        radial-gradient(60% 34% at 50% 0, rgb(255 236 196 / .11), transparent 75%),
        linear-gradient(180deg, var(--inv-background), color-mix(in srgb, var(--inv-background) 82%, var(--inv-primary)));
}
.mg-section > * { position: relative; z-index: 1; }

/* opening */
.mg-arabic { font: 400 1.8rem/1.8 'Amiri', serif; color: var(--mg-gold-light); margin-bottom: .8rem; }
.mg-opening__greeting { margin-top: .5rem; font: 600 1.35rem/1.4 var(--mg-serif); color: var(--inv-text); }
.mg-opening__message { max-width: 24rem; margin: 1.1rem auto 0; color: var(--mg-muted); }
.mg-quote { max-width: 24rem; margin: 2.6rem auto 0; padding: 2rem 1.6rem 1.6rem; }
.mg-quote__star { position: absolute !important; left: 50%; top: -.8rem; width: 1.6rem; height: 1.6rem; margin-left: -.8rem; color: var(--inv-accent); overflow: visible; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .4)); }
.mg-quote blockquote { margin: 0; font: italic 500 1.12rem/1.65 var(--mg-serif); color: var(--inv-ink); }
.mg-quote figcaption { margin-top: .8rem; font: 700 .66rem/1.4 var(--mg-label-font); letter-spacing: .22em; text-transform: uppercase; color: var(--inv-primary); }

/* ---------- couple: "Pemeran Utama" ---------- */

.mg-couple .mg-lead { margin-bottom: 3rem; }
.mg-star-role { display: flex; flex-direction: column; align-items: center; }
/* the spotlight cone falling on the frame */
.mg-cone {
    position: absolute; z-index: 0; top: -3rem; left: 50%; width: 118%; max-width: 27rem; height: 24rem;
    transform: translateX(-50%);
    clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
    background: linear-gradient(180deg, rgb(255 236 196 / .2), rgb(255 236 196 / .06) 70%, transparent);
    pointer-events: none;
}
.mg-star-role > :not(.mg-cone) { position: relative; z-index: 1; }

/* the gilded oval frame with a beaded inner edge and a star crest */
.mg-gilt {
    width: min(56%, 205px); aspect-ratio: 4 / 5; padding: 9px; border-radius: 50%;
    background: var(--mg-gold-bg);
    box-shadow: inset 0 0 0 1px rgb(60 30 0 / .55), 0 0 0 1px rgb(60 30 0 / .6), 0 0 0 5px color-mix(in srgb, var(--inv-shade) 80%, transparent), 0 0 0 6px var(--mg-line-soft), 0 26px 40px -16px rgb(0 0 0 / .9);
}
.mg-gilt::before {
    content: ''; position: absolute; inset: 3px; z-index: 2; pointer-events: none;
    border-radius: 50%; border: 2px dotted color-mix(in srgb, var(--inv-accent) 50%, #3a2200);
}
.mg-gilt::after {
    content: ''; position: absolute; top: -15px; left: 50%; width: 30px; height: 26px; transform: translateX(-50%);
    background: var(--mg-gold-bg);
    clip-path: polygon(50% 0, 61% 32%, 100% 36%, 70% 60%, 80% 100%, 50% 80%, 20% 100%, 30% 60%, 0 36%, 39% 32%);
    filter: drop-shadow(0 2px 2px rgb(0 0 0 / .5));
}
.mg-gilt__photo {
    display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
    box-shadow: 0 0 0 2px var(--inv-shade);
}
.mg-gilt__photo--empty {
    display: grid; place-items: center;
    background: radial-gradient(circle, color-mix(in srgb, var(--inv-primary) 80%, #000), var(--inv-shade));
    font: 400 4.6rem/1 var(--mg-script); color: var(--mg-gold-light);
}
/* the brass name plate under the frame */
.mg-plate {
    margin-top: -.9rem; padding: .32rem 1.3rem;
    background: var(--mg-gold-bg); color: var(--inv-ink);
    font: 700 .6rem/1.3 var(--mg-label-font); letter-spacing: .24em; text-transform: uppercase;
    clip-path: polygon(7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%, 0 50%);
}
.mg-star-role__nick { margin-top: .7rem; font: 400 3.1rem/1.15 var(--mg-script); color: var(--mg-gold-light); text-shadow: 0 2px 12px rgb(0 0 0 / .5); }
.mg-star-role__name { font: 600 1.05rem/1.45 var(--mg-label-font); letter-spacing: .05em; color: var(--inv-text); overflow-wrap: anywhere; }
.mg-star-role__parents { margin-top: .5rem; font-size: 1.05rem; color: var(--mg-muted); }
.mg-star-role__parents strong { color: var(--inv-text); font-weight: 600; }

.mg-amp { display: flex; align-items: center; justify-content: center; gap: .9rem; margin: 2.4rem 0 3.2rem; }
.mg-amp::before, .mg-amp::after { content: ''; width: 4rem; height: 1px; background: linear-gradient(90deg, transparent, var(--inv-accent)); }
.mg-amp::after { transform: scaleX(-1); }
.mg-amp span { font: 400 3.4rem/1 var(--mg-script); color: var(--mg-gold-light); }

/* ---------- countdown: the "ADMIT TWO" ticket ---------- */

.mg-ticket {
    --mg-btn-bg: linear-gradient(160deg, color-mix(in srgb, var(--inv-primary) 88%, #fff), var(--inv-primary) 55%, var(--inv-shade));
    --mg-btn-fg: var(--inv-paper);
    --mg-out-fg: var(--inv-primary);
    --mg-out-line: color-mix(in srgb, var(--inv-primary) 55%, transparent);
    max-width: 22rem; margin: 0 auto;
    color: var(--inv-ink);
    filter: drop-shadow(0 24px 22px rgb(0 0 0 / .55));
}
.mg-ticket__main, .mg-ticket__stub {
    position: relative;
    background:
        repeating-linear-gradient(45deg, color-mix(in srgb, var(--inv-primary) 5%, transparent) 0 1px, transparent 1px 8px),
        var(--inv-paper);
}
.mg-ticket__main {
    padding: 1.5rem 1.3rem 1.3rem; border-radius: 10px 10px 0 0;
    -webkit-mask: radial-gradient(circle 13px at 0 100%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 13px at 100% 100%, transparent 97%, #000) right / 51% 100% no-repeat;
    mask: radial-gradient(circle 13px at 0 100%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 13px at 100% 100%, transparent 97%, #000) right / 51% 100% no-repeat;
}
/* an engraved inner border on the main part */
.mg-ticket__main::before {
    content: ''; position: absolute; inset: 8px 8px 0; pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--inv-primary) 45%, transparent); border-bottom: 0; border-radius: 5px 5px 0 0;
}
.mg-ticket__stub {
    padding: 1.4rem 1rem 1.3rem; border-radius: 0 0 10px 10px;
    -webkit-mask: radial-gradient(circle 13px at 0 0, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 13px at 100% 0, transparent 97%, #000) right / 51% 100% no-repeat;
    mask: radial-gradient(circle 13px at 0 0, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 13px at 100% 0, transparent 97%, #000) right / 51% 100% no-repeat;
}
/* the perforation */
.mg-ticket__stub::before {
    content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 2px;
    background: radial-gradient(circle, color-mix(in srgb, var(--inv-ink) 50%, transparent) 0 1.4px, transparent 1.8px) 0 50% / 8px 2px repeat-x;
}
.mg-ticket__admit {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    font: 700 1.45rem/1.2 var(--mg-label-font); letter-spacing: .24em; text-transform: uppercase; color: var(--inv-primary);
}
.mg-ticket__admit::before, .mg-ticket__admit::after { content: ''; width: 1.2rem; height: 2px; background: currentColor; }
.mg-ticket__show { margin-top: .2rem; font: 600 .62rem/1.4 var(--mg-label-font); letter-spacing: .24em; text-transform: uppercase; color: var(--mg-gold-ink); }
.mg-ticket__names { margin-top: .4rem; font: 400 2.4rem/1.2 var(--mg-script); color: var(--inv-primary); overflow-wrap: anywhere; }
.mg-ticket__date { display: inline-flex; align-items: center; gap: .45rem; margin-top: .3rem; font: 700 1.02rem/1.4 var(--mg-serif); }
.mg-ticket__date .mg-icon { color: var(--inv-primary); }
.mg-ticket__seat {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1rem;
    border-block: 1px solid color-mix(in srgb, var(--inv-ink) 35%, transparent);
    font: 600 .56rem/1.3 var(--mg-label-font); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-ink) 80%, transparent);
}
.mg-ticket__seat span { display: flex; flex-direction: column; gap: .15rem; padding: .45rem .2rem; }
.mg-ticket__seat span + span { border-left: 1px solid color-mix(in srgb, var(--inv-ink) 25%, transparent); }
.mg-ticket__seat b { font: 700 .95rem/1 var(--mg-didone); letter-spacing: .02em; color: var(--inv-ink); }

.inv-countdown { gap: 0; }
.inv-countdown__item { flex: 1; min-width: 0; padding: .2rem .1rem; border-radius: 0; background: none; box-shadow: none; }
.inv-countdown__item + .inv-countdown__item { border-left: 1px dashed color-mix(in srgb, var(--inv-ink) 30%, transparent); }
.inv-countdown__value { font: 700 2.05rem/1.1 var(--mg-didone); color: var(--inv-primary); }
.inv-countdown__label { margin-top: .25rem; font: 700 .56rem/1.2 var(--mg-label-font); letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-ink) 80%, transparent); }
.inv-countdown__done { font-style: italic; color: var(--inv-ink); }
.inv-countdown__actions { margin-top: 1.2rem; }
.inv-countdown__actions .inv-button { padding: .65rem .8rem; font-size: .56rem; letter-spacing: .08em; }

/* ---------- events: the playbill ---------- */

.mg-bill { max-width: 25rem; margin: 0 auto; padding: 2.1rem 1.5rem 2.1rem; text-align: left; }
.mg-bill__head { text-align: center; }
.mg-bill__title { font: 700 1.35rem/1.2 var(--mg-label-font); letter-spacing: .3em; text-transform: uppercase; color: var(--inv-primary); }
.mg-bill__sub { margin-top: .3rem; font: 600 .62rem/1.4 var(--mg-label-font); letter-spacing: .2em; text-transform: uppercase; color: var(--mg-gold-ink); }
.mg-bill__rule { display: block; height: 5px; margin: .9rem 0 1.4rem; border-block: 1px solid var(--inv-primary); }

.mg-act__no {
    display: flex; align-items: center; gap: .55rem;
    font: 700 .7rem/1.4 var(--mg-label-font); letter-spacing: .28em; text-transform: uppercase; color: var(--inv-primary);
}
.mg-act__no::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--inv-primary) 35%, transparent); }
.mg-act__photo {
    margin: .6rem 0 .8rem; aspect-ratio: 16 / 8; border-radius: 2px;
    background: var(--mg-photo) center 35% / cover no-repeat;
    box-shadow: 0 0 0 3px var(--inv-paper), 0 0 0 4px color-mix(in srgb, var(--inv-ink) 35%, transparent);
    filter: sepia(.12) saturate(.95);
}
.mg-act__line { display: flex; align-items: baseline; gap: .4rem; margin-top: .3rem; }
.mg-act__name { min-width: 0; font: 700 1.5rem/1.2 var(--mg-serif); color: var(--inv-ink); overflow-wrap: anywhere; }
.mg-act__dots { flex: 1; min-width: 1.2rem; border-bottom: 2px dotted color-mix(in srgb, var(--inv-ink) 45%, transparent); transform: translateY(-.3em); }
.mg-act__at { flex: none; font: 700 1.15rem/1 var(--mg-didone); color: var(--inv-primary); }
.mg-act__row { display: flex; align-items: flex-start; gap: .5rem; margin-top: .35rem; font: 600 1.02rem/1.45 var(--mg-serif); overflow-wrap: anywhere; }
.mg-act__row .mg-icon { margin-top: .18rem; color: var(--mg-gold-ink); }
.mg-act__time { color: var(--inv-primary); }
.mg-act__time .mg-icon { color: var(--inv-primary); }
.mg-act__venue { margin-top: .7rem; font: 700 1.12rem/1.35 var(--mg-serif); }
.mg-act__address { padding-left: 1.6rem; font: 500 .98rem/1.55 var(--mg-serif); color: color-mix(in srgb, var(--inv-ink) 82%, transparent); overflow-wrap: anywhere; }
.mg-act__dress { font-style: italic; }
.mg-act__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: 1.1rem; }
.mg-act__actions .inv-button { padding: .72rem .4rem; font-size: .56rem; letter-spacing: .08em; text-decoration: none; }

.mg-bill__sep { display: flex; align-items: center; gap: .7rem; margin: 1.8rem 0 1.5rem; color: var(--inv-accent); }
.mg-bill__sep::before, .mg-bill__sep::after { content: ''; flex: 1; border-top: 1.5px dashed color-mix(in srgb, var(--inv-ink) 40%, transparent); }
.mg-bill__sep svg { width: 1.1rem; height: 1.1rem; overflow: visible; }

/* ---------- love story: "Sinopsis" zig-zag (R1) ----------
   Default: text left (aligned right, toward the line), meta right. .is-flip swaps the sides. */

.mg-story { padding-left: 1rem; padding-right: 1rem; }
.mg-zig { position: relative; margin: 0; padding: 0; list-style: none; }
.mg-zig::before {
    content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, var(--inv-accent) 6%, var(--inv-accent) 94%, transparent);
}
.mg-zig__item {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1fr) 1.6rem minmax(0, 1fr); column-gap: .6rem; align-items: start;
    grid-template-areas: "text dot meta";
}
.mg-zig__item + .mg-zig__item { margin-top: 2.6rem; }
.mg-zig__item.is-flip { grid-template-areas: "meta dot text"; }
.mg-zig__dot {
    grid-area: dot; justify-self: center; display: grid; place-items: center;
    width: 1.6rem; height: 1.6rem; border-radius: 50%;
    background: var(--inv-background); color: var(--mg-gold-light);
    box-shadow: inset 0 0 0 1px var(--inv-accent), 0 0 14px rgb(255 226 160 / .35);
}
.mg-zig__dot svg { width: .9rem; height: .9rem; overflow: visible; }
.mg-zig__text { grid-area: text; min-width: 0; text-align: right; }
.is-flip .mg-zig__text { text-align: left; }
.mg-zig__scene { font: 700 .6rem/1.4 var(--mg-label-font); letter-spacing: .24em; text-transform: uppercase; color: var(--mg-gold-light); }
.mg-zig__title { margin-top: .15rem; font: 700 1.2rem/1.25 var(--mg-serif); color: var(--inv-text); overflow-wrap: anywhere; }
.mg-zig__rule { display: block; width: 70%; margin: .45rem 0 .55rem auto; border-top: 2px dotted var(--mg-line); }
.is-flip .mg-zig__rule { margin-left: 0; margin-right: auto; }
.mg-zig__story { font-size: .98rem; line-height: 1.55; color: var(--mg-muted); overflow-wrap: anywhere; }
.mg-zig__meta { grid-area: meta; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; text-align: left; }
.is-flip .mg-zig__meta { align-items: flex-end; text-align: right; }
.mg-zig__date { font: italic 600 1.35rem/1.15 var(--mg-serif); color: var(--mg-gold-light); overflow-wrap: anywhere; }

/* a small stage frame: gold arch, scalloped valance, side drapes */
.mg-mini {
    position: relative; width: min(7.2rem, 100%); padding: 4px;
    border-radius: 50% 50% 3px 3px / 22% 22% 3px 3px;
    background: var(--mg-gold-bg);
    box-shadow: 0 0 0 1px rgb(60 30 0 / .5), 0 16px 24px -14px rgb(0 0 0 / .9);
}
.mg-mini__photo {
    display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
    border-radius: 50% 50% 1px 1px / 21% 21% 1px 1px;
}
.mg-mini__roman {
    display: grid; place-items: center;
    background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--inv-primary) 75%, #000), var(--inv-shade));
    font: 600 1.6rem/1 var(--mg-label-font); color: var(--mg-gold-light);
}
.mg-mini::before {
    content: ''; position: absolute; inset: 4px; z-index: 1; pointer-events: none;
    border-radius: 50% 50% 1px 1px / 21% 21% 1px 1px;
    background:
        repeating-linear-gradient(90deg, var(--inv-primary) 0 3px, var(--inv-shade) 3px 6px) left / 13% 100% no-repeat,
        repeating-linear-gradient(90deg, var(--inv-shade) 0 3px, var(--inv-primary) 3px 6px) right / 13% 100% no-repeat;
}
.mg-mini__valance {
    position: absolute; z-index: 2; top: 4px; left: 4px; right: 4px; height: 17%;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    background:
        radial-gradient(circle at 50% 0, var(--inv-primary) 0 58%, var(--inv-accent) 60% 68%, transparent 70%) 0 100% / 25% 70% repeat-x,
        linear-gradient(180deg, var(--inv-shade) 0 40%, transparent 40%);
}

/* ---------- gallery ---------- */

.inv-gallery { gap: .7rem; }
.inv-gallery__item {
    border-radius: 3px;
    box-shadow: 0 0 0 2px var(--inv-accent), 0 0 0 5px var(--inv-shade), 0 0 0 6px var(--mg-line-soft), 0 18px 28px -18px rgb(0 0 0 / .9);
}
.mg-gallery .inv-gallery { gap: .95rem; padding: .4rem; }
.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; }
.mg-gallery .inv-gallery__item:first-child { border-radius: 999px 999px 3px 3px / 120px 120px 3px 3px; }
.inv-gallery__play { background: color-mix(in srgb, var(--inv-shade) 70%, transparent); color: #fff; }

/* ---------- live streaming: the marquee board ---------- */

.mg-marquee {
    max-width: 22rem; margin: 0 auto; padding: 13px; border-radius: 10px;
    background:
        radial-gradient(circle, #fff6d8 0 2.4px, rgb(255 226 160 / .6) 3.4px, transparent 5.5px) 0 0 / 17px 17px space,
        var(--mg-gold-bg);
    box-shadow: 0 0 30px rgb(255 214 140 / .18), 0 24px 40px -20px rgb(0 0 0 / .9);
}
.mg-marquee__board {
    padding: 1.6rem 1.3rem 1.6rem; border-radius: 4px;
    background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--inv-primary) 55%, var(--inv-shade)), var(--inv-shade));
    box-shadow: inset 0 0 0 1px rgb(60 30 0 / .6), inset 0 0 0 4px var(--inv-shade), inset 0 0 0 5px var(--mg-line);
}
.mg-live__badge {
    display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .8rem;
    border-radius: 2px; background: var(--mg-gold-bg); color: var(--inv-ink);
    font: 700 .64rem/1 var(--mg-label-font); letter-spacing: .22em; text-transform: uppercase;
}
.mg-live__badge span { width: .45rem; height: .45rem; border-radius: 50%; background: #c0182c; animation: mg-blink 1.4s ease-in-out infinite; }
@keyframes mg-blink { 50% { opacity: .25; } }
.mg-live__text { margin: 1rem 0 .5rem; color: var(--inv-text); }
.mg-live__note { margin-bottom: 1rem; font: 700 1.05rem/1.5 var(--mg-serif); color: var(--mg-gold-light); }
.mg-marquee .inv-button { margin-top: .6rem; }

/* ---------- gift: the Box Office ---------- */

.mg-boxoffice { max-width: 24rem; margin: 0 auto; }
.mg-boxoffice__sign {
    position: relative; z-index: 2; width: 84%; margin: 0 auto -1.3rem; padding: 12px;
    border-radius: 6px;
    background:
        radial-gradient(circle, #fff6d8 0 2.2px, rgb(255 226 160 / .6) 3.2px, transparent 5px) 0 0 / 15px 15px space,
        var(--mg-gold-bg);
    box-shadow: 0 0 28px rgb(255 214 140 / .22), 0 16px 26px -12px rgb(0 0 0 / .85);
}
.mg-boxoffice__sign > * { position: relative; }
.mg-boxoffice__sign::before {
    content: ''; position: absolute; inset: 12px; border-radius: 2px;
    background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--inv-primary) 60%, var(--inv-shade)), var(--inv-shade));
    box-shadow: inset 0 0 0 1px var(--mg-line);
}
.mg-boxoffice__small { padding-top: .7rem; font: 600 .6rem/1.4 var(--mg-label-font); letter-spacing: .3em; text-transform: uppercase; color: var(--inv-text); }
.mg-boxoffice__title {
    padding-bottom: .7rem;
    font: 700 1.75rem/1.2 var(--mg-label-font); letter-spacing: .14em; text-transform: uppercase;
    color: var(--mg-gold-light);
    text-shadow: 0 0 14px rgb(255 214 140 / .45);
}
/* the arched ticket window */
.mg-boxoffice__window {
    padding: 2.8rem .9rem 1.4rem;
    border-radius: 160px 160px 0 0 / 70px 70px 0 0;
    background:
        radial-gradient(80% 40% at 50% 0, rgb(255 236 196 / .1), transparent 75%),
        linear-gradient(180deg, var(--inv-background), color-mix(in srgb, var(--inv-background) 80%, var(--inv-primary)));
    box-shadow: inset 0 0 0 2px var(--inv-accent), inset 0 0 0 6px var(--inv-shade), inset 0 0 0 7px var(--mg-line-soft);
}
.mg-boxoffice__window .mg-lead { margin: 0 auto 1.3rem; font-size: 1.02rem; }
.mg-boxoffice__counter {
    position: relative; display: block; height: 16px; margin: 0 -.5rem;
    border-radius: 2px; background: var(--mg-gold-bg);
    box-shadow: 0 12px 16px -8px rgb(0 0 0 / .85);
}

.inv-gift { display: grid; gap: .8rem; max-width: 22rem; 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; }
/* season-pass cards: velvet with a gold edge and chip */
.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: .8rem .8rem .9rem;
    border-radius: 16px; text-align: left; color: var(--inv-text);
    background:
        linear-gradient(118deg, transparent 22%, rgb(255 255 255 / .1) 36%, transparent 50%),
        repeating-linear-gradient(90deg, rgb(0 0 0 / .14) 0, rgb(255 255 255 / .03) 9px, rgb(0 0 0 / .14) 18px),
        linear-gradient(150deg, color-mix(in srgb, var(--inv-primary) 90%, #fff 10%), var(--inv-shade) 85%);
    box-shadow: 0 18px 30px -18px rgb(0 0 0 / .9), inset 0 0 0 1px var(--inv-accent), inset 0 0 0 4px color-mix(in srgb, var(--inv-shade) 60%, transparent), inset 0 0 0 5px var(--mg-line-soft);
}
.inv-gift__account + .inv-gift__account { margin-top: 0; }
.inv-gift__account::before {
    content: ''; grid-area: chip; width: 1.7rem; height: 1.3rem; border-radius: .3rem;
    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%),
        linear-gradient(135deg, #f6e6c4, #c9a160 55%, #ead3a2);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2);
}
.inv-gift__bank {
    grid-area: bank; justify-self: end; min-width: 0; max-width: 100%; margin: 0;
    font: 700 .6rem/1.2 var(--mg-label-font); letter-spacing: .08em; text-transform: uppercase; text-align: right; overflow-wrap: anywhere;
}
.inv-gift__logo { height: 1.5rem; max-width: 100%; padding: .2rem .45rem; border-radius: .35rem; }
.inv-gift__logo img { max-width: 4.6rem; }
.inv-gift__number {
    grid-area: number; margin: .75rem 0 .15rem;
    font: 500 .95rem/1.25 var(--mg-mono); letter-spacing: .03em; color: #fff;
    overflow-wrap: anywhere;
}
.inv-gift__holder { grid-area: holder; margin: 0; font: 600 .56rem/1.35 var(--mg-label-font); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-text) 88%, transparent); overflow-wrap: anywhere; }
.inv-gift__account .inv-button {
    grid-area: button; justify-self: start; margin-top: .6rem; padding: .38rem .7rem; border-radius: 999px;
    font-size: .54rem; letter-spacing: .08em; color: var(--mg-gold-light); background: rgb(255 255 255 / .06);
    box-shadow: inset 0 0 0 1px var(--mg-line);
}

/* the gift address stays a plain paper card */
.inv-gift__account.inv-gift__address {
    display: block; min-height: 0; padding: 1.5rem 1.3rem; border-radius: 3px; text-align: center; color: var(--inv-ink);
    background: var(--inv-paper);
    box-shadow: inset 0 0 0 5px var(--inv-paper), inset 0 0 0 6px color-mix(in srgb, var(--inv-accent) 70%, transparent), 0 20px 40px -28px rgb(0 0 0 / .9);
}
.inv-gift__address::before { content: none; }
.inv-gift__address .inv-gift__bank { justify-self: auto; text-align: center; font: 700 .66rem/1.4 var(--mg-label-font); letter-spacing: .28em; color: var(--inv-primary); }
.inv-gift__address .inv-gift__holder { margin: .6rem 0 .2rem; font: 700 1.15rem/1.3 var(--mg-serif); letter-spacing: .02em; text-transform: none; color: var(--inv-ink); }
.inv-gift__address p:not([class]) { color: color-mix(in srgb, var(--inv-ink) 82%, transparent); }
.inv-gift__address .inv-button {
    margin-top: 1rem; color: var(--inv-primary); background: transparent;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 50%, transparent);
}

/* ---------- rsvp & wishes forms on paper ---------- */

.mg-form { max-width: 24rem; margin: 0 auto; padding: 1.6rem 1.4rem 1.6rem; text-align: left; }
.inv-form { gap: .9rem; }
.inv-form label, .inv-form__choices legend { font: 700 .64rem/1.4 var(--mg-label-font); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-ink) 85%, transparent); }
.inv-form input:not([type=radio]):not([type=checkbox]), .inv-form select, .inv-form textarea {
    padding: .65rem .85rem; border-radius: 3px;
    border: 1px solid color-mix(in srgb, var(--inv-ink) 28%, transparent);
    background: color-mix(in srgb, #fff 70%, var(--inv-paper)); color: var(--inv-ink);
    font: 500 1.08rem/1.4 var(--mg-serif);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.inv-form input::placeholder, .inv-form textarea::placeholder { color: color-mix(in srgb, var(--inv-ink) 45%, transparent); }
.inv-form input:focus, .inv-form select:focus, .inv-form textarea:focus {
    outline: none; border-color: var(--inv-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-primary) 18%, transparent);
}
.inv-form option { background: #fff; color: var(--inv-ink); }
.inv-form input[type=radio], .inv-form input[type=checkbox] { accent-color: var(--inv-primary); }
.inv-form__choices label { color: var(--inv-ink); font: 600 1rem/1.4 var(--mg-serif); letter-spacing: 0; text-transform: none; }
.inv-form__notice { color: var(--inv-ink); background: color-mix(in srgb, var(--inv-accent) 15%, transparent); border: 1px solid var(--mg-line-soft); }
.inv-form .inv-button { justify-self: stretch; margin-top: .3rem; }
.inv-rsvp__deadline { font-style: italic; color: var(--inv-primary); }

/* wishes: compact paper notes in a scroll box of about three */
.inv-wishes { --inv-wishes-height: 20rem; }
.inv-wishes__list { gap: .6rem; margin-top: 1.4rem; }
.inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .5rem .45rem .5rem .5rem; border-radius: 3px;
    background: color-mix(in srgb, var(--inv-ink) 7%, var(--inv-paper));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-ink) 15%, transparent), inset 0 -14px 16px -14px rgb(0 0 0 / .25);
    scrollbar-color: color-mix(in srgb, var(--inv-primary) 45%, transparent) transparent;
}
.inv-wishes__empty { text-align: center; font-style: italic; color: var(--inv-ink); }
.inv-wish {
    padding: .65rem .8rem; border-radius: 2px;
    background: color-mix(in srgb, #fff 65%, var(--inv-paper)); color: var(--inv-ink);
    border: 1px solid color-mix(in srgb, var(--inv-ink) 14%, transparent); border-left: 3px solid var(--inv-primary);
}
.inv-wish__name { font: 700 .74rem/1.3 var(--mg-label-font); letter-spacing: .06em; color: var(--inv-primary); }
.inv-wish__message { font-size: 1.02rem; line-height: 1.5; }
.inv-wish__time { margin-top: .25rem; font: 500 .8rem/1.3 var(--mg-serif); letter-spacing: .02em; }
.inv-wish__reply { margin-top: .5rem; padding: .45rem .65rem; background: color-mix(in srgb, var(--inv-accent) 14%, transparent); }
.inv-wish__reply-text { font-size: .98rem; }
.inv-wishes__page-button { color: var(--inv-primary); }

/* ---------- closing: the curtain call ---------- */

.mg-closing { padding-bottom: 1.75rem; }
.mg-proscenium--closing { width: min(74%, 290px); margin: 1.4rem auto 2.2rem; }
.mg-closing__thanks { font: 400 3.4rem/1.25 var(--mg-script); color: var(--mg-gold-light); text-shadow: 0 3px 16px rgb(0 0 0 / .5); }
.mg-closing__message { max-width: 24rem; margin: .8rem auto 0; color: var(--mg-muted); }
.mg-closing__sign { margin-top: 1.6rem; font: 600 .68rem/1.4 var(--mg-label-font); letter-spacing: .26em; text-transform: uppercase; color: var(--mg-gold-light); }
.mg-closing__names { margin-top: .3rem; font: 400 clamp(2.5rem, 11.5vw, 3.1rem)/1.3 var(--mg-script); color: var(--inv-text); }
.mg-closing__names span { font: italic 500 .42em/1 var(--mg-serif); color: var(--mg-gold-light); }

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

.mg-nav.inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--inv-shade) 94%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-text) 75%, transparent);
    --inv-nav-active: var(--mg-gold-bg);
    border-color: color-mix(in srgb, var(--inv-accent) 55%, transparent);
    box-shadow: 0 14px 34px -12px rgb(0 0 0 / .8), inset 0 1px 0 color-mix(in srgb, var(--inv-accent) 40%, transparent);
    font-family: var(--mg-label-font);
}
.mg-nav.inv-nav--icons .inv-nav__item.is-active { color: var(--inv-ink); box-shadow: 0 0 0 2px var(--inv-shade), 0 0 0 3px var(--inv-accent), 0 8px 18px -6px rgb(0 0 0 / .6); }

.inv-music { right: calc(var(--mg-edge) + 1rem); }
.inv-music__button { background: var(--mg-gold-bg); color: var(--inv-ink); box-shadow: 0 8px 22px -8px rgb(0 0 0 / .7), 0 0 0 2px var(--inv-shade), 0 0 0 3px var(--inv-accent); }
.inv-autoscroll { color: var(--mg-gold-light); background: color-mix(in srgb, var(--inv-shade) 94%, transparent); border-color: color-mix(in srgb, var(--inv-accent) 55%, transparent); font-family: var(--mg-label-font); }
.inv-autoscroll--running { background: var(--inv-accent); color: var(--inv-ink); }

.inv-to-top {
    left: calc(var(--mg-edge) + 1rem); border-radius: 50%;
    background: var(--inv-shade); color: var(--mg-gold-light);
    box-shadow: inset 0 0 0 1.5px var(--inv-accent), 0 6px 16px -6px rgb(0 0 0 / .7);
}
.inv-qr-tab {
    right: var(--mg-edge); font-family: var(--mg-label-font); color: var(--inv-ink);
    background: var(--mg-gold-bg);
    border-color: color-mix(in srgb, var(--inv-shade) 60%, transparent);
}
.inv-qr-sheet .inv-checkin { font-family: var(--mg-serif); color: var(--inv-ink); }
.inv-checkin__title { color: var(--inv-primary); }

.mg-branding { position: relative; z-index: 1; color: var(--mg-muted); font-family: var(--mg-serif); background: var(--inv-background); }

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .mg-beam, .mg-scroll span, .mg-live__badge span { animation: none; }
    .mg-curtain, .mg-cover__stage { transition: none; }
    html.inv-opened .mg-curtain { transform: none; }
    html.inv-opened .mg-cover__stage { transform: none; opacity: 1; }
    html.inv-opened .mg-cover__content { opacity: 1; }
    .mg-cover--leave { transition: opacity .3s ease; }
}