/* ==========================================================================
   Control plane — Ehtasham Sajid
   The page reports a person the way a good console reports a system:
   dense, calm, layered. Two accents, each with exactly one job.
     green  = live state. Nothing else is ever green.
     amber  = a measured fact. Nothing else is ever amber.
   ========================================================================== */

/* ---------- tokens: dark is the resting state ---------- */

:root {
  color-scheme: dark;

  --ground: #0f141a;
  --panel: #151c24;
  --raise: #1b232c;
  --edge: #2a3540;
  --edge-soft: #1e2731;

  --text: #e1e8ef;
  --text-2: #9cacbc;
  --text-3: #6e8092;

  --live: #5fc08c;
  --live-soft: rgba(95, 192, 140, 0.13);
  --fact: #ebab4e;
  --fact-soft: rgba(235, 171, 78, 0.11);

  --f-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --f-body: "Instrument Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --rail: 15.5rem;
  --gut: clamp(1.25rem, 3.4vw, 3rem);
  --stack: clamp(3.5rem, 7vw, 6rem);
}

/* daylight console — same instrument, different light */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --ground: #e3e9ef;
    --panel: #f7f9fb;
    --raise: #eceff4;
    --edge: #c4d0dc;
    --edge-soft: #dae2ea;
    --text: #101820;
    --text-2: #4b5c6d;
    --text-3: #6a7c8d;
    --live: #12764a;
    --live-soft: rgba(18, 118, 74, 0.1);
    --fact: #94600a;
    --fact-soft: rgba(148, 96, 10, 0.1);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --ground: #e3e9ef;
  --panel: #f7f9fb;
  --raise: #eceff4;
  --edge: #c4d0dc;
  --edge-soft: #dae2ea;
  --text: #101820;
  --text-2: #4b5c6d;
  --text-3: #6a7c8d;
  --live: #12764a;
  --live-soft: rgba(18, 118, 74, 0.1);
  --fact: #94600a;
  --fact-soft: rgba(148, 96, 10, 0.1);
}

/* ---------- base ---------- */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

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

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

/* the utility voice: every label, code, count and caption */
.rail-k,
.rail nav a,
.rail-meta a,
.uptime-cap,
.eyebrow,
.sec-count,
.tile-note,
.sys-kind,
.fact-k,
.chips-k,
.chips li,
.disclose summary,
.era,
.stack-row dt,
.cert-issuer,
.theme button,
.foot-k {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* ==========================================================================
   Shell
   ========================================================================== */

.shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  max-width: 86rem;
  margin: 0 auto;
  min-height: 100vh;
}

/* ==========================================================================
   The rail — this page's one flourish.
   It reports the person as a running system and never stops reporting.
   ========================================================================== */

.rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: 2rem 1.5rem 1.75rem;
  border-right: 1px solid var(--edge);
  background: var(--panel);
  overflow-y: auto;
}

.rail-k {
  display: block;
  color: var(--text-3);
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  margin-bottom: 0.6rem;
}

.rail-id .who {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 88;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0;
}

.rail-id .where {
  margin: 0.3rem 0 0;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--text-3);
}

/* the only green on the page, besides the uptime bar */
.state {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--edge);
  background: var(--live-soft);
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--live);
}

.dot {
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--live);
  animation: beacon 2.8s ease-out infinite;
}

