/* ── _reset.css ─────────────────────────────────── */

/* ============================================================
   RESET
   What Tailwind's preflight was doing, written out.

   The design system in _system.css was always hand-written; the only thing
   it took from the framework was this — a normalised starting point. Rather
   than inherit 400 lines of vendor reset for the dozen rules that matter
   here, these are the dozen rules, each because something in the design
   depends on it.
   ============================================================ */

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

/* The design does all its spacing deliberately. Browser defaults on headings,
   paragraphs and lists fight that everywhere and are never wanted. */
html, body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol, fieldset, legend { margin: 0; padding: 0; }

ul[class], ol[class] { list-style: none; }

/* Headings inherit their scale from the type ramp, never from the browser. */
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }

/* Anchors are styled per component — .link, .nav-link, .btn. An underline
   the design did not ask for is a bug. */
a { color: inherit; text-decoration: none; }

/* Form controls do not inherit type by default, which is how a placeholder
   ends up in Times New Roman on one browser. */
button, input, optgroup, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
  background: transparent;
  border: 0;
}
button, [type="button"], [type="submit"] { cursor: pointer; }
textarea { resize: vertical; }

/* `display: block` on media is set in _system.css. This is the sizing half. */
img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle; }
img, video { height: auto; }

table { border-collapse: collapse; border-spacing: 0; }

hr { height: 0; color: inherit; border-top-width: 1px; }

/* The site is a HUD; `sr-only` carries real content for screen readers in the
   nav and the skip link, and losing it silently degrades accessibility
   without anything looking wrong. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.not-sr-only {
  position: static;
  width: auto; height: auto;
  padding: 0; margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ── fonts.css ─────────────────────────────────── */

/* ============================================================
   FONTS — served from our own origin

   The reference loaded these three families with a <link> to
   fonts.googleapis.com. That is a GDPR problem, not a preference: a German
   court awarded damages over exactly this in 2022, because the request sends
   the visitor's IP address to a third country before a single pixel renders,
   and no consent was asked. The visitors here are Belgian businesses.

   Fetching the files once at build time and serving them ourselves is what
   the rulings ask for, and it is faster as well — no DNS lookup, no TLS
   handshake, no second origin on the critical path.

   LATIN SUBSET ONLY. EN, NL and FR need Latin and Latin-Extended-A at most;
   shipping Cyrillic and Greek would triple the bytes for characters this site
   will never render. If a language with other glyphs is ever added, the
   subsets have to be added with it — which is one reason `content.LANGUAGES`
   is an explicit tuple rather than a directory listing.

   `font-display: swap` everywhere: text renders immediately in the fallback
   and reflows when the face arrives. The alternative is invisible text for up
   to three seconds, which is worse on exactly the bad connection this design
   was built to survive.
   ============================================================ */

/* ── Inter — body ────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/static/fonts/inter-300.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/inter-400.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/inter-500.woff2") format("woff2");
}

/* ── JetBrains Mono — the telemetry labels, the terminal ─────────────────── */

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/jetbrains-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/jetbrains-mono-500.woff2") format("woff2");
}

/* ── Space Grotesk — display ─────────────────────────────────────────────── */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/space-grotesk-500.woff2") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/space-grotesk-600.woff2") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/space-grotesk-700.woff2") format("woff2");
}

/* ── _system.css ─────────────────────────────────── */

/* ============================================================
   MCHLBLLN DESIGN SYSTEM  —  "Arc"
   Dark-native HUD. Graphite void + arc-reactor cyan.
   Every colour is a token. Never hardcode a hex in markup.
   ============================================================ */

:root {
  color-scheme: dark;

  /* --- Surfaces (darkest -> lightest) --- */
  --color-void:        #05070a;
  --color-base:        #0a0e14;
  --color-surface:     #10151e;
  --color-surface-2:   #161d28;
  --color-surface-3:   #1e2733;

  /* --- Lines --- */
  --color-line:        #1e2836;
  --color-line-soft:   #161e29;
  --color-line-bright: #2c3b4d;

  /* --- Text --- */
  --color-ink:         #e8eef6;
  --color-ink-2:       #9fb2c6;
  --color-ink-3:       #6b7d91;
  --color-ink-4:       #47576a;

  /* --- Arc reactor cyan (the one accent) --- */
  --color-arc:         #2ce8f5;
  --color-arc-bright:  #8df6fd;
  --color-arc-deep:    #0e7f94;
  --color-arc-ink:     #04222a;

  /* --- Stark gold (emphasis, sparing) --- */
  --color-gold:        #f5b942;
  --color-gold-deep:   #8a6412;

  /* --- Status --- */
  --color-online:      #34d399;
  --color-warn:        #fbbf24;
  --color-alert:       #ff5c5c;

  /* --- Type --- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Motion --- */
  --ease-out-hud: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-hud:  cubic-bezier(0.7, 0, 0.84, 0);
}

/* ============================================================
   BASE
   ============================================================ */

* { border-color: var(--color-line); }

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

body {
  background-color: var(--color-base);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

::selection {
  background-color: var(--color-arc);
  color: var(--color-arc-ink);
}

/* Visible, on-brand focus ring. Never removed. */
:focus-visible {
  outline: 2px solid var(--color-arc);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Scrollbar as an instrument, not a default */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-void); }
::-webkit-scrollbar-thumb {
  background: var(--color-surface-3);
  border: 2px solid var(--color-void);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-arc-deep); }

img, svg, video, canvas { display: block; max-width: 100%; }

/* The hidden attribute must beat any display utility on the same element. */
[hidden] { display: none !important; }

/* Tabular figures everywhere numbers matter */
.tnum, [data-count], time { font-variant-numeric: tabular-nums; }


/* ============================================================
   HUD PRIMITIVES
   ============================================================ */


/* --- Mono telemetry label: the signature detail --- */
.label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}
.label-arc { color: var(--color-arc); }

/* --- Section eyebrow with leading rule --- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-arc);
}
.eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-arc));
}

/* --- Panel: the base container of the whole site --- */
.panel {
  position: relative;
  background-color: color-mix(in oklab, var(--color-surface) 70%, transparent);
  border: 1px solid var(--color-line);
  backdrop-filter: blur(6px);
  transition: border-color 260ms var(--ease-out-hud),
              background-color 260ms var(--ease-out-hud);
}
.panel:hover { border-color: var(--color-line-bright); }

