@charset "utf-8";
/* ==========================================================================
   ARALEZ — Forensic Instrument design system
   Framework-free. No build step. No external requests.

   Principles
   1. Hairlines, not shadows. Depth is a 1px rule and a surface step.
   2. Mono carries data. Sans carries prose. Never the reverse.
   3. The accent is rare. Ember appears on action and live state only.
   4. Everything resolves. One pulse loops; nothing else does.
   5. Type floor is 11px mono / 13px sans. Nothing smaller ships.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — self-hosted, variable, subset-free (115 KB total)
   Geist & Geist Mono © 2023 Vercel / basement.studio, SIL OFL 1.1
   See assets/fonts/LICENSE.txt
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Geist";
  src: url("assets/fonts/Geist-Variable.woff2") format("woff2-variations"),
       url("assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/GeistMono-Variable.woff2") format("woff2-variations"),
       url("assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Ground — near-black, cooled toward the logo's #102929 teal */
  --ground:      #060d0c;
  --ground-deep: #030807;
  --surface-1:   #0b1614;
  --surface-2:   #11201c;
  --surface-3:   #182e28;
  --surface-hi:  #1f3a32;
  --glass:       rgba(6, 13, 12, .72);

  /* Ink — cream, desaturated from the logo's #D8C186 muzzle */
  /* ink-3 / ink-4 carry TOC links, tabs and copy buttons, so they are
     tuned to clear 4.5:1 on --surface-2, not just on --ground. */
  --ink:    #f0e9d8;
  --ink-2:  #b6c0b6;
  --ink-3:  #97a49a;
  --ink-4:  #7d8b83;

  /* Lines — the primary depth mechanism */
  --line-1: rgba(240, 233, 216, .09);
  --line-2: rgba(240, 233, 216, .155);
  --line-3: rgba(240, 233, 216, .28);

  /* Ember — the logo's #A85818 stripe, lifted for contrast on dark.
     Rare by policy: action, active state, live indicator. Nothing else. */
  --ember:      #d2701f;
  --ember-hi:   #ec8434;
  --ember-dim:  #a85818;
  --ember-wash: rgba(210, 112, 31, .11);
  --ember-line: rgba(210, 112, 31, .34);
  --on-ember:   #180b02;

  /* Sage — telemetry, success, live/OK state */
  --sage:      #8fae99;
  --sage-hi:   #a9c6b2;
  --sage-wash: rgba(143, 174, 153, .1);

  /* Atmospheric glows — theme-aware so they don't muddy the light ground */
  --glow-cool: rgba(24, 46, 40, .55);
  --glow-warm: rgba(168, 88, 24, .07);
  --glow-cta:  rgba(24, 46, 40, .8);

  /* Status */
  --warn:      #dda65e;
  --warn-wash: rgba(221, 166, 94, .1);
  --danger:      #e08b73;
  --danger-wash: rgba(224, 139, 115, .1);
  --info:      #79aebc;
  --info-wash: rgba(121, 174, 188, .1);

  /* Type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --fs-label: .6875rem;  /* 11px — mono, uppercase, tracked. Absolute floor. */
  --fs-xs:    .78125rem; /* 12.5 */
  --fs-sm:    .84375rem; /* 13.5 */
  --fs-base:  .96875rem; /* 15.5 */
  --fs-md:    1.0625rem; /* 17   */
  --fs-lg:    1.25rem;   /* 20   */
  --fs-xl:    1.5625rem; /* 25   */
  --fs-2xl:   1.9375rem; /* 31   */
  --fs-3xl:   2.4375rem; /* 39   */
  --fs-display: clamp(2.75rem, 5.6vw, 4.875rem);

  --lh-display: 1.02;
  --lh-heading: 1.14;
  --lh-ui:      1.4;
  --lh-body:    1.62;

  --tr-display: -.028em;  /* Geist is actually loaded, so this is real */
  --tr-heading: -.02em;
  --tr-label:   .13em;

  /* Space — 4px base */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-7: 2rem;    --sp-8: 2.5rem;
  --sp-9: 3.5rem;  --sp-10: 4.5rem; --sp-11: 6rem;   --sp-12: 8rem;

  /* Radius — tight. Instruments have crisp edges. */
  --r-1: 3px; --r-2: 6px; --r-3: 10px; --r-4: 16px; --r-full: 999px;

  /* Motion — fast, mechanical, resolving */
  --e-out:   cubic-bezier(.2, .8, .2, 1);
  --e-inout: cubic-bezier(.65, 0, .35, 1);
  --d-1: 120ms; --d-2: 200ms; --d-3: 340ms;

  /* Layout — ONE header constant, used by scroll-padding, sticky, and JS */
  --header-h: 60px;
  --shell: 1200px;
  --shell-wide: 1360px;
}

