/* ═══════════════════════════════════════════════════════════════
   SECTIONS — composition only. `s-*` blocks arrange the
   pseudo-components; they never redefine how one looks.
   Written phone-first; every media query below only ever adds.
   ═══════════════════════════════════════════════════════════ */

/* ── s-topbar ──────────────────────────────────────────────── */
.s-topbar {
  background: var(--void-950);
  border-bottom: 1px solid var(--line-soft);
}
.s-topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: 34px;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.s-topbar .c-ticker { flex: 1 1 auto; }
.s-topbar .c-status,
.c-topbar__link { display: none; }
.c-topbar__link {
  align-items: center;
  gap: 0.35rem;
  flex: none;
  font-family: var(--font-ui);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-400);
  white-space: nowrap;
  transition: color var(--dur-2) var(--ease);
}
.c-topbar__link:hover { color: var(--gold-300); }

/* ── s-header ──────────────────────────────────────────────── */
.s-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-3) var(--ease);
}
/* The frosted plate lives on a pseudo-element, not on .s-header itself:
   a backdrop-filter would make the header the containing block for the
   position:fixed nav drawer and collapse it to header height. */
.s-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(4, 5, 10, 0.70);
  background: color-mix(in oklab, var(--void-950) 70%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  transition: background-color var(--dur-3) var(--ease);
}
.s-header[data-stuck] {
  border-bottom-color: var(--line-soft);
  box-shadow: 0 14px 34px -26px #000;
}
.s-header[data-stuck]::before { background: rgba(4, 5, 10, 0.94); background: color-mix(in oklab, var(--void-950) 94%, transparent); }
.s-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--header-h);
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.s-header__actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

/* ── s-hero ────────────────────────────────────────────────── */
.s-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  min-height: min(100svh, 44rem);
  padding-block: var(--sp-8) var(--sp-9);
  overflow: hidden;
  text-align: center;
}
.s-hero__inner {
  position: relative;
  z-index: var(--z-raise);
  width: 100%;
  max-width: 58rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- atmosphere ------------------------------------------------ */
.s-hero__art { position: absolute; inset: 0; z-index: var(--z-art); pointer-events: none; }
.s-hero__sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60rem 34rem at 50% 6%, rgba(179, 38, 16, 0.40), transparent 66%),
    radial-gradient(34rem 26rem at 16% 74%, rgba(111, 61, 255, 0.26), transparent 70%),
    radial-gradient(34rem 26rem at 86% 30%, rgba(31, 191, 201, 0.16), transparent 70%);
  background:
    radial-gradient(60rem 34rem at 50% 6%, color-mix(in oklab, var(--ember-600) 40%, transparent), transparent 66%),
    radial-gradient(34rem 26rem at 16% 74%, color-mix(in oklab, var(--arcane-500) 26%, transparent), transparent 70%),
    radial-gradient(34rem 26rem at 86% 30%, color-mix(in oklab, var(--mana-500) 16%, transparent), transparent 70%);
}
.s-hero__sigil {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(128vw, 46rem);
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: .5;
}
.s-hero__sigil svg { width: 100%; height: 100%; }
.s-hero__sigil .sig {
  stroke: rgba(207, 154, 56, 0.34);
  stroke: color-mix(in oklab, var(--gold-500) 34%, transparent);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
}
.s-hero__sigil .sig--spin-slow { animation: spin 110s linear infinite; }
.s-hero__sigil .sig--spin-rev {
  stroke: rgba(255, 95, 46, 0.30);
  stroke: color-mix(in oklab, var(--ember-400) 30%, transparent);
  animation: spin 160s linear infinite reverse;
}
.s-hero__sigil .sig--faint { stroke: rgba(154, 115, 255, 0.18); stroke: color-mix(in oklab, var(--arcane-400) 18%, transparent); }
@keyframes spin { to { rotate: 360deg; } }

