/* ═══════════════════════════════════════════════════════════════════════
   MasquePlay — Layout 06 · The Seam

   The page is built around one idea: two people, choosing separately,
   converging. A hairline "seam" runs down the spine of the page, the
   hero is two portraits leaning in from opposite edges, and the play
   stage puts your locked character above a seam and your partner's pool
   below it — a seam that ignites gold only when the match actually lands.

   The stage plays one beat at a time off [data-step] (scene → pick →
   swipe → reveal) and shows the outcome off [data-outcome]. Both mirror
   the real app's screens; see app.js for why each beat looks like it does.

   Self-contained: this file is the whole design system for layout 06.
   No inline <style> or style="" anywhere — the marketing CSP ships
   style-src 'self'. Dynamic values are set through the CSSOM instead.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  --bg-base: #0c0a10;
  --bg-surface: #141018;
  --bg-card: #1c1724;
  --bg-hover: #241e2e;

  --border: #2c2438;
  --border-strong: #44364e;

  --rose: #e8407a;
  --rose-hover: #f55590;
  --rose-glow: rgba(232, 64, 122, 0.32);
  --gold: #f0b440;
  --gold-soft: rgba(240, 180, 64, 0.24);
  --gold-glow: rgba(240, 180, 64, 0.3);
  --violet: #9b6dff;
  --violet-glow: rgba(155, 109, 255, 0.3);

  --text-primary: #f2eaf8;
  --text-secondary: #b8a8cc;
  --text-muted: #7a6a8e;
  --red: #f87171;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  --wrap: 1180px;
  --gutter: 26px;
  --transition: 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-slow: 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);

  /* The hero's glow, tokenised so a stage theme can re-colour it. */
  --halo:
    radial-gradient(ellipse 46% 40% at 50% 24%, rgba(155, 109, 255, 0.2), transparent 68%),
    radial-gradient(ellipse 60% 34% at 50% 78%, rgba(232, 64, 122, 0.14), transparent 66%);

  /* Per-section accent — overridden by [data-world] and .band-* below. */
  --accent: var(--rose);
  --accent-glow: var(--rose-glow);
}

/* Stage themes for /veil/ and /perigee/, set on <html> by
   build-stage-pages.mjs. The values are the app's own universe palettes
   (apps/app/public/css/main.css, [data-universe] blocks), so a stage page
   looks like the stage a couple will play in. Like the app, a theme only
   re-skins palette tokens: backgrounds, borders, the rose/violet accents and
   the glow. Gold stays gold everywhere. Keep these paired with the app. */
:root[data-stage-theme="veil"] {
  --bg-base: #0b0a08;
  --bg-surface: #15130d;
  --bg-card: #1d1a12;
  --bg-hover: #262218;
  --border: #2c2718;
  --border-strong: #463d26;
  --rose: #e58a3c;
  --rose-hover: #f09d50;
  --rose-glow: rgba(229, 138, 60, 0.32);
  --violet: #5cb89f;
  --violet-glow: rgba(92, 184, 159, 0.28);
  --halo:
    radial-gradient(ellipse 46% 40% at 50% 24%, rgba(240, 180, 64, 0.18), transparent 68%),
    radial-gradient(ellipse 60% 34% at 50% 78%, rgba(92, 184, 159, 0.14), transparent 66%);
}
/* White on candle-amber is too low-contrast; dark text, as on gold chips. */
:root[data-stage-theme="veil"] .button-primary,
:root[data-stage-theme="veil"] .button-primary:hover { color: #17120a; }

:root[data-stage-theme="perigee"] {
  --bg-base: #080b12;
  --bg-surface: #0f141c;
  --bg-card: #161d28;
  --bg-hover: #1e2632;
  --border: #223040;
  --border-strong: #35485e;
  --halo:
    radial-gradient(ellipse 46% 40% at 50% 24%, rgba(60, 200, 220, 0.18), transparent 68%),
    radial-gradient(ellipse 60% 34% at 50% 78%, rgba(90, 100, 220, 0.16), transparent 66%);
}

/* ── Reset ─────────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* Suppress the grey iOS flash; :active/:focus-visible already show state. */
  -webkit-tap-highlight-color: transparent;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.04; letter-spacing: -0.012em; }
p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── Shared primitives ─────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 90;
  padding: 10px 18px;
  background: var(--gold);
  color: #14100a;
  font-weight: 600;
  border-radius: var(--radius-full);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--transition);
}
.skip-link:focus { transform: translateY(0); }


/* The spine. A single hairline down the centre of the viewport, dim by
   default, lit gold for a moment when the demo match lands. */
.seam {
  position: fixed;
  top: 0; bottom: 0; left: 50%;
  z-index: 0;
  width: 1px;
  margin-left: -0.5px;
  background: linear-gradient(180deg, transparent, var(--border) 12%, var(--border) 88%, transparent);
  opacity: 0.55;
  transition: background var(--transition-slow), opacity var(--transition-slow);
  pointer-events: none;
}
body.is-lit .seam {
  opacity: 1;
  background: linear-gradient(180deg, transparent, var(--gold-soft) 10%, var(--gold) 50%, var(--gold-soft) 90%, transparent);
}

.eyebrow {
  margin: 0 0 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before { content: '✦'; margin-right: 10px; opacity: 0.7; }
.eyebrow-center { text-align: center; }

.rule-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rule-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-strong), transparent);
}
.rule-label span { color: var(--accent); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 27px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition), color var(--transition);
}
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.button-primary {
  background: var(--rose);
  color: #fff;
  box-shadow: 0 10px 34px var(--rose-glow);
}
.button-primary:hover { background: var(--rose-hover); box-shadow: 0 14px 40px var(--rose-glow); }

