/* Working proof: design rules
   1. Nothing is decoration. Every moving thing is a model of real work.
   2. Orange marks computation that is running right now. Nothing else is orange.
      Category colors (blue, green, berry, teal) mark the kind of work, wherever it appears.
   3. Square corners, one ink, one page tone, hairline rules. */

@font-face { font-family: "Bricolage Grotesque"; src: url("../assets/fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../assets/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../assets/fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --page: #f1f1ee;
  --panel: #ffffff;
  --sunk: #f7f7f4;
  --ink: #111312;
  --muted: #565b58;
  --hair: #d9dad5;
  --live: #ff4f00;      /* fills and strokes only */
  --live-ink: #b03a00;  /* orange text, 5.4:1 on white */
  --live-soft: #ffe6da;
  --fail: #c4252e;
  /* Category colors. They mark what kind of work something is, everywhere it appears. */
  --c-hardware: #2c55c7;
  --c-embedded: #166b43;
  --c-systems: #9a3a6c;
  --c-software: #086273;      /* a property failed. Only used by verification output */
  --display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --wrap: 1320px;
  --pad: 36px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: 24px; }
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }
body { background: var(--page); color: var(--ink); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--live-soft); }
.mono { font-family: var(--mono); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 14px; z-index: 50; }
.skip:focus { left: 8px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Nav ---------- */
.nav { height: 64px; display: flex; align-items: center; justify-content: space-between; }
.nav .home { font-weight: 600; text-decoration: none; }
.nav ul { list-style: none; display: flex; gap: 28px; font-size: 15px; }
.nav ul a { color: var(--muted); text-decoration: none; }
.nav ul a:hover, .nav ul a[aria-current="page"] { color: var(--ink); }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "text panel" "lens panel"; grid-template-rows: auto 1fr; column-gap: 56px; padding: 32px 0 72px; align-items: start; }
.hero-text { grid-area: text; }
.who { font: 600 15px var(--sans); color: var(--muted); margin-bottom: 14px; }
.hero { position: relative; }
.route { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 2; }
.route path { fill: none; stroke: var(--cat); stroke-width: 2; }
.route circle { fill: var(--page); stroke: var(--cat); stroke-width: 2; }
.hero-lens { grid-area: lens; }
.hero > .panel { grid-area: panel; }
.hero h1 { font: 800 clamp(42px, 4.3vw, 66px)/1 var(--display); letter-spacing: -0.035em; }
.lede { font-size: 20px; line-height: 1.45; color: var(--muted); margin-top: 22px; max-width: 36ch; }
.facts { margin-top: 28px; display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; font-size: 15px; }
.facts dt { color: var(--muted); }
.facts dd { font-weight: 500; }
.ask { margin-top: 36px; font-weight: 600; font-size: 15px; }
.lens { margin-top: 10px; border-top: 1px solid var(--hair); }
.lens button { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hair); font: 500 18px var(--sans); transition: padding .15s; }
.lens button span { font: 400 14px var(--sans); color: var(--muted); }
.lens button[aria-pressed="true"] { box-shadow: inset 4px 0 0 var(--cat, var(--ink)); padding-left: 16px; color: var(--cat, var(--ink)); }
.lens button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Model panel ---------- */
.panel {
  /* Pin-1 corner: IC packages cut one corner to mark pin 1. Panels hold the live models, so they get it. */
  --cut: 18px;
  position: relative;
  background: linear-gradient(135deg, transparent calc(var(--cut) * 0.7071 - 0.6px), var(--ink) calc(var(--cut) * 0.7071 - 0.6px), var(--ink) calc(var(--cut) * 0.7071 + 1.2px), var(--panel) calc(var(--cut) * 0.7071 + 1.2px));
  box-shadow: inset 0 0 0 1.5px var(--ink);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
  contain: layout paint;
}
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--hair); }
.panel-head h2 { font: 600 16px var(--sans); }
.live-tag { font: 500 12px var(--mono); color: var(--live-ink); white-space: nowrap; }
.live-tag::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--live); border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.live-tag.idle { color: var(--muted); }
.live-tag.idle::before { background: var(--hair); }
.panel-body { padding: 18px; }
.panel-foot { padding: 12px 18px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.panel-foot a { color: var(--ink); }
.note { font-size: 14px; color: var(--muted); margin-top: 14px; }
.note b { color: var(--ink); font-weight: 600; }
.ctrl { all: unset; box-sizing: border-box; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; font: 600 15px var(--sans); padding: 12px 18px; border: 1.5px solid var(--ink); background: var(--panel); text-align: center; }
.ctrl:hover { background: var(--sunk); }
.ctrl[aria-pressed="true"], .ctrl.down { background: var(--ink); color: #fff; }
.ctrl:focus-visible { outline: 2px solid var(--live); outline-offset: 2px; }
.ctrl.link { border: 0; padding: 0; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.ctrl.link:hover { background: none; }
.readings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); margin-top: 14px; }
.readings > div { background: var(--panel); padding: 10px 12px; }
.readings small { display: block; font-size: 12px; color: var(--muted); }
.readings b { font: 600 20px var(--mono); }
.readings b.live { color: var(--live-ink); }

/* Cipher model */
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input { width: 100%; font: 500 19px var(--mono); padding: 10px 12px; border: 1px solid var(--hair); border-radius: 0; background: var(--sunk); color: var(--ink); }
.field input:focus { outline: 2px solid var(--live); outline-offset: -1px; }
.round { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 14px; color: var(--muted); }
.round span:last-child { white-space: nowrap; }
.round b { color: var(--ink); font-weight: 600; }
.bar { height: 4px; background: #ecece8; margin-top: 8px; }
.bar i { display: block; height: 100%; width: 100%; background: var(--live); transform: scaleX(0); transform-origin: left; }
.out { margin-top: 16px; }
.gridhead { margin-top: 18px; font-size: 13px; color: var(--muted); }
/* Four block cores side by side: same clock, same passes, each on its own counter */
.cores4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.core { padding: 8px; background: var(--sunk); border: 1px solid transparent; }
.core.busy, .core.reading { border-color: var(--live); }
.core .ch { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.core .ch span:first-child { color: var(--ink); font-weight: 600; }
.core.busy .ch span:last-child, .core.reading .ch span:first-child { color: var(--live-ink); }
.mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.mini span { font: 500 11px/1.9 var(--mono); text-align: center; background: var(--panel); }
.mini span.ctr { box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 700; }
.mini span.bus { background: var(--live-soft); color: var(--live-ink); }
.mini span.unused { color: var(--muted); }
.core i { display: block; height: 4px; background: #ecece8; margin-top: 8px; }
.core i b { display: block; height: 100%; width: 100%; background: var(--live); transform: scaleX(0); transform-origin: left; }
.core.done i b { background: var(--ink); }
.legend { margin-top: 6px; font-size: 12px; color: var(--muted); }
.core.hcc { grid-column: 1 / -1; }
.speed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; }
.speed > span { font-size: 13px; color: var(--muted); margin-right: 4px; }
.rt { margin-top: 10px; padding: 10px 12px; background: var(--sunk); font-size: 14px; line-height: 1.5; }
.rt b { font-weight: 600; }
.busline { margin-top: 8px; font: 500 13px var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.core.hcc .hbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; }
.core.hcc .hbody p { font-size: 12px; color: var(--muted); }
@media (max-width: 560px) { .cores4 { grid-template-columns: minmax(0, 1fr); } .mini span { font-size: 12px; } .core.hcc .hbody { grid-template-columns: minmax(0, 1fr); } }
/* One bus read and the host's XOR, byte by byte */
.xor { margin-top: 14px; padding: 10px 12px; background: var(--sunk); font: 500 14px/1.7 var(--mono); }
.xor .xh { font: 400 12px var(--sans); color: var(--muted); margin-bottom: 2px; }
.xor span { display: inline-block; width: 10ch; color: var(--muted); font-weight: 400; }
.xor b { display: inline-block; width: 3ch; font-weight: 500; }
.xor .res b { color: var(--live-ink); }
.out .lbl { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.out code { display: block; margin-top: 6px; font: 500 15px/1.6 var(--mono); word-break: break-all; min-height: 1.6em; }
/* Bytes wait as light dots while their core computes, dark dots once its block is ready,
   and turn to hex as the host reads their keystream word. The word on the bus now is orange. */
.out code .pend { color: var(--hair); }
.out code .rdy { color: var(--muted); }
.out code .now { color: var(--live-ink); background: var(--live-soft); }
.out code .blk { display: block; }
.out code .blk + .blk { margin-top: 6px; }
.out code .blk small { display: block; font: 400 11px var(--sans); color: var(--muted); }

/* Firmware model */
.scope { width: 100%; height: 220px; background: var(--sunk); border: 1px solid var(--hair); }
.pad { margin-top: 14px; display: flex; gap: 14px; align-items: center; }
.pad p { font-size: 14px; color: var(--muted); }

/* Scheduler model */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lanes { margin-top: 16px; border: 1px solid var(--hair); background: var(--sunk); }
.lanes svg { width: 100%; height: auto; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--muted); margin-top: 10px; }
.legend i { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; margin-right: 6px; }

.placeholder { padding: 56px 24px; text-align: center; color: var(--muted); }
.placeholder b { display: block; color: var(--ink); font-size: 18px; margin-bottom: 6px; }

/* ---------- Sections ---------- */
.section { padding: 80px 0; border-top: 1px solid var(--hair); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.section h2 { font: 700 40px/1.05 var(--display); letter-spacing: -0.02em; }
.section-head p { color: var(--muted); font-size: 15px; }

.rows { margin-top: 28px; border-top: 1.5px solid var(--ink); list-style: none; }
.row { border-bottom: 1px solid var(--hair); }
.row details > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.1fr) minmax(0, 1.35fr) 20px; gap: 24px; align-items: baseline; padding: 20px 0; }
.row details > summary::-webkit-details-marker { display: none; }
.row details > summary:hover { background: var(--sunk); }
.row h3 { font: 700 23px/1.15 var(--display); letter-spacing: -0.01em; }
.row .sub { font-size: 15px; color: var(--muted); margin-top: 4px; }
.row .org { font-size: 15px; }
.row .org span { display: block; color: var(--muted); font-size: 14px; }
.row .m { font: 600 17px/1.25 var(--display); text-align: right; text-wrap: balance; letter-spacing: -0.005em; }
.row .m small { display: block; font: 400 13px/1.35 var(--sans); color: var(--muted); margin-top: 4px; letter-spacing: 0; }
.row .chev { color: var(--muted); transition: transform .15s; text-align: right; }
.row details[open] .chev { transform: rotate(90deg); }
.row .detail { padding: 0 0 24px; display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 2.2fr); gap: 24px; }
.row .detail ul { padding-left: 18px; }
.row .detail li { margin-bottom: 6px; max-width: 70ch; }
.row .detail .side { font-size: 14px; color: var(--muted); }
.row .detail .side b { color: var(--ink); font-weight: 600; display: block; margin-bottom: 2px; }
.row .detail .side p + p { margin-top: 10px; }
.row .detail a.case { display: inline-block; margin-top: 12px; color: var(--ink); font-weight: 600; }
.rows .other { padding: 14px 0 6px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--hair); }

