/*
 * Malam Gala: a gala night at the opera house. Deep theatre red, gilt and black.
 * Materials (real CC0 textures in img/, see img/CREDITS.md). curtain/damask/paper are used as *-mul.webp: black
 * with alpha (1 - grey), which looks exactly like the grey texture multiplied over the variant color but needs no blend
 * mode (iOS Safari draws those textures plain grey):
 *   curtain.webp  red stage velvet — only the cover, the hero and the closing (.mg-drapes)
 *   damask.webp   silk damask wallcovering — red damask sections (.mg-tone-damask), faint on black velvet
 *   gilt.webp     gold leaf — frames, plates, buttons, the proscenium crest (SVG pattern #mg-gilt)
 *   paper.webp    aged program paper — ivory sections (.mg-tone-paper)
 * Section tones alternate: paper (light) / velvet (black) / damask (red). Ornaments: inline SVG symbols in
 * sections/_defs (valance, tassel, crest, fleuron, star). Colors from the variant: --inv-primary (theatre red),
 * --inv-accent (gold), --inv-background (the dark house), --inv-text (cream), --inv-shade (deepest red),
 * --inv-paper, --inv-ink (text on paper). All classes start with "mg-".
 */

:root {
    --inv-primary: #8e1028;
    --inv-accent: #d6a84e;
    --inv-background: #110508;
    --inv-text: #f7ead0;
    --inv-shade: #3d0612;
    --inv-paper: #f6ecd8;
    --inv-ink: #2a130e;
    --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-didone: 'Bodoni Moda', 'Didot', 'Bodoni MT', Georgia, serif;
    --mg-label-font: var(--mg-didone);
    --mg-script: 'Pinyon Script', 'Great Vibes', 'Brush Script MT', cursive;
    --mg-serif: 'Cormorant Garamond', 'Garamond', Georgia, serif;

    /* gold: the real leaf texture over a gradient (the gradient shows until the image loads) */
    --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-gilt-bg: var(--mg-img-gilt, none) 50% 50% / 260px auto, var(--mg-gold-bg);
    --mg-gold-light: color-mix(in srgb, var(--inv-accent) 72%, #fff);
    --mg-gold-ink: color-mix(in srgb, var(--inv-accent) 40%, var(--inv-ink));

    /* context tokens: dark by default, redefined on paper */
    --mg-fg: var(--inv-text);
    --mg-muted: color-mix(in srgb, var(--inv-text) 86%, transparent);
    --mg-label: var(--mg-gold-light);
    --mg-em: var(--mg-gold-light);
    --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 / .35) 20%, rgb(0 0 0 / .8) 100%),
        var(--mg-img-damask, none) center / 340px auto,
        var(--inv-primary);
}

.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, plate, buttons, pills ---------- */

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

.mg-fleuron { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: .8rem 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: .85; }

.mg-heading { margin-bottom: 2rem; }
.mg-heading__label {
    font: 600 .68rem/1.4 var(--mg-label-font); letter-spacing: .34em; text-transform: uppercase;
    color: var(--mg-label);
}
.mg-heading__title {
    margin-top: .35rem;
    font: 500 clamp(2.2rem, 10vw, 2.7rem)/1.12 var(--mg-didone); letter-spacing: -.01em; color: var(--mg-fg);
}
.mg-heading__title em { font-style: italic; color: var(--mg-em); }

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

/* a gilt name plate (banner ends) */
.mg-plate {
    display: inline-block; padding: .36rem 1.4rem;
    background: var(--mg-gold-bg); color: var(--inv-ink);
    font: 700 .62rem/1.3 var(--mg-label-font); letter-spacing: .22em; text-transform: uppercase;
    clip-path: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%);
    text-shadow: 0 1px 0 rgb(255 240 200 / .5);
}

.inv-button {
    gap: .5rem; padding: .85rem 1.5rem; border-radius: 3px;
    background: var(--mg-btn-bg); color: var(--mg-btn-fg);
    font: 700 .68rem/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 .7rem/1 var(--mg-label-font); letter-spacing: .06em;
    transition: background .25s ease;
}
.mg-pill:hover { background: color-mix(in srgb, var(--inv-accent) 14%, transparent); }

/* ---------- a card of program paper (forms, quote) ---------- */