.button-ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.button-ghost:hover { border-color: var(--gold); color: var(--gold); background: rgba(240, 180, 64, 0.05); }

.button-small { padding: 10px 19px; font-size: 13.5px; }

/* Content stays readable without JavaScript. Only an initialized observer
   may opt a section into the scroll animation. The honeypot is separate. */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.is-pending { opacity: 0; transform: translateY(22px); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-pending { opacity: 1; transform: none; transition: none; }
}

/* The header is sticky, so in-page jumps need it cleared or the target
   lands underneath the bar. */
#main, #top, #play, #stage-demo, #stages, #worlds, #what-is-masqueplay, #questions, #invite { scroll-margin-top: 96px; }

.section { position: relative; z-index: 1; padding: 118px 0; }
.section-lede {
  max-width: 54ch;
  color: var(--text-secondary);
  font-size: 17px;
}

.section-heading { max-width: 720px; margin-bottom: 62px; }
.section-heading h2 { font-size: clamp(38px, 5.4vw, 62px); margin-bottom: 20px; }

.section-heading-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 46px;
  align-items: end;
  max-width: none;
}
.section-heading-split h2 { margin: 0; }

/* ── Header ────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 18px 0;
  transition: background var(--transition), border-color var(--transition), padding var(--transition);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  padding: 11px 0;
  background: rgba(12, 10, 16, 0.86);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}

.header-inner { display: flex; align-items: center; gap: 26px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: 0.02em;
}
.brand img { width: 46px; height: auto; }

.site-nav {
  display: flex;
  gap: 30px;
  margin-left: auto;
  font-size: 14.5px;
  color: var(--text-secondary);
}
.site-nav a {
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.site-nav a:hover { color: var(--text-primary); border-bottom-color: var(--gold); }

/* For returning testers. Deliberately a quiet text link beside the beta
   button, not a second button: new visitors are who the header converts. */
