/* Bellfire landing page.
   Colours come from the game's tokens (crates/sqm-client/src/ui/tokens.rs) through tokens.css:
   warm ink panels, iron frames with bronze corner brackets, parchment text, gold only for the
   player's power, crimson only for an enemy's intent, element colours only for elements.
   Spacing and type sit on an 8 px grid. */

:root {
  /* Ink, parchment and gold are the shared system's tokens (web-shared/nox.css), so the section
     rules below keep their names. Element colours belong to the game and sit in the block after. */
  --gold-deep: #c99231;
  --crimson-deep: #6e121a;
  --well: var(--bg);
  --ink: var(--surface);
  --ink-hi: var(--raised);
  --iron: var(--line-strong);
  --iron-hi: var(--muted);
  --rule: var(--line-strong);
  --parchment: var(--text);
  --quiet: var(--muted);
  --head: var(--accent);
  --trim: var(--accent);
  --gold: var(--accent);

  /* 8 px scale */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px;
  --s8: 64px; --s10: 80px; --s12: 96px; --s16: 128px; --s20: 160px;

  /* The game's own serif (War Room, cards, banners) for titles under 48 px */
  --serif-text: "Noto Serif", Georgia, serif;
  --lore: "IM Fell English", "Noto Serif", Georgia, serif;

  --wrap: 1232px;
  --bar-h: var(--nav);
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: dark;
}
/* The game's element colours and meaning colours (crimson: an enemy's intent) */
[data-game="bellfire"] {
  --crimson: #e0283c;
  --fire: #ff7a2e;
  --ice: #7fd8ff;
  --energy: #b58cff;
  --earth: #7ce04a;
  --physical: #e8dcc0;
  --holy: #f6f0dc;
  --death: #c98bd6;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--well);
  color: var(--body);
  font: 400 16px/24px var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: #c2a17355; color: var(--parchment); }

.wrap { width: min(100% - 2 * var(--s2), var(--wrap)); margin-inline: auto; }
@media (min-width: 720px) { .wrap { width: min(100% - 2 * var(--s5), var(--wrap)); } }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Type: display sizes and labels come from the shared system (.display-xl, .display-l, .label) ── */
.h3 { font-family: var(--serif-text); font-size: clamp(28px, 2.8vw, 40px); line-height: 1.2; letter-spacing: -.01em; color: var(--parchment); font-weight: 500; margin: 0; text-wrap: balance; }
.h4 { font: 500 20px/32px var(--serif-text); color: var(--parchment); margin: 0 0 var(--s1); }
.lede { font-size: 18px; line-height: 32px; color: var(--body); max-width: 56ch; margin: var(--s3) 0 0; }
p { margin: 0 0 var(--s2); }
p:last-child { margin-bottom: 0; }

.label--crimson { color: #f0707e; }

kbd {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px;
  font: 500 12px/1 var(--mono); color: var(--parchment);
  background: linear-gradient(#2c241d, #1d1813); border: 1px solid #3d3328; border-radius: 4px;
  box-shadow: inset 0 1px #fff0d81a, 0 1px #00000099;
}

/* ── Buttons: the shared .btn family (web-shared/nox.css); the page adds its large size ── */
.btn svg { width: 14px; height: 14px; }
.btn-lg { height: 56px; padding: 0 var(--s4); font-size: 16px; }
.btn-lg svg { width: 16px; height: 16px; }
.link-sound { margin-left: var(--s1); padding: 0; font: inherit; color: var(--trim); background: none; border: 0; border-bottom: 1px solid #c2a17366; cursor: pointer; }
.link-sound:hover { color: var(--parchment); border-color: var(--trim); }
.link-quiet { font: 500 15px/1 var(--sans); color: var(--body); text-decoration: none; padding: var(--s1) 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.link-quiet:hover { color: var(--text); border-color: var(--line-strong); }

/* ── Frames: the HUD's iron panel with bronze corner brackets ── */
.frame { position: relative; margin: 0; background: var(--ink); border: 1px solid #00000099; box-shadow: 0 0 0 1px #000000e6, 0 24px 64px -24px #000000cc, inset 0 1px #fff0d824; }
.frame { display: flex; flex-direction: column; }
.frame > img, .frame > video { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; }
.corner { position: absolute; width: 16px; height: 16px; border: 0 solid var(--trim); pointer-events: none; z-index: 2; }
.corner.tl { top: 8px; left: 8px; border-top-width: 2px; border-left-width: 2px; }
.corner.tr { top: 8px; right: 8px; border-top-width: 2px; border-right-width: 2px; }
.corner.bl { bottom: 8px; left: 8px; border-bottom-width: 2px; border-left-width: 2px; }
.corner.br { bottom: 8px; right: 8px; border-bottom-width: 2px; border-right-width: 2px; }
.frame-cap {
  display: flex; justify-content: space-between; gap: var(--s2);
  padding: 12px var(--s4);
  font: 500 12px/16px var(--sans); color: var(--quiet); letter-spacing: .04em;
  background: linear-gradient(var(--ink-hi), var(--ink)); border-top: 1px solid #00000099; box-shadow: inset 0 1px #fff0d814;
}
.frame-cap .mono { color: var(--body); }
.frame-cap span:last-child { white-space: nowrap; text-transform: uppercase; letter-spacing: .16em; font-size: 10px; color: var(--faint); }

/* ── Header: the shared nav (web-shared/nox.css); the page's logo mark stays for the footer ── */
.mark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--parchment); font: 500 20px/1 var(--serif-text); letter-spacing: .01em; }
.mark-glyph { width: 32px; height: 32px; color: var(--trim); }
.nav-links a.is-here { color: var(--text); }
.nav .link-quiet { display: none; }
@media (min-width: 600px) { .nav .link-quiet { display: inline; } }

/* ── Hero: the shared full-bleed game hero (web-shared/nox.css), with the wave ledger ── */
.hero-note { margin-top: var(--s3); font-size: 14px; color: var(--quiet); }
/* The scrim darkens the left, where the copy sits; the ledger sits above it. */
.hero--game .hero-scrim { background: linear-gradient(90deg, #0b0907e6 0%, #0b090799 42%, #0b090700 72%), radial-gradient(55% 50% at 24% 74%, #00000080, transparent), linear-gradient(to bottom, #0b090788 0%, #0b090726 35%, #0b0907bf 75%, var(--bg) 100%); }
.hero-foot { z-index: 4; position: absolute; left: 0; right: 0; bottom: var(--s4); display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.ledger { display: none; align-items: center; gap: 12px; padding: 12px var(--s2); background: #15110dcc; border: 1px solid #00000099; box-shadow: 0 0 0 1px var(--iron), inset 0 1px #fff0d81f; backdrop-filter: blur(8px); font-size: 13px; }
.ledger-k { font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--head); }
.ledger-v { color: var(--parchment); font-weight: 600; transition: opacity .4s; }
.ledger-v.mono { font: 600 16px/1 var(--serif-text); }
.ledger-sep { width: 1px; height: 16px; background: var(--rule); }
.ledger-boss { color: #f39aa3; display: inline-flex; align-items: center; gap: var(--s1); }
.ledger-boss::before { content: ""; width: 8px; height: 8px; background: var(--crimson); box-shadow: 0 0 12px var(--crimson); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.hero-foot .ledger { margin-left: auto; }
@media (min-width: 900px) { .ledger { display: inline-flex; } }
@media (max-width: 760px) {
  .btn-lg { height: 48px; padding: 0 var(--s3); font-size: 15px; }
  .hero-in .actions { align-self: stretch; flex-direction: column; align-items: stretch; }
  .hero-in .actions .btn { width: 100%; }
}

/* ── Section rhythm ── */
section { position: relative; }
.prologue, .law, .runes, .crew-sec, .bosses, .omens, .ahead { padding: var(--s16) 0; }
@media (max-width: 719px) { .prologue, .law, .runes, .crew-sec, .bosses, .omens, .ahead { padding: var(--s12) 0; } }

/* ── Prologue ── */
.prologue { background: radial-gradient(80% 60% at 20% 0%, #231c16 0%, transparent 70%), var(--well); }
.prologue-in { display: grid; gap: var(--s6); }
.voice { margin: 0; }
.voice p { font: italic 500 clamp(40px, 6vw, 88px)/1.04 var(--serif); color: var(--parchment); letter-spacing: -.015em; margin: 0; }
.voice cite { display: flex; align-items: center; gap: 12px; margin-top: var(--s3); font: normal 600 12px/16px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #f39aa3; }
.voice cite::before { content: ""; width: 8px; height: 8px; background: var(--crimson); box-shadow: 0 0 12px var(--crimson); }
.prologue-copy { display: grid; gap: var(--s3); max-width: 960px; font-size: 18px; line-height: 32px; }
@media (min-width: 900px) { .prologue-copy { grid-template-columns: 1fr 1fr; gap: var(--s6); } }
.tally { display: grid; grid-template-columns: repeat(3, 1fr); margin: var(--s4) 0 0; border-top: 1px solid var(--rule); }
.tally div { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.tally dt { font: 600 11px/16px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--quiet); order: 2; }
.tally dd { margin: 0 0 var(--s1); font: 500 48px/1 var(--serif-text); color: var(--parchment); }
.tally div { display: flex; flex-direction: column-reverse; }
@media (min-width: 900px) { .tally { grid-template-columns: repeat(6, 1fr); } .tally div + div { padding-left: var(--s3); border-left: 1px solid var(--rule); } }

/* ── Acts: sticky story ── */
.acts { padding: var(--s16) 0 var(--s8); background: linear-gradient(var(--well), #120e0b 30%, var(--well)); }
.acts-head { margin-bottom: var(--s8); }
.acts-stage { width: min(100% - 2 * var(--s2), 1400px); margin-inline: auto; display: grid; gap: var(--s4); }
.acts-sticky { position: sticky; top: calc(var(--bar-h) + var(--s2)); z-index: 1; }
.acts-view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.act-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1s var(--ease), transform 6s var(--ease); }
.act-img.is-on { opacity: 1; transform: scale(1); }
.sun { display: none; }
.acts-list { list-style: none; margin: 0; padding: 0; }
.act { padding: var(--s6) 0; opacity: .35; transition: opacity .6s var(--ease); }
.act.is-on { opacity: 1; }
.act-num { font: 600 12px/16px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--head); margin-bottom: var(--s1); }
.act-meta { font-size: 13px; color: var(--quiet); margin: var(--s1) 0 var(--s3); }
.act p:not(.act-num):not(.act-meta):not(.act-boss) { font-size: 18px; line-height: 32px; }
.act-boss { display: inline-flex; align-items: center; gap: 12px; margin-top: var(--s1); padding: var(--s1) var(--s2); font-size: 14px; color: var(--parchment); background: #15110d; box-shadow: 0 0 0 1px #3a1015, inset 0 1px #fff0d814; }
.crimson-dot { width: 8px; height: 8px; flex: none; background: var(--crimson); box-shadow: 0 0 10px var(--crimson); }
@media (min-width: 960px) {
  .acts-stage { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s10); align-items: start; }
  .acts-sticky { top: calc(var(--bar-h) + var(--s5)); }
  .act { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; padding: var(--s8) 0; }
  .sun { display: block; margin-top: var(--s3); width: 240px; }
  .sun-arc { fill: none; stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 6; }
  .sun-dot { fill: var(--gold); filter: drop-shadow(0 0 8px var(--gold)); transition: cx .9s var(--ease), cy .9s var(--ease), fill .9s; }
}
@media (max-width: 959px) {
  .acts-sticky { position: relative; top: 0; }
  .act { opacity: 1; padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
}

/* ── The law ── */
.law { background: radial-gradient(60% 50% at 80% 30%, #1b140f, transparent 70%), var(--well); overflow: hidden; }
.law-head { max-width: 760px; margin-bottom: var(--s8); }
/* The reaction codex: a triangular table of the six pairs beside a card drawn like the game's
   relic draft (bronze brackets, a gold seal, the diamond rule). */
.glyph { width: 16px; height: 16px; fill: currentColor; flex: none; }
.g-fire { color: var(--fire); } .g-ice { color: var(--ice); } .g-energy { color: var(--energy); } .g-earth { color: var(--earth); }
.codex { display: grid; gap: var(--s4); align-items: stretch; }
.codex-table { display: grid; grid-template-columns: 80px repeat(3, minmax(0, 1fr)); grid-template-rows: 40px repeat(3, auto) auto; gap: var(--s1); }
.codex-col, .codex-row { margin: 0; display: flex; align-items: center; gap: var(--s1); font: 600 11px/16px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--quiet); }
.codex-col { justify-content: center; border-bottom: 1px solid var(--rule); }
.codex-row { border-right: 1px solid var(--rule); padding-right: var(--s1); }
.plate {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1);
  min-height: 112px; padding: var(--s2); text-align: left; cursor: pointer; color: var(--body);
  background: linear-gradient(180deg, #1c1712, var(--ink)); border: 0; border-radius: 0;
  box-shadow: 0 0 0 1px #000000e6, 0 0 0 2px #2e261f, inset 0 1px #fff0d814;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.plate::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .4s var(--ease); pointer-events: none;
  background: radial-gradient(60% 80% at 0% 100%, color-mix(in srgb, var(--a) 22%, transparent), transparent 70%), radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--b) 18%, transparent), transparent 70%); }
.plate:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px #000000e6, 0 0 0 2px var(--iron), inset 0 1px #fff0d81f; }
.plate[aria-pressed="true"] { box-shadow: 0 0 0 1px #000000e6, 0 0 0 2px var(--trim), inset 0 1px #fff0d82e, 0 16px 32px -16px #000; }
.plate[aria-pressed="true"]::before { opacity: 1; }
.plate > * { position: relative; }
.plate-pair { display: flex; align-items: center; gap: 6px; }
.tether { width: 24px; height: 2px; background: linear-gradient(90deg, var(--a), var(--b)); opacity: .5; }
.plate[aria-pressed="true"] .tether { opacity: 1; background: repeating-linear-gradient(90deg, var(--a) 0 4px, transparent 4px 7px, var(--b) 7px 11px, transparent 11px 14px); background-size: 28px 2px; animation: flow .8s linear infinite; }
@keyframes flow { to { background-position: 28px 0; } }
.plate-name { margin-top: auto; font: 500 18px/24px var(--serif-text); color: var(--parchment); }
.plate-share { font-size: 12px; color: var(--quiet); }
.codex-note { margin: 0; padding: var(--s2) var(--s2) 0 0; font-size: 13px; line-height: 20px; color: var(--faint); align-self: start; }
.codex-note b { color: var(--body); font-weight: 600; }

.relic {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--s5) var(--s4) var(--s4);
  background: radial-gradient(80% 50% at 50% 0%, #2a2112, transparent 70%), linear-gradient(180deg, var(--ink-hi), var(--ink) 60%);
  box-shadow: 0 0 0 1px #000, 0 0 0 2px #6e5524, inset 0 1px #ffe7a126, 0 32px 64px -32px #000;
}
.relic .corner { border-color: var(--gold-deep); }
.relic-kicker { font: 600 11px/16px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--head); margin: 0 0 var(--s3); }
.seal { position: relative; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #241c14, #0c0a08 70%);
  box-shadow: 0 0 0 3px #0c0a08, 0 0 0 6px #b98f3a, 0 0 0 7px #5b3f12, inset 0 0 24px #000, 0 0 40px -8px #ffd24a40; }
.seal .glyph { position: absolute; width: 36px; height: 36px; transition: transform .6s var(--ease), color .4s; }
.seal-a { transform: translate(-14px, -6px); filter: drop-shadow(0 0 10px currentColor); }
.seal-b { transform: translate(14px, 6px); filter: drop-shadow(0 0 10px currentColor); }
.relic.is-new .seal-a { animation: meetA .7s var(--ease); }
.relic.is-new .seal-b { animation: meetB .7s var(--ease); }
@keyframes meetA { 0% { transform: translate(-40px, -6px); opacity: 0; } 100% { transform: translate(-14px, -6px); opacity: 1; } }
@keyframes meetB { 0% { transform: translate(40px, 6px); opacity: 0; } 100% { transform: translate(14px, 6px); opacity: 1; } }
.relic-name { margin: var(--s3) 0 0; font: 500 40px/48px var(--serif-text); color: var(--parchment); }
.relic.is-new .relic-name, .relic.is-new .relic-text { animation: rise .5s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.relic-rule { position: relative; width: 160px; height: 8px; margin: var(--s1) 0 var(--s2); background: linear-gradient(90deg, transparent, var(--rule) 30%, var(--rule) 70%, transparent) center / 100% 1px no-repeat; }
.relic-rule i { position: absolute; left: 50%; top: 1px; width: 6px; height: 6px; transform: translateX(-50%) rotate(45deg); border: 1px solid var(--trim); background: var(--ink); }
.relic-text { max-width: 36ch; color: var(--body); margin: 0 0 var(--s3); min-height: 48px; }
.relic-stats { width: 100%; margin: auto 0 0; text-align: left; border-top: 1px solid var(--rule); }
.relic-stats div { display: grid; grid-template-columns: 112px 1fr; gap: var(--s2); padding: 12px 0; border-bottom: 1px solid #2e261f; font-size: 14px; line-height: 20px; }
.relic-stats dt { font: 600 11px/20px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.relic-stats dd { margin: 0; color: var(--body); }
.relic-stats b { color: var(--gold); font-weight: 500; }
@media (max-width: 599px) {
  .codex-table { grid-template-columns: 56px repeat(3, minmax(0, 1fr)); }
  .codex-col span, .codex-row span { display: none; }
  .plate { min-height: 88px; padding: 12px var(--s1); }
  .plate-name { font-size: 13px; line-height: 20px; hyphens: manual; }
  .tether { width: 12px; }
}
@media (min-width: 1000px) { .codex { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s6); } }

.laws { list-style: none; padding: 0; margin: var(--s10) 0 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.laws li { display: grid; grid-template-columns: var(--s8) 1fr; column-gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.laws li p { grid-column: 2; color: var(--quiet); margin: 0; }
.law-n { grid-row: span 2; font: 500 32px/1 var(--serif-text); color: var(--trim); }
.laws h3 { font: 500 20px/32px var(--serif-text); color: var(--parchment); margin: 0; }
@media (min-width: 1000px) {
  .laws { grid-template-columns: repeat(5, 1fr); border-top: 0; }
  .laws li { display: block; padding: var(--s3) var(--s3) 0 0; border-bottom: 0; border-top: 1px solid var(--rule); }
  .laws li + li { padding-left: var(--s3); border-left: 1px solid var(--rule); }
  .law-n { display: block; margin-bottom: var(--s3); }
  .laws h3 { margin-bottom: var(--s1); }
}

/* ── Split media sections ── */
.split { padding: var(--s12) 0; }
.split-in { display: grid; gap: var(--s5); align-items: center; }
.split-media { overflow: hidden; }
.split-copy p:not(.label) { font-size: 18px; line-height: 32px; max-width: 52ch; }
.split-copy .display-l { margin-bottom: var(--s4); }
.keys { list-style: none; padding: 0; margin: var(--s4) 0 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: 14px; color: var(--quiet); }
.keys li { display: inline-flex; align-items: center; gap: 6px; }
.crimson-zone { background: radial-gradient(70% 70% at 30% 50%, #2a0a0e 0%, transparent 70%), var(--well); }
.crimson-zone .frame { box-shadow: 0 0 0 1px #000, 0 0 0 2px #4a1218, 0 24px 80px -24px #6e121a99; }
.crimson-zone .corner { border-color: #c4404e; }
@media (min-width: 960px) {
  .split { padding: var(--s16) 0; }
  .split-in { grid-template-columns: 1.35fr 1fr; gap: var(--s10); }
  .split-rev .split-media { order: 2; }
}

/* ── Runes ── */
.runes { background: linear-gradient(var(--well), #110d0a 50%, var(--well)); }
.runes-head { max-width: 760px; margin-bottom: var(--s8); }
.runes-head .lede kbd { vertical-align: 2px; }
.rune-row { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.rune {
  --el: var(--fire);
  position: relative; padding: var(--s4) var(--s3) var(--s3);
  background: linear-gradient(180deg, var(--ink-hi), var(--ink));
  box-shadow: 0 0 0 1px #000000e6, 0 0 0 2px #3a3026, inset 0 1px #fff0d81f;
  overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.rune::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--el); opacity: .8; box-shadow: 0 0 16px var(--el); }
.rune::after { content: ""; position: absolute; inset: auto -30% -60% -30%; height: 80%; background: radial-gradient(50% 50% at 50% 50%, var(--el), transparent 70%); opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
.rune:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px #000000e6, 0 0 0 2px color-mix(in srgb, var(--el) 45%, #3a3026), inset 0 1px #fff0d81f, 0 24px 48px -24px #000; }
.rune:hover::after { opacity: .14; }
.rune kbd { position: absolute; top: var(--s3); right: var(--s3); }
.rune-words { font: italic 400 24px/32px var(--lore); color: var(--el); margin-bottom: var(--s2); }
.rune h3 { font: 500 20px/32px var(--serif-text); color: var(--parchment); margin: 0; }
.rune-stat { font-size: 13px; color: var(--quiet); margin: 0 0 var(--s2); }
.rune-do { color: var(--body); font-size: 15px; }
.runes-more { margin-top: var(--s4); color: var(--quiet); }
@media (min-width: 720px) { .rune-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .rune-row { grid-template-columns: repeat(4, 1fr); } }

/* ── Crews rail ── */
.crew-sec { overflow: hidden; }
.crews-head { margin-bottom: var(--s6); max-width: var(--wrap); }
.crews-head .lede { max-width: 60ch; }
.crew-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(344px, 82vw); gap: var(--s2);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: var(--s1) max(var(--s2), calc((100vw - var(--wrap)) / 2)) var(--s3);
  scroll-padding-inline: max(var(--s2), calc((100vw - var(--wrap)) / 2));
  cursor: grab;
}
.crew-rail::-webkit-scrollbar { display: none; }
.crew-rail.is-drag { cursor: grabbing; scroll-snap-type: none; }
.crew {
  --el: var(--physical);
  scroll-snap-align: start; display: flex; flex-direction: column;
  padding: var(--s4) var(--s3) var(--s3); min-height: 440px;
  background: linear-gradient(180deg, var(--ink-hi), var(--ink) 60%);
  box-shadow: 0 0 0 1px #000000e6, 0 0 0 2px #3a3026, inset 0 1px #fff0d81f;
  user-select: none;
}
.crew { overflow: hidden; }
.crew-art { position: relative; margin: calc(-1 * var(--s4)) calc(-1 * var(--s3)) var(--s3); aspect-ratio: 4 / 5; overflow: hidden; background: var(--well); }
.crew-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 1.2s var(--ease); pointer-events: none; -webkit-user-drag: none; }
.crew-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, var(--ink) 100%), linear-gradient(0deg, color-mix(in srgb, var(--el) 14%, transparent), transparent 40%); pointer-events: none; }
.crew:hover .crew-art img { transform: scale(1.05); }
.crew-el { display: flex; align-items: center; gap: var(--s1); font: 600 11px/16px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--el); }
.crew-el i { width: 8px; height: 8px; background: var(--el); box-shadow: 0 0 10px var(--el); }
.crew h3 { font: 500 24px/40px var(--serif-text); color: var(--parchment); margin: var(--s1) 0 0; }
.crew-stat { font-size: 12px; color: var(--quiet); margin-bottom: var(--s2); }
.crew > p:not(.crew-el):not(.crew-stat) { color: var(--body); font-size: 15px; }
.oaths { margin-top: auto; display: grid; gap: 1px; background: var(--rule); box-shadow: 0 0 0 1px var(--rule); }
.oaths div { background: var(--well); padding: 12px var(--s2); }
.oaths h4 { margin: 0; font: 600 14px/24px var(--sans); color: var(--parchment); }
.oaths h4::before { content: "Oath · "; color: var(--faint); font-weight: 500; }
.oaths p { margin: 0; font-size: 13px; line-height: 20px; color: var(--quiet); }
.rail-nav { display: flex; align-items: center; gap: var(--s1); margin-top: var(--s2); }
.rail-btn { width: var(--s5); height: var(--s5); display: grid; place-items: center; font: 16px/1 var(--sans); color: var(--body); background: var(--ink); border: 1px solid var(--iron); border-radius: 4px; cursor: pointer; transition: border-color .2s, color .2s; }
.rail-btn:hover { border-color: var(--trim); color: var(--parchment); }
.rail-hint { margin-left: var(--s2); font-size: 12px; color: var(--faint); }

/* ── Bosses ── */
.bosses { background: radial-gradient(70% 40% at 50% 0%, #2a0a0e, transparent 70%), linear-gradient(#0c0a08, #0a0706); }
.bosses-head { max-width: 760px; margin-bottom: var(--s10); }
.boss-list { display: grid; gap: var(--s10); }
.boss { display: grid; gap: var(--s4); align-items: center; }
.boss-img { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; box-shadow: 0 0 0 1px #000, 0 0 0 2px #3a1218, 0 32px 80px -32px #6e121a; }
.boss-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--ease), filter 1.2s var(--ease); }
.boss-img::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 90% at 50% 50%, transparent 55%, #0a0706cc 100%); pointer-events: none; }
.boss:hover .boss-img img { transform: scale(1.08); }
.boss-wave { font-size: 13px; color: var(--quiet); margin-bottom: var(--s2); }
.boss-title { font: italic 500 18px/24px var(--serif); color: var(--quiet); margin: var(--s1) 0 var(--s3); }
.boss-says { font: italic 400 28px/40px var(--lore); color: #f5a623; margin-bottom: var(--s3); }
.phases { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.phases li { display: grid; grid-template-columns: var(--s12) 1fr; gap: var(--s2); padding: 12px 0; border-bottom: 1px solid var(--rule); color: var(--quiet); font-size: 15px; }
.phases b { color: var(--parchment); font-weight: 600; }
@media (min-width: 960px) {
  .boss { grid-template-columns: 1.3fr 1fr; gap: var(--s10); }
  .boss:nth-child(even) .boss-img { order: 2; }
}

/* ── Omens ── */
.omens-head { margin-bottom: var(--s6); }
.omen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
.omen { position: relative; padding: var(--s3); min-height: 176px; display: flex; flex-direction: column; overflow: hidden; background: var(--ink); box-shadow: 0 0 0 1px #000000e6, 0 0 0 2px #3a3026, inset 0 1px #fff0d81f; }
.omen canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .9; }
.omen > p { position: relative; }
.omen-k { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--head); }
.omen-v { margin-top: auto; font: 500 20px/32px var(--serif-text); color: var(--parchment); }
.omen-n { font-size: 14px; color: var(--quiet); margin: 0; }
.omens-more { display: grid; gap: var(--s5); margin-top: var(--s10); align-items: center; }
.omen-shot { overflow: hidden; }
.omen-copy { display: grid; gap: var(--s4); }
.omen-copy p { color: var(--quiet); }
@media (min-width: 900px) {
  .omen-grid { grid-template-columns: repeat(4, 1fr); }
  .omens-more { grid-template-columns: 1.35fr 1fr; gap: var(--s10); }
}

/* ── War room ── */
.warroom { padding: var(--s16) 0; background: radial-gradient(60% 60% at 75% 50%, #1e1712, transparent 70%), var(--well); }
.warroom-in { display: grid; gap: var(--s6); align-items: center; }
.warroom-copy > p:not(.label) { font-size: 18px; line-height: 32px; max-width: 48ch; margin-top: var(--s3); }
.warroom-shot { overflow: hidden; }
.vigils { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s3); border-top: 1px solid var(--rule); }
.vigils li { display: grid; grid-template-columns: var(--s5) 1fr; align-items: center; padding: var(--s1) 0; font-size: 14px; line-height: 24px; color: var(--quiet); border-bottom: 1px solid #2e261f; transition: color .3s; }
.vigils b { font: 600 15px/1 var(--serif-text); color: var(--trim); }
.vigils li:hover { color: var(--parchment); }
@media (max-width: 479px) { .vigils { grid-template-columns: 1fr; } }
@media (min-width: 1040px) { .warroom-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--s10); } }

/* ── Dawn interlude ── */
.dawn { position: relative; height: 88vh; min-height: 560px; overflow: hidden; display: flex; align-items: flex-end; }
.dawn-img { position: absolute; inset: 0; width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.dawn-shade { position: absolute; inset: 0; background: linear-gradient(#0c0a08, #0c0a0800 30%, #0c0a0800 50%, #0c0a08 100%); }
.dawn-line { position: relative; padding-bottom: var(--s12); font: italic 500 clamp(32px, 4.4vw, 64px)/1.15 var(--serif); color: var(--parchment); text-shadow: 0 2px 32px #000; }

/* ── The road ahead ── */
.ahead-head { max-width: 800px; margin-bottom: var(--s8); }
.ahead-list { display: grid; gap: var(--s12); }
.feat { display: grid; gap: var(--s4); align-items: center; }
.feat-media { margin: 0; min-width: 0; }
.feat-view { position: relative; overflow: hidden; }
.feat-view > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.6s var(--ease); }
.feat:hover .feat-view > img { transform: scale(1.03); }
.feat-copy { min-width: 0; }
.feat-copy > p:not(.feat-tag) { font-size: 18px; line-height: 32px; color: var(--body); max-width: 52ch; margin-top: var(--s3); }
.feat-tag { display: inline-flex; align-items: center; gap: var(--s1); margin: 0 0 var(--s2); font: 600 11px/16px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.feat-tag::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 8px #ffd24a99; }
.feat-wide { gap: var(--s5); }
/* A road-ahead idea cut to one line: no picture, the tag and a sentence. */
.ahead-line { margin: 0; font-size: 18px; line-height: 32px; color: var(--body); }
.ahead-line .feat-tag { margin: 0 var(--s2) 0 0; }
.realm { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
.realm figure { position: relative; margin: 0; aspect-ratio: 8 / 5; overflow: hidden; box-shadow: 0 0 0 1px #000, 0 0 0 2px #3a3026; }
.realm img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.realm figure:hover img { transform: scale(1.06); }
.realm figcaption { position: absolute; inset: auto 0 0 0; padding: var(--s5) var(--s2) 12px; background: linear-gradient(transparent, #0c0a08f2); display: grid; }
.realm b { font: 500 18px/24px var(--serif-text); color: var(--parchment); }
.realm span { font-size: 13px; line-height: 20px; color: var(--body); }
/* Map pins over the co-op shot, drawn like the game's world labels. */
.pin { position: absolute; padding: 4px 10px; font: 600 12px/16px var(--sans); color: var(--parchment); background: #15110de6; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold-deep); white-space: nowrap; transform: translate(-50%, -100%); animation: bob 3.2s ease-in-out infinite; }
.pin::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 24px; background: linear-gradient(var(--gold), transparent); }
.pin-b { box-shadow: 0 0 0 1px #000, 0 0 0 2px #4c8df6; animation-delay: -1.6s; }
.pin-b::after { background: linear-gradient(#7fb0ff, transparent); }
@keyframes bob { 50% { transform: translate(-50%, calc(-100% - 4px)); } }
/* A daily board over the snow shot, in the HUD's panel dress. */
.daily { position: absolute; right: var(--s2); bottom: var(--s2); width: min(280px, 60%); padding: var(--s2); background: #15110deb; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--iron), inset 0 1px #fff0d81f; }
.daily-k { margin: 0 0 var(--s1); font: 600 11px/16px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--head); }
.daily ol { list-style: none; margin: 0; padding: 0; }
.daily li { display: grid; grid-template-columns: 16px 1fr auto; gap: var(--s1); padding: 6px 0; border-top: 1px solid #2e261f; font-size: 13px; line-height: 20px; }
.daily li span { color: var(--trim); font-family: var(--serif-text); }
.daily li b { color: var(--parchment); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daily li em { font-style: normal; color: var(--body); }
.daily-n { margin: var(--s1) 0 0; font-size: 11px; line-height: 16px; color: var(--quiet); }
.skies { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s1); }
.skies li { position: relative; aspect-ratio: 1; overflow: hidden; box-shadow: 0 0 0 1px #000, 0 0 0 2px #3a3026; }
.skies img { width: 100%; height: 100%; object-fit: cover; }
.skies span { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s2) var(--s1) 6px; font: 600 10px/16px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--parchment); background: linear-gradient(transparent, #0c0a08e6); }
@media (min-width: 960px) {
  .feat { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--s10); }
  .feat-rev .feat-media { order: 2; }
  .feat-rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
  .feat-wide { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
@media (max-width: 599px) { .pin { font-size: 10px; padding: 2px 6px; } .daily { position: static; width: auto; margin-top: 0; } }
.founder {
  position: relative; margin-top: var(--s10); display: grid; gap: var(--s4); padding: var(--s5) var(--s4);
  background: linear-gradient(180deg, #2a2112, #17120c 60%);
  box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6a28, inset 0 1px #ffe7a133, 0 32px 80px -32px #ffd24a33;
}
.founder::before, .founder::after { content: ""; position: absolute; width: 16px; height: 16px; border: 0 solid var(--gold); }
.founder::before { top: 8px; left: 8px; border-top-width: 2px; border-left-width: 2px; }
.founder::after { bottom: 8px; right: 8px; border-bottom-width: 2px; border-right-width: 2px; }
.founder .label { color: var(--gold); }
.founder .label::after { background: linear-gradient(90deg, #8a6a28, transparent); }
.founder-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.founder-list li { display: flex; gap: 12px; color: var(--body); }
.founder-list li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 8px #ffd24a99; }
@media (min-width: 900px) { .founder { grid-template-columns: 1fr 1fr; padding: var(--s6); align-items: center; } }

/* ── Waitlist ── */
.waitlist { min-height: 100vh; display: flex; align-items: center; padding: var(--s16) 0; overflow: hidden; isolation: isolate; text-align: center; }
.waitlist-bg { position: absolute; inset: 0; z-index: -1; background: #0c0a08 url("media/shots/dawn.jpg") center / cover; }
.waitlist-bg video { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.waitlist-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 50%, #0c0a08b3, #0c0a08f2 100%), linear-gradient(#0c0a08, transparent 25%, transparent 75%, #0c0a08); }
.waitlist-in { display: flex; flex-direction: column; align-items: center; }
.waitlist .label { justify-content: center; }
.waitlist .label::before { content: ""; height: 1px; width: var(--s8); background: linear-gradient(270deg, var(--rule), transparent); }
.waitlist .display-xl { position: relative; padding-bottom: var(--s3); }
.waitlist .display-xl::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 240px; height: 8px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--rule) 30%, var(--rule) 70%, transparent) center / 100% 1px no-repeat; }
.waitlist .display-xl::before { content: ""; position: absolute; left: 50%; bottom: 1px; width: 6px; height: 6px; transform: translateX(-50%) rotate(45deg); border: 1px solid var(--trim); background: var(--well); z-index: 1; }
.waitlist .lede { margin-inline: auto; }
.join { display: grid; gap: var(--s1); width: min(100%, 560px); margin-top: var(--s5); }
.join input {
  height: 56px; padding: 0 var(--s3); font: 400 18px/1 var(--sans); color: var(--parchment);
  background: #0c0a08e6; border: 1px solid var(--iron); border-radius: 4px;
  box-shadow: inset 0 1px #000000b3; transition: border-color .2s, box-shadow .2s;
}
.join input::placeholder { color: var(--faint); }
.join input:focus { outline: none; border-color: var(--trim); box-shadow: inset 0 1px #000000b3, 0 0 0 3px #c2a17333; }
.join input[aria-invalid="true"] { border-color: #c4404e; }
.join-msg { grid-column: 1 / -1; min-height: 24px; margin: var(--s1) 0 0; font-size: 14px; color: var(--quiet); }
.join-msg.is-ok { color: var(--gold); }
.join-msg.is-bad { color: #f0707e; }
.join.is-done input, .join.is-done button { opacity: .5; pointer-events: none; }
@media (min-width: 600px) { .join { grid-template-columns: 1fr auto; } }
.waitlist-alt { margin-top: var(--s4); color: var(--quiet); }
.waitlist-alt a { color: var(--parchment); text-decoration-color: var(--trim); text-underline-offset: 4px; }

/* ── Footer ── */
.foot { padding: var(--s6) 0; border-top: 1px solid #2e261f; background: var(--well); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.foot-note { margin: 0; font-size: 13px; color: var(--faint); }
.foot-nav { margin-left: auto; display: flex; gap: var(--s3); }
.foot-nav a { font-size: 14px; color: var(--quiet); text-decoration: none; }
.foot-nav a:hover { color: var(--parchment); }

/* ── Reveal on scroll ── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Phone header: keeps the mark, sound, and Play inside 390 px. */
@media (max-width: 359px) { .mark span { display: none; } }