/* ==========================================================================
   How Regulatory Order Reaches Actors — Framework v5

   Type is deliberately not coded to any jurisdiction. The framework compares
   regulatory orders across national authorities, so setting it in any one
   government's civic typeface would put a thumb on the scale. Source Sans 3 is
   neutral, holds up at small sizes in dense tables, and carries wide Latin,
   Greek, and Cyrillic coverage. Hangul and CJK fall back to system faces so
   entity names in case files render in a matched weight rather than a default.
   ========================================================================== */

:root {
  /* Ground: warm document stock, held a clear step off white so hairline
     rules and traces sit on a calm field rather than glare. */
  --paper:       #F3F0EA;
  --plate:       #FAF8F4;
  --plate-sunk:  #E4DFD4;
  --ink:         #1B1F24;
  --ink-soft:    #2C3238;
  --muted:       #5B6169;
  --rule:        #B4AFA3;
  --rule-faint:  #DBD6CB;

  /* One accent. Muted blueprint teal, used for structure, traces, and links. */
  --accent:        #3A5A6C;
  --accent-strong: #2C4653;
  --accent-soft:   #D2DDE2;
  /* Caution only: unresolved points, scope limits, warnings. Rust, used rarely. */
  --flag:        #B4532A;
  --flag-soft:   #ECD8CD;

  --display: "Source Serif 4", Georgia, serif;
  --body:    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI",
             "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR",
             "Hiragino Sans", "Noto Sans SC", sans-serif;
  --mono:    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI",
             "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR",
             "Hiragino Sans", "Noto Sans SC", sans-serif;

  --measure: 68ch;
  --gutter:  clamp(1.25rem, 4vw, 3.5rem);
  --shell:   1180px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.03rem, 0.99rem + 0.2vw, 1.09rem);
  line-height: 1.64;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------- skip link */
.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--plate);
  padding: 0.6rem 1rem; z-index: 100;
  font: 600 0.8rem/1 var(--mono);
}
.skip:focus { left: 1rem; top: 1rem; }

/* -------------------------------------------------------------------- shell */
.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------------------------------------------------------------- masthead */
.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--plate);
}
.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.75rem;
  padding-block: 0.85rem;
}
.masthead__mark {
  font: 600 0.8125rem/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.masthead__mark:hover { color: var(--accent); }
.masthead__ver {
  font: 500 0.6875rem/1 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--plate);
  background: var(--accent);
  padding: 0.28rem 0.44rem;
  margin-left: 0.5rem;
}

.nav { margin-left: auto; }
.nav ul {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.15rem;
  list-style: none; margin: 0; padding: 0;
}
.nav a {
  font: 500 0.8125rem/1.4 var(--body);
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: 0.2rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--accent); border-bottom-color: var(--accent-soft); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* ------------------------------------------------------------------ typeset */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 1.15; margin: 0; }

h1 {
  font-size: clamp(2.1rem, 1.4rem + 3.1vw, 3.6rem);
  letter-spacing: -0.018em;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 1.95rem);
  letter-spacing: -0.012em;
}
h3 { font-size: 1.1875rem; letter-spacing: -0.006em; }

p { margin: 0 0 1.05em; max-width: var(--measure); }
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--accent-strong); }

/* eyebrow — a section reference, not decoration: it carries the § number */
.eyebrow {
  font: 600 0.6875rem/1 var(--mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 0.85rem;
}
.eyebrow--accent { color: var(--accent); }

.standfirst {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 56ch;
}

.lede { max-width: 62ch; }

/* --------------------------------------------------------------- structure */
.section { padding-block: clamp(2.75rem, 6vw, 4.75rem); }
.section + .section { border-top: 1px solid var(--rule-faint); }

.hero { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(1.25rem, 2.5vw, 1.75rem); }
.hero + .section { padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.section--tight { padding-block: clamp(1.75rem, 4vw, 2.75rem); }

.plate {
  background: var(--plate);
  border: 1px solid var(--rule);
  padding: clamp(1.25rem, 3vw, 2rem);
}

/* ------------------------------------------------- change bar (revision rule)
   Federal Register and EU consolidated texts mark amended passages with a
   vertical rule in the margin. Used here for notes explaining what v3 changed. */
.changebar {
  border-left: 3px solid var(--accent);
  padding: 0.15rem 0 0.15rem 1.15rem;
  margin: 1.75rem 0;
  max-width: var(--measure);
}
.changebar__label {
  font: 600 0.6875rem/1 var(--mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.5rem;
}
.changebar p:last-child { margin-bottom: 0; }

.changebar--flag { border-left-color: var(--flag); }
.changebar--flag .changebar__label { color: var(--flag); }

/* --------------------------------------------------------- the three modules
   Equal weight, neither containing the other: 1 and 2 are independent
   classification axes, 3 is a differently-shaped process, but none is
   subordinate to the others, so all three read as siblings. */
.axes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.axes--three { grid-template-columns: repeat(3, 1fr); }
.axes--one   { grid-template-columns: 1fr; }
.axis {
  position: relative;
  background: var(--plate);
  padding: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.25rem);
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.axis:hover, .axis:focus-visible { background: var(--plate-sunk); }
.axis::after {
  content: "→";
  position: absolute;
  right: clamp(1.25rem, 3vw, 2rem);
  bottom: clamp(1.25rem, 3vw, 2rem);
  color: var(--accent);
  font: 600 1.0625rem/1 var(--mono);
  transition: transform 0.15s ease;
}
.axis:hover::after, .axis:focus-visible::after { transform: translateX(3px); }
.axis__q {
  font-family: var(--display);
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0.65rem 0 0;
}
/* the joint between the two axes */
.axes-note {
  border: 1px solid var(--rule);
  border-top: none;
  background: var(--plate-sunk);
  padding: 0.95rem clamp(1.25rem, 3vw, 2rem);
  font: 500 0.875rem/1.55 var(--body);
  color: var(--ink-soft);
  max-width: none;
}
.layer-index {
  list-style: none;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.layer-index li { padding: 0; }
.layer-index li span {
  font: 600 0.75rem/1 var(--mono);
  color: var(--accent);
  margin-right: 0.6rem;
}

/* -------------------------------------------------------------- spotlight
   Case library call-to-action: the one box on the page that isn't white,
   so it reads as the next step rather than a fourth peer of the modules. */
.spotlight {
  position: relative;
  display: block;
  margin-top: 1.5rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--plate);
  text-decoration: none;
  padding: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.25rem);
  padding-right: clamp(3rem, 6vw, 4rem);
  transition: background-color 0.15s ease;
}
.spotlight:hover, .spotlight:focus-visible { background: #0B4A50; }
.spotlight::after {
  content: "→";
  position: absolute;
  right: clamp(1.25rem, 3vw, 2rem);
  bottom: clamp(1.25rem, 3vw, 2rem);
  color: var(--plate);
  font: 600 1.0625rem/1 var(--mono);
  transition: transform 0.15s ease;
}
.spotlight:hover::after, .spotlight:focus-visible::after { transform: translateX(3px); }
.spotlight .eyebrow { color: #BFE0E0; }
.spotlight__q {
  font-family: var(--display);
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--plate);
  margin: 0.65rem 0 0;
}
.spotlight__cases {
  font: 500 0.875rem/1.5 var(--mono);
  color: #BFE0E0;
  margin: 0.75rem 0 0;
}

/* --------------------------------------------------------- the two-step branch
   2.1 is a two-step branch, not three flat columns. The indent encodes the step. */
.branch { margin: 1.5rem 0 0; border-left: 1px solid var(--rule); padding-left: 0; }
.branch__step { padding: 0 0 0 1.4rem; position: relative; margin-bottom: 1.6rem; }
.branch__step::before {
  content: "";
  position: absolute; left: 0; top: 0.85rem;
  width: 1.05rem; height: 1px; background: var(--rule);
}
.branch__step:last-child { margin-bottom: 0; }
.branch__q {
  font: 600 0.75rem/1 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.7rem;
}
.branch__outcomes { display: grid; gap: 0.65rem; margin: 0; padding: 0; list-style: none; }
.branch__outcome {
  background: var(--plate);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule);
  padding: 0.8rem 1rem;
  max-width: 60ch;
}
.branch__outcome b { font-size: 0.9375rem; }
.branch__outcome > span { display: block; font-size: 0.875rem; color: var(--muted); margin-top: 0.25rem; }
.branch__outcome--exit { border-left-color: var(--flag); }
.branch__outcome--go   { border-left-color: var(--accent); }
.branch__nest { margin-left: 1.4rem; }

/* -------------------------------------------------------------- subheading
   The section number carries the reference into the framework document. */
.sub {
  display: flex; align-items: baseline; gap: 0.75rem;
  margin: 3rem 0 0.9rem;
}
.sub span {
  font: 600 0.75rem/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--accent);
}
.section > .shell > .sub:first-of-type { margin-top: 2.25rem; }

/* ------------------------------------------------------------ spec tables
   The source document is a set of definition tables. Kept as tables. */
.spec {
  width: 100%;
  border-collapse: collapse;
  margin: 1.1rem 0 0;
  font-size: 0.9375rem;
  background: var(--plate);
  border: 1px solid var(--rule);
}
.spec caption {
  caption-side: top; text-align: left;
  font: 600 0.6875rem/1.4 var(--mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 0.65rem;
}
.spec th, .spec td {
  text-align: left; vertical-align: top;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--rule-faint);
}
.spec thead th {
  font: 600 0.6875rem/1.3 var(--mono);
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted);
  background: var(--plate-sunk);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.spec tbody th { font-weight: 600; width: 22%; }
.spec tbody th span {
  display: block; margin-top: 0.2rem;
  font: 500 0.6875rem/1.4 var(--mono);
  color: var(--muted);
}
.spec tbody tr:last-child th, .spec tbody tr:last-child td { border-bottom: none; }
.spec--q tbody th { width: 26%; }
.spec--q td:first-of-type { font: 500 0.8125rem/1.5 var(--mono); color: var(--muted); white-space: nowrap; }
.spec--form td { background: repeating-linear-gradient(var(--plate-sunk) 0 100%); min-height: 2rem; }
.spec--form tbody th { width: 40%; font-weight: 500; }

/* footnote-weight text: these are marginal notes in the source, not callouts */
.note {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 66ch;
  margin: 0.9rem 0 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--rule);
}