.header-signin {
  font-size: 14.5px;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.header-signin:hover { color: var(--text-primary); border-bottom-color: var(--gold); }

/* ── Hero ──────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  z-index: 1;
  padding: 92px 0 132px;
  overflow: hidden;
}

.hero-halo {
  position: absolute;
  inset: -20% -10% auto;
  height: 120%;
  background: var(--halo);
  pointer-events: none;
}

/* The two portraits leaning in from opposite edges: You and Them, before
   the page has told you which is which. */
.wing {
  position: absolute;
  top: 50%;
  z-index: 0;
  width: 26vw;
  max-width: 330px;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  opacity: 0.42;
  filter: saturate(0.78);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 26%, #000 62%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 26%, #000 62%, transparent);
}
.wing-left { left: -3vw; transform: translateY(-52%) rotate(-6deg); }
.wing-right { right: -3vw; transform: translateY(-46%) rotate(6deg); }

.hero-inner { position: relative; z-index: 2; text-align: center; }

/* Sized so the explicit <br> is the only break: the long line —
   "Tonight you get to be" — has to clear 21 characters without re-wrapping. */
.hero h1 {
  margin: 0 auto 26px;
  max-width: 26ch;
  font-size: clamp(30px, 9.4vw, 94px);
  font-weight: 400;
  line-height: 0.98;
}
/* The descriptor sits inside the h1 so the heading says what MasquePlay is;
   it keeps the eyebrow's look rather than the display face. */
.hero h1 .eyebrow { display: block; line-height: 1.5; }
.hero h1 em {
  display: inline-block;
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
}

.hero-lede {
  max-width: 58ch;
  margin: 0 auto 14px;
  color: var(--text-secondary);
  font-size: clamp(16px, 1.6vw, 19px);
}

/* The plain answer to "what is this?" for a visitor arriving cold from an ad. */
.hero-plain {
  max-width: 46ch;
  margin: 0 auto 30px;
  color: var(--text-primary);
  font-size: clamp(15px, 1.4vw, 17px);
}

/* The hero form drops the closing form's card: it sits on the hero itself. */
.hero .invite-form-hero {
  max-width: 540px;
  margin: 0 auto 48px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.hero .invite-form-hero .beta-offer { margin: 12px 0 0; }
.invite-form-hero .form-privacy { margin-top: 8px; }

.beta-offer { margin: 0; color: var(--text-secondary); font-size: 14px; }
.invite-form .beta-offer { margin-bottom: 18px; }

.ledger {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ledger li { padding: 0 18px; border-left: 1px solid var(--border-strong); }
.ledger li:first-child { border-left: 0; }

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 2;
  margin: 0;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Premise: what it isn't / what it is ───────────────────────────── */

.premise { padding-top: 40px; }

.premise-line {
  max-width: 20ch;
  margin: 0 auto 26px;
  text-align: center;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 400;
}
.premise-line em { font-style: italic; font-weight: 300; color: var(--gold); }

.premise-lede {
  max-width: 58ch;
  margin: 0 auto;
  text-align: center;
  font-size: 17px;
  color: var(--text-secondary);
}

/* ── The play: moves + interactive stage ───────────────────────────── */

.play-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 68px;
  align-items: start;
}

.moves { display: grid; gap: 4px; position: sticky; top: 108px; }

.move {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 8px;
  padding: 20px 20px 20px 4px;
  border-left: 1px solid var(--border);
  transition: border-color var(--transition), opacity var(--transition);
  opacity: 0.5;
}
.move h3 { font-size: 25px; margin-bottom: 5px; font-weight: 500; }
.move p { color: var(--text-secondary); font-size: 15.5px; line-height: 1.55; }
.move-num {
  padding-left: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  transition: color var(--transition);
}
.move.is-active { opacity: 1; border-left-color: var(--gold); }
.move.is-active .move-num { color: var(--gold); }
.move.is-done { opacity: 0.72; border-left-color: var(--border-strong); }

/* Stage shell */
.stage {
  --accent: var(--rose);
  --accent-glow: var(--rose-glow);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(170deg, rgba(28, 23, 36, 0.9), rgba(15, 12, 20, 0.9));
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.stage[data-world='veil'] { --accent: var(--violet); --accent-glow: var(--violet-glow); }
.stage[data-world='perigee'] { --accent: var(--gold); --accent-glow: var(--gold-glow); }

.stage-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(12, 10, 16, 0.5);
}
.stage-chips-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* A segmented toggle, not a row of pills: one track, three segments, and it
   never wraps. The labels are sized to fit one line at 320px. */
.stage-chips-set {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: rgba(12, 10, 16, 0.6);
}

.chip {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 15px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.chip:hover { color: var(--text-primary); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip.is-selected { color: #fff; background: var(--accent); }
.stage[data-world='perigee'] .chip.is-selected { color: #17120a; }

/* The running scene, held on screen from beat 02 onward. */
.scene-strip {
  display: none;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(240, 180, 64, 0.04);
}
.stage:not([data-step='scene']) .scene-strip { display: block; }
.scene-strip-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 3px;
}
.scene-strip-facet {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.35;
  color: var(--text-primary);
}

/* ── Beats ─────────────────────────────────────────────────────────── */

/* One beat is on screen at a time, driven by [data-step]. Without JS the
   markup's own data-step="scene" leaves beat 01 showing. */
.beat { display: none; padding: 22px 18px 6px; animation: beat-in 0.42s ease both; }
.stage[data-step='scene'] [data-beat='scene'],
.stage[data-step='pick'] [data-beat='pick'],
.stage[data-step='swipe'] [data-beat='swipe'],
.stage[data-step='reveal'] [data-beat='reveal'] { display: block; }

@keyframes beat-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.beat-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.beat-num { color: var(--gold); }
.beat-head small {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-align: right;
  margin-right: -0.12em;
}
.counter { color: var(--accent); }

.beat-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.beat-foot p { font-size: 12.5px; color: var(--text-muted); }

/* ── Beat 01 · the scene ───────────────────────────────────────────── */

.scenes { display: grid; gap: 8px; }

.scene-option {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(12, 10, 16, 0.4);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.scene-option:hover { border-color: var(--accent); background: rgba(12, 10, 16, 0.7); transform: translateY(-1px); }

.scene-radio {
  flex: none;
  width: 15px; height: 15px;
  margin-top: 4px;
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  transition: border-color var(--transition);
}
.scene-radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--transition);
}
.scene-option:hover .scene-radio { border-color: var(--accent); }
.scene-option.is-selected { border-color: var(--accent); background: rgba(12, 10, 16, 0.75); }
.scene-option.is-selected .scene-radio { border-color: var(--accent); }
.scene-option.is-selected .scene-radio::after { opacity: 1; }

.scene-body { display: block; }
.scene-body strong {
  display: block;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  margin-bottom: 2px;
}
.scene-body em {
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.44;
  color: var(--text-secondary);
}

/* ── Beat 02 · your pool ───────────────────────────────────────────── */

.pool { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.mask {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  aspect-ratio: 3 / 4;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.mask img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.mask-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 10, 16, 0) 38%, rgba(12, 10, 16, 0.9) 90%);
}
.mask-copy { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 8px; display: block; }
.mask-copy strong { font-family: var(--font-display); font-size: 19px; font-weight: 500; }
.mask-copy small { margin-left: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }

.mask:hover { border-color: var(--accent); transform: translateY(-3px); }

.mask-claim {
  position: absolute;
  z-index: 2;
  top: 9px; left: 9px;
  padding: 4px 9px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--transition);
}
.stage[data-world='perigee'] .mask-claim { color: #17120a; }
.mask.is-kept {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 12px 34px var(--accent-glow);
}
.mask.is-kept .mask-claim { opacity: 1; }

/* ── Beat 03 · their pool ──────────────────────────────────────────── */

.lane-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lane-label small {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-right: -0.14em;
}

.stage-seam {
  position: relative;
  height: 1px;
  margin: 14px 0 18px;
  background: linear-gradient(90deg, transparent, var(--border-strong) 18%, var(--border-strong) 82%, transparent);
  transition: background var(--transition-slow);
}
.stage-seam-node {
  position: absolute;
  top: 50%; left: 50%;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background var(--transition-slow), box-shadow var(--transition-slow), transform var(--transition-slow);
}

/* The card stack. Every face is visible — the secret is which one they
   kept, not what any of them look like. */
.deck {
  position: relative;
  height: 386px;
  margin-bottom: 16px;
  touch-action: pan-y;
}

.swipe {
  position: absolute;
  top: 0; left: 50%;
  width: 250px;
  height: 340px;
  margin-left: -125px;
  /* Scale from the top edge so the cards behind peek out at the bottom
     instead of shrinking away from it. */
  transform-origin: 50% 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--dx, 0px)) rotate(var(--rot, 0deg));
  transition: transform var(--transition), opacity var(--transition), border-color var(--transition), box-shadow var(--transition), filter var(--transition);
}
.swipe img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; user-select: none; -webkit-user-drag: none; }
.swipe-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 10, 16, 0) 26%, rgba(12, 10, 16, 0.72) 58%, rgba(12, 10, 16, 0.97) 86%);
}

