/* Colony — Eshaan Mathakari's site.
   Layout: a live ant-colony hero whose food sources are the projects; below it, wide-type
   project indexes with trail glyphs, plain-English project pages, the lab diagram and the
   life-as-a-chat-room timeline. Ultramarine ground for the colony, signal yellow for the ants. */

/* Fonts are self-hosted (SIL Open Font License): no third-party requests for type. */
@font-face { font-family: "Anybody"; src: url("fonts/anybody-latin-standard-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 150%; font-style: normal; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-latin-wght-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("fonts/martian-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("fonts/martian-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* color */
  --paper: #f1f2f6;
  --panel: #ffffff;
  --sunk: #e4e6ee;
  --ink: #0f1328;
  --muted: #555c78;
  --line: #d3d7e4;
  --link: #2035c4;
  --colony: #1b2cb0;          /* the hero ground: ultramarine */
  --colony-ink: #f4f5ff;
  --colony-muted: #b8c0f4;
  --signal: #ffc61f;          /* ants, trails, highlights */
  --signal-ink: #141414;
  --ok: #1e8f50;
  --idle: #9198b0;

  /* area dots */
  --a-research: #e3a400;
  --a-agents: #2035c4;
  --a-ml: #e0522c;
  --a-chain: #0f9c8f;
  --a-markets: #7b45e8;
  --a-tools: #3b8f2a;
  --a-creative: #e0457b;

  /* type */
  --display: "Anybody", "Arial Black", "Helvetica Neue", sans-serif;
  --ui: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --read: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --step--1: .8125rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: clamp(1.4rem, 1.2rem + .8vw, 1.85rem);
  --step-3: clamp(1.9rem, 1.4rem + 2vw, 2.9rem);
  --step-4: clamp(2.6rem, 1.4rem + 5.2vw, 5.6rem);

  --wrap: 74rem;
  --radius: 6px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0b0e1d; --panel: #12172c; --sunk: #070915; --ink: #eceefa; --muted: #9aa1c2; --line: #252b47;
    --link: #a7b4ff; --colony: #101a6e; --colony-ink: #f4f5ff; --colony-muted: #a9b2ea;
    --signal: #ffd24a; --ok: #4fd18a; --idle: #59607e;
    --a-research: #ffcf3f; --a-agents: #8d9dff; --a-ml: #ff8158; --a-chain: #3fd1c2; --a-markets: #b28cff; --a-tools: #79d35f; --a-creative: #ff7fa8;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0b0e1d; --panel: #12172c; --sunk: #070915; --ink: #eceefa; --muted: #9aa1c2; --line: #252b47;
  --link: #a7b4ff; --colony: #101a6e; --colony-ink: #f4f5ff; --colony-muted: #a9b2ea;
  --signal: #ffd24a; --ok: #4fd18a; --idle: #59607e;
  --a-research: #ffcf3f; --a-agents: #8d9dff; --a-ml: #ff8158; --a-chain: #3fd1c2; --a-markets: #b28cff; --a-tools: #79d35f; --a-creative: #ff7fa8;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--step-0)/1.6 var(--ui);
  min-height: 100vh; display: flex; flex-direction: column;
}
.body-shim { display: flex; flex-direction: column; min-height: 100%; background: var(--paper); color: var(--ink); font: 400 var(--step-0)/1.6 var(--ui); }
main { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { margin: 0; line-height: 1.05; text-wrap: balance; }
p { margin: 0; }
.dim { color: var(--muted); }
.fine { color: var(--muted); font-size: var(--step--1); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .5rem 1rem; z-index: 50; }
.skip:focus { left: max(16px, env(safe-area-inset-left, 0px)); }
.wrap {
  width: 100%; max-width: calc(var(--wrap) + 64px); margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }
.label { font: 500 .6875rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.display { font-family: var(--display); font-stretch: 125%; font-weight: 800; letter-spacing: -.02em; }

/* ------------------------------------------------------------------ LEDs */
.led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--idle); flex: none; }
.led-ok { background: var(--ok); box-shadow: 0 0 6px color-mix(in srgb, var(--ok) 70%, transparent); }
.led-off { background: transparent; box-shadow: 0 0 0 1px var(--idle) inset; }
.led-idle { background: var(--idle); }
@media (prefers-reduced-motion: no-preference) { .status .led-ok { animation: breathe 3.2s ease-in-out infinite; } }
@keyframes breathe { 50% { opacity: .45 } }
.area-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--a, var(--idle)); flex: none; }
[data-area="research"] { --a: var(--a-research); }
[data-area="agents"] { --a: var(--a-agents); }
[data-area="ml"] { --a: var(--a-ml); }
[data-area="chain"] { --a: var(--a-chain); }
[data-area="markets"] { --a: var(--a-markets); }
[data-area="tools"] { --a: var(--a-tools); }
[data-area="creative"] { --a: var(--a-creative); }

