/* ============================================================================
   A2A STYLE — components.css
   The full rule set (base reset, control primitives, editorial components,
   and some legacy app-shell classes). Pairs with tokens.css, which owns the
   :root variables this file consumes — so tokens live in ONE place and never
   drift. Import order: tokens.css FIRST, then this.
   (Trimming the few A2A app-shell classes here is a future cleanup.)
   ============================================================================ */

*{box-sizing:border-box;}
  html,body{ height:100%; }
  body{ margin:0; background:var(--ground); color:var(--g7); font-family:var(--sans);
    -webkit-font-smoothing:antialiased; line-height:1.5; overflow:hidden; }
  #app, .shell{ height:100vh; display:flex; flex-direction:column; }

  /* ---------- masthead ---------- */
  .masthead{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-start; gap:8px;
    padding:14px 30px; background:var(--g0); border-bottom:1px solid var(--g3); cursor:pointer; }
  .mwm{ font-family:var(--sans); font-weight:700; font-size:21px; letter-spacing:-.01em; color:var(--soft); line-height:1; }
  .mwm .two{ color:var(--ink-2); }
  .meyebrow{ font-family:var(--sans); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-2); }

  /* ---------- HOME : opening map ---------- */
  .home-wrap{ height:100vh; max-width:1080px; margin:0 auto; padding:30px 40px 34px; display:flex; flex-direction:column; }
  .home-head{ flex:0 0 auto; margin-bottom:16px; }
  .home-lock{ display:inline-flex; align-items:center; gap:16px; margin-bottom:14px; }
  .home-lock .divider{ width:1px; align-self:stretch; background:var(--g3); margin:3px 0; }
  .home-eyebrow{ font-family:var(--sans); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-2); margin:0 0 10px; }
  h1.home-title{ font-family:var(--serif); font-weight:600; font-size:36px; line-height:1.05; letter-spacing:-.015em; margin:0; color:var(--g7); }
  .map{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:14px; border-top:1px solid var(--g3); padding-top:14px; }
  .band{ display:grid; grid-template-columns:1fr 240px; gap:34px; min-height:0; padding-bottom:14px; border-bottom:1px solid var(--g3); }
  .band:last-child{ border-bottom:0; padding-bottom:0; }
  .band.bar{ flex:0.85 1 0; } .band.tier{ flex:1.5 1 0; }
  .arch{ display:flex; gap:14px; min-height:0; }
  .blk{ flex:1; border:1px solid var(--g3); background:var(--g0); cursor:pointer; display:flex; flex-direction:column; justify-content:center; padding:0 22px; transition:background .12s,color .12s,border-color .12s; }
  .blk .num{ font-family:var(--mono); font-size:11px; color:var(--ink-2); margin-bottom:6px; }
  .blk .nm{ font-family:var(--sans); font-weight:600; font-size:18px; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); }
  .blk:hover{ background:var(--soft); border-color:var(--soft); }
  .blk:hover .nm{ color:var(--g0); }
  .mv{ align-self:center; font-family:var(--sans); }
  .mv .mid{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
  .mv .mnm{ font-family:var(--serif); font-weight:600; font-size:20px; color:var(--g7); margin:3px 0; }
  .mv .mtag{ font-family:var(--serif); font-style:italic; font-size:14px; color:var(--g6); }

  /* ---------- element / entry : app-shell body ---------- */
  .body{ flex:1; display:flex; min-height:0; }
  .rail{ flex:0 0 152px; background:var(--g0); border-right:1px solid var(--g3); display:flex; flex-direction:column; align-items:center; padding:28px 16px 20px; overflow-y:auto; }
  .navmap{ width:112px; }
  .navmap rect{ cursor:pointer; transition:fill .12s; }
  .rail .here{ margin-top:22px; text-align:center; }
  .rail .here .mvh{ font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
  .rail .here .nmh{ font-family:var(--serif); font-weight:600; font-size:17px; color:var(--g7); margin-top:4px; }
  .rail .railcrest{ margin-top:26px; width:100%; }
  .rail .home{ margin-top:auto; font-family:var(--sans); font-size:11px; font-weight:600; color:var(--ink-2); cursor:pointer; }
  .rail .home:hover{ color:var(--soft); }

  .center{ flex:1; min-width:0; overflow-y:auto; padding:36px 52px 70px; }
  .center-inner{ max-width:640px; }
  .crumb{ font-family:var(--sans); font-size:12px; color:var(--ink-2); margin-bottom:24px; }
  .crumb b{ color:var(--g7); font-weight:600; }
  .crumb a{ color:var(--ink-2); cursor:pointer; text-decoration:none; }
  .crumb a:hover{ color:var(--soft); }
  .el-num{ font-family:var(--mono); font-size:13px; color:var(--ink-2); }
  h1.el-title{ font-family:var(--serif); font-weight:600; font-size:46px; line-height:1.04; letter-spacing:-.015em; margin:6px 0 22px; color:var(--g7); }

  .logic{ background:var(--g0); border:1px solid var(--g3); border-left:4px solid var(--g6); padding:20px 24px; margin:0 0 14px; }
  .logic .formula{ font-family:var(--serif); font-size:19px; color:var(--g7); display:flex; flex-wrap:wrap; gap:0 10px; align-items:baseline; margin-bottom:10px; }
  .logic .formula .f{ font-weight:600; } .logic .formula .x{ color:var(--ink-2); font-size:16px; }
  .logic p{ font-family:var(--serif); font-size:16px; line-height:1.55; color:var(--g6); margin:0; }
  .logic p b{ color:var(--g7); font-weight:600; }

  .sec-h{ font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--g6); font-weight:600; margin:34px 0 6px; }
  .sec-lede{ font-family:var(--serif); font-size:16px; line-height:1.55; color:var(--g6); margin:0 0 18px; }
  .sec-lede b{ color:var(--g7); font-weight:600; }
  .factor{ border-top:1px solid var(--g2); padding:16px 0; }
  .factor:last-of-type{ border-bottom:1px solid var(--g2); }
  .factor .fn{ font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); margin-bottom:6px; }
  .factor .fd{ font-family:var(--serif); font-size:16px; line-height:1.5; color:var(--g7); margin:0 0 5px; }
  .factor .fif{ font-family:var(--serif); font-style:italic; font-size:14.5px; color:var(--ink-2); margin:0; }
  .holds{ background:var(--g0); border:1px solid var(--g3); padding:18px 22px; margin-top:26px; }
  .holds .hh{ font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--g6); font-weight:600; margin-bottom:8px; }
  .holds p{ font-family:var(--serif); font-size:15.5px; line-height:1.55; color:var(--g6); margin:0; } .holds b{ color:var(--g7); font-weight:600; }
  .voice{ font-family:var(--serif); font-style:italic; font-size:18px; color:var(--g7); margin:-8px 0 22px; }
  /* inline meta separator — heavier & darker ON PURPOSE so it never fades into the gray row */
  .dotw{ font-family:var(--sans); font-weight:700; color:#3A3F45; font-size:1.2em; line-height:0; padding:0 3px; vertical-align:middle; }

  /* ---------- interactive primitives (buttons, inputs, controls, overlays) ---------- */
  /* keyboard focus — a crisp square ring, never a glow (WCAG AA, committed) */
  :focus-visible{ outline:2px solid var(--soft); outline-offset:2px; }
  /* block-style nav links are anchors now — strip the default underline */
  .masthead, .blk, .rail .home, .backlink{ text-decoration:none; }
  /* visible keyboard focus on the SVG glyph nav */
  .navmap a:focus-visible{ outline:none; }
  .navmap a:focus-visible rect{ stroke:var(--soft); stroke-width:2; }
  .btn{ font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.03em; line-height:1; padding:var(--sp-12) var(--sp-24); border:1px solid transparent; background:none; cursor:pointer; transition:background .12s,border-color .12s,color .12s; }
  .btn-primary{ background:var(--soft); color:var(--g0); border-color:var(--soft); }
  .btn-primary:hover{ background:var(--g7); border-color:var(--g7); }
  .btn-secondary{ background:var(--g0); color:var(--g7); border-color:var(--g3); }
  .btn-secondary:hover{ border-color:var(--soft); }
  .btn-text{ padding:var(--sp-8) 0; color:var(--soft); }
  .btn-text:hover{ color:var(--g7); }
  .btn:disabled, .btn.is-disabled{ background:var(--g1); color:var(--g4); border-color:var(--g2); cursor:default; }

  .field-label{ display:block; font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin-bottom:var(--sp-8); }
  .input{ width:100%; font-family:var(--sans); font-size:14px; color:var(--g7); background:var(--g0); border:1px solid var(--g3); padding:var(--sp-8) var(--sp-12); }
  .input::placeholder{ color:var(--ink-2); }
  .input:focus{ border-color:var(--soft); outline:2px solid var(--soft); outline-offset:1px; }

  .choice{ display:flex; align-items:flex-start; gap:var(--sp-12); font-family:var(--serif); font-size:15px; color:var(--g7); cursor:pointer; padding:var(--sp-8) 0; }
  .choice .box{ flex:0 0 auto; width:18px; height:18px; border:1px solid var(--g4); background:var(--g0); margin-top:2px; position:relative; }
  .choice.checked .box{ background:var(--g7); border-color:var(--g7); }
  .choice.check.checked .box::after{ content:"\2713"; position:absolute; inset:0; color:var(--g0); font-family:var(--sans); font-size:12px; line-height:18px; text-align:center; }
  .choice.radio.checked .box::after{ content:""; position:absolute; inset:4px; background:var(--g0); }

  /* overlays — NO shadow: a darker border (and a scrim for modals) signals "floating" */
  .scrim{ position:fixed; inset:0; background:rgba(35,38,43,.32); }
  .float{ background:var(--g0); border:1px solid var(--g7); padding:var(--sp-16) var(--sp-24); }
  .tooltip{ display:inline-block; background:var(--g0); border:1px solid var(--g7); padding:var(--sp-8) var(--sp-12); font-family:var(--sans); font-size:12px; color:var(--g7); }

  /* ---------- table ---------- */
  .tbl{ width:100%; border-collapse:collapse; background:var(--g0); border:1px solid var(--g2); font-family:var(--sans); }
  .tbl th, .tbl td{ text-align:left; padding:var(--sp-12) var(--sp-16); border-top:1px solid var(--g2); font-size:13.5px; line-height:1.5; color:var(--g7); }
  .tbl thead th{ border-top:0; border-bottom:1px solid var(--g3); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
  .tbl .num{ text-align:right; font-variant-numeric:tabular-nums; }

  /* right column */
  .right{ flex:0 0 304px; background:var(--g0); border-left:1px solid var(--g3); overflow-y:auto; padding:30px 26px 60px; }
  .r-h{ font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--g7); font-weight:600; margin:0 0 12px; }
  .outline a{ display:flex; gap:10px; align-items:baseline; padding:7px 0; border-bottom:1px solid var(--g2); font-family:var(--sans); font-size:13.5px; color:var(--g7); cursor:pointer; text-decoration:none; }
  .outline a:hover{ color:var(--soft); } .outline .on{ font-family:var(--mono); font-size:11px; color:var(--ink-2); min-width:26px; }
  .outline a.noclick{ cursor:default; } .outline a.noclick:hover{ color:var(--g7); }
  .research{ margin-top:34px; }
  .rgroup{ margin-bottom:16px; }
  .rgroup .rg-h{ font-family:var(--sans); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--g7); font-weight:600; margin:0 0 6px; }
  .rgroup a{ display:block; font-family:var(--sans); font-size:13px; color:var(--g6); padding:3px 0; cursor:pointer; text-decoration:none; }
  .rgroup a:hover{ color:var(--soft); }
  .rgroup a.active{ color:var(--soft); font-weight:600; }

  /* research entry */
  .entry-tags{ font-family:var(--serif); font-style:italic; font-size:15px; color:var(--ink-2); margin:0 0 22px; }
  h1.entry-title{ font-size:34px; }
  .entry-body{ font-family:var(--serif); font-size:16px; line-height:1.6; color:var(--g7); }
  .entry-body p{ margin:0 0 16px; }

  /* in-body figure */
  .entry-body figure.fig{ margin:30px 0; }
  .entry-body figure.fig svg{ width:100%; height:auto; display:block; border:1px solid var(--g2); background:var(--g0); }
  .entry-body figure.fig figcaption{ font-family:var(--sans); font-size:12px; line-height:1.5; color:var(--ink-2); margin-top:10px; }

  /* "way out" callout — highlights the counter-techniques */
  .entry-body .counter{ background:var(--g0); border:1px solid var(--g3); border-left:4px solid var(--g7); padding:20px 24px; margin:30px 0 8px; }
  .entry-body .counter .ch{ font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--g7); font-weight:700; margin:0 0 8px; }
  .entry-body .counter .clede{ font-family:var(--serif); font-size:16px; line-height:1.5; color:var(--g6); margin:0 0 14px; }
  .entry-body .counter ul{ margin:0; padding:0; list-style:none; }
  .entry-body .counter li{ font-family:var(--serif); font-size:16px; line-height:1.5; color:var(--g7); padding:9px 0 9px 24px; border-top:1px solid var(--g2); position:relative; }
  .entry-body .counter li:first-child{ border-top:0; }
  .entry-body .counter li::before{ content:"\2192"; position:absolute; left:0; top:9px; color:var(--ink-2); font-family:var(--sans); }
  .entry-extra{ margin-top:24px; padding-top:18px; border-top:1px solid var(--g3); font-family:var(--sans); font-size:13.5px; line-height:1.55; color:var(--g6); }
  .entry-extra b,.entry-extra strong{ color:var(--g7); }
  .backlink{ font-family:var(--sans); font-size:12px; font-weight:600; color:var(--soft); cursor:pointer; }

  /* respect reduced-motion — collapse all transitions/animation */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
  }

  @media (max-width:900px){
    body{ overflow:auto; } #app,.shell{ height:auto; }
    .home-wrap{ height:auto; }
    .map{ display:block; } .band{ grid-template-columns:1fr; gap:12px; margin-bottom:20px; } .mv{ order:-1; }
    .body{ flex-direction:column; }
    .rail{ flex:none; flex-direction:row; width:100%; border-right:0; border-bottom:1px solid var(--g3); gap:18px; padding:14px 20px; align-items:center; }
    .navmap{ width:80px; } .rail .here{ margin:0; text-align:left; } .rail .home{ margin:0 0 0 auto; } .rail .railcrest{ display:none; }
    .center{ overflow:visible; padding:28px 20px; } .right{ flex:none; width:100%; border-left:0; border-top:1px solid var(--g3); overflow:visible; }
    h1.el-title{ font-size:34px; }
  }

  /* ===== Systems element page (Movement II reads layout) ===== */
  .center-inner.sysp{ max-width:790px; }
  .sysp{ font-feature-settings:"onum" 1; }
  .sysp .el-num{ font-size:11px; }
  .sysp .grow{ display:grid; grid-template-columns:104px 1fr; gap:34px; align-items:start; margin-bottom:42px; }
  .sysp .gl{ font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-2); line-height:1.5; padding-top:4px; text-align:right; }
  .sysp .gutter{ text-align:right; }
  /* the opening premise reads as a quiet pull-quote: the whole line recedes to ink-2,
     only the key clause (<b>) carries full ink — emphasis by VALUE, not weight (no bold) */
  .sysp .lawq blockquote{ margin:0; font-family:var(--serif); font-weight:400; font-size:27px; line-height:1.34; letter-spacing:-.012em; color:var(--ink-2); }
  .sysp .lawq blockquote b{ font-weight:400; color:var(--g7); }
  .sysp .lawq .attr{ font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); margin-top:16px; }
  /* the 94/6 premise bar — one honest split mark; bar length = true value */
  .sysp .lawbar{ height:9px; background:var(--g2); max-width:460px; margin:26px 0 9px; }
  .sysp .lawbar-fill{ display:block; height:100%; background:var(--g7); }
  .sysp .lawbar-labels{ display:flex; justify-content:space-between; max-width:460px; font-family:var(--mono); font-size:11px; color:var(--ink-2); }
  .sysp .method p{ font-family:var(--serif); font-size:17px; line-height:1.64; color:var(--g6); margin:0; }
  .sysp .method .nt{ text-transform:uppercase; letter-spacing:.05em; color:var(--g7); font-weight:600; font-size:13.5px; }
  .sysp .method b{ color:var(--g7); font-weight:600; }
  .sysp .method .mq{ margin:0 0 16px; font-family:var(--serif); font-style:italic; font-size:18px; line-height:1.4; letter-spacing:-.005em; color:var(--g7); }
  .sysp .method .mq cite{ display:block; font-style:normal; font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); margin-top:8px; }
  .sysp .lensrow{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--g3); border-bottom:1px solid var(--g3); }
  .sysp .lcell{ padding:13px 16px; border-left:1px solid var(--g2); }
  .sysp .lcell:first-child{ border-left:0; padding-left:0; }
  .sysp .lcell .ln{ font-family:var(--sans); font-weight:700; font-size:13px; color:var(--soft); }
  .sysp .lcell .ld{ font-family:var(--sans); font-size:11px; color:var(--ink-2); margin-top:3px; }
  .sysp .lcopy{ font-family:var(--serif); font-style:italic; font-size:14.5px; color:var(--ink-2); margin:14px 0 0; }
  .sysp .bigdiv{ border-top:2px solid var(--g7); margin:6px 0 30px; }
  .sysp .rlede{ font-family:var(--serif); font-size:16px; line-height:1.55; color:var(--g6); margin:0; padding-top:2px; }
  .sysp .reads{ margin-top:0; border-bottom:1px solid var(--g2); }
  .sysp .read{ padding:34px 0; border-top:1px solid var(--g2); margin-bottom:0; }
  .sysp .gnum{ font-family:var(--mono); font-weight:400; font-size:34px; line-height:.9; color:var(--g4); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
  .sysp .glabel{ font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); margin-top:14px; line-height:1.45; }
  .sysp .gfx{ margin-top:18px; display:flex; justify-content:flex-end; }
  .sysp .gfx svg{ width:66px; height:auto; overflow:visible; }
  .sysp .gfx .nd{ fill:#787E86; stroke:none; }
  .sysp .read .s{ font-family:var(--serif); font-size:21px; line-height:1.3; color:var(--g7); margin:4px 0 3px; letter-spacing:-.01em; }
  .sysp .read .deliv{ font-family:var(--serif); font-style:italic; font-size:15px; color:var(--ink-2); margin:0 0 16px; }
  .sysp .read ul{ margin:0; padding:0; list-style:none; }
  .sysp .read li{ font-family:var(--serif); font-size:16.5px; line-height:1.6; color:var(--g7); padding:0 0 13px 22px; position:relative; }
  .sysp .read li:last-child{ padding-bottom:0; }
  .sysp .read li::before{ content:"\2192"; position:absolute; left:0; top:1px; color:var(--g4); font-family:var(--sans); }
  .sysp .read li b{ font-weight:600; }
  .sysp .caut{ margin-top:38px; }
  .sysp .caut .cg{ display:grid; grid-template-columns:1fr 1fr; gap:20px 36px; }
  .sysp .caut .ci{ position:relative; padding-left:20px; font-family:var(--serif); font-size:14.5px; line-height:1.58; color:var(--g6); }
  .sysp .caut .ci::before{ content:""; position:absolute; left:0; top:6px; width:9px; height:9px; border:1.5px solid var(--g4); }
  .sysp .caut .ci b{ color:var(--g7); font-weight:600; }
  .sysp .ethic{ font-family:var(--serif); font-style:italic; font-size:18px; line-height:1.42; letter-spacing:-.01em; color:var(--g7); }
  @media (max-width:900px){
    .sysp .grow{ grid-template-columns:1fr; gap:8px; }
    .sysp .gl, .sysp .gutter{ text-align:left; }
    .sysp .gfx{ justify-content:flex-start; }
    .sysp .caut .cg{ grid-template-columns:1fr; }
  }

  /* Movement III additions — climb spine, depth ruler, the hinge hand-off */
  .sysp .rd-spine{ margin:6px 0 42px; }
  .sysp .depthrow{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 0; margin-top:11px; font-family:var(--sans); }
  .sysp .depthrow .dlbl{ font-size:9.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); margin-right:12px; }
  .sysp .depthrow .dstep{ font-size:12px; color:var(--ink-2); }
  .sysp .depthrow .dstep b{ color:var(--g7); font-weight:600; }
  .sysp .depthrow .darrow{ color:var(--g4); margin:0 9px; }
  .sysp .hinge{ display:block; text-decoration:none; background:var(--g0); border:1px solid var(--g3); border-left:3px solid var(--soft); padding:20px 24px; margin:16px 0 40px; }
  .sysp .hinge.fwd{ margin:42px 0 8px; }
  .sysp .hinge .hinge-k{ font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
  .sysp .hinge .hinge-t{ font-family:var(--serif); font-size:18px; line-height:1.5; color:var(--g7); margin:10px 0 12px; }
  .sysp .hinge .hinge-go{ font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--soft); }
  .sysp .hinge:hover{ border-color:var(--g4); }
  .sysp .hinge:hover .hinge-go{ color:var(--g7); }

  /* ===== Redesign shell — HOME columns + Ambition "Editorial C + rise" (merged 2026-06-15) ===== */
  /* HOME · columns — the four movements as columns, chapters beneath; no circle-wall */
  .rd-cols{ height:100vh; overflow-y:auto; max-width:1120px; margin:0 auto; padding:84px 56px 70px; }
  .rd-cols .lock{ display:flex; align-items:center; gap:14px; margin-bottom:40px; }
  .rd-cols .lock .mwm{ font-family:var(--sans); font-weight:700; font-size:20px; letter-spacing:-.01em; color:var(--soft); }
  .rd-cols .lock .two{ color:var(--g5); }
  .rd-cols .lock .rule{ flex:1; height:1px; background:var(--g3); }
  .rd-cols .lock .eyebrow{ font-family:var(--sans); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-2); }
  .rd-cols h1{ font-family:var(--serif); font-weight:600; font-size:42px; line-height:1.05; letter-spacing:-.02em; color:var(--g7); margin:0 0 14px; }
  .rd-cols .essence{ font-family:var(--serif); font-style:italic; font-size:18px; line-height:1.5; color:var(--ink-2); margin:0 0 56px; max-width:62ch; }
  .rd-cols .grid{ display:grid; grid-template-columns:repeat(4,1fr); border-top:2px solid var(--g7); }
  .rd-cols .col .mv-head{ min-height:118px; }   /* equal header height → chapter rules line up across columns */
  /* title block + the two cross-cutting indexes as entry tiles in the open space at right */
  .rd-cols .home-top{ display:flex; gap:56px; align-items:flex-start; justify-content:space-between; margin-bottom:56px; }
  .rd-cols .home-head{ flex:1 1 auto; }
  .rd-cols .home-head h1{ margin-bottom:14px; }
  .rd-cols .home-head .essence{ margin:0; }
  .rd-cols .home-entry{ flex:0 0 auto; text-align:right; padding-top:6px; }
  .rd-cols .entry-tile{ display:block; text-decoration:none; }   /* quiet text link, not a tile */
  .rd-cols .entry-tile + .entry-tile{ margin-top:8px; }
  .rd-cols .entry-tile .et-t{ font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:.02em; color:var(--ink-2); transition:color .12s; }
  .rd-cols .entry-tile:hover .et-t{ color:var(--soft); }
  .rd-cols .entry-tile .et-c{ font-family:var(--mono); font-size:13px; color:var(--g4); margin-left:5px; }
  .rd-cols .entry-tile .et-d{ display:none; }   /* descriptor dropped — too much */
  @media (max-width:760px){
    .rd-cols .home-top{ flex-direction:column; gap:28px; }
    .rd-cols .home-entry{ flex-basis:auto; }
  }
  .rd-cols .col{ padding:20px 22px 8px; border-left:1px solid var(--g2); }
  .rd-cols .col:first-child{ border-left:0; padding-left:0; }
  .rd-cols .mv-roman{ font-family:var(--sans); font-size:12px; letter-spacing:.02em; color:var(--ink-2); }
  .rd-cols .mv-name{ font-family:var(--serif); font-size:19px; line-height:1.2; color:var(--g7); margin:6px 0 6px; }
  .rd-cols .mv-tag{ font-family:var(--sans); font-size:11px; line-height:1.45; color:var(--ink-2); min-height:32px; margin-bottom:14px; }
  .rd-cols .ch{ display:block; text-decoration:none; padding:14px 0; border-top:1px solid var(--g2); transition:padding-left .12s var(--ease); }
  .rd-cols .ch:hover{ padding-left:8px; }
  .rd-cols .ch-no{ font-family:var(--mono); font-size:11px; color:var(--ink-2); }
  .rd-cols .ch-nm{ display:block; font-family:var(--serif); font-size:19px; color:var(--g7); margin-top:2px; }
  .rd-cols .ch:hover .ch-nm{ color:var(--soft); }

  /* element page · top nav (the relocated rail) — pinned so it's visible at all times */
  .rd-page{ height:100vh; overflow-y:auto; }
  .rdt-bar{ --fw-red:#C8102E; position:sticky; top:0; z-index:20; background:var(--ground); border-bottom:1px solid var(--g2); }
  .rdt{ max-width:1180px; margin:0 auto; padding:16px 56px 13px; }
  .rdt-top{ display:flex; align-items:center; gap:16px; }
  .rdt .mwm{ font-family:var(--sans); font-weight:700; font-size:20px; letter-spacing:-.01em; color:var(--soft); text-decoration:none; transition:color .12s; }
  .rdt .mwm:hover{ color:var(--g7); }
  .rdt .mwm .two{ color:var(--g5); }
  .rdt-eyebrow{ font-family:var(--sans); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-2); }
  .rdt-home{ margin-left:auto; font-family:var(--sans); font-size:11px; letter-spacing:.04em; color:var(--ink-2); text-decoration:none; white-space:nowrap; transition:color .12s; }
  .rdt-home:hover{ color:var(--soft); }
  .rdt-strip{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 24px; margin-top:14px; padding-top:12px; border-top:1px solid var(--g2); }
  /* cross-cutting indexes at the right of the chapter strip — reachable from any inner page */
  .rdt-idx{ margin-left:auto; display:flex; align-items:center; gap:0 18px; padding-left:22px; border-left:1px solid var(--g2); }
  .rdt-ix{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.03em; color:var(--g6); text-decoration:none; transition:color .12s; }
  .rdt-ix:hover{ color:var(--soft); } .rdt-ix.on{ color:var(--g7); }
  .rdt-ix .c{ font-family:var(--mono); font-size:10px; color:var(--fw-red); margin-left:4px; }
  .rdt-ix .cf{ font-family:var(--mono); font-size:10px; color:var(--fw-green,#1A7F37); margin-left:1px; }
  @media (max-width:760px){ .rdt-idx{ margin-left:0; padding-left:0; border-left:0; } }
  .rdt-el{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.03em; color:var(--g4); text-decoration:none; transition:color .12s; }
  .rdt-el .n{ font-family:var(--mono); font-size:10px; color:var(--g4); margin-right:3px; }
  .rdt-el:hover{ color:var(--soft); } .rdt-el.on{ color:var(--g7); } .rdt-el.on .n{ color:var(--ink-2); }

  /* element page · editorial body */
  .rdd{ max-width:980px; margin:0 auto; padding:46px 56px 100px; }
  .rdd.v3{ max-width:860px; }
  .rd-core{ position:relative; }
  .rd-core .crumb{ margin-bottom:12px; }
  .rd-core .el-num{ font-family:var(--mono); font-size:13px; color:var(--ink-2); }
  .rd-core .el-title{ font-family:var(--serif); font-weight:600; font-size:52px; line-height:1.04; letter-spacing:-.02em; color:var(--g7); margin:6px 0 18px; }
  .fg-lead{ font-family:var(--serif); font-size:18px; line-height:1.55; color:var(--ink-2); max-width:62ch; margin:0 0 30px; }
  .fg-lead .fg-thesis{ color:var(--g7); }
  .rdd.v3 .fg-lead{ font-size:21px; line-height:1.5; }   /* base ink-2; only the thesis line is darker */
  /* the four formula factors — 2×2, no box, notes pinned to each row's bottom */
  .fg-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 52px; border-top:2px solid var(--g7); }
  .fg-grid2 .fg-col{ display:flex; flex-direction:column; padding:22px 0; border-top:1px solid var(--g2); }
  .fg-grid2 .fg-col:nth-child(-n+2){ border-top:0; padding-top:24px; }
  .fg-name{ font-family:var(--serif); font-weight:600; font-size:21px; line-height:1.12; color:var(--g7); margin:0 0 12px; }
  .fg-desc{ font-family:var(--serif); font-size:15px; line-height:1.5; color:var(--g7); margin:0; }
  .fg-line{ display:block; } .fg-line + .fg-line{ margin-top:10px; }   /* more air at the paragraph change */
  .fg-note{ font-family:var(--serif); font-style:italic; font-size:13.5px; line-height:1.45; color:var(--ink-2); margin:auto 0 0; padding-top:18px; }
  .rdd .holds .hh{ font-weight:700; color:var(--g7); font-size:12px; letter-spacing:.16em; margin-bottom:11px; }

  /* a spine figure rendered in the editorial body (e.g. Action's force-field) */
  .entry-body.rd-fig{ margin:34px 0 8px; }

  /* move-grid — sequential "how to" moves (groups, no formula): numbered, labelled, no × */
  .mg-head{ font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); font-weight:700; margin:0 0 10px; }
  .mg{ display:grid; grid-template-columns:1fr 1fr; gap:0 52px; border-top:2px solid var(--g7); }
  .mg-cell{ display:flex; flex-direction:column; padding:22px 0; border-top:1px solid var(--g2); }
  .mg-cell:nth-child(-n+2){ border-top:0; padding-top:24px; }
  .mg-no{ font-family:var(--mono); font-size:11px; color:var(--ink-2); margin-bottom:7px; }
  .mg-name{ font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); margin-bottom:9px; }
  .mg-body{ font-family:var(--serif); font-size:15px; line-height:1.52; color:var(--g7); margin:0; }

  /* reads page (Systems / Networks) inside the editorial shell */
  .rdd.rdread{ max-width:880px; }
  .rdd.rdread .sysp{ max-width:none; }

  /* concept/research detail (reading) pages — cap the prose to the reading measure (~648px) */
  .rdd.rddoc{ max-width:760px; }
  .rdd.rddoc .rd-core .crumb{ margin-bottom:18px; }

  /* ===== Concepts matrix — concepts (rows) × seven chapters (columns), a dot where each applies ===== */
  .cm-main{ max-width:1040px; }
  .cm-lede{ font-family:var(--serif); font-size:18px; line-height:1.5; color:var(--ink-2); max-width:60ch; margin:2px 0 40px; }
  .cm{ width:100%; border-collapse:collapse; table-layout:fixed; }
  .cm thead th{ vertical-align:bottom; padding:0 0 14px; border-bottom:2px solid var(--g7); }
  .cm .cm-corner{ border-bottom:2px solid var(--g7); }
  .cm-ch{ width:54px; }
  .cm-ch a{ text-decoration:none; display:inline-flex; flex-direction:column; align-items:center; gap:10px; }
  .cm-ch .cm-chnm{ writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--g7); white-space:nowrap; }
  .cm-ch .cm-chn{ font-family:var(--mono); font-size:10px; color:var(--ink-2); }
  .cm-ch a:hover .cm-chnm{ color:var(--soft); }
  .cm-name{ text-align:left; font-weight:400; font-family:var(--serif); font-size:16px; color:var(--g7); padding:11px 18px 11px 0; border-bottom:1px solid var(--g2); }
  .cm-name a{ color:var(--g7); text-decoration:none; }
  .cm-name a:hover{ color:var(--soft); }
  .cm-name .cm-noclick{ color:var(--g6); }
  .cm-cell{ text-align:center; border-bottom:1px solid var(--g2); border-left:1px solid var(--g2); }
  .cm tbody tr:hover .cm-name, .cm tbody tr:hover .cm-cell{ background:var(--g1); }
  .cm-dot{ vertical-align:middle; }
  .cm-dot circle{ fill:var(--g7); }
  @media (max-width:760px){
    .cm-ch{ width:34px; } .cm-ch .cm-chnm{ font-size:10px; } .cm-name{ font-size:14px; }
  }

  /* researchers index — deduped, by-surname, people-only roll-call; SINGLE column with a
     fixed left A–Z jump rail (the rail never crowds the list's reading measure). */
  .rs-main{ max-width:920px; position:relative; }
  .rs-list{ border-top:2px solid var(--g7); padding-top:4px; max-width:600px; }
  .rs-row{ padding:10px 0; border-bottom:1px solid var(--g2); }
  .rs-name{ font-family:var(--serif); font-size:16px; line-height:1.3; color:var(--g7); text-decoration:none; transition:color .12s; }
  .rs-name:hover{ color:var(--soft); }
  .rs-tags{ display:block; margin-top:3px; }
  .rs-tag{ font-family:var(--sans); font-size:11px; letter-spacing:.01em; color:var(--ink-2); text-decoration:none; transition:color .12s; }
  .rs-tag:hover{ color:var(--soft); }
  .rs-tdot{ color:var(--g4); padding:0 6px; font-size:10px; }

  /* title + status legend share a baseline row; legend sits top-right */
  .rs-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--sp-16) var(--sp-24); }
  .rs-head .el-title{ margin-bottom:0; }
  /* status workflow palette — dull red/amber/green, used ONLY on status markers (build aid) */
  .rs-legend{ display:flex; flex-wrap:wrap; gap:var(--sp-8) var(--sp-16);
    background:var(--g0); border:1px solid var(--g2); padding:var(--sp-8) var(--sp-12); }
  .rs-leg{ font-family:var(--sans); font-size:11px; color:var(--ink-2); display:inline-flex;
    align-items:center; gap:6px; text-transform:uppercase; letter-spacing:.08em; }
  .rs-leg b{ font-weight:700; color:var(--g7); font-family:var(--mono); font-size:10px; letter-spacing:0; }
  .rs-leg.is-final b{ color:var(--fw-green,#1A7F37); }

  /* per-row + legend + page-chip status marker = a small filled dot + the status word */
  .rs-status{ font-family:var(--sans); font-size:9px; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:var(--ink-2); line-height:1; white-space:nowrap;
    display:inline-flex; align-items:center; gap:5px; }
  .rs-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:var(--g4); }
  /* status colours (dull) */
  .rs-status.is-drafted .rs-dot, .rs-leg.is-drafted .rs-dot{ background:#8A5247; }   /* dull red */
  .rs-status.is-reviewed .rs-dot, .rs-leg.is-reviewed .rs-dot{ background:#B5853F; }  /* dull amber */
  .rs-status.is-final .rs-dot, .rs-leg.is-final .rs-dot{ background:#6E8B53; }         /* dull green */
  /* blank = faint hollow ring */
  .rs-status.is-blank .rs-dot, .rs-leg.is-blank .rs-dot{ background:transparent; border:1px solid #C9CDD2; }
  .rs-status.is-blank{ color:var(--g5); }
  /* the row: name + marker on one line, tags beneath */
  .rs-row .rs-name{ margin-right:var(--sp-8); }
  .rs-row .rs-status{ vertical-align:middle; }

  /* sort + search controls — STICKY under the topbar so Sort + Search stay reachable while the
     list scrolls (the scroll container is .rd-page; topbar is sticky at top:0, ~95px tall). The
     ground background + hairline keep scrolling rows from showing through; z-index sits below the
     topbar (20) so it tucks cleanly under it. */
  .rs-controls{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
    gap:var(--sp-24); margin:var(--sp-16) 0 0;
    position:sticky; top:var(--cm-topbar-h, 94px); z-index:16; background:var(--ground);
    padding:var(--sp-12) 0 var(--sp-12); border-bottom:1px solid var(--g2); }
  .rs-seg{ display:inline-flex; border:1px solid var(--g3); }
  .rs-seg .btn{ border:none; border-right:1px solid var(--g3); padding:var(--sp-8) var(--sp-16);
    font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); background:var(--g0); }
  .rs-seg .btn:last-child{ border-right:none; }
  .rs-seg .btn[aria-pressed="true"]{ background:var(--soft); color:var(--g0); }
  .rs-seg .btn:not([aria-pressed="true"]):hover{ color:var(--g7); }
  .rs-search{ min-width:260px; flex:1 1 260px; max-width:360px; position:relative; }
  .rs-search .input{ padding-right:var(--sp-32); }
  .rs-clear{ position:absolute; right:8px; bottom:7px; width:22px; height:22px; display:none;
    align-items:center; justify-content:center; background:none; border:none; cursor:pointer;
    color:var(--ink-2); padding:0; }
  .rs-clear:hover{ color:var(--g7); }
  .rs-clear.on{ display:inline-flex; }
  .rs-count{ font-family:var(--sans); font-size:12px; color:var(--ink-2); margin:0 0 var(--sp-16); letter-spacing:.01em; }
  .rs-count b{ color:var(--g7); font-weight:600; }
  /* search-match affordances */
  .rs-hit{ display:block; font-family:var(--sans); font-size:11px; color:var(--ink-2); margin-top:2px; }
  .rs-hit em{ font-style:normal; color:var(--g7); font-weight:600; }
  .rs-row mark{ background:var(--belief-0); color:inherit; padding:0 1px; }
  /* concept-index: stub + unplaced treatments (quiet, non-link) */
  .rs-name.cm-stub{ color:var(--g6); cursor:default; }
  .cm-stubtag{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--g5); border:1px solid var(--g3); padding:1px 5px; margin-left:var(--sp-8); line-height:1.4; }
  .cm-unplaced{ font-family:var(--sans); font-size:11px; color:var(--g5); font-style:italic; }
  .rs-empty{ font-family:var(--serif); font-size:16px; color:var(--ink-2); padding:var(--sp-24) 0; }
  .rs-empty .btn-text{ font-size:13px; }
  /* by-chapter (framework) grouping */
  .rs-bychap .rs-list{ border-top:2px solid var(--g7); padding-top:var(--sp-12); margin-bottom:var(--sp-24); }
  .rs-grp{ margin:0 0 var(--sp-12); padding-top:var(--sp-16); }
  .rs-grp:first-child{ padding-top:0; }
  .rs-mvt{ font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.22em;
    text-transform:uppercase; color:var(--ink-2); margin:0 0 2px; }
  .rs-chap{ font-family:var(--serif); font-size:20px; font-weight:600; color:var(--g7);
    margin:0 0 var(--sp-8); padding-bottom:var(--sp-8); border-bottom:1px solid var(--g3); max-width:600px; }

  /* ---------- A–Z jump rail (researchers index) ----------
     Permanently on the LEFT and FIXED to the viewport, so it stays put while the list
     scrolls (the scroll container is .rd-page). It sits in the left margin and never
     overlaps the list's reading measure. (Ported from visual/proto-research-index.html.) */
  .az-rail{ position:fixed; left:max(14px, calc((100vw - 980px)/2 - 26px));
    top:50%; transform:translateY(-50%); z-index:15;
    display:flex; flex-direction:column; align-items:flex-start; gap:1px;
    padding:var(--sp-4) 0; }
  /* each rail cell = a fixed row so the red dot has a reserved gutter and the letters stay
     optically aligned whether or not a dot is showing */
  .az-cell{ display:flex; align-items:center; gap:5px; }
  /* the dot shares the letter's line-box and is centred on its optical centre */
  .az-cell .az-dot{ flex:0 0 auto; width:6px; height:6px; border-radius:50%;
    background:transparent; line-height:0; align-self:center; }
  .az-cell.az-active .az-dot{ background:#C8102E; }   /* the one active letter — the red dot */
  /* live letters — AA quiet text, soft on hover, --soft + bold for the active section */
  .az-rail a{ font-family:var(--mono); font-size:11px; line-height:1; letter-spacing:.02em;
    color:var(--ink-2); text-decoration:none; padding:2px 4px; cursor:pointer;
    transition:color var(--dur-fast) var(--ease); }
  .az-rail a:hover{ color:var(--soft); }
  .az-rail a.az-on{ color:var(--soft); font-weight:700; }
  .az-rail a:focus-visible{ outline:2px solid var(--soft); outline-offset:1px; }
  /* empty letters — dimmed, inert (g4 permitted on a non-text decorative mark) */
  .az-rail span.az-off{ font-family:var(--mono); font-size:11px; line-height:1; letter-spacing:.02em;
    color:var(--g4); padding:2px 4px; cursor:default; user-select:none; }
  /* framework mode: the jump rail carries chapter labels instead of letters */
  .az-rail.az-chap a{ font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; padding:6px 4px; white-space:nowrap; }
  .az-rail.az-chap a.az-on{ color:var(--soft); }
  /* anchor markers sit at the top of each surname-letter group; the sticky-topbar offset is
     applied in JS (jump + scroll-spy), so no CSS offset is needed here */
  .az-anchor{ position:relative; height:0; visibility:hidden; }
  /* below the breakpoint where the fixed rail would collide with the list, the rail becomes
     a slim horizontal scrubber pinned under the topbar */
  @media (max-width:1180px){
    .az-rail{ position:sticky; left:auto; top:118px; transform:none;
      flex-direction:row; flex-wrap:wrap; align-items:center; gap:0 2px;
      width:100%; background:var(--ground); border-bottom:1px solid var(--g2);
      padding:var(--sp-8) 0; margin:0 0 var(--sp-16); justify-content:flex-start; }
    .az-cell{ gap:3px; }
    .az-cell .az-dot{ width:5px; height:5px; }
    .az-rail a, .az-rail span.az-off{ padding:3px 4px; }
    .az-rail.az-chap a{ padding:3px 8px 3px 0; }
    .rs-main{ position:relative; }
  }
  @media (max-width:760px){ .rs-list{ max-width:none; } }

  /* cross-reference strip: the other chapters a shared concept also lives in */
  .xref{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 10px; margin:0 0 26px; }
  .xref-h{ font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
  .xref a{ font-family:var(--sans); font-size:13px; color:var(--g7); text-decoration:none; border-bottom:1px solid var(--g3); }
  .xref a:hover{ border-bottom-color:var(--g7); }

  /* concepts as a 2-column grid (reduces scroll) */
  .rdc-concepts{ margin-top:60px; border-top:2px solid var(--g7); padding-top:22px; }
  .rdc-concepts .r-h{ margin-bottom:14px; }
  .rdc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 48px; }
  .rdc-grid a{ display:block; text-decoration:none; padding:15px 0; border-top:1px solid var(--g2);
    font-family:var(--serif); font-size:18px; color:var(--g7); transition:padding-left .12s var(--ease); }
  .rdc-grid a:hover{ color:var(--soft); padding-left:6px; }
  .rdc-grid a.noclick{ color:var(--g4); cursor:default; }
  .rdc-grid a.active{ color:var(--soft); font-weight:600; }   /* the entry you're reading */

  /* researchers as a collapsed disclosure (+ sits right next to the label) */
  .rd-more .rdx{ border-top:1px solid var(--g2); }
  .rdx summary{ list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:10px; padding:18px 0;
    font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--g7); }
  .rdx summary::-webkit-details-marker{ display:none; }
  .rdx summary .ct{ font-family:var(--mono); font-weight:400; letter-spacing:0; color:var(--ink-2); }
  .rdx summary::after{ content:"+"; margin-left:2px; font-family:var(--mono); font-size:17px; color:var(--ink-2); }
  .rdx[open] summary::after{ content:"\2013"; }
  .rdx .rdx-body{ padding:2px 0 22px; }
  .rdx .rdx-body .research{ margin-top:0; }

  @media (max-width:900px){
    .rd-cols{ height:auto; padding:48px 20px 40px; }
    .rd-cols .grid{ grid-template-columns:1fr; }
    .rd-cols .col{ border-left:0; padding:18px 0 8px; }
    .rd-cols h1{ font-size:34px; }
    .rd-page{ height:auto; overflow:visible; }
    .rdt{ padding:20px 20px 0; }
    .rdd, .rdd.v3{ padding:32px 20px 80px; }
    .rd-core .el-title{ font-size:36px; }
    .fg-grid2{ grid-template-columns:1fr; }
    .fg-grid2 .fg-col:nth-child(2){ border-top:1px solid var(--g2); padding-top:22px; }
    .mg{ grid-template-columns:1fr; }
    .mg-cell:nth-child(2){ border-top:1px solid var(--g2); padding-top:22px; }
    .rdc-grid{ grid-template-columns:1fr; }
  }

  /* reference blocks inside an entry footer (seminal "Important reference" + cross-links) */
  .entry-extra .seminal-ref{ margin:2px 0 0; }
  .entry-extra .seminal-label, .entry-extra .also-ref-label{ display:block; font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin-bottom:5px; }
  .entry-extra .seminal-body{ font-family:var(--serif); font-size:15px; line-height:1.5; color:var(--g7); }
  /* researcher page (RS6): the two source sub-headings read identically — the eyebrow style */
  .rp-page .links-heading{ display:block; font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin:0 0 5px; }
  /* clear gap between the reference and the further-reading block */
  .rp-page .entry-extra .links{ margin-top:var(--sp-32); }
  .entry-extra .seminal-body .ref-roman{ font-style:normal; }
  .entry-extra .also-ref{ margin-top:18px; }
  .entry-extra .also-ref-list{ margin:0; padding-left:18px; }
  .entry-extra .also-ref-list a{ color:var(--soft); cursor:pointer; text-decoration:none; }
  .entry-extra .also-ref-list a:hover{ color:var(--g7); }

  /* =========================================================================
     RESEARCHER PAGE (.rp-*) — promoted from proto-researcher-lewin-schema.html
     The settled production design: ONE unified centred column (~720px), red
     section heads, RS2 two-ideas grid + text prose, RS3 figures STACKED, RS4
     application cards, RS5 lineage, RS7/RS8 collapsed expandable boxes (+ toggle).
     Data-driven via renderResearcherPage(); NO scaffolding ships (see .proto-on
     block below for the dev-only RS labels). The accent crimson is page-scoped.
     ========================================================================= */
  .rp-page{ --rp-red:#C8102E; --rp-mark:rgba(200,16,46,.16); --rp-mark-edge:rgba(200,16,46,.22); --rp-highlight:rgba(255,213,79,.38);
    --rp-measure:720px; max-width:1140px; margin:0 auto; padding:46px 40px 100px; position:relative; }
  .rp-page mark{ background:var(--rp-highlight); color:inherit; padding:0 1px; }
  .rp-page .rd-core{ max-width:var(--rp-measure); margin:0 auto; }
  /* build-mode dev bar (status chip + "Create proto to edit page") — top-right of the page */
  .rp-devbar{ position:absolute; top:20px; right:24px; z-index:5; display:flex; align-items:center; gap:12px; }
  /* page-chip status = dot + word, same colour code as the index markers */
  .rp-status{ font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.12em;
    text-transform:uppercase; padding:5px 10px; border:1px solid var(--g2); color:var(--ink-2);
    display:inline-flex; align-items:center; gap:6px; background:var(--g0); }
  .rp-status .rs-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:var(--g4); }
  .rp-status.is-drafted .rs-dot{ background:#8A5247; }   /* dull red */
  .rp-status.is-reviewed .rs-dot{ background:#B5853F; }  /* dull amber */
  .rp-status.is-final .rs-dot{ background:#6E8B53; }     /* dull green */

  /* RED section heads — RS2/RS4 .r-h, RS3 .rp-modhead, RS7/RS8 summaries */
  .rp-page .r-h, .rp-page .rp-modhead, .rp-page .rp-exp > summary{ color:var(--rp-red); }

  /* each module is a positioning context for the proto-mode margin label */
  .rp-mod{ position:relative; }
  .rp-mod + .rp-mod{ margin-top:40px; }

  /* RS1 bio-anchor */
  .rp-who{ font-family:var(--serif); font-style:italic; font-size:20px; line-height:1.55; color:var(--ink-2); margin:0 0 10px; max-width:var(--rp-measure); }
  .rp-lifespan{ font-family:var(--mono); font-size:13px; color:var(--ink-2); margin:0 0 18px; }

  /* RS1 — bio header: name/identity/dates left, portrait right */
  .rp-bio-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-48); margin:0 0 8px; }
  .rp-bio-header-text{ flex:1; min-width:0; }
  /* long multi-name titles must wrap within the column, never overflow into the portrait */
  .rp-bio-header-text h1{ overflow-wrap:break-word; }
  /* RS1 — researcher portrait photo. The wrap is pinned to the image width so a long
     photo credit wraps under it instead of stretching the column and squeezing the name. */
  .rp-portrait-wrap{ margin:8px 0 0; flex-shrink:0; width:150px; }
  .rp-portrait{ display:block; width:150px; filter:grayscale(1); }
  /* multi-author cards: two portraits side by side, each with a small name */
  .rp-portrait-wrap.rp-multi{ width:auto; }
  .rp-portraits{ display:flex; gap:var(--sp-12); }
  .rp-portrait-item{ width:108px; }
  .rp-portrait-item .rp-portrait{ width:108px; height:130px; object-fit:cover; object-position:center top; }
  .rp-portrait-name{ display:block; font-family:var(--mono); font-size:10px; line-height:1.3; color:var(--ink-2); margin-top:5px; }
  .rp-portrait-wrap.rp-multi .rp-portrait-credit{ max-width:none; }
  .rp-portrait-credit{ font-family:var(--mono); font-size:10px; line-height:1.4; color:var(--g4); margin-top:6px; max-width:150px; letter-spacing:.02em; }
  /* image attribution — a very faint credit line at the foot of the page */
  .rp-attrib{ font-family:var(--mono); font-size:10.5px; line-height:1.5; color:var(--g4); margin:40px 0 0; padding-top:14px; border-top:1px solid var(--g2); }
  .rp-attrib-h{ text-transform:uppercase; letter-spacing:.12em; font-size:9.5px; color:var(--g4); margin-right:10px; }

  /* RS2 — the "N ideas" two-up grid (crimson in the 01/02 indices) + prose */
  .rp-two-ideas{ margin:34px 0 8px; }
  .rp-ti-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--g3); }
  .rp-ti-grid.rp-ti-grid--solo{ grid-template-columns:1fr; }
  .rp-ti{ padding:20px 28px 22px 0; border-right:1px solid var(--g2); }
  .rp-ti:last-child{ border-right:0; padding-left:28px; padding-right:0; }
  .rp-ti-n{ font-family:var(--mono); font-size:11px; color:var(--ink-2); letter-spacing:.08em; font-weight:700; }
  .rp-ti-t{ font-family:var(--serif); font-size:21px; line-height:1.2; color:var(--g7); margin:6px 0 8px; }
  .rp-ti-d{ font-family:var(--sans); font-size:14px; line-height:1.55; color:var(--ink-2); margin:0; }
  @media (max-width:680px){ .rp-ti-grid{ grid-template-columns:1fr; } .rp-ti{ border-right:0; border-bottom:1px solid var(--g2); padding:18px 0; } .rp-ti:last-child{ padding-left:0; } }
  /* RS2 ideas as a vertical in-line ledger (ideasLayout:"list") — distinctive enumerable ideas, one per row */
  .rp-ti-list{ border-top:1px solid var(--g3); max-width:var(--rp-measure); }
  .rp-il{ display:grid; grid-template-columns:30px minmax(120px,180px) 1fr; gap:0 20px; align-items:baseline; padding:13px 0; border-bottom:1px solid var(--g2); }
  .rp-il-n{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--ink-2); }
  .rp-il-t{ font-family:var(--serif); font-size:18px; line-height:1.25; color:var(--g7); }
  .rp-il-d{ font-family:var(--sans); font-size:14px; line-height:1.55; color:var(--ink-2); }
  @media (max-width:600px){ .rp-il{ grid-template-columns:26px 1fr; } .rp-il-d{ grid-column:2; margin-top:3px; } }

  /* a crimson lead-rule on the key equilibrium paragraph (RS2) */
  .rp-accent{ border-left:3px solid var(--rp-red); padding:4px 0 4px 22px; margin:22px 0; }
  .rp-accent p{ margin:0; }

  /* the highlighter device — a translucent marker swipe behind a phrase (AA reads through) */
  .rp-mk{ position:relative; }
  .rp-mk > span{ position:relative; z-index:1; }
  .rp-mk::before{ content:""; position:absolute; z-index:0; left:-.18em; right:-.30em; top:.04em; bottom:-.02em;
    background:linear-gradient(98deg, transparent 0, var(--rp-mark) 3%, var(--rp-mark-edge) 12%, var(--rp-mark) 22%, var(--rp-mark) 78%, var(--rp-mark-edge) 90%, var(--rp-mark) 97%, transparent 100%);
    transform:skewX(-3deg) rotate(-.5deg);
    clip-path:polygon(0 8%,4% 2%,22% 6%,51% 1%,78% 7%,96% 2%,100% 9%,100% 86%,95% 96%,70% 90%,44% 98%,18% 91%,3% 97%,0 88%);
    pointer-events:none; }

  /* RS3 — the single home for graphics; sub-figures STACK vertically */
  .rp-viz{ margin-top:8px; }
  .rp-viz .rp-sub + .rp-sub{ margin-top:44px; }
  .rp-modhead{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; margin:0 0 6px; }
  .rp-img{ margin:0; } .rp-img img{ width:100%; height:auto; display:block; }
  /* inlined SVG figure — sits on the same panel as the unfreeze image (its PNG bakes in
     this faint #EFF3F6 ground), so the transparent SVG doesn't dissolve into the page */
  .rp-svg{ margin:0; background:rgb(239,243,246); padding:16px 20px; } .rp-svg svg{ width:100%; height:auto; display:block; }
  /* figure caption — a warm explanatory paragraph beneath the sketch (Sketchplanations-style) */
  .rp-figcap{ font-family:var(--serif); font-size:15px; line-height:1.62; color:var(--ink); max-width:none; margin:14px 0 0; }
  /* A/B figure options — the toggle sits to the LEFT of the figure and stays put
     (sticky) so it remains visible while a tall figure fills the screen */
  .rp-optgroup{ display:flex; align-items:flex-start; gap:var(--sp-16); }
  .rp-optbar{ flex:0 0 auto; flex-direction:column; position:sticky; top:90px; align-self:flex-start; }
  .rp-optbar .btn{ border-right:none; border-bottom:1px solid var(--g3); }
  .rp-optbar .btn:last-child{ border-bottom:none; }
  .rp-optbtn{ min-width:44px; cursor:pointer; }
  .rp-opt{ display:none; flex:1 1 auto; min-width:0; }
  .rp-opt.is-on{ display:block; }
  /* narrow screens: fall back to the toggle stacked above the figure */
  @media (max-width:700px){
    .rp-optgroup{ flex-direction:column; }
    .rp-optbar{ flex-direction:row; position:static; margin:0 0 var(--sp-12); }
    .rp-optbar .btn{ border-right:1px solid var(--g3); border-bottom:none; }
    .rp-optbar .btn:last-child{ border-right:none; }
  }
  .rp-page .rd-fig{ margin:8px 0; max-width:640px; }
  .rp-page .rp-viz .entry-body{ max-width:none; }
  @media (max-width:980px){ .rp-viz .rp-sub + .rp-sub{ margin-top:32px; border-top:1px solid var(--g2); padding-top:20px; } }
  /* RS3 gallery — all sketch variants side by side (no toggle), then shared theory below.
     The row breaks out wider than the reading column to use the laptop width. */
  .rp-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-24); align-items:start;
    width:min(1180px, calc(100vw - 48px)); margin-left:50%; transform:translateX(-50%); }
  .rp-gallery .rp-svg{ padding:12px 14px; }
  .rp-gcap{ font-family:var(--serif); font-size:14.5px; line-height:1.55; color:var(--ink-2); margin:12px 4px 0; }
  /* column count follows the number of figures so a 2- or 1-up gallery stays centred on the page */
  .rp-gallery--2{ grid-template-columns:repeat(2,1fr); width:min(960px, calc(100vw - 48px)); }
  .rp-gallery--1{ grid-template-columns:1fr; width:min(560px, calc(100vw - 48px)); }
  .rp-theory{ max-width:720px; margin:38px auto 0; }
  @media (max-width:860px){
    .rp-gallery{ grid-template-columns:1fr; gap:var(--sp-32); width:auto; margin-left:0; transform:none; }
    .rp-theory{ margin-top:28px; }
  }

  /* RS4 — applied-to-A2A: lede + the appears-in chapter cards */
  .rp-bigdiv{ border-top:1px solid var(--g3); margin:46px 0 30px; }
  .rp-applied-lede{ font-family:var(--serif); font-size:18px; line-height:1.5; color:var(--soft); max-width:var(--rp-measure); margin:8px 0 24px; }
  .rp-light-list{ margin:10px 0 12px 0; padding-left:20px; }
  .rp-light-list li{ font-family:var(--serif); font-size:16px; line-height:1.6; color:var(--g7); margin-bottom:4px; list-style:disc; }
  .rp-pquote{ border-left:2px solid var(--g3); margin:0 0 24px; padding:2px 0 2px 20px; max-width:var(--rp-measure); }
  .rp-pquote p{ font-family:var(--serif); font-style:italic; font-size:17px; line-height:1.5; color:var(--soft); margin:0 0 4px; }
  .rp-pquote cite{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); font-style:normal; }
  .rp-appears-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:var(--rp-measure); }
  @media (max-width:640px){ .rp-appears-grid{ grid-template-columns:1fr; } }
  /* RS2 formula treatment — equation + variable glossary + operation line (Beckhard-Harris) */
  .rp-formula{ border-top:1px solid var(--g3); border-bottom:1px solid var(--g3); padding:24px 0 22px; margin:28px 0; max-width:var(--rp-measure); }
  .rp-formula-eb{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--rp-red); margin:0 0 16px; }
  .rp-formula-eq{ font-family:var(--serif); font-size:28px; line-height:1.1; letter-spacing:.01em; color:var(--g7); margin:0 0 20px; }
  .rp-formula-vars{ margin:0 0 18px; }
  .rp-formula-vars > div{ display:grid; grid-template-columns:34px 1fr; gap:0 16px; align-items:baseline; padding:6px 0; border-bottom:1px solid var(--g2); }
  .rp-formula-vars dt{ font-family:var(--mono); font-size:14px; font-weight:700; color:var(--g7); }
  .rp-formula-vars dd{ font-family:var(--sans); font-size:14px; line-height:1.5; color:var(--ink-2); margin:0; }
  .rp-formula-note{ font-family:var(--serif); font-style:italic; font-size:16px; line-height:1.5; color:var(--soft); margin:0; }
  /* RS4 applied — plain explanatory list (no clickable cards / jump-off pages) */
  .rp-areas{ max-width:var(--rp-measure); border-top:1px solid var(--g3); }
  .rp-area{ padding:18px 0; border-bottom:1px solid var(--g2); }
  .rp-area-h{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
  .rp-area-el{ font-family:var(--serif); font-weight:600; font-size:19px; line-height:1.15; letter-spacing:-.01em; color:var(--g7); }
  .rp-area-mv{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); }
  .rp-area-use{ font-family:var(--sans); font-size:15px; line-height:1.6; color:var(--soft); margin:7px 0 0; max-width:var(--rp-measure); }
  .rp-ac{ display:block; text-decoration:none; background:var(--g0); border:1px solid var(--g3); padding:20px 22px 18px;
    transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
  .rp-ac:hover{ border-color:var(--soft); }
  .rp-ac:focus-visible{ outline:2px solid var(--soft); outline-offset:2px; }
  .rp-ac-mv{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-2); text-transform:uppercase; }
  .rp-ac-el{ font-family:var(--serif); font-weight:600; font-size:22px; line-height:1.15; letter-spacing:-.015em; color:var(--g7); margin:6px 0 8px; }
  .rp-ac-use{ font-family:var(--sans); font-size:14px; line-height:1.55; color:var(--ink-2); margin:0 0 14px; }
  .rp-ac-go{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--soft); }
  .rp-ac:hover .rp-ac-go{ text-decoration:underline; }
  /* RS4 applied figure — sits ABOVE the appears-in cards, full column width */
  .rp-applied-fig{ margin:20px 0 32px; max-width:none; }
  .rp-applied-fig .rp-modhead{ text-align:left; }
  .rp-applied-fig .rp-svg svg{ width:100%; height:auto; display:block; }

  /* RS5 — connection-to-others (lineage line) */
  .rp-lineage{ font-family:var(--sans); font-size:14px; line-height:1.6; color:var(--ink-2);
    border-top:1px solid var(--g2); margin-top:8px; padding-top:18px; max-width:var(--rp-measure); }
  .rp-lineage b{ color:var(--g7); font-weight:600; }

  /* RS6 — the-source footer (reuses .entry-extra / .seminal-ref / .links) */
  .rp-page .entry-extra{ max-width:var(--rp-measure); }

  /* RS7 / RS8 — expandable deepening boxes, collapsed by default; +/- line toggle */
  .rp-exp{ background:var(--g0); border:1px solid var(--g3); margin:14px 0 8px; max-width:var(--rp-measure); }
  .rp-exp > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 20px;
    font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; transition:background var(--dur-fast) var(--ease); }
  .rp-exp > summary::-webkit-details-marker{ display:none; }
  .rp-exp > summary:hover{ background:var(--g1); }
  .rp-exp > summary:focus-visible{ outline:2px solid var(--soft); outline-offset:-2px; }
  .rp-q{ flex:1 1 auto; }
  .rp-toggle{ position:relative; flex:0 0 auto; width:22px; height:22px; border:1px solid var(--soft); display:inline-block; }
  .rp-toggle::before, .rp-toggle::after{ content:""; position:absolute; left:50%; top:50%; background:var(--soft); transform:translate(-50%,-50%); }
  .rp-toggle::before{ width:11px; height:1.5px; }
  .rp-toggle::after{ width:1.5px; height:11px; transition:transform var(--dur-fast) var(--ease); }
  .rp-exp[open] .rp-toggle::after{ transform:translate(-50%,-50%) scaleY(0); }
  .rp-body{ padding:2px 20px 22px; border-top:1px solid var(--g2); }
  @media (prefers-reduced-motion: reduce){ .rp-toggle::after{ transition:none; } }

  /* RS7 the-evidence — a quiet bordered study card */
  .rp-evidence{ background:var(--g0); border-left:3px solid var(--g6); padding:18px 0 4px 22px; margin:18px 0 0; max-width:660px; }
  .rp-ev-eyebrow{ font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); margin:0 0 10px; }
  .rp-evidence p{ font-family:var(--serif); font-size:16px; line-height:1.55; color:var(--g7); margin:0 0 12px; }
  .rp-evidence p:last-child{ margin-bottom:0; }
  .rp-ev-result{ font-family:var(--serif); font-style:italic; }
  .rp-evidence b{ font-weight:600; color:var(--g7); }

  /* RS8 the-limits — honest critique, slightly recessive */
  .rp-limits{ margin:16px 0 0; max-width:660px; }
  .rp-limits p{ font-family:var(--serif); font-size:16px; line-height:1.6; color:var(--g6); margin:0; }
  .rp-limits p b{ color:var(--g7); font-weight:600; }

  @media (max-width:900px){ .rp-page{ padding:32px 20px 80px; } }

  /* ---- PROTO MODE (dev only) — inactive unless <body class="proto-on"> ----
     Surfaces each module's RS code + name in the left margin, plus a fixed
     PROTOTYPE chip. Never present in the live app; the "Create proto" button
     clones the document with this class added to export a scaffolded proto. */
  body.proto-on .rp-page{ padding-left:210px; }
  body.proto-on .rp-mod[data-rs]::before{
    content:attr(data-rs) "  " attr(data-rsname);
    position:absolute; top:2px; right:100%; width:150px; margin-right:26px; text-align:right;
    font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.04em; line-height:1.35;
    color:var(--g4); white-space:pre; pointer-events:none; user-select:none; }
  body.proto-on .rp-sub[data-rs]{ position:relative; }
  body.proto-on .rp-sub[data-rs]::before{
    content:attr(data-rs);
    position:absolute; top:1px; right:100%; width:150px; margin-right:26px; text-align:right;
    font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.06em; color:var(--g5);
    pointer-events:none; user-select:none; }
  body.proto-on::after{
    content:"PROTOTYPE · schema-annotated"; position:fixed; top:0; right:0; z-index:50;
    font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--g0);
    background:var(--soft); padding:5px 12px; }
  @media (max-width:1179px){
    body.proto-on .rp-page{ padding-left:40px; }
    body.proto-on .rp-mod[data-rs]::before, body.proto-on .rp-sub[data-rs]::before{
      position:static; display:inline-block; width:auto; margin:0 0 10px; text-align:left;
      border:1px solid var(--g3); background:var(--g1); padding:3px 9px; }
  }