/* --- Corner brackets: reads as HUD at almost no cost --- */
.brackets::before,
.brackets::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: var(--color-arc);
  opacity: 0.55;
  transition: opacity 260ms var(--ease-out-hud),
              width 260ms var(--ease-out-hud),
              height 260ms var(--ease-out-hud);
  pointer-events: none;
}
.brackets::before {
  top: -1px; left: -1px;
  border-top: 1px solid; border-left: 1px solid;
}
.brackets::after {
  bottom: -1px; right: -1px;
  border-bottom: 1px solid; border-right: 1px solid;
}
.brackets:hover::before,
.brackets:hover::after { opacity: 1; width: 18px; height: 18px; }

/* --- Buttons --- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 48px;
  padding: 0 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 200ms var(--ease-out-hud),
              color 200ms var(--ease-out-hud),
              border-color 200ms var(--ease-out-hud),
              box-shadow 200ms var(--ease-out-hud);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background-color: var(--color-arc);
  color: var(--color-arc-ink);
}
.btn-primary:hover {
  background-color: var(--color-arc-bright);
  box-shadow: 0 0 28px -4px color-mix(in oklab, var(--color-arc) 55%, transparent);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-ink);
  border-color: var(--color-line-bright);
}
.btn-ghost:hover {
  border-color: var(--color-arc);
  color: var(--color-arc);
  background-color: color-mix(in oklab, var(--color-arc) 7%, transparent);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Status dot --- */
.dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--color-online);
  animation: pulse-dot 2.4s ease-out infinite;
  flex: none;
}
.dot-arc  { background: var(--color-arc); }
.dot-warn { background: var(--color-warn); animation: none; }
.dot-idle { background: var(--color-ink-4); animation: none; }

/* --- Form controls --- */
.field {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  background-color: var(--color-void);
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  transition: border-color 180ms var(--ease-out-hud),
              background-color 180ms var(--ease-out-hud);
}
.field::placeholder { color: var(--color-ink-4); }
.field:hover { border-color: var(--color-line-bright); }
.field:focus {
  border-color: var(--color-arc);
  background-color: color-mix(in oklab, var(--color-arc) 4%, var(--color-void));
  outline: none;
  box-shadow: 0 0 0 1px var(--color-arc);
}
.field[aria-invalid="true"] {
  border-color: var(--color-alert);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-alert) 60%, transparent);
}
textarea.field { min-height: 140px; resize: vertical; line-height: 1.6; }
select.field {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7d91' stroke-width='1.5' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
}

/* --- Link with HUD underline --- */
.link {
  color: var(--color-ink-2);
  text-decoration: none;
  background-image: linear-gradient(var(--color-arc), var(--color-arc));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 260ms var(--ease-out-hud),
              color 200ms var(--ease-out-hud);
}
.link:hover { color: var(--color-arc); background-size: 100% 1px; }

/* --- Chip (armory tags) --- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--color-line);
  background-color: color-mix(in oklab, var(--color-surface) 60%, transparent);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--color-ink-2);
  transition: color 200ms var(--ease-out-hud),
              border-color 200ms var(--ease-out-hud);
}
.chip:hover { color: var(--color-arc); border-color: var(--color-arc-deep); }

/* --- Hairline divider --- */
.rule { height: 1px; background: linear-gradient(90deg, var(--color-line), transparent); }

/* --- Nav links: active section gets an arc underline --- */
.nav-link {
  position: relative;
  padding: 0.5rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  transition: color 200ms var(--ease-out-hud);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.15rem;
  height: 1px;
  background: var(--color-arc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms var(--ease-out-hud);
}
.nav-link:hover { color: var(--color-ink); }
.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--color-arc); }

.mobile-link {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--color-line-soft);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  transition: color 200ms var(--ease-out-hud), padding-left 200ms var(--ease-out-hud);
}
.mobile-link:hover,
.mobile-link[aria-current] { color: var(--color-arc); padding-left: 0.5rem; }

/* --- Header, once the page has scrolled off the hero --- */
#nav.is-scrolled {
  background-color: color-mix(in oklab, var(--color-void) 85%, transparent);
  backdrop-filter: blur(20px);
  border-bottom-color: var(--color-line);
}

/* --- Form result banner (JS toggles these) --- */
.result-ok,
.result-err {
  margin-top: 1.5rem;
  border: 1px solid;
  padding: 1.25rem;
}
.result-ok  { border-color: color-mix(in oklab, var(--color-online) 40%, transparent);
              background-color: color-mix(in oklab, var(--color-online) 6%, transparent); }
.result-err { border-color: color-mix(in oklab, var(--color-alert) 40%, transparent);
              background-color: color-mix(in oklab, var(--color-alert) 6%, transparent); }

.result-ok  .result-title { color: var(--color-online); }
.result-err .result-title { color: var(--color-alert); }

.result-title {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.result-body { margin-top: 0.5rem; font-size: 0.875rem; color: var(--color-ink-2); }


/* ============================================================
   ATMOSPHERE  (grid, scanlines, masks)
   Very low opacity — texture, not decoration.
   ============================================================ */


.bg-grid {
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--color-arc) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--color-arc) 7%, transparent) 1px, transparent 1px);
  background-size: 72px 72px;
}

.bg-grid-fine {
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--color-arc) 5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--color-arc) 5%, transparent) 1px, transparent 1px);
  background-size: 18px 18px;
}

.mask-fade-b {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

.mask-radial {
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
}

.scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    color-mix(in oklab, var(--color-arc) 5%, transparent) 0px,
    color-mix(in oklab, var(--color-arc) 5%, transparent) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.35;
}

.text-glow { text-shadow: 0 0 20px color-mix(in oklab, var(--color-arc) 28%, transparent); }
.glow-arc  { box-shadow: 0 0 60px -12px color-mix(in oklab, var(--color-arc) 40%, transparent); }


/* ============================================================
   MOTION
   ============================================================ */

@keyframes pulse-dot {
  0%   { opacity: 1;    transform: scale(1); }
  60%  { opacity: 0.35; transform: scale(0.82); }
  100% { opacity: 1;    transform: scale(1); }
}

