/* Hireling promo site.
 *
 * The palette is a transcription of the game's own Nocturne token list
 * (card-rpg: scripts/core/palette.gd), and it carries the game's rule with
 * it:
 *
 *   ONE ACCENT MEANS YOU. ONE HUE MEANS THEM. NOTHING ELSE GETS A HUE.
 *
 * Anything the reader can act on — a link, a button, a rare card's rail —
 * is ACCENT. Anything that belongs to the other side — a boss's health, the
 * "weak against" column, an armour tag — is THREAT. Everything else is a
 * desaturated neutral. There is no colour per school and no colour per
 * rarity; a school is a glyph and a rarity is a brightness. Adding a third
 * hue is the thing this palette exists to prevent, on the site as in the
 * game.
 */

/* Inter is the one typeface, at 400/500/600/700. It is deliberately NOT
 * vendored here — the game's fonts/README.md explains that the project does
 * not redistribute it, and the site follows suit. `local()` picks it up for
 * anyone who has it; drop the four woff2 files into public/fonts/ (see the
 * README there) and every visitor gets it. Until then the system UI stack
 * stands in, which is close enough in metrics that nothing reflows. */
@font-face {
  font-family: 'Inter site';
  src: local('Inter'), local('Inter Regular'), url('../fonts/Inter-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter site';
  src: local('Inter Medium'), url('../fonts/Inter-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Inter site';
  src: local('Inter SemiBold'), url('../fonts/Inter-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Inter site';
  src: local('Inter Bold'), url('../fonts/Inter-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Grounds */
  --ground-stage: #0f111d;
  --ground-flat: #13151f;
  --panel: #1c1e2b;
  --panel-raised: #232532;
  --ink: #14161f;
  --track: #111320;

  /* Text */
  --text: #e9e9ed;
  --n-200: #e4e7f5;
  --n-300: #cfd3e5;
  --n-400: #b2b6ca;
  --n-500: #9397ab;
  --n-600: #75798c;
  --n-700: #595d6c;
  --n-800: #3f424d;

  /* Accent — you */
  --accent: #9184d9;
  --accent-300: #d2cefd;
  --accent-400: #b5abfc;
  --accent-600: #796cbf;
  --accent-900: #2b2741;

  /* Threat — them */
  --threat: #d3745c;
  --threat-400: #ea8f79;
  --threat-900: #472218;

  /* Hairlines and tints: TEXT at low alpha, never a new grey. */
  --hairline: rgba(233, 233, 237, .07);
  --hairline-soft: rgba(233, 233, 237, .13);
  --tint-1: rgba(233, 233, 237, .02);
  --tint-3: rgba(233, 233, 237, .04);
  --tint-5: rgba(233, 233, 237, .09);
  --accent-tint: rgba(145, 132, 217, .11);
  --threat-tint: rgba(211, 116, 92, .12);

  /* Metrics */
  --pad-x: clamp(20px, 5vw, 72px);
  --pad-y: clamp(56px, 8vw, 120px);
  --content-w: 1200px;
  --radius: 14px;
  --radius-sm: 9px;

  --font: 'Inter site', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  color-scheme: dark;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--ground-flat);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Every number that the reader compares against another number is tabular,
 * for the same reason Style.numeral() exists in the game: a proportional 1
 * is narrower than a 7, and a column of costs visibly shivers without it. */
.card__cost, .counts__n, .boss__stats, .region__boss-hp, .stat {
  font-variant-numeric: tabular-nums;
}

a { color: var(--accent-400); text-decoration: none; }
a:hover { color: var(--accent-300); text-decoration: underline; }

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

img { max-width: 100%; }

.wrap {
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

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

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 99;
  background: var(--accent);
  color: #16121f;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.skip:focus { left: 16px; }

/* ---------- Type ---------- */

.h2 {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.14;
  letter-spacing: -.02em;
  font-weight: 600;
  margin: 10px 0 0;
  max-width: 20ch;
}
.h3 {
  font-size: 19px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 8px;
}
.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-400);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background: var(--ground-stage);
  padding: 0 var(--pad-x) clamp(36px, 5vw, 64px);
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
}
/* The stage does not end, it fades — the hand sits on darkness rather than
 * on a seam, exactly as the combat screen does it. */
.hero__glow {
  position: absolute;
  left: 50%;
  top: -30vw;
  width: min(1100px, 120vw);
  height: min(1100px, 120vw);
  transform: translateX(-50%);
  background: radial-gradient(circle,
      rgba(145, 132, 217, .20) 0%,
      rgba(145, 132, 217, .07) 38%,
      rgba(145, 132, 217, 0) 68%);
  pointer-events: none;
}

.topbar {
  position: relative;
  max-width: var(--content-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  flex-wrap: wrap;
}
.topbar__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  font-weight: 600;
}
.topbar__brand:hover { text-decoration: none; color: var(--text); }
.topbar__brand img { border-radius: 9px; }
.topbar__wordmark {
  font-size: 18px;
  letter-spacing: -.01em;
}
.topbar__links {
  display: flex;
  gap: clamp(14px, 2vw, 28px);
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  font-size: 14.5px;
  flex-wrap: wrap;
}
.topbar__links a { color: var(--n-400); }
.topbar__links a:hover { color: var(--text); text-decoration: none; }

.hero__inner {
  position: relative;
  max-width: var(--content-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding: clamp(28px, 5vw, 60px) 0 clamp(40px, 6vw, 72px);
}
.hero__h1 {
  font-size: clamp(46px, 8.2vw, 94px);
  line-height: .96;
  letter-spacing: -.035em;
  font-weight: 700;
  margin: 14px 0 0;
}
.hero__sub {
  margin: 20px 0 0;
  font-size: clamp(16px, 1.5vw, 18.5px);
  color: var(--n-300);
  max-width: 52ch;
}

.cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 28px 0 0;
}
/* Not a link, and it must not look like one — there is no store page yet. */
.cta__store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  border: 1px solid var(--accent-600);
  font-weight: 600;
  color: var(--accent-300);
}
.cta__store-soon {
  font-size: 11px;
  letter-spacing: .12em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #16121f;
}
.cta__ghost {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-soft);
  color: var(--n-300);
  font-weight: 500;
}
.cta__ghost:hover {
  color: var(--text);
  border-color: var(--n-600);
  text-decoration: none;
}

/* ---------- Waitlist ---------- */

.waitlist { margin: 26px 0 0; max-width: 470px; }
.waitlist--wide { margin-inline: auto; }
.waitlist__form { display: flex; gap: 9px; flex-wrap: wrap; }
.waitlist__input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-soft);
  background: var(--track);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}