/* ── Concept Overview (.co-*) ─────────────────────────────────────────────── */
.co-main{ display:flex; flex-direction:column; }
.co-listlink{ font-family:var(--sans); font-size:13px; color:var(--ink-2); text-decoration:none; letter-spacing:.02em; white-space:nowrap; }
.co-listlink:hover{ color:var(--g7); }
.co-section{ margin-bottom:48px; }
.co-el-head{ display:flex; align-items:baseline; gap:12px; border-bottom:1.5px solid var(--g7); padding-bottom:10px; margin-bottom:14px; }
.co-el-num{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--ink-2); }
.co-el-name{ font-family:var(--serif); font-size:21px; font-weight:600; color:var(--g7); letter-spacing:-.01em; }
.co-el-mv{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--g4); margin-left:auto; font-family:var(--sans); }
.co-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:6px; }
.co-tile{ background:var(--g0); border:1px solid var(--g2); padding:11px 13px 12px; cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease); user-select:none; }
.co-tile:hover{ border-color:var(--g5); background:#fafafa; }
.co-tile.open{ border-color:var(--g7); }
.co-tile-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.co-num{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--g4); }
.co-status{ font-family:var(--sans); font-size:9px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; }
.co-status.is-drafted{ color:var(--g5); }
.co-status.is-reviewed{ color:#B91C1C; }
.co-status.is-final{ color:#166534; }
.co-title{ font-family:var(--sans); font-size:13px; font-weight:600; color:var(--g7); line-height:1.35; }
.co-xref{ font-size:10px; color:var(--g4); margin-top:4px; font-family:var(--sans); }
.co-panel{ display:none; grid-column:1/-1; border:1.5px solid var(--g7); background:var(--g0);
  padding:20px 24px 22px; margin-top:2px; }
.co-panel.open{ display:block; }
.co-panel-top{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; }
.co-panel-num{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--g4); }
.co-panel-close{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2);
  cursor:pointer; background:none; border:none; font-family:var(--sans); padding:0; }