.s-hero__ridge { position: absolute; inset: auto 0 0 0; }
.s-hero__ridge--far {
  height: 26%;
  opacity: .8;
  background: linear-gradient(180deg, rgba(14, 18, 34, 0.92), var(--void-950));
  background: linear-gradient(180deg, color-mix(in oklab, var(--void-800) 92%, transparent), var(--void-950));
  clip-path: polygon(0 58%, 10% 36%, 21% 54%, 33% 18%, 46% 46%, 58% 26%, 71% 50%, 84% 30%, 94% 52%, 100% 40%, 100% 100%, 0 100%);
}
.s-hero__ridge--near {
  height: 16%;
  background: var(--void-950);
  clip-path: polygon(0 66%, 12% 42%, 26% 62%, 40% 30%, 54% 56%, 68% 36%, 82% 60%, 94% 40%, 100% 56%, 100% 100%, 0 100%);
}
.s-hero__embers { position: absolute; inset: 0; overflow: hidden; }
.s-hero__embers span {
  position: absolute;
  bottom: -4%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ember-300);
  box-shadow: 0 0 8px var(--ember-400);
  opacity: 0;
  animation-name: rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes rise {
  0%   { opacity: 0;  translate: 0 0;                    scale: .5; }
  14%  { opacity: .9; }
  78%  { opacity: .55; }
  100% { opacity: 0;  translate: var(--dx, 12px) -92svh; scale: 1.15; }
}
.s-hero__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(110% 80% at 50% 40%, transparent 42%, rgba(4, 5, 10, 0.78) 100%),
    linear-gradient(180deg, transparent 62%, var(--bg) 99%);
  background:
    radial-gradient(110% 80% at 50% 40%, transparent 42%, color-mix(in oklab, var(--void-950) 78%, transparent) 100%),
    linear-gradient(180deg, transparent 62%, var(--bg) 99%);
}

/* --- hero content ---------------------------------------------- */
.s-hero__title { margin-block: var(--sp-2) 0; }
.s-hero__title-sm {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-ui);
  font-size: clamp(0.875rem, 3.4vw, 1.25rem);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-mute);
}
.s-hero__title-lg {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 6.2vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--grad-title);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 26px color-mix(in oklab, var(--ember-600) 70%, transparent));
}
.s-hero__title-lg em {
  display: block;
  margin-top: 0.06em;
  font-style: normal;
  font-size: clamp(3rem, 15.5vw, 8rem);
  font-weight: 900;
  letter-spacing: 0.015em;
  line-height: 0.92;
}
.s-hero__lede {
  max-width: 44ch;
  margin: var(--sp-5) auto 0;
  font-size: var(--fs-500);
  color: var(--text-dim);
}
.s-hero__actions { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
/* block, not flex: the tick stays inline with the first word when the
   sentence wraps on a narrow phone */
.s-hero__note {
  max-width: 34ch;
  margin: var(--sp-4) auto 0;
  font-size: var(--fs-200);
  color: var(--text-mute);
  text-wrap: balance;
}
.s-hero__note .c-ico {
  display: inline-block;
  vertical-align: -0.2em;
  margin-right: 0.4rem;
  color: var(--venom-400);
}
.s-hero__scroll { display: none; }

/* ── section dividers ──────────────────────────────────────── */
.s-section + .s-section::before,
.s-enlist::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* ── s-worlds — a slightly deeper stratum ──────────────────── */
.s-worlds { background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--void-900) 55%, transparent) 40%, transparent); }

/* ── s-ranks ───────────────────────────────────────────────── */
.s-ranks .c-rail__track { align-items: stretch; }
.s-ranks .c-rank { height: 100%; }

/* ── s-enlist ──────────────────────────────────────────────── */
.s-enlist { position: relative; padding-block: var(--section-y); }
.s-enlist::after {
  content: "";
  position: absolute;
  inset: 20% 0 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(50rem 24rem at 50% 50%, color-mix(in oklab, var(--ember-600) 26%, transparent), transparent 70%);
}
.s-enlist > .l-container { position: relative; z-index: 1; }
.c-enlist {
  --rarity: var(--gold-400);
  padding: var(--sp-7) var(--sp-5) var(--sp-6);
  text-align: center;
}
.c-enlist .c-title { margin-top: var(--sp-2); }
.c-enlist__form { display: grid; gap: var(--sp-4); max-width: 26rem; margin: var(--sp-6) auto 0; }
.c-enlist__fine {
  margin-top: var(--sp-4);
  font-family: var(--font-ui);
  font-size: var(--fs-200);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ── s-footer ──────────────────────────────────────────────── */
.s-footer {
  padding-block: var(--sp-8) var(--sp-5);
  border-top: 1px solid var(--line-soft);
  background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--void-900) 75%, transparent));
}
.s-footer__top { display: grid; gap: var(--sp-7); }
.s-footer__brand { display: grid; gap: var(--sp-4); justify-items: start; }
.s-footer__blurb { max-width: 34ch; font-size: var(--fs-300); color: var(--text-mute); }
.s-footer__nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-4); }
.s-footer__heading {
  margin-bottom: var(--sp-3);
  font-family: var(--font-ui);
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--gold-400);
}
.s-footer__links { display: grid; gap: 0.55rem; font-size: var(--fs-300); }
.s-footer__links a { color: var(--text-mute); transition: color var(--dur-2) var(--ease); }
.s-footer__links a:hover { color: var(--text-hi); }
.s-footer__bottom {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-200);
  color: var(--text-mute);
}
.s-footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.s-footer__legal a:hover { color: var(--text-hi); }

