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

:root {
    /* Golden Night — ivory drapes · champagne light · warm gold (sampled from the intro film) */
    --white: #fffdf9;
    --ivory: #faf7f1;
    --ivory-2: #f4efe6;
    --cream: #ece3d4;
    --sand: #ded2bd;
    --champagne: #f2e6cd;
    --gold: #c9a961;
    --gold-soft: #dcc48c;
    --gold-deep: #a8873f;
    --gold-glow: rgba(201, 169, 97, .3);
    --sage: #8e9c86;
    --sage-soft: #c3ccbb;
    --ink: #4a4038;
    --ink-soft: #8a7c6b;
    --radius-sm: 1.15rem;
    --radius-md: 1.85rem;
    --radius-lg: 2.5rem;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100%;
}

body.midnight-gold {
    font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
    color: var(--ink);
    background:
        radial-gradient(ellipse 90% 42% at 50% 0%, rgba(242, 230, 205, .85), transparent 58%),
        radial-gradient(ellipse 70% 40% at 100% 70%, rgba(201, 169, 97, .1), transparent 55%),
        linear-gradient(180deg, var(--ivory) 0%, var(--ivory-2) 60%, #efe8dc 100%);
    min-height: 100vh;
    min-height: var(--app-vh, 100svh);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;

    /* Shared feature sections — ivory & champagne */
    --rsvp-accent: var(--gold-deep);
    --rsvp-text: var(--ink);
    --rsvp-muted: var(--ink-soft);
    --rsvp-border: rgba(201, 169, 97, .34);
    --rsvp-field: var(--white);
    --if-accent: var(--gold-deep);
    --if-accent-text: var(--white);
    --if-text: var(--ink);
    --if-muted: var(--ink-soft);
    --if-border: rgba(201, 169, 97, .32);
    --if-field: var(--white);
    --if-surface: rgba(201, 169, 97, .07);
    --if-punch: var(--ivory-2);
    --if-rsvp-bg: transparent;
    --if-lang-bg: rgba(255, 253, 249, .94);
}

html[dir="rtl"] body.midnight-gold {
    font-family: var(--inv-font-ar-body), 'Noto Naskh Arabic', serif;
}

a { color: inherit; text-decoration: none; }

body.midnight-gold .md-kicker,
body.midnight-gold .md-scroll,
body.midnight-gold .md-cta,
body.midnight-gold .md-time-hero,
body.midnight-gold .md-count-value,
body.midnight-gold .md-monogram,
body.midnight-gold .md-act-tag,
body.midnight-gold .md-footer-mono {
    font-family: 'Playfair Display', 'Cinzel', serif;
}

[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 1.05s cubic-bezier(.22, 1, .36, 1), transform 1.05s cubic-bezier(.22, 1, .36, 1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ── Type ── */
.md-kicker {
    font-size: .68rem;
    letter-spacing: .42em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--gold-deep);
}
.md-kicker--gold { color: var(--gold-deep); }
html[dir="rtl"] .md-kicker {
    letter-spacing: .1em;
    text-transform: none;
    font-family: var(--inv-font-ar-body), 'Noto Naskh Arabic', serif;
    font-size: .95rem;
}

.md-act-tag {
    text-align: center;
    font-size: .64rem;
    letter-spacing: .38em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.15rem;
}
html[dir="rtl"] .md-act-tag {
    letter-spacing: .12em;
    text-transform: none;
    font-size: .88rem;
    font-family: var(--inv-font-ar-body), 'Noto Naskh Arabic', serif;
}

.md-flourish {
    width: 160px;
    height: 18px;
    margin: 1rem auto;
    display: block;
    stroke: var(--gold);
    fill: var(--gold);
    stroke-width: 1;
}
.md-flourish--gold { stroke: var(--gold-deep); fill: var(--gold-deep); }

/* ── Floating petals & light ── */
.md-floaters {
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    overflow: hidden;
}
.md-floater {
    position: absolute;
    bottom: -12%;
    line-height: 1;
    color: var(--gold);
    will-change: transform, opacity;
    filter: drop-shadow(0 2px 6px rgba(120, 100, 70, .12));
}
.md-floater svg { display: block; width: 1em; height: 1em; fill: currentColor; }
.md-floater--a { animation: md-fly-a linear infinite; }
.md-floater--b { animation: md-fly-b linear infinite; }
.md-floater--c { animation: md-fly-c linear infinite; }
.md-floater--heart { color: var(--gold-soft); }
.md-floater--spark { color: var(--gold-deep); }
.md-floater--petal { color: var(--sage-soft); }

@keyframes md-fly-a {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 0; }
    8%   { opacity: .5; }
    50%  { transform: translate3d(42px, -55vh, 0) rotate(18deg) scale(1.08); }
    100% { transform: translate3d(-28px, -115vh, 0) rotate(-12deg) scale(.9); opacity: 0; }
}
@keyframes md-fly-b {
    0%   { transform: translate3d(0, 0, 0) rotate(8deg) scale(.85); opacity: 0; }
    10%  { opacity: .45; }
    45%  { transform: translate3d(-50px, -48vh, 0) rotate(-16deg) scale(1.1); }
    100% { transform: translate3d(36px, -118vh, 0) rotate(22deg) scale(.8); opacity: 0; }
}
@keyframes md-fly-c {
    0%   { transform: translate3d(0, 10vh, 0) rotate(-6deg); opacity: 0; }
    12%  { opacity: .4; }
    60%  { transform: translate3d(28px, -62vh, 0) rotate(10deg); }
    100% { transform: translate3d(-40px, -120vh, 0) rotate(-20deg); opacity: 0; }
}

/* ══════════════════════════════════════
   Act rail — vertical programme index
══════════════════════════════════════ */
.md-acts {
    position: fixed;
    top: 50%;
    inset-inline-start: .85rem;
    transform: translateY(-50%);
    z-index: 45;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .7rem .55rem;
    border-radius: 999px;
    background: rgba(255, 253, 249, .76);
    border: 1px solid rgba(201, 169, 97, .28);
    box-shadow: 0 12px 30px rgba(120, 100, 70, .1);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}
.md-acts-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.md-acts-num {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: 'Cinzel', serif;
    font-size: .56rem;
    letter-spacing: .04em;
    color: var(--ink-soft);
    border: 1px solid rgba(201, 169, 97, .35);
    transition: color .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.md-acts-name {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: .74rem;
    color: var(--ink-soft);
    opacity: 0;
    transition: max-width .45s ease, opacity .35s ease;
}
.md-acts-link:hover .md-acts-name,
.md-acts-link.is-current .md-acts-name {
    max-width: 7rem;
    opacity: 1;
}
.md-acts-link.is-current .md-acts-num {
    color: var(--white);
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    border-color: var(--gold-deep);
    box-shadow: 0 4px 14px rgba(168, 135, 63, .3);
}

@media (max-width: 720px) {
    .md-acts {
        inset-inline-start: .35rem;
        gap: .4rem;
        padding: .5rem .3rem;
    }
    .md-acts-num {
        width: .52rem;
        height: .52rem;
        font-size: 0;
        border-width: 1px;
    }
    .md-acts-name { display: none; }
    .md-acts-link.is-current .md-acts-num { transform: scale(1.35); }
}

/* ══════════════════════════════════════
   Act I — the drapes part
══════════════════════════════════════ */
.md-stage { position: relative; z-index: 1; }

.md-hero {
    position: relative;
    min-height: 100svh;
    min-height: var(--app-vh, 100svh);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    color: var(--ink);
    background:
        linear-gradient(180deg, rgba(250, 247, 241, .1) 0%, rgba(250, 247, 241, .55) 48%, rgba(250, 247, 241, .97) 100%),
        var(--md-hero) center 26% / cover no-repeat;
}
.md-hero--video {
    background:
        linear-gradient(180deg, rgba(250, 247, 241, .08) 0%, rgba(250, 247, 241, .92) 100%),
        var(--ivory);
}
.md-hero .inv-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 26%;
    z-index: 0;
    pointer-events: none;
}
.md-hero-veil {
    position: absolute;
    inset: auto 0 0;
    height: 62%;
    background: linear-gradient(180deg, transparent, rgba(250, 247, 241, .68) 42%, rgba(250, 247, 241, .99));
    pointer-events: none;
    z-index: 1;
}
.md-beam {
    position: absolute;
    top: -14%;
    left: 50%;
    width: min(30rem, 92vw);
    height: 88%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(255, 250, 232, .8), rgba(242, 230, 205, .3) 52%, transparent 84%);
    clip-path: polygon(42% 0, 58% 0, 96% 100%, 4% 100%);
    filter: blur(8px);
    pointer-events: none;
    z-index: 1;
    animation: md-beam-sway 9s ease-in-out infinite;
}
@keyframes md-beam-sway {
    0%, 100% { opacity: .5; transform: translateX(-50%) skewX(-1.5deg); }
    50% { opacity: .85; transform: translateX(-50%) skewX(1.5deg); }
}
.md-hero-inner {
    position: relative;
    z-index: 3;
    width: min(34rem, calc(100% - 3rem));
    padding: 0 0 4.5rem;
}
.md-name {
    font-family: 'Great Vibes', cursive;
    font-size: clamp(3rem, 12.5vw, 5.4rem);
    font-weight: 400;
    line-height: .95;
    color: #3f362e;
    text-shadow: 0 2px 22px rgba(255, 253, 249, .9), 0 0 46px rgba(255, 250, 232, .7);
}
html[dir="rtl"] .md-name {
    font-family: var(--inv-font-ar-names), 'Aref Ruqaa', serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 10.5vw, 4.4rem);
}
.md-amp {
    margin: .3rem 0 .1rem;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.6rem;
    color: var(--gold-deep);
}
.md-tagline {
    margin: 1.1rem auto 0;
    max-width: 22rem;
    font-style: italic;
    font-size: clamp(1.05rem, 3.2vw, 1.25rem);
    line-height: 1.75;
    color: #5f5346;
    text-shadow: 0 1px 12px rgba(255, 253, 249, .85);
}
.md-scroll {
    display: inline-block;
    margin-top: 1.7rem;
    font-size: .7rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--gold-deep);
    border-bottom: 1px solid rgba(201, 169, 97, .7);
    padding-bottom: .42rem;
}
html[dir="rtl"] .md-scroll {
    letter-spacing: .06em;
    text-transform: none;
    font-size: .95rem;
}