.co-panel-close:hover{ color:var(--g7); }
.co-panel-title{ font-family:var(--serif); font-size:20px; font-weight:600; color:var(--g7); margin-bottom:12px; line-height:1.25; }
.co-panel-summary{ font-family:var(--serif); font-size:14px; line-height:1.7; color:var(--g6); margin-bottom:4px; }
.co-panel-foot{ display:flex; justify-content:flex-end; margin-top:14px; }
.co-detail-btn{ display:inline-block; font-family:var(--sans); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; font-weight:600; color:var(--ink-2); text-decoration:none;
  border-bottom:1px solid var(--g3); padding-bottom:1px; }
.co-detail-btn:hover{ color:var(--g7); border-color:var(--g7); }
.co-detail-btn.is-stub{ color:var(--g4); border-color:transparent; cursor:default; }

/* ===========================================================================
   BOOKS  (#/books) — the shelf behind the framework.
   Covers are the only colour on the page; everything around them stays on the
   grayscale ramp so the artwork carries the difference. White cards on the
   faint ground, hairline borders, zero radius, no shadows (§8). Spacing comes
   off the 8-pt scale. Follows the researcher index for its head/controls, so
   the two index pages read as one family.
   =========================================================================== */
.bk-lede{ font-size:19px; line-height:1.6; color:var(--soft); max-width:640px;
  margin:var(--sp-16) 0 var(--sp-24); }