.mg-paper {
    --mg-fg: var(--inv-ink);
    --mg-muted: color-mix(in srgb, var(--inv-ink) 86%, 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: var(--mg-img-paper, none) center / 420px auto, color-mix(in srgb, var(--inv-paper) 70%, #fff);
    box-shadow:
        inset 0 0 0 7px color-mix(in srgb, var(--inv-paper) 70%, #fff),
        inset 0 0 0 8px color-mix(in srgb, var(--inv-primary) 55%, transparent),
        inset 0 0 0 11px color-mix(in srgb, var(--inv-paper) 70%, #fff),
        inset 0 0 0 12px color-mix(in srgb, var(--inv-accent) 80%, transparent),
        0 30px 50px -28px rgb(0 0 0 / .9);
}

/* ---------- the red stage drapes (cover, hero, closing) ---------- */

.mg-drapes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.mg-drape {
    position: absolute; top: 0; bottom: 0; width: 26%;
    background:
        linear-gradient(180deg, rgb(0 0 0 / .45), transparent 22%, transparent 78%, rgb(0 0 0 / .45)),
        var(--mg-img-curtain, none) 0 0 / 200% 100%,
        linear-gradient(var(--inv-primary), var(--inv-primary));
    filter: drop-shadow(4px 0 8px rgb(0 0 0 / .6));
    transition: transform 1s cubic-bezier(.7, 0, .3, 1);
}
.mg-drape--left { left: 0; clip-path: polygon(0 0, 100% 0, 92% 16%, 66% 38%, 34% 57%, 44% 70%, 70% 100%, 0 100%); }
.mg-drape--right {
    right: 0; background-position: 0 0, 100% 0, 0 0;
    clip-path: polygon(100% 0, 0 0, 8% 16%, 34% 38%, 66% 57%, 56% 70%, 30% 100%, 100% 100%);
    filter: drop-shadow(-4px 0 8px rgb(0 0 0 / .6));
}
.mg-tieback { position: absolute; z-index: 1; top: 55%; width: 4.2%; max-width: 20px; aspect-ratio: 16 / 40; overflow: visible; filter: drop-shadow(0 3px 3px rgb(0 0 0 / .5)); transition: opacity .4s ease; }
.mg-tieback--left { left: 6.5%; }
.mg-tieback--right { right: 6.5%; }
.mg-valance { display: block; width: 100%; height: auto; aspect-ratio: 400 / 96; overflow: visible; }
.mg-drapes .mg-valance { position: absolute; top: 0; left: 0; z-index: 2; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .55)); transition: transform .9s cubic-bezier(.7, 0, .3, 1); }

/* ---------- cover: the opera stage ---------- */

.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);
    background: var(--inv-background);
}
.mg-cover__frame { position: relative; min-height: 100%; display: flex; flex-direction: column; }
/* the back wall of the stage: black, lit from above */
.mg-cover__wall {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(70% 46% at 50% 34%, color-mix(in srgb, var(--inv-primary) 45%, transparent), transparent 75%),
        var(--mg-img-damask, none) center / 300px auto,
        color-mix(in srgb, var(--inv-background) 86%, #fff);
}
.mg-drapes--cover { bottom: auto; height: 100%; }

.mg-cover__content {
    position: relative; z-index: 3;
    flex: 1 0 auto;
    padding: min(18vw, 84px) 1.2rem 1.2rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem;
    text-align: center;
    transition: opacity .35s ease;
}
.mg-cover__content .mg-kicker { text-shadow: 0 2px 8px rgb(0 0 0 / .8); }

/* the proscenium: a gilt arch round the photo, the monogram cartouche on its crown */
.mg-portal {
    position: relative; width: min(66%, 290px); margin-top: 1.3rem; padding: 7px;
    border-radius: 50% 50% 4px 4px / 30% 30% 4px 4px;
    background: var(--mg-gilt-bg);
    box-shadow: 0 0 0 1px rgb(60 30 0 / .6), 0 0 0 5px color-mix(in srgb, var(--inv-shade) 85%, transparent), 0 0 0 6px var(--mg-line-soft), 0 30px 50px -18px rgb(0 0 0 / .95), 0 0 60px color-mix(in srgb, var(--inv-accent) 22%, transparent);
}
.mg-portal::before {
    content: ''; position: absolute; inset: 3px; z-index: 3; pointer-events: none;
    border-radius: inherit; border: 1.5px dotted rgb(70 40 0 / .55);
}
.mg-portal__crest {
    position: absolute; z-index: 4; top: -1.05rem; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; justify-content: center; gap: .2rem;
    min-width: 4.8rem; height: 2.3rem; padding: 0 .9rem; border-radius: 50%;
    border: 3px solid transparent;
    background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--inv-primary) 80%, #000), var(--inv-shade)) padding-box, var(--mg-gilt-bg) border-box;
    box-shadow: 0 0 0 1px rgb(60 30 0 / .6), 0 8px 14px -6px rgb(0 0 0 / .8);
    font: 600 1.05rem/1 var(--mg-didone); color: var(--mg-gold-light);
}
.mg-portal__crest i { font: italic 500 .8rem/1 var(--mg-serif); }
.mg-portal__stage {
    position: relative; overflow: hidden; isolation: isolate;
    height: min(40svh, 340px);
    border-radius: 50% 50% 2px 2px / 29% 29% 2px 2px;
    background: 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);
}
.mg-portal__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.mg-portal__mono, .mg-closing__photo--empty .mg-portal__mono {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .3rem;
    font: 400 4.4rem/1 var(--mg-script); color: var(--mg-gold-light);
    text-shadow: 0 4px 22px rgb(0 0 0 / .6);
}
/* a spotlight falling on the stage, and the dark edges */
.mg-portal__spot {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(60% 46% at 50% 40%, rgb(255 236 196 / .16), transparent 70%),
        linear-gradient(180deg, rgb(0 0 0 / .1), transparent 30%, transparent 70%, rgb(0 0 0 / .45));
}
/* the inner curtain: closed on load, then gathered to the sides once (the reveal) */
.mg-portal__curtain {
    position: absolute; z-index: 2; top: 0; bottom: 0; width: 51%;
    background:
        linear-gradient(180deg, rgb(0 0 0 / .35), transparent 30%, rgb(0 0 0 / .35)),
        var(--mg-img-curtain, none) 0 0 / 220% 100%,
        linear-gradient(var(--inv-primary), var(--inv-primary));
    transform: scaleX(.13);
}
.mg-portal__curtain--left { left: 0; transform-origin: 0 50%; box-shadow: inset -10px 0 14px -6px rgb(0 0 0 / .7); }
.mg-portal__curtain--right { right: 0; transform-origin: 100% 50%; background-position: 0 0, 100% 0, 0 0; box-shadow: inset 10px 0 14px -6px rgb(0 0 0 / .7); }
html.inv-anim .mg-portal__curtain { animation: mg-part 1.5s cubic-bezier(.65, 0, .3, 1) .35s both; }
html.inv-anim .mg-portal__photo { animation: mg-reveal 2s ease-out .35s both; }
html.inv-anim .mg-portal__spot { animation: mg-fade 1.2s ease .9s both; }
@keyframes mg-part { from { transform: scaleX(1); } to { transform: scaleX(.13); } }
@keyframes mg-reveal { from { transform: scale(1.08); filter: brightness(.55); } to { transform: none; filter: none; } }
@keyframes mg-fade { from { opacity: 0; } }