/* ══════════════════════════════════════
   Act II — invitation card
══════════════════════════════════════ */
.md-invite {
    padding: 4rem 1.25rem 3.5rem;
    background: radial-gradient(ellipse 80% 45% at 50% 0%, rgba(242, 230, 205, .7), transparent 62%);
}
.md-card {
    position: relative;
    max-width: 28rem;
    margin: 0 auto;
    padding: 2.8rem 1.6rem 3rem;
    text-align: center;
    border-radius: var(--radius-md);
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 40% at 50% 0%, rgba(242, 230, 205, .85), transparent 62%),
        linear-gradient(170deg, var(--white), #f8f2e8);
    box-shadow:
        0 26px 60px rgba(120, 100, 70, .14),
        0 0 0 1px rgba(201, 169, 97, .28);
}
.md-card::before {
    content: '';
    position: absolute;
    inset: .7rem;
    border-radius: calc(var(--radius-md) - .55rem);
    border: 1px solid rgba(201, 169, 97, .22);
    pointer-events: none;
}
.md-monogram {
    margin: .9rem 0 1.15rem;
    letter-spacing: .3em;
    color: var(--gold-deep);
    font-size: 1.05rem;
}
.md-invite-copy {
    max-width: 22rem;
    margin: 0 auto 1.4rem;
    font-size: 1.12rem;
    line-height: 1.95;
    font-style: italic;
    color: #6b5f52;
}
.md-names-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: .45rem .7rem;
    font-family: 'Great Vibes', cursive;
    font-size: clamp(1.9rem, 6vw, 2.6rem);
    font-weight: 400;
    color: #3f362e;
}
html[dir="rtl"] .md-names-line {
    font-family: var(--inv-font-ar-names), 'Aref Ruqaa', serif;
    font-weight: 700;
}
.md-names-line em {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--gold-deep);
    font-size: .7em;
}
.md-date-hero {
    margin-top: .35rem;
    font-size: 1.35rem;
    color: var(--ink);
}
.md-time-hero {
    margin-top: .45rem;
    letter-spacing: .16em;
    font-size: .82rem;
    color: var(--gold-deep);
}
html[dir="rtl"] .md-time-hero { letter-spacing: .04em; }
.md-venue-hero {
    margin-top: 1.2rem;
    font-size: 1.2rem;
    color: var(--ink);
}
.md-venue-sub {
    margin-top: .3rem;
    font-size: .95rem;
    color: var(--ink-soft);
}
.md-cta {
    display: inline-block;
    margin-top: 1.6rem;
    padding: .9rem 2rem;
    border-radius: 999px;
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--white);
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    box-shadow: 0 14px 30px rgba(168, 135, 63, .26);
    transition: transform .2s ease, box-shadow .2s ease;
}
html[dir="rtl"] .md-cta {
    letter-spacing: .04em;
    text-transform: none;
    font-size: .95rem;
}
.md-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(168, 135, 63, .32); }