[data-theme="light"] {
  color-scheme: light;

  --ground:      #f4f1e8;
  --ground-deep: #e9e5d8;
  --surface-1:   #fbf9f3;
  --surface-2:   #efece1;
  --surface-3:   #e4e0d2;
  --surface-hi:  #d8d4c4;
  --glass:       rgba(244, 241, 232, .8);

  --ink:   #101a18;
  --ink-2: #38453f;
  --ink-3: #4d5a53;
  --ink-4: #626f67;

  --line-1: rgba(16, 26, 24, .1);
  --line-2: rgba(16, 26, 24, .16);
  --line-3: rgba(16, 26, 24, .3);

  --ember:      #a2500f;
  --ember-hi:   #8a4109;
  --ember-dim:  #a85818;
  --ember-wash: rgba(162, 80, 15, .09);
  --ember-line: rgba(162, 80, 15, .3);
  --on-ember:   #fdf8f2;

  --sage:      #3d6b51;
  --sage-hi:   #2c5540;
  --sage-wash: rgba(61, 107, 81, .1);

  --glow-cool: rgba(61, 107, 81, .09);
  --glow-warm: rgba(162, 80, 15, .05);
  --glow-cta:  rgba(61, 107, 81, .1);

  --warn:   #8a5a12;
  --danger: #9c3f2c;
  --info:   #2b6675;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-6));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-feature-settings: "cv11", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { color: inherit; font: inherit; }
button { border: 0; background: none; cursor: pointer; }
code, pre, kbd, samp { font-family: var(--font-mono); }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; }
::selection { background: var(--ember); color: var(--on-ember); }

/* Data is always mono + tabular. Applied broadly on purpose. */
.mono, code, pre, kbd, .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "ss01", "zero";
}

/* Focus — one visible ring, everywhere. The old site had three :focus rules
   in 74 KB and zero :focus-visible. */
:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
  border-radius: var(--r-1);
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: fixed; z-index: 999; top: var(--sp-2); left: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--ember); color: var(--on-ember);
  border-radius: var(--r-2);
  font-size: var(--fs-sm); font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--d-2) var(--e-out);
}
.skip-link:focus { transform: translateY(0); }

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

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.shell {
  width: min(100% - var(--sp-8), var(--shell));
  margin-inline: auto;
}
.shell-wide { width: min(100% - var(--sp-8), var(--shell-wide)); margin-inline: auto; }

.section { padding-block: var(--sp-12); border-top: 1px solid var(--line-1); }
.section-tight { padding-block: var(--sp-10); }

/* Ruler ticks — a measurement cue on section edges. Purely structural. */
.section-ruled { position: relative; }
.section-ruled::before {
  content: ""; position: absolute; inset-block-start: -1px; inset-inline: 0;
  height: 1px;
  background: repeating-linear-gradient(90deg,
    var(--line-2) 0 1px, transparent 1px 8px);
  opacity: .5;
}

/* --------------------------------------------------------------------------
   5. Typography primitives
   -------------------------------------------------------------------------- */
