/* ==========================================================================
   Southern Spear — website stylesheet
   Tokens, layout and components for the public development portal.
   Brand palette and motifs only: charcoal, eucalyptus, olive, sandstone,
   brass, off-white, with sunset orange used only for emphasis.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --ink-950: #07100b;
  --ink-900: #0b1310;
  --ink-850: #101a15;
  --field-800: #16211b;
  --field-700: #223027;
  --field-600: #2e3f34;

  /* Ink */
  --sand-100: #f2ecdd;
  --sand-200: #e2dac7;
  --sage-200: #c2cabe;
  --sage-400: #a7b1a3;

  /* Accents */
  --brass-500: #c8ab72;
  --brass-400: #d8c096;
  --brass-300: #e4d3ae;
  --sunset-500: #d9743a;
  --opfor-500: #9c5044;
  --opfor-300: #d19587;

  /* Status — each pairs a colour with a label, never colour alone */
  --state-planned: #8b96a6;
  --state-progress: #d3a962;
  --state-testing: #6fa3a0;
  --state-complete: #93ab7c;
  --state-blocked: #b4695c;

  /* Lines */
  --line: #3a4a3e;
  --line-quiet: #5a6f61;
  --line-soft: #243229;
  --hairline: rgba(200, 171, 114, 0.28);

  /* Type */
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Space */
  --u: 8px;
  --shell: 1240px;
  --shell-narrow: 820px;
  --gutter: clamp(20px, 4vw, 64px);
  --section-y: clamp(64px, 8vw, 128px);
  --header-h: 68px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 700ms;

  --focus: var(--sand-100);
  --radius: 3px;
  --radius-lg: 5px;

  /* Readability floor. Nothing on the site is set below 0.75rem (12px): the
     coordinate-style metadata is the smallest type here, and below 12px it
     stops being legible on a 360px phone held at arm's length. Interactive
     controls are held to a 44px minimum height for the same reason. */
  --fs-floor: 0.75rem;
  --target-min: 44px;

  --shadow-lift: 0 14px 34px -18px rgba(0, 0, 0, 0.85);
  --shadow-panel: 0 30px 70px -30px rgba(0, 0, 0, 0.9);

  /* Topographic field, drawn in CSS so no raster texture ships. */
  --topo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23c8ab72' stroke-width='1'%3E%3Cpath d='M-20 60c60-34 120-34 180 0s120 34 180 0 60-34 60-34'/%3E%3Cpath d='M-20 92c60-34 120-34 180 0s120 34 180 0 60-34 60-34'/%3E%3Cpath d='M-20 124c60-34 120-34 180 0s120 34 180 0 60-34 60-34'/%3E%3Cpath d='M-20 250c60 34 120 34 180 0s120-34 180 0 60 34 60 34'/%3E%3Cpath d='M-20 282c60 34 120 34 180 0s120-34 180 0 60 34 60 34'/%3E%3Cpath d='M-20 314c60 34 120 34 180 0s120-34 180 0 60 34 60 34'/%3E%3C/g%3E%3C/svg%3E");
  --grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 0H0v48' fill='none' stroke='%23ffffff' stroke-opacity='0.05'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--ink-950);
  color: var(--sage-200);
  font: 400 17px/1.65 var(--font-body);
  /* `hidden` on body alone leaves a few pixels of horizontal scroll on the
     narrowest phones, because the hero's scale animation overflows the
     viewport. `clip` on the root contains it without turning the root into a
     scroll container, which is what `hidden` does. `hidden` stays as the
     declaration for browsers without `clip`. */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--sand-100);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: 0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brass-300); text-decoration-color: var(--hairline); text-underline-offset: 3px; }
a:hover { color: var(--sand-100); }

ul, ol { margin: 0; padding: 0; }

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

::selection { background: var(--brass-500); color: var(--ink-950); }

.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 200;
  transform: translateY(-200%);
  background: var(--brass-500);
  color: var(--ink-950);
  font: 700 0.95rem var(--font-body);
  padding: 13px 20px;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 700;
}
.skip-link:focus { transform: none; color: var(--ink-950); }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: var(--shell-narrow); }

section[id], main > section { scroll-margin-top: calc(var(--header-h) + 12px); }
/* Roadmap phases and changelog sessions are generated after load, so they are
   the targets of shared deep links and need the same header clearance. */
.phase, .session, .gallery__item { scroll-margin-top: calc(var(--header-h) + 20px); }
.phase:focus, .session:focus { outline: none; }
.phase:focus-visible, .session:focus-visible { outline: 2px solid var(--brass-400); outline-offset: 4px; }

/* --------------------------------------------------------------------------
   3. Shared components
   -------------------------------------------------------------------------- */
.eyebrow {
  font: 600 0.82rem/1 var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-500);
  margin: 0 0 14px;
}

.section { padding-block: var(--section-y); position: relative; }
.section--band {
  background: var(--ink-900);
  border-block: 1px solid var(--line-soft);
}