/* ══════════════════════════════════════
   Act III — portrait in the light
══════════════════════════════════════ */
.md-portrait {
    padding: 2rem 1.25rem 3.5rem;
    text-align: center;
}
.md-portrait-frame {
    position: relative;
    max-width: 21rem;
    margin: 0 auto;
    border-radius: 46% 46% var(--radius-lg) var(--radius-lg) / 34% 34% var(--radius-lg) var(--radius-lg);
    overflow: hidden;
    box-shadow:
        0 28px 60px rgba(120, 100, 70, .18),
        0 0 0 1px rgba(201, 169, 97, .35);
}
.md-portrait-beam {
    position: absolute;
    top: -30%;
    left: 50%;
    width: 150%;
    height: 90%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 250, 232, .75), transparent 62%);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 2;
    animation: md-beam-pulse 6s ease-in-out infinite;
}
@keyframes md-beam-pulse {
    0%, 100% { opacity: .45; }
    50% { opacity: .85; }
}
.md-portrait-frame img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center 18%;
    filter: saturate(.96) brightness(1.02);
}
.md-portrait-frame figcaption {
    position: absolute;
    inset: auto 0 1.1rem;
    z-index: 3;
    font-family: 'Great Vibes', cursive;
    font-size: 1.65rem;
    color: var(--white);
    text-shadow: 0 4px 18px rgba(90, 74, 50, .55);
}
html[dir="rtl"] .md-portrait-frame figcaption {
    font-family: var(--inv-font-ar-names), 'Aref Ruqaa', serif;
    font-size: 1.35rem;
}

