/* =========================================================================
   ROOT COMPLEX (pciexpressdevnet.org) — design system "linkfabric", prefix rcx-.
   Lexicon: the linkfabric and the chassis. chassis (usable width), bracket (site
   header), pinout (nav), stencil (wordmark), faceplate (home cover), count
   (numbers silk), pathway (breadcrumb), layer (numbered section), silk
   (small-caps overline), carrier (card), panel (card grid), tape (dated
   register), log (byline row), preamble (article head), capture (lead image),
   current (reading column), call (pull quote), sideband (note box), harness
   (checklist), pitfall (common mistakes), specsheet (table), return (read
   next), notch (separator), spine (sticky left spine), expanse (spine + column),
   footing (footer), bypass (skip link).
   Bone board with ink blue traces: substrate ground, trace accent, amber ornament.
   No external request, no script, automatic dark mode, print sheet.
   ========================================================================= */

:root {

  /* ---- 1. COLOR: cold chassis at first light ------------------------------ */
  --substrate:            #EEEDE7;  /* page ground, pale green grey haze          */
  --resist:          #FAF9F5;  /* bright paper: checklists, register rows    */
  --shade:           #DEDCD2;  /* alternate sections, boxes, image beds      */
  --graphite:       #1B1C21;  /* body text and headings, cold black         */
  --pewter:      #565A63;  /* captions, standfirsts, bylines             */
  --trace:      #1F4E8C;  /* links and load-bearing rules               */
  --trace-set:  #16386A;  /* hover and current state                    */
  --amber:          #B26A00;  /* ORNAMENT ONLY: numbers, bars, ::selection  */
  --amber-set:      #8A5100;  /* the only blaze allowed to carry text       */
  --etch:       #C9C6BA;  /* rules of the register and of the tables    */
  --footing:        #16171B;  /* footer ground and table headers            */
  --footing-ink:    #E6E4DC;
  --footing-link:   #8FB4E4;

  /* ---- 2. TYPE (system stacks only, no font file, no remote call) ------- */
  --display-stack: Futura, "Futura PT", "Century Gothic", "URW Gothic", Questrial, "Trebuchet MS", sans-serif;
  --prose-stack: "Hoefler Text", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
  --digit-stack:  Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", ui-monospace, monospace;

  --smallcaps-track: 0.14em;
  --copy-size: clamp(1.05rem, 1rem + 0.25vw, 1.16rem);
  --copy-lead: 1.64;

  /* ---- 3. RHYTHM AND MEASURE ------------------------------------------- */
  --column:       66ch;
  --column-wide:  1240px;
  --spine-width:    17rem;
  --gutter:   clamp(1.1rem, 4vw, 4rem);
  --lane: clamp(0.9rem, 2.2vw, 2.1rem);
  --airgap:  clamp(3rem, 7vw, 6.6rem);

  /* ---- 4. DETAIL: hairlines, square corners, no shadow ------------------ */
  --chamfer: 2px;
  --line-weight: 1px solid var(--etch);
  --line-strong: 1px solid var(--trace);
  --glide: 150ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --substrate:           #131418;
    --resist:         #1B1C21;
    --shade:          #24252B;
    --graphite:      #E4E2D9;
    --pewter:     #A6A69E;
    --trace:     #7FA9E0;
    --trace-set: #A8C6EE;
    --amber:         #E0A44A;
    --amber-set:     #ECBA72;
    --etch:      #33343B;
    --footing:       #0C0D10;
    --footing-ink:   #DEDCD2;
    --footing-link:  #9CBEEA;
  }
}

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

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--substrate);
  color: var(--graphite);
  font-family: var(--prose-stack);
  font-size: var(--copy-size);
  line-height: var(--copy-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(--trace); text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color var(--glide); }