.section__head { max-width: 62ch; margin-bottom: clamp(32px, 4vw, 56px); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__title { margin-bottom: 0.35em; }
.section__lede { color: var(--sage-200); font-size: 1.06rem; }
.section__note {
  margin-top: 28px;
  font-size: 0.92rem;
  color: var(--sage-400);
  max-width: 68ch;
}

.lead { font-size: 1.12rem; color: var(--sand-200); }

/* Brass rule that expands on scroll into view. */
.section__head::after {
  content: "";
  display: block;
  width: 56px; height: 2px;
  margin-top: 22px;
  background: linear-gradient(90deg, var(--brass-500), transparent);
}
.section__head--center::after { margin-inline: auto; background: linear-gradient(90deg, transparent, var(--brass-500), transparent); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  font: 700 0.95rem/1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease,
              border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.btn--lg { min-height: 52px; padding: 15px 30px; font-size: 1.05rem; }
.btn--sm { min-height: 44px; padding: 10px 18px; font-size: 0.85rem; }

.btn--brass { background: var(--brass-500); color: var(--ink-950); }
.btn--brass:hover { background: var(--brass-300); color: var(--ink-950); transform: translateY(-1px); }

.btn--outline { border-color: var(--hairline); color: var(--sand-100); background: rgba(7, 16, 11, 0.45); }
.btn--outline:hover { border-color: var(--brass-400); background: rgba(7, 16, 11, 0.8); color: var(--sand-100); }

.btn--quiet { color: var(--sage-200); padding-inline: 14px; }
.btn--quiet:hover { color: var(--brass-300); }

.btn--ghost { border-color: var(--line); color: var(--sand-100); }
.btn--ghost:hover { border-color: var(--brass-400); color: var(--sand-100); }

/* Badges and status pills */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(34, 48, 39, 0.7);
  font: 600 0.75rem/1.3 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage-200);
  white-space: nowrap;
}
.badge--concept { border-color: rgba(217, 116, 58, 0.5); color: #e6a179; background: rgba(217, 116, 58, 0.12); }
.badge--wip { border-color: rgba(211, 169, 98, 0.5); color: var(--brass-300); background: rgba(211, 169, 98, 0.12); }
.badge--live { border-color: rgba(147, 171, 124, 0.55); color: #b3c79c; background: rgba(147, 171, 124, 0.14); }
/* In-engine captures: the teal "testing" hue, so a capture can never be
   mistaken for the orange concept-art label beside it. */
.badge--capture { border-color: rgba(111, 163, 160, 0.6); color: #a9d0cd; background: rgba(111, 163, 160, 0.14); }

/* Status treatments: colour is always paired with a text label. */
.state { display: inline-flex; align-items: center; gap: 7px; font: 600 0.78rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.state--planned { color: var(--state-planned); }
.state--progress { color: var(--state-progress); }
.state--testing { color: var(--state-testing); }
.state--complete { color: var(--state-complete); }
.state--blocked { color: var(--state-blocked); }
.state--planned::before { border-radius: 0; transform: rotate(45deg); }
.state--progress::before { animation: state-pulse 2.6s var(--ease) infinite; }
.state--blocked::before { border-radius: 0; }
@keyframes state-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.callout {
  border-left: 2px solid var(--brass-500);
  background: linear-gradient(90deg, rgba(200, 171, 114, 0.07), transparent 60%);
  padding: 16px 20px;
  margin: 28px 0 0;
  font-size: 0.95rem;
  color: var(--sand-200);
}
.callout--fiction { border-left-color: var(--opfor-500); background: linear-gradient(90deg, rgba(156, 80, 68, 0.1), transparent 60%); }
/* Inspiration notice: brass, so it reads as attribution rather than warning. */
.callout--inspiration { border-left-color: var(--brass-500); background: linear-gradient(90deg, rgba(200, 171, 114, 0.09), transparent 60%); }
.callout--inspiration strong { color: var(--brass-300); }

.notice {
  margin-top: 32px;
  padding: 22px 26px;
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--brass-500);
  border-radius: var(--radius);
  background: var(--ink-850);
}
.notice--muted { background: transparent; }
.notice__title { font-size: 1.1rem; margin-bottom: 6px; }

/* Empty result set. Deliberately quiet: it is a normal outcome of searching,
   not an error, so it does not use the brass error rule. */
.empty-state {
  margin-top: 24px;
  padding: 32px 28px;
  border: 1px dashed var(--line-soft);
  border-radius: var(--radius);
  background: var(--ink-900);
  text-align: center;
}
.empty-state[hidden] { display: none; }
.empty-state__title {
  margin: 0 0 8px;
  font: 600 0.82rem/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-300);
}
.empty-state__body {
  margin: 0 auto 20px;
  max-width: 46ch;
  color: var(--sand-300);
}

.prealpha-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 32px;
  padding: 14px 20px;
  border: 1px solid rgba(217, 116, 58, 0.4);
  border-radius: var(--radius);
  background: rgba(217, 116, 58, 0.08);
  color: var(--sand-200);
  font-size: 0.95rem;
}
.prealpha-banner strong { color: #e6a179; }

.loading-note { color: var(--sage-400); font-size: 0.95rem; }
.error-note {
  border: 1px solid var(--state-blocked);
  border-radius: var(--radius);
  padding: 16px 20px;
  color: var(--sand-200);
  background: rgba(180, 105, 92, 0.08);
}

/* Cards */
.card-grid { display: grid; gap: 20px; }
.card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 40px; }

.card {
  position: relative;
  padding: 26px 26px 28px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(34, 48, 39, 0.55), rgba(22, 33, 27, 0.55)),
    var(--topo) repeat;
  background-size: auto, 420px 420px;
  transition: border-color var(--dur) ease, transform var(--dur) var(--ease), box-shadow var(--dur) ease;
}
.card::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--brass-500), transparent);
  opacity: 0.5;
  transition: opacity var(--dur) ease;
}
.card:hover { border-color: var(--line); transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.card:hover::before { opacity: 1; }
.card__title { font-size: 1.15rem; margin-bottom: 8px; }
.card--action { display: flex; flex-direction: column; }
.card--action p:last-child { margin-top: auto; padding-top: 8px; }

/* --------------------------------------------------------------------------
   4. Header and navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) ease, border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.site-header[data-nav-state="scrolled"] {
  background: rgba(7, 16, 11, 0.94);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.9);
}

.site-header__inner {
  height: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--sand-100);
  flex: none;
  min-height: 44px;
}
.brand__mark {
  width: 40px; height: 29px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--hairline);
}
.brand__text { display: grid; line-height: 1.05; }
.brand__name {
  font: 700 1.2rem/1 var(--font-display);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.brand__meta {
  font: 500 0.8rem/1.4 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-500);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-left: auto;
  padding: 10px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: rgba(7, 16, 11, 0.6);
  color: var(--sand-100);
  font: 700 0.82rem/1 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 4px; width: 18px; }
.nav-toggle__bars span { height: 2px; background: currentColor; transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.primary-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.primary-nav__list { display: flex; align-items: center; gap: 2px; list-style: none; }
.primary-nav__list a {
  position: relative;
  display: block;
  padding: 10px 9px;
  min-height: 44px;
  line-height: 24px;
  color: var(--sage-200);
  text-decoration: none;
  font: 600 0.92rem/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--dur-fast) ease;
}
.primary-nav__list a::after {
  content: "";
  position: absolute;
  left: 9px; right: 9px; bottom: 4px;
  height: 2px;
  background: var(--brass-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.primary-nav__list a:hover { color: var(--sand-100); }
.primary-nav__list a:hover::after { transform: scaleX(1); }
.primary-nav__list a[aria-current="true"] { color: var(--brass-300); }
.primary-nav__list a[aria-current="true"]::after { transform: scaleX(1); }

.primary-nav__aside { display: flex; align-items: center; gap: 8px; }

/* Mobile panel. The breakpoint sits at 1100px rather than 1000px because the
   desktop nav carries eight items at the larger menu type, and the panel is a
   better read than a squeezed single row on a 1024px tablet. */
@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    margin: 0;
    padding: 12px var(--gutter) 28px;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    background: rgba(7, 16, 11, 0.985);
    border-bottom: 1px solid var(--line-soft);
    box-shadow: var(--shadow-panel);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    /* visibility is discrete: delay the flip on close so the panel stays
       readable while it fades, but flip it instantly on open so the links are
       focusable in the same frame the menu appears. */
    transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease,
      visibility 0s linear var(--dur-fast);
  }
  .primary-nav[data-open="true"] {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease, visibility 0s;
  }
  .primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav__list li + li { border-top: 1px solid var(--line-soft); }
  .primary-nav__list a { padding: 14px 4px; font-size: 1rem; min-height: 48px; }
  .primary-nav__list a::after { left: 4px; right: auto; width: 22px; bottom: 8px; }
  .primary-nav__aside { justify-content: stretch; }
  .primary-nav__aside .btn { flex: 1; }
}