.waitlist__input::placeholder { color: var(--n-600); }
.waitlist__input:focus { border-color: var(--accent-600); }
.waitlist__submit {
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  border: 0;
  background: var(--accent);
  color: #16121f;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease;
}
.waitlist__submit:hover:not(:disabled) { background: var(--accent-400); }
.waitlist__submit:disabled { opacity: .55; cursor: default; }
.waitlist__note {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: var(--n-600);
}
.waitlist__error {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--threat-400);
}
.waitlist.is-done .waitlist__form { display: none; }
.waitlist.is-done .waitlist__note { color: var(--accent-300); }

/* ---------- The card face ----------
 *
 * Built at size, the way CardView builds one: art to all four edges, a
 * scrim carrying the text over the bottom band, the cost in a corner notch
 * and rarity as a strip down the left edge.
 *
 * The notch is TOP-LEFT, not top-right. A fan overlaps, so only the left
 * edge of each card survives, and the cost is the number you scan a hand
 * for — so it has to live on the edge that is still visible.
 */

.card {
  position: relative;
  aspect-ratio: 260 / 364;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--hairline-soft);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  isolation: isolate;
}
.card__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The art is authored portrait at the face's own aspect (58x82 against
   * 260x364), so it simply covers — there is no second pass and no wash. */
}
.card__rail {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  z-index: 3;
  background: var(--n-700);
}
.card--uncommon .card__rail { background: var(--n-400); }
.card--rare .card__rail { background: var(--accent); }
.card--curse .card__rail { background: var(--threat); }