@media (max-width: 720px) {
  .spec, .spec thead, .spec tbody, .spec tr, .spec th, .spec td { display: block; width: auto; }
  .spec thead { display: none; }
  .spec tbody tr { border-bottom: 1px solid var(--rule); padding: 0.35rem 0; }
  .spec tbody tr:last-child { border-bottom: none; }
  .spec tbody th { width: auto; padding-bottom: 0.25rem; }
  .spec td { padding-top: 0.25rem; color: var(--ink-soft); }
  .spec--form td { min-height: 1.75rem; }
}

/* ------------------------------------------------------- quantitative fields */
.qtable { width: 100%; border-collapse: collapse; margin-top: 1.25rem; font-size: 0.9375rem; }
.qtable caption {
  caption-side: top; text-align: left;
  font: 600 0.6875rem/1 var(--mono);
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 0.7rem;
}
.qtable th, .qtable td {
  border-bottom: 1px solid var(--rule-faint);
  padding: 0.7rem 0.9rem 0.7rem 0;
  text-align: left;
  vertical-align: top;
}
.qtable thead th {
  font: 600 0.6875rem/1 var(--mono);
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--rule);
}
.qtable td:first-child { font: 500 0.8125rem/1.5 var(--mono); white-space: nowrap; }
.qtable td:nth-child(2) { font: 500 0.8125rem/1.5 var(--mono); color: var(--muted); white-space: nowrap; }

/* ------------------------------------------------------------------- tokens */
.tag {
  display: inline-block;
  font: 500 0.75rem/1 var(--mono);
  padding: 0.3rem 0.45rem;
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}
.tag--flag { background: var(--flag-soft); color: var(--flag); }
.tag--dash { background: var(--plate-sunk); color: var(--muted); }

/* ---------------------------------------------------------------- callout */
.callout {
  background: var(--plate-sunk);
  border: 1px solid var(--rule);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  margin: 1.75rem 0;
}
.callout p:last-child { margin-bottom: 0; }

/* Entry-point list. Each row is a condition, so the arrow does the pointing and
   the marker would only add noise. */
.callout ul {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  border-top: 1px solid var(--rule-faint);
}
.callout ul li {
  border-bottom: 1px solid var(--rule-faint);
  padding: 0.6rem 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.callout ul li a { font-weight: 600; white-space: nowrap; }
.callout__label {
  font: 600 0.6875rem/1 var(--mono);
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--muted); display: block; margin-bottom: 0.6rem;
}

/* ------------------------------------------------------------ empty states */
.empty {
  border: 1px dashed var(--rule);
  background: var(--plate);
  padding: clamp(1.75rem, 5vw, 3rem);
  text-align: left;
  max-width: 60ch;
}
.empty h3 { margin-bottom: 0.6rem; }
.empty p { color: var(--muted); }

/* ----------------------------------------------------------------- footer */
.foot {
  border-top: 1px solid var(--rule);
  background: var(--plate);
  padding-block: 2.25rem;
  font-size: 0.875rem;
  color: var(--muted);
}
.foot p { max-width: 62ch; }
.foot p:last-child { margin-bottom: 0; }