/* ══════════════════════════════════════
   Act IV — countdown cards
══════════════════════════════════════ */
.md-countdown-wrap {
    padding: 2rem 1.25rem 3.6rem;
    text-align: center;
}
.md-countdown {
    margin: 1.6rem auto 0;
    max-width: 30rem;
    display: flex;
    justify-content: center;
    gap: .7rem;
    flex-wrap: wrap;
}
.md-count-item {
    position: relative;
    min-width: 4.6rem;
    padding: 1.05rem .7rem .9rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, var(--white), #f8f2e7);
    border: 1px solid rgba(201, 169, 97, .24);
    box-shadow: 0 12px 26px rgba(120, 100, 70, .1);
}
.md-count-value {
    font-size: 1.65rem;
    font-weight: 500;
    color: var(--gold-deep);
}
.md-count-label {
    margin-top: .3rem;
    font-size: .6rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
html[dir="rtl"] .md-count-label {
    letter-spacing: 0;
    text-transform: none;
    font-size: .78rem;
}
.md-count-done {
    font-style: italic;
    font-size: 1.3rem;
    color: var(--gold-deep);
}

/* ══════════════════════════════════════
   Feature acts — shared sections, ivory themed
══════════════════════════════════════ */
.md-feature { position: relative; }
.md-feature--rsvp {
    background: radial-gradient(ellipse 75% 50% at 50% 0%, rgba(242, 230, 205, .8), transparent 62%);
}

body.midnight-gold .inv-if-title { color: #3f362e; }
body.midnight-gold .inv-if-kicker {
    color: var(--gold-deep);
    letter-spacing: .28em;
}
body.midnight-gold .inv-if-note,
body.midnight-gold .inv-if-welcome-text,
body.midnight-gold .inv-if-gratitude-text,
body.midnight-gold .inv-if-notes-body {
    color: #6b5f52;
}

/* Open sections — no cards */
body.midnight-gold .inv-if-welcome,
body.midnight-gold .inv-if-notes,
body.midnight-gold .inv-if-gratitude {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    max-width: min(34rem, 100%);
    margin-inline: auto;
    padding-block: 3.25rem;
    text-align: center;
}

body.midnight-gold .inv-if-welcome {
    border-block: 0 !important;
}

body.midnight-gold .inv-if-welcome::before,
body.midnight-gold .inv-if-gratitude::before {
    content: '✦';
    display: block;
    margin: 0 auto .85rem;
    color: var(--gold);
    font-size: .85rem;
    opacity: .75;
}

body.midnight-gold .inv-if-welcome-text,
body.midnight-gold .inv-if-gratitude-text {
    max-width: 26rem;
    margin-inline: auto;
    font-size: clamp(1.12rem, 3.2vw, 1.35rem);
    line-height: 2;
    font-style: italic;
}

body.midnight-gold .inv-if-notes-body {
    margin-top: 1.5rem;
    max-width: 22rem;
    margin-inline: auto;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    text-align: center;
    font-size: 1.05rem;
    line-height: 2.15;
}

body.midnight-gold .inv-if-guestbook-entry {
    border: 0;
    border-bottom: 1px solid rgba(201, 169, 97, .28);
    background: transparent;
    box-shadow: none;
    border-radius: 0 !important;
    padding: 1.1rem 0;
}

body.midnight-gold .inv-if-guestbook-entry:last-of-type {
    border-bottom: 0;
}

body.midnight-gold .inv-if-guestbook-entry strong,
body.midnight-gold .inv-if-guestbook-badge {
    color: var(--gold-deep);
}
body.midnight-gold .inv-if-field label {
    color: var(--ink-soft);
}
body.midnight-gold .inv-if-field input,
body.midnight-gold .inv-if-field textarea,
body.midnight-gold .ml-rsvp input,
body.midnight-gold .ml-rsvp textarea,
body.midnight-gold .ml-rsvp select {
    background: var(--white);
    border: 1px solid rgba(201, 169, 97, .32);
    color: var(--ink);
}
body.midnight-gold .inv-if-submit,
body.midnight-gold .ml-rsvp-submit {
    background: linear-gradient(135deg, var(--gold), var(--gold-deep)) !important;
    color: var(--white) !important;
    border: 0 !important;
    box-shadow: 0 14px 30px rgba(168, 135, 63, .26);
}
body.midnight-gold .inv-if-guestbook-mode span {
    border: 1px solid rgba(201, 169, 97, .32);
    color: var(--ink-soft);
    background: var(--white);
}
body.midnight-gold .inv-if-guestbook-mode input:checked + span,
body.midnight-gold .inv-if-voice-btn--record {
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    color: var(--white);
}
body.midnight-gold .inv-if-lang {
    background: rgba(255, 253, 249, .94);
    border-color: rgba(201, 169, 97, .35);
}
body.midnight-gold .inv-if-lang a { color: var(--ink-soft); }
body.midnight-gold .inv-if-lang a.is-active {
    background: var(--gold-deep);
    color: var(--white);
}
body.midnight-gold .inv-if-map-frame {
    border: 1px solid rgba(201, 169, 97, .3);
    box-shadow: 0 18px 40px rgba(120, 100, 70, .12);
}
body.midnight-gold .inv-if-map-frame iframe {
    filter: saturate(.92) contrast(1.02);
}
body.midnight-gold .inv-if-map-link {
    color: var(--gold-deep);
    border-bottom-color: rgba(201, 169, 97, .6);
}
body.midnight-gold .inv-if-watermark { color: rgba(74, 64, 56, .28); }

/* Programme timeline — gold markers on a champagne thread */
body.midnight-gold .inv-if-programme--timeline .inv-if-programme-list::before {
    background: linear-gradient(180deg, transparent, rgba(201, 169, 97, .45) 12%, rgba(201, 169, 97, .45) 88%, transparent);
}
body.midnight-gold .inv-if-programme--timeline .inv-if-programme-item::before {
    background: var(--gold);
}
body.midnight-gold .inv-if-programme--timeline .inv-if-programme-item.is-active::before {
    background: var(--gold-deep);
    box-shadow: 0 0 0 .38rem rgba(201, 169, 97, .18);
}
body.midnight-gold .inv-if-programme--timeline .inv-if-programme-item.is-active .inv-if-programme-name {
    color: var(--gold-deep);
}
body.midnight-gold .inv-if-programme-rose {
    color: #c9a961;
}
body.midnight-gold .inv-if-programme-rose.is-lit {
    color: #a8873f;
}
body.midnight-gold .inv-if-programme-time { color: var(--ink); }
body.midnight-gold .inv-if-programme-name { color: #3f362e; }
body.midnight-gold .inv-if-programme-desc { color: var(--ink-soft); }

/* Entry ticket */
body.midnight-gold .inv-if-ticket {
    background: linear-gradient(170deg, var(--white), #f8f2e7);
    box-shadow:
        0 24px 54px rgba(120, 100, 70, .16),
        0 0 0 1px rgba(201, 169, 97, .3);
}
body.midnight-gold .inv-if-ticket-names { color: #3f362e; font-family: 'Great Vibes', cursive; }
html[dir="rtl"] body.midnight-gold .inv-if-ticket-names {
    font-family: var(--inv-font-ar-names), 'Aref Ruqaa', serif;
}
body.midnight-gold .inv-if-ticket-label { color: var(--gold-deep); }
body.midnight-gold .inv-if-ticket-stub { background: rgba(201, 169, 97, .08); }
body.midnight-gold .inv-if-ticket-qr {
    background: var(--white);
    box-shadow: 0 8px 20px rgba(120, 100, 70, .14);
}
body.midnight-gold .inv-if-ticket-serial { color: var(--gold-deep); }

/* Constellation gallery — champagne light instead of a night sky */
body.midnight-gold .inv-if-gallery--constellation {
    background:
        radial-gradient(ellipse at 50% 18%, rgba(255, 250, 232, .95) 0%, transparent 55%),
        linear-gradient(180deg, #f8f3e9, #f2ece0);
    max-width: none;
    padding-block: 4.5rem;
}
body.midnight-gold .inv-if-gallery--constellation .inv-if-title { color: #3f362e; }
body.midnight-gold .inv-if-gallery--constellation .inv-if-kicker { color: var(--gold-deep); }
body.midnight-gold .inv-if-constellation-hint { color: var(--ink-soft); }
body.midnight-gold .inv-if-constellation-sky {
    background: radial-gradient(ellipse at 50% 48%, rgba(242, 230, 205, .7), transparent 58%);
}
body.midnight-gold .inv-if-constellation-dust,
body.midnight-gold .inv-if-constellation-dust--b,
body.midnight-gold .inv-if-constellation-dust--c {
    background-image:
        radial-gradient(1.6px 1.6px at 12% 22%, rgba(168, 135, 63, .5), transparent),
        radial-gradient(1.2px 1.2px at 78% 18%, rgba(168, 135, 63, .42), transparent),
        radial-gradient(1.6px 1.6px at 42% 78%, rgba(168, 135, 63, .38), transparent),
        radial-gradient(1.2px 1.2px at 88% 62%, rgba(168, 135, 63, .4), transparent),
        radial-gradient(1.4px 1.4px at 22% 58%, rgba(201, 169, 97, .45), transparent),
        radial-gradient(1.2px 1.2px at 62% 34%, rgba(201, 169, 97, .4), transparent);
}
body.midnight-gold .inv-if-constellation-glow {
    background: radial-gradient(ellipse at center, rgba(255, 250, 232, .95), transparent 72%);
}
body.midnight-gold .inv-if-constellation-star img {
    filter: brightness(.98) saturate(.92);
}
body.midnight-gold .inv-if-constellation-star:hover img {
    filter: brightness(1.04) saturate(1);
}
body.midnight-gold .inv-if-constellation-lines line { stroke: rgba(201, 169, 97, .3); }
body.midnight-gold .inv-if-constellation-lines line.is-lit { stroke: rgba(168, 135, 63, .8); }
body.midnight-gold .inv-if-constellation-counter { color: var(--gold-deep); }
body.midnight-gold .inv-if-constellation-frame {
    box-shadow:
        0 26px 56px rgba(120, 100, 70, .18),
        0 0 0 1px rgba(201, 169, 97, .45);
}
body.midnight-gold .inv-if-constellation-btn {
    border-color: rgba(201, 169, 97, .5);
    background: rgba(255, 253, 249, .9);
    color: var(--gold-deep);
}
body.midnight-gold .inv-if-constellation-star {
    box-shadow: 0 0 0 1.5px rgba(201, 169, 97, .35), 0 6px 16px rgba(120, 100, 70, .12);
}
body.midnight-gold .inv-if-constellation-star.is-active {
    box-shadow:
        0 0 0 2px var(--gold),
        0 0 22px rgba(201, 169, 97, .45);
}

/* ── Footer — the drapes fall ── */
.md-footer {
    position: relative;
    padding: 4.5rem 1.25rem 5.2rem;
    text-align: center;
    background: linear-gradient(180deg, rgba(242, 230, 205, .8), #f4eee3 45%, #efe7da);
    color: var(--ink-soft);
    font-size: .92rem;
    overflow: hidden;
}
.md-footer-mono {
    margin-bottom: .75rem;
    letter-spacing: .36em;
    color: var(--gold-deep);
    font-size: .95rem;
}
.md-footer-tag {
    margin-top: .9rem;
    font-size: .76rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gold);
}
html[dir="rtl"] .md-footer-tag {
    letter-spacing: .06em;
    text-transform: none;
    font-size: .9rem;
}

/* ── Gate — ivory film frame ── */
@keyframes gate-spin { to { transform: rotate(360deg); } }
.gate-spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid rgba(201, 169, 97, .25);
    border-top-color: var(--gold-deep);
    animation: gate-spin .9s linear infinite;
}
#midnight-gate {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--ivory);
    height: var(--app-vh, 100svh);
    transition: opacity .7s ease;
}
#midnight-gate.is-fading { opacity: 0; pointer-events: none; }
#midnight-gate.is-hidden { display: none; }
#midnight-gate video {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--ivory);
}
#midnight-gate .gate-loading,
#midnight-gate .gate-waiting {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#midnight-gate .gate-loading.is-active,
#midnight-gate .gate-waiting.is-active { display: flex; }
#midnight-gate .gate-loading {
    background: var(--ivory);
    color: var(--gold-deep);
    z-index: 3;
}
#midnight-gate .gate-loading-text {
    margin-top: 1.4rem;
    font-family: 'Cinzel', 'Amiri', serif;
    font-size: .75rem;
    letter-spacing: .32em;
    text-transform: uppercase;
}
html[dir="rtl"] #midnight-gate .gate-loading-text {
    letter-spacing: .06em;
    text-transform: none;
    font-size: .95rem;
}
#midnight-gate .gate-waiting {
    z-index: 4;
    cursor: pointer;
    gap: .85rem;
    background:
        radial-gradient(ellipse 62% 42% at 50% 50%, rgba(255, 250, 232, .55), transparent 72%),
        rgba(250, 247, 241, .28);
    -webkit-tap-highlight-color: transparent;
}
#midnight-gate .gate-waiting .tap-to-open {
    font-family: 'Cinzel', 'Amiri', serif;
    font-size: .85rem;
    color: #3f362e;
    border-bottom: 1px solid rgba(201, 169, 97, .85);
    padding-bottom: .45rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    text-shadow: 0 2px 16px rgba(255, 253, 249, .95);
}
html[dir="rtl"] #midnight-gate .gate-waiting .tap-to-open {
    letter-spacing: .06em;
    text-transform: none;
    font-size: 1.1rem;
    font-family: var(--inv-font-ar-body), 'Noto Naskh Arabic', serif;
}
.gate-hint {
    font-size: .88rem;
    color: #6b5f52;
    font-style: italic;
    text-shadow: 0 1px 12px rgba(255, 253, 249, .9);
}
#midnight-gate.is-playing .gate-waiting { display: none !important; }

.midnight-mute-btn {
    position: fixed;
    bottom: 1.4rem;
    right: 1.4rem;
    z-index: 40;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    border: 1px solid rgba(201, 169, 97, .5);
    background: rgba(255, 253, 249, .94);
    color: var(--gold-deep);
    cursor: pointer;
    font-size: 1rem;
    box-shadow: 0 10px 24px rgba(120, 100, 70, .14);
}
html[dir="rtl"] .midnight-mute-btn { right: auto; left: 1.4rem; }

.inv-if-showcase,
.inv-if-showcase-shell,
.inv-if-section {
    max-width: 100%;
    overflow-x: hidden;
}
.inv-if-showcase-viewport {
    min-width: 0 !important;
    overflow: hidden;
}

@media (min-width: 768px) {
    .md-card { padding: 3.2rem 2.3rem 3.4rem; }
    .md-count-item { min-width: 5.3rem; }
    .md-portrait-frame { max-width: 23rem; }
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .md-beam,
    .md-portrait-beam { animation: none !important; }
    html { scroll-behavior: auto; }
}