/* =========================================================================
   THE BURN-IN DESK (overclockix.com) — design system "testbench", prefix bnc-.
   Lexicon: the testbench and the bench. bench (usable width), rig (site
   header), bus (nav), sigil (wordmark), coldboot (home cover), gauge
   (numbers kicker), trail (breadcrumb), bay (numbered section), kicker
   (small-caps overline), chip (card), array (card grid), ledger (dated
   register), credits (byline row), slug (article head), panel (lead image),
   lane (reading column), pullout (pull quote), callout (note box), steps
   (checklist), pitfalls (common mistakes), matrix (table), onward (read
   next), seam (separator), rack (sticky RIGHT rack), layout (column + rack),
   footing (footer), skipnav (skip link). The reading column comes first and
   the rack sits to its right: that is the rhythm of this site.
   A lit bench at night: cool paper ground, indigo probe accent, signal amber
   used as ornament only. Headings in a condensed grotesque, body in a
   transitional serif: the inverse pairing of a slab-and-humanist magazine.
   No external request, no script, automatic dark mode, print sheet.
   ========================================================================= */

:root {

  /* ---- 1. COLOR: cold bench at first light ------------------------------ */
  --ground:       #EDEBF2;  /* page ground, cool lavender grey paper       */
  --sheet:        #F8F7FC;  /* bright paper: checklists, register rows     */
  --shade:        #DCD8E7;  /* alternate sections, boxes, image beds       */
  --ink:          #1B1A24;  /* body text and headings, near black violet   */
  --mute:         #55516B;  /* captions, standfirsts, bylines              */
  --probe:        #453596;  /* links and load-bearing rules, indigo        */
  --probe-set:    #322672;  /* hover and current state                     */
  --amber:        #C06A00;  /* ORNAMENT ONLY: numbers, bars, ::selection   */
  --amber-set:    #8A4B00;  /* the only amber allowed to carry text        */
  --ruleline:     #CAC4DA;  /* rules of the register and of the tables     */
  --footing:      #191826;  /* footer ground and table headers             */
  --footing-ink:  #E4E1EE;
  --footing-link: #B6A8F2;

  /* ---- 2. TYPE (system stacks only, no font file, no remote pullout) ------- */
  --display-stack: "Avenir Next Condensed", "Helvetica Neue Condensed", "Roboto Condensed", "Liberation Sans Narrow", "Arial Narrow", system-ui, sans-serif;
  --serif-stack: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Noto Serif", Georgia, serif;
  --mono-stack:  ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;

  --caps-space: 0.14em;
  --body-size: clamp(1.05rem, 1rem + 0.25vw, 1.16rem);
  --body-lead: 1.64;

  /* ---- 3. RHYTHM AND MEASURE ------------------------------------------- */
  --column:       72ch;
  --column-wide:  1380px;
  --rack-width:    15rem;
  --margin:   clamp(1.1rem, 4vw, 4rem);
  --gutter: clamp(0.9rem, 2.2vw, 2.1rem);
  --airgap:  clamp(3rem, 7vw, 6.6rem);

  /* ---- 4. DETAIL: hairlines, square corners, no shadow ------------------ */
  --corner: 0;
  --rule-weight: 1px solid var(--ruleline);
  --rule-strong: 1px solid var(--probe);
  --tween: 150ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:       #12111A;
    --sheet:        #1B1A26;
    --shade:        #262433;
    --ink:          #E4E1EE;
    --mute:         #A9A3C0;
    --probe:        #A99BF0;
    --probe-set:    #C6BCF7;
    --amber:        #E8A24B;
    --amber-set:    #F2BC79;
    --ruleline:     #35324A;
    --footing:      #0B0A12;
    --footing-ink:  #DEDAEC;
    --footing-link: #BCAFF5;
  }
}