.swipe.is-top { opacity: 1; pointer-events: auto; cursor: grab; z-index: 3; }
.swipe.is-top.is-dragging { transition: none; cursor: grabbing; }
.swipe.is-next { opacity: 1; z-index: 2; transform: translateY(26px) scale(0.94); filter: brightness(0.62); }
.swipe.is-third { opacity: 1; z-index: 1; transform: translateY(52px) scale(0.88); filter: brightness(0.42); }
.swipe.is-gone { opacity: 0; }

.swipe.is-flying-left { opacity: 0; transform: translateX(-460px) rotate(-22deg); }
.swipe.is-flying-right { opacity: 0; transform: translateX(460px) rotate(22deg); }

.swipe-copy { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; display: block; }
/* The personas' real scene-presence lines. app.js already trims them to a
   clean clause; the clamp is only a backstop so a card can never grow a
   paragraph. */
.swipe-copy em {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
  margin-bottom: 6px;
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.36;
  color: var(--text-primary);
}
.swipe-copy strong { font-family: var(--font-display); font-size: 22px; font-weight: 500; }
.swipe-copy small { margin-left: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }

.swipe-stamp {
  position: absolute;
  z-index: 2;
  top: 18px;
  padding: 5px 13px;
  border: 2px solid;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.swipe-stamp-like { right: 16px; color: var(--green, #2ed8a8); border-color: var(--green, #2ed8a8); transform: rotate(12deg); opacity: var(--like, 0); }
.swipe-stamp-nope { left: 16px; color: var(--red); border-color: var(--red); transform: rotate(-12deg); opacity: var(--nope, 0); }

.swipe-actions { display: flex; justify-content: center; gap: 16px; }
.swipe-btn {
  appearance: none;
  -webkit-appearance: none;
  width: 50px; height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: rgba(12, 10, 16, 0.6);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), transform var(--transition), background var(--transition);
}
.swipe-btn:hover:not(:disabled) { transform: translateY(-2px) scale(1.05); }
.swipe-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.swipe-btn-pass { color: var(--text-secondary); }
.swipe-btn-pass:hover:not(:disabled) { color: var(--red); border-color: var(--red); }
.swipe-btn-star { color: var(--gold); font-size: 17px; }
.swipe-btn-star:hover:not(:disabled) { border-color: var(--gold); background: rgba(240, 180, 64, 0.1); }
.swipe-btn-like { color: var(--rose); }
.swipe-btn-like:hover:not(:disabled) { border-color: var(--rose); background: rgba(232, 64, 122, 0.12); }

/* ── Beat 04 · the held reveal ─────────────────────────────────────── */

.held {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  padding: 34px 20px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: rgba(12, 10, 16, 0.4);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.held:hover { border-color: var(--gold); background: rgba(240, 180, 64, 0.05); }
.held-kicker {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.held-label {
  display: block;
  font-family: var(--font-display);
  font-size: 29px;
  color: var(--gold);
}

.outcome { display: none; }
.stage[data-outcome='held'] .outcome { display: none; }
.stage[data-outcome='held'] .held { display: block; }
.stage[data-outcome='match'] .held,
.stage[data-outcome='gold'] .held,
.stage[data-outcome='miss'] .held { display: none; }
.stage[data-outcome='match'] .outcome,
.stage[data-outcome='gold'] .outcome,
.stage[data-outcome='miss'] .outcome { display: block; animation: beat-in 0.55s ease both; }

/* A match lights the seam and the page's spine; a miss stays quiet. */
.stage[data-outcome='match'] .stage-seam,
.stage[data-outcome='gold'] .stage-seam {
  background: linear-gradient(90deg, transparent, var(--gold-soft) 12%, var(--gold) 50%, var(--gold-soft) 88%, transparent);
}
.stage[data-outcome='match'] .stage-seam-node,
.stage[data-outcome='gold'] .stage-seam-node {
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(240, 180, 64, 0.16), 0 0 22px var(--gold-glow);
  transform: scale(1.35);
}

.outcome-kicker {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--gold);
}
.stage[data-outcome='miss'] .outcome-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.outcome-line {
  max-width: 56ch;
  margin-bottom: 20px;
  font-size: 15px;
  color: var(--text-secondary);
}
.stage[data-outcome='miss'] .outcome-line {
  font-family: var(--font-display);
  font-size: 23px;
  line-height: 1.36;
  color: var(--text-primary);
}

.thread { display: grid; gap: 9px; margin-bottom: 18px; }
.stage[data-outcome='miss'] .thread { display: none; }
.bubble {
  max-width: 78%;
  padding: 11px 15px;
  border-radius: var(--radius);
  font-size: 15px;
  animation: bubble-in 0.45s ease both;
}
.bubble span {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.bubble em { font-style: normal; }
.bubble-them {
  justify-self: start;
  border-bottom-left-radius: 4px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  animation-delay: 0.5s;
}
.bubble-you {
  justify-self: end;
  border-bottom-right-radius: 4px;
  background: rgba(232, 64, 122, 0.16);
  border: 1px solid rgba(232, 64, 122, 0.4);
  animation-delay: 1.2s;
}

@keyframes bubble-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.outcome-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.outcome-foot p { flex: 1 1 250px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }

/* The two kept characters, side by side. On a match the link between them
   is gold and lit; on a miss it stays broken and both cards go quiet. */
.outcome-pair {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.outcome-card {
  /* Shrinkable: below ~340px the pair would otherwise overflow the beat and
     be cropped by the body's overflow guard rather than fitting. */
  flex: 0 1 120px;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-card);
  transition: border-color var(--transition), box-shadow var(--transition), filter var(--transition);
}
.outcome-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 22%; }
/* Real persona names run to two lines. Reserve the space in both captions so
   the pair never sits at two different heights. */
.outcome-card figcaption { padding: 8px 10px 10px; }
.outcome-card small {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.outcome-card strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.14;
  /* Exactly two lines whether the name wraps or not, so the pair of cards is
     always the same height. */
  height: 2.28em;
}

.outcome-link {
  flex: 1;
  height: 1px;
  background: var(--border-strong);
  position: relative;
  transition: background var(--transition-slow);
}
.outcome-link::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background var(--transition-slow), box-shadow var(--transition-slow), transform var(--transition-slow);
}

.stage[data-outcome='match'] .outcome-card,
.stage[data-outcome='gold'] .outcome-card {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 12px 34px var(--gold-glow);
}
.stage[data-outcome='match'] .outcome-link,
.stage[data-outcome='gold'] .outcome-link { background: var(--gold); }
.stage[data-outcome='match'] .outcome-link::after,
.stage[data-outcome='gold'] .outcome-link::after {
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(240, 180, 64, 0.16), 0 0 22px var(--gold-glow);
  transform: scale(1.35);
}

.stage[data-outcome='miss'] .outcome-card { filter: grayscale(0.7) brightness(0.8); }
.stage[data-outcome='miss'] .outcome-link {
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 5px, transparent 5px 11px);
}

/* ── Narration ─────────────────────────────────────────────────────── */

.stage-foot {
  padding: 8px 18px 18px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}
.stage-say {
  padding-top: 14px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  min-height: 44px;
}

/* ── Worlds: full-width poster bands ───────────────────────────────── */

.worlds { padding-bottom: 96px; }

.band {
  --accent: var(--rose);
  position: relative;
  padding: 56px 0;
  border-top: 1px solid var(--border);
}
.band-veil { --accent: var(--violet); }
.band-perigee { --accent: var(--gold); }
.band:last-of-type { border-bottom: 1px solid var(--border); }

.band::before {
  content: '';
  position: absolute;
  inset: 0 0 0 0;
  background: linear-gradient(90deg, var(--accent-tint, rgba(232, 64, 122, 0.07)), transparent 46%);
  opacity: 0;
  transition: opacity var(--transition-slow);
  pointer-events: none;
}
.band-real { --accent-tint: rgba(232, 64, 122, 0.08); }
.band-veil { --accent-tint: rgba(155, 109, 255, 0.08); }
.band-perigee { --accent-tint: rgba(240, 180, 64, 0.07); }
.band:hover::before, .band:focus-within::before { opacity: 1; }

.band-inner {
  display: grid;
  /* Wide enough to keep "The Real World" on one line at the display size. */
  grid-template-columns: minmax(0, 384px) minmax(0, 1fr);
  gap: 46px;
  align-items: center;
}

.band-copy h3 {
  font-size: clamp(38px, 4.4vw, 52px);
  font-weight: 400;
  margin-bottom: 14px;
}
.band-copy p:last-child { color: var(--text-secondary); font-size: 15.5px; }
.band-link {
  display: inline-block;
  margin-top: 18px;
  font-size: 15px;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-soft);
  transition: border-color var(--transition);
}
.band-link:hover { border-bottom-color: var(--gold); }