.label {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tr-label);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink-3);
}
.label-ember { color: var(--ember); }
.label-sage  { color: var(--sage); }

.h-display {
  font-size: var(--fs-display);
  font-weight: 560;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
}
.h1 { font-size: var(--fs-3xl); font-weight: 560; line-height: var(--lh-heading); letter-spacing: var(--tr-heading); text-wrap: balance; }
.h2 { font-size: var(--fs-2xl); font-weight: 560; line-height: var(--lh-heading); letter-spacing: var(--tr-heading); text-wrap: balance; }
.h3 { font-size: var(--fs-lg); font-weight: 560; line-height: var(--lh-heading); letter-spacing: -.015em; }

.lede { font-size: var(--fs-md); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; max-width: 58ch; }
.prose { color: var(--ink-2); text-wrap: pretty; }
.prose strong { color: var(--ink); font-weight: 560; }

.section-head { max-width: 62ch; margin-bottom: var(--sp-9); }
.section-head .label { margin-bottom: var(--sp-4); }
.section-head p { margin-top: var(--sp-4); }

/* --------------------------------------------------------------------------
   6. Buttons & links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 40px; padding-inline: var(--sp-5);
  border: 1px solid transparent; border-radius: var(--r-2);
  font-size: var(--fs-sm); font-weight: 560; line-height: 1;
  white-space: nowrap;
  transition: background var(--d-1) var(--e-out),
              border-color var(--d-1) var(--e-out),
              color var(--d-1) var(--e-out);
}
.btn-lg { min-height: 46px; padding-inline: var(--sp-6); font-size: var(--fs-base); }
.btn-sm { min-height: 32px; padding-inline: var(--sp-3); font-size: var(--fs-xs); }

.btn-primary { background: var(--ember); color: var(--on-ember); }
.btn-primary:hover { background: var(--ember-hi); }

.btn-ghost { border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--line-3); background: var(--surface-2); }

.btn-quiet { color: var(--ink-2); }
.btn-quiet:hover { color: var(--ink); background: var(--surface-2); }

.btn svg { width: 16px; height: 16px; flex: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--ember); font-size: var(--fs-sm); font-weight: 560;
}
.link-arrow svg { width: 14px; height: 14px; transition: transform var(--d-1) var(--e-out); }
.link-arrow:hover svg { transform: translateX(3px); }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line-1); border-radius: var(--r-2);
  color: var(--ink-2);
  transition: border-color var(--d-1) var(--e-out), color var(--d-1) var(--e-out), background var(--d-1) var(--e-out);
}
.icon-btn:hover { border-color: var(--line-2); color: var(--ink); background: var(--surface-2); }
.icon-btn svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed; z-index: 90; inset-inline: 0; inset-block-start: 0;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: background var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out);
}
.site-header.is-scrolled {
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--line-1);
}
.header-inner { height: 100%; display: flex; align-items: center; gap: var(--sp-7); }

.brand { display: inline-flex; align-items: center; gap: var(--sp-3); flex: none; }
.brand img { width: 30px; height: 28px; object-fit: contain; }
.brand-word {
  font-size: var(--fs-md); font-weight: 620;
  letter-spacing: -.03em;
}
.brand-tag {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ink-4); padding-left: var(--sp-3);
  border-left: 1px solid var(--line-2);
}

.nav { display: flex; align-items: center; gap: var(--sp-6); margin-left: auto; }
.nav a {
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2);
  transition: color var(--d-1) var(--e-out);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: var(--sp-2); }

.menu-toggle { display: none; }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: calc(var(--header-h) + var(--sp-11)) var(--sp-11);
  overflow: hidden;
}
/* Faceted ground plane — echoes the logo's polygon facets, pure CSS */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 72% 30%, var(--glow-cool), transparent 70%),
    radial-gradient(ellipse 60% 50% at 12% 85%, var(--glow-warm), transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(var(--line-1) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-1) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 20%, transparent 75%);
  opacity: .7;
  pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: var(--sp-11); align-items: center;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-2); border-radius: var(--r-full);
  background: var(--surface-1);
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ink-2);
  transition: border-color var(--d-1) var(--e-out);
}
.hero-eyebrow:hover { border-color: var(--ember-line); }
.hero-eyebrow b { color: var(--ink); font-weight: 560; }
.hero-eyebrow .sep { color: var(--line-3); }