/* ------------------------------------------------------------------ header */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); }
body.home::before { background: var(--colony); }
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; gap: .75rem 1.5rem; min-height: 60px; flex-wrap: wrap; padding-block: .5rem; }
.wordmark { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); text-decoration: none; font: 800 1rem/1 var(--display); font-stretch: 130%; letter-spacing: -.01em; }
.wordmark svg { width: 22px; height: 22px; flex: none; }
.status { display: inline-flex; align-items: center; gap: .5rem; font: 400 .6875rem/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.nav { display: flex; gap: .2rem; margin-left: auto; flex-wrap: wrap; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 600; padding: .45rem .7rem; border-radius: 999px; }
.nav a:hover { background: var(--sunk); }
.nav a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.theme-toggle { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); cursor: pointer; display: grid; place-items: center; padding: 0; }
.theme-toggle span { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); box-shadow: 0 0 0 1.5px var(--ink); }
@media (max-width: 680px) {
  .status { display: none; }
  .nav { order: 4; width: 100%; margin-left: 0; justify-content: space-between; }
  .theme-toggle { margin-left: auto; }
}

/* ------------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: .65rem 1.2rem; background: var(--signal); color: var(--signal-ink); text-decoration: none; font-weight: 700; border-radius: 999px; }
.btn:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; color: var(--colony-ink); box-shadow: 0 0 0 1.5px var(--colony-ink) inset; }
.btn-ghost:hover { background: var(--colony-ink); color: var(--colony); filter: none; }
.btn-small { font: 500 .6875rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: .55rem .75rem; cursor: pointer; }
.btn-small:hover { border-color: var(--ink); }
.link-btn { background: none; border: 0; padding: 0; color: var(--link); font: inherit; text-decoration: underline; cursor: pointer; }

/* ------------------------------------------------------------------ colony hero */
.colony { background: var(--colony); color: var(--colony-ink); position: relative; overflow: hidden; }
.colony-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; align-items: stretch; padding-block: 3.5rem 2.5rem; }
.colony-copy { display: grid; overflow-wrap: break-word; gap: 1.25rem; align-content: center; position: relative; z-index: 2; min-width: 0; }
.colony-copy .label { color: var(--colony-muted); }
.colony h1 { font-family: var(--display); font-weight: 850; font-stretch: 108%; font-size: clamp(2.6rem, 1rem + 4.6vw, 5rem); line-height: .9; letter-spacing: -.03em; }
.colony h1 span { display: block; color: var(--signal); }
.colony .lede { color: var(--colony-ink); font-family: var(--read); font-size: var(--step-1); line-height: 1.55; max-width: 32em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.field { position: relative; min-height: 520px; border-radius: 14px; background:
  radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--colony-ink) 16%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px,
  color-mix(in srgb, var(--colony) 82%, black); box-shadow: 0 0 0 1px color-mix(in srgb, var(--colony-ink) 14%, transparent) inset; min-width: 0; }
.field canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.nest { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 8px color-mix(in srgb, var(--signal) 22%, transparent), 0 0 0 18px color-mix(in srgb, var(--signal) 9%, transparent); display: grid; place-items: center; font: 500 .5625rem/1 var(--mono); color: var(--signal-ink); letter-spacing: .04em; text-transform: uppercase; pointer-events: none; z-index: 2; }
.food { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 3; display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .7rem .4rem .45rem; border-radius: 999px; background: var(--colony-ink); color: var(--colony); text-decoration: none; font: 700 .8125rem/1.1 var(--ui); white-space: nowrap; box-shadow: 0 6px 18px -8px rgba(0,0,0,.6); transition: transform .15s ease, background .15s ease; }
.food .area-dot { width: 14px; height: 14px; box-shadow: 0 0 0 2px var(--colony-ink); }
.food small { font: 400 .625rem/1 var(--mono); color: color-mix(in srgb, var(--colony) 65%, var(--colony-ink)); font-variant-numeric: tabular-nums; }
.food:hover, .food:focus-visible { background: var(--signal); color: var(--signal-ink); transform: translate(-50%, -50%) scale(1.06); }
.food:hover small, .food:focus-visible small { color: var(--signal-ink); }
.field-wrap { display: grid; gap: .6rem; min-width: 0; }
.field-caption { font: 400 .625rem/1.6 var(--mono); color: var(--colony-muted); max-width: 60em; }
@media (max-width: 960px) {
  .colony-grid { grid-template-columns: 1fr; padding-block: 2.25rem 1.5rem; }
  .field { min-height: 460px; }
  .food { left: var(--mx, var(--x)); top: var(--my, var(--y)); font-size: .75rem; }
  .nest { left: var(--mx, var(--x)); top: var(--my, var(--y)); }
  .food small { display: none; }
}