@keyframes sweep-y {
  0%   { transform: translateY(0);      opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(100vh);  opacity: 0; }
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes caret {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

@keyframes scroll-cue {
  0%   { transform: translateY(-110%); opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(260%); opacity: 0; }
}

.animate-scroll-cue { animation: scroll-cue 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.animate-sweep  { animation: sweep-y 9s linear infinite; }
.animate-ticker { animation: ticker 46s linear infinite; }
.animate-caret  { animation: caret 1s step-end infinite; }

/* --- Scroll reveal: enter from below, staggered by JS --- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 700ms var(--ease-out-hud),
    transform 700ms var(--ease-out-hud);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ============================================================
   REDUCED MOTION  —  hard stop, not a suggestion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  [data-reveal] { opacity: 1 !important; transform: none !important; }

  .animate-sweep,
  .animate-ticker { display: none; }

  .scanlines::after { display: none; }
}

/* Print: strip the theatre, keep the information */
@media print {
  body { background: #fff; color: #000; }
  .no-print, canvas { display: none !important; }
}

/* ── atmosphere.css ─────────────────────────────────── */

/* ============================================================
   ATMOSPHERE
   The fixed texture layer behind everything. Non-interactive.

   Ported from four divs and eleven utility classes, two of which were
   arbitrary-value gradients written inline with underscores standing in for
   spaces:

     bg-[radial-gradient(ellipse_80%_50%_at_50%_-10%,color-mix(in_oklab,
       var(--color-arc)_10%,transparent),transparent)]

   That is the case for this port in one line. The gradient is the same; it
   is now something a person can adjust.
   ============================================================ */

.atmosphere {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.atmosphere > * {
  position: absolute;
  inset: 0;
}

/* The 72px graticule, masked to an ellipse so it fades at the edges rather
   than stopping at them. */
.atmosphere-grid {
  background-image:
    linear-gradient(to right,
      color-mix(in oklab, var(--color-arc) 7%, transparent) 1px,
      transparent 1px),
    linear-gradient(to bottom,
      color-mix(in oklab, var(--color-arc) 7%, transparent) 1px,
      transparent 1px);
  background-size: 72px 72px;
  opacity: 0.4;
  -webkit-mask-image:
    radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
  mask-image:
    radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
}

/* A cold glow spilling in from above the fold. */
.atmosphere-glow {
  background: radial-gradient(ellipse 80% 50% at 50% -10%,
    color-mix(in oklab, var(--color-arc) 10%, transparent),
    transparent);
}

/* The scan line that travels down the viewport once every nine seconds.
   `animate-sweep` in _system.css already stops it under reduced motion. */
.atmosphere-sweep {
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    color-mix(in oklab, var(--color-arc) 30%, transparent),
    transparent);
  animation: sweep-y 9s linear infinite;
}

/* Darkens the corners so the content sits in the middle of the instrument. */
.atmosphere-vignette {
  background: radial-gradient(ellipse 100% 70% at 50% 50%,
    transparent 40%, var(--color-void) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .atmosphere-sweep { display: none; }
}

/* ── the skip link ─────────────────────────────────────────────────────────
   Hidden until focused, then unmissable. It was nine `focus:` variants in
   the markup; it is one state here.
   ------------------------------------------------------------------------ */

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

.skip-link:focus {
  position: fixed;
  top: 1rem; left: 1rem;
  z-index: 200;
  width: auto; height: auto;
  margin: 0;
  padding: 0.75rem 1rem;
  overflow: visible;
  clip: auto;
  background-color: var(--color-arc);
  color: var(--color-arc-ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.main { position: relative; z-index: 10; }

/* ── layout.css ─────────────────────────────────── */

/* ============================================================
   LAYOUT
   The container, the section rhythm, and the type ramp.

   These are the four or five measurements the whole page is built on, and in
   the reference they were repeated as utility strings on every section:
   `mx-auto max-w-7xl px-5 lg:px-10` appears in eleven partials. Named once
   here, they can be changed once.

   The scale values are READ from the compiled reference, not recalled:
   --container-7xl is 80rem, --spacing is 0.25rem so py-24 is 6rem, and
   --text-lg is 1.125rem with a line-height of calc(1.75 / 1.125).
   ============================================================ */

:root {
  /* The page's own measurements, as tokens so a section can reason about
     them rather than hardcoding a matching number. */
  --measure:        80rem;    /* max-w-7xl */
  --gutter:         1.25rem;  /* px-5 */
  --gutter-lg:      2.5rem;   /* lg:px-10 */
  --section-y:      6rem;     /* py-24 */
  --section-y-lg:   9rem;     /* lg:py-36 */
  --nav-h:          4rem;     /* h-16 */
  --nav-h-lg:       5rem;     /* lg:h-20 */

  /* Type ramp. The reference used Tailwind's scale; these are the four steps
     it actually reached for. */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
}

/* ── the container ───────────────────────────────────────────────────────
   Every section's inner wrapper. One rule instead of eleven copies of the
   same four utilities.
   ------------------------------------------------------------------------ */

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

@media (min-width: 64rem) {
  .container { padding-inline: var(--gutter-lg); }
}

/* ── section rhythm ──────────────────────────────────────────────────────
   `relative scroll-mt-24 py-24 lg:py-36` on every section. The scroll margin
   is load-bearing: without it an in-page anchor lands the heading underneath
   the fixed header, which looks like the link went to the wrong place.
   ------------------------------------------------------------------------ */

.section {
  position: relative;
  padding-block: var(--section-y);
  scroll-margin-top: var(--section-y);
}

@media (min-width: 64rem) {
  .section { padding-block: var(--section-y-lg); }
}

/* html had `scroll-pt-24` in the reference, which is the same idea applied
   to every anchor rather than per section. Kept, because a target without
   its own .section class still needs it. */
html { scroll-padding-top: var(--section-y); }

/* ── section headers ─────────────────────────────────────────────────────
   eyebrow / title / lede, repeated in six sections with identical spacing.
   ------------------------------------------------------------------------ */

.section-head { max-width: 48rem; }

.section-title {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.section-lede {
  margin-top: 1.5rem;
  font-size: var(--text-lg);
  line-height: 1.625;
  color: var(--color-ink-2);
}

/* ── small shared pieces ─────────────────────────────────────────────────── */

.tnum { font-variant-numeric: tabular-nums; }

.stack { display: flex; flex-direction: column; }

/* A horizontal row of items with the design's default gap. Used by the
   status readout, the availability strip, and the reactor readouts. */
.row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

@media print {
  .no-print { display: none !important; }
}

/* ── nav.css ─────────────────────────────────── */

/* ============================================================
   NAV
   Fixed header, wordmark, status readout, language switcher, mobile menu.

   `.nav-link`, `.mobile-link` and `#nav.is-scrolled` already live in
   _system.css — they were hand-written in the reference and are untouched.
   This is everything that was utility classes in the markup.
   ============================================================ */

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid transparent;
  transition: background-color 300ms var(--ease-out-hud),
              border-color 300ms var(--ease-out-hud),
              backdrop-filter 300ms var(--ease-out-hud);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--nav-h);
}

@media (min-width: 64rem) {
  .nav-inner { height: var(--nav-h-lg); }
}

/* ── wordmark ────────────────────────────────────────────────────────────
   A bordered square with a dot in it, and a second border that expands
   outward on hover. The reference expressed the halo as
   `group-hover:inset-[-3px]`, which is why it needed the `group` class; a
   descendant selector says the same thing without one.
   ------------------------------------------------------------------------ */

.wordmark {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.75rem;
}

.wordmark-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid color-mix(in oklab, var(--color-arc-deep) 60%, transparent);
  transition: border-color 200ms var(--ease-out-hud);
}

.wordmark:hover .wordmark-mark { border-color: var(--color-arc); }

.wordmark-core {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--color-arc);
  transition: box-shadow 500ms var(--ease-out-hud);
}

.wordmark:hover .wordmark-core {
  box-shadow: 0 0 14px 2px var(--color-arc);
}

.wordmark-halo {
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  transition: inset 500ms var(--ease-out-hud),
              border-color 500ms var(--ease-out-hud);
}

.wordmark:hover .wordmark-halo {
  inset: -3px;
  border-color: color-mix(in oklab, var(--color-arc) 30%, transparent);
}

.wordmark-text {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--color-ink);
}

/* ── the pieces that only exist on desktop ───────────────────────────────
   Hidden below 64rem rather than shown above it, so the mobile layout is
   the one that renders without a media query — which is the one a slow
   phone paints first.
   ------------------------------------------------------------------------ */

.nav-primary,
.nav-status,
.lang-switch,
.nav-cta { display: none; }

.menu-toggle {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  transition: border-color 200ms var(--ease-out-hud),
              color 200ms var(--ease-out-hud);
}

.menu-toggle:hover {
  border-color: var(--color-arc);
  color: var(--color-arc);
}

@media (min-width: 64rem) {
  .nav-primary {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
  }

  .nav-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-left: 1.5rem;
    border-left: 1px solid var(--color-line);
  }

  .lang-switch {
    display: flex;
    align-items: center;
    gap: 1px;
    border: 1px solid var(--color-line);
  }

  .menu-toggle { display: none; }
}

@media (min-width: 80rem) {
  .nav-cta { display: inline-flex; }
}

.nav-clock { color: var(--color-ink-2); }

/* ── language switcher ───────────────────────────────────────────────────── */

.lang-option {
  padding: 0.625rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-ink-3);
  transition: color 200ms var(--ease-out-hud),
              background-color 200ms var(--ease-out-hud);
}

.lang-option:hover { color: var(--color-arc); }

.lang-option.is-current {
  background-color: var(--color-arc);
  color: var(--color-arc-ink);
}

/* ── mobile menu ─────────────────────────────────────────────────────────
   `hidden` is an attribute here, not a class. _system.css already makes
   `[hidden]` beat any display rule, which is what lets the JS toggle it
   without knowing anything about the layout.
   ------------------------------------------------------------------------ */

.mobile-menu {
  border-top: 1px solid var(--color-line);
  background-color: color-mix(in oklab, var(--color-void) 95%, transparent);
  backdrop-filter: blur(24px);
}

@media (min-width: 64rem) {
  .mobile-menu { display: none !important; }
}

.mobile-menu-inner { padding-block: 1.5rem; }

.mobile-link.is-cta { color: var(--color-arc); }

.mobile-menu-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-line);
}