a:hover { color: var(--trace-set); }
::selection { background: var(--amber); color: #FAF9F5; }
:focus-visible { outline: 2px solid var(--trace); outline-offset: 3px; }
hr { border: 0; border-top: var(--line-weight); margin: var(--airgap) 0; }
time, .rcx-num { font-family: var(--digit-stack); font-variant-numeric: tabular-nums; }

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

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

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

/* The bracket: the bank you walk along, i.e. the site header. */
.rcx-bracket { border-bottom: var(--line-weight); padding-block: clamp(0.8rem, 1.7vw, 1.35rem); }
.rcx-bracket__row {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 0.8rem 1.6rem;
}
.rcx-stencil {
  display: block; text-decoration: none; color: var(--graphite);
  font-family: var(--display-stack); font-weight: 600;
  font-size: clamp(1.14rem, 1rem + 0.6vw, 1.5rem);
  text-transform: uppercase; letter-spacing: var(--smallcaps-track); line-height: 1.05;
}
.rcx-stencil:hover { color: var(--trace); }
.rcx-stencil span {
  display: block; margin-top: 0.34rem;
  font-family: var(--prose-stack); font-weight: 400; text-transform: none;
  letter-spacing: 0; font-size: 0.8rem; color: var(--pewter); max-width: 44ch;
}
.rcx-pinout__switch { position: absolute; opacity: 0; pointer-events: none; }
.rcx-pinout__key {
  display: inline-block; cursor: pointer; user-select: none;
  font-family: var(--display-stack); font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: var(--smallcaps-track);
  color: var(--graphite); border: 1px solid var(--etch); border-radius: var(--chamfer);
  padding: 0.42rem 0.85rem; background: var(--resist);
}
.rcx-pinout__key::after { content: " +"; color: var(--amber-set); }
.rcx-pinout__switch:checked ~ .rcx-pinout__key::after { content: " -"; }
.rcx-pinout__switch:focus-visible ~ .rcx-pinout__key { outline: 2px solid var(--trace); outline-offset: 2px; }
.rcx-pinout { display: none; width: 100%; }
.rcx-pinout__switch:checked ~ .rcx-pinout { display: block; }
.rcx-pinout ul {
  list-style: none; margin: 0.85rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.1rem;
}
.rcx-pinout li { border-top: var(--line-weight); }
.rcx-pinout li a { display: block; padding-block: 0.62rem; }

@media (min-width: 62rem) {
  .rcx-pinout__key { display: none; }
  .rcx-pinout { display: block; width: auto; }
  .rcx-pinout li { border-top: 0; }
  .rcx-pinout li a { padding-block: 0; }
  .rcx-pinout ul {
    margin: 0; flex-direction: row; flex-wrap: wrap;
    gap: 0.35rem 1.25rem; justify-content: flex-end;
  }
}
.rcx-pinout a {
  color: var(--graphite); text-decoration: none;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: var(--smallcaps-track);
  padding-bottom: 0.2rem; border-bottom: 2px solid transparent;
}
.rcx-pinout a:hover, .rcx-pinout [aria-current="page"] {
  color: var(--trace); border-bottom-color: var(--amber);
}

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

/* =========================================================================
   FACEPLATE: the home cover. A full width photograph on the first screen,
   then the wordmark and the figures. The donor covered its home with type
   alone; here the picture opens the page and the figures sit under it.
   ========================================================================= */

.rcx-faceplate__capture { margin: 0 0 clamp(0.8rem, 1.6vw, 1.2rem); }
.rcx-faceplate__capture img {
  display: block; width: 100%;
  height: clamp(170px, 22vw, 310px); object-fit: cover;
  background: var(--shade); border-bottom: 3px solid var(--amber);
}
.rcx-faceplate__capture figcaption {
  max-width: var(--column-wide); margin: 0.55rem auto 0; padding-inline: var(--gutter);
  font-size: 0.76rem; color: var(--pewter);
}

/* The cover is a SILK, not a screen: the section tiles have to be visible
   without scrolling, and that rule outranks the hero. On wide screens the
   wordmark and the numbers share one row. */
.rcx-faceplate {
  background: var(--substrate); border-bottom: var(--line-weight);
  padding-block: 0 clamp(0.8rem, 1.6vw, 1.2rem);
}
.rcx-faceplate__row { display: grid; gap: clamp(1.1rem, 2.8vw, 2.4rem); }
.rcx-faceplate__text { min-width: 0; }
.rcx-faceplate__silk {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: var(--smallcaps-track);
  color: var(--amber-set); margin: 0 0 0.75rem;
}
.rcx-faceplate h1 {
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  text-transform: uppercase; letter-spacing: 0.045em; line-height: 1.02;
  max-width: 18ch;
}
.rcx-faceplate__flare {
  margin: 0.85rem 0 0; max-width: 52ch;
  font-size: clamp(1.02rem, 0.98rem + 0.35vw, 1.14rem); color: var(--pewter);
}

/* Count: one column per published figure, monospace, on a blaze rule. */
.rcx-count__panel {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}
.rcx-count__col { border-top: 3px solid var(--amber); padding-top: 0.6rem; }
.rcx-count__num {
  display: block; font-family: var(--digit-stack);
  font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.2rem);
  line-height: 1; letter-spacing: -0.02em; color: var(--graphite);
  font-variant-numeric: tabular-nums;
}
.rcx-count__label {
  display: block; margin-top: 0.45rem;
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: var(--smallcaps-track);
  color: var(--graphite);
}
.rcx-count__entry { display: block; margin-top: 0.25rem; font-size: 0.8rem; color: var(--pewter); }
.rcx-count__foot {
  margin: clamp(0.9rem, 2vw, 1.4rem) 0 0; padding-top: 0.7rem;
  border-top: var(--line-weight);
  font-size: 0.8rem; color: var(--pewter); max-width: 118ch;
}

