/* ============================================================
   Type II — homepage
   Canon direction, executed at full fidelity.
   Craft bar: SpaceX (primary), Anduril, Varda.
   ============================================================ */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jbmono-var.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}

/* ---- TRIAL ONLY — logo + display-face exploration, 2026-08-10 -----------
   Candidate faces, loaded so the WHOLE SITE can be reset to any of them live
   on localhost via js/dev-fontswitch.js. None is adopted; Archivo is still
   the shipped default.

   To revert completely, delete: these five @font-face rules; the --wm-*
   custom properties; the html[data-font] and html[data-logo] blocks; the
   .logo-opt / .logo-drawn / .logo-png rules; js/dev-fontswitch.js and its
   three <script> tags; site/brand/logos/; and these woff2 files —
   jura, archivo-wdth, spacegrotesk, saira, chakra-400, chakra-700.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Jura';
  src: url('../fonts/jura-var.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'ArchivoWide';
  src: url('../fonts/archivo-wdth-var.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/spacegrotesk-var.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Saira';
  src: url('../fonts/saira-var.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('../fonts/chakra-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('../fonts/chakra-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --void:   #000000;
  --ink:    #F0F0FA;
  --ink-2:  rgba(240, 240, 250, 0.62);
  --ink-3:  rgba(240, 240, 250, 0.55);
  --rule:   rgba(240, 240, 250, 0.14);
  --rule-2: rgba(240, 240, 250, 0.07);
  --amber:  #FF6A1F;
  --deep:   #B34712;
  --datum:  #A8B4C8;

  --display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* TRIAL — wordmark face, switchable on localhost. Default = shipped Archivo. */
  --wm-family: var(--display);
  --wm-weight: 700;
  --wm-tracking: 0.02em;
  --wm-variation: normal;
  --wm-gap: 0.3em;

  --pad: clamp(20px, 5vw, 76px);
  --stack: clamp(64px, 9vw, 132px);
}

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

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

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

a { color: inherit; }

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

/* ---------- shared type ---------- */

.display {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.92;
  margin: 0;
  text-wrap: balance;
}

.section-title {
  font-size: clamp(26px, 3.6vw, 46px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
}

.prose {
  font-size: clamp(16px, 1.35vw, 19px);
  color: var(--ink-2);
  max-width: 68ch;
  margin: 0;
}
.prose + .prose { margin-top: 1.1em; }
.prose strong { color: var(--ink); font-weight: 600; }

.label {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--datum);
  margin: 0;
}

/* ---------- header ---------- */

.masthead {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: clamp(18px, 2.4vw, 30px) var(--pad);
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: var(--wm-gap);
  font-family: var(--wm-family);
  font-weight: var(--wm-weight);
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: var(--wm-tracking);
  font-variation-settings: var(--wm-variation);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
}
.wordmark .numeral { color: var(--amber); }

/* The mark: II as two structural members. Scales with the wordmark. */
.wm-mark {
  width: 0.62em;
  height: 1.05em;
  align-self: center;
  flex: none;
  color: var(--ink);
}

/* ---- TRIAL — SITE-WIDE display face. Overrides --display, so every heading,
   nav link, button, table and paragraph changes with it, not just the wordmark. */