.skills { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.skills > div { background: var(--page); padding: 20px; }
.skills h3 { font: 600 15px var(--sans); margin-bottom: 8px; }
.skills p { font-size: 15px; color: var(--muted); }

.about { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr); gap: 40px; margin-top: 28px; align-items: start; }
.about img { width: 200px; height: 200px; object-fit: cover; }
.about p { max-width: 60ch; }
.about p + p { margin-top: 12px; }
.about .edu b { display: block; font-weight: 600; }
.about .edu p { color: var(--muted); font-size: 15px; }

.contact { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); }
.contact a { display: block; padding: 22px 0; border-bottom: 1px solid var(--hair); text-decoration: none; font: 700 26px var(--display); letter-spacing: -0.01em; }
.contact a span { display: block; font: 400 14px var(--sans); color: var(--muted); }
.contact a:hover { background: var(--sunk); }
.foot { padding: 32px 0 48px; color: var(--muted); font-size: 14px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- Case study pages ---------- */
.case-head { padding: 40px 0 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.crumb { font-size: 15px; color: var(--muted); text-decoration: none; }
.crumb:hover { color: var(--ink); }
.case-head h1 { font: 800 clamp(40px, 4.4vw, 68px)/1 var(--display); letter-spacing: -0.03em; margin-top: 18px; }
.case-head .lede { max-width: 40ch; }
.summary { margin-top: 28px; display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; font-size: 15px; border-top: 1px solid var(--hair); padding-top: 20px; }
.summary dt { color: var(--muted); }
.prose { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; padding: 48px 0; border-top: 1px solid var(--hair); }
.prose h2 { font: 700 26px/1.15 var(--display); letter-spacing: -0.01em; }
.prose .body { max-width: 72ch; }
.prose .body p + p, .prose .body p + ul, .prose .body ul + p { margin-top: 12px; }
.prose .body ul { padding-left: 18px; }
.prose .body li { margin-bottom: 6px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th { text-align: left; font-weight: 600; font-size: 13px; color: var(--muted); padding: 0 16px 10px 0; border-bottom: 1.5px solid var(--ink); }
.prose td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.prose td.v { font: 600 16px var(--mono); white-space: nowrap; }
.figure-slot { border: 1px dashed #b9bbb5; background: var(--sunk); padding: 40px 24px; text-align: center; color: var(--muted); font-size: 14px; }
.photo { border: 1px solid var(--hair); background: var(--panel); padding: 16px; max-width: 420px; }
.photo figcaption { font-size: 13px; color: var(--muted); margin-top: 10px; }
.todo { background: #fff3c4; border-left: 3px solid #c99a00; padding: 8px 12px; font-size: 14px; color: #5c4600; margin: 10px 0; }
.next { display: flex; justify-content: space-between; gap: 16px; padding: 32px 0; border-top: 1.5px solid var(--ink); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .case-head { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "lens" "panel"; grid-template-rows: auto; row-gap: 0; }
  .hero > .panel { margin-top: 20px; }
  .ask { margin-top: 28px; }
  .lens { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 0; }
  .lens button { border: 1.5px solid var(--hair); padding: 12px 14px; font-size: 16px; grid-template-columns: 1fr; }
  .lens button span { display: none; }
  .lens button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 4px 0 0 var(--live); padding-left: 16px; }
  .about { grid-template-columns: 160px minmax(0, 1fr); }
  .about img { width: 160px; height: 160px; }
  .about .edu { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :root { --pad: 20px; }
  .nav ul { gap: 18px; font-size: 14px; }
  .nav ul li.opt { display: none; }
  .hero { padding-top: 16px; }
  .lede { font-size: 18px; }
  .section { padding: 56px 0; }
  .section h2 { font-size: 32px; }
  .row details > summary { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .row .org, .row .m { grid-column: 1; grid-row: auto; }
  .row .m { text-align: left; font-size: 16px; padding-left: 10px; box-shadow: inset 2px 0 0 var(--hair); }
  .row .chev { display: none; }
  .row .detail { grid-template-columns: minmax(0, 1fr); }
  .skills { grid-template-columns: minmax(0, 1fr); }
  .about { grid-template-columns: minmax(0, 1fr); }
  .contact { grid-template-columns: minmax(0, 1fr); }
  .prose { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 36px 0; }
  .pad { flex-direction: column; align-items: stretch; }
  .readings b { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media print {
  .nav ul, .lens, .panel, .ask { display: none; }
  body { background: #fff; }
  .row details > summary { padding: 10px 0; }
}

/* ---------- Deep models ---------- */
.tabs { display: flex; border-bottom: 1px solid var(--hair); }
.tabs button { all: unset; cursor: pointer; padding: 12px 18px; font: 500 14px var(--sans); color: var(--muted); box-shadow: inset 0 -2px 0 transparent; }
.tabs button[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.bugs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip { all: unset; cursor: pointer; font: 500 13px var(--sans); padding: 7px 11px; border: 1px solid var(--hair); background: var(--panel); }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip:focus-visible { outline: 2px solid var(--live); outline-offset: 2px; }
.wave { margin-top: 14px; border: 1px solid var(--hair); background: var(--sunk); padding: 8px 8px 4px; }
.wave svg { width: 100%; height: auto; }
.props { list-style: none; margin-top: 12px; border-top: 1px solid var(--hair); }
.props li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 14px; }
.props .mark { font: 600 14px var(--mono); color: var(--muted); }
.props li.ok .mark { color: var(--ink); }
.props li.fail .mark, .props li.fail .why { color: var(--fail); }
.props li.fail .t { font-weight: 600; }
.props .why { display: block; font-weight: 400; font-size: 13px; }

.fw-top { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: start; }
.foot { width: 150px; height: auto; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.fw-side .lbl { font-size: 12px; color: var(--muted); }
.stance { font: 700 30px/1.1 var(--display); letter-spacing: -0.01em; margin-top: 2px; }
.classes { margin-top: 12px; display: grid; gap: 6px; }
.classes > div { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.classes > div.on { color: var(--ink); font-weight: 600; }
.classes i { display: block; height: 6px; background: #ecece8; }
.classes b { display: block; height: 100%; width: 100%; background: #b5b8b1; transform: scaleX(0); transform-origin: left; }
.classes > div.on b { background: var(--ink); }
.toggles { display: grid; gap: 6px; margin-top: 16px; }
.toggles .ctrl { font-size: 14px; padding: 9px 12px; }
.toggles .ctrl[aria-pressed="false"] { background: var(--panel); color: var(--ink); }
.toggles .ctrl[aria-pressed="false"]::after { content: " · off"; color: var(--muted); }
.hint { font-size: 13px; color: var(--muted); margin-top: 10px; }
.fw-scope { height: 132px; margin-top: 16px; }

.results { list-style: none; border-top: 1.5px solid var(--ink); }
.results li { display: grid; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.results { border-top: 0; }
.results li:first-child { padding-top: 0; }

@media (max-width: 760px) {
  .fw-top { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; }
  .foot { width: 110px; }
  .stance { font-size: 24px; }
  .classes > div { grid-template-columns: 78px 1fr; font-size: 12px; }
  .results li { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Category color ---------- */
[data-lens="hardware"], .t-hardware, .g-hardware, .s-hardware { --cat: var(--c-hardware); }
[data-lens="embedded"], .t-embedded, .g-embedded, .s-embedded { --cat: var(--c-embedded); }
[data-lens="systems"], .t-systems, .g-systems, .s-systems { --cat: var(--c-systems); }
[data-lens="software"], .t-software, .g-software, .s-software { --cat: var(--c-software); }
.hero > .panel[data-lens] { box-shadow: inset 0 0 0 1.5px var(--ink), inset 0 4px 0 var(--cat); }
.hero > .panel[data-lens] .panel-head { padding-top: 18px; }
.lens-hint { font-size: 14px; color: var(--muted); margin-top: 12px; max-width: 46ch; }

.tags { display: flex; gap: 6px; margin-bottom: 6px; }
.tag { font: 500 12px/1 var(--sans); color: var(--cat); background: color-mix(in srgb, var(--cat) 10%, transparent); padding: 4px 8px 4px 9px; clip-path: polygon(5px 0, 100% 0, 100% 100%, 0 100%, 0 5px); }
/* A sorted group reads like a net on a board: one trace in the category color, a via at each row.
   Both are drawn above the row's hover fill and share one center line (x = 8px).
   The via sits on the summary, so it stays centered on the card's header when the row is open. */
.row.match { position: relative; }
.row.match::before { content: ""; position: absolute; z-index: 1; left: 7px; top: 0; bottom: -1px; width: 2px; background: var(--cat-row); pointer-events: none; }
.row.match details > summary { position: relative; padding-left: 30px; padding-right: 4px; }
.row.match .detail { padding-left: 30px; padding-right: 4px; }
.row.match details > summary::after { content: ""; position: absolute; z-index: 2; left: 3px; top: 50%; width: 10px; height: 10px; margin-top: -5px; box-sizing: border-box; border-radius: 50%; background: var(--page); border: 2px solid var(--cat-row); pointer-events: none; }
.row.match.last::before { display: none; }
.row.match.last details > summary::before { content: ""; position: absolute; z-index: 1; left: 7px; top: 0; height: 50%; width: 2px; background: var(--cat-row); pointer-events: none; }
.rows .group { display: flex; justify-content: space-between; padding: 12px 14px; margin-top: -1px; font: 600 14px var(--sans); color: var(--cat, var(--muted)); background: color-mix(in srgb, var(--cat, var(--ink)) 7%, transparent); border-bottom: 1px solid var(--hair); }
.rows .group:not(:first-child) { margin-top: 18px; border-top: 1px solid var(--hair); }

.sorter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 18px; }
.sorter-label { font-size: 14px; color: var(--muted); margin-right: 4px; }
.sort { all: unset; cursor: pointer; font: 500 14px var(--sans); padding: 8px 12px; border: 1px solid var(--hair); background: var(--panel); color: var(--ink); }
.sort span { color: var(--muted); font-family: var(--mono); font-size: 12px; margin-left: 4px; }
.sort:hover { border-color: var(--cat, var(--ink)); }
.sort[aria-pressed="true"] { background: var(--cat, var(--ink)); border-color: var(--cat, var(--ink)); color: #fff; }
.sort[aria-pressed="true"] span { color: rgba(255,255,255,.75); }
.sort:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.results li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.results b { font: 700 21px/1.2 var(--display); letter-spacing: -0.01em; }
.results span { font-size: 15px; color: var(--ink); }
.results small { font-size: 13px; color: var(--cat, var(--muted)); font-weight: 500; }

/* Below-the-fold sections skip rendering work until they are near the viewport */


/* Company first: logo tile, company name, then the role */
.co { display: flex; gap: 14px; align-items: center; }
.logo { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px); font: 600 13px var(--mono); color: var(--muted); }
.logo img { width: 30px; height: 30px; object-fit: contain; }
.logo img.wide { width: 38px; }
.co .sub { font-size: 16px; color: var(--ink); margin-top: 3px; }
@media (max-width: 760px) { .logo { width: 38px; height: 38px; } .logo img { width: 26px; height: 26px; } .logo img.wide { width: 34px; } }