/* ============================================================================
   ANTBRAIN — a cross-section of a nest.
   Dark soil, bone type, one rust accent, a moss-green live dot.
   Layout: fixed depth rail on the left, chambers stacked downward.
   ========================================================================== */

:root {
  --soil:   #0e0b07;
  --soil-2: #16110b;
  --soil-3: #1f1811;
  --line:   rgba(239, 230, 211, 0.14);
  --line-2: rgba(239, 230, 211, 0.07);
  --bone:   #efe6d3;
  --bone-2: rgba(239, 230, 211, 0.62);
  --bone-3: rgba(239, 230, 211, 0.38);
  --rust:   #d3552b;
  --rust-2: #f0774a;
  --moss:   #9be15d;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body:    "Manrope", "Segoe UI", Helvetica, sans-serif;
  --mono:    "DM Mono", "SFMono-Regular", Consolas, monospace;

  --rail: 84px;
  --gutter: clamp(20px, 5vw, 80px);
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

/* subtle soil strata behind everything */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background:
    repeating-linear-gradient(180deg, transparent 0 220px, rgba(239,230,211,.025) 220px 221px),
    radial-gradient(1200px 600px at 80% -10%, rgba(211,85,43,.10), transparent 60%),
    var(--soil);
}

a { color: inherit; }
em { font-style: italic; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; }
.muted { color: var(--bone-3); }
.dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--bone-3); vertical-align: middle;
}
.is-live .dot { background: var(--moss); box-shadow: 0 0 0 0 rgba(155,225,93,.6); animation: pulse 1.6s infinite; }
@keyframes pulse { to { box-shadow: 0 0 0 9px rgba(155,225,93,0); } }

/* ─── depth rail ─────────────────────────────────────────────────────── */
.rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail);
  border-right: 1px solid var(--line-2);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 22px 0; z-index: 20;
  background: linear-gradient(90deg, rgba(14,11,7,.95), rgba(14,11,7,.7));
}
.rail-mark {
  display: block; text-align: center;
  font-family: var(--display); font-weight: 600; font-size: 15px; line-height: .95;
  letter-spacing: .06em;
}
.rail-nav { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.rail-nav a {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 9px 0 9px 22px; text-decoration: none;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bone-3); transition: color .25s;
}
.rail-nav a i { width: 6px; height: 6px; border: 1px solid var(--bone-3); border-radius: 50%; transition: all .25s; }
.rail-nav a span { opacity: 0; transform: translateX(-6px); transition: all .25s; }
.rail:hover .rail-nav a span, .rail-nav a.active span { opacity: 1; transform: none; }
.rail-nav a.active { color: var(--bone); }
.rail-nav a.active i { background: var(--rust); border-color: var(--rust); }
.rail-depth { text-align: center; }
.rail-depth-label { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--bone-3); }
.rail-depth-value { display: block; font-family: var(--mono); font-size: 13px; color: var(--rust-2); font-variant-numeric: tabular-nums; }

/* ─── top bar ────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 15;
  margin-left: var(--rail);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px var(--gutter);
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  background: linear-gradient(180deg, rgba(14,11,7,.92), rgba(14,11,7,0));
  pointer-events: none;
}
.topbar-specimen { color: var(--bone-3); }
.topbar-specimen em { color: var(--bone-2); font-style: italic; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--bone-2); background: rgba(14,11,7,.6); pointer-events: auto;
}
.chip b { font-weight: 500; color: var(--bone); }
.topbar-right { display: flex; gap: 8px; align-items: center; }
.chip { white-space: nowrap; }

/* ─── chambers ───────────────────────────────────────────────────────── */
main { margin-left: var(--rail); overflow-x: clip; }
.live-grid > *, .chamber-split > *, .chain-grid > *, .stigmergy > *, .tunnels li > * { min-width: 0; }
.chamber {
  position: relative;
  max-width: var(--max);
  padding: clamp(64px, 10vw, 120px) var(--gutter);
  margin: 0 auto;
}
.chamber + .chamber::before {
  content: attr(data-depth) " m";
  position: absolute; top: 0; left: var(--gutter); right: var(--gutter);
  border-top: 1px solid var(--line-2);
  padding-top: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--bone-3);
  text-align: right;
}
.chamber-head { max-width: 720px; margin-bottom: 44px; }
.chamber-num {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--rust-2); margin-bottom: 14px;
}
h2 {
  font-family: var(--display); font-weight: 300; font-style: italic;
  font-size: clamp(30px, 4.2vw, 50px); line-height: 1.05; letter-spacing: -.01em;
  margin: 0 0 18px;
}
.chamber-head p { color: var(--bone-2); font-size: 17px; margin: 0; }
h3 { font-family: var(--display); font-weight: 600; font-size: 17px; margin: 0 0 14px; letter-spacing: .01em; }
h4 { font-family: var(--body); font-weight: 700; font-size: 15px; margin: 0 0 6px; }

