/* Assurance Gate. Archival off-white paper (#eeeee8) as on every other
   page of the site, ink and rules warmed to match, colour for status only. */

:root {
  --ink: #171712;
  --ink-2: #5a5a52;
  --ink-3: #7a7a70;
  --paper: #eeeee8;
  --rule: #d7d7cd;
  --rule-2: #e3e3d8;
  --pass: #1a7f37;
  --fail: #b3261e;
  --warn: #8a5a00;
  --grey: #5f5f57;
  --gutter: 16px;
  --sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Dark scheme, picked by /assets/theme.js. */
:root[data-theme="dark"] {
  --ink: #ecece4;
  --ink-2: #a3a399;
  --ink-3: #7d7d74;
  --paper: #0d0d0b;
  --rule: #26261f;
  --rule-2: #1b1b16;
  --pass: #4cc46a;
  --fail: #f0685c;
  --warn: #e0a53a;
  --grey: #8a8a80;
  color-scheme: dark;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: break-word;
}

/* Same frame as every other page of the site. */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: clamp(1.25rem, 5vw, 5rem);
  padding-right: clamp(1.25rem, 5vw, 5rem);
}
@media (min-width: 1800px) and (min-height: 900px) {
  .wrap { max-width: 1680px; }
}

a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--paper);
  padding: 8px 12px;
  z-index: 10;
}
.skip:focus { left: 8px; }

/* Header and navigation ---------------------------------------------------- */

.top { border-bottom: 1px solid var(--rule); }
.top .wrap { padding-top: 12px; padding-bottom: 8px; }

.brand {
  margin: 0 0 8px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8125rem;
}

.nav {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
}
.nav a { text-decoration: none; color: var(--ink-2); padding: 4px 0; display: inline-block; }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); }

main { padding-top: 20px; padding-bottom: 48px; outline: none; min-height: 100vh; }

.foot { border-top: 1px solid var(--rule); color: var(--ink-3); font-size: 0.8125rem; }
.foot .wrap { padding-top: 12px; padding-bottom: 24px; }

/* Type --------------------------------------------------------------------- */

h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 12px; line-height: 1.25; }
h2 { font-size: 1.0625rem; font-weight: 600; margin: 28px 0 8px; }
h3 { font-size: 0.9375rem; font-weight: 600; margin: 18px 0 6px; }
p { margin: 0 0 12px; max-width: 62ch; }
ul, ol { max-width: 62ch; }

.headline {
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 600;
  margin: 12px 0 16px;
  max-width: 22ch;
}
@media (min-width: 40rem) { .headline { font-size: 2.25rem; max-width: 26ch; } }

.lede { font-size: 1rem; color: var(--ink-2); }
.small { font-size: 0.8125rem; color: var(--ink-2); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.875em; }
.owner { color: var(--ink-2); font-style: italic; }

/* Banners and ribbons ------------------------------------------------------ */

.ribbon, .banner, .note {
  border: 1px solid var(--rule);
  padding: 10px 12px;
  margin: 0 0 12px;
  font-size: 0.875rem;
  max-width: 62ch;
}
.ribbon { border-left: 4px solid var(--grey); color: var(--ink-2); }
.banner { border-left: 4px solid var(--ink); }
.note.warn { border-left: 4px solid var(--warn); }
.note.bad { border-left: 4px solid var(--fail); }

/* Buttons ------------------------------------------------------------------ */

button {
  font: inherit;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 10px 16px;
  cursor: pointer;
  text-align: left;
}
button:hover { background: var(--rule-2); }

.btn-main { font-weight: 600; margin-bottom: 20px; }

.chip {
  border: 1px solid var(--rule);
  padding: 4px 10px;
  font-size: 0.8125rem;
  margin: 0 6px 6px 0;
}
.chip[aria-pressed="true"] { border-color: var(--ink); font-weight: 600; }

.toolbar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0; margin-bottom: 8px; }
.filter-label { min-width: 4.5rem; margin-right: 8px; }
.toolbar input[type="search"] {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  width: 100%;
  max-width: 22rem;
  margin-bottom: 8px;
}

/* Status colour ------------------------------------------------------------ */

.st { font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.02em; }
.st-pass { color: var(--pass); }
.st-fail { color: var(--fail); }
.st-conditional, .st-sparse { color: var(--warn); }
.st-not_applicable, .st-info { color: var(--grey); }

.struck { text-decoration: line-through; color: var(--fail); }

/* Tables ------------------------------------------------------------------- */