/* Horizontal, drag/scroll strip of portraits — no autoplay, so it costs
   nothing when a visitor ignores it and stays honest under reduced motion. */
/* Two fixed slots per world — no scroller. app.js swaps one photo at a
   time out of a deeper queue so the section stays alive on its own. */
.band-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* The frame holds the border and the lift; the photo inside it does the
   zoom, so the border stays put while the picture moves under it. */
.band-shot {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--bg-card);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.band-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.86);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), filter var(--transition), opacity 0.55s ease;
}
/* Mid-swap the photo fades out, is replaced, and fades back in. */
.band-shot.is-swapping img { opacity: 0; }

.band-shot:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}
.band-shot:hover img {
  transform: scale(1.06);
  filter: saturate(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .band-shot:hover { transform: none; }
  .band-shot:hover img { transform: none; }
}

.worlds-note {
  max-width: var(--wrap);
  margin: 42px auto 0;
  padding: 0 var(--gutter);
  font-size: 14.5px;
  color: var(--text-muted);
}
.worlds-note span { color: var(--gold); margin-right: 8px; }

/* ── Beta + invite form ────────────────────────────────────────────── */

.beta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: 56px;
  align-items: start;
  padding-top: 56px;
  padding-bottom: 56px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.beta-copy h2 { font-size: clamp(34px, 4.4vw, 52px); margin-bottom: 20px; }
.beta-copy > p { max-width: 52ch; color: var(--text-secondary); }

.commitments { display: grid; gap: 2px; }
.commitments li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 4px 10px;
  padding: 17px 0;
  border-top: 1px solid var(--border);
}
.commitments span {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gold);
  padding-top: 4px;
}
.commitments strong { font-weight: 500; font-size: 16.5px; }
.commitments small { color: var(--text-muted); font-size: 14px; }