.mobile-langs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mobile-lang {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--color-ink-3);
  transition: border-color 200ms var(--ease-out-hud),
              color 200ms var(--ease-out-hud);
}

.mobile-lang:hover {
  border-color: var(--color-arc);
  color: var(--color-arc);
}

.mobile-lang.is-current {
  border-color: var(--color-arc);
  background-color: var(--color-arc);
  color: var(--color-arc-ink);
}

/* The icon swap. `hidden` again as an attribute, toggled by main.js. */
.menu-open-icon[hidden],
.menu-close-icon[hidden] { display: none; }

/* ── hero.css ─────────────────────────────────── */

/* ============================================================
   HERO
   Full-viewport, copy left, arc reactor right, scroll cue below.
   ============================================================ */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100dvh;
  overflow: hidden;
  padding-top: 6rem;      /* clears the fixed header */
  padding-bottom: 4rem;
}

@media (min-width: 64rem) {
  .hero { padding-top: 7rem; }
}

/* ── corner ticks ────────────────────────────────────────────────────────
   Four L-shaped marks insetting the viewport, like the frame of an
   instrument. Desktop only: on a phone they crowd the copy.
   ------------------------------------------------------------------------ */

.hero-ticks { display: none; }

@media (min-width: 64rem) {
  .hero-ticks {
    display: block;
    pointer-events: none;
    position: absolute;
    inset: 1rem;
    z-index: 0;
  }

  .hero-tick {
    position: absolute;
    width: 2rem;
    height: 2rem;
    border-color: color-mix(in oklab, var(--color-arc) 25%, transparent);
  }

  .hero-tick.is-tl {
    top: 0; left: 0;
    border-top: 1px solid; border-left: 1px solid;
  }
  .hero-tick.is-tr {
    top: 0; right: 0;
    border-top: 1px solid; border-right: 1px solid;
  }
  .hero-tick.is-bl {
    bottom: 0; left: 0;
    border-bottom: 1px solid; border-left: 1px solid;
  }
  .hero-tick.is-br {
    bottom: 0; right: 0;
    border-bottom: 1px solid; border-right: 1px solid;
  }
}

/* ── the grid ────────────────────────────────────────────────────────────── */

.hero-grid {
  position: relative;
  display: grid;
  align-items: center;
  gap: 3rem;
}

@media (min-width: 64rem) {
  .hero-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2rem;
  }
  .hero-copy    { grid-column: span 7; }
  .hero-reactor { grid-column: span 5; }
}

.hero-copy {
  position: relative;
  z-index: 10;
}

/* ── the headline ────────────────────────────────────────────────────────
   The whole point of the page. `clamp(2.6rem, 8.2vw, 5.5rem)` is the type
   ramp a utility vocabulary cannot express without an arbitrary value, which
   is the argument for this port in one declaration.
   ------------------------------------------------------------------------ */