/* Author block. Reads from _data/author.yml so the name lives in one place. */
.byline--foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 2rem;
  padding-bottom: 1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule-faint);
}
.byline--foot > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
}
.byline--foot b {
  font: 600 0.9375rem/1.3 var(--body);
  color: var(--ink);
}
.byline--foot > div span {
  font: 500 0.75rem/1.3 var(--mono);
  color: var(--muted);
}
.byline--foot ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.byline--foot ul a {
  font: 600 0.72rem/1.3 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.byline--foot ul a:hover,
.byline--foot ul a:focus-visible {
  color: var(--accent-strong);
  border-bottom-color: var(--accent-soft);
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 820px) {
  .axes, .axes--three { grid-template-columns: 1fr; }
  .nav { margin-left: 0; width: 100%; }
}

/* --------------------------------------------------------- a11y baseline */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ------------------------------------------------------------------ details
   Progressive disclosure. Material kept for completeness but not on the main
   reading path: unexercised vocabulary, dropped fields, secondary caveats. */
details {
  margin-top: 1.25rem;
  border-top: 1px solid var(--rule-faint);
  padding-top: 0.9rem;
}
details > summary {
  cursor: pointer;
  font: 600 0.75rem/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  list-style: none;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "+ "; color: var(--accent); }
details[open] > summary::before { content: "− "; }
details > summary:hover { color: var(--accent); }
details[open] > summary { margin-bottom: 0.6rem; }

/* --------------------------------------------------------------- home framing
   The landing page exposes two equal research coordinates: the AI-governance
   problem space and the regulatory-order analytical lens. The method then
   sits visibly between those coordinates and the cases. */
.hero--dual {
  padding-bottom: clamp(1.75rem, 4vw, 3rem);
}
.hero--dual h1 {
  max-width: 18ch;
}
.orientation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.orientation-card {
  background: var(--plate);
  padding: clamp(1.35rem, 3vw, 2.25rem);
  min-height: 100%;
}
.orientation-card h2 {
  margin-bottom: 0.8rem;
}
.orientation-card p:last-of-type {
  margin-bottom: 0;
}
.orientation-card__signal {
  margin-top: 1.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule-faint);
  font: 500 0.78rem/1.5 var(--mono);
  color: var(--muted);
}
.orientation-card--ai {
  border-top: 3px solid var(--accent);
}
.orientation-card--order {
  border-top: 3px solid var(--ink);
}
.orientation-bridge {
  min-width: 9rem;
  display: grid;
  place-content: center;
  text-align: center;
  background: var(--plate-sunk);
  padding: 1rem;
}
.orientation-bridge span {
  font: 600 0.62rem/1.2 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.orientation-bridge b {
  margin-top: 0.7rem;
  font: 600 0.78rem/1.25 var(--mono);
  letter-spacing: 0.08em;
  color: var(--accent);
}
.method-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.5rem;
}
.method-head h2 {
  margin: 0;
}
.method-head__link {
  font: 500 0.78rem/1 var(--mono);
  white-space: nowrap;
  text-decoration: none;
}
.method-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.method-node {
  position: relative;
  min-height: 10.5rem;
  padding: 1.15rem;
  background: var(--plate);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.method-node:hover,
.method-node:focus-visible {
  background: var(--plate-sunk);
}
.method-node__num {
  font: 600 0.72rem/1 var(--mono);
  color: var(--accent);
}
.method-node__label {
  display: block;
  margin-top: 0.9rem;
  font: 600 0.68rem/1.25 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.method-node__q {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ink-soft);
}
.method-flow__arrow {
  display: none;
}
.record-grid {
  display: grid;
  grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 7vw, 6rem);
  align-items: start;
}
.record-grid h2 {
  max-width: 14ch;
}

@media (max-width: 900px) {
  .orientation-grid {
    grid-template-columns: 1fr;
  }
  .orientation-bridge {
    min-width: 0;
    min-height: 5rem;
  }
  .orientation-bridge b br {
    display: none;
  }
  .method-flow {
    grid-template-columns: 1fr;
  }
  .method-node {
    min-height: auto;
  }
  .method-flow__arrow {
    display: none;
  }
}

@media (max-width: 720px) {
  .method-head,
  .record-grid {
    grid-template-columns: 1fr;
    display: grid;
  }
  .method-head {
    align-items: start;
  }
  .method-head__link {
    margin-top: -0.5rem;
  }
  .record-grid {
    gap: 1.5rem;
  }
}


.masthead__slash { color: var(--muted); padding-inline: 0.12rem; }
[id^="layer-"] { scroll-margin-top: 5rem; }