/* Form */
.invite-form {
  padding: 30px 30px 26px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(28, 23, 36, 0.92), rgba(15, 12, 20, 0.86));
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.44);
}
.invite-form > label {
  display: block;
  margin-bottom: 14px;
  font-size: 14.5px;
  color: var(--text-secondary);
}

.invite-row { display: flex; gap: 10px; flex-wrap: wrap; }
.invite-row input[type='email'] {
  flex: 1 1 190px;
  min-width: 0;
  padding: 15px 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: rgba(12, 10, 16, 0.7);
  color: var(--text-primary);
  font-family: var(--font-ui);
  /* Never below 16px: iOS Safari zooms the page on focus under that. */
  font-size: 16px;
  transition: border-color var(--transition), background var(--transition);
}
.invite-row input[type='email']::placeholder { color: var(--text-muted); }
.invite-row input[type='email']:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(12, 10, 16, 0.95);
}
.invite-row input[type='email']:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Honeypot — present for bots, gone for everyone else. */
.form-trap {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.turnstile-slot:not(:empty) { margin-top: 16px; }

.form-privacy {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}
.form-privacy a { color: var(--text-secondary); }

.form-status:not(:empty) {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--text-secondary);
}
.form-status.is-error { color: var(--red); }

/* ── What is MasquePlay: the plain-terms definition ────────────────── */

.explainer { padding-bottom: 40px; border-top: 1px solid var(--border); }
.explainer-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 62px;
  align-items: start;
}
.explainer-grid h2 { font-size: clamp(34px, 4.2vw, 50px); margin-bottom: 18px; }
.explainer-more { margin-top: 22px; font-size: 15px; }
.explainer-more a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-soft);
  transition: border-color var(--transition);
}
.explainer-more a:hover { border-bottom-color: var(--gold); }

.facts { margin: 0; border-top: 1px solid var(--border); }
.facts > div {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: 24px;
  padding: 20px 2px;
  border-bottom: 1px solid var(--border);
}
.facts dt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 3px;
}
.facts dd { margin: 0; color: var(--text-secondary); font-size: 15.5px; }

/* Stage pages only: the "Inside" section under the hero adds a fixed row of
   that stage's portraits. Not a .band-strip, so app.js never rotates it. */
.stage-intro { border-top: 0; }
.inside-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 46px;
}

/* ── Questions ─────────────────────────────────────────────────────── */

.questions-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 62px;
  align-items: start;
}
.questions-grid h2 { font-size: clamp(34px, 4.2vw, 50px); margin-bottom: 18px; }

.question-list { border-top: 1px solid var(--border); }
.question-list details { border-bottom: 1px solid var(--border); }
.question-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 2px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  transition: color var(--transition);
}
.question-list summary::-webkit-details-marker { display: none; }
.question-list summary:hover { color: var(--gold); }
.question-list summary span {
  flex: none;
  width: 22px; height: 22px;
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  transition: border-color var(--transition), transform var(--transition);
}
.question-list summary span::before,
.question-list summary span::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 1px;
  margin: -0.5px 0 0 -4.5px;
  background: var(--text-secondary);
  transition: transform var(--transition), background var(--transition);
}
.question-list summary span::after { transform: rotate(90deg); }
.question-list details[open] summary { color: var(--gold); }
.question-list details[open] summary span { border-color: var(--gold); }
.question-list details[open] summary span::before,
.question-list details[open] summary span::after { background: var(--gold); }
.question-list details[open] summary span::after { transform: rotate(0deg); }
.question-list details p {
  max-width: 64ch;
  padding: 0 2px 24px;
  color: var(--text-secondary);
  font-size: 15.5px;
}

/* ── Closing ───────────────────────────────────────────────────────── */

.closing {
  position: relative;
  z-index: 1;
  padding: 124px 0 118px;
  overflow: hidden;
  border-top: 1px solid var(--border);
}
.closing-glow {
  position: absolute;
  inset: auto -20% -60%;
  height: 140%;
  background: radial-gradient(ellipse 46% 50% at 50% 100%, rgba(240, 180, 64, 0.16), transparent 68%);
  pointer-events: none;
}
.closing-inner { position: relative; text-align: center; }
.closing-inner > img { margin: 0 auto 26px; opacity: 0.85; }
.closing h2 {
  max-width: 16ch;
  margin: 0 auto 40px;
  font-size: clamp(38px, 6vw, 74px);
  font-weight: 400;
}
.closing h2 em { font-style: italic; font-weight: 300; color: var(--gold); }

.invite-form-closing { max-width: 620px; margin: 0 auto; text-align: left; }

/* ── Footer ────────────────────────────────────────────────────────── */

.site-footer {
  position: relative;
  z-index: 1;
  padding: 42px 0;
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  font-size: 13.5px;
  color: var(--text-muted);
}
.footer-inner .brand { font-size: 18px; }
.footer-inner nav { display: flex; gap: 22px; margin-left: auto; }
.footer-inner nav a { text-decoration: none; transition: color var(--transition); }
.footer-inner nav a:hover { color: var(--gold); }
.footer-inner p a { color: var(--text-secondary); text-decoration-color: var(--border-strong); text-underline-offset: 3px; transition: color var(--transition); }
.footer-inner p a:hover { color: var(--gold); }

/* Official social profiles, rendered by build-site-identity.mjs from
   packages/brand/social-profiles.json — the same URLs as Organization sameAs. */
.social-links { display: flex; gap: 18px; }
.social-links a { text-decoration: none; color: var(--text-secondary); transition: color var(--transition); }
.social-links a:hover { color: var(--gold); }