.hero-title {
  margin-top: 1.75rem;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 8.2vw, 5.5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.hero-title-line { display: block; }
.hero-title-line.is-accent { color: var(--color-arc); }

.hero-lede {
  margin-top: 2rem;
  max-width: 36rem;
  font-size: var(--text-lg);
  line-height: 1.625;
  color: var(--color-ink-2);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.hero-availability { margin-top: 2.5rem; }

/* ── the reactor ─────────────────────────────────────────────────────────── */

.hero-reactor {
  position: relative;
  z-index: 0;
}

.reactor-rig {
  position: relative;
  margin-inline: auto;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
}

@media (min-width: 40rem) { .reactor-rig { max-width: 380px; } }
@media (min-width: 64rem) { .reactor-rig { max-width: 420px; } }

.reactor-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.reactor-readouts {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.reactor-readout {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.reactor-readout.is-left  { left: 0;  top: 14%; }
.reactor-readout.is-right { right: 0; bottom: 16%; }

.reactor-tick {
  width: 2rem;
  height: 1px;
  background: color-mix(in oklab, var(--color-arc) 40%, transparent);
}

.reactor-label {
  font-size: 10px;
  color: color-mix(in oklab, var(--color-arc) 70%, transparent);
}

.reactor-sub { font-size: 10px; }

/* ── scroll cue ──────────────────────────────────────────────────────────
   A dot travelling down a hairline track. Desktop only — on a phone the
   page is obviously scrollable and the cue is just something in the way.
   ------------------------------------------------------------------------ */

.scroll-cue { display: none; }

@media (min-width: 64rem) {
  .scroll-cue {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
}

.scroll-cue-text {
  font-size: 10px;
  color: var(--color-ink-4);
  transition: color 200ms var(--ease-out-hud);
}

.scroll-cue:hover .scroll-cue-text { color: var(--color-arc); }

.scroll-cue-track {
  display: block;
  width: 1px;
  height: 2.5rem;
  overflow: hidden;
  background: var(--color-line);
}

.scroll-cue-dot {
  display: block;
  width: 1px;
  height: 1rem;
  background: var(--color-arc);
  animation: scroll-cue 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* ── sections.css ─────────────────────────────────── */

/* ============================================================
   SECTIONS
   Telemetry, capabilities, fleet, work, process, about.

   The shared vocabulary first — `.chips`, `.is-inset` — then each section.
   ============================================================ */

/* A wrapped row of chips. Six places used `flex flex-wrap gap-1.5`. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* Sections that sit in a recessed band: a darker ground and rules top and
   bottom. Fleet and Approach both use it. */
.section.is-inset {
  border-block: 1px solid var(--color-line);
  background-color: color-mix(in oklab, var(--color-void) 40%, transparent);
}

/* ── telemetry ───────────────────────────────────────────────────────────
   The ticker and the four counters.
   ------------------------------------------------------------------------ */

.telemetry {
  position: relative;
  border-block: 1px solid var(--color-line);
  background-color: color-mix(in oklab, var(--color-void) 60%, transparent);
}

.ticker {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--color-line);
  padding-block: 0.75rem;
}

/* The track holds two identical halves and translates by -50%, so the second
   copy is mid-frame when the first runs out. Remove either and the marquee
   jumps once per lap. */
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 46s linear infinite;
}

.ticker-half {
  display: flex;
  flex: none;
}

.ticker-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-inline: 1.5rem;
  color: var(--color-ink-4);
}

.ticker-dot {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-arc) 40%, transparent);
}

/* The ends fade into the page rather than being clipped. */
.ticker-fade {
  pointer-events: none;
  position: absolute;
  inset-block: 0;
  width: 6rem;
}
.ticker-fade.is-left {
  left: 0;
  background: linear-gradient(to right, var(--color-base), transparent);
}
.ticker-fade.is-right {
  right: 0;
  background: linear-gradient(to left, var(--color-base), transparent);
}

.telemetry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-inline: 0;
}

@media (min-width: 64rem) {
  .telemetry-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The dividers, as borders rather than Tailwind's `divide-*` — which emits a
   `:not(:last-child)` selector and gets the corners wrong at two columns. */
.telemetry-cell {
  padding: 2rem 1.25rem;
  border-top: 1px solid var(--color-line);
  border-left: 1px solid var(--color-line);
  transition: background-color 200ms var(--ease-out-hud);
}

.telemetry-cell:hover {
  background-color: color-mix(in oklab, var(--color-surface) 40%, transparent);
}

@media (min-width: 64rem) {
  .telemetry-cell { padding: 2.5rem; border-top: 0; }
}

.telemetry-value {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

@media (min-width: 64rem) {
  .telemetry-value { font-size: 3rem; }
}

.telemetry-suffix { color: var(--color-arc); }

.telemetry-label { margin-top: 0.75rem; }
.telemetry-cell:hover .telemetry-label { color: var(--color-arc); }

.telemetry-note {
  margin-top: 0.25rem;
  font-size: var(--text-xs);
  color: var(--color-ink-4);
}

/* ── capabilities ────────────────────────────────────────────────────────
   A hairline grid: the container's background shows through 1px gaps, which
   is how the cards get shared borders that never double up.
   ------------------------------------------------------------------------ */

.cap-grid {
  display: grid;
  gap: 1px;
  margin-top: 4rem;
  border: 1px solid var(--color-line);
  background-color: var(--color-line);
}

@media (min-width: 40rem) {
  .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cap {
  position: relative;
  padding: 2rem;
  background-color: var(--color-base);
  transition: background-color 300ms var(--ease-out-hud);
}

@media (min-width: 64rem) { .cap { padding: 2.5rem; } }

.cap:hover {
  background-color: color-mix(in oklab, var(--color-surface) 60%, transparent);
}

.cap-tick {
  pointer-events: none;
  position: absolute;
  right: 0; top: 0;
  width: 1.5rem; height: 1.5rem;
  border-right: 1px solid var(--color-arc);
  border-top: 1px solid var(--color-arc);
  opacity: 0;
  transition: opacity 300ms var(--ease-out-hud);
}

.cap:hover .cap-tick { opacity: 0.7; }

.cap-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.cap-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem; height: 3rem;
  border: 1px solid var(--color-line);
  color: var(--color-arc);
  transition: border-color 300ms var(--ease-out-hud),
              background-color 300ms var(--ease-out-hud);
}

.cap:hover .cap-icon {
  border-color: var(--color-arc-deep);
  background-color: color-mix(in oklab, var(--color-arc) 5%, transparent);
}

.cap-code { font-size: 10px; color: var(--color-ink-4); }

.cap-title {
  margin-top: 1.75rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.cap-desc {
  margin-top: 1rem;
  line-height: 1.625;
  color: var(--color-ink-2);
}

.cap-bullets {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.cap-bullet {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.625;
  color: var(--color-ink-3);
}

.cap-bullet-mark {
  flex: none;
  margin-top: 7px;
  width: 0.25rem; height: 0.25rem;
  background: var(--color-arc);
}

/* ── fleet ───────────────────────────────────────────────────────────────
   A vertical tablist. Every selected state keys off `aria-selected="true"`
   rather than a second class, so the accessible state and the visual state
   cannot drift apart — there is only one of them.
   ------------------------------------------------------------------------ */

.fleet {
  border-block: 1px solid var(--color-line);
  background-color: color-mix(in oklab, var(--color-void) 40%, transparent);
  overflow: hidden;
}

.fleet-grid-texture {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,
      color-mix(in oklab, var(--color-arc) 5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom,
      color-mix(in oklab, var(--color-arc) 5%, transparent) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.35;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

.fleet-inner { position: relative; }

.fleet-body {
  display: grid;
  gap: 2rem;
  margin-top: 4rem;
}

@media (min-width: 64rem) {
  .fleet-body {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2.5rem;
  }
  .fleet-list-col  { grid-column: span 5; }
  .fleet-panel-col { grid-column: span 7; }
}

.fleet-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.fleet-hint-tick {
  width: 1rem; height: 1px;
  background: color-mix(in oklab, var(--color-arc) 50%, transparent);
}

.fleet-list { position: relative; }

/* The pipeline spine, running behind the nodes. */
.fleet-spine {
  pointer-events: none;
  position: absolute;
  left: 27px;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 1px;
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--color-arc) 40%, transparent),
    var(--color-line),
    transparent);
}

.fleet-tab {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 0.75rem;
  border: 1px solid transparent;
  text-align: left;
  transition: background-color 200ms var(--ease-out-hud),
              border-color 200ms var(--ease-out-hud);
}

.fleet-tab:hover {
  background-color: color-mix(in oklab, var(--color-surface) 60%, transparent);
}

.fleet-tab[aria-selected="true"] {
  border-color: var(--color-line);
  background-color: color-mix(in oklab, var(--color-surface) 80%, transparent);
}

.fleet-node {
  position: relative;
  z-index: 10;
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem; height: 2rem;
  border: 1px solid var(--color-line);
  background-color: var(--color-base);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-ink-4);
  transition: border-color 200ms var(--ease-out-hud),
              color 200ms var(--ease-out-hud);
}

.fleet-tab[aria-selected="true"] .fleet-node {
  border-color: var(--color-arc);
  color: var(--color-arc);
}

.fleet-tab-body { min-width: 0; flex: 1; }

.fleet-tab-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.fleet-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--color-ink-2);
  transition: color 200ms var(--ease-out-hud);
}