@keyframes beacon {
  0%   { box-shadow: 0 0 0 0 var(--live-soft); }
  70%  { box-shadow: 0 0 0 0.5rem transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ten years, no gaps — a career drawn as an uptime bar */
.uptime-bars {
  display: flex;
  gap: 2px;
  height: 1.85rem;
}

.uptime-bars i {
  flex: 1;
  background: var(--live);
  opacity: 0.75;
  transform-origin: bottom;
  animation: bar-up 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}

@keyframes bar-up { from { transform: scaleY(0.06); opacity: 0; } }

.uptime-cap {
  display: flex;
  justify-content: space-between;
  margin-top: 0.45rem;
  color: var(--text-3);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
}

.rail nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rail nav a {
  display: block;
  padding: 0.42rem 0 0.42rem 0.8rem;
  border-left: 2px solid var(--edge-soft);
  color: var(--text-3);
  font-size: 0.6875rem;
  text-decoration: none;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.rail nav a:hover { color: var(--text); border-left-color: var(--text-3); }

/* "you are inspecting this subsystem" */
.rail nav a.here {
  color: var(--text);
  border-left-color: var(--fact);
}

.rail-meta {
  margin-top: auto;
  display: grid;
  gap: 0.35rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--edge-soft);
}

.rail-meta a {
  color: var(--text-2);
  font-size: 0.625rem;
  letter-spacing: 0.05em;
  text-transform: none;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 0.16s ease;
}

.rail-meta a:hover { color: var(--text); }

.theme { display: flex; gap: 0.3rem; margin-top: 0.9rem; }
.theme[hidden] { display: none; }

.theme button {
  flex: 1;
  appearance: none;
  padding: 0.32rem 0.2rem;
  border: 1px solid var(--edge);
  background: transparent;
  color: var(--text-3);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.theme button:hover { color: var(--text); border-color: var(--text-3); }
.theme button[aria-pressed="true"] { color: var(--text); border-color: var(--text-2); background: var(--raise); }

/* ==========================================================================
   Main column
   ========================================================================== */

.view {
  min-width: 0;
  padding: 0 var(--gut) 0;
}

.sec {
  padding-top: var(--stack);
  scroll-margin-top: 1.5rem;
}

.sec-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--edge);
}

.sec-head h2 {
  margin: 0;
  font-family: var(--f-display);
  font-variation-settings: "wdth" 92;
  font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.sec-count {
  margin-left: auto;
  color: var(--text-3);
  font-size: 0.625rem;
  white-space: nowrap;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { padding-top: clamp(2.5rem, 6vw, 4.5rem); }

.eyebrow {
  margin: 0 0 1.25rem;
  color: var(--text-3);
  font-size: 0.625rem;
  letter-spacing: 0.15em;
}

.hero h1 {
  margin: 0;
  font-family: var(--f-display);
  font-variation-settings: "wdth" 84, "opsz" 96;
  font-weight: 800;
  font-size: clamp(2.6rem, 7.6vw, 5.4rem);
  line-height: 0.94;
  /* caps need more room between letters than lowercase does */
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

.hero h1 em {
  display: block;
  font-style: normal;
  color: var(--text-2);
}

.thesis {
  max-width: 44ch;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  font-size: clamp(1.1rem, 1.9vw, 1.32rem);
  line-height: 1.5;
  color: var(--text-2);
  text-wrap: pretty;
}

.thesis b { color: var(--text); font-weight: 600; }

/* ---------- hero topology: the one system this page is about ---------- */

.topo {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  border: 1px solid var(--edge);
  background: var(--panel);
}

.topo-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--edge);
  background: var(--raise);
}

.topo-bar .rail-k { margin: 0; }

.fig-scroll {
  overflow-x: auto;
  padding: 1.5rem 1.25rem;
}

.topo .fig-scroll { background: var(--ground); }

.dwg { display: block; width: 100%; min-width: 44rem; height: auto; }

/* ---------- identity strip ---------- */

.ident {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  margin-top: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
}

.ident > div {
  padding: 0.9rem 1rem 1rem;
  background: var(--panel);
}

.ident dt {
  margin: 0 0 0.35rem;
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-3);
}

.ident dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--text);
  overflow-wrap: anywhere;
}

.ident a { text-decoration: none; border-bottom: 1px solid var(--text-3); }
.ident a:hover { border-bottom-color: var(--text); }

/* ==========================================================================
   Track record — the only place bare numbers appear
   ========================================================================== */

.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--edge);
  border: 1px solid var(--edge);
}