.bk-lede b{ font-weight:600; color:var(--g7); }

.bk-grp{ margin:var(--sp-48) 0 0; }
.bk-h{ font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--g7); margin:0 0 var(--sp-4);
  padding-bottom:var(--sp-8); border-bottom:1px solid var(--g3);
  display:flex; align-items:baseline; gap:var(--sp-8); }
.bk-h-n{ font-family:var(--mono); font-size:11px; font-weight:400; color:var(--ink-2);
  letter-spacing:0; }
.bk-h-c{ margin-left:auto; font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:0; color:var(--ink-2); }
.bk-grp-lede{ font-size:14px; color:var(--ink-2); margin:var(--sp-8) 0 0; }

.bk-grid{ display:grid; gap:var(--sp-24);
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  margin-top:var(--sp-24); }

.bk-card{ display:block; text-decoration:none; color:inherit;
  transition:transform var(--dur-fast) var(--ease); }
.bk-cov{ display:block; background:var(--g0); border:1px solid var(--g3);
  padding:var(--sp-8); }
/* the hairline matters: several covers are near-white and would otherwise float
   edgeless on the white card (Bruner, Boyd, MacIntyre) */
.bk-img{ display:block; width:100%; aspect-ratio:2/3; object-fit:contain;
  background:var(--g0); border:1px solid var(--g2); }