/* =========================================================================
   BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif-stack);
  font-size: var(--body-size);
  line-height: var(--body-lead);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--display-stack);
  font-weight: 600;
  letter-spacing: 0.002em;
  line-height: 1.12;
  margin: 0;
}
h1 { font-size: clamp(2rem, 1.25rem + 3.1vw, 3.5rem); }
h2 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem); }
h3 { font-size: clamp(1.1rem, 1.02rem + 0.42vw, 1.38rem); }
h4 { font-size: 1.02rem; }

p, ul, ol { margin: 0 0 1.12em; }
a { color: var(--probe); text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color var(--tween); }
a:hover { color: var(--probe-set); }
::selection { background: var(--amber); color: #F4F8F7; }
:focus-visible { outline: 2px solid var(--probe); outline-offset: 3px; }
hr { border: 0; border-top: var(--rule-weight); margin: var(--airgap) 0; }
time, .bnc-num { font-family: var(--mono-stack); font-variant-numeric: tabular-nums; }

/* =========================================================================
   FRAME
   ========================================================================= */

/* Skip link. DO NOT REMOVE. */
.bnc-skipnav {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--ground);
  padding: 0.7rem 1.1rem; z-index: 50;
}
.bnc-skipnav:focus { left: 0.6rem; top: 0.6rem; }

/* The bench: usable width of every block on the page. */
.bnc-bench {
  width: 100%;
  max-width: var(--column-wide);
  margin-inline: auto;
  padding-inline: var(--margin);
}

/* The rig: the bank you walk along, i.e. the site header. */
.bnc-rig { border-bottom: var(--rule-weight); padding-block: clamp(0.8rem, 1.7vw, 1.35rem); }
.bnc-rig__line {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 0.8rem 1.6rem;
}
.bnc-sigil {
  display: block; text-decoration: none; color: var(--ink);
  font-family: var(--display-stack); font-weight: 600;
  font-size: clamp(1.14rem, 1rem + 0.6vw, 1.5rem);
  text-transform: uppercase; letter-spacing: var(--caps-space); line-height: 1.05;
}
.bnc-sigil:hover { color: var(--probe); }
.bnc-sigil span {
  display: block; margin-top: 0.34rem;
  font-family: var(--serif-stack); font-weight: 400; text-transform: none;
  letter-spacing: 0; font-size: 0.8rem; color: var(--mute); max-width: 44ch;
}
.bnc-bus ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; justify-content: flex-end;
}
.bnc-bus a {
  color: var(--ink); text-decoration: none;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: var(--caps-space);
  padding-bottom: 0.2rem; border-bottom: 2px solid transparent;
}
.bnc-bus a:hover, .bnc-bus a[aria-current] {
  color: var(--probe); border-bottom-color: var(--amber);
}
.bnc-bus a[aria-current="page"] { font-weight: 700; }

/* Trail: the breadcrumb. */
.bnc-trail { font-size: 0.76rem; color: var(--mute); padding-block: 1.05rem; }
.bnc-trail ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.55rem;
}
.bnc-trail li + li::before { content: ">"; margin-right: 0.55rem; color: var(--amber-set); }

/* =========================================================================
   COLDBOOT: the home cover. A hero photograph at the first screen, then the
   wordmark and the gauge band. The photograph is capped in height so that the
   first row of section tiles still starts before 700 px on a 1456 x 800
   window: the picture opens the page, it does not own it.
   ========================================================================= */
.bnc-coldboot {
  background: var(--ground); border-bottom: var(--rule-weight);
  padding-block: 0 clamp(0.9rem, 2vw, 1.4rem);
}
.bnc-coldboot__panel { margin: 0 0 clamp(1rem, 2.2vw, 1.7rem); }
.bnc-coldboot__shot {
  display: block; width: 100%; height: clamp(10rem, 21vw, 16.5rem);
  object-fit: cover; background: var(--shade);
  border-bottom: 3px solid var(--amber);
}
.bnc-coldboot__caption {
  font-size: 0.78rem; color: var(--mute); padding-top: 0.55rem;
}
.bnc-coldboot__caption > span { display: block; }
.bnc-coldboot__line { display: grid; gap: clamp(1.1rem, 2.8vw, 2.4rem); }
.bnc-coldboot__kicker {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: var(--caps-space);
  color: var(--amber-set); margin: 0 0 0.75rem;
}
.bnc-coldboot h1 {
  font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.7rem);
  text-transform: uppercase; letter-spacing: 0.045em; line-height: 1.02;
  max-width: 18ch;
}
.bnc-coldboot__wash {
  margin: 0.85rem 0 0; max-width: 52ch;
  font-size: clamp(1.02rem, 0.98rem + 0.35vw, 1.14rem); color: var(--mute);
}

/* Gauge: one column per published figure, monospace, on a blaze rule. */
.bnc-gauge__array {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}
.bnc-gauge__col { border-top: 3px solid var(--amber); padding-top: 0.6rem; }
.bnc-gauge__num {
  display: block; font-family: var(--mono-stack);
  font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.2rem);
  line-height: 1; letter-spacing: -0.02em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bnc-gauge__label {
  display: block; margin-top: 0.45rem;
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: var(--caps-space);
  color: var(--ink);
}
.bnc-gauge__entry { display: block; margin-top: 0.25rem; font-size: 0.8rem; color: var(--mute); }
.bnc-gauge__foot {
  margin: clamp(0.9rem, 2vw, 1.4rem) 0 0; padding-top: 0.7rem;
  border-top: var(--rule-weight);
  font-size: 0.8rem; color: var(--mute); max-width: 118ch;
}

@media (min-width: 1000px) {
  .bnc-coldboot__line { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; }
}

/* =========================================================================
   BAY: a numbered section. A bay is shallow water you can walk.
   ========================================================================= */

.bnc-bay { margin-top: clamp(2rem, 4.4vw, 3.4rem); }
.bnc-bay--lead { margin-top: clamp(1.1rem, 2.2vw, 1.7rem); }
.bnc-bay--inset {
  background: var(--shade);
  padding-block: clamp(2rem, 4.4vw, 3.4rem);
  margin-block: clamp(2.6rem, 5.4vw, 4.4rem) 0;
}
.bnc-bay__ledge {
  border-top: var(--rule-weight); padding-top: 0.85rem; margin-bottom: 1.15rem;
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.5rem 1.6rem;
}
.bnc-bay__crown { display: flex; align-items: baseline; gap: 0.85rem; max-width: 46ch; }
.bnc-bay__gauge {
  font-family: var(--mono-stack); font-size: 0.86rem; color: var(--amber-set);
  letter-spacing: 0.06em; white-space: nowrap;
}
.bnc-bay__intro { font-size: 0.82rem; color: var(--mute); max-width: 46ch; margin: 0; }

/* Kicker: the small-caps overline, like the ring on a bird's leg. */
.bnc-kicker {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: var(--caps-space);
  color: var(--amber-set); margin: 0 0 0.7rem;
}

/* =========================================================================
   ARRAY: an even grid of equal-height tiles. No slope, no variable span.
   ========================================================================= */

.bnc-array {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: calc(var(--gutter) * 1.35) var(--gutter);
  /* At least a quarter of the usable width per tile: four columns at 1380 px,
     never five. A thumbnail narrower than that stops reading as an image. */
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}
.bnc-chip { margin: 0; position: relative; display: flex; flex-direction: column; }
.bnc-chip__frame { overflow: hidden; background: var(--shade); border: var(--rule-weight); border-radius: var(--corner); aspect-ratio: 3 / 2; }
.bnc-chip__shot { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.bnc-chip__strip { padding-top: 0.75rem; margin-top: 0.75rem; border-top: var(--rule-weight); flex: 1; }
.bnc-chip__crown { margin: 0; font-size: clamp(1.06rem, 1rem + 0.4vw, 1.26rem); }
.bnc-chip__link { color: var(--ink); text-decoration: none; transition: color var(--tween); }
.bnc-chip__link:hover { color: var(--probe); }
.bnc-chip__link::after { content: ""; position: absolute; inset: 0; }
.bnc-chip:hover .bnc-chip__shot { transform: scale(1.02); }
.bnc-chip__gloss { margin: 0.45rem 0 0; color: var(--mute); font-size: 0.86rem; max-width: 46ch; }
.bnc-chip__byline {
  margin: 0.6rem 0 0; font-family: var(--mono-stack); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute);
}

/* =========================================================================
   LEDGER: the dated register. Dense, ruled, no thumbnail. Date on the left
   in monospace, title on the same line, one sentence underneath.
   ========================================================================= */

.bnc-ledger { list-style: none; margin: 0; padding: 0; border-top: var(--rule-weight); }
.bnc-ledger__line {
  display: grid; grid-template-columns: 10.5rem 1fr;
  gap: 0.2rem 1.6rem; align-items: baseline;
  padding-block: 0.95rem;
  border-bottom: var(--rule-weight);
}
.bnc-ledger__line:hover { background: var(--sheet); }
.bnc-tick {
  font-family: var(--mono-stack); font-size: 0.78rem; color: var(--mute);
  text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap;
}
.bnc-ledger__crown { margin: 0; font-size: clamp(1.02rem, 0.98rem + 0.34vw, 1.22rem); }
.bnc-ledger__crown a { color: var(--ink); text-decoration: none; }
.bnc-ledger__crown a:hover { color: var(--probe); text-decoration: underline; }
.bnc-ledger__intro { grid-column: 2; margin: 0.3rem 0 0; color: var(--mute); font-size: 0.88rem; max-width: 78ch; }
.bnc-ledger__tag { grid-column: 1; margin: 0.3rem 0 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: var(--caps-space); color: var(--amber-set); }

/* =========================================================================
   LAYOUT: sticky rack on the LEFT, single reading column on its right.
   ========================================================================= */

.bnc-layout { display: block; }
.bnc-rack { margin-bottom: 2rem; }
.bnc-rack__crown {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: var(--caps-space);
  color: var(--mute); margin: 0 0 0.6rem; border-top: 3px solid var(--amber); padding-top: 0.6rem;
}
.bnc-rack ul { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.bnc-rack li { border-bottom: var(--rule-weight); }
.bnc-rack a {
  display: block; padding-block: 0.5rem; font-size: 0.87rem;
  color: var(--ink); text-decoration: none;
}
.bnc-rack a:hover { color: var(--probe); }
.bnc-rack [aria-current="page"] { color: var(--amber-set); }

/* Below the rack breakpoint the page is a single column and the rack, which
   comes first in the source, would sit between the lead image and the first
   paragraph. Order puts the reading first and the rack after it. */
.bnc-layout { display: flex; flex-direction: column; }
.bnc-lane { order: 1; }
.bnc-rack { order: 2; }

@media (min-width: 1100px) {
  .bnc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--rack-width);
    gap: calc(var(--gutter) * 2);
    align-items: start;
  }
  /* Both cells belong to the first row. Without grid-row the rack, which comes
     first in the source, takes row 1 column 2 and sparse auto-placement pushes
     the reading column down to row 2: a 400 px hole under the lead image. */
  .bnc-lane { grid-column: 1; grid-row: 1; }
  .bnc-rack { grid-column: 2; grid-row: 1; }
  .bnc-rack { position: sticky; top: 1.6rem; margin-bottom: 0; margin-top: clamp(1.6rem, 3.4vw, 2.8rem); }
}

/* =========================================================================
   SLUG, PANEL AND CURRENT: the reading page.
   ========================================================================= */

.bnc-slug { padding-block: clamp(1.1rem, 2.6vw, 2rem) clamp(0.9rem, 2vw, 1.6rem); }
.bnc-slug h1 { max-width: 24ch; }
.bnc-slug__intro {
  margin: 1rem 0 0; max-width: 60ch;
  font-size: clamp(1.06rem, 1rem + 0.5vw, 1.24rem); color: var(--mute);
}
.bnc-credits {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem;
  margin: 1.4rem 0 0; padding: 0;
  font-family: var(--mono-stack); font-size: 0.73rem;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--mute);
}
.bnc-credits a { color: var(--mute); }

.bnc-panel { margin: 0; }
.bnc-panel__shot { width: 100%; aspect-ratio: 21 / 9; max-height: 22rem; object-fit: cover; background: var(--shade); }
.bnc-panel__caption {
  max-width: var(--column-wide); margin-inline: auto;
  padding: 0.7rem var(--margin) 0;
  font-size: 0.8rem; color: var(--mute);
}