/* ------------------------------------------------------------------ facts strip */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.facts > div { padding: 1.1rem 1rem 1.2rem 0; min-width: 0; }
.facts > div + div { padding-left: 1rem; border-left: 1px solid var(--line); }
.facts dt { font: 500 .625rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: .25rem 0 0; font: 700 1.0625rem/1.3 var(--ui); }
@media (max-width: 760px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ------------------------------------------------------------------ sections */
.section { padding-block: 3rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.section-head h2 { font-family: var(--display); font-stretch: 120%; font-weight: 800; font-size: var(--step-3); letter-spacing: -.025em; }
.more { font: 500 .75rem/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }
.page-head { padding-block: 3.5rem 1.5rem; display: grid; gap: 1rem; }
.page-head h1 { font-family: var(--display); font-stretch: 125%; font-weight: 850; font-size: var(--step-4); letter-spacing: -.035em; line-height: .92; }
.lede { font-family: var(--read); font-size: var(--step-1); line-height: 1.55; max-width: 38em; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; display: grid; gap: 1rem; min-width: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* ------------------------------------------------------------------ project index rows */
.index { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.index-row a { display: grid; grid-template-columns: minmax(0, 1fr) 11rem 132px; gap: 1.5rem; align-items: center; padding: 1.1rem .25rem; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.index-row a:hover { background: var(--panel); }
.ix-main { display: grid; gap: .25rem; min-width: 0; }
.ix-title { font-family: var(--display); font-stretch: 115%; font-weight: 750; font-size: var(--step-2); letter-spacing: -.02em; line-height: 1.1; }
.index-row a:hover .ix-title { color: var(--link); }
.ix-sum { color: var(--muted); font-size: 1rem; line-height: 1.45; max-width: 44em; }
.ix-meta { display: grid; gap: .35rem; font: 400 .6875rem/1.4 var(--mono); color: var(--muted); }
.ix-meta span { display: flex; align-items: center; gap: .45rem; }
.thumb { width: 132px; aspect-ratio: 4 / 3; max-width: 100%; border-radius: 4px; overflow: hidden; background: var(--sunk); border: 1px solid var(--line); }
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.thumb svg { width: 100%; height: 100%; display: block; }
@media (max-width: 860px) {
  .index-row a { grid-template-columns: minmax(0, 1fr) 96px; gap: 1rem; }
  .ix-meta { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; gap: .75rem; }
  .thumb { grid-column: 2; grid-row: 1 / span 2; width: 96px; }
}
.trail-glyph .t-bg { fill: var(--sunk); }
.trail-glyph .t-dot { fill: var(--a, var(--ink)); }
.trail-glyph .t-food { fill: var(--a, var(--ink)); }
.trail-glyph .t-nest { fill: var(--ink); }
.trail-glyph text { font: 800 22px var(--display); fill: var(--ink); opacity: .9; }

/* ------------------------------------------------------------------ now + github */
.now-list, .gh-list, .post-list, .plain-list, .link-list, .tags, .rules, .footer-links { list-style: none; margin: 0; padding: 0; }
.now-list a { display: grid; gap: .15rem; padding: .7rem 0; border-top: 1px dashed var(--line); color: inherit; text-decoration: none; }
.now-list li:first-child a { border-top: 0; padding-top: 0; }
.now-what { font-weight: 700; }
.now-list a:hover .now-what { color: var(--link); }
.now-detail { color: var(--muted); font-size: .9375rem; }
.gh-list a { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px dashed var(--line); text-decoration: none; color: inherit; }
.gh-list li:first-child a { border-top: 0; padding-top: 0; }
.gh-repo { font: 400 .8125rem/1.4 var(--mono); overflow-wrap: anywhere; min-width: 0; }
.gh-list a:hover .gh-repo { color: var(--link); }
.gh-list time { font: 400 .75rem/1.4 var(--mono); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ posts */
.post-list a { display: grid; grid-template-columns: 11rem minmax(0, 1fr); column-gap: 2rem; row-gap: .25rem; padding: 1.1rem 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.post-list li:first-child a { border-top: 0; }
.post-list time { grid-row: span 3; font: 400 .75rem/1.9 var(--mono); color: var(--muted); }
.post-title { font-family: var(--display); font-stretch: 110%; font-weight: 750; font-size: var(--step-2); letter-spacing: -.015em; line-height: 1.15; }
.post-list a:hover .post-title { color: var(--link); }
.post-sum { font-family: var(--read); color: var(--muted); max-width: 42em; }
@media (max-width: 600px) { .post-list a { grid-template-columns: 1fr; } .post-list time { grid-row: auto; } }

/* ------------------------------------------------------------------ work filters */
.filters { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; font: 600 .8125rem/1 var(--ui); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: .55rem .8rem; cursor: pointer; min-height: 38px; }
.chip > span:last-child { font: 400 .6875rem/1 var(--mono); color: var(--muted); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip[aria-pressed="true"] > span:last-child { color: inherit; opacity: .7; }
.search { flex: 1 1 14rem; display: flex; justify-content: flex-end; }
.search input { font: 400 .9375rem/1 var(--ui); color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: .7rem 1rem; width: min(22rem, 100%); min-height: 42px; }
@media (max-width: 640px) { .search { justify-content: stretch; } .search input { width: 100%; } }
.empty { padding: 2rem 0; color: var(--muted); }

/* ------------------------------------------------------------------ project page */
.crumbs { display: flex; gap: .5rem; align-items: center; padding-top: 2.5rem; font: 500 .6875rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); flex-wrap: wrap; }
.project-head { display: grid; gap: 1rem; padding-block: 1.25rem 0; }
.project-head h1, .post-head h1 { font-family: var(--display); font-stretch: 120%; font-weight: 850; font-size: var(--step-4); letter-spacing: -.035em; line-height: .95; }
.spec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 1rem 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.spec > div { padding: .75rem 1rem .8rem 0; min-width: 0; }
.spec > div + div { padding-left: 1rem; border-left: 1px solid var(--line); }
.spec dt { font: 500 .625rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.spec dd { margin: 0; display: flex; gap: .5rem; align-items: center; font-weight: 600; font-size: .9375rem; }
@media (max-width: 760px) {
  .project-head .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-head .spec > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .project-head .spec > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
.spec-list { grid-template-columns: 1fr; border: 0; margin: 0; }
.spec-list > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: .65rem 0 !important; border-left: 0 !important; border-top: 1px dashed var(--line); }
.spec-list > div:first-child { border-top: 0; }
.spec-list dd { display: block; font-weight: 400; }
@media (max-width: 480px) { .spec-list > div { grid-template-columns: 1fr; gap: .25rem; } }
.figure { margin: 2rem 0 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.figure img { margin-inline: auto; max-height: 520px; width: auto; }
.figure figcaption { font: 400 .75rem/1.5 var(--mono); color: var(--muted); margin-top: .75rem; }
.plain-box { margin-top: 2rem; background: var(--colony); color: var(--colony-ink); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2.25rem); display: grid; gap: .75rem; }
.plain-box .label { color: var(--colony-muted); }
.plain-box p { font-family: var(--read); font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); line-height: 1.5; max-width: 40em; }
.project-grid { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 3rem; padding-block: 2.5rem 2rem; }
@media (max-width: 860px) { .project-grid { grid-template-columns: 1fr; gap: 2rem; } }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .9rem; padding: .85rem 0; border-top: 1px dashed var(--line); font-size: 1.0625rem; line-height: 1.5; }
.steps li:first-child { border-top: 0; }
.steps li::before { content: counter(step); width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; background: var(--a, var(--ink)); color: var(--panel); font: 700 .875rem/1 var(--mono); }
.prose { font-family: var(--read); font-size: var(--step-1); line-height: 1.65; max-width: 38em; min-width: 0; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-family: var(--display); font-stretch: 115%; font-size: var(--step-2); font-weight: 800; letter-spacing: -.02em; margin-top: 1.8em; }
.prose h2:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: .4em; }
.prose strong { font-weight: 600; }
.prose code { font: 400 .85em var(--mono); background: var(--sunk); padding: .1em .3em; border-radius: 3px; }
.blocks { display: grid; gap: 2.25rem; min-width: 0; }
.block h2 { font-family: var(--display); font-stretch: 115%; font-size: var(--step-2); font-weight: 800; letter-spacing: -.02em; margin-bottom: .75rem; }
.block > p { font-family: var(--read); font-size: var(--step-1); line-height: 1.6; max-width: 38em; }
.project-side { display: grid; gap: 1.75rem; align-content: start; min-width: 0; }
.side-block { display: grid; gap: .65rem; }
.tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.tags li { font: 400 .75rem/1 var(--mono); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: .45rem .6rem; }
.link-list { display: grid; gap: .45rem; }
.link-list a { overflow-wrap: anywhere; font-weight: 600; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-block: 2rem 3rem; border-top: 1px solid var(--line); margin-top: 1rem; }
.pager a { display: grid; gap: .3rem; color: var(--ink); text-decoration: none; font: 750 1.0625rem/1.2 var(--display); font-stretch: 110%; padding: 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.pager a:last-child { text-align: right; }
.pager a:hover { border-color: var(--ink); }

/* ------------------------------------------------------------------ post page */
.post { max-width: calc(46rem + 64px); }
.post-head { display: grid; gap: 1rem; padding-block: 1.25rem 2rem; border-bottom: 1px solid var(--line); margin-bottom: 2rem; }
.post-head h1 { font-size: var(--step-3); line-height: 1.02; }
.prose-long { font-size: 1.1875rem; }
.post-foot { margin-block: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: grid; gap: 1.25rem; }
.post-foot > p { font-family: var(--read); }
.email { font: 400 .875rem/1.4 var(--mono); user-select: all; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ lab */
.diagram-frame { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; overflow-x: auto; }
.topology { width: 100%; max-width: 860px; margin-inline: auto; min-width: 600px; height: auto; display: block; }
.topology .edge { stroke: var(--idle); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; fill: none; }
@media (prefers-reduced-motion: no-preference) {
  .topology .edge { animation: flow 1.6s linear infinite; animation-delay: calc(var(--i) * -.17s); stroke: var(--a-research); }
}
@keyframes flow { to { stroke-dashoffset: -20; } }
.topology .node rect { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
.topology .node-core rect { fill: var(--colony); stroke: var(--colony); }
.topology .node-label { font: 700 13px var(--ui); fill: var(--ink); }
.topology .node-sub { font: 400 9.5px var(--mono); fill: var(--muted); }
.topology .node-core .node-label { fill: var(--colony-ink); }
.topology .node-core .node-sub { fill: var(--colony-muted); }
.topology .node-led { fill: var(--ok); }
.topology .node-core .node-led { fill: var(--signal); }
.rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.rules li { background: var(--panel); padding: 1.25rem; display: grid; gap: .5rem; align-content: start; }
.rules h3 { font: 750 var(--step-1)/1.2 var(--display); font-stretch: 110%; letter-spacing: -.01em; }
.rules p { color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.rules-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.5rem; }
.rules-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .rules, .rules-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rules, .rules-compact, .rules-3 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ about: the room */
.about-intro { max-width: 40em; }
.room { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; max-width: 48rem; }
.room-head { display: flex; align-items: center; gap: .85rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.room-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--colony); color: var(--signal); display: grid; place-items: center; font: 800 1rem/1 var(--display); flex: none; }
.room-head > div { flex: 1 1 14rem; min-width: 0; }
.room-name { font-weight: 700; }
.room-topic { color: var(--muted); font-size: .8125rem; line-height: 1.4; }
.room-log { list-style: none; margin: 0; padding: .5rem 1.1rem 1rem; display: grid; gap: .35rem; }
.day-sep { display: flex; align-items: center; gap: .75rem; margin: 1rem 0 .4rem; font: 500 .6875rem/1 var(--mono); color: var(--muted); letter-spacing: .05em; }
.day-sep::before, .day-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ev-msg { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: .7rem; padding: .35rem 0; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--signal); color: var(--signal-ink); display: grid; place-items: center; font: 800 .875rem/1 var(--display); }
.ev-head { display: flex; gap: .6rem; align-items: baseline; }
.ev-who { font-weight: 700; color: var(--link); }
.ev-time { font: 400 .6875rem/1 var(--mono); color: var(--muted); }
.ev-msg p:last-child { font-size: .9375rem; line-height: 1.5; }
.ev-state { font-size: .8125rem; color: var(--muted); padding: .2rem 0 .2rem 42px; line-height: 1.5; }
.ev-state .ev-who { color: var(--muted); }
.ev-state q { color: var(--ink); }
.room-compose { display: flex; justify-content: space-between; gap: 1rem; margin: 0 1.1rem 1.1rem; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: .875rem; background: var(--paper); }
.plain-list { display: grid; gap: .6rem; }
.plain-list li { display: grid; gap: .1rem; }
.plain-list li > span:first-child { font-weight: 600; }
.plain-list .dim { font-size: .875rem; }
.link-rows li { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .55rem; border-bottom: 1px dashed var(--line); flex-wrap: wrap; }
.link-rows li > a { font-weight: 600; }
.notfound { padding-block: 6rem; }

/* ------------------------------------------------------------------ footer */
.site-footer { margin-top: 3rem; background: var(--colony); color: var(--colony-ink); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 2rem; padding-block: 2.5rem; align-items: end; }
.site-footer .label { color: var(--colony-muted); }
.footer-email { font: 800 min(2.2rem, 4.7vw)/1.1 var(--display); font-stretch: 105%; letter-spacing: -.02em; white-space: nowrap; margin-top: .4rem; user-select: all; }
.email-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.site-footer .btn-small { background: transparent; color: var(--colony-ink); border-color: color-mix(in srgb, var(--colony-ink) 40%, transparent); }
.site-footer .btn-small:hover { border-color: var(--colony-ink); }
.footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; justify-content: flex-end; }
.footer-links a { color: var(--colony-ink); font-weight: 600; }
.site-footer .fine { grid-column: 1 / -1; color: var(--colony-muted); }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; } .footer-links { justify-content: flex-start; } }
.anchor { scroll-margin-top: 80px; }

/* ------------------------------------------------------------------ professional work + resume */
[data-area="work"] { --a: var(--a-work); }
:root { --a-work: #3d4a7a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --a-work: #b6c0e8; } }
:root[data-theme="dark"] { --a-work: #b6c0e8; }
.section-note { color: var(--muted); font-size: .9375rem; max-width: 52em; margin: -.25rem 0 1rem; }

.cv { max-width: calc(54rem + 64px); padding-block: 3rem 1rem; display: grid; gap: 2.25rem; }
.cv-head { display: grid; gap: .5rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--ink); }
.cv-head h1 { font-family: var(--display); font-stretch: 120%; font-weight: 850; font-size: var(--step-3); letter-spacing: -.03em; }
.cv-headline { font: 700 var(--step-1)/1.3 var(--ui); color: var(--link); }
.cv-contact { color: var(--muted); font-size: .9375rem; display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.cv-section { display: grid; gap: .9rem; align-content: start; }
.cv-section > h2 { font: 500 .75rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-bottom: .4rem; border-bottom: 1px solid var(--line); }
.cv-summary { font-family: var(--read); font-size: var(--step-1); line-height: 1.55; }
.cv-job { display: grid; gap: .6rem; padding-block: .4rem .9rem; }
.cv-job + .cv-job { border-top: 1px dashed var(--line); padding-top: 1rem; }
.cv-job-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; flex-wrap: wrap; }
.cv-job-head h3 { font: 750 var(--step-1)/1.25 var(--display); font-stretch: 110%; }
.cv-when { font: 400 .75rem/1.4 var(--mono); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cv-bullets { margin: 0; padding-left: 1.1em; display: grid; gap: .35rem; line-height: 1.5; }
.cv-projects { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.cv-proj { display: grid; gap: .35rem; }
.cv-proj-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .4rem; }
.cv-proj-head a { font-weight: 700; color: var(--ink); text-decoration: none; }
.cv-proj-head a:hover { color: var(--link); text-decoration: underline; }
.cv-proj-head .cv-when { margin-left: auto; }
.cv-list { margin: 0; padding-left: 1.1em; display: grid; gap: .35rem; line-height: 1.5; }
.cv-list a { font-weight: 700; color: var(--ink); }
.cv-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
@media (max-width: 700px) { .cv-cols { grid-template-columns: 1fr; } }

@media print {
  :root { --paper: #fff; --panel: #fff; --ink: #000; --muted: #444; --line: #bbb; --link: #000; color-scheme: light; }
  body::before, .site-header, .site-footer, .skip, .cv-print-hint { display: none !important; }
  body { background: #fff; font-size: 10.5pt; }
  .cv { padding: 0; gap: 1.1rem; max-width: none; }
  .cv-head h1 { font-size: 22pt; }
  .cv-job, .cv-proj { break-inside: avoid; }
  a { color: #000; text-decoration: none; }
}
.prose + .section-note { margin-top: 1rem; }