/* ------------------------------------------------------------ overview v2 */
.hero--overview { padding-bottom: clamp(1.25rem, 3vw, 2.25rem); }
.hero--overview h1 { max-width: 15ch; margin-bottom: 1.25rem; }
.hero-kicker {
  display: flex; align-items: center; gap: 0.55rem;
  margin-bottom: 1.1rem;
  font: 600 0.72rem/1.2 var(--mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero-kicker__slash { color: var(--muted); }
.hero-rail {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0.8rem 0;
  font: 500 0.72rem/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.hero-rail i { color: var(--accent); font-style: normal; }

.coord-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10rem minmax(0, 1fr);
  border: 1px solid var(--rule);
  background: var(--rule);
  gap: 1px;
}
.coord-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.25rem;
  min-height: 13rem;
  padding: clamp(1.15rem, 2.4vw, 1.8rem);
  background: var(--plate);
  color: inherit;
  text-decoration: none;
}
.coord-card:hover, .coord-card:focus-visible { background: var(--plate-sunk); }
.coord-card--ai { border-top: 3px solid var(--accent); }
.coord-card--order { border-top: 3px solid var(--ink); }
.coord-card__index { font: 600 0.72rem/1 var(--mono); color: var(--muted); }
.coord-card h2 { margin: 0.2rem 0 0; }
.coord-tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.4rem; align-self: end; }
.coord-tags span {
  border: 1px solid var(--rule);
  padding: 0.35rem 0.5rem;
  font: 500 0.66rem/1 var(--mono);
  color: var(--muted);
}
.coord-link {
  display: grid; place-content: center; text-align: center;
  background: var(--plate-sunk);
  padding: 1rem;
}
.coord-link span {
  font: 600 0.6rem/1.2 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.coord-link strong {
  margin-top: 0.55rem;
  font: 600 0.74rem/1.25 var(--mono);
  letter-spacing: 0.07em;
  color: var(--accent);
}

.compact-head { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.compact-head h2 { margin: 0; }
.compact-head > a { font: 500 0.72rem/1 var(--mono); text-decoration:none; white-space:nowrap; }
.method-strip {
  display: grid; grid-template-columns: repeat(5, minmax(0,1fr));
  border: 1px solid var(--rule); background: var(--rule); gap: 1px;
}
.method-strip a {
  min-height: 6.1rem; padding: 0.9rem; background: var(--plate); color: inherit; text-decoration:none;
  display:flex; flex-direction:column; justify-content:space-between;
}
.method-strip a:hover, .method-strip a:focus-visible { background: var(--plate-sunk); }
.method-strip b { font: 600 0.72rem/1 var(--mono); color: var(--accent); }
.method-strip span { font: 600 0.69rem/1.2 var(--mono); letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }

.case-grid-preview { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.case-chip { min-height:6rem; background:var(--plate); padding:1rem; color:inherit; text-decoration:none; display:flex; flex-direction:column; justify-content:space-between; }
.case-chip:hover, .case-chip:focus-visible { background:var(--plate-sunk); }
.case-chip strong { font: 600 0.82rem/1.25 var(--display); }
.case-chip span { font: 400 0.85rem/1.3 var(--body); color:var(--muted); }
.thesis-line { max-width: 62rem; margin: 0; font: 400 clamp(1.15rem, 2vw, 1.55rem)/1.5 var(--display); color: var(--ink-soft); }
.thesis-line strong { color: var(--ink); }

@media (max-width: 900px) {
  .coord-grid { grid-template-columns: 1fr; }
  .coord-link { min-height: 4.5rem; }
  .coord-link strong br { display:none; }
  .method-strip { grid-template-columns: repeat(5,minmax(8rem,1fr)); overflow-x:auto; }
  .case-grid-preview { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .hero-kicker { flex-wrap: wrap; }
  .hero-rail { gap:0.45rem; }
  .coord-card { grid-template-columns: auto 1fr; min-height:11rem; }
  .coord-tags { grid-column: 2; }
  .case-grid-preview { grid-template-columns:1fr; }
}

/* -------------------------------------------------------- parallel layers v1 */
.layer-overview-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.7fr);
  gap: 2rem;
  align-items: end;
  margin-bottom: 1rem;
}
.layer-overview-note { margin: 0; color: var(--muted); font-size: 0.92rem; }
.layer-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--rule);
  background: var(--rule);
}
.layer-overview__item {
  min-height: 8.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  background: var(--plate);
  color: inherit;
  text-decoration: none;
}
.layer-overview__item:hover, .layer-overview__item:focus-visible { background: var(--plate-sunk); }
.layer-overview__num { font: 600 0.72rem/1 var(--mono); color: var(--accent); }
.layer-overview__label { margin-top: 0.85rem; font: 600 0.72rem/1.25 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.layer-overview__value { margin-top: 0.5rem; font: 400 0.86rem/1.45 var(--body); color: var(--muted); }
.framework-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.framework-card { background: var(--plate); padding: clamp(1rem, 2.5vw, 1.5rem); }
.framework-card__head, .case-layer__head { display: flex; align-items: baseline; gap: 0.7rem; margin-bottom: 0.75rem; }
.framework-card__head > span, .case-layer__head > span { font: 600 0.74rem/1 var(--mono); color: var(--accent); }
.framework-card__head h2, .case-layer__head h2 { margin: 0; font-size: 1.35rem; }
.framework-card p { color: var(--ink-soft); }
.case-list { border-top: 1px solid var(--rule); }
.case-row { display: grid; grid-template-columns: 3rem 1fr auto; gap: 1rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none; }
.case-row:hover, .case-row:focus-visible { background: var(--plate-sunk); }
.case-row__id { font: 600 0.7rem/1 var(--mono); color: var(--muted); }
.case-row h2 { font-size: 1.25rem; margin-bottom: 0.25rem; }
.case-row p { margin: 0; color: var(--muted); font: 400 0.92rem/1.45 var(--body); }
.case-row__arrow { font: 600 1rem/1 var(--mono); color: var(--accent); }
.layer-mini-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.layer-mini-list div { padding: 1rem; background: var(--plate); }
.layer-mini-list b { display: block; font: 600 0.72rem/1 var(--mono); color: var(--accent); margin-bottom: 0.55rem; }
.layer-mini-list span { font: 600 0.7rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }
.case-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.case-meta span { padding: 0.35rem 0.5rem; background: var(--plate); border: 1px solid var(--rule); font: 500 0.68rem/1 var(--mono); color: var(--muted); }
.case-layer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.case-layer { background: var(--plate); padding: clamp(1rem, 2.5vw, 1.5rem); }
.case-layer__body { display: grid; gap: 1rem; }
.case-layer__body > div > b, .distribution-grid b { display: block; font: 600 0.67rem/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.45rem; }
.case-layer__body p { margin-bottom: 0; color: var(--ink-soft); }
.tag-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.manifestation-list { display: grid; gap: 0.85rem; }
.manifestation-list article { padding-bottom: 0.75rem; border-bottom: 1px solid var(--rule-faint); }
.manifestation-list article:last-child { border-bottom: none; padding-bottom: 0; }
.manifestation-list p { margin: 0.5rem 0 0; font-size: 0.9rem; }
.distribution-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.distribution-grid p { font-size: 0.9rem; }

@media (max-width: 900px) {
  .layer-overview-head { grid-template-columns: 1fr; }
  .layer-overview { grid-template-columns: 1fr; }
  .layer-overview__item { min-height: auto; display: grid; grid-template-columns: 2rem 1fr; gap: 0.5rem 0.75rem; align-items: center; }
  .layer-overview__num { grid-row: 1 / span 2; }
  .layer-overview__value { grid-column: 2; margin-top: 0; }
  .framework-grid, .case-layer-grid { grid-template-columns: 1fr; }
  .layer-mini-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .case-row { grid-template-columns: 2rem 1fr auto; }
  .distribution-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- case record
   Parallel layers stay parallel in the information architecture, while the
   full research record keeps its original tables for evidence, measurement,
   deviations, and sources. */
.case-hero { padding-bottom: 1.25rem; }
.case-note { margin-top: .65rem; color: var(--ink-soft); max-width: 68ch; }
.case-overview { padding-top: 1rem; }
.layer-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.layer-strip__item {
  background: var(--plate);
  color: inherit;
  text-decoration: none;
  min-height: 7.2rem;
  padding: 1rem 1.1rem 1.05rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.layer-strip__item:hover,
.layer-strip__item:focus-visible { background: var(--plate-sunk); }
.layer-strip__item > span {
  font: 600 .72rem/1 var(--mono);
  color: var(--accent);
}
.layer-strip__item > b {
  font: 600 .78rem/1.2 var(--mono);
  letter-spacing: .055em;
  text-transform: uppercase;
}
.layer-strip__item > small {
  color: var(--muted);
  font: 500 .74rem/1.25 var(--mono);
}
.layer-strip__note {
  max-width: none;
  margin: .8rem 0 0;
  color: var(--muted);
  font-size: .9rem;
}
.section--compact { padding-block: 2rem; }
.case-overview + .section { border-top: 1px solid var(--rule-faint); }

@media (max-width: 900px) {
  .layer-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layer-strip__item:last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .layer-strip { grid-template-columns: 1fr; }
  .layer-strip__item:last-child { grid-column: auto; }
}


/* ------------------------------------------------------------- current polish */
.hero--overview h1 { max-width: 19ch; }

.layer-overview__item { position: relative; border-top: 3px solid var(--rule); }
.layer-overview__item--a { border-top-color: #557EA0; }
.layer-overview__item--b { border-top-color: #2F7D73; }
.layer-overview__item--c { border-top-color: #786B98; }
.layer-overview__item--d { border-top-color: #A47C38; }
.layer-overview__item--e { border-top-color: #5C7D63; }
.layer-overview__item:hover, .layer-overview__item:focus-visible { transform: translateY(-1px); }
.layer-overview__num { color: var(--ink-soft); }
.layer-overview__value { color: var(--ink-soft); }

.case-grid-preview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.case-chip { min-height: 7.2rem; }
.case-chip strong { color: var(--ink); }
.case-chip span { color: var(--muted); }

.paper-list { border-top: 1px solid var(--rule); }
.paper-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  color: inherit;
  text-decoration: none;
}
.paper-row:hover, .paper-row:focus-visible { background: var(--plate-sunk); }
.paper-row__kicker {
  display: block;
  margin-bottom: .35rem;
  color: var(--muted);
  font: 600 .68rem/1.2 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.paper-row h3 { font-size: 1.18rem; margin: 0; }
.paper-row p { margin: .35rem 0 0; color: var(--muted); font-size: .88rem; }
.paper-row__arrow { color: var(--accent); font: 600 .95rem/1 var(--mono); }

/* Case pages: keep the record dense but let the data, not the chrome, lead. */
.case-hero { padding-bottom: .6rem; }
.case-meta span { background: var(--plate); }
.case-overview { padding-block: .7rem 1.4rem; }
.layer-strip__item { min-height: 6rem; }
.layer-strip__note { font-size: .82rem; }
.section--compact { padding-block: 1.35rem; }
.case-hero .standfirst { font-size: 1.05rem; }
.case-note { display: none; }

.case-record .section { padding-block: 1.7rem; }
.case-record .sub { margin-bottom: .8rem; }
.case-record table + table { margin-top: 1rem; }
.case-record .note { font-size: .9rem; color: var(--muted); }

@media (max-width: 980px) {
  .case-grid-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .case-grid-preview { grid-template-columns: 1fr; }
  .paper-row { grid-template-columns: 1fr auto; }
}

/* --------------------------------------------------------- open research notes */
.open-section .section-intro { max-width: 70ch; margin: 0 0 1.1rem; color: var(--muted); }
.open-list { border-top: 1px solid var(--rule); }
.open-item { padding: 1.2rem 0; border-bottom: 1px solid var(--rule); }
.open-item__body { max-width: 78ch; }
.open-item__body p { margin: 0 0 .65rem; }
.open-item__body p:last-child { margin-bottom: 0; }
.open-item__body b { font-weight: 650; color: var(--ink); }

/* --------------------------------------------------------- current case frame */
.layer-overview--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.layer-strip--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.frame-heading {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  margin-bottom: 1rem;
}
.frame-heading > span {
  font: 600 .72rem/1 var(--mono);
  color: var(--accent);
}
.frame-heading h2 { margin: 0; }

.frame-blank {
  min-height: 16rem;
  background: var(--plate);
  border: 1px solid var(--rule);
  position: relative;
}
.frame-blank::after {
  content: "";
  position: absolute;
  inset: 1.1rem;
  border: 1px dashed var(--rule);
  pointer-events: none;
}
.frame-footer { margin: 0; }

@media (max-width: 900px) {
  .layer-overview--three,
  .layer-strip--three { grid-template-columns: 1fr; }
}
/* Frame guide: keep the overview as exactly three clean columns. */
.layer-overview.layer-overview--three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  background: transparent;
  border: 0;
  gap: 1px;
}

.layer-overview--three .layer-overview__item {
  border: 1px solid var(--rule);
  border-top-width: 3px;
}

.layer-overview__more {
  display: block;
  margin-top: 1rem;
  font: 600 .68rem/1 var(--mono);
  color: var(--accent);
  opacity: .8;
}

.framework-detail__intro {
  max-width: 72ch;
  margin-bottom: 2rem;
}

.framework-detail__intro p {
  margin: .65rem 0 0;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.65;
}

.framework-guide {
  border-top: 1px solid var(--rule);
}

.framework-guide__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--rule);
}

.framework-guide__head > span {
  font: 600 .72rem/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.framework-guide__head small {
  color: var(--muted);
  font: 500 .68rem/1.4 var(--mono);
}

.framework-guide__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-top: 0;
}

.framework-guide__grid article {
  min-height: 10rem;
  padding: 1.25rem;
  background: var(--plate);
}

.framework-guide__grid article > b {
  display: block;
  margin-bottom: 1.2rem;
  color: var(--muted);
  font: 600 .7rem/1 var(--mono);
}

.framework-guide__grid h2 {
  margin: 0 0 .45rem;
  font-size: 1.08rem;
}

.framework-guide__grid p {
  margin: 0;
  color: var(--muted);
  font: 400 .9rem/1.55 var(--body);
}

@media (max-width: 900px) {
  .layer-overview.layer-overview--three { grid-template-columns: 1fr !important; }
  .framework-guide__grid { grid-template-columns: 1fr; }
  .framework-guide__head { align-items: flex-start; flex-direction: column; }
}

/* ==========================================================================
   v6 refinements — open-question case pages + cycle
   ========================================================================== */

/* Case body prose */
.case-frame p {
  max-width: 62ch;
  color: var(--ink-soft);
}
.case-frame p + p {
  margin-top: 0.85em;
}
.case-frame .frame-heading {
  margin-bottom: 0.35rem;
}

/* Open-question callout already uses display font inline; keep measure tight */
.case-frame .eyebrow {
  margin-bottom: 0.4rem;
}

/* Narrative lede on case pages */
.case-hero .standfirst {
  max-width: 58ch;
}

/* Timeline tables — reuse qtable language, slightly denser */
.timeline-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 0.5rem;
  font-size: 0.9rem;
  max-width: 52rem;
}
.timeline-table th,
.timeline-table td {
  border-top: 1px solid var(--rule-faint);
  padding: 0.55rem 0.75rem 0.55rem 0;
  text-align: left;
  vertical-align: top;
}
.timeline-table th {
  font: 600 0.68rem/1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: none;
  padding-top: 0;
}
.timeline-table td:first-child {
  font: 500 0.8rem/1.45 var(--mono);
  color: var(--ink);
  white-space: nowrap;
  width: 11rem;
  padding-right: 1.25rem;
}
.timeline-table td:last-child {
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .timeline-table td:first-child {
    white-space: normal;
    width: auto;
    display: block;
    padding-bottom: 0.15rem;
  }
  .timeline-table td:last-child {
    display: block;
    padding-top: 0;
    padding-bottom: 0.85rem;
  }
  .timeline-table tr {
    border-top: 1px solid var(--rule-faint);
  }
  .timeline-table th {
    display: none;
  }
}

/* Cycle page: 2-col stage grid collapses cleanly */
@media (max-width: 900px) {
  .framework-detail .layer-overview {
    grid-template-columns: 1fr !important;
  }
}

/* Index cycle strip: 4 chips → 2 on tablet, 1 on narrow */
@media (max-width: 900px) {
  #cycle .case-grid-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  #cycle .case-grid-preview {
    grid-template-columns: 1fr !important;
  }
}

/* Soften unused blank placeholder (no longer primary) */
.frame-blank {
  min-height: 0;
  display: none;
}

/* ---- Cover: cycle entry (stronger path to full pattern) ---- */
.cycle-entry {
  display: block;
  border: 1px solid var(--rule);
  background: var(--plate);
  color: inherit;
  text-decoration: none;
  padding: clamp(1.15rem, 2.5vw, 1.6rem);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.cycle-entry:hover,
.cycle-entry:focus-visible {
  background: var(--plate-sunk);
  border-color: var(--accent);
}
.cycle-entry__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}
.cycle-entry__label {
  font: 600 0.68rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.cycle-entry__cta {
  font: 600 0.75rem/1 var(--mono);
  color: var(--accent);
  white-space: nowrap;
}
.cycle-entry__title {
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);
  font-weight: 500;
  margin: 0 0 0.65rem;
  color: var(--ink);
}
.cycle-entry__desc {
  margin: 0 0 1.15rem;
  max-width: 58ch;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.cycle-entry__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.cycle-entry__step {
  background: var(--plate);
  padding: 0.7rem 0.75rem;
  min-height: 3.6rem;
}
.cycle-entry__step strong {
  display: block;
  font: 600 0.72rem/1.2 var(--mono);
  color: var(--ink);
  margin-bottom: 0.25rem;
}
.cycle-entry__step span {
  font: 500 0.72rem/1.3 var(--mono);
  color: var(--muted);
}
@media (max-width: 900px) {
  .cycle-entry__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .cycle-entry__steps { grid-template-columns: 1fr; }
  .cycle-entry__top { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
}

/* ==========================================================================
   COVER (index) — six blocks, trace-field signature. Scoped with .cov-*.
   ========================================================================== */
.cov { padding-block: clamp(2.5rem, 6vw, 5rem) 0; }
.cov__shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

/* block 1 — title + axis */
.cov-lede { max-width: 100%; }
.cov-eyebrow {
  font: 500 0.75rem/1 var(--mono);
  letter-spacing: 0.22em;
  color: var(--accent);
  display: block;
  margin-bottom: 1.4rem;
}
.cov-eyebrow span { color: var(--muted); margin-inline: 0.5em; }
.cov-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.4rem, 1.5rem + 4vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 20ch;
}
.cov-standfirst {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 1.5rem 0 0;
}

/* generic block scaffolding */
.cov-block { margin-top: clamp(2.75rem, 6vw, 4.5rem); }
.cov-block__head {
  font: 700 0.84rem/1.2 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 1.1rem;
}

/* block 2 — trace-field signature (single link) */
.cov-field {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--rule);
  background: var(--plate);
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
  transition: border-color 0.18s ease;
}
.cov-field:hover, .cov-field:focus-visible { border-color: var(--accent); outline: none; }
.cov-field:focus-visible { box-shadow: 0 0 0 2px var(--accent-soft); }
.cov-field__cap {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font: 500 0.72rem/1.4 var(--mono);
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.cov-field__cap b { color: var(--ink); font-weight: 600; letter-spacing: 0.14em; }
.cov-field__go { color: var(--accent); white-space: nowrap; }
.cov-field svg { display: block; width: 100%; height: auto; }

/* trace states */
.tf-guide { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 5; }
.tf-stage { font: 500 0.62rem/1 var(--mono); letter-spacing: 0.12em; fill: var(--muted); }
.tf-lane  { font: 400 0.6rem/1 var(--mono); fill: var(--muted); opacity: 0.7; }
.tf-trace polyline { fill: none; stroke: var(--accent); stroke-width: 2; transition: stroke-width 0.15s ease, opacity 0.15s ease; }
.tf-node { fill: var(--plate); stroke: var(--accent); stroke-width: 2; }
.tf-node--end { fill: var(--accent); stroke: none; }
.tf-node--flag { fill: var(--plate); stroke: var(--flag); stroke-width: 2; }
.tf-node--flagdot { fill: var(--flag); stroke: none; }
.tf-flaglabel { font: 400 0.55rem/1 var(--mono); fill: var(--flag); }
.tf-trace.is-dim { opacity: 0.18; }
.tf-trace.is-on polyline { stroke-width: 3.5; }

/* block 3 — case rows */
.cov-cases { border-top: 1px solid var(--rule); }
.cov-case {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 15rem) 1fr auto;
  align-items: baseline;
  gap: 0.6rem 1rem;
  padding: 0.95rem 0.25rem;
  border-bottom: 1px solid var(--rule-faint);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
.cov-case:hover, .cov-case:focus-visible { background: var(--plate); outline: none; }
.cov-case:focus-visible { box-shadow: inset 3px 0 0 var(--accent); }
.cov-case__num { font: 500 0.9rem/1.2 var(--mono); color: var(--accent); }
.cov-case__name { font-family: var(--display); font-size: 1.18rem; }
.cov-case__note { color: var(--muted); font-size: 0.95rem; }
.cov-case__go { color: var(--accent); font-size: 1.1rem; }

/* block 3 — mechanics preview (single link, mirrors the trace-field's weight) */
.cov-mech {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0.9rem;
  padding: clamp(1.25rem, 3.5vw, 2.25rem) 0 clamp(0.75rem, 2vw, 1.25rem);
}
.cov-mech__item {
  flex: 1 1 13rem;
  min-width: 10rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--rule);
  background: var(--paper);
}
.cov-mech__num { font: 500 0.68rem/1 var(--mono); letter-spacing: 0.12em; color: var(--accent); }
.cov-mech__name { font-family: var(--display); font-size: clamp(1.3rem, 1rem + 1.2vw, 1.65rem); }
.cov-mech__note { color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.cov-mech__arrow { align-self: center; color: var(--rule); font-size: 1.2rem; }
@media (max-width: 639px) { .cov-mech__arrow { display: none; } }

/* block 5 — perspective */
.cov-persp { max-width: 100%; }
.cov-persp p {
  font-family: var(--display);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.32;
  color: var(--ink);
  margin: 0;
  max-width: 62ch;
  text-align: justify;
  text-justify: inter-word;
}

/* block 6 — papers */
.cov-papers { border-top: 1px solid var(--rule); margin-bottom: clamp(3rem, 8vw, 6rem); }
.cov-paper {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1.05rem 0.25rem;
  border-bottom: 1px solid var(--rule-faint);
  text-decoration: none; color: inherit;
  transition: background 0.15s ease;
}
.cov-paper:hover, .cov-paper:focus-visible { background: var(--plate); outline: none; }
.cov-paper:focus-visible { box-shadow: inset 3px 0 0 var(--accent); }
.cov-paper__t { font-family: var(--display); font-size: 1.1rem; }
.cov-paper__s { color: var(--muted); font-size: 0.9rem; display: block; margin-top: 0.15rem; }
.cov-paper__go { color: var(--accent); }

/* load-in for traces */
@media (prefers-reduced-motion: no-preference) {
  .tf-trace polyline {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    animation: tf-draw 1.1s ease forwards;
  }
  .tf-trace:nth-child(1) polyline { animation-delay: 0.05s; }
  .tf-trace:nth-child(2) polyline { animation-delay: 0.18s; }
  .tf-trace:nth-child(3) polyline { animation-delay: 0.31s; }
  .tf-trace:nth-child(4) polyline { animation-delay: 0.44s; }
  .tf-trace:nth-child(5) polyline { animation-delay: 0.57s; }
  @keyframes tf-draw { to { stroke-dashoffset: 0; } }
}

/* ==========================================================================
   CYCLE page — large weighted trace-field + stages. Scoped .cyc-*.
   ========================================================================== */
.cyc { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 8vw, 6rem); }
.cyc__shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.cyc-lede { max-width: 100%; }
.cyc-lede .cov-title { max-width: 22ch; }
.cyc-lede .cov-standfirst { max-width: 60ch; }

.cyc-field {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--rule);
  background: var(--plate);
  padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 2.5vw, 2rem);
}
.cyc-field svg { display: block; width: 100%; max-width: 940px; height: auto; margin-inline: auto; }
.cyc-stage { font-size: 0.66rem; letter-spacing: 0.14em; fill: var(--ink); opacity: 0.75; }
.cyc-substage { font: 400 0.58rem/1 var(--body); fill: var(--muted); font-style: italic; }
.cyc-name { font: 500 0.72rem/1 var(--mono); fill: var(--ink-soft); }
.cyc-flag { font-size: 0.6rem; }
.cyc-compress { font: 400 0.58rem/1 var(--body); fill: var(--muted); font-style: italic; text-anchor: middle; }
.cyc-seg { stroke: var(--accent); fill: none; stroke-linecap: round; transition: opacity 0.15s ease; }

/* reuse tf node classes; weighting handled inline via stroke-width */
.tf-trace.is-dim .cyc-seg { opacity: 0.16; }
.tf-trace.is-dim .cyc-name { opacity: 0.4; }

.cyc-block { margin-top: clamp(2.5rem, 6vw, 4rem); }
.cyc-stages { display: grid; gap: 1px; background: var(--rule-faint); border: 1px solid var(--rule-faint); }
@media (min-width: 720px) { .cyc-stages { grid-template-columns: repeat(4, 1fr); } }
.cyc-st { background: var(--paper); padding: 1.1rem 1.2rem; }
.cyc-st__k { display: block; font-family: var(--display); font-size: 1.1rem; color: var(--accent); margin-bottom: 0.45rem; }
.cyc-st p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.5; }