.bnc-lane { max-width: var(--column); margin-top: clamp(1.6rem, 3.4vw, 2.8rem); }
.bnc-lane h2 { margin-top: 2.4rem; }
.bnc-lane h3 { margin-top: 1.9rem; }
.bnc-lane h2:first-child, .bnc-lane h3:first-child { margin-top: 0; }
.bnc-lane ul, .bnc-lane ol { padding-left: 1.15rem; }
.bnc-lane li { margin-bottom: 0.44em; }
.bnc-lane strong { color: var(--ink); }
.bnc-lane > h2 { border-top: var(--rule-weight); padding-top: 1.2rem; }

/* Pull quote. */
.bnc-pullout {
  margin: 2.4rem 0; padding-left: 1.3rem; border-left: 3px solid var(--amber);
  font-family: var(--display-stack); font-size: clamp(1.16rem, 1.05rem + 0.7vw, 1.5rem);
  line-height: 1.34; color: var(--ink);
}

/* Note box. */
.bnc-callout { background: var(--sheet); padding: clamp(1.1rem, 2.8vw, 1.8rem); margin: 2.2rem 0; border: var(--rule-weight); }
.bnc-callout > :last-child { margin-bottom: 0; }
.bnc-callout h3 {
  margin: 0 0 0.6rem; font-size: 0.82rem; text-transform: uppercase;
  letter-spacing: var(--caps-space); color: var(--amber-set);
}

/* Checklist: the game steps, where the birds line up. */
.bnc-steps {
  background: var(--sheet); border: var(--rule-weight); border-left: 3px solid var(--probe);
  padding: clamp(1.1rem, 2.6vw, 1.7rem); margin: 2.2rem 0;
}
.bnc-steps h3 { margin-bottom: 0.7rem; }
.bnc-steps ul { list-style: none; margin: 0; padding: 0; }
.bnc-steps li { position: relative; padding-left: 1.5rem; margin-bottom: 0.55em; }
.bnc-steps li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 0.85rem; height: 0; border-top: 2px solid var(--probe);
}

/* Common mistakes: the pitfalls, where you run aground. */
.bnc-pitfalls {
  background: var(--shade); border-left: 3px solid var(--amber);
  padding: clamp(1.1rem, 2.6vw, 1.7rem); margin: 2.2rem 0;
}
.bnc-pitfalls h3 {
  font-size: 0.86rem; text-transform: uppercase; letter-spacing: var(--caps-space);
  color: var(--amber-set); margin-bottom: 0.8rem;
}
.bnc-pitfalls ul { margin-bottom: 0; padding-left: 1.15rem; }
.bnc-pitfalls li { margin-bottom: 0.55em; }