/* ─── hero ───────────────────────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: clamp(24px, 4vw, 60px);
  padding-top: 80px; padding-bottom: 90px;
  max-width: none;
}
.hero > * { min-width: 0; }
.hero-live {
  order: 2; position: relative; min-width: 0;
  background: linear-gradient(180deg, var(--soil-2), var(--soil));
  border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(211,85,43,.08);
}
.hero-live-top { display: flex; align-items: center; gap: 10px 12px; margin-bottom: 12px; flex-wrap: wrap; min-width: 0; }
.hero-live-state { color: var(--bone); letter-spacing: .06em; text-transform: uppercase; font-size: 11px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-live-dn { display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-3); }
.hero-live-dn b { color: var(--rust-2); font-weight: 500; }
.hero-live .fine { margin-top: 8px; }
.ant-wrap { position: relative; height: 360px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); }
#ant { width: 100%; height: 100%; display: block; }
.hero-grain {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.35'/></svg>");
}
.hero-copy { order: 1; max-width: 560px; }
.hero-ca {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center;
  margin: 0 0 28px; padding: 14px 18px;
  border: 1px solid var(--rust); border-radius: 12px;
  background: linear-gradient(90deg, rgba(211,85,43,.16), rgba(211,85,43,.04));
  box-shadow: 0 0 0 4px rgba(211,85,43,.08), 0 18px 50px rgba(0,0,0,.35);
}
.hero-ca-label { grid-column: 1 / -1; color: var(--rust-2); letter-spacing: .2em; font-size: 10px; text-transform: uppercase; }
.hero-ca code { font-family: var(--mono); font-size: 16px; font-weight: 500; color: var(--bone); word-break: break-all; min-width: 0; line-height: 1.4; }
.hero-ca:not(.has-ca) code { color: var(--bone-2); font-weight: 400; }
.btn-ca { padding: 11px 18px; white-space: nowrap; }
.btn-ca[hidden] { display: none; }
.hero-ca.has-ca { animation: rise .9s cubic-bezier(.2,.7,.2,1) .46s forwards, ca-glow 3s ease-in-out 1.4s infinite; }
@keyframes ca-glow { 0%,100% { box-shadow: 0 0 0 4px rgba(211,85,43,.08), 0 18px 50px rgba(0,0,0,.35); } 50% { box-shadow: 0 0 0 6px rgba(211,85,43,.18), 0 18px 50px rgba(0,0,0,.35); } }
@media (prefers-reduced-motion: reduce) { .hero-ca.has-ca { animation: none; opacity: 1; transform: none; } }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--rust-2); margin: 0 0 20px; }
.wordmark {
  margin: 0 0 22px; line-height: .86; letter-spacing: -.035em;
  font-family: var(--display); font-size: clamp(64px, 11vw, 150px);
}
.wm-a { display: block; font-weight: 300; font-style: italic; color: var(--bone-2); }
.wm-b { display: block; font-weight: 600; color: var(--bone); }
.hero-lede { font-size: 18px; color: var(--bone-2); margin: 0 0 32px; max-width: 480px; }
.hero-lede em { color: var(--bone); }

.hero-stats {
  display: grid; grid-template-columns: repeat(4, auto); gap: 22px; margin: 0 0 34px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0;
}
.hero-stats dt { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--bone-3); }
.hero-stats dd { margin: 4px 0 0; font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.stat-live { display: flex; align-items: center; gap: 8px; }

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px; text-decoration: none;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--bone); background: transparent;
  cursor: pointer; transition: transform .2s, background .2s, border-color .2s;
}
.btn:hover { transform: translateY(-1px); border-color: var(--bone-2); }
.btn-solid { background: var(--rust); border-color: var(--rust); color: #14100b; font-weight: 500; }
.btn-solid:hover { background: var(--rust-2); border-color: var(--rust-2); }
.btn-mini { padding: 6px 12px; font-size: 10px; }
.btn-social { gap: 8px; text-transform: none; letter-spacing: .04em; }
.btn-social svg { flex: none; }
.chip-icon { padding: 6px 9px; text-decoration: none; color: var(--bone-2); transition: color .2s, border-color .2s; }
.chip-icon:hover { color: var(--bone); border-color: var(--bone-2); }

.soil-line {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 28px;
  border-top: 1px dashed var(--line);
  display: flex; justify-content: space-between; padding-top: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--bone-3);
}

/* staggered reveal on load */
.reveal { opacity: 0; transform: translateY(14px); animation: rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.reveal:nth-child(1) { animation-delay: .05s } .reveal:nth-child(2) { animation-delay: .18s }
.reveal:nth-child(3) { animation-delay: .32s } .reveal:nth-child(4) { animation-delay: .46s }
.reveal:nth-child(5) { animation-delay: .60s } .reveal:nth-child(6) { animation-delay: .74s }
.hero-live.reveal { animation-delay: .3s }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; opacity: 1; transform: none; } }