body[data-nav-open="true"] { overflow: hidden; }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -3; }
.hero__image {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}
/* Slow scale, opt-in, and never on the LCP-critical path. */
.js .hero__image { animation: hero-drift 26s var(--ease) forwards alternate; }
@keyframes hero-drift { from { transform: scale(1.0); } to { transform: scale(1.06); } }

/* Staggered entrance. Short, one-shot, and the copy is never hidden from a
   crawler or a no-JS client because the keyframes only run under .js. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.hero__scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(7, 16, 11, 0.66) 0%, rgba(7, 16, 11, 0.06) 30%, rgba(7, 16, 11, 0.34) 58%, rgba(7, 16, 11, 0.9) 82%, rgba(7, 16, 11, 0.98) 100%),
    radial-gradient(130% 100% at 8% 100%, rgba(7, 16, 11, 0.92) 0%, rgba(7, 16, 11, 0) 62%);
}
.hero__grain {
  position: absolute; inset: 0; z-index: -1;
  background-image: var(--grid);
  opacity: 0.5;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.hero__inner { width: 100%; padding-bottom: clamp(28px, 5.5vh, 76px); padding-top: calc(var(--header-h) + 24px); }
.hero__copy { max-width: 66ch; }

/* The approved lockup sits above the copy as its own element, so the artwork
   stays free of composited branding and the wordmark stays selectable text
   in the document outline. */
.hero__copy picture { display: block; }
.hero__logo {
  display: block;
  height: clamp(84px, 12.5vh, 128px);
  width: auto;
  margin: 0 0 20px;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.7));
}
.js .hero__logo { animation: rise-in 0.7s var(--ease) both; }
.js .hero__eyebrow { animation: rise-in 0.7s var(--ease) 0.07s both; }
.js .hero__title { animation: rise-in 0.7s var(--ease) 0.13s both; }
.js .hero__lede { animation: rise-in 0.7s var(--ease) 0.19s both; }
.js .hero__actions { animation: rise-in 0.7s var(--ease) 0.25s both; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 6px 13px;
  border: 1px solid var(--hairline);
  border-radius: 100px;
  background: rgba(7, 16, 11, 0.68);
  font: 600 0.75rem/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-300);
}
.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--state-progress);
  box-shadow: 0 0 0 3px rgba(211, 169, 98, 0.2);
}

.hero__title {
  font-size: clamp(1.5rem, 3.1vw, 2.5rem);
  color: var(--sand-100);
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.72), 0 1px 3px rgba(0, 0, 0, 0.6);
  margin-bottom: 10px;
  max-width: 30ch;
}
.hero__lede {
  font-size: clamp(0.98rem, 1.3vw, 1.1rem);
  color: var(--sand-200);
  max-width: 46ch;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--sage-400);
  text-decoration: none;
  font: 500 0.75rem/1 var(--font-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.hero__scroll:hover { color: var(--brass-300); }
.hero__scroll-line { width: 1px; height: 34px; background: linear-gradient(180deg, transparent, var(--brass-500)); }
.js .hero__scroll-line { animation: scroll-cue 2.4s var(--ease) infinite; }
@keyframes scroll-cue { 0% { transform: scaleY(0.2); transform-origin: top; opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleY(1); transform-origin: top; opacity: 0; } }

/* --------------------------------------------------------------------------
   6. Overview
   -------------------------------------------------------------------------- */
.overview {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  margin: 28px 0 0;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.fact { padding: 16px 18px; background: var(--ink-900); }
.fact dt {
  font: 600 0.75rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-500);
  margin-bottom: 7px;
}
.fact dd { margin: 0; color: var(--sand-100); font-size: 0.95rem; font-weight: 500; }

.overview__figure { margin: 0; }
.overview__figure img { width: 100%; border: 1px solid var(--line-soft); border-radius: var(--radius); }
.overview__figure figcaption {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 12px; font-size: 0.85rem; color: var(--sage-400);
}

/* --------------------------------------------------------------------------
   7. Feature pillars — alternating, not a repeated grid
   -------------------------------------------------------------------------- */
.pillar-list { display: grid; gap: 4px; }
.pillar {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  padding: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid var(--line-soft);
}
.pillar:last-child { border-bottom: 1px solid var(--line-soft); }
.pillar:nth-child(even) { grid-template-columns: minmax(0, 1fr) 96px; }
.pillar:nth-child(even) .pillar__index { order: 2; text-align: right; }

/* Decorative index numeral. It is aria-hidden, but it is still large text on
   screen, so it is held at 3:1 or better rather than fading into the band. */
.pillar__index {
  font: 600 2.2rem/1 var(--font-mono);
  color: var(--line-quiet);
  letter-spacing: -0.02em;
  padding-top: 4px;
}
.pillar__title {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.pillar__text { font-size: 1.04rem; color: var(--sand-200); max-width: 60ch; }
.pillar__points { list-style: none; margin: 18px 0 0; display: grid; gap: 9px; max-width: 60ch; }
.pillar__points li { position: relative; padding-left: 22px; color: var(--sage-200); font-size: 0.96rem; }
.pillar__points li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 9px; height: 1px; background: var(--brass-500);
}
.pillar__link { margin-top: 18px; font-size: 0.92rem; }
.pillar__link a { text-decoration: none; border-bottom: 1px solid var(--hairline); padding-bottom: 2px; }
.pillar__link a:hover { border-bottom-color: var(--brass-400); }

/* --------------------------------------------------------------------------
   8. Training modules
   -------------------------------------------------------------------------- */
.module-list { list-style: none; display: grid; gap: 2px; counter-reset: module; }
.module {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 20px;
  padding: 22px 24px;
  background: var(--ink-900);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--dur) ease, background-color var(--dur) ease;
}
.module:hover { border-left-color: var(--brass-500); background: var(--field-800); }
.module__num { font: 600 0.95rem/1.6 var(--font-mono); color: var(--brass-500); margin: 0; }
.module__title { font-size: 1.15rem; margin-bottom: 4px; }
.module__grants {
  font: 600 0.78rem/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--state-complete);
  margin-bottom: 8px;
}
.module p:last-child { margin: 0; color: var(--sage-200); font-size: 0.96rem; }