.card__cost {
  position: absolute;
  top: 0; left: 0;
  z-index: 3;
  min-width: 38px;
  padding: 7px 11px 9px 11px;
  border-radius: 0 0 var(--radius) 0;
  background: rgba(15, 17, 29, .93);
  border-right: 1px solid var(--hairline-soft);
  border-bottom: 1px solid var(--hairline-soft);
  color: var(--accent-300);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  text-align: center;
}
.card__school {
  position: absolute;
  top: 9px; right: 11px;
  z-index: 3;
  font-size: 15px;
  color: var(--n-300);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}
.card__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 30px 13px 13px 13px;
  background: linear-gradient(to top,
      rgba(15, 17, 29, .97) 0%,
      rgba(15, 17, 29, .93) 52%,
      rgba(15, 17, 29, 0) 100%);
}
.card__name {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.card__text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.42;
  color: var(--n-400);
}

/* ---------- Hero hand ---------- */

.hero__hand {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  align-items: center;
  padding: 20px 0;
}
.hero__card { transform-origin: 50% 100%; }
/* Stacked left-under-right, as HandFan does it, so each card's left edge —
 * cost, rail, name — stays on top of the card beneath it. */
.hero__card--1 { z-index: 1; transform: rotate(-8deg) translateY(14px); }
.hero__card--2 { z-index: 2; transform: rotate(0deg) translateY(-10px) scale(1.04); }
.hero__card--3 { z-index: 3; transform: rotate(8deg) translateY(14px); }
.hero__card:not(:first-child) { margin-left: -6%; }
.hero__card { transition: transform .22s ease; }
.hero__card:hover { transform: translateY(-16px) rotate(0deg) scale(1.08); z-index: 4; }

/* ---------- Counts ---------- */

.counts {
  position: relative;
  max-width: var(--content-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.counts__item {
  background: var(--ground-stage);
  padding: 18px 20px;
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
}
.counts__n {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}
.counts__label {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--n-600);
}

/* ---------- Sections ---------- */

section { padding: var(--pad-y) 0; }
.pitch { background: var(--ground-flat); }
.schools { background: var(--ground-stage); border-block: 1px solid var(--hairline); }
.triangle { background: var(--ground-flat); }
.cards { background: var(--ground-stage); border-block: 1px solid var(--hairline); }
.regions { background: var(--ground-flat); }
.wall { background: var(--ground-stage); border-block: 1px solid var(--hairline); }
.bestiary { background: var(--ground-flat); }

.pitch__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  margin: 40px 0 0;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.pitch__item {
  background: var(--ground-flat);
  padding: 26px 24px 28px;
}
.pitch__item p { margin: 0; color: var(--n-400); font-size: 15px; }
.pitch__item em { color: var(--n-200); font-style: normal; font-weight: 500; }

/* ---------- Schools ---------- */

.schools__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 40px 0 0;
}
.school {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 24px 22px 26px;
}
/* A school is a glyph and a word — never a hue. */
.school__glyph {
  display: block;
  font-size: 26px;
  line-height: 1;
  color: var(--n-300);
  margin-bottom: 14px;
}
.school__name {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.school__mechanic {
  margin: 4px 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-400);
}
.school__text { margin: 0; font-size: 14.5px; color: var(--n-400); }
.schools__foot { margin: 26px 0 0; color: var(--n-500); font-size: 15px; }
.schools__foot strong { color: var(--n-200); }

/* ---------- Triangle ---------- */