/* the marquee board: gilt frame, bulbs (lit once), black board with the names */
.mg-marquee-name {
    position: relative; isolation: isolate;
    width: min(100%, 21rem); margin-top: .7rem; padding: 14px;
    border-radius: 8px;
    background: var(--mg-gilt-bg);
    box-shadow: 0 0 34px color-mix(in srgb, var(--inv-accent) 25%, transparent), 0 20px 30px -16px rgb(0 0 0 / .9);
}
.mg-marquee-name::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: radial-gradient(circle, #fff7dc 0 2.3px, rgb(255 226 160 / .65) 3.3px, transparent 5.2px) 0 0 / 15px 15px space;
}
.mg-marquee-name::after {
    content: ''; position: absolute; inset: 11px; z-index: -1; border-radius: 3px;
    background: radial-gradient(90% 120% at 50% 0, color-mix(in srgb, var(--inv-primary) 55%, var(--inv-background)), var(--inv-background));
    box-shadow: inset 0 0 0 1px var(--mg-line);
}
html.inv-anim .mg-marquee-name::before { animation: mg-bulbs .9s steps(3, end) 1.25s both; }
@keyframes mg-bulbs { from { opacity: .15; } to { opacity: 1; } }

.mg-cover__names {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 .45rem;
    padding: .55rem .5rem 0;
    font: 400 clamp(2.4rem, 11vw, 3rem)/1.12 var(--mg-script); color: var(--mg-gold-light);
    text-shadow: 0 0 18px color-mix(in srgb, var(--inv-accent) 40%, transparent);
    overflow-wrap: anywhere;
}
.mg-cover__amp { font: italic 500 .5em/1 var(--mg-didone); color: var(--inv-text); }
.mg-cover__date {
    display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .3rem 0 .55rem;
    font: 600 .66rem/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.2rem; height: 1px; background: var(--inv-accent); }

/* the stage floor with the apron edge and footlights */
.mg-cover__stage {
    position: relative; z-index: 4;
    display: flex; flex-direction: column; align-items: center; gap: .9rem;
    padding: 1.7rem 1.4rem 1.6rem;
    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-gilt-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: an ivory ticket with notched sides */
.mg-guest {
    position: relative; width: min(100%, 19rem); padding: .9rem 1.4rem .95rem;
    color: var(--inv-ink);
    background: var(--mg-img-paper, none) center / 300px auto, color-mix(in srgb, var(--inv-paper) 70%, #fff);
    border-radius: 4px;
    box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--inv-paper) 70%, #fff), inset 0 0 0 6px color-mix(in srgb, var(--inv-primary) 55%, 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 .62rem/1.4 var(--mg-label-font); letter-spacing: .3em; text-transform: uppercase; color: var(--inv-primary); }
.mg-guest__name { margin-top: .2rem; font: 700 1.28rem/1.25 var(--mg-serif); color: var(--inv-ink); overflow-wrap: anywhere; }
.mg-guest__note { margin-top: .3rem; font: italic 500 .95rem/1.4 var(--mg-serif); color: color-mix(in srgb, var(--inv-ink) 86%, transparent); }

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

/* short screens: the stage photo shrinks first, then the marquee and the floor tighten */
@media (max-height: 760px) {
    .mg-cover__content { padding-top: min(17vw, 76px); padding-bottom: .9rem; gap: .4rem; }
    .mg-portal__stage { height: 31svh; }
    .mg-marquee-name { margin-top: .5rem; padding: 12px; }
    .mg-cover__names { font-size: clamp(2.2rem, 10vw, 2.6rem); padding-top: .4rem; }
    .mg-cover__date { padding-bottom: .4rem; }
    .mg-cover__stage { gap: .7rem; padding: 1.4rem 1.4rem 1.6rem; }
    .mg-guest { padding: .7rem 1.3rem .75rem; }
    .mg-guest__name { font-size: 1.16rem; }
    .mg-guest__note { margin-top: .2rem; font-size: .88rem; line-height: 1.35; }
}
@media (max-height: 660px) {
    .mg-cover__content { padding-top: min(16vw, 66px); padding-bottom: .7rem; gap: .3rem; }
    .mg-portal { margin-top: .8rem; }
    .mg-portal__stage { height: 26svh; }
    .mg-portal__crest { height: 2rem; min-width: 4.2rem; font-size: .95rem; top: -.9rem; }
    .mg-marquee-name { padding: 11px; }
    .mg-cover__names { font-size: clamp(2rem, 9.4vw, 2.3rem); }
    .mg-cover__stage { gap: .6rem; padding: 1.15rem 1.2rem 1.6rem; }
    .mg-guest { padding: .6rem 1.2rem .65rem; }
    .mg-guest__name { font-size: 1.06rem; }
    .mg-guest__note { font-size: .82rem; }
}
@media (max-height: 590px) {
    .mg-portal__stage { height: 23svh; }
    .mg-cover__content .mg-kicker { font-size: .62rem; }
}

/* opening: the writing fades, the drapes sweep away, the floor sinks, then the cover fades */
html.inv-opened .mg-cover__content { opacity: 0; }
html.inv-opened .mg-drapes--cover .mg-drape--left { transform: translateX(-105%); }
html.inv-opened .mg-drapes--cover .mg-drape--right { transform: translateX(105%); }
html.inv-opened .mg-drapes--cover .mg-tieback { opacity: 0; }
html.inv-opened .mg-drapes--cover .mg-valance { transform: translateY(-110%); }
html.inv-opened .mg-cover__stage { transform: translateY(105%); opacity: 0; }
.mg-cover--leave { transition: opacity .45s ease .7s; }
.mg-cover--gone { opacity: 0; }

/* ---------- client photo backgrounds under a gradient ---------- */

.mg-bgphoto { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.mg-bgphoto img { position: absolute; inset: -40px 0; width: 100%; height: calc(100% + 80px); object-fit: cover; opacity: .5; filter: saturate(.85); }
.mg-bgphoto::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-shade) 55%, transparent), color-mix(in srgb, var(--inv-primary) 70%, transparent) 40%, color-mix(in srgb, var(--inv-shade) 80%, transparent) 75%, var(--inv-shade));
}

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