/* --------------------------------------------------------------------------
   9. Operations / factions
   -------------------------------------------------------------------------- */
.mirror {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 28px;
}
.mirror__side {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 22px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--ink-850);
}
.mirror__who {
  margin: 0 0 4px;
  font: 600 0.78rem/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sand-100);
}
.mirror__axis {
  align-self: stretch;
  width: 1px;
  margin: 0;
  display: grid;
  place-items: center;
  position: relative;
  background: linear-gradient(180deg, transparent, var(--brass-500), transparent);
}
.mirror__axis span {
  position: absolute;
  background: var(--ink-900);
  padding: 8px 12px;
  font: 600 0.75rem/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-500);
  white-space: nowrap;
  writing-mode: vertical-rl;
}

.chip {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 11px 14px;
  border-radius: var(--radius);
  border-left: 3px solid;
  font: 600 1rem/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chip__key { font: 500 0.76rem/1 var(--font-mono); letter-spacing: 0.08em; opacity: 0.85; }
.chip--friendly { background: rgba(167, 177, 163, 0.12); border-color: var(--sage-200); color: var(--sand-100); }
.chip--opposing { background: rgba(156, 80, 68, 0.2); border-color: var(--opfor-500); color: var(--opfor-300); }

.faction-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.faction { padding: 28px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--ink-850); }
.faction--friendly { border-top: 3px solid var(--brass-500); }
.faction--opposing { border-top: 3px solid var(--opfor-500); }
.faction__label {
  margin: 0 0 8px;
  font: 600 0.76rem/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-500);
}
.faction--opposing .faction__label { color: var(--opfor-300); }
.faction__title { font-size: 1.2rem; }

.kv { display: grid; gap: 10px; margin: 18px 0 0; }
.kv > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.kv dt { font: 600 0.76rem/1.5 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-400); }
.kv dd { margin: 0; color: var(--sand-100); font-size: 0.94rem; }

/* --------------------------------------------------------------------------
   10. Maps
   -------------------------------------------------------------------------- */
/* Loadout: in-engine captures of the weapon models, edge to edge in a 16:9 frame.
   The frame is a button because the lightbox reuses the trigger's resolved image source. */
.loadout {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}
.weapon {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--ink-850);
  overflow: hidden;
  transition: border-color var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.weapon:hover { border-color: rgba(200, 171, 114, 0.45); transform: translateY(-2px); }
.weapon__frame {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--ink-900);
  cursor: zoom-in;
  overflow: hidden;
}
.weapon__frame img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.weapon__frame:hover img { transform: scale(1.03); }
.weapon__frame .showcase__zoom { bottom: 10px; }
.weapon--maf { border-color: rgba(176, 94, 72, 0.35); }
.weapon__body { padding: 6px 22px 24px; }
.weapon__name {
  margin: 0 0 6px;
  font-size: 1.24rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.weapon__role { margin: 0; color: var(--sand-200); font-size: 0.96rem; }

/* In the engine: one large capture beside the firing clip and three facts. */
.inengine { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.inengine__main {
  position: relative; display: block; padding: 0; border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-900); cursor: zoom-in;
}
.inengine__main img { display: block; width: 100%; height: auto; transition: transform var(--dur-slow) var(--ease); }
.inengine__main:hover img { transform: scale(1.02); }
.inengine__main .showcase__zoom { bottom: 12px; }
.inengine__side { display: grid; gap: 18px; }
.inengine__clip { margin: 0; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-850); }
.inengine__clip img { display: block; width: 100%; height: auto; }
.inengine__clip figcaption { padding: 10px 14px; color: var(--sand-200); font-size: 0.88rem; }
.inengine__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.inengine__facts li { padding: 10px 0 0; border-top: 1px solid var(--line-soft); color: var(--sand-100); font-size: 0.94rem; }
.inengine__facts strong { color: var(--brass-300, var(--sand-100)); }
@media (max-width: 900px) { .inengine { grid-template-columns: 1fr; } }

.map-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.map-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(34, 48, 39, 0.5), rgba(11, 19, 16, 0.72)),
    var(--grid) repeat;
  background-size: auto, 48px 48px;
  transition: border-color var(--dur) ease, transform var(--dur) var(--ease);
}
.map-card::after {
  content: "";
  position: absolute; right: 0; bottom: 0;
  width: 34px; height: 34px;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.map-card:hover { border-color: var(--line); transform: translateY(-3px); }
.map-card__state { margin: 0 0 14px; }
.map-card__name { font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.map-card__terrain {
  margin: 0 0 12px;
  font: 500 0.82rem/1.4 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--brass-500);
}
.map-card p { font-size: 0.94rem; }
.map-card__meta { margin: auto 0 0; padding-top: 16px; display: grid; gap: 8px; }
.map-card__meta > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
.map-card__meta dt { font: 600 0.75rem/1.5 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-400); }
.map-card__meta dd { margin: 0; font-size: 0.86rem; color: var(--sand-200); }
.map-card__meta dd strong { color: var(--sand-100); font-weight: 600; }