/* no cover found — a typographic card on the same footprint, never a gap */
.bk-noimg{ display:flex; flex-direction:column; justify-content:center; gap:var(--sp-8);
  padding:var(--sp-16); border:1px solid var(--g2); background:var(--g1); }
.bk-noimg-t{ font-size:15px; line-height:1.3; color:var(--g7); }
.bk-noimg-a{ font-family:var(--sans); font-size:11px; color:var(--ink-2); }

.bk-meta{ display:block; margin-top:var(--sp-12); }
.bk-t{ display:block; font-size:15px; line-height:1.35; color:var(--g7); }
.bk-a{ display:block; font-family:var(--sans); font-size:12px; color:var(--ink-2);
  margin-top:var(--sp-4); }
.bk-y{ display:block; font-family:var(--mono); font-size:11px; color:var(--ink-2);
  margin-top:var(--sp-4); }
.bk-own{ font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; }
/* the reason a framework-weight book earns its place — only shown on those cards */
.bk-why{ display:block; font-size:13px; line-height:1.45; color:var(--soft);
  margin-top:var(--sp-8); padding-left:var(--sp-8);
  border-left:2px solid var(--g7); }

/* framework weight reads as a full-ink edge on the cover, not a badge */
.bk-card.is-weight .bk-cov{ border-color:var(--g7); border-left-width:4px; }

.bk-card:hover .bk-t{ text-decoration:underline; text-underline-offset:2px; }
.bk-card:hover .bk-cov{ border-color:var(--g7); }
.bk-card:focus-visible{ outline:2px solid var(--soft); outline-offset:3px; }

@media (max-width:520px){
  .bk-grid{ grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:var(--sp-16); }
  .bk-lede{ font-size:17px; }
}
@media (prefers-reduced-motion:reduce){ .bk-card{ transition:none; } }