.mg-hero {
    position: relative; overflow: hidden; isolation: isolate;
    min-height: min(100vh, 900px); min-height: min(100svh, 900px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 6.5rem 1.4rem 3rem;
    text-align: center;
    background: var(--inv-background);
}
/* the photo clearer, aimed at the faces; the stage dark only at its edges and under the words */
/* zoomed out: the photo at its own width across the stage (not stretched to the whole height), fading into the floor */
.mg-bgphoto--hero img {
    inset: 0 0 auto; height: min(150vw, 680px, 100%); opacity: .85; object-position: 50% 16%; filter: saturate(.95) sepia(.08);
    -webkit-mask: linear-gradient(180deg, #000 62%, transparent 100%); mask: linear-gradient(180deg, #000 62%, transparent 100%);
}
.mg-bgphoto--hero::after {
    background:
        radial-gradient(70% 46% at 50% 34%, transparent 30%, color-mix(in srgb, var(--inv-shade) 55%, transparent)),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-shade) 40%, transparent) 0%, color-mix(in srgb, var(--inv-primary) 10%, transparent) 17%, color-mix(in srgb, var(--inv-shade) 58%, transparent) 34%, color-mix(in srgb, var(--inv-shade) 72%, transparent) 55%, color-mix(in srgb, var(--inv-background) 90%, transparent) 76%, var(--inv-background));
}
.mg-drapes--hero .mg-drape { width: 24%; }
/* the follow spot: a soft warm-gold cone from the flies with a pool of light on the stage, screened over the photo */
.mg-hero__spot {
    position: absolute; z-index: 1; left: 6%; right: 6%; top: 0; bottom: 6%; pointer-events: none; mix-blend-mode: screen;
    background:
        radial-gradient(50% 9% at 50% 92%, color-mix(in srgb, var(--inv-accent) 30%, transparent), transparent 70%),
        radial-gradient(28% 70% at 50% 0%, color-mix(in srgb, var(--inv-accent) 26%, transparent), transparent 75%);
    filter: blur(6px);
}
.mg-hero__body { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; max-width: 19rem; }
.mg-hero__show { margin-top: .5rem; font: italic 500 1.15rem/1.4 var(--mg-didone); color: var(--inv-text); }
.mg-hero__names {
    margin: .6rem 0 .9rem;
    display: flex; flex-direction: column; align-items: center;
    font: 400 clamp(3.2rem, 15vw, 4.1rem)/1.05 var(--mg-script); color: var(--mg-gold-light);
    text-shadow: 0 3px 18px rgb(0 0 0 / .7);
    overflow-wrap: anywhere;
}
.mg-hero__amp { font: italic 500 .42em/1.4 var(--mg-didone); color: var(--inv-text); }
.mg-hero__quote { margin-top: 1.3rem; font: italic 500 1.06rem/1.55 var(--mg-serif); color: var(--inv-text); text-shadow: 0 2px 10px rgb(0 0 0 / .7); }

.mg-scroll { position: relative; width: 1px; height: 3rem; margin-top: 1.8rem; 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 and their materials ---------- */

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

.mg-section {
    position: relative; overflow: hidden; isolation: isolate;
    padding: 4.6rem 1.4rem;
    text-align: center; color: var(--mg-fg);
}
.mg-section > * { position: relative; z-index: 1; }
.mg-section > .mg-bgphoto { position: absolute; z-index: 0; }
.mg-section > .mg-drapes { position: absolute; z-index: 2; }

/* ivory program paper, edged by a gilt rule */
.mg-tone-paper {
    --mg-fg: var(--inv-ink);
    --mg-muted: color-mix(in srgb, var(--inv-ink) 88%, transparent);
    --mg-label: var(--inv-primary);
    --mg-em: var(--inv-primary);
    --mg-line: color-mix(in srgb, var(--inv-primary) 55%, transparent);
    --mg-line-soft: color-mix(in srgb, var(--inv-primary) 25%, 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);
    background:
        radial-gradient(120% 70% at 50% 50%, transparent 55%, color-mix(in srgb, var(--inv-paper) 70%, #7a5222) 130%),
        var(--mg-img-paper, none) center / 520px auto,
        var(--inv-paper);
}
.mg-tone-paper::before, .mg-tone-paper::after {
    content: ''; position: absolute; left: 0; right: 0; height: 7px; z-index: 1;
    background: linear-gradient(180deg, transparent 0 2px, var(--inv-primary) 2px 3px, transparent 3px), var(--mg-gilt-bg);
    background-size: 100% 100%, 260px auto, auto;
    box-shadow: 0 1px 4px rgb(0 0 0 / .35);
}
.mg-tone-paper::before { top: 0; }
.mg-tone-paper::after { bottom: 0; }
.mg-tone-paper .mg-fleuron { color: var(--inv-primary); }

/* black velvet with a faint damask, lit from above */
.mg-tone-velvet {
    background:
        radial-gradient(80% 36% at 50% 0, color-mix(in srgb, var(--inv-primary) 40%, transparent), transparent 75%),
        radial-gradient(70% 40% at 50% 100%, color-mix(in srgb, var(--inv-primary) 22%, transparent), transparent 75%),
        var(--mg-img-damask, none) center / 300px auto,
        color-mix(in srgb, var(--inv-background) 90%, #fff);
    padding-top: 6.2rem;
}
/* the gilt proscenium crest along the top */
.mg-crest {
    position: absolute !important; top: 0; left: 0; z-index: 1; display: block;
    width: 100%; height: auto; aspect-ratio: 400 / 92; overflow: visible;
    filter: drop-shadow(0 4px 6px rgb(0 0 0 / .7));
}

/* red silk damask wall */
.mg-tone-damask {
    background:
        linear-gradient(180deg, rgb(0 0 0 / .3), transparent 30%, transparent 70%, rgb(0 0 0 / .35)),
        linear-gradient(color-mix(in srgb, var(--inv-primary) 42%, transparent), color-mix(in srgb, var(--inv-primary) 42%, transparent)),
        var(--mg-img-damask, none) center / 320px auto,
        var(--inv-primary);
    border-block: 2px solid color-mix(in srgb, var(--inv-accent) 60%, transparent);
}
.mg-tone-damask .mg-bgphoto img { opacity: .45; mix-blend-mode: luminosity; }
.mg-tone-damask .mg-bgphoto::after {
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 45%, transparent), color-mix(in srgb, var(--inv-shade) 55%, transparent) 50%, color-mix(in srgb, var(--inv-shade) 75%, transparent));
}
.mg-tone-damask .mg-heading__title, .mg-tone-damask .mg-lead { text-shadow: 0 2px 12px rgb(0 0 0 / .45); }

/* ---------- opening: "Prolog" ---------- */

.mg-sheet { max-width: 24rem; margin: 0 auto; }
.mg-arabic { font: 400 1.8rem/1.8 'Amiri', serif; color: var(--inv-primary); margin-bottom: .6rem; }
.mg-rule-label {
    display: flex; align-items: center; gap: .8rem;
    font: 600 .7rem/1.4 var(--mg-label-font); letter-spacing: .36em; text-transform: uppercase; color: var(--inv-primary);
}
.mg-rule-label::before, .mg-rule-label::after { content: ''; flex: 1; height: 5px; border-block: 1px solid color-mix(in srgb, var(--inv-primary) 60%, transparent); }
.mg-opening__greeting { margin-top: 1rem; font: 500 1.65rem/1.3 var(--mg-didone); color: var(--inv-ink); }
.mg-opening__message { margin: 1.1rem auto 0; color: var(--mg-muted); }
.mg-quote {
    max-width: 24rem; margin: 2.6rem auto 0; padding: 2.2rem 1.6rem 1.7rem;
    color: var(--inv-text);
    background:
        radial-gradient(90% 60% at 50% 0, color-mix(in srgb, var(--inv-primary) 85%, #fff 8%), transparent 80%),
        var(--mg-img-damask, none) center / 260px auto,
        var(--inv-primary);
    border-radius: 3px;
    box-shadow: inset 0 0 0 6px var(--inv-primary), inset 0 0 0 7px var(--mg-gold-light), 0 0 0 4px var(--inv-paper), 0 0 0 5px color-mix(in srgb, var(--inv-accent) 80%, transparent), 0 26px 40px -24px rgb(0 0 0 / .8);
}
.mg-quote__star { position: absolute; left: 50%; top: -.85rem; width: 1.7rem; height: 1.7rem; margin-left: -.85rem; 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-text); }
.mg-quote figcaption { margin-top: .9rem; font: 700 .64rem/1.4 var(--mg-label-font); letter-spacing: .24em; text-transform: uppercase; color: var(--mg-gold-light); }

/* ---------- couple: "Pemeran Utama" in opera boxes ---------- */

.mg-couple .mg-lead { margin-bottom: 2.6rem; }
.mg-role {
    display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); align-items: center; gap: 1.1rem;
    text-align: left;
}
.mg-role--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 46%); text-align: right; }
.mg-role--flip .mg-box { order: 2; }
.mg-role__text { min-width: 0; }