/* The measured audit. A card like the map cards, but full width and with the
   scoreboard in it, so the numbers read as a single block rather than as part
   of any one map's story. It is deliberately not interactive. */
.maps__audit { margin-top: 28px; }
.maps__audit > p { max-width: 68ch; }
.maps__audit-title { font-size: 1.2rem; margin-bottom: 10px; }
.maps__audit .kv { margin-top: 18px; }
.maps__audit .section__note { margin-top: 18px; }

/* --------------------------------------------------------------------------
   11. Media showcase and gallery
   -------------------------------------------------------------------------- */
.showcase { margin: 0 0 32px; }
.showcase__frame {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--ink-850);
  cursor: zoom-in;
  overflow: hidden;
}
.showcase__frame img { width: 100%; height: auto; transition: transform var(--dur-slow) var(--ease), opacity var(--dur) ease; }
.showcase__frame:hover img { transform: scale(1.015); }
.showcase__zoom {
  position: absolute; right: 14px; bottom: 14px;
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: rgba(7, 16, 11, 0.82);
  font: 600 0.76rem/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sand-100);
}
.showcase figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-top: 14px; }
.showcase__caption-text { font-size: 0.9rem; color: var(--sage-400); max-width: 70ch; }

.gallery { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.gallery__item--wide { grid-column: 1 / -1; }
.gallery__item--wide img { aspect-ratio: 16 / 9; }
.subhead {
  margin: 40px 0 18px;
  font: 600 0.78rem/1 var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-300);
}
.nowrap { white-space: nowrap; }
.gallery__btn, .gallery__static {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--ink-850); text-align: left; cursor: pointer; overflow: hidden;
  transition: border-color var(--dur) ease, transform var(--dur) var(--ease);
}
.gallery__btn:hover { border-color: var(--brass-400); transform: translateY(-3px); }
.gallery__btn img, .gallery__static img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gallery__meta { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: 0.86rem; color: var(--sand-200); }

/* In-engine captures. Real frames are 16:9, so they are not cropped to the
   3:2 concept-art tiles. */
.captures { margin-bottom: 8px; }
.captures .subhead { margin-top: 8px; }
.captures__empty {
  max-width: 68ch;
  padding: 20px 22px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--sage-400);
  font-size: 0.95rem;
}
.gallery--captures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery--captures .gallery__btn img { aspect-ratio: 16 / 9; }
@media (max-width: 640px) { .gallery--captures { grid-template-columns: 1fr; } }
.gallery__meta--capture { align-items: flex-start; }
.gallery__meta-text { display: grid; gap: 3px; min-width: 0; }
.gallery__meta-title { color: var(--sand-100); font-weight: 600; }
.gallery__meta-where { font: 400 0.75rem/1.4 var(--font-mono); letter-spacing: 0.06em; color: var(--sage-400); }
.captures__note { margin-top: 14px; font-size: 0.86rem; color: var(--sage-400); max-width: 70ch; }

/* --------------------------------------------------------------------------
   12. Development status
   -------------------------------------------------------------------------- */
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }

/* Development pulse: three plain figures from the changelog, set as large
   display numerals on a hairline strip. */
.pulse {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 28px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--line-soft);
}
.pulse__stat { display: flex; flex-direction: column-reverse; gap: 8px; padding: 20px clamp(12px, 2vw, 24px); }
.pulse__stat + .pulse__stat { border-left: 1px solid var(--line-soft); }
.pulse__value {
  margin: 0;
  font: 700 clamp(1.6rem, 3vw, 2.4rem)/1 var(--font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--sand-100);
}
.pulse__label { font: 600 0.75rem/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-500); }
@media (max-width: 760px) {
  .pulse { grid-template-columns: 1fr; }
  .pulse__stat + .pulse__stat { border-left: 0; border-top: 1px solid var(--line-soft); }
}
.status-card {
  padding: 24px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--ink-900);
  border-top: 2px solid var(--line);
}
.status-card--accent { border-top-color: var(--brass-500); background: linear-gradient(180deg, rgba(200, 171, 114, 0.08), var(--ink-900) 60%); }
.status-card__label {
  margin: 0 0 10px;
  font: 600 0.75rem/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-500);
}
.status-card__value { margin: 0 0 10px; font: 700 1.1rem/1.3 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--sand-100); }
/* These cards quote the changelog verbatim, so they inherit whatever long
   file paths and identifiers the project's own documents contain. Without
   this a single 319px token pushes 4px of horizontal scroll onto a 360px
   phone. The text is generated, so the fix belongs here rather than in the
   source document. */
.status-card__body { margin: 0; font-size: 0.92rem; color: var(--sage-200); overflow-wrap: anywhere; }
.status-card__body ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.status-card__body li::marker { color: var(--brass-500); }
.status-card__meta { margin: 12px 0 0; font: 500 0.78rem/1.5 var(--font-mono); color: var(--sage-400); letter-spacing: 0.04em; }

/* --------------------------------------------------------------------------
   13. Roadmap timeline
   -------------------------------------------------------------------------- */
/* The timeline is a column, not a full-bleed table. Left unconstrained, the
   phase body stretched to over 1000px on a wide screen with the text sitting
   in the left third and a third of the page empty, which read as misaligned.
   Capping it to the reading measure and centring it puts the whole timeline
   on the page's axis and matches the FAQ and document treatments. */
.roadmap,
.doc-panel {
  width: 100%;
  max-width: var(--shell-narrow);
  margin-inline: auto;
}
.roadmap { display: grid; gap: 0; }

/* Roadmap meter: one segment per phase, coloured by the state the roadmap
   records. It is a map of the timeline, not a progress percentage. */