.cyc-reads { border-top: 1px solid var(--rule); }
.cyc-read {
  display: grid; grid-template-columns: minmax(0, 18rem) 1fr; gap: 0.4rem 1.5rem;
  align-items: baseline;
  padding: 0.95rem 0.25rem; border-bottom: 1px solid var(--rule-faint);
  text-decoration: none; color: inherit; transition: background 0.15s ease;
}
.cyc-read:hover, .cyc-read:focus-visible { background: var(--plate); outline: none; }
.cyc-read b { font-family: var(--display); font-weight: 500; font-size: 1.05rem; }
.cyc-read span { color: var(--muted); font-size: 0.92rem; }

/* nudge serif tracking so 'rn' clusters (Anthropic) don't read as 'm' */
.cyc-read b, .cyc-st__k, .cyc-name { letter-spacing: 0.006em; }
.cyc-name { text-anchor: start; }

/* ==========================================================================
   LENS pages (ordering / manifestation / distribution). Scoped .lens-*.
   ========================================================================== */
.lens { padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; }
.lens__shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.lens-eyebrow {
  font: 500 0.72rem/1 var(--mono); letter-spacing: 0.2em; color: var(--accent);
  display: flex; gap: 0.9rem; align-items: center; margin-bottom: 1.1rem;
}
.lens-eyebrow span { color: var(--muted); }
.lens-eyebrow em { font-style: normal; color: var(--flag); }
.lens-title { font-family: var(--display); font-weight: 500; font-size: clamp(2.2rem, 1.5rem + 3vw, 3.3rem); line-height: 1.05; margin: 0; }
.lens-dek { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem); color: var(--ink-soft); max-width: 46ch; margin: 1rem 0 0; }