.mg-box { position: relative; padding-bottom: 1.5rem; }
.mg-box__arch {
    position: relative; padding: 6px;
    border-radius: 50% 50% 3px 3px / 36% 36% 3px 3px;
    background: var(--mg-gilt-bg);
    box-shadow: 0 0 0 1px rgb(60 30 0 / .6), 0 24px 34px -16px rgb(0 0 0 / .95), 0 0 40px color-mix(in srgb, var(--inv-accent) 14%, transparent);
}
.mg-box__photo {
    display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
    border-radius: 50% 50% 1px 1px / 35% 35% 1px 1px;
    box-shadow: 0 0 0 2px var(--inv-shade);
}
.mg-box__photo--empty {
    display: grid; place-items: center;
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--inv-primary) 85%, #000), var(--inv-shade));
    font: 400 4.2rem/1 var(--mg-script); color: var(--mg-gold-light);
}
/* a small gilt jewel on the crown of the arch (it used to be a red swag over the photo) */
.mg-box__swag {
    position: absolute; z-index: 2; top: -9px; left: 50%; width: 18px; height: 18px; translate: -50% 0; rotate: 45deg;
    border-radius: 3px; background: var(--mg-gilt-bg);
    box-shadow: 0 0 0 2px var(--inv-shade), 0 0 0 3px color-mix(in srgb, var(--inv-accent) 60%, transparent), 0 4px 10px rgb(0 0 0 / .55);
}
/* the bowed balcony front: a red velvet cushion over a gilt panel with balusters and a cartouche */
.mg-box__balcony {
    position: absolute; z-index: 3; left: -6%; right: -6%; bottom: 0; height: 21%;
    border-radius: 6px 6px 50% 50% / 6px 6px 34% 34%;
    background:
        radial-gradient(ellipse 11% 17% at 50% 62%, var(--inv-shade) 0 55%, var(--inv-accent) 58% 66%, transparent 69%),
        linear-gradient(180deg, transparent 0 26%, rgb(40 20 0 / .45) 26% 29%, transparent 29% 92%, rgb(40 20 0 / .4) 92%),
        repeating-linear-gradient(90deg, transparent 0 9px, rgb(60 34 0 / .35) 9px 11px, transparent 11px 13px),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 70%, #fff) 0, var(--inv-primary) 9%, var(--inv-shade) 24%, transparent 24.5%),
        var(--mg-gilt-bg);
    box-shadow: 0 16px 22px -12px rgb(0 0 0 / .9);
}
.mg-role .mg-plate { padding-inline: 1rem; font-size: .56rem; }
.mg-role__nick { margin-top: .5rem; font: 400 2.8rem/1.1 var(--mg-script); color: var(--mg-gold-light); text-shadow: 0 2px 12px rgb(0 0 0 / .5); overflow-wrap: anywhere; }
.mg-role__name { margin-top: .25rem; font: 600 1.06rem/1.35 var(--mg-didone); color: var(--inv-text); overflow-wrap: anywhere; }
.mg-role__parents { margin-top: .5rem; font-size: 1rem; line-height: 1.5; color: var(--mg-muted); }
.mg-role__parents strong { color: var(--inv-text); font-weight: 700; }