.scroll { overflow-x: auto; margin: 0 0 12px; }

table { border-collapse: collapse; width: 100%; font-size: 0.875rem; }
caption { text-align: left; font-size: 0.8125rem; color: var(--ink-2); padding-bottom: 6px; }
th, td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
th { font-weight: 600; border-bottom: 1px solid var(--rule); white-space: nowrap; }
tbody tr:hover { background: var(--rule-2); }
tbody tr.focus { box-shadow: inset 3px 0 0 var(--ink); background: var(--rule-2); }
td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; }
td.n, th.n { white-space: nowrap; }

.row-btn {
  border: 0;
  padding: 0;
  background: none;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.row-btn:hover { background: none; }

details { border-bottom: 1px solid var(--rule-2); padding: 6px 0; }
summary { cursor: pointer; font-size: 0.875rem; }
details[open] summary { font-weight: 600; }

/* Cards -------------------------------------------------------------------- */

.cards { display: grid; gap: 12px; grid-template-columns: 1fr; padding: 0; margin: 12px 0; list-style: none; }
@media (min-width: 40rem) { .cards { grid-template-columns: 1fr 1fr; } }

.card { border: 1px solid var(--rule); padding: 12px; }
.card h3 { margin-top: 0; font-family: var(--mono); font-size: 0.875rem; }
.card img { width: 100%; height: auto; display: block; border: 1px solid var(--rule-2); margin-bottom: 8px; }
.card > dl, .card dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0 0 8px; font-size: 0.8125rem; }
.card dt { color: var(--ink-2); }
.card dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; }

.example { border: 1px solid var(--ink); padding: 12px; margin: 12px 0; max-width: 62ch; }

/* Coverage matrix ---------------------------------------------------------- */

.bins { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.bin {
  border: 1px solid var(--rule);
  padding: 6px 8px;
  min-width: 5.5rem;
  font-size: 0.75rem;
}
.bin .n { display: block; font-family: var(--mono); font-size: 1rem; font-weight: 600; }
.bin.empty { border-color: var(--fail); color: var(--fail); }
.bin.sparse { border-color: var(--warn); color: var(--warn); }
.bin a { text-decoration: none; }

/* Assurance case tree ------------------------------------------------------ */

.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--rule); }
.tree li { margin: 8px 0; }
.node { max-width: 62ch; }
summary > .node { display: inline-block; vertical-align: top; max-width: calc(100% - 1.5rem); }
.tree summary { list-style-position: outside; }
.tag {
  display: inline-block;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  padding: 1px 6px;
  margin-right: 8px;
  color: var(--ink-2);
}
.node.defeater { border: 1px dashed var(--ink-3); padding: 8px 10px; }
.node.current { box-shadow: inset 3px 0 0 var(--ink); padding-left: 10px; }

/* Utility ------------------------------------------------------------------ */