.hero h1 { margin-bottom: var(--sp-6); }
.hero h1 em { font-style: normal; color: var(--ember); }
.hero .lede { margin-bottom: var(--sp-8); }

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-9); }

/* Spec line — replaces the old "3 / 2 / 1" countdown-as-metrics */
.hero-spec {
  display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-1);
}
.hero-spec div { display: flex; flex-direction: column; gap: var(--sp-2); }
.hero-spec dt {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-4);
}
.hero-spec dd {
  margin: 0;
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   9. The Instrument — hero readout panel
   This is the centerpiece. It streams real artifact paths into an archive,
   then RESOLVES and stops. No infinite progress bar contradicting a
   "finished" result line.
   -------------------------------------------------------------------------- */
.instrument {
  border: 1px solid var(--line-2); border-radius: var(--r-3);
  background: linear-gradient(180deg, var(--surface-1), var(--ground-deep));
  overflow: hidden;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 0 rgba(240, 233, 216, .04) inset;
}

.instrument-bar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-1);
  background: var(--surface-2);
  font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase;
}
.instrument-bar .name { color: var(--ink); font-weight: 600; letter-spacing: var(--tr-label); }
.instrument-bar .sep { color: var(--line-3); }
.instrument-bar .src { color: var(--ink-3); letter-spacing: .04em; text-transform: none; }
.instrument-status {
  margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--sage);
}
.instrument-status .dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: pulse 2s var(--e-out) infinite;   /* the ONE looping animation */
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 5px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.instrument[data-state="done"] .instrument-status { color: var(--ember); }
.instrument[data-state="done"] .instrument-status .dot { animation: none; box-shadow: none; }

.instrument-meta {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line-1);
}
.instrument-meta div { padding: var(--sp-3) var(--sp-4); border-right: 1px solid var(--line-1); }
.instrument-meta div:last-child { border-right: 0; }
.instrument-meta dt {
  font-size: var(--fs-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--sp-2);
}
.instrument-meta dd { margin: 0; font-size: var(--fs-sm); color: var(--ink); }

.instrument-stream {
  height: 268px; padding: var(--sp-2) 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 26px), transparent 100%);
}
.stream-row {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs); color: var(--ink-2);
  opacity: 0;
  animation: row-in var(--d-3) var(--e-out) forwards;
}
@keyframes row-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.stream-row .glyph { color: var(--sage); font-size: var(--fs-label); }
.stream-row .path {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-2);
}
.stream-row .path b { color: var(--ink); font-weight: 500; }
.stream-row .size { color: var(--ink-4); font-size: var(--fs-label); }
.stream-row[data-kind="slack"] .glyph,
.stream-row[data-kind="slack"] .size { color: var(--ember); }
.stream-row[data-kind="locked"] .glyph { color: var(--ember); }

.instrument-foot { border-top: 1px solid var(--line-1); background: var(--surface-1); }
.instrument-pipe {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
}
.pipe-track {
  flex: 1; height: 3px; border-radius: var(--r-full);
  background: var(--surface-3); overflow: hidden;
}
.pipe-fill {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--ember-dim), var(--ember));
  transition: width var(--d-3) linear;
}
.instrument-out {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--line-1);
  font-size: var(--fs-xs);
}
.instrument-out .file { color: var(--ink); font-weight: 500; }
.instrument-out .tags { margin-left: auto; display: flex; gap: var(--sp-2); }
.instrument-out .tag {
  padding: 2px var(--sp-2); border-radius: var(--r-1);
  border: 1px solid var(--line-2);
  font-size: var(--fs-label); letter-spacing: .06em;
  color: var(--ink-3);
}
.instrument-out .tag-ember { color: var(--ember); border-color: var(--ember-line); background: var(--ember-wash); }

/* --------------------------------------------------------------------------
   10. Spec bar — real specifications, replaces the old logo-less "logo cloud"
   -------------------------------------------------------------------------- */
.specbar { border-top: 1px solid var(--line-1); border-bottom: 1px solid var(--line-1); background: var(--surface-1); }
.specbar-inner {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.specbar-item {
  padding: var(--sp-6) var(--sp-6);
  border-right: 1px solid var(--line-1);
}
.specbar-item:last-child { border-right: 0; }
.specbar-item dt {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ink-4); margin-bottom: var(--sp-3);
}
.specbar-item dd {
  margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5;
}
.specbar-item .big {
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: 500;
  color: var(--ink); letter-spacing: -.02em; margin-bottom: var(--sp-1);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   11. Cards & grids
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  padding: var(--sp-6);
  border: 1px solid var(--line-1); border-radius: var(--r-3);
  background: var(--surface-1);
  transition: border-color var(--d-2) var(--e-out), background var(--d-2) var(--e-out);
}
.card:hover { border-color: var(--line-2); }
.card-index {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tr-label); color: var(--ember);
  margin-bottom: var(--sp-4); display: block;
}
.card h3 { margin-bottom: var(--sp-3); }
.card p { color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.58; }
.card code {
  font-size: .92em; color: var(--ink-2);
  background: var(--surface-3); padding: 1px 5px; border-radius: var(--r-1);
}

/* Fact list — dense technical claims, the "instrument datasheet" pattern */
.facts { border-top: 1px solid var(--line-1); }
.fact {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--sp-7);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--line-1);
}
.fact dt {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--ember); letter-spacing: .02em;
  padding-top: 2px;
}
.fact dd { margin: 0; max-width: 76ch; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; }
.fact dd b { color: var(--ink); font-weight: 560; }
.fact dd code {
  font-size: .92em; color: var(--ink);
  background: var(--surface-2); padding: 1px 5px; border-radius: var(--r-1);
  border: 1px solid var(--line-1);
}

/* --------------------------------------------------------------------------
   12. Compare — the streaming disk-footprint diagram
   -------------------------------------------------------------------------- */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.compare-col {
  padding: var(--sp-6);
  border: 1px solid var(--line-1); border-radius: var(--r-3);
  background: var(--surface-1);
}
.compare-col.is-good { border-color: var(--ember-line); background: linear-gradient(180deg, var(--ember-wash), transparent 60%), var(--surface-1); }
.compare-col header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }
.compare-col h3 { font-size: var(--fs-md); }
.compare-peak {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-4);
}
.compare-col.is-good .compare-peak { color: var(--ember); }
.bar-set { display: flex; flex-direction: column; gap: var(--sp-3); }
.bar-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 62px; gap: var(--sp-3); align-items: center; }
.bar-row span:first-child {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4);
}
.bar-track { height: 8px; border-radius: var(--r-1); background: var(--surface-3); overflow: hidden; }
.bar-fill {
  display: block; height: 100%; width: 0;
  border-radius: var(--r-1);
  background: var(--ink-4);
  transition: width 900ms var(--e-out);
}
.bar-fill.is-ember { background: linear-gradient(90deg, var(--ember-dim), var(--ember)); }
.bar-row .val {
  font-family: var(--font-mono); font-size: var(--fs-label);
  color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums;
}
.is-visible .bar-fill { width: var(--w, 0%); }

/* --------------------------------------------------------------------------
   13. Platform matrix
   -------------------------------------------------------------------------- */