/* mech-chain: the three mechanics' own logical order (bound, then operated, then
   distributed) — a different sequence from the cycle's timeline, shown once per
   mechanic page with the current one marked. */
.mech-chain {
  margin-top: clamp(2rem, 5vw, 3rem);
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem;
}
.mech-chain__arrow { color: var(--rule); font-size: 0.9rem; }
.mech-chain__note {
  margin: 0.9rem 0 0; max-width: 52ch;
  font: 400 0.85rem/1.55 var(--body); color: var(--muted);
}

.lens-chip {
  font: 500 0.8rem/1 var(--body); color: var(--ink-soft);
  border: 1px solid var(--rule); background: var(--paper);
  padding: 0.4rem 0.7rem; text-decoration: none;
}
.lens-chip:hover { border-color: var(--accent); color: var(--accent); }
.lens-chip[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--plate); }

.lens-q {
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  border-left: 3px solid var(--accent); padding: 0.3rem 0 0.3rem 1.25rem;
}
.lens-q span { font: 500 0.68rem/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 0.6rem; }
.lens-q p { font-family: var(--display); font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); line-height: 1.35; margin: 0; max-width: 40ch; }

.lens-body { margin-top: clamp(2rem, 4vw, 2.75rem); max-width: var(--measure); }
.lens-body h2, .lens-body h3 { font: 500 0.72rem/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.8rem; }
.lens-body p { margin: 0; font-size: 1.05rem; line-height: 1.6; }
.lens-cycle { margin-top: 1.75rem; }
.lens-cycle a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
.lens-cycle a:hover { border-bottom-color: var(--accent); }

.lens-section { margin-top: clamp(3rem, 7vw, 5rem); padding-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--rule); }
.cov .lens-section { margin-top: 1.75rem; padding-top: 1.5rem; }
.cov .lens-section:first-of-type { margin-top: 1.75rem; }
.cov .lens-dek {
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
  font-weight: 500;
  color: var(--ink);
  max-width: 34ch;
  margin: 0 0 0.7rem;
  line-height: 1.25;
}
.cov .lens-body { margin-top: 0; max-width: 58ch; }
.cov .lens-body p { margin: 0 0 0.8em; font-size: 1.02rem; line-height: 1.58; }
.cov .lens-body p:last-child { margin-bottom: 0; }

.lens-section:first-of-type { margin-top: clamp(2.5rem, 6vw, 4rem); }

.lens-nav {
  margin-top: clamp(2.5rem, 6vw, 4rem); margin-bottom: clamp(3rem, 8vw, 6rem);
  border-top: 1px solid var(--rule); padding-top: 1.25rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
}
.lens-nav a { font: 500 0.9rem/1 var(--mono); color: var(--accent); text-decoration: none; padding-block: 0.3rem; border-bottom: 2px solid transparent; }
.lens-nav a:hover { border-bottom-color: var(--accent-soft); }
.lens-nav a.is-back { color: var(--muted); }

