/* Kahu Labs Research — design system.
   Tokens and form rules mirror kahulabs.com (BRAND_IDENTITY.md §4, RD-1/2/3):
   strictly monochrome, radius 0, no shadows, no gradients, 1px hairlines. */

:root {
  --ink:#000; --paper:#fff; --grey:#808080; --line:#e4e4e4; --dim:#595959;
  --sans:"Clan Pro","DM Sans",-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  color-scheme: only light;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { font-family:var(--sans); background:var(--paper); color:var(--ink);
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }
::selection { background:var(--ink); color:var(--paper); }
a { color:inherit; text-decoration:none; }
ul, ol { list-style:none; }
img { max-width:100%; height:auto; display:block; }
:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }

.wrap { max-width:940px; margin:0 auto; padding:0 24px; }
.narrow { max-width:720px; }
.skip { position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper);
  font-family:var(--mono); font-size:12px; padding:10px 16px; z-index:100; }
.skip:focus { left:0; }

/* ---- header / nav ---- */
header { position:sticky; top:0; background:var(--paper); border-bottom:1px solid var(--ink); z-index:10; }
.nav { display:flex; align-items:center; justify-content:space-between; height:64px; gap:24px; }
.nav .brand { display:flex; align-items:center; gap:14px; }
.nav img { height:30px; width:auto; display:block; }
.nav .brand .tag { font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); border-left:1px solid var(--line); padding-left:14px; }
.navlinks { display:flex; align-items:center; gap:26px; }
.navlinks a { font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--dim); border-bottom:1px solid transparent; padding-bottom:2px; }
.navlinks a:hover, .navlinks a.here { color:var(--ink); border-bottom-color:var(--ink); }
@media (max-width:640px){ .nav .brand .tag{ display:none; } .navlinks a.hideable{ display:none; } }

/* ---- home ---- */
.doc { padding:72px 0 64px; }
.eyebrow { font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); }
.home-h1 { font-size:clamp(30px,4.4vw,44px); font-weight:700; letter-spacing:-.025em;
  line-height:1.12; margin:16px 0 18px; max-width:720px; }
.home-lead { font-size:18px; color:var(--dim); max-width:640px; }

.index-head { display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  border-bottom:1px solid var(--ink); padding-bottom:12px; margin:64px 0 0; }
.index-head h2 { font-size:15px; font-family:var(--mono); font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.index-head .count { font-family:var(--mono); font-size:12px; color:var(--dim); }

/* topic filter (progressive enhancement; works without JS) */
.filters { display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 8px; }
.filters button { font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--dim); background:var(--paper); border:1px solid var(--line); padding:7px 13px; cursor:pointer; }
.filters button:hover { border-color:var(--ink); color:var(--ink); }
.filters button[aria-pressed="true"] { background:var(--ink); color:var(--paper); border-color:var(--ink); }

.postlist { border-top:1px solid var(--ink); margin-top:20px; }
.post { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,3fr); gap:32px;
  padding:26px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.post:hover h3 { border-bottom-color:var(--ink); }
.post h3 { font-size:19px; font-weight:600; letter-spacing:-.01em; line-height:1.25;
  border-bottom:1px solid transparent; display:inline; padding-bottom:1px; }
.post .dek { font-size:15px; color:var(--dim); margin-top:8px; max-width:560px; }
.post .meta { font-family:var(--mono); font-size:11.5px; color:var(--dim); letter-spacing:.04em;
  text-align:right; line-height:1.9; }
.post .meta .cat { text-transform:uppercase; }
@media (max-width:640px){ .post { grid-template-columns:1fr; gap:10px; }
  .post .meta { text-align:left; } }

