/* ============================================================
   BearingA design system — canonical
   Tokens, type, layout, components.
   Composes against 05_design-system-reference.html v3 ratified.
   ============================================================ */

:root {
  /* paper / ink */
  --paper:   #FFFFFF;
  --paper-2: #FAFAF9;
  --paper-3: #EFEDE6;
  --ink:     #0B0B0C;
  --ink-2:   #2A2A2D;
  --ink-3:   #6B6B72;
  --mute:    #A5A4A8;
  --rule:    #E6E3DC;
  --rule-2:  #C9C5BA;

  /* signal — desaturated, premium */
  --oxblood: #8A1C20;
  --oxblood-ink: #5B1216;
  --amber:   #B47020;
  --amber-2: #D89849;
  --sage:    #3F6A4A;
  --sage-2:  #79927F;
  --steel:   #1F3F62;
  --steel-2: #5B7892;
  --plum:    #553A5B;

  /* type */
  --serif: "Newsreader", "Source Serif 4", "Iowan Old Style", "Georgia", serif;
  --sans:  "IBM Plex Sans", "Söhne", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* layout */
  --pad:  clamp(24px, 4vw, 64px);
  --rail: 168px;
  --site-rail: 240px;
  --site-rail-collapsed: 64px;
  --mast-h: 56px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11", "cv02", "kern", "liga";
}
::selection { background: var(--ink); color: var(--paper); }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ============================================================
   Typographic primitives
   ============================================================ */
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; }
.mono  { font-family: var(--mono); }
.italic { font-style: italic; }
.ox { color: var(--oxblood); font-style: italic; }
.am { color: var(--amber-2); font-style: italic; }

.eyebrow,
.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "zero";
}

.h-display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 0.98;
  font-size: clamp(48px, 7.2vw, 116px);
  text-wrap: pretty;
  margin: 0;
}
.h-section {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.02;
  font-size: clamp(34px, 4.4vw, 64px);
  text-wrap: pretty;
  margin: 0;
}
.h-card {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.06;
  font-size: clamp(22px, 2vw, 28px);
  margin: 0;
}
.h-display em, .h-section em, .h-card em {
  font-style: italic;
  color: var(--oxblood);
  font-weight: 400;
}

.lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 1.5vw, 24px);
  line-height: 1.4;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  max-width: 58ch;
  text-wrap: pretty;
  margin: 0;
}

.body {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 64ch;
  text-wrap: pretty;
}
.body p { margin: 0 0 1em; }
.body p:last-child { margin-bottom: 0; }
.body em { font-style: italic; color: var(--oxblood); }
.body strong { font-weight: 500; color: var(--ink); }

.small { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); max-width: 64ch; }

/* ============================================================
   Frame & layout
   ============================================================ */
.frame {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.rule  { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.rule-2 { border: 0; border-top: 2px solid var(--ink); margin: 0; }

/* Site shell when persistent rail is present */
.site {
  display: grid;
  grid-template-columns: var(--site-rail) 1fr;
  grid-template-rows: var(--mast-h) 1fr;
  grid-template-areas:
    "rail mast"
    "rail content";
  min-height: 100vh;
}
.site.rail-collapsed { grid-template-columns: var(--site-rail-collapsed) 1fr; }
.site.warm-path { grid-template-columns: 1fr; grid-template-areas: "mast" "content"; }
.site.warm-path .site-rail { display: none; }

/* Section opener — canonical 168 | 1fr | auto */
.sec-open {
  display: grid;
  grid-template-columns: var(--rail) 1fr auto;
  gap: 40px;
  align-items: start;
  border-top: 2px solid var(--ink);
  padding-top: 28px;
}
.sec-open .rail-idx {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.6;
}
.sec-open .rail-idx .idx { color: var(--ink); display: block; font-size: 12.5px; }
.sec-open h2 { margin: 0; max-width: 18ch; }
.sec-open .aux {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  line-height: 1.7;
  white-space: pre-line;
}
.sec-open .aux em { font-style: italic; color: var(--ink); text-transform: none; letter-spacing: 0; }

/* Body within a section — rail meta + 1fr content */
.sec-body {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: 40px;
  padding: 32px 0 0;
}
.sec-body .rail-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.7;
  white-space: pre-line;
}
.sec-body .content { min-width: 0; }

/* Asymmetric two-column hero-grid */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 80px;
}
.hero-grid.start { align-items: start; }

/* ============================================================
   Masthead — fixed top
   ============================================================ */