.fleet-tab:hover .fleet-name,
.fleet-tab[aria-selected="true"] .fleet-name { color: var(--color-ink); }

.fleet-tab-meta {
  display: block;
  margin-top: 0.125rem;
  font-size: 10px;
  color: var(--color-ink-4);
}

.fleet-chevron {
  flex: none;
  color: var(--color-ink-4);
  opacity: 0;
  transition: opacity 200ms var(--ease-out-hud),
              color 200ms var(--ease-out-hud);
}

.fleet-tab[aria-selected="true"] .fleet-chevron {
  opacity: 1;
  color: var(--color-arc);
}

.fleet-panel {
  height: 100%;
  padding: 2rem;
}

@media (min-width: 64rem) { .fleet-panel { padding: 2.5rem; } }

.fleet-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-line);
}

.fleet-status { color: var(--color-online); }
.fleet-status.is-standby { color: var(--color-warn); }
.fleet-panel-code { color: var(--color-ink-4); }

.fleet-panel-name {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

@media (min-width: 64rem) { .fleet-panel-name { font-size: 2.25rem; } }

.fleet-panel-role {
  margin-top: 0.75rem;
  color: var(--color-arc);
}

.fleet-panel-desc {
  margin-top: 1.75rem;
  font-size: var(--text-lg);
  line-height: 1.625;
  color: var(--color-ink-2);
}

.fleet-spec {
  display: grid;
  gap: 1px;
  margin-top: 2.25rem;
  border: 1px solid var(--color-line);
  background-color: var(--color-line);
}

@media (min-width: 40rem) {
  .fleet-spec { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fleet-spec-cell         { grid-column: span 2; }
  .fleet-spec-cell.is-wide { grid-column: span 3; }
}

.fleet-spec-cell {
  padding: 1.25rem;
  background-color: var(--color-base);
}

.fleet-spec-label { font-size: 10px; }

.fleet-spec-value {
  margin-top: 0.625rem;
  font-size: var(--text-sm);
  line-height: 1.625;
  color: var(--color-ink-2);
}

.fleet-spec-cell .chips { margin-top: 0.625rem; }

/* ── work ────────────────────────────────────────────────────────────────
   Rows, not cards. The whole row is the link where there is one, via a
   pseudo-element on the anchor — which keeps the visible title as the
   accessible name and still gives a phone a full-width tap target.
   ------------------------------------------------------------------------ */

.work-list {
  margin-top: 4rem;
  border-top: 1px solid var(--color-line);
}

.work-row {
  position: relative;
  border-bottom: 1px solid var(--color-line);
}

.work-row-inner {
  position: relative;
  display: grid;
  align-items: baseline;
  gap: 1rem 2rem;
  padding: 2rem 0.25rem;
  transition: background-color 300ms var(--ease-out-hud);
}

@media (min-width: 64rem) {
  .work-row-inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding: 2.5rem 1.5rem;
  }
  .work-meta     { grid-column: span 2; }
  .work-headline { grid-column: span 4; }
  .work-desc     { grid-column: span 5; }
  .work-action   { grid-column: span 1; justify-self: end; }
}

.work-row:hover .work-row-inner {
  background-color: color-mix(in oklab, var(--color-surface) 40%, transparent);
}

/* The sweep: a hairline that wipes in from the left on hover. */
.work-sweep {
  pointer-events: none;
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(to right,
    var(--color-arc),
    color-mix(in oklab, var(--color-arc) 40%, transparent),
    transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease-out-hud);
}

.work-row:hover .work-sweep { transform: scaleX(1); }

.work-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.work-code { font-size: 10px; color: var(--color-ink-4); }
.work-year { font-size: 10px; color: var(--color-ink-3); }

.work-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  transition: color 300ms var(--ease-out-hud);
}

@media (min-width: 64rem) { .work-title { font-size: 28px; } }

.work-row:hover .work-title { color: var(--color-arc); }

/* The row-wide hit area. */
.work-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.work-tags { margin-top: 0.75rem; }