/* ── About page ────────────────────────────────────────────────────── */

.about-main { position: relative; z-index: 1; padding: 72px 0 110px; }
.about-article { max-width: 760px; }
.about-article h1 { font-size: clamp(44px, 7vw, 78px); margin: 16px 0 26px; }
.about-article h1 em { font-style: italic; font-weight: 300; color: var(--gold); }
.about-lede { font-size: 20px; color: var(--text-primary); max-width: 60ch; }
.about-article h2 {
  font-size: clamp(30px, 3.6vw, 40px);
  margin: 64px 0 16px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
}
.about-article h3 { font-size: 25px; margin: 26px 0 6px; }
.about-article p { color: var(--text-secondary); max-width: 66ch; }
.about-article p + p, .about-article ul + p { margin-top: 14px; }
.about-article strong { color: var(--text-primary); font-weight: 500; }
.about-article ul { margin-top: 14px; max-width: 66ch; }
.about-article li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
  color: var(--text-secondary);
}
.about-article li::before { content: '✦'; position: absolute; left: 0; top: 1px; font-size: 11px; color: var(--gold); opacity: 0.8; }
.about-article a { color: var(--gold); text-decoration-color: var(--gold-soft); text-underline-offset: 3px; }
.about-article a:hover { text-decoration-color: var(--gold); }
.about-article .button { color: #fff; text-decoration: none; }
.about-actions { margin-top: 26px; }

/* /roleplay-ideas/ — the cover hero and byline, the guide's contents box,
   numbered steps, scene tags and the four-question flow.
   The cover breaks out of the 760px text column (up to 960px, or the full
   screen on a phone) and dissolves into the page on every edge; the heading
   is pulled up over its darkened lower third, so photo and title read as one
   opening rather than a picture under a headline. */
.guide-hero { position: relative; margin-bottom: 30px; }
.guide-cover {
  position: relative;
  width: min(960px, 100vw);
  margin: 0 0 0 50%;
  transform: translateX(-50%);
}
.guide-cover img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 12%, #000 42%, transparent 97%),
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 12%, #000 42%, transparent 97%),
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
}
/* Photos inside the article: column width, the same dissolving edges as the
   cover but gentler, so they read as part of the page and not as inset boxes. */