.stack > * + * { margin-top: 4px; }
.hide { display: none; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Typeface ----------------------------------------------------------------- */

@font-face {
  font-family: "Inter Tight";
  src: url("assets/fonts/InterTight-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Track switch ------------------------------------------------------------- */

.trackbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.seg { display: inline-flex; border: 1px solid var(--ink); }
.seg button {
  border: 0;
  border-right: 1px solid var(--ink);
  padding: 8px 14px;
  font-size: 0.875rem;
  text-align: center;
}
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
}
.seg button[aria-pressed="true"]:hover { background: #000000; }
.trackbar .desc { margin: 0; font-size: 0.8125rem; color: var(--ink-2); max-width: 30ch; }

/* Decision opening --------------------------------------------------------- */

.intro { border-bottom: 1px solid var(--rule); padding-bottom: 18px; margin-bottom: 18px; }
.intro h2 { margin-top: 0; }
.intro-grid { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 46rem) {
  .intro-grid { grid-template-columns: 1fr minmax(16rem, 22rem); gap: 28px; }
}
.intro-lines { margin: 0; padding: 0; list-style: none; max-width: 52ch; font-size: 0.9375rem; }
.intro-lines li { padding: 3px 0 3px 12px; border-left: 1px solid var(--rule); }
.how-to-read { margin: 14px 0 0; font-size: 0.8125rem; color: var(--ink-2); }

/* Isometric schematic, drawn in the hand of the project cards --------------- */

.schem {
  display: block;
  width: 100%;
  height: auto;
  max-width: 20rem;
  color: var(--ink-2);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linejoin: round;
  stroke-linecap: round;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
}
.schem .hid { stroke-dasharray: 2 3; opacity: 0.5; }
.schem .hair { opacity: 0.35; }
.schem .link { stroke-dasharray: 3 3; opacity: 0.7; }
.schem .bar { stroke-width: 2; opacity: 0.6; }
.schem .hot, .schem .bar.hot { stroke: var(--fail); opacity: 1; }
.schem .lead { stroke-width: 1.6; }
.schem text {
  fill: var(--ink-2);
  stroke: none;
  text-transform: uppercase;
}

/* Gate figures ------------------------------------------------------------- */

.gfig { display: block; width: 100%; height: auto; max-width: 34rem; }
.gfig .axis { stroke: var(--rule); stroke-width: 1; }
.gfig .zone { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 3; }
.gfig .iv { stroke-width: 6; stroke-linecap: butt; }
.gfig .tick { stroke-width: 2; }
.gfig .thr { stroke: var(--ink); stroke-width: 2; }
.gfig text { fill: var(--ink-2); stroke: none; font-family: var(--mono); font-size: 9px; }
.gfig .s-pass { stroke: var(--pass); }
.gfig .s-fail { stroke: var(--fail); }
.gfig .s-conditional { stroke: var(--warn); }
.gfig .s-not_applicable { stroke: var(--grey); }
.gfig .dot-pass { fill: var(--pass); stroke: none; }
.gfig .dot-fail { fill: var(--fail); stroke: none; }
.gfig .dot-conditional { fill: var(--warn); stroke: none; }
.gfig .dot-not_applicable { fill: var(--grey); stroke: none; }

tr.figrow td { padding-top: 0; padding-bottom: 14px; }
tbody tr.figrow:hover { background: none; }
.figline { margin: 4px 0 0; font-size: 0.8125rem; color: var(--ink-2); }
.figlegend { font-size: 0.8125rem; color: var(--ink-2); max-width: 62ch; }

/* Coverage heatmap --------------------------------------------------------- */

.grid { border: 1px solid var(--rule); }
.grid th, .grid td { border: 1px solid var(--rule-2); padding: 8px 10px; }
.grid thead th { border-bottom: 1px solid var(--rule); }
.grid tbody tr:hover { background: none; }
.grid th[scope="row"] { font-weight: 400; color: var(--ink-2); font-size: 0.8125rem; min-width: 9rem; }
.cell { min-width: 6.5rem; }
.cell-n { display: block; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1rem; font-weight: 600; }
.cell-range { display: block; font-size: 0.75rem; color: var(--ink-2); }
.cell-state { display: block; font-size: 0.75rem; font-weight: 600; }
.cell a { text-decoration: none; }
.cell a:hover .cell-n { text-decoration: underline; }
.cell.ok { background: #e6efe7; box-shadow: inset 3px 0 0 var(--pass); }
.cell.sparse { background: #efe9da; box-shadow: inset 3px 0 0 var(--warn); }
.cell.empty { background: #efe4e2; box-shadow: inset 3px 0 0 var(--fail); }

.hbar { display: block; width: 100%; height: auto; max-width: 18rem; }
.hbar rect.fill { fill: var(--ink); }
.hbar rect.bg { fill: var(--rule-2); }

/* Evidence cards ----------------------------------------------------------- */

.pill {
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.mini { display: block; width: 100%; height: auto; margin: 0 0 10px; }
.mini .axis { stroke: var(--rule); stroke-width: 1; }
.mini .thr { stroke: var(--ink); stroke-width: 1.5; }
.mini text { fill: var(--ink-2); stroke: none; font-family: var(--mono); font-size: 9px; }
.mini rect.bg { fill: var(--rule-2); stroke: none; }
.mini rect.bar-pass { fill: var(--pass); stroke: none; }
.mini rect.bar-fail { fill: var(--fail); stroke: none; }
.more { margin: 8px 0 0; }

/* Assurance case tree ------------------------------------------------------ */

.node { padding-left: 10px; box-shadow: inset 2px 0 0 var(--rule-2); }
.node.goal, .node.strategy { box-shadow: inset 2px 0 0 var(--ink); }
.node.claim.s-pass { box-shadow: inset 3px 0 0 var(--pass); }
.node.claim.s-fail { box-shadow: inset 3px 0 0 var(--fail); }
.node.claim.s-conditional { box-shadow: inset 3px 0 0 var(--warn); }
.node.claim.s-not_applicable { box-shadow: inset 3px 0 0 var(--grey); }
.node.defeater { border: 1px dashed var(--ink-3); padding: 8px 10px; box-shadow: none; }
.tag { border-radius: 999px; }
.tree li { margin: 10px 0; }
.node.current { box-shadow: inset 3px 0 0 var(--ink); }

.grid th[scope="row"] { width: 34%; }
.figrow .gfig { margin-top: 2px; }

/* Figures inside a scrolling table stay inside the viewport. */
.gfig, .figline { max-width: min(34rem, calc(100vw - 2 * var(--gutter))); }
.grid .barcell { width: 40%; min-width: 11rem; }
.grid th.hazname { width: auto; max-width: 22rem; overflow-wrap: anywhere; }

@media (max-width: 40rem) {
  .grid th[scope="row"] { min-width: 7rem; font-size: 0.75rem; }
  .cell { min-width: 5.5rem; }
}

/* Case study sections -------------------------------------------------------
   Mounted around the dashboard on the published page. The markup keeps the
   class names of the website so the two stay recognisable to each other,
   and the tokens here are the dashboard's own. */

.cs { margin-top: 24px; }
.cs:first-of-type { margin-top: 0; }

.crumbs {
  font-size: 0.78rem;
  line-height: 1.45;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 700;
  /* same top offset as the home page frame (THE FRAME RULE below) */
  margin: clamp(24px, 4.5vh, 56px) 0 22px;
}
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs .sep { padding: 0 0.6rem; }

h1.title {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 10px;
}
@media (min-width: 40rem) { h1.title { font-size: 2.6rem; } }

p.lede {
  font-size: 1.0625rem;
  color: var(--ink-2);
  max-width: 62ch;
  margin: 0 0 4px;
}

hr.rule { border: 0; border-bottom: 1px solid var(--rule); margin: 24px 0; }

.doc-section { margin-top: 28px; }

.doc-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 8px;
}

.doc-heading {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 0 0 10px;
}

.doc-body { font-size: 1rem; line-height: 1.55; max-width: 62ch; margin: 0; }
.doc-body + .doc-body { margin-top: 12px; }

.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 20px;
}
.stat-strip .cell { background: var(--paper); padding: 14px 16px; }
.stat-strip .k {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 700;
}
.stat-strip .v {
  margin: 5px 0 0;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.criteria-list { list-style: none; padding: 0; margin: 12px 0 0; max-width: 62ch; }
.criteria-list li {
  position: relative;
  padding: 9px 0 9px 28px;
  border-bottom: 1px solid var(--rule-2);
  font-size: 0.95rem;
  line-height: 1.45;
}
.criteria-list li:last-child { border-bottom: 0; }
.criteria-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 12px;
  height: 12px;
  border: 1px solid var(--ink);
}

.metrics-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.9375rem; }
.metrics-table th, .metrics-table td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--rule-2);
}
.metrics-table th {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 700;
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
.metrics-table td.k { font-weight: 600; width: 20%; }
.metrics-table td.v {
  font-family: var(--mono);
  font-size: 0.8125rem;
  width: 22%;
}
.metrics-table td.note { color: var(--ink-2); font-size: 0.9rem; }

.gaps {
  margin-top: 10px;
  padding: 12px 14px;
  border-left: 3px solid var(--ink-3);
  border-top: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 62ch;
}
.gaps b { font-weight: 600; }
.gaps ul { margin: 6px 0 0 1.2rem; padding: 0; }
.gaps li { margin-bottom: 4px; }

.sitefooter {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 0.78rem;
  color: var(--ink-2);
  display: flex;
  /* The website centres this line on every page, so the copyright and the
     way back never jump position when a reader arrives here. */
  justify-content: center;
  align-items: baseline;
  text-align: center;
  flex-wrap: wrap;
  gap: 6px 24px;
}
.sitefooter a { color: var(--ink-2); }
.sitefooter a:hover { color: var(--ink); }

/* On the published page the dashboard header is a band inside the document,
   not the top of the page. */
.has-casestudy .top { border-top: 1px solid var(--rule); margin-top: 28px; }
/* min-height on main keeps the footer down on the standalone build. On the
   published page the case study follows, so it would leave a gap. */
.has-casestudy main { padding-bottom: 32px; min-height: 0; }


/* ---- Portfolio explainability primitives ----
   Ported from /ai-builder-portfolio/assets/portfolio.css so the case
   study sections render with the same components as the other eight
   project pages. This page stays self contained and links no external
   stylesheet, so the rules are copied rather than imported. Tokens are
   mapped to this file's names: --bg becomes --paper, --sec becomes
   --ink-2. Keep in sync when the shared sheet changes. */
/* ---- Explainability layer (2026-09-20) ----

   Five shared primitives so every case study reads as one series:
   .glance   three plain-language boxes (What / Why it matters / How built)
   .arch     solution architecture: four lanes, nodes, third-party dashed,
             the project's own contribution carries the working blue
   .build    build profile strip, six measured cells, mono values
   .diff     difficulty: five axes, five cells each, one sentence
   .future   the five-year paragraph, hairlines top and bottom, no fill
   Same tokens as everything above: one ink, one grey, one rule, one blue. */

.glance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 1.25rem;
}
.glance .cell { background: var(--paper); padding: 1.1rem 1.2rem 1.25rem; }
.glance .k {
  font-size: var(--label); letter-spacing: var(--track);
  text-transform: uppercase; color: var(--ink-2); font-weight: 700;
  margin-bottom: 0.55rem;
}
.glance p.b { font-size: 0.95rem; line-height: 1.5; color: var(--ink); }

.arch {
  margin-top: 1.25rem;
  border: 1px solid var(--rule);
}
.arch .lane {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  border-bottom: 1px solid var(--rule);
}
.arch .lane:last-child { border-bottom: 0; }
.arch .lane-k {
  padding: 0.9rem 1rem;
  border-right: 1px solid var(--rule);
  font-size: var(--label); letter-spacing: var(--track);
  text-transform: uppercase; color: var(--ink-2); font-weight: 700;
  line-height: 1.35;
}
.arch .lane-k small {
  display: block; margin-top: 0.3rem;
  font-weight: 500; letter-spacing: 0.04em; text-transform: none;
  font-size: 0.7rem; color: var(--ink-2);
}
.arch .nodes {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding: 0.8rem 1rem;
  align-content: flex-start;
}
.arch .node {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  line-height: 1.3;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: var(--paper);
  max-width: 16rem;
}
.arch .node small {
  display: block; font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.72rem; letter-spacing: 0; color: var(--ink-2); margin-top: 0.15rem;
}
.arch .node.ext { border-style: dashed; border-color: var(--ink-2); color: var(--ink-2); }
.arch .node.own { border-color: var(--ink); box-shadow: inset 3px 0 0 #1c54dc; }
.arch .lane.own-lane .lane-k { color: var(--ink); }
.arch .flow {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.3rem 1rem 0.3rem calc(9.5rem + 1rem);
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
}
.arch .flow::before { content: "\2193"; font-size: 0.9rem; color: var(--ink); }
.arch-cap {
  margin-top: 0.6rem; font-size: 0.78rem; color: var(--ink-2); line-height: 1.45;
}
.arch-legend {
  display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 0.6rem;
  font-size: 0.72rem; color: var(--ink-2); letter-spacing: 0.04em;
}
.arch-legend span::before {
  content: ""; display: inline-block; width: 0.9rem; height: 0.6rem;
  vertical-align: -0.05rem; margin-right: 0.4rem; border: 1px solid var(--ink-2);
}
.arch-legend .l-ext::before { border-style: dashed; }
.arch-legend .l-own::before { border-color: var(--ink); box-shadow: inset 2px 0 0 #1c54dc; }

.build {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  margin-top: 1.25rem;
}
.build .cell { background: var(--paper); padding: 0.8rem 0.9rem 0.9rem; }
.build .k {
  font-size: var(--label); letter-spacing: var(--track);
  text-transform: uppercase; color: var(--ink-2); font-weight: 700;
}
.build .v {
  font-family: var(--mono); font-size: 1.15rem; font-weight: 500;
  margin-top: 0.3rem; color: var(--ink);
}
.build .v small { font-size: 0.72rem; color: var(--ink-2); margin-left: 0.25rem; }
.build-note { margin-top: 0.6rem; font-size: 0.8rem; color: var(--ink-2); line-height: 1.45; }

.diff { margin-top: 1.25rem; border-top: 1px solid var(--ink); }
.diff .row {
  display: grid;
  grid-template-columns: 11rem 6.5rem minmax(0, 1fr);
  gap: 1rem; align-items: baseline;
  padding: 0.6rem 0; border-bottom: 1px solid var(--rule);
}
.diff .axis { font-size: 0.9rem; font-weight: 600; }
.diff .cells { display: flex; gap: 0.25rem; align-self: center; }
.diff .cells i {
  display: block; width: 1rem; height: 0.55rem;
  border: 1px solid var(--ink);
}
.diff .cells i.on { background: var(--ink); }
.diff .why { font-size: 0.88rem; color: var(--ink-2); line-height: 1.45; }
.diff .sum {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
  padding: 0.7rem 0 0; font-size: var(--label); letter-spacing: var(--track);
  text-transform: uppercase; color: var(--ink-2); font-weight: 700;
}
.diff .sum b { color: var(--ink); }

.future {
  margin-top: 1.25rem; padding: 1rem 0;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  max-width: var(--measure);
}
.future .k {
  font-size: var(--label); letter-spacing: var(--track);
  text-transform: uppercase; color: var(--ink-2); font-weight: 700;
  margin-bottom: 0.5rem;
}
.future p { font-size: 0.98rem; line-height: 1.5; }

.status-line {
  display: inline-block; margin-top: 0.6rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-2);
  border: 1px solid var(--rule); padding: 0.3rem 0.55rem;
}

@media (max-width: 860px) {
  .glance { grid-template-columns: 1fr; }
  .build { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .arch .lane { grid-template-columns: 1fr; }
  .arch .lane-k { border-right: 0; border-bottom: 1px solid var(--rule); padding-bottom: 0.6rem; }
  .arch .flow { padding-left: 1rem; }
  .diff .row { grid-template-columns: 1fr; gap: 0.3rem; }
}
@media (max-width: 480px) {
  .build { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Inline figure pairs: house-style SVGs drawn on the page, no rasters. */
.figs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem; margin-top: 1.25rem;
}
.figs figure { margin: 0; border: 1px solid var(--rule); padding: 1rem; }
.figs svg {
  width: 100%; height: auto; display: block;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em;
  color: var(--ink);
}
.figs svg .sec { fill: var(--ink-2); }
.figs svg .hot { stroke: #1c54dc; }
.figs svg .hot-t { fill: #1c54dc; }
.figs figcaption { margin-top: 0.6rem; font-size: 0.78rem; color: var(--ink-2); line-height: 1.45; }

/* Result stat strip, shared (was page-local on the gate page). */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  margin-top: 1.5rem;
}
.stat-strip .cell { background: var(--paper); padding: 0.9rem 1.1rem; }
.stat-strip .k {
  font-size: var(--label); letter-spacing: var(--track);
  text-transform: uppercase; color: var(--ink-2); font-weight: 700;
}
.stat-strip .v { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.01em; margin-top: 0.3rem; }

/* Wide tables scroll inside their own box instead of the page (2026-09-20) */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap .metrics-table { min-width: 34rem; }

/* Large screens: one step larger, and running text uses more of the frame.
   Kept last so it wins over the measures above. */
@media (min-width: 1800px) and (min-height: 900px) {
  html { font-size: 112.5%; }
  p, ul, ol, .lede, .headline { max-width: 64rem; }
}

/* Case study grid, same as every other case study: label and heading in a
   narrow left column, running text in a wide right column, panels full width. */
@media (min-width: 1000px) {
  .doc-section { margin-top: clamp(36px, 5vh, 56px); }
  .doc-section::after { content: ""; display: block; clear: both; }
  .doc-section > .doc-label, .doc-section > .doc-heading { float: left; clear: left; width: 30%; padding-right: 2.5rem; }
  .doc-section > .doc-heading { font-size: 1.3rem; }
  .doc-section > .doc-body, .doc-section > ul, .doc-section > ol { margin-left: 33.5%; max-width: none; }
  .doc-section > :not(.doc-label):not(.doc-heading):not(.doc-body):not(ul):not(ol) { clear: both; }
}

/* THE FRAME RULE. The top line (BRKMYR and its breadcrumb) and the page frame
   must sit exactly where the home page puts them, on every page and at every
   width. Type may scale on large screens, so the frame and the crumbs are
   pinned in px here: never express them in rem inside a scaled root. */
@media (min-width: 1800px) and (min-height: 900px) {
  .page, .page.wide, .wrap { padding-left: clamp(20px, 5vw, 80px); padding-right: clamp(20px, 5vw, 80px); }
  .page, .page.wide { padding-top: clamp(24px, 4.5vh, 56px); }
  .crumbs { font-size: 12.48px; letter-spacing: 0.16em; }
  .crumbs .sep { padding: 0 9.6px; }
}