.work-desc {
  line-height: 1.625;
  color: var(--color-ink-2);
}

.work-view {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-4);
  transition: color 300ms var(--ease-out-hud);
}

.work-row:hover .work-view { color: var(--color-arc); }

.work-view-arrow { transition: transform 300ms var(--ease-out-hud); }

.work-row:hover .work-view-arrow {
  transform: translate(2px, -2px);
}

.work-private { font-size: 10px; color: var(--color-ink-4); }

/* ── process ─────────────────────────────────────────────────────────────── */

.process-grid {
  display: grid;
  gap: 2rem;
  margin-top: 4rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 64rem) {
  .process-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.process-step { position: relative; }

.process-rail {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.process-code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-arc);
}

.process-line {
  height: 1px;
  flex: 1;
  background: linear-gradient(to right,
    color-mix(in oklab, var(--color-arc) 40%, transparent),
    var(--color-line));
}

.process-chevron {
  display: none;
  flex: none;
  color: var(--color-ink-4);
}

@media (min-width: 64rem) {
  .process-chevron { display: block; }
  /* The last step points at nothing. `{{#unless @last}}` in the reference;
     the selector says it without the loop having to. */
  .process-step:last-child .process-chevron { display: none; }
}

.process-title {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  transition: color 300ms var(--ease-out-hud);
}

.process-step:hover .process-title { color: var(--color-arc); }

.process-desc {
  margin-top: 0.75rem;
  line-height: 1.625;
  color: var(--color-ink-2);
}

/* ── about ───────────────────────────────────────────────────────────────── */

.about-grid {
  display: grid;
  gap: 3rem;
}

@media (min-width: 64rem) {
  .about-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 4rem;
  }
  .about-portrait-col { grid-column: span 5; }
  .about-bio          { grid-column: span 7; }
}

.about-card {
  position: relative;
  overflow: hidden;
}

.about-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--color-surface);
}

.about-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

.about-portrait-fade {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-base), transparent, transparent);
}

.about-portrait-scan {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0.6;
}

.about-reticle {
  pointer-events: none;
  position: absolute;
  width: 2.5rem; height: 2.5rem;
  border-color: color-mix(in oklab, var(--color-arc) 50%, transparent);
}
.about-reticle.is-tl {
  left: 1.5rem; top: 1.5rem;
  border-left: 1px solid; border-top: 1px solid;
}
.about-reticle.is-br {
  right: 1.5rem; bottom: 1.5rem;
  border-right: 1px solid; border-bottom: 1px solid;
}

.about-readout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--color-line);
}

.about-readout-cell { padding: 1.25rem; }
.about-readout-cell + .about-readout-cell {
  border-left: 1px solid var(--color-line);
}

.about-readout-label { font-size: 10px; }

.about-readout-value {
  margin-top: 0.375rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
}

.about-prose {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
  font-size: var(--text-lg);
  line-height: 1.625;
  color: var(--color-ink-2);
}

.about-quote {
  margin-top: 2.5rem;
  padding-left: 1.5rem;
  border-left: 2px solid color-mix(in oklab, var(--color-arc) 50%, transparent);
}

.about-quote blockquote {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.375;
  letter-spacing: -0.025em;
  color: var(--color-ink);
}

@media (min-width: 64rem) {
  .about-quote blockquote { font-size: 1.5rem; }
}

.about-armory { margin-top: 3.5rem; }

.armory-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.armory-row {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 40rem) {
  .armory-row {
    grid-template-columns: 6rem 1fr;
    gap: 1.25rem;
  }
}

.armory-label { padding-top: 0.375rem; }

/* ── contact.css ─────────────────────────────────── */

/* ============================================================
   CONTACT
   Pitch and direct channels left, form right.

   Phase 04 replaces the form with a link to the intake conversation. What
   survives that is everything above `.contact-form-col` — the pitch, the
   direct email, the availability strip and the social row — plus `.social-*`,
   which the footer also uses.
   ============================================================ */

.contact {
  overflow: hidden;
  border-top: 1px solid var(--color-line);
  background-color: color-mix(in oklab, var(--color-void) 60%, transparent);
}

/* A lit hairline across the top edge — the section reads as powered. */
.contact-hairline {
  pointer-events: none;
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    color-mix(in oklab, var(--color-arc) 50%, transparent),
    transparent);
}

.contact-glow {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 100%,
    color-mix(in oklab, var(--color-arc) 8%, transparent),
    transparent);
}

.contact-inner { position: relative; }

.contact-grid {
  display: grid;
  gap: 3rem;
}

@media (min-width: 64rem) {
  .contact-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 4rem;
  }
  .contact-pitch    { grid-column: span 5; }
  .contact-form-col { grid-column: span 7; }
}

/* ── direct channels ─────────────────────────────────────────────────────── */

.contact-channels {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 2.5rem;
  border: 1px solid var(--color-line);
  background-color: var(--color-line);
}

.contact-channel {
  padding: 1.5rem;
  background-color: color-mix(in oklab, var(--color-surface) 50%, transparent);
}

.contact-channel.is-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.contact-email {
  display: block;
  margin-top: 0.25rem;
  padding-block: 0.375rem;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  transition: color 200ms var(--ease-out-hud);
}

.contact-email:hover { color: var(--color-arc); }

.contact-note {
  margin-top: 0.25rem;
  font-size: var(--text-xs);
  color: var(--color-ink-4);
}

.contact-available { color: var(--color-ink-2); }

/* ── social ──────────────────────────────────────────────────────────────
   Shared with the footer, which uses the `.is-small` variant.
   ------------------------------------------------------------------------ */

.social-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 2rem;
}

.social-link {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border: 1px solid var(--color-line);
  color: var(--color-ink-3);
  transition: border-color 200ms var(--ease-out-hud),
              color 200ms var(--ease-out-hud);
}

.social-link:hover {
  border-color: var(--color-arc);
  color: var(--color-arc);
}

.social-link.is-small {
  width: 2.75rem; height: 2.75rem;
  color: var(--color-ink-4);
}

/* ── the form ────────────────────────────────────────────────────────────── */

.contact-form {
  position: relative;
  padding: 2rem;
}

@media (min-width: 64rem) { .contact-form { padding: 2.5rem; } }

.form-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 40rem) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-group.is-full { grid-column: span 2; }
}

.field-label {
  display: block;
  margin-bottom: 0.625rem;
}

.req { color: var(--color-arc); }

.field-optional {
  color: var(--color-ink-4);
  text-transform: none;
  letter-spacing: normal;
}

.field-error {
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-alert);
}