/* ---- article ---- */
.article { padding:56px 0 40px; }
.crumb { font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.crumb a:hover { color:var(--ink); }
.article h1 { font-size:clamp(28px,4vw,40px); font-weight:700; letter-spacing:-.025em;
  line-height:1.14; margin:18px 0 16px; max-width:760px; }
.article .dek { font-size:19px; color:var(--dim); max-width:680px; line-height:1.5; }
.artmeta { display:flex; flex-wrap:wrap; gap:20px; margin-top:26px; padding:14px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:12px; color:var(--dim); letter-spacing:.04em; }
.artmeta .k { text-transform:uppercase; }

.prose { margin-top:40px; max-width:720px; }
.prose h2 { font-size:23px; font-weight:700; letter-spacing:-.02em; line-height:1.2;
  margin:44px 0 14px; }
.prose h3 { font-size:17px; font-weight:600; margin:32px 0 10px; }
.prose p { margin:0 0 18px; }
.prose a { border-bottom:1px solid var(--grey); padding-bottom:1px; }
.prose a:hover { border-bottom-color:var(--ink); }
.prose strong { font-weight:600; }
.prose ul, .prose ol { margin:0 0 18px; padding-left:0; }
.prose li { position:relative; padding-left:22px; margin-bottom:9px; }
.prose ul li::before { content:"—"; position:absolute; left:0; color:var(--grey); }
.prose ol { counter-reset:li; }
.prose ol li { counter-increment:li; }
.prose ol li::before { content:counter(li,decimal-leading-zero); position:absolute; left:0;
  font-family:var(--mono); font-size:12px; color:var(--grey); top:3px; }
.prose blockquote { border-left:2px solid var(--ink); padding:2px 0 2px 20px; margin:0 0 18px; color:var(--dim); }
.lede-block { border:1px solid var(--ink); padding:24px 26px; margin:0 0 8px; }
.lede-block .label { font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); display:block; margin-bottom:10px; }
.lede-block p:last-child { margin-bottom:0; }

/* code */
.prose pre { border:1px solid var(--line); background:#fafafa; padding:18px 20px; overflow-x:auto;
  margin:0 0 20px; }
.prose pre code { font-family:var(--mono); font-size:13px; line-height:1.6; color:var(--ink); white-space:pre; }
.prose code { font-family:var(--mono); font-size:13.5px; background:#f4f4f4; padding:1px 5px; }
.prose pre code { background:none; padding:0; }
figure.diagram { margin:0 0 22px; border:1px solid var(--line); }
figure.diagram pre { border:0; background:var(--paper); margin:0; padding:22px 24px; }
figure.diagram figcaption, figure .cap { font-family:var(--mono); font-size:11.5px; color:var(--dim);
  letter-spacing:.03em; padding:10px 16px; border-top:1px solid var(--line); }
.prose figcaption { }

.callout { border:1px solid var(--ink); padding:20px 24px; margin:0 0 22px; }
.callout .label { font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); display:block; margin-bottom:8px; }

/* references */
.refs { margin-top:52px; border-top:1px solid var(--ink); padding-top:20px; }
.refs h2 { font-size:14px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; font-weight:500; margin-bottom:14px; }
.refs ol { counter-reset:ref; font-size:14.5px; }
.refs li { counter-increment:ref; position:relative; padding-left:30px; margin-bottom:11px; color:var(--dim); }
.refs li::before { content:"["counter(ref)"]"; position:absolute; left:0; font-family:var(--mono);
  font-size:12px; color:var(--grey); }
.refs a { border-bottom:1px solid var(--grey); }
.refs a:hover { border-bottom-color:var(--ink); color:var(--ink); }
.srcnote { margin-top:16px; font-family:var(--mono); font-size:12px; color:var(--dim); line-height:1.7; }

/* related */
.related { margin-top:48px; }
.related h2 { font-size:14px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em;
  font-weight:500; border-top:1px solid var(--ink); padding-top:18px; margin-bottom:6px; }
.related a { display:block; padding:16px 0; border-bottom:1px solid var(--line); }
.related a:hover .rt { border-bottom-color:var(--ink); }
.related .rt { font-size:16px; font-weight:600; border-bottom:1px solid transparent; display:inline; }
.related .rd { font-size:14px; color:var(--dim); margin-top:5px; }

/* ---- footer ---- */
footer { border-top:1px solid var(--ink); padding:34px 0 44px; margin-top:72px; }
.foot { display:flex; justify-content:space-between; align-items:baseline; gap:24px; flex-wrap:wrap;
  font-family:var(--mono); font-size:12px; color:var(--dim); letter-spacing:.04em; }
.foot a:hover, .foot-legal a:hover { color:var(--ink); }
.foot .links, .foot-legal .links { display:flex; gap:24px; flex-wrap:wrap; }
.foot-legal { margin-top:24px; padding-top:16px; border-top:1px solid var(--line); display:flex;
  justify-content:space-between; align-items:baseline; gap:24px; flex-wrap:wrap;
  font-family:var(--mono); font-size:12px; color:var(--dim); letter-spacing:.04em; }

/* 404 */
.status { padding:120px 0; text-align:left; }
.status h1 { font-size:40px; font-weight:700; letter-spacing:-.02em; }
.status p { color:var(--dim); margin-top:12px; }

@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }