/* ========================================================================== King Nuggets — Lab Static re-implementation of the approved Lab design. Scope: every rule in this file is scoped under `.lab`, which sits on the element of the five Lab pages. The parent site's tokens.css and kingnuggets.css are not loaded on those pages and are not modified by this file. Nothing here can reach the light-themed parent site. The Lab is dark only. There is no theme toggle and no light token block. Reserved colour: a metallic yellow is reserved in the design system for cycle-low events and Bressert bands on future charts. It is deliberately NOT declared here — the Lab contains no charts, and the token must not be reachable from Lab markup until one exists. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Typefaces — self-hosted, zero third-party requests. Sentient — masthead, page headings, pull quotes. Never sets a number. Switzer — body prose, UI, and every numeral (tabular lining figures). DM Mono — instrument furniture: labels, timestamps, state glyphs, section identifiers, terminal output. Never sets a sentence of prose. DM Mono ships as latin / latin-ext splits with the unicode-range values carried over unchanged from the approved bundle. Weight 300 was declared in the bundle but no such file exists in assets/fonts/; 400 and 500 only. -------------------------------------------------------------------------- */ @font-face { font-family: 'Sentient'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Sentient-Regular.woff2') format('woff2'); } @font-face { font-family: 'Sentient'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Sentient-Medium.woff2') format('woff2'); } @font-face { font-family: 'Switzer'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Switzer-Regular.woff2') format('woff2'); } @font-face { font-family: 'Switzer'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Switzer-Medium.woff2') format('woff2'); } @font-face { font-family: 'Switzer'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Switzer-Semibold.woff2') format('woff2'); } /* latin-ext */ @font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/DMMono-Regular-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/DMMono-Regular-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/DMMono-Medium-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/DMMono-Medium-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* -------------------------------------------------------------------------- 2. Tokens — transcribed verbatim from the approved bundle's dark block. Colour is not a carrier of meaning here. Direction is never encoded in hue, and state on the status board is set by glyph, weight and indent alone. Cyan is the only accent, and it marks interface affordances: links, the active nav item, focus rings, evidence rules. -------------------------------------------------------------------------- */ .lab { --kn-ground: #131415; --kn-panel: #191b1c; --kn-well: #0e0f10; --kn-text: #eae7e2; --kn-muted: #9ea1a4; --kn-faint: #8a8e91; --kn-nav-num: #7f8386; --kn-rule: rgba(234,231,226,0.14); --kn-rule-strong: rgba(234,231,226,0.32); --kn-accent: #4fd0e2; --kn-accent-dim: rgba(79,208,226,0.28); --kn-serif: 'Sentient', Georgia, 'Times New Roman', serif; --kn-sans: 'Switzer', ui-sans-serif, system-ui, sans-serif; --kn-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Layout constants. Every spacing value in this file is a multiple of 4px so that rules, labels and baselines snap to a common grid. */ --kn-shell: 1240px; --kn-gutter: 32px; --kn-head-h: 76px; color-scheme: dark; } /* -------------------------------------------------------------------------- 3. Base -------------------------------------------------------------------------- */ .lab, .lab body { margin: 0; padding: 0; background: var(--kn-ground); color: var(--kn-text); } .lab *, .lab *::before, .lab *::after { box-sizing: border-box; } .lab body { font-family: var(--kn-sans); font-size: 16px; line-height: 1.6; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; -webkit-font-smoothing: antialiased; min-height: 100vh; } .lab a { color: var(--kn-accent); text-decoration: none; } .lab a:hover { color: var(--kn-text); text-decoration: underline; text-underline-offset: 3px; } .lab h1, .lab h2, .lab h3 { font-weight: 400; } .lab p { text-wrap: pretty; } /* Tabular lining figures on every number that sits in a column. */ .lab table, .lab .mono, .lab .term__body { font-variant-numeric: tabular-nums lining-nums; } /* -------------------------------------------------------------------------- 4. Accessibility furniture -------------------------------------------------------------------------- */ .lab .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .lab .skip-link { position: absolute; left: -9999px; top: 0; z-index: 40; background: var(--kn-panel); color: var(--kn-accent); border: 1px solid var(--kn-accent-dim); padding: 12px 16px; font-family: var(--kn-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .lab .skip-link:focus { left: 16px; top: 16px; } /* One visible focus treatment, everywhere, in the single accent. */ .lab a:focus-visible, .lab button:focus-visible, .lab [tabindex]:focus-visible { outline: 2px solid var(--kn-accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .lab *, .lab *::before, .lab *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 5. Shell, masthead, section nav, footer — shared by all five pages -------------------------------------------------------------------------- */ .shell { max-width: var(--kn-shell); margin: 0 auto; padding-left: var(--kn-gutter); padding-right: var(--kn-gutter); } .site-head { border-bottom: 1px solid var(--kn-rule-strong); background: var(--kn-ground); position: sticky; top: 0; z-index: 20; } .site-head__inner { display: flex; align-items: stretch; justify-content: space-between; gap: 24px; min-height: var(--kn-head-h); } .wordmark { display: flex; align-items: center; gap: 12px; } .wordmark__name { font-family: var(--kn-serif); font-weight: 500; font-size: 25px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kn-text); } .wordmark__bar { width: 1px; align-self: stretch; background: var(--kn-rule); margin: 16px 0; } .wordmark__tag { font-family: var(--kn-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--kn-accent); border: 1px solid var(--kn-accent-dim); padding: 4px 8px; } .site-head__aside { display: flex; align-items: center; gap: 28px; } .lab a.site-head__home { font-family: var(--kn-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kn-muted); } .lab a.site-head__home:hover { color: var(--kn-text); } /* Section nav. Real anchors to real URLs — never JavaScript state. */ .secnav { border-bottom: 1px solid var(--kn-rule); background: var(--kn-ground); position: sticky; top: var(--kn-head-h); z-index: 19; } .secnav__inner { display: flex; gap: 0; overflow-x: auto; } .secnav a { display: flex; gap: 8px; align-items: baseline; padding: 12px 20px; border-right: 1px solid var(--kn-rule); font-family: var(--kn-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; color: var(--kn-muted); } .secnav a:hover { color: var(--kn-text); text-decoration: none; } .secnav a[aria-current="page"] { color: var(--kn-accent); } .secnav__num { color: var(--kn-nav-num); } .site-foot { border-top: 1px solid var(--kn-rule-strong); } .site-foot__inner { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: baseline; padding-top: 28px; padding-bottom: 56px; } .site-foot__mark { display: flex; gap: 12px; align-items: baseline; } .site-foot__name { font-family: var(--kn-serif); font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kn-muted); } .site-foot__sub, .site-foot__meta { font-family: var(--kn-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kn-faint); } .site-foot__meta { display: flex; gap: 24px; flex-wrap: wrap; } .site-foot__meta a { color: var(--kn-muted); } .page-main { padding-bottom: 120px; } /* -------------------------------------------------------------------------- 6. Shared instrument furniture -------------------------------------------------------------------------- */ /* § 0n — Section identifier above each page heading. */ .sect-id { font-family: var(--kn-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kn-faint); margin-bottom: 28px; } /* Micro-label above a value in a side rail. Smaller caps, tighter tracking. */ .rail__label { font-family: var(--kn-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kn-faint); margin-bottom: 4px; } .rail__value { font-family: var(--kn-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--kn-text); } .rail__value--wrap { line-height: 1.6; } .rail__value--state { letter-spacing: 0.12em; text-transform: uppercase; } .rail { border-left: 1px solid var(--kn-rule); padding-left: 28px; display: flex; flex-direction: column; gap: 20px; align-self: start; } /* Split header: prose column plus a narrow instrument rail. */ .split-head { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; padding: 72px 0 64px; border-bottom: 1px solid var(--kn-rule-strong); } .split-head--tight { padding-bottom: 44px; } .split-head__prose { max-width: 60ch; } .page-title { font-family: var(--kn-serif); font-weight: 400; font-size: 44px; line-height: 1.16; letter-spacing: -0.01em; margin: 0 0 24px; text-wrap: balance; } .lede { margin: 0 0 16px; font-size: 17px; line-height: 1.65; color: var(--kn-muted); } .lede:last-child { margin-bottom: 0; } /* Outlined mono action, used for the few cross-links that carry weight. */ .btn { display: inline-block; border: 1px solid var(--kn-accent-dim); padding: 12px 20px; font-family: var(--kn-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; } .btn:hover { text-decoration: none; border-color: var(--kn-accent); } /* Secondary action. Selector carries a tag so it outranks the base `.lab a` colour; the same applies to the entry rows below. */ .lab a.btn--quiet { border-color: var(--kn-rule); color: var(--kn-muted); } .lab a.btn--quiet:hover { color: var(--kn-text); border-color: var(--kn-rule-strong); } .mono-note { font-family: var(--kn-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kn-faint); } /* -------------------------------------------------------------------------- 7. § 01 — Index -------------------------------------------------------------------------- */ .entries { padding: 56px 0 0; } .entries__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 8px; } .entries__title { font-family: var(--kn-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kn-muted); margin: 0; } .lab a.entry, .entry { display: grid; grid-template-columns: 104px minmax(0, 1fr) 120px; gap: 32px; padding: 24px 0; border-top: 1px solid var(--kn-rule); color: inherit; align-items: baseline; } .entry:hover { text-decoration: none; background: var(--kn-panel); } .entry__date { font-family: var(--kn-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--kn-faint); } .entry__title { font-family: var(--kn-serif); font-size: 25px; line-height: 1.25; margin: 0 0 4px; font-weight: 400; } .entry__summary { color: var(--kn-muted); font-size: 15px; max-width: 68ch; } .entry__state { font-family: var(--kn-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kn-muted); text-align: right; } .entry__state--running { color: var(--kn-text); } .entries__foot { border-top: 1px solid var(--kn-rule); padding: 20px 0 0; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .entries__foot a { font-family: var(--kn-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } /* -------------------------------------------------------------------------- 8. § 02 — Status board Density surface. Mono at 13px, reduced row height, hairline column rules as well as row rules, so the board reads as an instrument panel rather than a list. State is glyph, weight and indent — never colour. -------------------------------------------------------------------------- */ .board { width: 100%; border-collapse: collapse; margin-top: 52px; } .board th, .board td { border-right: 1px solid var(--kn-rule); } .board th:last-child, .board td:last-child { border-right: 0; } .board thead th { text-align: left; padding: 0 16px 8px; border-bottom: 1px solid var(--kn-rule-strong); font-family: var(--kn-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kn-faint); } .board thead th:first-child { padding-left: 0; } .board thead th:last-child { padding-right: 0; text-align: right; } /* Group header row introducing each state block. It spans the full width, so it must not pick up the right-alignment or rules the real columns carry. Selector is deliberately specific enough to outrank `tbody td:last-child`. */ .board tbody tr.board__group td { padding: 28px 0 8px; border-right: 0; border-top: 0; text-align: left; font-family: var(--kn-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--kn-muted); } .board tbody tr.board__group--first td { padding-top: 24px; } .board tbody td { padding: 12px 16px; border-top: 1px solid var(--kn-rule); vertical-align: top; } .board tbody td:first-child { padding-left: 0; } .board tbody td:last-child { padding-right: 0; text-align: right; } .board__system { font-weight: 600; font-size: 16px; letter-spacing: 0.01em; } /* Indent carries state alongside glyph and weight. */ .board__system--specced { font-weight: 400; font-size: 16px; color: var(--kn-muted); padding-left: 24px; } .board__system--parked { font-weight: 400; font-size: 16px; color: var(--kn-muted); padding-left: 48px; } .board__system--muted { font-weight: 600; font-size: 16px; color: var(--kn-muted); } .board__state { font-family: var(--kn-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kn-muted); white-space: nowrap; } .board__state--running { color: var(--kn-text); } .board__evidence { font-family: var(--kn-mono); font-size: 13px; line-height: 1.6; color: var(--kn-muted); } .board__evidence--present { color: var(--kn-text); } .board__verified { font-family: var(--kn-mono); font-size: 13px; color: var(--kn-muted); } .legend { margin-top: 64px; border-top: 1px solid var(--kn-rule-strong); padding-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .legend__item { padding: 24px 24px 20px; border-left: 1px solid var(--kn-rule); } .legend__item:first-child { padding-left: 0; border-left: 0; } .legend__item:last-child { padding-right: 0; } .legend__term { font-family: var(--kn-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kn-muted); margin: 0 0 12px; font-weight: 400; } .legend__term--running { color: var(--kn-text); } .legend__def { margin: 0; font-size: 14px; line-height: 1.6; color: var(--kn-muted); } .legend__note { margin: 24px 0 0; } /* -------------------------------------------------------------------------- 9. § 03 — Article Prose stays at a readable measure and does NOT get denser. The density pass applies to the data surfaces on this page: terminal blocks, evidence callouts, and the contents rail. -------------------------------------------------------------------------- */ .article__head { padding: 72px 0 40px; border-bottom: 1px solid var(--kn-rule-strong); } .article__meta { display: flex; gap: 24px; flex-wrap: wrap; align-items: baseline; font-family: var(--kn-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kn-faint); margin-bottom: 28px; } .article__meta .is-running { color: var(--kn-text); } .article__title { font-family: var(--kn-serif); font-weight: 400; font-size: 46px; line-height: 1.14; letter-spacing: -0.01em; margin: 0 0 20px; max-width: 24ch; text-wrap: balance; } .article__standfirst { margin: 0; max-width: 68ch; font-size: 19px; line-height: 1.6; color: var(--kn-muted); } .article__body { display: grid; grid-template-columns: minmax(0, 68ch) minmax(0, 1fr); gap: 72px; padding-top: 52px; } .prose p { margin: 0 0 24px; font-size: 17px; line-height: 1.7; } .prose p.is-muted { color: var(--kn-muted); } .prose p.is-spaced { margin-bottom: 40px; } .prose h2 { font-family: var(--kn-serif); font-weight: 400; font-size: 29px; line-height: 1.25; margin: 0 0 4px; display: flex; gap: 16px; align-items: baseline; } .prose h2 .h-num { font-family: var(--kn-mono); font-size: 12px; letter-spacing: 0.16em; color: var(--kn-faint); } .prose h2 + p { margin-top: 12px; } /* Inline code stays in mono and stays inside a sentence. */ .lab code { font-family: var(--kn-mono); font-size: 0.86em; border: 1px solid var(--kn-rule); padding: 1px 4px; color: var(--kn-text); } .pullquote { margin: 0 0 40px; border-top: 1px solid var(--kn-rule); border-bottom: 1px solid var(--kn-rule); padding: 24px 0; } .pullquote p { margin: 0; font-family: var(--kn-serif); font-size: 23px; line-height: 1.45; color: var(--kn-text); } /* --- Terminal block ------------------------------------------------------ Real chrome: a labelled header, a prompt, line numbers in --kn-faint, and an exit/elapsed strip. Output never truncates; long lines scroll horizontally and the line-number gutter stays pinned while they do. Line numbers are generated by a CSS counter rather than written into the markup, so no numeral enters the HTML source. ------------------------------------------------------------------------- */ .term { margin: 0 0 36px; } .term__frame { border: 1px solid var(--kn-rule); background: var(--kn-well); } .term__bar { display: flex; justify-content: space-between; gap: 20px; padding: 8px 12px; border-bottom: 1px solid var(--kn-rule); font-family: var(--kn-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kn-faint); } .term__scroll { overflow-x: auto; padding: 12px 12px 12px 0; } .term__body { margin: 0; font-family: var(--kn-mono); font-size: 13px; line-height: 1.75; color: var(--kn-text); counter-reset: ln; /* The 
 itself does not preserve whitespace; each line does. This lets
     the line elements be written one per source line without the source
     newlines between them rendering as blank output rows. */
  white-space: normal;
}
.term__line {
  display: block;
  white-space: pre;
  width: max-content;
  min-width: 100%;
  counter-increment: ln;
}
.term__line::before {
  /* Plain digits, not leading-zero: "0N" is the section-identifier vocabulary
     everywhere else in this design, and the gutter must not read as one.
     Deleting this rule removes line numbers entirely, with no markup change. */
  content: counter(ln);
  position: sticky;
  left: 0;
  display: inline-block;
  width: 44px;
  padding-right: 12px;
  text-align: right;
  color: var(--kn-faint);
  background: var(--kn-well);
  -webkit-user-select: none;
  user-select: none;
}
.term__foot {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-top: 1px solid var(--kn-rule);
  font-family: var(--kn-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kn-faint);
}
.term__caption {
  margin-top: 8px;
  font-family: var(--kn-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kn-faint);
}

/* --- Inline evidence callout --------------------------------------------- */

.evidence {
  margin: 0 0 36px;
  border-left: 2px solid var(--kn-accent-dim);
  padding: 4px 0 4px 20px;
}
.evidence__label {
  font-family: var(--kn-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kn-accent);
  margin-bottom: 8px;
}
.evidence__scroll { overflow-x: auto; }
.evidence__body {
  margin: 0;
  white-space: pre;
  font-family: var(--kn-mono);
  font-size: 13px;
  line-height: 1.75;
  color: var(--kn-text);
}
.evidence__stamp {
  margin-top: 8px;
  font-family: var(--kn-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kn-faint);
}

/* --- Backing archive footer ---------------------------------------------- */

.backing {
  border-top: 1px solid var(--kn-rule-strong);
  padding-top: 24px;
}
.backing__label {
  font-family: var(--kn-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kn-faint);
  margin-bottom: 16px;
}
.backing__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 20px;
}

/* --- Contents rail -------------------------------------------------------- */

.contents {
  align-self: start;
  position: sticky;
  top: 150px;
  border-left: 1px solid var(--kn-rule);
  padding-left: 24px;
}
.contents__label {
  font-family: var(--kn-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kn-faint);
  margin-bottom: 12px;
}
.contents__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--kn-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kn-muted);
}
.contents__list a { color: var(--kn-muted); }
.contents__list a:hover { color: var(--kn-text); }
.contents__list a.is-current { color: var(--kn-accent); }


/* --------------------------------------------------------------------------
   10. § 04 — Archive
   -------------------------------------------------------------------------- */

.plain-head {
  padding: 72px 0 44px;
  border-bottom: 1px solid var(--kn-rule-strong);
}
.plain-head .page-title { max-width: 26ch; margin-bottom: 20px; }
.plain-head .lede { max-width: 68ch; font-size: 17px; line-height: 1.68; }

.explain {
  padding-top: 56px;
  display: grid;
  grid-template-columns: minmax(0, 68ch) minmax(0, 1fr);
  gap: 72px;
}
.explain__item {
  border-top: 1px solid var(--kn-rule);
  padding: 28px 0;
}
.explain__item--last { border-bottom: 1px solid var(--kn-rule); }
.explain__head {
  display: flex;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 12px;
}
.explain__num {
  font-family: var(--kn-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--kn-faint);
}
.explain__title {
  font-family: var(--kn-serif);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.25;
  margin: 0;
}
.explain__item p {
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--kn-muted);
}
.explain__item p:last-child { margin-bottom: 0; }
.explain__foot { padding-top: 28px; }

/* "How to check this yourself" — instruction, not self-asserted status. */
.selfcheck {
  align-self: start;
  border-left: 1px solid var(--kn-rule);
  padding-left: 24px;
}
.selfcheck__label {
  font-family: var(--kn-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kn-faint);
  margin-bottom: 16px;
}
.selfcheck__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.selfcheck__step {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 8px;
  color: var(--kn-text);
}
.selfcheck__detail {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--kn-muted);
}
.selfcheck__link {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--kn-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  word-break: break-all;
}


/* --------------------------------------------------------------------------
   11. § 05 — Dashboard
   -------------------------------------------------------------------------- */

.withheld { padding: 96px 0 0; }
.withheld .sect-id { margin-bottom: 40px; }

.withheld__frame {
  border-top: 1px solid var(--kn-rule-strong);
  border-bottom: 1px solid var(--kn-rule-strong);
  padding: 56px 0;
}
.withheld__gate {
  font-family: var(--kn-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kn-muted);
  margin-bottom: 32px;
}
.withheld__title {
  font-family: var(--kn-serif);
  font-weight: 400;
  font-size: 54px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.withheld__body {
  display: grid;
  grid-template-columns: minmax(0, 64ch) minmax(0, 1fr);
  gap: 72px;
  padding-top: 44px;
}
.withheld__body p {
  margin: 0 0 20px;
  font-size: 18px;
  line-height: 1.68;
}
.withheld__body p.is-muted { color: var(--kn-muted); }
.withheld__body p:last-of-type { margin-bottom: 0; }
.withheld__actions {
  margin-top: 36px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}


/* --------------------------------------------------------------------------
   12. Responsive

   The rails collapse below the prose rather than beside it; the status board
   scrolls horizontally instead of crushing its columns.
   -------------------------------------------------------------------------- */

@media (max-width: 1040px) {
  .split-head,
  .article__body,
  .explain,
  .withheld__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .rail,
  .contents,
  .selfcheck {
    border-left: 0;
    border-top: 1px solid var(--kn-rule);
    padding-left: 0;
    padding-top: 24px;
    position: static;
  }
  .rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 32px;
  }
  .backing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .lab { --kn-gutter: 20px; }

  .board__wrap { overflow-x: auto; }
  .board { min-width: 720px; }

  .legend { grid-template-columns: minmax(0, 1fr); }
  .legend__item {
    padding: 20px 0;
    border-left: 0;
    border-top: 1px solid var(--kn-rule);
  }
  .legend__item:first-child { border-top: 0; padding-top: 24px; }

  .entry {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .entry__state { text-align: left; }

  .page-title    { font-size: 34px; }
  .article__title { font-size: 34px; }
  .withheld__title { font-size: 36px; }
  .withheld { padding-top: 56px; }
}

@media (max-width: 620px) {
  /* The masthead cannot hold the wordmark and the return link on one row at
     this width, and forcing it makes the whole document scroll sideways. Let
     it wrap instead — and because a wrapped masthead no longer has a known
     height, the section nav stops being sticky rather than relying on a
     magic offset that would then be wrong. */
  .site-head__inner {
    flex-wrap: wrap;
    align-items: center;
    min-height: 0;
    gap: 0 16px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .site-head__aside { min-width: 0; padding-top: 4px; }
  .secnav { position: static; }

  .wordmark__name { font-size: 20px; }
  .wordmark__bar { margin: 8px 0; }
  .rail { grid-template-columns: minmax(0, 1fr); }
  .backing__grid { grid-template-columns: minmax(0, 1fr); }
  .prose h2 { display: block; }
  .prose h2 .h-num { display: block; margin-bottom: 4px; }
}