.tiles li {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.4rem 1.25rem 1.5rem;
  background: var(--panel);
}

.tile-q {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 88;
  font-weight: 800;
  font-size: clamp(2.1rem, 4.2vw, 2.7rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--fact);
  font-variant-numeric: tabular-nums;
}

.tile-q small {
  font-family: var(--f-mono);
  font-size: 0.32em;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

.tile-what {
  font-size: 0.94rem;
  line-height: 1.4;
  color: var(--text);
  text-wrap: pretty;
}

.tile-note {
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  color: var(--text-3);
}

/* ==========================================================================
   Selected work — each project is a subsystem panel
   ========================================================================== */

.sys {
  margin-top: 1.5rem;
  border: 1px solid var(--edge);
  background: var(--panel);
  transition: border-color 0.2s ease;
}

.sys:first-of-type { margin-top: 0; }
.sys:hover { border-color: var(--text-3); }

.sys-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  padding: 1.05rem 1.25rem;
  border-bottom: 1px solid var(--edge);
  background: var(--raise);
}

.sys-head h3 {
  margin: 0;
  font-family: var(--f-display);
  font-variation-settings: "wdth" 90;
  font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  letter-spacing: -0.018em;
  line-height: 1.15;
}

.sys-kind { color: var(--text-3); font-size: 0.625rem; }

.sys-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: 1.5rem;
  align-items: start;
  padding: 1.4rem 1.25rem;
}

/* the lede is the card's claim now, not its summary — it can carry weight */
.lede {
  margin: 0;
  font-size: clamp(1.08rem, 1.7vw, 1.22rem);
  line-height: 1.45;
  color: var(--text);
  text-wrap: pretty;
}

/* the one measured fact each system is judged on */
.fact {
  padding: 0.8rem 0.9rem 0.85rem;
  border: 1px solid var(--fact-soft);
  border-left: 2px solid var(--fact);
  background: var(--fact-soft);
}

.fact-k {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.5625rem;
  letter-spacing: 0.11em;
  color: var(--text-3);
}

.fact-v {
  display: block;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--text-2);
}

.fact-v b {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 90;
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--fact);
}

.fig {
  margin: 0;
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  background: var(--ground);
}

.sys-cols {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: 0;
}

.spec-col {
  padding: 1.4rem 1.25rem;
  border-right: 1px solid var(--edge);
}

.detail-col { padding: 1.4rem 1.25rem; }

.spec { margin: 0; }

.spec dt {
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-3);
}

.spec dd {
  margin: 0.25rem 0 1rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-2);
}

.chips-k {
  margin: 0 0 0.6rem;
  font-size: 0.5625rem;
  letter-spacing: 0.11em;
  color: var(--text-3);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chips li {
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--edge);
  background: var(--raise);
  color: var(--text-2);
  font-size: 0.5625rem;
  letter-spacing: 0.05em;
}

.outcomes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.9rem;
}

.outcomes li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-2);
  text-wrap: pretty;
}

.outcomes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.55rem;
  height: 1px;
  background: var(--text-3);
}

.disclose { margin-top: 0.9rem; }

.disclose summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0;
  color: var(--text-3);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  list-style: none;
  transition: color 0.16s ease;
}

.disclose summary::-webkit-details-marker { display: none; }
.disclose summary::before { content: "+"; color: var(--fact); }
.disclose[open] summary::before { content: "\2212"; }
.disclose summary:hover { color: var(--text); }
.disclose .on { display: none; }
.disclose[open] .off { display: none; }
.disclose[open] .on { display: inline; }
.disclose[open] summary { margin-bottom: 0.9rem; }

/* ---------- also delivered ---------- */