.triangle__head, .cards__head, .regions__head, .wall__head, .bestiary__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: end;
}
.triangle__lede, .cards__lede, .regions__lede, .wall__lede, .bestiary__lede {
  margin: 0;
  color: var(--n-400);
  font-size: 15.5px;
}
.triangle__lede em, .cards__lede em {
  color: var(--n-200);
  font-style: normal;
  font-weight: 500;
}
.triangle__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin: 40px 0 0;
}
.tri {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 22px;
}
.tri__tag {
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 600;
}
.tri__row {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 0;
  border-top: 1px solid var(--hairline);
}
.tri__label {
  font-size: 11.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--n-600);
}
.tri__tags { display: flex; gap: 7px; flex-wrap: wrap; }
.tag {
  font-size: 12.5px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--hairline-soft);
  color: var(--n-300);
}
/* Strong is your business, weak is theirs. */
.tag--strong {
  background: var(--accent-tint);
  border-color: var(--accent-600);
  color: var(--accent-300);
}
.tag--weak {
  background: var(--threat-tint);
  border-color: var(--threat-900);
  color: var(--threat-400);
}

/* ---------- Cards gallery ---------- */

.cards__filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 34px 0 24px;
}
.chip {
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--hairline-soft);
  background: transparent;
  color: var(--n-400);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.chip:hover { color: var(--text); border-color: var(--n-600); }
.chip.is-active {
  background: var(--accent-tint);
  border-color: var(--accent-600);
  color: var(--accent-300);
}
.cards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 18px;
}
.cards__grid .card { transition: transform .18s ease, box-shadow .18s ease; }
.cards__grid .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .55);
}
.card[hidden] { display: none; }
.cards__empty { margin: 24px 0 0; color: var(--n-500); }

/* ---------- Regions ---------- */

.regions__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(290px, 1fr);
  gap: 16px;
  margin: 40px 0 0;
  padding-bottom: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--n-800) transparent;
}
.region {
  scroll-snap-align: start;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.region__top { display: flex; align-items: center; gap: 14px; }
.region__keeper {
  width: 62px; height: 62px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--ink);
  border: 1px solid var(--hairline);
}
.region__tier {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--n-600);
}
.region__name { margin: 2px 0 0; font-size: 18px; font-weight: 600; line-height: 1.2; }
.region__blurb { margin: 0; font-size: 14.5px; color: var(--n-400); flex: 1 1 auto; }
.region__rule {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--threat-400);
  background: var(--threat-tint);
  border: 1px solid var(--threat-900);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
}
.region__tokens { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }
.token {
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--n-500);
  border: 1px solid var(--hairline-soft);
  border-radius: 999px;
  padding: 2px 9px;
}
.region__boss {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.region__boss-label {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--n-600);
}
.region__boss-name { font-weight: 600; font-size: 14.5px; color: var(--threat-400); }
.region__boss-hp { font-size: 13px; color: var(--n-500); margin-left: auto; }
.region__boss--none .region__boss-name { color: var(--n-400); font-weight: 500; }
.region__for { margin: 0; font-size: 13px; color: var(--n-600); }
.region__for strong { color: var(--accent-400); font-weight: 600; }

/* ---------- The wall ---------- */

.wall__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 12px;
  margin: 40px 0 0;
}
.cert {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 16px 17px 18px;
}
.cert__name { margin: 0; font-size: 15.5px; font-weight: 600; }
.cert__from {
  margin: 3px 0 9px;
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-400);
}
.cert__summary { margin: 0; font-size: 13.5px; color: var(--n-500); line-height: 1.45; }