html[data-font="archivo-expanded"] {
  --display: 'ArchivoWide', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --display-variation: 'wdth' 118;
}
html[data-font="space-grotesk"] {
  --display: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
html[data-font="saira"] {
  --display: 'Saira', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --display-variation: 'wdth' 112;
}
html[data-font="chakra"] {
  --display: 'Chakra Petch', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
html[data-font="jura"] {
  --display: 'Jura', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body { font-variation-settings: var(--display-variation, normal); }

/* ---- TRIAL — logo variants. Only the selected one is rendered. */
.logo-opt { display: none; align-items: baseline; gap: var(--wm-gap); }
html[data-logo="mark"]        .logo-opt[data-logo-opt="mark"],
html[data-logo="drawn"]       .logo-opt[data-logo-opt="drawn"],
html[data-logo="bars-vec"]    .logo-opt[data-logo-opt="bars-vec"],
html[data-logo="orbit-vec"]   .logo-opt[data-logo-opt="orbit-vec"],
html[data-logo="bars-dark"]   .logo-opt[data-logo-opt="bars-dark"],
html[data-logo="orbit-dark"]  .logo-opt[data-logo-opt="orbit-dark"],
html[data-logo="bars-light"]  .logo-opt[data-logo-opt="bars-light"],
html[data-logo="orbit-light"] .logo-opt[data-logo-opt="orbit-light"] { display: inline-flex; }
/* Default when no attribute is set. */
html:not([data-logo]) .logo-opt[data-logo-opt="mark"] { display: inline-flex; }

.logo-drawn { height: 1.28em; width: auto; display: block; }

/* Source PNGs are 1254² with ~26% padding on every side and a stacked
   wordmark, so used whole they render as an illegible smudge in a 60px
   masthead. These are cropped to the symbol alone (-mark), alpha-keyed off
   the black ground, and set beside live wordmark text instead. */
.logo-png {
  height: 3.8em;
  width: auto;
  display: block;
  align-self: center;
  flex: none;
}

/* Vector rebuilds of the two supplied concepts. Resolution-independent, so
   they can be set at any masthead size without the PNGs' crop/scale problem. */
.logo-vec {
  height: 3.4em;
  width: 3.4em;
  display: block;
  align-self: center;
  flex: none;
  color: var(--ink);
}

.nav {
  margin-left: auto;
  display: flex;
  gap: clamp(16px, 2.4vw, 34px);
}
.nav a {
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  opacity: 0.78;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: opacity .2s ease, border-color .2s ease;
}
.nav a:hover, .nav a:focus-visible { opacity: 1; border-bottom-color: var(--amber); }

/* Below ~700px the wordmark plus four links exceeds the viewport, which
   widened the document and let overflow-x:hidden CLIP the right edge of
   every paragraph. Stack the masthead and let the nav wrap instead. */
@media (max-width: 700px) {
  .masthead {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .nav {
    margin-left: 0;
    flex-wrap: wrap;
    gap: 8px 18px;
  }
  .nav a { font-size: 13px; letter-spacing: 0.06em; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--pad);
  padding-bottom: clamp(34px, 6vw, 78px);
  overflow: hidden;
}

#swarm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* keeps display type legible over the bright limb of the star */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 26%, rgba(0,0,0,0) 58%);
}

.hero-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 2.2vw, 28px);
  max-width: 1180px;
}

.hero h1 {
  font-size: clamp(34px, 7.4vw, 96px);
  max-width: 15ch;
}

.hero .prose { max-width: 56ch; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 50px;
  padding: 0 24px;
  border: 1px solid rgba(240, 240, 250, 0.34);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.45);
  color: var(--ink);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.btn:hover, .btn:focus-visible { border-color: var(--amber); background: rgba(255, 106, 31, 0.10); }
.btn:active { border-color: var(--deep); background: rgba(179, 71, 18, 0.20); }
.btn .arrow { color: var(--amber); transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

.btn-quiet {
  border-color: transparent;
  background: none;
  padding-left: 0;
  color: var(--ink-2);
}
.btn-quiet:hover, .btn-quiet:focus-visible {
  background: none;
  border-color: transparent;
  color: var(--ink);
}

/* ---------- sections ---------- */

.section {
  padding: var(--stack) var(--pad);
  border-top: 1px solid var(--rule-2);
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
}

.section-body {
  max-width: 1180px;
  margin: clamp(38px, 5vw, 64px) auto 0;
}

@media (min-width: 900px) {
  .section-head {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(40px, 5vw, 84px);
    align-items: start;
  }
}

/* ---------- beachhead comparison ---------- */

.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.compare caption {
  text-align: left;
  padding-bottom: 20px;
  color: var(--ink-2);
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: normal;
  max-width: 62ch;
}
.compare th, .compare td {
  text-align: left;
  padding: 20px 20px 20px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.compare thead th {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--datum);
  padding-bottom: 16px;
}
.compare tbody th {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  width: 26%;
  white-space: nowrap;
}
.compare td { color: var(--ink-2); }
.compare .verdict {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.compare .no  { color: var(--datum); }
.compare .yes { color: var(--amber); }

/* The match row lifts to full ink, but must NOT capture the verdict cell:
   `tr.match td` (0,2,2) outranked `.compare .yes` (0,2,0) and was painting the
   one decisive verdict white instead of amber. Excluding .verdict lets the
   verdict colours win, which is what DESIGN.md specifies. */
.compare tr.match th { color: var(--ink); }
.compare tr.match td:not(.verdict) { color: var(--ink); }

/* Wide content scrolls inside its own box; the page body never does. */
.tablewrap { overflow-x: auto; }

/* At phone widths the three-column comparison cannot fit, and it is the
   centrepiece of the argument, so it restructures into stacked blocks
   rather than becoming a horizontal scroll the reader has to discover. */
@media (max-width: 700px) {
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare thead { display: none; }
  .compare caption { padding-bottom: 14px; }
  .compare tr {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 22px 0;
    border-bottom: 1px solid var(--rule);
  }
  .compare th, .compare td {
    border: 0;
    padding: 0;
    white-space: normal;
  }
  .compare tbody th { font-size: 21px; order: 0; }
  .compare td.verdict { order: 1; }
  .compare td:not(.verdict) { order: 2; }
}

/* ---------- sequence ---------- */

.phases {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.phase {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 8px 22px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 860px) {
  .phase {
    grid-template-columns: 62px minmax(0, 300px) minmax(0, 1fr);
    align-items: baseline;
  }
}
.phase-no {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--amber);
  padding-top: 4px;
}
.phase-name {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0;
}
.phase-note { color: var(--ink-2); font-size: 15px; margin: 0; max-width: 62ch; }
.phase-horizon {
  grid-column: 2 / -1;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--datum);
  margin: 0;
}
@media (min-width: 860px) {
  .phase-horizon { grid-column: 2; margin-top: 6px; }
}

/* ---------- programs ---------- */

.programs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.program {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 24px 24px 30px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.program-name {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.program-role { color: var(--ink-2); font-size: 15px; line-height: 1.45; }

@media (max-width: 900px) { .programs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .programs { grid-template-columns: minmax(0, 1fr); } }

/* Placeholder affordances must be visibly inert AND legible. Blanket
   opacity took the placeholder to ~1.9:1; the floor requires >=4.5:1 with
   no disabled exemption, so the inert state is styled explicitly. */
.subscribe input:disabled {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--rule);
  color: var(--ink-3);
  cursor: not-allowed;
}
.subscribe input:disabled::placeholder { color: var(--ink-3); }
.subscribe button:disabled {
  background: none;
  border-color: var(--rule);
  color: var(--ink-3);
  cursor: not-allowed;
}
.placeholder-note {
  font-size: 14px;
  color: var(--amber);
  margin: 12px 0 0;
  font-family: var(--display);
  letter-spacing: normal;
}

/* ---------- close ---------- */

.close-grid {
  display: grid;
  gap: clamp(46px, 6vw, 84px);
  max-width: 1180px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .close-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
}

.subscribe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.subscribe input {
  flex: 1 1 220px;
  height: 50px;
  min-width: 0;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 15px;
}
.subscribe input::placeholder { color: var(--ink-3); }
.subscribe input:focus-visible { border-color: var(--amber); }

.form-note { font-size: 13px; color: var(--ink-3); margin: 12px 0 0; }

/* ---------- status band: the honesty statement ---------- */

.status {
  max-width: 1180px;
  margin: 0 auto;
  border: 1px solid var(--rule);
  border-left: 1px solid var(--amber);
  padding: clamp(22px, 3vw, 32px);
}
.status p { margin: 0; color: var(--ink-2); font-size: 15px; max-width: 74ch; }
.status p + p { margin-top: 10px; }
.status strong { color: var(--ink); font-weight: 600; }

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--rule-2);
  padding: 34px var(--pad) 46px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: baseline;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--datum);
}
.footer a { text-decoration: none; color: var(--ink-3); transition: color .2s ease; }
.footer a:hover, .footer a:focus-visible { color: var(--ink); }
.footer .spacer { margin-left: auto; }