.more-head {
  margin: 3rem 0 1.25rem;
  font-family: var(--f-display);
  font-variation-settings: "wdth" 90;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

.more {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
}

.more > div { padding: 1.15rem 1.25rem 1.3rem; background: var(--panel); }

.more dt {
  margin: 0 0 0.4rem;
  font-family: var(--f-display);
  font-variation-settings: "wdth" 90;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.005em;
  color: var(--text);
}

.more dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-2);
  text-wrap: pretty;
}

/* ==========================================================================
   Experience
   ========================================================================== */

.eras { margin: 0; padding: 0; list-style: none; }

.eras > li {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--edge-soft);
}

.eras > li:first-child { border-top: 0; padding-top: 0; }

.era { color: var(--text-3); font-size: 0.625rem; letter-spacing: 0.08em; line-height: 1.6; }
.eras .now .era { color: var(--live); }

.eras h3 {
  margin: 0 0 0.7rem;
  font-family: var(--f-display);
  font-variation-settings: "wdth" 90;
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -0.01em;
}

.eras p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 68ch;
  text-wrap: pretty;
}

/* ==========================================================================
   Stack + certifications
   ========================================================================== */

.stack-row {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: 0;
  margin: 0;
}

.stack-row dt {
  padding: 1.05rem 1.5rem 0.9rem 0;
  border-top: 1px solid var(--edge-soft);
  color: var(--text-3);
  font-size: 0.625rem;
  letter-spacing: 0.09em;
}

.stack-row dd {
  margin: 0;
  padding: 0.9rem 0;
  border-top: 1px solid var(--edge-soft);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
}

.certs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--edge);
  border: 1px solid var(--edge);
}

.certs li {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 1.15rem 1.1rem;
  background: var(--panel);
}

.cert-issuer { color: var(--text-3); font-size: 0.5625rem; letter-spacing: 0.12em; }

.cert-name {
  font-size: 0.94rem;
  line-height: 1.35;
  color: var(--text);
  text-wrap: pretty;
}

/* A certification is worth what its proof is worth. Certs with a verification
   URL get the affordance; certs without one stay plain text and look identical
   to how they look today. */
a.cert-name {
  align-self: start;
  text-decoration: none;
  border-bottom: 1px solid var(--edge);
  transition: border-color 0.16s ease;
}

a.cert-name::after {
  content: "\2197";
  margin-left: 0.35rem;
  font-size: 0.8em;
  color: var(--text-3);
  transition: color 0.16s ease;
}

a.cert-name:hover { border-bottom-color: var(--fact); }
a.cert-name:hover::after { color: var(--fact); }

/* validity is state, and a control plane reports state */
.cert-valid {
  margin-top: auto;
  padding-top: 0.5rem;
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* lapsed credentials stay on the record, quietly, with the year they were earned */
.lapsed {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lapsed li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-3);
}

.lapsed a {
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 1px solid var(--edge-soft);
  transition: border-color 0.16s ease, color 0.16s ease;
}

.lapsed a:hover { color: var(--text); border-bottom-color: var(--text-3); }

.lapsed i {
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.07em;
  color: var(--text-3);
}