.masthead {
  grid-area: mast;
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--mast-h);
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--rule);
}
.masthead-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 0 var(--pad);
  height: 100%;
}
.mark-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}
.mark-lockup svg { display: block; flex-shrink: 0; }
.mark-lockup .wm {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
}
.mark-lockup .wm em { font-style: italic; color: var(--oxblood); font-weight: 400; }
.mark-lockup .sub {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-left: 1px solid var(--rule-2);
  padding-left: 10px;
  margin-left: 4px;
  align-self: center;
  line-height: 1;
}

.mast-utility {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 3px rgba(63,106,74,0.16);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(63,106,74,0.16); }
  50%      { box-shadow: 0 0 0 5px rgba(63,106,74,0.08); }
}

.cta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  border: 1px solid var(--ink);
  transition: background .15s ease, color .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cta:hover { background: transparent; color: var(--ink); }
.cta-ghost {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink);
  padding: 8px 16px;
  border: 1px solid var(--ink);
  transition: background .15s ease, color .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cta-ghost:hover { background: var(--ink); color: var(--paper); }

/* ============================================================
   Persistent left rail
   ============================================================ */
.site-rail {
  grid-area: rail;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  background: var(--paper-2);
  border-right: 1px solid var(--rule);
  padding: 24px 24px 24px 24px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 32px;
  overflow: hidden;
}
.site-rail .rail-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.site-rail .rail-mark .wm {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}
.site-rail .rail-mark .wm em { font-style: italic; color: var(--oxblood); font-weight: 400; }

.rail-section { display: grid; gap: 4px; }
.rail-section .rail-section-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
  padding-bottom: 4px;
}
.rail-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 10px 12px 10px 14px;
  border-left: 2px solid transparent;
  margin-left: -16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
  position: relative;
}
.rail-link .idx {
  color: var(--mute);
  font-size: 10px;
  letter-spacing: 0.08em;
}
.rail-link:hover { color: var(--oxblood); }
.rail-link[aria-current="page"] {
  color: var(--oxblood);
  border-left-color: var(--ink);
  font-weight: 500;
}
.rail-link[aria-current="page"] .idx { color: var(--oxblood); }

.rail-section.secondary {
  border-top: 1px solid var(--rule);
  padding-top: 20px;
  margin-top: 8px;
}
.rail-section.secondary .rail-link {
  font-size: 10px;
  color: var(--ink-3);
  padding: 6px 12px 6px 14px;
}
.rail-section.secondary .rail-link[aria-current="true"] {
  color: var(--ink);
  border-left-color: var(--oxblood);
}
.rail-section.secondary .rail-link:hover { color: var(--ink); }

.rail-bottom {
  display: grid;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.rail-collapse-btn {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: transparent;
  border: 0;
  padding: 6px 0;
  text-align: left;
  cursor: pointer;
  transition: color .15s ease;
}
.rail-collapse-btn:hover { color: var(--ink); }

.rail-meta-bottom {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.7;
}
.rail-meta-bottom .dot { color: var(--sage); }

/* Collapsed state */
.site.rail-collapsed .site-rail {
  padding: 16px 8px;
}
.site.rail-collapsed .site-rail .wm,
.site.rail-collapsed .site-rail .rail-section-label,
.site.rail-collapsed .site-rail .rail-link span:not(.idx),
.site.rail-collapsed .site-rail .rail-meta-bottom,
.site.rail-collapsed .site-rail .rail-section.secondary {
  display: none;
}
.site.rail-collapsed .site-rail .rail-mark {
  justify-content: center;
  padding-bottom: 16px;
}
.site.rail-collapsed .site-rail .rail-link {
  justify-content: center;
  grid-template-columns: auto;
  padding: 12px 0;
  margin-left: 0;
  border-left: 0;
  text-align: center;
}
.site.rail-collapsed .site-rail .rail-link .idx { display: none; }
.site.rail-collapsed .site-rail .rail-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px; bottom: 8px;
  width: 2px;
  background: var(--ink);
}

/* ============================================================
   Site content area
   ============================================================ */
.site-content {
  grid-area: content;
  min-width: 0;
}

/* ============================================================
   Hero (page-level)
   ============================================================ */
.hero {
  padding: clamp(48px, 9vh, 110px) var(--pad) clamp(40px, 6vh, 80px);
  max-width: 1480px;
  margin: 0 auto;
}
.hero-eyebrow {
  display: grid;
  grid-template-columns: var(--rail) 1fr auto;
  gap: 40px;
  align-items: end;
  padding-bottom: 32px;
}
.hero-eyebrow .rail-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.7;
  white-space: pre-line;
}
.hero-eyebrow .rail-meta .idx { color: var(--ink); }
.hero-eyebrow .eyebrow-title {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero-eyebrow .meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  line-height: 1.7;
  white-space: pre-line;
}

