/* ─────────────────────────────────────────────────────────────────────────
   XTRAVAGANZA — behind-the-scenes design tokens (single source of truth)
   Linked by every dark BTS page (and Dailies, cross-origin). Loaded LAST in
   the document so these canonical values win over any page's local :root,
   which stops the colours/fonts from drifting page to page.
   Neutrals and page-specific tokens stay in each page; only the shared
   brand accents + type live here.
   ───────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'PP Right Grotesk Tall';
  src: url('/fonts/pp-right-grotesk-tall-black.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
:root {
  /* neon "show" accents (the dark theme) */
  --magenta: #ff1f8f;
  --cyan: #1fe5ff;
  --pink: #ff1f8f;        /* alias some pages use for magenta */
  /* the ✕ logo inks (celluloid mark) */
  --x-magenta: #fa25da;
  --x-cyan: #05adf5;
  /* type system */
  --display: "PP Right Grotesk Tall", "Arial Narrow", system-ui, sans-serif;
  --disp: "PP Right Grotesk Tall", "Arial Narrow", system-ui, sans-serif;  /* alias */
  --body: "Manrope", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

/* ── canonical BTS header: back link → eyebrow → title, one spacing everywhere.
   h1 sets size/spacing only; each page keeps its own title colour. ── */
h1 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.6rem, 8vw, 5.5rem); line-height: 0.9; letter-spacing: 0.01em;
  margin: 0.7rem 0 0;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem; margin: 0;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--cyan);
}
.eyebrow .x { color: var(--magenta); }
.xmark {
  display: inline-block; width: 0.62em; height: 0.62em; flex: none;
  background-image:
    linear-gradient(45deg, transparent 46%, var(--magenta) 46% 54%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, var(--magenta) 46% 54%, transparent 54%);
}
.backbtn {
  display: table; /* block-level + shrink-to-fit: always its own line, tight border */
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--page, #f2edea);
  text-decoration: none; border: 1px solid rgba(242,237,234,.35);
  border-radius: 6px; padding: 0.55em 0.95em; margin: 0 0 1.6rem;
  transition: border-color .15s, color .15s;
}
.backbtn:hover { border-color: var(--magenta); color: var(--magenta); }