.sigils {
  margin: 34px 0 0;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(20px, 4vw, 48px);
  background: var(--panel-raised);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 34px);
}
.sigils__copy p { margin: 0; color: var(--n-400); font-size: 15px; }
.sigils__copy em { color: var(--n-200); font-style: normal; font-weight: 500; }
.sigils__copy .h3 { margin-top: 8px; max-width: 26ch; }
.sigils__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.sigils__item {
  background: var(--panel-raised);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sigils__name { font-weight: 600; font-size: 14px; color: var(--accent-300); }
.sigils__text { font-size: 12.5px; color: var(--n-500); line-height: 1.4; }

/* ---------- Bestiary ---------- */

.bestiary__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin: 40px 0 0;
}
.boss {
  display: flex;
  gap: 18px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 20px;
}
.boss__art {
  width: 92px; height: 92px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--ink);
  border: 1px solid var(--hairline);
}
.boss__body { min-width: 0; }
.boss__region {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--n-600);
}
.boss__name { margin: 2px 0 8px; font-size: 18px; font-weight: 600; line-height: 1.2; }
.boss__stats { display: flex; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.stat {
  font-size: 12px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--threat-900);
  background: var(--threat-tint);
  color: var(--threat-400);
}
.stat--armour { text-transform: uppercase; letter-spacing: .08em; }
.boss__blurb { margin: 0; font-size: 14px; color: var(--n-400); }
/* Story comes out of a mouth — so a boss's line is set as speech, not prose. */
.boss__line {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-left: 2px solid var(--n-700);
  background: var(--tint-1);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14px;
  font-style: italic;
  color: var(--n-300);
}

/* ---------- Signup + footer ---------- */

.signup {
  background: var(--ground-stage);
  border-top: 1px solid var(--hairline);
  text-align: center;
}
.signup__inner { display: flex; flex-direction: column; align-items: center; }
.signup .h2 { max-width: 22ch; }
.signup__sub { margin: 14px 0 0; color: var(--n-400); max-width: 48ch; }

.footer {
  background: var(--ground-flat);
  border-top: 1px solid var(--hairline);
  padding: 34px 0;
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.footer__brand { display: flex; align-items: center; gap: 13px; }
.footer__brand img { border-radius: 8px; }
.footer__game { margin: 0; font-weight: 600; }
.footer__studio { margin: 0; font-size: 13.5px; color: var(--n-600); }
.footer__nav { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14.5px; }
.footer__nav a { color: var(--n-400); }
.footer__nav a:hover { color: var(--text); text-decoration: none; }

/* ---------- Narrow ---------- */

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__hand { order: -1; max-width: 420px; }
  .triangle__head, .cards__head, .regions__head, .wall__head, .bestiary__head {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .sigils { grid-template-columns: 1fr; }
  .h2 { max-width: none; }
}
@media (max-width: 560px) {
  .topbar__links { display: none; }
  .cards__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .boss { flex-direction: column; }
  .counts__n { font-size: 25px; }
}

/* ---------- Print ---------- */

@media print {
  .hero__glow, .topbar__links, .waitlist, .cta { display: none; }
  body { background: #fff; color: #111; }
}

/* ---------- Legal pages ---------- */

.legal-top {
  background: var(--ground-stage);
  border-bottom: 1px solid var(--hairline);
}
.legal-top__inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 18px var(--pad-x);
  display: flex;
  align-items: center;
  gap: 12px;
}
.legal-top__inner img { border-radius: 9px; }
.legal-top__wordmark { font-weight: 600; font-size: 17px; }
.legal-top__back { margin-left: auto; font-size: 14.5px; color: var(--n-400); }
.legal-top__back:hover { color: var(--text); text-decoration: none; }

.legal { padding: clamp(36px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); }
.legal__inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.legal h1 {
  font-size: clamp(30px, 4.4vw, 42px);
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 0;
}
.legal__updated {
  margin: 8px 0 0;
  color: var(--n-600);
  font-size: 14px;
}
.legal__callout {
  margin: 28px 0 8px;
  padding: 20px 22px;
  background: var(--panel);
  border: 1px solid var(--hairline-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.legal__callout p { margin: 0; color: var(--n-200); }
.legal h2 {
  margin: 44px 0 0;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -.015em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}
.legal h3 {
  margin: 30px 0 0;
  font-size: 17px;
  font-weight: 600;
}
.legal p, .legal li { color: var(--n-300); }
.legal p { margin: 14px 0 0; }
.legal ul { margin: 14px 0 0; padding-left: 22px; }
.legal li { margin: 8px 0; }
.legal strong { color: var(--text); font-weight: 600; }
.legal__sig {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  color: var(--n-600);
  font-size: 14.5px;
}