.edu {
  margin: 2.75rem 0 0;
  font-size: 0.9rem;
  color: var(--text-3);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.foot {
  margin-top: var(--stack);
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--edge);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.foot-k { color: var(--text-3); font-size: 0.5625rem; letter-spacing: 0.11em; }

.foot-mail {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 90;
  font-weight: 700;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  letter-spacing: -0.015em;
  text-decoration: none;
  border-bottom: 2px solid var(--edge);
  transition: border-color 0.18s ease;
}

.foot-mail:hover { border-bottom-color: var(--fact); }

/* ==========================================================================
   Diagram linework — one visual language, hero and systems alike
   ========================================================================== */

.dwg .box {
  fill: var(--panel);
  stroke: var(--edge);
  stroke-width: 1;
}

.fig .dwg .box { fill: var(--panel); }

.dwg .box-key {
  fill: var(--raise);
  stroke: var(--text-3);
}

.dwg .box-fact {
  fill: var(--fact-soft);
  stroke: var(--fact);
}

.dwg .grp {
  fill: none;
  stroke: var(--edge-soft);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

/* linework needs to read as a connection, not as a panel seam */
.dwg .lnk {
  fill: none;
  stroke: var(--text-3);
  stroke-width: 1;
  opacity: 0.5;
}

.dwg .ah { fill: var(--text-3); opacity: 0.75; }

.dwg .t-node {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  fill: var(--text);
}

.dwg .t-note {
  font-family: var(--f-mono);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  fill: var(--text-3);
}

.dwg .t-col {
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  fill: var(--text-3);
}

.dwg .t-fact { fill: var(--fact); }

/* page-load: the topology comes up column by column, once */
.topo .dwg g[class^="col"] { animation: col-in 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) backwards; }
.topo .dwg .col1 { animation-delay: 0.15s; }
.topo .dwg .col2 { animation-delay: 0.32s; }
.topo .dwg .col3 { animation-delay: 0.49s; }
.topo .dwg .col4 { animation-delay: 0.66s; }

@keyframes col-in { from { opacity: 0; transform: translateX(-8px); } }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 74rem) {
  .tiles, .certs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 68rem) {
  .sys-lead { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .sys-cols { grid-template-columns: minmax(0, 1fr); }
  .spec-col { border-right: 0; border-bottom: 1px solid var(--edge); }
}

@media (max-width: 62rem) {
  .shell { grid-template-columns: minmax(0, 1fr); }

  /* the rail folds into a status bar, still reporting */
  .rail {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    padding: 0.85rem var(--gut);
    border-right: 0;
    border-bottom: 1px solid var(--edge);
    overflow: visible;
  }

  .rail .rail-k, .rail-id .who, .uptime, .rail-meta a { display: none; }
  .rail-id .where { margin: 0; }
  .state { margin: 0; padding: 0.35rem 0.55rem; }
  .rail-meta { margin: 0 0 0 auto; padding: 0; border-top: 0; }
  .theme { margin: 0; }
  .theme button { padding: 0.3rem 0.5rem; }

  .rail nav {
    order: 9;
    flex: 1 0 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .rail nav::-webkit-scrollbar { display: none; }
  .rail nav ul { display: flex; gap: 1.15rem; white-space: nowrap; }

  .rail nav a {
    padding: 0.3rem 0 0.35rem;
    border-left: 0;
    border-bottom: 2px solid transparent;
  }

  .rail nav a:hover { border-left-color: transparent; border-bottom-color: var(--text-3); }
  .rail nav a.here { border-left-color: transparent; border-bottom-color: var(--fact); }

  .eras > li { grid-template-columns: minmax(0, 1fr); gap: 0.55rem; }
  .stack-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .stack-row dd { border-top: 0; padding-top: 0; }
}

@media (max-width: 46rem) {
  .tiles, .certs, .more, .ident { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 34rem) {
  body { font-size: 1rem; }
  .sys-head, .sys-lead, .spec-col, .detail-col { padding-inline: 1rem; }
  .fig-scroll { padding: 1.1rem 1rem; }
  .ident > div, .tiles li, .certs li, .more > div { padding-inline: 1rem; }
}

@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;
  }
}

/* ==========================================================================
   404 — a resource that isn't there, reported plainly
   ========================================================================== */

.nf-body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 2rem var(--gut);
}

.nf { max-width: 34rem; }

.nf-code {
  margin: 0 0 1.25rem;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--text-3);
}

.nf-h {
  margin: 0;
  font-family: var(--f-display);
  font-variation-settings: "wdth" 84, "opsz" 96;
  font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.nf-p {
  margin: 1.25rem 0 0;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--text-2);
  text-wrap: pretty;
}

.nf-links { margin: 2rem 0 0; }

.nf-meta {
  margin: 3rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--edge);
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
}

.nf-meta a { color: var(--text-2); text-decoration: none; }
.nf-meta a:hover { color: var(--text); }