.matrix { width: 100%; border: 1px solid var(--line-1); border-radius: var(--r-3); overflow: hidden; }
.matrix th, .matrix td {
  padding: var(--sp-4) var(--sp-5);
  text-align: left; border-bottom: 1px solid var(--line-1);
  font-size: var(--fs-sm);
}
.matrix thead th {
  background: var(--surface-2);
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ink-3); font-weight: 500;
}
.matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-bottom: 0; }
.matrix tbody th { font-weight: 560; color: var(--ink); }
.matrix td { color: var(--ink-2); }
.matrix .mono-cell { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }
.status {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: .06em; text-transform: uppercase;
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-ok   { color: var(--sage); }
.status-beta { color: var(--warn); }
.status-no   { color: var(--ink-4); }

/* --------------------------------------------------------------------------
   14. Artifact taxonomy
   -------------------------------------------------------------------------- */
.tax-controls { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-7); }
.tax-btn {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line-1); border-radius: var(--r-full);
  background: var(--surface-1);
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  transition: all var(--d-1) var(--e-out);
}
.tax-btn:hover { color: var(--ink); border-color: var(--line-2); }
.tax-btn[aria-pressed="true"] {
  background: var(--ember-wash); border-color: var(--ember-line); color: var(--ember);
}
.tax-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--sp-3); }
.tax-item {
  padding: var(--sp-4);
  border: 1px solid var(--line-1); border-radius: var(--r-2);
  background: var(--surface-1);
  transition: opacity var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out);
}
.tax-item[hidden] { display: none; }
.tax-item h4 {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  color: var(--ink); letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.tax-item p { margin: 0; font-size: var(--fs-label); line-height: 1.5; color: var(--ink-4); letter-spacing: .01em; }

/* --------------------------------------------------------------------------
   15. Delivery / deployment tiles
   -------------------------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.tile {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-5);
  border: 1px solid var(--line-1); border-radius: var(--r-2);
  background: var(--surface-1);
  transition: border-color var(--d-1) var(--e-out), background var(--d-1) var(--e-out);
}
.tile:hover { border-color: var(--ember-line); background: var(--surface-2); }
.tile-name { font-size: var(--fs-sm); font-weight: 560; color: var(--ink); }
.tile-note { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--ink-4); letter-spacing: .02em; }

/* --------------------------------------------------------------------------
   16. Code
   -------------------------------------------------------------------------- */
.code {
  border: 1px solid var(--line-1); border-radius: var(--r-3);
  background: var(--ground-deep);
  overflow: hidden;
}
.code-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-1);
  background: var(--surface-1);
}
.code-title {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3);
}
.code-copy { margin-left: auto; }
.code pre {
  margin: 0; padding: var(--sp-5);
  overflow-x: auto;
  font-size: var(--fs-sm); line-height: 1.75; color: var(--ink-2);
  -moz-tab-size: 2; tab-size: 2;
}
.code pre .c-cmd { color: var(--ink); }
.code pre .c-flag { color: var(--ember); }
.code pre .c-str { color: var(--sage); }
.code pre .c-dim { color: var(--ink-4); }

/* Copy button */
.copy {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3); min-height: 26px;
  border: 1px solid var(--line-1); border-radius: var(--r-1);
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  transition: all var(--d-1) var(--e-out);
}
.copy:hover { color: var(--ink); border-color: var(--line-2); background: var(--surface-2); }
.copy.is-done { color: var(--sage); border-color: var(--sage); }

/* --------------------------------------------------------------------------
   17. Download
   -------------------------------------------------------------------------- */