/* ==========================================================================
   CASE pages. Scoped .chero / .ctrace / .clens / .ctimeline / .csection.
   ========================================================================== */
.chero { padding-block: clamp(2.5rem, 6vw, 4rem) 0; }
.chero__shell { max-width: 920px; margin-inline: auto; padding-inline: var(--gutter); }
.chero__id { font: 500 0.72rem/1 var(--mono); letter-spacing: 0.2em; color: var(--accent); }
.chero__title { font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); line-height: 1.08; margin: 0.9rem 0 0; }
.chero__subject { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); color: var(--ink-soft); max-width: 54ch; margin: 1rem 0 0; }

/* mini-trace */
.ctrace { display: block; margin-top: clamp(1.75rem, 4vw, 2.5rem); border: 1px solid var(--rule); background: var(--plate); padding: 1rem 1.15rem 1.15rem; text-decoration: none; color: inherit; transition: border-color 0.15s ease; }
.ctrace:hover { border-color: var(--accent); }
.ctrace__cap { font: 500 0.64rem/1 var(--mono); letter-spacing: 0.16em; color: var(--muted); display: block; margin-bottom: 0.8rem; }
.ctrace__lane { display: flex; align-items: center; gap: 0; }
.ctrace__node { font: 500 0.72rem/1 var(--mono); letter-spacing: 0.02em; color: var(--muted); padding: 0.3rem 0.55rem; border: 1px solid var(--rule); background: var(--paper); white-space: nowrap; }
.ctrace__node--on { color: var(--accent); border-color: var(--accent); }
.ctrace__node--dwell { color: var(--plate); background: var(--accent); border-color: var(--accent); font-weight: 600; }
.ctrace__node--open { color: var(--flag); border-color: var(--flag); }
.ctrace__node--open::after { content: " ○"; }
.ctrace__link { height: 1px; width: clamp(0.6rem, 3vw, 2.2rem); background: var(--rule); flex: 0 0 auto; }
.ctrace__note { display: block; margin-top: 0.75rem; font-size: 0.9rem; color: var(--muted); font-style: italic; }

.csection { padding-block: clamp(1.5rem, 3.5vw, 2.5rem); }
.ceyebrow { font: 600 1.4rem/1.25 var(--display); letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0 0 1.1rem; border-bottom: 2px solid var(--accent); padding-bottom: 0.4rem; display: inline-block; }
.cbody { max-width: var(--measure); }
.cbody p { margin: 0 0 1rem; font-size: 1.06rem; line-height: 1.62; }
.cbody p:last-child { margin-bottom: 0; }
.cbody--close p { color: var(--ink-soft); }

/* timeline */
.ctimeline { width: 100%; border-collapse: collapse; }
.ctimeline th { text-align: left; vertical-align: top; width: 11rem; padding: 0.7rem 1rem 0.7rem 0; font: 500 0.82rem/1.4 var(--mono); color: var(--accent); border-bottom: 1px solid var(--rule-faint); white-space: nowrap; }
.ctimeline td { padding: 0.7rem 0; font-size: 0.98rem; line-height: 1.5; border-bottom: 1px solid var(--rule-faint); color: var(--ink-soft); }

/* sources */
.csources { width: 100%; border-collapse: collapse; }
.csources th { text-align: left; vertical-align: top; width: 7rem; padding: 0.7rem 1rem 0.7rem 0; font: 500 0.72rem/1.4 var(--mono); letter-spacing: 0.06em; color: var(--accent); border-bottom: 1px solid var(--rule-faint); white-space: nowrap; }
.csources td { padding: 0.7rem 0; font-size: 0.95rem; line-height: 1.5; border-bottom: 1px solid var(--rule-faint); color: var(--ink-soft); }
.csources a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--rule); }
.csources a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* who meant what, and what happened instead */
.cgap { width: 100%; border-collapse: collapse; }
.cgap th { text-align: left; vertical-align: bottom; padding: 0 1rem 0.6rem 0; font: 500 0.68rem/1.3 var(--mono); letter-spacing: 0.08em; color: var(--muted); border-bottom: 1px solid var(--rule); }
.cgap td { text-align: left; vertical-align: top; padding: 0.85rem 1rem 0.85rem 0; font-size: 0.95rem; line-height: 1.55; border-bottom: 1px solid var(--rule-faint); color: var(--ink-soft); }
.cgap td:first-child { font-family: var(--display); font-size: 1rem; color: var(--ink); white-space: nowrap; padding-right: 1.25rem; }
.cgap tr:last-child td { border-bottom: none; }

/* lenses on a case */
.clens { border-top: 1px solid var(--rule); }
.clens__row { display: grid; grid-template-columns: 12rem 1fr; gap: 0.5rem 2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--rule-faint); }
.clens__name { font-family: var(--display); font-size: 1.2rem; color: var(--ink); align-self: start; }
.clens__obs p { margin: 0; font-size: 1.02rem; line-height: 1.6; }
.case-lib a { font: 500 0.85rem/1 var(--mono); color: var(--muted); text-decoration: none; }
.case-lib a:hover { color: var(--accent); }

@media (max-width: 640px) {
  .clens__row { grid-template-columns: 1fr; gap: 0.5rem; }
  .ctimeline th { width: auto; display: block; padding-bottom: 0.2rem; border-bottom: none; }
  .ctimeline td { display: block; padding-top: 0; }
  .csources th { width: auto; display: block; padding-bottom: 0.2rem; border-bottom: none; }
  .csources td { display: block; padding-top: 0; }
  .cgap, .cgap thead, .cgap tbody, .cgap tr { display: block; }
  .cgap thead { display: none; }
  .cgap tr { padding: 0.9rem 0; border-bottom: 1px solid var(--rule-faint); }
  .cgap td { display: block; border-bottom: none; padding: 0.15rem 0; white-space: normal; }
  .cgap td:first-child { padding-top: 0; }
}

/* --------------------------------------------------------------------------
   Decision layer — four cells. Cover + case pages.
   -------------------------------------------------------------------------- */
.dfour {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--ink);
  background: #FFFcf7;
  table-layout: fixed;
}
.dfour th, .dfour td {
  border: 1px solid var(--ink);
  padding: 0.85rem 1.05rem;
  vertical-align: top;
  text-align: left;
}
.dfour th {
  font: 700 0.72rem/1.2 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper);
}
.dfour td { font-size: 0.98rem; line-height: 1.5; color: var(--ink); }
.dfour__k { font-weight: 700; width: 17%; }
.dfour__n { width: 14%; color: var(--ink-soft, var(--ink)); }
.dfour__h { width: 38.5%; }
@media (max-width: 719px) {
  .dfour thead { display: none; }
  .dfour, .dfour tbody, .dfour tr, .dfour td { display: block; width: auto; }
  .dfour__k { border-bottom: none; padding-bottom: 0.35rem; }
  .dfour__v { padding: 0 1.05rem 0.35rem; border-bottom: none; }
  .dfour__n { padding: 0 1.05rem 0.35rem; border-bottom: none; font-style: italic; }
  .dfour__h { padding-top: 0; }
}