/* Table. */
.bnc-matrix { margin: 2.4rem 0; overflow-x: auto; border: var(--rule-weight); }
.bnc-matrix table { border-collapse: collapse; width: 100%; min-width: 36rem; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.bnc-matrix caption {
  text-align: left; padding: 0.85rem 1rem; background: var(--sheet);
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: var(--caps-space);
  color: var(--mute); border-bottom: var(--rule-weight);
}
.bnc-matrix th, .bnc-matrix td { text-align: left; padding: 0.66rem 1rem; border-bottom: var(--rule-weight); vertical-align: top; }
.bnc-matrix tr:last-child td { border-bottom: 0; }
.bnc-matrix th {
  background: var(--footing); color: var(--footing-ink);
  font-family: var(--display-stack); font-weight: 600;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em;
}
.bnc-matrix .bnc-observed { display: block; margin-top: 0.35rem; color: var(--mute); font-style: italic; }
.bnc-matrix .bnc-observed::before {
  content: "Observed "; font-style: normal; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: var(--caps-space); color: var(--amber-set);
}

/* Read next. */
.bnc-onward { border-top: var(--rule-weight); margin-top: var(--airgap); padding-top: 1.2rem; }
.bnc-onward h2 { font-size: clamp(1.16rem, 1rem + 0.7vw, 1.5rem); border-top: 0; padding-top: 0; }
.bnc-onward ul { list-style: none; margin: 0.7rem 0 0; padding: 0; }
.bnc-onward li { margin-bottom: 0.62rem; }

/* Separator: the seam, an offset single rule. */
.bnc-seam { border: 0; border-top: var(--rule-weight); width: 42%; margin: var(--airgap) 0 var(--airgap) 0; }

/* =========================================================================
   FOOTING: the launch, i.e. the footer.
   ========================================================================= */

.bnc-footing {
  background: var(--footing); color: var(--footing-ink);
  margin-top: var(--airgap); padding-block: clamp(2.4rem, 5vw, 4rem);
}
.bnc-footing__cols {
  display: grid; gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.bnc-footing h2 { font-size: 0.86rem; text-transform: uppercase; letter-spacing: var(--caps-space); margin-bottom: 0.9rem; color: var(--footing-ink); }
.bnc-footing ul { list-style: none; margin: 0; padding: 0; }
.bnc-footing li { margin-bottom: 0.5rem; }
.bnc-footing a { color: var(--footing-link); text-decoration: none; border-bottom: 1px solid transparent; font-size: 0.9rem; }
.bnc-footing a:hover { border-bottom-color: var(--footing-link); }
.bnc-footing p { color: var(--footing-ink); font-size: 0.88rem; max-width: 54ch; }
.bnc-footing__base {
  margin-top: clamp(1.8rem, 3.4vw, 2.6rem); padding-top: 1.1rem;
  border-top: 1px solid rgba(220, 231, 229, 0.22);
  font-family: var(--mono-stack); font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--footing-ink);
}

/* =========================================================================
   RESPONSIVE: the grid folds, nothing overflows sideways.
   ========================================================================= */

/* The mobile menu is folded by default and opened by a checkbox. No script
   runs on this site, so the state is carried by the checkbox and read by the
   sibling selector. Above 900 px the key disappears and the list is a row. */
.bnc-bus__key { display: none; }
@media (max-width: 900px) {
  .bnc-rig__line { align-items: stretch; flex-direction: column; }
  .bnc-bus__key {
    display: inline-flex; align-items: center; gap: 0.55rem;
    align-self: flex-start; cursor: pointer;
    font-family: var(--display-stack); font-size: 0.8rem;
    text-transform: uppercase; letter-spacing: var(--caps-space);
    color: var(--ink); border: var(--rule-weight); border-radius: var(--corner);
    padding: 0.5rem 0.9rem; background: var(--sheet);
  }
  .bnc-bus__key::before {
    content: ""; width: 1rem; height: 2px; background: currentColor;
    box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
  }
  .bnc-bus__key:focus-within, .bnc-bus__switch:focus + .bnc-bus__key { outline: 2px solid var(--probe); outline-offset: 2px; }
  .bnc-bus { display: none; }
  .bnc-bus__switch:checked ~ .bnc-bus { display: block; }
  .bnc-bus ul { justify-content: flex-start; flex-direction: column; gap: 0; }
  .bnc-bus li { border-bottom: var(--rule-weight); }
  .bnc-bus a { display: block; padding-block: 0.7rem; border-bottom: 0; }
  .bnc-bus a[aria-current] { color: var(--probe); }
}
@media (max-width: 640px) {
  :root { --airgap: clamp(2.2rem, 9vw, 3.4rem); }
  .bnc-array { grid-template-columns: 1fr; }
  .bnc-ledger__line { grid-template-columns: 1fr; gap: 0.25rem; }
  .bnc-ledger__intro, .bnc-ledger__tag { grid-column: 1; }
  .bnc-gauge__col { border-top-width: 2px; }
  .bnc-coldboot h1 { letter-spacing: 0.03em; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .bnc-chip:hover .bnc-chip__shot { transform: none; }
}

/* =========================================================================
   PRINT
   ========================================================================= */

@media print {
  .bnc-rig, .bnc-footing, .bnc-bus, .bnc-rack, .bnc-onward, .bnc-skipnav { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .bnc-lane, .bnc-bench { max-width: none; padding: 0; }
  .bnc-matrix { overflow: visible; }
  .bnc-steps, .bnc-pitfalls, .bnc-callout { border: 1px solid #999; background: none; }
}