.mg-amp { display: flex; align-items: center; justify-content: center; gap: .9rem; margin: 2.4rem 0 2.6rem; }
.mg-amp::before, .mg-amp::after { content: ''; width: 4.5rem; height: 1px; background: linear-gradient(90deg, transparent, var(--inv-accent)); }
.mg-amp::after { transform: scaleX(-1); }
.mg-amp span { font: italic 500 3.2rem/1 var(--mg-didone); 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);
    position: relative;
    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(--mg-img-paper, none) center / 360px auto,
        color-mix(in srgb, var(--inv-paper) 75%, #fff);
}
.mg-ticket__main {
    padding: 1.6rem 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;
}
/* a gilt band across the top of the ticket and an engraved inner border */
.mg-ticket__main::after {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 7px; border-radius: 10px 10px 0 0;
    background: var(--mg-gilt-bg);
}
.mg-ticket__main::before {
    content: ''; position: absolute; inset: 13px 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.4rem/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) 82%, 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) 82%, 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: 0 1.4rem 2rem; text-align: left;
    background: var(--mg-img-paper, none) center / 400px auto, color-mix(in srgb, var(--inv-paper) 55%, #fff);
    border-radius: 2px;
    box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--inv-paper) 55%, #fff), inset 0 0 0 6px color-mix(in srgb, var(--inv-primary) 45%, transparent), 0 0 0 1px color-mix(in srgb, var(--inv-ink) 18%, transparent), 0 24px 40px -26px rgb(60 20 0 / .7);
}
/* the red masthead */
.mg-bill__head {
    margin: 0 -1.4rem 1.6rem; padding: 1.5rem 1rem 1.2rem; text-align: center;
    background:
        linear-gradient(180deg, transparent calc(100% - 6px), var(--inv-accent) calc(100% - 6px) calc(100% - 4px), transparent calc(100% - 4px)),
        radial-gradient(90% 90% at 50% 0, color-mix(in srgb, var(--inv-primary) 80%, #fff 10%), transparent 80%),
        var(--mg-img-damask, none) center / 240px auto,
        var(--inv-primary);
    border-radius: 2px 2px 0 0;
}
.mg-bill__title { font: 700 1.5rem/1.15 var(--mg-didone); letter-spacing: .2em; text-transform: uppercase; color: var(--inv-text); }
.mg-bill__sub { margin-top: .4rem; font: italic 500 1.05rem/1.35 var(--mg-didone); color: var(--mg-gold-light); }
.mg-bill__rule { display: none; }

.mg-act { position: relative; padding-left: 3rem; }
.mg-act__numeral {
    position: absolute; left: 0; top: -.15rem; width: 2.3rem; text-align: center;
    font: italic 600 2.2rem/1 var(--mg-didone); color: var(--inv-primary);
}
.mg-act__numeral::after { content: ''; display: block; width: 1px; height: 4.5rem; margin: .5rem auto 0; background: linear-gradient(var(--inv-primary), transparent); opacity: .5; }
.mg-act__no {
    display: flex; align-items: center; gap: .55rem;
    font: 700 .64rem/1.4 var(--mg-label-font); letter-spacing: .28em; text-transform: uppercase; color: var(--mg-gold-ink);
}
.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 / 9; border-radius: 2px;
    background: var(--mg-photo) center 35% / cover no-repeat;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-paper) 60%, #fff), 0 0 0 5px var(--inv-accent), 0 10px 18px -10px rgb(0 0 0 / .6);
}
.mg-act__line { display: flex; align-items: baseline; gap: .4rem; margin-top: .3rem; }
.mg-act__name { min-width: 0; font: 600 1.45rem/1.2 var(--mg-didone); 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); color: var(--inv-ink); overflow-wrap: anywhere; }
.mg-act__row .mg-icon { margin-top: .18rem; color: var(--inv-primary); }
.mg-act__time { 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) 86%, 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: 600 1.2rem/1.25 var(--mg-didone); 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.3rem/1.15 var(--mg-didone); color: var(--mg-gold-light); overflow-wrap: anywhere; }

/* a small gilded box frame */
.mg-mini {
    position: relative; width: min(7.4rem, 100%); padding: 5px;
    border-radius: 50% 50% 3px 3px / 36% 36% 3px 3px;
    background: var(--mg-gilt-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 / 34% 34% 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: italic 600 1.7rem/1 var(--mg-didone); color: var(--mg-gold-light);
}

/* ---------- gallery: gilt frames on damask ---------- */

.inv-gallery { gap: .7rem; }
.mg-gallery .inv-gallery { gap: .9rem; }
.mg-gallery .inv-gallery__item {
    padding: 5px; border-radius: 3px;
    background: var(--mg-gilt-bg);
    box-shadow: 0 0 0 1px rgb(60 30 0 / .55), 0 18px 28px -16px rgb(0 0 0 / .9);
}
.mg-gallery .inv-gallery__item img, .mg-gallery .inv-gallery__item video { border-radius: 1px; box-shadow: 0 0 0 1px var(--inv-shade); }
.mg-gallery .inv-gallery__item:first-child,
.mg-gallery .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,
.mg-gallery .inv-gallery__item:first-child img { border-radius: 50% 50% 3px 3px / 110px 110px 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-gilt-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-gilt-bg); color: var(--inv-ink);
    font: 700 .62rem/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-gilt-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.7rem/1.2 var(--mg-didone); 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: black velvet inside a gilt frame */
.mg-boxoffice__window {
    --mg-fg: var(--inv-text);
    --mg-muted: color-mix(in srgb, var(--inv-text) 88%, 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);
    padding: 2.8rem .9rem 1.4rem;
    color: var(--inv-text);
    border-radius: 160px 160px 0 0 / 70px 70px 0 0;
    background:
        radial-gradient(80% 40% at 50% 0, rgb(255 236 196 / .12), transparent 75%),
        var(--mg-img-damask, none) center / 260px auto,
        color-mix(in srgb, var(--inv-background) 88%, #fff);
    box-shadow: inset 0 0 0 3px var(--inv-accent), inset 0 0 0 7px var(--inv-shade), inset 0 0 0 8px var(--mg-line-soft), 0 24px 40px -24px rgb(0 0 0 / .8);
}
.mg-boxoffice__window .mg-lead { margin: 0 auto 1.3rem; font-size: 1.02rem; color: var(--mg-muted); }
.mg-boxoffice__counter {
    position: relative; display: block; height: 16px; margin: 0 -.5rem;
    border-radius: 2px; background: var(--mg-gilt-bg);
    box-shadow: 0 12px 16px -8px rgb(0 0 0 / .6);
}

.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: red velvet with a gilt 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: 14px; text-align: left; color: var(--inv-text);
    background:
        linear-gradient(118deg, transparent 22%, rgb(255 255 255 / .1) 36%, transparent 50%),
        linear-gradient(150deg, color-mix(in srgb, var(--inv-primary) 80%, transparent), color-mix(in srgb, var(--inv-shade) 90%, transparent) 85%),
        var(--mg-img-damask, none) center / 200px auto,
        var(--inv-primary);
    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%),
        var(--mg-gilt-bg);
    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: 700 .98rem/1.25 var(--mg-didone); letter-spacing: .04em; color: #fff; font-variant-numeric: tabular-nums;
    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) 90%, 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 an ivory 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(--mg-img-paper, none) center / 300px auto, color-mix(in srgb, var(--inv-paper) 70%, #fff);
    box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--inv-paper) 70%, #fff), inset 0 0 0 6px color-mix(in srgb, var(--inv-accent) 80%, 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 .64rem/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) 86%, 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.7rem 1.4rem 1.6rem; text-align: left; }