/* ─── live grid ──────────────────────────────────────────────────────── */
.live-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
}
.card {
  background: linear-gradient(180deg, var(--soil-2), var(--soil));
  border: 1px solid var(--line-2); border-radius: 14px; padding: 20px 22px;
  grid-column: span 2;
}
.card-status { grid-column: span 6; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "top top" "big pipe" "src pipe"; gap: 16px 30px; align-items: end; }
.card-status .card-top { grid-area: top; }
.card-status .status-big { grid-area: big; }
.card-status .pipeline { grid-area: pipe; }
.card-status .source-tag { grid-area: src; }
.card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.status-state { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(22px, 3vw, 34px); letter-spacing: .01em; line-height: 1.1; }
.status-sub { display: block; font-family: var(--mono); font-size: 12px; color: var(--bone-3); margin-top: 6px; }
.pipeline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--bone-2); }
.pipeline b { color: var(--rust-2); font-weight: 400; }
.pipeline span { padding: 4px 8px; border: 1px solid var(--line-2); border-radius: 6px; }
.source-tag { color: var(--bone-3); }

.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-bottom: 12px; }
.kv-wide { grid-template-columns: repeat(3, 1fr); }
.kv div { display: flex; flex-direction: column; }
.kv span { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-3); }
.kv b { font-family: var(--mono); font-weight: 500; font-size: 18px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.kv small { font-family: var(--mono); font-size: 10px; color: var(--bone-3); }
.spark { width: 100%; display: block; margin: 4px 0 8px; }
.fine { font-size: 12.5px; color: var(--bone-3); margin: 8px 0 0; line-height: 1.5; }

.card-view { grid-column: span 4; }
.view { position: relative; aspect-ratio: 16 / 10; background: #050403; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-2); }
.view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.7) contrast(1.05); }
.view img:not([src]) { visibility: hidden; }
.view canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.view-off { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(5,4,3,.82); text-align: center; padding: 20px; }
.view-off span { font-family: var(--display); font-weight: 600; font-size: clamp(16px, 2vw, 22px); }
.view-off small { font-family: var(--mono); font-size: 11px; color: var(--bone-3); }
.view-off[hidden] { display: none; }
.view-url { margin-top: 10px; color: var(--bone-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dnbars { display: grid; gap: 5px; margin: 4px 0 8px; }
.dnbars div { display: grid; grid-template-columns: 78px 1fr 44px; gap: 10px; align-items: center; font-family: var(--mono); font-size: 10px; }
.dnbars span { color: var(--bone-3); letter-spacing: .08em; }
.dnbars i { display: block; height: 4px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.dnbars b { display: block; height: 100%; width: 0; background: var(--rust-2); transition: width .3s; }
.dnbars em { font-style: normal; color: var(--bone-2); text-align: right; font-variant-numeric: tabular-nums; }
.card-trail { grid-column: span 4; }
#trail { width: 100%; height: 260px; display: block; border-radius: 8px; background: #0a0806; border: 1px solid var(--line-2); }

.events { list-style: none; margin: 6px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line-2); max-height: 128px; overflow: hidden; }
.events li { padding: 2px 0; color: var(--bone-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.events li b { color: var(--rust-2); font-weight: 400; margin-right: 8px; }
.events li.veto b { color: var(--bone-3); }

.card-contract { grid-column: span 6; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.contract-row { display: flex; align-items: center; gap: 12px; }
.contract-row code { font-family: var(--mono); font-size: 13px; color: var(--bone); }

/* ─── what (split) ───────────────────────────────────────────────────── */
.chamber-split { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px 60px; align-items: start; }
.chamber-split .chamber-head { grid-column: 1 / -1; }
.prose p { color: var(--bone-2); margin: 0 0 18px; font-size: 16.5px; }
.prose .lead { font-size: 20px; color: var(--bone); font-family: var(--display); font-weight: 300; line-height: 1.4; }
.prose .lead em { color: var(--rust-2); }
.spec { list-style: none; padding: 0; margin: 26px 0 0; border-top: 1px solid var(--line); }
.spec li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line-2); color: var(--bone-3); }
.spec li b { color: var(--bone); font-weight: 500; }
.brain-fig { margin: 0; position: sticky; top: 90px; }
.brain-svg { width: 100%; height: auto; }
.brain-svg .lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; fill: var(--bone-3); text-transform: uppercase; }
.brain-fig figcaption { margin-top: 10px; }

/* ─── how ────────────────────────────────────────────────────────────── */
.neurons { list-style: none; padding: 0; margin: 0 0 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.neurons li { border-top: 2px solid var(--rust); padding: 16px 0 0; }
.n-id { display: block; color: var(--rust-2); margin-bottom: 10px; }
.neurons p { margin: 0; color: var(--bone-2); font-size: 14.5px; }

.stigmergy {
  display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center;
  border: 1px solid var(--line-2); border-radius: 14px; padding: 26px 28px;
  background: linear-gradient(90deg, var(--soil-2), transparent);
}
.stig-text p { margin: 0; color: var(--bone-2); }
.stig-eq { font-size: 18px; overflow-x: auto; max-width: 100%; color: var(--bone); padding: 14px 20px; border-left: 1px solid var(--rust); }
.stig-eq sub { font-size: .6em; color: var(--bone-3); }

/* ─── tunnels (plan) ─────────────────────────────────────────────────── */
.tunnels { list-style: none; padding: 0; margin: 0; position: relative; }
.tunnels::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 0; border-left: 1px dashed var(--line); }
.tunnels li { position: relative; display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; padding: 18px 0 18px 0; align-items: start; }
.tunnels li:not(.rust-line)::before {
  content: ""; position: absolute; left: 18px; top: 26px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--soil); border: 1px solid var(--bone-3);
}
.tunnels li.done::before { background: var(--bone); border-color: var(--bone); }
.tunnels li.building::before { border-color: var(--rust); animation: pulse-rust 1.8s infinite; }
@keyframes pulse-rust { 0%,100% { box-shadow: 0 0 0 0 rgba(211,85,43,.5) } 50% { box-shadow: 0 0 0 7px rgba(211,85,43,0) } }
.t-num { color: var(--bone-3); padding-left: 40px; padding-top: 3px; }
.tunnels p { margin: 0; color: var(--bone-2); font-size: 14.5px; max-width: 620px; }
.t-state { color: var(--bone-3); padding-top: 3px; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; }
.building .t-state { color: var(--rust-2); }
.rust-line { padding: 0 !important; margin: 10px 0 10px 40px; border-top: 1px solid var(--rust); grid-template-columns: 1fr !important; }
.rust-line::after { content: "everything above this line is done"; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--rust-2); padding-top: 6px; }