.roadmap-meter { margin: 0 0 36px; }
.roadmap-meter__summary { margin: 0 0 14px; font: 600 0.8rem/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand-200); }
.roadmap-meter__track { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; }
.roadmap-meter__link {
  display: grid; gap: 8px; min-height: var(--target-min);
  padding: 0 0 6px; color: var(--sage-400); text-decoration: none;
}
.roadmap-meter__bar { display: block; height: 6px; border-radius: 1px; background: var(--line-soft); transition: background var(--dur) ease; }
.roadmap-meter__num { font: 600 0.75rem/1 var(--font-mono); letter-spacing: 0.12em; color: var(--sage-400); }
.roadmap-meter__name { font: 600 0.9rem/1.2 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--sage-200); }
.roadmap-meter__step--complete .roadmap-meter__bar { background: var(--state-complete); }
.roadmap-meter__step--progress .roadmap-meter__bar {
  background: repeating-linear-gradient(135deg, var(--state-progress) 0 6px, rgba(211, 169, 98, 0.55) 6px 12px);
}
.roadmap-meter__step--blocked .roadmap-meter__bar { background: var(--state-blocked); }
.roadmap-meter__step--progress .roadmap-meter__name { color: var(--sand-100); }
.roadmap-meter__link:hover .roadmap-meter__name { color: var(--brass-300); }
.roadmap-meter__link:hover .roadmap-meter__bar { background-color: var(--line); }
@media (max-width: 760px) {
  .roadmap-meter__name { display: none; }
  .roadmap-meter__num { text-align: center; }
}
.phase {
  position: relative;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  padding: 28px 0 28px 0;
  border-top: 1px solid var(--line-soft);
}
.phase:last-child { border-bottom: 1px solid var(--line-soft); }
.phase__rail { position: relative; padding-left: 26px; }
.phase__rail::before {
  content: "";
  position: absolute; left: 4px; top: 8px; bottom: -29px;
  width: 1px; background: var(--line-soft);
}
.phase:last-child .phase__rail::before { display: none; }
.phase__node {
  position: absolute; left: 0; top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--line);
  box-shadow: 0 0 0 4px var(--ink-900);
}
.phase--current .phase__node { background: var(--brass-500); box-shadow: 0 0 0 4px var(--ink-900), 0 0 0 8px rgba(200, 171, 114, 0.16); }
.phase--done .phase__node { background: var(--state-complete); }
.phase__num {
  font: 600 0.82rem/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-400);
  margin: 0;
}
.phase--current .phase__num { color: var(--brass-400); }

.phase__body { min-width: 0; }
.phase__title { font-size: clamp(1.2rem, 2vw, 1.5rem); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.phase__goal { margin: 0 0 12px; color: var(--sage-200); max-width: 68ch; }
.phase__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.phase__exit {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line-soft);
  font-size: 0.88rem;
  color: var(--sage-400);
}
.phase__exit strong { color: var(--sand-200); font-weight: 600; }
.phase__details { margin-top: 4px; }
.phase__details > summary {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 0;
  color: var(--brass-300); cursor: pointer; list-style: none;
  font: 600 0.82rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.phase__details > summary::-webkit-details-marker { display: none; }
.phase__details > summary::after { content: "+"; font-size: 1.1rem; }
.phase__details[open] > summary::after { content: "\2212"; }
.phase__details .markdown-body { padding: 4px 0 8px; }

.doc-panel {
  margin-top: 36px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--ink-900);
  padding: 4px 24px 20px;
}
.doc-panel > summary {
  display: flex; align-items: center;
  min-height: 56px; padding: 12px 0;
  cursor: pointer; list-style: none;
  font: 600 0.9rem/1 var(--font-display);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sand-100);
}
.doc-panel > summary::-webkit-details-marker { display: none; }
.doc-panel > summary::after { content: "+"; margin-left: auto; color: var(--brass-400); font-size: 1.2rem; }
.doc-panel[open] > summary::after { content: "\2212"; }

/* --------------------------------------------------------------------------
   14. Changelog controls and list
   -------------------------------------------------------------------------- */
.changelog-controls {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 22px 24px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--ink-900);
}
.field__label {
  display: block;
  margin-bottom: 8px;
  font: 600 0.75rem/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-500);
}
.field__input {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-950);
  color: var(--sand-100);
  font: 400 0.95rem/1.4 var(--font-body);
}
.field__input::placeholder { color: var(--sage-400); opacity: 0.75; }
.field__input:focus-visible { border-color: var(--brass-400); }

.filters { border: 0; margin: 0; padding: 0; min-width: 0; }
.filters legend { padding: 0; }
.filters__row { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  display: inline-flex; align-items: center; gap: 7px;
  /* 44px is the WCAG 2.2 target-size minimum; these are tap-first controls. */
  min-height: var(--target-min); padding: 8px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 100px;
  background: var(--ink-850);
  color: var(--sage-200);
  font: 600 0.82rem/1 var(--font-mono);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.filter:hover { border-color: var(--brass-400); color: var(--sand-100); }
.filter[aria-pressed="true"] { background: var(--brass-500); border-color: var(--brass-500); color: var(--ink-950); }
.filter__count { opacity: 0.7; font-size: 0.76rem; }

.result-count { margin: 18px 0 0; font: 500 0.82rem/1 var(--font-mono); color: var(--sage-400); letter-spacing: 0.06em; }

/* `minmax(0, 1fr)`, not the default `auto` column. A session body containing a
   wide table sized the single implicit column to max-content (418px on a 390px
   phone), which pushed every session on the page past the viewport; body has
   `overflow-x: clip`, so 68px of each entry was clipped and unreachable instead
   of scrolling. The table keeps its own `overflow-x: auto` and scrolls itself. */
.sessions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
.session {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--ink-900);
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: auto 96px;
}
.session--latest { border-color: var(--hairline); background: linear-gradient(180deg, rgba(200, 171, 114, 0.06), var(--ink-900) 70%); }
.session__summary {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  cursor: pointer; list-style: none;
  min-height: 60px;
}
.session__summary::-webkit-details-marker { display: none; }
.session__summary::after {
  content: "+"; margin-left: auto; flex: none;
  color: var(--brass-400); font-size: 1.15rem; line-height: 1;
}
.session[open] .session__summary::after { content: "\2212"; }
.session__date {
  flex: none;
  font: 600 0.78rem/1.3 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--brass-500);
}
.session__title { font: 600 1.02rem/1.3 var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; color: var(--sand-100); margin: 0; }
.session__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.session__body { padding: 4px 20px 22px; border-top: 1px solid var(--line-soft); }
.session__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.session__link {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: var(--target-min); padding: 8px 12px;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: none; color: var(--sage-200); cursor: pointer;
  font: 600 0.78rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
}
.session__link:hover { border-color: var(--brass-400); color: var(--sand-100); }