.inv-form { gap: .9rem; }
.inv-form label, .inv-form__choices legend { font: 700 .62rem/1.4 var(--mg-label-font); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-ink) 88%, 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 75%, 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) 50%, 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: 0 1.4rem 2.9rem;
    background: linear-gradient(180deg, var(--inv-shade) 0 31rem, color-mix(in srgb, var(--inv-primary) 72%, var(--inv-shade)) calc(31rem + 30%), var(--inv-shade));
}
/* the photo, full-bleed and in warm color, fading into the red */
.mg-closing__photo { position: relative; z-index: 0; height: 33rem; margin: 0 -1.4rem -11rem; overflow: hidden; }
.mg-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 25%; filter: sepia(.32) saturate(1.35) contrast(1.04) brightness(1.02); }
/* a warm stage light over the photo (a black-and-white photo turns warm, never grey) */
.mg-closing__photo::before {
    content: ""; position: absolute; inset: 0; z-index: 1; mix-blend-mode: soft-light;
    background: linear-gradient(180deg, rgb(255 196 120 / .55), color-mix(in srgb, var(--inv-primary) 60%, transparent) 70%);
}
.mg-closing__photo--empty::before { content: none; }
.mg-closing__photo::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background:
        radial-gradient(70% 50% at 50% 38%, rgb(255 226 170 / .14), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-shade) 35%, transparent) 0, transparent 18%, transparent 42%, color-mix(in srgb, var(--inv-shade) 60%, transparent) 64%, var(--inv-shade) 92%);
}
.mg-closing__photo--empty {
    height: 22rem; margin-bottom: -6rem;
    background: radial-gradient(60% 50% at 50% 42%, color-mix(in srgb, var(--inv-primary) 85%, #fff 6%), transparent 85%);
}
.mg-closing__photo--empty::after { content: none; }
.mg-drapes--closing { bottom: auto; height: 30rem; -webkit-mask: linear-gradient(180deg, #000 70%, transparent); mask: linear-gradient(180deg, #000 70%, transparent); }
.mg-drapes--closing .mg-drape { width: 22%; }
.mg-closing__photo--empty + .mg-drapes--closing { height: 22rem; }

.mg-closing__body { position: relative; z-index: 3; max-width: 24rem; margin: 0 auto; }
.mg-closing__thanks { margin-top: .4rem; font: 500 clamp(2.8rem, 13vw, 3.4rem)/1.1 var(--mg-didone); color: var(--inv-text); text-shadow: 0 3px 16px rgb(0 0 0 / .5); }
.mg-closing__thanks em { font-style: italic; color: var(--mg-gold-light); }
.mg-closing__message { margin: 1rem auto 0; color: var(--mg-muted); }
.mg-closing__sign { margin-top: 1.6rem; font: 600 .66rem/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(--mg-gold-light); }
.mg-closing__names span { font: italic 500 .42em/1 var(--mg-didone); color: var(--inv-text); }

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

.mg-nav.inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--inv-background) 94%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-text) 78%, 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-gilt-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-background) 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-gilt-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-shade); }

/* ---------- intro scene "Tirai Diangkat" (scene.json, sections/_scene): the grand drape flies up on the stage ---------- */