/* ─── chain ──────────────────────────────────────────────────────────── */
.ticker { font-style: normal; font-weight: 600; color: var(--rust-2); }
.chain-grid { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start; }
.chain-facts { margin: 0; border-top: 1px solid var(--line); }
.chain-facts div { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.chain-facts dt { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--bone-3); padding-top: 3px; }
.chain-facts dd { margin: 0; font-size: 14px; word-break: break-all; }
.chain-actions { display: flex; flex-direction: column; gap: 10px; min-width: 260px; }

/* ─── honest ─────────────────────────────────────────────────────────── */
.honest { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.honest div { padding: 22px 0; border-top: 1px solid var(--line-2); }
.honest dt { font-family: var(--display); font-weight: 600; font-size: 19px; margin-bottom: 8px; }
.honest dd { margin: 0; color: var(--bone-2); font-size: 14.5px; }

/* ─── footer ─────────────────────────────────────────────────────────── */
.foot { margin-left: var(--rail); max-width: var(--max); padding: 40px var(--gutter) 60px; margin-right: auto; margin-left: auto; padding-left: calc(var(--gutter)); }
@media (min-width: 900px) { .foot { margin-left: calc(var(--rail) + (100% - var(--rail) - var(--max)) / 2); } }
.foot-links { display: flex; gap: 22px; margin-bottom: 18px; }
.foot-links a { color: var(--bone-2); text-decoration: none; border-bottom: 1px solid var(--line); }
.foot-links a:hover { color: var(--bone); border-color: var(--bone); }
.foot-note { font-size: 12.5px; color: var(--bone-3); max-width: 720px; margin: 0 0 30px; }
.foot-depth { display: flex; justify-content: space-between; border-top: 1px solid var(--rust); padding-top: 8px; color: var(--rust-2); letter-spacing: .18em; text-transform: uppercase; font-size: 10px; }

/* ─── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .live-grid { grid-template-columns: repeat(2, 1fr); }
  .card, .card-status, .card-trail, .card-contract, .card-view { grid-column: span 2; }
  .neurons { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  :root { --rail: 0px; }
  .rail { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 70px; min-height: auto; }
  .hero-live { order: 1; }
  .hero-copy { order: 2; }
  .hero-ca { grid-template-columns: 1fr; }
  .hero-ca code { font-size: 13.5px; }
  .btn-ca { justify-self: start; }
  .ant-wrap { height: 260px; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .chamber-split { grid-template-columns: 1fr; }
  .brain-fig { position: static; max-width: 380px; }
  .card-status { grid-template-columns: 1fr; grid-template-areas: "top" "big" "pipe" "src"; }
  .chain-grid, .stigmergy { grid-template-columns: 1fr; }
  .honest { grid-template-columns: 1fr; }
  .topbar-specimen { display: none; }
  .foot { margin-left: auto; }
}
@media (max-width: 600px) {
  .stig-eq { font-size: 15px; padding: 10px 14px; }
  .status-state { font-size: 20px; }
  .live-grid { grid-template-columns: 1fr; }
  .card, .card-status, .card-trail, .card-contract, .card-view { grid-column: span 1; }
  .kv-wide { grid-template-columns: 1fr 1fr; }
  .neurons { grid-template-columns: 1fr; }
  .tunnels li { grid-template-columns: 44px 1fr; }
  .t-state { grid-column: 2; }
  .chain-facts div { grid-template-columns: 1fr; gap: 4px; }
  .topbar { padding: 10px 12px; }
  .topbar-right { gap: 6px; }
  .chip { padding: 5px 8px; font-size: 10px; }
  .chip-chain #chainName, .chip-chain .chip-sep, .chip-chain .chip-word { display: none; }
  .chip-chain::before { content: "#"; color: var(--bone-3); margin-right: 2px; }
}