.hero-h {
  display: grid;
  grid-template-columns: var(--rail) 1fr auto;
  gap: 40px;
  align-items: end;
}
.hero-h .spacer {}
.hero-h h1 { margin: 0; max-width: 22ch; }
.hero-h .aux {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  line-height: 1.7;
  white-space: pre-line;
  padding-bottom: 14px;
  align-self: end;
}
.hero-h .aux em { font-style: italic; color: var(--ink); text-transform: none; letter-spacing: 0; }

.hero-lede {
  padding: 36px 0 0 calc(var(--rail) + 40px);
  max-width: calc(58ch + var(--rail) + 40px);
}
.hero-body {
  padding: 36px 0 0 calc(var(--rail) + 40px);
  max-width: calc(64ch + var(--rail) + 40px);
}

/* ============================================================
   Section spacing
   ============================================================ */
.section {
  padding: clamp(96px, 11vh, 150px) var(--pad) 0;
  max-width: 1480px;
  margin: 0 auto;
}
.section.tight { padding-top: clamp(64px, 7vh, 96px); }
.section + .section { padding-top: clamp(96px, 11vh, 150px); }
.section .body-row {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: 40px;
  padding-top: 36px;
}
.section .body-row .body { min-width: 0; }

/* ============================================================
   Hairlines
   ============================================================ */
.hairline {
  max-width: 1480px;
  margin: clamp(48px, 6vh, 80px) auto 0;
  padding: 0 var(--pad);
}
.hairline hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.hairline.section-cap hr { border-top: 2px solid var(--ink); }

/* ============================================================
   Components — chips, tags, stats, cards
   ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--rule-2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 4px 10px;
  border-radius: 999px;
  line-height: 1;
}
.chip.amber { color: var(--amber); border-color: var(--amber); }
.chip.sage  { color: var(--sage);  border-color: var(--sage); }
.chip.steel { color: var(--steel); border-color: var(--steel); }
.chip.oxblood { color: var(--oxblood); border-color: var(--oxblood); }
.chip.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tag::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--ink);
}
.tag.amber::before { background: var(--amber); }
.tag.sage::before { background: var(--sage); }
.tag.steel::before { background: var(--steel); }
.tag.oxblood::before { background: var(--oxblood); }

.stat {
  display: grid;
  gap: 8px;
}
.stat .num {
  font-family: var(--serif);
  font-size: clamp(40px, 4.2vw, 56px);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1;
  color: var(--ink);
}
.stat .num.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.stat .unit {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.stat .lbl {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.5;
}

/* Cards */
.card {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 24px;
  display: grid;
  gap: 12px;
}
.card .card-head {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: baseline;
}
.card .card-head .idx { color: var(--ink); }
.card .card-head .status { color: var(--sage); font-style: italic; text-transform: none; letter-spacing: 0; }
.card .card-head .status.amber  { color: var(--amber); }
.card .card-head .status.oxblood { color: var(--oxblood); }
.card .card-head .status.steel  { color: var(--steel); }
.card .card-title {
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: -0.008em;
  line-height: 1.15;
  margin: 0;
}
.card .card-body { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }

/* ============================================================
   Terminal panel — offset-shadow editorial "raised box"
   ============================================================ */
.terminal {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 14px 14px 0 -1px var(--paper-3), 14px 14px 0 0 var(--ink-2);
  padding: 0;
}
.terminal-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 14px 20px;
  border-bottom: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.terminal-head .terminal-title { color: var(--paper); font-weight: 500; }