.dl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.dl-card {
  display: flex; flex-direction: column;
  padding: var(--sp-7);
  border: 1px solid var(--line-1); border-radius: var(--r-3);
  background: var(--surface-1);
  transition: border-color var(--d-2) var(--e-out);
}
.dl-card:hover { border-color: var(--line-2); }
.dl-card.is-recommended { border-color: var(--ember-line); }
.dl-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-5); }
.dl-head svg { width: 20px; height: 20px; color: var(--ink-2); flex: none; }
.dl-head h3 { font-size: var(--fs-md); }
.dl-badge {
  margin-left: auto;
  padding: 3px var(--sp-2); border-radius: var(--r-1);
  border: 1px solid var(--ember-line); background: var(--ember-wash);
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: .06em; text-transform: uppercase; color: var(--ember);
}
/* Quieter than .dl-badge — a standing fact, not a live detection result */
.dl-flag {
  padding: 3px var(--sp-2); border-radius: var(--r-1);
  border: 1px solid var(--line-2);
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: .04em; color: var(--ink-3); white-space: nowrap;
}
.dl-flag + .dl-badge { margin-left: 0; }
.dl-card > p { color: var(--ink-3); font-size: var(--fs-sm); margin-bottom: var(--sp-5); }
.dl-actions { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-3); }
.dl-alt {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: .04em; color: var(--ink-4);
  transition: color var(--d-1) var(--e-out);
}
.dl-alt:hover { color: var(--ember); }
.dl-note {
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--line-1);
  font-size: var(--fs-xs); color: var(--ink-4);
}
.dl-note code { color: var(--ink-3); }

/* --------------------------------------------------------------------------
   18. Callout
   -------------------------------------------------------------------------- */
.callout {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--line-1); border-left: 2px solid var(--ink-4);
  border-radius: var(--r-2);
  background: var(--surface-1);
  font-size: var(--fs-sm); color: var(--ink-2);
}
.callout .co-mark {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-4);
  padding-top: 2px;
}
.callout-warn { border-left-color: var(--warn); background: var(--warn-wash); }
.callout-warn .co-mark { color: var(--warn); }
.callout-info { border-left-color: var(--info); background: var(--info-wash); }
.callout-info .co-mark { color: var(--info); }
.callout p + p { margin-top: var(--sp-3); }
.callout code { font-size: .92em; color: var(--ink); background: var(--surface-3); padding: 1px 5px; border-radius: var(--r-1); }

/* --------------------------------------------------------------------------
   19. Final CTA
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  padding: var(--sp-11) var(--sp-8);
  border: 1px solid var(--line-2); border-radius: var(--r-4);
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, var(--glow-cta), transparent 70%),
    var(--surface-1);
  text-align: center;
  overflow: hidden;
}
.cta::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ember-line), transparent);
}
.cta img { width: 56px; height: 52px; margin: 0 auto var(--sp-6); object-fit: contain; }
.cta h2 { margin-bottom: var(--sp-4); }
.cta p { margin: 0 auto var(--sp-7); max-width: 52ch; color: var(--ink-2); }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line-1); padding-block: var(--sp-10) var(--sp-7); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
.footer-brand .brand { margin-bottom: var(--sp-4); }
.footer-brand p { font-size: var(--fs-sm); color: var(--ink-3); max-width: 34ch; }
.footer-col h4 {
  margin-bottom: var(--sp-4);
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-4);
  font-weight: 500;
}
.footer-col li + li { margin-top: var(--sp-3); }
.footer-col a { font-size: var(--fs-sm); color: var(--ink-2); transition: color var(--d-1) var(--e-out); }
.footer-col a:hover { color: var(--ember); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between;
  margin-top: var(--sp-9); padding-top: var(--sp-6);
  border-top: 1px solid var(--line-1);
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: .04em; color: var(--ink-4);
}

/* --------------------------------------------------------------------------
   21. Toast
   -------------------------------------------------------------------------- */
.toast {
  position: fixed; z-index: 500; inset-block-end: var(--sp-6); inset-inline-end: var(--sp-6);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--line-2); border-radius: var(--r-2);
  background: var(--surface-3); color: var(--ink);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--d-2) var(--e-out), transform var(--d-2) var(--e-out);
}
.toast.is-shown { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   22. Reveal — staggered, resolves once
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(12px); }
.reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity 520ms var(--e-out), transform 520ms var(--e-out);
  transition-delay: calc(var(--i, 0) * 65ms);
}