.mg-scene-house {
    position: absolute; inset: 0;
    background:
        radial-gradient(48% 34% at 50% 52%, color-mix(in srgb, var(--inv-accent) 16%, transparent), transparent 72%),
        radial-gradient(80% 60% at 50% 40%, color-mix(in srgb, var(--inv-primary) 42%, transparent), transparent 78%),
        var(--mg-img-damask, none) center / 260px auto,
        color-mix(in srgb, var(--inv-background) 80%, #fff);
}
.mg-scene-floor {
    position: absolute; inset: 0;
    background:
        radial-gradient(26% 70% at 20% 0, rgb(255 214 140 / .24), transparent 75%),
        radial-gradient(30% 80% at 50% 0, rgb(255 214 140 / .3), transparent 75%),
        radial-gradient(26% 70% at 80% 0, rgb(255 214 140 / .24), transparent 75%),
        linear-gradient(180deg, transparent, rgb(0 0 0 / .65)),
        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);
}
.mg-scene-floor::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--mg-gilt-bg); }
.mg-scene-floor::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; }
/* velvet: the real curtain texture tinted to the variant */
.mg-scene-grand, .mg-scene-drape {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgb(0 0 0 / .4), transparent 24%, transparent 76%, rgb(0 0 0 / .5)),
        var(--mg-img-curtain, none) 0 0 / 50% 100% repeat-x,
        linear-gradient(var(--inv-primary), var(--inv-primary));
}
/* the grand drape: a gold fringe along its hem, the monogram cartouche in the middle */
.mg-scene-grand { box-shadow: 0 12px 30px rgb(0 0 0 / .7); }
.mg-scene-grand::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 16px;
    background: linear-gradient(var(--inv-accent), var(--inv-accent)) 0 0 / 100% 4px no-repeat, repeating-linear-gradient(90deg, var(--inv-accent) 0 2px, transparent 2px 5px) 0 4px / 100% 12px no-repeat;
}
.mg-scene-grand__crest {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: flex; align-items: center; justify-content: center; gap: .3rem;
    min-width: 8.4rem; height: 4.4rem; padding: 0 1.4rem; border-radius: 50%;
    border: 4px solid transparent;
    background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--inv-primary) 80%, #000), var(--inv-shade)) padding-box, var(--mg-gilt-bg) border-box;
    box-shadow: 0 0 0 1px rgb(60 30 0 / .6), 0 12px 24px -8px rgb(0 0 0 / .85), 0 0 40px color-mix(in srgb, var(--inv-accent) 22%, transparent);
    font: 600 1.9rem/1 var(--mg-didone); color: var(--mg-gold-light);
}
.mg-scene-grand__crest i { font: italic 500 1.2rem/1 var(--mg-serif); }
/* a side drape gathered towards the wings, tied back with a gold tassel */
.mg-scene-wing { position: absolute; inset: 0; }
.mg-scene-drape { background-size: 100% 100%, 200% 100%, 100% 100%; }
.mg-scene-wing--left { filter: drop-shadow(4px 0 10px rgb(0 0 0 / .65)); }
.mg-scene-wing--right { filter: drop-shadow(-4px 0 10px rgb(0 0 0 / .65)); }
.mg-scene-wing--left .mg-scene-drape { clip-path: polygon(0 0, 100% 0, 92% 18%, 62% 40%, 30% 58%, 42% 72%, 68% 100%, 0 100%); }
.mg-scene-wing--right .mg-scene-drape { background-position: 0 0, 100% 0, 0 0; clip-path: polygon(100% 0, 0 0, 8% 18%, 38% 40%, 70% 58%, 58% 72%, 32% 100%, 100% 100%); }
.mg-scene-drape__tie { position: absolute; top: 55%; width: 14%; height: auto; aspect-ratio: 16 / 40; overflow: visible; }
.mg-scene-wing--left .mg-scene-drape__tie { left: 25%; }
.mg-scene-wing--right .mg-scene-drape__tie { right: 25%; }
.inv-scene__art > .mg-scene-svg { height: auto; aspect-ratio: 400 / 92; overflow: visible; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .65)); }
.inv-scene__art > .mg-scene-svg--valance { aspect-ratio: 400 / 96; }
/* the follow spot: a soft cone from the flies, screened onto the stage */
.inv-scene__layer:has(.mg-scene-beam) { mix-blend-mode: screen; }
.mg-scene-beam { position: absolute; inset: 0; filter: blur(5px); }
.mg-scene-beam::before {
    content: ''; position: absolute; inset: 0;
    clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
    background:
        radial-gradient(50% 14% at 50% 100%, rgb(255 236 196 / .5), transparent 80%),
        linear-gradient(180deg, rgb(255 236 196 / .5), rgb(255 230 180 / .16) 75%, rgb(255 230 180 / .06));
}
/* the names on a marquee board: gilt frame, a row of bulbs, a black board */
body.mg-body .inv-scene__card {
    top: 55%; isolation: isolate; aspect-ratio: auto; padding: 2.1rem 1.6rem 1.9rem; border-radius: 8px;
    -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    background: radial-gradient(circle, #fff7dc 0 2.3px, rgb(255 226 160 / .65) 3.3px, transparent 5.2px) 0 0 / 15px 15px space, var(--mg-gilt-bg);
    box-shadow: 0 0 44px color-mix(in srgb, var(--inv-accent) 30%, transparent), 0 30px 50px -16px rgb(0 0 0 / .95);
}
body.mg-body .inv-scene__card::after {
    content: ''; position: absolute; inset: 13px; z-index: -1; border-radius: 3px;
    background: radial-gradient(90% 120% at 50% 0, color-mix(in srgb, var(--inv-primary) 55%, var(--inv-background)), var(--inv-background));
    box-shadow: inset 0 0 0 1px var(--mg-line);
}
body.mg-body .inv-scene__card .inv-intro__label { color: var(--inv-text); font: 600 .62rem/1.4 var(--mg-didone); letter-spacing: .26em; text-transform: uppercase; }
body.mg-body .inv-scene__card .inv-intro__names { font-family: var(--mg-script); font-weight: 400; color: var(--mg-gold-light); text-shadow: 0 0 18px color-mix(in srgb, var(--inv-accent) 40%, transparent); }
body.mg-body .inv-scene__card .inv-intro__date { color: var(--inv-text); font: 600 .64rem/1.4 var(--mg-didone); letter-spacing: .2em; text-transform: uppercase; }
body.mg-body .inv-intro--scene .inv-intro__skip { background: color-mix(in srgb, var(--inv-background) 60%, transparent); color: var(--mg-gold-light); border-color: var(--mg-line); }

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .mg-scroll span, .mg-live__badge span { animation: none; }
    .mg-portal__curtain, .mg-portal__photo, .mg-portal__spot, .mg-marquee-name::before { animation: none !important; }
    .mg-drape, .mg-cover__stage, .mg-drapes .mg-valance, .mg-tieback { transition: none; }
    html.inv-opened .mg-drapes--cover .mg-drape--left, html.inv-opened .mg-drapes--cover .mg-drape--right,
    html.inv-opened .mg-drapes--cover .mg-valance { 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; }
}