/* ---------- utility ---------- */

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

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .btn, .btn .arrow, .nav a { transition: none; }
}

/* ============================================================
   Interior pages (/why, /thesis)
   No canvas. The swarm is the homepage's one authored moment and
   reusing it here would spend it twice, so these pages are type on
   the void and the masthead sits in flow instead of over a star.
   ============================================================ */

body.page .masthead { position: static; }

.pagehead {
  padding: clamp(40px, 6vw, 86px) var(--pad) clamp(38px, 5vw, 72px);
}
.pagehead-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 24px);
}
.pagehead h1 {
  font-size: clamp(34px, 7.4vw, 96px); /* Display step, unchanged from the hero */
  max-width: 16ch;
}
.pagehead .prose { max-width: 60ch; }

/* A statement that carries a section on its own — headline scale, no
   heading role. Lives inside .section-body, so the spine caps it. */
.statement {
  font-size: clamp(26px, 3.6vw, 46px); /* Headline step */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.statement .em { color: var(--amber); }

/* ---------- collapsed timelines (the /why ledger) ---------- */

.leaps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.leap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px 34px;
  padding: 30px 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 820px) {
  .leap { grid-template-columns: 200px minmax(0, 1fr); align-items: baseline; }
}

/* Mono, because these are real measured intervals — the one place on
   this page a figure exists. Amber because a numeral may be amber. */
.leap-years {
  font-family: var(--mono);
  font-size: clamp(38px, 5.2vw, 62px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--amber);
  display: block;
}
.leap-unit {
  display: block;
  margin-top: 9px;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--datum);
}
.leap-move {
  font-size: 21px; /* Title step */
  font-weight: 700;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0;
  max-width: 42ch;
}
/* Each state gets its own line so the arrow lands in the same place on
   every row. Inline, it wrapped to a different position in all three and
   read as an accident. */
.leap-from, .leap-to { display: block; }
.leap-to { margin-top: 2px; }
.leap-to .to { color: var(--amber); margin-right: 0.42em; }
.leap-dates {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin: 12px 0 0;
}

/* ---------- figure lattice (the /thesis numbers) ---------- */

.figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.figure-cell {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.figure-value {
  font-family: var(--mono);
  font-size: 21px; /* Title step, set in mono because these are measurements */
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: var(--ink);
}
.figure-cell.key .figure-value { color: var(--amber); }
.figure-label {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--datum);
}
.figure-note { color: var(--ink-2); font-size: 14px; line-height: 1.5; margin: 0; }

@media (max-width: 980px) { .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .figures { grid-template-columns: minmax(0, 1fr); } }

/* ---------- cross-page link row ---------- */

.onward {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}