/* --------------------------------------------------------------------------
   23. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  /* Reclaim header width before the nav has to wrap */
  .brand-tag { display: none; }
  .nav { gap: var(--sp-5); }
  .header-inner { gap: var(--sp-5); }

  .hero-inner { grid-template-columns: 1fr; gap: var(--sp-9); }
  .specbar-inner { grid-template-columns: repeat(2, 1fr); }
  .specbar-item:nth-child(2) { border-right: 0; }
  .specbar-item:nth-child(-n+2) { border-bottom: 1px solid var(--line-1); }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7); }
}

/* 1024, not 860: five nav links plus three actions stop fitting well before
   the old breakpoint, which left a band where the Download button was clipped. */
@media (max-width: 1024px) {
  :root { --header-h: 56px; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--sp-3);
    background: var(--glass);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line-1);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity var(--d-2) var(--e-out), transform var(--d-2) var(--e-out);
  }
  .nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-2); font-size: var(--fs-base); }
  .nav a:hover { background: var(--surface-2); }
  .nav-actions { margin-left: auto; }
  .menu-toggle { display: inline-grid; }
  .brand-tag { display: none; }
  .hero { padding-block: calc(var(--header-h) + var(--sp-9)) var(--sp-9); }
}

/* Content grids collapse later than the nav does — a three-card download row
   still reads fine at 1000px, it is only the header that runs out of room. */
@media (max-width: 900px) {
  .dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .grid-3, .grid-4, .compare, .dl-grid { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact { grid-template-columns: 1fr; gap: var(--sp-3); }
  .section { padding-block: var(--sp-10); }
  .instrument-stream { height: 220px; }
}

/* Very narrow phones: shed header actions rather than let them run past the
   edge. Both are still reachable — GitHub in the footer, Download in the hero. */
@media (max-width: 400px) {
  .nav-actions a[href*="github"] { display: none; }
}
@media (max-width: 360px) {
  .nav-actions .btn-primary { display: none; }
}

@media (max-width: 560px) {
  .shell, .shell-wide { width: calc(100% - var(--sp-6)); }
  .specbar-inner { grid-template-columns: 1fr; }
  .specbar-item { border-right: 0; border-bottom: 1px solid var(--line-1); }
  .specbar-item:last-child { border-bottom: 0; }
  .tiles { grid-template-columns: 1fr; }
  .instrument-meta { grid-template-columns: 1fr; }
  .instrument-meta div { border-right: 0; border-bottom: 1px solid var(--line-1); }
  .instrument-meta div:last-child { border-bottom: 0; }
  .cta { padding: var(--sp-9) var(--sp-5); }
  .hero-actions .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   24. Reduced motion — honour it fully, in CSS and in JS
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .stream-row { opacity: 1; }
  .bar-fill { width: var(--w, 0%); }
}

/* --------------------------------------------------------------------------
   25. Print — the runbook must export to PDF
   -------------------------------------------------------------------------- */
@media print {
  :root {
    --ground: #fff; --surface-1: #fff; --surface-2: #fff; --surface-3: #f4f4f2;
    --ink: #000; --ink-2: #1a1a1a; --ink-3: #444; --ink-4: #666;
    --line-1: #ddd; --line-2: #bbb; --line-3: #999;
    --ember: #8a4109;
  }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .site-header, .toast, .skip-link, .menu-toggle,
  .hero::before, .hero::after, .instrument-stream, .cta-actions,
  .tax-controls, .copy, .code-copy { display: none !important; }
  .section { padding-block: 1.2rem; border-top: 1px solid #ddd; break-inside: avoid; }
  .card, .fact, .callout, .code, .matrix { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #555; word-break: break-all; }
  .reveal { opacity: 1 !important; transform: none !important; }
}