/* Bots fill it, humans never see it. Off-screen rather than
   `display: none` — a hidden input is not filled by every bot, and
   `visibility: hidden` is detectable. */
.honeypot {
  position: absolute;
  left: -9999px;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.form-required-note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-ink-4);
}

/* ── footer.css ─────────────────────────────────── */

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  position: relative;
  z-index: 10;
  border-top: 1px solid var(--color-line);
  background-color: var(--color-void);
}

.footer-inner { padding-block: 4rem; }

@media (min-width: 64rem) {
  .footer-inner { padding-block: 5rem; }
}

.footer-grid {
  display: grid;
  gap: 3rem;
}

@media (min-width: 64rem) {
  .footer-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .footer-brand  { grid-column: span 5; }
  .footer-nav    { grid-column: span 3; }
  .footer-direct { grid-column: span 4; }
}

.footer-tagline {
  margin-top: 1.25rem;
  max-width: 20rem;
  line-height: 1.625;
  color: var(--color-ink-3);
}

.footer-brand .social-row { margin-top: 1.75rem; }

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 1rem;
}

.footer-link {
  display: inline-block;
  padding-block: 0.5rem;
  font-size: var(--text-sm);
}

.footer-email {
  display: inline-block;
  margin-top: 1rem;
  padding-block: 0.5rem;
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
}

.footer-langs-block { margin-top: 2rem; }

.footer-langs {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.footer-lang {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--color-ink-4);
  transition: border-color 200ms var(--ease-out-hud),
              color 200ms var(--ease-out-hud);
}

.footer-lang:hover {
  border-color: var(--color-arc);
  color: var(--color-arc);
}

.footer-lang.is-current {
  border-color: var(--color-arc);
  color: var(--color-arc);
}

/* ── baseline ────────────────────────────────────────────────────────────── */

.footer-baseline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-line);
}

@media (min-width: 40rem) {
  .footer-baseline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer-legal {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.625;
  color: var(--color-ink-4);
}

.footer-sep {
  margin-inline: 0.5rem;
  color: var(--color-line-bright);
}

.footer-baseline-right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.footer-built {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-ink-4);
}

.footer-top {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 0.5rem;
  font-size: 10px;
  transition: color 200ms var(--ease-out-hud);
}

.footer-top:hover { color: var(--color-arc); }

/* ── terminal.css ─────────────────────────────────── */

/* ============================================================
   CONSOLE
   The backtick terminal. Desktop only — the trigger, at least; the dialog
   itself works anywhere it is opened from.
   ============================================================ */

/* Hidden until the visitor is past the hero, so it never competes with the
   first impression — and hidden below 64rem regardless, because a floating
   pill on a phone is in the way. `is-past-hero` is the state main.js sets;
   the breakpoint is this file's decision, which is the point. */
.term-trigger { display: none; }

@media (min-width: 64rem) {
  .term-trigger.is-past-hero {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.75rem;
    padding-inline: 0.875rem;
    border: 1px solid var(--color-line);
    background-color: color-mix(in oklab, var(--color-void) 80%, transparent);
    backdrop-filter: blur(12px);
    transition: border-color 200ms var(--ease-out-hud),
                background-color 200ms var(--ease-out-hud);
  }

  .term-trigger.is-past-hero:hover {
    border-color: var(--color-arc);
    background-color: var(--color-void);
  }
}

.term-trigger-icon { color: var(--color-arc); }

.term-trigger-text {
  font-size: 10px;
  color: var(--color-ink-4);
  transition: color 200ms var(--ease-out-hud);
}

.term-trigger:hover .term-trigger-text { color: var(--color-arc); }

.term-key {
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-ink-4);
}

/* ── the dialog ──────────────────────────────────────────────────────────
   `hidden` is the attribute and _system.css makes it beat any display rule,
   so the script toggles ONE thing. The reference carried both `hidden` and
   `class="hidden"` on this element — two sources of truth for one state, and
   the kind of pair that eventually disagrees.
   ------------------------------------------------------------------------ */

.term-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-color: color-mix(in oklab, var(--color-void) 70%, transparent);
  backdrop-filter: blur(4px);
}

@media (min-width: 40rem) {
  .term-overlay {
    align-items: center;
    padding: 1.5rem;
  }
}

.term-window {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 48rem;
  height: 85dvh;
  border: 1px solid var(--color-line-bright);
  background-color: var(--color-void);
  box-shadow: 0 25px 50px -12px #000000B3;
}

@media (min-width: 40rem) {
  .term-window { height: 560px; }
}

.term-titlebar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-line);
}

.term-title { color: var(--color-arc); }

.term-close {
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  color: var(--color-ink-4);
  transition: color 200ms var(--ease-out-hud);
}

.term-close:hover { color: var(--color-arc); }

.term-out {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--color-ink-2);
}

@media (min-width: 40rem) { .term-out { padding-inline: 1.25rem; } }

.term-form {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--color-line);
}

@media (min-width: 40rem) { .term-form { padding-inline: 1.25rem; } }

.term-prompt {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--color-arc);
}

.term-input {
  min-width: 0;
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--color-ink);
  outline: none;
}

.term-input::placeholder { color: var(--color-ink-4); }

/* ── boot.css ─────────────────────────────────── */

/* ============================================================
   BOOT SEQUENCE
   Full-screen, once per session, skippable.

   It starts `hidden` in the markup and the script removes the attribute if
   it decides to run — never the other way round. A no-JS visitor must never
   be looking at a boot screen that will never finish, and the only way to
   guarantee that is for the default state to be "not showing".
   ============================================================ */

.boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-void);
}

.boot-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,
      color-mix(in oklab, var(--color-arc) 5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom,
      color-mix(in oklab, var(--color-arc) 5%, transparent) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.3;
}

.boot-scan {
  position: absolute;
  inset: 0;
}

.boot-body {
  position: relative;
  width: 100%;
  max-width: 32rem;
  padding-inline: 1.5rem;
}

.boot-log {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.9;
  color: var(--color-arc);
}

@media (min-width: 40rem) {
  .boot-log { font-size: var(--text-xs); }
}

.boot-track {
  margin-top: 1.5rem;
  width: 100%;
  height: 1px;
  background-color: var(--color-line);
}

.boot-bar {
  width: 0;
  height: 1px;
  background-color: var(--color-arc);
  transition: width 200ms linear;
}

.boot-skip {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.75rem 1rem;
  color: var(--color-ink-3);
  transition: color 200ms var(--ease-out-hud);
}

.boot-skip:hover { color: var(--color-arc); }