/* Latest-session panel on the home page. Reuses the session card language
   so the two pages read as one system; the panel is a static article, not a
   disclosure, because it has nothing to collapse. */
.latest-update { max-width: var(--shell-narrow); margin-inline: auto; }
.latest-update__session { border-color: var(--hairline); background: linear-gradient(180deg, rgba(200, 171, 114, 0.07), var(--ink-900) 74%); }
.latest-update__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 20px 0; }
.latest-update__head .session__tags { margin: 0; }
.latest-update__session .session__title { padding: 0 20px; margin: 6px 0 14px; }
.latest-update__points { margin: 0 20px 14px; padding-left: 20px; display: grid; gap: 7px; color: var(--sage-200); font-size: 0.95rem; }
.latest-update__points li::marker { color: var(--brass-500); }
.latest-update__points code { font-size: max(var(--fs-floor), 0.84em); }
.latest-update__next { margin: 0 20px 18px; font-size: 0.95rem; color: var(--sand-200); }
.latest-update__next strong { color: var(--brass-300); font-weight: 600; }
.latest-update__actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 20px 22px; margin: 0; }

/* Page head for interior pages: narrower than a section head and carried on
   the brand rules, without a repeating banner image behind it. */
.page-head {
  padding: calc(var(--header-h) + clamp(40px, 7vw, 88px)) 0 clamp(24px, 4vw, 48px);
  background:
    radial-gradient(1100px 320px at 18% -10%, rgba(200, 171, 114, 0.10), transparent 62%),
    var(--ink-900);
  border-bottom: 1px solid var(--line-soft);
}
.page-head .section__title { margin-bottom: 0.35em; }
.page-head .section__lede { max-width: 66ch; }

/* Press kit (presskit.html) */
.press { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(28px, 5vw, 64px); align-items: start; }
.press .subhead, #assets .subhead { margin-top: 0; }
.press-facts > div { grid-template-columns: 140px minmax(0, 1fr); }
.press-copy { display: grid; gap: 10px; }
.press-copy p { max-width: 68ch; color: var(--sage-200); }
.press-copy__label { margin: 14px 0 0; font: 600 0.75rem/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-500); }
.press-copy__label:first-child { margin-top: 0; }
.press-note { max-width: 72ch; margin: 0 0 24px; color: var(--sage-400); }
.press-assets { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 20px; margin: 0; padding: 0; }
.press-asset__link {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--ink-850);
  color: inherit; text-decoration: none; overflow: hidden;
  transition: border-color var(--dur) ease, transform var(--dur) var(--ease);
}
.press-asset__link:hover { border-color: var(--brass-400); transform: translateY(-3px); }
.press-asset__frame { display: grid; place-items: center; aspect-ratio: 3 / 2; background: var(--ink-950) var(--grid); }
.press-asset__frame img { width: 100%; height: 100%; object-fit: cover; }
.press-asset:nth-child(-n + 2) .press-asset__frame img { width: auto; height: 72%; object-fit: contain; }
.press-asset__meta { display: grid; justify-items: start; gap: 6px; padding: 14px; }
.press-asset__title { font: 600 1.05rem/1.2 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--sand-100); }
.press-asset__spec { font: 400 0.75rem/1.4 var(--font-mono); letter-spacing: 0.06em; color: var(--sage-400); }
.press-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.press-list { display: grid; gap: 10px; padding-left: 1.1em; color: var(--sage-200); }
.page-head__meta {
  margin: 18px 0 0;
  font-size: 0.9rem;
  color: var(--sage-400);
  max-width: 70ch;
}

.day-group { margin-top: 26px; min-width: 0; }
.day-group__label {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 10px;
  font: 600 0.76rem/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage-400);
}
.day-group__label::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 2px; }
.faq__item { border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--ink-900); }
.faq__item[open] { border-color: var(--hairline); }
.faq__item > summary {
  display: flex; align-items: center; gap: 16px;
  min-height: 60px; padding: 16px 20px;
  cursor: pointer; list-style: none;
  font: 600 1.02rem/1.3 var(--font-display);
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--sand-100);
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after { content: "+"; margin-left: auto; color: var(--brass-400); font-size: 1.2rem; }
.faq__item[open] > summary::after { content: "\2212"; }
.faq__body { padding: 0 20px 20px; color: var(--sage-200); }
.faq__body p { max-width: 68ch; }
.spec-list { display: grid; margin: 16px 0; border-top: 1px solid var(--line-soft); }
.spec-list__row {
  display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr); gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
}
.spec-list dt { font: 600 0.75rem/1.5 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-500); }
.spec-list dd { margin: 0; }
@media (max-width: 560px) { .spec-list__row { grid-template-columns: 1fr; gap: 4px; } }

/* --------------------------------------------------------------------------
   16. Rendered Markdown
   -------------------------------------------------------------------------- */
.markdown-body { overflow-wrap: anywhere; }
.markdown-body > :first-child { margin-top: 16px; }
.markdown-body h1 { font-size: 1.6rem; margin: 28px 0 12px; }
.markdown-body h2 { font-size: 1.35rem; margin: 26px 0 10px; }
.markdown-body h3 { font-size: 1.08rem; margin: 22px 0 8px; color: var(--brass-300); }
.markdown-body h4 { font-size: 0.98rem; margin: 18px 0 6px; }
.markdown-body ul, .markdown-body ol { padding-left: 22px; display: grid; gap: 6px; margin: 0 0 16px; }
.markdown-body li::marker { color: var(--brass-500); }
.markdown-body blockquote {
  margin: 0 0 18px; padding: 12px 18px;
  border-left: 2px solid var(--brass-500);
  background: rgba(200, 171, 114, 0.06);
  color: var(--sand-200); font-size: 0.94rem;
}
.markdown-body table { display: block; overflow-x: auto; border-collapse: collapse; margin: 0 0 18px; font-size: 0.86rem; max-width: 100%; }
.markdown-body th, .markdown-body td { border: 1px solid var(--line-soft); padding: 8px 12px; text-align: left; vertical-align: top; }
.markdown-body th { background: var(--ink-850); color: var(--sand-100); font-weight: 600; white-space: nowrap; }
/* Sized relative to the surrounding prose, but never below the readability
   floor: a long file path in a 12.5px parent would otherwise land at 10.8px. */