.terminal-head .terminal-meta { color: rgba(255,255,255,0.55); }
.terminal-body { padding: 24px; }
.terminal-body .mono-output {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.65;
  white-space: pre;
  overflow-x: auto;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

/* ============================================================
   Phase × cluster matrix grid
   ============================================================ */
.matrix {
  display: grid;
  grid-template-columns: 200px repeat(4, 1fr);
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
}
.matrix .cell {
  background: var(--paper);
  padding: 16px;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.matrix .cell.head {
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 12px 16px;
  min-height: auto;
  justify-content: center;
}
.matrix .cell.row-head {
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  justify-content: center;
}
.matrix .cell.row-head .sub {
  color: var(--ink-3);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  display: block;
  margin-top: 4px;
}
.matrix .cell .mono-id {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.matrix .cell .phase {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.matrix .cell .phase.escalating { color: var(--amber); }
.matrix .cell .phase.absorbing  { color: var(--steel); }
.matrix .cell .phase.resolving  { color: var(--sage); }
.matrix .cell .severity {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.matrix .cell.empty { background: var(--paper); }

/* ============================================================
   Trace — inline citation reachable on hover
   ============================================================ */
.trace {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--mono);
  font-size: inherit;
  color: var(--ink);
  border-bottom: 1px dashed var(--rule-2);
  cursor: help;
  padding-bottom: 1px;
}
.trace:hover { border-bottom-color: var(--oxblood); color: var(--oxblood); }
.trace::after {
  content: attr(data-cite);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  padding: 8px 12px;
  min-width: 240px;
  max-width: 360px;
  text-transform: none;
  white-space: pre-line;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 20;
}
.trace:hover::after { opacity: 1; }

/* ============================================================
   Cross — geometric measurement primitive
   ============================================================ */
.cross {
  display: inline-block;
  width: 8px;
  height: 8px;
  position: relative;
  vertical-align: middle;
}
.cross::before, .cross::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.cross::before {
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  transform: translateX(-50%);
}
.cross::after {
  top: 50%; left: 0; right: 0;
  height: 1px;
  transform: translateY(-50%);
}

/* ============================================================
   Dark section — light surface only, dark BLOCKS
   ============================================================ */
.dark-section {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  padding: clamp(96px, 11vh, 150px) var(--pad);
}
.dark-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    var(--oxblood) 0%,
    var(--amber-2) 25%,
    var(--steel-2) 50%,
    var(--sage-2) 75%,
    var(--plum) 100%);
  opacity: 0.7;
}
.dark-section .body { color: rgba(255,255,255,0.78); }
.dark-section .small { color: rgba(255,255,255,0.55); }
.dark-section .body em { color: var(--amber-2); }
.dark-section .h-display em, .dark-section .h-section em, .dark-section .h-card em {
  color: var(--amber-2);
}
.dark-section .eyebrow, .dark-section .kicker { color: rgba(255,255,255,0.55); }
.dark-section .rule { border-top-color: rgba(255,255,255,0.18); }
.dark-section .sec-open { border-top-color: var(--paper); }
.dark-section .sec-open .rail-idx { color: rgba(255,255,255,0.55); }
.dark-section .sec-open .rail-idx .idx { color: var(--paper); }
.dark-section .sec-open .aux { color: rgba(255,255,255,0.55); }
.dark-section .sec-body .rail-meta { color: rgba(255,255,255,0.55); }

/* ============================================================
   Gate cards (landing)
   ============================================================ */
.gate-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.gate-card {
  display: grid;
  grid-template-columns: 80px 140px 1fr auto;
  gap: 32px;
  align-items: start;
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
  transition: background .15s ease, padding .15s ease;
  cursor: pointer;
  position: relative;
}
.gate-card:hover {
  background: var(--paper-2);
}
.gate-card .gate-idx {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}
.gate-card .gate-status {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.gate-card.active .gate-status { color: var(--sage); }
.gate-card.coming .gate-status { color: var(--ink-3); }
.gate-card .gate-content { display: grid; gap: 8px; }
.gate-card .gate-title {
  font-family: var(--serif);
  font-size: clamp(22px, 1.8vw, 26px);
  letter-spacing: -0.012em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}
.gate-card .gate-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 64ch;
}
.gate-card .gate-cta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap .15s ease, color .15s ease;
  white-space: nowrap;
}
.gate-card.coming .gate-cta { color: var(--ink-3); }
.gate-card:hover .gate-cta { gap: 14px; color: var(--oxblood); }
.gate-card .gate-cta .arrow { transition: transform .15s ease; }
.gate-card:hover .gate-cta .arrow { transform: translateX(4px); }

/* ============================================================
   Footer
   ============================================================ */
.foot {
  background: var(--paper);
  border-top: 2px solid var(--ink);
  padding: 110px var(--pad) 36px;
  margin-top: clamp(96px, 12vh, 160px);
}
.foot-inner { max-width: 1480px; margin: 0 auto; }
.foot-wm {
  font-family: var(--serif);
  font-size: clamp(64px, 10vw, 144px);
  font-weight: 400;
  letter-spacing: -0.024em;
  line-height: 0.92;
  color: var(--ink);
  margin-bottom: 56px;
  max-width: 8ch;
}
.foot-wm em { font-style: italic; color: var(--oxblood); font-weight: 400; }
.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--rule);
}
.foot-col h4 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin: 0 0 14px;
}
.foot-col ul { list-style: none; padding: 0; margin: 0; }
.foot-col li {
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--ink);
  padding: 5px 0;
}
.foot-col li a { display: inline-block; position: relative; transition: color .15s ease; }
.foot-col li a:hover { color: var(--oxblood); }
.foot-col .ext {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: none;
}
.foot-col li.aside {
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0;
  color: var(--ink-3);
  margin-top: 6px;
  line-height: 1.5;
}
.foot-bottom {
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.foot-bottom em { font-style: italic; color: var(--ink); text-transform: none; letter-spacing: 0; }

/* ============================================================
   Architectural footer band on landing
   ============================================================ */
.arch-band {
  background: var(--paper-2);
  padding: clamp(64px, 8vh, 110px) var(--pad);
  margin-top: clamp(80px, 10vh, 130px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.arch-band-inner {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: 40px;
}
.arch-band-inner .rail-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.arch-band-inner .rail-meta .idx { color: var(--ink); display: block; font-size: 12.5px; margin-bottom: 4px; }
.arch-band-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.arch-band-grid .item h4 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 14px;
  font-weight: 500;
}
.arch-band-grid .item p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.arch-band-grid .item p strong { color: var(--ink); font-weight: 500; }

/* ============================================================
   Path navigator (for /icaap level switcher)
   ============================================================ */
.path-nav {
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.path-nav-inner {
  display: grid;
  grid-template-columns: var(--rail) 1fr auto;
  gap: 40px;
  padding: 20px var(--pad);
  max-width: 1480px;
  margin: 0 auto;
  align-items: center;
}
.path-nav .label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.path-nav .steps {
  display: flex;
  gap: 32px;
}
.path-nav .step {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.path-nav .step:hover { color: var(--ink); border-bottom-color: var(--rule-2); }
.path-nav .step[aria-current="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.path-nav .step .idx { color: var(--ink); }
.path-nav .meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ============================================================
   FTI step cards (ICAAP Level 02)
   ============================================================ */
.fti-step {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: 40px;
  padding: 48px 0;
  border-top: 1px solid var(--rule);
}
.fti-step:first-child { border-top: 0; }
.fti-step .step-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.6;
}
.fti-step .step-label .idx {
  color: var(--ink);
  display: block;
  font-size: 12.5px;
  margin-bottom: 4px;
}
.fti-step .step-content h3 {
  font-family: var(--serif);
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 400;
  letter-spacing: -0.014em;
  line-height: 1.1;
  margin: 0 0 20px;
  max-width: 22ch;
}
.fti-step .step-content h3 em { font-style: italic; color: var(--oxblood); font-weight: 400; }
.fti-step .step-position {
  margin-top: 24px;
  padding: 20px 24px;
  border-left: 2px solid var(--oxblood);
  background: var(--paper-2);
  font-family: var(--serif);
  font-style: italic;
  font-size: 17.5px;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 64ch;
  letter-spacing: -0.005em;
}

/* ============================================================
   Live config panel (matrix-adjacent)
   ============================================================ */
.config-panel {
  border: 1px solid var(--ink);
  background: var(--paper);
}
.config-panel-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  padding: 14px 20px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.config-panel-head .live { color: var(--sage-2); }
.config-panel-row {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  grid-template-areas:
    "id    name"
    "id    detail";
  grid-template-rows: auto 1fr;
  column-gap: 28px;
  row-gap: 10px;
  padding: 24px;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.config-panel-row .id-block    { grid-area: id; align-self: start; }
.config-panel-row .name-block  { grid-area: name; align-self: end; padding-bottom: 4px; }
.config-panel-row .detail-block { grid-area: detail; }
.config-panel-row:first-of-type { border-top: 0; }
.config-panel-row .id-block {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink);
  line-height: 1.6;
}
.config-panel-row .id-block .phase {
  display: block;
  margin-top: 8px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.config-panel-row .id-block .phase.escalating { color: var(--amber); }
.config-panel-row .id-block .phase.absorbing  { color: var(--steel); }
.config-panel-row .id-block .phase.resolving  { color: var(--sage); }
.config-panel-row .name-block {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: -0.008em;
  line-height: 1.2;
  color: var(--ink);
}
.config-panel-row .detail-block {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 64ch;
}
.config-panel-row .detail-block .trace-line {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

/* ============================================================
   Numeric output panel (quantification, etc.)
   ============================================================ */
.numeric-panel {
  border: 1px solid var(--rule);
  background: var(--paper);
}
.numeric-panel-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 16px 24px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.numeric-panel-head .name {
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink);
}
.numeric-panel-body { padding: 24px; }
.numeric-panel-body .group + .group { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--rule); }
.numeric-panel-body h4 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 12px;
  font-weight: 500;
}
.numeric-panel-body .row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 6px 0;
  font-family: var(--mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.numeric-panel-body .row .val { color: var(--ink); font-weight: 500; }

/* ============================================================
   Pillar grid (4-column)
   ============================================================ */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.pillar-grid .pillar {
  padding: 32px 32px 32px 0;
  border-right: 1px solid var(--rule);
  display: grid;
  gap: 14px;
  align-content: start;
}
.pillar-grid .pillar:last-child { border-right: 0; padding-right: 0; }
.pillar-grid .pillar:not(:first-child) { padding-left: 32px; }
.pillar-grid .pillar .pillar-idx {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}
.pillar-grid .pillar .pillar-idx .l { color: var(--ink); }
.pillar-grid .pillar .pillar-title {
  font-family: var(--serif);
  font-size: clamp(20px, 1.6vw, 26px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.pillar-grid .pillar .pillar-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* ============================================================
   Honest-emphasis paragraph
   ============================================================ */
.emphasis-iso {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 1.9vw, 28px);
  letter-spacing: -0.008em;
  line-height: 1.35;
  color: var(--ink);
  max-width: 44ch;
  padding: 32px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.emphasis-iso em { color: var(--oxblood); }

/* ============================================================
   Form (input substrate) — for /icaap/read
   ============================================================ */
.input-substrate {
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 40px;
}
.input-substrate h3 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 24px;
  font-weight: 500;
}
.input-substrate label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.input-substrate input[type="text"],
.input-substrate input[type="url"],
.input-substrate input[type="email"] {
  width: 100%;
  font-family: var(--mono);
  font-size: 14px;
  padding: 12px 14px;
  border: 1px solid var(--rule-2);
  background: var(--paper);
  color: var(--ink);
  transition: border-color .15s ease;
}
.input-substrate input:focus {
  outline: none;
  border-color: var(--ink);
}
.input-substrate .divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  margin: 28px 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.input-substrate .divider::before, .input-substrate .divider::after {
  content: "";
  height: 1px;
  background: var(--rule);
}
.input-substrate .profile-options {
  display: grid;
  gap: 8px;
}
.input-substrate .profile-options button {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
}
.input-substrate .profile-options button:hover,
.input-substrate .profile-options button.selected {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper-2);
}
.input-substrate .profile-options button .marker { color: var(--ink-3); }
.input-substrate .profile-options button.selected .marker { color: var(--oxblood); }
.input-substrate .submit-row {
  margin-top: 32px;
  display: flex;
  justify-content: flex-end;
}

/* ============================================================
   Cascade flow (Step 03 framework enhancement)
   ============================================================ */
.cascade-flow {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 0;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.cascade-flow .col-head {
  padding: 16px 20px;
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
}
.cascade-flow .arrow-head {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}
.cascade-flow .row {
  padding: 16px 20px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
}
.cascade-flow .row:last-child { border-bottom: 0; }
.cascade-flow .row.unchanged { color: var(--ink-3); font-style: italic; }
.cascade-flow .arrow {
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 14px;
}
.cascade-flow .arrow:last-child { border-bottom: 0; }

/* ============================================================
   Mini section index (within-page)
   ============================================================ */
.mini-idx {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: 40px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}
.mini-idx .label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mini-idx .anchors {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.mini-idx .anchor {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  transition: color .15s ease;
}
.mini-idx .anchor:hover { color: var(--ink); }
.mini-idx .anchor .idx { color: var(--ink-3); }

/* ============================================================
   Utility
   ============================================================ */
.text-ink   { color: var(--ink); }
.text-ink-2 { color: var(--ink-2); }
.text-ink-3 { color: var(--ink-3); }
.text-oxblood { color: var(--oxblood); }
.text-amber  { color: var(--amber); }
.text-sage   { color: var(--sage); }
.text-steel  { color: var(--steel); }

.mt-0  { margin-top: 0; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mt-64 { margin-top: 64px; }
.mt-80 { margin-top: 80px; }

.mb-0  { margin-bottom: 0; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }
.mb-64 { margin-bottom: 64px; }