.guide-photo { margin: 44px 0 8px; }
.guide-photo img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 52%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 52%, transparent 100%);
}
.about-article .guide-note {
  margin-top: 40px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.guide-hero-text {
  position: relative;
  z-index: 1;
  margin-top: clamp(-200px, -19vw, -64px);
}
.about-article .guide-hero-text h1 { margin: 12px 0 18px; text-shadow: 0 2px 28px var(--bg-base); }
.about-article .article-byline {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.about-article ol + p, .about-article ul + ul { margin-top: 14px; }
.about-article p + ol { margin-top: 14px; }
.guide-toc {
  margin-top: 34px;
  padding: 20px 24px;
  max-width: 66ch;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.guide-toc-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.about-article .guide-toc ol { margin-top: 10px; }
.about-article .guide-toc li { margin-bottom: 5px; }
.about-article .guide-toc a { text-decoration: none; }
.about-article .guide-toc a:hover { text-decoration: underline; }
.about-article .guide-steps { counter-reset: guide-step; max-width: 66ch; }
.about-article .guide-steps > li { counter-increment: guide-step; padding-left: 30px; }
.about-article .guide-steps > li::before {
  content: counter(guide-step);
  top: 2px;
  font-family: var(--font-mono);
  font-size: 13px;
  opacity: 1;
}
.about-article .scene-tags {
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.about-article .guide-flow {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.35;
  color: var(--text-primary);
}
.guide-flow span { color: var(--gold); padding: 0 4px; }

/* ═══════════════════════  RESPONSIVE  ═══════════════════════ */

/* These all collapse to a single column. It has to be minmax(0, 1fr) rather
   than a bare 1fr — the latter floors at the content's min-content width, so
   the column stops shrinking and pushes the page sideways on small phones. */
@media (max-width: 1080px) {
  .play-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .moves { position: static; grid-template-columns: minmax(0, 1fr); }
  .move { opacity: 1; }
  .section-heading-split { grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
  .band-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* Once the band stacks, two slots would otherwise stretch to the full wrap
     width and tower over the copy. */
  .band-strip { max-width: 520px; }
  .questions-grid { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  .explainer-grid { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  .beta-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}

@media (max-width: 900px) {
  .seam { display: none; }
  .site-nav { display: none; }
  .header-inner { justify-content: space-between; }
  .site-header .button { margin-left: auto; }
  /* With the nav hidden, Sign in takes over pushing the pair to the right. */
  .header-signin { margin-left: auto; }
  .site-header .header-signin + .button { margin-left: 0; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  :root { --gutter: 20px; }

  /* The scrolled header is ~46px here, not the ~96px it is on desktop, so the
     desktop offset dropped every in-page jump well below its target. */
  #main, #top, #play, #stage-demo, #stages, #worlds, #what-is-masqueplay, #questions, #invite { scroll-margin-top: 62px; }

  .section { padding: 68px 0; }
  .section-heading { margin-bottom: 38px; }
  .eyebrow { margin-bottom: 16px; }
  /* 160, not less: the eyebrow has to sit past the wings' 52% mask stop
     (below) to stay legible over the portraits. */
  .hero { padding: 160px 0 84px; }
  /* Tighter under the headline so the hero form's button is on the first
     screen of an in-app browser, where paid visitors arrive. */
  .hero h1 { margin-bottom: 16px; }
  .hero-lede { margin-bottom: 8px; }
  .hero-plain { margin-bottom: 18px; }
  /* On a phone the copy runs the full width of the screen, so there is no
     empty column to put a portrait in — anything centred behind the hero
     fights the headline, which is why these were dimmed to 0.24 to begin
     with. Give them a band of their own at the foot of the hero instead,
     below every line of copy, and they can run at full strength with no
     scrim and nothing to read through them.

     Cropped to the face rather than scaled down: a 2:3 portrait carries its
     subject in the upper third, so fading or shrinking the top is what made
     these read as texture instead of people. The band sits above the copy —
     the two of them lean in over the headline — so it is the lower edge that
     softens into the page. */
  .wing {
    width: 52vw;
    max-width: none;
    /* Near the source's own 2:3, so it reads as a portrait card rather than
       a cropped square. Tall enough to run down behind the copy. */
    height: 300px;
    /* Positive, and clear of the rotation's corner lift, so the hero's
       overflow:hidden has nothing of the portrait to clip. */
    top: 10px;
    bottom: auto;
    opacity: 0.9;
    filter: saturate(1);
    /* Solid through the face, then a long dissolve that carries the card
       down behind the copy. The 34%/52% stops are set by contrast, not by
       eye: the eyebrow and lede sit over the tail and need it at or under
       0.41 and 0.34 respectively to stay legible against the brightest
       highlight in these portraits. */
    -webkit-mask-image: linear-gradient(180deg, #000 34%, rgba(0, 0, 0, 0.35) 52%, transparent);
    mask-image: linear-gradient(180deg, #000 34%, rgba(0, 0, 0, 0.35) 52%, transparent);
  }
  /* Top-aligned. These portraits start the head about 3% into the frame, so
     any downward crop takes the top of it — which is what was cutting them. */
  .wing img { height: 100%; object-fit: cover; object-position: 50% 0; }
  /* Bottom-anchored, so the vertical centring transform has to go. */
  /* Shallower than desktop's 6deg: a wide box lifts its corners much further
     than a tall one at the same angle, and that lift is what meets the crop. */
  .wing-left { left: -10vw; transform: rotate(-4deg); }
  .wing-right { right: -10vw; transform: rotate(4deg); }

  .hero .invite-form-hero { padding: 0; margin-bottom: 40px; }
  .invite-form-hero .invite-row { gap: 8px; }
  .ledger li { padding: 0 12px; font-size: 10px; }

  .move { grid-template-columns: 34px 1fr; padding: 14px 0 14px 4px; }
  .move-num { padding-left: 12px; }
  .move h3 { font-size: 22px; }
  .move p { font-size: 15px; }

  /* Full width under its label, with segments tall enough to tap. */
  .stage-chips-set { display: flex; width: 100%; }
  .chip { padding: 10px 6px; font-size: 10px; letter-spacing: 0.06em; }

  .beat { padding: 18px 13px 6px; }
  .stage-chips { padding: 12px 13px; }
  .pool { gap: 8px; }
  .mask-copy { left: 7px; right: 7px; bottom: 7px; }
  .mask-copy strong { font-size: 15px; }
  .mask-copy small { font-size: 9px; }

  .scene-option { padding: 12px 13px; gap: 11px; }
  .scene-body strong { font-size: 18px; }
  .scene-body em { font-size: 12.5px; }

  /* The deck must stay taller than the card, or the stack overflows onto
     the pass/star/like row underneath it. */
  .deck { height: 326px; }
  .swipe { width: 200px; height: 280px; margin-left: -100px; }
  .swipe-copy { left: 13px; right: 13px; bottom: 12px; }
  .swipe-copy em { font-size: 13px; }
  .swipe-copy strong { font-size: 19px; }
  .swipe-btn { width: 46px; height: 46px; font-size: 17px; }

  .held { padding: 26px 16px; }
  .held-label { font-size: 24px; }
  .outcome-kicker { font-size: 26px; }
  .stage[data-outcome='miss'] .outcome-line { font-size: 19px; }
  .stage-foot { padding: 6px 14px 16px; }
  .bubble { max-width: 88%; }

  /* Smaller frames keep three world bands from dominating the scroll. */
  .band-strip { gap: 9px; max-width: 320px; }
  .inside-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 30px; }

  .invite-form { padding: 24px 20px 22px; }
  .invite-row .button { width: 100%; }

  .question-list summary { font-size: 20px; padding: 19px 2px; }
  .worlds-note { margin-top: 30px; font-size: 13.5px; }
  .beta-grid { padding-top: 42px; padding-bottom: 42px; }

  .explainer { padding-bottom: 20px; }
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 2px; }
  .about-main { padding: 44px 0 72px; }
  .about-lede { font-size: 18px; }
  .about-article h2 { margin-top: 48px; padding-top: 24px; }
  .footer-inner nav { flex-wrap: wrap; gap: 10px 22px; }

  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-inner nav { margin-left: 0; }
}

@media (max-width: 420px) {
  /* Brand, Sign in and the beta button only share one row at phone width
     with tighter spacing. */
  .header-inner { gap: 14px; }
  .site-header .button-small { padding: 9px 14px; }

  .pool { gap: 6px; }
  .mask-copy strong { font-size: 13px; }

  /* Stacked rather than wrapped: a wrapped row would begin with an orphaned
     divider, and the three items no longer fit one row at this width. */
  .ledger { flex-direction: column; gap: 7px; }
  .ledger li { padding: 0; border-left: 0; }
}