.markdown-body code {
  background: var(--ink-950);
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 0.86em);
  line-height: 1.5;
  color: var(--brass-300);
}
.markdown-body pre { overflow-x: auto; background: var(--ink-950); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 18px; }
.markdown-body pre code { border: 0; padding: 0; background: none; }
.markdown-body hr { border: 0; border-top: 1px solid var(--line-soft); margin: 24px 0; }
.markdown-body del { color: var(--sage-400); }
.markdown-body strong { color: var(--sand-100); }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line-soft);
  background: var(--ink-900);
  padding-block: clamp(48px, 6vw, 80px) 28px;
  font-size: 0.92rem;
}
.site-footer__top { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 1.6fr); gap: clamp(32px, 5vw, 64px); }
.site-footer__mark {
  width: 64px; height: 47px; object-fit: cover;
  border: 1px solid var(--hairline); border-radius: 2px;
  filter: grayscale(1) contrast(1.05);
  margin-bottom: 14px;
}
.site-footer__name {
  font: 700 1.1rem/1 var(--font-display);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sand-100);
  margin: 0 0 10px;
}
.site-footer__tag { color: var(--sage-200); max-width: 34ch; }
.site-footer__status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--sage-400); font-size: 0.85rem; }

.site-footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px; }
.site-footer__heading {
  font: 600 0.76rem/1 var(--font-mono);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-500);
  margin: 0 0 14px;
}
.site-footer__nav ul { list-style: none; display: grid; gap: 4px; }
.site-footer__nav a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; color: var(--sage-200); }
.site-footer__nav a:hover { color: var(--brass-300); text-decoration: underline; }

.site-footer__legal {
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  display: grid; gap: 12px;
  color: var(--sage-400);
  max-width: 92ch;
}
.site-footer__legal strong { color: var(--sand-200); }
.site-footer__base {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  color: var(--sage-400); font-size: 0.85rem;
}
.to-top {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  color: var(--sand-100); text-decoration: none;
  font: 600 0.82rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
}
.to-top::before { content: "\2191"; }
.to-top:hover { border-color: var(--brass-400); }

/* --------------------------------------------------------------------------
   18. Lightbox
   -------------------------------------------------------------------------- */
.lightbox { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: clamp(16px, 4vw, 48px); }
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(4, 9, 7, 0.94); }
.lightbox__figure {
  position: relative; z-index: 1;
  margin: 0; max-width: min(1100px, 100%); max-height: 100%;
  display: grid; gap: 14px;
}
.lightbox__image {
  max-width: 100%; max-height: calc(100dvh - 200px);
  width: auto; height: auto;
  margin-inline: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--ink-900);
}
.lightbox__caption {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  color: var(--sand-200); font-size: 0.9rem;
}
.lightbox__caption p { margin: 0; max-width: 70ch; }
.lightbox__close {
  min-height: 44px; padding: 11px 20px;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: rgba(7, 16, 11, 0.8); color: var(--sand-100); cursor: pointer;
  font: 600 0.8rem/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase;
}
.lightbox__close:hover { border-color: var(--brass-400); }
.lightbox__nav {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--hairline); border-radius: 50%;
  background: rgba(7, 16, 11, 0.8); color: var(--sand-100);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.lightbox__nav:hover { border-color: var(--brass-400); color: var(--brass-300); }
.lightbox__nav--prev { left: clamp(8px, 2vw, 24px); }
.lightbox__nav--next { right: clamp(8px, 2vw, 24px); }

/* --------------------------------------------------------------------------
   19. Scroll reveal — opt-in, and never a gate on content
   -------------------------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) ease, transform var(--dur-slow) var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .overview { grid-template-columns: 1fr; }
  .changelog-controls { grid-template-columns: 1fr; }
  .site-footer__top { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .pillar, .pillar:nth-child(even) { grid-template-columns: 1fr; gap: 12px; }
  .pillar:nth-child(even) .pillar__index { order: 0; text-align: left; }
  .pillar__index { font-size: 1.5rem; }
  .phase { grid-template-columns: 1fr; gap: 12px; padding-left: 0; }
  .phase__rail { padding-left: 22px; }
  .phase__rail::before { top: 22px; bottom: -29px; }
  .mirror { grid-template-columns: 1fr; }
  .mirror__axis { width: auto; height: 1px; margin: 6px 0; }
  .mirror__axis span { writing-mode: horizontal-tb; position: static; background: none; padding: 0; }
  .kv > div, .map-card__meta > div { grid-template-columns: 1fr; gap: 2px; }
}

@media (max-width: 640px) {
  :root { --header-h: 62px; }
  body { font-size: 16px; }
  .module { grid-template-columns: 1fr; gap: 6px; }
  .session__summary { flex-wrap: wrap; gap: 8px; }
  .section--tight { padding-block: clamp(32px, 6vw, 56px); }
  .session__title { font-size: 0.98rem; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__scroll { display: none; }
  .doc-panel { padding-inline: 16px; }
  .card { padding: 22px 20px 24px; }
}

@media (min-width: 1600px) {
  :root { --shell: 1440px; --gutter: clamp(48px, 5vw, 96px); }
}

@media (min-width: 2200px) {
  body { font-size: 19px; }
  :root { --shell: 1680px; }
}

/* --------------------------------------------------------------------------
   21. Motion and forced colours
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .hero__image { animation: none; transform: none; }
  .js .hero__scroll-line { animation: none; opacity: 1; transform: none; }
  .js .hero__logo,
  .js .hero__eyebrow,
  .js .hero__title,
  .js .hero__lede,
  .js .hero__actions { animation: none; opacity: 1; transform: none; }
  .state--progress::before { animation: none; }
}

@media (forced-colors: active) {
  .badge, .filter, .card, .session, .phase, .map-card { border: 1px solid CanvasText; }
  .state::before { background: CanvasText; }
  .roadmap-meter__bar { border: 1px solid CanvasText; }
  .roadmap-meter__step--complete .roadmap-meter__bar,
  .roadmap-meter__step--progress .roadmap-meter__bar { background: CanvasText; }
}