/* ═══════════════════════════════════════════════════════════════
   BREAKPOINTS — sm 36rem · md 48rem · lg 64rem · xl 80rem
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 36rem) {
  .c-statbar { grid-template-columns: repeat(4, 1fr); }
  .s-hero__actions { grid-auto-flow: column; justify-content: center; gap: var(--sp-4); }
  .s-topbar .c-status { display: inline-flex; }
  .s-footer__bottom { grid-template-columns: 1fr auto; align-items: center; }
}

@media (min-width: 48rem) {
  .l-grid { gap: var(--sp-5); }

  /* rails stop being carousels and become honest grids */
  .c-rail { margin-inline: 0; }
  .c-rail__track {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow: visible;
    scroll-snap-type: none;
    padding-inline: 0;
    padding-block: 0;
  }
  .c-rail__hint { display: none; }

  .l-grid--cards,
  .l-grid--worlds,
  .l-grid--ranks,
  .l-grid--features,
  .l-grid--quotes { grid-template-columns: repeat(2, 1fr); }

  .s-hero { min-height: min(100svh, 50rem); }
  .s-hero__scroll {
    display: grid;
    place-items: center;
    position: absolute;
    left: 50%;
    bottom: var(--sp-5);
    z-index: var(--z-raise);
    width: 44px;
    height: 44px;
    translate: -50% 0;
    color: var(--text-mute);
    border: 1px solid var(--line);
    border-radius: 50%;
    animation: bob 2.4s var(--ease) infinite;
    transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  }
  .s-hero__scroll:hover { color: var(--gold-300); border-color: var(--line-strong); }
  @keyframes bob { 0%, 100% { translate: -50% 0; } 50% { translate: -50% 7px; } }

  .c-timeline { padding-left: 2.25rem; }
  .c-timeline__node::before { left: -2.25rem; }
  .c-timeline__node::after { left: -1.9375rem; }
  .c-timeline::before { left: 0.6875rem; }

  .c-enlist { padding: var(--sp-8) var(--sp-7) var(--sp-7); }
  .s-footer__top { grid-template-columns: minmax(16rem, 1fr) 2fr; gap: var(--sp-8); }
  .s-footer__nav { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 64rem) {
  /* nav leaves the drawer and joins the header */
  .c-nav {
    position: static;
    width: auto;
    margin-inline: auto;
    padding: 0;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-2);
    background: none;
    border: 0;
    box-shadow: none;
    translate: none;
    visibility: visible;
    overflow: visible;
  }
  .c-nav::before { display: none; }
  .c-nav__list { display: flex; gap: 0.1rem; }
  .c-nav__link {
    padding: 0.55rem 0.8rem;
    border-bottom: 0;
    font-size: var(--fs-300);
    letter-spacing: 0.14em;
  }
  .c-nav__link::before {
    left: 50%;
    top: auto;
    bottom: 0.3rem;
    width: 0;
    height: 1px;
    rotate: 0deg;
    translate: -50% 0;
    background: var(--grad-title);
    opacity: 1;
    transition: width var(--dur-2) var(--ease);
  }
  .c-nav__link:hover::before { width: calc(100% - 1.6rem); }
  .c-nav__cta,
  .c-burger,
  .c-scrim { display: none; }
  .s-header__actions { margin-left: 0; }

  .c-topbar__link { display: inline-flex; }

  .l-grid { gap: var(--sp-5); }
  .l-grid--cards,
  .l-grid--worlds,
  .l-grid--features,
  .l-grid--quotes { grid-template-columns: repeat(3, 1fr); }
  .l-grid--ranks { grid-template-columns: repeat(4, 1fr); }

  .c-panel { padding: var(--sp-6); }
  .c-timeline__body { padding: var(--sp-5) var(--sp-6); }
}

@media (min-width: 80rem) {
  .l-grid { gap: var(--sp-6); }
  .s-hero__sigil { width: 52rem; }
}

/* Extra breathing room for notched phones in landscape. */
@supports (padding: max(0px)) {
  .l-container,
  .s-header__inner,
  .s-topbar__inner,
  .s-hero__inner {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
}