@font-face { font-family: "Grenze Gotisch"; src: url("../fonts/masque/grenze-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Gelasio"; src: url("../fonts/masque/gelasio-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Gelasio"; src: url("../fonts/masque/gelasio-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Federo"; src: url("../fonts/masque/federo-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* MASQUERADE (theme key "masque"): costume and masked parties. Intro: a mask on a ribboned stick held up against dark
   velvet, sequins catching the light; tap and the mask is lifted away. Cover: the mask crowning the page, the photo in
   an arched frame with a filigree edge. Sections as velvet cards with a fine metallic edge. The mask is original SVG
   (core/themes/masque/_parts.php), coloured by the palette: --gold (mask), --gold-hi (highlights), --gem, --plume.
   Palettes: Masquerade Gold (balls, debuts, galas), Halloween Night, Mardi Gras.
   Type: Grenze Gotisch (names, titles) · Gelasio (reading) · Federo (capitals). */
:root {
  --bg: #120d14; --bg-2: #24162a; --card: #1b1220; --paper: #22172a; --ink: #f3e9d6; --muted: #bfae98; --line: rgba(243, 233, 214, .14);
  --gold: #d4af5a; --gold-hi: #f6dfa0; --gem: #9b1d3e; --plume: #7b1e3a; --accent: #d4af5a; --accent-ink: #120d14;
  --display: "Grenze Gotisch", Georgia, serif; --text: "Gelasio", Georgia, serif; --caps: "Federo", "Helvetica Neue", Arial, sans-serif;
  --radius: 4px; --maxw: 540px;
}
body { font-family: var(--text); font-size: 1.06rem; color: var(--ink); background: radial-gradient(120% 70% at 50% 0%, var(--bg-2), var(--bg) 70%) fixed; background-color: var(--bg); }

/* ---------- the mask ---------- */
.mq-mask { display: block; width: 100%; height: auto; overflow: visible; }
.mq-face { fill: var(--gold); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45)); }
.mq-hi { fill: none; stroke: var(--gold-hi); stroke-width: 2.5; stroke-linecap: round; opacity: .7; }
.mq-fil { fill: none; stroke: color-mix(in srgb, var(--gold) 55%, #000); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mq-gem { fill: var(--gem); stroke: var(--gold-hi); stroke-width: 1.4; }
.mq-plume path { fill: var(--plume); stroke: color-mix(in srgb, var(--plume) 60%, #fff); stroke-width: 1; }
.mq-stick { stroke: color-mix(in srgb, var(--gold) 70%, #000); stroke-width: 6; stroke-linecap: round; }
.mq-rib { fill: none; stroke: var(--gem); stroke-width: 4; stroke-linecap: round; }
.mq-seq { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mq-seq i { position: absolute; left: var(--x); top: var(--y); width: calc(7px * var(--s)); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--gold-hi), var(--gold) 60%, transparent 62%);
  opacity: .35; animation: mq-glint 3.6s ease-in-out var(--d) infinite; }
@keyframes mq-glint { 0%, 100% { opacity: .2; transform: scale(.8); } 50% { opacity: .9; transform: scale(1.15); } }

/* ---------- intro ---------- */
.mq-intro { --intro-ms: 1900; overflow: hidden; background: radial-gradient(70% 55% at 50% 42%, var(--bg-2), var(--bg) 80%); transition: opacity .6s ease 1.2s, visibility 0s linear 1.9s; }
.mq-start { position: relative; z-index: 2; display: grid; justify-items: center; gap: 14px; width: min(76vw, 300px); padding: 10px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.mq-for { font: 600 1.7rem/1.1 var(--display); color: var(--gold-hi); } .mq-for b { font-weight: 600; }
.mq-held { display: block; width: 100%; transform-origin: 90% 95%; animation: mq-hold 4s ease-in-out infinite; transition: transform 1s cubic-bezier(.5, -0.2, .3, 1), opacity .6s ease .4s; }
@keyframes mq-hold { 50% { transform: rotate(-3deg) translateY(-4px); } }
.mq-k { font: 400 .8rem var(--caps); letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.mq-tap { font: 400 .68rem var(--caps); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); animation: mq-pulse 2.4s ease-in-out infinite; }
@keyframes mq-pulse { 50% { opacity: .4; } }
.is-opening .mq-held { animation: none; transform: translate(40%, -120%) rotate(28deg) scale(.8); opacity: 0; }
.is-opening .mq-k, .is-opening .mq-tap, .is-opening .mq-for { opacity: 0; transition: opacity .3s; animation: none; }
@media (prefers-reduced-motion: reduce) { .mq-held, .mq-tap, .mq-seq i { animation: none !important; } }

/* ---------- cover ---------- */
.t-masque .mq-hero { position: relative; display: block; min-height: 100svh; padding: calc(36px + env(safe-area-inset-top)) var(--gutter) 60px; text-align: center; overflow: hidden; }
.t-masque .mq-hero > * { max-width: 460px; }
.mq-hero > .mq-seq { bottom: 55%; }   /* sequins stay up by the mask, never over the text */
.mq-mask.is-crown { position: relative; width: min(64vw, 250px); margin: 0 auto 6px; }
.mq-hero.has-media .mq-mask.is-crown { width: min(48vw, 190px); margin-bottom: -26px; z-index: 2; }
.mq-frame { position: relative; width: min(66vw, 268px); aspect-ratio: .78; margin: 0 auto 24px; padding: 3px; border-radius: 999px 999px 6px 6px;
  background: linear-gradient(140deg, var(--gold-hi), var(--gold) 40%, color-mix(in srgb, var(--gold) 60%, #000) 70%, var(--gold-hi)); }
.mq-frame::after { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(246, 223, 160, .55); border-radius: 999px 999px 4px 4px; pointer-events: none; }
.mq-ph { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 999px 999px 4px 4px; background: var(--paper); }
.mq-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mq-ph .ph-slot { border-radius: 999px 999px 4px 4px; }
.mq-hero .hero-media-tag { bottom: 14px; font-size: .55rem; }
.mq-hero .hero-guest { margin: 0 0 4px; font: 600 1.6rem/1.1 var(--display); color: var(--gold-hi); } .mq-hero .hero-guest b { font-weight: 600; }
.mq-hero .hero-k, .t-masque .sh-k { margin: 0; font: 400 .7rem var(--caps); letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.t-masque .hero-t { margin: 8px 0 0; font: 600 clamp(3rem, 14vw, 4.2rem)/1.02 var(--display); color: var(--ink); text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.t-masque .hero-t span { display: block; }
.t-masque .hero-t i { display: block; font: italic 400 .36em/1.6 var(--text); color: var(--gold); }
.mq-hero .hero-line { margin: 14px auto 0; max-width: 21em; font-style: italic; color: var(--muted); }
.mq-when { display: grid; gap: 4px; margin: 20px auto 0; padding: 12px 0; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); max-width: 320px !important; }
.mq-when span:first-child { font: 400 .78rem var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi); }
.mq-when span:last-child { font-style: italic; color: var(--muted); }
.t-masque .hero-cta, .t-masque .rs-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; margin-top: 24px; padding: 12px 38px; border: 0; border-radius: 2px;
  background: linear-gradient(110deg, var(--gold-hi), var(--gold) 50%, var(--gold-hi)); color: var(--accent-ink); font: 400 .78rem var(--caps); letter-spacing: .26em; text-transform: uppercase; }

/* ---------- sections: velvet cards ---------- */
.t-masque .s:not(.s-hero):not(.s-closing) { position: relative; width: calc(100% - 24px); max-width: 600px; margin: 0 auto 26px; padding: 56px 22px 46px; border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  background: radial-gradient(90% 60% at 50% 0%, var(--paper), var(--card)); box-shadow: inset 0 0 0 6px var(--card), inset 0 0 0 7px color-mix(in srgb, var(--gold) 30%, transparent); }
.t-masque .s-hero + .s { margin-top: 10px; }
.t-masque .sh::before { content: "✦"; display: block; margin-bottom: 10px; font-size: .9rem; color: var(--gold); letter-spacing: .5em; }
.t-masque .sh-t { margin-top: 4px; font: 600 clamp(2.4rem, 11vw, 3.1rem)/1.05 var(--display); color: var(--ink); }
.t-masque .cd-u b { font: 600 clamp(2.4rem, 12vw, 3.2rem)/1 var(--display); color: var(--gold-hi); }
.t-masque .cd-u span { font: 400 .58rem var(--caps); letter-spacing: .24em; }
.t-masque .btn-line { min-height: 46px; border-color: var(--gold); color: var(--gold-hi); border-radius: 2px; font: 400 .66rem var(--caps); letter-spacing: .22em; text-transform: uppercase; }
.t-masque .btn-line:hover { background: var(--gold); color: var(--accent-ink); border-color: var(--gold); }
.t-masque .tl-time { color: var(--gold); font: 400 .78rem var(--caps); letter-spacing: .08em; padding-top: 4px; }
.t-masque .vn-c, .t-masque .dr-roles > div, .t-masque .rs, .t-masque .rs-done, .t-masque .gl-c, .t-masque .gl-it { border: 1px solid var(--line); border-radius: 2px; background: color-mix(in srgb, var(--card) 70%, var(--bg)); }
.t-masque .vn-l, .t-masque .dr-roles dt, .t-masque .bio-r, .t-masque .tml-d { font: 400 .64rem var(--caps); letter-spacing: .2em; color: var(--gold); }
.t-masque .vn-n, .t-masque .pp-h, .t-masque .tml-t { font: 600 1.6rem/1.15 var(--display); }
.t-masque .f-in, .t-masque .ch span { border-radius: 2px; background: var(--bg); }
.t-masque .rs-btn { width: 100%; }
.t-masque .faq summary { font-size: 1.12rem; }
.t-masque .gl-btn { background: var(--gold); color: var(--accent-ink); }
.t-masque .gal-i img, .t-masque .gal-ph { border-radius: 2px; box-shadow: 0 0 0 1px var(--gold); }
.t-masque .tml::before { background: linear-gradient(var(--gold), transparent); }
.t-masque .tml-dot { background: var(--gold); box-shadow: 0 0 0 3px var(--card); }
.t-masque .sw-dot { box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--gold); }

/* ---------- closing ---------- */
.t-masque .mq-end { text-align: center; margin-bottom: 110px; }
.mq-mask.is-small { width: 130px; margin: 0 auto 18px; }
.t-masque .cl-line { font-style: italic; font-size: 1.3rem; text-wrap: balance; }
.t-masque .cl-sign { font: 600 2.6rem/1.1 var(--display); color: var(--gold-hi); }
.t-masque .cl-tag { font: 400 .68rem var(--caps); letter-spacing: .2em; color: var(--muted); }