@media (min-width: 1000px) {
  .rcx-faceplate__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
  .rcx-count__panel { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; }
  .rcx-count__num { font-size: clamp(1.7rem, 1rem + 1.6vw, 2.5rem); }
}

/* =========================================================================
   LAYER: a numbered section. A layer is shallow water you can walk.
   ========================================================================= */

.rcx-layer { margin-top: clamp(2rem, 4.4vw, 3.4rem); }
.rcx-layer--lead { margin-top: clamp(1.1rem, 2.2vw, 1.7rem); }
.rcx-layer--recess {
  background: var(--shade);
  padding-block: clamp(2rem, 4.4vw, 3.4rem);
  margin-block: clamp(2.6rem, 5.4vw, 4.4rem) 0;
}
.rcx-layer__edge {
  border-top: var(--line-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;
}
.rcx-layer__headline { display: flex; align-items: baseline; gap: 0.85rem; max-width: 46ch; }
.rcx-layer__count {
  font-family: var(--digit-stack); font-size: 0.86rem; color: var(--amber-set);
  letter-spacing: 0.06em; white-space: nowrap;
}
.rcx-layer__intro { font-size: 0.82rem; color: var(--pewter); max-width: 46ch; margin: 0; }

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

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

.rcx-panel {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: calc(var(--lane) * 1.35) var(--lane);
  grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
}
.rcx-carrier { margin: 0; position: relative; display: flex; flex-direction: column; }
.rcx-carrier__frame { overflow: hidden; background: var(--shade); border: var(--line-weight); border-radius: var(--chamfer); aspect-ratio: 3 / 2; }
.rcx-carrier__view { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.rcx-carrier__strip { padding-top: 0.75rem; margin-top: 0.75rem; border-top: var(--line-weight); flex: 1; }
.rcx-carrier__headline { margin: 0; font-size: clamp(1.06rem, 1rem + 0.4vw, 1.26rem); }
.rcx-carrier__link { color: var(--graphite); text-decoration: none; transition: color var(--glide); }
.rcx-carrier__link:hover { color: var(--trace); }
.rcx-carrier__link::after { content: ""; position: absolute; inset: 0; }
.rcx-carrier:hover .rcx-carrier__view { transform: scale(1.02); }
.rcx-carrier__note { margin: 0.45rem 0 0; color: var(--pewter); font-size: 0.86rem; max-width: 46ch; }
.rcx-carrier__log {
  margin: 0.6rem 0 0; font-family: var(--digit-stack); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--pewter);
}

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

.rcx-tape { list-style: none; margin: 0; padding: 0; border-top: var(--line-weight); }
.rcx-tape__row {
  display: grid; grid-template-columns: 1fr;
  gap: 0.75rem; align-items: start;
  padding-block: 0.95rem;
  border-bottom: var(--line-weight);
}
.rcx-tape__frame {
  overflow: hidden; background: var(--shade);
  border: var(--line-weight); border-radius: var(--chamfer); aspect-ratio: 3 / 2;
}
.rcx-tape__view { display: block; width: 100%; height: 100%; object-fit: cover; }
.rcx-tape__strip { min-width: 0; }

@media (min-width: 62rem) {
  /* The thumbnail takes 28 percent of the row: a list picture that a reader
     can actually read, not the 90 pixel stamp the rest of the park was using. */
  .rcx-tape__row { grid-template-columns: 28% minmax(0, 1fr); gap: 1.6rem; }
  .rcx-tape__row--plain { grid-template-columns: minmax(0, 1fr); }
}
.rcx-tape__row:hover { background: var(--resist); }
.rcx-tick {
  font-family: var(--digit-stack); font-size: 0.78rem; color: var(--pewter);
  text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap;
}
.rcx-tape__headline { margin: 0; font-size: clamp(1.02rem, 0.98rem + 0.34vw, 1.22rem); }
.rcx-tape__headline a { color: var(--graphite); text-decoration: none; }
.rcx-tape__headline a:hover { color: var(--trace); text-decoration: underline; }
.rcx-tape__intro { margin: 0.35rem 0 0; color: var(--pewter); font-size: 0.88rem; max-width: 74ch; }
.rcx-tape__tag { margin: 0.3rem 0 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: var(--smallcaps-track); color: var(--amber-set); }
.rcx-tape__strip .rcx-tick { margin: 0 0 0.25rem; }

/* =========================================================================
   EXPANSE: single reading column, sticky spine on the RIGHT.
   ========================================================================= */

.rcx-expanse { display: block; }
.rcx-spine { margin-bottom: 2rem; }
.rcx-spine__headline {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: var(--smallcaps-track);
  color: var(--pewter); margin: 0 0 0.6rem; border-top: 3px solid var(--amber); padding-top: 0.6rem;
}
.rcx-spine ul { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.rcx-spine li { border-bottom: var(--line-weight); }
.rcx-spine a {
  display: block; padding-block: 0.5rem; font-size: 0.87rem;
  color: var(--graphite); text-decoration: none;
}
.rcx-spine a:hover { color: var(--trace); }
.rcx-spine [aria-current="page"] { color: var(--amber-set); }

@media (min-width: 1100px) {
  .rcx-expanse {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--spine-width);
    gap: calc(var(--lane) * 2.2);
    align-items: start;
  }
  .rcx-spine { position: sticky; top: 1.6rem; margin-bottom: 0; margin-top: clamp(1.6rem, 3.4vw, 2.8rem); }
}

/* =========================================================================
   PREAMBLE, CAPTURE AND CURRENT: the reading page.
   ========================================================================= */

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

.rcx-capture { margin: 0; }
.rcx-capture__view { width: 100%; aspect-ratio: 21 / 9; max-height: 22rem; object-fit: cover; background: var(--shade); }
.rcx-capture__caption {
  max-width: var(--column-wide); margin-inline: auto;
  padding: 0.7rem var(--gutter) 0;
  font-size: 0.8rem; color: var(--pewter);
}

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

/* Pull quote. */
.rcx-call {
  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(--graphite);
}

/* Note box. */
.rcx-sideband { background: var(--resist); padding: clamp(1.1rem, 2.8vw, 1.8rem); margin: 2.2rem 0; border: var(--line-weight); }
.rcx-sideband > :last-child { margin-bottom: 0; }

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

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

/* Table. */
.rcx-specsheet { margin: 2.4rem 0; overflow-x: auto; border: var(--line-weight); }
.rcx-specsheet table { border-collapse: collapse; width: 100%; min-width: 36rem; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.rcx-specsheet caption {
  text-align: left; padding: 0.85rem 1rem; background: var(--resist);
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: var(--smallcaps-track);
  color: var(--pewter); border-bottom: var(--line-weight);
}
.rcx-specsheet th, .rcx-specsheet td { text-align: left; padding: 0.66rem 1rem; border-bottom: var(--line-weight); vertical-align: top; }
.rcx-specsheet tr:last-child td { border-bottom: 0; }
.rcx-specsheet 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;
}
.rcx-specsheet .rcx-usage { display: block; margin-top: 0.35rem; color: var(--pewter); font-style: italic; }
.rcx-specsheet .rcx-usage::before {
  content: "Usage "; font-style: normal; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: var(--smallcaps-track); color: var(--amber-set);
}

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

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

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

.rcx-footing {
  background: var(--footing); color: var(--footing-ink);
  margin-top: var(--airgap); padding-block: clamp(2.4rem, 5vw, 4rem);
}
.rcx-footing__cols {
  display: grid; gap: var(--lane);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.rcx-footing h2 { font-size: 0.86rem; text-transform: uppercase; letter-spacing: var(--smallcaps-track); margin-bottom: 0.9rem; color: var(--footing-ink); }
.rcx-footing ul { list-style: none; margin: 0; padding: 0; }
.rcx-footing li { margin-bottom: 0.5rem; }
.rcx-footing a { color: var(--footing-link); text-decoration: none; border-bottom: 1px solid transparent; font-size: 0.9rem; }
.rcx-footing a:hover { border-bottom-color: var(--footing-link); }
.rcx-footing p { color: var(--footing-ink); font-size: 0.88rem; max-width: 54ch; }
.rcx-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(--digit-stack); font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--footing-ink);
}

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

@media (max-width: 900px) {
  .rcx-bracket__row { align-items: flex-start; flex-direction: column; }
  .rcx-pinout ul { justify-content: flex-start; }
}
@media (max-width: 640px) {
  :root { --airgap: clamp(2.2rem, 9vw, 3.4rem); }
  .rcx-panel { grid-template-columns: 1fr; }
  .rcx-tape__row { grid-template-columns: 1fr; gap: 0.6rem; }
  .rcx-count__col { border-top-width: 2px; }
  .rcx-faceplate h1 { letter-spacing: 0.03em; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .rcx-carrier:hover .rcx-carrier__view { transform: none; }
}

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

@media print {
  .rcx-bracket, .rcx-footing, .rcx-pinout, .rcx-spine, .rcx-return, .rcx-bypass { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .rcx-current, .rcx-chassis { max-width: none; padding: 0; }
  .rcx-specsheet { overflow: visible; }
  .rcx-harness, .rcx-pitfall, .rcx-sideband { border: 1px solid #999; background: none; }
}